├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── App.jsx ├── Data.jsx ├── assets │ ├── About.jpg │ ├── courses1.jpg │ ├── courses2.jpg │ ├── courses3.jpg │ ├── courses4.jpg │ ├── courses5.jpg │ ├── courses6.jpg │ ├── courses7.jpg │ ├── courses8.jpg │ ├── hero1.png │ ├── logo1.png │ ├── logo2.png │ ├── logo3.png │ ├── logo4.png │ ├── logo5.png │ ├── logo6.png │ ├── teacher1.png │ └── teacher2.png ├── components │ ├── Navbar │ │ ├── MobileNavLinks.jsx │ │ ├── NavBar.jsx │ │ └── NavLinks.jsx │ ├── container │ │ ├── About.jsx │ │ ├── Accordion.jsx │ │ ├── Contact.jsx │ │ ├── Footer.jsx │ │ ├── Home.jsx │ │ ├── Teacher.jsx │ │ └── course │ │ │ ├── Categories.jsx │ │ │ ├── Course.jsx │ │ │ └── Courses.jsx │ └── index.js ├── index.css └── main.jsx ├── tailwind.config.js └── vite.config.js /.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React_web -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | LEARNHUB 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactweb", 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.24", 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.66", 21 | "@types/react-dom": "^18.2.22", 22 | "@vitejs/plugin-react-swc": "^3.5.0", 23 | "autoprefixer": "^10.4.19", 24 | "eslint": "^8.57.0", 25 | "eslint-plugin-react": "^7.34.1", 26 | "eslint-plugin-react-hooks": "^4.6.0", 27 | "eslint-plugin-react-refresh": "^0.4.6", 28 | "postcss": "^8.4.38", 29 | "tailwindcss": "^3.4.3", 30 | "vite": "^5.2.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | // Importing necessary components from the components directory 2 | import { 3 | Navbar, // Navbar component for navigation 4 | Home, // Home component for the homepage 5 | About, // About component for information about the website 6 | Teacher, // Teacher component for teacher-related content 7 | Contact, // Contact component for contact information 8 | Courses, // Courses component for displaying available courses 9 | Footer, // Footer component for the bottom section of the website 10 | } from "./components/index"; 11 | 12 | // Main App component 13 | function App() { 14 | return ( 15 | // Wrapper div with custom classes for styling 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
32 | ); 33 | } 34 | 35 | // Exporting the App component as the default export 36 | export default App; 37 | -------------------------------------------------------------------------------- /src/Data.jsx: -------------------------------------------------------------------------------- 1 | import { FiPenTool } from "react-icons/fi"; 2 | import { FaLaptopCode } from "react-icons/fa"; 3 | import { BsBarChartLine } from "react-icons/bs"; 4 | import { MdOutlineScience } from "react-icons/md"; 5 | 6 | import courses1 from "./assets/courses1.jpg"; 7 | import courses2 from "./assets/courses2.jpg"; 8 | import courses3 from "./assets/courses3.jpg"; 9 | import courses4 from "./assets/courses4.jpg"; 10 | import courses5 from "./assets/courses5.jpg"; 11 | import courses6 from "./assets/courses6.jpg"; 12 | import courses7 from "./assets/courses7.jpg"; 13 | import courses8 from "./assets/courses8.jpg"; 14 | 15 | import logo1 from "./assets/logo1.png"; 16 | import logo2 from "./assets/logo2.png"; 17 | import logo3 from "./assets/logo3.png"; 18 | import logo4 from "./assets/logo4.png"; 19 | import logo5 from "./assets/logo5.png"; 20 | import logo6 from "./assets/logo6.png"; 21 | 22 | export const navLinks = [ 23 | { 24 | id: 1, 25 | href: "home", 26 | link: "Home", 27 | }, 28 | { 29 | id: 2, 30 | href: "about", 31 | link: "About", 32 | }, 33 | { 34 | id: 3, 35 | href: "courses", 36 | link: "Courses", 37 | }, 38 | { 39 | id: 4, 40 | href: "teacher", 41 | link: "Teacher", 42 | }, 43 | { 44 | id: 5, 45 | href: "contact", 46 | link: "Contact", 47 | }, 48 | ]; 49 | 50 | export const categories = [ 51 | { 52 | id: 1, 53 | icon: , 54 | category: "Design", 55 | }, 56 | { 57 | id: 2, 58 | icon: , 59 | category: "Development", 60 | }, 61 | { 62 | id: 3, 63 | icon: , 64 | category: "Business", 65 | }, 66 | { 67 | id: 4, 68 | icon: , 69 | category: "Science", 70 | }, 71 | ]; 72 | 73 | export const courses = [ 74 | { 75 | id: 1, 76 | image: courses1, 77 | category: "Web Design", 78 | title: "The Complete Web Design Course", 79 | rating: 4.9, 80 | participants: 500, 81 | price: 105, 82 | }, 83 | { 84 | id: 2, 85 | image: courses2, 86 | category: "Web Development", 87 | title: "FullStack Web Development Course", 88 | rating: 4.8, 89 | participants: 700, 90 | price: 125, 91 | }, 92 | { 93 | id: 3, 94 | image: courses3, 95 | category: "Web Development", 96 | title: "Python Beginner to Advanced Course", 97 | rating: 4.9, 98 | participants: 300, 99 | price: 99, 100 | }, 101 | { 102 | id: 4, 103 | image: courses4, 104 | category: "Web Design", 105 | title: "UI/UX Design Crazy Course With Harrys", 106 | rating: 4.7, 107 | participants: 600, 108 | price: 85, 109 | }, 110 | { 111 | id: 5, 112 | image: courses5, 113 | category: "AI Development", 114 | title: "AI Development With Python (complete beginner course)", 115 | rating: 4.9, 116 | participants: 500, 117 | price: 105, 118 | }, 119 | { 120 | id: 6, 121 | image: courses6, 122 | category: "Web Design", 123 | title: "The Complete Web Design Course", 124 | rating: 4.9, 125 | participants: 500, 126 | price: 105, 127 | }, 128 | { 129 | id: 7, 130 | image: courses7, 131 | category: "Web Design", 132 | title: "The Complete Web Design Course", 133 | rating: 4.9, 134 | participants: 500, 135 | price: 105, 136 | }, 137 | { 138 | id: 8, 139 | image: courses8, 140 | category: "Web Design", 141 | title: "The Complete Web Design Course", 142 | rating: 4.9, 143 | participants: 500, 144 | price: 105, 145 | }, 146 | ]; 147 | 148 | export const logos = [logo1, logo2, logo3, logo4, logo5, logo6]; 149 | 150 | export const accordions = [ 151 | { 152 | id: 1, 153 | title: "What is LEARNHUB?", 154 | }, 155 | { 156 | id: 2, 157 | title: "What can I learn from LEARNHUB?", 158 | }, 159 | { 160 | id: 3, 161 | title: "Can I teach on LEARNHUB?", 162 | }, 163 | { 164 | id: 4, 165 | title: "Is LEARNHUB provides certificates?", 166 | }, 167 | ]; -------------------------------------------------------------------------------- /src/assets/About.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmadhavan57/React_web/5d9f4b7e4dda272f24bbbd180125100dfa5b3b8f/src/assets/About.jpg -------------------------------------------------------------------------------- /src/assets/courses1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmadhavan57/React_web/5d9f4b7e4dda272f24bbbd180125100dfa5b3b8f/src/assets/courses1.jpg -------------------------------------------------------------------------------- /src/assets/courses2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmadhavan57/React_web/5d9f4b7e4dda272f24bbbd180125100dfa5b3b8f/src/assets/courses2.jpg -------------------------------------------------------------------------------- /src/assets/courses3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmadhavan57/React_web/5d9f4b7e4dda272f24bbbd180125100dfa5b3b8f/src/assets/courses3.jpg -------------------------------------------------------------------------------- /src/assets/courses4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmadhavan57/React_web/5d9f4b7e4dda272f24bbbd180125100dfa5b3b8f/src/assets/courses4.jpg -------------------------------------------------------------------------------- /src/assets/courses5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmadhavan57/React_web/5d9f4b7e4dda272f24bbbd180125100dfa5b3b8f/src/assets/courses5.jpg -------------------------------------------------------------------------------- /src/assets/courses6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmadhavan57/React_web/5d9f4b7e4dda272f24bbbd180125100dfa5b3b8f/src/assets/courses6.jpg -------------------------------------------------------------------------------- /src/assets/courses7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmadhavan57/React_web/5d9f4b7e4dda272f24bbbd180125100dfa5b3b8f/src/assets/courses7.jpg -------------------------------------------------------------------------------- /src/assets/courses8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmadhavan57/React_web/5d9f4b7e4dda272f24bbbd180125100dfa5b3b8f/src/assets/courses8.jpg -------------------------------------------------------------------------------- /src/assets/hero1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmadhavan57/React_web/5d9f4b7e4dda272f24bbbd180125100dfa5b3b8f/src/assets/hero1.png -------------------------------------------------------------------------------- /src/assets/logo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmadhavan57/React_web/5d9f4b7e4dda272f24bbbd180125100dfa5b3b8f/src/assets/logo1.png -------------------------------------------------------------------------------- /src/assets/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmadhavan57/React_web/5d9f4b7e4dda272f24bbbd180125100dfa5b3b8f/src/assets/logo2.png -------------------------------------------------------------------------------- /src/assets/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmadhavan57/React_web/5d9f4b7e4dda272f24bbbd180125100dfa5b3b8f/src/assets/logo3.png -------------------------------------------------------------------------------- /src/assets/logo4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmadhavan57/React_web/5d9f4b7e4dda272f24bbbd180125100dfa5b3b8f/src/assets/logo4.png -------------------------------------------------------------------------------- /src/assets/logo5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmadhavan57/React_web/5d9f4b7e4dda272f24bbbd180125100dfa5b3b8f/src/assets/logo5.png -------------------------------------------------------------------------------- /src/assets/logo6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmadhavan57/React_web/5d9f4b7e4dda272f24bbbd180125100dfa5b3b8f/src/assets/logo6.png -------------------------------------------------------------------------------- /src/assets/teacher1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmadhavan57/React_web/5d9f4b7e4dda272f24bbbd180125100dfa5b3b8f/src/assets/teacher1.png -------------------------------------------------------------------------------- /src/assets/teacher2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hmadhavan57/React_web/5d9f4b7e4dda272f24bbbd180125100dfa5b3b8f/src/assets/teacher2.png -------------------------------------------------------------------------------- /src/components/Navbar/MobileNavLinks.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-scroll"; 3 | const MobileNavLinks = ({ setToggle, href, link }) => { 4 | return ( 5 |
  • 6 | setToggle(!prev)} 14 | > 15 | {link} 16 | 17 |
    • 18 | ); 19 | }; 20 | 21 | export default MobileNavLinks; -------------------------------------------------------------------------------- /src/components/Navbar/NavBar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { navLinks } from "../../Data"; 3 | import { HiMenuAlt1, HiX } from "react-icons/hi"; 4 | import MobileNavLinks from "./MobileNavLinks"; 5 | import NavLink from "./NavLinks"; 6 | import { motion } from "framer-motion"; 7 | const Navbar = () => { 8 | const [toggle, setToggle] = useState(false); 9 | const [active, setActive] = useState(null); 10 | useEffect(() => { 11 | const scrollActive = () => { 12 | setActive(window.scrollY > 20); 13 | }; 14 | window.addEventListener("scroll", scrollActive); 15 | return () => window.removeEventListener("scroll", scrollActive); 16 | }, [active]); 17 | return ( 18 |
    23 |
    24 |
    29 |
    30 | setToggle(true)} 33 | /> 34 |
    35 | LearnHub 36 |
    37 |
    38 |
    39 | {navLinks.map((navLink) => { 40 | return ; 41 | })} 42 |
    43 | 46 | {toggle && ( 47 | 53 | {navLinks.map((navLink) => { 54 | return ( 55 | 60 | ); 61 | })} 62 | setToggle(!prev)} 65 | /> 66 | 67 | )} 68 |
    69 |
    70 |
    71 | ); 72 | }; 73 | 74 | export default Navbar; -------------------------------------------------------------------------------- /src/components/Navbar/NavLinks.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-scroll"; 3 | const NavLink = ({ href, link }) => { 4 | return ( 5 |
  • 6 | 14 | {link} 15 | 16 |
    • 17 | ); 18 | }; 19 | 20 | export default NavLink; -------------------------------------------------------------------------------- /src/components/container/About.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import about from "../../assets/About.jpg"; 3 | 4 | const About = () => { 5 | return ( 6 |
    7 |
    8 |
    9 | 10 |
    11 |
    12 |
    13 | We provide the
    best{" "} 14 | online courses 15 |
    16 |

    17 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 18 | Repudiandae, totam earum. Minus deleniti repellat id! Ratione quia 19 | eum, explicabo quos eos magni vel corporis voluptatibus, inventore 20 | doloremque aliquam pariatur recusandae. 21 |

    22 | 25 |
    26 |
    27 |
    28 | ); 29 | }; 30 | 31 | export default About; -------------------------------------------------------------------------------- /src/components/container/Accordion.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { BsChevronDown } from "react-icons/bs"; 3 | import { motion, AnimatePresence } from "framer-motion"; 4 | const Accordion = ({ id, title }) => { 5 | const [activeIndex, setActiveIndex] = useState(null); 6 | const handleClick = (id) => { 7 | setActiveIndex(id === activeIndex ? null : id); 8 | }; 9 | return ( 10 |
    11 |
    12 |
    {title}
    13 | handleClick(id)} 18 | /> 19 |
    20 | 21 | {id === activeIndex && ( 22 | 30 |

    31 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, eum 32 | beatae porro voluptatum aspernatur, id nesciunt reiciendis maxime 33 | unde necessitatibus illum accusamus mollitia incidunt qui nisi 34 | tempora facere magni magnam? 35 |

    36 |     37 | )} 38 |     39 |
    40 | ); 41 | }; 42 | 43 | export default Accordion; -------------------------------------------------------------------------------- /src/components/container/Contact.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { motion } from "framer-motion"; 3 | const Contact = () => { 4 | return ( 5 |
    6 |
    7 |
    8 | Subscribe Newsletter 9 |
    10 |

    11 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum autem 12 | minus doloribus voluptatem illo velit quia eum aperiam! Repudiandae, 13 | tempore. Lorem ipsum dolor sit amet. 14 |

    15 | 21 | 26 | 29 | 30 |
    31 |
    32 | ); 33 | }; 34 | 35 | export default Contact; -------------------------------------------------------------------------------- /src/components/container/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | BsFacebook, 4 | BsInstagram, 5 | BsTwitter, 6 | BsPinterest, 7 | } from "react-icons/bs"; 8 | import { motion } from "framer-motion"; 9 | 10 | const Footer = () => { 11 | return ( 12 | 18 |
    19 |
    20 |
    Get Started
    21 |

    22 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo neque 23 | saepe cumque. Veritatis sunt commodi 24 |

    25 |
    26 | 44 | 61 |
    62 |
    Follow us
    63 |
    learnhub@gmail.com
    64 |
    +959883271929
    65 | 79 |
    80 |
    81 |     82 | ); 83 | }; 84 | 85 | export default Footer; -------------------------------------------------------------------------------- /src/components/container/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import hero from "../../assets/hero1.png"; 3 | import { logos } from "../../Data"; 4 | import { motion } from "framer-motion"; 5 | const Home = () => { 6 | const container = { 7 | hidden: { 8 | opacity: 0, 9 | scale: 0, 10 | }, 11 | visible: { 12 | opacity: 1, 13 | scale: 1, 14 | transition: { 15 | delayChildren: 0.3, 16 | staggerChildren: 0.1, 17 | }, 18 | }, 19 | }; 20 | const item = { 21 | hidden: { y: 20, opacity: 0 }, 22 | visible: { y: 0, opacity: 1 }, 23 | }; 24 | return ( 25 |
    26 |
    27 |
    28 |
    29 | {" "} 30 | your e-learning partner 31 |
    32 |
    33 | This is
    the new way
    to learn online 34 |
    35 |

    36 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero 37 | officia sit vitae quo, eum similique? 38 |

    39 |
    40 | 43 | 46 |
    47 |
    48 |
    49 | 50 |
    51 |
    52 |
    53 |

    54 | We collaborate with{" "} 55 | 56 | 100+ leading universities and companies 57 | 58 |

    59 | 65 | {logos.map((logo, index) => ( 66 | 67 | 68 | 69 | ))} 70 | 71 |
    72 |
    73 | ); 74 | }; 75 | 76 | export default Home; -------------------------------------------------------------------------------- /src/components/container/Teacher.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import teacher1 from "../../assets/teacher1.png"; 3 | import teacher2 from "../../assets/teacher2.png"; 4 | import { accordions } from "../../Data"; 5 | import Accordion from "./Accordion"; 6 | const Teacher = () => { 7 | return ( 8 |
    9 |
    10 |
    11 |
    12 | Become An Instructor
    of 13 | Our Platform 14 |
    15 |

    16 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora 17 | perferendis debitis dolorum facilis culpa, quidem voluptate suscipit 18 | deserunt. Magni neque at eos dolore dignissimos fugit repudiandae? 19 | Aut laudantium asperiores et! 20 |

    21 | 24 |
    25 |
    26 | 27 |
    28 |
    29 |
    30 | Become An Instructor
    of 31 | Our Platform 32 |
    33 |

    34 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora 35 | perferendis debitis dolorum facilis culpa, quidem voluptate suscipit 36 | deserunt. Magni neque at eos dolore dignissimos fugit repudiandae? 37 | Aut laudantium asperiores et! 38 |

    39 | 42 |
    43 |
    44 | 45 |
    46 |
    47 |
    48 | Frequently Asked Questions 49 |
    50 |
    51 | {accordions.map((accordion) => { 52 | return ; 53 | })} 54 |
    55 |
    56 | ); 57 | }; 58 | 59 | export default Teacher; -------------------------------------------------------------------------------- /src/components/container/course/Categories.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { motion } from "framer-motion"; 3 | 4 | const Categories = ({ icon, category }) => { 5 | const item = { 6 | hidden: { y: 20, opacity: 0 }, 7 | visible: { y: 0, opacity: 1 }, 8 | }; 9 | return ( 10 | 15 |
    {icon}
    16 |
    {category}
    17 | 18 | View More 19 | 20 |     21 | ); 22 | }; 23 | 24 | export default Categories; -------------------------------------------------------------------------------- /src/components/container/course/Course.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AiOutlineUser, AiOutlineStar } from "react-icons/ai"; 3 | 4 | const Course = ({ image, category, title, participants, rating, price }) => { 5 | return ( 6 |
    7 | 8 |
    {category}
    9 |
    {title}
    10 |
    11 |
    12 |
    13 | 14 |
    15 |
    {participants}
    16 |
    17 |
    18 |
    19 | 20 |
    21 |
    {rating}
    22 |
    23 |
    ${price}
    24 |
    25 |
    26 | ); 27 | }; 28 | 29 | export default Course; -------------------------------------------------------------------------------- /src/components/container/course/Courses.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { categories } from "../../../Data"; 3 | import { courses } from "../../../Data"; 4 | import Categories from "./Categories"; 5 | import Course from "./Course"; 6 | import { motion } from "framer-motion"; 7 | 8 | const Courses = () => { 9 | const container = { 10 | hidden: { 11 | opacity: 0, 12 | scale: 0, 13 | }, 14 | visible: { 15 | opacity: 1, 16 | scale: 1, 17 | transition: { 18 | delayChildren: 0.3, 19 | staggerChildren: 0.2, 20 | }, 21 | }, 22 | }; 23 | return ( 24 |
    25 |
    26 |
    27 | Our Top Categories 28 |
    29 |

    30 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore 31 | tempora illo laborum ex cupiditate tenetur doloribus non velit atque 32 | amet repudiandae ipsa modi numquam quas odit optio, totam voluptate 33 | sit! Lorem ipsum dolor sit amet. 34 |

    35 |
    36 | 42 | {categories.map((category) => { 43 | return ; 44 | })} 45 | 46 |
    Most Popular Courses
    47 |
    48 |
    49 | {courses.map((course) => { 50 | return ; 51 | })} 52 |
    53 |
    54 |
    55 | ); 56 | }; 57 | 58 | export default Courses; -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import Home from "./container/Home"; 2 | import About from "./container/About"; 3 | import Teacher from "./container/Teacher" 4 | import Courses from "./container/course/Courses"; 5 | import Contact from "./container/Contact"; 6 | import Footer from "./container/Footer"; 7 | import Navbar from "./Navbar/NavBar"; 8 | 9 | export { Navbar, Home, About, Courses, Teacher,Contact, Footer }; -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 2 | 3 | @tailwind base; 4 | @tailwind components; 5 | @tailwind utilities; 6 | 7 | @layer base { 8 | img { 9 | @apply w-full 10 | } 11 | 12 | .section { 13 | @apply container mx-auto py-24 px-6 14 | } 15 | .animate-slide:hover { 16 | animation-play-state: paused; 17 | } 18 | } -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | fontFamily: { 9 | Poppins: "Poppins" 10 | }, 11 | extend: { 12 | colors: { 13 | Teal: "#8a9f42", 14 | HummingBird: "#FFF8DC", 15 | yellow: "#e4d63b", 16 | Solitude: "#e9e9ea", 17 | gray: "#4B4B4C" 18 | }, 19 | animation: { 20 | slide: "slide 25s linear infinite" 21 | }, 22 | keyframes: { 23 | slide: { 24 | "0%,100%" : {transform: "translateX(5%)"}, 25 | "50%": {transform: "translateX(-120%)"} 26 | } 27 | } 28 | }, 29 | screens: { 30 | xs: "480px", 31 | sm: "768px", 32 | md: "1060px", 33 | }, 34 | }, 35 | plugins: [], 36 | } -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | --------------------------------------------------------------------------------