Technigo · AHPIXI · Apr 23, 2024 · Apr 23, 2024 · Apr 23, 2024 · Apr 23, 2024
diff --git a/README.md b/README.md
@@ -4,38 +4,15 @@
   </a>
 </h1>
 
-### Remove git
-
-rm -rf .git
-
 # Design Handoff Project
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
-
-## Getting Started with the Project
-
-### Dependency Installation & Startup Development Server
+This week we recieved a design from a UX student to follow as precisely as possible.
 
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
-
-The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.
-
-```bash
-npm i && code . && npm run dev
-```
 
 ### The Problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+We decided to use Styled Components for CSS to work on our UI. At first it required some practise but after some repetition, the workflow gets really fun. It's a bit time consuming to not have all the CSS rules built in, so it's been a learning-by-trying-out many different solutions and commands. 
 
 ### View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
-
-## Instructions
-
-<a href="instructions.md">
-   See instructions of this project
-  </a>
+https://monumental-banoffee-da2acb.netlify.app/
diff --git a/index.html b/index.html
@@ -4,7 +4,17 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Music Releases - Project - Week 5</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+      rel="stylesheet" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap"
+      rel="stylesheet" />
+    <title>Design handoff week 12</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -11,16 +11,21 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-responsive-carousel": "^3.2.23",
+    "react-swipeable": "^7.0.1",
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",
+    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "vite": "^4.4.5"
+    "vite": "^4.4.5",
+    "vite-plugin-babel": "^1.2.0"
   }
 }
diff --git a/public/contactImage.png b/public/contactImage.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,26 @@
+import { Fonts } from "./components/Fonts";
+import { Hero } from "./components/Hero";
+import { OurOfferings } from "./components/OurOfferings";
+import { OurLessons } from "./components/OurLessons";
+import { Contact } from "./components/Contact";
+import { TestimonialCards } from "./components/TestimonialCards";
+import { MakeYourPick } from "./components/MakeYourPick";
+import { Footer } from "./components/Footer";
+import { CarouselProvider } from "./contexts/CarouselContext";
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  return (
+    <>
+      <CarouselProvider>
+        <Fonts />
+        <Hero />
+        <OurOfferings />
+        <OurLessons />
+        <TestimonialCards />
+        <MakeYourPick />
+        <Contact />
+        <Footer />
+      </CarouselProvider>
+    </>
+  );
 };
diff --git a/src/assets/contactImage.png b/src/assets/contactImage.png
diff --git a/src/assets/design-handoff.svg b/src/assets/design-handoff.svg
diff --git a/src/assets/desktopIcons/explore-desktop.png b/src/assets/desktopIcons/explore-desktop.png
diff --git a/src/assets/desktopIcons/fun-desktop.png b/src/assets/desktopIcons/fun-desktop.png
diff --git a/src/assets/desktopIcons/house-desktop.png b/src/assets/desktopIcons/house-desktop.png
diff --git a/src/assets/desktopIcons/snowboarder-desktop.png b/src/assets/desktopIcons/snowboarder-desktop.png
diff --git a/src/assets/followUsSection/chevron.png b/src/assets/followUsSection/chevron.png
diff --git a/src/assets/followUsSection/facebook.png b/src/assets/followUsSection/facebook.png
diff --git a/src/assets/followUsSection/instagram.png b/src/assets/followUsSection/instagram.png
diff --git a/src/assets/footerImages/desktop-logo.png b/src/assets/footerImages/desktop-logo.png
diff --git a/src/assets/footerImages/mobile-logo.png b/src/assets/footerImages/mobile-logo.png
diff --git a/src/assets/footerImages/tablet-logo.png b/src/assets/footerImages/tablet-logo.png
diff --git a/src/assets/heroSectionImages/heroImage.png b/src/assets/heroSectionImages/heroImage.png
diff --git a/src/assets/heroSectionImages/menu.png b/src/assets/heroSectionImages/menu.png
diff --git a/src/assets/heroSectionImages/mountainGraphic.png b/src/assets/heroSectionImages/mountainGraphic.png
diff --git a/src/assets/heroSectionImages/navbarLogoBlack.png b/src/assets/heroSectionImages/navbarLogoBlack.png
diff --git a/src/assets/heroSectionImages/vector.png b/src/assets/heroSectionImages/vector.png
diff --git a/src/assets/mobileIcons/explore-mobile.png b/src/assets/mobileIcons/explore-mobile.png
diff --git a/src/assets/mobileIcons/fun-mobile.png b/src/assets/mobileIcons/fun-mobile.png
diff --git a/src/assets/mobileIcons/house-mobile.png b/src/assets/mobileIcons/house-mobile.png
diff --git a/src/assets/mobileIcons/snowboarder-mobile.png b/src/assets/mobileIcons/snowboarder-mobile.png
diff --git a/src/assets/ourLessonsImage.png b/src/assets/ourLessonsImage.png
diff --git a/src/assets/priceCards/priceCardOne.png b/src/assets/priceCards/priceCardOne.png
diff --git a/src/assets/priceCards/priceCardThree.png b/src/assets/priceCards/priceCardThree.png
diff --git a/src/assets/priceCards/priceCardTwo.png b/src/assets/priceCards/priceCardTwo.png
diff --git a/src/assets/tabletIcons/explore-tablet.png b/src/assets/tabletIcons/explore-tablet.png
diff --git a/src/assets/tabletIcons/fun-tablet.png b/src/assets/tabletIcons/fun-tablet.png
diff --git a/src/assets/tabletIcons/house-tablet.png b/src/assets/tabletIcons/house-tablet.png
diff --git a/src/assets/tabletIcons/snowboarder-tablet.png b/src/assets/tabletIcons/snowboarder-tablet.png
diff --git a/src/assets/testimonialCards/CardOne.png b/src/assets/testimonialCards/CardOne.png
diff --git a/src/assets/testimonialCards/CardThree.png b/src/assets/testimonialCards/CardThree.png
diff --git a/src/assets/testimonialCards/CardTwo.png b/src/assets/testimonialCards/CardTwo.png
diff --git a/src/components/Buttons.jsx b/src/components/Buttons.jsx
@@ -0,0 +1,38 @@
+import styled from "styled-components";
+
+export const Button = styled.button`
+  display: inline-flex;
+  padding: 16px 32px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  width: 85%;
+  height: 48px;
+  margin: auto;
+
+
+  border-radius: 32px;
+  border: 1px solid var(--Powder-Black, #0b1623);
+  background: var(--Powder-Accent-1-Regular, #ffa3c4);
+  box-shadow: 2px 3px 0px 0px #0b1623;
+  color: var(--Powder-Black, #0b1623);
+
+  font-family: Mulish;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 100%;
+
+  &:hover {
+    border-radius: 32px;
+    border: 1px solid var(--Powder-Black, #0b1623);
+    background: var(--Powder-Accent-1-Dark, #f87ba8);
+    box-shadow: 2px 3px 0px 0px #0b1623;
+
+  &:active {
+  border-radius: 32px;
+  border: 1px solid var(--Powder-Black, #0B1623);
+  background: linear-gradient(180deg, #D2678E 0%, #F87BA8 59.5%);
+  box-shadow: 2px 3px 0px 0px #0B1623;
+  }
+`;
diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx
@@ -0,0 +1,48 @@
+import styled from "styled-components";
+import { useCarousel } from "../contexts/CarouselContext.jsx";
+
+export const Carousel = () => {
+  const { testimonialNumber, testimonial, handlers } = useCarousel();
+
+  const translateValue = -testimonialNumber * 100;
+
+  return (
+    <CarouselContainer {...handlers} className="carousel">
+      {testimonial.map(({ testimonialImage, id }) => (
+        <Slide key={id} translateValue={translateValue}>
+          <CarouselTestimonials>
+            <Image
+              src={testimonialImage}
+              alt="image with testimonial from previous participants"
+            />
+          </CarouselTestimonials>
+        </Slide>
+      ))}
+    </CarouselContainer>
+  );
+};
+
+const CarouselContainer = styled.div`
+  display: flex;
+  flex-direction; row;
+  overflow: hidden;
+  width: 100%;
+`;
+
+const Slide = styled.div`
+  flex: 0 0 100%;
+  transition: transform 0.5s ease;
+  transform: translateX(${(props) => props.translateValue}%);
+`;
+
+const CarouselTestimonials = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-left: 16px;
+  margin-right: 16px;
+  gap: 16px;
+`;
+
+const Image = styled.img``;
diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx
@@ -0,0 +1,74 @@
+import contactImage from "/contactImage.png";
+import { Button } from "./Buttons.jsx";
+import styled from "styled-components";
+
+export const Contact = () => {
+  return (
+    <>
+      <ContactWrapper>
+        <ContactImage></ContactImage>
+        <ContactContent>
+          <ContactText>
+            <h1>Not sure what to choose?</h1>
+            <p>We are happy to help. Let’s chat!</p>
+          </ContactText>
+          <Button aria-label="Start a chat">Start a chat</Button>
+        </ContactContent>
+      </ContactWrapper>
+    </>
+  );
+};
+
+const ContactWrapper = styled.section`
+  background-color: #e6f4ff;
+  display: grid;
+
+  @media (min-width: 600px) {
+    grid-template-columns: 1fr 1fr;
+  }
+`;
+const ContactContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  padding-bottom: 24px;
+`;
+
+const ContactImage = styled.div`
+  background-image: url(${contactImage});
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 100%;
+  min-height: 240px;
+
+  @media (min-width: 600px) {
+    order: 0;
+  }
+`;
+
+const ContactText = styled.div`
+  margin-left: 24px;
+  margin-right: 24px;
+
+  h1 {
+    width: 100 %
+    color: var(--Powder-Black, #0b1623);
+    font-family: Philosopher;
+    font-size: 36px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 130%; /* 46.8px */
+    letter-spacing: 1.08px;
+    margin-bottom: 24px;
+  }
+  p {
+    color: var(--Powder-Black, #0b1623);
+    font-family: Mulish;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 130%;
+    margin-bottom: 40px;
+    width: 100%;
+  }
+`;
diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx
@@ -0,0 +1,123 @@
+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}
+        aria-haspopup="true"
+        aria-expanded={isOpen}>
+        <DropdownMenu src={menuIcon} alt="Navigation bar menu" />
+      </DropdownButton>
+
+      <OptionsContainer open={isOpen} role="menu" aria-label="Options">
+        <VectorBtn onClick={toggleDropdown} aria-label="Close menu">
+          <VectorImg src={vector} alt="" />
+        </VectorBtn>
+        {options.map((option) => (
+          <Option key={option.value} role="menuitem" tabIndex="0" onClick={toggleDropdown}>
+            {option.label}
+          </Option>
+        ))}
+      </OptionsContainer>
+    </SelectContainer>
+  );
+};
+
+const SelectContainer = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  @media (min-width: 1200px) {
+  }
+`;
+
+const DropdownButton = styled.button`
+  background: none;
+  font-size: 16px;
+  border: none;
+  width: 60px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  @media (min-width: 1200px) {
+    display: none;
+  }
+`;
+
+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")};
+  @media (min-width: 1200px) {
+    width: 400px;
+    display: flex;
+    justify-content: space-between;
+    background: none;
+    padding-right: 150px;
+  }
+`;
+
+const VectorBtn = styled.button`
+  background: none;
+  border: none;
+  @media (min-width: 1200px) {
+    display: 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;
+  @media (min-width: 1200px) {
+    display: none;
+  }
+`;
+
+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;
+  }
+`;