ui fixes

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "kiroAgent.configureMCP": "Disabled"
+}

src/app/[locale]/domain/page.tsx

@@ -212,16 +212,21 @@ export default async function DomainPage({
                 { t: isFa ? 'امنیت کامل' : 'Full security', d: isFa ? 'DNSSEC و قفل انتقال' : 'DNSSEC and transfer lock' },
                 { t: isFa ? 'پنل قدرتمند' : 'Powerful panel', d: isFa ? 'مدیریت DNS، رکوردها و نیم‌سرورها' : 'Manage DNS, records, and nameservers' },
                 { t: isFa ? 'پشتیبانی همیشه' : 'Always-on support', d: isFa ? 'تیم متخصص در تمام ساعات' : 'Expert help anytime' },
-              ].map((c) => (
+              ].map((c, idx) => {
-                <div
+                const Icon = [Search, BadgeCheck, Settings, Headphones][idx] ?? BadgeCheck;
-                  key={c.t}
+                return (
-                  className="glass-rotating-border rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-05)] backdrop-blur-md p-6"
+                  <div
-                >
+                    key={c.t}
-                  <div className="h-12 w-12 rounded-2xl border border-[color:var(--border-10)] bg-[color:var(--glass-02)] shadow-[0_0_25px_rgba(34,211,238,0.10)]" />
+                    className="glass-rotating-border rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-05)] backdrop-blur-md p-6"
-                  <div className="mt-4 font-bold">{c.t}</div>
+                  >
-                  <div className="mt-2 text-sm text-[color:var(--text-muted-2)] leading-relaxed">{c.d}</div>
+                    <div className="h-12 w-12 rounded-2xl border border-[color:var(--border-10)] bg-[color:var(--glass-02)] shadow-[0_0_25px_rgba(34,211,238,0.10)] flex items-center justify-center">
-                </div>
+                      <Icon className="w-6 h-6 text-cyan-300/90" />
-              ))}
+                    </div>
+                    <div className="mt-4 font-bold">{c.t}</div>
+                    <div className="mt-2 text-sm text-[color:var(--text-muted-2)] leading-relaxed">{c.d}</div>
+                  </div>
+                );
+              })}
             </div>
           </div>
 
@@ -274,16 +279,21 @@ export default async function DomainPage({
                 { t: isFa ? '۱. جستجو' : '1. Search', d: isFa ? 'نام دامنه را وارد کنید و جستجو کنید.' : 'Enter a name and search.' },
                 { t: isFa ? '۲. انتخاب' : '2. Choose', d: isFa ? 'پسوند و پلن مناسب را انتخاب کنید.' : 'Pick your TLD and plan.' },
                 { t: isFa ? '۳. ثبت و فعال‌سازی' : '3. Register & activate', d: isFa ? 'اطلاعات را تکمیل کنید؛ دامنه فعال می‌شود.' : 'Complete info; your domain becomes active.' },
-              ].map((s) => (
+              ].map((s, idx) => {
+                const Icon = [Search, Tag, BadgeCheck][idx] ?? BadgeCheck;
+                return (
                 <div
                   key={s.t}
                   className="rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-05)] backdrop-blur-md p-6"
                 >
-                  <div className="h-12 w-12 rounded-2xl border border-[color:var(--border-10)] bg-[color:var(--glass-02)]" />
+                  <div className="h-12 w-12 rounded-2xl border border-[color:var(--border-10)] bg-[color:var(--glass-02)] flex items-center justify-center shadow-[0_0_25px_rgba(34,211,238,0.10)]">
+                    <Icon className="w-6 h-6 text-cyan-300/90" />
+                  </div>
                   <div className="mt-4 font-bold">{s.t}</div>
                   <div className="mt-2 text-sm text-[color:var(--text-muted-2)] leading-relaxed">{s.d}</div>
                 </div>
-              ))}
+                );
+              })}
             </div>
           </div>
 

src/app/components/faq-timeline-accordion.tsx

@@ -16,7 +16,7 @@ export default function FaqTimelineAccordion(props: {
   const [openIndex, setOpenIndex] = useState<number>(0);
 
   return (
-    <section className="mt-14">
+    <section className="mt-14 max-w-7xl">
       <div className="text-center mb-10">
         <h2 className="text-2xl sm:text-3xl font-bold text-[color:var(--text-primary)]">
           <span className="faq-title-bars">{title}</span>
@@ -24,7 +24,7 @@ export default function FaqTimelineAccordion(props: {
         {subtitle ? <p className="mt-3 text-sm sm:text-base text-[color:var(--text-muted)]">{subtitle}</p> : null}
       </div>
 
-      <div className="relative max-w-5xl mx-auto" dir="ltr">
+      <div className="relative mx-auto" dir="ltr">
         <div className="hidden md:block absolute right-[132px] top-0 bottom-0 w-px bg-gradient-to-b from-transparent via-[#80c8f5]/35 to-transparent" />
 
         <div className="space-y-4">
@@ -40,7 +40,7 @@ export default function FaqTimelineAccordion(props: {
               <div key={f.q} className="grid grid-cols-1 md:grid-cols-[1fr_220px] gap-5 items-stretch">
                 <div
                   className={[
-                    'relative rounded-2xl overflow-hidden border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-md',
+                    'relative rounded-2xl overflow-hidden border border-[color:var(--border-10)] bg-[color:var(--glass-04)]',
                     isOpen ? 'ring-1 ring-white/10' : '',
                   ].join(' ')}
                   dir={contentDir}
@@ -98,7 +98,7 @@ export default function FaqTimelineAccordion(props: {
                       style={{ background: `linear-gradient(to left, ${glow}66, rgba(255,255,255,0.06))` }}
                     />
 
-                    <div className="w-[62px] h-[62px] rounded-2xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-md flex items-center justify-center text-[color:var(--text-primary)] font-bold text-lg">
+                    <div className="w-[62px] h-[62px] rounded-2xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] flex items-center justify-center text-[color:var(--text-primary)] font-bold text-lg">
                       {num}
                     </div>
                   </div>

src/app/components/footer.tsx

@@ -29,7 +29,7 @@ export const Footer = () => {
   const pathname = usePathname();
 
   return (
-    <footer className="footer-bg text-[color:var(--text-muted)] pt-8 pb-6 px-4 sm:px-6 lg:px-8 font-sans" dir={dir}>
+    <footer className="text-[color:var(--text-muted)] pt-8 pb-6 px-4 sm:px-6 lg:px-8 font-sans" dir={dir}>
       <div className="max-w-7xl mx-auto space-y-8">
         
         {/* CTA Banner */}
@@ -58,7 +58,7 @@ export const Footer = () => {
         </div>
 
         {/* Main Footer Content */}
-        <div className="bg-[color:var(--footer-surface-bg)] border border-[color:var(--border-05)] rounded-3xl p-8 lg:p-12 backdrop-blur-md en-shadow-left">
+        <div className="bg-[color:var(--footer-surface-bg)] border border-[color:var(--border-05)] rounded-3xl p-8 lg:p-12 en-shadow-left">
           <div className="grid grid-cols-1 lg:grid-cols-5 gap-12 lg:gap-8 mb-12">
             
             {/* Logo and About */}

src/app/components/header.tsx

@@ -244,7 +244,7 @@ export default function Header() {
         transition={{ duration: 0.8, ease: "easeOut" }}
         className={`flex items-center justify-between text-[color:var(--text-primary)] transition-all duration-700 ease-in-out w-full ${
           isScrolled
-            ? 'mt-4 max-w-4xl px-6 py-3 bg-[color:var(--glass-05)] backdrop-blur-lg border border-[color:var(--border-10)] rounded-full ' // حالت اسکرول شده: کپسول شناور
+            ? 'mt-4 max-w-5xl px-6 py-3 bg-[color:var(--glass-05)] backdrop-blur-lg border border-[color:var(--border-10)] rounded-full ' // حالت اسکرول شده: کپسول شناور
             : 'mt-0 max-w-7xl px-8 py-5 bg-[color:var(--glass-05)] backdrop-blur-md border-b border-x border-[color:var(--border-10)] rounded-t-none rounded-b-[2.5rem] ' // حالت بالای صفحه: چسبیده به سقف با پایین گرد
         }`}
         dir={dir}

src/app/globals.css

@@ -243,7 +243,7 @@ html.light .glass-rotating-border::before {
 
   --app-bg: #000918;
   --hero-bg: #050a15;
-  --footer-bg: #000918;
+  --footer-bg: #050D1C;
 
   --text-primary: #ffffff;
   --text-muted: #d1d5db; /* gray-300 */
@@ -264,8 +264,8 @@ html.light .glass-rotating-border::before {
   --global-surface-bg: #091120;
   --global-surface-bg-80: rgba(9, 17, 32, 0.80);
   --global-surface-border: rgba(30, 41, 59, 0.50); /* #1e293b/50 */
-  --footer-surface-bg: #0f1629;
+  --footer-surface-bg: #050D1C;
-  --footer-cta-from: #0b1426;
+  --footer-cta-from: #050D1C;
   --footer-cta-via: #0d1a30;
   --footer-cta-to: #0a1829;
   --footer-chip-bg: #131b2f;