update

.gitignore

@@ -26,3 +26,8 @@ data.db
 
 # Ignore node_modules
 node_modules
+
+#Ignore compressed things and build
+*.zip
+*.tar.gz
+build

frontend/src/pages/Contact.jsx

@@ -104,12 +104,12 @@ const Container = styled.div`
   box-sizing: border-box;
 `
 
-const Title = styled.h1`
-  font-size: 2.5rem;
-  font-weight: bold;
-  text-align: center;
-  margin-bottom: 2rem;
-`
+// const Title = styled.h1`
+//   font-size: 2.5rem;
+//   font-weight: bold;
+//   text-align: center;
+//   margin-bottom: 2rem;
+// `
 
 const Grid = styled.div`
   display: grid;

frontend/src/sections/Header.jsx

@@ -49,6 +49,7 @@ const DesktopMenu = styled.nav`
   @media (min-width: 768px) {
     display: flex;
     gap: 1rem;
+    position: relative;
   }
 `;
 
@@ -57,6 +58,7 @@ const MenuLink = styled(Link)`
   padding: 0.5rem 2rem;
   text-decoration: none;
   position: relative;
+  cursor: pointer;
 
   @media (min-width: 992px) {
     padding: 0.5rem 4rem;
@@ -78,6 +80,35 @@ const MenuLink = styled(Link)`
   `}
 `;
 
+// Dropdown Menu
+const DropdownMenu = styled.div`
+  position: absolute;
+  background: rgba(0, 0, 0, 0.9);
+  border-radius: 5px;
+  top: 100%;
+  left: 0;
+  min-width: 150px;
+  display: ${(props) => (props.$isOpen ? "block" : "none")};
+  z-index: 1000;
+  
+  a {
+    display: block;
+    padding: 0.5rem;
+    color: white;
+    text-decoration: none;
+    
+    &:hover {
+      background: #333;
+    }
+  }
+`;
+
+const ContactWrapper = styled.div`
+  position: relative;
+  cursor: pointer;
+`;
+
+// Mobile Menu
 const MobileMenuButton = styled.button`
   display: block;
   background: none;
@@ -126,23 +157,32 @@ const MobileMenu = styled.nav`
 
 const Header = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const location = useLocation();
-  const menuRef = useRef(null); // Ref for the menu
-  const buttonRef = useRef(null); // Ref for the button
+  const menuRef = useRef(null);
+  const buttonRef = useRef(null);
+  const dropdownRef = useRef(null);
 
   const toggleMenu = () => setIsMenuOpen(prev => !prev);
+  const toggleDropdown = () => setIsDropdownOpen(prev => !prev);
 
   // Close menu if clicking outside
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (
         menuRef.current &&
-        !menuRef.current.contains(event.target) && // Not inside the menu
+        !menuRef.current.contains(event.target) &&
         buttonRef.current &&
-        !buttonRef.current.contains(event.target) // Not the button
+        !buttonRef.current.contains(event.target)
       ) {
         setIsMenuOpen(false);
       }
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target)
+      ) {
+        setIsDropdownOpen(false);
+      }
     };
 
     document.addEventListener("mousedown", handleClickOutside);
@@ -151,9 +191,10 @@ const Header = () => {
     };
   }, []);
 
-  // Close menu on navigation
+  // Close menu and dropdown on navigation
   useEffect(() => {
     setIsMenuOpen(false);
+    setIsDropdownOpen(false);
   }, [location.pathname]);
 
   return (
@@ -164,14 +205,25 @@ const Header = () => {
         </SLogo>
 
         <DesktopMenu>
-        {["/vardig", "/about", "/blogs", "/jobs", "/contact"].map((path, i) => (
-          <MenuLink key={i} to={path} $active={location.pathname === path}>
-            {path === "/vardig"
-              ? "VarDiG"
-              : path.replace("/", "").charAt(0).toUpperCase() +
-                path.replace("/", "").slice(1)}
-          </MenuLink>
-        ))}
+          {["/vardig", "/about", "/blogs", "/jobs"].map((path, i) => (
+            <MenuLink key={i} to={path} $active={location.pathname === path}>
+              {path === "/vardig"
+                ? "VarDiG"
+                : path.replace("/", "").charAt(0).toUpperCase() +
+                  path.replace("/", "").slice(1)}
+            </MenuLink>
+          ))}
+
+          {/* Contact with Dropdown */}
+          <ContactWrapper ref={dropdownRef}>
+            <MenuLink as="div" onClick={toggleDropdown}>
+              Contact ▾
+            </MenuLink>
+            <DropdownMenu $isOpen={isDropdownOpen}>
+              <Link to="/contact">Contact</Link>
+              <Link to="/privacy-policy">Privacy Policy</Link>
+            </DropdownMenu>
+          </ContactWrapper>
         </DesktopMenu>
 
         <MobileMenuButton
@@ -183,22 +235,20 @@ const Header = () => {
         </MobileMenuButton>
       </NavWrapper>
 
-      <MobileMenu $isOpen={isMenuOpen} ref={menuRef} data-testid="mobile-menu">
-        {["/", "/vardig", "/about", "/blogs", "/jobs", "/contact"].map((path, i) => (
-          <Link
-            key={i}
-            to={path}
-            onClick={() => setIsMenuOpen(false)} // Close on click
-            style={{  
-              backgroundColor: location.pathname === path ? "#1d9b62" : "transparent",
-            }}
-          >
-            {path === "/"
-              ? "Home"
-              : path.replace("/", "").charAt(0).toUpperCase() +
-                path.replace("/", "").slice(1)}
+      <MobileMenu $isOpen={isMenuOpen} ref={menuRef}>
+        {["/", "/vardig", "/about", "/blogs", "/jobs"].map((path, i) => (
+          <Link key={i} to={path} onClick={() => setIsMenuOpen(false)}>
+            {path === "/" ? "Home" : path.replace("/", "").charAt(0).toUpperCase() + path.slice(2)}
           </Link>
         ))}
+        
+        {/* Mobile Contact Dropdown */}
+        <div>
+          <Link to="/contact" onClick={() => setIsMenuOpen(false)}>Contact</Link>
+          <Link to="/privacy-policy" onClick={() => setIsMenuOpen(false)} style={{ paddingLeft: "20px" }}>
+            Privacy Policy
+          </Link>
+        </div>
       </MobileMenu>
     </HeaderContainer>
   );

frontend/src/sections/about/Leaders.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { FaLinkedin, FaXTwitter } from "react-icons/fa6"; // Correct social media icons
+import { FaLinkedin } from "react-icons/fa6"; // Correct social media icons
 
 import leaders from "../../data/leaders"; // Import leader data
 

frontend/src/sections/vardig/Testimonials.jsx

@@ -19,11 +19,11 @@ const Heading = styled.h2`
   margin-bottom: 16px;
 `;
 
-const Subheading = styled.p`
-  font-size: 1.125rem;
-  color: #ccc;
-  margin-bottom: 40px;
-`;
+// const Subheading = styled.p`
+//   font-size: 1.125rem;
+//   color: #ccc;
+//   margin-bottom: 40px;
+// `;
 
 const CardList = styled.ul`
   display: grid;