---
name: "Landing page guide"
repo: https://github.com/bear2u/my-skills
source: https://github.com/bear2u/my-skills/blob/HEAD/skills/landing-page-guide/SKILL.md
license: not specified
install: "npx skills add bear2u/my-skills --skill landing-page-guide"
page: https://100xlab.com/resources/agent-skills/bear2u-my-skills--landing-page-guide--3ys1v2
---

# Landing Page Guide

## Overview

This skill enables creation of professional, high-converting landing pages following the 11 essential elements framework from DESIGNNAS. It provides complete implementation patterns for Next.js 14+ and React with ShadCN UI integration, ensuring every landing page includes proper SEO optimization, accessibility standards, and conversion-focused design.

## When to Use This Skill

Use this skill when users request:
- Creation of landing pages, marketing pages, or product pages
- Next.js or React-based promotional websites
- Pages that need to convert visitors into customers
- Professional marketing pages with SEO optimization
- Landing pages following industry best practices

## The 11 Essential Elements Framework

Every effective landing page must include these 11 essential elements. These are based on DESIGNNAS's proven framework for high-converting landing pages:

1. **URL with Keywords** - SEO-optimized, descriptive URL structure
2. **Company Logo** - Brand identity placed prominently (top-left)
3. **SEO-Optimized Title and Subtitle** - Clear value proposition with keywords
4. **Primary CTA** - Main call-to-action button in hero section
5. **Social Proof** - Reviews, ratings, user statistics
6. **Images or Videos** - Visual demonstration of product/service
7. **Core Benefits/Features** - 3-6 key advantages with icons
8. **Customer Testimonials** - 4-6 authentic reviews with photos
9. **FAQ Section** - 5-10 common questions with accordion UI
10. **Final CTA** - Bottom call-to-action for second chance conversion
11. **Contact Information/Legal Pages** - Footer with complete information

**Critical:** All 11 elements must be included in every landing page. No exceptions.

For detailed explanations of each element, refer to `references/11-essential-elements.md`.

## Technology Stack Requirements

When creating landing pages, always use:

### Required Technologies
- **Next.js 14+** with App Router
- **TypeScript** for type safety
- **Tailwind CSS** for styling
- **ShadCN UI** for all UI components

### ShadCN UI Components to Install

Before creating any landing page, ensure these components are installed:

```bash
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add accordion
npx shadcn-ui@latest add badge
npx shadcn-ui@latest add avatar
npx shadcn-ui@latest add separator
npx shadcn-ui@latest add input
```

### Why ShadCN UI?
- **Accessibility**: WCAG-compliant components
- **Customizable**: Fully customizable with Tailwind CSS
- **Type-safe**: Written in TypeScript
- **Performance**: Copy only what you need, minimal bundle size
- **Consistency**: Built-in design system

## Project Structure

Create landing pages with this structure:

```
landing-page/
├── app/
│   ├── layout.tsx          # Root layout with metadata
│   ├── page.tsx            # Main landing page
│   └── globals.css         # Global styles
├── components/
│   ├── Header.tsx          # Logo & Navigation (Element 2)
│   ├── Hero.tsx            # Title, CTA, Social Proof (Elements 3-5)
│   ├── MediaSection.tsx    # Images/Videos (Element 6)
│   ├── Benefits.tsx        # Core Benefits (Element 7)
│   ├── Testimonials.tsx    # Customer Reviews (Element 8)
│   ├── FAQ.tsx             # FAQ Accordion (Element 9)
│   ├── FinalCTA.tsx        # Bottom CTA (Element 10)
│   └── Footer.tsx          # Contact & Legal (Element 11)
├── public/
│   └── images/             # Optimized images
└── package.json
```

## Implementation Workflow

### Step 1: Setup Metadata (SEO)

Always start with proper SEO metadata in `layout.tsx` or `page.tsx`:

```typescript
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'SEO Optimized Title with Keywords | Brand Name',
  description: 'Compelling description with main keywords',
  keywords: ['keyword1', 'keyword2', 'keyword3'],
  openGraph: {
    title: 'OG Title',
    description: 'OG Description',
    images: ['/og-image.jpg'],
  },
}
```

### Step 2: Create Component Structure

Build components in this order to ensure proper flow:

1. **Header** with logo (Element 2)
2. **Hero** section with title, subtitle, primary CTA, and social proof (Elements 3-5)
3. **MediaSection** with product images/videos (Element 6)
4. **Benefits** section with 3-6 feature cards (Element 7)
5. **Testimonials** with customer reviews (Element 8)
6. **FAQ** with accordion (Element 9)
7. **FinalCTA** at bottom (Element 10)
8. **Footer** with contact and legal links (Element 11)

### Step 3: Use ShadCN UI Components

Map each section to appropriate ShadCN components:

- **Hero CTA**: Use `Button` component with size="lg"
- **Benefits**: Use `Card`, `CardHeader`, `CardTitle`, `CardContent`
- **Testimonials**: Use `Card`, `Avatar`, `Badge`
- **FAQ**: Use `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`
- **Final CTA**: Use `Button` and `Card`
- **Footer**: Use `Separator`, `Input` for newsletter

### Step 4: Implement Responsive Design

Ensure mobile-first responsive design:

- Use Tailwind responsive prefixes: `sm:`, `md:`, `lg:`, `xl:`
- Test all breakpoints: 640px (sm), 768px (md), 1024px (lg), 1280px (xl)
- Minimum touch target size: 44x44px for buttons
- Base font size: minimum 16px on mobile

### Step 5: Optimize Performance

- Use Next.js `Image` component for all images
- Add `priority` prop to above-the-fold images
- Implement lazy loading for below-the-fold content
- Use dynamic imports for heavy components if needed

### Step 6: Ensure Accessibility

- Use semantic HTML5 elements (`<header>`, `<main>`, `<section>`, `<footer>`)
- Add ARIA labels where needed
- Ensure keyboard navigation works
- Provide alt text for all images
- Maintain sufficient color contrast (WCAG AA minimum)

## Component Examples

For complete, production-ready component implementations using ShadCN UI, refer to `references/component-examples.md`.

This reference file includes:
- Hero section with Button, Badge, and Image optimization
- Benefits section with Card components
- Testimonials with Avatar and Card
- FAQ with Accordion
- Final CTA with Card and Button
- Footer with Separator and links

Load this reference when implementing components to follow best practices.

## Validation Checklist

Before completing any landing page, verify:

**11 Essential Elements:**
- [ ] 1. URL with keywords
- [ ] 2. Company logo (top-left)
- [ ] 3. SEO-optimized title and subtitle
- [ ] 4. Primary CTA in hero
- [ ] 5. Social proof (reviews, stats)
- [ ] 6. Images or videos
- [ ] 7. Benefits/features section (3-6 items)
- [ ] 8. Customer testimonials (4-6 items)
- [ ] 9. FAQ section (5-10 questions)
- [ ] 10. Final CTA at bottom
- [ ] 11. Footer with contact and legal links

**Technical Requirements:**
- [ ] Next.js 14+ with App Router
- [ ] TypeScript types defined
- [ ] Tailwind CSS styling
- [ ] ShadCN UI components used
- [ ] Metadata configured for SEO
- [ ] Images optimized with Next.js Image
- [ ] Responsive design implemented
- [ ] Accessibility standards met
- [ ] Performance optimized

## Best Practices

### Content Guidelines
- Write clear, benefit-focused copy
- Use action-oriented language in CTAs
- Keep sections scannable with proper headings
- Include specific numbers and statistics
- Use authentic testimonials with real names

### Design Guidelines
- Maintain visual hierarchy throughout
- Use consistent color palette
- Ensure adequate whitespace
- Choose readable fonts (16px+ base size)
- Design for mobile-first

### SEO Optimization
- Include keywords naturally in content
- Use proper heading tag structure (H1 → H2 → H3)
- Add alt text to all images
- Optimize page load speed
- Create descriptive meta tags

### Conversion Optimization
- Place CTAs strategically (hero + bottom minimum)
- Reduce friction in user journey
- Highlight trust signals prominently
- Use contrasting colors for CTAs
- Test different CTA copy variations

## Common Patterns

### SaaS Product Landing Page
Focus on: Free trial CTA, feature comparisons, pricing clarity, security badges

### E-commerce Product Landing Page
Focus on: Product images, pricing, shipping info, return policy, urgency

### Service/Agency Landing Page
Focus on: Portfolio/case studies, process explanation, team credentials, contact form

### Event/Webinar Landing Page
Focus on: Date/time prominence, speaker profiles, agenda, registration form, countdown timer

## Resources

### references/
This skill includes detailed reference documentation:

- `11-essential-elements.md` - In-depth explanation of each of the 11 essential elements with principles, implementation tips, and examples
- `component-examples.md` - Complete, production-ready component code using ShadCN UI for all major sections

Load these references as needed when implementing specific sections or when you need detailed guidance on any element.

## Notes

- This framework is based on DESIGNNAS's "11 Essential Landing Page Elements"
- Adapt to brand guidelines and target audience as needed
- Use A/B testing to continuously improve conversion rates
- All implementations should prioritize user experience and conversion optimization

---

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

```typescript
// 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)

```typescript
// 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)

```typescript
// 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)

```typescript
// 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)

```typescript
// 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)

```typescript
// 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>
  )
}
```