README / index.html
masoudmarandi's picture
Create index.html
10c39ef verified
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Persian AI Community | جامعه هوش مصنوعی فارسی</title>
<meta name="description" content="Advancing Persian AI through collaborative datasets, models, and research">
<!-- 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=Inter:wght@300;400;500;600;700;800&family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Feather Icons -->
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
<!-- Additional Fonts for Enhanced Design -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;700;900&display=swap" rel="stylesheet">
<!-- Tailwind Config -->
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'en': ['Inter', 'sans-serif'],
'fa': ['Vazirmatn', 'sans-serif'],
},
colors: {
'hf-orange': '#FF6B00',
'hf-blue': '#3B82F6',
'hf-green': '#10B981',
'hf-purple': '#8B5CF6',
}
}
}
}
</script>
</head>
<body class="font-en">
<!-- Language Toggle -->
<a href="index-fa.html" class="fixed top-4 right-4 z-50 px-4 py-2 bg-[#FF6B00] border border-[#FF6B00] text-white font-medium rounded-lg hover:bg-[#E55A00] transition-colors duration-200 text-sm" style="font-family: 'Vazirmatn', sans-serif;">
فارسی
</a>
<!-- 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 -->
<div class="relative z-10 text-center px-4 max-w-6xl mx-auto">
<!-- Logo similar to Hugging Face -->
<div class="mb-8">
<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-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-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="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
</a>
<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-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-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 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-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 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-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 -->
<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-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">
Our Mission
</h2>
<div class="grid md:grid-cols-3 gap-8">
<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">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-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">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-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">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-white">
<div class="max-w-6xl mx-auto">
<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-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-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-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-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-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-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-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-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-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-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-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-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-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-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 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-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="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="text-gray-600 hover:text-[#FF6B00] transition-colors">
<i data-feather="send" class="w-5 h-5"></i>
</a>
<a href="mailto:[email protected]" 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-600 mb-2">
© 2024 Persian AI Community. All rights reserved.
</p>
<p class="text-sm text-gray-500">
Building the future of Persian language AI through innovation and collaboration
</p>
</div>
</div>
</footer>
</body>
</html>
<script src="script.js"></script>
<script>
feather.replace();
</script>