Skip to Content
ExamplesLanding Page Example

Landing Page Example

모던 랜딩 페이지 구현 예제

개요

Foundation 컴포넌트를 활용한 반응형 랜딩 페이지 예제입니다.

주요 특징

  • ✅ Hero Section with CTA
  • ✅ Feature Grid
  • ✅ Testimonials
  • ✅ FAQ Section
  • ✅ 완전 반응형

전체 코드

import { Button } from "@vortex/ui-foundation"
import { Container } from "@/components/ui/container"
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "@/components/ui/card"
import { Badge } from "@vortex/ui-foundation"
 
export default function LandingPage() {
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="py-20 bg-linear-to-b from-background to-muted/50">
        <Container size="xl">
          <div className="text-center space-y-6">
            <Badge>New Release v2.0</Badge>
            <h1 className="text-5xl md:text-6xl font-bold tracking-tight">
              Build Faster with
              <span className="text-primary"> Vortex UI</span>
            </h1>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
              A modern component library for React applications. Built with
              TypeScript, Tailwind CSS, and Radix UI.
            </p>
            <div className="flex gap-4 justify-center flex-wrap">
              <Button size="lg">Get Started</Button>
              <Button size="lg" variant="outline">
                View Components
              </Button>
            </div>
          </div>
        </Container>
      </section>
 
      {/* Features Section */}
      <section className="py-20">
        <Container size="xl">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Key Features</h2>
            <p className="text-muted-foreground">
              Everything you need to build modern web applications
            </p>
          </div>
 
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>⚡ Fast Development</CardTitle>
                <CardDescription>
                  Pre-built components speed up your development
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Copy-paste components into your project and customize them to
                  match your design requirements.
                </p>
              </CardContent>
            </Card>
 
            <Card>
              <CardHeader>
                <CardTitle>♿ Accessible</CardTitle>
                <CardDescription>
                  WCAG 2.1 AA compliant by default
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Built with accessibility in mind. Screen reader support,
                  keyboard navigation, and proper ARIA attributes.
                </p>
              </CardContent>
            </Card>
 
            <Card>
              <CardHeader>
                <CardTitle>🎨 Customizable</CardTitle>
                <CardDescription>
                  Tailwind CSS for easy customization
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Use Tailwind CSS utilities to customize components or override
                  with your own styles.
                </p>
              </CardContent>
            </Card>
 
            <Card>
              <CardHeader>
                <CardTitle>📱 Responsive</CardTitle>
                <CardDescription>
                  Mobile-first responsive design
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  All components are fully responsive and work great on mobile,
                  tablet, and desktop.
                </p>
              </CardContent>
            </Card>
 
            <Card>
              <CardHeader>
                <CardTitle>🔧 TypeScript</CardTitle>
                <CardDescription>Fully typed with TypeScript</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Get IntelliSense and type safety with complete TypeScript
                  definitions.
                </p>
              </CardContent>
            </Card>
 
            <Card>
              <CardHeader>
                <CardTitle>🌙 Dark Mode</CardTitle>
                <CardDescription>Built-in dark mode support</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Toggle between light and dark themes with a single prop. CSS
                  variables make it easy.
                </p>
              </CardContent>
            </Card>
          </div>
        </Container>
      </section>
 
      {/* Stats Section */}
      <section className="py-20 bg-muted/50">
        <Container size="xl">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            <div>
              <div className="text-4xl font-bold text-primary mb-2">50+</div>
              <div className="text-muted-foreground">Components</div>
            </div>
            <div>
              <div className="text-4xl font-bold text-primary mb-2">100%</div>
              <div className="text-muted-foreground">TypeScript</div>
            </div>
            <div>
              <div className="text-4xl font-bold text-primary mb-2">10K+</div>
              <div className="text-muted-foreground">Downloads</div>
            </div>
            <div>
              <div className="text-4xl font-bold text-primary mb-2">5★</div>
              <div className="text-muted-foreground">Rating</div>
            </div>
          </div>
        </Container>
      </section>
 
      {/* CTA Section */}
      <section className="py-20">
        <Container size="lg">
          <Card className="border-2">
            <CardContent className="py-12 text-center">
              <h2 className="text-3xl font-bold mb-4">Ready to get started?</h2>
              <p className="text-muted-foreground mb-8">
                Install Vortex UI and start building your next project today.
              </p>
              <div className="flex gap-4 justify-center flex-wrap">
                <Button size="lg">Get Started</Button>
                <Button size="lg" variant="outline">
                  View Documentation
                </Button>
              </div>
            </CardContent>
          </Card>
        </Container>
      </section>
    </div>
  )
}

컴포넌트 분석

Hero Section

<section className="py-20 bg-linear-to-b from-background to-muted/50">
  <Container size="xl">
    <div className="text-center space-y-6">
      <Badge>New Release v2.0</Badge>
      <h1 className="text-5xl md:text-6xl font-bold tracking-tight">
        Build Faster with<span className="text-primary"> Vortex UI</span>
      </h1>
      {/* ... */}
    </div>
  </Container>
</section>

주요 패턴:

  • Gradient background
  • Centered content
  • Badge for announcements
  • Large heading with accent color
  • CTA button group

Features Grid

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <Card>
    <CardHeader>
      <CardTitle>⚡ Fast Development</CardTitle>
      <CardDescription>Pre-built components</CardDescription>
    </CardHeader>
    <CardContent>
      <p className="text-sm text-muted-foreground">...</p>
    </CardContent>
  </Card>
  {/* More cards... */}
</div>

주요 패턴:

  • Responsive grid layout
  • Icon + Title + Description
  • Consistent card structure

커스터마이징

색상 변경

<h1 className="text-5xl font-bold">
  Build Faster with
  <span className="text-blue-600"> Vortex UI</span>
</h1>

레이아웃 조정

// 더 넓은 컨테이너
<Container size="full" className="max-w-screen-2xl">
 
// 더 많은 간격
<section className="py-32">

CTA 버튼 변형

<Button size="lg" className="px-8">
  Get Started Free
</Button>
<Button size="lg" variant="ghost">
  Watch Demo
</Button>

반응형 고려사항

// 모바일: 1열, 태블릿: 2열, 데스크톱: 3열
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 
// 텍스트 크기 조정
<h1 className="text-4xl md:text-5xl lg:text-6xl">
 
// 버튼 래핑
<div className="flex gap-4 justify-center flex-wrap">

성능 최적화

이미지 최적화

import Image from "next/image"
;<Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority />

코드 스플리팅

import dynamic from "next/dynamic"
 
const Testimonials = dynamic(() => import("./Testimonials"))

다음 단계

Dashboard

분석 대시보드 예제

Form with API

폼 + API 통합 예제

Last updated on
Form with API ExampleSchedule Management Example (Cals)