250916_css3/06_tw_ai.html at main · DevCoursePracticeProjects/250916_css3 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="ko" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI-Powered Assistant | Tailwind CSS v4</title>
    <!-- Tailwind CSS v4 Vite Script -->
    <script src="https://cdn.tailwindcss.com/4.0.0-alpha.17/@tailwindcss/vite/v1"></script>
    <style type="text/tailwindcss">
        @theme {
            --font-family-sans: 'Pretendard', sans-serif;
        }
    </style>
    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
</head>
<body class="bg-slate-50 text-slate-800">

    <!-- Header -->
    <header class="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200">
        <div class="container mx-auto px-6 py-4 flex justify-between items-center">
            <a href="#" class="text-2xl font-bold text-blue-600">AI Assistant</a>
            <nav class="hidden md:flex space-x-8">
                <a href="#features" class="text-slate-600 hover:text-blue-600">특징</a>
                <a href="#pricing" class="text-slate-600 hover:text-blue-600">가격</a>
                <a href="#testimonials" class="text-slate-600 hover:text-blue-600">고객 후기</a>
            </nav>
            <a href="#pricing" class="bg-blue-600 text-white px-5 py-2 rounded-full font-semibold hover:bg-blue-700 transition-colors">시작하기</a>
        </div>
    </header>

    <main>
        <!-- Hero Section -->
        <section class="container mx-auto px-6 py-24 text-center">
            <h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 leading-tight">당신의 업무를 혁신할<br>AI 어시스턴트</h1>
            <p class="mt-6 text-lg text-slate-600 max-w-2xl mx-auto">반복적인 작업을 자동화하고, 데이터 기반의 인사이트를 얻어 생산성을 극대화하세요.</p>
            <div class="mt-8 flex justify-center gap-4">
                <a href="#pricing" class="bg-blue-600 text-white px-8 py-3 rounded-full font-bold text-lg hover:bg-blue-700 transition-transform hover:scale-105">14일 무료 체험</a>
                <a href="#features" class="bg-white text-slate-700 px-8 py-3 rounded-full font-bold text-lg border border-slate-300 hover:bg-slate-100 transition-transform hover:scale-105">더 알아보기</a>
            </div>
        </section>

        <!-- Features Section -->
        <section id="features" class="bg-white py-20">
            <div class="container mx-auto px-6">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold text-slate-900">핵심 기능</h2>
                    <p class="mt-2 text-slate-500">AI Assistant가 제공하는 강력한 기능들을 만나보세요.</p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <!-- Feature 1 -->
                    <div class="text-center p-6 bg-slate-50 rounded-lg">
                        <div class="flex justify-center items-center h-16 w-16 rounded-full bg-blue-100 mx-auto mb-4">
                            <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m12.728 0l-.707.707M12 21v-1m-6.657-3.343l.707-.707"></path></svg>
                        </div>
                        <h3 class="text-xl font-semibold text-slate-800">자동화된 워크플로우</h3>
                        <p class="mt-2 text-slate-600">단순 반복 업무를 자동화하여 중요한 일에 더 집중할 수 있습니다.</p>
                    </div>
                    <!-- Feature 2 -->
                    <div class="text-center p-6 bg-slate-50 rounded-lg">
                        <div class="flex justify-center items-center h-16 w-16 rounded-full bg-blue-100 mx-auto mb-4">
                            <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
                        </div>
                        <h3 class="text-xl font-semibold text-slate-800">데이터 분석 및 시각화</h3>
                        <p class="mt-2 text-slate-600">복잡한 데이터를 분석하고, 이해하기 쉬운 시각 자료로 변환합니다.</p>
                    </div>
                    <!-- Feature 3 -->
                    <div class="text-center p-6 bg-slate-50 rounded-lg">
                        <div class="flex justify-center items-center h-16 w-16 rounded-full bg-blue-100 mx-auto mb-4">
                            <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                        </div>
                        <h3 class="text-xl font-semibold text-slate-800">자연어 기반 소통</h3>
                        <p class="mt-2 text-slate-600">사람과 대화하듯 자연스러운 언어로 AI에게 업무를 지시할 수 있습니다.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Testimonials Section -->
        <section id="testimonials" class="bg-blue-600 py-20">
            <div class="container mx-auto px-6 text-center text-white">
                <blockquote class="max-w-3xl mx-auto">
                    <p class="text-2xl italic leading-relaxed">"AI Assistant 도입 후 팀의 생산성이 2배 이상 증가했습니다. 이제는 창의적인 업무에만 집중할 수 있게 되었어요."</p>
                    <footer class="mt-6">
                        <cite class="font-semibold">- 박서준, Gemini 스타트업 CEO</cite>
                    </footer>
                </blockquote>
            </div>
        </section>

        <!-- Pricing Section -->
        <section id="pricing" class="py-20">
            <div class="container mx-auto px-6">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold text-slate-900">합리적인 가격 정책</h2>
                    <p class="mt-2 text-slate-500">당신의 비즈니스 규모에 맞는 플랜을 선택하세요.</p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <!-- Pricing Plan 1 -->
                    <div class="border border-slate-200 rounded-lg p-8 flex flex-col text-center bg-white">
                        <h3 class="text-xl font-semibold">Starter</h3>
                        <p class="mt-4 text-4xl font-bold">&#x20A9;49,000<span class="text-lg font-medium text-slate-500">/월</span></p>
                        <ul class="mt-6 space-y-4 text-slate-600 grow">
                            <li>기본 기능 제공</li>
                            <li>월 1,000건 처리</li>
                            <li>이메일 지원</li>
                        </ul>
                        <a href="#" class="mt-8 bg-slate-200 text-slate-800 px-6 py-3 rounded-full font-semibold hover:bg-slate-300">선택하기</a>
                    </div>
                    <!-- Pricing Plan 2 (Featured) -->
                    <div class="border-2 border-blue-600 rounded-lg p-8 flex flex-col text-center bg-white relative">
                        <p class="absolute top-0 -translate-y-1/2 bg-blue-600 text-white px-4 py-1 rounded-full text-sm font-semibold">BEST</p>
                        <h3 class="text-xl font-semibold">Pro</h3>
                        <p class="mt-4 text-4xl font-bold text-blue-600">&#x20A9;99,000<span class="text-lg font-medium text-slate-500">/월</span></p>
                        <ul class="mt-6 space-y-4 text-slate-600 grow">
                            <li>모든 기능 제공</li>
                            <li>월 10,000건 처리</li>
                            <li>실시간 채팅 지원</li>
                        </ul>
                        <a href="#" class="mt-8 bg-blue-600 text-white px-6 py-3 rounded-full font-semibold hover:bg-blue-700">선택하기</a>
                    </div>
                    <!-- Pricing Plan 3 -->
                    <div class="border border-slate-200 rounded-lg p-8 flex flex-col text-center bg-white">
                        <h3 class="text-xl font-semibold">Enterprise</h3>
                        <p class="mt-4 text-4xl font-bold">별도 문의</p>
                        <ul class="mt-6 space-y-4 text-slate-600 grow">
                            <li>맞춤형 기능 개발</li>
                            <li>무제한 처리</li>
                            <li>전담 매니저 지원</li>
                        </ul>
                        <a href="#" class="mt-8 bg-slate-200 text-slate-800 px-6 py-3 rounded-full font-semibold hover:bg-slate-300">문의하기</a>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-slate-800 text-slate-400 py-12">
        <div class="container mx-auto px-6 text-center">
            <p>&copy; 2025 AI Assistant. All Rights Reserved.</p>
            <div class="mt-4 flex justify-center space-x-6">
                <a href="#" class="hover:text-white">Github</a>
                <a href="#" class="hover:text-white">Twitter</a>
                <a href="#" class="hover:text-white">Facebook</a>
            </div>
        </div>
    </footer>

</body>
</html>