From 3c9bc862d9fdb0d877a8c0945998dfa3e5f4daca Mon Sep 17 00:00:00 2001
From: Sadaf <137484958+SadafKausar2025@users.noreply.github.com>
Date: Sat, 31 Aug 2024 21:47:46 +0530
Subject: [PATCH] Make responsive of About page and route name correction

---
 src/App.jsx                        | 18 +++++++--------
 src/User/pages/AboutUs/Aboutus.jsx | 37 +++++++++++++++---------------
 2 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 1ea6b829..70506acd 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -158,7 +158,7 @@ export default function App() {
           <Route path="contributors" element={<Contributors />} />
           <Route path="about-us" element={<AboutUs />} />
           <Route path="help" element={<Help />} /> {/* Help page route */}
-          <Route path="privacy" element={<Privacy />} />
+          <Route path="privacy-policy" element={<Privacy />} />
           {/* Privacy policy page route */}
           <Route path="cart" element={<Cart />} /> {/* Cart page route */}
           <Route
@@ -176,17 +176,17 @@ export default function App() {
           <Route path="auth" element={<UserAuth />} />
           {/* User authentication page route */}
           <Route path="faq" element={<FAQ />} /> {/* FAQ page route */}
-          <Route path="termsAndCondition" element={<TermsAndConditions />} />
+          <Route path="terms-and-condition" element={<TermsAndConditions />} />
           {/* Terms and Conditions page route */}
           <Route path="feedback" element={<FeedbackModal />} />
           {/* Feedback page route */}
           <Route
-            path="returnAndCancellation"
+            path="return-and-cancellation"
             element={<ReturnAndCancellation />}
           />
           <Route path="payment-policy" element={<Payment_Policy />} />
           {/* Return and Cancellation page route */}
-          <Route path="EPR_Page" element={<EPRPage />} /> {/* EPR page route */}
+          <Route path="epr" element={<EPRPage />} /> {/* EPR page route */}
           <Route path="career" element={<CareerPage />} />
           <Route path="service" element={<ServicePage />} />
           <Route path="shipping" element={<Shipping />} />
@@ -196,9 +196,9 @@ export default function App() {
           <Route element={<PrivateRoute />}>
             <Route path="/admin" element={<AdminLayout />}>
               <Route index element={<AdminPanel />} /> {/* Admin panel route */}
-              <Route path="vigy_form" element={<VigyForm />} />
+              <Route path="vigy-form" element={<VigyForm />} />
               {/* Admin Vigy form route */}
-              <Route path="product_form" element={<ProductForm />} />
+              <Route path="product-form" element={<ProductForm />} />
               {/* Admin product form route */}
             </Route>
             <Route path="dashboard" element={<Dashboard />} />
@@ -209,7 +209,7 @@ export default function App() {
             {/* Order cancellation route */}
             <Route path="orderDetails" element={<OrderDetails />} />
             {/* Order details route */}
-            <Route path="myOrders" element={<MyOrders />} />
+            <Route path="my-orders" element={<MyOrders />} />
             {/* My orders route */}
             <Route path="checkout" element={<Checkout />} />
             {/* Checkout route */}
@@ -248,9 +248,9 @@ export default function App() {
         {/* Admin routes */}
         <Route path="/admin" element={<AdminLayout />}>
           <Route index element={<AdminPanel />} /> {/* Admin panel route */}
-          <Route path="vigy_form" element={<VigyForm />} />
+          <Route path="vigy-form" element={<VigyForm />} />
           {/* Admin Vigy form route */}
-          <Route path="product_form" element={<ProductForm />} />
+          <Route path="product-form" element={<ProductForm />} />
           {/* Admin product form route */}
         </Route>
 
diff --git a/src/User/pages/AboutUs/Aboutus.jsx b/src/User/pages/AboutUs/Aboutus.jsx
index 300fb4bf..a12fcdb9 100644
--- a/src/User/pages/AboutUs/Aboutus.jsx
+++ b/src/User/pages/AboutUs/Aboutus.jsx
@@ -7,12 +7,12 @@ const AboutUs = () => {
   return (
     <div className="  from-[#ceedfa] to-[#cee1fa] min-h-screen">
       <section className="py-12 md:py-20  h-[95vh]">
-        <p className="text-5xl font-bold text-emerald-700 text-center mt-9">
+        <p className="md:text-5xl text-3xl font-bold text-emerald-700 text-center mt-9">
           Our Mission
         </p>
         <div class="flex flex-col md:flex-row justify-between p-8">
-          <div class="md:w-1/2  p-14">
-            <p class="text-[27px] sm:text-[23px] text-slate-700 mt-20 font-normal">
+          <div class="md:w-1/2  md:p-14">
+            <p class="md:text-[23px] text-lg sm:text-[23px] text-slate-700 md:mt-20 font-normal">
               At <span className="text-green-700 font-bold">VigyBag,</span> we
               believe in empowering local artisans and connecting them with the
               rest of the country. Our mission is to provide a platform where
@@ -23,11 +23,12 @@ const AboutUs = () => {
             </p>
           </div>
 
-          <div class="md:w-1/2 p-4">
+          <div class="md:w-1/2  md:p-4 mt-10">
             <div class="aspect-w-16 aspect-h-9 border-8 border-green-600 rounded-md ">
               <iframe
-                width="685"
-                height="415"
+                className="md:w-[685px] md:h-[410px] w-[300px] h-[150px]"
+                // width="685"
+                // height="415"
                 src="https://www.youtube.com/embed/F9aJdlUGd08?autoplay=1&loop=1&playlist=F9aJdlUGd08&mute=1"
                 title="YouTube video player"
                 frameborder="0"
@@ -39,8 +40,8 @@ const AboutUs = () => {
         </div>
       </section>
       <div className="w-full h-2 opacity-10 bg-slate-900"></div>
-      <section className="py-12 md:py-20 h-[90vh]">
-        <p className="text-5xl font-bold text-emerald-800 text-center">
+      <section className="py-3 md:py-20 md:h-[90vh]">
+        <p className="md:text-5xl text-3xl font-bold text-emerald-800 text-center">
           Our Story
         </p>
         <div className="flex flex-col md:flex-row justify-between p-8">
@@ -58,7 +59,7 @@ const AboutUs = () => {
             </div>
           </div>
           <div class="md:w-1/2  p-14">
-            <p class="text-xl text-slate-700 font-baloo mt-10">
+            <p class="md:text-xl text-lg text-slate-700 font-baloo mt-10">
               <span className="text-green-700 font-bold">VigyBag,</span> was
               born out of a desire to bridge the gap between rural artisans and
               urban consumers. We saw the potential in the handcrafted,
@@ -72,14 +73,14 @@ const AboutUs = () => {
         </div>
       </section>
       <div className="w-full h-2 opacity-10 bg-slate-900"></div>
-      <section className="py-12 md:py-20  h-[90vh]">
-        <p className="text-5xl font-bold text-yellow-500 text-center mt-4">
+      <section className="py-12 md:py-20  md:h-[90vh]">
+        <p className="md:text-5xl text-3xl font-bold text-yellow-500 text-center mt-4">
           Why Choose <span className="text-green-700 font-bold">VigyBag</span>?
         </p>
         <div class="flex flex-col md:flex-row justify-between p-8">
-          <div class="md:w-1/2  p-14">
+          <div class="md:w-1/2 p-14">
             <p className="font-bold text-2xl text-orange-500">💡Empowerment</p>
-            <p class="text-lg text-slate-700 font-baloo">
+            <p class="md:text-lg text-sm text-slate-700 font-baloo">
               Every purchase on
               <span className="text-green-700 font-bold">VigyBag,</span>
               directly supports local artisans and their communities. By
@@ -92,7 +93,7 @@ const AboutUs = () => {
             <p className="font-bold text-2xl text-orange-500">
               🌱 Sustainability
             </p>
-            <p class="text-lg text-slate-700 font-baloo">
+            <p class="md:text-lg text-sm text-slate-700 font-baloo">
               We prioritize products that are made with the environment in mind.
               From natural materials to eco-friendly packaging, our goal is to
               reduce the carbon footprint associated with shopping.
@@ -101,7 +102,7 @@ const AboutUs = () => {
             <p className="font-bold text-2xl text-orange-500">
               🔒 Authenticity
             </p>
-            <p class="text-lg text-slate-700 font-baloo">
+            <p class="md:text-lg text-sm text-slate-700 font-baloo">
               Our products are handcrafted with care, carrying the rich heritage
               and culture of the artisans who make them. Every item tells a
               story of tradition, skill, and passion.
@@ -124,13 +125,13 @@ const AboutUs = () => {
         </div>
       </section>
       <div className="w-full h-2 opacity-10 bg-slate-900"></div>
-      <section className="py-12 md:py-20 h-[120vh]">
-        <p className="text-5xl font-bold text-emerald-800 text-center mt-4">
+      <section className="py-12 md:py-20 md:h-[120vh]">
+        <p className="md:text-5xl text-3xl font-bold text-emerald-800 text-center mt-4">
           Our Values
         </p>
         <div class="flex flex-col md:flex-row justify-between p-8">
           <div class="md:w-1/2 p-4">
-            <div class="aspect-w-16 aspect-h-9">
+            <div class="md:aspect-w-16 md:aspect-h-9">
               <img
                 className="rounded-2xl"
                 style={{