From 69f489c401eb112941b63bef464471ab6a6e9774 Mon Sep 17 00:00:00 2001
From: alireza <alirezaameria2@gmail.com>
Date: Mon, 24 Aug 2026 11:16:10 +0330
Subject: [PATCH] Align Hero section with original Houshan.ai structure: app
 store badges and AI partner carousel

---
 src/components/home/Hero.tsx | 103 +++++++++++++++++++++++++++++++++--
 1 file changed, 99 insertions(+), 4 deletions(-)

diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx
index 12f8009..5fdd917 100644
--- a/src/components/home/Hero.tsx
+++ b/src/components/home/Hero.tsx
@@ -122,10 +122,79 @@ export const Hero: React.FC<HeroProps> = ({ onOpenAuth }) => {
               بدون نیاز به فیلترشکن، سیم‌کارت خارجی یا پرداخت دلاری؛ به قدرتمندترین مدل‌های زبانی جهان و دستیارهای هوشمند اختصاصی برای کسب‌وکارها، مدیران و متخصصان دسترسی داشته باشید.
             </p>
 
+            {/* App Store & Web App Download Badges (Matching Original Houshan.ai) */}
+            <div className="grid grid-cols-2 gap-3 max-w-xl mx-auto lg:mx-0 pt-2">
+              
+              {/* 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"
+              >
+                <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>
+                <div className="text-right">
+                  <span className="text-[10px] text-emerald-400 block font-medium">دریافت از</span>
+                  <span className="text-xs sm:text-sm font-bold text-white block">کافه‌بازار</span>
+                </div>
+              </a>
+
+              {/* 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"
+              >
+                <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>
+                <div className="text-right">
+                  <span className="text-[10px] text-blue-400 block font-medium">دریافت از</span>
+                  <span className="text-xs sm:text-sm font-bold text-white block">مایکت</span>
+                </div>
+              </a>
+
+              {/* Direct APK Download */}
+              <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"
+              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">
@@ -170,13 +239,13 @@ export const Hero: React.FC<HeroProps> = ({ onOpenAuth }) => {
             </form>
 
             {/* CTAs */}
-            <div className="flex flex-wrap items-center justify-center lg:justify-start gap-4 pt-2">
+            <div className="flex flex-wrap items-center justify-center lg:justify-start gap-4 pt-1">
               <Link
                 to="/chat"
                 className="btn-donya-primary px-8 py-3.5 rounded-xl font-bold flex items-center gap-2 text-base shadow-xl group"
               >
                 <Sparkles className="w-5 h-5 text-cyan-300 group-hover:rotate-12 transition-transform" />
-                <span>شروع رایگان و گفتگوی آنلاین</span>
+                <span>شروع گفتگوی آنلاین رایگان</span>
                 <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
               </Link>
 
@@ -185,7 +254,7 @@ export const Hero: React.FC<HeroProps> = ({ onOpenAuth }) => {
                 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>
+                <span>مشاهده مدل‌های زبانی</span>
               </Link>
             </div>
 
@@ -218,6 +287,32 @@ export const Hero: React.FC<HeroProps> = ({ onOpenAuth }) => {
 
         </div>
 
+        {/* 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">