Amarjeet

E-learning-frontend/package.json

@@ -14,6 +14,7 @@
     "@heroicons/react": "^2.1.5",
     "@react-icons/all-files": "^4.1.0",
     "axios": "^1.7.7",
+    "framer-motion": "^11.9.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",

E-learning-frontend/public/list.json

@@ -0,0 +1,74 @@
+[
+    {
+    "id":1,
+    "name":"story book",
+    "title":"Kahani ki kitab",
+    "price":0,
+    "category":"Free",
+     "image":"https://www.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_24307396.htm#fromView=search&page=1&position=0&uuid=ddabc1c2-16dc-477e-916f-f37d293be0b6"
+
+    },
+    {
+        "id":2,
+        "name":"sports book",
+        "title":"Kahani ki kitab",
+        "price":50,
+        "category":"sports",
+         "image":"https://www.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_24307396.htm#fromView=search&page=1&position=0&uuid=ddabc1c2-16dc-477e-916f-f37d293be0b6"
+
+        },
+        {
+            "id":3,
+            "name":"music book",
+            "title":"Kahani ki kitab",
+            "price":70,
+            "category":"songs",
+             "image":"https://www.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_24307396.htm#fromView=search&page=1&position=0&uuid=ddabc1c2-16dc-477e-916f-f37d293be0b6"
+
+            }
+            , {
+                "id":4,
+                "name":"Horrore book",
+                "title":"Kahani ki kitab",
+                "price":110,
+                "category":"hollyvood",
+                 "image":"https://www.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_24307396.htm#fromView=search&page=1&position=0&uuid=ddabc1c2-16dc-477e-916f-f37d293be0b6"
+
+                },
+                {
+                    "id":5,
+                    "name":"cooking book",
+                    "title":"Kahani ki kitab",
+                    "price":120,
+                    "category":"cooking",
+                     "image":"https://www.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_24307396.htm#fromView=search&page=1&position=0&uuid=ddabc1c2-16dc-477e-916f-f37d293be0b6"
+
+                    },
+                    {
+                        "id":6,
+                        "name":"moview book",
+                        "title":"Kahani ki kitab",
+                        "price":130,
+                        "category":"Bollywood",
+                         "image":"https://www.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_24307396.htm#fromView=search&page=1&position=0&uuid=ddabc1c2-16dc-477e-916f-f37d293be0b6"
+
+                        },
+                        {
+                            "id":7,
+                            "name":"jokes book",
+                            "title":"Kahani ki kitab",
+                            "price":90,
+                            "category":"comic jokes",
+                             "image":"https://www.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_24307396.htm#fromView=search&page=1&position=0&uuid=ddabc1c2-16dc-477e-916f-f37d293be0b6"
+
+                            },
+                            {
+                                "id":8,
+                                "name":"forming book",
+                                "title":"Kahani ki kitab",
+                                "price":100,
+                                "category":"forming",
+                                 "image":"https://www.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_24307396.htm#fromView=search&page=1&position=0&uuid=ddabc1c2-16dc-477e-916f-f37d293be0b6"
+
+                                }
+]

E-learning-frontend/src/App.jsx

@@ -11,10 +11,13 @@ function App() {
       <div className="min-h-screen flex flex-col">
         <Navbar />
         <main className="flex-grow flex items-center justify-center container mx-auto p-4">
-          <ComponentsRouter />
+        <ComponentsRouter />
+
         </main>
+
       </div>
 
+
      </BrowserRouter>
 
     </div>

E-learning-frontend/src/Navbar.jsx

@@ -26,7 +26,7 @@ export default function Navbar() {
 
   return (
     <nav className="bg-gray-800 w-screen">
-      <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
+      <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 ">
         <div className="flex items-center justify-between h-16">
           {/* Logo */}
           <div className="flex items-center">

E-learning-frontend/src/components/Hero/Hero.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Heropng from '../../components/Hero/Hii.png'
+import { GrUserExpert } from "react-icons/gr";
+import { MdOutlineAccessTime } from "react-icons/md";
+import { FaBookReader } from "react-icons/fa";
+
+const Hero = () => {
+  return (
+    <div className='container py-14 md:py-24 grid grid-cols-1 md:grid grid-cols-2 gap-8 space-y-6 md:space-y-0'>
+    <div className='flrx justify-center items-center'> 
+    <img src={Heropng} alt=""
+    className='w-[350px] md:max-w-[450px] object-cover drop-shadow'
+    />
+    </div>
+    <div className='flex flex-col justify-center'>
+    <div className='text-center md:text-left space-y-12'>
+    <h1 className='text-3xl md:text-4xl font-bold !leading-snug text-white'>
+    The world's Leading Online Learning plateform
+
+    </h1>
+    <div className='flex items-center gap-4 p-6 bg-[#f4f4f4] rounded-2xl hover:bg-gray-700 duration-300 hover:shadow-2xl'>
+    <FaBookReader className='text-2xl'/>
+    <p className="text-lg">1000+ Courses </p>
+    </div>
+    <div className='flex items-center gap-4 p-6 bg-[#f4f4f4] rounded-2xl hover:bg-gray-700 duration-300 hover:shadow-2xl'>
+    <GrUserExpert className='text-2xl'/>
+    <p className="text-lg">Expert Instruction </p>
+    </div>
+    <div className='flex items-center gap-4 p-6 bg-[#f4f4f4] rounded-2xl hover:bg-gray-700 duration-300 hover:shadow-2xl'>
+    <MdOutlineAccessTime className='text-2xl'/>
+    <p className="text-lg"> Lifetime Access</p>
+    </div>
+
+
+    </div>
+
+    </div>
+
+    </div>
+  )
+}
+
+export default Hero;

E-learning-frontend/src/components/Home/Home.jsx

@@ -2,12 +2,26 @@
 import React from 'react';
 import Banner from './Banner';
 import Footer from './Footer';
+import Services from '../Services/Services';
+import Hero from '../Hero/Hero';
+import Subscribe from '../Subscribe/Subscribe';
 
 const Home = () => {
   return (
     <div className="flex flex-col bg-gray-900 w-screen items-center justify-center min-h-screen -mt-4">
       <Banner /> {/* Full width and margin below the banner */}
+      <div>
+      <Services/>
+      </div>
+    <div>      
+    <Hero/>
+    </div>
+    <div>
+    <Subscribe/>
+    </div>
+
       <div className="w-screen mt-10 bg-gray-900">
+
         <Footer  /> {/* Dark background, white text, padding */}
       </div>
     </div>

E-learning-frontend/src/components/Services/Services.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import {RiComputerLine} from "react-icons/ri";
+import {TbWorldWww} from "react-icons/tb";
+import {CiMobile3} from "react-icons/ci";
+import {IoMdHappy} from "react-icons/io";
+import {BiSupport} from "react-icons/bi";
+import {IoPulseOutline } from "react-icons/io5";
+
+const ServicesData=[
+    {
+     id:1,
+     title:"Web Developement",
+     link:"#",
+     icon:<TbWorldWww/>,
+     delay:0.2
+    },
+    {
+        id:2,
+        title:"App Developement",
+        link:"#",
+        icon:<CiMobile3 />,
+        delay:0.3
+       },
+       {
+        id:3,
+        title:"Software Developement",
+        link:"#",
+        icon:<RiComputerLine />,
+        delay:0.4
+       },
+       {
+        id:4,
+        title:"Satisfied Client",
+        link:"#",
+        icon:<IoMdHappy />,
+        delay:0.5
+       },
+       {
+        id:5,
+        title:" BiSupport",
+        link:"#",
+        icon:<BiSupport />,
+        delay:0.6
+       },
+       {
+        id:6,
+        title:" SEO Optimization",
+        link:"#",
+        icon:<IoPulseOutline />,
+        delay:0.7
+       }
+
+
+]
+
+const Services = () => {
+  return (
+    <div className='bg-gray-900'>
+
+    <div className='container pb-14 pt-16'>
+    <h1 className='text-4xl text-white font-bold text-center pb-10'>
+    Services We Provided
+    </h1>
+     <div className='grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-8'>
+     {
+         ServicesData.map((service)=>(
+         <div className='bg-[#f4f4f4] rounded-2xl flex flex-col gap-4 items-center justify-center p-4 py-7 hover:bg-white hover:scale-110 duration-300 hover:shadow-2xl'>
+         <div className='text-4xl mb-4'>{service.icon}</div>
+         <h1 className='text-lg font-semibold text-center px-3'>{service.title}</h1>
+         </div>
+
+
+         )
+
+
+        )
+     }
+
+     </div>
+    </div>
+    </div>
+  )
+}
+
+export default Services;

E-learning-frontend/src/components/Subscribe/Subscribe.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { FaBell } from "react-icons/fa";
+import BgImage from "../../components/Subscribe/sub.png";
+
+import {motion} from "framer-motion";
+const bgStyle ={
+    backgroundImage:`url{$(BgImage)}`,
+    backgroundRepeat:"no-repeat",
+    backgroundSize:"cover",
+    backgroundPosition:"center"
+};
+
+const Subscribe = () => {
+  return (
+    <div className='bg-[#f4f4f4] '>
+    <div className='container '>
+
+
+
+    </div>
+
+    </div>
+  )
+}
+
+export default Subscribe