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

<?php

use Livewire\Attributes\Layout;
use Livewire\Volt\Component;

new #[Layout('components.layouts.public')] class extends Component
{
    //
}; ?>

<div>
    {{-- 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 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="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 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>
                @endforeach
            </div>
        </div>
    </section>

    {{-- 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>

    {{-- 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>
                        <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>

    {{-- 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>