Update index.html

index.html

@@ -23,7 +23,17 @@
         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;
       }
@@ -217,24 +227,24 @@
         // 2. Header
         const Header = () => {
             return (
-                <header className="relative z-20 flex flex-col items-center justify-center pt-8 pb-4">
-                    <motion.div 
-                        initial={{ y: -20, opacity: 0 }}
-                        animate={{ y: 0, opacity: 1 }}
-                        transition={{ duration: 0.6, ease: "easeOut" }}
-                        className="flex flex-col items-center gap-4"
-                    >
+                <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-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 className="text-4xl font-black text-white pb-2">آ</span>
+                            <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-1 -right-1 flex h-4 w-4">
+                            <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-4 w-4 bg-cyan-500 border-4 border-[#0B0F19]"></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-xl font-bold text-slate-200 tracking-wide opacity-90">{APP_NAME}</h1>
-                    </motion.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>
             );
         };
@@ -242,29 +252,18 @@
         // 3. Hero
         const Hero = () => {
             return (
-                <div className="px-6 pt-2 pb-8 mb-2 relative z-10 text-center">
+                <div className="px-6 py-4 mb-2 relative z-10 text-center">
                     <motion.div
-                        initial={{ opacity: 0, y: 20 }}
+                        initial={{ opacity: 0, y: 10 }}
                         animate={{ opacity: 1, y: 0 }}
-                        transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
+                        transition={{ duration: 0.6, ease: "easeOut", delay: 0.2 }}
                     >
-                        <h2 className="text-[2.2rem] font-black text-white mb-4 leading-[1.3] tracking-tight">
-                        دنیای صدا را <br />
-                        <span className="relative inline-block px-2">
-                            <span className="absolute inset-0 bg-indigo-500/10 blur-xl rounded-full transform rotate-3"></span>
-                            <span 
-                            className="relative text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-cyan-300 animate-gradient-x"
-                            style={{ backgroundSize: '200% auto' }}
-                            >
-                            با هوش مصنوعی
-                            </span>
-                        </span>
-                        <br/>
-                        <span className="text-white">متحول کنید</span>
+                        <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-sm leading-7 font-light max-w-[80%] mx-auto opacity-80">
-                        تکنولوژی پیشرفته برای خلق، ویرایش و تبدیل صدا
+                        <p className="text-slate-400 text-xs leading-5 font-light opacity-80">
+                        بهترین ابزارها برای ویرایش و تولید صدا
                         </p>
                     </motion.div>
                 </div>
@@ -283,17 +282,16 @@
                     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-5 rounded-[24px] shadow-2xl overflow-hidden hover:border-white/15 transition-all duration-300">
+                    <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-5 relative z-10">
-                            <div className={`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`}>
+                        <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-6 h-6 relative z-10" strokeWidth={2} />
+                                    <item.icon className="text-white w-5 h-5 relative z-10" strokeWidth={2} />
                                 </motion.div>
-                                <div className="absolute inset-0 rounded-2xl bg-white/30 blur opacity-40"></div>
                             </div>
                             {(item.isNew || item.isHot) && (
                                 <motion.div 
@@ -303,20 +301,17 @@
                                     className="flex flex-col items-end gap-1"
                                 >
                                     {item.isNew && (
-                                        <span className="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>
+                                        <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.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>
+                                        <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-[17px] 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 className="text-[11px] text-slate-400 font-medium leading-relaxed opacity-80 group-hover:opacity-100 transition-opacity">{item.subtitle}</p>
-                        </div>
-                        <div className="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">
-                            <ArrowLeft size={14} className="text-white" />
+                            <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>
@@ -334,35 +329,31 @@
                     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-6 bg-[#0f1219] rounded-[24px] border border-white/10">
+                    <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 flex-col sm:flex-row sm:items-center justify-between gap-4">
-                            <div className="flex items-center gap-5">
+                        <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-16 h-16 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`}>
+                                    <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-8 h-8" strokeWidth={2.5} />
+                                            <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-[10px] font-black px-2 py-0.5 rounded-full shadow-md border-2 border-[#0f1219]">Ai</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-xl font-black text-white">{item.title}</h3>
-                                        <motion.div animate={{ opacity: [0.5, 1, 0.5], scale: [1, 1.2, 1] }} transition={{ duration: 2, repeat: Infinity }}>
-                                            <Sparkles className="w-5 h-5 text-yellow-400 fill-yellow-400" />
-                                        </motion.div>
+                                        <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-sm text-slate-300 font-medium opacity-90 max-w-[200px] leading-relaxed">{item.subtitle}</p>
+                                    <p className="text-xs text-slate-300 font-medium opacity-90 max-w-[150px] leading-relaxed">{item.subtitle}</p>
                                 </div>
                             </div>
-                            <div className="self-end sm:self-center">
-                                <div className="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]">
-                                    <ArrowLeft className="w-5 h-5" strokeWidth={3} />
-                                </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>
@@ -380,7 +371,7 @@
                 return () => clearInterval(timer);
             }, []);
             return (
-                <div className="relative w-full aspect-[2/1] rounded-[24px] overflow-hidden shadow-2xl ring-1 ring-white/10 mb-2 group z-20">
+                <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}
@@ -396,7 +387,7 @@
                     <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-6 bg-white' : 'w-1.5 bg-white/40'}`} />
+                        <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>
@@ -437,6 +428,7 @@
                     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 />
                     
@@ -506,14 +498,14 @@
                     <main className="relative z-10 pt-2">
                         <Header />
                         
-                        <div className="px-6 mb-4">
+                        <div className="px-6 mb-2">
                             <ImageSlider />
                         </div>
 
                         <Hero />
                         
-                        <div className="px-6 mt-4">
-                            <div className="grid grid-cols-2 gap-5">
+                        <div className="px-6 mt-2">
+                            <div className="grid grid-cols-2 gap-4">
                                 {FEATURES.map((item, index) => (
                                     <FeatureCard 
                                         key={item.id} 
@@ -524,13 +516,13 @@
                                 ))}
                             </div>
 
-                            <div className="mt-8 mb-4">
+                            <div className="mt-6 mb-4">
                                 <SpecialCard item={SPECIAL_FEATURE} />
                             </div>
                             
                             <div className="text-center mt-8 opacity-40">
                                 <p className="text-[10px] text-slate-300 font-light tracking-widest">
-                                    POWERED BY ALPHA • VER 2.0
+                                    POWERED BY AVA HOOSH • VER 2.0
                                 </p>
                             </div>
                         </div>