566 lines
23 KiB
TypeScript
566 lines
23 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import {
|
|
Sparkles,
|
|
Zap,
|
|
Brain,
|
|
MessageSquare,
|
|
Bot,
|
|
ArrowRight,
|
|
CheckCircle2,
|
|
Shield,
|
|
Clock,
|
|
Users,
|
|
Rocket
|
|
} from "lucide-react";
|
|
|
|
export default function Home() {
|
|
const features = [
|
|
{
|
|
icon: Brain,
|
|
title: "AI 기반 지능형 대화",
|
|
description: "최첨단 AI가 대화를 이해하고 맥락에 맞는 응답을 제공합니다.",
|
|
color: "from-cyan-400 to-fuchsia-500"
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "스마트 자동화",
|
|
description: "반복적인 작업을 자동화하고 효율성을 극대화하세요.",
|
|
color: "from-emerald-400 to-cyan-500"
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "엔터프라이즈급 보안",
|
|
description: "최고 수준의 암호화로 모든 대화를 안전하게 보호합니다.",
|
|
color: "from-fuchsia-400 to-pink-500"
|
|
},
|
|
{
|
|
icon: Clock,
|
|
title: "실시간 동기화",
|
|
description: "모든 기기에서 즉시 동기화되는 실시간 메시징 경험.",
|
|
color: "from-cyan-500 to-blue-600"
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "스마트 협업",
|
|
description: "AI가 팀 협업을 돕고 프로젝트 관리를 자동화합니다.",
|
|
color: "from-emerald-500 to-teal-500"
|
|
},
|
|
{
|
|
icon: Rocket,
|
|
title: "무한 확장성",
|
|
description: "개인 사용자부터 대기업까지 모든 규모에 대응합니다.",
|
|
color: "from-cyan-500 via-fuchsia-500 to-emerald-500"
|
|
}
|
|
];
|
|
|
|
const animations = {
|
|
fadeInUp: {
|
|
initial: { opacity: 0, y: 30 },
|
|
animate: { opacity: 1, y: 0 },
|
|
transition: { duration: 0.6 }
|
|
},
|
|
stagger: {
|
|
initial: { opacity: 0, y: 20 },
|
|
animate: { opacity: 1, y: 0 },
|
|
transition: { duration: 0.5 }
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-cyan-950 to-slate-950 relative overflow-hidden">
|
|
{/* 펑키한 배경 패턴 */}
|
|
<div className="absolute inset-0 opacity-20">
|
|
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_20%_50%,rgba(6,182,212,0.3),transparent_50%)]"></div>
|
|
<div className="absolute top-0 right-0 w-full h-full bg-[radial-gradient(circle_at_80%_50%,rgba(244,114,182,0.3),transparent_50%)]"></div>
|
|
<div className="absolute bottom-0 left-1/2 w-full h-full bg-[radial-gradient(circle_at_50%_100%,rgba(16,185,129,0.3),transparent_50%)]"></div>
|
|
</div>
|
|
{/* Navigation */}
|
|
<nav className="fixed top-0 w-full z-50 backdrop-blur-md bg-black/30 border-b border-cyan-500/20">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center h-16">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
className="flex items-center space-x-2"
|
|
>
|
|
<motion.div
|
|
whileHover={{ scale: 1.1, rotate: 5 }}
|
|
transition={{ type: "spring", stiffness: 300 }}
|
|
>
|
|
<MessageSquare className="w-8 h-8 text-cyan-400 drop-shadow-[0_0_8px_rgba(6,182,212,0.8)]" />
|
|
</motion.div>
|
|
<motion.span
|
|
className="text-2xl font-black tracking-tight"
|
|
animate={{
|
|
backgroundPosition: ["0%", "100%", "0%"],
|
|
}}
|
|
transition={{
|
|
duration: 5,
|
|
repeat: Infinity,
|
|
ease: "linear"
|
|
}}
|
|
style={{
|
|
background: "linear-gradient(90deg, #06b6d4, #10b981, #f472b6, #06b6d4)",
|
|
backgroundSize: "200% auto",
|
|
WebkitBackgroundClip: "text",
|
|
WebkitTextFillColor: "transparent",
|
|
backgroundClip: "text",
|
|
filter: "drop-shadow(0 0 8px rgba(6,182,212,0.6))"
|
|
}}
|
|
>
|
|
IYKYKA
|
|
</motion.span>
|
|
</motion.div>
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
className="flex items-center space-x-4"
|
|
>
|
|
<button className="px-4 py-2 text-sm font-medium text-white/80 hover:text-white transition-colors">
|
|
로그인
|
|
</button>
|
|
<motion.button
|
|
className="px-6 py-2 text-sm font-bold bg-gradient-to-r from-cyan-500 via-fuchsia-500 to-emerald-500 rounded-full text-white hover:shadow-lg hover:shadow-cyan-500/50 transition-all"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
animate={{
|
|
backgroundPosition: ["0%", "100%", "0%"],
|
|
}}
|
|
transition={{
|
|
duration: 3,
|
|
repeat: Infinity,
|
|
ease: "linear"
|
|
}}
|
|
style={{
|
|
backgroundSize: "200% auto",
|
|
}}
|
|
>
|
|
시작하기
|
|
</motion.button>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero Section */}
|
|
<section className="relative pt-32 pb-20 px-4 sm:px-6 lg:px-8 overflow-hidden">
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,182,212,0.2),transparent_50%)]"></div>
|
|
<div className="max-w-7xl mx-auto">
|
|
<motion.div
|
|
initial="initial"
|
|
animate="animate"
|
|
variants={{
|
|
initial: { opacity: 0 },
|
|
animate: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.2
|
|
}
|
|
}
|
|
}}
|
|
className="text-center"
|
|
>
|
|
<motion.div
|
|
variants={animations.fadeInUp}
|
|
className="inline-flex items-center space-x-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-md border border-white/20 mb-8"
|
|
>
|
|
<Sparkles className="w-4 h-4 text-cyan-400" />
|
|
<span className="text-sm text-white/90">AI 기술로 업계를 선도합니다</span>
|
|
</motion.div>
|
|
|
|
<motion.h1
|
|
variants={animations.fadeInUp}
|
|
className="text-5xl sm:text-6xl lg:text-8xl font-black mb-6 leading-tight tracking-tight"
|
|
>
|
|
<motion.span
|
|
className="block mb-2"
|
|
animate={{
|
|
backgroundPosition: ["0%", "100%", "0%"],
|
|
}}
|
|
transition={{
|
|
duration: 4,
|
|
repeat: Infinity,
|
|
ease: "linear"
|
|
}}
|
|
style={{
|
|
background: "linear-gradient(90deg, #ffffff, #06b6d4, #10b981, #f472b6, #ffffff)",
|
|
backgroundSize: "200% auto",
|
|
WebkitBackgroundClip: "text",
|
|
WebkitTextFillColor: "transparent",
|
|
backgroundClip: "text",
|
|
filter: "drop-shadow(0 0 20px rgba(6,182,212,0.5))"
|
|
}}
|
|
>
|
|
IYKYKA
|
|
</motion.span>
|
|
<br />
|
|
<span className="bg-gradient-to-r from-cyan-400 via-emerald-400 to-fuchsia-400 bg-clip-text text-transparent animate-pulse drop-shadow-[0_0_15px_rgba(6,182,212,0.6)]">
|
|
자동화의 미래
|
|
</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
variants={animations.fadeInUp}
|
|
className="text-xl sm:text-2xl text-white/80 max-w-3xl mx-auto mb-12 leading-relaxed"
|
|
>
|
|
지능형 AI가 대화를 이해하고, 작업을 자동화하며,
|
|
<span className="text-cyan-300 font-semibold"> 커뮤니케이션의 새로운 차원</span>을 열어갑니다.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
variants={animations.fadeInUp}
|
|
className="flex flex-col sm:flex-row gap-4 justify-center items-center"
|
|
>
|
|
<motion.button
|
|
className="group relative px-8 py-4 rounded-full text-white font-bold text-lg overflow-hidden"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
animate={{
|
|
backgroundPosition: ["0%", "100%", "0%"],
|
|
}}
|
|
transition={{
|
|
duration: 3,
|
|
repeat: Infinity,
|
|
ease: "linear"
|
|
}}
|
|
style={{
|
|
background: "linear-gradient(90deg, #06b6d4, #10b981, #f472b6, #06b6d4)",
|
|
backgroundSize: "200% auto",
|
|
boxShadow: "0 0 30px rgba(6,182,212,0.5)"
|
|
}}
|
|
>
|
|
<span className="flex items-center space-x-2 relative z-10">
|
|
<span>무료로 시작하기</span>
|
|
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</span>
|
|
</motion.button>
|
|
<motion.button
|
|
className="px-8 py-4 rounded-full border-2 border-cyan-500/50 text-white font-bold text-lg hover:bg-cyan-500/10 hover:border-fuchsia-400 hover:shadow-[0_0_20px_rgba(244,114,182,0.5)] backdrop-blur-sm transition-all"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
데모 보기
|
|
</motion.button>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Floating Elements */}
|
|
<motion.div
|
|
animate={{
|
|
y: [0, -20, 0],
|
|
rotate: [0, 5, 0]
|
|
}}
|
|
transition={{
|
|
duration: 6,
|
|
repeat: Infinity,
|
|
ease: "easeInOut"
|
|
}}
|
|
className="absolute top-40 left-10 w-20 h-20 bg-gradient-to-br from-cyan-500/40 to-fuchsia-500/40 rounded-full blur-xl"
|
|
/>
|
|
<motion.div
|
|
animate={{
|
|
y: [0, 20, 0],
|
|
rotate: [0, -5, 0]
|
|
}}
|
|
transition={{
|
|
duration: 8,
|
|
repeat: Infinity,
|
|
ease: "easeInOut"
|
|
}}
|
|
className="absolute bottom-20 right-20 w-32 h-32 bg-gradient-to-br from-emerald-500/40 to-cyan-500/40 rounded-full blur-xl"
|
|
/>
|
|
</section>
|
|
|
|
{/* Features Grid */}
|
|
<section className="py-20 px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-4xl sm:text-5xl font-black mb-4">
|
|
<motion.span
|
|
className="block"
|
|
animate={{
|
|
backgroundPosition: ["0%", "100%", "0%"],
|
|
}}
|
|
transition={{
|
|
duration: 5,
|
|
repeat: Infinity,
|
|
ease: "linear"
|
|
}}
|
|
style={{
|
|
background: "linear-gradient(90deg, #06b6d4, #10b981, #f472b6, #06b6d4)",
|
|
backgroundSize: "200% auto",
|
|
WebkitBackgroundClip: "text",
|
|
WebkitTextFillColor: "transparent",
|
|
backgroundClip: "text",
|
|
}}
|
|
>
|
|
강력한 기능들
|
|
</motion.span>
|
|
</h2>
|
|
<p className="text-xl text-white/70 max-w-2xl mx-auto">
|
|
AI 기술로 메신저 경험을 혁신하는 핵심 기능들을 만나보세요
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{features.map((feature, index) => {
|
|
const Icon = feature.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
className="group relative p-6 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 overflow-hidden group-hover:bg-white/10 group-hover:border-cyan-500/50 group-hover:shadow-[0_0_30px_rgba(6,182,212,0.5)] transition-all"
|
|
>
|
|
<div className={`absolute inset-0 bg-gradient-to-br ${feature.color} opacity-0 group-hover:opacity-10 transition-opacity`}></div>
|
|
<div className={`relative w-12 h-12 rounded-xl bg-gradient-to-br ${feature.color} p-3 mb-4`}>
|
|
<Icon className="w-6 h-6 text-white" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-2">{feature.title}</h3>
|
|
<p className="text-white/70 leading-relaxed">{feature.description}</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* AI Automation Section */}
|
|
<section className="py-20 px-4 sm:px-6 lg:px-8 relative">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-cyan-950/50 to-emerald-950/50"></div>
|
|
<div className="max-w-7xl mx-auto relative">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<div className="inline-flex items-center space-x-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-md border border-white/20 mb-6">
|
|
<Bot className="w-5 h-5 text-cyan-400" />
|
|
<span className="text-sm text-white/90">AI 자동화</span>
|
|
</div>
|
|
<h2 className="text-4xl sm:text-5xl font-bold mb-6">
|
|
<span className="bg-gradient-to-r from-white to-cyan-200 bg-clip-text text-transparent">
|
|
지능형 자동화로
|
|
</span>
|
|
<br />
|
|
<motion.span
|
|
className="block"
|
|
animate={{
|
|
backgroundPosition: ["0%", "100%", "0%"],
|
|
}}
|
|
transition={{
|
|
duration: 4,
|
|
repeat: Infinity,
|
|
ease: "linear"
|
|
}}
|
|
style={{
|
|
background: "linear-gradient(90deg, #06b6d4, #10b981, #f472b6, #06b6d4)",
|
|
backgroundSize: "200% auto",
|
|
WebkitBackgroundClip: "text",
|
|
WebkitTextFillColor: "transparent",
|
|
backgroundClip: "text",
|
|
}}
|
|
>
|
|
시간을 절약하세요
|
|
</motion.span>
|
|
</h2>
|
|
<p className="text-xl text-white/80 mb-8 leading-relaxed">
|
|
AI가 반복적인 작업을 자동으로 처리하고, 스마트한 응답을 생성하며,
|
|
업무 흐름을 최적화합니다. 더 중요한 일에 집중할 수 있습니다.
|
|
</p>
|
|
<ul className="space-y-4">
|
|
{[
|
|
"지능형 메시지 자동 응답",
|
|
"스마트 일정 관리 및 알림",
|
|
"컨텍스트 기반 작업 자동화",
|
|
"다국어 실시간 번역",
|
|
"의미 분석 및 우선순위 설정"
|
|
].map((item, index) => (
|
|
<motion.li
|
|
key={index}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
className="flex items-center space-x-3"
|
|
>
|
|
<CheckCircle2 className="w-6 h-6 text-emerald-400 flex-shrink-0" />
|
|
<span className="text-white/90 text-lg">{item}</span>
|
|
</motion.li>
|
|
))}
|
|
</ul>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="relative"
|
|
>
|
|
<div className="relative p-8 rounded-3xl bg-gradient-to-br from-cyan-500/20 to-emerald-500/20 backdrop-blur-md border border-white/20">
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,182,212,0.3),transparent_70%)] rounded-3xl"></div>
|
|
<div className="relative space-y-4">
|
|
{[1, 2, 3].map((i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: i * 0.2 }}
|
|
className="p-4 rounded-xl bg-white/10 backdrop-blur-sm border border-white/20"
|
|
>
|
|
<div className="flex items-center space-x-3 mb-2">
|
|
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-400 to-emerald-400"></div>
|
|
<div className="flex-1 h-4 bg-white/20 rounded w-24"></div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="h-3 bg-white/20 rounded w-full"></div>
|
|
<div className="h-3 bg-white/20 rounded w-3/4"></div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-20 px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="relative p-12 rounded-3xl overflow-hidden"
|
|
style={{
|
|
background: "linear-gradient(135deg, #06b6d4, #10b981, #f472b6)",
|
|
backgroundSize: "200% 200%",
|
|
}}
|
|
>
|
|
<motion.div
|
|
animate={{
|
|
backgroundPosition: ["0% 0%", "100% 100%", "0% 0%"],
|
|
}}
|
|
transition={{
|
|
duration: 5,
|
|
repeat: Infinity,
|
|
ease: "linear"
|
|
}}
|
|
className="absolute inset-0"
|
|
style={{
|
|
background: "linear-gradient(135deg, #06b6d4, #10b981, #f472b6)",
|
|
backgroundSize: "200% 200%",
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]"></div>
|
|
<div className="relative z-10">
|
|
<h2 className="text-4xl sm:text-5xl font-bold text-white mb-6">
|
|
지금 시작하세요
|
|
</h2>
|
|
<p className="text-xl text-white/90 mb-8 max-w-2xl mx-auto relative z-10">
|
|
IYKYKA와 함께 AI 기술로 업계를 선도하는 메신저 플랫폼의 일원이 되세요.
|
|
무료로 시작하고 즉시 혜택을 경험하세요.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<motion.button
|
|
className="px-8 py-4 bg-white rounded-full font-bold text-lg hover:shadow-2xl transition-all relative z-10"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
style={{
|
|
color: "#06b6d4"
|
|
}}
|
|
>
|
|
무료 체험 시작
|
|
</motion.button>
|
|
<button className="px-8 py-4 bg-white/10 backdrop-blur-md border-2 border-white/30 text-white rounded-full font-semibold text-lg hover:bg-white/20 transition-all">
|
|
영업팀에 문의
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="py-12 px-4 sm:px-6 lg:px-8 border-t border-white/10">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
|
<div>
|
|
<div className="flex items-center space-x-2 mb-4">
|
|
<MessageSquare className="w-6 h-6 text-cyan-400 drop-shadow-[0_0_8px_rgba(6,182,212,0.8)]" />
|
|
<motion.span
|
|
className="text-lg font-black tracking-tight"
|
|
animate={{
|
|
backgroundPosition: ["0%", "100%", "0%"],
|
|
}}
|
|
transition={{
|
|
duration: 4,
|
|
repeat: Infinity,
|
|
ease: "linear"
|
|
}}
|
|
style={{
|
|
background: "linear-gradient(90deg, #06b6d4, #10b981, #f472b6, #06b6d4)",
|
|
backgroundSize: "200% auto",
|
|
WebkitBackgroundClip: "text",
|
|
WebkitTextFillColor: "transparent",
|
|
backgroundClip: "text",
|
|
}}
|
|
>
|
|
IYKYKA
|
|
</motion.span>
|
|
</div>
|
|
<p className="text-white/60 text-sm">
|
|
AI 기술로 커뮤니케이션의 미래를 만들어갑니다.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-white font-semibold mb-4">제품</h4>
|
|
<ul className="space-y-2 text-white/60 text-sm">
|
|
<li><a href="#" className="hover:text-white transition-colors">기능</a></li>
|
|
<li><a href="#" className="hover:text-white transition-colors">가격</a></li>
|
|
<li><a href="#" className="hover:text-white transition-colors">보안</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-white font-semibold mb-4">회사</h4>
|
|
<ul className="space-y-2 text-white/60 text-sm">
|
|
<li><a href="#" className="hover:text-white transition-colors">소개</a></li>
|
|
<li><a href="#" className="hover:text-white transition-colors">블로그</a></li>
|
|
<li><a href="#" className="hover:text-white transition-colors">채용</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-white font-semibold mb-4">지원</h4>
|
|
<ul className="space-y-2 text-white/60 text-sm">
|
|
<li><a href="#" className="hover:text-white transition-colors">도움말</a></li>
|
|
<li><a href="#" className="hover:text-white transition-colors">문의하기</a></li>
|
|
<li><a href="#" className="hover:text-white transition-colors">API 문서</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="pt-8 border-t border-white/10 text-center text-white/60 text-sm">
|
|
<p>© 2024 IYKYKA. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|