| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>خدمات داراك | Darak Services</title> |
| |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> |
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Outfit:wght@300;400;600;800;900&display=swap" rel="stylesheet"> |
| |
| <style> |
| :root { |
| --bg: #05070f; |
| --panel: rgba(13, 17, 32, 0.75); |
| --panel-2: rgba(20, 25, 45, 0.6); |
| --border: rgba(255, 255, 255, 0.08); |
| --border-strong: rgba(212, 167, 44, 0.3); |
| --gold: #d4a72c; |
| --gold-light: #fbe58a; |
| --text: #ffffff; |
| --muted: #94a3b8; |
| --shadow-gold: 0 8px 25px rgba(212,167,44,0.3); |
| --font-ar: 'Cairo', sans-serif; |
| --font-en: 'Outfit', sans-serif; |
| } |
| |
| * { margin: 0; padding: 0; box-sizing: border-box; } |
| |
| body { |
| font-family: var(--font-ar); |
| background-color: var(--bg); |
| color: var(--text); |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| overflow-x: hidden; |
| } |
| |
| .eng { font-family: var(--font-en); } |
| |
| |
| .bg-glow { |
| position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -2; pointer-events: none; |
| background: |
| radial-gradient(600px 400px at 15% 10%, rgba(212,167,44,0.06), transparent 60%), |
| radial-gradient(700px 500px at 85% 20%, rgba(59,130,246,0.05), transparent 60%), |
| radial-gradient(900px 600px at 50% 100%, rgba(212,167,44,0.04), transparent 60%); |
| } |
| |
| |
| @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } |
| @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } |
| @keyframes shimmerSweep { 0% { left: -100%; } 100% { left: 200%; } } |
| @keyframes pulseGlow { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } |
| |
| .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); } |
| .reveal.active { opacity: 1; transform: translateY(0); } |
| |
| |
| header { |
| display: flex; align-items: center; justify-content: space-between; |
| padding: 8px 36px; |
| background: rgba(5,7,15,0.7); backdrop-filter: blur(25px) saturate(180%); |
| border-bottom: 1px solid rgba(212,167,44,0.15); |
| box-shadow: 0 4px 30px rgba(0,0,0,0.5); |
| height: 55px; flex-shrink: 0; z-index: 50; position: sticky; top: 0; |
| } |
| .logo-block { display: flex; flex-direction: row; align-items: center; gap: 8px; line-height: 1; } |
| .logo-ar { font-size: 21px; font-weight: 900; color: var(--gold); letter-spacing: .5px; } |
| .logo-en { font-size: 9.5px; letter-spacing: 4px; color: var(--muted); margin-top: 2px; } |
| |
| .main-nav { display: flex; align-items: center; gap: 6px; background: rgba(13,17,32,0.7); backdrop-filter: blur(25px); border: 1px solid rgba(255,255,255,0.06); border-radius: 50px; padding: 4px; } |
| .main-nav a { color: var(--text); font-size: 12px; font-weight: 700; padding: 8px 16px; border-radius: 50px; transition: all .3s ease; position: relative; text-decoration: none; } |
| .main-nav a::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--gold); transition: width .3s ease; border-radius: 2px; } |
| .main-nav a:hover::after { width: 60%; } |
| .main-nav a:hover { color: var(--gold); background: rgba(212,167,44,0.08); } |
| .main-nav a.active { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #14121a; box-shadow: 0 0 15px rgba(212,167,44,0.4); } |
| .main-nav a.active::after { display: none; } |
| |
| .header-actions { display: flex; align-items: center; gap: 10px; } |
| .icon-btn { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--panel); border: 1px solid var(--border); color: var(--muted); font-size: 14px; transition: all .2s ease; text-decoration: none; cursor: pointer; } |
| .icon-btn:hover { color: var(--gold); border-color: var(--border-strong); transform: translateY(-2px); } |
| |
| .add-property-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #14121a; font-weight: 800; font-size: 13.5px; box-shadow: var(--shadow-gold); transition: transform .2s ease, filter .2s ease; position: relative; overflow: hidden; text-decoration: none; } |
| .add-property-btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: shimmerSweep 3s infinite; } |
| .add-property-btn:hover { transform: translateY(-2px); filter: brightness(1.06); } |
| |
| |
| .main-footer { padding: 6px 36px; border-top: 1px solid rgba(212,167,44,0.15); display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 16px; height: 35px; flex-shrink: 0; background: rgba(5,7,15,0.85); z-index: 50; margin-top: auto; } |
| .footer-brand { font-size: 12px; color: var(--muted); white-space: nowrap; } |
| .footer-brand .eng { color: var(--gold); font-weight: 800; } |
| .footer-links { display: flex; gap: 18px; flex-wrap: nowrap; } |
| .footer-links a { font-size: 11.5px; color: var(--muted); transition: color .2s ease; white-space: nowrap; text-decoration: none; } |
| .footer-links a:hover { color: var(--gold); } |
| .footer-social { display: flex; gap: 8px; } |
| .footer-social a { width: 30px; height: 30px; border-radius: 50%; background: var(--panel); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; transition: all .2s ease; text-decoration: none; } |
| .footer-social a:hover { color: var(--gold-light); border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(212,167,44,0.3); } |
| |
| |
| main { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| |
| .hero-section { |
| position: relative; |
| height: 70vh; |
| min-height: 600px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| overflow: hidden; |
| padding: 0 20px; |
| } |
| |
| .hero-bg { |
| position: absolute; |
| top: 0; left: 0; width: 100%; height: 100%; |
| background: url('assets/bg_cityscape_v2_1781334786259.png') center/cover no-repeat; |
| z-index: -1; |
| opacity: 0.4; |
| mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%); |
| -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%); |
| } |
| .hero-glow { |
| position: absolute; |
| top: 50%; left: 50%; transform: translate(-50%, -50%); |
| width: 600px; height: 600px; |
| background: radial-gradient(circle, rgba(212,167,44,0.15) 0%, transparent 70%); |
| z-index: 0; pointer-events: none; |
| animation: pulseGlow 4s infinite alternate ease-in-out; |
| } |
| |
| .hero-content { |
| max-width: 800px; |
| z-index: 1; |
| animation: fadeInUp 1s ease forwards; |
| } |
| |
| .badge { |
| display: inline-flex; align-items: center; gap: 8px; |
| padding: 6px 16px; border-radius: 50px; |
| background: rgba(212,167,44,0.1); border: 1px solid rgba(212,167,44,0.3); |
| color: var(--gold-light); font-size: 13px; font-weight: 700; |
| margin-bottom: 24px; |
| box-shadow: 0 0 20px rgba(212,167,44,0.2); |
| } |
| .badge i { animation: pulseGlow 2s infinite; } |
| |
| .hero-title { |
| font-size: 48px; font-weight: 900; line-height: 1.2; |
| background: linear-gradient(to bottom right, #fff, #94a3b8); |
| -webkit-background-clip: text; -webkit-text-fill-color: transparent; |
| margin-bottom: 24px; |
| } |
| .hero-title span { |
| background: linear-gradient(135deg, var(--gold-light), var(--gold)); |
| -webkit-background-clip: text; -webkit-text-fill-color: transparent; |
| display: block; font-size: 64px; margin-top: 8px; filter: drop-shadow(0 4px 15px rgba(212,167,44,0.3)); |
| } |
| |
| .hero-desc { |
| font-size: 18px; color: var(--muted); line-height: 1.6; max-width: 600px; margin: 0 auto 40px; font-weight: 600; |
| } |
| |
| .cta-btn { |
| display: inline-flex; align-items: center; justify-content: center; gap: 12px; |
| padding: 16px 36px; border-radius: 999px; font-size: 18px; font-weight: 800; |
| background: linear-gradient(135deg, var(--gold-light), var(--gold)); |
| color: #14121a; text-decoration: none; |
| box-shadow: 0 15px 35px rgba(212,167,44,0.4), inset 0 0 0 1px rgba(255,255,255,0.4); |
| transition: all 0.3s ease; position: relative; overflow: hidden; |
| } |
| .cta-btn::after { |
| content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); |
| animation: shimmerSweep 3s infinite; |
| } |
| .cta-btn:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 20px 45px rgba(212,167,44,0.6); } |
| |
| |
| .bento-section { |
| padding: 80px 36px; |
| max-width: 1400px; |
| margin: 0 auto; |
| } |
| |
| .section-title { |
| text-align: center; font-size: 36px; font-weight: 900; color: var(--text); margin-bottom: 60px; |
| } |
| .section-title span { color: var(--gold); } |
| |
| .bento-grid { |
| display: grid; |
| grid-template-columns: repeat(12, 1fr); |
| grid-template-rows: auto auto; |
| gap: 24px; |
| } |
| |
| .bento-card { |
| background: linear-gradient(145deg, rgba(255,255,255,0.03), rgba(0,0,0,0.4)); |
| backdrop-filter: blur(20px); |
| border: 1px solid rgba(255,255,255,0.05); |
| border-top: 1px solid rgba(212,167,44,0.2); |
| border-radius: 24px; |
| padding: 32px; |
| display: flex; |
| flex-direction: column; |
| position: relative; |
| overflow: hidden; |
| transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| box-shadow: 0 20px 50px rgba(0,0,0,0.5); |
| } |
| .bento-card:hover { |
| transform: translateY(-8px); |
| border-color: rgba(212,167,44,0.4); |
| box-shadow: 0 30px 60px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(212,167,44,0.2); |
| } |
| |
| .bento-card::before { |
| content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; |
| background: radial-gradient(circle at top right, rgba(212,167,44,0.1), transparent 70%); |
| pointer-events: none; opacity: 0; transition: opacity 0.5s ease; |
| } |
| .bento-card:hover::before { opacity: 1; } |
| |
| |
| .card-large { grid-column: span 8; } |
| .card-medium { grid-column: span 4; } |
| .card-full { grid-column: span 12; display: flex; flex-direction: row; align-items: center; gap: 40px; } |
| |
| @media (max-width: 1000px) { |
| .card-large, .card-medium { grid-column: span 12; } |
| .card-full { flex-direction: column; text-align: center; } |
| } |
| |
| .bento-icon { |
| width: 70px; height: 70px; border-radius: 20px; |
| background: linear-gradient(135deg, rgba(212,167,44,0.1), rgba(0,0,0,0.5)); |
| border: 1px solid rgba(212,167,44,0.2); |
| display: flex; align-items: center; justify-content: center; |
| margin-bottom: 24px; |
| transition: transform 0.5s ease; |
| } |
| .bento-card:hover .bento-icon { transform: scale(1.1) rotate(-5deg); box-shadow: 0 10px 25px rgba(212,167,44,0.3); } |
| .bento-icon img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); } |
| |
| .bento-title { font-size: 24px; font-weight: 800; color: var(--gold-light); margin-bottom: 12px; } |
| .bento-desc { font-size: 15px; color: var(--muted); line-height: 1.6; } |
| |
| .card-full .bento-content { flex: 1; } |
| .card-full .bento-visual { flex: 1; height: 300px; border-radius: 16px; background: rgba(0,0,0,0.3); overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,0.05); } |
| .card-full .bento-visual img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: opacity 0.5s ease; } |
| .bento-card:hover .bento-visual img { opacity: 1; transform: scale(1.05); } |
| |
| |
| .timeline-section { |
| padding: 100px 36px; |
| background: linear-gradient(to bottom, rgba(5,7,15,0) 0%, rgba(13,17,32,0.8) 50%, rgba(5,7,15,0) 100%); |
| position: relative; |
| } |
| |
| .timeline-container { |
| max-width: 800px; margin: 0 auto; position: relative; |
| } |
| .timeline-container::before { |
| content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); |
| width: 2px; height: 100%; background: linear-gradient(to bottom, transparent, var(--gold), transparent); |
| } |
| |
| .timeline-step { |
| display: flex; justify-content: flex-end; align-items: center; width: 50%; margin-bottom: 60px; position: relative; padding-left: 40px; padding-right: 0; |
| } |
| .timeline-step:nth-child(even) { |
| margin-left: auto; justify-content: flex-start; padding-right: 40px; padding-left: 0; |
| } |
| |
| .timeline-dot { |
| width: 20px; height: 20px; border-radius: 50%; background: var(--gold); |
| position: absolute; top: 50%; transform: translateY(-50%); right: -10px; |
| box-shadow: 0 0 20px var(--gold); border: 4px solid var(--bg); |
| } |
| .timeline-step:nth-child(even) .timeline-dot { left: -10px; right: auto; } |
| |
| .timeline-content { |
| background: rgba(13,17,32,0.8); backdrop-filter: blur(10px); |
| border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; padding: 24px; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.5); width: 100%; |
| transition: all 0.3s ease; |
| } |
| .timeline-step:hover .timeline-content { border-color: rgba(212,167,44,0.3); transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.7); } |
| .timeline-step:hover .timeline-dot { transform: translateY(-50%) scale(1.3); box-shadow: 0 0 30px var(--gold); transition: all 0.3s ease; } |
| |
| .step-num { font-family: var(--font-en); font-size: 48px; font-weight: 900; color: rgba(212,167,44,0.1); position: absolute; top: -10px; right: 20px; z-index: 0; } |
| .timeline-step:nth-child(even) .step-num { left: 20px; right: auto; } |
| |
| .step-title { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 8px; position: relative; z-index: 1; } |
| .step-desc { font-size: 14px; color: var(--muted); line-height: 1.6; position: relative; z-index: 1; } |
| |
| |
| .bottom-cta { |
| text-align: center; padding: 100px 20px; position: relative; |
| } |
| .bottom-cta h2 { font-size: 40px; font-weight: 900; margin-bottom: 30px; color: #fff; } |
| |
| </style> |
| </head> |
| <body> |
|
|
| <div class="bg-glow"></div> |
|
|
| |
| <header> |
| <div class="logo-block"> |
| <img src="logo.png" alt="Darak Logo" style="height:38px;width:auto;object-fit:contain; filter: drop-shadow(0 0 10px rgba(212,167,44,0.5));"> |
| <span class="logo-ar" style="margin-right:6px;">داراك</span> |
| <span class="logo-en eng">DARAK</span> |
| </div> |
| <nav class="main-nav" aria-label="التنقل الرئيسي"> |
| <a href="index.html" class="nav-link">الرئيسية</a> |
| <a href="explore.html" class="nav-link">العقارات</a> |
| <a href="onboarding.html" class="nav-link">المناطق</a> |
| <a href="services.html" class="nav-link active">الخدمات</a> |
| </nav> |
| <div class="header-actions"> |
| <a href="login.html" class="icon-btn" aria-label="حسابي"><i class="fa-regular fa-user"></i></a> |
| <button class="icon-btn" aria-label="الإشعارات"><i class="fa-regular fa-bell"></i></button> |
| <button class="icon-btn" aria-label="المفضلة"><i class="fa-regular fa-heart"></i></button> |
| <a href="add-property.html" class="add-property-btn"><i class="fa-solid fa-plus"></i> أضف عقارك</a> |
| </div> |
| </header> |
|
|
| <main> |
| |
| <section class="hero-section"> |
| <div class="hero-bg"></div> |
| <div class="hero-glow"></div> |
| <div class="hero-content"> |
| <div class="badge"><i class="fa-solid fa-wand-magic-sparkles"></i> الجيل الجديد من التكنولوجيا العقارية</div> |
| <h1 class="hero-title">أكثر من مجرد بحث...<br><span>مستشارك العقاري الذكي</span></h1> |
| <p class="hero-desc">يقدم داراك مجموعة متكاملة من خدمات الذكاء الاصطناعي التي تساعدك في البحث، المقارنة، التقييم، وحتى التصميم الداخلي بلمسة زر واحدة.</p> |
| <a href="#explore-services" class="cta-btn"><i class="fa-solid fa-rocket"></i> اكتشف الخدمات</a> |
| </div> |
| </section> |
|
|
| |
| <section id="explore-services" class="bento-section"> |
| <h2 class="section-title reveal">خدمات <span>SaaS</span> المتكاملة</h2> |
| |
| <div class="bento-grid"> |
| |
| |
| <div class="bento-card card-large reveal d1"> |
| <div class="bento-icon"><img src="assets/icon_house_1781332970134.png" alt="Smart Search"></div> |
| <h3 class="bento-title">البحث الذكي الدلالي</h3> |
| <p class="bento-desc">تحدث مع محرك البحث بلغتك الطبيعية. قل "أريد شقة قريبة من عملي في التجمع بها مسبح" وسيقوم الذكاء الاصطناعي بتحليل طلبك وعرض أدق النتائج في ثوانٍ، متجاوزاً فلاتر البحث التقليدية المعقدة.</p> |
| </div> |
|
|
| |
| <div class="bento-card card-medium reveal d2"> |
| <div class="bento-icon"><img src="assets/icon_chart_1781333002728.png" alt="Valuation"></div> |
| <h3 class="bento-title">التقييم الذكي للعقارات</h3> |
| <p class="bento-desc">احصل على تقييم دقيق وفوري لقيمة أي عقار بناءً على تحليل آلاف البيانات السوقية الحية، لضمان استثمار آمن.</p> |
| </div> |
|
|
| |
| <div class="bento-card card-full reveal d3"> |
| <div class="bento-content"> |
| <div class="bento-icon"><img src="assets/icon_room_1781332981672.png" alt="Interior Design"></div> |
| <h3 class="bento-title">التصميم الداخلي بالذكاء الاصطناعي</h3> |
| <p class="bento-desc">ارفع صورة أي غرفة فارغة، وسيقوم داراك بتأثيثها وتشطيبها افتراضياً بعدة أنماط (مودرن، كلاسيك، بوهيمي) لتتخيل منزلك المستقبلي قبل الشراء.</p> |
| </div> |
| <div class="bento-visual"> |
| <img src="assets/property_v2_3_1781334843026.png" alt="Interior Design Example"> |
| </div> |
| </div> |
|
|
| |
| <div class="bento-card card-medium reveal d4"> |
| <div class="bento-icon"><img src="assets/icon_calculator_1781332992881.png" alt="Calculator"></div> |
| <h3 class="bento-title">حاسبة التشطيب والفرش</h3> |
| <p class="bento-desc">احسب تكلفة تشطيب وحدتك بدقة متناهية مع تحديثات فورية لأسعار الخامات والمصنعيات في السوق.</p> |
| </div> |
|
|
| |
| <div class="bento-card card-large reveal d5"> |
| <div class="bento-icon"><img src="assets/icon_scales_1781333012031.png" alt="Comparison"></div> |
| <h3 class="bento-title">المقارنة الاستثمارية المعمقة</h3> |
| <p class="bento-desc">قارن بين عدة عقارات ليس فقط في المواصفات، بل في العائد الاستثماري المتوقع، معدل الإيجار السنوي، وتوقعات زيادة القيمة المستقبلية.</p> |
| </div> |
|
|
| </div> |
| </section> |
|
|
| |
| <section class="timeline-section"> |
| <h2 class="section-title reveal">كيف يعمل نظام <span>داراك</span>؟</h2> |
| <div class="timeline-container"> |
| |
| <div class="timeline-step reveal"> |
| <div class="timeline-dot"></div> |
| <div class="timeline-content"> |
| <div class="step-num">01</div> |
| <h4 class="step-title">اسأل ببساطة</h4> |
| <p class="step-desc">اكتب طلبك أو تحدث صوتياً مع مساعد داراك. لا حاجة لملء نماذج طويلة.</p> |
| </div> |
| </div> |
|
|
| <div class="timeline-step reveal"> |
| <div class="timeline-dot"></div> |
| <div class="timeline-content"> |
| <div class="step-num">02</div> |
| <h4 class="step-title">تحليل الذكاء الاصطناعي</h4> |
| <p class="step-desc">يقوم النموذج بتحليل طلبك، ومطابقته مع السوق العقاري والميزانية المتاحة.</p> |
| </div> |
| </div> |
|
|
| <div class="timeline-step reveal"> |
| <div class="timeline-dot"></div> |
| <div class="timeline-content"> |
| <div class="step-num">03</div> |
| <h4 class="step-title">التخيل والتخطيط</h4> |
| <p class="step-desc">شاهد تصميمات افتراضية للوحدة، واحسب تكاليف التشطيب، وقارن العوائد.</p> |
| </div> |
| </div> |
|
|
| <div class="timeline-step reveal"> |
| <div class="timeline-dot"></div> |
| <div class="timeline-content"> |
| <div class="step-num">04</div> |
| <h4 class="step-title">اتخاذ القرار بثقة</h4> |
| <p class="step-desc">تواصل مع البائع أو المطور وأنت تمتلك كافة المعلومات والبيانات الداعمة.</p> |
| </div> |
| </div> |
|
|
| </div> |
| </section> |
|
|
| |
| <section class="bottom-cta reveal"> |
| <h2>جاهز لبدء رحلتك العقارية الذكية؟</h2> |
| <a href="index.html" class="cta-btn" style="font-size:20px; padding:20px 48px;"><i class="fa-regular fa-comment-dots"></i> تحدث مع داراك الآن</a> |
| </section> |
|
|
| </main> |
|
|
| |
| <footer class="main-footer"> |
| <div class="footer-brand"><span class="eng">Darak</span> <i class="fa-solid fa-sparkles" style="color:var(--gold);margin:0 4px;"></i> © 2026. جميع الحقوق محفوظة</div> |
| <div class="footer-links"> |
| <a href="#">اتصل بنا</a> |
| <a href="#">شروط الاستخدام</a> |
| <a href="#">سياسة الخصوصية</a> |
| <a href="#">مدونة دارك</a> |
| <a href="#">من نحن</a> |
| </div> |
| <div class="footer-social"> |
| <a href="#" aria-label="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a> |
| <a href="#" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a> |
| <a href="#" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| const reveals = document.querySelectorAll('.reveal'); |
| |
| const revealOnScroll = () => { |
| const windowHeight = window.innerHeight; |
| const elementVisible = 150; |
| |
| reveals.forEach(reveal => { |
| const elementTop = reveal.getBoundingClientRect().top; |
| if (elementTop < windowHeight - elementVisible) { |
| reveal.classList.add('active'); |
| } |
| }); |
| }; |
| |
| window.addEventListener('scroll', revealOnScroll); |
| revealOnScroll(); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
