91 lines
4.5 KiB
Vue
91 lines
4.5 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-slate-950 text-slate-100">
|
|
<section class="relative overflow-hidden bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950">
|
|
<div class="pointer-events-none absolute -left-28 top-[-130px] h-72 w-72 rounded-full bg-cyan-400/20 blur-3xl"></div>
|
|
<div class="pointer-events-none absolute right-[-100px] bottom-[-120px] h-80 w-80 rounded-full bg-indigo-400/15 blur-3xl"></div>
|
|
|
|
<div class="mx-auto flex min-h-screen max-w-6xl flex-col justify-between px-6 py-10 md:px-10">
|
|
<header class="flex items-center justify-between">
|
|
<p class="text-xs font-bold tracking-[0.2em] text-slate-300">LANDING MANAGER</p>
|
|
<NuxtLink
|
|
to="/admin"
|
|
class="rounded-md border border-slate-700 px-4 py-2 text-sm text-slate-200 transition hover:bg-slate-800"
|
|
>
|
|
관리자 바로가기
|
|
</NuxtLink>
|
|
</header>
|
|
|
|
<main class="grid gap-10 py-16 md:py-24 lg:grid-cols-2 lg:items-center">
|
|
<div class="space-y-6">
|
|
<p class="inline-flex rounded-full border border-cyan-400/30 bg-cyan-400/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-cyan-200">
|
|
광고 랜딩 운영 시작점
|
|
</p>
|
|
<h1 class="text-4xl font-black leading-tight md:text-5xl">
|
|
캠페인 기반 랜딩 페이지를
|
|
<span class="text-cyan-300">빠르게</span> 운영하세요
|
|
</h1>
|
|
<p class="max-w-xl text-lg text-slate-300">
|
|
캠페인, 페이지, 도메인 매핑, 조건 분기까지 한 곳에서 관리하는 어드민 구조를
|
|
페이지 단위로 점진적으로 구성합니다.
|
|
</p>
|
|
|
|
<div class="flex flex-wrap gap-3">
|
|
<NuxtLink
|
|
to="/admin"
|
|
class="rounded-md bg-cyan-400 px-4 py-2 font-semibold text-slate-950 transition hover:bg-cyan-300"
|
|
>
|
|
관리자 대시보드 시작
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
to="/"
|
|
class="rounded-md border border-slate-700 px-4 py-2 text-slate-200 transition hover:bg-slate-800"
|
|
>
|
|
가이드 보기
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="rounded-2xl border border-slate-700 bg-slate-900/60 p-6 backdrop-blur">
|
|
<h2 class="text-sm font-bold uppercase tracking-[0.15em] text-cyan-300">현재 설계 범위</h2>
|
|
<p class="mt-2 text-slate-200">1단계: 기본 화면 + 관리 기본 페이지를 하나씩 생성</p>
|
|
<ul class="mt-4 space-y-3 text-sm text-slate-300">
|
|
<li class="rounded-md border border-slate-800 p-3">1) 홈(현재 페이지)</li>
|
|
<li class="rounded-md border border-slate-800 p-3">2) 관리자 시작 페이지(다음)</li>
|
|
<li class="rounded-md border border-slate-800 p-3">3) 캠페인 목록</li>
|
|
<li class="rounded-md border border-slate-800 p-3">4) 페이지 상세/빌더</li>
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mx-auto max-w-6xl px-6 pb-16 md:px-10">
|
|
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
<article class="rounded-xl border border-slate-700 bg-slate-900 p-5">
|
|
<p class="text-xs uppercase text-slate-400">목표</p>
|
|
<h3 class="mt-1 text-xl font-bold">광고 집행용 랜딩 운영</h3>
|
|
<p class="mt-2 text-sm text-slate-300">
|
|
유입 페이지가 많아져도 관리가 쉬운 구조로 캠페인 단위 관리 흐름을 만든다.
|
|
</p>
|
|
</article>
|
|
|
|
<article class="rounded-xl border border-slate-700 bg-slate-900 p-5">
|
|
<p class="text-xs uppercase text-slate-400">기능</p>
|
|
<h3 class="mt-1 text-xl font-bold">도메인 분기 및 조건 분기</h3>
|
|
<p class="mt-2 text-sm text-slate-300">
|
|
호스트/경로 분기 + 요일/시간 조건 분기를 기반으로 보여줄 페이지를 제어한다.
|
|
</p>
|
|
</article>
|
|
|
|
<article class="rounded-xl border border-slate-700 bg-slate-900 p-5">
|
|
<p class="text-xs uppercase text-slate-400">철학</p>
|
|
<h3 class="mt-1 text-xl font-bold">페이지는 작게, 운영은 빠르게</h3>
|
|
<p class="mt-2 text-sm text-slate-300">
|
|
한 번에 완성보다, 페이지 하나씩 완성하면서 안정적으로 확장한다.
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|