Abdulkareem/tabeleylanding-page
1
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

perf: optimize landing page assets and reduce render cost

تصفح المصدر
هذا الالتزام موجود في:
Abdul Kareem
2026-03-23 02:49:00 +03:00
الأصل 3e72524a5d
التزام d3dfc36677
5 ملفات معدلة مع 32 إضافات و172 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

ثنائية
assets/images/tlogo.webp Normal file
عرض الملف

ملف ثنائي غير معروض.
جنبًا إلى جنب

بعد

العرض:  |  الارتفاع:  |  الحجم: 4.7 KiB

ثنائية
assets/images/tlogoapp.webp Normal file
عرض الملف

ملف ثنائي غير معروض.
جنبًا إلى جنب

بعد

العرض:  |  الارتفاع:  |  الحجم: 5.5 KiB

34
index.html
عرض الملف

@@ -8,19 +8,16 @@
<meta property="og:title" content="Tabeley | احجز طاولتك خلال ثوانٍ"> <meta property="og:title" content="Tabeley | احجز طاولتك خلال ثوانٍ">
<meta property="og:description" content="منصة ذكية لحجز المطاعم والمقاهي بتجربة عربية حديثة، تأكيد فوري، وخطوات واضحة من اختيار المطعم حتى تأكيد الحجز."> <meta property="og:description" content="منصة ذكية لحجز المطاعم والمقاهي بتجربة عربية حديثة، تأكيد فوري، وخطوات واضحة من اختيار المطعم حتى تأكيد الحجز.">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:image" content="/assets/images/tlogoapp.png"> <meta property="og:image" content="/assets/images/tlogoapp.webp">
<meta property="og:locale" content="ar_AR"> <meta property="og:locale" content="ar_AR">
<link rel="icon" href="/assets/images/tlogoapp.png" type="image/png"> <link rel="icon" href="/assets/images/tlogoapp.webp" type="image/webp">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<header class="site-header"> <header class="site-header">
<div class="container header-shell"> <div class="container header-shell">
<a href="#top" class="brand"> <a href="#top" class="brand">
<img src="assets/images/tlogoapp.png" alt="شعار Tabeley" class="brand-logo"> <img src="assets/images/tlogoapp.webp" alt="شعار Tabeley" class="brand-logo">
<div class="brand-copy"> <div class="brand-copy">
<strong class="brand-name">Tabeley</strong> <strong class="brand-name">Tabeley</strong>
<small>Dining Reservation Platform</small> <small>Dining Reservation Platform</small>
@@ -57,30 +54,9 @@
<a href="#download" class="btn btn-primary">حمّل التطبيق الآن</a> <a href="#download" class="btn btn-primary">حمّل التطبيق الآن</a>
<button class="btn btn-secondary" disabled>قريباً على iPhone</button> <button class="btn btn-secondary" disabled>قريباً على iPhone</button>
</div> </div>
<ul class="hero-points" aria-label="مميزات سريعة">
<li>تأكيد فوري للحجز</li>
<li>واجهة عربية واضحة</li>
<li>تنظيم أسهل لتجربة الطعام</li>
</ul>
<div class="hero-stats" aria-label="مؤشرات المنصة">
<div class="stat-card">
<strong>+25</strong>
<span>مطعمًا ومقهى في التوسع</span>
</div>
<div class="stat-card">
<strong>ثوانٍ</strong>
<span>لإتمام الحجز بخطوات واضحة</span>
</div>
<div class="stat-card">
<strong>24/7</strong>
<span>إمكانية طلب الحجز في أي وقت</span>
</div>
</div>
</div> </div>
<div class="hero-visual reveal reveal-delay-1" aria-hidden="true"> <div class="hero-visual reveal reveal-delay-1" aria-hidden="true">
<div class="hero-orb hero-orb-one"></div>
<div class="hero-orb hero-orb-two"></div>
<div class="phone-stack"> <div class="phone-stack">
<article class="phone-card is-main"> <article class="phone-card is-main">
<div class="phone-notch"></div> <div class="phone-notch"></div>
@@ -109,8 +85,6 @@
</div> </div>
</div> </div>
</article> </article>
<div class="floating-card floating-card-top">مختار بعناية</div>
<div class="floating-card floating-card-bottom">تنبيه قبل الموعد بساعة</div>
</div> </div>
</div> </div>
</div> </div>
@@ -408,6 +382,6 @@
</div> </div>
</footer> </footer>
<script src="script.js"></script> <script src="script.js" defer></script>
</body> </body>
</html> </html>

11
nginx.conf
عرض الملف

@@ -5,8 +5,17 @@ server {
root /usr/share/nginx/html; root /usr/share/nginx/html;
index index.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 / { location / {
try_files $uri $uri/ =404; try_files $uri $uri/ =404;
} }
}
location ~* \.(css|js|jpg|jpeg|png|webp|svg|ico)$ {
expires 30d;
add_header Cache-Control "public, max-age=2592000";
}
}

159
styles.css
عرض الملف

@@ -9,8 +9,8 @@
--surface: #ffffff; --surface: #ffffff;
--surface-soft: #fff5f5; --surface-soft: #fff5f5;
--border: #f2c6c6; --border: #f2c6c6;
--shadow: 0 20px 60px rgba(74, 30, 30, 0.08); --shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
--shadow-soft: 0 12px 30px rgba(211, 47, 47, 0.14); --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.08);
--radius-lg: 28px; --radius-lg: 28px;
--radius-md: 20px; --radius-md: 20px;
--radius-sm: 14px; --radius-sm: 14px;
@@ -28,12 +28,9 @@ html {
body { body {
margin: 0; margin: 0;
min-height: 100vh; min-height: 100vh;
background: background: #fffbf7;
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); color: var(--text-main);
font-family: 'Cairo', sans-serif; font-family: Arial, "Segoe UI", Tahoma, sans-serif;
line-height: 1.7; line-height: 1.7;
overflow-x: hidden; overflow-x: hidden;
} }
@@ -64,7 +61,7 @@ textarea {
} }
.section-soft { .section-soft {
background: linear-gradient(180deg, rgba(255, 235, 238, 0.65) 0%, rgba(255, 251, 247, 0.95) 100%); background: #fff7f6;
} }
.eyebrow { .eyebrow {
@@ -124,7 +121,6 @@ textarea {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1000; z-index: 1000;
backdrop-filter: blur(18px);
background: rgba(255, 251, 247, 0.88); background: rgba(255, 251, 247, 0.88);
border-bottom: 1px solid rgba(43, 27, 27, 0.08); border-bottom: 1px solid rgba(43, 27, 27, 0.08);
} }
@@ -240,7 +236,7 @@ textarea {
.hero-grid { .hero-grid {
display: grid; display: grid;
grid-template-columns: 1.1fr 0.9fr; grid-template-columns: 1.1fr 0.9fr;
gap: 48px; gap: 32px;
align-items: center; align-items: center;
} }
@@ -291,85 +287,13 @@ textarea {
cursor: not-allowed; 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 { .hero-visual {
position: relative; 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 { .phone-stack {
position: relative; position: relative;
min-height: 520px; min-height: 420px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -380,13 +304,13 @@ textarea {
width: min(320px, 84vw); width: min(320px, 84vw);
border-radius: 42px; border-radius: 42px;
background: linear-gradient(180deg, #1c222d 0%, #11161f 100%); 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; padding: 14px;
border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.06);
} }
.phone-card.is-main { .phone-card.is-main {
transform: rotate(-7deg) translateY(-8px); transform: none;
} }
.phone-notch, .phone-notch,
@@ -402,11 +326,8 @@ textarea {
.mockup-screen { .mockup-screen {
min-height: 470px; min-height: 470px;
border-radius: 30px; border-radius: 30px;
background: background: linear-gradient(180deg, #fffbf7 0%, #fff0f1 100%);
radial-gradient(circle at top left, rgba(255, 255, 255, 0.2), transparent 28%),
linear-gradient(180deg, #fffbf7 0%, #fff0f1 100%);
padding: 28px 22px; padding: 28px 22px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
} }
.screen-tag, .screen-tag,
@@ -472,27 +393,6 @@ textarea {
background: #f57c00; 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, .screens-grid,
.features-grid, .features-grid,
.timeline, .timeline,
@@ -543,8 +443,8 @@ textarea {
} }
.feature-card:hover { .feature-card:hover {
transform: translateY(-5px); transform: translateY(-2px);
box-shadow: 0 24px 48px rgba(74, 30, 30, 0.12); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
} }
.feature-icon, .feature-icon,
@@ -626,8 +526,7 @@ textarea {
grid-template-columns: 0.8fr 1.2fr; grid-template-columns: 0.8fr 1.2fr;
gap: 24px; gap: 24px;
align-items: center; align-items: center;
background: background: #fff;
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 243, 243, 0.92));
} }
.faq-shell { .faq-shell {
@@ -684,15 +583,13 @@ textarea {
.download-shell { .download-shell {
padding: 40px; padding: 40px;
border-radius: 32px; border-radius: 32px;
background: background: linear-gradient(135deg, var(--primary) 0%, #e35a5a 100%);
radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 24%),
linear-gradient(135deg, var(--primary) 0%, #e35a5a 100%);
color: #fff; color: #fff;
display: grid; display: grid;
grid-template-columns: 1.3fr 0.7fr; grid-template-columns: 1.3fr 0.7fr;
gap: 24px; gap: 24px;
align-items: center; 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 { .download-shell p {
@@ -752,8 +649,8 @@ textarea {
} }
.contact-card:hover { .contact-card:hover {
transform: translateY(-4px); transform: translateY(-2px);
box-shadow: 0 20px 40px rgba(74, 30, 30, 0.12); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
} }
.contact-card-icon { .contact-card-icon {
@@ -1101,10 +998,6 @@ textarea {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
.hero-stats {
grid-template-columns: 1fr;
}
.timeline::before { .timeline::before {
display: none; display: none;
} }
@@ -1184,7 +1077,6 @@ textarea {
.footer-shell, .footer-shell,
.hero-actions, .hero-actions,
.hero-points,
.badge-cloud { .badge-cloud {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
@@ -1207,22 +1099,7 @@ textarea {
.phone-stack { .phone-stack {
min-height: auto; min-height: auto;
padding-bottom: 90px; padding-bottom: 0;
}
.phone-card.is-main {
transform: none;
}
.floating-card-top {
top: auto;
bottom: 18px;
right: 18px;
}
.floating-card-bottom {
bottom: -30px;
left: 18px;
} }
.feature-card, .feature-card,