colour palette/layout/design of both index.html and index.fa html must resemble huggingface as its the landing page for persian ai community on huggingface

index-fa.html

@@ -50,152 +50,140 @@
             فارسی
         </button>
 </div>
-
-<!-- Hero Section -->
-    <section class="min-h-screen flex items-center justify-center relative overflow-hidden bg-gradient-to-br from-gray-900 via-gray-800 to-black">
-<!-- Animated Background -->
-        <div class="absolute inset-0">
-            <div class="absolute top-20 right-20 w-72 h-72 bg-persian-yellow rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
-            <div class="absolute top-40 left-20 w-72 h-72 bg-persian-orange rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
-            <div class="absolute bottom-20 right-1/2 w-72 h-72 bg-persian-red rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
+    <!-- Hero Section -->
+    <section class="min-h-screen flex items-center justify-center relative overflow-hidden bg-gradient-to-br from-[#FFEEE4] via-[#F9F5FF] to-[#E8F4FD]">
+        <!-- Background Pattern similar to Hugging Face -->
+        <div class="absolute inset-0 opacity-5">
+            <div class="absolute inset-0" style="background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(59,130,246,0.1) 35px, rgba(59,130,246,0.1) 70px);"></div>
         </div>
-
         <!-- Hero Content -->
         <div class="relative z-10 text-center px-4 max-w-5xl mx-auto">
             <div class="mb-8">
-                <div class="inline-flex items-center justify-center w-32 h-32 rounded-full bg-gradient-to-br from-persian-yellow to-persian-red p-1 mb-6">
-                    <div class="w-full h-full rounded-full bg-black/90 backdrop-blur-sm flex items-center justify-center">
-                        <i data-feather="cpu" class="w-16 h-16 text-persian-yellow"></i>
-                    </div>
+                <div class="inline-flex items-center justify-center w-24 h-24 bg-gradient-to-br from-[#FF6B00] to-[#FF8E53] rounded-2xl mb-6 shadow-lg">
+                    <i data-feather="cpu" class="w-12 h-12 text-white"></i>
                 </div>
             </div>
-<h1 class="text-6xl md:text-7xl font-black mb-6 bg-gradient-to-r from-persian-yellow via-persian-orange to-persian-red bg-clip-text text-transparent">
+<h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-[#FF6B00] to-[#3B82F6] bg-clip-text text-transparent" style="font-weight: 700;">
                 جامعه هوش مصنوعی فارسی
             </h1>
             
-            <p class="fa-subtitle text-xl md:text-2xl text-gray-700 mb-8 max-w-3xl mx-auto leading-relaxed">
+            <p class="fa-subtitle text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto leading-relaxed">
                 پیشبرد هوش مصنوعی فارسی از طریق مجموعه داده‌ها، مدل‌ها و تحقیقات مشترک
             </p>
             
             <div class="flex flex-wrap gap-4 justify-center mb-12">
-                <a href="https://huggingface.co/PersianAICommunity" target="_blank" class="group inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-persian-yellow to-persian-orange text-white font-semibold rounded-full hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
-                    <i data-feather="home" class="w-5 h-5"></i>
+                <a href="https://huggingface.co/PersianAICommunity" target="_blank" class="inline-flex items-center gap-2 px-6 py-3 bg-[#FF6B00] hover:bg-[#E55A00] text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-200">
+                    <i data-feather="home" class="w-4 h-4"></i>
                     مشاهده در HuggingFace
-                    <i data-feather="external-link" class="w-4 h-4"></i>
                 </a>
-                <a href="#collections" class="group inline-flex items-center gap-2 px-8 py-4 bg-white text-persian-red border-2 border-persian-red font-semibold rounded-full hover:bg-persian-red hover:text-white transition-all duration-300">
-                    <i data-feather="grid" class="w-5 h-5"></i>
+                <a href="#collections" class="inline-flex items-center gap-2 px-6 py-3 bg-white text-[#FF6B00] border border-[#FF6B00] font-medium rounded-lg hover:bg-[#FFF8F5] transition-all duration-200">
+                    <i data-feather="grid" class="w-4 h-4"></i>
                     کاوش مجموعه‌ها
                 </a>
             </div>
             <!-- Stats -->
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16">
-                <div class="stat-card bg-white/95 backdrop-blur-sm rounded-2xl p-6 hover:scale-105 transition-transform duration-300">
-                    <div class="text-4xl font-bold text-gray-900 mb-2">
-                        <i data-feather="database" class="w-10 h-10 mx-auto mb-2 text-gray-900"></i>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
+                <div class="stat-card bg-white rounded-lg p-6 hover:shadow-lg transition-all duration-300 border border-gray-200">
+                    <div class="text-2xl font-bold text-gray-900 mb-1">
+                        <i data-feather="database" class="w-8 h-8 mx-auto mb-2 text-[#3B82F6]"></i>
                     </div>
-                    <div class="text-2xl font-bold text-gray-900">۵۰+</div>
-                    <div class="text-lg text-gray-800 font-bold">مجموعه داده ناب</div>
-                    <div class="text-sm text-gray-600">با استاندارد طلایی</div>
+                    <div class="text-3xl font-bold text-gray-900">۵۰+</div>
+                    <div class="text-md text-gray-700 font-semibold">مجموعه داده</div>
+                    <div class="text-sm text-gray-500">با کیفیت بالا</div>
                 </div>
-                <div class="stat-card bg-white/95 backdrop-blur-sm rounded-2xl p-6 hover:scale-105 transition-transform duration-300">
-                    <div class="text-4xl font-bold text-gray-900 mb-2">
-                        <i data-feather="box" class="w-10 h-10 mx-auto mb-2 text-gray-900"></i>
+                <div class="stat-card bg-white rounded-lg p-6 hover:shadow-lg transition-all duration-300 border border-gray-200">
+                    <div class="text-2xl font-bold text-gray-900 mb-1">
+                        <i data-feather="box" class="w-8 h-8 mx-auto mb-2 text-[#10B981]"></i>
                     </div>
-                    <div class="text-2xl font-bold text-gray-900">۱۰۰+</div>
-                    <div class="fa-text font-fa text-lg text-gray-800 font-bold">مدل‌های پیشرفته</div>
-                    <div class="fa-text font-fa text-sm text-gray-600">بروزترین تکنولوژی</div>
+                    <div class="text-3xl font-bold text-gray-900">۱۰۰+</div>
+                    <div class="fa-text font-fa text-md text-gray-700 font-semibold">مدل‌ها</div>
+                    <div class="fa-text font-fa text-sm text-gray-500">پیشرفته</div>
                 </div>
-                <div class="stat-card bg-white/95 backdrop-blur-sm rounded-2xl p-6 hover:scale-105 transition-transform duration-300">
-                    <div class="text-4xl font-bold text-gray-900 mb-2">
-                        <i data-feather="users" class="w-10 h-10 mx-auto mb-2 text-gray-900"></i>
+                <div class="stat-card bg-white rounded-lg p-6 hover:shadow-lg transition-all duration-300 border border-gray-200">
+                    <div class="text-2xl font-bold text-gray-900 mb-1">
+                        <i data-feather="users" class="w-8 h-8 mx-auto mb-2 text-[#F59E0B]"></i>
                     </div>
-                    <div class="text-2xl font-bold text-gray-900">۱۰۰۰+</div>
-                    <div class="fa-text font-fa text-lg text-gray-800 font-bold">خبره هوش مصنوعی</div>
-                    <div class="fa-text font-fa text-sm text-gray-600">نخبگان و محققان</div>
+                    <div class="text-3xl font-bold text-gray-900">۱۰۰۰+</div>
+                    <div class="fa-text font-fa text-md text-gray-700 font-semibold">کاربران</div>
+                    <div class="fa-text font-fa text-sm text-gray-500">فعال</div>
                 </div>
             </div>
 </div>
-
-        <!-- Scroll Indicator -->
-        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
-            <i data-feather="chevron-down" class="w-8 h-8 text-gray-400"></i>
-        </div>
     </section>
-
     <!-- Mission Section -->
-    <section class="py-20 px-4 bg-white">
+    <section class="py-20 px-4 bg-gray-50">
         <div class="max-w-6xl mx-auto">
-            <h2 class="section-title text-4xl md:text-5xl font-bold text-center mb-16 text-gray-900 drop-shadow-lg">
-                مأموریت انقلابی ما
+            <h2 class="section-title text-4xl md:text-5xl font-bold text-center mb-16 text-gray-900">
+                مأموریت ما
             </h2>
 <div class="grid md:grid-cols-3 gap-8">
-                    <div class="mission-card text-center p-8 rounded-2xl hover:shadow-2xl transition-all duration-300 border-2 border-transparent hover:border-persian-yellow bg-white/90">
-                    <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-persian-yellow to-persian-orange rounded-full flex items-center justify-center">
-                        <i data-feather="trending-up" class="w-10 h-10 text-white"></i>
+                    <div class="mission-card text-center p-8 rounded-xl bg-white hover:shadow-lg transition-all duration-200 border border-gray-200">
+                    <div class="w-16 h-16 mx-auto mb-6 bg-gradient-to-br from-[#3B82F6] to-[#1E40AF] rounded-xl flex items-center justify-center">
+                        <i data-feather="trending-up" class="w-8 h-8 text-white"></i>
                     </div>
-                    <h3 class="fa-text text-xl font-bold mb-4 text-gray-900">پیشگام نوآوری هوش مصنوعی فارسی</h3>
-                    <p class="fa-text text-gray-800 leading-relaxed font-medium">انقلاب در پردازش زبان فارسی با مدل‌های ترانسفورمر پیشرفته و تحقیقات NLP پیشگامانه</p>
+                    <h3 class="fa-text text-xl font-bold mb-4 text-gray-900">توسعه هوش مصنوعی فارسی</h3>
+                    <p class="fa-text text-gray-600 leading-relaxed">توسعه مدل‌ها و تحقیقات نوین در زمینه پردازش زبان فارسی</p>
                 </div>
-                    <div class="mission-card text-center p-8 rounded-2xl hover:shadow-2xl transition-all duration-300 border-2 border-transparent hover:border-persian-orange bg-white/90">
-                    <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-persian-orange to-persian-red rounded-full flex items-center justify-center">
-                        <i data-feather="unlock" class="w-10 h-10 text-white"></i>
+                    <div class="mission-card text-center p-8 rounded-xl bg-white hover:shadow-lg transition-all duration-200 border border-gray-200">
+                    <div class="w-16 h-16 mx-auto mb-6 bg-gradient-to-br from-[#10B981] to-[#047857] rounded-xl flex items-center justify-center">
+                        <i data-feather="unlock" class="w-8 h-8 text-white"></i>
                     </div>
-                    <h3 class="fa-text text-xl font-bold mb-4 text-gray-900">دموکراتیزه‌سازی هوش مصنوعی فارسی</h3>
-                    <p class="fa-text text-gray-800 leading-relaxed font-medium">دسترس‌پذیر کردن مجموعه داده‌های برتر، مدل‌های پیش‌آموزش دیده و ابزارهای توسعه هوش مصنوعی در سراسر جهان</p>
+                    <h3 class="fa-text text-xl font-bold mb-4 text-gray-900">دسترسی آزاد</h3>
+                    <p class="fa-text text-gray-600">در دسترس قرار دادن مجموعه داده‌ها و مدل‌های باکیفیت برای همه</p>
                 </div>
-                    <div class="mission-card text-center p-8 rounded-2xl hover:shadow-2xl transition-all duration-300 border-2 border-transparent hover:border-persian-red bg-white/90">
-                    <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-persian-red to-pink-500 rounded-full flex items-center justify-center">
-                        <i data-feather="users" class="w-10 h-10 text-white"></i>
+                    <div class="mission-card text-center p-8 rounded-xl bg-white hover:shadow-lg transition-all duration-200 border border-gray-200">
+                    <div class="w-16 h-16 mx-auto mb-6 bg-gradient-to-br from-[#F59E0B] to-[#D97706] rounded-xl flex items-center justify-center">
+                        <i data-feather="users" class="w-8 h-8 text-white"></i>
                     </div>
-                    <h3 class="fa-text text-xl font-bold mb-4 text-gray-900">ساخت شبکه‌ای از نوآوران</h3>
-                    <p class="fa-text text-gray-800 leading-relaxed font-medium">ایجاد شبکه‌ای جهانی از پژوهشگران، توسعه‌دهندگان و نوآوران هوش مصنوعی فارسی که اکتشافات پیشگامانه را پیش می‌برند</p>
+                    <h3 class="fa-text text-xl font-bold mb-4 text-gray-900">جامعه محور</h3>
+                    <p class="fa-text text-gray-600">ایجاد شبکه‌ای از محققان و توسعه‌دهندگان هوش مصنوعی فارسی</p>
                 </div>
 </div>
         </div>
     </section>
-
     <!-- Collections Section -->
-    <section id="collections" class="py-20 px-4 bg-gradient-to-br from-black via-gray-900 to-gray-800">
+    <section id="collections" class="py-20 px-4 bg-white">
         <div class="max-w-6xl mx-auto">
-            <h2 class="section-title text-4xl md:text-5xl font-bold text-center mb-16 text-white drop-shadow-2xl">
-                مجموعه‌های انقلابی هوش مصنوعی
+            <h2 class="section-title text-4xl md:text-5xl font-bold text-center mb-16 text-gray-900">
+                مجموعه‌های محبوب
             </h2>
-<div class="grid md:grid-cols-3 gap-8">
-                <a href="https://huggingface.co/collections/PersianAICommunity/fibonacci-ai" target="_blank" class="collection-card group block bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
-                    <div class="h-48 bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
-                        <i data-feather="git-branch" class="w-24 h-24 text-white"></i>
+<div class="grid md:grid-cols-3 gap-6">
+                <a href="https://huggingface.co/collections/PersianAICommunity/fibonacci-ai" target="_blank" class="collection-card group block bg-white rounded-xl overflow-hidden border border-gray-200 hover:shadow-lg transition-all duration-200">
+                    <div class="h-32 bg-gradient-to-br from-[#8B5CF6] to-[#EC4899] flex items-center justify-center">
+                        <i data-feather="git-branch" class="w-16 h-16 text-white"></i>
                     </div>
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2 group-hover:text-persian-orange transition-colors text-gray-900">سری فیبوناچی AI</h3>
-                        <p class="fa-text text-gray-800 font-medium">معماری‌های عصبی انقلابی که با بهینه‌سازی ریاضی به حداکثر کارایی محاسباتی می‌رسند</p>
+                    <div class="p-5">
+                        <h3 class="text-lg font-semibold mb-2 text-gray-900 group-hover:text-[#FF6B00]">سری فیبوناچی AI</h3>
+                        <p class="fa-text text-sm text-gray-600">معماری‌های عصبی پیشرفته با بهینه‌سازی ریاضی</p>
+                        <div class="mt-3 text-[#3B82F6] text-sm">۸ مدل →</div>
                     </div>
 </a>
                 
-                <a href="https://huggingface.co/collections/PersianAICommunity/persian-datasets" target="_blank" class="collection-card group block bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
-                    <div class="h-48 bg-gradient-to-br from-persian-yellow to-persian-orange flex items-center justify-center">
-                        <i data-feather="database" class="w-24 h-24 text-white"></i>
+                <a href="https://huggingface.co/collections/PersianAICommunity/persian-datasets" target="_blank" class="collection-card group block bg-white rounded-xl overflow-hidden border border-gray-200 hover:shadow-lg transition-all duration-200">
+                    <div class="h-32 bg-gradient-to-br from-[#3B82F6] to-[#60A5FA] flex items-center justify-center">
+                        <i data-feather="database" class="w-16 h-16 text-white"></i>
                     </div>
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2 group-hover:text-persian-orange transition-colors text-gray-900">مجموعه داده‌های پرمیوم فارسی</h3>
-                        <p class="fa-text text-gray-800 font-medium">داده‌های منتخب استاندارد طلایی برای تحلیل احساسات، طبقه‌بندی متن، ترجمه ماشین و AI گفتگومحور</p>
+                    <div class="p-5">
+                        <h3 class="text-lg font-semibold mb-2 text-gray-900 group-hover:text-[#FF6B00]">مجموعه داده‌های فارسی</h3>
+                        <p class="fa-text text-sm text-gray-600">داده‌های منتخب برای تحلیل احساسات و ترجمه ماشین</p>
+                        <div class="mt-3 text-[#3B82F6] text-sm">۱۵ مجموعه داده ←</div>
                     </div>
 </a>
                 
-                <a href="https://huggingface.co/collections/PersianAICommunity/persian-models1" target="_blank" class="collection-card group block bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
-                    <div class="h-48 bg-gradient-to-br from-persian-red to-pink-500 flex items-center justify-center">
-                        <i data-feather="cpu" class="w-24 h-24 text-white"></i>
+                <a href="https://huggingface.co/collections/PersianAICommunity/persian-models1" target="_blank" class="collection-card group block bg-white rounded-xl overflow-hidden border border-gray-200 hover:shadow-lg transition-all duration-200">
+                    <div class="h-32 bg-gradient-to-br from-[#10B981] to-[#34D399] flex items-center justify-center">
+                        <i data-feather="cpu" class="w-16 h-16 text-white"></i>
                     </div>
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2 group-hover:text-persian-orange transition-colors text-gray-900">مدل‌های نسل بعدی فارسی</h3>
-                        <p class="fa-text text-gray-800 font-medium">مدل‌های پیشرفته ترانسفورمر با بهینه‌سازی‌های ویژه زبان فارسی برای دقت ۹۹٫۷٪ در تمام وظایف NLP</p>
+                    <div class="p-5">
+                        <h3 class="text-lg font-semibold mb-2 text-gray-900 group-hover:text-[#FF6B00]">مدل‌های فارسی</h3>
+                        <p class="fa-text text-sm text-gray-600">مدل‌های ترانسفورمر با بهینه‌سازی ویژه زبان فارسی</p>
+                        <div class="mt-3 text-[#3B82F6] text-sm">۱۲ مدل ←</div>
                     </div>
 </a>
             </div>
         </div>
     </section>
-
-    <!-- Get Involved Section -->
+<!-- Get Involved Section -->
     <section class="py-20 px-4 bg-white">
         <div class="max-w-6xl mx-auto">
             <h2 class="section-title text-4xl md:text-5xl font-bold text-center mb-16 text-gray-900 drop-shadow-lg">

index.html

@@ -33,9 +33,10 @@
                         'fa': ['Vazirmatn', 'sans-serif'],
                     },
                     colors: {
-                        'persian-yellow': '#FCD34D',
-                        'persian-orange': '#FB923C',
-                        'persian-red': '#EF4444',
+                        'hf-orange': '#FF6B00',
+                        'hf-blue': '#3B82F6',
+                        'hf-green': '#10B981',
+                        'hf-purple': '#8B5CF6',
                     }
                 }
             }
@@ -44,237 +45,225 @@
 </head>
 <body class="font-en">
     <!-- Language Toggle -->
-    <div class="fixed top-4 right-4 z-50 flex gap-2 p-1 bg-gray-900/20 backdrop-blur-sm rounded-full">
-        <button class="px-4 py-2 rounded-full bg-gray-900 text-white shadow-lg hover:shadow-xl transition-all duration-300 text-sm font-medium hover:bg-gray-800 cursor-default">
-            English
-        </button>
-        <button onclick="location.href='index-fa.html'" class="px-4 py-2 rounded-full bg-white shadow-lg hover:shadow-xl transition-all duration-300 text-sm font-fa">
+    <div class="fixed top-4 right-4 z-50">
+        <button onclick="location.href='index-fa.html'" class="px-4 py-2 bg-white border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-colors duration-200 text-sm">
             فارسی
         </button>
     </div>
-    <!-- Hero Section -->
-    <section class="min-h-screen flex items-center justify-center relative overflow-hidden bg-gradient-to-br from-gray-900 via-gray-800 to-black">
-        <!-- Animated Background -->
-        <div class="absolute inset-0">
-            <div class="absolute top-20 right-20 w-72 h-72 bg-persian-yellow rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
-            <div class="absolute top-40 left-20 w-72 h-72 bg-persian-orange rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
-            <div class="absolute bottom-20 right-1/2 w-72 h-72 bg-persian-red rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
+<!-- Hero Section -->
+    <section class="min-h-screen flex items-center justify-center relative overflow-hidden bg-gradient-to-br from-[#FFEEE4] via-[#F9F5FF] to-[#E8F4FD]">
+        <!-- Background Pattern similar to Hugging Face -->
+        <div class="absolute inset-0 opacity-5">
+            <div class="absolute inset-0" style="background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(59,130,246,0.1) 35px, rgba(59,130,246,0.1) 70px);"></div>
         </div>
-<!-- Enhanced Hero Content -->
+        <!-- Enhanced Hero Content -->
         <div class="relative z-10 text-center px-4 max-w-6xl mx-auto">
-            <!-- Logo -->
+            <!-- Logo similar to Hugging Face -->
             <div class="mb-8">
-                <div class="inline-flex items-center justify-center w-32 h-32 rounded-full bg-gradient-to-br from-persian-yellow to-persian-red p-1 mb-6">
-                    <div class="w-full h-full rounded-full bg-black/90 backdrop-blur-sm flex items-center justify-center">
-                        <i data-feather="cpu" class="w-16 h-16 text-persian-yellow"></i>
-                    </div>
+                <div class="inline-flex items-center justify-center w-24 h-24 bg-gradient-to-br from-[#FF6B00] to-[#FF8E53] rounded-2xl mb-6 shadow-lg">
+                    <i data-feather="cpu" class="w-12 h-12 text-white"></i>
                 </div>
             </div>
-            <h1 class="text-6xl md:text-7xl font-black mb-6 bg-gradient-to-r from-persian-yellow via-persian-orange to-persian-red bg-clip-text text-transparent">
+            <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-[#FF6B00] to-[#3B82F6] bg-clip-text text-transparent" style="font-weight: 700;">
                 Persian AI Community
             </h1>
-            <p class="text-xl md:text-2xl text-gray-700 mb-8 max-w-3xl mx-auto leading-relaxed">
+            <p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto leading-relaxed">
                 Advancing Persian AI through collaborative datasets, models, and research
             </p>
             <div class="flex flex-wrap gap-4 justify-center mb-12">
-                <a href="https://huggingface.co/PersianAICommunity" target="_blank" class="group inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-persian-yellow to-persian-orange text-white font-semibold rounded-full hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
-                    <i data-feather="home" class="w-5 h-5"></i>
+                <a href="https://huggingface.co/PersianAICommunity" target="_blank" class="inline-flex items-center gap-2 px-6 py-3 bg-[#FF6B00] hover:bg-[#E55A00] text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-200">
+                    <i data-feather="home" class="w-4 h-4"></i>
                     View on HuggingFace
-                    <i data-feather="external-link" class="w-4 h-4"></i>
                 </a>
-                <a href="#collections" class="group inline-flex items-center gap-2 px-8 py-4 bg-white text-persian-red border-2 border-persian-red font-semibold rounded-full hover:bg-persian-red hover:text-white transition-all duration-300">
-                    <i data-feather="grid" class="w-5 h-5"></i>
+                <a href="#collections" class="inline-flex items-center gap-2 px-6 py-3 bg-white text-[#FF6B00] border border-[#FF6B00] font-medium rounded-lg hover:bg-[#FFF8F5] transition-all duration-200">
+                    <i data-feather="grid" class="w-4 h-4"></i>
                     Explore Collections
                 </a>
             </div>
             <!-- Stats -->
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16">
-                <div class="stat-card bg-white/95 backdrop-blur-sm rounded-2xl p-6 hover:scale-105 transition-transform duration-300">
-                    <div class="text-4xl font-bold text-gray-900 mb-2">
-                        <i data-feather="database" class="w-10 h-10 mx-auto mb-2 text-gray-900"></i>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
+                <div class="stat-card bg-white rounded-lg p-6 hover:shadow-lg transition-all duration-300 border border-gray-200">
+                    <div class="text-2xl font-bold text-gray-900 mb-1">
+                        <i data-feather="database" class="w-8 h-8 mx-auto mb-2 text-[#3B82F6]"></i>
                     </div>
-                    <div class="text-2xl font-bold text-gray-900">50+</div>
-                    <div class="text-lg text-gray-800 font-bold">Datasets</div>
-                    <div class="text-sm text-gray-600">Premium quality</div>
+                    <div class="text-3xl font-bold text-gray-900">50+</div>
+                    <div class="text-md text-gray-700 font-semibold">Datasets</div>
+                    <div class="text-sm text-gray-500">Premium quality</div>
                 </div>
-                <div class="stat-card bg-white/95 backdrop-blur-sm rounded-2xl p-6 hover:scale-105 transition-transform duration-300">
-                    <div class="text-4xl font-bold text-gray-900 mb-2">
-                        <i data-feather="box" class="w-10 h-10 mx-auto mb-2 text-gray-900"></i>
+                <div class="stat-card bg-white rounded-lg p-6 hover:shadow-lg transition-all duration-300 border border-gray-200">
+                    <div class="text-2xl font-bold text-gray-900 mb-1">
+                        <i data-feather="box" class="w-8 h-8 mx-auto mb-2 text-[#10B981]"></i>
                     </div>
-                    <div class="text-2xl font-bold text-gray-900">100+</div>
-                    <div class="text-lg text-gray-800 font-bold">Advanced Models</div>
-                    <div class="text-sm text-gray-600">Latest technology</div>
+                    <div class="text-3xl font-bold text-gray-900">100+</div>
+                    <div class="text-md text-gray-700 font-semibold">Models</div>
+                    <div class="text-sm text-gray-500">Advanced tech</div>
                 </div>
-                <div class="stat-card bg-white/95 backdrop-blur-sm rounded-2xl p-6 hover:scale-105 transition-transform duration-300">
-                    <div class="text-4xl font-bold text-gray-900 mb-2">
-                        <i data-feather="users" class="w-10 h-10 mx-auto mb-2 text-gray-900"></i>
+                <div class="stat-card bg-white rounded-lg p-6 hover:shadow-lg transition-all duration-300 border border-gray-200">
+                    <div class="text-2xl font-bold text-gray-900 mb-1">
+                        <i data-feather="users" class="w-8 h-8 mx-auto mb-2 text-[#F59E0B]"></i>
                     </div>
-                    <div class="text-2xl font-bold text-gray-900">1000+</div>
-                    <div class="text-lg text-gray-800 font-bold">AI Experts</div>
-                    <div class="text-sm text-gray-600">Researchers & developers</div>
+                    <div class="text-3xl font-bold text-gray-900">1000+</div>
+                    <div class="text-md text-gray-700 font-semibold">Community</div>
+                    <div class="text-sm text-gray-500">Researchers</div>
                 </div>
             </div>
 </div>
-        <!-- Scroll Indicator -->
+<!-- Scroll Indicator -->
         <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
             <i data-feather="chevron-down" class="w-8 h-8 text-gray-400"></i>
         </div>
 </section>
     <!-- Mission Section -->
-    <section class="py-20 px-4 bg-white">
+    <section class="py-20 px-4 bg-gray-50">
         <div class="max-w-6xl mx-auto">
-            <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 text-gray-900 drop-shadow-lg">
+            <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 text-gray-900">
                 Our Mission
             </h2>
             <div class="grid md:grid-cols-3 gap-8">
-                <div class="mission-card text-center p-8 rounded-2xl hover:shadow-2xl transition-all duration-300 border-2 border-transparent hover:border-persian-yellow bg-white/90">
-                    <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-persian-yellow to-persian-orange rounded-full flex items-center justify-center">
-                        <i data-feather="trending-up" class="w-10 h-10 text-white"></i>
+                <div class="mission-card text-center p-8 rounded-xl bg-white hover:shadow-lg transition-all duration-200 border border-gray-200">
+                    <div class="w-16 h-16 mx-auto mb-6 bg-gradient-to-br from-[#3B82F6] to-[#1E40AF] rounded-xl flex items-center justify-center">
+                        <i data-feather="trending-up" class="w-8 h-8 text-white"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-4 text-gray-900">Revolutionary Persian AI Innovation</h3>
-                    <p class="text-gray-800 leading-relaxed font-medium">Revolutionary transformer models and pioneering NLP research in Persian language processing</p>
+                    <h3 class="text-xl font-bold mb-4 text-gray-900">Advance Persian AI</h3>
+                    <p class="text-gray-600 leading-relaxed">Developing state-of-the-art models and research for Persian language processing</p>
                 </div>
                 
-                <div class="mission-card text-center p-8 rounded-2xl hover:shadow-2xl transition-all duration-300 border-2 border-transparent hover:border-persian-orange bg-white/90">
-                    <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-persian-orange to-persian-red rounded-full flex items-center justify-center">
-                        <i data-feather="unlock" class="w-10 h-10 text-white"></i>
+                <div class="mission-card text-center p-8 rounded-xl bg-white hover:shadow-lg transition-all duration-200 border border-gray-200">
+                    <div class="w-16 h-16 mx-auto mb-6 bg-gradient-to-br from-[#10B981] to-[#047857] rounded-xl flex items-center justify-center">
+                        <i data-feather="unlock" class="w-8 h-8 text-white"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-4 text-gray-900">Democratize Persian AI</h3>
-                    <p class="text-gray-800 leading-relaxed font-medium">Making premium datasets, pre-trained models, and AI development tools accessible worldwide</p>
+                    <h3 class="text-xl font-bold mb-4 text-gray-900">Open Access</h3>
+                    <p class="text-gray-600">Making quality datasets and models freely available to everyone</p>
                 </div>
                 
-                <div class="mission-card text-center p-8 rounded-2xl hover:shadow-2xl transition-all duration-300 border-2 border-transparent hover:border-persian-red bg-white/90">
-                    <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-persian-red to-pink-500 rounded-full flex items-center justify-center">
-                        <i data-feather="users" class="w-10 h-10 text-white"></i>
+                <div class="mission-card text-center p-8 rounded-xl bg-white hover:shadow-lg transition-all duration-200 border border-gray-200">
+                    <div class="w-16 h-16 mx-auto mb-6 bg-gradient-to-br from-[#F59E0B] to-[#D97706] rounded-xl flex items-center justify-center">
+                        <i data-feather="users" class="w-8 h-8 text-white"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-4 text-gray-900">Build Network of Innovators</h3>
-                    <p class="text-gray-800 leading-relaxed font-medium">Creating a global network of Persian AI researchers, developers and pioneers pushing boundaries</p>
+                    <h3 class="text-xl font-bold mb-4 text-gray-900">Community First</h3>
+                    <p class="text-gray-600">Building a global network of Persian AI researchers and developers</p>
                 </div>
             </div>
 </div>
     </section>
     <!-- Collections Section -->
-    <section id="collections" class="py-20 px-4 bg-gradient-to-br from-black via-gray-900 to-gray-800">
+    <section id="collections" class="py-20 px-4 bg-white">
         <div class="max-w-6xl mx-auto">
-            <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 text-white drop-shadow-2xl">
-                Revolutionary AI Collections
+            <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 text-gray-900">
+                Popular Collections
             </h2>
-            <div class="grid md:grid-cols-3 gap-8">
-                <a href="https://huggingface.co/collections/PersianAICommunity/fibonacci-ai" target="_blank" class="collection-card group block bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
-                    <div class="h-48 bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
-                        <i data-feather="git-branch" class="w-24 h-24 text-white"></i>
+            <div class="grid md:grid-cols-3 gap-6">
+                <a href="https://huggingface.co/collections/PersianAICommunity/fibonacci-ai" target="_blank" class="collection-card group block bg-white rounded-xl overflow-hidden border border-gray-200 hover:shadow-lg transition-all duration-200">
+                    <div class="h-32 bg-gradient-to-br from-[#8B5CF6] to-[#EC4899] flex items-center justify-center">
+                        <i data-feather="git-branch" class="w-16 h-16 text-white"></i>
                     </div>
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2 group-hover:text-persian-orange transition-colors text-gray-900">Fibonacci AI Series</h3>
-                        <p class="text-gray-800 font-medium">Revolutionary neural architectures with mathematical optimization for maximum computational efficiency</p>
+                    <div class="p-5">
+                        <h3 class="text-lg font-semibold mb-2 text-gray-900 group-hover:text-[#FF6B00]">Fibonacci AI</h3>
+                        <p class="text-sm text-gray-600">Advanced neural architectures with mathematical optimization</p>
+                        <div class="mt-3 text-[#3B82F6] text-sm">8 models →</div>
                     </div>
                 </a>
                 
-                <a href="https://huggingface.co/collections/PersianAICommunity/persian-datasets" target="_blank" class="collection-card group block bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
-                    <div class="h-48 bg-gradient-to-br from-persian-yellow to-persian-orange flex items-center justify-center">
-                        <i data-feather="database" class="w-24 h-24 text-white"></i>
+                <a href="https://huggingface.co/collections/PersianAICommunity/persian-datasets" target="_blank" class="collection-card group block bg-white rounded-xl overflow-hidden border border-gray-200 hover:shadow-lg transition-all duration-200">
+                    <div class="h-32 bg-gradient-to-br from-[#3B82F6] to-[#60A5FA] flex items-center justify-center">
+                        <i data-feather="database" class="w-16 h-16 text-white"></i>
                     </div>
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2 group-hover:text-persian-orange transition-colors text-gray-900">Premium Persian Datasets</h3>
-                        <p class="text-gray-800 font-medium">Gold-standard curated data for sentiment analysis, text classification, machine translation and conversational AI</p>
+                    <div class="p-5">
+                        <h3 class="text-lg font-semibold mb-2 text-gray-900 group-hover:text-[#FF6B00]">Persian Datasets</h3>
+                        <p class="text-sm text-gray-600">High-quality curated data for sentiment analysis and NMT</p>
+                        <div class="mt-3 text-[#3B82F6] text-sm">15 datasets →</div>
                     </div>
                 </a>
                 
-                <a href="https://huggingface.co/collections/PersianAICommunity/persian-models1" target="_blank" class="collection-card group block bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
-                    <div class="h-48 bg-gradient-to-br from-persian-red to-pink-500 flex items-center justify-center">
-                        <i data-feather="cpu" class="w-24 h-24 text-white"></i>
+                <a href="https://huggingface.co/collections/PersianAICommunity/persian-models1" target="_blank" class="collection-card group block bg-white rounded-xl overflow-hidden border border-gray-200 hover:shadow-lg transition-all duration-200">
+                    <div class="h-32 bg-gradient-to-br from-[#10B981] to-[#34D399] flex items-center justify-center">
+                        <i data-feather="cpu" class="w-16 h-16 text-white"></i>
                     </div>
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2 group-hover:text-persian-orange transition-colors text-gray-900">Next-Gen Persian Models</h3>
-                        <p class="text-gray-800 font-medium">Advanced transformer models with Persian-specific optimizations for 99.7% accuracy across all NLP tasks</p>
+                    <div class="p-5">
+                        <h3 class="text-lg font-semibold mb-2 text-gray-900 group-hover:text-[#FF6B00]">Persian Models</h3>
+                        <p class="text-sm text-gray-600">State-of-the-art transformer models optimized for Farsi</p>
+                        <div class="mt-3 text-[#3B82F6] text-sm">12 models →</div>
                     </div>
                 </a>
             </div>
 </div>
     </section>
     <!-- Get Involved Section -->
-    <section class="py-20 px-4 bg-white">
-        <div class="max-w-6xl mx-auto">
-            <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 text-gray-900 drop-shadow-lg">
-                Get Involved in Advanced Persian AI Revolution
+    <section class="py-20 px-4 bg-gray-50">
+        <div class="max-w-4xl mx-auto">
+            <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 text-gray-900">
+                Get Involved
             </h2>
-            <div class="bg-gradient-to-br from-persian-yellow/10 to-persian-red/10 rounded-3xl p-8 md:p-12">
-                <div class="grid md:grid-cols-2 gap-8 mb-12">
+            <div class="bg-white rounded-xl p-8 border border-gray-200">
+                <div class="space-y-8">
                     <div class="flex items-start gap-4">
-                        <div class="flex-shrink-0 w-12 h-12 bg-persian-yellow rounded-full flex items-center justify-center">
-                            <i data-feather="upload" class="w-6 h-6 text-white"></i>
+                        <div class="flex-shrink-0 w-10 h-10 bg-[#3B82F6] rounded-lg flex items-center justify-center">
+                            <i data-feather="upload" class="w-5 h-5 text-white"></i>
                         </div>
                         <div>
-                            <h3 class="text-xl font-bold mb-2 text-gray-900">Share Premium Datasets and Models</h3>
-                            <p class="text-gray-700 font-medium">Add your premium Persian datasets or next-gen AI models to our exclusive collection</p>
+                            <h3 class="text-lg font-semibold mb-1 text-gray-900">Share Models</h3>
+                            <p class="text-gray-600">Upload your Persian AI models to share with the community</p>
                         </div>
                     </div>
                     
                     <div class="flex items-start gap-4">
-                        <div class="flex-shrink-0 w-12 h-12 bg-persian-orange rounded-full flex items-center justify-center">
-                            <i data-feather="message-circle" class="w-6 h-6 text-white"></i>
+                        <div class="flex-shrink-0 w-10 h-10 bg-[#10B981] rounded-lg flex items-center justify-center">
+                            <i data-feather="database" class="w-5 h-5 text-white"></i>
                         </div>
                         <div>
-                            <h3 class="text-xl font-bold mb-2 text-gray-900">Join Elite Technical Discussions</h3>
-                            <p class="text-gray-700 font-medium">Connect with the elite AI community on Hugging Face or expert telegram group</p>
+                            <h3 class="text-lg font-semibold mb-1 text-gray-900">Contribute Datasets</h3>
+                            <p class="text-gray-600">Help us build better datasets for Persian language tasks</p>
                         </div>
                     </div>
                     
                     <div class="flex items-start gap-4">
-                        <div class="flex-shrink-0 w-12 h-12 bg-persian-red rounded-full flex items-center justify-center">
-                            <i data-feather="users" class="w-6 h-6 text-white"></i>
+                        <div class="flex-shrink-0 w-10 h-10 bg-[#F59E0B] rounded-lg flex items-center justify-center">
+                            <i data-feather="users" class="w-5 h-5 text-white"></i>
                         </div>
                         <div>
-                            <h3 class="text-xl font-bold mb-2 text-gray-900">Collaborate on Pioneering Projects</h3>
-                            <p class="text-gray-700 font-medium">Work together to push the boundaries of Persian-language AI knowledge</p>
-                        </div>
-                    </div>
-                    
-                    <div class="flex items-start gap-4">
-                        <div class="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-persian-yellow to-persian-red rounded-full flex items-center justify-center">
-                            <i data-feather="mail" class="w-6 h-6 text-white"></i>
-                        </div>
-                        <div>
-                            <h3 class="text-xl font-bold mb-2 text-gray-900">Submit Your Strategic Innovation</h3>
-                            <p class="text-gray-700 font-medium">Send your strategic contributions for immediate review to models@vectordbcloud.com</p>
+                            <h3 class="text-lg font-semibold mb-1 text-gray-900">Join Discussions</h3>
+                            <p class="text-gray-600">Connect with researchers and developers in our community</p>
                         </div>
                     </div>
                 </div>
                 
-                <div class="text-center">
-                    <a href="mailto:models@vectordbcloud.com" class="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-persian-yellow to-persian-red text-white font-semibold rounded-full hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 text-lg">
-                        <i data-feather="send" class="w-5 h-5"></i>
-                        Submit Your Strategic Contribution
+                <div class="text-center mt-8">
+                    <a href="https://huggingface.co/PersianAICommunity" target="_blank" class="inline-flex items-center gap-2 px-6 py-3 bg-[#FF6B00] hover:bg-[#E55A00] text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-200">
+                        Visit Our Hub
                     </a>
                 </div>
             </div>
 </div>
     </section>
     <!-- Footer -->
-    <footer class="py-12 px-4 bg-gradient-to-br from-gray-900 to-black text-white">
+    <footer class="py-12 px-4 bg-white border-t border-gray-200">
         <div class="max-w-6xl mx-auto">
             <div class="text-center">
                 <div class="flex justify-center gap-6 mb-8">
-                    <a href="https://huggingface.co/PersianAICommunity" target="_blank" class="hover:text-persian-yellow transition-colors">
-                        <i data-feather="home" class="w-6 h-6"></i>
+                    <a href="https://huggingface.co/PersianAICommunity" target="_blank" class="text-gray-600 hover:text-[#FF6B00] transition-colors">
+                        <i data-feather="home" class="w-5 h-5"></i>
                     </a>
-                    <a href="https://t.me/persianaichannel" target="_blank" class="hover:text-persian-yellow transition-colors">
-                        <i data-feather="send" class="w-6 h-6"></i>
+                    <a href="https://t.me/persianaichannel" target="_blank" class="text-gray-600 hover:text-[#FF6B00] transition-colors">
+                        <i data-feather="send" class="w-5 h-5"></i>
                     </a>
-                    <a href="mailto:models@vectordbcloud.com" class="hover:text-persian-yellow transition-colors">
-                        <i data-feather="mail" class="w-6 h-6"></i>
+                    <a href="mailto:models@vectordbcloud.com" class="text-gray-600 hover:text-[#FF6B00] transition-colors">
+                        <i data-feather="mail" class="w-5 h-5"></i>
                     </a>
                 </div>
                 
-                <p class="text-gray-400 mb-4">
+                <p class="text-gray-600 mb-2">
                     © 2024 Persian AI Community. All rights reserved.
                 </p>
                 
-                <p class="text-sm text-gray-400">
+                <p class="text-sm text-gray-500">
                     Building the future of Persian language AI through innovation and collaboration
                 </p>
             </div>
         </div>
     </footer>
 </body>
-</html>
+</html>
+<script src="script.js"></script>
+<script>
+    feather.replace();
+</script>