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:description" content="منصة ذكية لحجز المطاعم والمقاهي بتجربة عربية حديثة، تأكيد فوري، وخطوات واضحة من اختيار المطعم حتى تأكيد الحجز.">
<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">
<link rel="icon" href="/assets/images/tlogoapp.png" type="image/png">
<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="icon" href="/assets/images/tlogoapp.webp" type="image/webp">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="site-header">
<div class="container header-shell">
<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">
<strong class="brand-name">Tabeley</strong>
<small>Dining Reservation Platform</small>
@@ -57,30 +54,9 @@
<a href="#download" class="btn btn-primary">حمّل التطبيق الآن</a>
<button class="btn btn-secondary" disabled>قريباً على iPhone</button>
</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 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">
<article class="phone-card is-main">
<div class="phone-notch"></div>
@@ -109,8 +85,6 @@
</div>
</div>
</article>
<div class="floating-card floating-card-top">مختار بعناية</div>
<div class="floating-card floating-card-bottom">تنبيه قبل الموعد بساعة</div>
</div>
</div>
</div>
@@ -408,6 +382,6 @@
</div>
</footer>
<script src="script.js"></script>
<script src="script.js" defer></script>
</body>
</html>

11
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";
}
}

159
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,