Align Hero section with original Houshan.ai structure: app store badges and AI partner carousel

This commit is contained in:
alireza 2026-08-24 11:16:10 +03:30
parent 9fa982bc64
commit 69f489c401
1 changed files with 99 additions and 4 deletions

View File

@ -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">