90 lines
3.5 KiB
TypeScript
90 lines
3.5 KiB
TypeScript
import { motion } from 'motion/react';
|
|
import { CalendarFilled, GlobeFilled } from '@/shared/icons/FilledIcons';
|
|
|
|
function formatDate(raw: string): string {
|
|
try {
|
|
return new Date(raw).toLocaleDateString('ko-KR', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
});
|
|
} catch {
|
|
return raw;
|
|
}
|
|
}
|
|
|
|
interface PlanHeaderProps {
|
|
clinicName: string;
|
|
clinicNameEn: string;
|
|
date: string;
|
|
targetUrl: string;
|
|
}
|
|
|
|
export default function PlanHeader({
|
|
clinicName,
|
|
clinicNameEn,
|
|
date,
|
|
targetUrl,
|
|
}: PlanHeaderProps) {
|
|
return (
|
|
<section className="relative overflow-hidden bg-[radial-gradient(ellipse_at_top_left,#e0e7ff,transparent_50%),radial-gradient(ellipse_at_bottom_right,#fce7f3,transparent_50%),radial-gradient(ellipse_at_center,#f5f3ff,transparent_60%)] py-20 md:py-28 px-6">
|
|
{/* Animated blobs — position only, no opacity */}
|
|
<motion.div
|
|
className="absolute top-10 left-10 w-72 h-72 rounded-full bg-[#6C5CE7]/10 blur-3xl"
|
|
animate={{ x: [0, 30, 0], y: [0, -20, 0] }}
|
|
transition={{ duration: 8, repeat: Infinity, ease: 'easeInOut' }}
|
|
/>
|
|
<motion.div
|
|
className="absolute bottom-10 right-10 w-96 h-96 rounded-full bg-[#D5CDF5]/30 blur-3xl"
|
|
animate={{ x: [0, -20, 0], y: [0, 30, 0] }}
|
|
transition={{ duration: 10, repeat: Infinity, ease: 'easeInOut' }}
|
|
/>
|
|
<motion.div
|
|
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 rounded-full bg-[#6C5CE7]/8 blur-3xl"
|
|
animate={{ scale: [1, 1.1, 1] }}
|
|
transition={{ duration: 6, repeat: Infinity, ease: 'easeInOut' }}
|
|
/>
|
|
|
|
<div className="relative max-w-7xl mx-auto">
|
|
<div className="flex flex-col md:flex-row items-center md:items-start justify-between gap-10">
|
|
{/* Left: Text content — plain div, no opacity animation */}
|
|
<div className="flex-1 text-center md:text-left">
|
|
<p className="text-xs font-semibold text-[#6C5CE7] mb-4 tracking-widest uppercase">
|
|
Marketing Execution Plan
|
|
</p>
|
|
|
|
<h1 className="font-serif text-4xl md:text-5xl font-bold text-[#0A1128] mb-3">
|
|
{clinicName}
|
|
</h1>
|
|
|
|
<p className="text-xl text-slate-600 mb-8">
|
|
{clinicNameEn}
|
|
</p>
|
|
|
|
<div className="flex flex-wrap gap-3 justify-center md:justify-start">
|
|
<span className="inline-flex items-center gap-2 rounded-full bg-white/60 backdrop-blur-sm border border-white/40 px-3 py-1 text-sm font-medium text-slate-700">
|
|
<CalendarFilled size={14} className="text-slate-400" />
|
|
{formatDate(date)}
|
|
</span>
|
|
<span className="inline-flex items-center gap-2 rounded-full bg-white/60 backdrop-blur-sm border border-white/40 px-3 py-1 text-sm font-medium text-slate-700">
|
|
<GlobeFilled size={14} className="text-slate-400" />
|
|
{targetUrl}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: 90 Days badge */}
|
|
<div className="shrink-0">
|
|
<div className="w-32 h-32 rounded-full bg-gradient-to-r from-[#4F1DA1] to-[#021341] flex flex-col items-center justify-center shadow-lg">
|
|
<span className="text-4xl font-bold text-white leading-none">
|
|
90
|
|
</span>
|
|
<span className="text-sm text-white/60">Days</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|