complete story 16.4

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

@@ -170,7 +170,28 @@ new #[Layout('components.layouts.public')] class extends Component
         </div>
     </section>
 
-    {{-- Goals Section - Story 16.4 --}}
+    {{-- Goals Section --}}
+    <section class="bg-background py-8 sm:py-12 lg:py-[60px]">
+        <div class="container mx-auto px-4">
+            <h2 class="text-2xl lg:text-3xl font-bold text-text text-center mb-2">
+                {{ __('about.goals_title') }}
+            </h2>
+            <div class="w-20 h-1 bg-accent mx-auto mb-12"></div>
+
+            <div class="bg-white rounded-lg shadow-sm p-6 sm:p-8 max-w-5xl mx-auto">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-6">
+                    @foreach(__('about.goals') as $index => $goal)
+                        <div class="flex items-start gap-4">
+                            <span class="flex-shrink-0 w-8 h-8 bg-accent text-white rounded-full flex items-center justify-center font-bold text-sm">
+                                {{ $index + 1 }}
+                            </span>
+                            <p class="text-text/90 pt-1">{{ $goal }}</p>
+                        </div>
+                    @endforeach
+                </div>
+            </div>
+        </div>
+    </section>
 
     {{-- Services Section - Story 16.5 --}}