Landing Page Optimization

Workspace Context

Read bootstrap context before asking questions: strategy/brand.md for brand, audience, offer, channels, tools, constraints, and metrics; about/me.md for personal voice; content/ideas.md and content/calendar.md for content planning. Use legacy product-marketing context files only as fallback. Save generated drafts to content/<platform>/drafts/YYYY-MM-DD_short-topic-slug.md, and route durable learnings back to strategy/brand.md, about/me.md, or content/ideas.md.

Operating Contract

This skill is self-contained for its frontmatter scope: use its local instructions, references, scripts, and assets as the playbook; ask only for missing task-specific inputs; hand off to adjacent skills instead of expanding scope; and return an actionable artifact, decision, plan, draft, or diagnostic.

Build, write, and optimize high-converting landing pages combining proven copy frameworks, the 11-essential-elements structure, and a clear creation workflow.

---

1. Copy Framework

Gather Before Writing

Collect these inputs before drafting any copy:

• Product/service name and core value proposition
• Target audience and their primary pain point
• Key differentiator vs alternatives
• Desired visitor action (CTA goal)
• Available social proof (testimonials, stats, logos)

Choose a Framework

Section Copy Guide

Hero — Value prop in ≤10 words; subheadline adds specificity; CTA + 1 trust signal above fold.

Headline formulas:

• [Achieve outcome] without [pain point]
• The [adjective] way to [desired result]
• Stop [bad thing]. Start [good thing].

Problem — Name the pain in the audience's language; 2–3 specific scenarios; emotional, not clinical.

Solution — How the product solves it; 3–5 features written as benefits ("saves 2 hrs/day" not "automated scheduling").

How It Works — 3–4 steps, each with a clear action verb; close with CTA.

Social Proof — Testimonial template: "[Specific result]..." — Name, Title, Company. Aim for 4–6 testimonials; include stats and logos if available.

Pricing — Highlight recommended plan; include guarantee copy; one CTA per plan card.

FAQ — 5–10 objection-handling questions; cover pricing, refunds, technical requirements, comparison to alternatives.

Final CTA — Repeat the primary CTA; add urgency or risk-reversal ("Cancel anytime", "30-day guarantee"); larger and more dramatic than hero CTA.

CTA Copy Rules

• Start with an action verb
• Be specific: "Start My Free Trial" > "Submit"
• First-person phrasing often converts better ("Get My Guide")
• Avoid: "Click Here", "Learn More", "Submit"

Copy Best Practices

• Active voice, present tense; benefits before features
• Specific numbers over vague claims ("saves 2 hours" not "saves time")
• Short sentences; scannable with headers and bullets
• Address objections before the reader voices them
• Multiple CTAs (same action) throughout — not multiple competing actions

---

2. Design Principles (11 Essential Elements)

Every landing page needs all 11 elements. See references/11-essential-elements.md for full detail on each.

Aesthetic Direction

Pick ONE direction and execute it consistently:

Avoid: purple gradients on white (overused AI aesthetic), perfectly symmetric layouts on every section, stock photos of people pointing at laptops, default yellow stars.

Tech Stack (when building)

Next.js 14+ · TypeScript · Tailwind CSS · ShadCN UI

Build order: Design system → SEO metadata → Header → Hero (with animations) → Media → Benefits → Testimonials → FAQ → Final CTA → Footer.

See references/component-examples.md for production-ready ShadCN component implementations.

---

3. Creation Workflow

Follow this sequence for any landing page project:

Step 1 — Define the Goal

• Single conversion action (one CTA target)
• Audience segment this page serves
• Traffic source (ad, email, organic) — shapes tone and assumed context

Step 2 — Structure First Use the full 11-element structure. Resist shortcutting: pages missing Social Proof or FAQ consistently underperform.

Step 3 — Write Copy Apply the Copy Framework (§1). Write hero copy first — if the value prop isn't clear in 10 words, clarify the offer before continuing.

Step 4 — Design Choose aesthetic direction, define design system (fonts, colors, motion), then build section by section.

Step 5 — Optimize

• Above the fold: value prop + CTA + one trust signal visible without scrolling
• Multiple CTAs with identical action (not competing goals)
• Minimal form fields; reduce every friction point
• Mobile-first; test on real devices
• Performance: LCP <2.5s, CLS <0.1, no layout shifts

Step 6 — Launch Checklist

• Headline is benefit-focused, specific, ≤10 words
• Single primary CTA throughout
• Social proof present and specific
• Mobile responsive
• Page loads <3s
• Trust signals visible above fold
• FAQ covers top 5 objections
• Analytics tracking configured

---

References

• references/11-essential-elements.md — Detailed breakdown of each element with implementation guidance and good/bad examples
• references/component-examples.md — Production-ready ShadCN UI components for Hero, Benefits, Testimonials, FAQ, Final CTA, and Footer sections

---

Supporting file: references/11-essential-elements.md

11 Essential Landing Page Elements

Based on DESIGNNAS guidelines. This reference provides detailed explanations of each essential element.

1. URL with Keywords (주요 키워드가 포함된 URL)

Principle: URLs should contain relevant keywords related to the product or service.

Implementation:

• Helps with SEO optimization
• Users can understand page content just from the URL
• Shorter and more memorable URLs are better

Good Examples:

• www.example.com/eco-friendly-water-bottles
• www.example.com/premium-coffee-subscription

Bad Examples:

• www.example.com/page123
• www.example.com/prod?id=4567

---

2. Company Logo (회사 로고)

Principle: Logo should be placed in a prominent position, typically top-left of the page.

Implementation:

• Allows users to immediately recognize the brand
• Important visual element
• Clear and familiar logo builds trust from the first moment

Placement Recommendations:

• Top-left of page header
• Link to homepage on click
• Ensure sufficient whitespace

---

3. SEO-Optimized Title and Subtitle (SEO 최적화된 제목과 부제목)

Principle: Title and subtitle should naturally include keywords for SEO optimization.

Implementation:

• Must be clear and compelling, answering "What benefits does this page offer me?"
• Strong titles make visitors stay longer on the page

Writing Tips:

• Include main keywords in H1 tag
• Concise and clear message
• Present user's problem and solution
• Specify concrete benefits

Good Examples:

• "The Easiest Way to Save the Planet with Eco-Friendly Tumblers"
• "Double Your English Conversation Skills in 30 Days Program"

---

4. Primary CTA (Call-to-Action) (주요 행동 유도 문구)

Principle: Primary CTA is the most important call-to-action, usually placed right below the title.

Implementation:

• Delivers prominent and direct messages like "Get Started" or "Sign Up Free"
• Plays key role in guiding customer journey

Design Principles:

• Make it stand out with contrasting colors
• Sufficiently large button size
• Clear action-oriented copy
• Ensure sufficient surrounding whitespace

Good CTA Examples:

• "Start for Free"
• "Try It Now"
• "Get Limited Discount"
• "Request Demo"

---

5. Social Proof (사회적 증거)

Principle: Social proof can include reviews, certifications, or number of users.

Implementation:

• Increases credibility and reduces hesitation when customers make decisions
• Users tend to trust other people's opinions and experiences

Elements to Include:

• Customer reviews and ratings (stars)
• User count statistics
• Logos of famous companies/institutions
• Awards and certifications
• Press coverage

Effective Display Methods:

• Real user names and photos
• Present specific numbers
• Cite trustworthy sources

---

6. Images or Videos (이미지 또는 영상)

Principle: Images or videos help clearly demonstrate product value and functionality.

Implementation:

• Visual content helps users consume information faster and more engagingly
• One short video can replace multiple paragraphs of text

Content Types:

• Product demonstration videos
• Product usage images
• Infographics
• High-quality professional photos

Precautions:

• Use high-resolution images
• Optimize for fast loading
• Include alt text
• Size well for mobile viewing

---

7. Core Benefits / Features (핵심 혜택 / 기능)

Principle: This section should clearly present the main benefits and core features the product offers.

Implementation:

• Users are more interested in value they can get than technical details
• Good to emphasize benefits before explaining features

Writing Method:

• Select 3-6 core benefits/features
• Add icons to each item
• Concise title and description
• Use user-centric language

Structure Example:

[Icon] Time Saving
Automate complex tasks and save 2 hours per day

[Icon] Cost Reduction
Reduce operating costs by 30% on average per month

[Icon] Easy to Use
Intuitive interface you can start in 5 minutes

---

8. Customer Testimonials (고객 후기)

Principle: Real customer testimonials are the most powerful evidence for building trust.

Implementation:

• Users can be confident that the product truly provides value
• Presenting customer photos and names together increases credibility

Effective Testimonial Section:

• Place 4-6 customer testimonials
• Elements to include in each testimonial:
  • Customer name
  • Job title/company (if applicable)
  • Profile photo
  • Star rating or evaluation
  • Specific and authentic review content

Testimonial Selection Criteria:

• Mention specific results or benefits
• Cover diverse use cases
• Authentic expression
• Appropriate length (not too short or long)

---

9. FAQ Section (자주 묻는 질문)

Principle: FAQ section resolves customers' common questions.

Implementation:

• Customers can get answers quickly, saving time for both business and customers
• FAQs are effective in reducing pre-purchase barriers

FAQ Writing Guide:

• Select 5-10 core questions
• Recommend accordion format where answers expand on click
• Concise and clear answers
• Provide links if additional information needed

Question Types to Include:

• Basic product/service information
• Pricing and payment methods
• Refund policy
• Technical requirements
• Customer support methods

Example Questions:

• "How long is the free trial period?"
• "Can I use it without a contract period?"
• "What are the differences from other platforms?"

---

10. Final CTA (최종 행동 유도 문구)

Principle: Final CTA is usually placed at the bottom of the page, serving as a final reminder for customers to take action.

Implementation:

• Provides second chance for visitors who didn't click first CTA
• Must contain clear and strong message

Placement Strategy:

• Bottom of page, after FAQ
• Distinguish with prominent background color or section
• Same or similar message as primary CTA

Effective Final CTA:

• Add urgency: "Start Now", "Special Offer Today Only"
• Remove risk: "Free Trial", "Cancel Anytime"
• Clear button design
• Ensure sufficient surrounding whitespace

---

11. Contact Information / Legal Pages (연락처 정보 / 법적 페이지)

Principle: Contact information and legal pages like privacy policy and terms of service are essential for building company credibility.

Implementation:

• Users feel more secure when they can easily contact when needed
• Necessary element for professional websites

Information to Include in Footer:

• Company address
• Email address
• Phone number
• Social media links
• Privacy policy link
• Terms of service link
• Cookie policy (if applicable)

Essential Elements for Legal Pages:

• Clear and understandable language
• Keep information up to date
• Easily accessible location
• Comply with GDPR, CCPA and other regulations

---

Supporting file: references/component-examples.md

Landing Page Component Examples

This reference provides complete, production-ready component implementations using ShadCN UI.

Hero Section (Elements 1-5)

// components/Hero.tsx
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import Image from 'next/image'
import { ArrowRight, Play } from 'lucide-react'

export default function Hero() {
  return (
    <section className="relative min-h-screen flex items-center justify-center bg-gradient-to-b from-blue-50 to-white overflow-hidden">
      {/* Background decorations */}
      <div className="absolute inset-0 -z-10">
        <div className="absolute top-20 left-10 w-72 h-72 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob" />
        <div className="absolute top-40 right-10 w-72 h-72 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000" />
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Left Content */}
          <div className="space-y-8">
            {/* Badge for announcement */}
            <Badge variant="secondary" className="w-fit">
              🎉 신규 기능 출시 - AI 자동화 업데이트
            </Badge>

            {/* Element 3: SEO Optimized Title */}
            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
              팀 협업을{' '}
              <span className="text-blue-600 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                10배 빠르게
              </span>
              <br />
              만드는 프로젝트 관리 도구
            </h1>

            {/* Subtitle */}
            <p className="text-lg sm:text-xl text-gray-600 leading-relaxed max-w-2xl">
              복잡한 프로젝트도 간단하게, 모든 팀원이 하나로 연결되는 워크스페이스
            </p>

            {/* Element 4: Primary CTA with ShadCN Button */}
            <div className="flex flex-col sm:flex-row gap-4">
              <Button size="lg" className="text-lg px-8 py-6 shadow-lg hover:shadow-xl transition-all">
                무료로 시작하기
                <ArrowRight className="ml-2 h-5 w-5" />
              </Button>
              <Button size="lg" variant="outline" className="text-lg px-8 py-6">
                <Play className="mr-2 h-5 w-5" />
                데모 보기
              </Button>
            </div>

            {/* Element 5: Social Proof */}
            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-6 pt-4">
              <div className="flex items-center gap-2">
                <div className="flex">
                  {[...Array(5)].map((_, i) => (
                    <svg
                      key={i}
                      className="w-5 h-5 text-yellow-400 fill-current"
                      viewBox="0 0 20 20"
                    >
                      <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
                    </svg>
                  ))}
                </div>
                <span className="text-sm font-medium text-gray-600">5.0 (2,341 리뷰)</span>
              </div>
              <div className="h-4 w-px bg-gray-300 hidden sm:block" />
              <div className="text-gray-600">
                <span className="font-bold text-gray-900">5,000+</span> 개 팀이 사용 중
              </div>
            </div>

            {/* Trusted by logos */}
            <div className="pt-8 border-t">
              <p className="text-sm text-gray-500 mb-4">신뢰하는 기업들</p>
              <div className="flex flex-wrap gap-8 items-center opacity-60 grayscale hover:grayscale-0 transition-all">
                {/* Company logos */}
              </div>
            </div>
          </div>

          {/* Right Content - Element 6: Image/Video */}
          <div className="relative">
            <div className="relative rounded-2xl overflow-hidden shadow-2xl ring-1 ring-gray-900/10">
              <Image
                src="/images/dashboard-preview.jpg"
                alt="프로젝트 관리 대시보드 미리보기"
                width={1200}
                height={800}
                priority
                className="w-full h-auto"
              />
              {/* Play button overlay */}
              <Button
                size="lg"
                className="absolute inset-0 m-auto w-fit h-fit rounded-full p-6"
                variant="secondary"
              >
                <Play className="h-8 w-8 fill-current" />
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

Benefits Section (Element 7)

// components/Benefits.tsx
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
import { Clock, DollarSign, Zap, Shield, Users, Rocket } from 'lucide-react'

const benefits = [
  {
    icon: Clock,
    title: '시간 절약',
    description: '복잡한 작업을 자동화하여 하루 2시간을 절약하세요',
    color: 'text-blue-600',
    bgColor: 'bg-blue-50',
  },
  {
    icon: DollarSign,
    title: '비용 절감',
    description: '월 평균 30% 운영 비용을 줄일 수 있습니다',
    color: 'text-green-600',
    bgColor: 'bg-green-50',
  },
  {
    icon: Zap,
    title: '간편한 사용',
    description: '설치 5분, 바로 시작할 수 있는 직관적인 인터페이스',
    color: 'text-yellow-600',
    bgColor: 'bg-yellow-50',
  },
  {
    icon: Shield,
    title: '안전한 보안',
    description: '엔터프라이즈급 보안으로 데이터를 안전하게 보호합니다',
    color: 'text-purple-600',
    bgColor: 'bg-purple-50',
  },
  {
    icon: Users,
    title: '팀 협업',
    description: '실시간 협업으로 팀의 생산성을 극대화하세요',
    color: 'text-pink-600',
    bgColor: 'bg-pink-50',
  },
  {
    icon: Rocket,
    title: '빠른 성장',
    description: '확장 가능한 인프라로 비즈니스 성장을 지원합니다',
    color: 'text-orange-600',
    bgColor: 'bg-orange-50',
  },
]

export default function Benefits() {
  return (
    <section className="py-20 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
            왜 우리 제품을 선택해야 할까요?
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            업계 최고의 기능과 서비스로 여러분의 성공을 지원합니다
          </p>
        </div>
        
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {benefits.map((benefit, index) => (
            <Card key={index} className="hover:shadow-lg transition-all duration-300 border-none">
              <CardHeader>
                <div className={`w-12 h-12 rounded-lg ${benefit.bgColor} flex items-center justify-center mb-4`}>
                  <benefit.icon className={`w-6 h-6 ${benefit.color}`} />
                </div>
                <CardTitle className="text-xl">{benefit.title}</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-base">
                  {benefit.description}
                </CardDescription>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}

Testimonials Section (Element 8)

// components/Testimonials.tsx
import { Card, CardContent } from '@/components/ui/card'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Quote } from 'lucide-react'

const testimonials = [
  {
    name: '김민수',
    role: 'CEO',
    company: '테크스타트업',
    image: '/testimonials/person1.jpg',
    rating: 5,
    content: '이 제품을 사용한 후 업무 효율이 3배 향상되었습니다. 정말 놀라운 변화였어요!',
  },
  {
    name: '이지은',
    role: 'Product Manager',
    company: '글로벌IT',
    image: '/testimonials/person2.jpg',
    rating: 5,
    content: '팀 협업이 이렇게 쉬울 수 있다는 걸 처음 알았습니다. 강력 추천합니다!',
  },
  {
    name: '박준호',
    role: 'CTO',
    company: '핀테크코리아',
    image: '/testimonials/person3.jpg',
    rating: 5,
    content: '기술 지원팀의 빠른 대응과 안정적인 서비스에 매우 만족하고 있습니다.',
  },
]

export default function Testimonials() {
  return (
    <section className="py-20 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <Badge variant="secondary" className="mb-4">
            ⭐ 고객 후기
          </Badge>
          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
            고객들의 이야기
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            5,000개 이상의 팀이 우리 제품으로 성공하고 있습니다
          </p>
        </div>
        
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {testimonials.map((testimonial, index) => (
            <Card key={index} className="hover:shadow-lg transition-all duration-300">
              <CardContent className="pt-6">
                <Quote className="w-8 h-8 text-blue-600 mb-4 opacity-50" />
                
                {/* Rating */}
                <div className="flex mb-4">
                  {[...Array(testimonial.rating)].map((_, i) => (
                    <svg
                      key={i}
                      className="w-5 h-5 text-yellow-400 fill-current"
                      viewBox="0 0 20 20"
                    >
                      <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
                    </svg>
                  ))}
                </div>
                
                {/* Content */}
                <p className="text-gray-700 mb-6 leading-relaxed">
                  "{testimonial.content}"
                </p>
                
                {/* Author */}
                <div className="flex items-center gap-3 pt-4 border-t">
                  <Avatar>
                    <AvatarImage src={testimonial.image} alt={testimonial.name} />
                    <AvatarFallback>{testimonial.name.charAt(0)}</AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="font-semibold text-gray-900">{testimonial.name}</p>
                    <p className="text-sm text-gray-600">
                      {testimonial.role}, {testimonial.company}
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}

FAQ Section (Element 9)

// components/FAQ.tsx
'use client'
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion'
import { Badge } from '@/components/ui/badge'

const faqs = [
  {
    question: '무료 체험 기간은 얼마나 되나요?',
    answer: '14일간 무료로 모든 기능을 체험하실 수 있습니다. 신용카드 등록 없이 바로 시작하세요.',
  },
  {
    question: '계약 기간 없이 이용할 수 있나요?',
    answer: '네, 월 단위 구독으로 언제든지 취소가 가능합니다. 장기 계약 의무는 없습니다.',
  },
  {
    question: '다른 플랫폼과의 차이점은 무엇인가요?',
    answer: '직관적인 UI, 강력한 자동화 기능, 그리고 24/7 고객 지원이 우리의 강점입니다.',
  },
]

export default function FAQ() {
  return (
    <section className="py-20 bg-gray-50">
      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <Badge variant="secondary" className="mb-4">
            ❓ FAQ
          </Badge>
          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
            자주 묻는 질문
          </h2>
          <p className="text-lg text-gray-600">
            궁금하신 점이 있으시면 언제든지 문의해 주세요
          </p>
        </div>
        
        <Accordion type="single" collapsible className="w-full space-y-4">
          {faqs.map((faq, index) => (
            <AccordionItem 
              key={index} 
              value={`item-${index}`}
              className="bg-white rounded-lg border px-6"
            >
              <AccordionTrigger className="text-left hover:no-underline">
                <span className="font-semibold text-lg pr-4">{faq.question}</span>
              </AccordionTrigger>
              <AccordionContent className="text-gray-600 text-base leading-relaxed">
                {faq.answer}
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  )
}

Final CTA Section (Element 10)

// components/FinalCTA.tsx
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { ArrowRight, CheckCircle } from 'lucide-react'

export default function FinalCTA() {
  return (
    <section className="py-20 bg-gradient-to-br from-blue-600 to-purple-700 relative overflow-hidden">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <Card className="p-8 sm:p-12 text-center border-none shadow-2xl">
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
            지금 바로 시작하세요
          </h2>
          <p className="text-lg sm:text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
            14일 무료 체험으로 모든 기능을 경험해보세요
          </p>
          
          <div className="flex flex-col sm:flex-row justify-center items-center gap-4 sm:gap-8 mb-8 text-gray-700">
            <div className="flex items-center gap-2">
              <CheckCircle className="w-5 h-5 text-green-600" />
              <span>14일 무료 체험</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle className="w-5 h-5 text-green-600" />
              <span>신용카드 불필요</span>
            </div>
          </div>
          
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="text-lg px-8 py-6">
              무료로 시작하기
              <ArrowRight className="ml-2 h-5 w-5" />
            </Button>
          </div>
        </Card>
      </div>
    </section>
  )
}

Footer (Element 11)

// components/Footer.tsx
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import Link from 'next/link'

export default function Footer() {
  return (
    <footer className="bg-gray-900 text-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
          <div className="col-span-2 md:col-span-1">
            <h3 className="font-bold text-lg mb-4">회사 이름</h3>
            <div className="space-y-2 text-sm text-gray-400">
              <p>서울시 강남구 테헤란로 123</p>
              <p>support@example.com</p>
              <p>02-1234-5678</p>
            </div>
          </div>
          
          <div>
            <h3 className="font-bold text-lg mb-4">법적 고지</h3>
            <ul className="space-y-2 text-sm text-gray-400">
              <li><Link href="/privacy" className="hover:text-white">개인정보 보호정책</Link></li>
              <li><Link href="/terms" className="hover:text-white">이용 약관</Link></li>
            </ul>
          </div>
        </div>
        
        <Separator className="bg-gray-800 mb-8" />
        
        <div className="text-center">
          <p className="text-sm text-gray-400">
            &copy; 2024 Company Name. All rights reserved.
          </p>
        </div>
      </div>
    </footer>
  )
}