├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public └── vite.svg ├── src ├── App.jsx ├── assets │ ├── banner.png │ ├── bg.png │ ├── blob.svg │ ├── education.png │ └── hero.png ├── components │ ├── Banner │ │ ├── Banner.jsx │ │ └── Banner2.jsx │ ├── Footer │ │ └── Footer.jsx │ ├── Hero │ │ └── Hero.jsx │ ├── Navbar │ │ └── Navbar.jsx │ ├── Services │ │ └── Services.jsx │ └── Subscribe │ │ └── Subscribe.jsx ├── 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 + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | The Coding Journey 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "framer-motion": "^11.3.19", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1", 16 | "react-icons": "^5.2.1" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.3.3", 20 | "@types/react-dom": "^18.3.0", 21 | "@vitejs/plugin-react": "^4.3.1", 22 | "autoprefixer": "^10.4.19", 23 | "eslint": "^8.57.0", 24 | "eslint-plugin-react": "^7.34.3", 25 | "eslint-plugin-react-hooks": "^4.6.2", 26 | "eslint-plugin-react-refresh": "^0.4.7", 27 | "postcss": "^8.4.40", 28 | "tailwindcss": "^3.4.7", 29 | "vite": "^5.3.4" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Hero from "./components/Hero/Hero"; 3 | import Services from "./components/Services/Services"; 4 | import Banner from "./components/Banner/Banner"; 5 | import Subscribe from "./components/Subscribe/Subscribe"; 6 | import Banner2 from "./components/Banner/Banner2"; 7 | import Footer from "./components/Footer/Footer"; 8 | 9 | const App = () => { 10 | return ( 11 |
12 | 13 | 14 | 15 | 16 | 17 |
19 | ); 20 | }; 21 | 22 | export default App; 23 | -------------------------------------------------------------------------------- /src/assets/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dilshad-ahmed/thecodingjourney/2dd9320a44f12789c47a2d75bbdfb4caa6da0c2e/src/assets/banner.png -------------------------------------------------------------------------------- /src/assets/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dilshad-ahmed/thecodingjourney/2dd9320a44f12789c47a2d75bbdfb4caa6da0c2e/src/assets/bg.png -------------------------------------------------------------------------------- /src/assets/blob.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/education.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dilshad-ahmed/thecodingjourney/2dd9320a44f12789c47a2d75bbdfb4caa6da0c2e/src/assets/education.png -------------------------------------------------------------------------------- /src/assets/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dilshad-ahmed/thecodingjourney/2dd9320a44f12789c47a2d75bbdfb4caa6da0c2e/src/assets/hero.png -------------------------------------------------------------------------------- /src/components/Banner/Banner.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import BannerPng from "../../assets/education.png"; 3 | import { GrUserExpert } from "react-icons/gr"; 4 | import { MdOutlineAccessTime } from "react-icons/md"; 5 | import { FaBookReader } from "react-icons/fa"; 6 | import { FadeUp } from "../Hero/Hero"; 7 | import { motion } from "framer-motion"; 8 | 9 | const Banner = () => { 10 | return ( 11 |
12 |
13 | {/* Banner Image */} 14 |
15 | 24 |
25 | {/* Banner Text */} 26 |
27 |
28 | 35 | The World's Leading Online learning Platform 36 | 37 |
38 | 45 | 46 |

10,000+ Courses

47 | 48 | 55 | 56 |

Expert Instruction

57 | 58 | 65 | 66 |

Lifetime Access

67 | 68 |
69 |
70 |
71 |
72 |
73 | ); 74 | }; 75 | 76 | export default Banner; 77 | -------------------------------------------------------------------------------- /src/components/Banner/Banner2.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import BannerPng from "../../assets/banner.png"; 3 | import { motion } from "framer-motion"; 4 | 5 | const Banner2 = () => { 6 | return ( 7 |
8 |
9 | {/* Banner Text */} 10 | 15 |
16 |

17 | Join Our Community to Start your Journey 18 |

19 |

20 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 21 | Recusandae iusto minima ad ut id eos accusantium aut, aperiam quis 22 | incidunt! 23 |

24 | 28 | Join Now 29 | 30 |
31 | 32 | {/* Banner Image */} 33 |
34 | 41 |
42 |
43 |
44 | ); 45 | }; 46 | 47 | export default Banner2; 48 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FaInstagram, FaWhatsapp, FaYoutube } from "react-icons/fa"; 3 | import { TbWorldWww } from "react-icons/tb"; 4 | import { motion } from "framer-motion"; 5 | 6 | const Footer = () => { 7 | return ( 8 | 98 | ); 99 | }; 100 | 101 | export default Footer; 102 | -------------------------------------------------------------------------------- /src/components/Hero/Hero.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Navbar from "../Navbar/Navbar"; 3 | import { IoIosArrowRoundForward } from "react-icons/io"; 4 | import Blob from "../../assets/blob.svg"; 5 | import HeroPng from "../../assets/hero.png"; 6 | import { animate, motion } from "framer-motion"; 7 | 8 | export const FadeUp = (delay) => { 9 | return { 10 | initial: { 11 | opacity: 0, 12 | y: 50, 13 | }, 14 | animate: { 15 | opacity: 1, 16 | y: 0, 17 | transition: { 18 | type: "spring", 19 | stiffness: 100, 20 | duration: 0.5, 21 | delay: delay, 22 | ease: "easeInOut", 23 | }, 24 | }, 25 | }; 26 | }; 27 | 28 | const Hero = () => { 29 | return ( 30 |
31 | 32 |
33 | {/* Brand Info */} 34 |
35 |
36 | 42 | Let's Learn to build a{" "} 43 | Website for your business 44 | 45 | 51 | 55 | 56 |
57 |
58 | {/* Hero Image */} 59 |
60 | 68 | 76 |
77 |
78 |
79 | ); 80 | }; 81 | 82 | export default Hero; 83 | -------------------------------------------------------------------------------- /src/components/Navbar/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IoMdMenu } from "react-icons/io"; 3 | import { motion } from "framer-motion"; 4 | 5 | const NavbarMenu = [ 6 | { 7 | id: 1, 8 | title: "Home", 9 | path: "/", 10 | }, 11 | { 12 | id: 2, 13 | title: "Services", 14 | link: "#", 15 | }, 16 | { 17 | id: 3, 18 | title: "About Us", 19 | link: "#", 20 | }, 21 | { 22 | id: 4, 23 | title: "Our Team", 24 | link: "#", 25 | }, 26 | { 27 | id: 5, 28 | title: "Contact Us", 29 | link: "#", 30 | }, 31 | ]; 32 | const Navbar = () => { 33 | return ( 34 | 67 | ); 68 | }; 69 | 70 | export default Navbar; 71 | -------------------------------------------------------------------------------- /src/components/Services/Services.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { RiComputerLine } from "react-icons/ri"; 3 | import { CiMobile3 } from "react-icons/ci"; 4 | import { TbWorldWww } from "react-icons/tb"; 5 | import { IoMdHappy } from "react-icons/io"; 6 | import { BiSupport } from "react-icons/bi"; 7 | import { IoPulseOutline } from "react-icons/io5"; 8 | import { motion } from "framer-motion"; 9 | 10 | const ServicesData = [ 11 | { 12 | id: 1, 13 | title: "Web Development", 14 | link: "#", 15 | icon: , 16 | delay: 0.2, 17 | }, 18 | { 19 | id: 2, 20 | title: "Mobile development", 21 | link: "#", 22 | icon: , 23 | delay: 0.3, 24 | }, 25 | { 26 | id: 3, 27 | title: "Software development", 28 | link: "#", 29 | icon: , 30 | delay: 0.4, 31 | }, 32 | { 33 | id: 4, 34 | title: "Satisfied clients", 35 | link: "#", 36 | icon: , 37 | delay: 0.5, 38 | }, 39 | { 40 | id: 5, 41 | title: "SEO optimization", 42 | link: "#", 43 | icon: , 44 | delay: 0.6, 45 | }, 46 | { 47 | id: 6, 48 | title: "24/7 support", 49 | link: "#", 50 | icon: , 51 | delay: 0.7, 52 | }, 53 | ]; 54 | 55 | const SlideLeft = (delay) => { 56 | return { 57 | initial: { 58 | opacity: 0, 59 | x: 50, 60 | }, 61 | animate: { 62 | opacity: 1, 63 | x: 0, 64 | transition: { 65 | duration: 0.3, 66 | delay: delay, 67 | ease: "easeInOut", 68 | }, 69 | }, 70 | }; 71 | }; 72 | const Services = () => { 73 | return ( 74 |
75 |
76 |

77 | Services we provide 78 |

79 |
80 | {ServicesData.map((service) => ( 81 | 88 |
{service.icon}
89 |

90 | {service.title} 91 |

92 | 93 | ))} 94 |
95 |
96 |
97 | ); 98 | }; 99 | 100 | export default Services; 101 | -------------------------------------------------------------------------------- /src/components/Subscribe/Subscribe.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FaBell } from "react-icons/fa"; 3 | import BgImage from "../../assets/bg.png"; 4 | import { motion } from "framer-motion"; 5 | 6 | const bgStyle = { 7 | backgroundImage: `url(${BgImage})`, 8 | backgroundRepeat: "no-repeat", 9 | backgroundSize: "cover", 10 | backgroundPosition: "center", 11 | }; 12 | 13 | const Subscribe = () => { 14 | return ( 15 |
16 | 22 | 28 |
29 |

30 | 450K+ Students are learning from us 31 |

32 |

33 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 34 | Recusandae iusto minima 35 |

36 | 40 | Subscribe Now 41 | 42 | 43 |
44 | 45 | 46 |
47 | ); 48 | }; 49 | 50 | export default Subscribe; 51 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer components { 6 | .primary-btn { 7 | @apply inline-block bg-primary text-white font-semibold rounded-lg hover:bg-secondary duration-200 shadow-[0px_10px_8px_-7px_#ffd978] hover:shadow-[0px_10px_8px_-7px_#69a79c] py-2 px-6; 8 | } 9 | } 10 | 11 | @layer utilities { 12 | .drop-shadow { 13 | filter: drop-shadow(6px 8px 10px rgba(0, 0, 0, 0.5)); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: { 6 | fontFamily: { 7 | poppins: ["Poppins", "sans-serif"], 8 | }, 9 | colors: { 10 | primary: "#f7ba34", 11 | secondary: "#69a79c", 12 | light: "#f7f7f7", 13 | dark: "#333333", 14 | dark2: "#999999", 15 | }, 16 | container: { 17 | center: true, 18 | padding: { 19 | DEFAULT: "1rem", 20 | sm: "2rem", 21 | lg: "4rem", 22 | xl: "5rem", 23 | "2xl": "6rem", 24 | }, 25 | }, 26 | }, 27 | }, 28 | plugins: [], 29 | }; 30 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------