Compare commits
No commits in common. "802291af2fc42b3a48c8cb33373efda1f595af71" and "ce24d3b743b52a3cee4c9404cec7afc88d6c8216" have entirely different histories.
802291af2f
...
ce24d3b743
1
.github/git-commit-instructions.md
vendored
1
.github/git-commit-instructions.md
vendored
@ -0,0 +1 @@
|
|||||||
|
한국어로 작성하십시오
|
||||||
@ -1,221 +1,56 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Button } from '$lib/components/ui/button';
|
import { Button } from '$lib/components/ui/button';
|
||||||
import * as Card from '$lib/components/ui/card';
|
import * as Card from '$lib/components/ui/card';
|
||||||
import { Badge } from '$lib/components/ui/badge';
|
|
||||||
import { Separator } from '$lib/components/ui/separator';
|
|
||||||
import {
|
|
||||||
Rocket,
|
|
||||||
Zap,
|
|
||||||
Shield,
|
|
||||||
Check,
|
|
||||||
ArrowRight,
|
|
||||||
Github,
|
|
||||||
Twitter,
|
|
||||||
Star
|
|
||||||
} from 'lucide-svelte';
|
|
||||||
|
|
||||||
const features = [
|
|
||||||
{
|
|
||||||
icon: Rocket,
|
|
||||||
title: '빠른 성능',
|
|
||||||
description: '최신 기술 스택으로 구축된 초고속 웹 애플리케이션'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Zap,
|
|
||||||
title: '손쉬운 개발',
|
|
||||||
description: '직관적인 API와 풍부한 컴포넌트로 생산성 향상'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Shield,
|
|
||||||
title: '안전한 보안',
|
|
||||||
description: '엔터프라이즈급 보안으로 데이터를 안전하게 보호'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const benefits = [
|
|
||||||
'타입 안전성이 보장되는 개발 경험',
|
|
||||||
'반응형 디자인으로 모든 디바이스 지원',
|
|
||||||
'확장 가능한 컴포넌트 아키텍처',
|
|
||||||
'활발한 커뮤니티와 풍부한 생태계'
|
|
||||||
];
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="min-h-screen">
|
<div class="container mx-auto p-8">
|
||||||
<!-- Hero Section -->
|
<h1 class="mb-8 text-4xl font-bold">shadcn-svelte 초기 설정 완료!</h1>
|
||||||
<section class="container mx-auto px-4 py-20 text-center md:py-32">
|
|
||||||
<Badge class="mb-4" variant="secondary">
|
|
||||||
<Star class="mr-1 h-3 w-3" />
|
|
||||||
새로운 버전 출시
|
|
||||||
</Badge>
|
|
||||||
<h1 class="mb-6 text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl">
|
|
||||||
당신의 비즈니스를 <br />
|
|
||||||
<span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
|
||||||
혁신하세요
|
|
||||||
</span>
|
|
||||||
</h1>
|
|
||||||
<p class="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground md:text-xl">
|
|
||||||
최고의 개발 경험과 뛰어난 성능을 제공하는 현대적인 웹 플랫폼입니다.
|
|
||||||
지금 바로 시작하고 차이를 경험하세요.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col justify-center gap-4 sm:flex-row">
|
|
||||||
<Button size="lg" class="text-base">
|
|
||||||
시작하기
|
|
||||||
<ArrowRight class="ml-2 h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
<Button size="lg" variant="outline" class="text-base">
|
|
||||||
<Github class="mr-2 h-4 w-4" />
|
|
||||||
GitHub에서 보기
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features Section -->
|
<!-- 버튼 예제 -->
|
||||||
<section class="bg-muted/50 py-20">
|
<div class="mb-8">
|
||||||
<div class="container mx-auto px-4">
|
<h2 class="mb-4 text-2xl font-semibold">버튼 예제</h2>
|
||||||
<div class="mb-12 text-center">
|
<div class="flex gap-4">
|
||||||
<h2 class="mb-4 text-3xl font-bold md:text-4xl">핵심 기능</h2>
|
<Button>기본 버튼</Button>
|
||||||
<p class="mx-auto max-w-2xl text-lg text-muted-foreground">
|
<Button variant="secondary">보조 버튼</Button>
|
||||||
성공적인 프로젝트를 위한 모든 것이 준비되어 있습니다
|
<Button variant="destructive">삭제 버튼</Button>
|
||||||
</p>
|
<Button variant="outline">외곽선 버튼</Button>
|
||||||
</div>
|
|
||||||
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
|
||||||
{#each features as feature (feature.title)}
|
|
||||||
<Card.Root class="border-2 transition-all hover:shadow-lg">
|
|
||||||
{@const Icon = feature.icon}
|
|
||||||
<Card.Header>
|
|
||||||
<div class="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
|
|
||||||
<Icon class="h-6 w-6 text-primary" />
|
|
||||||
</div>
|
|
||||||
<Card.Title class="text-xl">{feature.title}</Card.Title>
|
|
||||||
<Card.Description class="text-base">{feature.description}</Card.Description>
|
|
||||||
</Card.Header>
|
|
||||||
</Card.Root>
|
|
||||||
{/each}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Benefits Section -->
|
<!-- 카드 예제 -->
|
||||||
<section class="py-20">
|
<div class="mb-8">
|
||||||
<div class="container mx-auto px-4">
|
<h2 class="mb-4 text-2xl font-semibold">카드 예제</h2>
|
||||||
<div class="grid gap-12 lg:grid-cols-2 lg:items-center">
|
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||||
<div>
|
|
||||||
<h2 class="mb-4 text-3xl font-bold md:text-4xl">왜 우리를 선택해야 할까요?</h2>
|
|
||||||
<p class="mb-8 text-lg text-muted-foreground">
|
|
||||||
개발자와 비즈니스 모두를 위한 완벽한 솔루션을 제공합니다.
|
|
||||||
</p>
|
|
||||||
<ul class="space-y-4">
|
|
||||||
{#each benefits as benefit (benefit)}
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<div
|
|
||||||
class="mt-1 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-green-100 dark:bg-green-900"
|
|
||||||
>
|
|
||||||
<Check class="h-3 w-3 text-green-600 dark:text-green-400" />
|
|
||||||
</div>
|
|
||||||
<span class="text-base">{benefit}</span>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="rounded-lg border-2 bg-muted/30 p-8">
|
|
||||||
<Card.Root>
|
<Card.Root>
|
||||||
<Card.Header>
|
<Card.Header>
|
||||||
<Card.Title>프리미엄 요금제</Card.Title>
|
<Card.Title>카드 제목 1</Card.Title>
|
||||||
<Card.Description>모든 기능을 제한 없이 사용하세요</Card.Description>
|
<Card.Description>카드 설명입니다.</Card.Description>
|
||||||
</Card.Header>
|
</Card.Header>
|
||||||
<Card.Content class="space-y-4">
|
<Card.Content>
|
||||||
<div class="flex items-baseline">
|
<p>카드 내용이 여기에 들어갑니다.</p>
|
||||||
<span class="text-4xl font-bold">₩29,900</span>
|
</Card.Content>
|
||||||
<span class="ml-2 text-muted-foreground">/월</span>
|
</Card.Root>
|
||||||
</div>
|
|
||||||
<Separator />
|
<Card.Root>
|
||||||
<ul class="space-y-3">
|
<Card.Header>
|
||||||
<li class="flex items-center gap-2">
|
<Card.Title>카드 제목 2</Card.Title>
|
||||||
<Check class="h-4 w-4 text-green-600" />
|
<Card.Description>또 다른 카드입니다.</Card.Description>
|
||||||
<span>무제한 프로젝트</span>
|
</Card.Header>
|
||||||
</li>
|
<Card.Content>
|
||||||
<li class="flex items-center gap-2">
|
<p>그리드 레이아웃을 사용한 예제입니다.</p>
|
||||||
<Check class="h-4 w-4 text-green-600" />
|
</Card.Content>
|
||||||
<span>24/7 고객 지원</span>
|
</Card.Root>
|
||||||
</li>
|
|
||||||
<li class="flex items-center gap-2">
|
<Card.Root>
|
||||||
<Check class="h-4 w-4 text-green-600" />
|
<Card.Header>
|
||||||
<span>고급 분석 도구</span>
|
<Card.Title>카드 제목 3</Card.Title>
|
||||||
</li>
|
<Card.Description>세 번째 카드</Card.Description>
|
||||||
<li class="flex items-center gap-2">
|
</Card.Header>
|
||||||
<Check class="h-4 w-4 text-green-600" />
|
<Card.Content>
|
||||||
<span>팀 협업 기능</span>
|
<p>반응형 그리드가 적용되었습니다.</p>
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</Card.Content>
|
</Card.Content>
|
||||||
<Card.Footer>
|
|
||||||
<Button class="w-full" size="lg">지금 시작하기</Button>
|
|
||||||
</Card.Footer>
|
|
||||||
</Card.Root>
|
</Card.Root>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA Section -->
|
|
||||||
<section class="bg-primary py-20 text-primary-foreground">
|
|
||||||
<div class="container mx-auto px-4 text-center">
|
|
||||||
<h2 class="mb-4 text-3xl font-bold md:text-4xl">준비되셨나요?</h2>
|
|
||||||
<p class="mx-auto mb-8 max-w-2xl text-lg opacity-90">
|
|
||||||
지금 바로 시작하고 몇 분 안에 첫 프로젝트를 완성하세요
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col justify-center gap-4 sm:flex-row">
|
|
||||||
<Button size="lg" variant="secondary" class="text-base">
|
|
||||||
무료로 시작하기
|
|
||||||
<ArrowRight class="ml-2 h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
<Button size="lg" variant="outline" class="border-white bg-transparent text-base text-white hover:bg-white/10">
|
|
||||||
데모 보기
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="border-t py-12">
|
|
||||||
<div class="container mx-auto px-4">
|
|
||||||
<div class="grid gap-8 md:grid-cols-4">
|
|
||||||
<div class="md:col-span-2">
|
|
||||||
<h3 class="mb-4 text-lg font-bold">Your Company</h3>
|
|
||||||
<p class="mb-4 text-sm text-muted-foreground">
|
|
||||||
혁신적인 솔루션으로 비즈니스의 성장을 돕습니다
|
|
||||||
</p>
|
|
||||||
<div class="flex gap-4">
|
|
||||||
<Button size="icon" variant="ghost">
|
|
||||||
<Github class="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
<Button size="icon" variant="ghost">
|
|
||||||
<Twitter class="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="mb-4 font-semibold">제품</h4>
|
|
||||||
<ul class="space-y-2 text-sm text-muted-foreground">
|
|
||||||
<li><a href="/features" class="hover:text-foreground">기능</a></li>
|
|
||||||
<li><a href="/pricing" class="hover:text-foreground">가격</a></li>
|
|
||||||
<li><a href="/security" class="hover:text-foreground">보안</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="mb-4 font-semibold">회사</h4>
|
|
||||||
<ul class="space-y-2 text-sm text-muted-foreground">
|
|
||||||
<li><a href="/about" class="hover:text-foreground">소개</a></li>
|
|
||||||
<li><a href="/blog" class="hover:text-foreground">블로그</a></li>
|
|
||||||
<li><a href="/careers" class="hover:text-foreground">채용</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Separator class="my-8" />
|
|
||||||
<div class="text-center text-sm text-muted-foreground">
|
|
||||||
© 2025 Your Company. All rights reserved.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user