147 lines
8.3 KiB
TypeScript
147 lines
8.3 KiB
TypeScript
import { motion } from 'motion/react';
|
|
import { Sparkles, ArrowRight } from 'lucide-react';
|
|
|
|
export default function Solution() {
|
|
return (
|
|
<section id="solution" className="py-32 bg-primary-900 text-white px-6 relative overflow-hidden">
|
|
{/* Background Glow */}
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-accent/20 rounded-full blur-[120px] pointer-events-none"></div>
|
|
|
|
<div className="max-w-4xl mx-auto text-center relative z-10">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 mb-8"
|
|
>
|
|
<Sparkles className="w-4 h-4 text-purple-300" />
|
|
<span className="text-sm font-medium text-purple-100">AI Marketing Engine</span>
|
|
</motion.div>
|
|
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.1 }}
|
|
className="text-4xl md:text-6xl font-serif font-bold mb-6 leading-tight text-transparent bg-clip-text bg-gradient-to-r from-[#fff3eb] via-[#e4cfff] to-[#f5f9ff]"
|
|
>
|
|
Infinite Marketing Engine
|
|
</motion.h2>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="text-xl md:text-2xl text-slate-300 mb-12 max-w-3xl mx-auto leading-relaxed font-light"
|
|
>
|
|
<span className="font-medium text-white">Infinite Marketing for Premium Medical Business & Marketing Agency</span>
|
|
<br className="hidden md:block" />
|
|
Infinite Marketing은 Premium Medical Business와 Marketing Agency를 위한 AI Marketing Automation Platform입니다.
|
|
INFINITH는 마케팅 분석, 콘텐츠 생성, 영상 콘텐츠 제작, 채널 배포, 성과 분석과 피드백 적용을 하나의 Self-Improving Marketing Engine으로 제공합니다.
|
|
</motion.p>
|
|
|
|
{/* Circular Loop Diagram */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
className="relative w-full max-w-[320px] md:max-w-[500px] aspect-square mx-auto mt-16 mb-24 md:mb-32"
|
|
>
|
|
{/* Static Inner Ring */}
|
|
<div className="absolute top-[20%] left-[20%] right-[20%] bottom-[20%] rounded-full border border-white/5 shadow-[0_0_40px_rgba(255,255,255,0.02)_inset]"></div>
|
|
|
|
{/* Animated Glowing Ring */}
|
|
<svg className="absolute inset-0 w-full h-full animate-[spin_20s_linear_infinite]" viewBox="0 0 100 100">
|
|
<defs>
|
|
<linearGradient id="ringGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stopColor="#a78bfa" stopOpacity="0.1" />
|
|
<stop offset="50%" stopColor="#c084fc" stopOpacity="0.5" />
|
|
<stop offset="100%" stopColor="#e879f9" stopOpacity="0.1" />
|
|
</linearGradient>
|
|
</defs>
|
|
<circle cx="50" cy="50" r="30" fill="none" stroke="url(#ringGrad)" strokeWidth="0.5" strokeDasharray="2 2" />
|
|
</svg>
|
|
|
|
{/* Center Orb */}
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20">
|
|
<div className="w-40 h-40 md:w-56 md:h-56 rounded-full bg-primary-900/90 backdrop-blur-xl border border-white/5 flex flex-col items-center justify-center shadow-[0_0_60px_rgba(167,139,250,0.1)]">
|
|
<span className="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#fff3eb] via-[#e4cfff] to-[#f5f9ff] mb-2">AGDP</span>
|
|
<h3 className="text-xl md:text-3xl font-serif font-bold text-white text-center leading-tight">Infinite<br/>Marketing</h3>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Node A: Analysis (Left) */}
|
|
<div className="absolute top-1/2 left-0 -translate-x-1/2 -translate-y-1/2 z-30 flex flex-col items-center gap-3 md:gap-4">
|
|
<div className="w-16 h-16 md:w-20 md:h-20 rounded-full border border-purple-500/30 bg-primary-900/80 backdrop-blur-sm flex items-center justify-center shadow-[0_0_20px_rgba(168,85,247,0.15)]">
|
|
<span className="text-3xl md:text-4xl font-bold text-purple-300">A</span>
|
|
</div>
|
|
<div className="text-center">
|
|
<span className="block text-lg md:text-2xl font-medium text-purple-200 leading-tight">Analysis</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Node G: Generation (Top) */}
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 z-30 flex flex-col items-center gap-3 md:gap-4">
|
|
<div className="w-16 h-16 md:w-20 md:h-20 rounded-full border border-purple-500/30 bg-primary-900/80 backdrop-blur-sm flex items-center justify-center shadow-[0_0_20px_rgba(168,85,247,0.15)]">
|
|
<span className="text-3xl md:text-4xl font-bold text-purple-300">G</span>
|
|
</div>
|
|
<div className="text-center">
|
|
<span className="block text-lg md:text-2xl font-medium text-purple-200 leading-tight">Generation</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Node D: Distribution (Right) */}
|
|
<div className="absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2 z-30 flex flex-col items-center gap-3 md:gap-4">
|
|
<div className="w-16 h-16 md:w-20 md:h-20 rounded-full border border-purple-500/30 bg-primary-900/80 backdrop-blur-sm flex items-center justify-center shadow-[0_0_20px_rgba(168,85,247,0.15)]">
|
|
<span className="text-3xl md:text-4xl font-bold text-purple-300">D</span>
|
|
</div>
|
|
<div className="text-center">
|
|
<span className="block text-lg md:text-2xl font-medium text-purple-200 leading-tight">Distribution</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Node P: Performance (Bottom) */}
|
|
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 z-30 flex flex-col items-center gap-3 md:gap-4">
|
|
<div className="w-16 h-16 md:w-20 md:h-20 rounded-full border border-purple-500/30 bg-primary-900/80 backdrop-blur-sm flex items-center justify-center shadow-[0_0_20px_rgba(168,85,247,0.15)]">
|
|
<span className="text-3xl md:text-4xl font-bold text-purple-300">P</span>
|
|
</div>
|
|
<div className="text-center">
|
|
<span className="block text-lg md:text-2xl font-medium text-purple-200 leading-tight">Performance</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Reward Signal Curved Text (P to A) */}
|
|
<svg className="absolute inset-0 w-full h-full pointer-events-none z-20" viewBox="0 0 100 100">
|
|
<defs>
|
|
<path id="rewardPath" d="M 10.6 56.9 A 40 40 0 0 0 43.1 89.4" fill="none" />
|
|
</defs>
|
|
<text fontSize="3.5" className="font-medium uppercase tracking-widest" fill="#d8b4fe" opacity="0.8">
|
|
<textPath href="#rewardPath" startOffset="50%" textAnchor="middle">
|
|
← Reward SIGNAL
|
|
</textPath>
|
|
</text>
|
|
</svg>
|
|
</motion.div>
|
|
|
|
{/* AGDP Cycle Description */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.5 }}
|
|
className="max-w-3xl mx-auto mt-12 text-center"
|
|
>
|
|
<div className="inline-block bg-white/5 border border-white/10 rounded-2xl px-6 py-4 backdrop-blur-sm">
|
|
<p className="text-sm md:text-base text-slate-300">
|
|
<span className="font-bold text-purple-300">AGDP Cycle:</span> 분석(Analysis) → 생성(Generation) → 배포(Distribution) → 성과(Performance)의 무한 루프를 통해 콘텐츠 품질(CTR)을 <span className="text-white font-medium">자율 최적화</span>합니다.
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|