Update index.html

index.html

@@ -8,112 +8,219 @@
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
     
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest"></script>
+
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap" rel="stylesheet">
-    
-    <!-- Babel for JSX transformation in browser -->
-    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 
     <style>
-      body {
-        font-family: 'Vazirmatn', sans-serif;
-        background-color: #0f172a;
-        color: white;
-        -webkit-tap-highlight-color: transparent;
-        overflow-x: hidden;
-        margin: 0;
-        padding: 0;
-      }
-      /* WordPress Compatibility Fixes */
-      #root {
-        min-height: 100vh;
-        width: 100%;
-        position: relative;
-        z-index: 10;
-      }
-      
-      ::-webkit-scrollbar {
-        width: 6px;
-      }
-      ::-webkit-scrollbar-track {
-        background: #0f172a;
-      }
-      ::-webkit-scrollbar-thumb {
-        background: #334155;
-        border-radius: 3px;
-      }
-      ::-webkit-scrollbar-thumb:hover {
-        background: #475569;
-      }
-      /* Custom Animations */
-      @keyframes gradient {
-          0% { background-position: 0% 50%; }
-          50% { background-position: 100% 50%; }
-          100% { background-position: 0% 50%; }
-      }
-      .animate-gradient-x {
-          animation: gradient 3s ease infinite;
-      }
-      
-      .glass-panel {
-          background: rgba(19, 23, 34, 0.8);
-          backdrop-filter: blur(12px);
-          -webkit-backdrop-filter: blur(12px);
-          border: 1px solid rgba(255, 255, 255, 0.05);
-      }
-    </style>
+        body {
+            font-family: 'Vazirmatn', sans-serif;
+            background-color: #0f172a;
+            color: white;
+            -webkit-tap-highlight-color: transparent;
+            overflow-x: hidden;
+            margin: 0;
+            padding: 0;
+        }
+
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: #0f172a; }
+        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: #475569; }
+
+        /* Animations mimicking Framer Motion */
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-20px); }
+        }
+        
+        @keyframes pulse-glow {
+            0%, 100% { opacity: 0.5; transform: scale(1); }
+            50% { opacity: 1; transform: scale(1.1); }
+        }
+
+        @keyframes blob-move {
+            0% { transform: translate(0, 0) scale(1); }
+            33% { transform: translate(30px, -50px) scale(1.1); }
+            66% { transform: translate(-20px, 20px) scale(0.9); }
+            100% { transform: translate(0, 0) scale(1); }
+        }
+
+        @keyframes rotate-slow {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        @keyframes gradient-x {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+
+        @keyframes fade-in-up {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        @keyframes particle-rise {
+            0% { transform: translateY(110vh); opacity: 0; }
+            20% { opacity: 0.5; }
+            80% { opacity: 0.5; }
+            100% { transform: translateY(-10vh); opacity: 0; }
+        }
 
-    <!-- Import Map to resolve modules -->
-    <script type="importmap">
+        .animate-blob { animation: blob-move 20s infinite alternate; }
+        .animate-gradient-text { background-size: 200% auto; animation: gradient-x 4s linear infinite; }
+        .fade-in-entry { animation: fade-in-up 0.8s ease-out forwards; opacity: 0; }
+        
+        /* Utility classes */
+        .glass-panel {
+            background: rgba(19, 23, 34, 0.8);
+            backdrop-filter: blur(16px);
+            -webkit-backdrop-filter: blur(16px);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+        }
+
+        .hover-shine {
+            position: relative;
+            overflow: hidden;
+        }
+        .hover-shine::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(to right, transparent, rgba(255,255,255,0.05), transparent);
+            transform: translateX(-100%) skewX(-15deg);
+            transition: transform 0.5s;
+        }
+        .hover-shine:hover::after {
+            transform: translateX(100%) skewX(-15deg);
+        }
+
+        .particle {
+            position: absolute;
+            width: 4px;
+            height: 4px;
+            background: white;
+            border-radius: 50%;
+            filter: blur(1px);
+        }
+    </style>
+<script type="importmap">
 {
   "imports": {
-    "react": "https://esm.sh/react@18.2.0",
-    "react-dom/client": "https://esm.sh/react-dom@18.2.0/client",
-    "framer-motion": "https://esm.sh/framer-motion@10.16.4",
-    "lucide-react": "https://esm.sh/lucide-react@0.292.0",
+    "react": "https://esm.sh/react@^19.2.4",
     "react-dom/": "https://esm.sh/react-dom@^19.2.4/",
-    "react/": "https://esm.sh/react@^19.2.4/"
+    "react/": "https://esm.sh/react@^19.2.4/",
+    "lucide-react": "https://esm.sh/lucide-react@^0.563.0",
+    "framer-motion": "https://esm.sh/framer-motion@^12.29.2"
   }
 }
 </script>
 </head>
 <body>
-    <div id="root"></div>
-
-    <!-- MAIN APPLICATION SCRIPT -->
-    <script type="text/babel" data-type="module">
-        import React, { useState, useEffect } from 'react';
-        import ReactDOM from 'react-dom/client';
-        import { motion, AnimatePresence } from 'framer-motion';
-        import { 
-            Mic2, 
-            Wand2, 
-            Podcast, 
-            Fingerprint, 
-            Activity, 
-            Music,
-            Settings,
-            User,
-            Bell,
-            ArrowLeft,
-            Sparkles,
-            Play,
-            Square,
-            Volume2,
-            X
-        } from 'lucide-react';
-
-        // --- CONSTANTS & DATA ---
-        const APP_NAME = "آوا هوش";
 
+    <!-- Background Effects -->
+    <div class="fixed inset-0 z-0 overflow-hidden pointer-events-none bg-[#0B0F19]">
+        <!-- Tech Grid -->
+        <div class="absolute inset-0 opacity-[0.04]" style="background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 50px 50px;"></div>
+
+        <!-- Orbs -->
+        <div class="absolute -top-[10%] -right-[20%] w-[600px] h-[600px] bg-gradient-to-br from-violet-600/20 to-indigo-600/20 rounded-full blur-[120px] animate-blob"></div>
+        <div class="absolute top-[40%] -left-[20%] w-[500px] h-[500px] bg-gradient-to-tr from-blue-600/15 to-cyan-500/15 rounded-full blur-[100px] animate-blob" style="animation-delay: -5s;"></div>
+        <div class="absolute -bottom-20 -right-20 w-80 h-80 bg-emerald-500/5 rounded-full blur-[80px] animate-blob" style="animation-delay: -10s;"></div>
+        
+        <!-- Particles Container (Populated by JS) -->
+        <div id="particles-container"></div>
+        
+        <!-- Vignette -->
+        <div class="absolute inset-0 bg-gradient-to-b from-transparent via-[#0B0F19]/60 to-[#0B0F19]"></div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="relative z-10 min-h-screen pb-10">
+        
+        <!-- Header -->
+        <header class="flex flex-col items-center justify-center pt-8 pb-4 fade-in-entry" style="animation-delay: 0.1s;">
+            <div class="relative group cursor-pointer mb-4">
+                <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-violet-600 to-indigo-600 flex items-center justify-center shadow-2xl shadow-indigo-500/40 ring-4 ring-white/5 transition-transform duration-500 hover:scale-105">
+                     <span class="text-4xl font-black text-white pb-2">آ</span>
+                </div>
+                <span class="absolute -top-1 -right-1 flex h-4 w-4">
+                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
+                  <span class="relative inline-flex rounded-full h-4 w-4 bg-cyan-500 border-4 border-[#0B0F19]"></span>
+                </span>
+            </div>
+            <h1 class="text-xl font-bold text-slate-200 tracking-wide opacity-90">آوا هوش</h1>
+        </header>
+
+        <!-- Image Slider -->
+        <div class="px-6 mb-6 fade-in-entry" style="animation-delay: 0.2s;">
+            <div class="relative w-full aspect-[2/1] rounded-[24px] overflow-hidden shadow-2xl ring-1 ring-white/10 group z-20 bg-slate-800">
+                <div id="slider-images" class="absolute inset-0 w-full h-full">
+                    <!-- Images injected by JS -->
+                </div>
+                <div class="absolute inset-0 bg-gradient-to-t from-[#0B0F19]/80 via-transparent to-transparent opacity-80"></div>
+                <!-- Dots -->
+                <div id="slider-dots" class="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5 z-10">
+                    <!-- Dots injected by JS -->
+                </div>
+            </div>
+        </div>
+
+        <!-- Hero Text -->
+        <div class="px-6 pt-2 pb-6 text-center fade-in-entry" style="animation-delay: 0.3s;">
+            <h2 class="text-[2rem] font-black text-white mb-4 leading-[1.3] tracking-tight">
+              دنیای صدا را <br />
+              <span class="relative inline-block px-2">
+                <span class="absolute inset-0 bg-indigo-500/10 blur-xl rounded-full transform rotate-3"></span>
+                <span class="relative text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-cyan-300 animate-gradient-text">
+                   با هوش مصنوعی
+                </span>
+              </span>
+              <br/>
+              <span class="text-white">متحول کنید</span>
+            </h2>
+            <p class="text-slate-400 text-sm leading-7 font-light max-w-[80%] mx-auto opacity-80">
+              تکنولوژی پیشرفته برای خلق، ویرایش و تبدیل صدا
+            </p>
+        </div>
+
+        <!-- Features Grid -->
+        <div class="px-6">
+            <div id="features-grid" class="grid grid-cols-2 gap-4 sm:gap-6">
+                <!-- Features injected by JS -->
+            </div>
+
+            <!-- Special Feature -->
+            <div id="special-feature-container" class="mt-8 mb-4 fade-in-entry" style="animation-delay: 0.6s;">
+                <!-- Special Feature injected by JS -->
+            </div>
+
+            <div class="text-center mt-10 opacity-40 pb-6">
+                <p class="text-[10px] text-slate-300 font-light tracking-widest">
+                  POWERED BY AVA HOOSH • VER 2.0
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // --- Data ---
         const FEATURES = [
             {
                 id: 'tts',
                 title: 'تبدیل متن به گفتار',
                 subtitle: '۳۰ گوینده حرفه‌ای',
-                icon: Mic2,
+                icon: 'mic-2',
                 colorFrom: 'from-blue-500',
                 colorTo: 'to-cyan-400',
                 isHot: true
@@ -122,23 +229,23 @@
                 id: 'voice-changer',
                 title: 'تغییر صدا',
                 subtitle: 'مدل‌های جذاب فارسی',
-                icon: Wand2,
+                icon: 'wand-2',
                 colorFrom: 'from-violet-500',
                 colorTo: 'to-purple-500'
             },
             {
                 id: 'podcast',
                 title: 'ساخت پادکست',
-                subtitle: 'تولید خودکار با هوش مصنوعی',
-                icon: Podcast,
+                subtitle: 'تولید خودکار با AI',
+                icon: 'podcast',
                 colorFrom: 'from-pink-500',
                 colorTo: 'to-rose-500'
             },
             {
                 id: 'clone',
                 title: 'کلون کردن صدا',
-                subtitle: 'شبیه‌سازی دقیق صدا',
-                icon: Fingerprint,
+                subtitle: 'شبیه‌سازی دقیق',
+                icon: 'fingerprint',
                 colorFrom: 'from-amber-500',
                 colorTo: 'to-orange-500',
                 isNew: true
@@ -147,7 +254,7 @@
                 id: 'enhance',
                 title: 'افزایش کیفیت',
                 subtitle: 'حذف نویز و شفاف‌سازی',
-                icon: Activity,
+                icon: 'activity',
                 colorFrom: 'from-emerald-500',
                 colorTo: 'to-green-400'
             }
@@ -157,7 +264,7 @@
             id: 'ai-gen',
             title: 'تولید صدا Ai',
             subtitle: 'خلق افکت‌های صوتی خاص',
-            icon: Music,
+            icon: 'music',
             colorFrom: 'from-indigo-600',
             colorTo: 'to-blue-600'
         };
@@ -168,384 +275,149 @@
             "https://app.puzzley.net/uploads/user/Jydo/%D8%AA%D8%BA%DB%8C%D8%B1%20%D8%B5%D8%AF%D8%A7%20%D8%A8%D8%A7%20%D9%87%D9%88%D8%B4%20%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C/tmpkqpm8k8l.png?_t=1769590756"
         ];
 
-        // --- COMPONENTS ---
-
-        // 1. Background Effects
-        const Particle = ({ index }) => {
-            const randomX = Math.random() * 100;
-            const randomDelay = Math.random() * 5;
-            const randomDuration = 10 + Math.random() * 10;
-
-            return (
-                <motion.div
-                    className="absolute w-1 h-1 bg-white rounded-full opacity-0"
-                    initial={{ x: `${randomX}vw`, y: '110vh', opacity: 0 }}
-                    animate={{ 
-                        y: '-10vh', 
-                        opacity: [0, 0.3, 0] 
-                    }}
-                    transition={{
-                        duration: randomDuration,
-                        repeat: Infinity,
-                        delay: randomDelay,
-                        ease: "linear"
-                    }}
-                    style={{
-                        left: 0,
-                        filter: 'blur(1px)'
-                    }}
-                />
-            );
-        };
+        // --- Logic ---
 
-        const BackgroundEffects = () => {
-            return (
-                <div className="fixed inset-0 z-0 overflow-hidden pointer-events-none bg-[#0B0F19]">
-                    <div 
-                        className="absolute inset-0 opacity-[0.04]" 
-                        style={{
-                            backgroundImage: `linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)`,
-                            backgroundSize: '50px 50px'
-                        }}
-                    ></div>
-                    {[...Array(15)].map((_, i) => <Particle key={i} index={i} />)}
-                    <motion.div 
-                        animate={{ scale: [1, 1.15, 1], opacity: [0.15, 0.35, 0.15], rotate: [0, 20, 0] }}
-                        transition={{ duration: 12, repeat: Infinity, ease: "easeInOut" }}
-                        className="absolute -top-[10%] -right-[20%] w-[600px] h-[600px] bg-gradient-to-br from-violet-600/20 to-indigo-600/20 rounded-full blur-[120px]"
-                    />
-                    <motion.div 
-                        animate={{ scale: [1, 1.25, 1], opacity: [0.1, 0.25, 0.1], x: [0, 30, 0] }}
-                        transition={{ duration: 15, repeat: Infinity, ease: "easeInOut", delay: 1 }}
-                        className="absolute top-[40%] -left-[20%] w-[500px] h-[500px] bg-gradient-to-tr from-blue-600/15 to-cyan-500/15 rounded-full blur-[100px]"
-                    />
-                    <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#0B0F19]/60 to-[#0B0F19] pointer-events-none"></div>
-                </div>
-            );
-        };
+        // 1. Render Particles
+        const particlesContainer = document.getElementById('particles-container');
+        for(let i=0; i<15; i++) {
+            const p = document.createElement('div');
+            p.className = 'particle';
+            p.style.left = Math.random() * 100 + 'vw';
+            // Random duration between 10s and 20s
+            const duration = 10 + Math.random() * 10;
+            const delay = Math.random() * 5;
+            p.style.animation = `particle-rise ${duration}s linear ${delay}s infinite`;
+            particlesContainer.appendChild(p);
+        }
 
-        // 2. Header
-        const Header = () => {
-            return (
-                <header className="relative z-20 flex items-center justify-between px-6 pt-6 pb-2">
-                     <div className="flex items-center gap-3">
-                        <div className="relative group cursor-pointer">
-                            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-600 to-indigo-600 flex items-center justify-center shadow-lg shadow-indigo-500/30 ring-2 ring-white/5">
-                                <span className="text-xl font-black text-white pb-1">آ</span>
-                            </div>
-                            <span className="absolute -top-0.5 -right-0.5 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-2.5 w-2.5 bg-cyan-500 border-2 border-[#0B0F19]"></span>
-                            </span>
-                        </div>
-                        <h1 className="text-lg font-bold text-slate-200 tracking-wide opacity-90">{APP_NAME}</h1>
-                    </div>
-                    <div className="flex gap-2">
-                        <button className="p-2 rounded-full bg-white/5 text-white/70 hover:bg-white/10 transition-colors">
-                           <Bell size={20} />
-                        </button>
-                    </div>
-                </header>
-            );
-        };
+        // 2. Render Slider
+        const sliderContainer = document.getElementById('slider-images');
+        const dotsContainer = document.getElementById('slider-dots');
+        let currentSlide = 0;
 
-        // 3. Hero
-        const Hero = () => {
-            return (
-                <div className="px-6 py-4 mb-2 relative z-10 text-center">
-                    <motion.div
-                        initial={{ opacity: 0, y: 10 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ duration: 0.6, ease: "easeOut", delay: 0.2 }}
-                    >
-                        <h2 className="text-2xl font-black text-white mb-2 leading-tight">
-                        جعبه ابزار <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 to-cyan-300">هوش مصنوعی</span>
-                        </h2>
-                        
-                        <p className="text-slate-400 text-xs leading-5 font-light opacity-80">
-                        بهترین ابزارها برای ویرایش و تولید صدا
-                        </p>
-                    </motion.div>
-                </div>
-            );
-        };
+        // Init Images
+        IMAGES.forEach((src, idx) => {
+            const img = document.createElement('img');
+            img.src = src;
+            img.className = `absolute inset-0 w-full h-full object-cover transition-all duration-700 ease-in-out ${idx === 0 ? 'opacity-100 scale-100' : 'opacity-0 scale-110'}`;
+            img.id = `slide-${idx}`;
+            sliderContainer.appendChild(img);
 
-        // 4. Feature Card
-        const FeatureCard = ({ item, index, onClick }) => {
-            return (
-                <motion.div
-                    initial={{ opacity: 0, scale: 0.9, y: 30 }}
-                    animate={{ opacity: 1, scale: 1, y: 0 }}
-                    transition={{ delay: index * 0.1 + 0.2, duration: 0.5, type: "spring", stiffness: 100, damping: 20 }}
-                    whileTap={{ scale: 0.96 }}
-                    onClick={onClick}
-                    className="relative group cursor-pointer"
-                >
-                    <div className={`absolute -inset-[1px] rounded-[24px] bg-gradient-to-b ${item.colorFrom} ${item.colorTo} opacity-0 group-hover:opacity-40 blur-md transition duration-500`}></div>
-                    <div className="relative h-full flex flex-col justify-between bg-[#131722]/80 backdrop-blur-xl border border-white/5 p-4 rounded-[24px] shadow-xl overflow-hidden hover:border-white/15 transition-all duration-300">
-                        <div className="absolute inset-0 z-0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 bg-gradient-to-r from-transparent via-white/5 to-transparent skew-x-12"></div>
-                        <div className="flex justify-between items-start mb-4 relative z-10">
-                            <div className={`relative p-3 rounded-2xl bg-gradient-to-br ${item.colorFrom} ${item.colorTo} shadow-lg ring-1 ring-white/20 group-hover:scale-105 transition-transform duration-300`}>
-                                <motion.div
-                                    animate={{ rotate: [0, 5, -5, 0] }}
-                                    transition={{ duration: 4, repeat: Infinity, ease: "easeInOut", delay: index * 0.5 }}
-                                >
-                                    <item.icon className="text-white w-5 h-5 relative z-10" strokeWidth={2} />
-                                </motion.div>
-                            </div>
-                            {(item.isNew || item.isHot) && (
-                                <motion.div 
-                                    initial={{ scale: 0 }}
-                                    animate={{ scale: 1 }}
-                                    transition={{ delay: 0.5 + index * 0.1, type: "spring" }}
-                                    className="flex flex-col items-end gap-1"
-                                >
-                                    {item.isNew && (
-                                        <span className="px-2 py-0.5 text-[8px] font-bold bg-gradient-to-r from-amber-400 to-orange-500 text-white rounded-full shadow-lg shadow-amber-500/20">جدید</span>
-                                    )}
-                                    {item.isHot && (
-                                        <span className="px-2 py-0.5 text-[8px] font-bold bg-gradient-to-r from-rose-500 to-pink-600 text-white rounded-full shadow-lg shadow-rose-500/20">داغ</span>
-                                    )}
-                                </motion.div>
-                            )}
-                        </div>
-                        <div className="relative z-10">
-                            <h3 className="text-[15px] font-bold text-white mb-1 tracking-tight group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-white group-hover:to-slate-300 transition-colors">{item.title}</h3>
-                            <p className="text-[10px] text-slate-400 font-medium leading-relaxed opacity-80 group-hover:opacity-100 transition-opacity">{item.subtitle}</p>
-                        </div>
-                    </div>
-                </motion.div>
-            );
-        };
+            const dot = document.createElement('div');
+            dot.className = `h-1.5 rounded-full transition-all duration-300 ${idx === 0 ? 'w-6 bg-white' : 'w-1.5 bg-white/40'}`;
+            dot.id = `dot-${idx}`;
+            dotsContainer.appendChild(dot);
+        });
 
-        // 5. Special Card
-        const SpecialCard = ({ item }) => {
-            return (
-                <motion.div
-                    initial={{ opacity: 0, scale: 0.95, y: 20 }}
-                    animate={{ opacity: 1, scale: 1, y: 0 }}
-                    transition={{ delay: 0.6, duration: 0.6, ease: "easeOut" }}
-                    whileTap={{ scale: 0.98 }}
-                    className="relative w-full cursor-pointer group"
-                >
-                    <div className="absolute -inset-[2px] bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-[26px] opacity-70 blur-sm group-hover:opacity-100 group-hover:blur-md transition duration-500 animate-pulse"></div>
-                    <div className="relative overflow-hidden p-5 bg-[#0f1219] rounded-[24px] border border-white/10">
-                        <div className="absolute inset-0 opacity-20">
-                            <div className="absolute top-0 right-0 w-64 h-64 bg-indigo-600 rounded-full blur-[80px] animate-pulse"></div>
-                            <div className="absolute bottom-0 left-0 w-64 h-64 bg-purple-600 rounded-full blur-[80px] animate-pulse" style={{ animationDelay: '1s' }}></div>
-                        </div>
-                        <div className="relative z-10 flex items-center justify-between gap-4">
-                            <div className="flex items-center gap-4">
-                                <div className="relative">
-                                    <div className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${item.colorFrom} ${item.colorTo} flex items-center justify-center shadow-lg shadow-indigo-500/30 ring-4 ring-indigo-500/10 group-hover:scale-105 transition-transform duration-300`}>
-                                        <motion.div animate={{ rotate: [0, 10, -10, 0] }} transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}>
-                                            <item.icon className="text-white w-7 h-7" strokeWidth={2.5} />
-                                        </motion.div>
-                                    </div>
-                                    <div className="absolute -top-2 -right-2 bg-white text-indigo-700 text-[9px] font-black px-1.5 py-0.5 rounded-full shadow-md border-2 border-[#0f1219]">Ai</div>
-                                </div>
-                                <div>
-                                    <div className="flex items-center gap-2 mb-1">
-                                        <h3 className="text-lg font-black text-white">{item.title}</h3>
-                                        <Sparkles className="w-4 h-4 text-yellow-400 fill-yellow-400" />
-                                    </div>
-                                    <p className="text-xs text-slate-300 font-medium opacity-90 max-w-[150px] leading-relaxed">{item.subtitle}</p>
-                                </div>
-                            </div>
-                            <div className="w-10 h-10 rounded-full bg-white/10 hover:bg-white text-white hover:text-indigo-900 flex items-center justify-center border border-white/10 transition-all duration-300">
-                                <ArrowLeft className="w-4 h-4" strokeWidth={3} />
-                            </div>
-                        </div>
-                    </div>
-                </motion.div>
-            );
-        };
+        // Loop Slider
+        setInterval(() => {
+            // Hide current
+            const currentImg = document.getElementById(`slide-${currentSlide}`);
+            const currentDot = document.getElementById(`dot-${currentSlide}`);
+            currentImg.classList.replace('opacity-100', 'opacity-0');
+            currentImg.classList.replace('scale-100', 'scale-110');
+            currentDot.classList.replace('w-6', 'w-1.5');
+            currentDot.classList.replace('bg-white', 'bg-white/40');
 
-        // 6. Image Slider
-        const ImageSlider = () => {
-            const [currentIndex, setCurrentIndex] = useState(0);
-            useEffect(() => {
-                const timer = setInterval(() => {
-                    setCurrentIndex((prev) => (prev + 1) % IMAGES.length);
-                }, 4000);
-                return () => clearInterval(timer);
-            }, []);
-            return (
-                <div className="relative w-full aspect-[2.4/1] rounded-[24px] overflow-hidden shadow-2xl ring-1 ring-white/10 mb-4 group z-20">
-                    <AnimatePresence mode='popLayout'>
-                        <motion.img
-                        key={currentIndex}
-                        src={IMAGES[currentIndex]}
-                        alt={`Slide ${currentIndex + 1}`}
-                        initial={{ opacity: 0, scale: 1.1 }}
-                        animate={{ opacity: 1, scale: 1 }}
-                        exit={{ opacity: 0 }}
-                        transition={{ duration: 0.7 }}
-                        className="absolute inset-0 w-full h-full object-cover"
-                        />
-                    </AnimatePresence>
-                    <div className="absolute inset-0 bg-gradient-to-t from-[#0B0F19]/80 via-transparent to-transparent opacity-80"></div>
-                    <div className="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5 z-10">
-                        {IMAGES.map((_, index) => (
-                        <div key={index} className={`h-1.5 rounded-full transition-all duration-300 ${index === currentIndex ? 'w-5 bg-white' : 'w-1.5 bg-white/40'}`} />
-                        ))}
-                    </div>
-                </div>
-            );
-        };
+            // Show next
+            currentSlide = (currentSlide + 1) % IMAGES.length;
+            const nextImg = document.getElementById(`slide-${currentSlide}`);
+            const nextDot = document.getElementById(`dot-${currentSlide}`);
+            nextImg.classList.replace('opacity-0', 'opacity-100');
+            nextImg.classList.replace('scale-110', 'scale-100');
+            nextDot.classList.replace('w-1.5', 'w-6');
+            nextDot.classList.replace('bg-white/40', 'bg-white');
+        }, 4000);
 
-        // 7. TTS Overlay (Text to Speech Feature)
-        const TTSOverlay = ({ onClose }) => {
-            const [text, setText] = useState('');
-            const [speaking, setSpeaking] = useState(false);
-            
-            const speak = () => {
-                if (!text) return;
-                window.speechSynthesis.cancel();
-                // Create utterance
-                const u = new SpeechSynthesisUtterance(text);
-                // Attempt to use a Persian voice if available, otherwise default
-                // iOS/Android usually select based on lang code
-                u.lang = 'fa-IR'; 
-                u.rate = 0.9;
-                
-                u.onstart = () => setSpeaking(true);
-                u.onend = () => setSpeaking(false);
-                u.onerror = () => setSpeaking(false);
-                
-                window.speechSynthesis.speak(u);
-            };
-
-            const stop = () => {
-                window.speechSynthesis.cancel();
-                setSpeaking(false);
-            };
-
-            return (
-                <motion.div 
-                    initial={{ opacity: 0, y: "100%" }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: "100%" }}
-                    transition={{ type: "spring", damping: 25, stiffness: 200 }}
-                    className="fixed inset-0 z-50 bg-[#0f172a] flex flex-col"
-                    style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0 }} 
-                >
-                    <BackgroundEffects />
+        // 3. Render Features Grid
+        const gridContainer = document.getElementById('features-grid');
+        FEATURES.forEach((item, index) => {
+            const delay = 0.4 + (index * 0.1);
+            const html = `
+                <div class="relative group cursor-pointer fade-in-entry hover-shine" style="animation-delay: ${delay}s" onclick="alert('قابلیت ${item.title} به زودی فعال می‌شود!')">
+                    <!-- Glow -->
+                    <div class="absolute -inset-[1px] rounded-[24px] bg-gradient-to-b ${item.colorFrom} ${item.colorTo} opacity-0 group-hover:opacity-40 blur-md transition duration-500"></div>
                     
-                    {/* Header */}
-                    <div className="relative z-10 px-6 py-4 flex items-center justify-between glass-panel border-b-0">
-                        <button onClick={onClose} className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center active:scale-95 transition-transform">
-                            <ArrowLeft className="text-white" size={20} />
-                        </button>
-                        <h2 className="text-lg font-bold text-white">تبدیل متن به صدا</h2>
-                        <div className="w-10"></div>
-                    </div>
-
-                    {/* Content */}
-                    <div className="relative z-10 flex-1 p-6 flex flex-col gap-6">
-                        <div className="flex-1 glass-panel rounded-3xl p-1 overflow-hidden shadow-2xl">
-                            <textarea 
-                                className="w-full h-full bg-transparent p-5 text-right text-lg text-white placeholder-slate-400 focus:outline-none resize-none leading-loose"
-                                placeholder="متن خود را اینجا بنویسید... (مثال: سلام، به آوا هوش خوش آمدید)"
-                                value={text}
-                                onChange={e => setText(e.target.value)}
-                            />
+                    <div class="relative h-full flex flex-col justify-between glass-panel p-5 rounded-[24px] shadow-2xl overflow-hidden group-hover:border-white/20 transition-all duration-300">
+                        <div class="flex justify-between items-start mb-5 relative z-10">
+                            <div class="relative p-3.5 rounded-2xl bg-gradient-to-br ${item.colorFrom} ${item.colorTo} shadow-lg ring-1 ring-white/20 group-hover:scale-105 transition-transform duration-300">
+                                <i data-lucide="${item.icon}" class="text-white w-6 h-6 relative z-10"></i>
+                            </div>
+                            
+                            ${item.isNew || item.isHot ? `
+                             <div class="flex flex-col items-end gap-1">
+                                ${item.isNew ? `<span class="px-2.5 py-1 text-[9px] font-bold bg-gradient-to-r from-amber-400 to-orange-500 text-white rounded-full shadow-lg shadow-amber-500/20">جدید</span>` : ''}
+                                ${item.isHot ? `<span class="px-2.5 py-1 text-[9px] font-bold bg-gradient-to-r from-rose-500 to-pink-600 text-white rounded-full shadow-lg shadow-rose-500/20">داغ</span>` : ''}
+                             </div>
+                            ` : ''}
                         </div>
 
-                        {/* Controls */}
-                        <div className="flex flex-col gap-4 mb-4">
-                            <motion.button 
-                                whileTap={{ scale: 0.98 }}
-                                onClick={speaking ? stop : speak}
-                                className={`w-full py-5 rounded-2xl font-bold text-lg flex items-center justify-center gap-3 shadow-xl transition-all relative overflow-hidden ${speaking ? 'bg-rose-500' : 'bg-gradient-to-r from-blue-600 to-indigo-600'}`}
-                            >
-                                {speaking ? (
-                                    <>
-                                        <Square fill="currentColor" size={20} />
-                                        <span>توقف پخش</span>
-                                        <span className="absolute right-4 w-2 h-2 bg-white rounded-full animate-ping"></span>
-                                    </>
-                                ) : (
-                                    <>
-                                        <Play fill="currentColor" size={24} />
-                                        <span>پخش صدا</span>
-                                    </>
-                                )}
-                            </motion.button>
+                        <div class="relative z-10">
+                            <h3 class="text-[16px] font-bold text-white mb-1.5 tracking-tight group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-white group-hover:to-slate-300 transition-colors">
+                                ${item.title}
+                            </h3>
+                            <p class="text-[11px] text-slate-400 font-medium leading-relaxed opacity-80 group-hover:opacity-100 transition-opacity">
+                                ${item.subtitle}
+                            </p>
                         </div>
-                    </div>
-                </motion.div>
-            );
-        };
-
-        // --- MAIN APP COMPONENT ---
-        const App = () => {
-            const [activeFeature, setActiveFeature] = useState(null);
-
-            const handleFeatureClick = (id) => {
-                if (id === 'tts') {
-                    setActiveFeature('tts');
-                } else {
-                    // For other features just show a simple alert or log for now
-                    console.log(`Feature ${id} clicked`);
-                }
-            };
-
-            return (
-                <div className="min-h-screen relative overflow-x-hidden pb-10">
-                    <BackgroundEffects />
-                    
-                    <main className="relative z-10 pt-2">
-                        <Header />
                         
-                        <div className="px-6 mb-2">
-                            <ImageSlider />
+                         <!-- Action Icon -->
+                        <div class="absolute bottom-4 left-4 w-8 h-8 rounded-full bg-white/5 border border-white/5 flex items-center justify-center opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 shadow-lg">
+                             <i data-lucide="arrow-left" size="14" class="text-white w-3 h-3"></i>
                         </div>
+                    </div>
+                </div>
+            `;
+            gridContainer.innerHTML += html;
+        });
 
-                        <Hero />
-                        
-                        <div className="px-6 mt-2">
-                            <div className="grid grid-cols-2 gap-4">
-                                {FEATURES.map((item, index) => (
-                                    <FeatureCard 
-                                        key={item.id} 
-                                        item={item} 
-                                        index={index} 
-                                        onClick={() => handleFeatureClick(item.id)}
-                                    />
-                                ))}
-                            </div>
+        // 4. Render Special Feature
+        const specialContainer = document.getElementById('special-feature-container');
+        specialContainer.innerHTML = `
+            <div class="relative w-full cursor-pointer group" onclick="alert('تولید صدای هوشمند شروع شد!')">
+                <div class="absolute -inset-[2px] bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-[26px] opacity-70 blur-sm group-hover:opacity-100 group-hover:blur-md transition duration-500 animate-pulse"></div>
+                
+                <div class="relative overflow-hidden p-6 bg-[#0f1219] rounded-[24px] border border-white/10">
+                    <!-- Background Mesh -->
+                    <div class="absolute inset-0 opacity-20 pointer-events-none">
+                        <div class="absolute top-0 right-0 w-64 h-64 bg-indigo-600 rounded-full blur-[80px] animate-pulse"></div>
+                        <div class="absolute bottom-0 left-0 w-64 h-64 bg-purple-600 rounded-full blur-[80px] animate-pulse" style="animation-delay: 1s;"></div>
+                    </div>
 
-                            <div className="mt-6 mb-4">
-                                <SpecialCard item={SPECIAL_FEATURE} />
+                    <div class="relative z-10 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                        <div class="flex items-center gap-5">
+                            <div class="relative">
+                                <div class="w-16 h-16 rounded-2xl bg-gradient-to-br ${SPECIAL_FEATURE.colorFrom} ${SPECIAL_FEATURE.colorTo} flex items-center justify-center shadow-lg shadow-indigo-500/30 ring-4 ring-indigo-500/10 group-hover:scale-105 transition-transform duration-300">
+                                     <i data-lucide="${SPECIAL_FEATURE.icon}" class="text-white w-8 h-8"></i>
+                                </div>
+                                <div class="absolute -top-2 -right-2 bg-white text-indigo-700 text-[10px] font-black px-2 py-0.5 rounded-full shadow-md border-2 border-[#0f1219]">Ai</div>
                             </div>
                             
-                            <div className="text-center mt-8 opacity-40">
-                                <p className="text-[10px] text-slate-300 font-light tracking-widest">
-                                    POWERED BY AVA HOOSH • VER 2.0
-                                </p>
+                            <div>
+                                <div class="flex items-center gap-2 mb-1">
+                                    <h3 class="text-xl font-black text-white">${SPECIAL_FEATURE.title}</h3>
+                                    <i data-lucide="sparkles" class="w-5 h-5 text-yellow-400 fill-yellow-400 animate-bounce"></i>
+                                </div>
+                                <p class="text-sm text-slate-300 font-medium opacity-90 max-w-[200px] leading-relaxed">${SPECIAL_FEATURE.subtitle}</p>
                             </div>
                         </div>
-                    </main>
-
-                    {/* Overlays */}
-                    <AnimatePresence>
-                        {activeFeature === 'tts' && (
-                            <TTSOverlay key="tts" onClose={() => setActiveFeature(null)} />
-                        )}
-                    </AnimatePresence>
+
+                        <div class="self-end sm:self-center">
+                            <div class="w-12 h-12 rounded-full bg-white/10 hover:bg-white text-white hover:text-indigo-900 flex items-center justify-center border border-white/10 transition-all duration-300 group-hover:rotate-[-45deg]">
+                                <i data-lucide="arrow-left" class="w-5 h-5" stroke-width="3"></i>
+                            </div>
+                        </div>
+                    </div>
+                     <div class="absolute top-1/2 right-10 -translate-y-1/2 opacity-5 pointer-events-none">
+                        <i data-lucide="wand-2" width="120" height="120"></i>
+                     </div>
                 </div>
-            );
-        };
+            </div>
+        `;
+
+        // Init Icons
+        lucide.createIcons();
 
-        // --- RENDER ---
-        const rootElement = document.getElementById('root');
-        const root = ReactDOM.createRoot(rootElement);
-        root.render(
-            <React.StrictMode>
-                <App />
-            </React.StrictMode>
-        );
     </script>
 </body>
 </html>