From 3a6d3891ce31a6347fd6f6de06bbb26786752076 Mon Sep 17 00:00:00 2001
From: Haewon Kam <haewonkam@Haewons-MacBook-Pro.local>
Date: Sun, 29 Mar 2026 15:23:43 +0900
Subject: [PATCH] feat: Hero section copy & design refinement
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .gitignore                           |  1 +
 src/components/Hero.tsx              | 18 ++++++++---------
 src/components/icons/FilledIcons.tsx | 29 ++++++++++++++++++++++++++++
 vercel.json                          |  5 +++++
 4 files changed, 44 insertions(+), 9 deletions(-)
 create mode 100644 vercel.json

diff --git a/.gitignore b/.gitignore
index 5a86d2a..ac3f474 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ coverage/
 *.log
 .env*
 !.env.example
+.vercel
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index bf9cc35..ee938b4 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
 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() {
   const [url, setUrl] = useState('');
@@ -23,18 +24,18 @@ export default function Hero() {
           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"
         >
-          <Sparkles className="w-4 h-4 text-accent" />
-          <span className="text-sm font-medium text-slate-700">Infinite Marketing for Premium Medical Business & Marketing Agency</span>
+          <PrismFilled size={16} className="text-accent" />
+          <span className="text-sm font-medium text-slate-700">Agentic AI Marketing Automation for Premium Medical Business & Marketing Agency</span>
         </motion.div>
 
         <motion.h1
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           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="text-gradient">Infinite Marketing.</span>
+          <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">Marketing Engine.</span>
         </motion.h1>
 
         <motion.p
@@ -43,9 +44,8 @@ export default function Hero() {
           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"
         >
-          Infinite Marketing for Premium Medical Business & Marketing Agency. <br className="hidden md:block"/>
-          AI가 콘텐츠를 만들고 데이터가 마케팅을 개선합니다. 
-          콘텐츠 기획, 생성, 영상 제작, 채널 배포, 데이터 분석을 하나의 자동화 엔진으로.
+          Marketing that learns, improves, and accelerates — automatically. <br className="hidden md:block"/>
+          쓸수록 더 정교해지는 AI 마케팅 엔진. 콘텐츠 기획, 생성, 영상 제작, 채널 배포, 데이터 분석까지 하나로.
         </motion.p>
 
         <motion.div
diff --git a/src/components/icons/FilledIcons.tsx b/src/components/icons/FilledIcons.tsx
index f47831b..fc9bf5f 100644
--- a/src/components/icons/FilledIcons.tsx
+++ b/src/components/icons/FilledIcons.tsx
@@ -133,3 +133,32 @@ export function MusicFilled({ size = 20, className = '' }: IconProps) {
     </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>
+  );
+}
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..0d199b2
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,5 @@
+{
+  "rewrites": [
+    { "source": "/(.*)", "destination": "/index.html" }
+  ]
+}