24-1: public design foundation (stylesheet, script, fonts, layout) — implemented, QA Review

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-31 18:41:12 +02:00
parent 3d1fe40be6
commit bcabb2ad2d
22 changed files with 245 additions and 15 deletions
@@ -2,22 +2,20 @@
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
    <head>
        @include('partials.head')
+        @include('partials.site-fonts')
+        @vite(['resources/css/public.css', 'resources/js/public.js'])
    </head>
-    <body class="min-h-screen flex flex-col bg-background" style="font-family: var(--font-{{ app()->getLocale() === 'ar' ? 'arabic' : 'english' }})">
+    <body class="site min-h-screen flex flex-col">
        <!-- Skip to content link for keyboard accessibility -->
        <a href="#main-content" class="skip-link" data-test="skip-to-content">
            {{ __('accessibility.skip_to_content') }}
        </a>
+        <div class="site-progress" aria-hidden="true"></div>

        <x-navigation />

-        <!-- Spacer for fixed navigation -->
-        <div class="h-16"></div>
-
        <main id="main-content" role="main" class="flex-1" tabindex="-1">
-            <div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
-                {{ $slot }}
-            </div>
+            {{ $slot }}
        </main>

        <x-footer />
@@ -9,8 +9,9 @@ new #[Layout('components.layouts.public')] class extends Component
 }; ?>

 <div>
+<div class="wrap py-8">
    {{-- Hero Section --}}
-    <section class="bg-background py-10 sm:py-[60px] lg:py-20 -mx-4 sm:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8">
+    <section class="bg-background py-10 sm:py-[60px] lg:py-20">
        <div class="container mx-auto px-4 text-center">
            {{-- Page Title --}}
            <h1 class="text-[2rem] sm:text-[2.5rem] lg:text-[3rem] font-bold text-text mb-2">
@@ -292,3 +293,4 @@ new #[Layout('components.layouts.public')] class extends Component
    </section>

 </div>
+</div>
@@ -8,6 +8,7 @@ new #[Layout('components.layouts.public')] class extends Component
    //
 }; ?>

+<div class="wrap py-8">
 <div class="max-w-2xl mx-auto py-16 px-4 text-center">
    <flux:icon name="check-circle" class="w-16 h-16 mx-auto text-green-500 mb-6" />

@@ -23,3 +24,4 @@ new #[Layout('components.layouts.public')] class extends Component
        {{ __('navigation.home') }}
    </flux:button>
 </div>
+</div>
@@ -192,6 +192,7 @@ new #[Layout('components.layouts.public')] class extends Component
    }
 }; ?>

+<div class="wrap py-8">
 <div class="max-w-4xl mx-auto py-8 px-4">
        <flux:heading size="xl" class="mb-6 text-body">
            {{ __('booking.request_consultation') }}
@@ -367,3 +368,4 @@ new #[Layout('components.layouts.public')] class extends Component
            @endif
        @endif
 </div>
+</div>
@@ -18,6 +18,7 @@ new #[Layout('components.layouts.public')] class extends Component
 }; ?>

 <div>
+<div class="wrap py-8">
    {{-- Hero Section --}}
    <section class="bg-background py-8 sm:py-12 lg:py-16">
        <div class="container mx-auto px-4 text-center">
@@ -235,3 +236,4 @@ new #[Layout('components.layouts.public')] class extends Component
        </section>
    @endif
 </div>
+</div>
@@ -55,6 +55,7 @@ new #[Layout('components.layouts.public')] class extends Component
    }
 }; ?>

+<div class="wrap py-8">
 <div class="max-w-4xl mx-auto px-0">
    <flux:heading size="xl" class="text-body text-xl sm:text-2xl lg:text-3xl">{{ __('posts.posts') }}</flux:heading>

@@ -141,3 +142,4 @@ new #[Layout('components.layouts.public')] class extends Component
        {{ $posts->links() }}
    </div>
 </div>
+</div>
@@ -18,6 +18,7 @@ new #[Layout('components.layouts.public')] class extends Component
    }
 }; ?>

+<div class="wrap py-8">
 <article class="max-w-3xl mx-auto">
    <header class="mb-8">
        <flux:heading size="xl" class="text-body">{{ $post->getTitle() }}</flux:heading>
@@ -37,3 +38,4 @@ new #[Layout('components.layouts.public')] class extends Component
        </a>
    </footer>
 </article>
+</div>
@@ -1,5 +1,5 @@
 <x-layouts.public>
-    <div class="py-8">
+    <div class="wrap py-8">
        <h1 class="mb-6 text-3xl font-bold text-text">{{ $page->getTitle() }}</h1>
        <div class="prose prose-brand max-w-none rounded-lg bg-card p-8 shadow-card" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
            @if ($page->getContent())
@@ -1,5 +1,5 @@
 <x-layouts.public>
-    <div class="py-8">
+    <div class="wrap py-8">
        <h1 class="text-3xl font-bold text-text mb-6">{{ __('footer.privacy') }}</h1>
        <div class="bg-card p-8 rounded-lg shadow-card prose prose-brand max-w-none">
            <p class="text-body">{{ __('Privacy policy content will be added here.') }}</p>
@@ -1,5 +1,5 @@
 <x-layouts.public>
-    <div class="py-8">
+    <div class="wrap py-8">
        <h1 class="text-3xl font-bold text-text mb-6">{{ __('footer.terms') }}</h1>
        <div class="bg-card p-8 rounded-lg shadow-card prose prose-brand max-w-none">
            <p class="text-body">{{ __('Terms of service content will be added here.') }}</p>
@@ -10,7 +10,7 @@
 <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 <link rel="manifest" href="/manifest.json">
-<meta name="theme-color" content="#4A4A42">
+<meta name="theme-color" content="#2D3624">

 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -0,0 +1,3 @@
+<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=Markazi+Text:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&display=swap" rel="stylesheet">