22
33import { useState } from 'react' ;
44import { motion } from 'framer-motion' ;
5- import { Monitor , Smartphone , Code2 , Clock , CheckCircle , Zap } from 'lucide-react' ;
5+ import { Monitor , Smartphone , Code2 , Clock , CheckCircle , Zap , Brain , Bot , Cpu , Sparkles , Terminal , Database } from 'lucide-react' ;
66import { Card , CardContent , CardHeader , CardTitle } from '@/components/ui/Card' ;
77import Button from '@/components/ui/Button' ;
88import { profileData } from '@/data/profile' ;
@@ -11,8 +11,8 @@ const Services = () => {
1111 const [ selectedCategory , setSelectedCategory ] = useState ( 0 ) ;
1212
1313 const icons = {
14- '웹 개발' : Monitor ,
15- '모바일 앱 ' : Smartphone
14+ '🧬 AI 웹 개발 연구실 ' : Brain ,
15+ '🔬 모바일 AI 실험실 ' : Bot
1616 } ;
1717
1818 const containerVariants = {
@@ -35,7 +35,7 @@ const Services = () => {
3535 } ;
3636
3737 return (
38- < section id = "services" className = "py-20 bg-white " >
38+ < section id = "services" className = "py-20 bg-gradient-to-br from-slate-900 via-purple-900/10 to-slate-900 " >
3939 < div className = "container mx-auto px-6" >
4040 { /* Section Header */ }
4141 < motion . div
@@ -45,20 +45,20 @@ const Services = () => {
4545 viewport = { { once : true } }
4646 transition = { { duration : 0.8 } }
4747 >
48- < div className = "inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-cyan-500/10 to-purple-600/10 border border-cyan-500/20 rounded-full text-sm font-medium mb-6" >
49- < Zap className = "w-4 h-4 text-purple-600 " />
50- 서비스 & 가격
48+ < div className = "inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-green-400/20 to-cyan-500/20 border border-green-400/50 rounded-full text-sm font-medium mb-6 neon-border " >
49+ < Cpu className = "w-4 h-4 text-green-400 pulse-ai " />
50+ < span className = "text-green-400 neon-glow" > AI 연구 분야 </ span >
5151 </ div >
5252
53- < h2 className = "text-4xl lg:text-5xl font-bold text-gray-900 mb-6" >
54- < span className = "bg-gradient-to-r from-cyan-600 to-purple-600 bg-clip-text text-transparent" >
55- 투명한 가격
53+ < h2 className = "text-4xl lg:text-5xl font-bold text-white mb-6" >
54+ AI 기술로
55+ < span className = "bg-gradient-to-r from-green-400 via-cyan-500 to-purple-600 bg-clip-text text-transparent neon-glow" >
56+ 미래를 코딩
5657 </ span >
57- , 확실한 품질
5858 </ h2 >
5959
60- < p className = "text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed" >
61- AI 기술을 활용해 개발 비용은 30% 절약하고, 품질은 더욱 향상시킵니다.
60+ < p className = "text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed" >
61+ 🤖 최첨단 AI 도구로 개발 시간 50% 단축, 생산성 300% 향상
6262 </ p >
6363 </ motion . div >
6464
@@ -70,14 +70,14 @@ const Services = () => {
7070 viewport = { { once : true } }
7171 transition = { { duration : 0.6 } }
7272 >
73- < div className = "flex bg-gray-100 rounded-2xl p-1" >
73+ < div className = "flex bg-gradient-to-r from-slate-800/50 to-purple-900/20 rounded-2xl p-1 border border-green-400/20 " >
7474 { profileData . services . map ( ( service , index ) => (
7575 < button
7676 key = { index }
7777 className = { `px-6 py-3 rounded-xl font-semibold transition-all duration-300 ${
7878 selectedCategory === index
79- ? 'bg-white text-purple-600 shadow-md '
80- : 'text-gray-600 hover:text-gray-900 '
79+ ? 'bg-gradient-to-r from-green-400 to-cyan-500 text-black shadow-lg shadow-green-400/25 '
80+ : 'text-gray-400 hover:text-green-400 '
8181 } `}
8282 onClick = { ( ) => setSelectedCategory ( index ) }
8383 >
@@ -103,28 +103,28 @@ const Services = () => {
103103 whileHover = { { y : - 8 } }
104104 className = "relative"
105105 >
106- < Card variant = "elevated" hover className = "h-full relative overflow-hidden" >
106+ < Card variant = "elevated" hover className = "h-full relative overflow-hidden bg-gradient-to-br from-slate-800/50 to-purple-900/20 border border-green-400/20 hover:border-green-400/50 transition-all duration-300 " >
107107 { /* Background Gradient */ }
108- < div className = "absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-cyan-500 to-purple-600" > </ div >
108+ < div className = "absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-green-400 via- cyan-500 to-purple-600" > </ div >
109109
110110 < CardHeader className = "pb-4" >
111111 < div className = "flex items-center justify-between mb-4" >
112- < div className = "w-12 h-12 bg-gradient-to-br from-cyan-100 to-purple-100 rounded-xl flex items-center justify-center" >
112+ < div className = "w-12 h-12 bg-gradient-to-br from-green-400/20 to-cyan-500/20 rounded-xl flex items-center justify-center border border-green-400/30 " >
113113 { ( ( ) => {
114- const IconComponent = icons [ profileData . services [ selectedCategory ] . category as keyof typeof icons ] || Code2 ;
115- return < IconComponent className = "w-6 h-6 text-purple-600 " /> ;
114+ const IconComponent = icons [ profileData . services [ selectedCategory ] . category as keyof typeof icons ] || Terminal ;
115+ return < IconComponent className = "w-6 h-6 text-green-400 neon-glow " /> ;
116116 } ) ( ) }
117117 </ div >
118118 < div className = "text-right" >
119- < div className = "text-2xl font-bold text-gray-900 " > { service . price } </ div >
120- < div className = "text-sm text-gray-500 flex items-center gap-1" >
119+ < div className = "text-2xl font-bold text-green-400 neon-glow " > { service . price } </ div >
120+ < div className = "text-sm text-gray-400 flex items-center gap-1" >
121121 < Clock className = "w-4 h-4" />
122122 { service . duration }
123123 </ div >
124124 </ div >
125125 </ div >
126126
127- < CardTitle className = "text-xl" > { service . name } </ CardTitle >
127+ < CardTitle className = "text-xl text-white " > { service . name } </ CardTitle >
128128 </ CardHeader >
129129
130130 < CardContent >
@@ -134,7 +134,7 @@ const Services = () => {
134134 { service . features . map ( ( feature , featureIndex ) => (
135135 < motion . li
136136 key = { featureIndex }
137- className = "flex items-center gap-3 text-gray-600 "
137+ className = "flex items-center gap-3 text-gray-400 "
138138 initial = { { opacity : 0 , x : - 20 } }
139139 whileInView = { { opacity : 1 , x : 0 } }
140140 transition = { { delay : featureIndex * 0.1 } }
@@ -148,11 +148,10 @@ const Services = () => {
148148 { /* CTA Button */ }
149149 < div className = "pt-4" >
150150 < Button
151- className = "w-full group"
152- variant = { index === 1 ? 'primary' : 'outline' }
151+ className = "w-full group bg-gradient-to-r from-green-400 to-cyan-500 hover:from-green-500 hover:to-cyan-600 border-0 text-black font-bold shadow-lg shadow-green-400/25"
153152 >
154- < Zap className = "w-4 h-4 mr-2 group-hover:scale-110 transition-transform" />
155- 상담 받기
153+ < Bot className = "w-4 h-4 mr-2 group-hover:rotate-180 transition-transform duration-500 " />
154+ AI 상담 시작
156155 </ Button >
157156 </ div >
158157 </ div >
@@ -170,40 +169,40 @@ const Services = () => {
170169 viewport = { { once : true } }
171170 transition = { { duration : 0.8 } }
172171 >
173- < Card variant = "glass" className = "max-w-4xl mx-auto p-8 border-2 border- gradient-to-r from-cyan-200 to-purple-200 " >
172+ < Card variant = "glass" className = "max-w-4xl mx-auto p-8 bg- gradient-to-br from-slate-800/50 to-purple-900/20 border border-green-400/50 neon-border " >
174173 < CardContent className = "space-y-6" >
175174 < div className = "flex items-center justify-center gap-3 mb-4" >
176- < div className = "w-12 h-12 bg-gradient-to-br from-cyan-500 to-purple-600 rounded-xl flex items-center justify-center" >
177- < Zap className = "w-6 h-6 text-white " />
175+ < div className = "w-12 h-12 bg-gradient-to-br from-green-400/20 to-cyan-500/20 rounded-xl flex items-center justify-center border border-green-400/50 " >
176+ < Brain className = "w-6 h-6 text-green-400 neon-glow pulse-ai " />
178177 </ div >
179- < h3 className = "text-2xl font-bold bg-gradient-to-r from-cyan-600 to-purple-600 bg-clip-text text-transparent" >
180- AI 기반 개발의 장점
178+ < h3 className = "text-2xl font-bold bg-gradient-to-r from-green-400 via- cyan-500 to-purple-600 bg-clip-text text-transparent neon-glow " >
179+ AI 연구소 핵심 성과
181180 </ h3 >
182181 </ div >
183182
184183 < div className = "grid md:grid-cols-3 gap-6 text-center" >
185- < div className = "space-y-2" >
186- < div className = "text-3xl font-bold text-purple-600" > 50 %</ div >
187- < div className = "text-sm text-gray-600" > 개발 시간 단축 </ div >
184+ < div className = "space-y-2 bg-gradient-to-r from-green-400/10 to-cyan-500/10 p-4 rounded-xl border border-green-400/30 " >
185+ < div className = "text-3xl font-bold text-green-400 neon-glow" > 98 %</ div >
186+ < div className = "text-sm text-gray-400" > 🧬 AI 활용도 </ div >
188187 </ div >
189- < div className = "space-y-2" >
190- < div className = "text-3xl font-bold text-purple-600" > 30 %</ div >
191- < div className = "text-sm text-gray-600" > 비용 절감 </ div >
188+ < div className = "space-y-2 bg-gradient-to-r from-cyan-500/10 to-purple-600/10 p-4 rounded-xl border border-cyan-500/30 " >
189+ < div className = "text-3xl font-bold text-cyan-400 neon-glow" > 50 %</ div >
190+ < div className = "text-sm text-gray-400" > ⚡ 개발 속도 </ div >
192191 </ div >
193- < div className = "space-y-2" >
194- < div className = "text-3xl font-bold text-purple-600" > 99 %</ div >
195- < div className = "text-sm text-gray-600" > 코드 품질 </ div >
192+ < div className = "space-y-2 bg-gradient-to-r from-purple-600/10 to-green-400/10 p-4 rounded-xl border border-purple-600/30 " >
193+ < div className = "text-3xl font-bold text-purple-400 neon-glow" > 300 %</ div >
194+ < div className = "text-sm text-gray-400" > 🚀 생산성 </ div >
196195 </ div >
197196 </ div >
198197
199- < p className = "text-gray-600 leading-relaxed" >
200- ChatGPT, Claude, GitHub Copilot 등 최신 AI 도구를 활용하여
201- 더 빠르고 정확한 개발이 가능합니다 .
198+ < p className = "text-gray-300 leading-relaxed" >
199+ 🤖 ChatGPT, Claude, GitHub Copilot, Cursor IDE 등 최첨단 AI 도구를 활용하여
200+ 차세대 개발 패러다임을 선도합니다 .
202201 </ p >
203202
204- < Button size = "lg" className = "mt-4" >
205- < Code2 className = "w-5 h-5 mr-2" />
206- 무료 견적 받기
203+ < Button size = "lg" className = "mt-4 bg-gradient-to-r from-green-400 to-cyan-500 hover:from-green-500 hover:to-cyan-600 border-0 text-black font-bold shadow-lg shadow-green-400/25 " >
204+ < Terminal className = "w-5 h-5 mr-2" />
205+ AI 연구소 접속
207206 </ Button >
208207 </ CardContent >
209208 </ Card >
0 commit comments