diff --git a/src/App.js b/src/App.js index 17c1936..6748386 100644 --- 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 ( -
-
+
+ {/* Header */} +
- - - - - - - - - - - - - - } - /> + {/* Sidebar Modal */} + - {/* Other pages */} - } /> - } /> - } /> - } /> - } /> - {/* } /> */} + {/* Main Sections */} + + + + + + + + {/* Best Sections */} + + - {/* Prevent navbar/footer on SignUp page */} - - - - } - /> + {/* Routes */} + + } /> + } /> + } /> + } /> + } /> - {/* Sidebar Modal only visible when sidebar is open */} -
- + {/* Footer */} +
+ + {/* Bottom Navbar */} +
); } diff --git a/src/app.js b/src/app.js index 97dd9cd..6748386 100644 --- 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 ( -
-
+
+ {/* Header */} +
- - - - - - - - - - - - - - } - /> + {/* Sidebar Modal */} + - {/* Other pages */} - } /> - } /> - } /> - } /> - } /> - {/* } /> */} + {/* Main Sections */} + + + + + + + + {/* Best Sections */} + + - {/* Prevent navbar/footer on SignUp page */} - - - - } - /> + {/* Routes */} + + } /> + } /> + } /> + } /> + } /> - {/* Sidebar Modal only visible when sidebar is open */} -
- -
- {/* Your other components like Navbar, Main Content */} - {/* Footer */} - +
+ + {/* Bottom Navbar */} +
); } -import default App; +export default App; diff --git a/src/components/Header.css b/src/components/Header.css index 086bbf6..873ab48 100644 --- 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 index aeea2e0..ba74378 100644 --- 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 index 9b3c875..69bf8fe 100644 --- 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 index 0c60721..aa0bfbe 100644 --- a/src/components/MainSection1.js +++ b/src/components/MainSection1.js @@ -13,7 +13,7 @@ const MainSection1= () => {
- +
diff --git a/src/components/MainSection2.css b/src/components/MainSection2.css index 9500333..80e8a92 100644 --- 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 index a7b0f57..cd719dc 100644 --- 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; diff --git a/src/components/footer.js b/src/components/footer.js index e86c974..65a0987 100644 --- a/src/components/footer.js +++ b/src/components/footer.js @@ -5,90 +5,90 @@ import { FaLinkedinIn, FaInstagram, FaFacebook, FaPinterest, FaTwitter } from 'r export const Footer = () => { const currentYear = new Date().getFullYear(); return ( -