From 637f598aed8177f3931c6fc4cb84e5d191f129e4 Mon Sep 17 00:00:00 2001 From: Abdul Kareem Date: Mon, 23 Mar 2026 02:15:18 +0300 Subject: [PATCH] update: refine landing page with a more premium visual style --- index.html | 514 +++++++++++++++----- script.js | 70 ++- styles.css | 1364 ++++++++++++++++++++++++++++++++++++++++++---------- 3 files changed, 1591 insertions(+), 357 deletions(-) diff --git a/index.html b/index.html index 7a2f7b6..aae7cb5 100644 --- a/index.html +++ b/index.html @@ -1,112 +1,412 @@ - - - - - - Tabeley - - - - - - - -
-
- - Tabeley -
- -

احجز طاولتك بكل سهولة واحترافية

-

- منصة Tabeley هي الحل الذكي لحجز الطاولات في المطاعم والمقاهي. - اختر المكان المناسب، حدّد الوقت الذي يناسبك، وأكّد حجزك خلال ثوانٍ - دون الحاجة إلى الاتصال أو الانتظار. -

- -
- تحميل تطبيق الأندرويد - -
-
- - -
-

لماذا تختار Tabeley؟

-
-
-

حجز سريع وفوري

-

- قم بتأكيد حجزك خلال لحظات معدودة عبر واجهة بسيطة وسلسة، - دون أي إجراءات معقّدة أو تأخير. -

-
-
-

تنوع واسع في المطاعم

-

- استكشف مجموعة مميزة من أفضل المطاعم والمقاهي، - واختر التجربة التي تناسب ذوقك ووقتك. -

-
-
-

إدارة متكاملة للحجوزات

-

- تابع جميع حجوزاتك وعدّلها أو ألغها بسهولة من خلال حسابك، - مع تنظيم كامل لمواعيدك وخططك. -

-
-
-
- - -
-

كيف يعمل التطبيق؟

-
-
١. اختر المطعم المناسب لك
-
٢. حدّد التاريخ والوقت وعدد الأشخاص
-
٣. أكّد الحجز واستمتع بتجربتك
-
-
- - -
-

تواصل معنا

-
- - - - رقم الهاتف - +963983233965 - - - - - - - البريد الإلكتروني - Tabeley0@gmail.com + + + + + + Tabeley | احجز طاولتك خلال ثوانٍ + + + + + + + + + + + + + + +
+
+ + + + + Tabeley + Dining Reservation Platform +
+
-

- - حسابنا على إنستغرام - -

- -
- - - - -
-
- - - - - +
+
+
+
+ منصة حجز ذكية للمطاعم والمقاهي +

اختصر وقتك واحجز طاولتك خلال ثوانٍ

+

+ يوفّر Tabeley نظام حجز ذكي وسريع يمنحك تجربة منظمة وواضحة من أول اختيار المطعم حتى التأكيد الفوري، + دون انتظار أو اتصالات متكررة، لتستمتع بتجربة تناول أكثر راحة واحترافية. +

+
+ حمّل التطبيق الآن + +
+
    +
  • تأكيد فوري للحجز
    • +
  • واجهة عربية واضحة
    • +
  • تنظيم أسهل لتجربة الطعام
    • +
+
+
+ +25 + مطعمًا ومقهى في التوسع +
+
+ ثوانٍ + لإتمام الحجز بخطوات واضحة +
+
+ 24/7 + إمكانية طلب الحجز في أي وقت +
+
+
+ + +
+
+ +
+
+
+ لقطات من التطبيق +

ثلاث شاشات توضح رحلة الحجز

+

تصميم مبسّط يساعد المستخدم على الانتقال من اختيار المطعم حتى تأكيد الحجز بثقة ووضوح.

+
+
+
+
+
+
+
+ Nearby + 3 مطاعم +
+
Search restaurants
+
+ Offers + خصم 15% بين 5 و7 مساءً +
+
+
+
+ 🍽 + Cafe +
+
+ مطعم 2 + قهوة ومشاوي +
$9.00 / person
+
+
+
+
+
+
+
+
+
+
+
+ Book Table + Venue #12 +
+
+ التاريخ + 24 / 03 / 2026 +
+
+ 6:00 PM + 8:30 PM + 9:30 PM +
+
+ Guests + 4 أشخاص +
+
+ Reservation Summary +
Date24/03/2026
+
Time8:30 PM
+
Guests4
+
+
+
+
+
+
+
+
+
+ My Bookings + 2 حجوزات +
+
+ مطعم + 24/03/2026 • 8:30 PM + Guests: 4 + APPROVED +
+ + + + + +
+
+
+ قهوة المدينة + 27/03/2026 • 6:00 PM + Guests: 2 + PENDING +
+
+
+
+
+
+
+ +
+
+
+ مزايا التطبيق +

كل ما تحتاجه لحجز أسرع وأكثر تنظيمًا

+
+
+
+ ☎ +

حجز فوري بدون اتصال

+

أكّد حجزك مباشرة من التطبيق دون الحاجة إلى المكالمات أو الانتظار.

+
+
+ % +

عروض وخصومات حسب الأوقات

+

اكتشف مزايا إضافية مرتبطة بأوقات محددة وتجارب حجز أكثر قيمة.

+
+
+ ⌂ +

تنوع كبير في المطاعم والمقاهي

+

خيارات متعددة لتناسب الأذواق المختلفة والمناسبات اليومية والخاصة.

+
+
+ ▣ +

إدارة حجوزاتك بسهولة

+

راجع مواعيدك، وعدّل تفاصيل الحجز أو ألغِه من مكان واحد منظم.

+
+
+ ⏰ +

تنبيهات وتذكير قبل الموعد

+

ابقَ على اطلاع بموعدك القادم عبر تذكيرات مريحة قبل وقت الحجز.

+
+
+
+
+ +
+
+
+ كيف يعمل +

خطوات بسيطة من البحث حتى الجلوس على الطاولة

+
+
+
+ 1 +

اختر المطعم

+

تصفّح الخيارات المتاحة واختر المكان الذي يناسب ذوقك وموقعك.

+
+
+ 2 +

حدّد الموعد

+

اختر التاريخ والوقت وعدد الأشخاص ضمن واجهة واضحة وسريعة.

+
+
+ 3 +

أكّد الحجز

+

راجع تفاصيلك واحصل على تأكيد فوري دون تعقيد.

+
+
+ 4 +

استمتع بتجربتك

+

اذهب في الموعد المحدد واستفد من تجربة أكثر تنظيمًا وراحة.

+
+
+
+
+ + + + +
+
+
+ عن Tabeley +

شركة ناشئة سورية تبني تجربة حجز أكثر ذكاءً

+
+

+ Tabeley مشروع تقني ناشئ من سوريا يهدف إلى تنظيم تجربة الحجز في قطاع المطاعم بشكل رقمي وآمن، + مع التركيز على سهولة الاستخدام، حماية البيانات، وتحسين التنسيق بين العميل والمطعم لرفع جودة التجربة بالكامل. +

+
+
+ +
+
+
+ الأسئلة الشائعة +

إجابات مباشرة على أكثر الأسئلة المتكررة

+
+
+
+ هل الحجز مجاني؟ +

نعم، تجربة الحجز للمستخدم مجانية، والهدف هو تسهيل الوصول إلى المطاعم وتنظيم الزيارة دون رسوم إضافية على عملية الحجز.

+
+
+ هل يمكن تعديل أو إلغاء الحجز؟ +

يوفّر التطبيق إدارة سهلة للحجوزات، بحيث يمكن تعديل الموعد أو إلغاء الحجز وفق سياسة المطعم وإتاحة الوقت المحدد.

+
+
+ هل يوفر التطبيق خصومات؟ +

نعم، سيعرض التطبيق عروضًا وخصومات مرتبطة ببعض الأوقات والمطاعم المشاركة عند توفرها داخل المنصة.

+
+
+
+
+ +
+
+
+ جاهز للتجربة؟ +

ابدأ تجربة حجز أسهل اليوم

+

نزّل التطبيق وابدأ بتنظيم حجوزاتك بطريقة أسرع وأوضح وأكثر راحة.

+
+ + ▶ + + احصل عليه عبر + Google Play + + +
+
+ +
+
+
+ تواصل معنا +

نرحّب باستفساراتكم وشراكاتكم

+

إذا كنت مطعمًا مهتمًا بالانضمام أو مستخدمًا لديه استفسار، يمكنك التواصل معنا مباشرة عبر القنوات التالية.

+
+ + ✉ + + البريد الإلكتروني + Tabeley0@gmail.com + + + + ☎ + + رقم الهاتف + +963983233965 + + + + ◎ + + إنستغرام + @tabeley_reservations + + +
+
+ +
+

أرسل لنا رسالة

+ + + + +
+
+
+
+ + + + + diff --git a/script.js b/script.js index ba7bee5..76507b3 100644 --- a/script.js +++ b/script.js @@ -1,9 +1,65 @@ -(function () { +(function () { + const reveals = document.querySelectorAll('.reveal'); + const menuToggle = document.querySelector('.menu-toggle'); + const navMenu = document.querySelector('.nav'); + + if (menuToggle && navMenu) { + menuToggle.addEventListener('click', function () { + const isOpen = navMenu.classList.toggle('is-open'); + menuToggle.classList.toggle('is-open', isOpen); + menuToggle.setAttribute('aria-expanded', String(isOpen)); + }); + + navMenu.querySelectorAll('a').forEach((link) => { + link.addEventListener('click', function () { + navMenu.classList.remove('is-open'); + menuToggle.classList.remove('is-open'); + menuToggle.setAttribute('aria-expanded', 'false'); + }); + }); + + document.addEventListener('click', function (event) { + if (!navMenu.classList.contains('is-open')) return; + if (navMenu.contains(event.target) || menuToggle.contains(event.target)) return; + + navMenu.classList.remove('is-open'); + menuToggle.classList.remove('is-open'); + menuToggle.setAttribute('aria-expanded', 'false'); + }); + } + + if ('IntersectionObserver' in window) { + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('is-visible'); + observer.unobserve(entry.target); + } + }); + }, { threshold: 0.16 }); + + reveals.forEach((item) => observer.observe(item)); + } else { + reveals.forEach((item) => item.classList.add('is-visible')); + } + + const faqItems = document.querySelectorAll('.faq-item'); + faqItems.forEach((item) => { + item.addEventListener('toggle', function () { + if (!item.open) return; + faqItems.forEach((other) => { + if (other !== item) { + other.open = false; + } + }); + }); + }); + const form = document.getElementById('contactForm'); if (!form) return; const submitButton = form.querySelector('button[type="submit"]'); - const defaultSubmitLabel = submitButton ? submitButton.textContent : 'Send'; + const defaultSubmitLabel = submitButton ? submitButton.textContent : 'إرسال الرسالة'; const fallbackApi = 'https://app.tabeley.com/api'; const configuredBase = window.TABELEY_API_BASE_URL; const originBase = `${window.location.origin}/api`; @@ -37,13 +93,13 @@ const message = getFieldValue('textarea'); if (message.length < 5) { - alert('Please enter at least 5 characters.'); + alert('يرجى كتابة رسالة أوضح قبل الإرسال.'); return; } if (submitButton) { submitButton.disabled = true; - submitButton.textContent = 'Sending...'; + submitButton.textContent = 'جارٍ الإرسال...'; } const payload = { message, name, email }; @@ -72,11 +128,11 @@ if (sent) { form.reset(); - alert('Feedback sent successfully.'); + alert('تم إرسال رسالتك بنجاح.'); return; } console.error('Feedback send failed:', lastError); - alert('Unable to send feedback now. Please try again later.'); + alert('تعذر إرسال الرسالة حالياً. حاول مرة أخرى لاحقاً.'); }); -})(); +})(); diff --git a/styles.css b/styles.css index 68b5b37..84088ae 100644 --- a/styles.css +++ b/styles.css @@ -1,332 +1,1210 @@ :root { --primary: #d32f2f; - --secondary: #e53935; - --bg: #fffbf7; - --surface: #ffffff; - --card: #ffebee; + --primary-dark: #b71c1c; + --primary-soft: #ffebee; + --accent: #2b1b1b; --text-main: #2d1515; --text-muted: #7a4a4a; + --bg: #fffbf7; + --surface: #ffffff; + --surface-soft: #fff5f5; --border: #f2c6c6; - --shadow: rgba(211, 47, 47, 0.12); + --shadow: 0 20px 60px rgba(74, 30, 30, 0.08); + --shadow-soft: 0 12px 30px rgba(211, 47, 47, 0.14); + --radius-lg: 28px; + --radius-md: 20px; + --radius-sm: 14px; + --container: 1160px; } * { - margin: 0; - padding: 0; box-sizing: border-box; - font-family: 'Cairo', sans-serif; +} + +html { + scroll-behavior: smooth; } body { + margin: 0; min-height: 100vh; - display: flex; - flex-direction: column; - background: var(--bg); + background: + radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.8), transparent 16%), + radial-gradient(circle at top right, rgba(211, 47, 47, 0.08), transparent 22%), + linear-gradient(180deg, #fffbf7 0%, #fff7f2 58%, #fffaf6 100%); color: var(--text-main); - line-height: 1.6; + font-family: 'Cairo', sans-serif; + line-height: 1.7; + overflow-x: hidden; } -.hero, -.features, -.how, -.contact { - max-width: 1100px; +img { + max-width: 100%; + display: block; +} + +a { + color: inherit; + text-decoration: none; +} + +button, +input, +textarea { + font: inherit; +} + +.container { + width: min(calc(100% - 32px), var(--container)); margin: 0 auto; - padding: 24px 16px; } -.hero { - min-height: 78vh; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - background: transparent; +.section { + padding: 88px 0; } -.hero-brand { +.section-soft { + background: linear-gradient(180deg, rgba(255, 235, 238, 0.65) 0%, rgba(255, 251, 247, 0.95) 100%); +} + +.eyebrow { display: inline-flex; align-items: center; - gap: 14px; - margin-bottom: 22px; -} - -.brand-logo { - width: 64px; - height: 64px; - border-radius: 16px; - object-fit: contain; - box-shadow: 0 8px 24px var(--shadow); -} - -.brand-name { - font-size: clamp(28px, 4vw, 42px); - font-weight: 700; - color: var(--text-main); - line-height: 1; -} - -.hero h1 { - font-size: clamp(30px, 4vw, 44px); - margin-bottom: 8px; + gap: 8px; + padding: 8px 14px; + border: 1px solid rgba(211, 47, 47, 0.18); + border-radius: 999px; + background: rgba(255, 255, 255, 0.8); + color: var(--primary-dark); + font-size: 14px; font-weight: 700; } -.hero p { - font-size: 22px; - color: var(--text-muted); - margin-bottom: 22px; +.eyebrow-light { + background: rgba(255, 255, 255, 0.14); + border-color: rgba(255, 255, 255, 0.18); + color: #fff6ed; } -.buttons { - width: min(720px, 100%); - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px; -} - -.btn { - display: inline-flex; - justify-content: center; - align-items: center; - min-height: 52px; - border-radius: 14px; - border: 1px solid var(--border); - font-size: 20px; - font-weight: 700; - text-decoration: none; - transition: .2s ease; -} - -.android { - background: var(--primary); - color: #fff; -} - -.android:hover { - background: #be2a2a; - transform: translateY(-1px); -} - -.ios { - background: var(--surface); - color: var(--text-muted); -} - -.features h2, -.how h2, -.contact h2 { - text-align: center; - margin-bottom: 18px; - color: var(--text-main); -} - -.features-grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 12px; -} - -.card { - background: var(--surface); - border: 1px solid var(--border); - border-radius: 14px; - padding: 18px; - box-shadow: 0 6px 18px var(--shadow); -} - -.card h3 { - color: var(--primary); - margin-bottom: 6px; -} - -.card p { - color: var(--text-muted); -} - -.how { - background: var(--card); - border-top: 1px solid var(--border); - border-bottom: 1px solid var(--border); -} - -.steps { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 10px; - margin-top: 10px; -} - -.steps div { - background: var(--surface); - border: 1px solid var(--border); - border-radius: 12px; - padding: 12px; - text-align: center; - font-weight: 600; -} - -.contact { +.section-head { + max-width: 720px; + margin: 0 auto 36px; text-align: center; } -.contact p { +.section-head h2, +.hero h1, +.download-shell h2, +.contact-info h2, +.trust-shell h2 { + margin: 14px 0 12px; + line-height: 1.2; + font-weight: 800; + letter-spacing: -0.02em; +} + +.section-head h2, +.download-shell h2, +.contact-info h2, +.trust-shell h2 { + font-size: clamp(30px, 5vw, 44px); +} + +.section-head p, +.hero-text, +.contact-info p, +.trust-shell p, +.download-shell p { + margin: 0; color: var(--text-muted); - margin-bottom: 8px; + font-size: 18px; } -.contact-links { - width: min(760px, 100%); - margin: 0 auto 18px; - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 12px; +.site-header { + position: sticky; + top: 0; + z-index: 20; + backdrop-filter: blur(18px); + background: rgba(255, 251, 247, 0.72); + border-bottom: 1px solid rgba(43, 27, 27, 0.08); } -.contact-link { +.header-shell { + position: relative; display: flex; align-items: center; - justify-content: center; - gap: 14px; - padding: 16px 18px; - background: var(--surface); - border: 1px solid var(--border); - border-radius: 16px; - box-shadow: 0 6px 18px var(--shadow); - text-decoration: none; - transition: .2s ease; + justify-content: space-between; + gap: 24px; + min-height: 82px; } -.contact-link:hover { - transform: translateY(-2px); - box-shadow: 0 10px 24px var(--shadow); -} - -.contact-icon { +.menu-toggle { width: 52px; height: 52px; display: inline-flex; + flex-direction: column; align-items: center; justify-content: center; - border-radius: 999px; - background: var(--primary); - color: #fff; - font-size: 24px; - flex-shrink: 0; + gap: 5px; + border: 1px solid var(--border); + border-radius: 16px; + background: rgba(255, 255, 255, 0.72); + box-shadow: 0 14px 34px rgba(74, 30, 30, 0.08); + cursor: pointer; + padding: 0; + transition: transform 0.2s ease, background 0.2s ease; } -.contact-copy { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 2px; +.menu-toggle:hover { + transform: translateY(-1px); + background: rgba(255, 255, 255, 0.92); +} + +.menu-toggle span { + width: 22px; + height: 2px; + border-radius: 999px; + background: var(--text-main); + transition: transform 0.2s ease, opacity 0.2s ease; +} + +.menu-toggle.is-open span:nth-child(1) { + transform: translateY(7px) rotate(45deg); +} + +.menu-toggle.is-open span:nth-child(2) { + opacity: 0; +} + +.menu-toggle.is-open span:nth-child(3) { + transform: translateY(-7px) rotate(-45deg); +} + +.brand { + display: inline-flex; + align-items: center; + gap: 12px; color: var(--text-main); } -.contact-copy strong { - color: var(--primary); +.brand-logo { + width: 52px; + height: 52px; + border-radius: 16px; + box-shadow: var(--shadow-soft); } -.contact-copy span { +.brand-copy { + display: flex; + flex-direction: column; + line-height: 1.1; +} + +.brand-name { + font-size: 24px; + font-weight: 800; +} + +.brand-copy small { + color: var(--text-muted); + font-size: 11px; + letter-spacing: 0.06em; + text-transform: uppercase; +} + +.nav { + position: absolute; + top: calc(100% - 6px); + right: 0; + min-width: 240px; + display: none; + grid-auto-flow: row; + gap: 6px; + padding: 12px; + border: 1px solid var(--border); + border-radius: 20px; + background: rgba(255, 251, 247, 0.96); + box-shadow: 0 24px 50px rgba(43, 27, 27, 0.12); +} + +.nav.is-open { + display: grid; +} + +.nav a { + padding: 12px 14px; + border-radius: 14px; + color: var(--text-muted); + font-weight: 700; + transition: color 0.2s ease, background 0.2s ease; +} + +.nav a:hover { + background: var(--primary-soft); + color: var(--primary-dark); +} + +.hero { + padding-top: 56px; +} + +.hero-grid { + display: grid; + grid-template-columns: 1.1fr 0.9fr; + gap: 48px; + align-items: center; +} + +.hero-copy { + position: relative; +} + +.hero-copy h1 { + font-size: clamp(40px, 6vw, 72px); + max-width: 10ch; + text-wrap: balance; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 14px; + margin: 28px 0 24px; +} + +.btn { + min-height: 58px; + padding: 0 24px; + border-radius: 16px; + border: 0; + display: inline-flex; + align-items: center; + justify-content: center; + font-weight: 800; + cursor: pointer; + transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; +} + +.btn-primary { + background: linear-gradient(135deg, var(--primary) 0%, #e35a5a 100%); + color: #fff; + box-shadow: var(--shadow-soft); +} + +.btn-primary:hover { + transform: translateY(-2px); +} + +.btn-secondary { + background: #fff; + color: #97a1af; + border: 1px solid #e6e9ee; + cursor: not-allowed; +} + +.hero-points { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.hero-points li { + padding: 10px 14px; + background: rgba(255, 255, 255, 0.82); + border: 1px solid var(--border); + border-radius: 999px; + color: var(--accent); + font-weight: 700; + box-shadow: 0 10px 24px rgba(74, 30, 30, 0.06); +} + +.hero-stats { + margin-top: 28px; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 14px; +} + +.stat-card { + padding: 18px 16px; + border-radius: 20px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 245, 245, 0.92)); + border: 1px solid rgba(242, 198, 198, 0.9); + box-shadow: 0 18px 36px rgba(74, 30, 30, 0.08); +} + +.stat-card strong { + display: block; + margin-bottom: 6px; + color: var(--primary-dark); + font-size: 26px; + font-weight: 800; +} + +.stat-card span { + color: var(--text-muted); + font-size: 13px; + line-height: 1.5; +} + +.hero-visual { + position: relative; +} + +.hero-orb { + position: absolute; + border-radius: 999px; + filter: blur(8px); + opacity: 0.72; + pointer-events: none; +} + +.hero-orb-one { + top: 36px; + right: 8%; + width: 132px; + height: 132px; + background: radial-gradient(circle, rgba(211, 47, 47, 0.2), rgba(211, 47, 47, 0.02)); +} + +.hero-orb-two { + bottom: 52px; + left: 4%; + width: 180px; + height: 180px; + background: radial-gradient(circle, rgba(183, 28, 28, 0.14), rgba(183, 28, 28, 0.01)); +} + +.phone-stack { + position: relative; + min-height: 520px; + display: flex; + align-items: center; + justify-content: center; +} + +.phone-card, +.mockup-frame { + width: min(320px, 84vw); + border-radius: 42px; + background: linear-gradient(180deg, #1c222d 0%, #11161f 100%); + box-shadow: 0 40px 100px rgba(17, 22, 31, 0.28); + padding: 14px; + border: 1px solid rgba(255, 255, 255, 0.06); +} + +.phone-card.is-main { + transform: rotate(-7deg) translateY(-8px); +} + +.phone-notch, +.mockup-notch { + width: 38%; + height: 28px; + margin: 0 auto 12px; + border-radius: 999px; + background: #0e1219; +} + +.screen-content, +.mockup-screen { + min-height: 470px; + border-radius: 30px; + background: + radial-gradient(circle at top left, rgba(255, 255, 255, 0.2), transparent 28%), + linear-gradient(180deg, #fffbf7 0%, #fff0f1 100%); + padding: 28px 22px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); +} + +.screen-tag, +.mockup-label { + display: inline-flex; + padding: 8px 12px; + border-radius: 999px; + background: rgba(211, 47, 47, 0.12); + color: var(--primary-dark); + font-size: 14px; + font-weight: 800; +} + +.screen-content h3, +.mockup-screen h3 { + margin: 20px 0 10px; + font-size: 28px; + line-height: 1.25; +} + +.screen-content p, +.mockup-screen ul, +.timeline-step p, +.feature-card p, +.faq-item p, +.contact-card span span { + margin: 0; color: var(--text-muted); } -.contact a { - color: var(--primary); - font-weight: 700; +.booking-preview { + margin-top: 22px; + padding: 18px; + background: #fff; + border: 1px solid rgba(211, 47, 47, 0.16); + border-radius: 22px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; } -.contact form { - margin: 26px auto 0; - width: min(1000px, 100%); +.booking-preview strong, +.contact-card strong { + display: block; + color: var(--text-main); +} + +.status-pill { + padding: 8px 12px; + border-radius: 999px; + background: #1f9d61; + color: #fff; + font-size: 14px; + font-weight: 800; +} + +.status-pill.approved { + background: #388e3c; +} + +.status-pill.pending { + background: #f57c00; +} + +.floating-card { + position: absolute; + padding: 14px 18px; + border-radius: 18px; + background: rgba(255, 255, 255, 0.88); + border: 1px solid var(--border); + box-shadow: 0 18px 44px rgba(43, 27, 27, 0.12); + font-weight: 700; + backdrop-filter: blur(10px); +} + +.floating-card-top { + top: 20px; + right: 10px; +} + +.floating-card-bottom { + bottom: 30px; + left: 0; +} + +.screens-grid, +.features-grid, +.timeline, +.contact-grid { + display: grid; + gap: 24px; +} + +.screens-grid { + grid-template-columns: repeat(3, 1fr); +} + +.mockup-screen ul { + padding: 0; + margin-top: 16px; + list-style: none; display: grid; gap: 12px; } -.contact input, -.contact textarea { - width: 100%; - background: var(--surface); +.mockup-screen li { + padding: 12px 14px; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(211, 47, 47, 0.14); + border-radius: 16px; +} + +.features-grid { + grid-template-columns: repeat(5, 1fr); +} + +.feature-card, +.timeline-step, +.faq-item, +.contact-form, +.contact-card, +.trust-shell, +.partner-badge { + background: rgba(255, 255, 255, 0.92); border: 1px solid var(--border); - border-radius: 14px; - padding: 14px 16px; - font-size: 18px; + box-shadow: var(--shadow); +} + +.feature-card { + padding: 24px; + border-radius: 24px; + transition: transform 0.25s ease, box-shadow 0.25s ease; +} + +.feature-card:hover { + transform: translateY(-5px); + box-shadow: 0 24px 48px rgba(74, 30, 30, 0.12); +} + +.feature-icon, +.contact-card-icon { + width: 54px; + height: 54px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 16px; + background: linear-gradient(135deg, var(--primary) 0%, #e56b6b 100%); + color: #fff; + font-size: 24px; + font-weight: 800; + margin-bottom: 18px; +} + +.feature-card h3, +.timeline-step h3, +.contact-form h3 { + margin: 0 0 8px; + font-size: 22px; +} + +.timeline { + grid-template-columns: repeat(4, 1fr); + position: relative; +} + +.timeline::before { + content: ''; + position: absolute; + top: 36px; + right: 12%; + left: 12%; + height: 2px; + background: linear-gradient(90deg, rgba(211, 47, 47, 0.18), rgba(211, 47, 47, 0.58), rgba(211, 47, 47, 0.18)); +} + +.timeline-step { + position: relative; + padding: 24px; + border-radius: 24px; +} + +.timeline-icon { + width: 72px; + height: 72px; + margin-bottom: 16px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 22px; + background: var(--primary-soft); + color: var(--primary-dark); + font-size: 28px; + font-weight: 800; +} + +.badge-cloud { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 16px; +} + +.partner-badge { + padding: 14px 22px; + border-radius: 999px; + color: var(--accent); + font-weight: 800; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 241, 241, 0.94)); +} + +.trust-shell { + padding: 34px; + border-radius: 28px; + display: grid; + grid-template-columns: 0.8fr 1.2fr; + gap: 24px; + align-items: center; + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 243, 243, 0.92)); +} + +.faq-shell { + max-width: 860px; +} + +.faq-list { + display: grid; + gap: 14px; +} + +.faq-item { + border-radius: 22px; + padding: 0 22px; + overflow: hidden; +} + +.faq-item summary { + list-style: none; + cursor: pointer; + padding: 20px 0; + font-size: 20px; + font-weight: 800; + position: relative; +} + +.faq-item summary::-webkit-details-marker { + display: none; +} + +.faq-item summary::before { + content: '+'; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + color: var(--primary-dark); + font-size: 28px; + font-weight: 700; +} + +.faq-item[open] summary::before { + content: '−'; +} + +.faq-item p { + padding: 0 0 22px; +} + +.download { + padding-top: 18px; +} + +.download-shell { + padding: 40px; + border-radius: 32px; + background: + radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 24%), + linear-gradient(135deg, var(--primary) 0%, #e35a5a 100%); + color: #fff; + display: grid; + grid-template-columns: 1.3fr 0.7fr; + gap: 24px; + align-items: center; + box-shadow: 0 28px 60px rgba(183, 28, 28, 0.2); +} + +.download-shell p { + color: rgba(255, 255, 255, 0.88); +} + +.play-badge { + justify-self: end; + min-width: 220px; + display: inline-flex; + align-items: center; + gap: 14px; + padding: 18px 20px; + border-radius: 22px; + background: rgba(255, 255, 255, 0.18); + border: 1px solid rgba(255, 255, 255, 0.22); +} + +.play-badge small { + display: block; + color: rgba(255, 255, 255, 0.82); +} + +.play-badge strong { + font-size: 24px; +} + +.play-icon { + width: 56px; + height: 56px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 18px; + background: rgba(255, 255, 255, 0.18); + font-size: 22px; +} + +.contact-grid { + grid-template-columns: 0.95fr 1.05fr; + align-items: start; +} + +.contact-cards { + display: grid; + gap: 14px; + margin-top: 24px; +} + +.contact-card { + padding: 20px; + border-radius: 22px; + display: flex; + align-items: center; + gap: 16px; + transition: transform 0.22s ease, box-shadow 0.22s ease; +} + +.contact-card:hover { + transform: translateY(-4px); + box-shadow: 0 20px 40px rgba(74, 30, 30, 0.12); +} + +.contact-card-icon { + margin-bottom: 0; + flex-shrink: 0; +} + +.contact-form { + padding: 28px; + border-radius: 28px; + display: grid; + gap: 14px; +} + +.contact-form input, +.contact-form textarea { + width: 100%; + padding: 16px 18px; + border-radius: 16px; + border: 1px solid #e6e9ee; + background: #fff; color: var(--text-main); outline: none; } -.contact input:focus, -.contact textarea:focus { - border-color: var(--primary); - box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.12); +.contact-form input:focus, +.contact-form textarea:focus { + border-color: rgba(211, 47, 47, 0.55); + box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.12); } -.contact textarea { - min-height: 120px; +.contact-form textarea { + min-height: 140px; resize: vertical; } -.contact button { - min-height: 54px; +.contact-form button { + min-height: 58px; + border: 0; + border-radius: 16px; + background: linear-gradient(135deg, var(--primary) 0%, #e35a5a 100%); + color: #fff; + font-weight: 800; + cursor: pointer; +} + +.site-footer { + padding: 26px 0 36px; +} + +.footer-shell { + padding-top: 20px; + border-top: 1px solid rgba(24, 33, 47, 0.08); + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + color: var(--text-muted); +} + +.footer-links { + display: flex; + gap: 18px; +} + +.reveal { + opacity: 0; + transform: translateY(26px); + transition: opacity 0.6s ease, transform 0.6s ease; +} + +.reveal.is-visible { + opacity: 1; + transform: translateY(0); +} + +.reveal-delay-1 { + transition-delay: 0.08s; +} + +.reveal-delay-2 { + transition-delay: 0.16s; +} + +.reveal-delay-3 { + transition-delay: 0.24s; +} + +.app-screen-bar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + margin-bottom: 16px; + color: var(--text-main); +} + +.app-screen-bar strong { + font-size: 20px; + font-weight: 800; +} + +.mini-pill { + padding: 7px 12px; + border-radius: 999px; + background: var(--primary-soft); + color: var(--primary-dark); + font-size: 12px; + font-weight: 800; +} + +.search-shell { + min-height: 48px; + display: flex; + align-items: center; + padding: 0 16px; + margin-bottom: 14px; + border-radius: 16px; + background: #fff; border: 1px solid var(--border); - border-radius: 14px; + color: var(--text-muted); + font-size: 14px; +} + +.offer-banner { + display: grid; + gap: 4px; + padding: 16px; + margin-bottom: 16px; + border-radius: 20px; + background: linear-gradient(135deg, #d32f2f 0%, #e57373 100%); + color: #fff; + box-shadow: var(--shadow-soft); +} + +.offer-banner span { + font-size: 12px; + opacity: 0.9; +} + +.offer-banner strong { + font-size: 16px; + line-height: 1.35; +} + +.offer-banner.small { + padding: 14px; +} + +.venue-card-ui { + min-height: 240px; + border-radius: 22px; + overflow: hidden; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(18, 10, 10, 0.7)), + linear-gradient(135deg, #fff5f5 0%, #ffe1e4 100%); + border: 1px solid var(--border); + box-shadow: 0 14px 34px rgba(74, 30, 30, 0.12); +} + +.venue-card-ui.compact { + min-height: 220px; +} + +.venue-card-overlay { + min-height: inherit; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 14px; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(19, 10, 10, 0.72)), + radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 34%); +} + +.venue-card-top, +.venue-card-bottom { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 12px; +} + +.venue-card-bottom { + flex-direction: column; + align-items: flex-start; + color: #fff; +} + +.venue-card-bottom strong { + font-size: 24px; + line-height: 1.15; +} + +.venue-card-bottom span { + color: rgba(255, 255, 255, 0.78); +} + +.venue-icon-ui { + width: 40px; + height: 40px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 11px; background: var(--primary); color: #fff; - font-size: 30px; - font-weight: 700; - cursor: pointer; - transition: .2s ease; } -.contact button:hover { - background: #be2a2a; -} - -footer { - margin-top: auto; - background: #2b1b1b; +.type-badge-ui { + padding: 8px 12px; + border-radius: 999px; + background: #6a2020; color: #fff; - text-align: center; - padding: 16px; + font-size: 12px; + font-weight: 700; } -@media (max-width: 900px) { +.price-chip-ui { + padding: 10px 12px; + border-radius: 12px; + background: #ead5d9; + color: var(--text-main); + font-size: 12px; + font-weight: 700; +} + +.field-card-ui, +.summary-card-ui, +.booking-card-ui { + padding: 14px 16px; + border-radius: 18px; + background: #fff; + border: 1px solid var(--border); + box-shadow: 0 10px 22px rgba(74, 30, 30, 0.08); +} + +.field-card-ui { + margin-bottom: 14px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; +} + +.field-card-ui span, +.summary-card-ui span, +.booking-card-ui span { + color: var(--text-muted); + font-size: 13px; +} + +.field-card-ui strong, +.summary-card-ui strong, +.booking-card-ui strong { + color: var(--text-main); +} + +.time-slots-ui { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-bottom: 14px; +} + +.slot-ui { + padding: 10px 12px; + border-radius: 12px; + background: #fff; + border: 1px solid var(--border); + color: var(--text-main); + font-size: 12px; + font-weight: 700; +} + +.slot-ui.active { + background: var(--primary); + border-color: var(--primary); + color: #fff; +} + +.summary-card-ui { + display: grid; + gap: 10px; +} + +.summary-card-ui div { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.booking-card-ui { + display: grid; + gap: 6px; + margin-bottom: 12px; +} + +.booking-card-ui.secondary { + opacity: 0.94; +} + +.timeline-ui { + display: flex; + align-items: center; + gap: 6px; + margin-top: 6px; +} + +.timeline-ui .dot { + width: 12px; + height: 12px; + border-radius: 999px; + background: #d8c9c9; +} + +.timeline-ui .dot.done { + background: var(--primary); +} + +.timeline-ui .line { + flex: 1; + height: 3px; + border-radius: 999px; + background: #ead5d9; +} + +.timeline-ui .line.done { + background: var(--primary); +} + +@media (max-width: 1120px) { + .hero-grid, + .contact-grid, + .trust-shell, + .download-shell, .features-grid, - .steps, - .buttons { + .screens-grid, + .timeline { + grid-template-columns: 1fr 1fr; + } + + .features-grid { + grid-template-columns: repeat(2, 1fr); + } + + .hero-stats { grid-template-columns: 1fr; } - .contact-links { - grid-template-columns: 1fr; + .timeline::before { + display: none; } - .hero { - min-height: 62vh; + .download-shell, + .trust-shell, + .contact-grid, + .hero-grid { + gap: 28px; } - .hero p { - font-size: 18px; - } - - .hero-brand { - gap: 10px; - margin-bottom: 18px; - } - - .brand-logo { - width: 54px; - height: 54px; - } - - .btn, - .contact input, - .contact textarea { - font-size: 16px; - } - - .contact button { - font-size: 24px; + .play-badge { + justify-self: start; + } +} + +@media (max-width: 760px) { + .section { + padding: 72px 0; + } + + .header-shell, + .footer-shell, + .hero-actions, + .hero-points, + .badge-cloud { + flex-direction: column; + align-items: stretch; + } + + .hero-grid, + .contact-grid, + .trust-shell, + .download-shell, + .features-grid, + .screens-grid, + .timeline { + grid-template-columns: 1fr; + } + + .hero-copy h1 { + font-size: 42px; + max-width: none; + } + + .phone-stack { + min-height: auto; + padding-bottom: 90px; + } + + .phone-card.is-main { + transform: none; + } + + .floating-card-top { + top: auto; + bottom: 18px; + right: 18px; + } + + .floating-card-bottom { + bottom: -30px; + left: 18px; + } + + .feature-card, + .timeline-step, + .contact-form, + .trust-shell, + .download-shell { + padding: 22px; + } + + .brand-copy small { + display: none; + } + + .footer-shell { + text-align: center; + } + + .footer-links { + justify-content: center; + flex-wrap: wrap; + } + + .nav { + right: 16px; + left: 16px; + min-width: auto; } }