From e158972bd60ec75a340e19c17a5a741c527de2de Mon Sep 17 00:00:00 2001
From: haniyeroozmand <147385975+haniyeroozmand@users.noreply.github.com>
Date: Sun, 24 May 2026 18:16:00 +0330
Subject: [PATCH] ui fixes

---
 src/app/[locale]/domain/page.tsx                     | 12 ++++++------
 .../[locale]/services/[slug]/service-detail-page.tsx | 12 ++++++------
 src/app/components/domain-search-results.tsx         | 10 +++++-----
 src/app/components/domain-search.tsx                 | 10 ++--------
 src/app/components/hero.tsx                          |  9 ++++-----
 src/app/components/org-email-hero.tsx                |  4 ++--
 6 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/src/app/[locale]/domain/page.tsx b/src/app/[locale]/domain/page.tsx
index 55853f6..1255286 100644
--- a/src/app/[locale]/domain/page.tsx
+++ b/src/app/[locale]/domain/page.tsx
@@ -105,7 +105,7 @@ export default async function DomainPage({
         <div className="max-w-7xl mx-auto">
           <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
             {/* Globe */}
-            <div className="lg:col-span-6 order-2">
+            <div className={`lg:col-span-6 ${isFa ? 'order-2 lg:order-1' : 'order-2 lg:order-2'}`}>
               <div className="relative mx-auto w-full max-w-[860px] aspect-[1/1] -mt-10 lg:-mt-16">
                 <Image
                   src="/images/domain-globe.png"
@@ -191,8 +191,8 @@ export default async function DomainPage({
 
                 {/* Feature pills */}
                 <div
-                  className={`mt-5 rounded-2xl border border-[rgba(148,163,184,0.14)] bg-[rgba(2,6,23,0.32)] backdrop-blur-xl overflow-hidden ${isFa ? 'divide-x divide-x-reverse' : 'divide-x'
-                    } divide-[rgba(148,163,184,0.12)]`}
+                  className={`mt-5 rounded-2xl border border-[rgba(148,163,184,0.14)] dark:border-[rgba(148,163,184,0.14)] light:border-[color:var(--border-10)] bg-[rgba(2,6,23,0.32)] dark:bg-[rgba(2,6,23,0.32)] light:bg-[color:var(--glass-05)] backdrop-blur-xl overflow-hidden ${isFa ? 'divide-x divide-x-reverse' : 'divide-x'
+                    } divide-[rgba(148,163,184,0.12)] light:divide-[color:var(--border-10)]`}
                 >
                   <div className="grid grid-cols-2 sm:grid-cols-4">
                     {[
@@ -203,10 +203,10 @@ export default async function DomainPage({
                     ].map((item) => (
                       <div
                         key={item.t}
-                        className={`flex items-center justify-center gap-2 px-4 py-4 text-xs sm:text-sm text-slate-200/80 ${isFa ? 'flex-row-reverse' : ''
+                        className={`flex items-center justify-center gap-2 px-4 py-4 text-xs sm:text-sm text-slate-200/80 light:text-[#0a192f] ${isFa ? 'flex-row-reverse' : ''
                           }`}
                       >
-                        <item.i className="w-5 h-5 text-indigo-300/80" />
+                        <item.i className="w-5 h-5 text-indigo-300/80 light:text-[#80c8f5]" />
                         <span className="whitespace-nowrap">{item.t}</span>
                       </div>
                     ))}
@@ -524,7 +524,7 @@ export default async function DomainPage({
                 </div>
                 <button
                   type="button"
-                  className="px-8 py-3.5 rounded-2xl bg-gradient-to-r from-emerald-400 to-indigo-500 text-[#071027] font-extrabold text-sm hover:opacity-90 transition-opacity"
+                  className="px-8 py-3.5 rounded-2xl bg-gradient-to-l from-[#84e1bc] to-[#80c8f5] text-[#0a192f] font-extrabold text-sm hover:opacity-90 transition-opacity"
                 >
                   {isFa ? 'جستجوی دامنه' : 'Search domain'}
                 </button>
diff --git a/src/app/[locale]/services/[slug]/service-detail-page.tsx b/src/app/[locale]/services/[slug]/service-detail-page.tsx
index ceb8259..7f16ab2 100644
--- a/src/app/[locale]/services/[slug]/service-detail-page.tsx
+++ b/src/app/[locale]/services/[slug]/service-detail-page.tsx
@@ -131,7 +131,7 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
             transition={{ duration: 1.1, ease: 'easeOut' }}
             className="absolute inset-0 opacity-[var(--hero-image-opacity)]"
           >
-            <div className="absolute inset-y-0 left-20 w-[70%] max-w-[1120px] pointer-events-none">
+            <div className={`absolute inset-y-0 ${locale === 'en' ? 'right-20' : 'left-20'} w-[70%] max-w-[1120px] pointer-events-none`}>
               <Image
                 src={
                   mounted && resolvedTheme === 'light'
@@ -144,12 +144,12 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
                 unoptimized
                 quality={100}
                 sizes="(min-width: 1024px) 52vw, 100vw"
-                className="object-contain object-left"
+                className={`object-contain ${locale === 'en' ? 'object-right scale-x-[-1]' : 'object-left'}`}
               />
             </div>
 
-            {/* Right-side fade so text never blends into artwork */}
-            <div className="absolute inset-y-0 right-0 w-[78%] pointer-events-none" />
+            {/* Side fade so text never blends into artwork */}
+            <div className={`absolute inset-y-0 ${locale === 'en' ? 'left-0' : 'right-0'} w-[78%] pointer-events-none`} />
 
             {/* Bottom fade */}
             <div className="absolute inset-x-0 bottom-0 h-2/3 pointer-events-none" />
@@ -184,7 +184,7 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
           >
 
             {/* Right side - text */}
-            <div className="lg:col-span-6">
+            <div className={`lg:col-span-6 ${locale === 'en' ? 'lg:order-1' : 'lg:order-2'}`}>
               <motion.div
                 variants={heroItem}
                 className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[color:var(--border-10)] bg-[color:var(--glass-05)] backdrop-blur-md text-sm text-[#84e1bc] mb-5"
@@ -204,7 +204,7 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
 
               <motion.div variants={heroItem} className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm text-[color:var(--text-muted)] mb-10">
                 {content.heroHighlights.map((h) => (
-                  <div key={h.label} className="flex items-center gap-3 en-justify-end justify-start">
+                  <div key={h.label} className="flex items-center gap-3  justify-start">
                     <GradientIconBox>
                       <HeroIcon name={h.icon} />
                     </GradientIconBox>
diff --git a/src/app/components/domain-search-results.tsx b/src/app/components/domain-search-results.tsx
index 61e0a2d..ae63423 100644
--- a/src/app/components/domain-search-results.tsx
+++ b/src/app/components/domain-search-results.tsx
@@ -55,8 +55,8 @@ export default function DomainSearchResults({
                     className={[
                       'shrink-0 px-3 py-1 rounded-full text-xs font-semibold border',
                       available
-                        ? 'border-emerald-400/30 bg-emerald-400/10 text-emerald-200'
-                        : 'border-rose-400/30 bg-rose-400/10 text-rose-200',
+                        ? 'border-emerald-400/30 bg-emerald-400/10 text-emerald-200 light:text-[#0a192f]'
+                        : 'border-rose-400/30 bg-rose-400/10 text-rose-200 light:text-[#0a192f]',
                     ].join(' ')}
                   >
                     {available ? (isFa ? 'موجود' : 'Available') : isFa ? 'گرفته شده' : 'Taken'}
@@ -69,7 +69,7 @@ export default function DomainSearchResults({
                   className={[
                     'mt-3 w-full px-4 py-2 rounded-xl text-xs font-extrabold transition-opacity',
                     available
-                      ? 'text-[#071027] bg-gradient-to-r from-emerald-400 via-cyan-400 to-indigo-500 hover:opacity-95 shadow-[0_12px_40px_rgba(34,211,238,0.14)] light:shadow-[0_14px_55px_rgba(2,6,23,0.12)]'
+                      ? 'text-[#0a192f] bg-gradient-to-l from-[#84e1bc] to-[#80c8f5] hover:opacity-90'
                       : 'text-[color:var(--text-muted-2)] bg-[color:var(--glass-02)] border border-[color:var(--border-10)] cursor-not-allowed',
                   ].join(' ')}
                 >
@@ -129,8 +129,8 @@ export default function DomainSearchResults({
                               className={[
                                 'px-3 py-1 rounded-full text-xs font-semibold border inline-flex',
                                 available
-                                  ? 'border-emerald-400/30 bg-emerald-400/10 text-emerald-200'
-                                  : 'border-rose-400/30 bg-rose-400/10 text-rose-200',
+                                  ? 'border-emerald-400/30 bg-emerald-400/10 text-emerald-200 light:text-[#0a192f]'
+                                  : 'border-rose-400/30 bg-rose-400/10 text-rose-200 light:text-[#0a192f]',
                               ].join(' ')}
                             >
                               {available ? (isFa ? 'موجود' : 'Available') : isFa ? 'گرفته شده' : 'Taken'}
diff --git a/src/app/components/domain-search.tsx b/src/app/components/domain-search.tsx
index 3061bf4..48ecc8d 100644
--- a/src/app/components/domain-search.tsx
+++ b/src/app/components/domain-search.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useState } from 'react';
-import { Search } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { normalizeSld } from './domain-search-data';
 
@@ -33,17 +32,12 @@ export default function DomainSearch({
         <button
           type="button"
           onClick={submit}
-          className="px-10 py-4 text-sm font-extrabold text-[#071027] bg-gradient-to-r from-emerald-400 via-cyan-400 to-indigo-500 hover:opacity-95 transition-opacity min-w-[160px] shadow-[0_12px_40px_rgba(34,211,238,0.14)] light:shadow-[0_14px_55px_rgba(2,6,23,0.12)]"
+          className="px-10 py-4 text-sm font-extrabold text-[#0a192f] bg-gradient-to-l from-[#84e1bc] to-[#80c8f5] hover:opacity-90 transition-opacity min-w-[160px]"
         >
           {isFa ? 'جستجو' : 'Search'}
         </button>
 
         <div className="relative flex-1">
-          <div className={`absolute inset-y-0 ${isFa ? 'left-4' : 'left-4'} flex items-center`}>
-            <div className="w-10 h-10 rounded-xl border border-[color:var(--border-10)] bg-[color:var(--glass-02)] flex items-center justify-center">
-              <Search className="w-5 h-5 text-[color:var(--text-muted)]" />
-            </div>
-          </div>
           <input
             type="text"
             value={query}
@@ -53,7 +47,7 @@ export default function DomainSearch({
             }}
             placeholder={isFa ? 'نام دامنه خود را وارد کنید…' : 'Enter your domain name…'}
             className={`w-full h-full bg-transparent px-4 py-4 text-sm text-[color:var(--text-primary)] placeholder:text-slate-300/40 light:placeholder:text-slate-500/60 outline-none ${
-              isFa ? 'pr-6 pl-16 text-right' : 'pl-16 pr-6 text-left'
+              isFa ? 'pr-6 pl-6 text-right' : 'pl-6 pr-6 text-left'
             }`}
           />
         </div>
diff --git a/src/app/components/hero.tsx b/src/app/components/hero.tsx
index 7d94519..dd63223 100644
--- a/src/app/components/hero.tsx
+++ b/src/app/components/hero.tsx
@@ -20,7 +20,6 @@ export default function HeroSection() {
     // تنظیمات انیمیشن برای نمایش متوالی (Stagger)
     const { locale, t } = useI18n();
     const dir = locale === 'en' ? 'ltr' : 'rtl';
-    const flipClass = locale === 'en' ? '-scale-x-100' : '';
     const { resolvedTheme } = useTheme();
     const [mounted, setMounted] = useState(false);
 
@@ -62,7 +61,7 @@ export default function HeroSection() {
                     unoptimized
                     quality={100}
                     sizes="100vw"
-                    className={`object-left md:object-center transform ${flipClass}`}
+                    className={`object-left md:object-center transform ${locale === 'en' ? 'scale-x-[-1]' : ''}`}
                 />
 
                 {/* لایه گرادینت */}
@@ -79,14 +78,14 @@ export default function HeroSection() {
 
 
                 {/* Hero Content */}
-                <main className="flex-1 flex flex-col lg:flex-row items-center pt-20 pb-10 px-8 lg:px-16">
+                <main className="flex-1 flex flex-col  lg:flex-row items-center pt-20 pb-10 px-8 lg:px-16">
 
                     {/* Right Side - Text & Buttons */}
                     <motion.div
                         variants={containerVariants}
                         initial="hidden"
                         animate="visible"
-                        className="w-full lg:w-[55%] flex flex-col justify-center text-right en-text-left z-20"
+                        className={`w-full lg:w-[55%] flex flex-col justify-center text-right en-text-left z-20 ${locale === 'en' ? 'lg:order-2' : 'lg:order-1'}`}
                     >
                         <motion.h1 variants={itemVariants} className="text-5xl lg:text-[64px] font-bold leading-[1.3] mb-6">
                             {t('hero_title_1')}
@@ -123,7 +122,7 @@ export default function HeroSection() {
                     </motion.div>
 
                     {/* Left Side - Glassmorphism Floating Cards */}
-                    <div className="w-full lg:w-[45%] relative h-[500px] hidden lg:block">
+                    <div className={`w-full lg:w-[45%] relative h-[500px] hidden lg:block ${locale === 'en' ? 'lg:order-2' : 'lg:order-1'}`}>
                         {/* Top Shield Card */}
                         <motion.div
                             initial={{ opacity: 0, scale: 0.8 }}
diff --git a/src/app/components/org-email-hero.tsx b/src/app/components/org-email-hero.tsx
index 52e47ee..25d43a5 100644
--- a/src/app/components/org-email-hero.tsx
+++ b/src/app/components/org-email-hero.tsx
@@ -62,7 +62,7 @@ export default function OrgEmailHero({
           <div className="relative p-6 sm:p-8 md:p-10">
             <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
               {/* Left illustration */}
-              <div className="lg:col-span-6">
+              <div className={`lg:col-span-6 ${isFa ? 'lg:order-1' : 'lg:order-2'}`}>
                 <div className="relative mx-auto w-full max-w-[560px] aspect-[6/5]">
                   <div className="absolute inset-0 rounded-[2rem] bg-[radial-gradient(closest-side_at_40%_45%,rgba(34,211,238,0.10),transparent_60%),radial-gradient(closest-side_at_70%_40%,rgba(167,139,250,0.10),transparent_62%)]" />
 
@@ -209,7 +209,7 @@ export default function OrgEmailHero({
               </div>
 
               {/* Right copy */}
-              <div className="lg:col-span-6">
+              <div className={`lg:col-span-6 ${isFa ? 'lg:order-2' : 'lg:order-1'}`}>
                 <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[rgba(255,255,255,0.04)] border border-white/10 text-xs text-slate-200/70">
                   <span>{isFa ? 'ایمیل سازمانی' : 'Business Email'}</span>
                   <span className="w-1 h-1 rounded-full bg-emerald-400/70" />