feat: Hero section copy & design refinement
- Badge: "Infinite Marketing" → "Agentic AI Marketing Automation" - Headline: "Infinite Growth Marketing Engine." with fine-tuned kerning - Subtitle: Option B copy (learns, improves, accelerates — automatically) - Icon: PrismFilled infinity loop with gradient shading - Add vercel.json SPA rewrite rules, .vercel to gitignore Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>claude/bold-hawking
parent
bbb7a0de60
commit
3a6d3891ce
|
|
@ -6,3 +6,4 @@ coverage/
|
||||||
*.log
|
*.log
|
||||||
.env*
|
.env*
|
||||||
!.env.example
|
!.env.example
|
||||||
|
.vercel
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { useNavigate } from 'react-router';
|
import { useNavigate } from 'react-router';
|
||||||
import { motion } from 'motion/react';
|
import { motion } from 'motion/react';
|
||||||
import { ArrowRight, Sparkles } from 'lucide-react';
|
import { ArrowRight } from 'lucide-react';
|
||||||
|
import { PrismFilled } from './icons/FilledIcons';
|
||||||
|
|
||||||
export default function Hero() {
|
export default function Hero() {
|
||||||
const [url, setUrl] = useState('');
|
const [url, setUrl] = useState('');
|
||||||
|
|
@ -23,18 +24,18 @@ export default function Hero() {
|
||||||
transition={{ duration: 0.6 }}
|
transition={{ duration: 0.6 }}
|
||||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/60 backdrop-blur-sm border border-white/40 shadow-sm mb-8"
|
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/60 backdrop-blur-sm border border-white/40 shadow-sm mb-8"
|
||||||
>
|
>
|
||||||
<Sparkles className="w-4 h-4 text-accent" />
|
<PrismFilled size={16} className="text-accent" />
|
||||||
<span className="text-sm font-medium text-slate-700">Infinite Marketing for Premium Medical Business & Marketing Agency</span>
|
<span className="text-sm font-medium text-slate-700">Agentic AI Marketing Automation for Premium Medical Business & Marketing Agency</span>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<motion.h1
|
<motion.h1
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.6, delay: 0.1 }}
|
transition={{ duration: 0.6, delay: 0.1 }}
|
||||||
className="text-5xl md:text-7xl font-serif font-bold text-primary-900 leading-[1.1] tracking-tight mb-6"
|
className="text-5xl md:text-7xl font-serif font-bold text-primary-900 leading-[1.1] tracking-[-0.02em] mb-6"
|
||||||
>
|
>
|
||||||
AI Marketing Engine <br className="hidden md:block" />
|
<span className="tracking-[0.05em]">In<span className="ml-[-0.04em]">f</span><span className="ml-[-0.04em]">inite</span></span> Growth <br className="hidden md:block" />
|
||||||
<span className="text-gradient">Infinite Marketing.</span>
|
<span className="text-gradient">Marketing Engine.</span>
|
||||||
</motion.h1>
|
</motion.h1>
|
||||||
|
|
||||||
<motion.p
|
<motion.p
|
||||||
|
|
@ -43,9 +44,8 @@ export default function Hero() {
|
||||||
transition={{ duration: 0.6, delay: 0.2 }}
|
transition={{ duration: 0.6, delay: 0.2 }}
|
||||||
className="text-lg md:text-xl text-slate-600 mb-10 max-w-3xl mx-auto leading-relaxed"
|
className="text-lg md:text-xl text-slate-600 mb-10 max-w-3xl mx-auto leading-relaxed"
|
||||||
>
|
>
|
||||||
Infinite Marketing for Premium Medical Business & Marketing Agency. <br className="hidden md:block"/>
|
Marketing that learns, improves, and accelerates — automatically. <br className="hidden md:block"/>
|
||||||
AI가 콘텐츠를 만들고 데이터가 마케팅을 개선합니다.
|
쓸수록 더 정교해지는 AI 마케팅 엔진. 콘텐츠 기획, 생성, 영상 제작, 채널 배포, 데이터 분석까지 하나로.
|
||||||
콘텐츠 기획, 생성, 영상 제작, 채널 배포, 데이터 분석을 하나의 자동화 엔진으로.
|
|
||||||
</motion.p>
|
</motion.p>
|
||||||
|
|
||||||
<motion.div
|
<motion.div
|
||||||
|
|
|
||||||
|
|
@ -133,3 +133,32 @@ export function MusicFilled({ size = 20, className = '' }: IconProps) {
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* InfinityLoopFilled — Infinite Marketing loop icon.
|
||||||
|
* HubSpot-style infinity loop with gradient shading.
|
||||||
|
* Horizontal aspect ratio, scaled to match text cap-height.
|
||||||
|
*/
|
||||||
|
export function PrismFilled({ size = 20, className = '' }: IconProps) {
|
||||||
|
const w = Math.round(size * 1.6);
|
||||||
|
const h = size;
|
||||||
|
const id = `inf-grad-${size}`;
|
||||||
|
return (
|
||||||
|
<svg width={w} height={h} viewBox="0 0 28 20" fill="none" className={className}>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id={id} x1="0" y1="0" x2="28" y2="20" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop offset="0%" stopColor="currentColor" stopOpacity="0.9" />
|
||||||
|
<stop offset="45%" stopColor="currentColor" stopOpacity="0.55" />
|
||||||
|
<stop offset="100%" stopColor="currentColor" stopOpacity="0.85" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<path
|
||||||
|
d="M2,10 C2,4 8,4 14,10 C20,16 26,16 26,10 C26,4 20,4 14,10 C8,16 2,16 2,10Z"
|
||||||
|
stroke={`url(#${id})`}
|
||||||
|
strokeWidth="2.8"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"rewrites": [
|
||||||
|
{ "source": "/(.*)", "destination": "/index.html" }
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue