From 4b029c1d69217e634f79364954eb5d19362498eb Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Sun, 24 Nov 2024 13:30:31 +0530
Subject: [PATCH] refactor: add back navigation button and adjust layout for
 privacy, refund, and terms pages

---
 src/app/(legal)/privacy/page.tsx | 30 +++++++++++++++++++++++----
 src/app/(legal)/refund/page.tsx  | 35 ++++++++++++++++++++++++++++----
 src/app/(legal)/terms/page.tsx   | 33 ++++++++++++++++++++++++------
 3 files changed, 84 insertions(+), 14 deletions(-)

diff --git a/src/app/(legal)/privacy/page.tsx b/src/app/(legal)/privacy/page.tsx
index cf683ef..d4afd27 100644
--- a/src/app/(legal)/privacy/page.tsx
+++ b/src/app/(legal)/privacy/page.tsx
@@ -4,11 +4,36 @@ import Container from "@/components/shared/container";
 import { Text } from "@/components/shared/text";
 import { legalInfo } from "@/data/legal-info";
 import { cn } from "@/lib/utils";
+import { useRouter } from "next/navigation";
 
 export default function PrivacyPolicy() {
+  const router = useRouter();
   return (
-    <Container className="mx-auto mt-32 mb-1">
+    <Container className="mx-auto mt-24 md:mt-32 mb-1">
       <div className="py-10 px-6 sm:px-12 md:px-20 lg:px-32 space-y-8  text-red-600 rounded-lg shadow-lg backdrop-blur-md">
+        <div className="flex items-center justify-start">
+          <button
+            className="text-red-600 hover:text-red-800 flex items-center space-x-2"
+            onClick={() => router.back()}
+          >
+            <svg
+              className="w-5 h-5"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M15 19l-7-7 7-7"
+              />
+            </svg>
+            <span>Back</span>
+          </button>
+        </div>
+
         <Text
           variant="h1"
           className={cn("text-4xl md:text-5xl font-bold text-center")}
@@ -16,14 +41,12 @@ export default function PrivacyPolicy() {
           Privacy Policy
         </Text>
 
-        {/* Policy Sections */}
         <div className="space-y-6">
           {legalInfo.Privacy.map((privacy, index) => (
             <div
               key={index}
               className=" border-gray-700 pb-2 mb-2 last:border-none last:pb-0 last:mb-0"
             >
-              {/* Section Title */}
               <Text
                 variant="h3"
                 className={cn(
@@ -33,7 +56,6 @@ export default function PrivacyPolicy() {
                 {privacy.title}
               </Text>
 
-              {/* Section Description */}
               <p className="text-base md:text-lg text-gray-400 leading-7 md:leading-8 text-justify">
                 {privacy.description}
               </p>
diff --git a/src/app/(legal)/refund/page.tsx b/src/app/(legal)/refund/page.tsx
index e3babe9..424c509 100644
--- a/src/app/(legal)/refund/page.tsx
+++ b/src/app/(legal)/refund/page.tsx
@@ -4,14 +4,41 @@ import Container from "@/components/shared/container";
 import { Text } from "@/components/shared/text";
 import { legalInfo } from "@/data/legal-info";
 import { cn } from "@/lib/utils";
+import Link from "next/link";  // To create a back link
+import { useRouter } from "next/navigation";
 
 export default function Refund() {
+  const router = useRouter();
   return (
-    <Container className="mx-auto mt-32 mb-1">
+    <Container className="mx-auto mt-24 md:mt-32 mb-1">
       <div className="py-10 px-6 sm:px-12 md:px-20 lg:px-32 space-y-8 text-red-600 rounded-lg shadow-lg backdrop-blur-md">
-        <Text variant="h1" className={cn("text-4xl md:text-5xl font-bold text-center")}>
-          Refund Policy
-        </Text>
+        <div className="flex items-center justify-start">
+            <button className="text-red-600 hover:text-red-800 flex items-center space-x-2"
+            onClick={() => router.back()}>
+              <svg
+                className="w-5 h-5"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M15 19l-7-7 7-7"
+                />
+              </svg>
+              <span>Back</span>
+            </button>
+        </div>
+
+        {/* Title Section */}
+        <div className="text-center">
+          <Text variant="h1" className={cn("text-4xl md:text-5xl font-bold text-center")}>
+            Refund Policy
+          </Text>
+        </div>
 
         {/* Policy Sections */}
         <div className="space-y-6">
diff --git a/src/app/(legal)/terms/page.tsx b/src/app/(legal)/terms/page.tsx
index a4c1e7b..d1dd148 100644
--- a/src/app/(legal)/terms/page.tsx
+++ b/src/app/(legal)/terms/page.tsx
@@ -2,28 +2,51 @@
 
 import Container from "@/components/shared/container";
 import { Text } from "@/components/shared/text";
+import { Button } from "@/components/ui/button";
 import { legalInfo } from "@/data/legal-info";
 import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
 
 export default function TermsAndConditions() {
+  const router = useRouter();
   return (
-    <Container className="mx-auto mt-32 mb-1">
+    <Container className="mx-auto mt-24 md:mt-32 mb-1">
       <div className="py-10 px-6 sm:px-12 md:px-20 lg:px-32 space-y-8 text-red-600 rounded-lg shadow-lg backdrop-blur-md">
+        <div className="flex items-center justify-start">
+          <button
+            className="text-red-600 hover:text-red-800 flex items-center space-x-2"
+            onClick={() => router.back()}
+          >
+            <svg
+              className="w-5 h-5"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M15 19l-7-7 7-7"
+              />
+            </svg>
+            <span>Back</span>
+          </button>
+        </div>
         <Text
           variant="h1"
           className={cn("text-4xl md:text-5xl font-bold text-center")}
         >
           Terms and Conditions
         </Text>
-
-        {/* Policy Sections */}
         <div className="space-y-6">
           {legalInfo.Terms.map((terms, index) => (
             <div
               key={index}
               className="border-gray-700 pb-2 mb-2 last:border-none last:pb-0 last:mb-0"
             >
-              {/* Section Title */}
               <Text
                 variant="h3"
                 className={cn(
@@ -32,8 +55,6 @@ export default function TermsAndConditions() {
               >
                 {terms.title}
               </Text>
-
-              {/* Section Description */}
               <p className="text-base md:text-lg text-gray-400 leading-7 md:leading-8 text-justify">
                 {terms.description}
               </p>