랜딩페이지

언제 쓰는가

로그인 없이 제품을 한 화면에 설명하는 첫 장. 히어로·특징 밴드·대표 상품 또는 가격까지가 한 스크롤의 기본이다.

구조

<x-gujo::shell :title="__('store.landing_title')" :description="__('store.landing_lead')">
    <x-slot:nav>@include('partials.nav')</x-slot:nav>

    <section class="gj-hero gj-container">
        <span class="gj-eyebrow">{{ __('store.landing_eyebrow') }}</span>
        <h1>{{ __('store.landing_title') }}</h1>
        <p class="gj-lead">{{ __('store.landing_lead') }}</p>
        <div class="gj-hero-cta">
            <x-gujo::btn :href="route('catalog.index')">{{ __('store.cta_primary') }}</x-gujo::btn>
            <x-gujo::btn :href="route('support')" variant="ghost">{{ __('store.cta_support') }}</x-gujo::btn>
        </div>
    </section>

    <div class="gj-strip">
        <div class="gj-strip-inner gj-container">
            <div class="gj-strip-item"><strong>{{ __('store.f1_title') }}</strong><span>{{ __('store.f1_lead') }}</span></div>
            <div class="gj-strip-item"><strong>{{ __('store.f2_title') }}</strong><span>{{ __('store.f2_lead') }}</span></div>
            <div class="gj-strip-item"><strong>{{ __('store.f3_title') }}</strong><span>{{ __('store.f3_lead') }}</span></div>
        </div>
    </div>
</x-gujo::shell>

1. 히어로는 .gj-hero. 제목 한 줄, .gj-lead 한두 문장, 버튼 둘.
2. 특징은 .gj-strip 세 칸. 넷 이상은 다음 .gj-section 의 .gj-grid.
3. 아래에 상품을 두면 detail-pdp 패턴을 그대로 쓴다.

쓰는 .gj-* 클래스와 Blade 컴포넌트

• 컴포넌트: <x-gujo::shell>, <x-gujo::btn>
• 클래스: .gj-hero, .gj-container, .gj-eyebrow, .gj-lead, .gj-hero-cta, .gj-strip, .gj-strip-inner, .gj-strip-item, .gj-section, .gj-grid

하지 말 것

• 히어로에 동영상 자동재생·캐러셀을 넣지 않는다.
• 랜딩을 앱 레이아웃 없이 만들지 않는다. 골격은 <x-gujo::shell>.
• 가격을 이 페이지에서 다시 계산하지 않는다. 카드는 서버가 준 표시가다.
• 손님에게 로그인 벽으로 랜딩을 가리지 않는다. 랜딩은 공개다.