Technigo · Yifan-858 · Apr 23, 2024 · Apr 23, 2024 · Apr 23, 2024 · Apr 23, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -2,19 +2,20 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "18.2" } },
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
+    "react/prop-types": "off",
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
   },
-}
+};
diff --git a/README.md b/README.md
@@ -1,41 +1,14 @@
 <h1 align="center">
-  <a href="">
-    <img src="/src/assets/design-handoff.svg" alt="Project Banner Image">
-  </a>
+  <img src="/public/preview01.png" alt="Project Preview01" style="display: inline-block; margin-right: 10px;">
+  <img src="/public/preview02.png" alt="Project Preview02" style="display: inline-block;">
 </h1>
 
-### Remove git
+### Project Brief
 
-rm -rf .git
+A collabration project with Technigo UX designer. A business website made for a gym group named "Curve Pilates". Utilizing **React**, we've ensured an interactive and seamless user experience. Through the implementation of **reusable components** like Buttons and Cards, as well as the styling with **styled-component**, managing updates and maintenance is simplified for long-term sustainability. With **responsive design** in place, our site seamlessly adjusts to various screen sizes, delivering a consistent and enjoyable user experience across devices.
 
-# 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
-
-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?
+UI/UX Designer : Chantal Williams
 
 ### 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>
+[![Netlify Status](https://api.netlify.com/api/v1/badges/dd0034f3-ac8e-4bda-97b1-f48ceac18ef2/deploy-status)](https://app.netlify.com/sites/curve-pilates/deploys)
diff --git a/index.html b/index.html
@@ -1,13 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <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>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+
+<head>
+  <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>Curve Pilates</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=Calistoga&display=swap" rel="stylesheet">
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

diff --git a/public/burger-menu.png b/public/burger-menu.png
diff --git a/public/class01.png b/public/class01.png
diff --git a/public/class02.png b/public/class02.png
diff --git a/public/class03.png b/public/class03.png
diff --git a/public/class04.png b/public/class04.png
diff --git a/public/curve.png b/public/curve.png
diff --git a/public/event01.png b/public/event01.png
diff --git a/public/event02.png b/public/event02.png
diff --git a/public/event03.png b/public/event03.png
diff --git a/public/heading.png b/public/heading.png
diff --git a/public/hero01.png b/public/hero01.png
diff --git a/public/hero02.png b/public/hero02.png
diff --git a/public/hero03.png b/public/hero03.png
diff --git a/public/preview01.png b/public/preview01.png
diff --git a/public/preview02.png b/public/preview02.png
diff --git a/public/select-scroll.png b/public/select-scroll.png
diff --git a/public/socialicon1.png b/public/socialicon1.png
diff --git a/public/socialicon2.png b/public/socialicon2.png
diff --git a/public/socialicon3.png b/public/socialicon3.png
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,72 @@
+import { NavBar } from "./components/NavBar";
+import { Hero } from "./components/Hero";
+import { OurClass } from "./components/OurClass";
+import { Event } from "./components/Event";
+import { Footer } from "./components/Footer";
+import { createGlobalStyle } from "styled-components";
+import AvenirBlack from "./assets/Avenir-Black.ttf";
+import AvenirMedium from "./assets/Avenir-Medium.ttf";
+
+const GlobalStyles = createGlobalStyle`
+@font-face {
+  font-family: 'AvenirBlack';
+  src: url(${AvenirBlack}) format('truetype');
+}
+@font-face {
+  font-family: 'AvenirMedium';
+  src: url(${AvenirMedium}) format('truetype');
+}
+
+  :root {
+    --main-text-color: #000000;
+    --secondary-color: #e4dbd2;
+    --button-static-color: #b3583b;
+    --button-hover-color: #552a1c;
+    --button-text-color: #ffffff;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+     height: 100%;
+    background: linear-gradient(
+      180deg,
+      #a6c2c5 9.5%,
+      #d2dbe0 28.5%,
+      #d2dbe0 51%,
+      #9ab8c8 66.5%,
+      #a6c2c5 86%,
+      #9cc2d2 100%
+    ) ;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+  }
+
+  main{
+     position:relative;
+  }
+
+
+`;
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  return (
+    <>
+      <GlobalStyles />
+      <main>
+        <div className="lauch-page">
+          <NavBar />
+          <Hero />
+        </div>
+        <OurClass />
+        <Event />
+        <Footer />
+      </main>
+    </>
+  );
 };
diff --git a/src/assets/Avenir-Black.ttf b/src/assets/Avenir-Black.ttf
diff --git a/src/assets/Avenir-Medium.ttf b/src/assets/Avenir-Medium.ttf
diff --git a/src/assets/design-handoff.svg b/src/assets/design-handoff.svg
diff --git a/src/components/Buttons.jsx b/src/components/Buttons.jsx
@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+// Styled button component
+const StyledButton = styled.button`
+  border-radius: 12px;
+  background: #b3583b;
+  color: #fff;
+  font-family: Avenir, sans-serif;
+  font-size: ${(props) => props.fontSize}px;
+  font-weight: 500;
+  padding: 8px ${(props) => props.paddinglr}px;
+  width: ${(props) => props.width}%;
+  margin: 0 auto 1rem;
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.2s;
+
+  &:hover {
+    background: #552a1c;
+  }
+`;
+
+export const Buttons = ({ buttonText, fontSize, paddinglr, width }) => {
+  return (
+    <StyledButton
+      onClick={() => console.log(buttonText)}
+      fontSize={fontSize}
+      paddinglr={paddinglr}
+      width={width}
+    >
+      {buttonText}
+    </StyledButton>
+  );
+};