320 lines
14 KiB
PHP
320 lines
14 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 --}}
|
|
<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.services_title') }}
|
|
</h2>
|
|
<div class="w-20 h-1 bg-accent mx-auto mb-4"></div>
|
|
<p class="text-center text-text/70 max-w-3xl mx-auto mb-12">
|
|
{{ __('about.services_intro') }}
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
|
{{-- Legal Consultations & Representation --}}
|
|
<div class="bg-background rounded-xl p-8 text-center shadow-sm">
|
|
<div class="text-accent mb-4">
|
|
<flux:icon name="scale" class="w-12 h-12 mx-auto" />
|
|
</div>
|
|
<h3 class="text-lg font-bold text-text mb-4">
|
|
{{ __('about.service_consultation_title') }}
|
|
</h3>
|
|
<ul class="text-sm text-text/80 space-y-2 text-start">
|
|
@foreach(__('about.service_consultation_items') as $item)
|
|
<li class="flex items-center gap-2">
|
|
<span class="w-1.5 h-1.5 bg-accent rounded-full flex-shrink-0"></span>
|
|
{{ $item }}
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
|
|
{{-- Women's & Family Law --}}
|
|
<div class="bg-background rounded-xl p-8 text-center shadow-sm">
|
|
<div class="text-accent mb-4">
|
|
<flux:icon name="heart" class="w-12 h-12 mx-auto" />
|
|
</div>
|
|
<h3 class="text-lg font-bold text-text mb-4">
|
|
{{ __('about.service_family_title') }}
|
|
</h3>
|
|
<ul class="text-sm text-text/80 space-y-2 text-start">
|
|
@foreach(__('about.service_family_items') as $item)
|
|
<li class="flex items-center gap-2">
|
|
<span class="w-1.5 h-1.5 bg-accent rounded-full flex-shrink-0"></span>
|
|
{{ $item }}
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
|
|
{{-- Civil & Commercial Disputes --}}
|
|
<div class="bg-background rounded-xl p-8 text-center shadow-sm">
|
|
<div class="text-accent mb-4">
|
|
<flux:icon name="building-office" class="w-12 h-12 mx-auto" />
|
|
</div>
|
|
<h3 class="text-lg font-bold text-text mb-4">
|
|
{{ __('about.service_civil_title') }}
|
|
</h3>
|
|
<ul class="text-sm text-text/80 space-y-2 text-start">
|
|
@foreach(__('about.service_civil_items') as $item)
|
|
<li class="flex items-center gap-2">
|
|
<span class="w-1.5 h-1.5 bg-accent rounded-full flex-shrink-0"></span>
|
|
{{ $item }}
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
|
|
{{-- Business Legal Services --}}
|
|
<div class="bg-background rounded-xl p-8 text-center shadow-sm">
|
|
<div class="text-accent mb-4">
|
|
<flux:icon name="briefcase" class="w-12 h-12 mx-auto" />
|
|
</div>
|
|
<h3 class="text-lg font-bold text-text mb-4">
|
|
{{ __('about.service_business_title') }}
|
|
</h3>
|
|
<ul class="text-sm text-text/80 space-y-2 text-start">
|
|
@foreach(__('about.service_business_items') as $item)
|
|
<li class="flex items-center gap-2">
|
|
<span class="w-1.5 h-1.5 bg-accent rounded-full flex-shrink-0"></span>
|
|
{{ $item }}
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<flux:button variant="primary" href="{{ route('booking') }}">
|
|
{{ __('about.services_cta') }}
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- Scholarship Aspiration Section --}}
|
|
<section class="bg-[#2D3624] py-8 sm:py-12 lg:py-[60px] relative overflow-hidden">
|
|
{{-- Decorative accent - subtle gold border frame --}}
|
|
<div class="absolute inset-4 sm:inset-8 lg:inset-12 border border-accent/20 rounded-lg pointer-events-none"></div>
|
|
|
|
<div class="container mx-auto px-4 relative">
|
|
<h2 class="text-2xl lg:text-3xl font-bold text-white text-center mb-2">
|
|
{{ __('about.scholarship_title') }}
|
|
</h2>
|
|
<div class="w-20 h-1 bg-accent mx-auto mb-8"></div>
|
|
|
|
<div class="max-w-[900px] mx-auto text-center mb-12">
|
|
<p class="text-white/90 text-lg mb-4">
|
|
{{ __('about.scholarship_text_1') }}
|
|
</p>
|
|
<p class="text-white/80">
|
|
{{ __('about.scholarship_text_2') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
|
|
@foreach(__('about.scholarship_aspirations') as $index => $aspiration)
|
|
<div class="flex items-center gap-3 text-white/90 {{ $index > 0 ? 'sm:border-s sm:border-white/10 sm:ps-6 lg:ps-6' : '' }}">
|
|
<flux:icon name="check-circle" class="w-6 h-6 text-accent flex-shrink-0" />
|
|
<span>{{ $aspiration }}</span>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|