Add contact page

src/App.jsx

@@ -14,6 +14,7 @@ import Shop from "./Pages/Shop";
 import ShopCategory from "./Pages/ShopCategory";
 import Saved from "./Pages/WishList";
 import About from "./Pages/About";
+import Contact from "./Pages/Contact";
 import CheckNow from "./Components/CheckNow";
 import "./index.css";
 import Signup from "./Pages/Signup";
@@ -23,6 +24,7 @@ const App = () => {
   return (
     <Router>
       <Navbar />
+
       <div className="bg-white text-black dark:bg-black dark:text-white min-h-screen">
         <Routes>
           <Route path="/login" element={<LoginWithFooter />} />
@@ -35,12 +37,14 @@ const App = () => {
           <Route path="/cart" element={<CartWithFooter />} />
           <Route path="/wishlist" element={<WishlistWithFooter />} />
           <Route path="/about" element={<About />} />
+            <Route path="/contact" element={<Contact/>} />
           <Route path="/checknow" element={<CheckNowWithFooter />} />
           <Route path="*" element={<NotFound />} />
           <Route path="/user/paymentsuccess" element={<PaymentSuccess />} />
           <Route path="/user/paymentfail" element={<PaymentFail />} />
         </Routes>
       </div>
+
     </Router>
   );
 };

src/Components/Footer.jsx

@@ -50,7 +50,7 @@ const Footer = () => {
           <a href="/about" className="block p-2">About Us</a>
         </button>
         <button className="hover:bg-orange-400 hover:text-white focus:outline-none">
-          <a href="#" className="block p-2">Contact</a>
+          <a href="/contact" className="block p-2">Contact</a>
         </button>
       </div>
       <hr className="border-black" />

src/Components/Navbar.jsx

@@ -17,6 +17,7 @@ const Navbar = () => {
           <Link to="/">Shopy</Link>
         </h2>
       </div>
+
       <div className="flex items-center space-x-4 text-black dark:text-white">
         <Link to="/" className="hover:text-orange-400 dark:hover:text-orange-300">
           Home
@@ -40,7 +41,7 @@ const Navbar = () => {
         <Link to="/about" className="hover:text-orange-400 dark:hover:text-orange-300">
           About Us
         </Link>
-        <Link to="#" className="hover:text-orange-400 dark:hover:text-orange-300">
+        <Link to="/contact" className="hover:text-orange-400 dark:hover:text-orange-300">
           Contact
         </Link>
         <style jsx>{`
@@ -49,6 +50,7 @@ const Navbar = () => {
           }
         `}</style>
       </div>
+
       <div className="flex items-center mx-5">
         <button className="font-Poppins cursor-pointer text-lg m-5 border text-black dark:text-white bg-white dark:bg-gray-800 border-gray-400 dark:border-gray-600 rounded-3xl px-4 py-1 active:bg-slate-200 dark:active:bg-slate-700">
           <Link to="/login" className="hover:text-orange-400 dark:hover:text-orange-300">

src/Pages/Contact.jsx

@@ -0,0 +1,77 @@
+import React from "react";
+import Cart from "../assets/cart_icon.png";
+import phone from "../assets/phone_icon.png"
+import chat from "../assets/chat_icon.png"
+import mail from "../assets/email_icon.png"
+
+const Contact = () => {
+    return (
+        <>
+<div style={{ textAlign: 'center' }}>
+    <h1 className="text-3xl mt-20 sm:text-4xl md:text-5xl mb-14 font-Poppins">
+        Contact Us
+    </h1>
+</div>
+<div className="flex flex-col xl:flex-row   justify-center gap-16 px-20">
+
+    <div className="block p-6 w-sm max-w-sm bg-gradient-to-b from-purple-200 to-blue-300 rounded-lg border border-gray-200 shadow-md p-20">
+        <img src={phone} alt="cart" className="w-10 h-10 cursor-pointer" />
+
+        <h1 className="mt-5 text-2xl font-bold text-gray-900 font-Poppins">
+            By Phone
+        </h1>
+        <h6 className="mt-3 font-Poppins font-semibold">
+            All India Toll-free:
+        </h6>
+        <p className="font-normal font-Poppins">
+            01-XXXXXXX
+        </p>
+        <h6 className="mt-3 font-Poppins font-semibold">
+            International:
+        </h6>
+        <p className="font-normal font-Poppins">
+            01-XXXXXXX
+        </p>
+    </div>
+
+    <div className="block p-6 max-w-sm bg-gradient-to-b from-purple-200 to-blue-300 rounded-lg border border-gray-200 shadow-md p-20">
+        <img src={mail} alt="cart" className="w-10 h-10 cursor-pointer" />
+
+        <h1 className="mt-5 text-2xl font-bold text-gray-900 font-Poppins">
+            By mail
+        </h1>
+        <h6 className="mt-3 font-Poppins">
+            [email protected]
+        </h6>
+
+        <h6 className="mt-3 font-Poppins font-semibold ">
+            Customer care:
+        </h6>
+        <p className="font-normal font-Poppins">
+            [email protected]
+        </p>
+    </div>
+
+    <div className="block p-6 max-w-sm bg-gradient-to-b from-purple-200 to-blue-300 rounded-lg border border-gray-200 shadow-md p-20">
+        <img src={chat} alt="cart" className="w-10 h-10 cursor-pointer" />
+
+        <h1 className="mt-5 text-2xl font-bold text-gray-900 font-Poppins">
+            Live chat
+        </h1>
+        <p className="font-normal font-Poppins mt-3  ">
+            chat with the member of our team.
+        </p>
+        <button className=" font-Poppins mt-3 cursor-pointer  border text-white bg-black border-gray-400 rounded-3xl px-4 py-1 active:bg-slate-200 absolute ">
+          <a href="#">Start chat</a>
+        </button>
+
+    </div>
+
+</div>
+
+        </>
+    );
+};
+
+export default Contact;
+