Prompt Shop - AI Architect Detail Page Implementation Plan

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

Goal: Add a dedicated product detail page for the "AI Architect Prompt Bundle" to the existing prompt-shop site, with Lemon Squeezy checkout integration and SEO optimization.

Architecture: The prompt-shop is a Next.js 16 App Router site with shadcn/ui + Tailwind CSS v4 + framer-motion. We'll add a new route /ai-architect following the exact same pattern as the existing /ai-designer page (dedicated page with section components). The page will showcase the AI Architect series (6 books) as a product with Lemon Squeezy checkout links read from environment variables, matching the pattern already used in ai-architect-global.

Tech Stack: Next.js 16 (App Router), TypeScript, Tailwind CSS v4, shadcn/ui (new-york), framer-motion, lucide-react, Pretendard font (CDN)

Codebase Context

Project Location

/Users/nbs22/(Claude)/(claude).projects/business-builder/projects/prompt-shop/

Key Files Reference

Route pattern: src/app/ai-designer/page.tsx (existing product detail page to follow)
Section pattern: src/components/sections/ai-designer/*.tsx (hero, what-is, before-after, packages, sample-showcase, testimonials, faq, cta)
Shared components: src/components/header.tsx, src/components/footer.tsx, src/components/motion-wrapper.tsx (FadeInUp, FadeIn, ScaleIn)
UI components: src/components/ui/button.tsx, src/components/ui/card.tsx, src/components/ui/badge.tsx, src/components/ui/accordion.tsx, src/components/ui/separator.tsx
Product data reference: /Users/nbs22/(Claude)/(claude).projects/business-builder/projects/ai-architect-global/src/lib/products.ts (6 books, bundle pricing, Lemon Squeezy env keys)
No tests in this project - it's a static marketing site. No test framework configured.

Conventions

Korean language for all user-facing copy
"use client" directive on components using hooks/interactivity
Server components for pages with export const metadata
FadeInUp wrapper for scroll animations on sections
Lemon Squeezy checkout links via NEXT_PUBLIC_LS_* env vars
External links use target="_blank" rel="noopener noreferrer"
Purple gradient theme (oklch primary at 270 hue)
All CTA buttons link to purchase (Lemon Squeezy) or anchor-scroll

Product Data (from ai-architect-global)

The AI Architect series has 6 books priced at $17 each, bundle at $47 (was $102):

AI Marketing Architect (DotCom Secrets)
AI Brand Architect (Expert Secrets)
AI Traffic Architect (Traffic Secrets)
AI Story Architect (Copywriting Secrets)
AI Startup Architect (Product Launch Formula)
AI Content Architect (Online Writing Strategies)

Env vars: NEXT_PUBLIC_LS_BUNDLE_URL, NEXT_PUBLIC_LS_PRODUCT_1_URL through NEXT_PUBLIC_LS_PRODUCT_6_URL

Task 1: Create Product Data Module

Files:

Create: src/lib/ai-architect-products.ts

Step 1: Create the product data file

This file defines all 6 AI Architect books and the bundle, matching the data from ai-architect-global but adapted for the Korean prompt-shop context.

export type AiArchitectBook = {
  id: string;
  slug: string;
  vol: number;
  title: string;
  titleKo: string;
  subtitle: string;
  tagline: string;
  descriptionKo: string;
  framework: string;
  icon: string;
  color: string;
  envKey: string;
  highlights: string[];
  whatsInside: string[];
};

export const aiArchitectBooks: AiArchitectBook[] = [
  {
    id: "marketing-architect",
    slug: "ai-marketing-architect",
    vol: 1,
    title: "AI Marketing Architect",
    titleKo: "AI 마케팅 설계자",
    subtitle: "DotCom Secrets + AI 자동화",
    tagline: "퍼널 설계를 AI에게 맡기세요. Russell Brunson의 시스템을 당신의 비즈니스에.",
    descriptionKo: "Value Ladder, Hook-Story-Offer, Soap Opera Sequence 등 DotCom Secrets 핵심 프레임워크를 AI로 자동 실행합니다.",
    framework: "DotCom Secrets",
    icon: "🎯",
    color: "from-blue-500 to-purple-500",
    envKey: "NEXT_PUBLIC_LS_PRODUCT_1_URL",
    highlights: [
      "Value Ladder — 5단계 고객 상승 모델",
      "Hook-Story-Offer — AI 콘텐츠 프레임워크",
      "7단계 퍼널 시스템",
      "Soap Opera Sequence — 5일 이메일 시리즈",
    ],
    whatsInside: [
      "20페이지 프리미엄 PDF 가이드",
      "AI Marketing Architect 시스템 프롬프트",
      "각 프레임워크별 프롬프트 템플릿",
      "실전 사례 4개 (매출 수치 포함)",
      "5일 퀵스타트 체크리스트",
    ],
  },
  {
    id: "brand-architect",
    slug: "ai-brand-architect",
    vol: 2,
    title: "AI Brand Architect",
    titleKo: "AI 브랜드 설계자",
    subtitle: "Expert Secrets + AI 자동화",
    tagline: "제품이 아닌 무브먼트를 만드세요.",
    descriptionKo: "Russell Brunson의 Expert Secrets — Mass Movement 설계, Attractive Character, Perfect Webinar 스크립트를 AI로 자동 생성합니다.",
    framework: "Expert Secrets",
    icon: "🔳",
    color: "from-purple-500 to-pink-500",
    envKey: "NEXT_PUBLIC_LS_PRODUCT_2_URL",
    highlights: [
      "Mass Movement 설계",
      "Epiphany Bridge 스토리텔링",
      "신념 체계 아키텍처",
      "Perfect Webinar 스크립트 생성기",
    ],
    whatsInside: [
      "20페이지 프리미엄 PDF 가이드",
      "AI Brand Architect 시스템 프롬프트",
      "신념 체계 빌더 프롬프트",
      "Perfect Webinar 스크립트 생성 프롬프트",
      "실전 사례 3개",
      "5일 퀵스타트 체크리스트",
    ],
  },
  {
    id: "traffic-architect",
    slug: "ai-traffic-architect",
    vol: 3,
    title: "AI Traffic Architect",
    titleKo: "AI 트래픽 설계자",
    subtitle: "Traffic Secrets + AI 자동화",
    tagline: "트래픽을 쫓지 마세요. 고객이 있는 곳으로 가는 시스템을 만드세요.",
    descriptionKo: "Russell Brunson의 Traffic Secrets — Dream Customer 아바타, Dream 100 전략, 플랫폼별 콘텐츠 전략을 AI로 자동화합니다.",
    framework: "Traffic Secrets",
    icon: "📝",
    color: "from-green-500 to-teal-500",
    envKey: "NEXT_PUBLIC_LS_PRODUCT_3_URL",
    highlights: [
      "Dream Customer 아바타 AI 생성",
      "Dream 100 전략 — 60일 로드맵",
      "플랫폼별 콘텐츠 (인스타, 유튜브, 구글)",
      "Follow-Up Funnel 자동화",
    ],
    whatsInside: [
      "20페이지 프리미엄 PDF 가이드",
      "AI Traffic Architect 시스템 프롬프트",
      "Dream 100 빌더 프롬프트",
      "플랫폼 전략 생성 프롬프트",
      "실전 사례 3개 (트래픽 성장 수치 포함)",
      "5일 퀵스타트 체크리스트",
    ],
  },
  {
    id: "story-architect",
    slug: "ai-story-architect",
    vol: 4,
    title: "AI Story Architect",
    titleKo: "AI 스토리 설계자",
    subtitle: "Copywriting Secrets + AI 자동화",
    tagline: "글 한 줄이 매출을 좌우합니다. AI가 매출을 올리는 글을 씁니다.",
    descriptionKo: "Jim Edwards의 31 Copywriting Secrets — 개인 스토리 발굴, Hero's Journey, 헤드라인 생성, 플랫폼별 카피를 AI로 자동화합니다.",
    framework: "Copywriting Secrets",
    icon: "🧠",
    color: "from-orange-500 to-red-500",
    envKey: "NEXT_PUBLIC_LS_PRODUCT_4_URL",
    highlights: [
      "Personal Story Mining — 5단계 프로세스",
      "Hero's Journey 스토리 공식",
      "헤드라인 무기고 — 3가지 공식 카테고리",
      "FRED 타겟팅 고전환 카피",
    ],
    whatsInside: [
      "20페이지 프리미엄 PDF 가이드",
      "AI Story Architect 시스템 프롬프트",
      "Personal Story Extractor 프롬프트",
      "헤드라인 생성기 프롬프트 (3가지 공식)",
      "실전 사례 3개 (전환율 수치 포함)",
      "5일 퀵스타트 체크리스트",
    ],
  },
  {
    id: "startup-architect",
    slug: "ai-startup-architect",
    vol: 5,
    title: "AI Startup Architect",
    titleKo: "AI 스타트업 설계자",
    subtitle: "Product Launch Formula + AI 자동화",
    tagline: "검증된 런칭 시퀀스로 출시하세요. 운이 아닌 시스템으로.",
    descriptionKo: "Jeff Walker의 Product Launch Formula — PLF 4단계, 9가지 심리 트리거, 7일 런칭 이메일 시리즈를 AI로 자동화합니다.",
    framework: "Product Launch Formula",
    icon: "⚙️",
    color: "from-cyan-500 to-blue-500",
    envKey: "NEXT_PUBLIC_LS_PRODUCT_5_URL",
    highlights: [
      "PLF 4단계 구조 자동화",
      "9가지 심리 트리거 AI 삽입",
      "7일 런칭 이메일 시퀀스",
      "3가지 런칭 유형 (Seed, Internal, JV)",
    ],
    whatsInside: [
      "20페이지 프리미엄 PDF 가이드",
      "AI Startup Architect 시스템 프롬프트",
      "Prelaunch Content 생성 프롬프트 (3단계 PLC)",
      "런칭 이메일 시퀀스 생성 프롬프트 (7일)",
      "실전 사례 3개 (매출 수치 포함)",
      "5일 퀵스타트 체크리스트",
    ],
  },
  {
    id: "content-architect",
    slug: "ai-content-architect",
    vol: 6,
    title: "AI Content Architect",
    titleKo: "AI 콘텐츠 설계자",
    subtitle: "Online Writing + AI 자동화",
    tagline: "더 많은 콘텐츠. 더 적은 시간. 잠자는 동안 성장하는 독자.",
    descriptionKo: "Nicolas Cole의 온라인 글쓰기 프레임워크 — 카테고리 디자인, 무한 아이디어 생성, 5개 플랫폼 콘텐츠 원자화를 AI로 자동화합니다.",
    framework: "The Art and Business of Online Writing",
    icon: "✏️",
    color: "from-violet-500 to-purple-500",
    envKey: "NEXT_PUBLIC_LS_PRODUCT_6_URL",
    highlights: [
      "카테고리 디자인 — 확실한 리더 되기",
      "무한 아이디어 매트릭스 — 1 주제에서 20개 아이디어",
      "콘텐츠 원자화 — 1 글 → 5 플랫폼",
      "수익화 파이프라인 — 무료 콘텐츠 → 유료 매출",
    ],
    whatsInside: [
      "20페이지 프리미엄 PDF 가이드",
      "AI Content Architect 시스템 프롬프트",
      "무한 아이디어 매트릭스 생성 프롬프트",
      "헤드라인 옵티마이저 프롬프트",
      "콘텐츠 원자화 프롬프트 (1글 → 5플랫폼)",
      "실전 사례 4개",
      "5일 퀵스타트 체크리스트",
    ],
  },
];

export const aiArchitectBundle = {
  title: "AI Architect Series — Complete Bundle",
  titleKo: "AI 설계자 시리즈 올인원 번들",
  priceUsd: 47,
  originalPriceUsd: 102,
  discountPercent: 54,
  bookCount: 6,
  envKey: "NEXT_PUBLIC_LS_BUNDLE_URL",
};

export function getBundleCheckoutUrl(): string {
  return process.env.NEXT_PUBLIC_LS_BUNDLE_URL ?? "#";
}

export function getProductCheckoutUrl(envKey: string): string {
  return (
    (process.env[envKey as keyof typeof process.env] as string | undefined) ??
    "#"
  );
}

Step 2: Commit

cd /Users/nbs22/\(Claude\)/\(claude\).projects/business-builder/projects/prompt-shop
git add src/lib/ai-architect-products.ts
git commit -m "feat(prompt-shop): add AI Architect product data module"

Task 2: Create Hero Section Component

Files:

Create: src/components/sections/ai-architect/hero.tsx

Step 1: Create the hero section

Follow the exact pattern of src/components/sections/ai-designer/hero.tsx but adapted for the AI Architect product.

"use client";

import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { FadeInUp } from "@/components/motion-wrapper";
import { ArrowDown, BookOpen, Globe, Zap } from "lucide-react";

export function AiArchitectHero() {
  return (
    <section className="relative flex min-h-[90vh] items-center justify-center overflow-hidden pt-14">
      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/20 via-transparent to-transparent" />
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute top-1/4 left-1/4 h-72 w-72 rounded-full bg-primary/10 blur-[100px]" />
        <div className="absolute bottom-1/4 right-1/4 h-72 w-72 rounded-full bg-primary/5 blur-[100px]" />
      </div>

      <div className="relative z-10 mx-auto max-w-4xl px-4 text-center">
        <FadeInUp>
          <Badge
            variant="secondary"
            className="mb-6 gap-1.5 px-4 py-1.5 text-sm"
          >
            <BookOpen className="h-3.5 w-3.5" />
            세계적 베스트셀러 6권의 핵심을 AI로
          </Badge>
        </FadeInUp>

        <FadeInUp delay={0.1}>
          <h1 className="mb-6 text-4xl font-extrabold leading-tight tracking-tight sm:text-5xl md:text-6xl">
            AI가 대신 설계하는
            <br />
            <span className="bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
              마케팅 & 비즈니스 시스템
            </span>
          </h1>
        </FadeInUp>

        <FadeInUp delay={0.2}>
          <p className="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground sm:text-xl">
            DotCom Secrets, Expert Secrets, Traffic Secrets 등
            <br className="hidden sm:block" />
            <strong className="text-foreground">
              세계적 베스트셀러 6권
            </strong>
            의 프레임워크를
            <br className="hidden sm:block" />
            AI 프롬프트로 즉시 실행하세요.
          </p>
        </FadeInUp>

        <FadeInUp delay={0.3}>
          <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
            <Button
              size="xl"
              className="w-full bg-gradient-to-r from-primary to-primary/80 shadow-lg shadow-primary/25 transition-all duration-300 hover:scale-[1.03] hover:shadow-xl hover:shadow-primary/40 sm:w-auto"
              asChild
            >
              <a href="#bundle">올인원 번들 보기 — $47</a>
            </Button>
            <Button
              variant="outline"
              size="xl"
              className="w-full border-primary/30 transition-all duration-300 hover:border-primary/60 hover:bg-primary/5 sm:w-auto"
              asChild
            >
              <a href="#books">개별 도서 둘러보기</a>
            </Button>
          </div>
        </FadeInUp>

        <FadeInUp delay={0.5}>
          <div className="mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm text-muted-foreground">
            <span className="flex items-center gap-1.5">
              <BookOpen className="h-4 w-4 text-primary" />
              PDF 6권 + 프롬프트 세트
            </span>
            <span className="flex items-center gap-1.5">
              <Zap className="h-4 w-4 text-primary" />
              구매 즉시 다운로드
            </span>
            <span className="flex items-center gap-1.5">
              <Globe className="h-4 w-4 text-primary" />
              영문 원서 (글로벌 프레임워크)
            </span>
          </div>
        </FadeInUp>

        <FadeInUp delay={0.6}>
          <a
            href="#overview"
            className="mt-12 inline-flex animate-bounce items-center text-muted-foreground/50 transition-colors hover:text-muted-foreground"
          >
            <ArrowDown className="h-5 w-5" />
          </a>
        </FadeInUp>
      </div>
    </section>
  );
}

Step 2: Commit

cd /Users/nbs22/\(Claude\)/\(claude\).projects/business-builder/projects/prompt-shop
git add src/components/sections/ai-architect/hero.tsx
git commit -m "feat(prompt-shop): add AI Architect hero section"

Task 3: Create Overview Section Component

Files:

Create: src/components/sections/ai-architect/overview.tsx

Step 1: Create the overview section

Explains what the AI Architect series is — similar to the "what-is" section in ai-designer.

"use client";

import { FadeInUp } from "@/components/motion-wrapper";
import { Brain, BookOpen, Lightbulb, Rocket } from "lucide-react";

const features = [
  {
    icon: BookOpen,
    title: "세계적 베스트셀러 기반",
    description:
      "Russell Brunson, Jim Edwards, Jeff Walker, Nicolas Cole — 검증된 프레임워크를 AI가 자동 실행합니다.",
  },
  {
    icon: Brain,
    title: "AI 시스템 프롬프트",
    description:
      "각 도서의 핵심 전략을 AI에게 가르치는 시스템 프롬프트. 비즈니스 정보만 입력하면 맞춤 결과를 생성합니다.",
  },
  {
    icon: Lightbulb,
    title: "20p 프리미엄 PDF 가이드",
    description:
      "프레임워크 설명 + 실전 사례 + 프롬프트 사용법을 담은 가이드. 이론과 실행을 한 번에.",
  },
  {
    icon: Rocket,
    title: "5일 퀵스타트",
    description:
      "매일 1시간씩 5일이면 전체 시스템 구축 완료. 체크리스트로 진행 상황을 추적하세요.",
  },
];

export function OverviewSection() {
  return (
    <section id="overview" className="py-20 sm:py-28">
      <div className="mx-auto max-w-5xl px-4">
        <FadeInUp>
          <div className="mb-14 text-center">
            <p className="mb-3 text-sm font-semibold tracking-wide text-primary">
              OVERVIEW
            </p>
            <h2 className="mb-4 text-3xl font-bold sm:text-4xl">
              AI Architect Series란?
            </h2>
            <p className="mx-auto max-w-2xl text-muted-foreground">
              세계적 마케팅/비즈니스 베스트셀러 6권의 핵심 프레임워크를
              <br className="hidden sm:block" />
              <strong className="text-foreground">
                AI 프롬프트로 즉시 실행
              </strong>
              할 수 있도록 설계한 시리즈입니다.
            </p>
          </div>
        </FadeInUp>

        <div className="grid gap-6 sm:grid-cols-2">
          {features.map((feature, i) => (
            <FadeInUp key={feature.title} delay={i * 0.1}>
              <div className="rounded-xl border border-border/50 bg-card p-6 transition-all hover:border-primary/30 hover:shadow-md">
                <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                  <feature.icon className="h-5 w-5 text-primary" />
                </div>
                <h3 className="mb-2 text-lg font-bold">{feature.title}</h3>
                <p className="text-sm leading-relaxed text-muted-foreground">
                  {feature.description}
                </p>
              </div>
            </FadeInUp>
          ))}
        </div>
      </div>
    </section>
  );
}

Step 2: Commit

cd /Users/nbs22/\(Claude\)/\(claude\).projects/business-builder/projects/prompt-shop
git add src/components/sections/ai-architect/overview.tsx
git commit -m "feat(prompt-shop): add AI Architect overview section"

Task 4: Create Books Grid Section Component

Files:

Create: src/components/sections/ai-architect/books.tsx

Step 1: Create the books grid section

Displays all 6 books as cards with individual purchase buttons, plus the bundle CTA. Uses Lemon Squeezy env vars for checkout URLs.

import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { FadeInUp, ScaleIn } from "@/components/motion-wrapper";
import { Check, ShoppingCart, ArrowRight, Crown, Sparkles } from "lucide-react";
import {
  aiArchitectBooks,
  aiArchitectBundle,
  getBundleCheckoutUrl,
  getProductCheckoutUrl,
} from "@/lib/ai-architect-products";

export function BooksSection() {
  const bundleUrl = getBundleCheckoutUrl();

  return (
    <section id="books" className="py-20 sm:py-28">
      <div className="mx-auto max-w-6xl px-4">
        <FadeInUp>
          <div className="mb-14 text-center">
            <p className="mb-3 text-sm font-semibold tracking-wide text-primary">
              THE SERIES
            </p>
            <h2 className="mb-4 text-3xl font-bold sm:text-4xl">
              6권의 AI Architect 시리즈
            </h2>
            <p className="text-muted-foreground">
              각 도서를 개별 구매하거나, 올인원 번들로 54% 할인 받으세요
            </p>
          </div>
        </FadeInUp>

        <div className="mb-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {aiArchitectBooks.map((book, i) => {
            const productUrl = getProductCheckoutUrl(book.envKey);
            return (
              <FadeInUp key={book.id} delay={i * 0.08}>
                <Card className="relative flex h-full flex-col overflow-hidden transition-all hover:border-primary/30 hover:shadow-xl">
                  <CardHeader>
                    <div className="mb-3 flex items-center gap-3">
                      <div
                        className={`flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br ${book.color} text-2xl`}
                      >
                        {book.icon}
                      </div>
                      <div>
                        <Badge variant="secondary" className="mb-1 text-xs">
                          Vol. {book.vol}
                        </Badge>
                        <h3 className="text-base font-bold leading-tight">
                          {book.title}
                        </h3>
                      </div>
                    </div>
                    <p className="text-xs font-medium text-primary">
                      {book.subtitle}
                    </p>
                    <p className="mt-1 text-sm text-muted-foreground">
                      {book.tagline}
                    </p>
                  </CardHeader>
                  <CardContent className="flex flex-1 flex-col">
                    <div className="mb-4 flex-1">
                      <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                        포함 내용
                      </p>
                      <ul className="space-y-1.5">
                        {book.highlights.map((h) => (
                          <li key={h} className="flex gap-2 text-xs">
                            <Check className="mt-0.5 h-3.5 w-3.5 shrink-0 text-primary" />
                            <span>{h}</span>
                          </li>
                        ))}
                      </ul>
                    </div>

                    <div className="mt-auto">
                      <div className="mb-3 flex items-baseline gap-1">
                        <span className="text-2xl font-extrabold">$17</span>
                        <span className="text-sm text-muted-foreground">
                          USD
                        </span>
                      </div>
                      <Button
                        className="w-full border-primary/30 transition-all duration-300 hover:scale-[1.02] hover:border-primary/60 hover:bg-primary/5"
                        size="lg"
                        variant="outline"
                        asChild
                      >
                        <a
                          href={productUrl}
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          <ShoppingCart className="mr-1.5 h-4 w-4" />
                          개별 구매하기
                        </a>
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              </FadeInUp>
            );
          })}
        </div>

        {/* Bundle CTA */}
        <ScaleIn delay={0.2}>
          <div
            id="bundle"
            className="rounded-2xl border-2 border-primary/50 bg-card p-8 shadow-2xl shadow-primary/10 sm:p-10"
          >
            <div className="mb-8 flex flex-col items-center gap-6 text-center sm:flex-row sm:justify-between sm:text-left">
              <div>
                <Badge className="mb-3 gap-1.5 bg-primary/20 px-4 py-1.5 text-primary hover:bg-primary/20">
                  <Crown className="h-3.5 w-3.5" />
                  BEST VALUE
                </Badge>
                <div className="flex items-center justify-center gap-2 sm:justify-start">
                  <Sparkles className="h-6 w-6 text-primary" />
                  <h3 className="text-2xl font-bold">
                    {aiArchitectBundle.titleKo}
                  </h3>
                </div>
                <p className="mt-1 text-muted-foreground">
                  6권 전체 + 보너스 프롬프트 | PDF + 시스템 프롬프트 세트
                </p>
              </div>
              <div className="sm:text-right">
                <div className="flex items-baseline justify-center gap-2 sm:justify-end">
                  <span className="text-lg text-muted-foreground line-through">
                    ${aiArchitectBundle.originalPriceUsd}
                  </span>
                  <Badge variant="destructive" className="text-xs">
                    {aiArchitectBundle.discountPercent}% OFF
                  </Badge>
                </div>
                <div className="flex items-baseline justify-center gap-1 sm:justify-end">
                  <span className="text-4xl font-extrabold text-primary sm:text-5xl">
                    ${aiArchitectBundle.priceUsd}
                  </span>
                  <span className="text-sm text-muted-foreground">USD</span>
                </div>
              </div>
            </div>

            <div className="mb-8 grid gap-2 sm:grid-cols-2">
              {[
                "PDF 가이드 6권 (총 120페이지)",
                "AI 시스템 프롬프트 6종",
                "프레임워크별 프롬프트 템플릿",
                "실전 사례 20+ (매출 수치 포함)",
                "5일 퀵스타트 체크리스트 6종",
                "7일 환불 보장",
              ].map((item) => (
                <div key={item} className="flex items-center gap-2">
                  <Check className="h-4 w-4 shrink-0 text-primary" />
                  <span className="text-sm">{item}</span>
                </div>
              ))}
            </div>

            <div className="flex justify-center">
              <Button
                size="xl"
                className="bg-gradient-to-r from-primary to-primary/80 shadow-lg shadow-primary/25 transition-all duration-300 hover:scale-[1.02] hover:shadow-xl hover:shadow-primary/40 sm:px-10"
                asChild
              >
                <a
                  href={bundleUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  올인원 번들 구매하기
                  <ArrowRight className="ml-2 h-4 w-4" />
                </a>
              </Button>
            </div>
          </div>
        </ScaleIn>
      </div>
    </section>
  );
}

Step 2: Commit

cd /Users/nbs22/\(Claude\)/\(claude\).projects/business-builder/projects/prompt-shop
git add src/components/sections/ai-architect/books.tsx
git commit -m "feat(prompt-shop): add AI Architect books grid with bundle CTA"

Task 5: Create FAQ Section Component

Files:

Create: src/components/sections/ai-architect/faq.tsx

Step 1: Create the FAQ section

"use client";

import { FadeInUp } from "@/components/motion-wrapper";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

const faqs = [
  {
    q: "AI Architect 시리즈는 어떤 내용인가요?",
    a: "세계적 마케팅/비즈니스 베스트셀러 6권(DotCom Secrets, Expert Secrets, Traffic Secrets, Copywriting Secrets, Product Launch Formula, Online Writing)의 핵심 프레임워크를 AI 프롬프트로 자동 실행할 수 있도록 만든 PDF 가이드 + 프롬프트 세트입니다.",
  },
  {
    q: "영어로 되어 있나요?",
    a: "네, PDF 가이드와 프롬프트 모두 영어로 작성되어 있습니다. 원서의 프레임워크를 정확하게 구현하기 위해 영문으로 제작했습니다. ChatGPT/Claude에서 한국어로 결과를 받고 싶으면 프롬프트 끝에 '한국어로 답변해주세요'를 추가하면 됩니다.",
  },
  {
    q: "ChatGPT 무료 버전에서도 사용할 수 있나요?",
    a: "네, 모든 프롬프트는 ChatGPT 무료 버전(GPT-4o mini)에서도 동작합니다. Claude, Gemini 등 다른 AI 모델에서도 사용 가능합니다. 상위 모델일수록 더 정교한 결과를 얻을 수 있습니다.",
  },
  {
    q: "개별 도서와 번들의 차이는 무엇인가요?",
    a: "개별 도서는 1권당 $17이며, 번들은 6권 전체를 $47에 제공합니다 (정가 $102 대비 54% 할인). 번들에는 보너스 프롬프트 세트가 추가로 포함됩니다.",
  },
  {
    q: "구매 후 어떻게 받나요?",
    a: "결제 완료 즉시 다운로드 링크가 이메일로 발송됩니다. PDF 파일과 프롬프트 텍스트 파일을 바로 다운로드하여 사용할 수 있습니다.",
  },
  {
    q: "환불 정책은 어떻게 되나요?",
    a: "구매 후 7일 이내 환불 가능합니다. 이유를 묻지 않습니다. Lemon Squeezy 고객센터를 통해 환불 요청하시면 됩니다.",
  },
];

export function AiArchitectFaq() {
  return (
    <section id="faq" className="py-20 sm:py-28">
      <div className="mx-auto max-w-3xl px-4">
        <FadeInUp>
          <div className="mb-14 text-center">
            <p className="mb-3 text-sm font-semibold tracking-wide text-primary">
              FAQ
            </p>
            <h2 className="mb-4 text-3xl font-bold sm:text-4xl">
              자주 묻는 질문
            </h2>
          </div>
        </FadeInUp>

        <FadeInUp delay={0.1}>
          <Accordion type="single" collapsible className="space-y-3">
            {faqs.map((faq, i) => (
              <AccordionItem
                key={i}
                value={`faq-${i}`}
                className="rounded-lg border border-border/50 bg-card px-5"
              >
                <AccordionTrigger className="text-left text-sm font-semibold hover:no-underline">
                  {faq.q}
                </AccordionTrigger>
                <AccordionContent className="text-sm leading-relaxed text-muted-foreground">
                  {faq.a}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </FadeInUp>
      </div>
    </section>
  );
}

Step 2: Commit

cd /Users/nbs22/\(Claude\)/\(claude\).projects/business-builder/projects/prompt-shop
git add src/components/sections/ai-architect/faq.tsx
git commit -m "feat(prompt-shop): add AI Architect FAQ section"

Task 6: Create CTA Section Component

Files:

Create: src/components/sections/ai-architect/cta.tsx

Step 1: Create the CTA section

import { Button } from "@/components/ui/button";
import { FadeInUp } from "@/components/motion-wrapper";
import { ArrowRight, BookOpen } from "lucide-react";
import { getBundleCheckoutUrl } from "@/lib/ai-architect-products";

export function AiArchitectCta() {
  const bundleUrl = getBundleCheckoutUrl();

  return (
    <section className="relative overflow-hidden py-20 sm:py-28">
      <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-primary/10 via-transparent to-transparent" />
      <div className="pointer-events-none absolute bottom-0 left-1/2 h-[400px] w-[400px] -translate-x-1/2 rounded-full bg-primary/10 blur-[100px]" />

      <div className="relative z-10 mx-auto max-w-3xl px-4 text-center">
        <FadeInUp>
          <BookOpen className="mx-auto mb-6 h-10 w-10 text-primary" />
        </FadeInUp>

        <FadeInUp delay={0.1}>
          <h2 className="mb-4 text-3xl font-bold sm:text-4xl">
            세계 최고의 프레임워크를
            <br />
            AI로 즉시 실행하세요
          </h2>
        </FadeInUp>

        <FadeInUp delay={0.2}>
          <p className="mb-8 text-lg text-muted-foreground">
            6권의 베스트셀러 핵심을 AI 프롬프트로 압축.
            <br className="hidden sm:block" />
            올인원 번들이면 1권당{" "}
            <strong className="text-foreground">$8도 안 됩니다.</strong>
          </p>
        </FadeInUp>

        <FadeInUp delay={0.3}>
          <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
            <Button
              size="xl"
              className="w-full bg-gradient-to-r from-primary to-primary/80 shadow-lg shadow-primary/25 transition-all duration-300 hover:scale-[1.03] hover:shadow-xl hover:shadow-primary/40 sm:w-auto sm:px-10"
              asChild
            >
              <a
                href={bundleUrl}
                target="_blank"
                rel="noopener noreferrer"
              >
                올인원 번들 구매 — $47
                <ArrowRight className="ml-2 h-4 w-4" />
              </a>
            </Button>
            <Button
              variant="outline"
              size="xl"
              className="w-full border-primary/30 transition-all duration-300 hover:border-primary/60 hover:bg-primary/5 sm:w-auto"
              asChild
            >
              <a href="#books">개별 도서 보기</a>
            </Button>
          </div>
        </FadeInUp>

        <FadeInUp delay={0.4}>
          <p className="mt-6 text-sm text-muted-foreground">
            구매 즉시 다운로드 | 7일 환불 보장 | Claude, ChatGPT, Gemini 모두 호환
          </p>
        </FadeInUp>
      </div>
    </section>
  );
}

Step 2: Commit

cd /Users/nbs22/\(Claude\)/\(claude\).projects/business-builder/projects/prompt-shop
git add src/components/sections/ai-architect/cta.tsx
git commit -m "feat(prompt-shop): add AI Architect CTA section"

Task 7: Create the Page Route and Add Navigation

Files:

Create: src/app/ai-architect/page.tsx
Modify: src/components/header.tsx:19-24 (add navigation link)

Step 1: Create the page route

import type { Metadata } from "next";
import { Header } from "@/components/header";
import { Footer } from "@/components/footer";
import { AiArchitectHero } from "@/components/sections/ai-architect/hero";
import { OverviewSection } from "@/components/sections/ai-architect/overview";
import { BooksSection } from "@/components/sections/ai-architect/books";
import { AiArchitectFaq } from "@/components/sections/ai-architect/faq";
import { AiArchitectCta } from "@/components/sections/ai-architect/cta";

export const metadata: Metadata = {
  title: "AI Architect Series | 베스트셀러 6권의 프레임워크를 AI 프롬프트로",
  description:
    "DotCom Secrets, Expert Secrets, Traffic Secrets 등 세계적 베스트셀러 6권의 핵심 마케팅 프레임워크를 AI 프롬프트로 즉시 실행. 올인원 번들 $47.",
  openGraph: {
    title: "AI Architect Series | 마케팅 베스트셀러 6권 × AI 프롬프트",
    description:
      "세계적 마케팅 프레임워크를 AI로 자동 실행. PDF 가이드 6권 + 시스템 프롬프트 세트.",
    type: "website",
    locale: "ko_KR",
    url: "https://prompt-shop-gules.vercel.app/ai-architect",
  },
  alternates: {
    canonical: "https://prompt-shop-gules.vercel.app/ai-architect",
  },
};

export default function AiArchitectPage() {
  return (
    <>
      <Header />
      <main>
        <AiArchitectHero />
        <OverviewSection />
        <BooksSection />
        <AiArchitectFaq />
        <AiArchitectCta />
      </main>
      <Footer />
    </>
  );
}

Step 2: Add navigation link in header

In src/components/header.tsx, find the nav links section and add the AI Architect link.

Find this code block (around line 19-24):

          <Link
            href="/ai-designer"
            className="hidden text-sm text-muted-foreground transition-colors hover:text-foreground sm:inline"
          >
            AI 설계자
          </Link>

Add below it (before the <a href="#products"> element):

          <Link
            href="/ai-architect"
            className="hidden text-sm text-muted-foreground transition-colors hover:text-foreground sm:inline"
          >
            AI Architect
          </Link>

Step 3: Commit

cd /Users/nbs22/\(Claude\)/\(claude\).projects/business-builder/projects/prompt-shop
git add src/app/ai-architect/page.tsx src/components/header.tsx
git commit -m "feat(prompt-shop): add AI Architect page route and nav link"

Task 8: Add Environment Variables and Build Verification

Files:

Create: src/app/ai-architect/.env.example (NO — just document, don't create)
Modify: existing .env.example in project root if it exists

Step 1: Document required env vars

The following env vars must be set in Vercel for the Lemon Squeezy checkout links to work:

NEXT_PUBLIC_LS_BUNDLE_URL=https://your-store.lemonsqueezy.com/checkout/buy/bundle-id
NEXT_PUBLIC_LS_PRODUCT_1_URL=https://your-store.lemonsqueezy.com/checkout/buy/product-1-id
NEXT_PUBLIC_LS_PRODUCT_2_URL=https://your-store.lemonsqueezy.com/checkout/buy/product-2-id
NEXT_PUBLIC_LS_PRODUCT_3_URL=https://your-store.lemonsqueezy.com/checkout/buy/product-3-id
NEXT_PUBLIC_LS_PRODUCT_4_URL=https://your-store.lemonsqueezy.com/checkout/buy/product-4-id
NEXT_PUBLIC_LS_PRODUCT_5_URL=https://your-store.lemonsqueezy.com/checkout/buy/product-5-id
NEXT_PUBLIC_LS_PRODUCT_6_URL=https://your-store.lemonsqueezy.com/checkout/buy/product-6-id

Without these env vars, all purchase buttons will link to # and appear disabled/non-functional.

Step 2: Run the build to verify no errors

cd /Users/nbs22/\(Claude\)/\(claude\).projects/business-builder/projects/prompt-shop
npm run build

Expected: Build succeeds with no TypeScript errors. The /ai-architect route should appear in the build output.

Step 3: Run dev server and verify

cd /Users/nbs22/\(Claude\)/\(claude\).projects/business-builder/projects/prompt-shop
npm run dev

Manually verify: Open http://localhost:3000/ai-architect and check:

Page loads without errors
Hero section displays correctly
Overview section with 4 feature cards
6 book cards with individual buy buttons
Bundle CTA with pricing
FAQ accordion works
Bottom CTA section
Header nav includes "AI Architect" link
Dark mode toggle works

Step 4: Final commit (if .env.example updated)

cd /Users/nbs22/\(Claude\)/\(claude\).projects/business-builder/projects/prompt-shop
git add .env.example
git commit -m "docs(prompt-shop): add Lemon Squeezy env vars to .env.example"

CEO Blocking Items

The following require CEO action before the purchase flow works:

#	Item	Detail
1	Lemon Squeezy Product URLs (7)	`NEXT_PUBLIC_LS_BUNDLE_URL` + `NEXT_PUBLIC_LS_PRODUCT_1_URL` through `NEXT_PUBLIC_LS_PRODUCT_6_URL` must be set in Vercel env vars for `prompt-shop` project

These are the same env vars already blocked for ai-architect-global. Once CEO provides them, they work for both projects.

Without these env vars, the page is fully functional as a showcase/landing page — all content displays correctly, purchase buttons just link to #.

Summary

Task	Files	Description
1	`src/lib/ai-architect-products.ts`	Product data module (6 books + bundle + URL helpers)
2	`src/components/sections/ai-architect/hero.tsx`	Hero section with main CTA
3	`src/components/sections/ai-architect/overview.tsx`	What is AI Architect Series
4	`src/components/sections/ai-architect/books.tsx`	6-book grid + bundle CTA with LS links
5	`src/components/sections/ai-architect/faq.tsx`	FAQ accordion (6 items)
6	`src/components/sections/ai-architect/cta.tsx`	Bottom CTA with bundle purchase
7	`src/app/ai-architect/page.tsx` + `header.tsx`	Page route + navigation
8	Build verification	Verify build + manual check

Total new files: 7 (1 data module + 5 section components + 1 page route) Modified files: 1 (header.tsx — add nav link) Estimated implementation time: 8 tasks, ~30 minutes execution