Align Hero section to exact reference design with authentic artwork and 2x2 download badges
This commit is contained in:
alireza
parent
4a68f54c33
commit
6313361406
|
|
@ -1,407 +1,121 @@
|
|||
import React, { useState } 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';
|
||||
import React from 'react';
|
||||
|
||||
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 */}
|
||||
<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="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" />
|
||||
{/* Right Column (RTL Start): Main Titles & Download Store Badges */}
|
||||
<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">
|
||||
|
||||
{/* Subtle Grid Lines Overlay */}
|
||||
<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" />
|
||||
|
||||
<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>
|
||||
{/* Main Brand Title */}
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-black text-[#5cbbe2] tracking-tight leading-tight font-vazir">
|
||||
هوشان؛
|
||||
</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) */}
|
||||
<div className="grid grid-cols-2 gap-3 max-w-xl mx-auto lg:mx-0 pt-2">
|
||||
{/* 2x2 Grid of Store Badges */}
|
||||
<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">
|
||||
<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 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">
|
||||
<svg className="w-full h-full" viewBox="0 0 24 24" fill="none">
|
||||
<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">
|
||||
<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 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">
|
||||
<svg className="w-full h-full" viewBox="0 0 100 100" fill="none">
|
||||
<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 */}
|
||||
<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"
|
||||
/>
|
||||
{/* 3. Web App / iOS */}
|
||||
<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={() => {
|
||||
setSearchPrompt(tag);
|
||||
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"
|
||||
onClick={onOpenAuth}
|
||||
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"
|
||||
>
|
||||
{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 */}
|
||||
<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"
|
||||
{/* 4. Direct Download (Android APK) */}
|
||||
<a
|
||||
href="/storage/app/houshan-latest.apk"
|
||||
download
|
||||
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" />
|
||||
<span>شروع گفتگوی آنلاین رایگان</span>
|
||||
<ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
<div className="text-right flex flex-col justify-center">
|
||||
<span className="text-xs sm:text-sm font-extrabold text-white leading-tight">دانلود مستقیم</span>
|
||||
</div>
|
||||
<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) */}
|
||||
<div className="lg:col-span-6">
|
||||
<HeroAiVisual />
|
||||
</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>
|
||||
))}
|
||||
{/* Left Column (Artwork): Authentic Statue holding Laptop & Phone */}
|
||||
<div className="lg:col-span-6 order-1 lg:order-2 flex items-center justify-center relative">
|
||||
<div className="relative max-w-md sm:max-w-lg lg:max-w-xl w-full flex items-center justify-center">
|
||||
<img
|
||||
src="/storage/banner/herosection-1.png"
|
||||
alt="هوشان؛ دستیار هوش مصنوعی شما"
|
||||
className="w-full h-auto object-contain max-h-[580px] drop-shadow-xl select-none transition-transform duration-300 hover:scale-[1.01]"
|
||||
/>
|
||||
</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]} ←
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue