200 lines
8.3 KiB
PHP
200 lines
8.3 KiB
PHP
<?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 --}}
|
|
<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 --}}
|
|
<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 --}}
|
|
<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.values_title') }}
|
|
</h2>
|
|
<div class="w-20 h-1 bg-accent mx-auto mb-4"></div>
|
|
<p class="text-center text-text/70 max-w-xl mx-auto mb-12">
|
|
{{ __('about.values_intro') }}
|
|
</p>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 lg:gap-6">
|
|
{{-- Integrity --}}
|
|
<div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
|
|
<div class="text-accent mb-3">
|
|
<flux:icon name="shield-check" class="w-10 h-10 mx-auto" />
|
|
</div>
|
|
<h4 class="font-semibold text-text">
|
|
{{ __('about.value_integrity') }}
|
|
</h4>
|
|
</div>
|
|
|
|
{{-- Justice --}}
|
|
<div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
|
|
<div class="text-accent mb-3">
|
|
<flux:icon name="scale" class="w-10 h-10 mx-auto" />
|
|
</div>
|
|
<h4 class="font-semibold text-text">
|
|
{{ __('about.value_justice') }}
|
|
</h4>
|
|
</div>
|
|
|
|
{{-- Knowledge --}}
|
|
<div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
|
|
<div class="text-accent mb-3">
|
|
<flux:icon name="academic-cap" class="w-10 h-10 mx-auto" />
|
|
</div>
|
|
<h4 class="font-semibold text-text">
|
|
{{ __('about.value_knowledge') }}
|
|
</h4>
|
|
</div>
|
|
|
|
{{-- Women's Empowerment --}}
|
|
<div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
|
|
<div class="text-accent mb-3">
|
|
<flux:icon name="heart" class="w-10 h-10 mx-auto" />
|
|
</div>
|
|
<h4 class="font-semibold text-text">
|
|
{{ __('about.value_women') }}
|
|
</h4>
|
|
</div>
|
|
|
|
{{-- Professionalism --}}
|
|
<div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
|
|
<div class="text-accent mb-3">
|
|
<flux:icon name="briefcase" class="w-10 h-10 mx-auto" />
|
|
</div>
|
|
<h4 class="font-semibold text-text">
|
|
{{ __('about.value_professionalism') }}
|
|
</h4>
|
|
</div>
|
|
|
|
{{-- Social Innovation --}}
|
|
<div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
|
|
<div class="text-accent mb-3">
|
|
<flux:icon name="light-bulb" class="w-10 h-10 mx-auto" />
|
|
</div>
|
|
<h4 class="font-semibold text-text">
|
|
{{ __('about.value_innovation') }}
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- 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 --}}
|
|
|
|
{{-- Scholarship Section - Story 16.6 --}}
|
|
</div>
|