├── cover.jpg ├── src ├── assets │ ├── cta.png │ ├── avatar.png │ ├── blog-1.png │ ├── heroImg.png │ ├── achievement.png │ ├── company-logo-1.png │ ├── company-logo-2.png │ ├── company-logo-3.png │ ├── company-logo-4.png │ ├── quotationMark.png │ ├── grey-star.svg │ ├── yellow-star.svg │ ├── index.js │ ├── lock.svg │ ├── hamburgerMenu.svg │ ├── react.svg │ ├── logo.svg │ └── close.svg ├── main.jsx ├── components │ ├── index.js │ ├── Card.jsx │ ├── CTA.jsx │ ├── CategoryCard.jsx │ ├── Companies.jsx │ ├── FeedbackCard.jsx │ ├── StarRating.jsx │ ├── Hero.jsx │ ├── Courses.jsx │ ├── Feedback.jsx │ ├── Categories.jsx │ ├── Navbar.jsx │ ├── Footer.jsx │ └── Achievement.jsx ├── App.jsx ├── index.css ├── App.css └── data │ └── Courses.js ├── postcss.config.cjs ├── vite.config.js ├── tailwind.config.cjs ├── README.md ├── .gitignore ├── index.html ├── package.json └── public └── vite.svg /cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TECHCROWDMY/practice-landing-page/HEAD/cover.jpg -------------------------------------------------------------------------------- /src/assets/cta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TECHCROWDMY/practice-landing-page/HEAD/src/assets/cta.png -------------------------------------------------------------------------------- /src/assets/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TECHCROWDMY/practice-landing-page/HEAD/src/assets/avatar.png -------------------------------------------------------------------------------- /src/assets/blog-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TECHCROWDMY/practice-landing-page/HEAD/src/assets/blog-1.png -------------------------------------------------------------------------------- /src/assets/heroImg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TECHCROWDMY/practice-landing-page/HEAD/src/assets/heroImg.png -------------------------------------------------------------------------------- /src/assets/achievement.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TECHCROWDMY/practice-landing-page/HEAD/src/assets/achievement.png -------------------------------------------------------------------------------- /postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/assets/company-logo-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TECHCROWDMY/practice-landing-page/HEAD/src/assets/company-logo-1.png -------------------------------------------------------------------------------- /src/assets/company-logo-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TECHCROWDMY/practice-landing-page/HEAD/src/assets/company-logo-2.png -------------------------------------------------------------------------------- /src/assets/company-logo-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TECHCROWDMY/practice-landing-page/HEAD/src/assets/company-logo-3.png -------------------------------------------------------------------------------- /src/assets/company-logo-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TECHCROWDMY/practice-landing-page/HEAD/src/assets/company-logo-4.png -------------------------------------------------------------------------------- /src/assets/quotationMark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TECHCROWDMY/practice-landing-page/HEAD/src/assets/quotationMark.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } 12 | -------------------------------------------------------------------------------- /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 | ) 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Build An Awesome Landing Page in ReactJS & TailwindCSS! 2 | ![alt text](https://github.com/TECHCROWDMY/practice-landing-page/blob/main/cover.jpg?raw=true) 3 | 4 | 5 | 1. Clone the repository. 6 | 2. Run npm install command. ```npm install``` 7 | 3. Run npm run dev. ```npm run dev``` 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /.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 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import Navbar from "./Navbar"; 2 | import Hero from "./Hero"; 3 | import Companies from "./Companies"; 4 | import Courses from "./Courses"; 5 | import Achievement from "./Achievement"; 6 | import Categories from "./Categories"; 7 | import Feedback from "./Feedback"; 8 | import CTA from "./CTA"; 9 | import Footer from "./Footer"; 10 | 11 | 12 | 13 | export {Navbar,Hero, Companies,Courses,Achievement,Categories,Feedback,CTA,Footer} -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Hero, Navbar,Companies, Courses, Achievement, Categories, Feedback, CTA, Footer } from './components'; 3 | import './App.css' 4 | 5 | const App = () => { 6 | return ( 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
18 | ) 19 | } 20 | 21 | export default App -------------------------------------------------------------------------------- /src/assets/grey-star.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/yellow-star.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "landing-page", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0", 14 | "react-icons": "^4.7.1", 15 | "react-slick": "^0.29.0", 16 | "slick-carousel": "^1.8.1" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.0.26", 20 | "@types/react-dom": "^18.0.9", 21 | "@vitejs/plugin-react": "^3.0.0", 22 | "autoprefixer": "^10.4.13", 23 | "postcss": "^8.4.20", 24 | "tailwindcss": "^3.2.4", 25 | "vite": "^4.0.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/components/Card.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { blogImg1 } from '../assets' 3 | import StarRating from './StarRating' 4 | 5 | const Card = ({course}) => { 6 | return ( 7 |
8 | 12 |
13 |

{course.title}

14 | 15 |
16 |

{course.price}

17 | 18 |
19 | {course.category} 20 |
21 |
22 | ) 23 | } 24 | 25 | export default Card -------------------------------------------------------------------------------- /src/assets/index.js: -------------------------------------------------------------------------------- 1 | import hamburgerMenu from "./hamburgerMenu.svg"; 2 | import close from "./close.svg"; 3 | import logo from "./logo.svg"; 4 | import lock from "./lock.svg"; 5 | import heroImg from "./heroImg.png"; 6 | import companyLogo1 from "./company-logo-1.png"; 7 | import companyLogo2 from "./company-logo-2.png"; 8 | import companyLogo3 from "./company-logo-3.png"; 9 | import companyLogo4 from "./company-logo-4.png"; 10 | import blogImg1 from "./blog-1.png"; 11 | import achievement from "./achievement.png"; 12 | import avatar from "./avatar.png"; 13 | import quotationMark from "./quotationMark.png"; 14 | import cta from "./cta.png" 15 | 16 | export { 17 | hamburgerMenu, 18 | close, 19 | logo, 20 | lock, 21 | heroImg, 22 | companyLogo1, 23 | companyLogo2, 24 | companyLogo3, 25 | companyLogo4, 26 | blogImg1, 27 | achievement, 28 | avatar, 29 | quotationMark, 30 | cta 31 | 32 | 33 | }; -------------------------------------------------------------------------------- /src/assets/lock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/CTA.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { cta } from '../assets' 3 | 4 | const CTA = () => { 5 | return ( 6 |
7 |
8 | 9 | 10 | 11 | 12 |
13 |

Join World's largest learning platform today

14 |

Start learning by registering for free

15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 |
27 | ) 28 | } 29 | 30 | export default CTA -------------------------------------------------------------------------------- /src/components/CategoryCard.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {BsVectorPen, BsArrowUpRight} from 'react-icons/bs' 3 | 4 | const CategoryCard = ({icons,title}) => { 5 | return ( 6 |
7 |
8 | {icons} 9 |

{title}

10 |
11 | 12 |
13 | 19 |
20 | 21 |
22 | ) 23 | } 24 | 25 | export default CategoryCard -------------------------------------------------------------------------------- /src/components/Companies.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { companyLogo1, companyLogo2, companyLogo3, companyLogo4 } from '../assets'; 3 | 4 | const Companies = () => { 5 | return ( 6 |
7 |
8 |

Trusted by over 25,000 teams around the world.

9 |

Leading companies use the same courses to help employees keep their skills fresh.

10 |
11 |
12 | 13 | 14 | 15 | 16 |
17 |
18 | 19 |
20 | 21 |
22 | ) 23 | } 24 | 25 | export default Companies -------------------------------------------------------------------------------- /src/components/FeedbackCard.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { avatar, quotationMark } from '../assets' 3 | 4 | const FeedbackCard = () => { 5 | return ( 6 |
7 |
8 |
9 | 10 |
11 |

Jenny Wilson

12 |

UI-UX Designer

13 |
14 | 15 |
16 | 17 |
18 | 19 |
20 |

Ut pharetra ipsum nec leo blandit, sit amet tincidunt eros pharetra. Nam sed imperdiet turpis. In hac habitasse platea dictumst. Praesent nulla massa, hendrerit vestibulum gravida in, feugiat auctor felis.Ut pharetra ipsum nec leo blandit, sit amet tincidunt eros pharetra. Nam sed imperdiet turpis. In hac habitasse platea dictumst.

21 |
22 |
23 | ) 24 | } 25 | 26 | export default FeedbackCard -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | /* 6 | :root { 7 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 8 | font-size: 16px; 9 | line-height: 24px; 10 | font-weight: 400; 11 | 12 | color-scheme: light dark; 13 | color: rgba(255, 255, 255, 0.87); 14 | background-color: #242424; 15 | 16 | font-synthesis: none; 17 | text-rendering: optimizeLegibility; 18 | -webkit-font-smoothing: antialiased; 19 | -moz-osx-font-smoothing: grayscale; 20 | -webkit-text-size-adjust: 100%; 21 | } 22 | 23 | a { 24 | font-weight: 500; 25 | color: #646cff; 26 | text-decoration: inherit; 27 | } 28 | a:hover { 29 | color: #535bf2; 30 | } 31 | 32 | body { 33 | margin: 0; 34 | display: flex; 35 | place-items: center; 36 | min-width: 320px; 37 | min-height: 100vh; 38 | } 39 | 40 | h1 { 41 | font-size: 3.2em; 42 | line-height: 1.1; 43 | } 44 | 45 | button { 46 | border-radius: 8px; 47 | border: 1px solid transparent; 48 | padding: 0.6em 1.2em; 49 | font-size: 1em; 50 | font-weight: 500; 51 | font-family: inherit; 52 | background-color: #1a1a1a; 53 | cursor: pointer; 54 | transition: border-color 0.25s; 55 | } 56 | button:hover { 57 | border-color: #646cff; 58 | } 59 | button:focus, 60 | button:focus-visible { 61 | outline: 4px auto -webkit-focus-ring-color; 62 | } 63 | 64 | @media (prefers-color-scheme: light) { 65 | :root { 66 | color: #213547; 67 | background-color: #ffffff; 68 | } 69 | a:hover { 70 | color: #747bff; 71 | } 72 | button { 73 | background-color: #f9f9f9; 74 | } 75 | } */ 76 | -------------------------------------------------------------------------------- /src/components/StarRating.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const StarRating = ({rating}) => { 4 | return ( 5 |
6 | 7 | {[...Array(rating)].map((x,i)=> 8 |
9 | 10 | 11 |
12 | 13 | )} 14 | {[...Array(5-rating)].map((x,i)=> 15 |
16 | 17 | 18 |
19 | )} 20 |

(15)

21 | 22 | 23 |
24 | ) 25 | } 26 | 27 | export default StarRating -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700&display=swap'); 2 | @import "slick-carousel/slick/slick.css"; 3 | @import "slick-carousel/slick/slick-theme.css"; 4 | 5 | #root { 6 | font-family: 'Public Sans', sans-serif; 7 | 8 | } 9 | 10 | .input-box-shadow{ 11 | filter: drop-shadow(-4px -4px 44px rgba(0, 0, 0, 0.08)); 12 | } 13 | 14 | .slick-prev:before, 15 | .slick-next:before { 16 | color: black; 17 | font-size: 40px; 18 | } 19 | 20 | .slick-next:before{ 21 | position: absolute; 22 | right:0; 23 | margin-top: -10px; 24 | margin-right: 5px; 25 | } 26 | 27 | .slick-next, 28 | .slick-prev 29 | { 30 | position: absolute; 31 | right:0; 32 | } 33 | 34 | .slick-prev{ 35 | z-index: 99999; 36 | margin-left: 25px; 37 | } 38 | 39 | .category-card:hover .arrow-icon{ 40 | fill: white; 41 | } 42 | 43 | .slick-arrow{ 44 | position: absolute; 45 | right:50; 46 | margin-right: 25px; 47 | } 48 | 49 | .slick-dots { 50 | @apply ml-[-10px] hidden 51 | } 52 | 53 | 54 | 55 | 56 | /* #root { 57 | max-width: 1280px; 58 | margin: 0 auto; 59 | padding: 2rem; 60 | text-align: center; 61 | } 62 | 63 | .logo { 64 | height: 6em; 65 | padding: 1.5em; 66 | will-change: filter; 67 | } 68 | .logo:hover { 69 | filter: drop-shadow(0 0 2em #646cffaa); 70 | } 71 | .logo.react:hover { 72 | filter: drop-shadow(0 0 2em #61dafbaa); 73 | } 74 | 75 | @keyframes logo-spin { 76 | from { 77 | transform: rotate(0deg); 78 | } 79 | to { 80 | transform: rotate(360deg); 81 | } 82 | } 83 | 84 | @media (prefers-reduced-motion: no-preference) { 85 | a:nth-of-type(2) .logo { 86 | animation: logo-spin infinite 20s linear; 87 | } 88 | } 89 | 90 | .card { 91 | padding: 2em; 92 | } 93 | 94 | .read-the-docs { 95 | color: #888; 96 | } */ 97 | -------------------------------------------------------------------------------- /src/components/Hero.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { heroImg } from '../assets'; 3 | import {AiOutlineSearch} from 'react-icons/ai' 4 | 5 | const Hero = () => { 6 | return ( 7 |
8 |
9 | 10 |
11 |

START TO SUCCESS

12 |

Access To 5000+ Courses 13 | from 300 Instructors 14 | & Institutions 15 |

16 |

Various versions have evolved over the years, sometimes by accident.

17 | 18 |
19 | 24 | 33 |
34 |
35 | 36 | 37 | 38 | 39 | 40 |
41 | 42 | 43 |
44 | ) 45 | } 46 | 47 | export default Hero -------------------------------------------------------------------------------- /src/components/Courses.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Card from './Card' 3 | import Slider from "react-slick"; 4 | import { courses } from '../data/Courses'; 5 | 6 | const Courses = () => { 7 | var settings = { 8 | dots: true, 9 | infinite: false, 10 | speed: 500, 11 | slidesToShow: 4, 12 | slidesToScroll: 1, 13 | responsive: [ 14 | { 15 | breakpoint: 1024, 16 | settings: { 17 | slidesToShow: 2, 18 | slidesToScroll: 1, 19 | infinite: false, 20 | dots: true 21 | } 22 | }, 23 | { 24 | breakpoint: 600, 25 | settings: { 26 | slidesToShow: 1, 27 | slidesToScroll: 1, 28 | infinite: false, 29 | dots: true 30 | } 31 | }, 32 | { 33 | breakpoint: 480, 34 | settings: { 35 | slidesToShow: 1, 36 | slidesToScroll: 1, 37 | infinite: false, 38 | dots: true 39 | } 40 | } 41 | // You can unslick at a given breakpoint now by adding: 42 | // settings: "unslick" 43 | // instead of a settings object 44 | ] 45 | }; 46 | 47 | return ( 48 |
49 |
50 |
51 |

Most Popular Courses

52 |

Various versions have evolved over the years, sometimes by accident.

53 |
54 | 55 | 56 | {courses.map((course,i)=> 57 |
58 | 59 |
) } 60 | 61 | 62 | 63 | 64 |
65 | 66 |
67 | ) 68 | } 69 | 70 | export default Courses -------------------------------------------------------------------------------- /src/components/Feedback.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Card from './Card' 3 | import Slider from "react-slick"; 4 | import { courses } from '../data/Courses'; 5 | import FeedbackCard from './FeedbackCard'; 6 | 7 | const Feedback = () => { 8 | var settings = { 9 | dots: true, 10 | infinite: false, 11 | speed: 500, 12 | slidesToShow: 2, 13 | slidesToScroll: 1, 14 | responsive: [ 15 | { 16 | breakpoint: 1024, 17 | settings: { 18 | slidesToShow:1, 19 | slidesToScroll: 1, 20 | infinite: false, 21 | dots: true 22 | } 23 | }, 24 | { 25 | breakpoint: 600, 26 | settings: { 27 | slidesToShow: 2, 28 | slidesToScroll: 2, 29 | infinite: false, 30 | dots: true 31 | } 32 | }, 33 | { 34 | breakpoint: 480, 35 | settings: { 36 | slidesToShow: 1, 37 | slidesToScroll: 1, 38 | infinite: false, 39 | dots: true 40 | } 41 | } 42 | // You can unslick at a given breakpoint now by adding: 43 | // settings: "unslick" 44 | // instead of a settings object 45 | ] 46 | }; 47 | 48 | return ( 49 |
50 |
51 |
52 |

Students' Feedback

53 |

Various versions have evolved over the years, sometimes by accident.

54 |
55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 |
69 | 70 |
71 | ) 72 | } 73 | 74 | export default Feedback -------------------------------------------------------------------------------- /src/components/Categories.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CategoryCard from './CategoryCard' 3 | import {BsVectorPen} from 'react-icons/bs' 4 | import {TiHtml5} from 'react-icons/ti' 5 | import {TbMicrophone2,TbMusic} from 'react-icons/tb' 6 | import {HiOutlineBriefcase} from 'react-icons/hi' 7 | import {WiSunrise} from 'react-icons/wi' 8 | import {AiOutlineCamera} from 'react-icons/ai' 9 | import {BiData} from 'react-icons/bi' 10 | import {MdAttachMoney} from 'react-icons/md' 11 | import {FaUniversity} from 'react-icons/fa' 12 | 13 | const Categories = () => { 14 | return ( 15 |
16 |
17 |

Most Popular Categories

18 |

Various versions have evolved over the years, sometimes by accident.

19 | 20 |
21 | } title={'Design'} /> 22 | } title={'Development'} /> 23 | } title={'Marketing'} /> 24 | } title={'Business'} /> 25 | 26 | } title={'Lifestyle'} /> 27 | } title={'Photography'} /> 28 | } title={'Music'} /> 29 | } title={'Data Science'} /> 30 | 31 | } title={'Personal Develop'} /> 32 | } title={'Health & Fitness'} /> 33 | } title={'Finance'} /> 34 | } title={'Teaching'} /> 35 | 36 | 37 | 38 | 39 |
40 | 41 | 42 |
43 |
44 | ) 45 | } 46 | 47 | export default Categories -------------------------------------------------------------------------------- /src/assets/hamburgerMenu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import {logo,lock, hamburgerMenu, close} from '../assets' 3 | 4 | const Navbar = () => { 5 | 6 | const [toggle,setToggle]=useState(false) 7 | const handleClick = ()=> setToggle(!toggle) 8 | 9 | return ( 10 |
11 |
12 | 13 | 14 | 15 |
16 |
    17 |
  • Home
    • 18 |
  • About
    • 19 |
  • Support
    • 20 |
  • Platform
    • 21 |
  • Pricing
    • 22 |
23 |
24 | 25 | 26 |
27 | 31 | 32 |
33 | 34 |
35 | 36 |
37 | 38 | 39 | 40 | 41 |
42 | 43 |
44 | 58 |
59 | 60 | 61 |
62 | ) 63 | } 64 | 65 | export default Navbar -------------------------------------------------------------------------------- /src/data/Courses.js: -------------------------------------------------------------------------------- 1 | export const courses = [ 2 | { 3 | id: 1, 4 | title: 'The Complete Flutter Development Bootcamp with Dart', 5 | category:'Flutter', 6 | rating:5, 7 | price: '$59.99', 8 | linkImg: 9 | 'https://imgs.search.brave.com/YrWdDcc30vLk1ujOOb2T7YspGn9p6AsTC4LbTGaWiJI/rs:fit:480:270:1/g:ce/aHR0cHM6Ly93ZWVr/Y291cnNlcmV2aWV3/LmNvbS93cC1jb250/ZW50L3VwbG9hZHMv/MjAxOS8wNS9mbHV0/dGVyLWJvb3RjYW1w/LXdpdGgtZGFydC1p/bWcuanBn' 10 | }, 11 | { 12 | id: 2, 13 | title: 'The Complete 2023 Web Development Bootcamp', 14 | category:'Web Dev', 15 | rating:4, 16 | price: '$59.99', 17 | linkImg: 18 | 'https://imgs.search.brave.com/ZkwGbElTOq8Zo7NeRU669-o016O6XSLJftZZ5I--HJg/rs:fit:750:422:1/g:ce/aHR0cHM6Ly9kaXNj/b3VudHNlcmllcy5j/b20vd3AtY29udGVu/dC91cGxvYWRzLzIw/MjAvMTEvMTAwLWRh/eXMtb2YtY29kZS10/aGUtY29tcGxldGUt/cHl0aG9uLXByby1i/b290Y2FtcC1mb3It/MjAyMi1jb3Vyc2Uu/anBn', 19 | }, 20 | { 21 | id: 3, 22 | title: 'Learn Python: The Complete Python Programming CourseLearn A-Z everything about Python, from the basics, to advanced topics like Python GUI, Python Data Analysis, and more!', 23 | category:'Python', 24 | rating:4, 25 | price: '$59.99', 26 | linkImg: 27 | 'https://imgs.search.brave.com/Nhj_cLAZOWcUjlnR8QMX8A02rX-2RYra9w-0j-B9Rbg/rs:fit:750:422:1/g:ce/aHR0cHM6Ly9pLnBp/bmltZy5jb20vb3Jp/Z2luYWxzL2IxLzJi/L2NjL2IxMmJjYzA4/YmQ4YzlhOTFjMmM5/NjY3ZTM5NzE1NzA0/LmpwZw', 28 | }, 29 | { 30 | id: 4, 31 | title: 'The Complete JavaScript Course 2023: From Zero to Expert!', 32 | category:'Javascript', 33 | rating:4, 34 | price: '$59.99', 35 | linkImg: 36 | 'https://imgs.search.brave.com/ERyn_YUVTbB0slaulPioLMmU7Zto9A8aCA6OPptRZkI/rs:fit:768:432:1/g:ce/aHR0cHM6Ly9jb3Vy/c2Vjb3Vwb25jbHVi/LmNvbS93cC1jb250/ZW50L3VwbG9hZHMv/MjAyMS8wMy84NTE3/MTJfZmM2MV82LTc2/OHg0MzIuanBn', 37 | }, 38 | { 39 | id: 5, 40 | title: 'Cuphead', 41 | category:'Flutter', 42 | rating:4, 43 | price: '$19.99', 44 | linkImg: 45 | 'https://assets.nintendo.com/image/upload/ar_16:9,b_auto:border,c_lpad/b_white/f_auto/q_auto/dpr_auto/c_scale,w_300/v1/ncom/en_US/games/switch/c/cuphead-switch/hero?_a=AJADJWI0', 46 | }, 47 | { 48 | id: 6, 49 | title: 'Minecraft', 50 | category:'Flutter', 51 | rating:4, 52 | price: '$29.99', 53 | linkImg: 54 | 'https://assets.nintendo.com/image/upload/ar_16:9,b_auto:border,c_lpad/b_white/f_auto/q_auto/dpr_auto/c_scale,w_300/v1/ncom/en_US/games/switch/m/minecraft-switch/hero?_a=AJADJWI0', 55 | }, 56 | { 57 | id: 7, 58 | title: 'Mario + Rabbids® Kingdom Battle', 59 | category:'Flutter', 60 | rating:4, 61 | price: '$59.99', 62 | linkImg: 63 | 'https://assets.nintendo.com/image/upload/ar_16:9,b_auto:border,c_lpad/b_white/f_auto/q_auto/dpr_auto/c_scale,w_300/v1/ncom/en_US/games/switch/u/unravel-two-switch/hero?_a=AJADJWI0', 64 | }, 65 | { 66 | id: 8, 67 | title: 'Unravel Two', 68 | category:'Flutter', 69 | rating:4, 70 | price: '$59.99', 71 | sale: 63, 72 | linkImg: 73 | 'https://assets.nintendo.com/image/upload/ar_16:9,b_auto:border,c_lpad/b_white/f_auto/q_auto/dpr_auto/c_scale,w_300/v1/ncom/en_US/games/switch/u/unravel-two-switch/hero?_a=AJADJWI0', 74 | }, 75 | ]; -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { logo } from '../assets' 3 | import {FaFacebookF,FaDribbble,FaLinkedinIn,FaInstagram,FaBehance} from 'react-icons/fa' 4 | 5 | const Footer = () => { 6 | return ( 7 |
8 |
9 | 10 |
11 | 12 |

Contact Us

13 |

Call : +123 400 123

14 |

Praesent nulla massa, hendrerit

vestibulum gravida in, feugiat auctor felis.

15 |

Email: example@mail.com

16 |
17 |
18 |
19 |
20 |
21 |
22 | 23 |
24 | 25 |
26 | 27 |
28 |

Explore

29 |
    30 |
  • Home
    • 31 |
  • About
    • 32 |
  • Course
    • 33 |
  • Blog
    • 34 |
  • Contact
    • 35 | 36 |
37 |
38 | 39 |
40 |

Category

41 |
    42 |
  • Design
    • 43 |
  • Development
    • 44 |
  • Marketing
    • 45 |
  • Business
    • 46 |
  • Lifestyle
    • 47 |
  • Photography
    • 48 |
  • Music
    • 49 | 50 |
51 |
52 | 53 |
54 |

Subscribe

55 |

Praesent nulla massa, hendrerit

vestibulum gravida in, feugiat auctor felis.

56 |
57 | 61 | 62 | 63 |
64 | 65 | 66 |
67 | 68 |
69 |
70 | ) 71 | } 72 | 73 | export default Footer -------------------------------------------------------------------------------- /src/components/Achievement.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { achievement } from '../assets' 3 | import {SlGraduation} from 'react-icons/sl' 4 | import {FiVideo} from 'react-icons/fi' 5 | import {SlPeople} from 'react-icons/sl' 6 | 7 | const Achievement = () => { 8 | return ( 9 |
10 |
11 | 12 |
13 |

Our Achievements

14 |

Various versions have evolved over the years, sometimes by accident.

15 | 16 |
17 |
18 |
19 | 23 |
24 |
25 |

300

26 |

Instructor

27 |
28 | 29 |
30 |
31 |
32 | 36 |
37 |
38 |

10,000+

39 |

Video

40 |
41 | 42 |
43 |
44 |
45 | 49 |
50 |
51 |

20,000+

52 |

Student

53 |
54 | 55 |
56 |
57 |
58 | 62 |
63 |
64 |

1,00,000+

65 |

Users

66 |
67 | 68 |
69 | 70 |
71 |
72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 |
80 | 81 | 82 |
83 | ) 84 | } 85 | 86 | export default Achievement -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | --------------------------------------------------------------------------------