Integrate authentic Houshan Owl logos, mascots, and Greek statue hero artwork

src/components/home/HeroAiVisual.tsx

@@ -102,6 +102,7 @@ $$\\min \\sum_{i,j} c_{ij} x_{ij} + \\lambda \\cdot E(traffic)$$
     }
   ];
 
+  const [viewMode, setViewMode] = useState<'statue' | 'sandbox'>('statue');
   const [activeTab, setActiveTab] = useState<string>('strategy');
   const [copied, setCopied] = useState<boolean>(false);
   const [displayText, setDisplayText] = useState<string>('');
@@ -141,22 +142,104 @@ $$\\min \\sum_{i,j} c_{ij} x_{ij} + \\lambda \\cdot E(traffic)$$
       <div className="absolute -top-10 -right-10 w-72 h-72 bg-cyan-500/20 rounded-full blur-[90px] pointer-events-none animate-pulse-glow" />
       <div className="absolute -bottom-10 -left-10 w-80 h-80 bg-indigo-600/25 rounded-full blur-[100px] pointer-events-none animate-pulse-glow" />
 
-      {/* Floating Badges */}
+      {/* Mode Switcher Pills (Statue Artwork vs Live Sandbox) */}
-      <div className="hidden sm:flex items-center gap-2 absolute -top-5 left-6 z-20 px-3.5 py-1.5 rounded-full bg-slate-900/90 border border-cyan-500/30 text-cyan-300 text-xs font-bold shadow-xl backdrop-blur-md animate-float">
+      <div className="flex items-center justify-center gap-2 mb-3 z-30 relative">
-        <span className="w-2 h-2 rounded-full bg-cyan-400 animate-ping" />
+        <div className="bg-slate-900/90 p-1 rounded-2xl border border-white/10 flex items-center gap-1 shadow-lg backdrop-blur-md">
-        <span>⚡ پاسخ‌دهی آنی بدون تحریم</span>
+          <button
+            onClick={() => setViewMode('statue')}
+            className={`px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-1.5 cursor-pointer ${
+              viewMode === 'statue'
+                ? 'bg-gradient-to-r from-indigo-600 to-indigo-500 text-white shadow-md'
+                : 'text-slate-400 hover:text-white'
+            }`}
+          >
+            <span>🏛️ دستیار هوشان</span>
+          </button>
+
+          <button
+            onClick={() => setViewMode('sandbox')}
+            className={`px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-1.5 cursor-pointer ${
+              viewMode === 'sandbox'
+                ? 'bg-gradient-to-r from-indigo-600 to-indigo-500 text-white shadow-md'
+                : 'text-slate-400 hover:text-white'
+            }`}
+          >
+            <Sparkles className="w-3.5 h-3.5 text-cyan-300" />
+            <span>⚡ تست زنده مدل‌ها</span>
+          </button>
+        </div>
       </div>
 
-      <div className="hidden sm:flex items-center gap-2 absolute -bottom-5 right-6 z-20 px-3.5 py-1.5 rounded-full bg-slate-900/90 border border-indigo-500/30 text-indigo-300 text-xs font-bold shadow-xl backdrop-blur-md animate-float-delayed">
+      {viewMode === 'statue' ? (
-        <ShieldCheck className="w-4 h-4 text-emerald-400" />
+        /* Authentic Original Hero Artwork View */
-        <span>پرداخت مستقیم شتاب و بدون نیاز به ارز خارجی</span>
+        <div className="relative rounded-3xl bg-slate-950/70 border border-white/10 shadow-2xl backdrop-blur-xl p-6 sm:p-8 flex flex-col items-center justify-center overflow-hidden min-h-[460px]">
-      </div>
+          {/* Halftone Aura Light */}
+          <div className="absolute inset-0 bg-gradient-to-t from-indigo-950/80 via-slate-950/40 to-transparent pointer-events-none" />
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-indigo-500/20 rounded-full blur-3xl pointer-events-none" />
 
-      {/* Main Glassmorphic AI Console Window */}
+          {/* Floating AI Feature Badges */}
-      <div className="relative rounded-2xl sm:rounded-3xl bg-slate-950/85 border border-white/10 shadow-[0_20px_60px_-15px_rgba(15,23,42,0.9)] backdrop-blur-xl overflow-hidden">
+          <div className="absolute top-6 right-4 sm:right-8 z-20 px-3 py-1.5 rounded-2xl bg-slate-900/90 border border-cyan-500/40 shadow-xl backdrop-blur-md flex items-center gap-2 animate-float">
-        
+            <span className="text-base">🎬</span>
-        {/* Top Window Header Bar */}
+            <div className="text-right">
-        <div className="flex items-center justify-between px-4 sm:px-6 py-3.5 border-b border-white/10 bg-slate-900/60">
+              <span className="text-[10px] text-cyan-300 block font-bold">تولید ویدیو</span>
+              <span className="text-[9px] text-slate-400 block">متن و تصویر به ویدیو</span>
+            </div>
+          </div>
+
+          <div className="absolute top-12 left-4 sm:left-6 z-20 px-3 py-1.5 rounded-2xl bg-slate-900/90 border border-purple-500/40 shadow-xl backdrop-blur-md flex items-center gap-2 animate-float-delayed">
+            <span className="text-base">🎨</span>
+            <div className="text-right">
+              <span className="text-[10px] text-purple-300 block font-bold">استودیو تصویر</span>
+              <span className="text-[9px] text-slate-400 block">کیفیت 4K و روتوش</span>
+            </div>
+          </div>
+
+          <div className="absolute bottom-6 right-6 sm:right-10 z-20 px-3 py-1.5 rounded-2xl bg-slate-900/90 border border-amber-500/40 shadow-xl backdrop-blur-md flex items-center gap-2 animate-float">
+            <span className="text-base">🎙️</span>
+            <div className="text-right">
+              <span className="text-[10px] text-amber-300 block font-bold">صوت و موسیقی</span>
+              <span className="text-[9px] text-slate-400 block">تولید آهنگ و TTS</span>
+            </div>
+          </div>
+
+          <div className="absolute bottom-8 left-4 sm:left-8 z-20 px-3 py-1.5 rounded-2xl bg-slate-900/90 border border-emerald-500/40 shadow-xl backdrop-blur-md flex items-center gap-2 animate-float-delayed">
+            <span className="text-base">🧠</span>
+            <div className="text-right">
+              <span className="text-[10px] text-emerald-300 block font-bold">استدلال عمیق</span>
+              <span className="text-[9px] text-slate-400 block">GPT-4o & DeepSeek R1</span>
+            </div>
+          </div>
+
+          {/* Original Greek Statue AI Artwork */}
+          <div className="relative z-10 max-w-[340px] sm:max-w-[400px] hover:scale-105 transition-transform duration-500 drop-shadow-[0_20px_40px_rgba(99,102,241,0.3)]">
+            <img 
+              src="/storage/banner/herosection-1.png" 
+              alt="هوشان؛ دستیار هوش مصنوعی شما" 
+              className="w-full h-auto object-contain select-none pointer-events-none"
+            />
+          </div>
+
+          {/* Bottom Quick Test Bar */}
+          <div className="relative z-20 mt-3 pt-3 border-t border-white/10 w-full flex items-center justify-between text-xs">
+            <span className="text-slate-400 flex items-center gap-1.5">
+              <Zap className="w-4 h-4 text-cyan-400" />
+              <span>پلتفرم یکپارچه هوش مصنوعی فارسی</span>
+            </span>
+            <button
+              onClick={() => setViewMode('sandbox')}
+              className="text-cyan-300 hover:text-white font-bold flex items-center gap-1 transition-colors cursor-pointer"
+            >
+              <span>تست زنده خروجی مدل‌ها</span>
+              <ArrowLeft className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        </div>
+      ) : (
+        /* Main Glassmorphic AI Console Window */
+        <div className="relative rounded-2xl sm:rounded-3xl bg-slate-950/85 border border-white/10 shadow-[0_20px_60px_-15px_rgba(15,23,42,0.9)] backdrop-blur-xl overflow-hidden">
+          
+          {/* Top Window Header Bar */}
+          <div className="flex items-center justify-between px-4 sm:px-6 py-3.5 border-b border-white/10 bg-slate-900/60">
           
           {/* Window Buttons */}
           <div className="flex items-center gap-2">
@@ -301,9 +384,9 @@ $$\\min \\sum_{i,j} c_{ij} x_{ij} + \\lambda \\cdot E(traffic)$$
           </div>
 
         </div>
-
       </div>
+    )}
 
-    </div>
+  </div>
-  );
+);
 };

src/components/layout/Footer.tsx

@@ -24,8 +24,8 @@ export const Footer: React.FC = () => {
         {/* Top Newsletter & About Bar */}
         <div className="glass-panel p-6 sm:p-8 rounded-2xl mb-12 border border-white/5 flex flex-col lg:flex-row items-center justify-between gap-6">
           <div className="flex items-center gap-4">
-            <div className="w-12 h-12 rounded-xl bg-indigo-600/20 border border-indigo-500/30 flex items-center justify-center text-indigo-400 shrink-0">
+            <div className="w-12 h-12 rounded-xl bg-indigo-600/20 border border-indigo-500/30 flex items-center justify-center p-2 shrink-0">
-              <Bot className="w-6 h-6" />
+              <img src="/storage/banner/owl_logo.png" alt="Houshan AI" className="w-full h-full object-contain" />
             </div>
             <div>
               <h3 className="text-base sm:text-lg font-bold text-white">عضویت در خبرنامه هوش مصنوعی هوشان</h3>
@@ -56,9 +56,12 @@ export const Footer: React.FC = () => {
           {/* Column 1: Brand & Bio */}
           <div>
             <div className="flex items-center gap-2 mb-4">
+              <div className="w-8 h-8 rounded-lg bg-indigo-500/20 border border-indigo-500/30 p-1 flex items-center justify-center">
+                <img src="/storage/banner/owl_logo.png" alt="Houshan AI" className="w-full h-full object-contain" />
+              </div>
               <span className="text-xl font-extrabold text-white">{siteInfo.name}</span>
               <span className="px-1.5 py-0.5 text-[10px] font-bold rounded bg-indigo-500/20 text-indigo-300 border border-indigo-500/30">
-                AI Platform
+                AI
               </span>
             </div>
             <p className="text-xs sm:text-sm text-slate-400 leading-relaxed mb-6">

src/components/layout/Navbar.tsx

@@ -69,13 +69,17 @@ export const Navbar: React.FC<NavbarProps> = ({ onOpenAuth }) => {
           
           {/* Right: Logo & Brand */}
           <Link to="/" className="flex items-center gap-3 group">
-            <div className="relative flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-tr from-indigo-600 via-indigo-500 to-cyan-400 p-[1px] shadow-lg shadow-indigo-500/25 group-hover:scale-105 transition-transform">
+            <div className="relative flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-tr from-indigo-600 via-indigo-500 to-cyan-400 p-[1.5px] shadow-lg shadow-indigo-500/25 group-hover:scale-105 transition-transform overflow-hidden">
-              <div className="w-full h-full bg-slate-950 rounded-[11px] flex items-center justify-center">
+              <div className="w-full h-full bg-slate-950 rounded-[10px] flex items-center justify-center p-1">
-                <Bot className="w-5 h-5 text-indigo-400 group-hover:text-cyan-300 transition-colors" />
+                <img 
+                  src="/storage/banner/owl_logo.png" 
+                  alt="Houshan AI Logo" 
+                  className="w-full h-full object-contain"
+                />
               </div>
-              <span className="absolute -top-1 -right-1 flex h-3 w-3">
+              <span className="absolute -top-1 -right-1 flex h-2.5 w-2.5">
                 <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-3 w-3 bg-cyan-500"></span>
+                <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-cyan-500"></span>
               </span>
             </div>