Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>سبيدي - الذكاء الاصطناعي المصري</title> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Cairo', sans-serif; | |
| } | |
| :root { | |
| --primary: #2C3E50; | |
| --secondary: #E74C3C; | |
| --accent: #F1C40F; | |
| --dark: #1a1a1a; | |
| --light: #ffffff; | |
| --gradient: linear-gradient(135deg, #E74C3C, #F1C40F); | |
| } | |
| body { | |
| background-color: var(--dark); | |
| color: var(--light); | |
| line-height: 1.6; | |
| } | |
| .hero { | |
| min-height: 100vh; | |
| background: radial-gradient(circle at center, #2c3e50 0%, #1a1a1a 100%); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| width: 200%; | |
| height: 200%; | |
| background: url('data:image/svg+xml,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" stroke="%23E74C3C" stroke-width="0.5" fill="none"/></svg>'); | |
| animation: rotate 60s linear infinite; | |
| opacity: 0.1; | |
| } | |
| @keyframes rotate { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| position: relative; | |
| } | |
| .hero-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| align-items: center; | |
| min-height: 90vh; | |
| } | |
| .hero-text h1 { | |
| font-size: 4.5rem; | |
| font-weight: 900; | |
| margin-bottom: 2rem; | |
| line-height: 1.2; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .hero-text p { | |
| font-size: 1.5rem; | |
| margin-bottom: 3rem; | |
| color: #ecf0f1; | |
| } | |
| .services { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 4rem; | |
| } | |
| .service-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 20px; | |
| padding: 2rem; | |
| transition: all 0.4s ease; | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .service-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: var(--gradient); | |
| opacity: 0; | |
| transition: 0.4s; | |
| z-index: 1; | |
| } | |
| .service-card:hover::before { | |
| opacity: 0.1; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| border-color: var(--secondary); | |
| } | |
| .service-icon { | |
| font-size: 3rem; | |
| color: var(--secondary); | |
| margin-bottom: 1.5rem; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .service-title { | |
| font-size: 1.8rem; | |
| margin-bottom: 1rem; | |
| color: var(--light); | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .service-description { | |
| color: #ecf0f1; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .features { | |
| display: flex; | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| } | |
| .feature { | |
| background: rgba(231, 76, 60, 0.1); | |
| padding: 1rem 2rem; | |
| border-radius: 15px; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .feature i { | |
| color: var(--secondary); | |
| font-size: 1.5rem; | |
| } | |
| .cta-button { | |
| display: inline-block; | |
| padding: 1.5rem 3rem; | |
| background: var(--gradient); | |
| color: var(--light); | |
| text-decoration: none; | |
| border-radius: 50px; | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| transition: 0.3s; | |
| border: none; | |
| cursor: pointer; | |
| box-shadow: 0 10px 20px rgba(231, 76, 60, 0.3); | |
| } | |
| .cta-button:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 15px 30px rgba(231, 76, 60, 0.4); | |
| } | |
| .floating-chat { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| background: var(--gradient); | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3); | |
| } | |
| .floating-chat:hover { | |
| transform: scale(1.1); | |
| } | |
| .floating-chat i { | |
| font-size: 1.5rem; | |
| color: var(--light); | |
| } | |
| @media (max-width: 968px) { | |
| .hero-content { | |
| grid-template-columns: 1fr; | |
| text-align: center; | |
| } | |
| .hero-text h1 { | |
| font-size: 3rem; | |
| } | |
| .features { | |
| flex-direction: column; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="hero"> | |
| <div class="container"> | |
| <div class="hero-content"> | |
| <div class="hero-text"> | |
| <h1>سبيدي - أول نموذج ذكاء اصطناعي مصري</h1> | |
| <p>نقدم لك تجربة فريدة مع أحدث تقنيات الذكاء الاصطناعي بلمسة مصرية</p> | |
| <div class="features"> | |
| <div class="feature"> | |
| <i class="fas fa-brain"></i> | |
| <span>ذكاء متطور</span> | |
| </div> | |
| <div class="feature"> | |
| <i class="fas fa-language"></i> | |
| <span>فهم اللهجة المصرية</span> | |
| </div> | |
| <div class="feature"> | |
| <i class="fas fa-bolt"></i> | |
| <span>سرعة فائقة</span> | |
| </div> | |
| </div> | |
| <a href="https://e3a88aa0e14bb53988.gradio.live/" class="cta-button">جرب سبيدي الآن</a> | |
| </div> | |
| <div class="services"> | |
| <div class="service-card"> | |
| <i class="fas fa-comments service-icon"></i> | |
| <h3 class="service-title">دردشة ذكية</h3> | |
| <p class="service-description">تحدث مع سبيدي باللهجة المصرية وسيفهمك على طول</p> | |
| </div> | |
| <div class="service-card"> | |
| <i class="fas fa-file-alt service-icon"></i> | |
| <h3 class="service-title">تلخيص النصوص</h3> | |
| <p class="service-description">لخص أي محتوى عربي في ثواني معدودة</p> | |
| </div> | |
| <div class="service-card"> | |
| <i class="fas fa-image service-icon"></i> | |
| <h3 class="service-title">معالجة الصور</h3> | |
| <p class="service-description">تحسين وتعديل الصور باحترافية</p> | |
| </div> | |
| <div class="service-card"> | |
| <i class="fas fa-stethoscope service-icon"></i> | |
| <h3 class="service-title">تحليل طبي</h3> | |
| <p class="service-description">تحليل النتائج الطبية وتقديم توصيات دقيقة</p> | |
| </div> | |
| <div class="service-card"> | |
| <i class="fas fa-tshirt service-icon"></i> | |
| <h3 class="service-title">مستشار الأزياء</h3> | |
| <p class="service-description">اقتراحات ذكية للملابس حسب ذوقك</p> | |
| </div> | |
| <div class="service-card"> | |
| <i class="fas fa-chart-line service-icon"></i> | |
| <h3 class="service-title">تحليل مالي</h3> | |
| <p class="service-description">تحليل السوق وتقديم نصائح استثمارية</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="floating-chat"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| </body> | |
| </html> |