Landing Page Optimization

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

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

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>
  )
}