Spaces:

joermd
/

home

Running

App Files Files Community

joermd commited on Jan 1

Commit

5f97ed6

verified ·

1 Parent(s): 50b394d

Update index.html

Browse files

Files changed (1) hide show

index.html +193 -56

index.html CHANGED Viewed

@@ -1,63 +1,200 @@
-import React from 'react';
-import { MessageCircle, Brain, Image, FileText, Code } from 'lucide-react';
-const HomePage = () => {
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
-      {/* الرأس */}
-      <header className="bg-white shadow-md">
-        <div className="container mx-auto px-4 py-6">
-          <div className="flex items-center justify-between">
-            <h1 className="text-2xl font-bold text-indigo-600">Speedy Sons</h1>
-            <nav className="space-x-4 text-right">
-              <button className="px-4 py-2 text-indigo-600 hover:text-indigo-800">الرئيسية</button>
-              <button className="px-4 py-2 text-indigo-600 hover:text-indigo-800">خدماتنا</button>
-              <button className="px-4 py-2 text-indigo-600 hover:text-indigo-800">تواصل معنا</button>
-            </nav>
-          </div>
-        </div>
-      </header>
-      {/* القسم الرئيسي */}
-      <main className="container mx-auto px-4 py-12">
-        <div className="text-center mb-16">
-          <h2 className="text-4xl font-bold text-gray-900 mb-4">أول نموذج ذكاء اصطناعي باللغة العربية</h2>
-          <p className="text-xl text-gray-600">اكتشف قوة الذكاء الاصطناعي بلغتك الأم</p>
-        </div>
-        {/* خدمات الذكاء الاصطناعي */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          <div className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
-            <MessageCircle className="w-12 h-12 text-indigo-600 mb-4" />
-            <h3 className="text-xl font-semibold mb-2">توليد النصوص</h3>
-            <p className="text-gray-600">إنشاء محتوى عربي أصيل بتقنيات الذكاء الاصطناعي</p>
-            <button className="mt-4 bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700">جرب الآن</button>
-          </div>
-          <div className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
-            <Brain className="w-12 h-12 text-indigo-600 mb-4" />
-            <h3 className="text-xl font-semibold mb-2">تحليل المشاعر</h3>
-            <p className="text-gray-600">تحليل المشاعر في النصوص العربية بدقة عالية</p>
-            <button className="mt-4 bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700">جرب الآن</button>
-          </div>
-          <div className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
-            <Image className="w-12 h-12 text-indigo-600 mb-4" />
-            <h3 className="text-xl font-semibold mb-2">توليد الصور</h3>
-            <p className="text-gray-600">إنشاء صور إبداعية من وصف نصي عربي</p>
-            <button className="mt-4 bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700">جرب الآن</button>
-          </div>
         </div>
-      </main>
-      {/* التذييل */}
-      <footer className="bg-gray-800 text-white py-8 mt-16">
-        <div className="container mx-auto px-4 text-center">
-          <p className="text-sm">جميع الحقوق محفوظة © 2025 Speedy Sons</p>
         </div>
-      </footer>
     </div>
-  );
-};
-export default HomePage;

+<!DOCTYPE html>
+<html dir="rtl" lang="ar">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Speedy Sons - الذكاء الاصطناعي العربي</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Tajawal', sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #1a1a2e, #16213e);
+            color: white;
+        }
+        .header {
+            padding: 2rem;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+        }
+        .animated-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+        }
+        .circle {
+            position: absolute;
+            border-radius: 50%;
+            animation: float 6s infinite ease-in-out;
+        }
+        .circle-1 {
+            width: 300px;
+            height: 300px;
+            background: rgba(100, 100, 255, 0.1);
+            top: -50px;
+            left: 10%;
+        }
+        .circle-2 {
+            width: 200px;
+            height: 200px;
+            background: rgba(255, 100, 255, 0.1);
+            top: 30%;
+            right: 15%;
+            animation-delay: 1s;
+        }
+        .content {
+            position: relative;
+            z-index: 2;
+        }
+        h1 {
+            font-size: 3.5rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(45deg, #4facfe, #00f2fe);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .services {
+            display: flex;
+            justify-content: center;
+            gap: 2rem;
+            flex-wrap: wrap;
+            padding: 2rem;
+        }
+        .service-card {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 2rem;
+            width: 300px;
+            text-align: center;
+            transition: transform 0.3s;
+        }
+        .service-card:hover {
+            transform: translateY(-10px);
+        }
+        .testimonials {
+            padding: 4rem 2rem;
+        }
+        .testimonials h2 {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+        .testimonial-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2rem;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .testimonial-card {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 15px;
+            padding: 1.5rem;
+            text-align: center;
+        }
+        .testimonial-img {
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+            margin: 0 auto 1rem;
+            object-fit: cover;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-20px); }
+        }
+        button {
+            background: linear-gradient(45deg, #4facfe, #00f2fe);
+            border: none;
+            padding: 1rem 2rem;
+            border-radius: 50px;
+            color: white;
+            font-size: 1.2rem;
+            cursor: pointer;
+            transition: transform 0.3s;
+        }
+        button:hover {
+            transform: scale(1.05);
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <div class="animated-bg">
+            <div class="circle circle-1"></div>
+            <div class="circle circle-2"></div>
         </div>
+        <div class="content">
+            <h1>Speedy Sons</h1>
+            <p>أول نموذج ذكاء اصطناعي باللغة العربية</p>
+        </div>
+    </div>
+    <div class="services">
+        <div class="service-card">
+            <h3>توليد النصوص</h3>
+            <p>إنشاء محتوى عربي أصيل باستخدام الذكاء الاصطناعي</p>
+            <button>جرب الآن</button>
+        </div>
+        <div class="service-card">
+            <h3>تحليل المشاعر</h3>
+            <p>تحليل المشاعر في النصوص العربية بدقة عالية</p>
+            <button>جرب الآن</button>
+        </div>
+        <div class="service-card">
+            <h3>الترجمة الذكية</h3>
+            <p>ترجمة احترافية مع الحفاظ على السياق</p>
+            <button>جرب الآن</button>
         </div>
     </div>
+    <div class="testimonials">
+        <h2>تجارب المستخدمين</h2>
+        <div class="testimonial-grid">
+            <div class="testimonial-card">
+                <img src="/api/placeholder/100/100" alt="مستخدم 1" class="testimonial-img">
+                <h3>أحمد محمد</h3>
+                <p>"ساعدني النموذج في كتابة محتوى احترافي لموقعي بوقت قياسي"</p>
+            </div>
+            <div class="testimonial-card">
+                <img src="/api/placeholder/100/100" alt="مستخدم 2" class="testimonial-img">
+                <h3>سارة أحمد</h3>
+                <p>"دقة الترجمة مذهلة وتوفر علي الكثير من الوقت"</p>
+            </div>
+            <div class="testimonial-card">
+                <img src="/api/placeholder/100/100" alt="مستخدم 3" class="testimonial-img">
+                <h3>محمد خالد</h3>
+                <p>"أفضل نموذج عربي جربته حتى الآن"</p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>