From de3d401e3ef049d153b23714bc4a29e413b2b61a Mon Sep 17 00:00:00 2001
From: harshita1611 <harshitabhamhani5@gmail.com>
Date: Wed, 12 Jun 2024 19:32:20 +0530
Subject: [PATCH 1/2] home shifted to folder

---
 Front-with-React/VigyBag/src/App.jsx          | 20 +++----
 Front-with-React/VigyBag/src/main.jsx         | 55 ++++++++++---------
 Front-with-React/VigyBag/src/pages/Home.jsx   | 17 ------
 .../VigyBag/src/pages/Home/Home.jsx           | 21 +++++++
 4 files changed, 58 insertions(+), 55 deletions(-)
 delete mode 100644 Front-with-React/VigyBag/src/pages/Home.jsx
 create mode 100644 Front-with-React/VigyBag/src/pages/Home/Home.jsx

diff --git a/Front-with-React/VigyBag/src/App.jsx b/Front-with-React/VigyBag/src/App.jsx
index c954af29..d70bb376 100644
--- a/Front-with-React/VigyBag/src/App.jsx
+++ b/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>
   );
-}
\ No newline at end of file
+}
diff --git a/Front-with-React/VigyBag/src/main.jsx b/Front-with-React/VigyBag/src/main.jsx
index 3a8e8d42..7c936c65 100644
--- a/Front-with-React/VigyBag/src/main.jsx
+++ b/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} />
   </>,
-)
+);
diff --git a/Front-with-React/VigyBag/src/pages/Home.jsx b/Front-with-React/VigyBag/src/pages/Home.jsx
deleted file mode 100644
index e9ecb2bb..00000000
--- a/Front-with-React/VigyBag/src/pages/Home.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import Navbar from "../components/Navbar/Navbar";
-import background from "../assets/images/background.png";
-
-function Home() {
-    return (
-        <div style={{ backgroundImage: `url(${background})`, backgroundSize: 'cover', height: '100vh', position: 'relative' }}>
-            
-            <h1>Welcome to Vigy Bag</h1>
-            <h1>Your Eco-Friendly</h1>
-            <h1>Shopping Heaven</h1>
-
-        </div>
-    );
-}
-
-export default Home;
\ No newline at end of file
diff --git a/Front-with-React/VigyBag/src/pages/Home/Home.jsx b/Front-with-React/VigyBag/src/pages/Home/Home.jsx
new file mode 100644
index 00000000..8664a897
--- /dev/null
+++ b/Front-with-React/VigyBag/src/pages/Home/Home.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Navbar from '../../components/Navbar/Navbar';
+import background from '../../assets/images/background.png';
+
+function Home() {
+  return (
+    <div
+      style={{
+        backgroundImage: `url(${background})`,
+        backgroundSize: 'cover',
+        height: '100vh',
+        position: 'relative',
+      }}>
+      <h1>Welcome to Vigy Bag</h1>
+      <h1>Your Eco-Friendly</h1>
+      <h1>Shopping Heaven</h1>
+    </div>
+  );
+}
+
+export default Home;

From 4d6a3ba12c07eec544236660d3344581869d5f0d Mon Sep 17 00:00:00 2001
From: harshita1611 <harshitabhamhani5@gmail.com>
Date: Wed, 12 Jun 2024 20:08:25 +0530
Subject: [PATCH 2/2] Home page done with animation

---
 .../VigyBag/src/pages/Home/Home.jsx           | 25 ++++++++++++++++---
 .../VigyBag/src/pages/Home/typewriter.css     | 21 ++++++++++++++++
 Front-with-React/VigyBag/tailwind.config.js   |  7 +++++-
 3 files changed, 49 insertions(+), 4 deletions(-)
 create mode 100644 Front-with-React/VigyBag/src/pages/Home/typewriter.css

diff --git a/Front-with-React/VigyBag/src/pages/Home/Home.jsx b/Front-with-React/VigyBag/src/pages/Home/Home.jsx
index 8664a897..6f2cf99d 100644
--- a/Front-with-React/VigyBag/src/pages/Home/Home.jsx
+++ b/Front-with-React/VigyBag/src/pages/Home/Home.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import Navbar from '../../components/Navbar/Navbar';
 import background from '../../assets/images/background.png';
+import './typewriter.css';
 
 function Home() {
   return (
@@ -11,9 +12,27 @@ function Home() {
         height: '100vh',
         position: 'relative',
       }}>
-      <h1>Welcome to Vigy Bag</h1>
-      <h1>Your Eco-Friendly</h1>
-      <h1>Shopping Heaven</h1>
+      <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>
   );
 }
diff --git a/Front-with-React/VigyBag/src/pages/Home/typewriter.css b/Front-with-React/VigyBag/src/pages/Home/typewriter.css
new file mode 100644
index 00000000..fde01e93
--- /dev/null
+++ b/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;
+  }
\ No newline at end of file
diff --git a/Front-with-React/VigyBag/tailwind.config.js b/Front-with-React/VigyBag/tailwind.config.js
index d37737fc..b2f7fc07 100644
--- a/Front-with-React/VigyBag/tailwind.config.js
+++ b/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: [],
 }