complete story 16.2

This commit is contained in:
Naser Mansour
2026-01-11 20:43:49 +02:00
parent 877569e6e8
commit 6d10abac1a
5 changed files with 268 additions and 13 deletions
+64 -2
View File
@@ -29,9 +29,71 @@ new #[Layout('components.layouts.public')] class extends Component
</div>
</section>
{{-- Vision Section - Story 16.2 --}}
{{-- Vision Section --}}
<section class="bg-white 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.vision_title') }}
</h2>
<div class="w-20 h-1 bg-accent mx-auto mb-8"></div>
<blockquote class="max-w-[900px] mx-auto text-center text-lg text-text/90">
<span class="text-4xl text-accent leading-none align-top">"</span>
<span class="italic">{{ __('about.vision_text') }}</span>
<span class="text-4xl text-accent leading-none align-bottom">"</span>
</blockquote>
</div>
</section>
{{-- Mission Section - Story 16.2 --}}
{{-- Mission 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.mission_title') }}
</h2>
<div class="w-20 h-1 bg-accent mx-auto mb-12"></div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{{-- Card 1: For Institution --}}
<div class="bg-white rounded-lg shadow-sm p-6">
<div class="text-accent mb-4">
<flux:icon name="building-office" class="w-12 h-12" />
</div>
<h3 class="text-xl font-bold text-text mb-3">
{{ __('about.mission_institution_title') }}
</h3>
<p class="text-text/80">
{{ __('about.mission_institution_text') }}
</p>
</div>
{{-- Card 2: For Society --}}
<div class="bg-white rounded-lg shadow-sm p-6">
<div class="text-accent mb-4">
<flux:icon name="user-group" class="w-12 h-12" />
</div>
<h3 class="text-xl font-bold text-text mb-3">
{{ __('about.mission_society_title') }}
</h3>
<p class="text-text/80">
{{ __('about.mission_society_text') }}
</p>
</div>
{{-- Card 3: For Diaspora --}}
<div class="bg-white rounded-lg shadow-sm p-6 md:col-span-2 lg:col-span-1">
<div class="text-accent mb-4">
<flux:icon name="globe-alt" class="w-12 h-12" />
</div>
<h3 class="text-xl font-bold text-text mb-3">
{{ __('about.mission_diaspora_title') }}
</h3>
<p class="text-text/80">
{{ __('about.mission_diaspora_text') }}
</p>
</div>
</div>
</div>
</section>
{{-- Values Section - Story 16.3 --}}