From 94c8da9e05bdf395ae234420ba861bfbd3dfa2e3 Mon Sep 17 00:00:00 2001 From: Sami3160 <110652247+Sami3160@users.noreply.github.com> Date: Wed, 26 Jun 2024 22:10:16 +0530 Subject: [PATCH] ui bugs removed, routes fixed, responsiveness 90% fix, f.. (#5) * ui bugs removed, routes fixed, responsiveness 90% fix, broilerplate for other pages done * dependency error fixed --- index.html | 2 +- package-lock.json | 104 ++++++- package.json | 6 +- src/App.jsx | 43 ++- src/components/CounterCard.jsx | 66 +++++ src/components/Footer.jsx | 22 ++ src/components/HomeSlider.jsx | 126 ++++++++ src/components/Navbar.jsx | 63 ++-- src/main.jsx | 81 +++--- src/views/About.jsx | 28 ++ src/{components => views}/Contact.jsx | 1 + src/views/Home.jsx | 403 ++++++++++++++++++-------- src/views/Plans.jsx | 49 ++++ src/views/Profile.jsx | 21 ++ src/views/Workout.jsx | 29 ++ 15 files changed, 844 insertions(+), 200 deletions(-) create mode 100644 src/components/CounterCard.jsx create mode 100644 src/components/Footer.jsx create mode 100644 src/components/HomeSlider.jsx create mode 100644 src/views/About.jsx rename src/{components => views}/Contact.jsx (99%) create mode 100644 src/views/Plans.jsx create mode 100644 src/views/Profile.jsx create mode 100644 src/views/Workout.jsx diff --git a/index.html b/index.html index 67682a2..fdff65a 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - FitFlux + FitFlex
diff --git a/package-lock.json b/package-lock.json index e5bec55..52d300b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "fitness-website", "version": "0.0.0", "dependencies": { + "@emailjs/browser": "^4.3.3", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@fortawesome/fontawesome-svg-core": "^6.5.2", @@ -16,12 +17,15 @@ "@mui/icons-material": "^5.15.20", "@mui/material": "^5.15.20", "chart.js": "^4.4.3", + "emailjs": "^4.0.3", "emailjs-com": "^3.2.0", "framer-motion": "^11.2.10", "react": "^18.2.0", "react-chartjs-2": "^5.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.23.1" + "react-router-dom": "^6.23.1", + "react-slick": "^0.30.2", + "slick-carousel": "^1.8.1" }, "devDependencies": { "@types/react": "^18.2.66", @@ -310,6 +314,15 @@ "node": ">=6.9.0" } }, + "node_modules/@emailjs/browser": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-4.3.3.tgz", + "integrity": "sha512-ltpt2S/WVREIBXptxYAVYBvXb2O6yTUYiRUWF8OLikMxlmiGsIgKpgHppikNd4Df0uAav7jCsQKcOJ3TJFUx5g==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@emotion/babel-plugin": { "version": "11.11.0", "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", @@ -2263,6 +2276,12 @@ "pnpm": ">=8" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==", + "license": "MIT" + }, "node_modules/clsx": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", @@ -2479,6 +2498,23 @@ "csstype": "^3.0.2" } }, + "node_modules/emailjs": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/emailjs/-/emailjs-4.0.3.tgz", + "integrity": "sha512-1CDXoE3FxkSg7QRTlLsDCYG9elFNu/JQsYWu3Xfrk77ubbg5zYgFGg+JRUKQJ56mceM8o3rHHX0VB4wo9XsyLQ==", + "license": "MIT", + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "typescript": ">=4.3.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/emailjs-com": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/emailjs-com/-/emailjs-com-3.2.0.tgz", @@ -2488,6 +2524,12 @@ "node": ">=12.0.0" } }, + "node_modules/enquire.js": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz", + "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==", + "license": "MIT" + }, "node_modules/error-ex": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", @@ -3803,6 +3845,13 @@ "set-function-name": "^2.0.1" } }, + "node_modules/jquery": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", + "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", + "license": "MIT", + "peer": true + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -3861,6 +3910,15 @@ "dev": true, "license": "MIT" }, + "node_modules/json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==", + "license": "MIT", + "dependencies": { + "string-convert": "^0.2.0" + } + }, "node_modules/jsx-ast-utils": { "version": "3.3.5", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz", @@ -3923,6 +3981,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", + "license": "MIT" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -4409,6 +4473,23 @@ "react-dom": ">=16.8" } }, + "node_modules/react-slick": { + "version": "0.30.2", + "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz", + "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==", + "license": "MIT", + "dependencies": { + "classnames": "^2.2.5", + "enquire.js": "^2.1.6", + "json2mq": "^0.2.0", + "lodash.debounce": "^4.0.8", + "resize-observer-polyfill": "^1.5.0" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -4472,6 +4553,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==", + "license": "MIT" + }, "node_modules/resolve": { "version": "2.0.0-next.5", "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz", @@ -4719,6 +4806,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", + "license": "MIT", + "peerDependencies": { + "jquery": ">=1.8.0" + } + }, "node_modules/source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", @@ -4738,6 +4834,12 @@ "node": ">=0.10.0" } }, + "node_modules/string-convert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", + "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==", + "license": "MIT" + }, "node_modules/string.prototype.matchall": { "version": "4.0.11", "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz", diff --git a/package.json b/package.json index 916bff2..b806096 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@emailjs/browser": "^4.3.3", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@fortawesome/fontawesome-svg-core": "^6.5.2", @@ -18,12 +19,15 @@ "@mui/icons-material": "^5.15.20", "@mui/material": "^5.15.20", "chart.js": "^4.4.3", + "emailjs": "^4.0.3", "emailjs-com": "^3.2.0", "framer-motion": "^11.2.10", "react": "^18.2.0", "react-chartjs-2": "^5.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.23.1" + "react-router-dom": "^6.23.1", + "react-slick": "^0.30.2", + "slick-carousel": "^1.8.1" }, "devDependencies": { "@types/react": "^18.2.66", diff --git a/src/App.jsx b/src/App.jsx index 5654fb9..8dc5dae 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,14 +1,37 @@ -import './App.css' -import Home from "./views/Home.jsx" -import Contact from "./components/Contact.jsx" -function App() { +import "./App.css"; +import { Suspense, lazy } from "react"; +import { Routes, Router, Route, Outlet, BrowserRouter } from "react-router-dom"; +const Navbar = lazy(() => import("./components/Navbar.jsx")); +const Home = lazy(() => import("./views/Home.jsx")); +const Contact = lazy(() => import("./views/Contact.jsx")); +const About = lazy(() => import("./views/About.jsx")); +const Profile = lazy(() => import("./views/Profile.jsx")); +const Plans = lazy(() => import("./views/Plans.jsx")); +const Workout = lazy(() => import("./views/Workout.jsx")); +function App() { return ( -
- - -
- ) + <> + Loading...}> + + + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + 404 page not found} /> + + + + + ); } -export default App +export default App; diff --git a/src/components/CounterCard.jsx b/src/components/CounterCard.jsx new file mode 100644 index 0000000..a0ba62d --- /dev/null +++ b/src/components/CounterCard.jsx @@ -0,0 +1,66 @@ +import React from "react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +function CounterCard({ val, icon, text }) { + return ( +
+ + + + {val} + + + {text} + +
+ ); +} + +export default CounterCard; diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx new file mode 100644 index 0000000..c86548b --- /dev/null +++ b/src/components/Footer.jsx @@ -0,0 +1,22 @@ +// this component is temperary and will be replaced with the actual workout and exercise components +const Footer = () => { + return ( + + ); +}; + +export default Footer; \ No newline at end of file diff --git a/src/components/HomeSlider.jsx b/src/components/HomeSlider.jsx new file mode 100644 index 0000000..eff6e57 --- /dev/null +++ b/src/components/HomeSlider.jsx @@ -0,0 +1,126 @@ +import "slick-carousel/slick/slick.css"; +import "slick-carousel/slick/slick-theme.css"; +import React, { useEffect, useState } from "react"; +import Slider from "react-slick"; +import { Box, Typography } from "@mui/material"; + +export default function HomeSlider({ object }) { + const [arrowState, setArrowState] = useState(true); + useEffect(() => { + const x = window.innerWidth; + console.log(x); + if (x < 900) { + setArrowState(false); + } else { + setArrowState(true); + } + }, [window.innerWidth]); + + var settings = { + dots: true, + infinite: true, + autoplay: true, + arrows: arrowState, + autoplaySpeed: 5000, + speed: 500, + slidesToShow: 1, + slidesToScroll: 1, + // arrows:false, + nextArrow: , + prevArrow: , + }; + return ( + + {object.map((item, index) => ( + + + + {item.title} + + + ))} + + {/* {object.map((item, index)=>{ + return( +
+

hiii

+
+ ) + })} */} + + ); +} + +function SampleNextArrow(props) { + const { className, style, onClick } = props; + return ( + + ); +} + +function SamplePrevArrow(props) { + const { className, style, onClick } = props; + return ( + + ); +} diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 2a6dbca..b37ff16 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -11,13 +11,15 @@ import { } from "@mui/material"; import fitnessPrimaryLogo from "../assets/fitness1.png"; import fitnessSecondayrLogo from "../assets/fitness2.png"; -import { motion, useViewportScroll, useTransform } from "framer-motion"; +import { motion } from "framer-motion"; import Toolbar from "@mui/material/Toolbar"; import MenuIcon from "@mui/icons-material/Menu"; import { createTheme, ThemeProvider } from "@mui/material/styles"; import { useState, useEffect } from "react"; +import { NavLink, useNavigate } from "react-router-dom"; const pages = ["Home", "About", "Contact", "Register"]; function Navbar() { + const navigate=useNavigate() const navTheme = createTheme({ palette: { mode: "dark", @@ -33,7 +35,9 @@ function Navbar() { setAnchorElNav(event.currentTarget); }; - const handleCloseNavMenu = () => { + const handleCloseNavMenu = (url) => { + // navigate(url)sd + location.href = urldsd; setAnchorElNav(null); }; // const { scrollYProgress } = useViewportScroll(); @@ -44,7 +48,7 @@ function Navbar() { const [y, setY] = useState(0); const [x, setX] = useState(0); const [x2, setX2] = useState(0); - const [x3, setX3] = useState(60); + const [x3, setX3] = useState(10); useEffect(() => { const handleScroll = () => { setScrollPosition(window.pageYOffset); @@ -54,11 +58,11 @@ function Navbar() { setX2(60); setScale(0.5); setY2(-22); - setX3(200); + setX3(70); } else { setScale(1); setY(0); - setX3(60); + setX3(10); setY2(13); setX(0); setX2(30); @@ -81,7 +85,7 @@ function Navbar() { "linear-gradient(90deg, #232526 0%, #1F1C2C 35%, #414345 100%)", }} > - + - #TransformWithFitFlux + #TransformWithFitFlex - FitFlux + FitFlex @@ -167,7 +171,7 @@ function Navbar() { }} > setAnchorElNav(null)} sx={{ display: { xs: "block", md: "none" }, }} > {pages.map((page) => ( - + { + setAnchorElNav(null) + setTimeout(()=>navigate(`/${page.toLowerCase()}`),100) + + }} + > {page} ))} - FitFlux + FitFlex {pages.map((page) => ( ))} diff --git a/src/main.jsx b/src/main.jsx index a276df2..3c2187f 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,53 +1,56 @@ import React from "react"; import ReactDOM from "react-dom/client"; -import App from './App.jsx' +import App from "./App.jsx"; +const Home = React.lazy(() => import("./views/Home.jsx")); import "./index.css"; -import { createBrowserRouter, RouterProvider } from "react-router-dom"; -import Root from "./root.jsx"; -import Navbar from "./components/Navbar.jsx"; - +import { + Route, + Router, + Routes, + createBrowserRouter, + RouterProvider, +} from "react-router-dom"; +import Navbar from "./components/Navbar.jsx"; +import Contact from "./views/Contact.jsx"; const router = createBrowserRouter([ { path: "/", element: , errorElement:
404 Not Found
, - }, - { - path: "/home", - element: , - errorElement:
404 Not Found
, - }, - { - path: "/plans/", - element:
Plans
, - }, - { - path: "/workout/:day", - element:
workout day,huihui
, - }, - { - path: "/plans/:planId", - element:
Plans id
, - }, - { - path: "/about", - element:
About
, - errorElement:
404 Not Found
, - }, - { - path: "/contact", - element:
Contact
, - errorElement:
404 Not Found
, - }, - { - path: "/progress", - element:
profile
, - errorElement:
404 Not Found
, + children: [ + { + path: "home", + element: , + }, + { + path: "plans/", + element:
Plans
, + }, + { + path: "workout/:day", + element:
workout day,huihui
, + }, + { + path: "plans/:planId", + element:
Plans id
, + }, + { + path: "about", + element:
About
, + }, + { + path: "contact", + element: , + }, + { + path: "profile", + element:
profile
, + }, + ], }, ]); ReactDOM.createRoot(document.getElementById("root")).render( - - + ); diff --git a/src/views/About.jsx b/src/views/About.jsx new file mode 100644 index 0000000..7f91cbe --- /dev/null +++ b/src/views/About.jsx @@ -0,0 +1,28 @@ +// this component is temperary and will be replaced with the actual workout and exercise components + + + + + +import { Typography, Container } from '@mui/material'; + +const About = () => { + return ( + + + About Us + + + Welcome to our fitness website! We are dedicated to helping you achieve your fitness goals and live a healthy lifestyle. + + + Our team of experienced trainers and nutritionists are here to provide you with personalized workout plans, diet tips, and motivation. + + + Whether you're a beginner or an advanced fitness enthusiast, we have something for everyone. Join us today and start your fitness journey! + + + ); +}; + +export default About; \ No newline at end of file diff --git a/src/components/Contact.jsx b/src/views/Contact.jsx similarity index 99% rename from src/components/Contact.jsx rename to src/views/Contact.jsx index f901a67..38a1e4f 100644 --- a/src/components/Contact.jsx +++ b/src/views/Contact.jsx @@ -113,6 +113,7 @@ const Contact = () => { return; } + emailjs.send( 'service_nlds6fh', // Service ID 'template_iyudm0r', // Template ID diff --git a/src/views/Home.jsx b/src/views/Home.jsx index 7328d16..dcab723 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -5,10 +5,39 @@ import homeImg2 from "../assets/home/homeImg2.avif"; import homeImg3 from "../assets/home/homeImg3.jpg"; import homeImg4 from "../assets/home/homeImg4.jpg"; import { useEffect, useState } from "react"; -import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; -import { faDharmachakra, faDumbbell, faFire, faMountain, faSpinner, faStar } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import HomeSlider from "../components/HomeSlider"; +import { + faDharmachakra, + faDumbbell, + faFire, + faStar, +} from "@fortawesome/free-solid-svg-icons"; +import { NavLink } from "react-router-dom"; function Home() { + const [fontVarient, setFontVarient] = useState("h1"); + const hehe = [ + { + image: homeImg1, + title: "Workout", + }, + { + image: homeImg2, + title: "Workout", + }, + { + image: homeImg3, + title: "Workout", + }, + { + image: homeImg4, + title: "Workout", + }, + ]; + useEffect(() => { + document.title = "FitFlex Zone-Home"; + }, []); const Imgs = [homeImg1, homeImg2, homeImg3, homeImg4]; const TopMessage = [ "Bring the Gym Home", @@ -31,6 +60,15 @@ function Home() { return () => clearInterval(time); }, [count]); + useEffect(() => { + const x = window.innerWidth; + if (x < 900) { + setFontVarient("h4"); + } else { + setFontVarient("h3"); + } + }, [window.innerWidth]); + return (
@@ -57,7 +95,7 @@ function Home() { color="white" style={{ fontWeight: "bold" }} > - FitFlux + FitFlex - - - {TopMessage[count]} - + {TopMessage[count]} @@ -130,162 +164,281 @@ function Home() {
- -
- {/* cusotmn css button */} + style={{ + height: "6px", + width: "20vw", + background: "linear-gradient(45deg, #FDC830 0%,#F37335 100%)", + }} + >
+ {/* cusotmn css button */} - {/* do not touch below code, idk how it works */} - -
+ {/* do not touch below code, idk how it works */} +
+ + + Start Exercise + + + + + + + + + + + + +
+ {/* okay now u may thouch below code */} -
+
- - Experientce + Experience the{" "} + #TransformWithFitFlux - - + #TransformWithFitFlex + + + - Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque expedita quibusdam corporis fuga modi, consectetur architecto placeat? Earum, perspiciatis est. Voluptatem magnam nesciunt eaque nisi neque error quae eos esse! - + Join our fitness program and transform your body and mind. + Our expert trainers and supportive community will help you reach your goals, + whether you're a beginner or an experienced athlete. + Start your transformation with FitFlex today! + + - - - Variety - From HIIT to yoga, strength training to dance,explore a diverse range of workouts to keep your routine exciting and effective. + + + Variety + + + From HIIT to yoga, strength training to dance,explore a diverse + range of workouts to keep your routine exciting and effective. + - - - Flexibility - Enjoy the freedom to exercise whenever it fits your day. No gym hours, no commutes just you and your fitness goals. + + + Flexibility + + + Enjoy the freedom to exercise whenever it fits your day. No gym + hours, no commutes just you and your fitness goals. + - - - - Motivation - Stay on track with interactive features, progress tracking, and regular updates. We will help you keep your eyes on the prize and push through challenges. + + + Motivation + + + Stay on track with interactive features, progress tracking, and + regular updates. We will help you keep your eyes on the prize and + push through challenges. + - + + + {/* banner */} +
+
+ +
+ + + + + + {/* */} ); diff --git a/src/views/Plans.jsx b/src/views/Plans.jsx new file mode 100644 index 0000000..6406403 --- /dev/null +++ b/src/views/Plans.jsx @@ -0,0 +1,49 @@ +// this component is temperary and will be replaced with the actual workout and exercise components + + + + +const Plans = () => { + const plans = [ + { + id: 1, + name: "Basic Plan", + price: "Rs 9.99", + features: ["Access to basic workouts", "Limited support"], + }, + { + id: 2, + name: "Premium Plan", + price: "Rs 19.99", + features: ["Access to premium workouts", "24/7 support"], + }, + { + id: 3, + name: "Pro Plan", + price: "Rs 29.99", + features: ["Access to all workouts", "Personal trainer support"], + }, + ]; + + return ( +
+

Choose Your Fitness Plan

+
+ {plans.map((plan) => ( +
+

{plan.name}

+

{plan.price}

+
    + {plan.features.map((feature, index) => ( +
  • {feature}
    • + ))} +
+ +
+ ))} +
+
+ ); +}; + +export default Plans; diff --git a/src/views/Profile.jsx b/src/views/Profile.jsx new file mode 100644 index 0000000..21d3bf4 --- /dev/null +++ b/src/views/Profile.jsx @@ -0,0 +1,21 @@ +// this component is temperary and will be replaced with the actual workout and exercise components + + +const Profile = () => { + // Add your code here to fetch user progress data + const userProgress = 75; // Example progress value + + return ( +
+

Profile Dashboard

+
+
+
+
+ {`${userProgress}%`} +
+
+ ); +}; + +export default Profile; diff --git a/src/views/Workout.jsx b/src/views/Workout.jsx new file mode 100644 index 0000000..67e9fa5 --- /dev/null +++ b/src/views/Workout.jsx @@ -0,0 +1,29 @@ +// this component is temperary and will be replaced with the actual workout and exercise components + + + +import { Box, Typography, Grid } from '@mui/material'; + +const Workout = () => { + return ( + + + Workout Page + + + {/* Add your workout and exercise components here */} + + {/* Workout component */} + + + {/* Exercise component */} + + + {/* Exercise component */} + + + + ); +}; + +export default Workout; \ No newline at end of file