Technigo · jyy009 · Apr 22, 2024 · Apr 23, 2024 · Apr 23, 2024 · Apr 24, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -17,4 +17,5 @@ module.exports = {
       { allowConstantExport: true },
     ],
   },
+  'react/prop-types': "off"
 }
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/README.md b/README.md
@@ -1,41 +1,17 @@
-<h1 align="center">
-  <a href="">
-    <img src="/src/assets/design-handoff.svg" alt="Project Banner Image">
-  </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
-
-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
-```
+This project is a collaborative effort to design a hand-off from a UX design student and transform it into a landing page. It involves showcasing the use of React, incorporating reusable components, and leveraging Tailwind CSS for styling all while adhering to the design specifications.
+Additionally, it demonstrates the integration of npm packages for enhanced functionality, such as image carousels to enhance the user experience.
 
 ### 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?
+The UX design only had three responsive breakpoints, therefore I configured custom screen sizes to include more breakpoints and made the decisions for styling the additional breakpoints all while maintaining the original design.
 
 ### 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.
+https://clever-selkie-dfebb0.netlify.app/
+
+#### The UX Design
 
-## Instructions
+https://www.figma.com/file/xu73ZPWlDEfbnYmj1txyyn/%F0%9F%9F%A0-Team-Coral-Figma-%F0%9F%9F%A0?node-id=5259%3A1604&mode=dev
 
-<a href="instructions.md">
-   See instructions of this project
-  </a>
diff --git a/index.html b/index.html
@@ -1,10 +1,16 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="bg-blue text-cream">
   <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>
+    <title>Design Handoff</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=Inter:[email protected]&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Rock+Salt&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -10,17 +10,24 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@material-tailwind/react": "^2.1.9",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-responsive-carousel": "^3.2.23"
   },
   "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",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
+    "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/public/Images/Rectangle 49 (1).svg b/public/Images/Rectangle 49 (1).svg
diff --git a/public/Images/arrow.svg b/public/Images/arrow.svg
diff --git a/public/Images/barbell.svg b/public/Images/barbell.svg
diff --git a/public/Images/copyright.svg b/public/Images/copyright.svg
diff --git a/public/Images/fblogo.svg b/public/Images/fblogo.svg
diff --git a/public/Images/globe.svg b/public/Images/globe.svg
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,4 +17,5 @@ module.exports = { @@
           { allowConstantExport: true },
         ],
       },
+      'react/prop-types': "off"
     }