diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 4dcb4390..fc0de354 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -17,4 +17,5 @@ module.exports = { { allowConstantExport: true }, ], }, + 'react/prop-types': "off" } diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..8b0bc4ef --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "plugins": ["prettier-plugin-tailwindcss"] +} \ No newline at end of file diff --git a/README.md b/README.md index f782ef97..2117e738 100644 --- a/README.md +++ b/README.md @@ -1,41 +1,17 @@ -

- - Project Banner Image - -

- -### 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 - - See instructions of this project - diff --git a/index.html b/index.html index a52ab900..31fff84c 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,16 @@ - + - Music Releases - Project - Week 5 + Design Handoff + + +
diff --git a/package.json b/package.json index 4ba5ff02..ab85dc11 100644 --- 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 new file mode 100644 index 00000000..2e7af2b7 --- /dev/null +++ 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 new file mode 100644 index 00000000..88d432a4 --- /dev/null +++ b/public/Images/Rectangle 49 (1).svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/Images/arrow.svg b/public/Images/arrow.svg new file mode 100644 index 00000000..c1452a7e --- /dev/null +++ b/public/Images/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Images/barbell.svg b/public/Images/barbell.svg new file mode 100644 index 00000000..6116655e --- /dev/null +++ b/public/Images/barbell.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/Images/copyright.svg b/public/Images/copyright.svg new file mode 100644 index 00000000..072d68c9 --- /dev/null +++ b/public/Images/copyright.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/Images/fblogo.svg b/public/Images/fblogo.svg new file mode 100644 index 00000000..ad8c509f --- /dev/null +++ b/public/Images/fblogo.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Images/globe.svg b/public/Images/globe.svg new file mode 100644 index 00000000..dc8daf5b --- /dev/null +++ b/public/Images/globe.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/Images/iglogo.svg b/public/Images/iglogo.svg new file mode 100644 index 00000000..91af2cb1 --- /dev/null +++ b/public/Images/iglogo.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/Images/logo.svg b/public/Images/logo.svg new file mode 100644 index 00000000..c557fd0d --- /dev/null +++ b/public/Images/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Images/plank.svg b/public/Images/plank.svg new file mode 100644 index 00000000..b5ff8f43 --- /dev/null +++ b/public/Images/plank.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/Images/star.svg b/public/Images/star.svg new file mode 100644 index 00000000..6019b7b8 --- /dev/null +++ b/public/Images/star.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/Images/tiktoklogo.svg b/public/Images/tiktoklogo.svg new file mode 100644 index 00000000..bd8f4b26 --- /dev/null +++ b/public/Images/tiktoklogo.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Images/uparrow.svg b/public/Images/uparrow.svg new file mode 100644 index 00000000..8ef16e0e --- /dev/null +++ b/public/Images/uparrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Images/weightplate.svg b/public/Images/weightplate.svg new file mode 100644 index 00000000..8464cdc9 --- /dev/null +++ b/public/Images/weightplate.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/Images/weights.svg b/public/Images/weights.svg new file mode 100644 index 00000000..9beedea3 --- /dev/null +++ b/public/Images/weights.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/App.jsx b/src/App.jsx index 1091d431..419b3d8f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,3 +1,7 @@ +import { Home } from "./section/Home" + export const App = () => { - return
Find me in src/app.jsx!
; + return
+ +
; }; diff --git a/src/component/ButtonPrimary.jsx b/src/component/ButtonPrimary.jsx new file mode 100644 index 00000000..17bdfa69 --- /dev/null +++ b/src/component/ButtonPrimary.jsx @@ -0,0 +1,4 @@ +export const ButtonPrimary = ({ className, text, addedClasses }) => { + const allClasses = `bg-cream text-blue rounded-lg border border-black shadow-custom-btn-p font-bold ${className} ${addedClasses}`; + return ; +}; diff --git a/src/component/ButtonSecondary.jsx b/src/component/ButtonSecondary.jsx new file mode 100644 index 00000000..bfc04bd7 --- /dev/null +++ b/src/component/ButtonSecondary.jsx @@ -0,0 +1,4 @@ +export const ButtonSecondary = ({ className, text, addedClasses }) => { + const allClasses = `bg-aqua text-cream rounded-custom border border-blue font-bold ${className} ${addedClasses}`; + return ; +}; diff --git a/src/component/ButtonThird.jsx b/src/component/ButtonThird.jsx new file mode 100644 index 00000000..18a5931e --- /dev/null +++ b/src/component/ButtonThird.jsx @@ -0,0 +1,4 @@ +export const ButtonThird = ({ text, addedClasses, className }) => { + const allClasses = `bg-aqua text-cream rounded-full p-2.5 w-custom-width h-custom-height border border-blue text-sm font-bold ${className} ${addedClasses}`; + return ; +}; diff --git a/src/component/Image.jsx b/src/component/Image.jsx new file mode 100644 index 00000000..6d9cf475 --- /dev/null +++ b/src/component/Image.jsx @@ -0,0 +1,3 @@ +export const Image = ({ className, link, imgText }) => { + return {imgText}; +}; diff --git a/src/component/Link.jsx b/src/component/Link.jsx new file mode 100644 index 00000000..d7cc25dc --- /dev/null +++ b/src/component/Link.jsx @@ -0,0 +1,12 @@ +export const Link = ({ className, link, text }) => { + return ( + + {text} + + ); +}; diff --git a/src/component/Text.jsx b/src/component/Text.jsx new file mode 100644 index 00000000..b9056e65 --- /dev/null +++ b/src/component/Text.jsx @@ -0,0 +1,3 @@ +export const Text = ({ className, text }) => { + return

{text}

; +}; diff --git a/src/index.css b/src/index.css index 4558f538..78e37321 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,18 @@ -:root { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} +@tailwind base; +@tailwind components; +@tailwind utilities; -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", - monospace; +.select-custom { +background-image: url("/Images/uparrow.svg"); + background-repeat: no-repeat; + background-position: right center; + padding-right: 40px; } + +.text-shadow { + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + } + + .text-stroke { + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: #000;} \ No newline at end of file diff --git a/src/section/Footer.jsx b/src/section/Footer.jsx new file mode 100644 index 00000000..f32fb19f --- /dev/null +++ b/src/section/Footer.jsx @@ -0,0 +1,44 @@ +import { Image } from "../component/Image"; +import { Link } from "../component/Link"; +import { Text } from "../component/Text"; + +export const Footer = () => ( +
+
+ + +
+ + +
+ + + +
+
+ +
+ + + + + +
+); diff --git a/src/section/Header.jsx b/src/section/Header.jsx new file mode 100644 index 00000000..44660ea0 --- /dev/null +++ b/src/section/Header.jsx @@ -0,0 +1,25 @@ +import { Text } from "../component/Text"; +import { Image } from "../component/Image"; + +export const Header = () => { + return ( +
+

+ HIIT FOR YOU +

+
+ +
+ +
+ ); +}; diff --git a/src/section/Home.jsx b/src/section/Home.jsx new file mode 100644 index 00000000..b9fa0933 --- /dev/null +++ b/src/section/Home.jsx @@ -0,0 +1,17 @@ +import { Header } from "./Header"; +import { Testimonial } from "./Testimonial"; +import { Footer } from "./Footer"; +import { Navbar } from "./Navbar" +import { JoinUs } from './JoinUs' + +export const Home = () => { + return ( + <> + +
+ + +