added Responsiveness to the app

cm313 · Nov 6, 2024 · 496a97c · 496a97c
1 parent 542d074
commit 496a97c
Show file tree

Hide file tree

Showing 19 changed files with 134 additions and 102 deletions.
diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
@@ -1,26 +1,28 @@
 Tick.54a57f74.png,1727455042827,8809e48ba1b73dbde6642abf51faed1ccb8b8860bf26223d8554b6284001aa40
-searchIcon.d434f3c3.png,1727545171528,6f6378582612d80afddbf53053a588f4c9c671d1fc2b721d58ec2370df948301
+searchIcon.d434f3c3.png,1730265016681,6f6378582612d80afddbf53053a588f4c9c671d1fc2b721d58ec2370df948301
 searchIcon.241af4a7.png,1730222366395,ffcefe46aefa715279aba4672686939f4d9d62b5836167101442bb86a4a2c1fe
-LinkedIn.5ff6ab47.png,1727545174234,8db7d61615df53b56df7f7ab9d702a8c3f4c2e61bea404d50d64b9d1a502bccb
+LinkedIn.5ff6ab47.png,1730265017537,8db7d61615df53b56df7f7ab9d702a8c3f4c2e61bea404d50d64b9d1a502bccb
 LinkedIn.10d13988.png,1730222366376,74e84dd1fcaa4d398e73ddb81d8cc0132a19f43e22fb586964431df764246d9a
 InstaMart.d3ce4235.js.map,1727504643522,60de2f250c71ecf6ba57b14d4c34d071a35b26a97a8a32aa34f4cf81cad4ac8b
 InstaMart.d3ce4235.js,1727504643471,8e72a1971f0a2bd4bb28c0ee657143c2ef6714b5a42b1beb79b0a9e6a0312840
-InstaMart.b21f2845.js.map,1727545174863,ab2d8280d2a6a412a5b6610927363daf8f8d0f198b47884cad3689d183536bb0
-InstaMart.b21f2845.js,1727545174808,5baf80b32d49816b5a5fc6586af8e5db8aecc7b105e6fa7db351ded85e190b72
+InstaMart.b21f2845.js.map,1730265018250,ab2d8280d2a6a412a5b6610927363daf8f8d0f198b47884cad3689d183536bb0
+InstaMart.b21f2845.js,1730265018193,5baf80b32d49816b5a5fc6586af8e5db8aecc7b105e6fa7db351ded85e190b72
 InstaMart.7881b254.js.map,1730222366498,3e54d1646aa91402064136c68ba41f5213c7b0e272fbcc8f4308d9e66258f582
 InstaMart.7881b254.js,1730222366489,62c6a25e423f268667c5d64e5178f71aba71672474f09b5c4e06e654ecb41b22
-InstaMart.53ae40f1.js.map,1727545174890,ad4f48e737e7394eb85d6e7fc7e136fc172580b7398aafa071fe24270e89405d
-InstaMart.53ae40f1.js,1727545174809,719a85ae88021ffaadb56bf7fbb260e4f7a31fa8caf16e35c93a455361b29f38
+InstaMart.53ae40f1.js.map,1730265018314,ad4f48e737e7394eb85d6e7fc7e136fc172580b7398aafa071fe24270e89405d
+InstaMart.53ae40f1.js,1730265018194,719a85ae88021ffaadb56bf7fbb260e4f7a31fa8caf16e35c93a455361b29f38
 InstaMart.24a1f748.js.map,1727504643522,aa57d7a41c8b6802d897dd466afab590e0fc041ce27376fbe3240c1d0b01d0f8
 InstaMart.24a1f748.js,1727504643471,366a02be5a19ba9e608298a09457e9ef2e01eb8aeec57b154873048fdc42d8e7
 index.html,1730223476073,8fb99821182b113e53e50787a88f204dace9b4679012ec29663e70cb932dcee0
 contactUs.b568fa8e.jpeg,1727422770695,5b4fce2a1c32aef0d51fa31f11531b570e443be86bab4f8deece85f1ce3243a8
-cartIcon.fac91414.png,1727545171592,5153c1c96451c70dd5be057414204692b7c4d5223d0b17d941607b5ad1ceb8a6
+cartIcon.fac91414.png,1730265016786,5153c1c96451c70dd5be057414204692b7c4d5223d0b17d941607b5ad1ceb8a6
 cartIcon.e9f70437.png,1730222366461,0093334b86abbbb824d77d3c716bfe8d20693a1aad62b9e3e250172b3e3c8564
-appLogo.bb34b833.png,1727545174234,a02bda94bf8239118f1bbebbb76e015fb7df1661f144c8597b105509f0a25e92
+appLogo.bb34b833.png,1730265017537,a02bda94bf8239118f1bbebbb76e015fb7df1661f144c8597b105509f0a25e92
 appLogo.93d7199b.png,1730222366384,321e6e34983ab875758dd00d9dbad6407ec5a15c61d63f07183510344e6cbf87
 App.runtime.dbf1128a.js.map,1727504643522,509fcb203499153f6d98dee51d944545df358fa68c1e32c92199fcfd079993be
 App.runtime.dbf1128a.js,1727504643471,6065c020648bf254343ce79860aaad216b04388b61046ce5ca0c806c0d3bf34b
+App.runtime.d80b7e26.js.map,1730265018315,f9ef674087aac69287f7fb3afcdfa4ec67c9221b479ea5f6c8a4d0dd9c0d0c37
+App.runtime.d80b7e26.js,1730265018193,42a8070e1da540b67b0bfa8be49e9b0f63b76fc6cf53f4c55e5519b97d750bf5
 App.runtime.d62325b9.js.map,1727515426333,2c872bc01e947824685d3e4e6bda62ddc6053a87451cbbc3820de6040e5254e9
 App.runtime.d62325b9.js,1727515426262,9a197261812348eac995d5116e65799e9259769dfc67f0a0e4e276f045b619e5
 App.runtime.bb4dff6c.js.map,1727545174890,fa808cfcd32565f0422c69c2f28ab10119a3709236a92cd0b36e2f984ad6014e
@@ -29,9 +31,11 @@ App.runtime.b38d462d.js.map,1727504643524,76c5fa902b0dfe008dd28f108012c8ab71db0b
 App.runtime.b38d462d.js,1727504643472,48ed87c3f4e7c2da7c8355ffe8e67857bfc786220ffcac4264181329f4f080f4
 App.runtime.7a6ef299.js.map,1727545174889,28399d8d3f66ca519b65e5a2afb857d6523be3a257e123a37c434ecf5f5b3b3d
 App.runtime.7a6ef299.js,1727545174808,6335a05e203103303536db154701108dcc32abafb2083688b73d9e0353e194ac
+App.runtime.61a4a11a.js.map,1730265018315,c250d51e34d0da58841429c3be2388e82e12e4d020335979161b53b80d727018
+App.runtime.61a4a11a.js,1730265018194,16e238060d90510fa909708d5b94f3a069f7876e92ebedf04df5c8d00a974e69
 App.runtime.5f5c03c5.js.map,1727515426333,d3022317591ab73e2813cb9816a15387496af2d6f811ec0d5812fc0539aa03be
 App.runtime.5f5c03c5.js,1727515426262,e0a9e85e2c92c4eeaaea7e132c7f59da82ef3265d9ccdebbc80aea68274d6f5f
-App.html,1730222366575,20bd0c9c93dbd1455c0dafb4e001f0beb315c835c31ab47edc811870072b9ca9
+App.html,1730265018193,3546a6f74c4cce7100d155d959e2bdadf59ea49b156654e2ee2084474a59cf59
 App.f8ef9889.js.map,1727545174898,3ee5d1c6a507313ac93bcf838cfc80ab6e0815f0dccfa0660b3b573c9616a0ab
 App.f8ef9889.js,1727545174811,4eb1eefb44c6c409ef26b7c1aa824dd13619ff4d07449c5e8ef13253374d5040
 App.e6b5c606.css.map,1730222366645,05d067079858325410c2cc58e156d09102da097fc3d0f995f04689ee614727e3
@@ -40,8 +44,10 @@ App.dcc7e1af.js.map,1727504643529,4bfbbaba828c6c93dcc3bf0e7843730fc9b86cce72d307
 App.dcc7e1af.js,1727504643471,1131a62b609556a02b099a9d36a85d80c278667ef51bce28dcd0db7a88f97c15
 App.cc1d975a.css.map,1727504643524,233c7aecbae53967d673079ce259d7629cba47c837ee7f656fce5124a90cab18
 App.cc1d975a.css,1727504643471,c3f16bfe381ee81a9e4abd85d5fdc71ec33bd4c9a445617e16dad299406adad2
-App.bceffc14.css.map,1727545174894,1ec46e6aaa6dc50e69fd19bf11b57d5b0ff5cbd08e7d59dbffea443f6c429889
-App.bceffc14.css,1727545174808,a606d0a86d98daeb6ce3deeef837c7a3d4ce3340cf5afcae0826a430c5afe527
+App.bceffc14.css.map,1730265018315,1ec46e6aaa6dc50e69fd19bf11b57d5b0ff5cbd08e7d59dbffea443f6c429889
+App.bceffc14.css,1730265018194,a606d0a86d98daeb6ce3deeef837c7a3d4ce3340cf5afcae0826a430c5afe527
+App.91bc31a6.js.map,1730265018318,9104c260ed69d00d1f4b4f569a918483f534b679460422132374ed1a922e32ac
+App.91bc31a6.js,1730265018194,dd2bda4d987433c2c251d47c2126b5a973817054d5542daa927d15b96e4140ae
 App.87aeed6c.js.map,1727515426337,83d344ae71b607693a5873c9dc9485a7f895fa9ab9a86beea5209a6a32e1d626
 App.87aeed6c.js,1727515426264,556b26cd278bf1f06be4d43e83e1ace40ee37d8147466f4b87cf65a56faa998b
 App.7271efb6.js.map,1730222366650,bb12f88a7187e9887c8c486755c01e7afbfa2522568a3f58a697a9266ebc291d
@@ -50,14 +56,16 @@ App.6d419814.css.map,1730222366672,42a4833f0f25c19cc0dc010c0c85f5567ffa23a8f38cd
 App.6d419814.css,1730222366664,7862c28bb87fdc0a50dc152c2da16d998f9a1058b3274e69af42b7bc303b36e2
 App.66723041.js.map,1727504643528,0ee483327301304e8abe3c9917c2a616bb028336e21499dfc30fb767c3f5347b
 App.66723041.js,1727504643472,de1f2b7c7ff1e089ae2ac589d7c4be1d8b9eb1e50c1899ee2b7403ae7d1f3f35
-App.34a76b26.css.map,1727545174838,72c9a2cd59ab3e8739b7534d2b740999e771bf2f7d09280a734a933568cd70c2
-App.34a76b26.css,1727545174808,64ba920b961a7eadc15bc8c914feafbf30e2c4593487ff5d52d85566746f8fda
+App.34a76b26.css.map,1730265018250,72c9a2cd59ab3e8739b7534d2b740999e771bf2f7d09280a734a933568cd70c2
+App.34a76b26.css,1730265018193,64ba920b961a7eadc15bc8c914feafbf30e2c4593487ff5d52d85566746f8fda
 App.346d584b.js.map,1727515426336,8d309e9dca69683769574516a8853d105b10c8bc053e8916117831cbe9257f66
 App.346d584b.js,1727515426263,b39a8b0b253d83dbbbab1d65d04d2f2d06322bdeab040ce8967a334dcbdbb626
-App.2edb77ea.css.map,1727545174838,e766510dcd1fcc29e6f4f0dbffbc2712828088dc5e305684b4e49a691f927d84
-App.2edb77ea.css,1727545174808,d04c082db185135cb561f6c14967c0e8bf56e62a5e68ddf9dfcc95a049ec7666
+App.2edb77ea.css.map,1730265018250,e766510dcd1fcc29e6f4f0dbffbc2712828088dc5e305684b4e49a691f927d84
+App.2edb77ea.css,1730265018193,d04c082db185135cb561f6c14967c0e8bf56e62a5e68ddf9dfcc95a049ec7666
 App.20a4dc0b.css.map,1730222366472,3a0bb1f4d403dee752ee47fb22827364022a87a3ade927034943a4d0a7e92d92
 App.20a4dc0b.css,1730222366461,6dfb2d56b4ffdc4b8e8d3eff2c635fec740c003a7682d49c4fa052b3a46b1478
+App.1773160b.js.map,1730265018318,c6f097e2dcf5f5a4c245ef8bd7bb663ec13cc85e86dcbfea5a53b10ed1644f50
+App.1773160b.js,1730265018194,db3f89fe76406d44031b9d2afed9f614a407060dd73f7f59ae6d2bba1eec7428
 App.021b0e1b.js.map,1727545174898,806f82af989d65864c5e950b19c677bcec23b8fb7dcb8285bef1bd27f71ff6a1
 App.021b0e1b.js,1727785752100,f18756f0f3613c4396db5342f257176c85acb854fec5c09619f569be290931c1
 404.html,1730223475596,762bf484ba67404bd1a3b181546ea28d60dfddf18e9dd4795d8d25bcf3c1a890
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
   },
   "homepage": "https://github.com/cm313/React-Folder#readme",
   "dependencies": {
+    "@react-icons/all-files": "^4.1.0",
     "@reduxjs/toolkit": "^2.2.6",
     "@tailwindcss/forms": "^0.5.7",
     "firebase": "^11.0.1",

diff --git a/src/components/About.js b/src/components/About.js
@@ -5,7 +5,7 @@ import React from "react";
 
 class About extends React.Component{
 
-  constructor(props){
+/*  constructor(props){
       super(props);
       console.log("parent constructor");
   }
@@ -17,7 +17,6 @@ class About extends React.Component{
   render(){
     console.log("parent render");
   return (
-  /* 
     <div>
       <h1 className="font-bold">This is a Food Delivery App</h1>
       <h2 className="font-bold">We are here to save your time and make your life easy</h2>
@@ -30,15 +29,15 @@ class About extends React.Component{
       <UserClass name="Paradise Biryani" cuisines="North Indian, South Indian, French"/>
     </div> 
      */
-    <div className="h-[600px] bg-contain bg-[url(https://coreldrawdesign.com/resources/previews/preview-delivery-boy-illustration-free-vector-1657973800.jpg)]">
-      <div className="font-serif text-2xl text-center py-10 px-2 shadow-lg rounded-md text-black font-extrabold ">
+
+    render(){
+    return(
+    <div className="h-screen bg-contain bg-[url(https://coreldrawdesign.com/resources/previews/preview-delivery-boy-illustration-free-vector-1657973800.jpg)]">
+      <div className="font-serif md:text-2xl text-sm text-center md:py-20 py-14 px-2 shadow-lg rounded-md text-black font-extrabold ">
        At FOO, We bring delicious, fresh food to your doorstep.
       </div>
     </div>
-
-
-  );
-}
-}
+    )}
+  }
 
 export default About;
diff --git a/src/components/Body.js b/src/components/Body.js
@@ -91,7 +91,7 @@ const Body = ()=>{
       const response = await fetch("https://www.swiggy.com/dapi/restaurants/list/v5?lat=17.37240&lng=78.43780&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING");
       const jsonBackendData =  await response.json();
       //Optional Chaining
-      const restroData = jsonBackendData?.data?.cards[4]?.card?.card?.gridElements.infoWithStyle.restaurants
+      const restroData = jsonBackendData?.data?.cards[4]?.card?.card?.gridElements?.infoWithStyle?.restaurants
       setListOfRestaurant(restroData);
       setFullListOfRestaurants(restroData);
   }; 
@@ -115,15 +115,15 @@ const Body = ()=>{
 
 // writing above condition using Ternary Operator
   return (
-    listOfRestaurants.length === 0 ? <ShimmerUI/>
+    listOfRestaurants?.length === 0 ? <ShimmerUI/>
   :<div className="body">
-      <div className = "flex  my-8 items-center">
-        <div className="px-5">
-          <input  data-testid="searchInput" className=" ml-10 mr-2 my-2 pr-28 border-2 pl-2 border-gray-300 shadow-2xl rounded-full" type="text" placeholder="Search Restaurants" value={searchText} onChange={(e)=>{
+      <div className = "flex items-center">
+        <div className="md:px-5 px-3 my-20">
+          <input  data-testid="searchInput" className=" md:ml-10 ml-2 mr-2 px-4 md:w-96 border-2 border-gray-300 shadow-2xl rounded-full" type="text" placeholder="Search Restaurants" value={searchText} onChange={(e)=>{
             {/*This "e.target.value" is given to us by the browser */}
              setSearchText(e.target.value);
           }}></input>
-          <button className=" w-5 -ml-12" onClick = {()=>{
+          <button className="w-5 -ml-12" onClick = {()=>{
             const filteredResult = fullListOfRestaurants.filter((restaurants)=>
             restaurants.info.name.toLowerCase().includes(searchText.toLowerCase())
             );
@@ -142,7 +142,7 @@ const Body = ()=>{
           Username:  <input className="rounded-md" value ={userName} onChange={(e)=>{setUname(e.target.value)}}></input>
         </div> */}
       </div>
-  <div className="flex flex-wrap ml-16 mb-96 shadow-2xl w-[1150px] border-x-[1px] border-b-[1px] border-transparent">
+  <div className="flex flex-wrap ml-5 mb-5 md:ml-16 md:mb-96 shadow-2xl w-11/12 border-x-[1px] border-b-[1px] border-transparent">
    {listOfRestaurants.map((restaurant) => (
       <Link key = {restaurant.info.id}  to = { "/restaurant/" + restaurant.info.id}>
         { 

diff --git a/src/components/Cart.js b/src/components/Cart.js
@@ -1,34 +1,46 @@
 import {useSelector} from "react-redux";
 import {useDispatch} from "react-redux";
+import {useState} from "react";
 import {clearCart} from "./../utils/cartSlice";
 import CartItems from "./CartItems";
 import CartTotalPrice from "./CartTotalPrice";
+import orderImage from "../images/OrderImage.jpg"
 
 const Cart =  ()=>{
   // subscribing to the store using useSelector() hook
   const cartItems = useSelector((store)=>store.cart.items);
   const dispatch = useDispatch();
+  const[showPopUp, setShowPopUp] = useState(false)
 
   const handleClearCart = ()=>{
     dispatch(clearCart());
   }
 
+  const handlePopUpMessage = ()=>{
+    setShowPopUp(!showPopUp)
+  }
+
   return (
-    <div className="h-[700px]">
+    showPopUp ?
+     <div className="w-[20%] p-3 mt-48 border rounded-md shadow-xl m-auto left-0 right-0">
+      <img className="w-20 ml-10 " src={orderImage}></img>
+      <div className="font-bold px-5">Order Placed. ThankYou</div>
+    </div>
+   : <div className="h-screen">
       <div className=" text-center font-serif font-bold text-4xl">Cart</div>
       {
-        cartItems.length == 0 && <div className="font-bold text-center font-serif text-lg">Hey! Looks Like your cart is empty.</div>
+        cartItems.length == 0 && <div className="font-bold text-center font-serif pt-32 text-lg">Hey! Looks Like your cart is empty.</div>
       }
-      <div className="flex">
+      <div className="flex mt-10 justify-start">
        <CartItems items={cartItems}/>
        {
-        cartItems.length !=0 && 
+        cartItems.length !=0 &&       
         <div>
-        <CartTotalPrice items={cartItems}/> 
-        <div className="ml-[450px]">
-       <button className="bg-green-600 p-1 font-bold rounded-sm hover:bg-green-400">Place Order</button>
-       <button className="font-bold p-1 m-2 bg-orange-300 text-black rounded-sm hover:bg-orange-200" onClick = {handleClearCart}>Clear Cart</button>
-       </div>
+            <CartTotalPrice items={cartItems}/> 
+            <div className="">
+          <button className="bg-green-600 p-1 font-bold rounded-sm hover:bg-green-400" onClick={handlePopUpMessage} >Place Order</button>
+          <button className="font-bold p-1 m-2 bg-orange-300 text-black rounded-sm hover:bg-orange-200" onClick = {handleClearCart}>Clear Cart</button>
+          </div>
        </div>
         }   
         </div>     

diff --git a/src/components/CartItems.js b/src/components/CartItems.js
@@ -9,9 +9,9 @@ CartItems = (props)=>{
       const{name, imageId, price, description} = item?.card?.info;
       const{rating} = item?.card?.info?.ratings.aggregatedRating;
        return (
-        <div className="w-[500px] ml-10">
-          <div className="flex justify-center mb-4 mt-2 border-[1px] p-2 shadow-md rounded-lg">
-               <img className="h-[100px] rounded-xl object-cover" src = {MENUITEM_IMAGES + imageId}></img>
+        <div className="w-7/12 ml-10">
+          <div className="flex justify-center mt-2 border-[1px] p-2 shadow-md rounded-lg">
+               <img className="w-3/12 rounded-xl object-cover" src = {MENUITEM_IMAGES + imageId}></img>
             <div className="pl-5">
               <div className="font-sans font-bold pb-1 text-sm text-left">{name}</div>
               <div className="flex pb-1 ">

diff --git a/src/components/CartTotalPrice.js b/src/components/CartTotalPrice.js
@@ -1,5 +1,5 @@
 
-CartTotalPrice = (props)=>{
+const CartTotalPrice = (props)=>{
   let totalPrice = 0 ;
 const {items} = props;
 {
@@ -9,7 +9,7 @@ const {items} = props;
   });
 
   return (
-    <div className="border-[1px] w-[500px] rounded-md shadow-md ml-[145px] p-2">
+    <div className="border-[1px] w-[100%] mr-60 rounded-md shadow-md p-2">
       <div className="text-left font-medium">Bill Details</div>
       <div className="flex justify-between text-sm text-slate-600">
         <div>Item Total</div>

diff --git a/src/components/ContactUs.js b/src/components/ContactUs.js
@@ -1,15 +1,15 @@
 
-ContactUs = ()=>{
+const ContactUs = ()=>{
   return (
-    <div className="h-[500px] bg-orange-50 font-serif pt-7">
+    <div className="h-screen bg-orange-50 font-serif pt-16">
    <div>
-      <div className="text-center font-bold text-3xl">Contact</div>
-      <div className="text-center mt-2 text-sm font-extralight text-slate-600">Our Team is always Ready to help you. Mention your queries below.</div>
+      <div className="text-center font-bold text-xl md:text-3xl">Contact</div>
+      <div className="text-center text-sm font-extralight text-slate-600">Our Team is always Ready to help you. Mention your queries below.</div>
    </div>
-   <div className="ml-80 w-[650px] mt-10 border-[1px] border-transparent shadow-lg p-4">
-    <div>Name:<input className="pr-80 mb-11 ml-5  rounded-md text-sm" placeholder="Enter Name"></input> </div>
-    <div>Email:<input className="pr-80 mb-11 ml-5 rounded-md text-sm" placeholder="Enter Email"></input></div>
-    <div>Query:<input className="pr-80 pb-11 ml-5 rounded-md text-sm" placeholder="Message"></input></div>
+   <div className="m-auto left-0 right-0 md:w-1/2 w-11/12 mt-10 border-[1px] border-transparent shadow-lg p-4">
+    <div>Name:<input className="w-3/4  mb-11 ml-5  rounded-md text-sm" placeholder="Enter Name"></input> </div>
+    <div>Email:<input className="w-3/4 mb-11 ml-5 rounded-md text-sm" placeholder="Enter Email"></input></div>
+    <div>Query:<input className="w-3/4 pb-11 ml-5 rounded-md text-sm" placeholder="Message"></input></div>
    </div>
    <div className="flex justify-center mt-5">
    <button className="bg-green-700 py-2 px-4 rounded-md text-slate-50 font-bold text-sm" >submit</button>

diff --git a/src/components/Example.js b/src/components/Example.js
@@ -26,7 +26,7 @@ const Example = ()=>{
         <body class="h-full">
         ```
       */}
-      <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8 font-serif">
+      <div className="flex min-h-screen flex-1 flex-col justify-center px-6 py-12 lg:px-8 font-serif">
         <div className="sm:mx-auto sm:w-full sm:max-w-sm">
 
           <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,7 +1,7 @@
 
 const Footer = ()=>{
   return (
-    <div className="flex justify-evenly bg-gray-500 pb-3 font-md shadow-lg text-zinc-50">
+    <div className="flex mt-96 w-screen justify-evenly bg-gray-500 py-2 text-sm md:text-base font-medium shadow-lg text-zinc-50">
      <div>Terms & Conditions</div>
      <div>Cookie Policy</div>
      <div>Privacy Policy</div>