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

<?php

use App\Models\Post;
use Livewire\Attributes\Layout;
use Livewire\Volt\Component;

new #[Layout('components.layouts.public')] class extends Component
{
    public function with(): array
    {
        return [
            'latestPosts' => Post::published()
                ->latest('published_at')
                ->take(3)
                ->get(),
        ];
    }
}; ?>

<div>
    {{-- Hero --}}
    <section class="hero" id="top">
        <div class="wrap">
            <div>
                <span class="eyebrow" data-reveal>{{ __('site.hero_eyebrow') }}</span>
                <h1 data-reveal data-d="1">{{ __('site.hero_title_a') }}<em>{{ __('site.hero_title_em') }}</em>{{ __('site.hero_title_b') }}</h1>
                <p class="lede" data-reveal data-d="2">{{ __('home.intro') }}</p>
                <div class="cta-row" data-reveal data-d="3">
                    <a class="btn btn-gold" href="#book"><span>{{ __('home.cta_book') }}</span>
                        <svg class="arr" 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></a>
                    <a class="btn btn-ghost" href="#services"><span>{{ __('home.cta_services') }}</span></a>
                </div>
                <div class="trust" data-reveal data-d="4">
                    @foreach ([1, 2, 3] as $n)
                        <div><strong>{{ __('site.trust_'.$n.'_title') }}</strong><span>{{ __('site.trust_'.$n.'_text') }}</span></div>
                    @endforeach
                </div>
            </div>
            <div class="hero-art" data-reveal data-d="2">
                <figure class="frame" style="margin:0">
                    <img src="{{ asset('images/site/olive-tree.jpg') }}" alt="{{ __('site.alt_olive_tree') }}" width="800" height="1200">
                    <span class="glow"></span>
                    <x-site.balance mode="hero" :label="__('site.balance_label')" id="scales" />
                    <figcaption>{{ __('site.frame_caption') }}</figcaption>
                </figure>
                <div class="tag"><span class="dot"></span><span>{{ __('site.frame_tag') }}</span></div>
            </div>
        </div>
    </section>

    {{-- Pillars band --}}
    <section class="band on-dark" aria-label="{{ __('site.pillars_label') }}">
        <div class="wrap pillars">
            @foreach (['justice', 'dignity', 'advocacy'] as $i => $pillar)
                <div class="pillar" data-reveal @if ($i) data-d="{{ $i }}" @endif>
                    <div class="k"><span class="gem"></span><span>{{ __('site.pillar_'.$pillar) }}</span></div>
                    <p>{{ __('site.pillar_'.$pillar.'_text') }}</p>
                </div>
            @endforeach
        </div>
    </section>

    {{-- Founder --}}
    <section class="sec" id="founder">
        <div class="wrap founder">
            <div class="portrait" data-reveal>
                <img src="{{ asset('images/huda-armouche.jpg') }}" alt="{{ __('home.lawyer_name') }}">
                <div class="namecard"><b>{{ __('home.lawyer_name') }}</b><span>{{ __('site.founder_role') }}</span></div>
            </div>
            <div>
                <span class="art-no" data-reveal>{{ __('site.art_founder') }}</span>
                <h2 style="font-size:clamp(2rem,3.4vw,3rem);margin-top:10px" data-reveal data-d="1">{{ __('home.about_title') }}</h2>
                <blockquote data-reveal data-d="2">{{ __('site.founder_quote') }}</blockquote>
                <p data-reveal data-d="3">{{ __('home.lawyer_bio') }}</p>
                <p data-reveal data-d="4">{{ __('home.lawyer_bio_2') }}</p>
                <div class="sign" data-reveal data-d="5"><a class="btn btn-ghost" href="{{ route('about') }}" wire:navigate><span>{{ __('site.founder_cta') }}</span></a></div>
            </div>
        </div>
    </section>

    {{-- Services docket --}}
    <section class="sec" id="services" style="padding-top:40px">
        <div class="wrap">
            <x-site.section-head :label="__('site.art_services')" :title="__('home.services_subtitle')" :lede="__('site.services_lede')" />
            <div class="docket">
                @foreach (['consultation', 'family', 'civil', 'business'] as $i => $service)
                    <a class="row" href="#book" data-reveal @if ($i) data-d="{{ $i }}" @endif>
                        <span class="n">{{ sprintf('%02d', $i + 1) }}</span>
                        <h3>{{ __('home.service_'.$service.'_title') }}</h3>
                        <div class="chips">
                            @foreach (__('home.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>

    {{-- Vision --}}
    <section class="sec fabric" id="mission">
        <div class="wrap">
            <div class="fabric-grid">
                <div data-reveal>
                    <span class="art-no">{{ __('site.art_vision') }}</span>
                    <h2>{{ __('site.vision_title') }}</h2>
                    <p class="big">{{ __('site.vision_text') }}</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>{{ __('site.card_institution_title') }}</h3><p>{{ __('site.card_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>{{ __('site.card_society_title') }}</h3><p>{{ __('site.card_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>{{ __('site.card_diaspora_title') }}</h3><p>{{ __('site.card_diaspora_text') }}</p></div>
                </article>
            </div>
        </div>
    </section>

    {{-- Values --}}
    @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
    <section class="sec" id="values">
        <div class="wrap">
            <x-site.section-head :label="__('site.art_values')" :title="__('home.values_title')" :lede="__('home.values_subtitle')" />
            <div class="sampler">
                @foreach (['integrity', 'justice', 'knowledge', 'empowerment', '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>{{ __('home.values.'.$value.'.title') }}</b>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Latest articles --}}
    <section class="sec" id="posts" style="padding-top:20px">
        <div class="wrap">
            <x-site.section-head :label="__('site.art_articles')" :title="__('home.posts_title')">
                <a class="btn btn-ghost" href="{{ route('posts.index') }}" wire:navigate data-reveal data-d="2"><span>{{ __('home.view_all_posts') }}</span></a>
            </x-site.section-head>
            @if ($latestPosts->isNotEmpty())
                <div class="posts">
                    @foreach ($latestPosts as $post)
                        <x-site.post-card :post="$post" />
                    @endforeach
                </div>
            @else
                <p class="text-center" style="color:var(--muted)">{{ __('home.posts_empty') }}</p>
            @endif
        </div>
    </section>

    <section id="book">
        <div class="wrap">
            <div class="book" data-reveal>
                <div class="book-l on-dark">
                    <span class="eyebrow">{{ __('site.art_booking') }}</span>
                    <h2>{{ __('site.booking_title') }}</h2>
                    <p>{{ __('site.booking_lede') }}</p>
                    <div class="contact">
                        <a href="tel:+970599353502"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg><span dir="ltr">{{ __('footer.phone') }}</span></a>
                        <a href="mailto:{{ __('footer.email') }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg><span>{{ __('footer.email') }}</span></a>
                        <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 21s7-6.2 7-12a7 7 0 0 0-14 0c0 5.8 7 12 7 12z"/><circle cx="12" cy="9" r="2.5"/></svg><span>{{ __('footer.address') }}</span></span>
                    </div>
                    <x-site.balance mode="finale" style="width:190px;height:190px;margin-top:22px" />
                </div>
                <livewire:pages.booking :compact="true" />
            </div>
        </div>
    </section>
</div>