@extends('layouts.app')

@section('title', 'Nameplates')

@section('body_class', 'nameplates-home')

@section('content')
<div class="np-home">
    <header class="np-home__hero">
        <p class="np-home__kicker">Atelier</p>
        <h1>Nameplates</h1>
        <p class="np-home__lede">Design layered nameplates in Studio, or send a private client design link by SMS, email, WhatsApp, or Instagram DM.</p>
        <div class="np-home__actions">
            <a href="{{ route('nameplates.studio') }}" class="np-home__cta">New Design</a>
            <a href="{{ route('nameplates.send-link') }}" class="np-home__cta np-home__cta--ghost">Send Design Link</a>
            <a href="{{ route('nameplates.requests.index') }}" class="np-home__text-link">Nameplate Requests</a>
        </div>
    </header>
</div>
@endsection

@push('styles')
<style>
body.nameplates-home { background: #0c0a09; }
body.nameplates-home .main { padding: 0; background: #0c0a09; }
body.nameplates-home main.main > .container { max-width: none !important; padding: 0 !important; }
body.nameplates-home .app-footer { display: none; }
.np-home {
    min-height: calc(100vh - 7.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(201, 162, 92, 0.14), transparent 55%),
        #0c0a09;
    color: #f5f0e8;
    text-align: center;
    padding: 4rem 1.5rem;
}
.np-home__kicker {
    margin: 0 0 0.75rem;
    font-size: 0.72rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: #c9a25c;
    font-weight: 600;
}
.np-home h1 {
    margin: 0;
    font-family: "Palatino Linotype", Palatino, "Times New Roman", serif;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 500;
    letter-spacing: 0.04em;
}
.np-home__lede {
    margin: 1rem auto 2rem;
    max-width: 34rem;
    color: #b8a994;
    line-height: 1.6;
    font-size: 1.02rem;
}
.np-home__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
}
.np-home__cta {
    display: inline-block;
    padding: 0.85rem 1.85rem;
    background: #c9a25c;
    color: #1a140c;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.78rem;
    border-radius: 2px;
}
.np-home__cta--ghost {
    background: transparent;
    color: #c9a25c;
    border: 1px solid rgba(201,162,92,.55);
}
.np-home__cta:hover { background: #dfc07a; color: #1a140c; }
.np-home__cta--ghost:hover { background: rgba(201,162,92,.12); color: #dfc07a; }
.np-home__text-link {
    display: inline-block;
    margin-left: 0.25rem;
    color: #a8a29e;
    font-size: 0.85rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(168,162,158,.35);
}
.np-home__text-link:hover { color: #c9a25c; }
</style>
@endpush