Align Hero section with original Houshan.ai structure: app store badges and AI partner carousel
This commit is contained in:
parent
9fa982bc64
commit
69f489c401
|
|
@ -122,10 +122,79 @@ export const Hero: React.FC<HeroProps> = ({ onOpenAuth }) => {
|
||||||
بدون نیاز به فیلترشکن، سیمکارت خارجی یا پرداخت دلاری؛ به قدرتمندترین مدلهای زبانی جهان و دستیارهای هوشمند اختصاصی برای کسبوکارها، مدیران و متخصصان دسترسی داشته باشید.
|
بدون نیاز به فیلترشکن، سیمکارت خارجی یا پرداخت دلاری؛ به قدرتمندترین مدلهای زبانی جهان و دستیارهای هوشمند اختصاصی برای کسبوکارها، مدیران و متخصصان دسترسی داشته باشید.
|
||||||
</p>
|
</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 */}
|
{/* Quick Prompt Search / Input Bar */}
|
||||||
<form
|
<form
|
||||||
onSubmit={handleSearchSubmit}
|
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="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">
|
<div className="p-2 text-slate-400">
|
||||||
|
|
@ -170,13 +239,13 @@ export const Hero: React.FC<HeroProps> = ({ onOpenAuth }) => {
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
{/* CTAs */}
|
{/* 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
|
<Link
|
||||||
to="/chat"
|
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"
|
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" />
|
<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" />
|
<ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
|
||||||
</Link>
|
</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"
|
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" />
|
<Zap className="w-5 h-5 text-cyan-400" />
|
||||||
<span>مشاهده و مقایسه تمام مدلها</span>
|
<span>مشاهده مدلهای زبانی</span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -218,6 +287,32 @@ export const Hero: React.FC<HeroProps> = ({ onOpenAuth }) => {
|
||||||
|
|
||||||
</div>
|
</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 */}
|
{/* 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">
|
<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">
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue