From aea8fb8b3d58f9648457a97f8b7d57512fdb72dd Mon Sep 17 00:00:00 2001
From: AminGhasempoor <aminghasempoor79@gmail.com>
Date: Thu, 26 Feb 2026 10:42:38 +0330
Subject: [PATCH] build and format

---
 messages/fa.json                              |  20 ++--
 .../Home/Desktop/Reservation/index.tsx        | 103 ++++--------------
 src/styles/globals.css                        |   4 +-
 3 files changed, 31 insertions(+), 96 deletions(-)

diff --git a/messages/fa.json b/messages/fa.json
index f33daa6..a242b87 100644
--- a/messages/fa.json
+++ b/messages/fa.json
@@ -22,16 +22,16 @@
     },
     "Reservation": {
         "title": "رزرو خدمات زیبایی، ساده\u200Cتر از همیشه",
-        "stations" : "مراکز معتبر",
-        "online_reserve" : "رزرو انلاین سریع",
-        "start_reserve" : "شروع رزرو",
-        "customer" : "مشتریان",
-        "customer_number" : "+100K",
-        "clinic" : "کلینیک فعال",
-        "clinic_number" : "+336",
-        "salon" : "سالن زیبایی",
-        "salon_number" : "+345",
-        "score" : "امتیازدهی واقعی کاربران",
+        "stations": "مراکز معتبر",
+        "online_reserve": "رزرو انلاین سریع",
+        "start_reserve": "شروع رزرو",
+        "customer": "مشتریان",
+        "customer_number": "+100K",
+        "clinic": "کلینیک فعال",
+        "clinic_number": "+336",
+        "salon": "سالن زیبایی",
+        "salon_number": "+345",
+        "score": "امتیازدهی واقعی کاربران",
         "description": "ما این پلتفرم را ساختیم تا بتوانید بهترین سالن\u200Cهای زیبایی و کلینیک\u200Cهای معتبر را به راحتی پیدا کنید.\n                            مقایسه، رزرو آنلاین و تجربه\u200Cای بی\u200Cدردسر."
     },
     "Application": {
diff --git a/src/components/Home/Desktop/Reservation/index.tsx b/src/components/Home/Desktop/Reservation/index.tsx
index 352af81..10b9af3 100644
--- a/src/components/Home/Desktop/Reservation/index.tsx
+++ b/src/components/Home/Desktop/Reservation/index.tsx
@@ -9,73 +9,42 @@ export default function Reservation() {
     const t = useTranslations("Reservation");
 
     return (
-        <section className="w-full my-32 lg:my-40">
+        <section className="my-32 w-full lg:my-40">
             <div className="container mx-auto px-6">
-
                 <motion.div
                     initial={{ opacity: 0, y: 80 }}
                     whileInView={{ opacity: 1, y: 0 }}
                     viewport={{ once: true }}
                     transition={{ duration: 0.8, ease: "easeOut" }}
-                    className="
-            relative
-            bg-primary-50
-            rounded-tr-[60px] md:rounded-tr-[80px]
-            rounded-bl-[60px] md:rounded-bl-[80px]
-            p-8 md:px-12
-            grid
-            gap-16
-            grid-cols-2
-            items-center
-          "
+                    className="bg-primary-50 relative grid grid-cols-2 items-center gap-16 rounded-tr-[60px] rounded-bl-[60px] p-8 md:rounded-tr-[80px] md:rounded-bl-[80px] md:px-12"
                 >
-
                     {/* ================= TEXT CONTENT ================= */}
                     <motion.div
                         initial={{ opacity: 0, x: -40 }}
                         whileInView={{ opacity: 1, x: 0 }}
                         viewport={{ once: true }}
                         transition={{ delay: 0.3, duration: 0.7 }}
-                        className="text-white space-y-8 order-1 w-full lg:px-10"
+                        className="order-1 w-full space-y-8 text-white lg:px-10"
                     >
-                        <h2 className="text-xl md:text-2xl lg:text-3xl font-bold leading-relaxed">
-                            {t("title")}
-                        </h2>
+                        <h2 className="text-xl leading-relaxed font-bold md:text-2xl lg:text-3xl">{t("title")}</h2>
 
-                        <p className="text-sm md:text-base text-primary-100 leading-8 max-w-xl">
-                            {t("description")}
-                        </p>
+                        <p className="text-primary-100 max-w-xl text-sm leading-8 md:text-base">{t("description")}</p>
 
                         {/* Features */}
                         <div className="flex flex-wrap items-center gap-x-8 gap-y-4 pt-2 text-sm">
-                            {[t("stations"), t("online_reserve"), t("score")].map(
-                                (item, i) => (
-                                    <div key={i} className="flex items-center gap-2">
-                                        <span className="w-3 h-3 rounded-full bg-primary-200" />
-                                        <span className="text-xs md:text-sm">{item}</span>
-                                    </div>
-                                )
-                            )}
+                            {[t("stations"), t("online_reserve"), t("score")].map((item, i) => (
+                                <div key={i} className="flex items-center gap-2">
+                                    <span className="bg-primary-200 h-3 w-3 rounded-full" />
+                                    <span className="text-xs md:text-sm">{item}</span>
+                                </div>
+                            ))}
                         </div>
 
                         {/* Button */}
                         <motion.button
                             whileHover={{ scale: 1.07 }}
                             whileTap={{ scale: 0.95 }}
-                            className="
-                mt-4
-                bg-white
-                flex
-                items-center
-                gap-2
-                text-primary-100
-                px-6
-                py-3
-                rounded-xl
-                font-medium
-                shadow-lg
-                w-fit
-              "
+                            className="text-primary-100 mt-4 flex w-fit items-center gap-2 rounded-xl bg-white px-6 py-3 font-medium shadow-lg"
                         >
                             {t("start_reserve")}
                             <ArrowTopLeft className="size-5" />
@@ -88,23 +57,10 @@ export default function Reservation() {
                         whileInView={{ opacity: 1, x: 0 }}
                         viewport={{ once: true }}
                         transition={{ delay: 0.4, duration: 0.9 }}
-                        className="relative flex flex-col items-center order-2"
+                        className="relative order-2 flex flex-col items-center"
                     >
-
                         {/* Image */}
-                        <div
-                            className="
-                relative
-                rounded-full
-                overflow-hidden
-                border-8
-                border-white
-                shadow-2xl
-                w-[260px] h-[320px]
-                md:w-[320px] md:h-[420px]
-                lg:w-[450px] lg:h-[580px]
-              "
-                        >
+                        <div className="relative h-[320px] w-[260px] overflow-hidden rounded-full border-8 border-white shadow-2xl md:h-[420px] md:w-[320px] lg:h-[580px] lg:w-[450px]">
                             <Image
                                 src="/images/reservation/reservation.jpg"
                                 alt="reservation"
@@ -118,43 +74,22 @@ export default function Reservation() {
                             initial={{ opacity: 0, y: 40 }}
                             whileInView={{ opacity: 1, y: 0 }}
                             transition={{ delay: 0.2, duration: 0.6 }}
-                            className="
-                mt-8
-                lg:absolute
-                lg:-bottom-16
-                bg-card
-                w-full
-                max-w-md
-                rounded-[40px] md:rounded-[60px]
-                shadow-2xl
-                px-6
-                py-6
-                flex
-                items-center
-                justify-between
-                gap-6
-              "
+                            className="bg-card mt-8 flex w-full max-w-md items-center justify-between gap-6 rounded-[40px] px-6 py-6 shadow-2xl md:rounded-[60px] lg:absolute lg:-bottom-16"
                         >
                             {[
                                 { number: t("customer_number"), label: t("customer") },
                                 { number: t("clinic_number"), label: t("clinic") },
                                 { number: t("salon_number"), label: t("salon") },
                             ].map((item, i) => (
-                                <div key={i} className="text-center flex-1">
-                                    <p className="text-lg md:text-xl font-bold text-text-primary">
-                                        {item.number}
-                                    </p>
-                                    <p className="text-xs md:text-sm text-text-muted mt-1">
-                                        {item.label}
-                                    </p>
+                                <div key={i} className="flex-1 text-center">
+                                    <p className="text-text-primary text-lg font-bold md:text-xl">{item.number}</p>
+                                    <p className="text-text-muted mt-1 text-xs md:text-sm">{item.label}</p>
                                 </div>
                             ))}
                         </motion.div>
-
                     </motion.div>
-
                 </motion.div>
             </div>
         </section>
     );
-}
\ No newline at end of file
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 02aa01c..2a5afc2 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -131,7 +131,7 @@ body {
     /* =====================
        Primary (Purple)
     ====================== */
-    --color-primary-50: #140B4E;
+    --color-primary-50: #140b4e;
     --color-primary-100: #7d34b9;
     --color-primary-200: #9a5cff;
     --color-primary-300: #b38bff;
@@ -192,7 +192,7 @@ body {
     --color-text-muted: #9ca3af;
 
     --color-primary-100: #b38bff;
-    --color-primary-50: #140B4E;
+    --color-primary-50: #140b4e;
     --color-primary-200: #9a5cff;
     --color-primary-300: #7d34b9;