Align Hero section to exact reference design with authentic artwork and 2x2 download badges

src/components/home/Hero.tsx

@@ -1,407 +1,121 @@
-import React, { useState } from 'react';
+import React from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import { 
-  Sparkles, 
-  Bot, 
-  ArrowLeft, 
-  MessageSquare, 
-  Zap, 
-  Star,
-  Flame,
-  Atom,
-  Briefcase,
-  Search,
-  CheckCircle2,
-  ShieldCheck,
-  Send,
-  Cpu,
-  TrendingUp,
-  Award,
-  Layers,
-  Sparkle
-} from 'lucide-react';
-import { HeroAiVisual } from './HeroAiVisual';
 
 interface HeroProps {
   onOpenAuth: () => void;
 }
 
 export const Hero: React.FC<HeroProps> = ({ onOpenAuth }) => {
-  const navigate = useNavigate();
-  const [activeCategory, setActiveCategory] = useState<'fiction' | 'science' | 'tech' | 'expert'>('fiction');
-  const [searchPrompt, setSearchPrompt] = useState<string>('');
-
-  const fictionalBots = [
-    { name: 'هری پاتر', role: 'جادوگر هاگوارتز', tag: 'شخصیت داستانی', icon: '🪄', prompt: 'سلام هری! جادوی جدیدی یاد گرفتی؟', color: 'from-amber-600 to-red-600' },
-    { name: 'بتمن', role: 'شوالیه تاریکی', tag: 'شخصیت داستانی', icon: '🦇', prompt: 'سلام بروس وین! شهر گاتهام امنه؟', color: 'from-slate-700 to-slate-900' },
-    { name: 'شرلوک هولمز', role: 'کارآگاه مشاور', tag: 'شخصیت داستانی', icon: '🔍', prompt: 'سلام شرلوک! معمای جدیدی داری؟', color: 'from-amber-800 to-amber-950' },
-    { name: 'اسپایدرمن', role: 'مرد عنکبوتی', tag: 'شخصیت داستانی', icon: '🕷️', prompt: 'سلام پیتر پارکر! نیویورک چه خبر؟', color: 'from-red-600 to-blue-700' },
-    { name: 'جوکر', role: 'شاهزاده جرم و جنایت', tag: 'شخصیت داستانی', icon: '🃏', prompt: 'سلام جوکر! چرا اینقدر جدی؟', color: 'from-purple-700 to-emerald-700' },
-  ];
-
-  const scientistBots = [
-    { name: 'آلبرت انیشتین', role: 'نظریه نسبیت و فیزیک', tag: 'دانشمند', icon: '🌌', prompt: 'سلام پروفسور انیشتین! درباره نسبیت برام توضیح بده.', color: 'from-blue-600 to-indigo-800' },
-    { name: 'توماس ادیسون', role: 'مخترع و کارآفرین', tag: 'دانشمند', icon: '💡', prompt: 'سلام ادیسون! چطور تسلیم نشدی؟', color: 'from-yellow-600 to-amber-700' },
-    { name: 'ماری کوری', role: 'پیشگام رادیواکتیویته', tag: 'دانشمند', icon: '🔬', prompt: 'سلام بانو کوری! از کشفیاتت بگو.', color: 'from-teal-600 to-cyan-800' },
-    { name: 'آیزاک نیوتون', role: 'پایه‌گذار مکانیک کلاسیک', tag: 'دانشمند', icon: '🍎', prompt: 'سلام آقای نیوتون! داستان سیب واقعی بود؟', color: 'from-emerald-600 to-teal-800' },
-  ];
-
-  const techBots = [
-    { name: 'ایلان ماسک', role: 'تسلا، اسپیس‌ایکس و xAI', tag: 'رهبر فناوری', icon: '🚀', prompt: 'سلام ایلان! مریخ کی مستعمره میشه؟', color: 'from-rose-600 to-purple-800' },
-    { name: 'بیل گیتس', role: 'بنیان‌گذار مایکروسافت', tag: 'رهبر فناوری', icon: '💻', prompt: 'سلام بیل! آینده هوش مصنوعی چطوره؟', color: 'from-blue-600 to-cyan-700' },
-    { name: 'مارک زاکربرگ', role: 'متا و هوش مصنوعی Llama', tag: 'رهبر فناوری', icon: '🌐', prompt: 'سلام مارک! عینک‌های واقعیت افزوده چی میشن؟', color: 'from-indigo-600 to-blue-800' },
-    { name: 'جف بزوس', role: 'آمازون و بلو اوریجین', tag: 'رهبر فناوری', icon: '📦', prompt: 'سلام جف! راز موفقیت آمازون چی بود؟', color: 'from-amber-600 to-orange-700' },
-  ];
-
-  const expertBots = [
-    { name: 'مشاور سئو و محتوا', role: 'رشد ارگانیک و کلمات کلیدی', tag: 'دستیار تخصصی', icon: '📈', prompt: 'یک استراتژی کلمات کلیدی برای یک سایت آموزشی بنویس.', color: 'from-emerald-600 to-teal-700' },
-    { name: 'دستیار برنامه‌نویسی', role: 'معماری و کدنویسی فول‌استک', tag: 'دستیار تخصصی', icon: '👨‍💻', prompt: 'چگونه یک سیستم کش دو لایه در Node.js پیاده‌سازی کنم؟', color: 'from-blue-600 to-indigo-700' },
-    { name: 'مشاور مدیریت و مالی', role: 'استراتژی و تحلیل جریان نقدینگی', tag: 'دستیار تخصصی', icon: '📊', prompt: 'روش‌های کاهش هزینه‌های عملیاتی در استارتاپ‌ها را بگو.', color: 'from-amber-600 to-orange-700' },
-    { name: 'دستیار حقوقی و قراردادها', role: 'نگارش و بررسی بندهای قرارداد', tag: 'دستیار تخصصی', icon: '⚖️', prompt: 'بندهای مهم قرارداد محرمانگی (NDA) برای تیم فنی چیست؟', color: 'from-purple-600 to-indigo-800' },
-  ];
-
-  const currentBots = 
-    activeCategory === 'fiction' ? fictionalBots : 
-    activeCategory === 'science' ? scientistBots : 
-    activeCategory === 'tech' ? techBots : expertBots;
-
-  const quickPrompts = [
-    'استراتژی بازاریابی برای رشد استارتاپ',
-    'کد احراز هویت با JWT در پایتون',
-    'تحلیل صورت‌های مالی شرکت',
-    'تولید ایده برای سناریوی تبلیغاتی',
-  ];
-
-  const handleSearchSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (searchPrompt.trim()) {
-      navigate(`/chat?prompt=${encodeURIComponent(searchPrompt.trim())}`);
-    } else {
-      navigate('/chat');
-    }
-  };
-
   return (
-    <section className="relative pt-28 sm:pt-36 pb-20 overflow-hidden bg-radial-gradient">
+    <section className="relative pt-24 sm:pt-32 pb-16 sm:pb-24 bg-white overflow-hidden select-none">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
           
-      {/* Background Ambient Glows & Cyber Grid */}
+          {/* Right Column (RTL Start): Main Titles & Download Store Badges */}
-      <div className="absolute top-12 left-1/2 -translate-x-1/2 w-[700px] h-[350px] bg-gradient-to-b from-indigo-600/20 via-cyan-500/10 to-transparent rounded-full blur-[130px] pointer-events-none" />
+          <div className="lg:col-span-6 order-2 lg:order-1 text-center lg:text-right flex flex-col items-center lg:items-start justify-center">
-      <div className="absolute top-1/3 right-4 w-[350px] h-[300px] bg-cyan-500/10 rounded-full blur-[110px] pointer-events-none" />
-      <div className="absolute top-2/3 left-4 w-[350px] h-[300px] bg-purple-600/10 rounded-full blur-[120px] pointer-events-none" />
             
-      {/* Subtle Grid Lines Overlay */}
+            {/* Main Brand Title */}
-      <div className="absolute inset-0 bg-[linear-gradient(to_right,#1e293b10_1px,transparent_1px),linear-gradient(to_bottom,#1e293b10_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none" />
+            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-black text-[#5cbbe2] tracking-tight leading-tight font-vazir">
-
+              هوشان؛
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-        
-        {/* Top Announcement Badge */}
-        <div className="text-center mb-8">
-          <div className="inline-flex items-center gap-2.5 px-4 py-2 rounded-full bg-gradient-to-r from-indigo-900/60 via-slate-900/80 to-cyan-950/60 border border-cyan-500/30 text-cyan-300 text-xs sm:text-sm font-medium backdrop-blur-md shadow-lg hover:border-cyan-400/60 transition-all">
-            <span className="flex h-2 w-2 relative">
-              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
-              <span className="relative inline-flex rounded-full h-2 w-2 bg-cyan-500"></span>
-            </span>
-            <span className="font-bold">هوشان ۲.۰ رونمایی شد:</span>
-            <span className="text-slate-300">دسترسی بدون تحریم به GPT-4o، Claude 3.7 و DeepSeek R1</span>
-            <ArrowLeft className="w-3.5 h-3.5 text-cyan-400" />
-          </div>
-        </div>
-
-        {/* 2-Column Hero Grid: Left Visual Playground, Right High-Impact Copywriting */}
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-12 items-center mb-16 lg:mb-24">
-          
-          {/* Right Column: Hero Heading, Features & Search (lg:col-span-6 in RTL) */}
-          <div className="lg:col-span-6 space-y-6 text-center lg:text-right">
-            
-            <h1 className="text-3xl sm:text-5xl lg:text-5xl xl:text-6xl font-black text-white tracking-tight leading-[1.25] font-vazir">
-              قدرت برترین هوش‌های مصنوعی دنیا، <br />
-              <span className="text-gradient-primary">یکپارچه و در خدمت شما</span>
             </h1>
 
-            <p className="text-sm sm:text-base lg:text-lg text-slate-300 leading-relaxed max-w-xl mx-auto lg:mx-0">
+            {/* Subtitle */}
-              بدون نیاز به فیلترشکن، سیم‌کارت خارجی یا پرداخت دلاری؛ به قدرتمندترین مدل‌های زبانی جهان و دستیارهای هوشمند اختصاصی برای کسب‌وکارها، مدیران و متخصصان دسترسی داشته باشید.
+            <p className="text-xl sm:text-2xl lg:text-3xl font-bold text-[#5cbbe2] mt-2 sm:mt-3 mb-8 lg:mb-10 font-vazir">
+              دستیار هوش مصنوعی شما
             </p>
 
-            {/* App Store & Web App Download Badges (Matching Original Houshan.ai) */}
+            {/* 2x2 Grid of Store Badges */}
-            <div className="grid grid-cols-2 gap-3 max-w-xl mx-auto lg:mx-0 pt-2">
+            <div className="grid grid-cols-2 gap-3 sm:gap-4 w-full max-w-md mx-auto lg:mx-0">
               
-              {/* Cafe Bazaar */}
+              {/* 1. Cafe Bazaar */}
               <a
                 href="https://cafebazaar.ir/app/com.example.hoshan"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="group p-3 rounded-2xl bg-slate-900/80 hover:bg-slate-800/90 border border-emerald-500/30 hover:border-emerald-400/60 transition-all duration-300 flex items-center gap-3 shadow-lg hover:shadow-emerald-500/10 hover:-translate-y-0.5"
+                className="bg-black hover:bg-neutral-900 border border-neutral-800 hover:border-neutral-700 text-white rounded-xl sm:rounded-2xl p-2.5 sm:p-3 flex items-center justify-between shadow-md hover:scale-[1.02] active:scale-[0.98] transition-all duration-150 group"
               >
-                <div className="w-10 h-10 rounded-xl bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform text-emerald-400 font-bold">
+                <div className="text-right flex flex-col justify-center">
-                  🛍️
+                  <span className="text-[10px] sm:text-xs text-gray-300 font-medium leading-none mb-1">دریافت از</span>
+                  <span className="text-xs sm:text-sm font-extrabold text-white leading-none">بازار</span>
                 </div>
-                <div className="text-right">
+                <div className="w-8 h-8 sm:w-9 sm:h-9 bg-emerald-950/40 rounded-lg flex items-center justify-center p-1 group-hover:scale-105 transition-transform flex-shrink-0">
-                  <span className="text-[10px] text-emerald-400 block font-medium">دریافت از</span>
+                  <svg className="w-full h-full" viewBox="0 0 24 24" fill="none">
-                  <span className="text-xs sm:text-sm font-bold text-white block">کافه‌بازار</span>
+                    <path d="M19 8H5C3.89543 8 3 8.89543 3 10V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V10C21 8.89543 20.1046 8 19 8Z" fill="#22c55e" />
+                    <path d="M8 8V6C8 3.79086 9.79086 2 12 2C14.2091 2 16 3.79086 16 6V8" stroke="#ffffff" strokeWidth="2" strokeLinecap="round" />
+                    <path d="M12 12V16M10 14H14" stroke="#ffffff" strokeWidth="1.5" strokeLinecap="round" />
+                  </svg>
                 </div>
               </a>
 
-              {/* Myket */}
+              {/* 2. Myket */}
               <a
                 href="https://myket.ir/app/com.example.hoshan"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="group p-3 rounded-2xl bg-slate-900/80 hover:bg-slate-800/90 border border-blue-500/30 hover:border-blue-400/60 transition-all duration-300 flex items-center gap-3 shadow-lg hover:shadow-blue-500/10 hover:-translate-y-0.5"
+                className="bg-black hover:bg-neutral-900 border border-neutral-800 hover:border-neutral-700 text-white rounded-xl sm:rounded-2xl p-2.5 sm:p-3 flex items-center justify-between shadow-md hover:scale-[1.02] active:scale-[0.98] transition-all duration-150 group"
               >
-                <div className="w-10 h-10 rounded-xl bg-blue-500/20 border border-blue-500/30 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform text-blue-400 font-bold">
+                <div className="text-right flex flex-col justify-center">
-                  🏪
+                  <span className="text-[10px] sm:text-xs text-gray-300 font-medium leading-none mb-1">دریافت از</span>
+                  <span className="text-xs sm:text-sm font-extrabold text-white leading-none">مایکت</span>
                 </div>
-                <div className="text-right">
+                <div className="w-8 h-8 sm:w-9 sm:h-9 bg-sky-950/40 rounded-lg flex items-center justify-center p-1 group-hover:scale-105 transition-transform flex-shrink-0">
-                  <span className="text-[10px] text-blue-400 block font-medium">دریافت از</span>
+                  <svg className="w-full h-full" viewBox="0 0 100 100" fill="none">
-                  <span className="text-xs sm:text-sm font-bold text-white block">مایکت</span>
+                    <circle cx="50" cy="50" r="46" fill="#0091ea" />
+                    <path d="M30 38C30 38 34 32 40 32C46 32 48 37 48 42V68H40V44C40 40 38 38 35 38C32 38 30 40 30 44V68H22V34H30V38Z" fill="#ffffff" />
+                    <path d="M52 38C52 38 56 32 62 32C68 32 70 37 70 42V68H62V44C62 40 60 38 57 38C54 38 52 40 52 44V68H44V34H52V38Z" fill="#ffffff" />
+                  </svg>
                 </div>
               </a>
 
-              {/* Direct APK Download */}
+              {/* 3. Web App / iOS */}
-              <a
-                href="https://api.houshan.ai/apk"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="group p-3 rounded-2xl bg-slate-900/80 hover:bg-slate-800/90 border border-cyan-500/30 hover:border-cyan-400/60 transition-all duration-300 flex items-center gap-3 shadow-lg hover:shadow-cyan-500/10 hover:-translate-y-0.5"
-              >
-                <div className="w-10 h-10 rounded-xl bg-cyan-500/20 border border-cyan-500/30 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform text-cyan-400 font-bold">
-                  🤖
-                </div>
-                <div className="text-right">
-                  <span className="text-[10px] text-cyan-400 block font-medium">دانلود مستقیم</span>
-                  <span className="text-xs sm:text-sm font-bold text-white block">نسخه اندروید (APK)</span>
-                </div>
-              </a>
-
-              {/* Web App & iOS */}
-              <a
-                href="https://web.houshan.ai/"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="group p-3 rounded-2xl bg-gradient-to-r from-indigo-900/70 to-blue-900/70 hover:from-indigo-800/90 hover:to-blue-800/90 border border-indigo-500/40 hover:border-indigo-400/70 transition-all duration-300 flex items-center gap-3 shadow-lg hover:shadow-indigo-500/20 hover:-translate-y-0.5"
-              >
-                <div className="w-10 h-10 rounded-xl bg-indigo-500/30 border border-indigo-500/40 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform text-white font-bold">
-                  🍎
-                </div>
-                <div className="text-right">
-                  <span className="text-[10px] text-indigo-300 block font-medium">بدون نیاز به نصب</span>
-                  <span className="text-xs sm:text-sm font-bold text-white block">نسخه وب و iOS</span>
-                </div>
-              </a>
-
-            </div>
-
-            {/* Quick Prompt Search / Input Bar */}
-            <form 
-              onSubmit={handleSearchSubmit} 
-              className="relative max-w-xl mx-auto lg:mx-0 group pt-2"
-            >
-              <div className="relative flex items-center rounded-2xl bg-slate-900/90 border border-cyan-500/30 p-2 shadow-2xl backdrop-blur-xl group-focus-within:border-cyan-400 group-focus-within:shadow-[0_0_25px_rgba(6,182,212,0.25)] transition-all">
-                <div className="p-2 text-slate-400">
-                  <Bot className="w-5 h-5 text-cyan-400" />
-                </div>
-                <input
-                  type="text"
-                  value={searchPrompt}
-                  onChange={(e) => setSearchPrompt(e.target.value)}
-                  placeholder="از هوشان هر سوالی دارید بپرسید (مثال: طرح کسب‌وکار یا کد پایتون)..."
-                  className="w-full bg-transparent text-white placeholder-slate-400 text-xs sm:text-sm px-2 focus:outline-none font-vazir"
-                />
               <button
-                  type="submit"
-                  className="btn-donya-primary px-4 sm:px-6 py-2.5 rounded-xl font-bold text-xs sm:text-sm flex items-center gap-1.5 shrink-0"
-                >
-                  <span>شروع گفتگو</span>
-                  <Send className="w-3.5 h-3.5 -scale-x-100" />
-                </button>
-              </div>
-
-              {/* Quick Prompt Tags */}
-              <div className="flex flex-wrap items-center justify-center lg:justify-start gap-2 mt-3 text-[11px] text-slate-400">
-                <span className="text-slate-400 flex items-center gap-1">
-                  <Sparkle className="w-3 h-3 text-amber-400" />
-                  پیشنهاد سریع:
-                </span>
-                {quickPrompts.map((tag, idx) => (
-                  <button
-                    key={idx}
                 type="button"
-                    onClick={() => {
+                onClick={onOpenAuth}
-                      setSearchPrompt(tag);
+                className="bg-black hover:bg-neutral-900 border border-neutral-800 hover:border-neutral-700 text-white rounded-xl sm:rounded-2xl p-2.5 sm:p-3 flex items-center justify-between shadow-md hover:scale-[1.02] active:scale-[0.98] transition-all duration-150 group cursor-pointer text-right"
-                      navigate(`/chat?prompt=${encodeURIComponent(tag)}`);
-                    }}
-                    className="px-2.5 py-1 rounded-lg bg-slate-900/60 border border-white/5 text-slate-300 hover:text-cyan-300 hover:border-cyan-500/30 transition-all cursor-pointer"
               >
-                    {tag}
+                <div className="text-right flex flex-col justify-center">
+                  <span className="text-xs sm:text-sm font-extrabold text-white leading-tight">نسخه وب / ios</span>
+                </div>
+                <div className="w-8 h-8 sm:w-9 sm:h-9 bg-neutral-800 rounded-lg flex items-center justify-center p-1.5 group-hover:scale-105 transition-transform flex-shrink-0">
+                  <svg className="w-full h-full text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <circle cx="12" cy="12" r="10" />
+                    <line x1="2" y1="12" x2="22" y2="12" />
+                    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+                  </svg>
+                </div>
               </button>
-                ))}
-              </div>
-            </form>
 
-            {/* CTAs */}
+              {/* 4. Direct Download (Android APK) */}
-            <div className="flex flex-wrap items-center justify-center lg:justify-start gap-4 pt-1">
+              <a
-              <Link
+                href="/storage/app/houshan-latest.apk"
-                to="/chat"
+                download
-                className="btn-donya-primary px-8 py-3.5 rounded-xl font-bold flex items-center gap-2 text-base shadow-xl group"
+                className="bg-black hover:bg-neutral-900 border border-neutral-800 hover:border-neutral-700 text-white rounded-xl sm:rounded-2xl p-2.5 sm:p-3 flex items-center justify-between shadow-md hover:scale-[1.02] active:scale-[0.98] transition-all duration-150 group cursor-pointer"
               >
-                <Sparkles className="w-5 h-5 text-cyan-300 group-hover:rotate-12 transition-transform" />
+                <div className="text-right flex flex-col justify-center">
-                <span>شروع گفتگوی آنلاین رایگان</span>
+                  <span className="text-xs sm:text-sm font-extrabold text-white leading-tight">دانلود مستقیم</span>
-                <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
+                </div>
-              </Link>
+                <div className="w-8 h-8 sm:w-9 sm:h-9 bg-emerald-950/40 rounded-lg flex items-center justify-center p-1.5 group-hover:scale-105 transition-transform flex-shrink-0">
+                  <svg className="w-full h-full text-[#3ddc84]" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-4.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 2.23 12.95 2 12 2c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.73 3.26 5.5 5.01 5.5 7h13c0-1.99-1.23-3.74-2.97-4.84zM9 5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm6 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z" />
+                  </svg>
+                </div>
+              </a>
 
-              <Link
-                to="/models"
-                className="btn-donya-outline px-6 py-3.5 rounded-xl font-medium text-slate-300 flex items-center gap-2 text-base"
-              >
-                <Zap className="w-5 h-5 text-cyan-400" />
-                <span>مشاهده مدل‌های زبانی</span>
-              </Link>
-            </div>
-
-            {/* Micro Trust Indicators */}
-            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 pt-4 border-t border-white/10 text-[11px] text-slate-300">
-              <div className="flex items-center gap-2 justify-center lg:justify-start">
-                <CheckCircle2 className="w-4 h-4 text-cyan-400 shrink-0" />
-                <span>دسترسی بدون فیلترشکن</span>
-              </div>
-              <div className="flex items-center gap-2 justify-center lg:justify-start">
-                <CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
-                <span>پرداخت مستقیم ریالی</span>
-              </div>
-              <div className="flex items-center gap-2 justify-center lg:justify-start">
-                <CheckCircle2 className="w-4 h-4 text-indigo-400 shrink-0" />
-                <span>پاسخ‌دهی آنی (۰.۲s)</span>
-              </div>
-              <div className="flex items-center gap-2 justify-center lg:justify-start">
-                <CheckCircle2 className="w-4 h-4 text-amber-400 shrink-0" />
-                <span>پشتیبانی کامل زبان فارسی</span>
-              </div>
             </div>
 
           </div>
 
-          {/* Left Column: Interactive AI Visualizer & Live Sandbox (lg:col-span-6) */}
+          {/* Left Column (Artwork): Authentic Statue holding Laptop & Phone */}
-          <div className="lg:col-span-6">
+          <div className="lg:col-span-6 order-1 lg:order-2 flex items-center justify-center relative">
-            <HeroAiVisual />
+            <div className="relative max-w-md sm:max-w-lg lg:max-w-xl w-full flex items-center justify-center">
-          </div>
+              <img 
-
+                src="/storage/banner/herosection-1.png" 
-        </div>
+                alt="هوشان؛ دستیار هوش مصنوعی شما" 
-
+                className="w-full h-auto object-contain max-h-[580px] drop-shadow-xl select-none transition-transform duration-300 hover:scale-[1.01]" 
-        {/* AI Partners & Providers Logo Carousel (Matching Original Houshan.ai) */}
+              />
-        <div className="mb-16 py-6 px-4 rounded-2xl bg-slate-900/40 border border-white/5 backdrop-blur-md">
-          <div className="text-center mb-4">
-            <span className="text-xs font-semibold text-slate-400">
-              یکپارچه با پیشرفته‌ترین موتورها و زیرساخت‌های هوش مصنوعی جهان
-            </span>
-          </div>
-          <div className="flex flex-wrap items-center justify-center gap-6 sm:gap-10 opacity-80 hover:opacity-100 transition-opacity">
-            {[
-              { name: 'OpenAI ChatGPT', icon: '/storage/bot/llm/gpt.png' },
-              { name: 'Anthropic Claude', icon: '/storage/bot/llm/claude.png' },
-              { name: 'Google Gemini', icon: '/storage/bot/llm/gemini.png' },
-              { name: 'DeepSeek AI', icon: '/storage/bot/llm/deepseek.png' },
-              { name: 'Flux AI', icon: '/storage/bot/llm/flux.png' },
-              { name: 'Ideogram', icon: '/storage/bot/llm/ideogram.png' },
-              { name: 'Recraft AI', icon: '/storage/bot/llm/recraft.png' },
-              { name: 'Stable Diffusion', icon: '/storage/bot/llm/sdxl.png' },
-            ].map((p, i) => (
-              <div key={i} className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-slate-950/60 border border-white/5 hover:border-cyan-500/30 transition-all hover:scale-105">
-                <img src={p.icon} alt={p.name} className="w-5 h-5 object-contain" />
-                <span className="text-xs font-bold text-slate-300 font-english">{p.name}</span>
-              </div>
-            ))}
             </div>
           </div>
 
-        {/* Section: Interactive Character Bots & Specialized Personas */}
-        <div className="glass-panel p-6 sm:p-8 rounded-3xl max-w-6xl mx-auto shadow-2xl border border-white/10 relative overflow-hidden">
-          
-          {/* Subtle Ambient Light in Card */}
-          <div className="absolute top-0 right-1/4 w-96 h-32 bg-indigo-600/15 rounded-full blur-3xl pointer-events-none" />
-
-          <div className="flex flex-col sm:flex-row items-center justify-between gap-4 mb-6 border-b border-white/10 pb-5 relative z-10">
-            <div>
-              <h2 className="text-lg sm:text-xl font-black text-white flex items-center gap-2">
-                <Flame className="w-5 h-5 text-amber-400" />
-                <span>دستیارهای تخصصی و گفتگو با چهره‌های سرشناس</span>
-              </h2>
-              <p className="text-xs sm:text-sm text-slate-400 mt-1">
-                روی هر کاراکتر یا مشاور کلیک کنید تا وارد گفتگوی اختصاصی شوید
-              </p>
         </div>
-
-            {/* Category Switcher Tabs */}
-            <div className="flex items-center gap-1.5 bg-slate-900/90 p-1 rounded-xl border border-white/5 overflow-x-auto max-w-full">
-              <button
-                onClick={() => setActiveCategory('fiction')}
-                className={`px-3 py-1.5 rounded-lg text-xs sm:text-sm font-medium transition-all whitespace-nowrap cursor-pointer ${
-                  activeCategory === 'fiction' ? 'bg-indigo-600 text-white shadow-md' : 'text-slate-400 hover:text-white'
-                }`}
-              >
-                شخصیت‌های داستانی
-              </button>
-              <button
-                onClick={() => setActiveCategory('science')}
-                className={`px-3 py-1.5 rounded-lg text-xs sm:text-sm font-medium transition-all whitespace-nowrap cursor-pointer ${
-                  activeCategory === 'science' ? 'bg-indigo-600 text-white shadow-md' : 'text-slate-400 hover:text-white'
-                }`}
-              >
-                دانشمندان
-              </button>
-              <button
-                onClick={() => setActiveCategory('tech')}
-                className={`px-3 py-1.5 rounded-lg text-xs sm:text-sm font-medium transition-all whitespace-nowrap cursor-pointer ${
-                  activeCategory === 'tech' ? 'bg-indigo-600 text-white shadow-md' : 'text-slate-400 hover:text-white'
-                }`}
-              >
-                پیشگامان فناوری
-              </button>
-              <button
-                onClick={() => setActiveCategory('expert')}
-                className={`px-3 py-1.5 rounded-lg text-xs sm:text-sm font-medium transition-all whitespace-nowrap cursor-pointer ${
-                  activeCategory === 'expert' ? 'bg-indigo-600 text-white shadow-md' : 'text-slate-400 hover:text-white'
-                }`}
-              >
-                مشاوران تخصصی
-              </button>
-            </div>
-          </div>
-
-          {/* Persona Cards Grid */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 relative z-10">
-            {currentBots.map((bot, idx) => (
-              <Link
-                key={idx}
-                to={`/chat?prompt=${encodeURIComponent(bot.prompt)}&bot=${encodeURIComponent(bot.name)}`}
-                className="group relative overflow-hidden rounded-2xl bg-slate-900/70 border border-white/5 p-4 hover:border-cyan-500/40 transition-all duration-300 hover:-translate-y-1.5 hover:shadow-xl flex flex-col justify-between"
-              >
-                <div className={`absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl ${bot.color} opacity-20 rounded-full blur-xl group-hover:opacity-40 transition-opacity`} />
-                
-                <div className="flex items-start gap-3 mb-3 relative z-10">
-                  <div className="w-12 h-12 rounded-2xl bg-slate-800/90 flex items-center justify-center text-2xl border border-white/10 group-hover:scale-110 transition-transform shadow-inner">
-                    {bot.icon}
-                  </div>
-                  <div>
-                    <h3 className="font-bold text-white text-base group-hover:text-cyan-300 transition-colors">{bot.name}</h3>
-                    <span className="text-xs text-slate-400 block">{bot.role}</span>
-                  </div>
-                </div>
-
-                <div className="flex items-center justify-between mt-3 pt-3 border-t border-white/5 relative z-10">
-                  <span className="text-[11px] text-slate-400 flex items-center gap-1">
-                    <MessageSquare className="w-3.5 h-3.5 text-indigo-400" />
-                    گفتگوی فوری
-                  </span>
-                  <span className="text-xs text-indigo-400 font-bold group-hover:translate-x-[-3px] transition-transform">
-                    گپ با {bot.name.split(' ')[0]} &larr;
-                  </span>
-                </div>
-              </Link>
-            ))}
-          </div>
-
-        </div>
-
       </div>
     </section>
   );