├── assets
    └── img
    │   ├── hero.jpg
    │   ├── img1.jpg
    │   ├── img2.jpg
    │   ├── img3.jpg
    │   └── about.png
├── src
    ├── assets
    │   └── img
    │   │   ├── about.png
    │   │   ├── hero.jpg
    │   │   ├── img1.jpg
    │   │   ├── img2.jpg
    │   │   └── img3.jpg
    ├── App.css
    ├── main.jsx
    ├── index.css
    ├── components
    │   ├── Home.jsx
    │   ├── Plans.jsx
    │   ├── Trainers.jsx
    │   ├── About.jsx
    │   ├── BarLoader.jsx
    │   ├── Footer.jsx
    │   ├── Navbar.jsx
    │   └── Contact.jsx
    ├── layouts
    │   ├── Button.jsx
    │   ├── TrainerCard.jsx
    │   └── PlansCard.jsx
    └── App.jsx
├── postcss.config.js
├── vite.config.js
├── App.css
├── main.jsx
├── tailwind.config.js
├── .gitignore
├── index.css
├── components
    ├── Home.jsx
    ├── Plans.jsx
    ├── Trainers.jsx
    ├── About.jsx
    ├── BarLoader.jsx
    ├── Footer.jsx
    ├── Navbar.jsx
    └── Contact.jsx
├── .eslintrc.cjs
├── index.html
├── layouts
    ├── Button.jsx
    ├── TrainerCard.jsx
    └── PlansCard.jsx
├── package.json
├── App.jsx
└── README.md


/assets/img/hero.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EshaalB/Gym-Website/HEAD/assets/img/hero.jpg


--------------------------------------------------------------------------------
/assets/img/img1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EshaalB/Gym-Website/HEAD/assets/img/img1.jpg


--------------------------------------------------------------------------------
/assets/img/img2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EshaalB/Gym-Website/HEAD/assets/img/img2.jpg


--------------------------------------------------------------------------------
/assets/img/img3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EshaalB/Gym-Website/HEAD/assets/img/img3.jpg


--------------------------------------------------------------------------------
/assets/img/about.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EshaalB/Gym-Website/HEAD/assets/img/about.png


--------------------------------------------------------------------------------
/src/assets/img/about.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EshaalB/Gym-Website/HEAD/src/assets/img/about.png


--------------------------------------------------------------------------------
/src/assets/img/hero.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EshaalB/Gym-Website/HEAD/src/assets/img/hero.jpg


--------------------------------------------------------------------------------
/src/assets/img/img1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EshaalB/Gym-Website/HEAD/src/assets/img/img1.jpg


--------------------------------------------------------------------------------
/src/assets/img/img2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EshaalB/Gym-Website/HEAD/src/assets/img/img2.jpg


--------------------------------------------------------------------------------
/src/assets/img/img3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EshaalB/Gym-Website/HEAD/src/assets/img/img3.jpg


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/App.css:
--------------------------------------------------------------------------------
 1 | .full-screen {
 2 |   position: fixed;
 3 |   top: 0;
 4 |   left: 0;
 5 |   width: 100%;
 6 |   height: 100%;
 7 |   display: flex;
 8 |   justify-content: center;
 9 |   align-items: center;
10 |   z-index: 9999;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .full-screen {
 2 |   position: fixed;
 3 |   top: 0;
 4 |   left: 0;
 5 |   width: 100%;
 6 |   height: 100%;
 7 |   display: flex;
 8 |   justify-content: center;
 9 |   align-items: center;
10 |   z-index: 9999;
11 | }
12 | 


--------------------------------------------------------------------------------
/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App.jsx'
 4 | import './index.css'
 5 | 
 6 | ReactDOM.createRoot(document.getElementById('root')).render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App.jsx'
 4 | import './index.css'
 5 | 
 6 | ReactDOM.createRoot(document.getElementById('root')).render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
 4 |   theme: {
 5 |     extend: {
 6 |       colors: {
 7 |         brightRed: "#E6533C",
 8 |       },
 9 |     },
10 |   },
11 |   plugins: [],
12 | };
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;800;900&display=swap");
 2 | 
 3 | @tailwind base;
 4 | @tailwind components;
 5 | @tailwind utilities;
 6 | 
 7 | body {
 8 |   background: linear-gradient(to bottom right, #000000, #171818);
 9 |   color: white;
10 |   font-family: "Inter", sans-serif;
11 |   transition: 0.4s ease-in;
12 | }
13 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;800;900&display=swap");
 2 | 
 3 | @tailwind base;
 4 | @tailwind components;
 5 | @tailwind utilities;
 6 | 
 7 | body {
 8 |   background: linear-gradient(to bottom right, #000000, #171818);
 9 |   color: white;
10 |   font-family: "Inter", sans-serif;
11 |   transition: 0.4s ease-in;
12 | }
13 | 


--------------------------------------------------------------------------------
/components/Home.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Button from "../layouts/Button";
 3 | 
 4 | const Home = () => {
 5 |   return (
 6 |     <div className="min-h-screen flex flex-row justify-end md:px-32 px-5 bg-[url('./assets/img/hero.jpg')] bg-cover bg-no-repeat">
 7 |       <div className="flex flex-col justify-center md:w-1/3 text-left">
 8 |         <h1 className="text-8xl font-semibold">Discover your strength!</h1>
 9 | 
10 |         <div className="mt-5 flex justify-center">
11 |           <Button title="Get Started" />
12 |         </div>
13 |       </div>
14 |     </div>
15 |   );
16 | };
17 | 
18 | export default Home;
19 | 


--------------------------------------------------------------------------------
/src/components/Home.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Button from "../layouts/Button";
 3 | 
 4 | const Home = () => {
 5 |   return (
 6 |     <div className="min-h-screen flex flex-row justify-end md:px-32 px-5 bg-[url('./assets/img/hero.jpg')] bg-cover bg-no-repeat">
 7 |       <div className="flex flex-col justify-center md:w-1/3 text-left">
 8 |         <h1 className="text-8xl font-semibold">Discover your strength!</h1>
 9 | 
10 |         <div className="mt-5 flex justify-center">
11 |           <Button title="Get Started" />
12 |         </div>
13 |       </div>
14 |     </div>
15 |   );
16 | };
17 | 
18 | export default Home;
19 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     'eslint:recommended',
 6 |     'plugin:react/recommended',
 7 |     'plugin:react/jsx-runtime',
 8 |     'plugin:react-hooks/recommended',
 9 |   ],
10 |   ignorePatterns: ['dist', '.eslintrc.cjs'],
11 |   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 |   settings: { react: { version: '18.2' } },
13 |   plugins: ['react-refresh'],
14 |   rules: {
15 |     'react/jsx-no-target-blank': 'off',
16 |     'react-refresh/only-export-components': [
17 |       'warn',
18 |       { allowConstantExport: true },
19 |     ],
20 |   },
21 | }
22 | 


--------------------------------------------------------------------------------
/components/Plans.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PlansCard from "../layouts/PlansCard";
 3 | 
 4 | const Plans = () => {
 5 |   return (
 6 |     <div className="min-h-screen flex flex-col justify-center items-center md:px-32 px-5">
 7 |       <h1 className="text-4xl font-semibold text-center">Gym membership</h1>
 8 | 
 9 |       <div className="flex flex-col md:flex-row justify-between mt-10 gap-8">
10 |         <PlansCard title="Trial Plan" price="0" />
11 |         <PlansCard title="Gold Plan" price="1000" />
12 |         <PlansCard title="Platinum Plan" price="2000" />
13 |       </div>
14 |     </div>
15 |   );
16 | };
17 | 
18 | export default Plans;
19 | 


--------------------------------------------------------------------------------
/src/components/Plans.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PlansCard from "../layouts/PlansCard";
 3 | 
 4 | const Plans = () => {
 5 |   return (
 6 |     <div className="min-h-screen flex flex-col justify-center items-center md:px-32 px-5">
 7 |       <h1 className="text-4xl font-semibold text-center">Gym membership</h1>
 8 | 
 9 |       <div className="flex flex-col md:flex-row justify-between mt-10 gap-8">
10 |         <PlansCard title="Trial Plan" price="0" />
11 |         <PlansCard title="Gold Plan" price="1000" />
12 |         <PlansCard title="Platinum Plan" price="2000" />
13 |       </div>
14 |     </div>
15 |   );
16 | };
17 | 
18 | export default Plans;
19 | 


--------------------------------------------------------------------------------
/components/Trainers.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import img1 from "../assets/img/img1.jpg";
 3 | import img2 from "../assets/img/img2.jpg";
 4 | import img3 from "../assets/img/img3.jpg";
 5 | import TrainerCard from "../layouts/TrainerCard";
 6 | 
 7 | const Trainers = () => {
 8 |   return (
 9 |     <div className="min-h-screen flex flex-col justify-center items-center md:px-32 px-5">
10 |       <h1 className="text-4xl font-semibold text-center mt-10">Our Trainers</h1>
11 | 
12 |       <div className="flex flex-col md:flex-row justify-center items-center gap-10 mt-8">
13 |         <TrainerCard img={img1} name="Maham" />
14 |         <TrainerCard img={img2} name="Aliyan" />
15 |         <TrainerCard img={img3} name="Fatima" />
16 |       </div>
17 |     </div>
18 |   );
19 | };
20 | 
21 | export default Trainers;
22 | 


--------------------------------------------------------------------------------
/src/components/Trainers.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import img1 from "../assets/img/img1.jpg";
 3 | import img2 from "../assets/img/img2.jpg";
 4 | import img3 from "../assets/img/img3.jpg";
 5 | import TrainerCard from "../layouts/TrainerCard";
 6 | 
 7 | const Trainers = () => {
 8 |   return (
 9 |     <div className="min-h-screen flex flex-col justify-center items-center md:px-32 px-5">
10 |       <h1 className="text-4xl font-semibold text-center mt-10">Our Trainers</h1>
11 | 
12 |       <div className="flex flex-col md:flex-row justify-center items-center gap-10 mt-8">
13 |         <TrainerCard img={img1} name="Maham" />
14 |         <TrainerCard img={img2} name="Aliyan" />
15 |         <TrainerCard img={img3} name="Fatima" />
16 |       </div>
17 |     </div>
18 |   );
19 | };
20 | 
21 | export default Trainers;
22 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon"   href="https://lh3.googleusercontent.com/p/AF1QipOsqVuw4u_ssMOCYqCWfM6BtulDZX-gC3f1CEgc=w200-h200-p-no" />
 6 |     <meta name="description" content="Your well-being is your greatest wealth. Whether it's achieving
 7 |     optimal health or enhancing your fitness journey, we're here to
 8 |     support you every step of the way.
 9 |       At Levels Gym, our team of certified personal trainers,
10 |       attentive staff, and experienced management are dedicated to
11 |       fostering a nurturing environment.">
12 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
13 |     <title> Levels Gym- The #1 Gym  in Town</title>
14 |   </head>
15 |   <body>
16 |     <div id="root"></div>
17 |     <script type="module" src="/src/main.jsx"></script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/layouts/Button.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Button = (props) => {
 4 |   return (
 5 |     <div>
 6 |       <button className="relative inline-flex items-center justify-start px-5 py-3 overflow-hidden font-bold rounded-full group">
 7 |         <span className="w-32 h-32 rotate-45 translate-x-12 -translate-y-2 absolute left-0 top-0 bg-white opacity-[3%]"></span>
 8 |         <span className="absolute top-0 left-0 w-48 h-48 -mt-1 transition-all duration-500 ease-in-out rotate-45 -translate-x-56 -translate-y-24 bg-brightRed opacity-100 group-hover:-translate-x-8"></span>
 9 |         <span className="relative w-full text-left text-white transition-colors duration-200 ease-in-out">
10 |           {props.title}
11 |         </span>
12 |         <span className="absolute inset-0 border-2 border-white rounded-full"></span>
13 |       </button>
14 |     </div>
15 |   );
16 | };
17 | 
18 | export default Button;
19 | 


--------------------------------------------------------------------------------
/src/layouts/Button.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Button = (props) => {
 4 |   return (
 5 |     <div>
 6 |       <button className="relative inline-flex items-center justify-start px-5 py-3 overflow-hidden font-bold rounded-full group">
 7 |         <span className="w-32 h-32 rotate-45 translate-x-12 -translate-y-2 absolute left-0 top-0 bg-white opacity-[3%]"></span>
 8 |         <span className="absolute top-0 left-0 w-48 h-48 -mt-1 transition-all duration-500 ease-in-out rotate-45 -translate-x-56 -translate-y-24 bg-brightRed opacity-100 group-hover:-translate-x-8"></span>
 9 |         <span className="relative w-full text-left text-white transition-colors duration-200 ease-in-out">
10 |           {props.title}
11 |         </span>
12 |         <span className="absolute inset-0 border-2 border-white rounded-full"></span>
13 |       </button>
14 |     </div>
15 |   );
16 | };
17 | 
18 | export default Button;
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gym-project",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "framer-motion": "^11.0.8",
14 |     "react": "^18.2.0",
15 |     "react-dom": "^18.2.0",
16 |     "react-icons": "^5.0.1",
17 |     "react-scroll": "^1.9.0"
18 |   },
19 |   "devDependencies": {
20 |     "@types/react": "^18.2.56",
21 |     "@types/react-dom": "^18.2.19",
22 |     "@vitejs/plugin-react": "^4.2.1",
23 |     "autoprefixer": "^10.4.17",
24 |     "eslint": "^8.56.0",
25 |     "eslint-plugin-react": "^7.33.2",
26 |     "eslint-plugin-react-hooks": "^4.6.0",
27 |     "eslint-plugin-react-refresh": "^0.4.5",
28 |     "postcss": "^8.4.35",
29 |     "tailwindcss": "^3.4.1",
30 |     "vite": "^5.1.4"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/components/About.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import img from "../assets/img/about.png";
 3 | 
 4 | const About = () => {
 5 |   return (
 6 |     <div className=" min-h-screen flex flex-col md:flex-row items-center md:mx-32 mx-5">
 7 |       <div>
 8 |         <h1 className="text-5xl font-semibold text-center md:text-start mt-14 md:mt-0">
 9 |           About Us
10 |         </h1>
11 | 
12 |         <div className=" w-full md:w-3/4 space-y-5 mt-4 text-2xl ">
13 |           <p>
14 |             Your well-being is your greatest wealth. Whether it's achieving
15 |             optimal health or enhancing your fitness journey, we're here to
16 |             support you every step of the way.
17 |             <p>
18 |               At our fitness center, our team of certified personal trainers,
19 |               attentive staff, and experienced management are dedicated to
20 |               fostering a nurturing environment.
21 |             </p>
22 |           </p>
23 |         </div>
24 |       </div>
25 |       <div>
26 |         <img src={img} alt="img" />
27 |       </div>
28 |     </div>
29 |   );
30 | };
31 | 
32 | export default About;
33 | 


--------------------------------------------------------------------------------
/src/components/About.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import img from "../assets/img/about.png";
 3 | 
 4 | const About = () => {
 5 |   return (
 6 |     <div className=" min-h-screen flex flex-col md:flex-row items-center md:mx-32 mx-5">
 7 |       <div>
 8 |         <h1 className="text-5xl font-semibold text-center md:text-start mt-14 md:mt-0">
 9 |           About Us
10 |         </h1>
11 | 
12 |         <div className=" w-full md:w-3/4 space-y-5 mt-4 text-2xl ">
13 |           <p>
14 |             Your well-being is your greatest wealth. Whether it's achieving
15 |             optimal health or enhancing your fitness journey, we're here to
16 |             support you every step of the way.
17 |             <p>
18 |               At our fitness center, our team of certified personal trainers,
19 |               attentive staff, and experienced management are dedicated to
20 |               fostering a nurturing environment.
21 |             </p>
22 |           </p>
23 |         </div>
24 |       </div>
25 |       <div>
26 |         <img src={img} alt="img" />
27 |       </div>
28 |     </div>
29 |   );
30 | };
31 | 
32 | export default About;
33 | 


--------------------------------------------------------------------------------
/components/BarLoader.jsx:
--------------------------------------------------------------------------------
 1 | import { motion } from "framer-motion";
 2 | 
 3 | const Color = () => {
 4 |   return (
 5 |     <div className="full-screen bg-black" id="bar-loader">
 6 |       <BarLoader />
 7 |     </div>
 8 |   );
 9 | };
10 | 
11 | const variants = {
12 |   initial: {
13 |     scaleY: 0.5,
14 |     opacity: 0,
15 |   },
16 |   animate: {
17 |     scaleY: 1,
18 |     opacity: 1,
19 |     transition: {
20 |       repeat: Infinity,
21 |       repeatType: "mirror",
22 |       duration: 1,
23 |       ease: "circIn",
24 |     },
25 |   },
26 | };
27 | 
28 | const BarLoader = () => {
29 |   return (
30 |     <motion.div
31 |       transition={{
32 |         staggerChildren: 0.25,
33 |       }}
34 |       initial="initial"
35 |       animate="animate"
36 |       className="flex gap-1"
37 |     >
38 |       <motion.div variants={variants} className="h-12 w-2 bg-white" />
39 |       <motion.div variants={variants} className="h-12 w-2 bg-white" />
40 |       <motion.div variants={variants} className="h-12 w-2 bg-white" />
41 |       <motion.div variants={variants} className="h-12 w-2 bg-white" />
42 |       <motion.div variants={variants} className="h-12 w-2 bg-white" />
43 |     </motion.div>
44 |   );
45 | };
46 | 
47 | export default Color;
48 | 


--------------------------------------------------------------------------------
/src/components/BarLoader.jsx:
--------------------------------------------------------------------------------
 1 | import { motion } from "framer-motion";
 2 | 
 3 | const Color = () => {
 4 |   return (
 5 |     <div className="full-screen bg-black" id="bar-loader">
 6 |       <BarLoader />
 7 |     </div>
 8 |   );
 9 | };
10 | 
11 | const variants = {
12 |   initial: {
13 |     scaleY: 0.5,
14 |     opacity: 0,
15 |   },
16 |   animate: {
17 |     scaleY: 1,
18 |     opacity: 1,
19 |     transition: {
20 |       repeat: Infinity,
21 |       repeatType: "mirror",
22 |       duration: 1,
23 |       ease: "circIn",
24 |     },
25 |   },
26 | };
27 | 
28 | const BarLoader = () => {
29 |   return (
30 |     <motion.div
31 |       transition={{
32 |         staggerChildren: 0.25,
33 |       }}
34 |       initial="initial"
35 |       animate="animate"
36 |       className="flex gap-1"
37 |     >
38 |       <motion.div variants={variants} className="h-12 w-2 bg-white" />
39 |       <motion.div variants={variants} className="h-12 w-2 bg-white" />
40 |       <motion.div variants={variants} className="h-12 w-2 bg-white" />
41 |       <motion.div variants={variants} className="h-12 w-2 bg-white" />
42 |       <motion.div variants={variants} className="h-12 w-2 bg-white" />
43 |     </motion.div>
44 |   );
45 | };
46 | 
47 | export default Color;
48 | 


--------------------------------------------------------------------------------
/App.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import Navbar from "./components/Navbar";
 3 | import Home from "./components/Home";
 4 | import About from "./components/About";
 5 | import Plans from "./components/Plans";
 6 | import Trainers from "./components/Trainers";
 7 | import Contact from "./components/Contact";
 8 | import Footer from "./components/Footer";
 9 | import BarLoader from "./components/BarLoader";
10 | import "./App.css";
11 | 
12 | const App = () => {
13 |   const [loading, setLoading] = useState(true);
14 | 
15 |   useEffect(() => {
16 |     const timer = setTimeout(() => {
17 |       setLoading(false);
18 |     }, 5000);
19 | 
20 |     return () => clearTimeout(timer);
21 |   }, []);
22 | 
23 |   return (
24 |     <div>
25 |       {loading && <BarLoader />}
26 |       <Navbar />
27 | 
28 |       <main>
29 |         <section id="home">
30 |           <Home />
31 |         </section>
32 | 
33 |         <section id="about">
34 |           <About />
35 |         </section>
36 |         <section id="plans">
37 |           <Plans />
38 |         </section>
39 | 
40 |         <section id="trainers">
41 |           <Trainers />
42 |         </section>
43 | 
44 |         <section id="contact">
45 |           <Contact />
46 |         </section>
47 |       </main>
48 | 
49 |       <Footer />
50 |     </div>
51 |   );
52 | };
53 | 
54 | export default App;
55 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import Navbar from "./components/Navbar";
 3 | import Home from "./components/Home";
 4 | import About from "./components/About";
 5 | import Plans from "./components/Plans";
 6 | import Trainers from "./components/Trainers";
 7 | import Contact from "./components/Contact";
 8 | import Footer from "./components/Footer";
 9 | import BarLoader from "./components/BarLoader";
10 | import "./App.css";
11 | 
12 | const App = () => {
13 |   const [loading, setLoading] = useState(true);
14 | 
15 |   useEffect(() => {
16 |     const timer = setTimeout(() => {
17 |       setLoading(false);
18 |     }, 5000);
19 | 
20 |     return () => clearTimeout(timer);
21 |   }, []);
22 | 
23 |   return (
24 |     <div>
25 |       {loading && <BarLoader />}
26 |       <Navbar />
27 | 
28 |       <main>
29 |         <section id="home">
30 |           <Home />
31 |         </section>
32 | 
33 |         <section id="about">
34 |           <About />
35 |         </section>
36 |         <section id="plans">
37 |           <Plans />
38 |         </section>
39 | 
40 |         <section id="trainers">
41 |           <Trainers />
42 |         </section>
43 | 
44 |         <section id="contact">
45 |           <Contact />
46 |         </section>
47 |       </main>
48 | 
49 |       <Footer />
50 |     </div>
51 |   );
52 | };
53 | 
54 | export default App;
55 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 💪 Levels Gym – Gym Landing Page (React.js + Tailwind CSS)
 2 | 
 3 | A modern, responsive, and sleek landing page for a gym or fitness center, built using **React.js** and styled with **Tailwind CSS**. This project is ideal for showcasing gym services, trainers, pricing plans, testimonials, and CTAs to attract new clients.
 4 | 
 5 |  
 6 | ---
 7 | 
 8 | ## 🧱 Features
 9 | 
10 | - 🧭 **Fully Responsive Design** – Works seamlessly across all screen sizes.
11 | - 🎯 **Hero Section** – Eye-catching introduction with call-to-action buttons.
12 | - 🏋️‍♀️ **Services Section** – Highlights different fitness programs.
13 | - 🧑‍🏫 **Trainers Section** – Showcasing experienced trainers with bios.
14 | - 📦 **Pricing Plans** – Clean and simple subscription options.
15 | - 💬 **Testimonials** – Client feedback with star ratings.
16 | - 📞 **Contact & Footer** – Call to action and social links.
17 | 
18 | ---
19 | 
20 | ## 🛠️ Tech Stack
21 | 
22 | | Technology     | Description                         |
23 | |----------------|-------------------------------------|
24 | | React.js       | UI Library for building components  |
25 | | Tailwind CSS   | Utility-first CSS framework         |
26 | | React Icons    | Icon library for consistent icons   |
27 | | Vite / CRA     | (Choose based on your setup)        |
28 | 
29 | ---
30 | 
31 |  
32 | ---
33 | 
34 | ## 🧩 Installation
35 | 
36 | ```bash
37 | # 1. Clone the repo
38 | git clone https://github.com/your-username/fitzone-landing.git
39 | 
40 | # 2. Navigate into the project
41 | cd Gym-Website
42 | 
43 | # 3. Install dependencies
44 | npm install
45 | 
46 | # 4. Run the development server
47 | npm run dev
48 | 
49 | 
50 | 


--------------------------------------------------------------------------------
/layouts/TrainerCard.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { BsInstagram, BsTwitter, BsFacebook, BsTwitterX } from "react-icons/bs";
 3 | 
 4 | const TrainerCard = (props) => {
 5 |   return (
 6 |     <div className="flex flex-col items-center gap-5 pt-9 pb-4 w-full md:w-1/4 bg-[#222] rounded-xl">
 7 |       <div className="w-3/4">
 8 |         <img
 9 |           className="rounded-lg hover:scale-105"
10 |           src={props.img}
11 |           alt="Trainer"
12 |         />
13 |       </div>
14 |       <div className="text-center">
15 |         <h1 className="text-xl font-semibold py-2">{props.name}</h1>
16 |         <div className="flex justify-center gap-4">
17 |           <a
18 |             href="https://www.instagram.com/"
19 |             target="_blank"
20 |             rel="noopener noreferrer"
21 |           >
22 |             <BsInstagram
23 |               size={25}
24 |               className="hover:text-[#e53961] cursor-pointer"
25 |             />
26 |           </a>
27 |           <a
28 |             href="https://www.facebook.com/"
29 |             target="_blank"
30 |             rel="noopener noreferrer"
31 |           >
32 |             <BsFacebook
33 |               size={25}
34 |               className="hover:text-[#4267B2] cursor-pointer"
35 |             />
36 |           </a>
37 |           <a
38 |             href="https://twitter.com/"
39 |             target="_blank"
40 |             rel="noopener noreferrer"
41 |           >
42 |             <BsTwitterX
43 |               size={25}
44 |               className="hover:text-[#3f4549] cursor-pointer"
45 |             />
46 |           </a>
47 |         </div>
48 |       </div>
49 |     </div>
50 |   );
51 | };
52 | 
53 | export default TrainerCard;
54 | 


--------------------------------------------------------------------------------
/src/layouts/TrainerCard.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { BsInstagram, BsTwitter, BsFacebook, BsTwitterX } from "react-icons/bs";
 3 | 
 4 | const TrainerCard = (props) => {
 5 |   return (
 6 |     <div className="flex flex-col items-center gap-5 pt-9 pb-4 w-full md:w-1/4 bg-[#222] rounded-xl">
 7 |       <div className="w-3/4">
 8 |         <img
 9 |           className="rounded-lg hover:scale-105"
10 |           src={props.img}
11 |           alt="Trainer"
12 |         />
13 |       </div>
14 |       <div className="text-center">
15 |         <h1 className="text-xl font-semibold py-2">{props.name}</h1>
16 |         <div className="flex justify-center gap-4">
17 |           <a
18 |             href="https://www.instagram.com/"
19 |             target="_blank"
20 |             rel="noopener noreferrer"
21 |           >
22 |             <BsInstagram
23 |               size={25}
24 |               className="hover:text-[#e53961] cursor-pointer"
25 |             />
26 |           </a>
27 |           <a
28 |             href="https://www.facebook.com/"
29 |             target="_blank"
30 |             rel="noopener noreferrer"
31 |           >
32 |             <BsFacebook
33 |               size={25}
34 |               className="hover:text-[#4267B2] cursor-pointer"
35 |             />
36 |           </a>
37 |           <a
38 |             href="https://twitter.com/"
39 |             target="_blank"
40 |             rel="noopener noreferrer"
41 |           >
42 |             <BsTwitterX
43 |               size={25}
44 |               className="hover:text-[#3f4549] cursor-pointer"
45 |             />
46 |           </a>
47 |         </div>
48 |       </div>
49 |     </div>
50 |   );
51 | };
52 | 
53 | export default TrainerCard;
54 | 


--------------------------------------------------------------------------------
/components/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Link } from "react-scroll";
 3 | import { AiTwotonePhone } from "react-icons/ai";
 4 | import { AiOutlineMail } from "react-icons/ai";
 5 | 
 6 | const newDate = new Date().getFullYear();
 7 | 
 8 | const Footer = () => {
 9 |   return (
10 |     <div className="bg-[#222] mt-5 rounded-t-3xl py-8">
11 |       <div className="flex flex-col md:flex-row justify-between md:px-32 px-5">
12 |         <div className="w-full md:w-1/4">
13 |           <Link to="/">
14 |             <h1 className="font-semibold text-2xl text-brightRed">
15 |               Level Gyms
16 |             </h1>
17 |           </Link>
18 |           <p className="mt-4">
19 |             The best fitness destination in Lahore, for men and women.
20 |           </p>
21 |         </div>
22 |         <div className="mt-8 md:mt-0 md:ml-8">
23 |           <h1 className="font-medium text-xl text-brightRed">Address</h1>
24 |           <p className="mt-4">
25 |             Plot 339 Block R2 Johar Town Lahore, 54000 Pakistan
26 |           </p>
27 |         </div>
28 |         <div className="mt-8 md:mt-0 md:ml-8">
29 |           <h1 className="font-medium text-xl text-brightRed">Business Hours</h1>
30 |           <ul className="mt-4">
31 |             <li>Mon-Sat: 7:00 AM – 12:00 AM</li>
32 |             <li>Sun: Closed</li>
33 |           </ul>
34 |         </div>
35 |         <div className="mt-8 md:mt-0 md:ml-8">
36 |           <h1 className="font-medium text-xl text-brightRed ">Contact</h1>
37 |           <div className="flex flex-row items-center mt-4">
38 |             <AiTwotonePhone size={20} />
39 |             <p className="ml-2">+92-309-4795547</p>
40 |           </div>
41 |           <div className="flex flex-row items-center mt-2">
42 |             <AiOutlineMail size={20} color="red" />
43 |             <p className="ml-2">levelszone@gmail.com</p>
44 |           </div>
45 |         </div>
46 |       </div>
47 |       <div className="mt-8">
48 |         <p className="text-center">
49 |           © <span className="text-brightRed">Levels gym</span> | {newDate}
50 |         </p>
51 |       </div>
52 |     </div>
53 |   );
54 | };
55 | 
56 | export default Footer;
57 | 


--------------------------------------------------------------------------------
/src/components/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Link } from "react-scroll";
 3 | import { AiTwotonePhone } from "react-icons/ai";
 4 | import { AiOutlineMail } from "react-icons/ai";
 5 | 
 6 | const newDate = new Date().getFullYear();
 7 | 
 8 | const Footer = () => {
 9 |   return (
10 |     <div className="bg-[#222] mt-5 rounded-t-3xl py-8">
11 |       <div className="flex flex-col md:flex-row justify-between md:px-32 px-5">
12 |         <div className="w-full md:w-1/4">
13 |           <Link to="/">
14 |             <h1 className="font-semibold text-2xl text-brightRed">
15 |               Level Gyms
16 |             </h1>
17 |           </Link>
18 |           <p className="mt-4">
19 |             The best fitness destination in Lahore, for men and women.
20 |           </p>
21 |         </div>
22 |         <div className="mt-8 md:mt-0 md:ml-8">
23 |           <h1 className="font-medium text-xl text-brightRed">Address</h1>
24 |           <p className="mt-4">
25 |             Plot 339 Block R2 Johar Town Lahore, 54000 Pakistan
26 |           </p>
27 |         </div>
28 |         <div className="mt-8 md:mt-0 md:ml-8">
29 |           <h1 className="font-medium text-xl text-brightRed">Business Hours</h1>
30 |           <ul className="mt-4">
31 |             <li>Mon-Sat: 7:00 AM – 12:00 AM</li>
32 |             <li>Sun: Closed</li>
33 |           </ul>
34 |         </div>
35 |         <div className="mt-8 md:mt-0 md:ml-8">
36 |           <h1 className="font-medium text-xl text-brightRed ">Contact</h1>
37 |           <div className="flex flex-row items-center mt-4">
38 |             <AiTwotonePhone size={20} />
39 |             <p className="ml-2">+92-309-4795547</p>
40 |           </div>
41 |           <div className="flex flex-row items-center mt-2">
42 |             <AiOutlineMail size={20} color="red" />
43 |             <p className="ml-2">levelszone@gmail.com</p>
44 |           </div>
45 |         </div>
46 |       </div>
47 |       <div className="mt-8">
48 |         <p className="text-center">
49 |           © <span className="text-brightRed">Levels gym</span> | {newDate}
50 |         </p>
51 |       </div>
52 |     </div>
53 |   );
54 | };
55 | 
56 | export default Footer;
57 | 


--------------------------------------------------------------------------------
/layouts/PlansCard.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { MdOutlineAttachMoney } from "react-icons/md";
 3 | import { AiFillCheckCircle, AiFillCloseCircle } from "react-icons/ai";
 4 | import Button from "../layouts/Button";
 5 | 
 6 | const PlansCard = (props) => {
 7 |   const features = [
 8 |     "Daily complimentary sessions with a personal trainer.",
 9 |     "Access to gym facilities during operational hours.",
10 |     "Access to all rooms.",
11 |     "Use of advance gym equipment.",
12 |   ];
13 | 
14 |   const renderCircle = (index) => {
15 |     if (props.title === "Trial Plan") {
16 |       return index === 0 ? (
17 |         <AiFillCheckCircle className="mr-2 mt-1 text-green-500" size={24} />
18 |       ) : (
19 |         <AiFillCloseCircle className="mr-2 mt-1 text-red-500" size={25} />
20 |       );
21 |     } else if (props.title === "Gold Plan") {
22 |       return index < features.length / 2 ? (
23 |         <AiFillCheckCircle className="mr-2 mt-1 text-green-500" size={25} />
24 |       ) : (
25 |         <AiFillCloseCircle className="mr-2 mt-1 text-red-500" size={25} />
26 |       );
27 |     } else {
28 |       return props.price > 0 ? (
29 |         <AiFillCheckCircle className="mr-2 mt-1 text-green-500" size={25} />
30 |       ) : (
31 |         <AiFillCloseCircle className="mr-2 mt-1 text-red-500" size={25} />
32 |       );
33 |     }
34 |   };
35 | 
36 |   return (
37 |     <div className="flex flex-col bg-gray-950 w-full md:w-1/3 p-8 rounded-xl shadow-lg">
38 |       <h2 className="font-semibold text-lg text-center text-white mb-4">
39 |         {props.title}
40 |       </h2>
41 | 
42 |       <div className="flex items-center justify-center">
43 |         <MdOutlineAttachMoney className="text-white mr-2" size={24} />
44 |         <h3 className="font-semibold text-lg text-white">{props.price}</h3>
45 |       </div>
46 | 
47 |       <div className="flex flex-col items-start mt-6 text-white">
48 |         {features.map((feature, index) => (
49 |           <div key={index} className="flex items-start mb-3">
50 |             {renderCircle(index)}
51 |             <p className="text-sm">{feature}</p>
52 |           </div>
53 |         ))}
54 |       </div>
55 | 
56 |       <div className="flex justify-center mt-6">
57 |         <Button title="Buy Plan" />
58 |       </div>
59 |     </div>
60 |   );
61 | };
62 | 
63 | export default PlansCard;
64 | 


--------------------------------------------------------------------------------
/src/layouts/PlansCard.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { MdOutlineAttachMoney } from "react-icons/md";
 3 | import { AiFillCheckCircle, AiFillCloseCircle } from "react-icons/ai";
 4 | import Button from "../layouts/Button";
 5 | 
 6 | const PlansCard = (props) => {
 7 |   const features = [
 8 |     "Daily complimentary sessions with a personal trainer.",
 9 |     "Access to gym facilities during operational hours.",
10 |     "Access to all rooms.",
11 |     "Use of advance gym equipment.",
12 |   ];
13 | 
14 |   const renderCircle = (index) => {
15 |     if (props.title === "Trial Plan") {
16 |       return index === 0 ? (
17 |         <AiFillCheckCircle className="mr-2 mt-1 text-green-500" size={24} />
18 |       ) : (
19 |         <AiFillCloseCircle className="mr-2 mt-1 text-red-500" size={25} />
20 |       );
21 |     } else if (props.title === "Gold Plan") {
22 |       return index < features.length / 2 ? (
23 |         <AiFillCheckCircle className="mr-2 mt-1 text-green-500" size={25} />
24 |       ) : (
25 |         <AiFillCloseCircle className="mr-2 mt-1 text-red-500" size={25} />
26 |       );
27 |     } else {
28 |       return props.price > 0 ? (
29 |         <AiFillCheckCircle className="mr-2 mt-1 text-green-500" size={25} />
30 |       ) : (
31 |         <AiFillCloseCircle className="mr-2 mt-1 text-red-500" size={25} />
32 |       );
33 |     }
34 |   };
35 | 
36 |   return (
37 |     <div className="flex flex-col bg-gray-950 w-full md:w-1/3 p-8 rounded-xl shadow-lg">
38 |       <h2 className="font-semibold text-lg text-center text-white mb-4">
39 |         {props.title}
40 |       </h2>
41 | 
42 |       <div className="flex items-center justify-center">
43 |         <MdOutlineAttachMoney className="text-white mr-2" size={24} />
44 |         <h3 className="font-semibold text-lg text-white">{props.price}</h3>
45 |       </div>
46 | 
47 |       <div className="flex flex-col items-start mt-6 text-white">
48 |         {features.map((feature, index) => (
49 |           <div key={index} className="flex items-start mb-3">
50 |             {renderCircle(index)}
51 |             <p className="text-sm">{feature}</p>
52 |           </div>
53 |         ))}
54 |       </div>
55 | 
56 |       <div className="flex justify-center mt-6">
57 |         <Button title="Buy Plan" />
58 |       </div>
59 |     </div>
60 |   );
61 | };
62 | 
63 | export default PlansCard;
64 | 


--------------------------------------------------------------------------------
/components/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import { Link } from "react-scroll";
 3 | import { AiOutlineMenuUnfold } from "react-icons/ai";
 4 | 
 5 | const menuItems = [
 6 |   { id: "home", name: "Home" },
 7 |   { id: "about", name: "About Us" },
 8 |   { id: "plans", name: "Pricing Plans" },
 9 |   { id: "trainers", name: "Trainers" },
10 |   { id: "contact", name: "Contact Us" },
11 | ];
12 | 
13 | const Navbar = () => {
14 |   const [menu, setMenu] = useState(false);
15 |   const [isSticky, setIsSticky] = useState(false);
16 | 
17 |   const handleChange = () => {
18 |     setMenu(!menu);
19 |   };
20 | 
21 |   const handleScroll = () => {
22 |     setIsSticky(window.scrollY > 0);
23 |   };
24 | 
25 |   useEffect(() => {
26 |     window.addEventListener("scroll", handleScroll);
27 |     return () => {
28 |       window.removeEventListener("scroll", handleScroll);
29 |     };
30 |   }, []);
31 | 
32 |   return (
33 |     <div>
34 |       <div
35 |         className={`md:fixed ${
36 |           isSticky ? "bg-black bg-opacity-80" : ""
37 |         } flex flex-row justify-between md:px-32 px-5 p-5 gap-16 w-full`}
38 |       >
39 |         <div className="flex items-center p-2">
40 |           <Link to="/">
41 |             <h1 className="font-semibold text-2xl text-[#ff3939]">
42 |               Levels Gym
43 |             </h1>
44 |           </Link>
45 |         </div>
46 | 
47 |         <nav className="hidden md:flex items-center p-2 gap-5">
48 |           {menuItems.map((item) => (
49 |             <Link
50 |               key={item.id}
51 |               to={item.id}
52 |               spy={true}
53 |               smooth={true}
54 |               duration={500}
55 |               className="hover:text-[#ff3939] transition-all cursor-pointer"
56 |             >
57 |               {item.name}
58 |             </Link>
59 |           ))}
60 |         </nav>
61 | 
62 |         <div className="md:hidden flex items-center p-2" onClick={handleChange}>
63 |           <AiOutlineMenuUnfold size={28} />
64 |         </div>
65 |       </div>
66 | 
67 |       <div
68 |         className={`${
69 |           menu ? " translate-x-0" : "-translate-x-full"
70 |         } md:hidden flex flex-col absolute bg-black text-white left-0 top-20 font-semibold text-2xl text-center pt-8 pb-4 gap-8 w-full h-fit transition-transform duration-300`}
71 |       >
72 |         {menuItems.map((item) => (
73 |           <Link
74 |             key={item.id}
75 |             to={item.id}
76 |             spy={true}
77 |             smooth={true}
78 |             duration={500}
79 |             className="hover:text-[#ff3939] transition-all cursor-pointer"
80 |           >
81 |             {item.name}
82 |           </Link>
83 |         ))}
84 |       </div>
85 |     </div>
86 |   );
87 | };
88 | 
89 | export default Navbar;
90 | 


--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import { Link } from "react-scroll";
 3 | import { AiOutlineMenuUnfold } from "react-icons/ai";
 4 | 
 5 | const menuItems = [
 6 |   { id: "home", name: "Home" },
 7 |   { id: "about", name: "About Us" },
 8 |   { id: "plans", name: "Pricing Plans" },
 9 |   { id: "trainers", name: "Trainers" },
10 |   { id: "contact", name: "Contact Us" },
11 | ];
12 | 
13 | const Navbar = () => {
14 |   const [menu, setMenu] = useState(false);
15 |   const [isSticky, setIsSticky] = useState(false);
16 | 
17 |   const handleChange = () => {
18 |     setMenu(!menu);
19 |   };
20 | 
21 |   const handleScroll = () => {
22 |     setIsSticky(window.scrollY > 0);
23 |   };
24 | 
25 |   useEffect(() => {
26 |     window.addEventListener("scroll", handleScroll);
27 |     return () => {
28 |       window.removeEventListener("scroll", handleScroll);
29 |     };
30 |   }, []);
31 | 
32 |   return (
33 |     <div>
34 |       <div
35 |         className={`md:fixed ${
36 |           isSticky ? "bg-black bg-opacity-80" : ""
37 |         } flex flex-row justify-between md:px-32 px-5 p-5 gap-16 w-full`}
38 |       >
39 |         <div className="flex items-center p-2">
40 |           <Link to="/">
41 |             <h1 className="font-semibold text-2xl text-[#ff3939]">
42 |               Levels Gym
43 |             </h1>
44 |           </Link>
45 |         </div>
46 | 
47 |         <nav className="hidden md:flex items-center p-2 gap-5">
48 |           {menuItems.map((item) => (
49 |             <Link
50 |               key={item.id}
51 |               to={item.id}
52 |               spy={true}
53 |               smooth={true}
54 |               duration={500}
55 |               className="hover:text-[#ff3939] transition-all cursor-pointer"
56 |             >
57 |               {item.name}
58 |             </Link>
59 |           ))}
60 |         </nav>
61 | 
62 |         <div className="md:hidden flex items-center p-2" onClick={handleChange}>
63 |           <AiOutlineMenuUnfold size={28} />
64 |         </div>
65 |       </div>
66 | 
67 |       <div
68 |         className={`${
69 |           menu ? " translate-x-0" : "-translate-x-full"
70 |         } md:hidden flex flex-col absolute bg-black text-white left-0 top-20 font-semibold text-2xl text-center pt-8 pb-4 gap-8 w-full h-fit transition-transform duration-300`}
71 |       >
72 |         {menuItems.map((item) => (
73 |           <Link
74 |             key={item.id}
75 |             to={item.id}
76 |             spy={true}
77 |             smooth={true}
78 |             duration={500}
79 |             className="hover:text-[#ff3939] transition-all cursor-pointer"
80 |           >
81 |             {item.name}
82 |           </Link>
83 |         ))}
84 |       </div>
85 |     </div>
86 |   );
87 | };
88 | 
89 | export default Navbar;
90 | 


--------------------------------------------------------------------------------
/components/Contact.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Button from "../layouts/Button";
 3 | 
 4 | const Contact = () => {
 5 |   return (
 6 |     <div className="min-h-screen flex flex-col items-center justify-center md:mx-32 mx-5 mt-10">
 7 |       <div className="flex flex-col md:flex-row justify-between w-full">
 8 |         <form className="w-full md:w-2/5 space-y-5 pt-20">
 9 |           <h1 className="text-5xl font-semibold text-center">Contact Us</h1>
10 |           <div className="flex flex-col">
11 |             <label htmlFor="userName">Your Name</label>
12 |             <input
13 |               className="py-3 px-5 rounded-lg hover:shadow-md transition-all bg-gray-100 text-gray-800 focus:outline-none focus:ring-2 focus:ring-brightRed"
14 |               type="text"
15 |               name="userName"
16 |               id="userName"
17 |               placeholder="Enter your Name"
18 |             />
19 |           </div>
20 |           <div className="flex flex-col">
21 |             <label htmlFor="userEmail">Your Email</label>
22 |             <input
23 |               className="py-3 px-5 rounded-lg hover:shadow-md transition-all bg-gray-100 text-gray-800 focus:outline-none focus:ring-2 focus:ring-brightRed"
24 |               type="email"
25 |               name="userEmail"
26 |               id="userEmail"
27 |               placeholder="Enter your Email"
28 |             />
29 |           </div>
30 |           <div className="flex flex-col">
31 |             <label htmlFor="userNumber">Your Number</label>
32 |             <input
33 |               className="py-3 px-5 rounded-lg hover:shadow-md transition-all bg-gray-100 text-gray-800 focus:outline-none focus:ring-2 focus:ring-brightRed"
34 |               type="number"
35 |               name="userNumber"
36 |               id="userNumber"
37 |               placeholder="Enter your Number"
38 |             />
39 |           </div>
40 |           <div className="flex flex-col">
41 |             <label htmlFor="userMessage">Your Message</label>
42 |             <textarea
43 |               className="py-3 px-5 rounded-lg hover:shadow-md transition-all bg-gray-100 text-gray-800 focus:outline-none focus:ring-2 focus:ring-brightRed"
44 |               name="userMessage"
45 |               id="userMessage"
46 |               rows="4"
47 |               placeholder="Enter your Message"
48 |             ></textarea>
49 |           </div>
50 |           <div className="flex flex-row justify-center space-x-4">
51 |             <Button title="Send Message" />
52 |             <Button title="Start a call" href="tel:+92" />
53 |           </div>
54 |         </form>
55 |         <div className="flex flex-row items-center w-full md:w-2/4 my-5">
56 |           <iframe
57 |             title="Location"
58 |             src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d108915.64214412407!2d74.19009261029682!3d31.452296963075824!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391901246c16dbad%3A0x9fb71f55f2cb6a59!2sLevels%20gym!5e0!3m2!1sen!2s!4v1709278409350!5m2!1sen!2s"
59 |             width="500"
60 |             height="450"
61 |             style={{ border: 0 }}
62 |             allowFullScreen=""
63 |             loading="lazy"
64 |           ></iframe>
65 |         </div>
66 |       </div>
67 |     </div>
68 |   );
69 | };
70 | 
71 | export default Contact;
72 | 


--------------------------------------------------------------------------------
/src/components/Contact.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Button from "../layouts/Button";
 3 | 
 4 | const Contact = () => {
 5 |   return (
 6 |     <div className="min-h-screen flex flex-col items-center justify-center md:mx-32 mx-5 mt-10">
 7 |       <div className="flex flex-col md:flex-row justify-between w-full">
 8 |         <form className="w-full md:w-2/5 space-y-5 pt-20">
 9 |           <h1 className="text-5xl font-semibold text-center">Contact Us</h1>
10 |           <div className="flex flex-col">
11 |             <label htmlFor="userName">Your Name</label>
12 |             <input
13 |               className="py-3 px-5 rounded-lg hover:shadow-md transition-all bg-gray-100 text-gray-800 focus:outline-none focus:ring-2 focus:ring-brightRed"
14 |               type="text"
15 |               name="userName"
16 |               id="userName"
17 |               placeholder="Enter your Name"
18 |             />
19 |           </div>
20 |           <div className="flex flex-col">
21 |             <label htmlFor="userEmail">Your Email</label>
22 |             <input
23 |               className="py-3 px-5 rounded-lg hover:shadow-md transition-all bg-gray-100 text-gray-800 focus:outline-none focus:ring-2 focus:ring-brightRed"
24 |               type="email"
25 |               name="userEmail"
26 |               id="userEmail"
27 |               placeholder="Enter your Email"
28 |             />
29 |           </div>
30 |           <div className="flex flex-col">
31 |             <label htmlFor="userNumber">Your Number</label>
32 |             <input
33 |               className="py-3 px-5 rounded-lg hover:shadow-md transition-all bg-gray-100 text-gray-800 focus:outline-none focus:ring-2 focus:ring-brightRed"
34 |               type="number"
35 |               name="userNumber"
36 |               id="userNumber"
37 |               placeholder="Enter your Number"
38 |             />
39 |           </div>
40 |           <div className="flex flex-col">
41 |             <label htmlFor="userMessage">Your Message</label>
42 |             <textarea
43 |               className="py-3 px-5 rounded-lg hover:shadow-md transition-all bg-gray-100 text-gray-800 focus:outline-none focus:ring-2 focus:ring-brightRed"
44 |               name="userMessage"
45 |               id="userMessage"
46 |               rows="4"
47 |               placeholder="Enter your Message"
48 |             ></textarea>
49 |           </div>
50 |           <div className="flex flex-row justify-center space-x-4">
51 |             <Button title="Send Message" />
52 |             <Button title="Start a call" href="tel:+92" />
53 |           </div>
54 |         </form>
55 |         <div className="flex flex-row items-center w-full md:w-2/4 my-5">
56 |           <iframe
57 |             title="Location"
58 |             src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d108915.64214412407!2d74.19009261029682!3d31.452296963075824!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391901246c16dbad%3A0x9fb71f55f2cb6a59!2sLevels%20gym!5e0!3m2!1sen!2s!4v1709278409350!5m2!1sen!2s"
59 |             width="500"
60 |             height="450"
61 |             style={{ border: 0 }}
62 |             allowFullScreen=""
63 |             loading="lazy"
64 |           ></iframe>
65 |         </div>
66 |       </div>
67 |     </div>
68 |   );
69 | };
70 | 
71 | export default Contact;
72 | 


--------------------------------------------------------------------------------