24-7: about page — implemented, QA Review
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Naser Mansour
@@ -332,6 +332,12 @@ body.site .success-card{max-width:560px;margin-inline:auto;background:var(--crea
|
||||
body.site .success-card h1{font-size:clamp(2rem,3.4vw,2.6rem);margin-bottom:12px}
|
||||
body.site .success-card p{color:var(--muted);margin:0 0 26px}
|
||||
|
||||
/* ---------- About page (24-7) ---------- */
|
||||
body.site .row-static{grid-template-columns:90px 1fr}
|
||||
body.site .row-static:hover{background:none;color:inherit;transform:none;box-shadow:none}
|
||||
body.site .row-static::before{display:none}
|
||||
@media (max-width:760px){body.site .row-static{grid-template-columns:52px 1fr}}
|
||||
|
||||
/* ---------- Reveal (hidden only when JavaScript runs) ---------- */
|
||||
body.site.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
|
||||
body.site.js [data-reveal].in{opacity:1;transform:none}
|
||||
|
||||
@@ -9,288 +9,111 @@ new #[Layout('components.layouts.public')] class extends Component
|
||||
}; ?>
|
||||
|
||||
<div>
|
||||
<div class="wrap py-8">
|
||||
{{-- Hero Section --}}
|
||||
<section class="bg-background py-10 sm:py-[60px] lg:py-20">
|
||||
<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-text mb-2">
|
||||
{{ __('about.title') }}
|
||||
</h1>
|
||||
|
||||
{{-- Tagline --}}
|
||||
<p class="text-xl sm:text-2xl text-text/80 max-w-[800px] mx-auto mb-4">
|
||||
{{ __('about.tagline') }}
|
||||
</p>
|
||||
|
||||
{{-- Identity Statement --}}
|
||||
<p class="text-lg text-text/70 max-w-[700px] mx-auto">
|
||||
{{ __('about.identity') }}
|
||||
</p>
|
||||
{{-- Hero --}}
|
||||
<section class="sec" style="padding-bottom:64px">
|
||||
<div class="wrap" style="max-width:52em">
|
||||
<span class="eyebrow" data-reveal>{{ __('about.tagline') }}</span>
|
||||
<h1 data-reveal data-d="1" style="font-size:clamp(2.6rem,4.6vw,4.1rem);line-height:1.12;margin:18px 0 22px">{{ __('about.title') }}</h1>
|
||||
<p class="lede" data-reveal data-d="2">{{ __('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-8"></div>
|
||||
<div class="bg-white rounded-lg shadow-sm p-6 sm:p-8 max-w-[900px] mx-auto mb-12">
|
||||
<p class="text-center text-lg text-text/90">
|
||||
{{ __('about.mission_intro') }}
|
||||
</p>
|
||||
{{-- Vision and mission --}}
|
||||
<section class="sec fabric">
|
||||
<div class="wrap">
|
||||
<div class="fabric-grid">
|
||||
<div data-reveal>
|
||||
<span class="art-no">{{ __('site.about_art_vision') }}</span>
|
||||
<h2>{{ __('about.vision_title') }}</h2>
|
||||
<p class="big">{{ __('about.vision_text') }}</p>
|
||||
<h3 style="margin-top:28px">{{ __('about.mission_title') }}</h3>
|
||||
<p>{{ __('about.mission_intro') }}</p>
|
||||
</div>
|
||||
<div class="hoop" data-reveal data-d="2"><img src="{{ asset('images/site/embroidery-hoop.jpg') }}" alt="{{ __('site.alt_hoop') }}" width="773" height="1000"></div>
|
||||
</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 class="three">
|
||||
<article class="card" data-reveal>
|
||||
<div class="ph motif-ph"><x-site.balance mode="static" :size="150" /><span class="lbl">{{ __('site.card_institution_label') }}</span></div>
|
||||
<div class="bd"><h3>{{ __('about.mission_institution_title') }}</h3><p>{{ __('about.mission_institution_text') }}</p></div>
|
||||
</article>
|
||||
<article class="card" data-reveal data-d="1">
|
||||
<div class="ph"><img src="{{ asset('images/site/olives.jpg') }}" alt="{{ __('site.alt_olives') }}" width="900" height="1350"><span class="lbl">{{ __('site.card_society_label') }}</span></div>
|
||||
<div class="bd"><h3>{{ __('about.mission_society_title') }}</h3><p>{{ __('about.mission_society_text') }}</p></div>
|
||||
</article>
|
||||
<article class="card" data-reveal data-d="2">
|
||||
<div class="ph"><img src="{{ asset('images/site/hills.jpg') }}" alt="{{ __('site.alt_hills') }}" width="900" height="1600"><span class="lbl">{{ __('site.card_diaspora_label') }}</span></div>
|
||||
<div class="bd"><h3>{{ __('about.mission_diaspora_title') }}</h3><p>{{ __('about.mission_diaspora_text') }}</p></div>
|
||||
</article>
|
||||
</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" />
|
||||
{{-- Values --}}
|
||||
<section class="sec">
|
||||
<div class="wrap">
|
||||
<x-site.section-head :label="__('site.about_art_values')" :title="__('about.values_title')" :lede="__('about.values_intro')" />
|
||||
@php
|
||||
$valueIcons = [
|
||||
'<path d="M12 3l7 3v6c0 4.5-3 7.6-7 9-4-1.4-7-4.5-7-9V6z"/><path d="M9 12l2 2 4-4"/>',
|
||||
'<path d="M12 4v16M8 20h8M5 7h14"/><path d="M5 7l-3 6a3 3 0 0 0 6 0zM19 7l-3 6a3 3 0 0 0 6 0z"/>',
|
||||
'<path d="M2 5h6a4 4 0 0 1 4 4v11a3 3 0 0 0-3-3H2zM22 5h-6a4 4 0 0 0-4 4v11a3 3 0 0 1 3-3h7z"/>',
|
||||
'<path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/>',
|
||||
'<rect x="3" y="7.5" width="18" height="12" rx="2"/><path d="M9 7.5V5h6v2.5M3 13h18"/>',
|
||||
'<path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.8.8 1 1.5 1 2.5h6c0-1 .2-1.7 1-2.5A6 6 0 0 0 12 3z"/>',
|
||||
];
|
||||
@endphp
|
||||
<div class="sampler">
|
||||
@foreach (['integrity', 'justice', 'knowledge', 'women', 'professionalism', 'innovation'] as $i => $value)
|
||||
<div class="val" data-reveal @if ($i) data-d="{{ $i }}" @endif>
|
||||
<span class="medal"><svg viewBox="0 0 24 24" aria-hidden="true">{!! $valueIcons[$i] !!}</svg></span>
|
||||
<b>{{ __('about.value_'.$value) }}</b>
|
||||
</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>
|
||||
@endforeach
|
||||
</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>
|
||||
{{-- Goals --}}
|
||||
<section class="sec" style="padding-top:20px">
|
||||
<div class="wrap">
|
||||
<x-site.section-head :label="__('site.about_art_goals')" :title="__('about.goals_title')" />
|
||||
<ol class="docket" style="list-style:none;margin:0;padding:0">
|
||||
@foreach (__('about.goals') as $i => $goal)
|
||||
<li class="row row-static" data-reveal>
|
||||
<span class="n">{{ sprintf('%02d', $i + 1) }}</span>
|
||||
<p style="font-size:1.1rem;color:var(--ink);margin:0">{{ $goal }}</p>
|
||||
</li>
|
||||
@endforeach
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
{{-- Legal services --}}
|
||||
<section class="sec" id="services" style="padding-top:20px">
|
||||
<div class="wrap">
|
||||
<x-site.section-head :label="__('site.about_art_services')" :title="__('about.services_title')" :lede="__('about.services_intro')" />
|
||||
<div class="docket">
|
||||
@foreach (['consultation', 'family', 'civil', 'business'] as $i => $service)
|
||||
<a class="row" href="{{ route('booking') }}" wire:navigate data-reveal @if ($i) data-d="{{ $i }}" @endif>
|
||||
<span class="n">{{ sprintf('%02d', $i + 1) }}</span>
|
||||
<h3>{{ __('about.service_'.$service.'_title') }}</h3>
|
||||
<div class="chips">
|
||||
@foreach (__('about.service_'.$service.'_items') as $item)
|
||||
<span class="chip">{{ $item }}</span>
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<span class="go"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6"/></svg></span>
|
||||
</a>
|
||||
@endforeach
|
||||
</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>
|
||||
{{-- Closing call to action --}}
|
||||
<section class="band on-dark">
|
||||
<div class="wrap" style="text-align:center;padding-block:72px">
|
||||
<h2 style="color:var(--cream)" data-reveal>{{ __('site.about_cta_title') }}</h2>
|
||||
<p style="margin-top:22px" data-reveal data-d="1"><a class="btn btn-gold" href="{{ route('booking') }}" wire:navigate>{{ __('about.services_cta') }}</a></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user