Hugging Face's logo

Spaces:
Rayan545454
/
dds999
Running

App Files Community
dds999
File size: 11,016 Bytes
64c30c1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8d7889b
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>نبض - اختراق العقل عبر نبرة الصوت</title>
    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧠</text></svg>">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
    <style>
        body {
            font-family: 'Tajawal', sans-serif;
            direction: rtl;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .pulse-animation {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">
    <!-- Hero Section with Vanta.js Background -->
    <div id="vanta-bg" class="relative h-screen flex items-center justify-center overflow-hidden">
        <div class="absolute inset-0 bg-black opacity-70 z-10"></div>
        <div class="relative z-20 text-center px-4">
            <h1 class="text-5xl md:text-7xl font-bold text-white mb-6" data-aos="fade-down">
                نبض
            </h1>
            <p class="text-xl md:text-2xl text-gray-200 mb-8 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="200">
                اختراق العقل عبر نبرة الصوت
            </p>
            <p class="text-lg text-gray-300 mb-10 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="400">
                تقنية ذكاء اصطناعي متقدمة تحلل نبرة صوتك وتكشف عن حالتك النفسية بدقة مذهلة
            </p>
            <button class="bg-white text-purple-700 font-bold py-3 px-8 rounded-full text-lg hover:bg-gray-100 transition duration-300 pulse-animation" data-aos="zoom-in" data-aos-delay="600">
                ابدأ التجربة الآن
            </button>
        </div>
    </div>

    <!-- How It Works Section -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold text-center mb-16" data-aos="fade-up">كيف يعمل "نبض"؟</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
                <div class="text-center" data-aos="fade-up" data-aos-delay="100">
                    <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i data-feather="mic" class="text-purple-600 w-10 h-10"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-4">تسجيل الصوت</h3>
                    <p class="text-gray-600">قم بتسجيل نبرة صوتك لفترة قصيرة بينما تتحدث عن يومك أو مشاعرك</p>
                </div>
                <div class="text-center" data-aos="fade-up" data-aos-delay="200">
                    <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i data-feather="cpu" class="text-blue-600 w-10 h-10"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-4">تحليل الذكاء الاصطناعي</h3>
                    <p class="text-gray-600">نظامنا المتقدم يحلل الترددات والنغمات والاهتزازات في صوتك</p>
                </div>
                <div class="text-center" data-aos="fade-up" data-aos-delay="300">
                    <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i data-feather="eye" class="text-green-600 w-10 h-10"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-4">اكتشاف الحالة النفسية</h3>
                    <p class="text-gray-600">نكشف حالتك النفسية مثل: فرح، توتر، حزن، أو طاقة عالية</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Benefits Section -->
    <section class="py-20 gradient-bg text-white">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold text-center mb-16" data-aos="fade-up">ما الفائدة من "نبض"؟</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                <div data-aos="fade-right">
                    <img src="http://static.photos/wellness/640x360/42" alt="صحة نفسية" class="rounded-xl shadow-2xl">
                </div>
                <div data-aos="fade-left">
                    <ul class="space-y-6">
                        <li class="flex items-start">
                            <i data-feather="check-circle" class="text-green-300 mt-1 ml-3"></i>
                            <span class="text-xl">يساعدك على فهم نفسك بشكل أفضل</span>
                        </li>
                        <li class="flex items-start">
                            <i data-feather="check-circle" class="text-green-300 mt-1 ml-3"></i>
                            <span class="text-xl">تحسين حالتك المزاجية</span>
                        </li>
                        <li class="flex items-start">
                            <i data-feather="check-circle" class="text-green-300 mt-1 ml-3"></i>
                            <span class="text-xl">متابعة صحتك النفسية بطريقة مبتكرة</span>
                        </li>
                        <li class="flex items-start">
                            <i data-feather="check-circle" class="text-green-300 mt-1 ml-3"></i>
                            <span class="text-xl">أداة سهلة الاستخدام للجميع</span>
                        </li>
                        <li class="flex items-start">
                            <i data-feather="check-circle" class="text-green-300 mt-1 ml-3"></i>
                            <span class="text-xl">نتائج دقيقة ومباشرة</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold text-center mb-16" data-aos="fade-up">الأسئلة الشائعة</h2>
            <div class="max-w-3xl mx-auto space-y-8">
                <div class="bg-white p-6 rounded-xl shadow-md" data-aos="fade-up">
                    <h3 class="text-xl font-bold mb-3">ما هو "نبض" بالذكاء الاصطناعي؟</h3>
                    <p class="text-gray-600">"نبض" هو نظام ذكي يستخدم خوارزميات تحليل الصوت للتعرف على حالتك النفسية والمزاجية بدقة عالية.</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="100">
                    <h3 class="text-xl font-bold mb-3">كيف يعمل "نبض"؟</h3>
                    <p class="text-gray-600">يقوم بتسجيل نبرة صوتك، ثم يحلل الترددات والنغمات والاهتزازات عبر الذكاء الاصطناعي ليكشف حالتك مثل: فرح، توتر، حزن، أو طاقة عالية.</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="200">
                    <h3 class="text-xl font-bold mb-3">ما الفائدة من "نبض"؟</h3>
                    <p class="text-gray-600">يساعدك على فهم نفسك بشكل أفضل، تحسين حالتك المزاجية، ومتابعة صحتك النفسية بطريقة مبتكرة وسهلة.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 text-center gradient-bg text-white">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold mb-6" data-aos="fade-up">جرب "نبض" اليوم</h2>
            <p class="text-xl mb-10 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">
                اكتشف حالتك النفسية بدقة مذهلة من خلال تحليل نبرة صوتك
            </p>
            <button class="bg-white text-purple-700 font-bold py-4 px-10 rounded-full text-xl hover:bg-gray-100 transition duration-300 pulse-animation" data-aos="zoom-in" data-aos-delay="400">
                ابدأ التجربة المجانية
            </button>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-4 text-center">
            <h3 class="text-2xl font-bold mb-4">نبض</h3>
            <p class="text-gray-400 mb-6">اختراق العقل عبر نبرة الصوت</p>
            <div class="flex justify-center space-x-6 mb-8">
                <a href="#" class="text-gray-400 hover:text-white">
                    <i data-feather="twitter"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white">
                    <i data-feather="facebook"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white">
                    <i data-feather="instagram"></i>
                </a>
            </div>
            <p class="text-gray-500 text-sm">© 2023 نبض. جميع الحقوق محفوظة.</p>
        </div>
    </footer>

    <script>
        // Initialize AOS
        AOS.init({
            duration: 1000,
            once: true
        });
        
        // Initialize Feather Icons
        feather.replace();
        
        // Initialize Vanta.js
        document.addEventListener('DOMContentLoaded', function() {
            VANTA.GLOBE({
                el: "#vanta-bg",
                mouseControls: true,
                touchControls: true,
                gyroControls: false,
                minHeight: 200.00,
                minWidth: 200.00,
                scale: 1.00,
                scaleMobile: 1.00,
                color: 0x667eea,
                color2: 0x764ba2,
                backgroundColor: 0x0
            });
        });
    </script>
</body>
</html>