|
|
<!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> |
