index.html

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>هوش مصنوعی اجتماعی</title>
    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
    <style>
        :root {
            --primary: #2c7be5;
            --secondary: #6e00ff;
            --success: #00d27a;
            --warning: #ffab00;
            --danger: #ff3b3b;
            --light: #f8f9fa;
            --dark: #1a202c;
        }

        body {
            font-family: 'Vazirmatn', sans-serif;
            line-height: 1.7;
            color: var(--dark);
        }

        .navbar-brand {
            font-weight: 700;
            color: var(--primary);
        }

        .nav-link {
            color: var(--dark);
            transition: all 0.3s;
        }

        .nav-link:hover {
            color: var(--primary);
        }

        .hero-section {
            background-image: url("assets/images/birds.jpg"), linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            min-height: 600px;
            padding: 100px 0;
        }

        .hero-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .feature-card {
            border: none;
            border-radius: 15px;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        .feature-icon {
            font-size: 3rem;
            color: var(--primary);
        }

        .project-card {
            border-radius: 15px;
            overflow: hidden;
            transition: transform 0.3s;
        }

        .project-card:hover {
            transform: scale(1.05);
        }

        .impact-item {
            background: var(--light);
            border-radius: 15px;
            padding: 2rem;
            margin: 1rem 0;
            transition: all 0.3s;
        }

        .impact-item:hover {
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .footer {
            background: var(--dark);
            color: white;
        }

        .footer a {
            color: var(--primary);
        }

        @media (max-width: 768px) {
            .hero-section {
                min-height: 400px;
                padding: 50px 0;
            }
        }
    </style>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="assets/images/logo.png" alt="لوگو" height="40" class="me-2">
                هوش مصنوعی اجتماعی
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#projects">پروژه‌ها</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#impact">چشم انداز</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">ارتباط</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-section">
        <div class="container hero-content text-center">
            <h1 class="display-4 mb-4"> کار گروهی برای قدرت بخشی به اراده‌ی عموم انسانها </h1>
            <p class="lead mb-5"> ما گروهی هستیم متشکل از متخصصین با پیش زمینه‌های متنوع که تلاش میکنیم ایده‌های نوآورانه در توسعه‌ی ابزارهای هوش‌مصنوعی برای تقویت خلاقیت انسان و شکل‌گیری جامعه‌ی مبتنی بر محبت را معرفی کنیم. </p>
            <a href="#projects" class="btn btn-light btn-lg rounded-pill px-5">مشاهده پروژه‌ها</a>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-5">
        <div class="container">
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="feature-card p-4 text-center h-100">
                        <i class="feature-icon bi bi-lightbulb"></i>
                        <h4 class="my-3">نوآوری</h4>
                        <p>تولید ابزارهای هوش مصنوعی با قابلیت توضیح‌پذیری و کنترل کاربر</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-card p-4 text-center h-100">
                        <i class="feature-icon bi bi-people"></i>
                        <h4 class="my-3">اجتماعی</h4>
                        <p>طراحی سیستم‌های توزیع‌شده برای مشارکت جمعی</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-card p-4 text-center h-100">
                        <i class="feature-icon bi bi-shield-check"></i>
                        <h4 class="my-3">اخلاقی</h4>
                        <p>رعایت اصول حریم خصوصی و امنیت داده‌ها</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Projects Section -->
    <section id="projects" class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center mb-5 text-primary">پروژه‌های با محوریت توسعه مدل (شناخت)</h2>
            <div class="row g-4">
                <div class="col-md-6 col-lg-4">
                    <div class="card project-card">
                        <img src="assets/images/ipso-facto.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">مدل توضیح‌پذیر بالفعل</h5>
                            <p class="card-text">سیستمی برای آگاهی و کنترل کاربر در فرآیند استنتاج مدل</p>
                            <a href="#" class="btn btn-primary">مشاهده جزئیات</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="card project-card">
                        <img src="assets/images/ipso-facto.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">مدل توزیع شده</h5>
                            <p class="card-text">سیستمی برای تعاون و امکان تصرف موجودیت ها در مدل بر اساس ظرفیت ها</p>
                            <a href="projects/dist_llm.html" class="btn btn-primary">مشاهده جزئیات</a>
                        </div>
                    </div>
                </div>
                <!-- Add more project cards here -->
            </div>
        </div>
    </section>

    <!-- Impact Section -->
    <section id="impact" class="py-5">
        <div class="container">
            <h2 class="text-center mb-5 text-secondary">تأثیرات سرمایه‌دارانه بر هوش مصنوعی</h2>
            <div class="row g-4">
                <div class="col-md-6">
                    <div class="impact-item">
                        <h3>۱. انحصار داده‌ها</h3>
                        <p>رقابت در تجمیع داده‌ها به حدی رسیده که به "نفت جدید" معروف شده است.</p>
                    </div>
                </div>
                <!-- Add more impact items here -->
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer py-4">
        <div class="container text-center">
            <p class="mb-0">تمامی حقوق محفوظ است © ۱۴۰۳ گروه هوش مصنوعی اجتماعی</p>
            <div class="social-icons mt-3">
                <a href="#"><i class="bi bi-twitter me-3"></i></a>
                <a href="#"><i class="bi bi-linkedin me-3"></i></a>
                <a href="#"><i class="bi bi-github"></i></a>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>