├── README.md
├── src
    ├── vite-env.d.ts
    ├── assets
    │   ├── Logo.png
    │   ├── Arrow.png
    │   ├── Circles.png
    │   ├── image1.png
    │   ├── image2.png
    │   ├── image3.png
    │   ├── image4.png
    │   ├── image5.png
    │   ├── image6.png
    │   ├── Sparkles.png
    │   ├── EvolveText.png
    │   ├── HomePageText.png
    │   ├── AbstractWaves.png
    │   ├── SponsorForbes.png
    │   ├── SponsorFortune.png
    │   ├── SponsorRedBull.png
    │   ├── HomePageGraphic.png
    │   ├── BenefitsPageGraphic.png
    │   └── ContactUsPageGraphic.png
    ├── main.tsx
    ├── shared
    │   ├── HText.tsx
    │   ├── types.ts
    │   └── ActionButton.tsx
    ├── index.css
    ├── hooks
    │   └── useMediaQuery.ts
    ├── scenes
    │   ├── ourClasses
    │   │   ├── Class.tsx
    │   │   └── index.tsx
    │   ├── navbar
    │   │   ├── Link.tsx
    │   │   └── index.tsx
    │   ├── footer
    │   │   └── index.tsx
    │   ├── benefits
    │   │   ├── Benefit.tsx
    │   │   └── index.tsx
    │   ├── home
    │   │   └── index.tsx
    │   └── contactUs
    │   │   └── index.tsx
    └── App.tsx
├── postcss.config.js
├── prettier.config.cjs
├── tsconfig.node.json
├── vite.config.ts
├── .gitignore
├── index.html
├── .eslintrc.cjs
├── .github
    └── workflows
    │   └── deploy.yml
├── tsconfig.json
├── tailwind.config.js
├── package.json
└── public
    └── LOGO.svg


/README.md:
--------------------------------------------------------------------------------
1 | # gyn
2 | # gyn
3 | # gyn
4 | # gyn
5 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/src/assets/Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IvanTymoshchuk/gym/HEAD/src/assets/Logo.png


--------------------------------------------------------------------------------
/src/assets/Arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IvanTymoshchuk/gym/HEAD/src/assets/Arrow.png


--------------------------------------------------------------------------------
/src/assets/Circles.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IvanTymoshchuk/gym/HEAD/src/assets/Circles.png


--------------------------------------------------------------------------------
/src/assets/image1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IvanTymoshchuk/gym/HEAD/src/assets/image1.png


--------------------------------------------------------------------------------
/src/assets/image2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IvanTymoshchuk/gym/HEAD/src/assets/image2.png


--------------------------------------------------------------------------------
/src/assets/image3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IvanTymoshchuk/gym/HEAD/src/assets/image3.png


--------------------------------------------------------------------------------
/src/assets/image4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IvanTymoshchuk/gym/HEAD/src/assets/image4.png


--------------------------------------------------------------------------------
/src/assets/image5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IvanTymoshchuk/gym/HEAD/src/assets/image5.png


--------------------------------------------------------------------------------
/src/assets/image6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IvanTymoshchuk/gym/HEAD/src/assets/image6.png


--------------------------------------------------------------------------------
/src/assets/Sparkles.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IvanTymoshchuk/gym/HEAD/src/assets/Sparkles.png


--------------------------------------------------------------------------------
/src/assets/EvolveText.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IvanTymoshchuk/gym/HEAD/src/assets/EvolveText.png


--------------------------------------------------------------------------------
/src/assets/HomePageText.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IvanTymoshchuk/gym/HEAD/src/assets/HomePageText.png


--------------------------------------------------------------------------------
/src/assets/AbstractWaves.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IvanTymoshchuk/gym/HEAD/src/assets/AbstractWaves.png


--------------------------------------------------------------------------------
/src/assets/SponsorForbes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IvanTymoshchuk/gym/HEAD/src/assets/SponsorForbes.png


--------------------------------------------------------------------------------
/src/assets/SponsorFortune.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IvanTymoshchuk/gym/HEAD/src/assets/SponsorFortune.png


--------------------------------------------------------------------------------
/src/assets/SponsorRedBull.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IvanTymoshchuk/gym/HEAD/src/assets/SponsorRedBull.png


--------------------------------------------------------------------------------
/src/assets/HomePageGraphic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IvanTymoshchuk/gym/HEAD/src/assets/HomePageGraphic.png


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


--------------------------------------------------------------------------------
/src/assets/BenefitsPageGraphic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IvanTymoshchuk/gym/HEAD/src/assets/BenefitsPageGraphic.png


--------------------------------------------------------------------------------
/src/assets/ContactUsPageGraphic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IvanTymoshchuk/gym/HEAD/src/assets/ContactUsPageGraphic.png


--------------------------------------------------------------------------------
/prettier.config.cjs:
--------------------------------------------------------------------------------
1 | // prettier.config.js
2 | module.export = {
3 |   plugins: [require("prettier-plugin-tailwindcss")],
4 | };
5 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "bundler",
 7 |     "allowSyntheticDefaultImports": true
 8 |   },
 9 |   "include": ["vite.config.ts"]
10 | }
11 | 


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


--------------------------------------------------------------------------------
/src/shared/HText.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | type Props = {
 4 |   children: React.ReactNode;
 5 | };
 6 | 
 7 | const HText = ({ children }: Props) => {
 8 |   return (
 9 |     <h1 className="basis-3/5 font-montserrat text-3xl font-bold">{children}</h1>
10 |   );
11 | };
12 | 
13 | export default HText;
14 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import react from '@vitejs/plugin-react'
 3 | import path from 'path'
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   plugins: [react()],
 8 |   resolve: {
 9 |     alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }]
10 |   }
11 | })
12 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,700&family=Montserrat:wght@700&display=swap');
 2 | @tailwind base;
 3 | @tailwind components;
 4 | @tailwind utilities;
 5 | 
 6 | html, body, #root, .app{
 7 |   height: 100%;
 8 |   width: 100%;
 9 |   font-family: "DM Sans", sans-serif;
10 |   @apply text-gray-500;
11 | }


--------------------------------------------------------------------------------
/.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.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/LOGO.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Gym</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/shared/types.ts:
--------------------------------------------------------------------------------
 1 | export enum SelectedPage {
 2 |   Home = "home",
 3 |   Benefits = "benefits",
 4 |   OurClasses = "ourclasses",
 5 |   ContactUs = "contactus",
 6 | }
 7 | 
 8 | export interface BenefitType {
 9 |   icon: JSX.Element;
10 |   title: string;
11 |   description: string;
12 | }
13 | 
14 | export interface ClassType {
15 |   name: string;
16 |   description?: string; // знак запитання означає що не обов'язковий 
17 |   image: string;
18 | }


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     'eslint:recommended',
 6 |     'plugin:@typescript-eslint/recommended',
 7 |     'plugin:react-hooks/recommended',
 8 |   ],
 9 |   ignorePatterns: ['dist', '.eslintrc.cjs'],
10 |   parser: '@typescript-eslint/parser',
11 |   plugins: ['react-refresh'],
12 |   rules: {
13 |     'react-refresh/only-export-components': [
14 |       'warn',
15 |       { allowConstantExport: true },
16 |     ],
17 |   },
18 | }
19 | 


--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
 1 | name: Build and deploy to GitHub Pages
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [main]
 6 | 
 7 | jobs:
 8 |   build-and-deploy:
 9 |     runs-on: ubuntu-latest
10 |     steps:
11 |       - name: Checkout 🛎️
12 |         uses: actions/checkout@v2.3.1
13 | 
14 |       - name: Install and build 🔧
15 |         run: |
16 |           npm install
17 |           npm run build
18 | 
19 |       - name: Deploy 🚀
20 |         uses: JamesIves/github-pages-deploy-action@4.1.0
21 |         with:
22 |           branch: gh-pages
23 |           folder: dist
24 | 


--------------------------------------------------------------------------------
/src/hooks/useMediaQuery.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react";
 2 | 
 3 | const useMediaQuery = (query: string) => {
 4 |   const [matches, setMatches] = useState(false);
 5 | 
 6 |   useEffect(() => {
 7 |     const media = window.matchMedia(query);
 8 |     if (media.matches !== matches) {
 9 |       setMatches(media.matches);
10 |     }
11 |     const listener = () => setMatches(media.matches);
12 |     window.addEventListener("resize", listener);
13 |     return () => window.removeEventListener("resize", listener);
14 |   }, [matches, query]);
15 | 
16 |   return matches;
17 | };
18 | 
19 | export default useMediaQuery;
20 | 


--------------------------------------------------------------------------------
/src/shared/ActionButton.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import AnchorLink from "react-anchor-link-smooth-scroll";
 3 | import { SelectedPage } from "@/shared/types";
 4 | 
 5 | type Props = {
 6 |   children: React.ReactNode;
 7 |   setSelectedPage: (value: SelectedPage) => void;
 8 | };
 9 | 
10 | const ActionButton = ({ children, setSelectedPage }: Props) => {
11 |   return (
12 |     <AnchorLink
13 |       className="rounded-md bg-secondary-500 px-10 py-2 hover:bg-primary-500 hover:text-white"
14 |       onClick={() => setSelectedPage(SelectedPage.ContactUs)}
15 |       href={`#${SelectedPage.ContactUs}`}
16 |     >
17 |       {children}
18 |     </AnchorLink>
19 |   );
20 | };
21 | 
22 | export default ActionButton;
23 | 


--------------------------------------------------------------------------------
/src/scenes/ourClasses/Class.tsx:
--------------------------------------------------------------------------------
 1 | type Props = {
 2 |   name: string;
 3 |   description?: string;
 4 |   image: string;
 5 | };
 6 | 
 7 | const Class = ({ name, description, image }: Props) => {
 8 |   const overlayStyles = `p-5 absolute flex h-[380px] w-[450px] flex-col items-center justify-center whitespace-normal bg-primary-500 text-center text-white opacity-0 transition duration-500 hover:opacity-90`;
 9 | 
10 |   return (
11 |     <li className=" relative mx-5 inline-block h-[380px] w-[450px]">
12 |       <div className={overlayStyles}>
13 |         <p className=" text-2xl">{name}</p>
14 |         <p className=" mt-5">{description}</p>
15 |       </div>
16 |       <img src={image} alt={`${image}`} />
17 |     </li>
18 |   );
19 | };
20 | 
21 | export default Class;
22 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "paths": {
 4 |       "@/*": ["./src/*"]
 5 |     },
 6 |     "target": "ES2020",
 7 |     "useDefineForClassFields": true,
 8 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 9 |     "module": "ESNext",
10 |     "skipLibCheck": true,
11 | 
12 |     /* Bundler mode */
13 |     "moduleResolution": "bundler",
14 |     "allowImportingTsExtensions": true,
15 |     "resolveJsonModule": true,
16 |     "isolatedModules": true,
17 |     "noEmit": true,
18 |     "jsx": "react-jsx",
19 | 
20 |     /* Linting */
21 |     "strict": true,
22 |     "noUnusedLocals": true,
23 |     "noUnusedParameters": true,
24 |     "noFallthroughCasesInSwitch": true
25 |   },
26 |   "include": ["src"],
27 |   "references": [{ "path": "./tsconfig.node.json" }]
28 | }
29 | 


--------------------------------------------------------------------------------
/src/scenes/navbar/Link.tsx:
--------------------------------------------------------------------------------
 1 | import { SelectedPage } from "@/shared/types";
 2 | import AnchorLink from "react-anchor-link-smooth-scroll";
 3 | 
 4 | type Props = {
 5 |   page: string;
 6 |   selectedPage: SelectedPage;
 7 |   setSelectedPage: (value: SelectedPage) => void;
 8 | };
 9 | 
10 | const Link = ({ page, selectedPage, setSelectedPage }: Props) => {
11 |   const lowerCasePage = page.toLowerCase().replace(/ /g, "") as SelectedPage;
12 | 
13 |   return (
14 |     <AnchorLink
15 |       className={`${selectedPage === lowerCasePage ? "text-primary-500" : ""}
16 |         transition duration-500 hover:text-primary-300
17 |       `}
18 |       href={`#${lowerCasePage}`}
19 |       onClick={() => setSelectedPage(lowerCasePage)}
20 |     >
21 |       {page}
22 |     </AnchorLink>
23 |   );
24 | };
25 | 
26 | export default Link;
27 | 


--------------------------------------------------------------------------------
/src/scenes/footer/index.tsx:
--------------------------------------------------------------------------------
 1 | import Logo from "@/assets/Logo.png";
 2 | 
 3 | const Footer = () => {
 4 |   return (
 5 |     <footer className="bg-primary-100 py-16">
 6 |       <div className="justify-content mx-auto w-5/6 gap-16 md:flex">
 7 |         <div className="mt-16 basis-1/2 md:mt-0">
 8 |           <img alt="logo" src={Logo} />
 9 |           <p className="my-5">
10 |             Lorem vitae ut augue auctor faucibus eget eget ut libero. Elementum
11 |             purus et arcu massa dictum condimentum. Augue scelerisque iaculis
12 |             orci ut habitant laoreet. Iaculis tristique.
13 |           </p>
14 |           <p>© Evogym All Rights Reserved.</p>
15 |         </div>
16 |         <div className="mt-16 basis-1/4 md:mt-0">
17 |           <h4 className="font-bold">Links</h4>
18 |           <p className="my-5">Massa orci senectus</p>
19 |           <p className="my-5">Et gravida id et etiam</p>
20 |           <p>Ullamcorper vivamus</p>
21 |         </div>
22 |         <div className="mt-16 basis-1/4 md:mt-0">
23 |           <h4 className="font-bold">Contact Us</h4>
24 |           <p className="my-5">Tempus metus mattis risus volutpat egestas.</p>
25 |           <p>(333)425-6825</p>
26 |         </div>
27 |       </div>
28 |     </footer>
29 |   );
30 | };
31 | 
32 | export default Footer;
33 | 


--------------------------------------------------------------------------------
/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 |         "gray-20": "#F8F4EB",
 8 |         "gray-50": "#EFE6E6",
 9 |         "gray-100": "#DFCCCC",
10 |         "gray-500": "#5E0000",
11 |         "primary-100": "#FFE1E0",
12 |         "primary-300": "#FFA6A3",
13 |         "primary-500": "#FF6B66",
14 |         "secondary-400": "#FFCD5B",
15 |         "secondary-500": "#FFC132",
16 |       },
17 |       backgroundImage: (theme) => ({
18 |         "gradient-yellowred":
19 |           "linear-gradient(90deg, #FF616A 0%, #FFC837 100%)",
20 |         "mobile-home": "url('./assets/HomePageGraphic.png')",
21 |       }),
22 |       fontFamily: {
23 |         dmsans: ["DM Sans", "sans-serif"],
24 |         montserrat: ["Montserrat", "sans-serif"],
25 |       },
26 |       content: {
27 |         evolvetext: "url('./assets/EvolveText.png')",
28 |         abstractwaves: "url('./assets/AbstractWaves.png')",
29 |         sparkles: "url('./assets/Sparkles.png')",
30 |         circles: "url('./assets/Circles.png')",
31 |       },
32 |     },
33 |     screens: {
34 |       xs: "480px",
35 |       sm: "768px",
36 |       md: "1060px",
37 |     },
38 |   },
39 |   plugins: [],
40 | };
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gym-typescript",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build --base=/gym/",
 9 |     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@heroicons/react": "^2.0.18",
14 |     "framer-motion": "^10.16.5",
15 |     "react": "^18.2.0",
16 |     "react-anchor-link-smooth-scroll": "^1.0.12",
17 |     "react-dom": "^18.2.0",
18 |     "react-hook-form": "^7.48.2"
19 |   },
20 |   "devDependencies": {
21 |     "@types/node": "^20.9.0",
22 |     "@types/react": "^18.2.37",
23 |     "@types/react-anchor-link-smooth-scroll": "^1.0.2",
24 |     "@types/react-dom": "^18.2.15",
25 |     "@typescript-eslint/eslint-plugin": "^6.10.0",
26 |     "@typescript-eslint/parser": "^6.10.0",
27 |     "@vitejs/plugin-react": "^4.2.0",
28 |     "autoprefixer": "^10.4.16",
29 |     "eslint": "^8.53.0",
30 |     "eslint-plugin-react-hooks": "^4.6.0",
31 |     "eslint-plugin-react-refresh": "^0.4.4",
32 |     "postcss": "^8.4.31",
33 |     "prettier": "^3.1.0",
34 |     "prettier-plugin-tailwindcss": "^0.5.7",
35 |     "tailwindcss": "^3.3.5",
36 |     "typescript": "^5.2.2",
37 |     "vite": "^5.0.0"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/scenes/benefits/Benefit.tsx:
--------------------------------------------------------------------------------
 1 | import { SelectedPage } from "@/shared/types";
 2 | import { motion } from "framer-motion";
 3 | import AnchorLink from "react-anchor-link-smooth-scroll";
 4 | 
 5 | type Props = {
 6 |   icon: JSX.Element;
 7 |   title: string;
 8 |   description: string;
 9 |   setSelectedPage: (value: SelectedPage) => void;
10 | };
11 | 
12 | const childVariant = {
13 |   hidden: { opacity: 0, scale: 0.9 },
14 |   visible: { opacity: 1, scale: 1 },
15 | };
16 | 
17 | const Benefit = ({ icon, title, description, setSelectedPage }: Props) => {
18 |   return (
19 |     <motion.div
20 |       className="mt-5 rounded-md border-2 border-gray-100 px-5 py-16 text-center"
21 |       variants={childVariant}
22 |     >
23 |       <div className="mb-4 flex justify-center">
24 |         <div className="rounded-full border-2 border-gray-100 bg-primary-100 p-4">
25 |           {icon}
26 |         </div>
27 |       </div>
28 |       <h4 className="font-bold">{title}</h4>
29 |       <p className="my-3">{description}</p>
30 |       <AnchorLink
31 |         className="text-sm font-bold text-primary-500 underline hover:text-secondary-500"
32 |         onClick={() => setSelectedPage(SelectedPage.Benefits)}
33 |         href={`#${SelectedPage.Benefits}`}
34 |       >
35 |         Learn More
36 |       </AnchorLink>
37 |     </motion.div>
38 |   );
39 | };
40 | 
41 | export default Benefit;
42 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import { SelectedPage } from "@/shared/types";
 3 | import NavBar from "@/scenes/navbar";
 4 | import Home from "@/scenes/home";
 5 | import Benefits from "@/scenes/benefits";
 6 | import OurClasses from "@/scenes/ourClasses";
 7 | import ContactUs from "@/scenes/contactUs";
 8 | import Footer from "@/scenes/footer";
 9 | 
10 | const App = () => {
11 |   const [selectedPage, setSelectedPage] = useState<SelectedPage>(
12 |     SelectedPage.Home,
13 |   );
14 |   const [isTopOfPage, setIsTopOfPage] = useState<boolean>(true);
15 | 
16 |   useEffect(() => {
17 |     const handleScroll = () => {
18 |       if (window.scrollY === 0) {
19 |         setIsTopOfPage(true); // початкове значення де ми є
20 |         setSelectedPage(SelectedPage.Home); // це для того, щоб коли ми скролили з відкритою модалкою воно переводило автоматично ховер
21 |       }
22 |       if (window.scrollY !== 0) setIsTopOfPage(false);
23 |     };
24 |     window.addEventListener("scroll", handleScroll);
25 | 
26 |     return () => removeEventListener("scroll", handleScroll);
27 |   }, []);
28 | 
29 |   return (
30 |     <div className="app bg-gray-20">
31 |       <NavBar
32 |         isTopOfPage={isTopOfPage}
33 |         selectedPage={selectedPage}
34 |         setSelectedPage={setSelectedPage}
35 |       />
36 |       <Home setSelectedPage={setSelectedPage} />
37 |       <Benefits setSelectedPage={setSelectedPage} />
38 |       <OurClasses setSelectedPage={setSelectedPage} />
39 |       <ContactUs setSelectedPage={setSelectedPage} />
40 |       <Footer />
41 |     </div>
42 |   );
43 | };
44 | 
45 | export default App;
46 | 


--------------------------------------------------------------------------------
/public/LOGO.svg:
--------------------------------------------------------------------------------
 1 | <svg width="174" height="94" viewBox="0 0 174 94" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <rect x="1.5" y="2.01953" width="170.153" height="89.5888" stroke="white" stroke-width="3"/>
 3 | <path d="M29.4713 34.9223C28.643 34.9223 27.9168 34.7691 27.2927 34.4627C26.6686 34.145 26.1807 33.7082 25.829 33.1522C25.4886 32.5848 25.3184 31.9267 25.3184 31.1778V25.9015C25.3184 25.1413 25.4886 24.4832 25.829 23.9272C26.1807 23.3712 26.6686 22.94 27.2927 22.6336C27.9168 22.3159 28.643 22.157 29.4713 22.157C30.311 22.157 31.0372 22.3159 31.6499 22.6336C32.274 22.94 32.7562 23.3712 33.0966 23.9272C33.4484 24.4832 33.6243 25.1413 33.6243 25.9015H31.0712C31.0712 25.4022 30.9294 25.0221 30.6457 24.7612C30.3734 24.5002 29.9819 24.3697 29.4713 24.3697C28.9607 24.3697 28.5636 24.5002 28.2799 24.7612C28.0076 25.0221 27.8714 25.4022 27.8714 25.9015V31.1778C27.8714 31.6657 28.0076 32.0458 28.2799 32.3182C28.5636 32.5791 28.9607 32.7096 29.4713 32.7096C29.9819 32.7096 30.3734 32.5791 30.6457 32.3182C30.9294 32.0458 31.0712 31.6657 31.0712 31.1778H33.6243C33.6243 31.9267 33.4484 32.5848 33.0966 33.1522C32.7562 33.7082 32.274 34.145 31.6499 34.4627C31.0372 34.7691 30.311 34.9223 29.4713 34.9223Z" fill="white"/>
 4 | <path fill-rule="evenodd" clip-rule="evenodd" d="M20.48 46.7521V51.7521H26.3999V71.4321H32.3999V51.7521H38.3198V46.7521H32.3999H26.3999H20.48Z" fill="white"/>
 5 | <circle cx="65.7996" cy="28.3694" r="6.38262" fill="white"/>
 6 | <path fill-rule="evenodd" clip-rule="evenodd" d="M56.8799 51.7521V46.7521H62.7998H68.7998H74.7197V51.7521H68.7998V66.4302H74.7197V71.4302H68.7998V71.4321H62.7998V71.4302H56.8799V66.4302H62.7998V51.7521H56.8799Z" fill="white"/>
 7 | <path d="M98.1692 34.754V22.3291H102.203C103.065 22.3291 103.814 22.4937 104.45 22.8227C105.096 23.1518 105.596 23.617 105.948 24.2184C106.311 24.8084 106.492 25.5063 106.492 26.3119V30.7542C106.492 31.5485 106.311 32.2463 105.948 32.8477C105.596 33.4491 105.096 33.92 104.45 34.2604C103.814 34.5894 103.065 34.754 102.203 34.754H98.1692ZM100.722 32.3711H102.203C102.725 32.3711 103.145 32.2236 103.463 31.9286C103.78 31.6336 103.939 31.2421 103.939 30.7542V26.3119C103.939 25.8353 103.78 25.4495 103.463 25.1545C103.145 24.8595 102.725 24.712 102.203 24.712H100.722V32.3711Z" fill="white"/>
 8 | <path fill-rule="evenodd" clip-rule="evenodd" d="M97.4038 46.754H92.4038V71.4321H97.4038V57.7747L99.2434 62.9924L99.4009 63.4454H105.01L105.412 62.2642L106.995 57.7747V71.4321H111.995V46.754H106.995L102.199 60.3561L97.4038 46.754Z" fill="white"/>
 9 | <path d="M134.859 34.749V22.3241H142.518V24.5027H137.361V27.2941H141.922V29.4727H137.361V32.5704H142.518V34.749H134.859Z" fill="white"/>
10 | <path fill-rule="evenodd" clip-rule="evenodd" d="M136.559 46.749H135.53L125.796 68.3308L125.726 68.3774L125.763 68.4055L124.4 71.427H129.732L129.737 71.4161L129.758 71.4321L143.39 62.2131L147.46 71.427H152.792L147.41 59.4943L152.801 55.8488L148.343 53.4639L145.528 55.3204L141.662 46.749H140.633H136.559ZM141.514 57.9668L138.596 51.3602L133.279 63.3969L141.514 57.9668Z" fill="white"/>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/src/scenes/ourClasses/index.tsx:
--------------------------------------------------------------------------------
 1 | import { motion } from "framer-motion";
 2 | import { SelectedPage, ClassType } from "@/shared/types";
 3 | import HText from "@/shared/HText";
 4 | import Class from "./Class";
 5 | import image1 from "@/assets/image1.png";
 6 | import image2 from "@/assets/image2.png";
 7 | import image3 from "@/assets/image3.png";
 8 | import image4 from "@/assets/image4.png";
 9 | import image5 from "@/assets/image5.png";
10 | import image6 from "@/assets/image6.png";
11 | 
12 | type Props = {
13 |   setSelectedPage: (value: SelectedPage) => void;
14 | };
15 | 
16 | const classes: Array<ClassType> = [
17 |   {
18 |     name: "Weight Training Classes",
19 |     description:
20 |       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
21 |     image: image1,
22 |   },
23 |   {
24 |     name: "Yoga Classes",
25 |     image: image2,
26 |   },
27 |   {
28 |     name: "Ab Core Classes",
29 |     description:
30 |       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
31 |     image: image3,
32 |   },
33 |   {
34 |     name: "Adventure Classes",
35 |     description:
36 |       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
37 |     image: image4,
38 |   },
39 |   {
40 |     name: "Fitness Classes",
41 |     image: image5,
42 |   },
43 |   {
44 |     name: "Training Classes",
45 |     description:
46 |       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
47 |     image: image6,
48 |   },
49 | ];
50 | 
51 | const OurClasses = ({ setSelectedPage }: Props) => {
52 |   return (
53 |     <section id="ourclasses" className=" w-full bg-primary-100 py-40">
54 |       <motion.div
55 |         onViewportEnter={() => setSelectedPage(SelectedPage.OurClasses)}
56 |       >
57 |         <motion.div
58 |           className="mx-auto w-5/6"
59 |           initial="hidden"
60 |           whileInView="visible"
61 |           viewport={{ once: true, amount: 0.5 }}
62 |           transition={{ duration: 0.5 }}
63 |           variants={{
64 |             hidden: { opacity: 0, x: -50 },
65 |             visible: { opacity: 1, x: 0 },
66 |           }}
67 |         >
68 |           <div className="md:w-3/5">
69 |             <HText>OUR CLASSES</HText>
70 |             <p className="py-5">
71 |               Fringilla a sed at suspendisse ut enim volutpat. Rhoncus vel est
72 |               tellus quam porttitor. Mauris velit euismod elementum arcu neque
73 |               facilisi. Amet semper tortor facilisis metus nibh. Rhoncus sit
74 |               enim mattis odio in risus nunc.
75 |             </p>
76 |           </div>
77 |         </motion.div>
78 |         <div className=" mt-10 h-[335px] w-full overflow-x-auto overflow-y-hidden">
79 |           <ul className="w-[2800px] whitespace-nowrap">
80 |             {classes.map((item, index) => (
81 |               <Class
82 |                 key={`${item.name}-${index}`}
83 |                 name={item.name}
84 |                 description={item.description}
85 |                 image={item.image}
86 |               />
87 |             ))}
88 |           </ul>
89 |         </div>
90 |       </motion.div>
91 |     </section>
92 |   );
93 | };
94 | 
95 | export default OurClasses;
96 | 


--------------------------------------------------------------------------------
/src/scenes/home/index.tsx:
--------------------------------------------------------------------------------
 1 | import useMediaQuery from "@/hooks/useMediaQuery";
 2 | import ActionButton from "@/shared/ActionButton";
 3 | import { SelectedPage } from "@/shared/types";
 4 | import HomePageText from "@/assets/HomePageText.png";
 5 | import HomePageGraphic from "@/assets/HomePageGraphic.png";
 6 | import SponsorRedBul from "@/assets/SponsorRedBull.png";
 7 | import SponsorForbes from "@/assets/SponsorForbes.png";
 8 | import SponsorFortune from "@/assets/SponsorFortune.png";
 9 | import AnchorLink from "react-anchor-link-smooth-scroll";
10 | import { motion } from "framer-motion"; //animation
11 | 
12 | type Props = {
13 |   setSelectedPage: (value: SelectedPage) => void;
14 | };
15 | 
16 | const Home = ({ setSelectedPage }: Props) => {
17 |   const isAboutMediumScreens = useMediaQuery("(min-width:1060px)");
18 | 
19 |   return (
20 |     <section id="home" className="gap-16 bg-gray-20 py-10 md:h-full md:pb-0">
21 |       {/* IMAGE AND MAIN HEADER */}
22 |       <motion.div
23 |         className="md:flex mx-auto w-5/6 items-center justify-center md:h-5/6"
24 |         onViewportEnter={() => setSelectedPage(SelectedPage.Home)}
25 |       >
26 |         {/* Main header */}
27 |         <div className="z-10 mt-32 md:basis-3/5">
28 |           {/* Headings */}
29 |           <motion.div
30 |             className="md:-mt-20"
31 |             initial="hidden"
32 |             whileInView="visible"
33 |             viewport={{ once: true, amount: 0.5 }}
34 |             transition={{ duration: 0.5 }}
35 |             variants={{
36 |               hidden: { opacity: 0, x: -50 },
37 |               visible: { opacity: 1, x: 0 },
38 |             }}
39 |           >
40 |             <div className="relative">
41 |               <div className="before:absolute before:-top-20 before:-left-20 before:z-[-1]  md:before:content-evolvetext">
42 |                 <img src={HomePageText} alt="home-page-text" />
43 |               </div>
44 |             </div>
45 |             <p className="mt-8 text-sm">
46 |               Unrivaled Gym. Unparalleled Training Fitness Classes. World Class
47 |               Studios to get the Body Shapes That you Dream of.. Get Your Dream
48 |               Body Now.
49 |             </p>
50 |           </motion.div>
51 |           {/* Actions */}
52 |           <motion.div
53 |             className="mt-8 flex items-center gap-8"
54 |             initial="hidden"
55 |             whileInView="visible"
56 |             viewport={{ once: true, amount: 0.5 }}
57 |             transition={{ delay: 0.2, duration: 0.5 }}
58 |             variants={{
59 |               hidden: { opacity: 0, x: -50 },
60 |               visible: { opacity: 1, x: 0 },
61 |             }}
62 |           >
63 |             <ActionButton setSelectedPage={setSelectedPage}>
64 |               Join Now
65 |             </ActionButton>
66 |             <AnchorLink
67 |               className="text-sm font-bold text-primary-500 underline hover:text-secondary-500"
68 |               onClick={() => setSelectedPage(SelectedPage.ContactUs)}
69 |               href={`#${SelectedPage.ContactUs}`}
70 |             >
71 |               Learn More
72 |             </AnchorLink>
73 |           </motion.div>
74 |         </div>
75 |         {/* Image */}
76 |         <div className="flex basis-3/5 justify-center md:z-10 md:ml-40 md:mt-16 md:justify-items-end">
77 |           <img src={HomePageGraphic} alt="Home-Page-Graphic" />
78 |         </div>
79 |       </motion.div>
80 |       {/* Sponsors */}
81 |       {isAboutMediumScreens && (
82 |         <div className="h-[150px] w-full bg-primary-100 py-10">
83 |           <div className="mx-auto w-5/6">
84 |             <div className="flex w-3/5 items-center justify-between">
85 |               <img src={SponsorRedBul} alt="SponsorRedBul" />
86 |               <img src={SponsorForbes} alt="SponsorForbes" />
87 |               <img src={SponsorFortune} alt="SponsorFortune" />
88 |             </div>
89 |           </div>
90 |         </div>
91 |       )}
92 |     </section>
93 |   );
94 | };
95 | 
96 | export default Home;
97 | 


--------------------------------------------------------------------------------
/src/scenes/navbar/index.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
  3 | import { SelectedPage } from "@/shared/types";
  4 | import useMediaQuery from "@/hooks/useMediaQuery";
  5 | import ActionButton from "@/shared/ActionButton";
  6 | import Logo from "@/assets/Logo.png";
  7 | import Link from "./Link";
  8 | 
  9 | type Props = {
 10 |   isTopOfPage: boolean;
 11 |   selectedPage: SelectedPage;
 12 |   setSelectedPage: (value: SelectedPage) => void;
 13 | };
 14 | 
 15 | 
 16 | const Navbar = ({ isTopOfPage, selectedPage, setSelectedPage }: Props) => {
 17 |   const flexBetween = "flex items-center justify-between";
 18 |   const [isMenuToggled, setIsMenuToggled] = useState<boolean>(false);
 19 |   const isAboveMediumScreens = useMediaQuery("(min-width: 1060px)");
 20 |   const navbarBackground = isTopOfPage ? "" : "bg-primary-100 drop-shadow";
 21 | 
 22 |   return (
 23 |     <nav>
 24 |       <div
 25 |         className={`${navbarBackground} ${flexBetween} fixed top-0 z-30 w-full py-6`}
 26 |       >
 27 |         <div className={`${flexBetween} mx-auto w-5/6`}>
 28 |           <div className={`${flexBetween} w-full gap-16`}>
 29 |             {/* LEFT SIDE */}
 30 |             <img alt="logo" src={Logo} />
 31 | 
 32 |             {/* RIGHT SIDE */}
 33 |             {isAboveMediumScreens ? (
 34 |               <div className={`${flexBetween} w-full`}>
 35 |                 <div className={`${flexBetween} gap-8 text-sm`}>
 36 |                   <Link
 37 |                     page="Home"
 38 |                     selectedPage={selectedPage}
 39 |                     setSelectedPage={setSelectedPage}
 40 |                   />
 41 |                   <Link
 42 |                     page="Benefits"
 43 |                     selectedPage={selectedPage}
 44 |                     setSelectedPage={setSelectedPage}
 45 |                   />
 46 |                   <Link
 47 |                     page="Our Classes"
 48 |                     selectedPage={selectedPage}
 49 |                     setSelectedPage={setSelectedPage}
 50 |                   />
 51 |                   <Link
 52 |                     page="Contact Us"
 53 |                     selectedPage={selectedPage}
 54 |                     setSelectedPage={setSelectedPage}
 55 |                   />
 56 |                 </div>
 57 |                 <div className={`${flexBetween} gap-8`}>
 58 |                   <p>Sign In</p>
 59 |                   <ActionButton setSelectedPage={setSelectedPage}>
 60 |                     Become a Member
 61 |                   </ActionButton>
 62 |                 </div>
 63 |               </div>
 64 |             ) : (
 65 |               <button
 66 |                 className="rounded-full bg-secondary-500 p-2"
 67 |                 onClick={() => setIsMenuToggled(!isMenuToggled)}
 68 |               >
 69 |                 <Bars3Icon className="h-6 w-6 text-white" />
 70 |               </button>
 71 |             )}
 72 |           </div>
 73 |         </div>
 74 |       </div>
 75 | 
 76 |       {/* MOBILE MENU MODAL */}
 77 |       {!isAboveMediumScreens && isMenuToggled && (
 78 |         <div className="fixed right-0 bottom-0 z-40 h-full w-[300px] bg-primary-100 drop-shadow-xl">
 79 |           {/* CLOSE ICON */}
 80 |           <div className="flex justify-end p-12">
 81 |             <button onClick={() => setIsMenuToggled(!isMenuToggled)}>
 82 |               <XMarkIcon className="h-6 w-6 text-gray-400" />
 83 |             </button>
 84 |           </div>
 85 | 
 86 |           {/* MENU ITEMS */}
 87 |           <div className="ml-[33%] flex flex-col gap-10 text-2xl">
 88 |             <Link
 89 |               page="Home"
 90 |               selectedPage={selectedPage}
 91 |               setSelectedPage={setSelectedPage}
 92 |             />
 93 |             <Link
 94 |               page="Benefits"
 95 |               selectedPage={selectedPage}
 96 |               setSelectedPage={setSelectedPage}
 97 |             />
 98 |             <Link
 99 |               page="Our Classes"
100 |               selectedPage={selectedPage}
101 |               setSelectedPage={setSelectedPage}
102 |             />
103 |             <Link
104 |               page="Contact Us"
105 |               selectedPage={selectedPage}
106 |               setSelectedPage={setSelectedPage}
107 |             />
108 |           </div>
109 |         </div>
110 |       )}
111 |     </nav>
112 |   );
113 | };
114 | 
115 | export default Navbar;
116 | 


--------------------------------------------------------------------------------
/src/scenes/contactUs/index.tsx:
--------------------------------------------------------------------------------
  1 | import { motion } from "framer-motion";
  2 | import { useForm } from "react-hook-form";
  3 | import { SelectedPage } from "@/shared/types";
  4 | import ContactUsPageGraphic from "@/assets/ContactUsPageGraphic.png";
  5 | import HText from "@/shared/HText";
  6 | 
  7 | type Props = {
  8 |   setSelectedPage: (value: SelectedPage) => void;
  9 | };
 10 | 
 11 | const ContactUs = ({ setSelectedPage }: Props) => {
 12 |   const inputStyles = `mb-5 w-full rounded-lg bg-primary-300 px-5 py-3 placeholder-white`;
 13 |   const {
 14 |     register,
 15 |     trigger,
 16 |     formState: { errors },
 17 |   } = useForm();
 18 | 
 19 |   const onSubmit = async (e: any) => {
 20 |     const isValid = await trigger();
 21 |     if (!isValid) {
 22 |       e.preventDefault();
 23 |     }
 24 |   };
 25 | 
 26 |   return (
 27 |     <section id="contactus" className="mx-auto w-5/6 pt-24 pb-32 ">
 28 |       <motion.div
 29 |         onViewportEnter={() => setSelectedPage(SelectedPage.ContactUs)}
 30 |       >
 31 |         {/* header */}
 32 |         <motion.div
 33 |           className="md:w-3/5"
 34 |           initial="hidden"
 35 |           whileInView="visible"
 36 |           viewport={{ once: true, amount: 0.5 }}
 37 |           transition={{ duration: 0.5 }}
 38 |           variants={{
 39 |             hidden: { opacity: 0, x: -50 },
 40 |             visible: { opacity: 1, x: 0 },
 41 |           }}
 42 |         >
 43 |           <HText>
 44 |             <span className=" text-primary-500">JOIN NOW </span>
 45 |             TO GET IN SHAPE
 46 |           </HText>
 47 |           <p className="my-5">
 48 |             Congue adipiscing risus commodo placerat. Tellus et in feugiat nisl
 49 |             sapien vel rhoncus. Placerat at in enim pellentesque. Nulla
 50 |             adipiscing leo egestas nisi elit risus sit. Nunc cursus sagittis.
 51 |           </p>
 52 |         </motion.div>
 53 |         {/* Form and image */}
 54 |         <div className=" mt-10 justify-between gap-8 md:flex">
 55 |           <motion.div
 56 |             className=" mt-10 basis-3/5 md:mt-0"
 57 |             initial="hidden"
 58 |             whileInView="visible"
 59 |             viewport={{ once: true, amount: 0.5 }}
 60 |             transition={{ duration: 0.5 }}
 61 |             variants={{
 62 |               hidden: { opacity: 0, y: 50 },
 63 |               visible: { opacity: 1, y: 0 },
 64 |             }}
 65 |           >
 66 |             <form
 67 |               target="_blank"
 68 |               onSubmit={onSubmit}
 69 |               method="POST"
 70 |               action="https://formsubmit.co/1e27088768d3c9dedd8ba761757e2681"
 71 |             >
 72 |               <input
 73 |                 type="text"
 74 |                 className={inputStyles}
 75 |                 placeholder="NAME"
 76 |                 {...register("name", { required: true, maxLength: 100 })}
 77 |               />
 78 |               {errors.name && (
 79 |                 <p className=" mt-1 text-primary-500">
 80 |                   {errors.name.type === "required" && "Theis field is required"}
 81 |                   {errors.name.type === "maxLength" &&
 82 |                     "Max length is 100 char."}
 83 |                 </p>
 84 |               )}
 85 | 
 86 |               <input
 87 |                 type="text"
 88 |                 className={inputStyles}
 89 |                 placeholder="EMAIL"
 90 |                 {...register("email", {
 91 |                   required: true,
 92 |                   pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
 93 |                 })}
 94 |               />
 95 |               {errors.email && (
 96 |                 <p className=" mt-1 text-primary-500">
 97 |                   {errors.email.type === "required" &&
 98 |                     "Theis field is required"}
 99 |                   {errors.email.type === "pattern" && "Invalid email adresse"}
100 |                 </p>
101 |               )}
102 |               <textarea
103 |                 rows={4}
104 |                 cols={50}
105 |                 placeholder="MESSEGE"
106 |                 className={inputStyles}
107 |                 {...register("message", { required: true, maxLength: 2000 })}
108 |               />
109 |               {errors.message && (
110 |                 <p className=" mt-1 text-primary-500">
111 |                   {errors.message.type === "required" &&
112 |                     "Theis field is required"}
113 |                   {errors.message.type === "maxLength" &&
114 |                     "Max length is 2000 char."}
115 |                 </p>
116 |               )}
117 |               <button
118 |                 type="submit"
119 |                 className=" mt-5 rounded-lg bg-secondary-500 px-20 py-3 transition duration-500 hover:text-white"
120 |               >
121 |                 SUBMIT
122 |               </button>
123 |             </form>
124 |           </motion.div>
125 |           <motion.div
126 |             className="relative mt-16 basis-2/5 md:mt-0"
127 |             initial="hidden"
128 |             whileInView="visible"
129 |             viewport={{ once: true, amount: 0.5 }}
130 |             transition={{ delay: 0.2, duration: 0.5 }}
131 |             variants={{
132 |               hidden: { opacity: 0, x: -50 },
133 |               visible: { opacity: 1, x: 0 },
134 |             }}
135 |           >
136 |             <div className=" md:before:content-evolvetext w-full before:absolute before:-bottom-20 before:-right-10 before:z-[-1]">
137 |               <img
138 |                 src={ContactUsPageGraphic}
139 |                 alt="ContactUsPageGraphic"
140 |                 className=" w-full"
141 |               />
142 |             </div>
143 |           </motion.div>
144 |         </div>
145 |       </motion.div>
146 |     </section>
147 |   );
148 | };
149 | 
150 | export default ContactUs;
151 | 


--------------------------------------------------------------------------------
/src/scenes/benefits/index.tsx:
--------------------------------------------------------------------------------
  1 | import { motion } from "framer-motion";
  2 | import {
  3 |   HomeModernIcon,
  4 |   UserGroupIcon,
  5 |   AcademicCapIcon,
  6 | } from "@heroicons/react/24/solid";
  7 | import ActionButton from "@/shared/ActionButton";
  8 | import { BenefitType, SelectedPage } from "@/shared/types";
  9 | import BenefitsPageGraphic from "@/assets/BenefitsPageGraphic.png";
 10 | import HText from "../../shared/HText";
 11 | import Benefit from "./Benefit";
 12 | 
 13 | type Props = {
 14 |   setSelectedPage: (value: SelectedPage) => void;
 15 | };
 16 | 
 17 | const container = {
 18 |   hidden: {},
 19 |   visible: {
 20 |     transition: { staggerChildren: 0.2 },
 21 |   },
 22 | };
 23 | 
 24 | const benefits: Array<BenefitType> = [
 25 |   {
 26 |     icon: <HomeModernIcon className="h-6 w-6" />,
 27 |     title: "State of the Art Facilities",
 28 |     description:
 29 |       "Neque adipiscing amet amet enim. Feugiat dolor enim fermentum in a in lectus pellentesque. Ullamcorper et.",
 30 |   },
 31 |   {
 32 |     icon: <UserGroupIcon className="h-6 w-6" />,
 33 |     title: "100's of Diverse Classes",
 34 |     description:
 35 |       "Eu ipsum id egestas risus tempus enim semper felis quis. Nec consectetur ac venenatis facilisi est. Eget ac turpis id.",
 36 |   },
 37 |   {
 38 |     icon: <AcademicCapIcon className="h-6 w-6" />,
 39 |     title: "Expert and Pro Trainers",
 40 |     description:
 41 |       "Fusce vestibulum aliquam ut cras. Nisl lectus egestas sapien nisl. Lacus at mi sit pellentesque. Congue parturient.",
 42 |   },
 43 | ];
 44 | 
 45 | const Benefits = ({ setSelectedPage }: Props) => {
 46 |   return (
 47 |     <section id="benefits" className="mx-auto min-h-full w-5/6 py-20">
 48 |       <motion.div
 49 |         onViewportEnter={() => setSelectedPage(SelectedPage.Benefits)}
 50 |       >
 51 |         {/* Header */}
 52 |         <motion.div
 53 |           className="md:my-5 md:w-3/5"
 54 |           initial="hidden"
 55 |           whileInView="visible"
 56 |           viewport={{ once: true, amount: 0.5 }}
 57 |           transition={{ duration: 0.5 }}
 58 |           variants={{
 59 |             hidden: { opacity: 0, x: -50 },
 60 |             visible: { opacity: 1, x: 0 },
 61 |           }}
 62 |         >
 63 |           <HText>MORE THAN JUST GYM.</HText>
 64 |           <p className="my-5 text-sm">
 65 |             We provide world class fitness equipment, trainers and classes to
 66 |             get you to your ultimate fitness goals with ease. We provide true
 67 |             care into each and every member.
 68 |           </p>
 69 |         </motion.div>
 70 | 
 71 |         {/* Benefits */}
 72 |         <motion.div
 73 |           className=" md:flex items-center justify-between gap-8 mt-5"
 74 |           initial="hidden"
 75 |           whileInView="visible"
 76 |           viewport={{ once: true, amount: 0.5 }}
 77 |           variants={container}
 78 |         >
 79 |           {benefits.map((benefit: BenefitType) => (
 80 |             <Benefit
 81 |               key={benefit.title}
 82 |               icon={benefit.icon}
 83 |               title={benefit.title}
 84 |               description={benefit.description}
 85 |               setSelectedPage={setSelectedPage}
 86 |             />
 87 |           ))}
 88 |         </motion.div>
 89 |         {/* Graphics and descr */}
 90 |         <div className="mt-16 items-center justify-between gap-20 md:mt-28 md:flex">
 91 |           {/* Graphic */}
 92 |           <img
 93 |             src={BenefitsPageGraphic}
 94 |             alt="BenefitsPageGraphic"
 95 |             className="mx-auto "
 96 |           />
 97 |           {/* descr */}
 98 |           <div>
 99 |             {/* title  */}
100 |             <motion.div
101 |               initial="hidden"
102 |               whileInView="visible"
103 |               viewport={{ once: true, amount: 0.5 }}
104 |               transition={{ duration: 0.5 }}
105 |               variants={{
106 |                 hidden: { opacity: 0, x: 50 },
107 |                 visible: { opacity: 1, x: 0 },
108 |               }}
109 |             >
110 |               <div className="before:absolute before:-top-20 before:-left-20 before:z-[-1] before:content-abstractwaves">
111 |                 <div>
112 |                   <HText>
113 |                     {" "}
114 |                     MILLIONS OF HAPPY MEMBERS GETTING{" "}
115 |                     <span className=" text-primary-500">FIT</span>
116 |                   </HText>
117 |                 </div>
118 |               </div>
119 |             </motion.div>
120 |             {/* descr */}
121 |             <motion.div
122 |               initial="hidden"
123 |               whileInView="visible"
124 |               viewport={{ once: true, amount: 0.5 }}
125 |               transition={{ delay: 0.2, duration: 0.5 }}
126 |               variants={{
127 |                 hidden: { opacity: 0, x: 50 },
128 |                 visible: { opacity: 1, x: 0 },
129 |               }}
130 |             >
131 |               <p className=" my-5">
132 |                 Nascetur aenean massa auctor tincidunt. Iaculis potenti amet
133 |                 egestas ultrices consectetur adipiscing ultricies enim. Pulvinar
134 |                 fames vitae vitae quis. Quis amet vulputate tincidunt at in
135 |                 nulla nec. Consequat sed facilisis dui sit egestas ultrices
136 |                 tellus. Ullamcorper arcu id pretium sapien proin integer nisl.
137 |                 Felis orci diam odio.
138 |               </p>
139 |               <p className="mb-5">
140 |                 Fringilla a sed at suspendisse ut enim volutpat. Rhoncus vel est
141 |                 tellus quam porttitor. Mauris velit euismod elementum arcu neque
142 |                 facilisi. Amet semper tortor facilisis metus nibh. Rhoncus sit
143 |                 enim mattis odio in risus nunc.
144 |               </p>
145 |             </motion.div>
146 |             {/* btn */}
147 |             <div className="relative mt-16 ">
148 |               <div className=" before:absolute before:-bottom-20 before:right-40 before:z-[-1] before:content-sparkles">
149 |                 <ActionButton setSelectedPage={setSelectedPage}>
150 |                   Join Now
151 |                 </ActionButton>
152 |               </div>
153 |             </div>
154 |           </div>
155 |         </div>
156 |       </motion.div>
157 |     </section>
158 |   );
159 | };
160 | 
161 | export default Benefits;
162 | 


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