Merge pull request #1348 from harshita1611/Harshita

[New Vigy Bag] home page done with animations added

Front-with-React/VigyBag/src/App.jsx

@@ -1,16 +1,14 @@
-import React from "react";
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-import LandingPage from "./pages/Home";
-import Gifts from "./pages/Gifts";
-import Categories from "./pages/Categories";
-import AboutUs from "./pages/AboutUs";
-import Dashboard from "./pages/Dashboard";
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import LandingPage from './pages/Home/Home';
+import Gifts from './pages/Gifts';
+import Categories from './pages/Categories';
+import AboutUs from './pages/AboutUs';
+import Dashboard from './pages/Dashboard';
 
 export default function App() {
   return (
-    <>
-
-    </>
+    <></>
     // <Router>
     //   <Routes>
     //     <Route path="/" element={<LandingPage />} />
@@ -21,4 +19,4 @@ export default function App() {
     //   </Routes>
     // </Router>
   );
-}
+}

Front-with-React/VigyBag/src/main.jsx

@@ -1,8 +1,13 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import './index.css'
-
-import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from "react-router-dom";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+
+import {
+  Route,
+  RouterProvider,
+  createBrowserRouter,
+  createRoutesFromElements,
+} from 'react-router-dom';
 import Categories from './pages/Categories';
 import Login from './pages/Login/Login';
 import Toys from './pages/gifts/Toys';
@@ -11,42 +16,38 @@ import AboutUs from './pages/AboutUs';
 import Gifts from './pages/gifts/Gifts';
 import Contact from './pages/Contact';
 import Dashboard from './pages/Dashboard';
-import Home from './pages/Home';
-import Layout from './Layout'
+import Home from './pages/Home/Home';
+import Layout from './Layout';
 import Team from './components/Team/Team';
 
-
-
 const router = createBrowserRouter(
   createRoutesFromElements(
-    <Route path="/" element={<Layout/>}>
-      <Route path="" element={<Home/>}/>
+    <Route path="/" element={<Layout />}>
+      <Route path="" element={<Home />} />
 
       {/* Drop down of categories */}
 
-      <Route path="categories" element={<Categories/>}>       
-        <Route path="decorativeItems" element={<DecorativeItems/>}/>
+      <Route path="categories" element={<Categories />}>
+        <Route path="decorativeItems" element={<DecorativeItems />} />
       </Route>
 
       {/* Drop down of Gifts */}
 
-      <Route path="gifts" element={<Gifts/>}>
-          <Route path="toys" element={<Toys/>}/>  
+      <Route path="gifts" element={<Gifts />}>
+        <Route path="toys" element={<Toys />} />
       </Route>
 
-      <Route path="about" element={<AboutUs/>}/>
-      <Route path="contact" element={<Contact/>}/>
-      <Route path="team" element={<Team/>}/>
-      <Route path="login" element={<Login/>}/>
-      <Route path="dashboard" element={<Dashboard/>}/>
-    </Route>
-  )
-)
-
-
+      <Route path="about" element={<AboutUs />} />
+      <Route path="contact" element={<Contact />} />
+      <Route path="team" element={<Team />} />
+      <Route path="login" element={<Login />} />
+      <Route path="dashboard" element={<Dashboard />} />
+    </Route>,
+  ),
+);
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <>
-    <RouterProvider router={router}/>
+    <RouterProvider router={router} />
   </>,
-)
+);

Front-with-React/VigyBag/src/pages/Home/Home.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Navbar from '../../components/Navbar/Navbar';
+import background from '../../assets/images/background.png';
+import './typewriter.css';
+
+function Home() {
+  return (
+    <div
+      style={{
+        backgroundImage: `url(${background})`,
+        backgroundSize: 'cover',
+        height: '100vh',
+        position: 'relative',
+      }}>
+      <div className="container   mx-auto my-auto sm:py-24 leading-snug ">
+        <div className="text-left">
+            <div className="typewriter">
+                <h1 className="text-4xl sm:text-6xl font-bold tracking-widest">
+                Welcome to <span className="text-green-900">VigyBag!</span>
+                </h1>
+            </div>
+          <h2 className="text-3xl sm:text-6xl  tracking-widest font-bold mt-5 mb-4">Your Eco-Friendly</h2>
+          <h2 className="text-3xl sm:text-6xl font-bold mb-8 tracking-widest">Shopping Heaven</h2>
+          <p className=" text-lg sm:text-3xl mb-8 leadinh-snug tracking-widest">
+            At VigyBag, we curate the finest earth-friendly <br></br>
+            essentials to help you reduce your environmental <br></br>
+            footprint without compromising on quality or style.<br></br> 
+            Shop smart, live green, and embrace a sustainable <br></br>
+            future with VigyBag.
+          </p>
+          <button className="bg-green-900 tracking-widest text-white px-6 py-3 mt-10 rounded-md hover:bg-green-800 transition-colors duration-300">
+            Shop Now
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Home;

Front-with-React/VigyBag/src/pages/Home/typewriter.css

@@ -0,0 +1,21 @@
+/* Typewriter.css */
+@keyframes typewriter {
+    from {width: 0;}
+    to {width: 100%;}
+  }
+
+  @keyframes blink {
+    from, to {border-color: transparent;}
+    50% {border-color: transparent;}
+  }
+
+  .typewriter h1 {
+    overflow: hidden;
+    border-right: .15em solid black;
+    white-space: nowrap;
+    margin: 0 auto;
+    letter-spacing: .15em;
+    animation: 
+      typewriter 3.5s steps(40, end),
+      blink .75s step-end infinite;
+  }

Front-with-React/VigyBag/tailwind.config.js

@@ -5,7 +5,12 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily:{
+        'league': ['League Spartan'],
+        'pop': ['Poppins'],
+      }
+    },
   },
   plugins: [],
 }