Home page done with animation

codervivek5 · Jun 12, 2024 · 4d6a3ba · 4d6a3ba
1 parent de3d401
commit 4d6a3ba
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 4 deletions.
diff --git 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
@@ -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;
+  }
diff --git 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: [],
 }