From 84f49a75aec3bfd427556bcf94cbf7132ac20c92 Mon Sep 17 00:00:00 2001
From: AminGhasempoor <aminghasempoor79@gmail.com>
Date: Thu, 7 May 2026 10:17:47 +0330
Subject: [PATCH] change style

---
 .../Home/Desktop/Banner/SearchBar.tsx         |  2 +-
 src/components/Home/Desktop/Banner/index.tsx  | 44 +++++++++++--------
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/components/Home/Desktop/Banner/SearchBar.tsx b/src/components/Home/Desktop/Banner/SearchBar.tsx
index c07fb70..80dbaf0 100644
--- a/src/components/Home/Desktop/Banner/SearchBar.tsx
+++ b/src/components/Home/Desktop/Banner/SearchBar.tsx
@@ -18,7 +18,7 @@ export default function SearchBar() {
                 <button
                     type="button"
                     onClick={() => openModal(<LocationModal />)}
-                    className="w-full text-right text-gray-500"
+                    className="w-full text-right text-text-primary"
                 >
                     آدرس
                 </button>
diff --git a/src/components/Home/Desktop/Banner/index.tsx b/src/components/Home/Desktop/Banner/index.tsx
index 51da40d..4a9ebf7 100644
--- a/src/components/Home/Desktop/Banner/index.tsx
+++ b/src/components/Home/Desktop/Banner/index.tsx
@@ -18,28 +18,28 @@ export default function BannerComponent() {
             initial={{ opacity: 0, y: 60 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.9, ease: "easeOut" }}
-            className="bg-home-page-banner relative mx-16 mt-16 rounded-tr-[200px] rounded-bl-[200px] px-2 pt-2"
+            className="bg-home-page-banner relative mx-16 mt-16 md:rounded-tr-[100px] md:rounded-bl-[80px] lg:rounded-tr-[150px] lg:rounded-bl-[150px] px-2 pt-2"
         >
             {/* ================= Header ================= */}
-            <header className="flex w-full items-center justify-center pt-8">
-                <div className="flex w-full items-center justify-center space-x-5">
+            <header className="flex w-full items-center justify-center pt-8 px-5">
+                <div className="flex w-full items-center justify-start space-x-5">
                     <motion.div
                         initial={{ scale: 0 }}
                         animate={{ scale: 1 }}
                         transition={{ type: "spring", stiffness: 200 }}
                     >
-                        <LogoIcon className="size-12" />
+                        <LogoIcon className="size-8 lg:size-10" />
                     </motion.div>
 
                     <ThemeToggle />
 
-                    {["home", "search", "salons", "about_us", "contact_us"].map((item, index) => (
+                    {["home", "salons", "about_us", "contact_us"].map((item, index) => (
                         <motion.p
                             key={item}
                             initial={{ opacity: 0, y: -10 }}
                             animate={{ opacity: 1, y: 0 }}
                             transition={{ delay: 0.1 * index }}
-                            className="text-text-primary hover:text-primary-200 cursor-pointer transition"
+                            className="text-text-primary text-center hover:text-primary-200 cursor-pointer transition text-xs lg:text-sm"
                         >
                             {t(item)}
                         </motion.p>
@@ -49,17 +49,17 @@ export default function BannerComponent() {
                 <div className="flex w-full items-center justify-center">
                     {isAuth ? (
                         <motion.div whileHover={{ scale: 1.1 }} className="cursor-pointer">
-                            <AvatarIcon className="h-6 w-6" />
+                            <AvatarIcon className="size-4 lg:size-5" />
                         </motion.div>
                     ) : (
-                        <span className="flex w-full items-center justify-center gap-x-2">
+                        <span className="flex w-full items-center justify-end gap-x-2">
                             <motion.button
                                 whileHover={{ scale: 1.05 }}
                                 whileTap={{ scale: 0.95 }}
                                 className="bg-bg flex items-center justify-center gap-x-2 rounded-lg p-3"
                             >
-                                <MyOrderIcon className="h-6 w-6" />
-                                <p>{t("my_order")}</p>
+                                <MyOrderIcon className="size-5 lg:size-6" />
+                                <p className="text-xs lg:text-base">{t("my_order")}</p>
                             </motion.button>
 
                             <motion.button
@@ -67,8 +67,8 @@ export default function BannerComponent() {
                                 whileTap={{ scale: 0.95 }}
                                 className="bg-primary-200 flex items-center justify-center gap-x-2 rounded-lg p-3"
                             >
-                                <AvatarIcon className="h-6 w-6" />
-                                <p>{t("auth")}</p>
+                                <AvatarIcon className="size-4 lg:size-5" />
+                                <p className="text-xs lg:text-base">{t("auth")}</p>
                             </motion.button>
                         </span>
                     )}
@@ -80,7 +80,7 @@ export default function BannerComponent() {
                 {/* ===== Left Content ===== */}
                 <div className="flex w-full flex-col items-center justify-center space-y-7">
                     {/* Title */}
-                    <motion.div className="text-4xl font-bold">
+                    <motion.div className="text-2xl lg:text-4xl font-bold">
                         <motion.span
                             variants={{
                                 hidden: { opacity: 0, y: 20 },
@@ -124,7 +124,7 @@ export default function BannerComponent() {
                             hidden: { opacity: 0 },
                             visible: { opacity: 1 },
                         }}
-                        className="text-center text-xs"
+                        className="text-center px-10 text-xs"
                     >
                         {t("des")}
                     </motion.p>
@@ -147,10 +147,17 @@ export default function BannerComponent() {
 
                 {/* ===== Right Image ===== */}
                 <motion.div
-                    animate={{ y: [0, -12, 0] }}
-                    transition={{ repeat: Infinity, duration: 4, ease: "easeInOut" }}
-                    className="flex w-full items-center justify-center"
+                    // animate={{ y: [0, -12, 0] }}
+                    // transition={{ repeat: Infinity, duration: 4, ease: "easeInOut" }}
+                    className="flex relative w-full items-center justify-center"
                 >
+                    <motion.div
+                        className="w-50 sm:w-52 md:w-78 lg:w-90 absolute -bottom-50 left-10"
+                        initial={{ scale: 0.9, opacity: 0 }}
+                        whileInView={{ scale: 1, opacity: 1 }}
+                        transition={{ delay: 0.4, duration: 0.6 }}
+                        viewport={{ once: true }}
+                    >
                     <Image
                         src={BannerImage}
                         alt="main_image"
@@ -159,9 +166,10 @@ export default function BannerComponent() {
                         height={200}
                         priority
                     />
+                    </motion.div>
                 </motion.div>
             </motion.main>
-            <div className="absolute -bottom-10 left-24">
+            <div className="absolute -bottom-10 left-10 lg:left-24">
                 <SearchBar />
             </div>
         </motion.div>