Mr.Gay100
/
HoushaWebsite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
alireza 2026-08-24 11:45:41 +03:30
parent 0e5625ca4a
commit 41d4d2af80
11 changed files with 114 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/storage/banner/herosection-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 KiB

BIN
public/storage/banner/owl_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
public/storage/bot/owl_coding.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
public/storage/bot/owl_creative.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
public/storage/bot/owl_engineer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 121 KiB

BIN
public/storage/bot/owl_flash.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
public/storage/bot/owl_professor.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 293 KiB

BIN
src/assets/hero-original.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 KiB

101
src/components/home/HeroAiVisual.tsx
View File

@ -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,18 +142,100 @@ $$\\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 */}
<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">
<span className="w-2 h-2 rounded-full bg-cyan-400 animate-ping" />
<span>⚡ پاسخ‌دهی آنی بدون تحریم</span>
{/* Mode Switcher Pills (Statue Artwork vs Live Sandbox) */}
<div className="flex items-center justify-center gap-2 mb-3 z-30 relative">
<div className="bg-slate-900/90 p-1 rounded-2xl border border-white/10 flex items-center gap-1 shadow-lg backdrop-blur-md">
<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">
<ShieldCheck className="w-4 h-4 text-emerald-400" />
<span>پرداخت مستقیم شتاب و بدون نیاز به ارز خارجی</span>
{viewMode === 'statue' ? (
/* Authentic Original Hero Artwork View */
<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]">
{/* 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" />
{/* Floating AI Feature Badges */}
<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>
<div className="text-right">
<span className="text-[10px] text-cyan-300 block font-bold">تولید ویدیو</span>
<span className="text-[9px] text-slate-400 block">متن و تصویر به ویدیو</span>
</div>
</div>
{/* Main Glassmorphic AI Console Window */}
<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 */}
@ -301,8 +384,8 @@ $$\\min \\sum_{i,j} c_{ij} x_{ij} + \\lambda \\cdot E(traffic)$$
</div>
</div>
</div>
)}
</div>
);

9
src/components/layout/Footer.tsx
View File

@ -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">
<Bot className="w-6 h-6" />
<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">
<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">

14
src/components/layout/Navbar.tsx
View File

@ -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="w-full h-full bg-slate-950 rounded-[11px] flex items-center justify-center">
<Bot className="w-5 h-5 text-indigo-400 group-hover:text-cyan-300 transition-colors" />
<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-[10px] flex items-center justify-center p-1">
<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>