complete story 16.1

resources/views/components/navigation.blade.php

@@ -54,6 +54,17 @@
                 >
                     {{ __('navigation.home') }}
                 </a>
+                <a
+                    href="{{ route('about') }}"
+                    @class([
+                        'text-off-white hover:text-cta transition-colors py-2',
+                        'border-b-2 border-cta' => request()->routeIs('about'),
+                    ])
+                    wire:navigate
+                    data-test="nav-about"
+                >
+                    {{ __('navigation.about') }}
+                </a>
                 <a
                     href="{{ route('booking') }}"
                     @class([
@@ -156,6 +167,18 @@
             >
                 {{ __('navigation.home') }}
             </a>
+            <a
+                href="{{ route('about') }}"
+                @class([
+                    'block px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center',
+                    'bg-active border-s-2 border-cta' => request()->routeIs('about'),
+                ])
+                wire:navigate
+                @click="mobileMenuOpen = false"
+                data-test="mobile-nav-about"
+            >
+                {{ __('navigation.about') }}
+            </a>
             <a
                 href="{{ route('booking') }}"
                 @class([

resources/views/livewire/pages/about.blade.php

@@ -0,0 +1,43 @@
+<?php
+
+use Livewire\Attributes\Layout;
+use Livewire\Volt\Component;
+
+new #[Layout('components.layouts.public')] class extends Component
+{
+    //
+}; ?>
+
+<div>
+    {{-- Hero Section --}}
+    <section class="bg-[#2D3624] py-10 sm:py-[60px] lg:py-20 -mx-4 sm:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8">
+        <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-white mb-4">
+                {{ __('about.title') }}
+            </h1>
+
+            {{-- Tagline --}}
+            <p class="text-xl sm:text-2xl text-white/80 max-w-[800px] mx-auto mb-6">
+                {{ __('about.tagline') }}
+            </p>
+
+            {{-- Identity Statement --}}
+            <p class="text-lg text-white/70 max-w-[700px] mx-auto">
+                {{ __('about.identity') }}
+            </p>
+        </div>
+    </section>
+
+    {{-- Vision Section - Story 16.2 --}}
+
+    {{-- Mission Section - Story 16.2 --}}
+
+    {{-- Values Section - Story 16.3 --}}
+
+    {{-- Goals Section - Story 16.4 --}}
+
+    {{-- Services Section - Story 16.5 --}}
+
+    {{-- Scholarship Section - Story 16.6 --}}
+</div>