added_footer_links

src/App.js

@@ -14,10 +14,15 @@ import About from "./Pages/About";
 import Contact from "./Pages/Contact";
 import NotFound from "./Pages/NotFound";
 import ScrollToTop from "react-scroll-to-top";
-import { useContext, useEffect } from "react";
+import { useContext } from "react";
 import { ShopContext } from "./Context/ShopContext";
 import Collections from "./Pages/Collections";
 import Offers from "./Pages/Offers";
+import Cookie from "./Components/Footer/Policy/Cookie";
+import Shipping from "./Components/Footer/Policy/Shipping";
+import Return from "./Components/Footer/Policy/Return";
+import TermsOfService from "./Components/Footer/Policy/TermsOfService";
+import Privacy from "./Components/Footer/Policy/Privacy";
 function App() {
   const { theme } = useContext(ShopContext);
   return (
@@ -48,6 +53,11 @@ function App() {
           <Route path="*" element={<NotFound />} />
           <Route path="/offers" element={<Offers />} />
           <Route path="/collections" element={<Collections />} />
+          <Route path="/cookie-policy" element={<Cookie/>} />
+          <Route path="/shipping-policy" element={<Shipping/>} />
+          <Route path="/return-policy" element={<Return/>} />
+          <Route path="/terms-of-service" element={<TermsOfService/>}/>
+          <Route path="/privacy-policy" element={<Privacy/>}/>
         </Routes>
         <Footer />
       </BrowserRouter>

src/Components/Footer/Footer.css

@@ -6,7 +6,16 @@
     gap: 50px;
     margin-top: 170px;
 }
-
+.footer-links a {
+    margin: 0 10px;
+    color: #007bff;
+    text-decoration: none;
+  }
+
+  .footer-links a:hover {
+    text-decoration: underline;
+  }
+
 .footer-logo {
     display: flex;
     align-items: center;

src/Components/Footer/Footer.jsx

@@ -60,6 +60,14 @@ const Footer = () => {
       <div className={`footer-copyright_${theme}`}>
         <hr className={`hr_${theme}`} />
         <p>Copyright @ {new Date().getFullYear()} - All Rights Reserved</p>
+        <div className="footer-links">
+        <a href="/privacy-policy" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
+        <a href="/terms-of-service" target="_blank" rel="noopener noreferrer">Terms of Service</a>
+        <a href="/return-policy" target="_blank" rel="noopener noreferrer">Return Policy</a>
+        <a href="/shipping-policy" target="_blank" rel="noopener noreferrer">Shipping Policy</a>
+        <a href="/cookie-policy" target="_blank" rel="noopener noreferrer">Cookie Policy</a>
+
+      </div>
       </div>
     </div>
   );

src/Components/Footer/Policy/Cookie.css

@@ -0,0 +1,50 @@
+.cookie-policy {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .cookie-policy h1 {
+    font-size: 2em;
+    margin-bottom: 20px;
+    text-align: center;
+    color: #444;
+  }
+
+  .cookie-policy h2 {
+    font-size: 1.5em;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    color: #555;
+  }
+
+  .cookie-policy p {
+    margin-bottom: 15px;
+  }
+
+  .cookie-policy ul {
+    list-style-type: disc;
+    padding-left: 20px;
+    margin-bottom: 20px;
+  }
+
+  .cookie-policy ul li {
+    margin-bottom: 10px;
+  }
+
+  .cookie-policy a {
+    color: #007bff;
+    text-decoration: none;
+  }
+
+  .cookie-policy a:hover {
+    text-decoration: underline;
+  }
+

src/Components/Footer/Policy/Cookie.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import './Cookie.css'; // Import the CSS file
+
+const Cookie = () => {
+  return (
+    <div className="cookie-policy">
+      <h1>Cookie Policy</h1>
+      <p>This Cookie Policy explains how our website uses cookies and similar technologies to provide, improve, promote, and protect our services.</p>
+
+      <h2>What Are Cookies?</h2>
+      <p>Cookies are small pieces of text sent by your web browser by a website you visit. A cookie file is stored in your web browser and allows the Service or a third-party to recognize you and make your next visit easier and the Service more useful to you.</p>
+
+      <h2>How We Use Cookies</h2>
+      <p>When you use and access the Service, we may place a number of cookies files in your web browser. We use cookies for the following purposes:</p>
+      <ul>
+        <li>To enable certain functions of the Service</li>
+        <li>To provide analytics</li>
+        <li>To store your preferences</li>
+        <li>To enable advertisements delivery, including behavioral advertising</li>
+      </ul>
+
+      <h2>Your Choices Regarding Cookies</h2>
+      <p>If you’d like to delete cookies or instruct your web browser to delete or refuse cookies, please visit the help pages of your web browser. Please note, however, that if you delete cookies or refuse to accept them, you might not be able to use all of the features we offer, you may not be able to store your preferences, and some of our pages might not display properly.</p>
+
+      <h2>More Information</h2>
+      <p>For more information about cookies, please visit the <a href="https://www.privacypolicies.com/blog/cookies/">Privacy Policies website</a>.</p>
+    </div>
+  );
+}
+
+export default Cookie;

src/Components/Footer/Policy/Privacy.css

@@ -0,0 +1,50 @@
+.privacy-policy {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .privacy-policy h1 {
+    font-size: 2em;
+    margin-bottom: 20px;
+    text-align: center;
+    color: #444;
+  }
+
+  .privacy-policy h2 {
+    font-size: 1.5em;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    color: #555;
+  }
+
+  .privacy-policy p {
+    margin-bottom: 15px;
+  }
+
+  .privacy-policy ul {
+    list-style-type: disc;
+    padding-left: 20px;
+    margin-bottom: 20px;
+  }
+
+  .privacy-policy ul li {
+    margin-bottom: 10px;
+  }
+
+  .privacy-policy a {
+    color: #007bff;
+    text-decoration: none;
+  }
+
+  .privacy-policy a:hover {
+    text-decoration: underline;
+  }
+

src/Components/Footer/Policy/Privacy.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import './Privacy.css'; // Import the CSS file
+
+const Privacy = () => {
+  return (
+    <div className="privacy-policy">
+      <h1>Privacy Policy</h1>
+      <p>Your privacy is important to us. It is ShopNex's policy to respect your privacy regarding any information we may collect from you across our website, and other sites we own and operate.</p>
+
+      <h2>Information We Collect</h2>
+      <p>We only collect information about you if we have a reason to do so, for example, to provide our services, to communicate with you, or to improve our services.</p>
+
+      <h2>Use of Your Information</h2>
+      <p>We may use your information to provide and maintain our services, to improve our services, to contact you, to provide customer support, and to protect our rights or the rights of others.</p>
+
+      <h2>Sharing of Your Information</h2>
+      <p>We do not share personal information with third parties except as necessary to provide our services or as required by law.</p>
+
+      <h2>Security of Your Information</h2>
+      <p>We strive to protect your personal information using reasonable security measures.</p>
+
+      <h2>Changes to This Privacy Policy</h2>
+      <p>ShopNex may update this Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page.</p>
+
+      <h2>Contact Us</h2>
+      <p>If you have any questions or concerns regarding our shipping policy, please feel free to <a href="/contact">contact us</a>.</p>
+    </div>
+  );
+}
+
+export default Privacy;

src/Components/Footer/Policy/Return.css

@@ -0,0 +1,50 @@
+.return-policy {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .return-policy h1 {
+    font-size: 2em;
+    margin-bottom: 20px;
+    text-align: center;
+    color: #444;
+  }
+
+  .return-policy h2 {
+    font-size: 1.5em;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    color: #555;
+  }
+
+  .return-policy p {
+    margin-bottom: 15px;
+  }
+
+  .return-policy ul {
+    list-style-type: disc;
+    padding-left: 20px;
+    margin-bottom: 20px;
+  }
+
+  .return-policy ul li {
+    margin-bottom: 10px;
+  }
+
+  .return-policy a {
+    color: #007bff;
+    text-decoration: none;
+  }
+
+  .return-policy a:hover {
+    text-decoration: underline;
+  }
+

src/Components/Footer/Policy/Return.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import './Return.css'; // Import the CSS file
+
+const Return = () => {
+  return (
+    <div className="return-policy">
+      <h1>Return Policy</h1>
+      <p>Thank you for shopping with us. If you are not entirely satisfied with your purchase, we're here to help.</p>
+
+      <h2>Returns</h2>
+      <p>You have 30 calendar days to return an item from the date you received it. To be eligible for a return, your item must be unused and in the same condition that you received it. Your item must be in the original packaging. Your item needs to have the receipt or proof of purchase.</p>
+
+      <h2>Refunds</h2>
+      <p>Once we receive your item, we will inspect it and notify you that we have received your returned item. We will immediately notify you on the status of your refund after inspecting the item. If your return is approved, we will initiate a refund to your credit card (or original method of payment). You will receive the credit within a certain amount of days, depending on your card issuer's policies.</p>
+
+      <h2>Shipping</h2>
+      <p>You will be responsible for paying for your own shipping costs for returning your item. Shipping costs are non-refundable. If you receive a refund, the cost of return shipping will be deducted from your refund.</p>
+
+      <h2>Contact Us</h2>
+      <p>If you have any questions on how to return your item to us, please contact us at <a href="/contact">Contact Us</a>.</p>
+    </div>
+  );
+}
+
+export default Return;

src/Components/Footer/Policy/Shipping.css

@@ -0,0 +1,50 @@
+.shipping-policy {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .shipping-policy h1 {
+    font-size: 2em;
+    margin-bottom: 20px;
+    text-align: center;
+    color: #444;
+  }
+
+  .shipping-policy h2 {
+    font-size: 1.5em;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    color: #555;
+  }
+
+  .shipping-policy p {
+    margin-bottom: 15px;
+  }
+
+  .shipping-policy ul {
+    list-style-type: disc;
+    padding-left: 20px;
+    margin-bottom: 20px;
+  }
+
+  .shipping-policy ul li {
+    margin-bottom: 10px;
+  }
+
+  .shipping-policy a {
+    color: #007bff;
+    text-decoration: none;
+  }
+
+  .shipping-policy a:hover {
+    text-decoration: underline;
+  }
+

src/Components/Footer/Policy/Shipping.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import './Shipping.css'; // Import the CSS file
+
+const Shipping = () => {
+  return (
+    <div className="shipping-policy">
+      <h1>Shipping Policy</h1>
+      <p>Welcome to our Shipping Policy page. Here you will find all the necessary information regarding our shipping methods, delivery times, and costs.</p>
+
+      <h2>Shipping Methods</h2>
+      <p>We offer a variety of shipping options to meet your needs. The available shipping methods will be displayed at checkout.</p>
+      <ul>
+        <li>Standard Shipping: 5-7 business days</li>
+        <li>Expedited Shipping: 2-3 business days</li>
+        <li>Overnight Shipping: 1 business day</li>
+      </ul>
+
+      <h2>Delivery Times</h2>
+      <p>Delivery times are estimates and commence from the date of shipping, rather than the date of order. Delivery times are to be used as a guide only and are subject to the acceptance and approval of your order.</p>
+
+      <h2>Shipping Costs</h2>
+      <p>Shipping costs are calculated based on the weight of your order and the selected shipping method. The total cost will be displayed at checkout.</p>
+
+      <h2>International Shipping</h2>
+      <p>We offer international shipping to select countries. Please note that international shipments may be subject to additional customs fees, import duties, and taxes. These charges are the responsibility of the recipient.</p>
+
+      <h2>Tracking Your Order</h2>
+      <p>Once your order has been shipped, you will receive a confirmation email with a tracking number. You can use this number to track your order on the shipping carrier's website.</p>
+
+      <h2>Contact Us</h2>
+      <p>If you have any questions or concerns regarding our shipping policy, please feel free to <a href="/contact">contact us</a>.</p>
+    </div>
+  );
+}
+
+export default Shipping;