commit 084cda047125955b72bb48f25ded0a12842a3c74 Author: Abdul Kareem Date: Fri Apr 17 18:13:41 2026 +0300 Release landing page updates diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..7474287 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,4 @@ +.git +.gitignore +landing-page-deploy.zip + diff --git a/.ghaymah.example.json b/.ghaymah.example.json new file mode 100644 index 0000000..f94901e --- /dev/null +++ b/.ghaymah.example.json @@ -0,0 +1,18 @@ +{ + "name": "tabeley-landing", + "ports": [ + { + "expose": true, + "number": 80 + } + ], + "publicAccess": { + "enabled": true, + "domain": "auto" + }, + "resourceTier": "t1", + "dockerFileName": "Dockerfile", + "env": { + "TABELEY_API_BASE_URL": "https://your-backend-domain.example.com/api" + } +} diff --git a/.ghaymah.json b/.ghaymah.json new file mode 100644 index 0000000..f94901e --- /dev/null +++ b/.ghaymah.json @@ -0,0 +1,18 @@ +{ + "name": "tabeley-landing", + "ports": [ + { + "expose": true, + "number": 80 + } + ], + "publicAccess": { + "enabled": true, + "domain": "auto" + }, + "resourceTier": "t1", + "dockerFileName": "Dockerfile", + "env": { + "TABELEY_API_BASE_URL": "https://your-backend-domain.example.com/api" + } +} diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..1143aa3 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,8 @@ +FROM nginx:1.27-alpine + +# Serve the static landing page through Nginx on port 80. +COPY nginx.conf /etc/nginx/conf.d/default.conf +COPY . /usr/share/nginx/html +COPY docker-entrypoint.d/40-render-config.sh /docker-entrypoint.d/40-render-config.sh + +EXPOSE 80 diff --git a/assets/images/tlogo.jpg b/assets/images/tlogo.jpg new file mode 100644 index 0000000..64bd5f4 Binary files /dev/null and b/assets/images/tlogo.jpg differ diff --git a/assets/images/tlogo.webp b/assets/images/tlogo.webp new file mode 100644 index 0000000..841676d Binary files /dev/null and b/assets/images/tlogo.webp differ diff --git a/assets/images/tlogoapp.png b/assets/images/tlogoapp.png new file mode 100644 index 0000000..249df14 Binary files /dev/null and b/assets/images/tlogoapp.png differ diff --git a/assets/images/tlogoapp.webp b/assets/images/tlogoapp.webp new file mode 100644 index 0000000..6b4c2e0 Binary files /dev/null and b/assets/images/tlogoapp.webp differ diff --git a/config.js b/config.js new file mode 100644 index 0000000..1dc237e --- /dev/null +++ b/config.js @@ -0,0 +1 @@ +window.TABELEY_API_BASE_URL = ""; diff --git a/config.js.template b/config.js.template new file mode 100644 index 0000000..a1dd499 --- /dev/null +++ b/config.js.template @@ -0,0 +1 @@ +window.TABELEY_API_BASE_URL = "${TABELEY_API_BASE_URL}"; diff --git a/docker-entrypoint.d/40-render-config.sh b/docker-entrypoint.d/40-render-config.sh new file mode 100644 index 0000000..2952261 --- /dev/null +++ b/docker-entrypoint.d/40-render-config.sh @@ -0,0 +1,6 @@ +#!/bin/sh +set -eu + +envsubst '${TABELEY_API_BASE_URL}' \ + < /usr/share/nginx/html/config.js.template \ + > /usr/share/nginx/html/config.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..52dec3a --- /dev/null +++ b/index.html @@ -0,0 +1,389 @@ + + + + + + Tabeley | احجز طاولتك خلال ثوانٍ + + + + + + + + + + +
+
+ + +
+ Tabeley + Dining Reservation Platform +
+ + + + + +
+
+ +
+
+
+
+ منصة حجز ذكية للمطاعم والمقاهي +

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

+

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

+
+ حمّل التطبيق الآن + +
+

تنزيل مباشر لنسخة Android APK.

+
+ + +
+
+ +
+
+
+ لقطات من التطبيق + +

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

+
+
+
+
+
+
+
+ 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 مشروع تقني ناشئ من سوريا يهدف إلى تنظيم تجربة الحجز في قطاع المطاعم بشكل رقمي وآمن، + مع التركيز على سهولة الاستخدام، حماية البيانات، وتحسين التنسيق بين العميل والمطعم لرفع جودة التجربة بالكامل. +

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

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

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

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

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

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

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

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

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

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

+

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

+

رابط مباشر وآمن لتحميل نسخة Android APK.

+
+ + ▶ + + تنزيل مباشر + Android APK + + +
+
+ +
+
+
+ تواصل معنا +

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

+

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

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

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

+ + + + +
+
+
+
+ + + + + + diff --git a/landing-page-deploy.zip b/landing-page-deploy.zip new file mode 100644 index 0000000..69e8c87 Binary files /dev/null and b/landing-page-deploy.zip differ diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 0000000..0925b7a --- /dev/null +++ b/nginx.conf @@ -0,0 +1,21 @@ +server { + listen 80; + server_name _; + + root /usr/share/nginx/html; + index index.html; + + gzip on; + gzip_vary on; + gzip_min_length 1024; + gzip_types text/plain text/css application/javascript application/json image/svg+xml; + + location / { + try_files $uri $uri/ =404; + } + + location ~* \.(css|js|jpg|jpeg|png|webp|svg|ico)$ { + expires 30d; + add_header Cache-Control "public, max-age=2592000"; + } +} diff --git a/script.js b/script.js new file mode 100644 index 0000000..16bd172 --- /dev/null +++ b/script.js @@ -0,0 +1,146 @@ +(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'); + }); + + window.addEventListener('resize', function () { + if (window.innerWidth > 900) { + 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 : 'إرسال الرسالة'; + const fallbackApi = 'https://app.tabeley.com/api'; + const configuredBase = window.TABELEY_API_BASE_URL; + const originBase = `${window.location.origin}/api`; + + const candidates = [configuredBase, originBase, fallbackApi] + .filter(Boolean) + .map((url) => String(url).replace(/\/+$/, '')) + .filter((url, idx, arr) => arr.indexOf(url) === idx); + + function getFieldValue(selector) { + const field = form.querySelector(selector); + return field ? field.value.trim() : ''; + } + + async function postFeedback(baseUrl, payload) { + return fetch(`${baseUrl}/public/feedback`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Accept: 'application/json' + }, + body: JSON.stringify(payload) + }); + } + + form.addEventListener('submit', async function (e) { + e.preventDefault(); + + const name = getFieldValue('input[type="text"]'); + const email = getFieldValue('input[type="email"]'); + const message = getFieldValue('textarea'); + + if (message.length < 5) { + alert('يرجى كتابة رسالة أوضح قبل الإرسال.'); + return; + } + + if (submitButton) { + submitButton.disabled = true; + submitButton.textContent = 'جارٍ الإرسال...'; + } + + const payload = { message, name, email }; + let sent = false; + let lastError = null; + + for (const base of candidates) { + try { + const response = await postFeedback(base, payload); + if (response.ok) { + sent = true; + break; + } + + const body = await response.text(); + lastError = body || `HTTP ${response.status}`; + } catch (err) { + lastError = err; + } + } + + if (submitButton) { + submitButton.disabled = false; + submitButton.textContent = defaultSubmitLabel; + } + + if (sent) { + form.reset(); + alert('تم إرسال رسالتك بنجاح.'); + return; + } + + console.error('Feedback send failed:', lastError); + alert('تعذر إرسال الرسالة حالياً. حاول مرة أخرى لاحقاً.'); + }); +})(); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..e077aa8 --- /dev/null +++ b/styles.css @@ -0,0 +1,1151 @@ +:root { + --primary: #d32f2f; + --primary-dark: #b71c1c; + --primary-soft: #ffebee; + --accent: #2b1b1b; + --text-main: #2d1515; + --text-muted: #7a4a4a; + --bg: #fffbf7; + --surface: #ffffff; + --surface-soft: #fff5f5; + --border: #f2c6c6; + --shadow: 0 8px 20px rgba(0, 0, 0, 0.08); + --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.08); + --radius-lg: 28px; + --radius-md: 20px; + --radius-sm: 14px; + --container: 1160px; +} + +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + min-height: 100vh; + background: #fffbf7; + color: var(--text-main); + font-family: Arial, "Segoe UI", Tahoma, sans-serif; + line-height: 1.7; + overflow-x: hidden; +} + +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; +} + +.section { + padding: 88px 0; +} + +.section-soft { + background: #fff7f6; +} + +.eyebrow { + display: inline-flex; + align-items: center; + 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; +} + +.eyebrow-light { + background: rgba(255, 255, 255, 0.14); + border-color: rgba(255, 255, 255, 0.18); + color: #fff6ed; +} + +.section-head { + max-width: 720px; + margin: 0 auto 36px; + text-align: center; +} + +.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); + font-size: 18px; +} + +.site-header { + position: sticky; + top: 0; + z-index: 1000; + background: rgba(255, 251, 247, 0.88); + border-bottom: 1px solid rgba(43, 27, 27, 0.08); +} + +.header-shell { + min-height: 78px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + position: relative; +} + +.brand { + display: inline-flex; + align-items: center; + gap: 14px; + text-decoration: none; + color: var(--text-main); + flex-shrink: 0; +} + +.brand-logo { + width: 52px; + height: 52px; + border-radius: 16px; + box-shadow: var(--shadow-soft); + object-fit: cover; +} + +.brand-copy { + display: flex; + flex-direction: column; + align-items: flex-start; + line-height: 1.1; +} + +.brand-name { + font-size: 28px; + font-weight: 800; + color: var(--text-main); +} + +.brand-copy small { + color: var(--text-muted); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.05em; + text-transform: uppercase; + opacity: 0.85; +} + +.nav { + display: flex; + align-items: center; + gap: 8px; +} + +.nav a { + padding: 12px 16px; + border-radius: 14px; + color: var(--text-muted); + font-weight: 700; + transition: background 0.2s ease, color 0.2s ease; + white-space: nowrap; +} + +.nav a:hover { + background: var(--primary-soft); + color: var(--primary-dark); +} + +.menu-toggle { + display: none; + width: 52px; + height: 52px; + border: 1px solid var(--border); + border-radius: 16px; + background: rgba(255, 255, 255, 0.9); + box-shadow: 0 14px 34px rgba(74, 30, 30, 0.08); + cursor: pointer; + padding: 0; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 5px; +} + +.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); +} + +.hero { + padding-top: 56px; +} + +.hero-grid { + display: grid; + grid-template-columns: 1.1fr 0.9fr; + gap: 32px; + 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; +} + +.download-note { + margin: 0; + color: var(--muted); + font-size: 14px; + font-weight: 600; +} + +.download-note-light { + color: rgba(255, 255, 255, 0.86); +} + +.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-visual { + position: relative; +} + +.phone-stack { + position: relative; + min-height: 420px; + 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 8px 20px rgba(0, 0, 0, 0.08); + padding: 14px; + border: 1px solid rgba(255, 255, 255, 0.06); +} + +.phone-card.is-main { + transform: none; +} + +.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: linear-gradient(180deg, #fffbf7 0%, #fff0f1 100%); + padding: 28px 22px; +} + +.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); +} + +.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; +} + +.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; +} + +.screens-grid, +.features-grid, +.timeline, +.contact-grid { + display: grid; + gap: 24px; +} + +.screens-grid { + grid-template-columns: repeat(3, 1fr); +} + +.mockup { + display: flex; + justify-content: center; +} + +.mockup-frame { + margin-inline: auto; +} + +.mockup-screen ul { + padding: 0; + margin-top: 16px; + list-style: none; + display: grid; + gap: 12px; +} + +.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); + 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(-2px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); +} + +.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: #fff; +} + +.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: 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 8px 20px rgba(0, 0, 0, 0.08); +} + +.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(-2px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); +} + +.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-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-form textarea { + min-height: 140px; + resize: vertical; +} + +.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); + 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; +} + +.type-badge-ui { + padding: 8px 12px; + border-radius: 999px; + background: #6a2020; + color: #fff; + font-size: 12px; + font-weight: 700; +} + +.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, + .screens-grid, + .timeline { + grid-template-columns: 1fr 1fr; + } + + .features-grid { + grid-template-columns: repeat(2, 1fr); + } + + .timeline::before { + display: none; + } + + .download-shell, + .trust-shell, + .contact-grid, + .hero-grid { + gap: 28px; + } + + .play-badge { + justify-self: start; + } +} + +@media (max-width: 900px) { + .header-shell { + min-height: 72px; + } + + .brand-logo { + width: 46px; + height: 46px; + } + + .brand-name { + font-size: 24px; + } + + .brand-copy small { + display: none; + } + + .menu-toggle { + display: inline-flex; + flex-shrink: 0; + } + + .nav { + position: absolute; + top: calc(100% + 10px); + right: 0; + left: 0; + display: none; + flex-direction: column; + align-items: stretch; + gap: 6px; + padding: 12px; + border: 1px solid var(--border); + border-radius: 20px; + background: rgba(255, 251, 247, 0.98); + box-shadow: 0 24px 50px rgba(43, 27, 27, 0.12); + } + + .nav.is-open { + display: flex; + } + + .nav a { + width: 100%; + padding: 14px 16px; + } +} + +@media (min-width: 901px) { + .nav { + display: flex !important; + } +} + +@media (max-width: 760px) { + + .section { + padding: 72px 0; + } + + .footer-shell, + .hero-actions, + .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; + } + + .screens-grid { + justify-items: center; + } + + .hero-copy h1 { + font-size: 42px; + max-width: none; + } + + .phone-stack { + min-height: auto; + padding-bottom: 0; + } + + .feature-card, + .timeline-step, + .contact-form, + .trust-shell, + .download-shell { + padding: 22px; + } + + .footer-shell { + text-align: center; + } + + .footer-links { + justify-content: center; + flex-wrap: wrap; + } + + .nav { + right: 16px; + left: 16px; + min-width: auto; + } +}