diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml
index ce29444..f92700a 100644
--- a/.github/workflows/workflow.yml
+++ b/.github/workflows/workflow.yml
@@ -24,7 +24,7 @@ jobs:
     - name: Set up Node.js
       uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: '16'
 
     - name: Install Dependencies
       run: npm install
@@ -36,4 +36,4 @@ jobs:
       uses: peaceiris/actions-gh-pages@v3
       with:
         github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: build
+        publish_dir: build
\ No newline at end of file
diff --git a/App.js b/App.js
deleted file mode 100644
index be5bafa..0000000
--- a/App.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import ContactForm from './ContactForm';
-import './Contact.css';
-
-const App = () => {
-  return (
-    <div>
-      <ContactForm />
-    </div>
-  );
-};
-
-export default App;
diff --git a/src/App.js b/src/App.js
index aee9d72..50c139d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,7 +13,8 @@ import  BottomNavbar  from './components/BottomNavbar';
 import  MobileNavbar  from './components/MobileNavbar';
 import  ContactUs  from './components/ContactUs';
 import  Login  from './components/Login';
-import { Footer } from './components/footer';
+import Footer  from './components/Footer';
+import Instamart  from './components/Instamart';
 
 import 'bootstrap/dist/css/bootstrap.min.css'; // Import Bootstrap once in your entry point
 
@@ -27,8 +28,9 @@ function App() {
       <MainSection3 />
       <MainSection4 />
       <BestPlacesSection />
-
+      <Login/>
       <BestGroceries/>
+      <Instamart/>
       <MobileNavbar/>
     </div>
   );
diff --git a/src/components/BestGroceries.js b/src/components/BestGroceries.js
index a661cba..599e74c 100644
--- a/src/components/BestGroceries.js
+++ b/src/components/BestGroceries.js
@@ -1,52 +1,55 @@
-import React,{useState} from 'react';
+import React, { useState } from 'react';
 import './BestPlacesSection.css';
 
-const BestGroceries=()=>{
-const cities = [
- 
-"Order grocery in Bangalore",
-"Order grocery in Gurgaon",
-"Order grocery in Hyderabad",
-"Order grocery in Delhi",
-" Order grocery in Mumbai",
-"Order grocery in Pune",
-" Order grocery in Kolkata",
-" Order grocery in Chennai",
-" Order grocery in Ahmedabad",
-"Order groceryin Chandigarh",
-" Order grocery in Jaipur",
-" Order grocery in Kochi",
-" Order grocery in Coimbatore",
-"Order grocery in Lucknow",
-" Order grocery in Nagpur",
-"Order groceryin Vadodara",
- "Order grocery in Indore",
-"Order grocery in Vizag",
-" Order grocery in Surat",
-" Order grocery in Dehradun",
- "Order grocery in Noida",
-"Order grocery in Vijayawada"
-   
-  
-];
-const [visibleCount,setVisibleCount]=useState(9);
+const BestGroceries = () => {
+  const cities = [
+    "Order grocery in Bangalore",
+    "Order grocery in Gurgaon",
+    "Order grocery in Hyderabad",
+    "Order grocery in Delhi",
+    " Order grocery in Mumbai",
+    "Order grocery in Pune",
+    " Order grocery in Kolkata",
+    " Order grocery in Chennai",
+    " Order grocery in Ahmedabad",
+    "Order groceryin Chandigarh",
+    " Order grocery in Jaipur",
+    " Order grocery in Kochi",
+    " Order grocery in Coimbatore",
+    "Order grocery in Lucknow",
+    " Order grocery in Nagpur",
+    "Order groceryin Vadodara",
+    "Order grocery in Indore",
+    "Order grocery in Vizag",
+    " Order grocery in Surat",
+    " Order grocery in Dehradun",
+    "Order grocery in Noida",
+    "Order grocery in Vijayawada"
+  ];
 
-const handleShow_more=()=>{
-  setVisibleCount((prevCount)=>prevCount+4);
-}
+  const [visibleCount, setVisibleCount] = useState(9);
 
-return(
-  <div>
-  <h2>Cities with groceries delivery</h2>
+  const handleShow_more = () => {
+    try {
+      setVisibleCount((prevCount) => prevCount + 4);
+    } catch (error) {
+      console.error('Error updating visible count:', error);
+    }
+  };
 
-<div className='button-grid'>
-  {cities.slice(0,visibleCount).map((item,index)=>
-  <button key={index} className='city-button'>{item}</button>)}
-  <button onClick={handleShow_more}>Show more</button>
-</div>
+  return (
+    <div>
+      <h2>Cities with groceries delivery</h2>
 
-</div>
+      <div className='button-grid'>
+        {cities.slice(0, visibleCount).map((item, index) =>
+          <button key={index} className='city-button'>{item}</button>
+        )}
+        <button onClick={handleShow_more}>Show more</button>
+      </div>
 
+    </div>
+  );
+};
 
-)}
 export default BestGroceries;
\ No newline at end of file
diff --git a/Contact.css b/src/components/Contact.css
similarity index 94%
rename from Contact.css
rename to src/components/Contact.css
index 78b3f2e..5df2bcb 100644
--- a/Contact.css
+++ b/src/components/Contact.css
@@ -1,85 +1,85 @@
-.btn-pink {
-    background-color: var(--bgOrange);
-    width: fit-content;
-    color: rgb(248, 11, 11);
-    padding: 0.8rem 2.3rem;
-    box-shadow: 5px 5px 7px 0px #0000003f;
-    font-size: 18px;
-    cursor: pointer;
-    transition: all 0.5s;
-    font-weight: 500;
-    border: solid 3px transparent;
-    position: relative;
-    z-index: 1;
-  }
-  
-  .btn-pink::before {
-    content: "";
-    position: absolute;
-    background-color: #fff;
-    top: 0px;
-    left: 0;
-    right: 0;
-    bottom: 0px;
-    z-index: -1;
-    transform: scaleX(0);
-    transform-origin: left;
-    transition: all 0.8s;
-  }
-  
-  .btn-pink:hover::before {
-    transform: scaleX(1);
-  }
-  
-  .btn-pink:hover {
-    border: solid 3px var(--bgOrange);
-    color: black;
-  }
-  
-  .contact-back {
-    background-color: rgb(231, 231, 231);
-    font-family: Arial, sans-serif;
-    margin: 0;
-    padding: 0;
-  }
-  
-  .contc {
-    color: red;
-    align-self: center;
-  }
-  
-  .contact-form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 20px;
-  }
-  
-  .form-group {
-    margin-bottom: 15px;
-    width: 100%;
-  }
-  
-  label {
-    display: block;
-    margin-bottom: 5px;
-    font-weight: bold;
-  }
-  
-  input, textarea {
-    width: 100%;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-  }
-  
-  textarea {
-    resize: none;
-  }
-  
-  footer.copyright {
-    text-align: center;
-    margin-top: 20px;
-    font-size: 14px;
-    color: #555;
-  }
+.btn-pink {
+    background-color: var(--bgOrange);
+    width: fit-content;
+    color: rgb(248, 11, 11);
+    padding: 0.8rem 2.3rem;
+    box-shadow: 5px 5px 7px 0px #0000003f;
+    font-size: 18px;
+    cursor: pointer;
+    transition: all 0.5s;
+    font-weight: 500;
+    border: solid 3px transparent;
+    position: relative;
+    z-index: 1;
+  }
+  
+  .btn-pink::before {
+    content: "";
+    position: absolute;
+    background-color: #fff;
+    top: 0px;
+    left: 0;
+    right: 0;
+    bottom: 0px;
+    z-index: -1;
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: all 0.8s;
+  }
+  
+  .btn-pink:hover::before {
+    transform: scaleX(1);
+  }
+  
+  .btn-pink:hover {
+    border: solid 3px var(--bgOrange);
+    color: black;
+  }
+  
+  .contact-back {
+    background-color: rgb(231, 231, 231);
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+  }
+  
+  .contc {
+    color: red;
+    align-self: center;
+  }
+  
+  .contact-form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+  }
+  
+  .form-group {
+    margin-bottom: 15px;
+    width: 100%;
+  }
+  
+  label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+  }
+  
+  input, textarea {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  
+  textarea {
+    resize: none;
+  }
+  
+  footer.copyright {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 14px;
+    color: #555;
+  }
diff --git a/ContactForm.js b/src/components/ContactForm.js
similarity index 86%
rename from ContactForm.js
rename to src/components/ContactForm.js
index ea8fe0f..e24d41a 100644
--- a/ContactForm.js
+++ b/src/components/ContactForm.js
@@ -1,92 +1,92 @@
-import React, { useState } from 'react';
-import emailjs from '@emailjs/browser';
-
-const ContactForm = () => {
-  const [formData, setFormData] = useState({
-    name: '',
-    email: '',
-    subject: '',
-    message: '',
-  });
-
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setFormData({
-      ...formData,
-      [name]: value,
-    });
-  };
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    emailjs.send('service_t8gkgs9', 'template_s9l32nl', formData, 't9E6gAY3CYERvEBA7')
-      .then((res) => {
-        alert('Message sent successfully! ' + res.status);
-      })
-      .catch((err) => {
-        console.error('Failed to send message:', err);
-      });
-  };
-
-  return (
-    <div id="contactme" className="contact-back">
-      <div className="contact-form">
-        <div className="contc"><h1>Any Queries ??</h1></div>
-        <form onSubmit={handleSubmit}>
-          <div className="form-group">
-            <label htmlFor="name">Name :</label>
-            <input
-              type="text"
-              id="name"
-              name="name"
-              value={formData.name}
-              onChange={handleChange}
-              required
-            />
-          </div>
-          <div className="form-group">
-            <label htmlFor="email">Email :</label>
-            <input
-              type="email"
-              id="email"
-              name="email"
-              value={formData.email}
-              onChange={handleChange}
-              required
-            />
-          </div>
-          <div className="form-group">
-            <label htmlFor="subject">Phone Number :</label>
-            <input
-              type="tel"
-              id="subject"
-              name="subject"
-              value={formData.subject}
-              onChange={handleChange}
-              required
-            />
-          </div>
-          <div className="form-group">
-            <label htmlFor="message">Message :</label>
-            <textarea
-              id="message"
-              name="message"
-              rows="4"
-              value={formData.message}
-              onChange={handleChange}
-              required
-            ></textarea>
-          </div>
-          <button type="submit" className="btn-pink">
-            Send Message <i className="submit-icon fa-solid fa-paper-plane"></i>
-          </button>
-        </form>
-      </div>
-      <footer className="copyright">
-        © 2024 Swiggy India. All rights reserved.
-      </footer>
-    </div>
-  );
-};
-
-export default ContactForm;
+import React, { useState } from 'react';
+import emailjs from '@emailjs/browser';
+
+const ContactForm = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    phoneNumber: '',
+    message: '',
+  });
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    emailjs.send('service_t8gkgs9', 'template_s9l32nl', formData, 't9E6gAY3CYERvEBA7')
+      .then((res) => {
+        alert('Message sent successfully! ' + res.status);
+      })
+      .catch((err) => {
+        console.error('Failed to send message:', err);
+      });
+  };
+
+  return (
+    <div id="contactme" className="contact-back">
+      <div className="contact-form">
+        <div className="contc"><h1>Any Queries ??</h1></div>
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="name">Name :</label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              value={formData.name}
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="email">Email :</label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              value={formData.email}
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="phoneNumber">Phone Number :</label>
+            <input
+              type="tel"
+              id="phoneNumber"
+              name="phoneNumber"
+              value={formData.phoneNumber}
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="message">Message :</label>
+            <textarea
+              id="message"
+              name="message"
+              rows="4"
+              value={formData.message}
+              onChange={handleChange}
+              required
+            ></textarea>
+          </div>
+          <button type="submit" className="btn-pink">
+            Send Message <i className="submit-icon fa-solid fa-paper-plane"></i>
+          </button>
+        </form>
+      </div>
+      <footer className="copyright">
+        2024 Swiggy India. All rights reserved.
+      </footer>
+    </div>
+  );
+};
+
+export default ContactForm;
\ No newline at end of file
diff --git a/src/components/Instamart.js b/src/components/Instamart.js
new file mode 100644
index 0000000..2399829
--- /dev/null
+++ b/src/components/Instamart.js
@@ -0,0 +1,118 @@
+import React from "react";
+import "./Instamart.css"; // Add your CSS file
+import "@fortawesome/fontawesome-free/css/all.min.css";
+
+const categories = [
+  { img: "../../image/frui2.avif", title: "Fresh Fruit" },
+  { img: "../../image/veg.avif", title: "Fresh Vegetables" },
+  { img: "../../image/fruit4.avif", title: "Atta, Rice, and Dals" },
+  { img: "../../image/fruit5.avif", title: "Masalas and Dry Fruits" },
+  { img: "../../image/fruit3.avif", title: "Dairy, Bread, and Eggs" },
+  { img: "../../image/frui5.avif", title: "Oils and Ghee" },
+  { img: "../../image/frui9.avif", title: "Meat and Seafood" },
+  { img: "../../image/fruit6.avif", title: "Munchies" },
+  { img: "../../image/fruit8.avif", title: "Cold Drinks and Juices" },
+  { img: "../../image/fruit7.avif", title: "Sweet Tooth" },
+  { img: "../../image/baby.avif", title: "Baby Care" },
+  { img: "../../image/bath.avif", title: "Bath, Body, and Hair" },
+  { img: "../../image/beauty.avif", title: "Beauty and Grooming" },
+  { img: "../../image/cereal.avif", title: "Cereal and Breakfast" },
+  { img: "../../image/cleaning.avif", title: "Cleaning Essential" },
+  { img: "../../image/home.avif", title: "Home and Kitchen" },
+  { img: "../../image/hygiene.avif", title: "Hygiene and Wellness" },
+  { img: "../../image/instantfood.avif", title: "Instant and Frozen Food" },
+  { img: "../../image/office.avif", title: "Office and Electricals" },
+  { img: "../../image/paan.avif", title: "Paan Corner" },
+  { img: "../../image/sauces.avif", title: "Sauces and Spread" },
+  { img: "../../image/tea.avif", title: "Tea, Coffee, and More" },
+  { img: "../../image/pet.avif", title: "Pet Supplies" },
+  { img: "../../image/biscuits.avif", title: "Biscuits and Cakes" },
+];
+
+const Instamart = () => {
+  return (
+    <div>
+      {/* Top Menu */}
+      <div className="top_menu">
+        <div className="login_circle">
+          <i className="fa fa-user" aria-hidden="true"></i>
+        </div>
+        <i className="fa fa-search" aria-hidden="true"></i>
+        <input type="search" placeholder="Search for 'diapers'" />
+      </div>
+
+      {/* Shop by Category */}
+      <div className="shop">
+        <h3>SHOP BY CATEGORY</h3>
+      </div>
+      <div className="line"></div>
+      <br />
+
+      {/* Categories */}
+      <div className="items">
+        {categories.map((category, index) => (
+          <div className="box" key={index}>
+            <img src={category.img} alt={category.title} />
+            <h2>{category.title}</h2>
+          </div>
+        ))}
+      </div>
+
+      {/* Footer */}
+      <div className="footer">
+        <img src="../../image/App_download_banner.avif" alt="Download App" />
+        <img
+          className="footer_logo"
+          src="../../image/swiggy_name.avif"
+          alt="Swiggy"
+          style={{ width: "30vh" }}
+        />
+        <br />
+        <div className="container">
+          <div className="footer_list1">
+            <h3>Categories</h3>
+            <ul>
+              <li>Office</li>
+              <li>Office in Delhi</li>
+              <li>Office in Mumbai</li>
+              <li>Office in Kolkata</li>
+              <li>Dairy, Bread, and Eggs</li>
+              <li>Office and Electricals</li>
+              <li>Beauty and Grooming</li>
+            </ul>
+          </div>
+          <div className="footer_list2">
+            <h3>We deliver to</h3>
+            <ul>
+              <li>Bangalore</li>
+              <li>Delhi</li>
+              <li>Mumbai</li>
+              <li>Kolkata</li>
+              <li>Jaipur</li>
+              <li>Pune</li>
+              <li>Kochi</li>
+            </ul>
+          </div>
+          <div className="footer_list3">
+            <h3>Company</h3>
+            <ul>
+              <li>About</li>
+              <li>Careers</li>
+              <li>Team</li>
+              <li>Swiggy Genie</li>
+              <li>Swiggy One</li>
+            </ul>
+          </div>
+        </div>
+        <div className="icons">
+          <i className="fa fa-person"></i>
+          <i className="fa fa-shopping-cart"></i>
+          <i className="fa fa-tags"></i>
+          <i className="fa fa-user"></i>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Instamart;
diff --git a/css/index.css b/src/components/index.css
similarity index 100%
rename from css/index.css
rename to src/components/index.css
diff --git a/css/instamart.css b/src/components/instamart.css
similarity index 100%
rename from css/instamart.css
rename to src/components/instamart.css
diff --git a/src/pages/signup.css b/src/components/signup.css
similarity index 100%
rename from src/pages/signup.css
rename to src/components/signup.css
diff --git a/src/pages/signup.js b/src/components/signup.js
similarity index 100%
rename from src/pages/signup.js
rename to src/components/signup.js
diff --git a/src/index.js b/src/index.js
index 2484500..0df1e73 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import ReactDOM from 'react-dom/client'; // React 18's createRoot API
-import { SpeedInsights } from "@vercel/speed-insights/react"; // Import SpeedInsights
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 import './index.css';
@@ -12,7 +11,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); // Create roo
 root.render(
   <React.StrictMode>
     <BrowserRouter>
-      <SpeedInsights /> {/* Add SpeedInsights at the root level */}
       <App />
     </BrowserRouter>
   </React.StrictMode>
diff --git a/src/pages/css/instamart.css b/src/pages/css/instamart.css
deleted file mode 100644
index 78035e4..0000000
--- a/src/pages/css/instamart.css
+++ /dev/null
@@ -1,147 +0,0 @@
-body{
-            
-    margin: 0;
-    padding: 0;
-    
-    justify-content: center;
-
-}
-.top_menu{
-    background: linear-gradient(to bottom,rgb(248, 238, 249),white);
-    width: 90%;
-    padding: 70px 20px;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: center;
-    margin: 0 auto;
-    border-bottom-left-radius: 20px;
-    border-bottom-right-radius: 20px;
-    flex-direction: column;
-    position: relative;
-    justify-content: space-between;
-}
-.shop{
-    display: flex;
-    margin-left: 10vh;
-    font-weight: bold;
-    width: 70%;
-    justify-content: left;
-}
-.line{
-    margin-top: 0;
-    border-bottom: 2px solid gray;
-    flex-grow: 0.2;
-    margin-left: 5vh;           
-    margin-right: 5vh;           
-    display: flex;
-    justify-content: center;
-} 
-.items{
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    padding:15vh;
-    gap: 30px;
-    margin: left right 10px 10px;
-}
-.fruit,.box{
-    width: 100px;
-    text-align: center;
-    margin-bottom: 20px;
-    justify-content: space-between 40px;
-    font-size: 9px;
-    display: inline-block;
-    vertical-align: top;
-    
-}
-.fruit img,.box img{
-    width: 100%;
-    height: auto;
-    justify-content: space-between 40px;
-}
-.top_menu .fa-search{
-    position:absolute;
-    right: 50px;
-    top:45%;
-    transform: translate(-50%);
-    font-size: 16px;
-    color: gray;
-    pointer-events: none;
-}
-.top_menu input[type="search"]{
-    width: 100%;
-    padding-left: 30px;
-    border: 1px solid gray;
-    height:7vh;
-    border-radius:10px;
-    text-align: left;
-    margin-bottom: 5px;
-    box-sizing: border-box;
-}
-.top_menu .login_circle {
-    position:absolute;
-    left: 1080px;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: gray;
-    border-radius: 50%;
-    margin-bottom: 10px; 
-    top: 10%;
-}
-
-.top_menu .fa-user {
-    font-size: 24px; 
-    color: white; 
-}
-.container{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-.footer_logo{
-    margin-left: 20px;
-    margin-top: 40px;
-}
-.footer{
-    background: black;
-    width: 90%;
-    padding: 70px 20px;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: center;
-    margin: 0 auto;
-    border-bottom-left-radius: 20px;
-    border-bottom-right-radius: 20px;
-    flex-direction: column;
-    position: relative;
-    justify-content: space-between;
-}
-.footer_list1,.footer_list2,.footer_list3{
-    width: 30%;
-    color: gray;
-    margin-left: 30px;
-    font-weight: bold;
-    font-size: 15px;
-}
-.icons{
-    font-size: 20px;
-    color: white;
-    display: flex;
-    justify-content: right;
-    margin-right: 10px;
-    gap: 10px;
-}
-.footer img {
-    display: block;  /* Make sure the image is displayed */
-    width: 100%;
-    height: auto;
-}
-.moving-text {
-    font-size: 2rem;
-    white-space: nowrap;
-    position: absolute;
-    animation: move 5s linear infinite;
-}
\ No newline at end of file
diff --git a/src/pages/instamart.html b/src/pages/instamart.html
deleted file mode 100644
index 8b152bf..0000000
--- a/src/pages/instamart.html
+++ /dev/null
@@ -1,306 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-    <link rel="stylesheet" href="css/instamart.css">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-    
-</head>
-<body >
-    <div class="top_menu" >
-        <div class="login_circle">
-            <i class="fa fa-user" href="" aria-hidden="true"></i>
-        </div>
-        <i class="fa fa-search" aria-hidden="true"></i>
-            <input type="search" value="" placeholder=" Search for 'diapers'" >
-        
-    </div>
-    
-    <div class="shop">
-        <!-- <div class="moving-text">This is a moving text animation!</div> -->
-        <h3>SHOP BY CATEGORY</h3>
-    </div>
-    <div class="line">
-
-    </div>
-    <br>
-
-    <div class="items">
-        <div class="fruit">
-            <img src="../../image/frui2.avif" >
-            
-            <br>
-            <h2 style="font-weight: bold;font-size: 15px;">
-                Fresh Fruit
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/veg.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Fresh Vegetables
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/fruit4.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Atta,Rice and Dals
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/fruit5.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Masalas and Dry Fruits
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/fruit3.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Dairy,Bread and Eggs
-            </h2>
-        </div>
-        
-        <div class="box">
-            <img src="../../image/frui5.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Oils nad Ghee
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/frui9.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Meant and Seafood
-            </h2>
-        </div>
-        
-        <div class="box">
-            <img src="../../image/fruit6.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Munchies
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/fruit8.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Cold Drinks and Juices
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/fruit7.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Sweet Tooth
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/baby.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Baby Care
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/bath.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Bath,Body and Hair
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/beauty.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Beauty and Grooming
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/cereal.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Cereal and Breakfast
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/cleaning.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Cleaning Essential
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/home.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Home and Kitchen
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/hygiene.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Hygiene and Wellness
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/instantfood.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Instant and Frozen Food
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/office.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Office and Electricals
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/paan.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Paan Corner
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/sauces.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Sauces and Spread
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/tea.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Tea , Coffee and More
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/pet.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Pet Supplies
-            </h2>
-        </div>
-        <div class="box">
-            <img src="../../image/biscuits.avif" >
-            <br>
-            <h2 style="font-weight: bold;">
-                Biscuits and Cakes
-            </h2>
-        </div>
-        
-        <!-- <div class="box">
-            <img src="../../image/fruit6.avif" >
-            <br>
-            <h2 style="font-weight: bold;font-size: 15px;">
-                Munchies
-            </h2>
-        </div> -->
-
-    </div>
-    <div class="footer" >
-        <img src="../../image/App_download_banner.avif" >
-        <img class="footer_logo" src="../../image/swiggy_name.avif" style="width:30vh">
-        <br>
-        <div class="container">
-            <div class="footer_list1">
-                <h3 style="color: white;margin-left:-5px">Categories</h3>
-                <h4>
-                    Office
-                </h4>
-                <h4>
-                    Office in Delhi
-                </h4>
-                <h4>
-                    Office in Mumbai
-                </h4>
-                <h4>
-                    Office in Kolkata
-                </h4>
-                <h4>
-                    Dairy,Bread and Eggs
-                </h4>
-                <h4>
-                    Office and Electricals
-                </h4>
-                <h4>
-                    Beauty and Grooming
-                </h4>
-            </div>
-            <div class="footer_list2" >
-                <h3 style="color: white;">We deliver to</h3>
-                <h4>
-                    Banglore
-                </h4>
-                <h4>
-                    Delhi
-                </h4>
-                <h4>
-                    Mumbai
-                </h4>
-                <h4>
-                    Kolkata
-                </h4>
-                <h4>
-                    Jaipur
-                </h4>
-                <h4>
-                    Pune
-                </h4>
-                <h4>
-                    Kochi
-                </h4>
-            </div>
-            <div class="footer_list3" >
-                <h3 style="color: white;">Company</h3>
-                <h4>
-                    About
-                </h4>
-                <h4>
-                    Careers
-                </h4>
-                <h4>
-                    Team
-                </h4>
-                <h4>
-                    Swiggy Genie
-                </h4>
-                <h4>
-                    Swiggy One
-                </h4>
-                
-            </div>
-        </div>
-        <div class="icons">
-            <i class="fa fa-person"></i>
-            <i class="fa fa-shopping-cart"></i>
-            <i class="fa fa-tags"></i>
-            <i class="fa fa-user"></i>
-        </div>
-        
-
-    </div>
-    <script>
-        gsap.to(".moving-text", {
-            x: -window.innerWidth,
-            duration: 5,
-            repeat: -1,
-            ease: "linear",
-        });
-</body>
-</html>
-<!-- margin-top: 5vh;
-            text-align: left;
-            margin-left: 2vh; -->
\ No newline at end of file