improved UI Design

src/App.tsx

@@ -114,12 +114,12 @@ const App: React.FC = () => {
         <Route path='/gallery-details' element={<GalleryDetailsPage />} />
         <Route path='*' element={<NotFoundPage />} />
       </Routes>
-      <ConditionalFooter />
+      {/* <ConditionalFooter /> */}
     </Router>
   );
 };
-const ConditionalFooter: React.FC = () => {
-  const location = useLocation();
-  return location.pathname === '/' ? <Footer /> : null;
-};
+// const ConditionalFooter: React.FC = () => {
+//   const location = useLocation();
+//   return location.pathname === '/' ? <Footer /> : null;
+// };
 export default App;

src/components/AboutUsPage.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import BackToTopButton from './BackToTop';
 import { FaGithub } from 'react-icons/fa';
-
+import Footer from './Footer';
 // Styled component for the main container of the About Us page
 import styled from 'styled-components';
 
@@ -13,7 +13,6 @@ const AboutUsContainer = styled.div`
   border-radius: 15px; // Rounded corners
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); // Shadow for depth
   position: relative; // For pseudo-element positioning
-
   @media (max-width: 600px) {
     padding: 20px; // Adjust padding for smaller screens
   }
@@ -182,10 +181,13 @@ const AboutUsPage: React.FC = () => {
   return (
     <div
       style={{
-        background: `url('/path/to/A_detailed_dark_blue_grid_background_with_square_b.png') no-repeat center center fixed`, // Set the background image
+        background: 'black',
         backgroundSize: 'cover', // Ensure the background image covers the entire screen
         minHeight: '100vh', // Set the minimum height of the page to the full viewport height
+        width: '100vw', // Set the minimum width of the page to the full viewport
         padding: '20px',
+        // marginTop: '85px',   // Add space between navbar and content
+        marginBottom: '0',
       }}
     >
       <AboutUsContainer>
@@ -248,116 +250,11 @@ const AboutUsPage: React.FC = () => {
           </SocialLinks>
         </AboutUsFooter>
       </AboutUsContainer>
+
+      {/* Footer */}
+      <Footer />
     </div>
   );
-  return (
-    <div className='min-h-screen font-sans bg-gradient-to-br from-gray-800 via-gray-900 to-black text-white'>
-      <BackToTopButton />
-      <div style={pageContainerStyle}>
-        <div style={aboutContainerStyle}>
-          <h1 style={headingStyle}>About Us</h1>
-          <p style={paragraphStyle}>
-            At <strong>GlassyUI-Components</strong>, we are more than just a
-            library. We are a community-driven organization dedicated to making
-            a meaningful impact in the world of web development. Our mission is
-            clear, to unite creators, foster collaboration, and pave the way for
-            a brighter future through innovation.
-          </p>
-          <h2 style={subheadingStyle}>Who We Welcome:</h2>
-          <ul style={listStyle}>
-            <li style={listItemStyle}>
-              <strong>Developers</strong>: Whether you're just starting out or a
-              seasoned expert, your skills can help shape our offerings.
-            </li>
-            <li style={listItemStyle}>
-              <strong>Designers</strong>: Bring your unique vision and
-              creativity to enhance our beautiful glassmorphism components.
-            </li>
-            <li style={listItemStyle}>
-              <strong>Contributors</strong>: If you share our passion for
-              building stunning user experiences, we invite you to join our
-              journey.
-            </li>
-          </ul>
-          <p style={paragraphStyle}>
-            Together, we can achieve incredible things! Let's collaborate,
-            innovate, and transform ideas into reality. Join us in crafting a
-            more beautiful and functional web for everyone.
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const pageContainerStyle: React.CSSProperties = {
-  marginTop: '100px',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  height: '100vh',
-  backgroundColor: '#3f434a',
-  padding: '0 20px',
-};
-
-const aboutContainerStyle: React.CSSProperties = {
-  backgroundColor: 'rgba(43, 48, 60, 0.85)',
-  color: 'white',
-  padding: '40px',
-  borderRadius: '20px',
-  maxWidth: '800px',
-  textAlign: 'center',
-  boxShadow: '0px 15px 30px rgba(0, 0, 0, 0.2)',
-  backdropFilter: 'blur(10px)',
-  transition: 'transform 0.3s ease',
-};
-
-const headingStyle: React.CSSProperties = {
-  color: '#fde047',
-  fontSize: '40px',
-  marginBottom: '20px',
-  fontWeight: '700',
-  textShadow: '2px 2px 4px rgba(0, 0, 0, 0.3)',
-};
-
-const paragraphStyle: React.CSSProperties = {
-  fontSize: '18px',
-  lineHeight: '1.8',
-  marginBottom: '20px',
-  fontWeight: '300',
-  letterSpacing: '0.5px',
-  color: '#f0f0f0',
-};
-
-const subheadingStyle: React.CSSProperties = {
-  color: '#fde047',
-  fontSize: '30px',
-  marginTop: '40px',
-  marginBottom: '20px',
-  fontWeight: '600',
-  textShadow: '1px 1px 3px rgba(0, 0, 0, 0.2)',
-};
-
-const listStyle: React.CSSProperties = {
-  listStyleType: 'none',
-  padding: 0,
-  margin: '20px 0',
-  textAlign: 'left',
-};
-
-const listItemStyle: React.CSSProperties = {
-  marginBottom: '15px',
-  fontSize: '18px',
-  lineHeight: '1.8',
-  paddingLeft: '20px',
-  position: 'relative',
-  fontWeight: '400',
-  color: '#e1e1e1',
-  transition: 'color 0.2s ease',
-};
-
-const listItemStyleHover: React.CSSProperties = {
-  color: '#fde047',
 };
 
 export default AboutUsPage; // Exporting the component

src/components/ContributorsPage.tsx

@@ -7,6 +7,7 @@ import AOS from 'aos';
 import 'aos/dist/aos.css';
 
 import { HiOutlineChevronDoubleDown } from 'react-icons/hi2';
+import Footer from './Footer';
 
 interface Contributor {
   id: number;
@@ -225,6 +226,12 @@ export default function Component() {
           >
             Shaping the future of GlasslyUI-Components, one commit at a time
           </motion.p>
+          {/* Add margin to space the button from the paragraph */}
+          <div className='mt-6'>
+            <button className='px-4 py-2 bg-white text-black rounded-full shadow-md transition-all duration-300 text-[12px] font-bold mt-5'>
+              Become a Contributor
+            </button>
+          </div>
         </div>
       </section>
 
@@ -360,13 +367,15 @@ export default function Component() {
             />
             <button
               type='submit'
-              className='px-8 py-3 bg-primary text-white font-bold rounded-full shadow-lg hover:bg-primary/80 transition duration-300 ease-in-out'
+              className='px-8 py-3 bg-primary text-white font-bold rounded-full shadow-lg hover:bg-primary/80 transition duration-300 ease-in-out bg-blue-600'
             >
               Get Started
             </button>
           </form>
         </div>
       </section>
+      {/* Footer section */}
+      <Footer />
     </div>
   );
 }