From 89dee510bde2fbbba0f57410434653f37c205535 Mon Sep 17 00:00:00 2001 From: Arabic Ready Date: Tue, 3 Nov 2026 03:14:21 +0300 Subject: [PATCH 1/2] Add Arabic (RTL) version: logical CSS, Arabic font stack, hreflang, language switcher, LTR-isolated numbers/inputs --- source/ar/index.html | 42 ++++++++++++++++++++++++++++++++++++++++++ source/index.html | 36 +++++++----------------------------- source/styles.css | 29 +++++++++++++++++++++++++++++ 3 files changed, 78 insertions(+), 29 deletions(-) create mode 100644 source/ar/index.html create mode 100644 source/styles.css diff --git a/source/ar/index.html b/source/ar/index.html new file mode 100644 index 0000000..a3406cc --- /dev/null +++ b/source/ar/index.html @@ -0,0 +1,42 @@ + + + + + +فليتلي — تتبّع التوصيل للأساطيل الصغيرة + + + + + + + + +
+
+

اعرف مكان كل شحنة، الآن.

+

تتبّع مباشر عبر GPS، وإثبات التسليم، وتحديثات تلقائية لعملائك، للأساطيل من 3 إلى 50 مركبة.

+ احجز عرضًا تجريبيًا→ +
+
● 12 مركبة متصلة
+
+
+
📍

خريطة مباشرة

يتحدّث موقع كل مركبة كل 10 ثوانٍ.

+
📸

إثبات التسليم

صورة وتوقيع مرفقان بكل طلب.

+
💬

رسائل نصية للعملاء

رسائل تلقائية بموعد الوصول، مثل: «سنصل الساعة 4:30 مساءً».

+
+
+

أسعار واضحة

+

99 ريالًا لكل مركبة شهريًا

+

فوترة شهرية، وإلغاء في أي وقت. الأسعار لا تشمل ضريبة القيمة المضافة 15%.

+
+
+

احجز عرضًا تجريبيًا

+ + + +

أرسل الطلب→

+
+ + + diff --git a/source/index.html b/source/index.html index bb5f594..118bc21 100644 --- a/source/index.html +++ b/source/index.html @@ -4,35 +4,13 @@ Fleetly — Delivery tracking for small fleets - - + + + + - +

Know where every delivery is, right now.

@@ -54,8 +32,8 @@ body{margin:0;font-family:Poppins,sans-serif;color:#1d2330;background:#fff}

Book a demo

- - + +

Send request→

© 2026 Fleetly (fictional company). Riyadh, Saudi Arabia.
diff --git a/source/styles.css b/source/styles.css new file mode 100644 index 0000000..9a2ee31 --- /dev/null +++ b/source/styles.css @@ -0,0 +1,29 @@ +/* SYNTHETIC SAMPLE: fictional company "Fleetly", written for the Arabic Ready case study. + Localized for RTL: physical left/right → logical inline-start/end; Arabic-capable font stack. */ +body{margin:0;font-family:Poppins,"IBM Plex Sans Arabic",Tahoma,sans-serif;color:#1d2330;background:#fff} +.nav{display:flex;align-items:center;padding:16px 24px;border-bottom:1px solid #e6e8ee} +.logo{font-weight:600;font-size:20px;margin-inline-end:auto} +.nav a{margin-inline-start:20px;color:#1d2330;text-decoration:none} +.hero{display:flex;gap:40px;padding:56px 24px;max-width:1040px;margin:0 auto;align-items:center} +.hero h1{font-size:40px;line-height:1.15;margin:0 0 16px} +.hero p{font-size:18px;color:#535b6b;margin:0 0 24px;text-align:start} +.btn{display:inline-block;background:#1f6feb;color:#fff;padding:12px 20px;border-radius:6px;text-decoration:none} +.btn .arrow{margin-inline-start:8px;display:inline-block} +[dir=rtl] .btn .arrow{transform:scaleX(-1)} +.mock{flex:1;min-height:220px;border-radius:12px;background:linear-gradient(135deg,#dbe7ff,#f3f6ff);position:relative} +.badge{position:absolute;top:16px;inset-inline-start:16px;background:#fff;border-radius:999px;padding:6px 12px;font-size:13px} +.features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1040px;margin:0 auto;padding:0 24px 48px} +.feature{border:1px solid #e6e8ee;border-radius:10px;padding:20px;padding-inline-start:56px;position:relative} +.feature .icon{position:absolute;inset-inline-start:18px;top:20px;font-size:20px} +.pricing{max-width:1040px;margin:0 auto;padding:0 24px 48px} +.price{font-size:32px;font-weight:600} +.price small{font-size:14px;color:#535b6b} +.contact{max-width:520px;margin:0 auto;padding:0 24px 64px} +.contact label{display:block;margin:12px 0 4px} +.contact input{width:100%;text-align:start;padding:10px;border:1px solid #cfd4de;border-radius:6px;box-sizing:border-box} +.footer{padding:24px;border-top:1px solid #e6e8ee;color:#535b6b;font-size:14px} +@media (max-width:720px){.hero{flex-direction:column}.features{grid-template-columns:1fr}} +.ltr{direction:ltr;unicode-bidi:isolate} +.lang{margin-inline-start:20px;font-weight:600} +[lang=ar] body,[lang=ar] .hero h1{line-height:1.5} +[lang=ar] .hero h1{font-size:36px} -- 2.53.0.windows.2 From 90e8262b0bfa899ecff651e3d41de87538479398 Mon Sep 17 00:00:00 2001 From: Arabic Ready Date: Tue, 3 Nov 2026 03:15:18 +0300 Subject: [PATCH 2/2] Fix mobile hero: stretch mock panel in column layout (pre-existing bug found during RTL QA) --- source/styles.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/source/styles.css b/source/styles.css index 9a2ee31..6821e69 100644 --- a/source/styles.css +++ b/source/styles.css @@ -22,7 +22,8 @@ body{margin:0;font-family:Poppins,"IBM Plex Sans Arabic",Tahoma,sans-serif;color .contact label{display:block;margin:12px 0 4px} .contact input{width:100%;text-align:start;padding:10px;border:1px solid #cfd4de;border-radius:6px;box-sizing:border-box} .footer{padding:24px;border-top:1px solid #e6e8ee;color:#535b6b;font-size:14px} -@media (max-width:720px){.hero{flex-direction:column}.features{grid-template-columns:1fr}} +@media (max-width:720px){.hero{flex-direction:column;align-items:stretch}.features{grid-template-columns:1fr}} +.badge{white-space:nowrap} .ltr{direction:ltr;unicode-bidi:isolate} .lang{margin-inline-start:20px;font-weight:600} [lang=ar] body,[lang=ar] .hero h1{line-height:1.5} -- 2.53.0.windows.2