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
Haewon Kam 2026-03-29 15:23:43 +09:00
parent bbb7a0de60
commit 3a6d3891ce
4 changed files with 44 additions and 9 deletions

1
.gitignore vendored
View File

@ -6,3 +6,4 @@ coverage/
*.log *.log
.env* .env*
!.env.example !.env.example
.vercel

View File

@ -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

View File

@ -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>
);
}

5
vercel.json Normal file
View File

@ -0,0 +1,5 @@
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}