updates

package.json

@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@vercel/speed-insights": "^1.1.0",
     "bootstrap": "^5.3.3",
     "cra-template": "1.2.0",
@@ -13,7 +15,7 @@
     "react-dom": "^19.0.0",
     "react-fontawesome": "^1.7.1",
     "react-icons": "^5.4.0",
-    "react-router-dom": "^7.0.2",
+    "react-router-dom": "^7.1.1",
     "react-scripts": "^5.0.1",
     "web-vitals": "^4.2.4",
     "webpack": "^5.97.1"

src/App.js

@@ -1,43 +1,65 @@
 // src/App.js
 import './index.css';
 import React from 'react';
-import Header from './components/Header'; // Ensure these paths are correct
+import { Route, Routes } from 'react-router-dom'; // Import Router components
+import Header from './components/Header';
 import MainSection1 from './components/MainSection1';
 import MainSection2 from './components/MainSection2';
 import MainSection3 from './components/MainSection3';
 import MainSection4 from './components/MainSection4';
 import MainSection5 from './components/MainSection5';
 import BestPlacesSection from './components/BestPlacesSection';
-import  BottomNavbar  from './components/BottomNavbar';
-import  MobileNavbar  from './components/MobileNavbar';
-import  ContactUs  from './components/ContactUs';
-import  Login  from './components/Login';
-import Instamart  from './components/Instamart';
-// import Index from './components/Index';
-import {Footer } from './components/Footer';
-
-
-import 'bootstrap/dist/css/bootstrap.min.css'; // Import Bootstrap once in your entry point
+import BottomNavbar from './components/BottomNavbar';
+import MobileNavbar from './components/MobileNavbar';
+import ContactUs from './components/ContactUs';
+import Login from './components/Login';
+import Instamart from './components/Instamart';
+import SignUp from './components/SignUp';
+import { Footer } from './components/Footer';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 function App() {
   return (
-    <div>
-
+    <>
+      {/* Header visible on all pages */}
       <Header />
-      <MainSection1 />
-      <MainSection2 />
-      <MainSection3 />
-      <MainSection4 />
-      <Instamart/>
-      <Login/>
-      <BottomNavbar/>
-      <BestPlacesSection />
-      <ContactUs/>
-      <MobileNavbar/>
-      <MainSection5 />
-      {/* <Index/> */}
-      <Footer/>
-    </div>
+
+      {/* Routes to different pages */}
+      <Routes>
+        {/* Homepage route, renders all sections */}
+        <Route path="/" element={
+          <>
+            <MainSection1 />
+            <MainSection2 />
+            <MainSection3 />
+            <MainSection4 />
+            <MainSection5 />
+          </>
+        } />
+
+        {/* Other pages */}
+        <Route path="/login" element={<Login />} />
+        <Route path="/instamart" element={<Instamart />} />
+        <Route path="/contact" element={<ContactUs />} />
+        <Route path="/best-places" element={<BestPlacesSection />} />
+
+        {/* SignUp page will replace other content when navigated */}
+        <Route path="/SignUp" element={<SignUp />} />
+      </Routes>
+
+      {/* Bottom Navbar, Mobile Navbar, and Footer always visible except on /SignUp */}
+      <Routes>
+        <Route path="/SignUp" element={null} />  {/* Prevent navbar/footer on SignUp page */}
+
+        <Route path="/" element={
+          <>
+            <BottomNavbar />
+            <MobileNavbar />
+            <Footer />
+          </>
+        } />
+      </Routes>
+    </>
   );
 }
 

src/components/BestGrocery.js

@@ -0,0 +1,49 @@
+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 handleShow_more = () => {
+    setVisibleCount((prevCount) => prevCount + 4);
+  };
+
+  return (
+    <div>
+      <h2>Cities with groceries delivery</h2>
+      <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;

src/components/Header.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import { ArrowUpRight } from 'lucide-react';
+import { Link } from 'react-router-dom';
 import './Header.css'; // Make sure to create a corresponding CSS file
 
-function Header() {
+const Header = () => {
   return (
     <header>
       <div className="nav-bar clearfix">
@@ -21,7 +22,9 @@ function Header() {
               </a>
             </div>
             <div className="sign-in">
+            <Link to="/signup">
               <a href="/signup">Sign in</a>
+              </Link>
             </div>
           </div>
         </div>

src/components/Index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import "./Index.css"; // Add your navbar-specific CSS
-
+import { Link } from 'react-router-dom';
 const Navbar = () => {
   return (
     <header className="navbar">

src/components/Instamart.js

@@ -1,8 +1,9 @@
 import React from "react";
 import "./Instamart.css"; // Add your CSS file
 import "@fortawesome/fontawesome-free/css/all.min.css";
+import { Link } from 'react-router-dom';
 
-const categories = [
+const categories = () => [
   { img: "../../images/image/frui2.avif", title: "Fresh Fruit" },
   { img: "../../images/image/veg.avif", title: "Fresh Vegetables" },
   { img: "../../images/image/fruit4.avif", title: "Atta, Rice, and Dals" },

src/components/Login.js

@@ -1,6 +1,7 @@
 // src/components/login.js
 import React, { useState } from 'react';
 import './Login.css'; 
+import { Link } from 'react-router-dom';
 
 const Login = () => {
     const [username, setUsername] = useState('');

src/components/MainSection1.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import './MainSection1.css';
+import { Link } from 'react-router-dom';
 
-function MainSection1() {
+const MainSection1= () => {
   return (
     <section className="section-1">
       <div className="nav-down">

src/components/MainSection2.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import './MainSection2.css'; // Make sure to create a corresponding CSS file
+import { Link } from 'react-router-dom';
 
-function MainSection2() {
+const MainSection2 = () => {
   return (
     <section className="section-2 clearfix ">
       <div className="menu-boxes ">

src/components/MainSection3.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import './MainSection3.css';
+import { Link } from 'react-router-dom';
 
-function MainSection3() {
+const MainSection3= () => {
   return (
     <section className="section-3">
       <div className="container">

src/components/MainSection4.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import './MainSection4.css';
+import { Link } from 'react-router-dom';
 
 const items = [
   { id: 1, src: '/images/frui2.avif', alt: 'Basket of fresh apples' },
@@ -8,7 +9,7 @@ const items = [
   { id: 4, src: '/images/frui9.avif', alt: 'Fresh berries' },
 ];
 
-function MainSection4() {
+const MainSection4 = () => {
   return (
     <section className="section-4">
       <div className="container">

src/components/MainSection5.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import './MainSection5.css'; // Make sure to create a corresponding CSS file
+// import { Link } from 'react-router-dom';
 
-function MainSection5() {
+const MainSection5 = () => {
   return (
     <section className="section-5">
       <img src="/images/App_download_banner.avif" alt="Download Banner" />

src/components/MobileNavbar.js

@@ -1,13 +1,16 @@
 import React from "react";
 import "./MobileNavbar.css";
+import { Link } from "react-router-dom";
 
 
 const MobileNavbar = () => {
   return (
     <nav className="bottom-navbar">
       <div className="nav-item">
         <i className="fas fa-home"></i>
+        <Link to ="./Header./MainSection1./MainSection3./MainSection4./MainSection5">
         <span>Home</span>
+        </Link>
       </div>
       <div className="nav-item">
         <i className="fas fa-th-large"></i>
@@ -18,8 +21,10 @@ const MobileNavbar = () => {
         <span>Cart</span>
       </div>
       <div className="nav-item">
-        <i className="fas fa-user"></i>
+      <i className="fas fa-user"></i>
+      <Link to ="./Login">
         <span>Account</span>
+        </Link>
       </div>
     </nav>
   );