Added dropdown menu and styling

src/components/Dropdown.jsx

@@ -0,0 +1,99 @@
+import { useState } from "react";
+import styled from "styled-components";
+import menuIcon from "../assets/heroSectionImages/menu.png";
+import vector from "../assets/heroSectionImages/vector.png";
+export const Dropdown = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const options = [
+    { value: "Camps", label: "Camps" },
+    { value: "Accommodation", label: "Accommodation" },
+    { value: "About Us", label: "About Us" },
+  ];
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <SelectContainer>
+      <DropdownButton onClick={toggleDropdown}>
+        <DropdownMenu src={menuIcon} alt="Navigation bar menu" open={isOpen} />
+      </DropdownButton>
+
+      <OptionsContainer open={isOpen}>
+        <VectorBtn onClick={toggleDropdown}>
+          <VectorImg src={vector} />
+        </VectorBtn>
+        {options.map((option) => (
+          <Option key={option.value}>{option.label}</Option>
+        ))}
+      </OptionsContainer>
+    </SelectContainer>
+  );
+};
+
+const SelectContainer = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const DropdownButton = styled.button`
+  background: none;
+  font-size: 16px;
+  border: none;
+  width: 60px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;
+
+const DropdownMenu = styled.img`
+  padding-top: 24px;
+`;
+
+const OptionsContainer = styled.div`
+  position: absolute;
+  background: linear-gradient(180deg, #99c4eb 0%, #c3ddf3 100%);
+  top: 100%;
+  width: 150px;
+  padding-bottom: 20px;
+  border: none;
+  display: ${({ open }) => (open ? "" : "none")};
+`;
+
+const VectorBtn = styled.button`
+  background: none;
+  border: none;
+`;
+
+const VectorImg = styled.img`
+  display: flex;
+  background: none;
+  border: none;
+  flex-direction: flex-end;
+  width: 12px;
+  height: 12px;
+  padding-left: 125px;
+  padding-top: 6px;
+`;
+
+const Option = styled.div`
+  position: relative;
+  right: 0;
+  cursor: pointer;
+  color: (--Powder-Black, #0b1623);
+  text-align: left;
+  font-family: Mulish;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 130%;
+  padding: 12px;
+
+  &:hover {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+`;

src/components/Footer.jsx

@@ -34,7 +34,7 @@ export const Footer = () => {
 
 const FooterContent = styled.div`
   background-color: #234059;
-  height: 600px;
+  height: 550px;
   color: #ffc8dd;
   padding-top: 40px;
 `;
@@ -63,6 +63,7 @@ const FooterText = styled.div`
     font-weight: 700;
     line-height: 39px;
     letter-spacing: 1.08px;
+    text-align: left;
   }
 `;
 
@@ -113,4 +114,4 @@ const Language = styled.div`
 
 const Icons = styled.div`
   display: flex;
-n`;
+`;

src/components/HeaderNavbar.jsx

@@ -1,14 +1,16 @@
 import styled from "styled-components";
 import navbarLogo from "../assets/heroSectionImages/navbarLogoBlack.png";
-import dropdownMenu from "../assets/heroSectionImages/menu.png";
+import menuIcon from "../assets/heroSectionImages/menu.png";
+import { Dropdown } from "./Dropdown"
 
 export const HeaderNavbar = () => {
   return (
     <>
       <Navbar>
-        <NavbarLogo></NavbarLogo>
-        <NavbarMenu></NavbarMenu>
+        <NavbarLogo src={navbarLogo} />
+        <Dropdown />
       </Navbar>
+
     </>
   );
 };
@@ -18,21 +20,17 @@ const Navbar = styled.div`
   justify-content: space-between;
 `;
 
-const NavbarLogo = styled.div`
-  background-image: url(${navbarLogo});
-  background-repeat: no-repeat;
+const NavbarLogo = styled.img`
   height: 34.471px;
   width: 100px;
   flex-shrink: 1;
   margin-left: 24px;
   padding-top: 40px;
 `;
 
-const NavbarMenu = styled.div`
-  background-image: url(${dropdownMenu});
-  background-repeat: no-repeat;
-  background-position: right;
-  width: 50px;
-  margin-bottom: 50px;
-  margin-right: 24px;
-`;
+// const NavbarMenu = styled.img`
+// padding-right: 24px;
+// padding-top: 30px;
+// width: 40px;
+// height: 40px;
+// `;

src/components/Hero.jsx

@@ -1,4 +1,5 @@
 import heroImage from "../assets/heroSectionImages/heroImage.png";
+import mountainImage from "../assets/heroSectionImages/mountainGraphic.png";
 import styled from "styled-components";
 import { HeaderNavbar } from "./HeaderNavbar";
 
@@ -12,8 +13,9 @@ export const Hero = () => {
           <p>
             Join us at our Snowboard Camps and unleash your inner Powder Betty!
           </p>
-          <CtaButton>Explore our camps</CtaButton>
         </HeroContent>
+        <CtaButton>Explore our camps</CtaButton>
+        <MountainImage src={mountainImage} />
       </HeroSection>
     </>
   );
@@ -29,6 +31,12 @@ const HeroSection = styled.div`
   height: 600px;
 `;
 
+const MountainImage = styled.img`
+  display: flex;
+  height: 50px;
+  padding-top: 70px;
+`;
+
 const HeroContent = styled.div`
   display: flex;
   flex-direction: column;
@@ -52,7 +60,7 @@ const HeroContent = styled.div`
     line-height: 130%;
     width: 220px;
     padding-left: 24px;
-    margin-bottom: 180px;
+    padding-bottom: 160px;
   }
 `;