chnges

Sanskriti65 · Jan 21, 2025 · 273e490 · 273e490
1 parent 2490f5b
commit 273e490
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 145 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Routes, Route } from 'react-router-dom';  
+import { Routes, Route } from 'react-router-dom';
 
 import './index.css';
 import Header from './components/Header';
@@ -14,13 +14,16 @@ 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 Signup from './components/signup';
+import signup from './components/signup';
 import ContactForm from './components/ContactForm';
 import SidePanelModal from './components/SidePanelModal';
+import BlogSection from './components/BlogSection';
+import Collection from './components/Collection';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
+import FooterSection from './components/FooterSection';
 
 function App() {
   const [isSidebarOpen, setSidebarOpen] = useState(false);
@@ -30,50 +33,39 @@ function App() {
   };
 
   return (
-    <div>
-          <Header toggleSidebar={toggleSidebar} />
+    <div className="App">
+      {/* Header */}
+      <Header />
 
-      <Routes>
-        <Route
-          path="/"
-          element={
-            <>
-
-              <MainSection1 />
-              <MainSection2 />
-              <MainSection3 />
-              <MainSection4 /> 
-              <BestPlacesSection />
-              <BestGrocery />
-              <BottomNavbar />
-              <MobileNavbar />
-              <MainSection5 />
-            </>
-          }
-        />
+      {/* Sidebar Modal */}
+      <SidePanelModal isOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
 
-        {/* Other pages */}
-        <Route path="/login" element={<Login />} />
-        <Route path="/Instamart" element={<Instamart />} />
-        <Route path="/Contact" element={<ContactUs />} />
-        <Route path="/Contact Form" element={<ContactForm />} />
-        <Route path="/Best-places" element={<BestPlacesSection />} />
-        {/* <Route path="/SignUp" element={<Signup />} /> */}
+      {/* Main Sections */}
+      <MainSection1 />
+      <MainSection2 />
+      <MainSection3 />
+      <MainSection4 />
+      <MainSection5 />
+      <Collection />
+
+      {/* Best Sections */}
+      <BestPlacesSection />
+      <BestGrocery />
 
-        {/* Prevent navbar/footer on SignUp page */}
-        <Route
-          path="/Signup"
-          element={
-            <>
-              <Signup />
-            </>
-          }
-        />
+      {/* Routes */}
+      <Routes>
+        <Route path="/contact" element={<ContactUs />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<signup />} />
+        <Route path="/instamart" element={<Instamart />} />
+        <Route path="/BlogSection" element={<BlogSection />} />
       </Routes>
 
-      {/* Sidebar Modal only visible when sidebar is open */}
-      <Footer />
-      <SidePanelModal isOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
+      {/* Footer */}
+      <Footer/>
+
+      {/* Bottom Navbar */}
+      <BottomNavbar />
     </div>
   );
 }

diff --git a/src/app.js b/src/app.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Routes, Route } from 'react-router-dom';  
+import { Routes, Route } from 'react-router-dom';
 
 import './index.css';
 import Header from './components/Header';
@@ -14,15 +14,16 @@ 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 Signup from './components/signup';
+import signup from './components/signup';
 import ContactForm from './components/ContactForm';
 import SidePanelModal from './components/SidePanelModal';
+import BlogSection from './components/BlogSection';
+import Collection from './components/Collection';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
-import React from 'react';
-import FooterSection from './components/FooterSection'; // Adjust the path as needed
+import FooterSection from './components/FooterSection';
 
 function App() {
   const [isSidebarOpen, setSidebarOpen] = useState(false);
@@ -32,57 +33,41 @@ function App() {
   };
 
   return (
-    <div>
-          <Header toggleSidebar={toggleSidebar} />
+    <div className="App">
+      {/* Header */}
+      <Header />
 
-      <Routes>
-        <Route
-          path="/"
-          element={
-            <>
-
-              <MainSection1 />
-              <MainSection2 />
-              <MainSection3 />
-              <MainSection4 /> 
-              <BestPlacesSection />
-              <BestGrocery />
-              <BottomNavbar />
-              <MobileNavbar />
-              <MainSection5 />
-            </>
-          }
-        />
+      {/* Sidebar Modal */}
+      <SidePanelModal isOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
 
-        {/* Other pages */}
-        <Route path="/login" element={<Login />} />
-        <Route path="/Instamart" element={<Instamart />} />
-        <Route path="/Contact" element={<ContactUs />} />
-        <Route path="/Contact Form" element={<ContactForm />} />
-        <Route path="/Best-places" element={<BestPlacesSection />} />
-        {/* <Route path="/SignUp" element={<Signup />} /> */}
+      {/* Main Sections */}
+      <MainSection1 />
+      <MainSection2 />
+      <MainSection3 />
+      <MainSection4 />
+      <MainSection5 />
+      <Collection />
+
+      {/* Best Sections */}
+      <BestPlacesSection />
+      <BestGrocery />
 
-        {/* Prevent navbar/footer on SignUp page */}
-        <Route
-          path="/Signup"
-          element={
-            <>
-              <Signup />
-            </>
-          }
-        />
+      {/* Routes */}
+      <Routes>
+        <Route path="/contact" element={<ContactUs />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<signup />} />
+        <Route path="/instamart" element={<Instamart />} />
+        <Route path="/BlogSection" element={<BlogSection />} />
       </Routes>
 
-      {/* Sidebar Modal only visible when sidebar is open */}
-      <Footer />
-      <SidePanelModal isOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
-    <div className="App">
-      {/* Your other components like Navbar, Main Content */}
-
       {/* Footer */}
-      <FooterSection />
+      <Footer/>
+
+      {/* Bottom Navbar */}
+      <BottomNavbar />
     </div>
   );
 }
 
-import default App;
+export default App;
diff --git a/src/components/Header.css b/src/components/Header.css
@@ -5,7 +5,7 @@
   clear:both;
 }
 header {
-    background-color: #de5ca8;
+    background-color: #ff5200;
     width: 100% !important;
     height:auto !important;
     color: white;
@@ -40,7 +40,7 @@ header {
 
   a {
     text-decoration: none !important;
-    color: white;
+    color: rgb(255, 255, 255);
     /* font-size: 20px; */
   }
   .font a h4{
@@ -67,7 +67,7 @@ header {
     gap: 30px;
     padding: 15px;
   }
-  .get-app {
+  .get-app a{
     display: flex;
     height: 54px;
     padding: 12px 16px;
@@ -83,13 +83,14 @@ header {
     font-weight: 600;
     line-height: 21px;
     outline: 0;
-    background-color:  #311510;
-    color: #fff;
+    background-color:  #ffffff;
+    color: black;
     border: 1px solid #fff;
   }
 
   .sign-in {
-      background: #531616;
+      background: #ffffff;
+      color: black;
       border-radius: 16px;
       display: -webkit-box;
       display: -ms-flexbox;

diff --git a/src/components/Instamart.js b/src/components/Instamart.js
@@ -1,5 +1,5 @@
 import React from "react";
-import "./instamart.css"; // Add your CSS file
+import "./Instamart.css"; // Add your CSS file
 import "@fortawesome/fontawesome-free/css/all.min.css";
 import { Link } from 'react-router-dom';
 

diff --git a/src/components/MainSection1.css b/src/components/MainSection1.css
@@ -11,7 +11,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    background-color: #4c2a1b;
+    background-color: #ff5200;
     color: white;
     position: relative;
     min-height: 100%;
@@ -92,7 +92,7 @@
       margin: 0px auto;
       border-radius: 16px;
       height: 60px;
-      background-color: rgb(31, 26, 26);
+      background-color: rgb(255, 255, 255);
       border: 1.5px solid rgba(2, 6, 12, 0.15);
   }
 

diff --git a/src/components/MainSection1.js b/src/components/MainSection1.js
@@ -13,7 +13,7 @@ const MainSection1= () => {
           </div>
           <div className="search-bar">
             <div className="input-location">
-              <i className="fa fa-search" aria-hidden="true"></i>
+
               <input type="search" placeholder="Enter your delivery location" />
             </div>
             <div className="input-menu">

diff --git a/src/components/MainSection2.css b/src/components/MainSection2.css
@@ -22,7 +22,7 @@
   align-items: center;
   min-width: 1240px;
   position: relative;
-  background-color: #cc4308;
+  background-color:#ff5200;
    flex-grow: 1;
   width: 100%;
   }
@@ -40,7 +40,7 @@
   .specific a img {
     height: 280px;
     width: 280px;
-    background-color: rgb(46, 13, 13);
+    background-color: rgb(255, 255, 255);
     border-radius: 15%;
   }
   .specific-size a img {

diff --git a/src/components/MobileNavbar.css b/src/components/MobileNavbar.css
@@ -29,7 +29,7 @@ body {
     padding: 10px 0;
     background-color: white;
     box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
-    position: fixed;
+    /* position: fixed; */
     bottom: 0;
     width: 100%;
     z-index: 1000;