Merge branch 'main' into swoc10

Signed-off-by: Sweta Pandey <[email protected]>
Sanskriti65 · Jan 9, 2025 · ff674ba · ff674ba
2 parents 6df064a + 23c3ad1
commit ff674ba
Show file tree

Hide file tree

Showing 12 changed files with 591 additions and 286 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "react-bootstrap": "^2.10.7",
     "react-dom": "^19.0.0",
     "react-fontawesome": "^1.7.1",
+    "react-icons": "^5.4.0",
     "react-router-dom": "^7.0.2",
     "react-scripts": "^5.0.1",
     "web-vitals": "^4.2.4",
@@ -43,5 +44,10 @@
   "description": "A simple clone of the Swiggy homepage built using **HTML**, **CSS**, and **React**. This project is designed to mimic the look and feel of the original Swiggy homepage and serves as a practice project to enhance web design and frontend development skills.",
   "main": "script.js",
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17"
+  }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/images/AppStore.avif b/public/images/AppStore.avif
diff --git a/public/images/GooglePlay.avif b/public/images/GooglePlay.avif
diff --git a/public/images/Group.svg b/public/images/Group.svg
diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,5 @@
 // src/App.js
+import './index.css';
 import React from 'react';
 import Header from './components/Header'; // Ensure these paths are correct
 import MainSection1 from './components/MainSection1';
@@ -12,6 +13,7 @@ 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 'bootstrap/dist/css/bootstrap.min.css'; // Import Bootstrap once in your entry point
 
@@ -25,11 +27,9 @@ function App() {
       <MainSection3 />
       <MainSection4 />
       <BestPlacesSection />
+
       <BestGroceries/>
       <MobileNavbar/>
-      <ContactUs/>
-      <Login/>
-      <BottomNavbar/>
     </div>
   );
 }

diff --git a/src/components/footer.css b/src/components/footer.css
diff --git a/src/components/footer.js b/src/components/footer.js
@@ -0,0 +1,97 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { FaLinkedinIn, FaInstagram, FaFacebook, FaPinterest, FaTwitter } from 'react-icons/fa';
+
+export const Footer = () => {
+    const currentYear = new Date().getFullYear();
+    return (
+        <footer className="flex-col items-center w-full py-2 bg-gray-200">
+            <div className="max-w-screen-xl mx-auto px-4 py-8 grid gap-8 md:grid-cols-5 items-start">
+                <div className="space-y-4">
+                    <div className="flex flex-col items-center">
+                        <img src={`${process.env.PUBLIC_URL}/images/Group.svg`} alt="Group" />
+                        <span className="text-sm mt-2">&copy; {currentYear} Swiggy Limited</span>
+                    </div>
+                </div>
+                <div className="space-y-4 md:ml text-left">
+                    <h3 className="font-semibold text-lg">Company</h3>
+                    <ul className="space-y-2 text-m">
+                        <li><Link to="sss" className='text-black'>About Us</Link></li>
+                        <li><Link to="sss" className='text-black'>Swiggy Corporate</Link></li>
+                        <li><Link to="sss" className='text-black'>Careers</Link></li>
+                        <li><Link to="sss" className='text-black'>Team</Link></li>
+                        <li><Link to="sss" className='text-black'>Swiggy One</Link></li>
+                        <li><Link to="sss" className='text-black'>Swiggy Instamart</Link></li>
+                        <li><Link to="sss" className='text-black'>Swiggy Dineout</Link></li>
+                        <li><Link to="sss" className='text-black'>Swiggy Genie</Link></li>
+                        <li><Link to="sss" className='text-black'>Minis</Link></li>
+                    </ul>
+                </div>
+
+                <div className="space-y-4 text-left">
+                    <h3 className="font-semibold text-lg">Contact us</h3>
+                    <ul className="space-y-2 text-m">
+                        <li><Link to="sss" className='text-black'>Help & Support</Link></li>
+                        <li><Link to="sss" className='text-black'>Partner with us</Link></li>
+                        <li><Link to="sss" className='text-black'>Ride with us</Link></li>
+                    </ul>
+
+                    <h3 className="font-semibold text-lg mt-5 text-left">Legal</h3>
+                    <ul className="space-y-2 text-m">
+                        <li><Link to="sss" className='text-black'>Terms & Conditions</Link></li>
+                        <li><Link to="sss" className='text-black'>Cookie Policy</Link></li>
+                        <li><Link to="sss" className='text-black'>Privacy Policy</Link></li>
+                    </ul>
+                </div>
+
+                <div className="space-y-4 md:ml-1 text-left">
+                    <h3 className="font-semibold text-lg">Available in:</h3>
+                    <ul className="space-y-2 text-m">
+                        <li><Link to="sss" className='text-black'>Bangalore</Link></li>
+                        <li><Link to="sss" className='text-black'>Gurgaon</Link></li>
+                        <li><Link to="sss" className='text-black'>Hyderabad</Link></li>
+                        <li><Link to="sss" className='text-black'>Delhi</Link></li>
+                        <li><Link to="sss" className='text-black'>Mumbai</Link></li>
+                        <li><Link to="sss" className='text-black'>Pune</Link></li>
+                    </ul>
+                </div>
+
+                <div className="space-y-4 md:ml-1 text-left">
+                    <h3 className="font-semibold text-lg">Life at Swiggy</h3>
+                    <ul className="space-y-2 text-m">
+                        <li><Link to="sss" className='text-black'>Explore with Swiggy</Link></li>
+                        <li><Link to="sss" className='text-black'>Swiggy News</Link></li>
+                        <li><Link to="sss" className='text-black'>Snackables</Link></li>
+                    </ul>
+
+                    <h3 className="font-semibold text-lg mt-5 text-left">Social Links</h3>
+                    <div className="flex space-x-4">
+                        <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" className="text-gray-500 hover:text-blue-600 transition duration-300 ease-in-out">
+                            <FaLinkedinIn size={24} />
+
+                        </a>
+                        <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" className="text-gray-500 hover:text-pink-500 transition duration-300 ease-in-out">
+                            <FaInstagram size={24} />
+                        </a>
+                        <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" className="text-gray-500 hover:text-blue-600 transition duration-300 ease-in-out">
+                            <FaFacebook size={24} />
+                        </a>
+                        <a href="https://www.pinterest.com/" target="_blank" rel="noopener noreferrer" className="text-gray-500 hover:text-red-700 transition duration-300 ease-in-out">
+                            <FaPinterest size={24} />
+                        </a>
+                        <a href="https://twitter.com" target="_blank" rel="noopener noreferrer" className="text-gray-500 hover:text-blue-400 transition duration-300 ease-in-out">
+                            <FaTwitter size={24} />
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <div className="border-t border-gray-600 my-4"></div>
+            <div className="max-w-screen-xl mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 text-m">
+                <span>For better experience, download the Swiggy app now</span>
+                <img src={`${process.env.PUBLIC_URL}/images/AppStore.avif`} alt="App Store icon" />
+                <img src={`${process.env.PUBLIC_URL}/images/GooglePlay.avif`} alt="Google Play icon" />
+            </div>
+        </footer>
+    );
+}
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body{
   top: 0;
   margin: 0;
@@ -21,4 +25,4 @@ body{
 @font-face {
   font-family: 'Gilroy-Light';
   src: local('Gilroy-Light'), url(./fonts/Gilroy-Light.ttf) format('truetype');
-}
+}
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,5 @@
 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';
@@ -10,9 +11,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); // Create roo
 
 root.render(
   <React.StrictMode>
-    <div>
+    <BrowserRouter>
       <SpeedInsights /> {/* Add SpeedInsights at the root level */}
       <App />
-    </div>
+    </BrowserRouter>
   </React.StrictMode>
 );
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}