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.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/index.html b/index.html index 17616ea..92b4f86 100644 --- a/index.html +++ b/index.html @@ -8,19 +8,16 @@ - + - - - - +
- +
Tabeley Dining Reservation Platform @@ -57,30 +54,9 @@ حمّل التطبيق الآن
- -
-
- +25 - مطعمًا ومقهى في التوسع -
-
- ثوانٍ - لإتمام الحجز بخطوات واضحة -
-
- 24/7 - إمكانية طلب الحجز في أي وقت -
-
-
مختار بعناية
-
تنبيه قبل الموعد بساعة
@@ -408,6 +382,6 @@ - + diff --git a/nginx.conf b/nginx.conf index 306de3c..0925b7a 100644 --- a/nginx.conf +++ b/nginx.conf @@ -5,8 +5,17 @@ server { 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/styles.css b/styles.css index aab7d5e..0eca03b 100644 --- a/styles.css +++ b/styles.css @@ -9,8 +9,8 @@ --surface: #ffffff; --surface-soft: #fff5f5; --border: #f2c6c6; - --shadow: 0 20px 60px rgba(74, 30, 30, 0.08); - --shadow-soft: 0 12px 30px rgba(211, 47, 47, 0.14); + --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; @@ -28,12 +28,9 @@ html { body { margin: 0; min-height: 100vh; - 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%); + background: #fffbf7; color: var(--text-main); - font-family: 'Cairo', sans-serif; + font-family: Arial, "Segoe UI", Tahoma, sans-serif; line-height: 1.7; overflow-x: hidden; } @@ -64,7 +61,7 @@ textarea { } .section-soft { - background: linear-gradient(180deg, rgba(255, 235, 238, 0.65) 0%, rgba(255, 251, 247, 0.95) 100%); + background: #fff7f6; } .eyebrow { @@ -124,7 +121,6 @@ textarea { position: sticky; top: 0; z-index: 1000; - backdrop-filter: blur(18px); background: rgba(255, 251, 247, 0.88); border-bottom: 1px solid rgba(43, 27, 27, 0.08); } @@ -240,7 +236,7 @@ textarea { .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; - gap: 48px; + gap: 32px; align-items: center; } @@ -291,85 +287,13 @@ textarea { 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; + min-height: 420px; display: flex; align-items: center; justify-content: center; @@ -380,13 +304,13 @@ textarea { 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); + 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: rotate(-7deg) translateY(-8px); + transform: none; } .phone-notch, @@ -402,11 +326,8 @@ textarea { .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%); + background: linear-gradient(180deg, #fffbf7 0%, #fff0f1 100%); padding: 28px 22px; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); } .screen-tag, @@ -472,27 +393,6 @@ textarea { 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, @@ -543,8 +443,8 @@ textarea { } .feature-card:hover { - transform: translateY(-5px); - box-shadow: 0 24px 48px rgba(74, 30, 30, 0.12); + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } .feature-icon, @@ -626,8 +526,7 @@ textarea { 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)); + background: #fff; } .faq-shell { @@ -684,15 +583,13 @@ textarea { .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%); + 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 28px 60px rgba(183, 28, 28, 0.2); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } .download-shell p { @@ -752,8 +649,8 @@ textarea { } .contact-card:hover { - transform: translateY(-4px); - box-shadow: 0 20px 40px rgba(74, 30, 30, 0.12); + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } .contact-card-icon { @@ -1101,10 +998,6 @@ textarea { grid-template-columns: repeat(2, 1fr); } - .hero-stats { - grid-template-columns: 1fr; - } - .timeline::before { display: none; } @@ -1184,7 +1077,6 @@ textarea { .footer-shell, .hero-actions, - .hero-points, .badge-cloud { flex-direction: column; align-items: stretch; @@ -1207,22 +1099,7 @@ textarea { .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; + padding-bottom: 0; } .feature-card,