Technigo · jingh999 · Apr 23, 2024 · Apr 23, 2024 · Apr 23, 2024 · Apr 23, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -16,5 +16,6 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
+    'react/prop-types': "off"
   },
 }
diff --git a/index.html b/index.html
@@ -1,13 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
+
   <head>
+    <meta name="description"
+      content="Y Studio - An exclusive yoga studio in central Stockholm or other bigger city, specialized in ashtanga yoga.">
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="apple-touch-icon" sizes="180x180" href="./src/assets/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="./src/assets/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="./src/assets/favicon-16x16.png">
+    <link rel="manifest" href="/src/site.webmanifest">
     <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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+    <title>Y Studio</title>
   </head>
+
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
-</html>
+
+</html>
diff --git a/package.json b/package.json
@@ -4,23 +4,33 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "css-build": "postcss src/index.css -o dist/index.css",
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
+    "i18next": "^23.11.2",
+    "postcss-cli": "^11.0.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-bootstrap": "^2.10.2",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.1",
+    "react-router-dom": "^6.23.0",
+    "react-scroll": "^1.9.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
     "vite": "^4.4.5"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/assets/design-handoff.svg → public/assets/design-handoff.svg b/src/assets/design-handoff.svg → public/assets/design-handoff.svg
diff --git a/public/assets/main-image.svg b/public/assets/main-image.svg
diff --git a/public/assets/menu-icon.svg b/public/assets/menu-icon.svg
diff --git a/public/assets/search-icon.svg b/public/assets/search-icon.svg
diff --git a/public/images/classes.jpg b/public/images/classes.jpg
diff --git a/public/images/leftblob.svg b/public/images/leftblob.svg
diff --git a/public/images/location.jpg b/public/images/location.jpg
diff --git a/public/images/philosophy.jpg b/public/images/philosophy.jpg
diff --git a/public/images/rightblob.svg b/public/images/rightblob.svg
diff --git a/public/images/strength1.svg b/public/images/strength1.svg
diff --git a/public/images/strength2.svg b/public/images/strength2.svg
diff --git a/public/images/strength3.svg b/public/images/strength3.svg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,24 @@
+import { Footer } from "./components/Footer";
+import { Hero } from "./components/Hero";
+import { Strength } from "./components/Strength";
+import { Reviews } from "./components/Reviews";
+import { Philosophy } from "./components/Philosophy";
+import { articles as articlesData } from './components/Copy';
+import { customerReviews as reviewData } from './components/Copy';
+import { mainText as mainData } from './components/Copy';
+import { subText as subData } from './components/Copy';
+import leftblob from "/images/leftblob.svg";
+import rightblob from "/images/rightblob.svg";
+import mainImg from "/assets/main-image.svg"
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
-};
+  return (
+    <div>
+      <Hero heroImg={mainImg} mainText={mainData} subText={subData} />
+      <Reviews customerReviews={reviewData} leftBlob={leftblob} rightBlob={rightblob} />
+      <Philosophy articles={articlesData} />
+      <Strength />
+      <Footer />
+    </div>
+  )
+}
diff --git a/src/assets/android-chrome-192x192.png b/src/assets/android-chrome-192x192.png
diff --git a/src/assets/android-chrome-512x512.png b/src/assets/android-chrome-512x512.png
diff --git a/src/assets/apple-touch-icon.png b/src/assets/apple-touch-icon.png
diff --git a/src/assets/favicon-16x16.png b/src/assets/favicon-16x16.png
diff --git a/src/assets/favicon-32x32.png b/src/assets/favicon-32x32.png
diff --git a/src/assets/favicon.ico b/src/assets/favicon.ico
diff --git a/src/components/Copy.jsx b/src/components/Copy.jsx
@@ -0,0 +1,25 @@
+export const customerReviews = ['"High quality yoga classes with skilled teachers"', '"I really appreciate their flexible schedules"', '"These classes are tough – and really get the work done"'];
+
+export const articles = [
+  {
+    title: "Our philosophy",
+    copy: "We believe in your power within. But sometimes it needs a little help.",
+    image: "./images/philosophy.jpg",
+  },
+  {
+    title: "Our classes",
+    copy: "We focus on Ashtanga yoga, a physically demanding kind of yoga.",
+    image: "./images/classes.jpg",
+  }
+  ,
+
+  {
+    title: "Our locations",
+    copy: "Choose between any of our high-end yoga studios for your exercise.",
+    image: "./images/location.jpg",
+  },
+]
+
+export const mainText = "Find your power";
+
+export const subText = "Anywhere. Anytime.";
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -0,0 +1,116 @@
+import { useTranslation } from "react-i18next"
+
+export const Footer = () => {
+  const { t, i18n } = useTranslation()
+
+  return (
+    <footer className="bottom-0 mt-2 w-full font-Inter text-darkblue">
+        <section>
+            <div className="bg-lightblue p-6 text-center">
+                <h2 className="text-lg pb-1">{t("footer.join")}</h2>
+                <input type="text" placeholder={t("footer.placeholder")} className="bg-lightblue border border-darkblue py-0.5 rounded-2xl text-center text-darkblue max-sm:w-3/5"/>
+                <button className=" bg-steelblue px-4 py-0.5 rounded-3xl font-semibold transition hover:text-beige ml-2">{t("footer.sign")}</button>
+            </div>
+
+            <div className="flex flex-col gap-2 text-center bg-steelblue p-4 desktop:hidden">
+              <label className="text-lg font-semibold">{t("footer.studio")}</label>
+              <ul className="flex flex-col">
+                <li>{t("footer.office")}</li>
+                <li>Stadsgatan 4</li>
+                <li>111 11 Stockholm</li>
+                <li>+46 1234</li>
+                <li>[email protected]</li>
+              </ul>
+            </div>
+
+            <div className="text-center bg-steelblue p-4 desktop:hidden">
+              <p className="text-lg font-semibold">{t("footer.shop")}</p>
+
+              <nav className="mt-1">
+                <ul className="gap-2">
+                  <li>
+                    <a className="transition hover:text-beige" href="/">
+                    {t("footer.props")}
+                    </a>
+                 </li>
+
+                 <li>
+                   <a className="transition hover:text-beige" href="/">
+                   {t("footer.clothing")}
+                  </a>
+                 </li>
+
+                 <li>
+                   <a className="transition hover:text-beige" href="/">
+                   {t("footer.reading")}
+                   </a>
+                 </li>
+                </ul>
+              </nav>
+            </div>
+
+            <div className="text-center bg-steelblue p-4 desktop:hidden">
+              <p className="text-lg font-semibold">{t("footer.privacy")}</p>
+
+              <nav className="mt-1">
+                <ul className="gap-2">
+                  <li>
+                    <a className="transition hover:text-beige" href="/">
+                      {t("footer.conditions")}
+                    </a>
+                 </li>
+                </ul>
+              </nav>
+            </div>
+
+            <div className="bg-steelblue w-full desktop:flex desktop:items-center desktop:justify-center p-1">
+                <ul className="hidden desktop:flex flex-row justify-center mb-2 space-y-2 lg:mb-0 sm:space-y-0 sm:space-x-20">
+                <li>
+                    <a href="/" className="transition hover:text-beige">{t("footer.about")}</a>
+                </li>
+                <li>
+                    <a href="/" className="transition hover:text-beige">{t("footer.contact")}</a>
+                </li>
+                <li>
+                    <a href="/" className="transition hover:text-beige">{t("footer.shop")}</a>
+                </li>
+                <li>
+                    <a href="/" className="transition hover:text-beige">{t("footer.privacy")}</a>
+                </li>
+                </ul>
+
+                <div className="text-center desktop:mb-2 desktop:ml-10">
+                <select name="" id="" value={i18n.language} onChange={(e) => i18n.changeLanguage(e.target.value)} className="bg-steelblue border-4 border-darkblue rounded-2xl p-1">
+                    <option value="en">{t("footer.en")}</option>
+                    <option value="sv">{t("footer.sw")}</option>
+                </select>
+                </div>
+            </div>
+
+            <div className="bg-steelblue text-center  py-2 desktop:text-left desktop:py-0">
+              <p className="text-xs text-darkblue md:text-sm">Copyright &copy; 2024 Y Studio Stockholm</p>
+            </div>
+        </section>
+    </footer>
+  )
+}
+
+/*<div className="bg-steelblue p-6">
+<select name="" id="" value={i18n.language} onChange={(e) => i18n.changeLanguage(e.target.value)} className="bg-steelblue border-none">
+    <option value="" disabled selected>{t("footer.select")}</option>
+    <option value="en">{t("footer.en")}</option>
+    <option value="sv">{t("footer.sw")}</option>
+</select>
+</div>*/
+
+/*<div className="bg-steelblue text-center sm:text-left p-6">
+<button onClick={() => changeLanguage("en")} className="border-2 border-beige text-beige transition hover:text-darkblue hover:border-darkblue">{t("footer.en")}</button>
+<button onClick={() => changeLanguage("sv")} className="border-2 border-beige text-beige transition hover:text-darkblue hover:border-darkblue ml-2">{t("footer.sw")}</button>
+</div>*/
+
+/*const changeLanguage = (language) => {
+    i18n.changeLanguage(language)
+  }*/
+
+
+/* <option value="" selected disabled>{t("footer.select")}</option>*/
diff --git a/src/components/Header/Booking.jsx b/src/components/Header/Booking.jsx
@@ -0,0 +1,64 @@
+import { useState } from "react";
+
+export const Booking = () => {
+  const [selectedDateTime, setSelectedDateTime] = useState(null);
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  const handleDateTimeSelection = (date, time) => {
+    const dateTime = `${date} at ${time}`;
+    setSelectedDateTime(dateTime);
+    setShowDropdown(false); 
+  };
+
+  const toggleDropdown = () => {
+    setShowDropdown(!showDropdown); 
+  };
+
+  return (
+    <div className="w-fit-content flex flex-col mt-24 items-start text-darkblue z-3">
+      <div>
+        <div className="mb-2 lg:mb-4 font-Roboto font-semibold text-2xl md:text-4xl lg:text-4xl xl:text-4xl">
+          Find your power
+        </div>
+
+        <div className="mb-4 lg:mb-5 font-roboto text-xl md:text-2xl lg:text-2xl">Anywhere. Anytime.</div>
+        <div className="relative inline-block">
+          <button
+            onClick={toggleDropdown}
+            className="py-2 px-4 bg-darkblue text-white rounded-full font-roboto font-semibold text-sm lg:text-base xl:text-lg"
+          >
+            {selectedDateTime ? `Book for ${selectedDateTime}` : "Book now"}
+          </button>
+
+          {showDropdown && (
+            <div className="absolute top-10 bg-white shadow-md rounded-md py-2 mt-1">
+              {/* Date picker */}
+              <input
+                type="date"
+                onChange={(e) =>
+                  handleDateTimeSelection(e.target.value, e.target.value)
+                }
+                className="cursor-pointer py-1 px-4 hover:bg-gray-200"
+              />
+              {/* Time picker */}
+              <select
+                onChange={(e) =>
+                  handleDateTimeSelection(
+                    e.target.parentElement.firstChild.value,
+                    e.target.value
+                  )
+                }
+                className="cursor-pointer py-1 px-4 hover:bg-gray-200"
+              >
+                <option value="">Select time</option>
+                <option value="9:00 AM">9:00 AM</option>
+                <option value="11:00 AM">11:00 AM</option>
+                <option value="2:00 PM">2:00 PM</option>
+              </select>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -0,0 +1,15 @@
+import { Booking } from "./Booking"
+import { Top } from "./Top"
+
+export const Header = () => {
+  return (
+    <div className="top-0 w-full h-screen flex flex-col box-border bg-cover bg-center bg-no-repeat" style={{
+      backgroundImage: `url('/assets/main-image.svg')`,
+    }}>
+      <Top />
+      <div className="absolute bottom-1/2 left-1/4">
+        <Booking />
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/Header/Top.jsx b/src/components/Header/Top.jsx
@@ -0,0 +1,24 @@
+import searchIcon from '/assets/search-icon.svg'
+import menuIcon from '/assets/menu-icon.svg'
+
+export const Top = () => {
+  return (
+    <div className="z-2 flex flex-row justify-between items-center m-4 box-border">
+      <div className="flex flex-col justify-center items-center text-darkblue">
+        <div className="text-4xl md:7xl lg:text-8xl font-medium font-Roboto">Y</div>
+        <div className="text-sm md:text-2xl lg:text-3xl font-Roboto">Studio</div>
+      </div>
+
+      <div className="flex">
+        <div className="flex flex-row gap-5">
+          <div className="cursor-pointer">
+            <img src={searchIcon} alt="search-icon" className="w-6 md:w-8 lg:w-10" />
+          </div>
+          <div className="cursor-pointer">
+            <img src={menuIcon} alt="menu-icon" className="w-6 md:w-8 lg:w-10" />
+          </div>
+        </div>
+      </div>
+</div>
+
+  )}
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,5 +16,6 @@ module.exports = { @@
           'warn',
           { allowConstantExport: true },
         ],
+        'react/prop-types': "off"
       },
     }