diff --git a/src/components/layout/footer/Footer.tsx b/src/components/layout/footer/Footer.tsx
index 54e3cda..d285979 100644
--- a/src/components/layout/footer/Footer.tsx
+++ b/src/components/layout/footer/Footer.tsx
@@ -25,7 +25,7 @@ const footerColumns = [
 
 export default function Footer() {
   return (
-    <footer className="w-full border-t border-[#0B0C12]/8 bg-white">
+    <footer id="footer" className="w-full border-t border-[#0B0C12]/8 bg-white">
       <div className="mx-auto w-[1120px] pt-[52px] pb-[34px]">
         <div className="flex items-center justify-between pb-[30px]">
           <div className="flex items-center gap-[10px]">
diff --git a/src/components/layout/header/HeaderContainer.tsx b/src/components/layout/header/HeaderContainer.tsx
index 0c6a1a8..7e9d5f6 100644
--- a/src/components/layout/header/HeaderContainer.tsx
+++ b/src/components/layout/header/HeaderContainer.tsx
@@ -1,19 +1,46 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Link } from '@tanstack/react-router';
+import { Link, useNavigate } from '@tanstack/react-router';
 import { Button } from '@/components/ui/button';
+import { useGitHubLogin } from '@/hooks/useGitHubLogin';
+import { useIsLoggedIn } from '@/hooks/useIsLoggedIn';
 
 const MAIN_SCROLL_ID = 'app-main-scroll';
 
+const NAV_ITEMS = [
+  { label: '프로그램', id: 'intro' },
+  { label: '고민', id: 'pain' },
+  { label: '추천', id: 'roles' },
+  { label: '기능', id: 'intro' },
+  { label: '혜택', id: 'pricing' },
+  { label: '진행 과정', id: 'process' },
+  { label: '결과물', id: 'showcase' },
+  { label: '후기', id: 'reviews' },
+  { label: '요금', id: 'pricing' },
+  { label: 'FAQ', id: 'footer' },
+] as const;
+
+function getScrollTop() {
+  const scrollElement = document.getElementById(MAIN_SCROLL_ID);
+  return scrollElement ? scrollElement.scrollTop : window.scrollY;
+}
+
+function scrollToSection(sectionId: string) {
+  const target = document.getElementById(sectionId);
+  if (!target) return;
+  const top = target.getBoundingClientRect().top + window.scrollY - 12;
+  window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
+}
+
 function HeaderContainer() {
   const [isVisible, setIsVisible] = useState(true);
 
   const lastScrollY = useRef(0);
+  const navigate = useNavigate();
+  const { startGitHubLogin, isLoading: isLoggingIn } = useGitHubLogin();
+  const [isLoggedIn] = useIsLoggedIn();
 
   const handleScroll = useCallback(() => {
-    const scrollElement = document.getElementById(MAIN_SCROLL_ID);
-    if (!scrollElement) return;
-
-    const currentScrollY = scrollElement.scrollTop;
+    const currentScrollY = getScrollTop();
 
     if (currentScrollY <= 8) {
       setIsVisible(true);
@@ -30,62 +57,56 @@ function HeaderContainer() {
     lastScrollY.current = currentScrollY;
   }, []);
 
+  const handleAuth = useCallback(() => {
+    if (isLoggingIn) return;
+    if (isLoggedIn) {
+      void navigate({ to: '/home' });
+      return;
+    }
+    void startGitHubLogin();
+  }, [isLoggedIn, isLoggingIn, navigate, startGitHubLogin]);
+
   useEffect(() => {
     const scrollElement = document.getElementById(MAIN_SCROLL_ID);
-    if (!scrollElement) return;
+    const target: EventTarget = scrollElement ?? window;
 
-    scrollElement.addEventListener('scroll', handleScroll, { passive: true });
+    target.addEventListener('scroll', handleScroll, { passive: true });
 
     return () => {
-      scrollElement.removeEventListener('scroll', handleScroll);
+      target.removeEventListener('scroll', handleScroll);
     };
   }, [handleScroll]);
 
   return (
     <header
-      className={`sticky top-0 z-20 border-b border-slate-200/80 bg-white/75 backdrop-blur-md transition-transform duration-300 ${
+      className={`fixed inset-x-0 top-0 z-30 border-b border-slate-200/80 bg-white/75 backdrop-blur-md transition-transform duration-300 ${
         isVisible ? 'translate-y-0' : '-translate-y-full'
       }`}
     >
-      <div className="mx-auto flex w-[1440px] items-center justify-between px-40 py-3.5">
+      <div className="mx-auto flex w-full max-w-[1440px] items-center justify-between px-6 py-3.5 lg:px-40">
         <Link to="/" className="text-sm font-bold tracking-[0.08em] text-slate-900">
           Qeploy
         </Link>
-        <nav className="flex items-center gap-0.5 text-[#64748B]">
-          <Button variant={'ghost'} size={'sm'}>
-            프로그램
-          </Button>
-          <Button variant={'ghost'} size={'sm'}>
-            고민
-          </Button>
-          <Button variant={'ghost'} size={'sm'}>
-            추천
-          </Button>
-          <Button variant={'ghost'} size={'sm'}>
-            기능
-          </Button>
-          <Button variant={'ghost'} size={'sm'}>
-            혜택
-          </Button>
-          <Button variant={'ghost'} size={'sm'}>
-            진행 과정
-          </Button>
-          <Button variant={'ghost'} size={'sm'}>
-            결과물
-          </Button>
-          <Button variant={'ghost'} size={'sm'}>
-            후기
-          </Button>
-          <Button variant={'ghost'} size={'sm'}>
-            요금
-          </Button>
-          <Button variant={'ghost'} size={'sm'}>
-            FAQ
-          </Button>
+        <nav className="hidden items-center gap-0.5 text-[#64748B] xl:flex">
+          {NAV_ITEMS.map((item) => (
+            <Button
+              key={`${item.label}-${item.id}`}
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={() => scrollToSection(item.id)}
+            >
+              {item.label}
+            </Button>
+          ))}
         </nav>
         <nav className="flex items-center gap-2">
-          <Button variant={'outline'}>도입 문의</Button>
-          <Button>무료로 시작</Button>
+          <Button type="button" variant="outline" disabled={isLoggingIn} onClick={handleAuth}>
+            {isLoggedIn ? '워크스페이스' : '도입 문의'}
+          </Button>
+          <Button type="button" disabled={isLoggingIn} onClick={handleAuth}>
+            무료로 시작
+          </Button>
         </nav>
       </div>
     </header>
diff --git a/src/components/layout/main/HeroSection.tsx b/src/components/layout/main/HeroSection.tsx
index 34a3a23..90722ed 100644
--- a/src/components/layout/main/HeroSection.tsx
+++ b/src/components/layout/main/HeroSection.tsx
@@ -1,104 +1,369 @@
+import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from '@tanstack/react-router';
-import { useCallback } from 'react';
-import { Button } from '@/components/ui/button';
-import githubIcon from '@/assets/icons/github.svg';
-import heroSectionImage from '@/assets/images/heroSection_img.svg';
-import heroSectionBgImage from '@/assets/images/heroSection_bg_img.svg';
+import { ArrowRight, ChevronDown, X } from 'lucide-react';
+import HeaderContainer from '@/components/layout/header/HeaderContainer';
 import { useGitHubLogin } from '@/hooks/useGitHubLogin';
 import { useIsLoggedIn } from '@/hooks/useIsLoggedIn';
+import { cn } from '@/lib/utils';
 
-const headlineGradientBg =
-  'bg-[linear-gradient(90deg,#6D28D9_0%,#7C3AED_42%,#A855F7_100%)] bg-clip-text text-transparent';
+type Phase =
+  | 'logo'
+  | 'roll'
+  | 'dot'
+  | 'orbit'
+  | 'scatter'
+  | 'pill'
+  | 'type'
+  | 'cuts'
+  | 'headline'
+  | 'copy';
+
+const LOGO_CHARS = ['Q', 'e', 'p', 'l', 'o', 'y'] as const;
+
+const PROMPT = 'IT 기업 홈페이지, 블루 계열로 만들어주세요';
+
+const CUT_WORDS = ['랜딩', '포트폴리오', '쇼핑몰', '관리자', '미디어'] as const;
+
+const ROLES = ['웹에이전시', '디자인 스튜디오', '개발팀', '배포 파이프라인'] as const;
+
+const ORBIT_WORDS = [
+  { word: 'GitHub', slot: 'top' },
+  { word: 'Agent', slot: 'right' },
+  { word: 'Preview', slot: 'bottom' },
+  { word: 'Deploy', slot: 'left' },
+] as const;
+
+const PHASE_AT: Array<[Phase, number]> = [
+  ['logo', 0],
+  ['roll', 900],
+  ['dot', 1900],
+  ['orbit', 2700],
+  ['scatter', 5000],
+  ['pill', 6600],
+  ['type', 7600],
+  ['cuts', 11200],
+  ['headline', 14200],
+  ['copy', 15600],
+];
+
+function scrollToSection(sectionId: string) {
+  const target = document.getElementById(sectionId);
+  if (!target) return;
+  const top = target.getBoundingClientRect().top + window.scrollY - 12;
+  window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
+}
+
+function scatterOffset(word: string, index: number, slot: string) {
+  const mid = (word.length - 1) / 2;
+  const x = (index - mid) * 34;
+  const spread = 18 + index * 12;
+
+  if (slot === 'top') return { x, y: -36 - spread };
+  if (slot === 'bottom') return { x, y: 36 + spread };
+  if (slot === 'left') return { x: -40 - spread, y: (index - mid) * 22 };
+  return { x: 40 + spread, y: (index - mid) * 22 };
+}
 
 function HeroSection() {
-  const {
-    startGitHubLogin,
-    isLoading: isLoggingIn,
-    errorMessage: loginErrorMessage,
-  } = useGitHubLogin();
-  const [isLoggedIn] = useIsLoggedIn();
+  const [bannerOpen, setBannerOpen] = useState(true);
+  const [phase, setPhase] = useState<Phase>('logo');
+  const [typed, setTyped] = useState('');
+  const [cutIndex, setCutIndex] = useState(0);
+  const [roleIndex, setRoleIndex] = useState(0);
+  const [reduceMotion] = useState(
+    () =>
+      typeof window !== 'undefined' &&
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+  );
+
   const navigate = useNavigate();
+  const { startGitHubLogin, isLoading: isLoggingIn } = useGitHubLogin();
+  const [isLoggedIn] = useIsLoggedIn();
 
-  const handleGitHubLogin = useCallback(() => {
+  const showLogo = phase === 'logo' || phase === 'roll';
+  const showDot = phase === 'dot' || phase === 'orbit' || phase === 'scatter';
+  const showOrbit = phase === 'orbit' || phase === 'scatter';
+  const showPill = phase === 'pill' || phase === 'type';
+  const showCuts = phase === 'cuts';
+  const showHeadline = phase === 'headline' || phase === 'copy';
+  const showCopy = phase === 'copy';
+
+  const handleAuth = useCallback(() => {
     if (isLoggingIn) return;
     if (isLoggedIn) {
       void navigate({ to: '/home' });
       return;
     }
     void startGitHubLogin();
-  }, [isLoggingIn, isLoggedIn, navigate, startGitHubLogin]);
+  }, [isLoggedIn, isLoggingIn, navigate, startGitHubLogin]);
+
+  useEffect(() => {
+    if (reduceMotion) {
+      setPhase('copy');
+      setTyped(PROMPT);
+      return;
+    }
+
+    const timers = PHASE_AT.filter(([, at]) => at > 0).map(([nextPhase, at]) =>
+      window.setTimeout(() => setPhase(nextPhase), at),
+    );
+
+    return () => {
+      timers.forEach((timer) => window.clearTimeout(timer));
+    };
+  }, [reduceMotion]);
+
+  useEffect(() => {
+    if (phase !== 'type' || reduceMotion) return;
+
+    setTyped('');
+    let index = 0;
+    const timer = window.setInterval(() => {
+      index += 1;
+      setTyped(PROMPT.slice(0, index));
+      if (index >= PROMPT.length) window.clearInterval(timer);
+    }, 48);
+
+    return () => window.clearInterval(timer);
+  }, [phase, reduceMotion]);
+
+  useEffect(() => {
+    if (phase !== 'cuts' || reduceMotion) return;
+
+    setCutIndex(0);
+    const timer = window.setInterval(() => {
+      setCutIndex((current) => (current + 1) % CUT_WORDS.length);
+    }, 620);
+
+    return () => window.clearInterval(timer);
+  }, [phase, reduceMotion]);
+
+  useEffect(() => {
+    if (!showHeadline) return;
+
+    const timer = window.setInterval(() => {
+      setRoleIndex((current) => (current + 1) % ROLES.length);
+    }, 2200);
+
+    return () => window.clearInterval(timer);
+  }, [showHeadline]);
 
   return (
-    <section className="relative w-full">
-      <img
-        src={heroSectionBgImage}
-        alt="배경이미지"
-        aria-hidden
-        className="pointer-events-none absolute top-0 right-0 z-0 max-w-none select-none"
-      />
-      <div className="relative z-10 flex items-center justify-center gap-9 pb-44 pt-20">
-        <div className="flex flex-col gap-2.5 w-[662px]">
-          <p className="text-[#5B21B6] text-lg font-semibold">AI 웹 제작 · 프롬프트부터 배포까지</p>
-          <p className="typo-h1-bd leading-tight">
-            <span className={`block w-max max-w-full ${headlineGradientBg}`}>
-              기획서 없이도 괜찮아요,
-            </span>
-            <span className="block w-max max-w-full tracking-tight">
-              <span className={`inline ${headlineGradientBg} tracking-tight`}>
-                말로 설명하면 사이트가 완성
+    <section className="relative isolate h-screen w-full overflow-hidden bg-white text-[#111827]">
+      <HeaderContainer />
+
+      {bannerOpen ? (
+        <div className="absolute inset-x-0 top-16 z-20">
+          <div className="relative flex w-full items-center justify-center bg-[#1e1b4b] px-12 py-2.5 text-white">
+            <p className="truncate text-center text-[13px]">
+              <b>쓰던 GitHub에 Qeploy를 연결하세요.</b> 말로 설명하면 홈페이지가 만들어집니다.
+            </p>
+            <button
+              type="button"
+              onClick={handleAuth}
+              disabled={isLoggingIn}
+              className="ml-3 shrink-0 rounded-md border border-white/70 px-3 py-1 text-[12px] font-semibold disabled:opacity-60"
+            >
+              연결 방법 보기
+            </button>
+            <button
+              type="button"
+              aria-label="안내 닫기"
+              onClick={() => setBannerOpen(false)}
+              className="absolute right-4 text-white/80 hover:text-white"
+            >
+              <X className="size-4" />
+            </button>
+          </div>
+        </div>
+      ) : null}
+
+      <div className="relative z-10 flex h-full items-center justify-center">
+        <div className="pointer-events-none absolute inset-0">
+          <span
+            className={cn(
+              'absolute top-1/2 left-1/2 size-[420px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[radial-gradient(circle,rgba(124,58,237,0.28)_0%,rgba(124,58,237,0)_70%)] transition-opacity duration-500',
+              showDot || showPill ? 'hero-wave' : 'opacity-0',
+            )}
+          />
+          <span
+            className={cn(
+              'absolute top-1/2 left-1/2 size-[120px] rounded-full border-2 border-[#7C3AED]/50 transition-opacity duration-500',
+              showDot ? 'hero-ring' : 'opacity-0',
+            )}
+          />
+          <span
+            className={cn(
+              'absolute top-1/2 left-1/2 size-[168px] rounded-full border border-[#7C3AED]/25 transition-opacity duration-500',
+              showDot ? 'hero-ring [animation-delay:280ms]' : 'opacity-0',
+            )}
+          />
+        </div>
+
+        <div
+          className={cn(
+            'absolute flex items-end gap-2 transition-all duration-700',
+            showLogo ? 'scale-100 opacity-100' : 'pointer-events-none scale-75 opacity-0',
+          )}
+        >
+          <p className="flex overflow-hidden text-[64px] leading-none font-extrabold tracking-tight sm:text-[84px]">
+            {LOGO_CHARS.map((char, index) => (
+              <span
+                key={`${char}-${index}`}
+                className="hero-char inline-block text-[#7C3AED]"
+                style={{ animationDelay: `${index * 70}ms` }}
+              >
+                {char}
               </span>
-              <span className="text-[#111827] tracking-tight">됩니다</span>
-            </span>
+            ))}
+          </p>
+          <div className="mb-1 h-10 w-[8.5rem] overflow-hidden text-[32px] font-bold sm:h-12 sm:w-[11rem] sm:text-[40px]">
+            <div
+              className={cn(
+                'transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)]',
+                phase === 'roll' || !showLogo
+                  ? '-translate-y-10 sm:-translate-y-12'
+                  : 'translate-y-0',
+              )}
+            >
+              <p className="flex h-10 items-center leading-none text-[#94A3B8] sm:h-12">AI</p>
+              <p className="flex h-10 items-center leading-none text-[#7C3AED] sm:h-12">Agent</p>
+            </div>
+          </div>
+        </div>
+
+        <div
+          className={cn(
+            'hero-morph absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center overflow-hidden',
+            showDot &&
+              'h-[88px] w-[88px] rounded-full bg-[#7C3AED] shadow-[0_0_40px_rgba(124,58,237,0.35)]',
+            phase === 'pill' &&
+              'h-16 w-[min(92vw,540px)] rounded-full bg-[#7C3AED] shadow-[0_0_36px_rgba(124,58,237,0.28)]',
+            phase === 'type' &&
+              'h-16 w-[min(92vw,540px)] rounded-full bg-white shadow-[0_0_28px_rgba(124,58,237,0.18)]',
+            !showDot && !showPill && 'h-8 w-8 scale-50 rounded-full bg-[#7C3AED] opacity-0',
+          )}
+        >
+          {showDot ? (
+            <span className="text-[40px] leading-none font-bold text-white">Q</span>
+          ) : null}
+          {showPill ? (
+            <p className="w-full px-7 text-left text-[18px] font-medium tracking-tight text-[#111827]">
+              {typed}
+              {phase === 'type' ? (
+                <span className="hero-caret ml-0.5 inline-block h-[1.05em] w-px bg-[#7C3AED] align-[-2px]" />
+              ) : null}
+            </p>
+          ) : null}
+        </div>
+
+        {showOrbit
+          ? ORBIT_WORDS.map((item) => (
+              <p
+                key={item.word}
+                className={cn(
+                  'hero-orbit-word absolute text-[28px] font-semibold tracking-tight text-[#111827]',
+                  item.slot === 'top' && 'top-[calc(50%-132px)] left-1/2 -translate-x-1/2',
+                  item.slot === 'bottom' && 'bottom-[calc(50%-132px)] left-1/2 -translate-x-1/2',
+                  item.slot === 'left' && 'top-1/2 left-[calc(50%-220px)] -translate-y-1/2',
+                  item.slot === 'right' && 'top-1/2 right-[calc(50%-220px)] -translate-y-1/2',
+                )}
+              >
+                {item.word.split('').map((char, index) => {
+                  const offset = scatterOffset(item.word, index, item.slot);
+                  const scattered = phase === 'scatter';
+                  return (
+                    <span
+                      key={`${item.word}-${index}`}
+                      className="inline-block transition-all duration-700 ease-[cubic-bezier(0.22,1,0.36,1)]"
+                      style={{
+                        transform: scattered
+                          ? `translate(${offset.x}px, ${offset.y}px)`
+                          : 'translate(0, 0)',
+                        opacity: scattered ? 0.55 : 1,
+                      }}
+                    >
+                      {char}
+                    </span>
+                  );
+                })}
+              </p>
+            ))
+          : null}
+
+        {showCuts ? (
+          <p
+            key={CUT_WORDS[cutIndex]}
+            className="hero-cut-word absolute text-[72px] font-extrabold tracking-tight sm:text-[104px]"
+          >
+            {CUT_WORDS[cutIndex]}
+            <span className="ml-1 inline-block size-[0.18em] translate-y-[-0.12em] rounded-full bg-[#7C3AED]" />
           </p>
-          <p className="text-[#475569] text-md">
-            디자인·카피·레이아웃을 AI가 한 번에 제안하고, 에이전트와 대화하며 계속 다듬을 수
-            있습니다.
+        ) : null}
+
+        <div
+          className={cn(
+            'relative z-10 flex max-w-[760px] flex-col items-center text-center transition-all duration-700',
+            showHeadline
+              ? 'translate-y-0 opacity-100'
+              : 'pointer-events-none translate-y-8 opacity-0',
+          )}
+        >
+          <h1 className="text-[32px] leading-[1.18] font-extrabold tracking-tight sm:text-[52px]">
+            당신의 아이디어는 오늘부터
+            <br />
+            <span key={ROLES[roleIndex]} className="hero-role-in inline-block text-[#7C3AED]">
+              {ROLES[roleIndex]}
+            </span>
+            입니다
+            <span className="ml-1 inline-block size-[0.18em] translate-y-[-0.18em] rounded-full bg-[#7C3AED]" />
+          </h1>
+          <p
+            className={cn(
+              'mt-5 text-[15px] leading-relaxed text-[#475569] transition-all delay-150 duration-700 sm:text-[17px]',
+              showCopy ? 'translate-y-0 opacity-100' : 'translate-y-3 opacity-0',
+            )}
+          >
+            Qeploy를 연결하면 말로 설명한 서비스가
             <br />
-            혼자 붙잡고 있던 랜딩·포트폴리오를{' '}
-            <span className="text-[#111827] font-semibold">실제 URL까지</span> 이어 보세요.
+            디자인되고, 개발되고, 배포까지 이어집니다.
           </p>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            disabled={isLoggingIn}
-            onClick={handleGitHubLogin}
-            className="border-[#767676] py-2.5 text-md font-semibold rounded-2xl w-[578px] disabled:cursor-not-allowed disabled:opacity-50"
+          <div
+            className={cn(
+              'pointer-events-auto mt-8 flex items-center gap-3 transition-all delay-200 duration-700',
+              showCopy
+                ? 'translate-y-0 opacity-100'
+                : 'pointer-events-none translate-y-3 opacity-0',
+            )}
           >
-            <div className="flex items-center gap-4.5">
-              {!isLoggedIn ? (
-                <img src={githubIcon} alt="GitHub" className="h-[38px] w-[38px]" />
-              ) : null}
-              {isLoggingIn
-                ? '연결 중...'
-                : isLoggedIn
-                  ? '워크스페이스 이동하기'
-                  : 'GitHub로 연결하기'}
-            </div>
-          </Button>
-          {loginErrorMessage ? <p className="text-sm text-red-600">{loginErrorMessage}</p> : null}
-          <div className="flex items-center gap-2.5">
-            <Button variant="outline" size="xs" className="rounded-full px-4">
-              <p className="font-semibold">
-                에이전트 <span className="text-xs text-[#475569]">대화형 수정</span>
-              </p>
-            </Button>
-            <Button variant="outline" size="xs" className="rounded-full px-4">
-              <p className="font-semibold">
-                ZIP·GitHub <span className="text-xs text-[#475569]">가져오기</span>
-              </p>
-            </Button>
-            <Button variant="outline" size="xs" className="rounded-full px-4">
-              <p className="font-semibold">
-                빌드·배포 <span className="text-xs text-[#475569]">한 흐름</span>
-              </p>
-            </Button>
+            <button
+              type="button"
+              onClick={() => scrollToSection('intro')}
+              className="h-12 rounded-full border border-[#CBD5E1] px-6 text-[14px] font-bold text-[#334155] transition hover:-translate-y-0.5 hover:bg-slate-50"
+            >
+              자세히 보기
+            </button>
+            <button
+              type="button"
+              disabled={isLoggingIn}
+              onClick={handleAuth}
+              className="inline-flex h-12 items-center gap-1 rounded-full bg-[#7C3AED] px-6 text-[14px] font-bold text-white transition hover:-translate-y-0.5 hover:bg-[#6D28D9] disabled:opacity-60"
+            >
+              무료로 시작하기
+              <ArrowRight className="size-4" />
+            </button>
           </div>
         </div>
-        <div className="relative shrink-0">
-          <img src={heroSectionImage} alt="" className="relative" />
-        </div>
       </div>
+
+      <button
+        type="button"
+        onClick={() => scrollToSection('showcase')}
+        className="absolute bottom-10 left-1/2 z-20 flex -translate-x-1/2 items-center gap-1 text-[14px] font-semibold text-[#334155] transition hover:text-[#7C3AED]"
+      >
+        Qeploy로 만든 제작 사례 보기
+        <ChevronDown className="size-4" />
+      </button>
     </section>
   );
 }
diff --git a/src/components/layout/main/MainContainer.tsx b/src/components/layout/main/MainContainer.tsx
index 96d96e6..130ab5c 100644
--- a/src/components/layout/main/MainContainer.tsx
+++ b/src/components/layout/main/MainContainer.tsx
@@ -1,4 +1,3 @@
-import HeaderContainer from '@/components/layout/header/HeaderContainer';
 import HeroSection from './HeroSection';
 import HighlightSection from './HighlightSection';
 import PainPointsSection from './PainPointsSection';
@@ -14,8 +13,7 @@ import Footer from '../footer/Footer';
 
 function MainContainer() {
   return (
-    <main className="w-[1440px] mx-auto flex flex-col">
-      <HeaderContainer />
+    <main className="mx-auto flex w-full flex-col">
       <HeroSection />
       <HighlightSection />
       <PainPointsSection />
diff --git a/src/components/layout/main/OutputShowcase.tsx b/src/components/layout/main/OutputShowcase.tsx
index ad9e028..b0c81f4 100644
--- a/src/components/layout/main/OutputShowcase.tsx
+++ b/src/components/layout/main/OutputShowcase.tsx
@@ -84,7 +84,7 @@ function OutputShowcase() {
   }, [categoryFilter]);
 
   return (
-    <section className="w-full bg-white">
+    <section id="showcase" className="w-full scroll-mt-4 bg-white">
       <div className="mx-auto flex max-w-[1080px] flex-col items-center px-6 py-20">
         <header className="flex flex-col items-center gap-3 text-center">
           <h2 className="text-[32px] font-bold tracking-tight text-[#0f172a] sm:text-[36px]">
diff --git a/src/components/layout/main/PainPointsSection.tsx b/src/components/layout/main/PainPointsSection.tsx
index c998b27..87c3fd3 100644
--- a/src/components/layout/main/PainPointsSection.tsx
+++ b/src/components/layout/main/PainPointsSection.tsx
@@ -4,7 +4,10 @@ const infoCardClassName = 'w-[330px] shadow-[0_10px_40px_-8px_rgba(15,23,42,0.12
 
 function PainPointsSection() {
   return (
-    <section className="w-full bg-[linear-gradient(180deg,#FFFFFF_0%,#F8FAFC_100%)]">
+    <section
+      id="pain"
+      className="w-full scroll-mt-4 bg-[linear-gradient(180deg,#FFFFFF_0%,#F8FAFC_100%)]"
+    >
       <div className="flex flex-col gap-2 items-start justify-center py-16 px-52">
         <p className="text-[#7C3AED] text-lg font-extrabold">이런 고민 없으신가요?</p>
         <p className="text-[#111827] typo-h2-bd">혼자 만들기엔 막막한 순간들</p>
diff --git a/src/components/layout/main/PricingSection.tsx b/src/components/layout/main/PricingSection.tsx
index 630736c..79421ac 100644
--- a/src/components/layout/main/PricingSection.tsx
+++ b/src/components/layout/main/PricingSection.tsx
@@ -75,7 +75,10 @@ const pricingCardItems: PricingCardProps[] = [
 
 function PricingSection() {
   return (
-    <section className="w-full bg-[linear-gradient(180deg,#FFFFFF_0%,#F8FAFC_100%)]">
+    <section
+      id="pricing"
+      className="w-full scroll-mt-4 bg-[linear-gradient(180deg,#FFFFFF_0%,#F8FAFC_100%)]"
+    >
       <div className="flex flex-col gap-2 items-start justify-center py-16 px-52">
         <p className="text-[#7C3AED] text-lg font-extrabold">요금 안내</p>
         <p className="text-[#111827] typo-h2-bd">팀 규모에 맞는 플랜</p>
diff --git a/src/components/layout/main/ProcessSection.tsx b/src/components/layout/main/ProcessSection.tsx
index c73df1a..26e8ef5 100644
--- a/src/components/layout/main/ProcessSection.tsx
+++ b/src/components/layout/main/ProcessSection.tsx
@@ -49,7 +49,10 @@ const processCards = [
 
 function ProcessSection() {
   return (
-    <section className="w-full bg-[linear-gradient(180deg,#FDFBFF_0%,#F3EEFF_100%)]">
+    <section
+      id="process"
+      className="w-full scroll-mt-4 bg-[linear-gradient(180deg,#FDFBFF_0%,#F3EEFF_100%)]"
+    >
       <div className="flex flex-col gap-2 items-start justify-center py-16 px-52">
         <p className="text-[#7C3AED] text-lg font-extrabold">프로그램 진행 과정</p>
         <p className="text-[#111827] typo-h2-bd">이렇게 이어집니다</p>
diff --git a/src/components/layout/main/RoleSpecificUsage.tsx b/src/components/layout/main/RoleSpecificUsage.tsx
index b3d463a..1a73c3f 100644
--- a/src/components/layout/main/RoleSpecificUsage.tsx
+++ b/src/components/layout/main/RoleSpecificUsage.tsx
@@ -4,7 +4,10 @@ const infoCardClassName = 'bg-[linear-gradient(180deg,#F8FAFC_0%,#FFFFFF_100%)]'
 
 function RoleSpecificUsage() {
   return (
-    <section className="w-full bg-[linear-gradient(180deg,#FFFFFF_0%,#F8FAFC_100%)]">
+    <section
+      id="roles"
+      className="w-full scroll-mt-4 bg-[linear-gradient(180deg,#FFFFFF_0%,#F8FAFC_100%)]"
+    >
       <div className="flex flex-col gap-2 items-start justify-center py-16 px-52">
         <p className="text-[#7C3AED] text-lg font-extrabold">이런 분들에게</p>
         <p className="text-[#111827] typo-h2-bd">직군별로 이렇게 씁니다</p>
diff --git a/src/components/layout/main/ServiceIntro.tsx b/src/components/layout/main/ServiceIntro.tsx
index 54e5a45..d01d6db 100644
--- a/src/components/layout/main/ServiceIntro.tsx
+++ b/src/components/layout/main/ServiceIntro.tsx
@@ -5,7 +5,10 @@ const descriptionClassName = 'typo-b5-rg';
 
 function ServiceIntro() {
   return (
-    <section className="w-full bg-[linear-gradient(180deg,#FDFBFF_0%,#F3EEFF_100%)]">
+    <section
+      id="intro"
+      className="w-full scroll-mt-4 bg-[linear-gradient(180deg,#FDFBFF_0%,#F3EEFF_100%)]"
+    >
       <div className="flex flex-col gap-2 items-start justify-center py-16 px-52">
         <p className="text-[#7C3AED] text-lg font-extrabold"> Qeploy란?</p>
         <p className="text-[#111827] typo-h2-bd">아이디어부터 출시까지, AI와 함께하는 웹 제작</p>
diff --git a/src/components/layout/main/UserReviews.tsx b/src/components/layout/main/UserReviews.tsx
index 0da662b..c3d3a15 100644
--- a/src/components/layout/main/UserReviews.tsx
+++ b/src/components/layout/main/UserReviews.tsx
@@ -2,7 +2,7 @@ import InfoCard from '@/components/common/InfoCard';
 
 function UserReviews() {
   return (
-    <section className="w-full bg-white border-t border-[#E2E8F0]">
+    <section id="reviews" className="w-full scroll-mt-4 bg-white border-t border-[#E2E8F0]">
       <div className="flex flex-col gap-2 items-start justify-center py-16 px-52">
         <p className="text-[#7C3AED] text-lg font-extrabold">이용 후기</p>
         <p className="text-[#111827] typo-h2-bd">팀에서 남긴 한 줄 평가</p>
diff --git a/src/components/layout/onboarding/CloudOnboardingGuide.tsx b/src/components/layout/onboarding/CloudOnboardingGuide.tsx
index 20c7165..33f1acb 100644
--- a/src/components/layout/onboarding/CloudOnboardingGuide.tsx
+++ b/src/components/layout/onboarding/CloudOnboardingGuide.tsx
@@ -270,8 +270,8 @@ function CloudOnboardingGuide() {
             내 클라우드에 백엔드를 올리기 위한 딱 한 번의 준비
           </h1>
           <p className="mt-4 max-w-[34rem] text-[15px] leading-relaxed text-[#64748b]">
-            Qeploy가 당신의 백엔드 서버를 직접 띄우려면, 당신 소유의 AWS 계정 한 개가
-            필요합니다. AWS를 처음 써봐도 괜찮습니다 — 순서대로만 따라오면 됩니다.
+            Qeploy가 당신의 백엔드 서버를 직접 띄우려면, 당신 소유의 AWS 계정 한 개가 필요합니다.
+            AWS를 처음 써봐도 괜찮습니다 — 순서대로만 따라오면 됩니다.
           </p>
           <p className="mt-5 inline-flex items-center gap-2 rounded-full border border-[#e2e8f0] bg-[#f5f3ff] px-3.5 py-1.5 text-[13px] font-medium text-[#4c1d95]">
             <span className="size-2 rounded-full bg-[#16a34a]" aria-hidden />
@@ -292,7 +292,9 @@ function CloudOnboardingGuide() {
           </p>
           <p className="mt-2 text-[14px] leading-relaxed text-[#64748b]">
             그 대신 딱 한 번,{' '}
-            <strong className="font-semibold text-[#0f172a]">당신의 AWS 계정을 Qeploy에 연결</strong>
+            <strong className="font-semibold text-[#0f172a]">
+              당신의 AWS 계정을 Qeploy에 연결
+            </strong>
             해 주면 됩니다. 그다음부터는 &ldquo;백엔드 올려줘&rdquo;라고 요청하면 Qeploy가 알아서
             빌드하고 서버를 띄웁니다.
           </p>
@@ -336,9 +338,7 @@ function CloudOnboardingGuide() {
 
           <p className="mt-4 text-[13px] leading-relaxed text-[#0f172a]">
             첫 12개월은 AWS 프리티어로 더 저렴할 수 있고,{' '}
-            <strong className="font-semibold">
-              서버를 종료하면 그 순간부터 청구가 멈춥니다.
-            </strong>{' '}
+            <strong className="font-semibold">서버를 종료하면 그 순간부터 청구가 멈춥니다.</strong>{' '}
             만들기 전에 Qeploy가 예상 비용을 보여주고, 당신이 승인해야만 진행합니다.
           </p>
         </div>
@@ -415,13 +415,13 @@ function CloudOnboardingGuide() {
             한 곳에서 멈춰도 괜찮습니다
           </h2>
           <p className="mt-3 text-[14px] leading-relaxed text-[#64748b]">
-            어느 단계든 화면 안내를 그대로 따르면 됩니다. 계정을 만드는 1단계가 가장 낯설 수
-            있는데, 그건 당신 명의의 계정이라 우리가 대신 만들어 드릴 수는 없는 부분입니다 — 대신
+            어느 단계든 화면 안내를 그대로 따르면 됩니다. 계정을 만드는 1단계가 가장 낯설 수 있는데,
+            그건 당신 명의의 계정이라 우리가 대신 만들어 드릴 수는 없는 부분입니다 — 대신
             준비물(이메일·카드·휴대폰)만 있으면 화면을 따라 충분히 하실 수 있습니다.
           </p>
           <p className="mt-5 text-[13px] leading-relaxed text-[#94a3b8]">
-            이 안내는 백엔드(서버형) 배포를 위한 것입니다. 정적 사이트만 올릴 때는 AWS 연결
-            없이도 배포됩니다.
+            이 안내는 백엔드(서버형) 배포를 위한 것입니다. 정적 사이트만 올릴 때는 AWS 연결 없이도
+            배포됩니다.
           </p>
         </footer>
       </div>
diff --git a/src/components/layout/project/AgentClarificationForm.tsx b/src/components/layout/project/AgentClarificationForm.tsx
index 83e817b..890a67e 100644
--- a/src/components/layout/project/AgentClarificationForm.tsx
+++ b/src/components/layout/project/AgentClarificationForm.tsx
@@ -40,7 +40,8 @@ function AgentClarificationForm({
     */
     const recommended = clarification.options.filter((option) => option.recommended === true);
     if (recommended.length === 0) return [];
-    const picked = clarification.inputType === 'MULTI_SELECT' ? recommended : recommended.slice(0, 1);
+    const picked =
+      clarification.inputType === 'MULTI_SELECT' ? recommended : recommended.slice(0, 1);
     return picked.map((option) => option.value);
   });
   const [otherText, setOtherText] = useState('');
@@ -80,8 +81,8 @@ function AgentClarificationForm({
         {clarification.question}
       </p>
       <p className="mt-1 text-[11px] text-[#a78bfa]">
-        {isMulti ? '해당하는 것을 모두 고르세요.' : '하나를 고르세요.'} 답하면 하던 작업을
-        이어서 진행합니다.
+        {isMulti ? '해당하는 것을 모두 고르세요.' : '하나를 고르세요.'} 답하면 하던 작업을 이어서
+        진행합니다.
       </p>
 
       <div className="mt-2.5 flex flex-col gap-1.5">
diff --git a/src/components/layout/project/AgentSitePreviewPanel.tsx b/src/components/layout/project/AgentSitePreviewPanel.tsx
index 6d81ab9..506b554 100644
--- a/src/components/layout/project/AgentSitePreviewPanel.tsx
+++ b/src/components/layout/project/AgentSitePreviewPanel.tsx
@@ -101,8 +101,8 @@ function AgentSitePreviewPanel({
         {didReattach ? (
           <div className="flex flex-wrap items-center justify-between gap-2 border-b border-[#fde68a] bg-[#fffbeb] px-4 py-2">
             <p className="text-[12px] leading-relaxed text-[#92400e]">
-              이미 떠 있는 컨테이너에 다시 연결했습니다 — 새로 빌드하지 않았습니다. 저장소를
-              막 연결했거나 그 뒤로 코드가 바뀌었다면 아직 옛 화면입니다.
+              이미 떠 있는 컨테이너에 다시 연결했습니다 — 새로 빌드하지 않았습니다. 저장소를 막
+              연결했거나 그 뒤로 코드가 바뀌었다면 아직 옛 화면입니다.
             </p>
             <button
               type="button"
diff --git a/src/components/layout/project/CloudConnectGuidePanel.tsx b/src/components/layout/project/CloudConnectGuidePanel.tsx
index 8af19b0..fe9cb65 100644
--- a/src/components/layout/project/CloudConnectGuidePanel.tsx
+++ b/src/components/layout/project/CloudConnectGuidePanel.tsx
@@ -164,8 +164,8 @@ function CloudConnectGuidePanel({
             비워 두면 사용자가 할 수 있는 일이 없다.
           */
           <p className="mt-4 rounded-xl bg-[#fef2f2] px-4 py-3 text-[12px] leading-relaxed text-[#b91c1c]">
-            {extractApiErrorMessage(error) ?? '연결 안내를 불러오지 못했습니다.'} 연결 화면에서
-            직접 등록하실 수 있습니다.
+            {extractApiErrorMessage(error) ?? '연결 안내를 불러오지 못했습니다.'} 연결 화면에서 직접
+            등록하실 수 있습니다.
           </p>
         ) : requirements ? (
           <>
diff --git a/src/components/layout/project/ProjectApprovalsPage.tsx b/src/components/layout/project/ProjectApprovalsPage.tsx
index 3b27e52..7d7a43d 100644
--- a/src/components/layout/project/ProjectApprovalsPage.tsx
+++ b/src/components/layout/project/ProjectApprovalsPage.tsx
@@ -58,8 +58,13 @@ function ProjectApprovalsPage({ projectId }: ProjectApprovalsPageProps) {
   const approveMutation = useMutation({
     // 입력 명세가 있는 승인(REPOSITORY_BINDING)은 값을 실어 보낸다. 비워 보내면
     // 서버가 defaultValue 를 쓴다 — 그래서 payload 는 선택이다
-    mutationFn: ({ approvalId, payload }: { approvalId: number; payload?: Record<string, string> }) =>
-      postApprovalApprove(approvalId, payload),
+    mutationFn: ({
+      approvalId,
+      payload,
+    }: {
+      approvalId: number;
+      payload?: Record<string, string>;
+    }) => postApprovalApprove(approvalId, payload),
     onSuccess: invalidateApprovals,
   });
   const rejectMutation = useMutation({
diff --git a/src/components/layout/project/ProjectDatabaseSection.tsx b/src/components/layout/project/ProjectDatabaseSection.tsx
index 01eb377..0a87cf5 100644
--- a/src/components/layout/project/ProjectDatabaseSection.tsx
+++ b/src/components/layout/project/ProjectDatabaseSection.tsx
@@ -11,11 +11,7 @@ import { usePreviewRuntimeConfigQuery } from '@/api/previewRuntime';
 import { getProjectInfrastructureSettings } from '@/api/projects';
 import { describeProvisionFailure } from '@/lib/provisionFailure';
 import { extractApiErrorMessage } from '@/utils/response';
-import type {
-  CreatedDatabase,
-  DatabaseEngine,
-  DatabaseMethod,
-} from '@/types/database.type';
+import type { CreatedDatabase, DatabaseEngine, DatabaseMethod } from '@/types/database.type';
 
 const QUERY_KEY = 'project-infra-page';
 
@@ -140,70 +136,70 @@ function ProjectDatabaseSection({ projectId }: { projectId: number }) {
 
       {isServerRuntime ? null : (
         <>
-        <div className="mt-4 grid gap-3 sm:grid-cols-2">
-          <label className="flex flex-col gap-1">
-            <span className="text-[12px] font-medium text-[#475569]">방식</span>
-            <select
-              value={method}
-              onChange={(event) => setMethod(event.target.value as DatabaseMethod)}
-              className="h-9 rounded-lg border border-[#e2e8f0] px-2.5 text-[13px]"
-            >
-              {METHOD_OPTIONS.map((option) => (
-                <option key={option.value} value={option.value} disabled={!option.enabled}>
-                  {option.label}
-                </option>
-              ))}
-            </select>
-          </label>
-          <label className="flex flex-col gap-1">
-            <span className="text-[12px] font-medium text-[#475569]">엔진</span>
-            <select
-              value={engine}
-              onChange={(event) => setEngine(event.target.value as DatabaseEngine)}
-              className="h-9 rounded-lg border border-[#e2e8f0] px-2.5 text-[13px]"
-            >
-              {ENGINE_OPTIONS.map((option) => (
-                <option key={option.value} value={option.value}>
-                  {option.label}
-                </option>
-              ))}
-            </select>
-          </label>
-        </div>
+          <div className="mt-4 grid gap-3 sm:grid-cols-2">
+            <label className="flex flex-col gap-1">
+              <span className="text-[12px] font-medium text-[#475569]">방식</span>
+              <select
+                value={method}
+                onChange={(event) => setMethod(event.target.value as DatabaseMethod)}
+                className="h-9 rounded-lg border border-[#e2e8f0] px-2.5 text-[13px]"
+              >
+                {METHOD_OPTIONS.map((option) => (
+                  <option key={option.value} value={option.value} disabled={!option.enabled}>
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label className="flex flex-col gap-1">
+              <span className="text-[12px] font-medium text-[#475569]">엔진</span>
+              <select
+                value={engine}
+                onChange={(event) => setEngine(event.target.value as DatabaseEngine)}
+                className="h-9 rounded-lg border border-[#e2e8f0] px-2.5 text-[13px]"
+              >
+                {ENGINE_OPTIONS.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+            </label>
+          </div>
 
-        {needsPreview ? (
-          <p className="mt-3 text-[12px] text-[#b45309]">
-            테스트용 DB는 실행 중인 프리뷰가 있어야 만들 수 있습니다. 먼저 프리뷰를 띄워주세요.
-          </p>
-        ) : null}
-        {needsCloudConnection ? (
-          <p className="mt-3 text-[12px] leading-relaxed text-[#b45309]">
-            RDS는 연결된 클라우드 계정이 있어야 만들 수 있습니다. 위 클라우드 연결 선택에서 먼저
-            연결해 주세요.{' '}
-            <Link
-              to="/onboarding/cloud"
-              className="font-semibold underline underline-offset-2 hover:text-[#92400e]"
-            >
-              AWS가 처음이신가요?
-            </Link>
-          </p>
-        ) : null}
-        {method === 'RDS' ? (
-          <p className="mt-3 text-[12px] leading-relaxed text-[#64748b]">
-            RDS는 실제 AWS 자원이라 과금됩니다. 요청하면 승인 절차를 거치고, 승인 후 생성에 5~10분이
-            걸립니다.
-          </p>
-        ) : null}
-        {createError ? <p className="mt-3 text-[12px] text-[#dc2626]">{createError}</p> : null}
+          {needsPreview ? (
+            <p className="mt-3 text-[12px] text-[#b45309]">
+              테스트용 DB는 실행 중인 프리뷰가 있어야 만들 수 있습니다. 먼저 프리뷰를 띄워주세요.
+            </p>
+          ) : null}
+          {needsCloudConnection ? (
+            <p className="mt-3 text-[12px] leading-relaxed text-[#b45309]">
+              RDS는 연결된 클라우드 계정이 있어야 만들 수 있습니다. 위 클라우드 연결 선택에서 먼저
+              연결해 주세요.{' '}
+              <Link
+                to="/onboarding/cloud"
+                className="font-semibold underline underline-offset-2 hover:text-[#92400e]"
+              >
+                AWS가 처음이신가요?
+              </Link>
+            </p>
+          ) : null}
+          {method === 'RDS' ? (
+            <p className="mt-3 text-[12px] leading-relaxed text-[#64748b]">
+              RDS는 실제 AWS 자원이라 과금됩니다. 요청하면 승인 절차를 거치고, 승인 후 생성에
+              5~10분이 걸립니다.
+            </p>
+          ) : null}
+          {createError ? <p className="mt-3 text-[12px] text-[#dc2626]">{createError}</p> : null}
 
-        <button
-          type="button"
-          disabled={needsPreview || needsCloudConnection || createMutation.isPending}
-          onClick={() => createMutation.mutate()}
-          className="mt-3 h-9 cursor-pointer rounded-lg bg-[#0f172a] px-4 text-[13px] font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50"
-        >
-          {createMutation.isPending ? '만드는 중...' : 'DB 추가'}
-        </button>
+          <button
+            type="button"
+            disabled={needsPreview || needsCloudConnection || createMutation.isPending}
+            onClick={() => createMutation.mutate()}
+            className="mt-3 h-9 cursor-pointer rounded-lg bg-[#0f172a] px-4 text-[13px] font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {createMutation.isPending ? '만드는 중...' : 'DB 추가'}
+          </button>
         </>
       )}
 
@@ -211,8 +207,8 @@ function ProjectDatabaseSection({ projectId }: { projectId: number }) {
         <div className="mt-4 rounded-xl border border-[#fcd34d] bg-[#fffbeb] px-4 py-3">
           <p className="text-[13px] font-semibold text-[#92400e]">승인을 기다리고 있습니다</p>
           <p className="mt-1 text-[12px] leading-relaxed text-[#b45309]">
-            과금되는 자원이라 승인 절차를 거칩니다. 승인 탭에서 결정하면 생성이 시작되고, 5~10분
-            뒤 접속정보가 아래 목록에 나타납니다.
+            과금되는 자원이라 승인 절차를 거칩니다. 승인 탭에서 결정하면 생성이 시작되고, 5~10분 뒤
+            접속정보가 아래 목록에 나타납니다.
           </p>
           <button
             type="button"
diff --git a/src/components/layout/project/ProjectDetailPage.tsx b/src/components/layout/project/ProjectDetailPage.tsx
index 438f802..cac9961 100644
--- a/src/components/layout/project/ProjectDetailPage.tsx
+++ b/src/components/layout/project/ProjectDetailPage.tsx
@@ -173,62 +173,62 @@ function ProjectDetailPage({
                     </tr>
                   </thead>
                   <tbody className="divide-y divide-[#f1f5f9]">
-                    {isRelatedLoading
-                      ? Array.from({ length: 3 }, (_, index) => (
-                          <tr key={`activity-skeleton-${index}`} className="text-[#334155]">
-                            <td className="px-4 py-3">
-                              <div className="h-4 w-5/6 animate-pulse rounded bg-[#e2e8f0]" />
-                            </td>
-                            <td className="px-4 py-3">
-                              <div className="h-4 w-16 animate-pulse rounded bg-[#e2e8f0]" />
-                            </td>
-                            <td className="px-4 py-3">
-                              <div className="h-4 w-14 animate-pulse rounded bg-[#e2e8f0]" />
-                            </td>
-                          </tr>
-                        ))
-                      : activityRows.length === 0
-                        ? (
-                            <tr>
-                              <td colSpan={3} className="px-4 py-4 text-[12px] text-[#94a3b8]">
-                                표시할 이력이 없습니다.
-                              </td>
-                            </tr>
-                          )
-                        : activityRows.map((row) => (
-                          <tr
-                            key={`${row.type}-${row.occurredAt}`}
-                            onClick={() => setDetailActivity(row)}
-                            className="cursor-pointer text-[#334155] transition hover:bg-[#f8fafc]"
-                          >
-                            {/* CHANGE_* 는 30줄짜리 마크다운이 들어온다. 목록은 한 줄로 자르고
+                    {isRelatedLoading ? (
+                      Array.from({ length: 3 }, (_, index) => (
+                        <tr key={`activity-skeleton-${index}`} className="text-[#334155]">
+                          <td className="px-4 py-3">
+                            <div className="h-4 w-5/6 animate-pulse rounded bg-[#e2e8f0]" />
+                          </td>
+                          <td className="px-4 py-3">
+                            <div className="h-4 w-16 animate-pulse rounded bg-[#e2e8f0]" />
+                          </td>
+                          <td className="px-4 py-3">
+                            <div className="h-4 w-14 animate-pulse rounded bg-[#e2e8f0]" />
+                          </td>
+                        </tr>
+                      ))
+                    ) : activityRows.length === 0 ? (
+                      <tr>
+                        <td colSpan={3} className="px-4 py-4 text-[12px] text-[#94a3b8]">
+                          표시할 이력이 없습니다.
+                        </td>
+                      </tr>
+                    ) : (
+                      activityRows.map((row) => (
+                        <tr
+                          key={`${row.type}-${row.occurredAt}`}
+                          onClick={() => setDetailActivity(row)}
+                          className="cursor-pointer text-[#334155] transition hover:bg-[#f8fafc]"
+                        >
+                          {/* CHANGE_* 는 30줄짜리 마크다운이 들어온다. 목록은 한 줄로 자르고
                                 전문은 상세 모달에서 본다 */}
-                            <td className="max-w-0 px-4 py-3">
-                              <p className="truncate">{row.message}</p>
-                            </td>
-                            <td className="whitespace-nowrap px-4 py-3 text-[#64748b]">
-                              {formatActivityTime(row.occurredAt)}
-                            </td>
-                            <td className="px-4 py-3">
-                              <div className="flex items-center justify-between gap-2">
-                                <span className="truncate rounded-full bg-[#f1f5f9] px-2 py-0.5 text-[11px] font-medium text-[#64748b]">
-                                  {row.type}
-                                </span>
-                                <button
-                                  type="button"
-                                  aria-label={`${row.type} 상세 보기`}
-                                  onClick={(event) => {
-                                    event.stopPropagation();
-                                    setDetailActivity(row);
-                                  }}
-                                  className="shrink-0 cursor-pointer text-[#94a3b8] transition hover:text-[#0f172a]"
-                                >
-                                  <ChevronRight className="size-4" />
-                                </button>
-                              </div>
-                            </td>
-                          </tr>
-                        ))}
+                          <td className="max-w-0 px-4 py-3">
+                            <p className="truncate">{row.message}</p>
+                          </td>
+                          <td className="whitespace-nowrap px-4 py-3 text-[#64748b]">
+                            {formatActivityTime(row.occurredAt)}
+                          </td>
+                          <td className="px-4 py-3">
+                            <div className="flex items-center justify-between gap-2">
+                              <span className="truncate rounded-full bg-[#f1f5f9] px-2 py-0.5 text-[11px] font-medium text-[#64748b]">
+                                {row.type}
+                              </span>
+                              <button
+                                type="button"
+                                aria-label={`${row.type} 상세 보기`}
+                                onClick={(event) => {
+                                  event.stopPropagation();
+                                  setDetailActivity(row);
+                                }}
+                                className="shrink-0 cursor-pointer text-[#94a3b8] transition hover:text-[#0f172a]"
+                              >
+                                <ChevronRight className="size-4" />
+                              </button>
+                            </div>
+                          </td>
+                        </tr>
+                      ))
+                    )}
                   </tbody>
                 </table>
               </div>
diff --git a/src/components/layout/project/ProjectDomainsPage.tsx b/src/components/layout/project/ProjectDomainsPage.tsx
index 2ca741b..2921a61 100644
--- a/src/components/layout/project/ProjectDomainsPage.tsx
+++ b/src/components/layout/project/ProjectDomainsPage.tsx
@@ -11,7 +11,12 @@ import {
   FALLBACK_HOSTING_TARGETS,
 } from '@/api/domains';
 import type { Domain, GetDomainVerificationGuideResType } from '@/types/domain.type';
-import type { DomainStatus, DomainType, HostingTarget, VerificationMethod } from '@/types/common.enum';
+import type {
+  DomainStatus,
+  DomainType,
+  HostingTarget,
+  VerificationMethod,
+} from '@/types/common.enum';
 import { useApprovalTaskWatchQuery } from '@/api/agent';
 import { toSafeHttpUrl } from '@/lib/safeUrl';
 
@@ -100,7 +105,9 @@ function CopyField({ labelText, value }: { labelText: string; value: string }) {
   return (
     <div className="flex items-center justify-between gap-2 rounded-lg border border-[#e2e8f0] bg-white px-3 py-2">
       <div className="min-w-0">
-        <p className="text-[10px] font-semibold uppercase tracking-wide text-[#94a3b8]">{labelText}</p>
+        <p className="text-[10px] font-semibold uppercase tracking-wide text-[#94a3b8]">
+          {labelText}
+        </p>
         <p className="truncate font-mono text-[12px] text-[#334155]">{value}</p>
       </div>
       <button
@@ -121,8 +128,8 @@ function DnsGuide({ domain, guide }: { domain: Domain; guide: GetDomainVerificat
   return (
     <div className="mt-3 rounded-lg bg-[#f8fafc] p-3">
       <p className="text-[12px] leading-relaxed text-[#475569]">
-        아래 레코드를 <span className="font-semibold">{domain.hostname}</span> 도메인의 DNS 에 추가한 뒤{' '}
-        <span className="font-semibold">검증 재시도</span>를 누르세요.
+        아래 레코드를 <span className="font-semibold">{domain.hostname}</span> 도메인의 DNS 에
+        추가한 뒤 <span className="font-semibold">검증 재시도</span>를 누르세요.
       </p>
       {isS3Custom ? (
         <p className="mt-1.5 text-[11px] leading-relaxed text-[#a16207]">
@@ -140,7 +147,9 @@ function DnsGuide({ domain, guide }: { domain: Domain; guide: GetDomainVerificat
           </div>
         ))}
         {guide.records.length === 0 ? (
-          <p className="text-[12px] text-[#94a3b8]">레코드를 준비 중입니다. 잠시 후 다시 열어주세요.</p>
+          <p className="text-[12px] text-[#94a3b8]">
+            레코드를 준비 중입니다. 잠시 후 다시 열어주세요.
+          </p>
         ) : null}
       </div>
     </div>
@@ -180,7 +189,10 @@ function ProjectDomainsPage({ projectId }: ProjectDomainsPageProps) {
   const [bindTaskId, setBindTaskId] = useState<string | null>(null);
 
   const queryClient = useQueryClient();
-  const { data: domains = [], isLoading } = useProjectDomainListQuery('project-domains-page', projectId);
+  const { data: domains = [], isLoading } = useProjectDomainListQuery(
+    'project-domains-page',
+    projectId,
+  );
   const { data: guide } = useQuery({
     queryKey: ['domain-verification-guide', selectedDomainId],
     queryFn: () => getDomainVerificationGuide(selectedDomainId as number),
@@ -233,7 +245,10 @@ function ProjectDomainsPage({ projectId }: ProjectDomainsPageProps) {
   const bindFailureMessage =
     bindTask?.status === 'FAILED' ? bindTask.error?.trim() || '도메인 연결에 실패했습니다.' : null;
 
-  const verifyMutation = useMutation({ mutationFn: postDomainVerificationCheck, onSuccess: invalidateDomains });
+  const verifyMutation = useMutation({
+    mutationFn: postDomainVerificationCheck,
+    onSuccess: invalidateDomains,
+  });
   /*
     해제를 눌렀지만 아직 승인을 기다리는 도메인.
 
@@ -402,7 +417,9 @@ function ProjectDomainsPage({ projectId }: ProjectDomainsPageProps) {
               <span className="text-[12px] font-semibold text-[#334155]">DNS 검증 방식</span>
               <select
                 value={verificationMethod}
-                onChange={(event) => setVerificationMethod(event.target.value as VerificationMethod)}
+                onChange={(event) =>
+                  setVerificationMethod(event.target.value as VerificationMethod)
+                }
                 className="h-9 rounded-lg border border-[#e5e7eb] px-3 text-[13px]"
               >
                 <option value="A">A (IP 직접)</option>
@@ -432,7 +449,9 @@ function ProjectDomainsPage({ projectId }: ProjectDomainsPageProps) {
         <h2 className="text-[16px] font-bold text-[#0f172a]">연결된 도메인</h2>
         <ul className="mt-4 flex flex-col gap-2">
           {isLoading ? (
-            skeletonItems.map((key) => <li key={key} className="h-16 animate-pulse rounded-xl bg-[#f8fafc]" />)
+            skeletonItems.map((key) => (
+              <li key={key} className="h-16 animate-pulse rounded-xl bg-[#f8fafc]" />
+            ))
           ) : domains.length === 0 ? (
             <li className="rounded-xl border border-dashed border-[#e2e8f0] px-4 py-8 text-center text-[13px] text-[#94a3b8]">
               연결된 도메인이 없습니다.
@@ -447,8 +466,12 @@ function ProjectDomainsPage({ projectId }: ProjectDomainsPageProps) {
                   <div className="flex flex-wrap items-center justify-between gap-2">
                     <div className="min-w-0">
                       <div className="flex flex-wrap items-center gap-1.5">
-                        <p className="text-[13px] font-semibold text-[#0f172a]">{domain.hostname}</p>
-                        <span className={`rounded-full px-2 py-0.5 text-[11px] font-medium ${status.className}`}>
+                        <p className="text-[13px] font-semibold text-[#0f172a]">
+                          {domain.hostname}
+                        </p>
+                        <span
+                          className={`rounded-full px-2 py-0.5 text-[11px] font-medium ${status.className}`}
+                        >
                           {status.label}
                         </span>
                         {domain.status === 'CONNECTED' && domain.httpsEnforced ? (
diff --git a/src/components/layout/project/ProjectRuntimeSection.tsx b/src/components/layout/project/ProjectRuntimeSection.tsx
index 23b3c66..cf7fdfe 100644
--- a/src/components/layout/project/ProjectRuntimeSection.tsx
+++ b/src/components/layout/project/ProjectRuntimeSection.tsx
@@ -56,8 +56,9 @@ function ProjectRuntimeSection({ projectId }: { projectId: number }) {
   const startCommand = draft?.startCommand ?? runtime?.startCommand ?? '';
   const dbEngine = draft?.dbEngine ?? runtime?.dbEngine ?? 'MYSQL';
 
-  const editDraft = (patch: Partial<{ runtimeType: string; startCommand: string; dbEngine: string }>) =>
-    setDraft({ runtimeType, startCommand, dbEngine, ...patch });
+  const editDraft = (
+    patch: Partial<{ runtimeType: string; startCommand: string; dbEngine: string }>,
+  ) => setDraft({ runtimeType, startCommand, dbEngine, ...patch });
 
   const saveMutation = useMutation({
     mutationFn: () =>
diff --git a/src/components/layout/project/ProjectServerSection.tsx b/src/components/layout/project/ProjectServerSection.tsx
index 6853099..1e09b0d 100644
--- a/src/components/layout/project/ProjectServerSection.tsx
+++ b/src/components/layout/project/ProjectServerSection.tsx
@@ -197,8 +197,8 @@ function ProjectServerSection({ projectId }: { projectId: number }) {
         <div className="mt-4 rounded-xl border border-[#fcd34d] bg-[#fffbeb] px-4 py-3">
           <p className="text-[13px] font-semibold text-[#92400e]">승인을 기다리고 있습니다</p>
           <p className="mt-1 text-[12px] leading-relaxed text-[#b45309]">
-            과금되는 자원이라 승인 절차를 거칩니다. 승인 탭에서 결정하면 빌드가 시작되고, 진행 상황이
-            아래 목록에 나타납니다.
+            과금되는 자원이라 승인 절차를 거칩니다. 승인 탭에서 결정하면 빌드가 시작되고, 진행
+            상황이 아래 목록에 나타납니다.
           </p>
           <button
             type="button"
diff --git a/src/components/layout/project/ServerLogViewer.tsx b/src/components/layout/project/ServerLogViewer.tsx
index 69501da..498a6fc 100644
--- a/src/components/layout/project/ServerLogViewer.tsx
+++ b/src/components/layout/project/ServerLogViewer.tsx
@@ -134,8 +134,8 @@ function ServerLogViewer({ serverId, sources }: ServerLogViewerProps) {
           <div className="h-24 animate-pulse bg-[#f8fafc]" />
           {isTakingLong ? (
             <p className="border-t border-[#f1f5f9] px-3 py-2 text-[11px] leading-relaxed text-[#94a3b8]">
-              인스턴스에 명령을 보내 읽어오는 중입니다. 서버가 막 뜬 참이거나 인증서를 받는
-              중이면 40초쯤 걸릴 수 있습니다 — 기다리시면 됩니다.
+              인스턴스에 명령을 보내 읽어오는 중입니다. 서버가 막 뜬 참이거나 인증서를 받는 중이면
+              40초쯤 걸릴 수 있습니다 — 기다리시면 됩니다.
             </p>
           ) : null}
         </div>
diff --git a/src/index.css b/src/index.css
index 507ecbc..a5d347f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -180,3 +180,137 @@ body {
     font-weight: 500;
   }
 }
+
+@keyframes hero-char-up {
+  from {
+    transform: translateY(120%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes hero-ring-pulse {
+  0%,
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.35;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.08);
+    opacity: 0.8;
+  }
+}
+
+@keyframes hero-wave {
+  0%,
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.55;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.12);
+    opacity: 0.9;
+  }
+}
+
+@keyframes hero-cut-in {
+  from {
+    transform: translateY(28%);
+    opacity: 0;
+    font-weight: 500;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+    font-weight: 800;
+  }
+}
+
+@keyframes hero-role-in {
+  from {
+    transform: translateY(50%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes hero-caret {
+  0%,
+  40% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes hero-word-in {
+  from {
+    opacity: 0;
+    transform: scale(0.92);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.hero-char {
+  animation: hero-char-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.hero-ring {
+  animation: hero-ring-pulse 3.8s ease-in-out infinite;
+}
+
+.hero-wave {
+  animation: hero-wave 5.6s ease-in-out infinite;
+}
+
+.hero-cut-word {
+  animation: hero-cut-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.hero-role-in {
+  animation: hero-role-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.hero-caret {
+  animation: hero-caret 0.9s steps(1) infinite;
+}
+
+.hero-orbit-word {
+  animation: hero-word-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.hero-morph {
+  transition:
+    width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
+    height 0.7s cubic-bezier(0.22, 1, 0.36, 1),
+    background-color 0.45s ease,
+    opacity 0.45s ease,
+    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
+    border-radius 0.7s cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow 0.45s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero-char,
+  .hero-ring,
+  .hero-wave,
+  .hero-cut-word,
+  .hero-role-in,
+  .hero-caret,
+  .hero-orbit-word,
+  .hero-morph {
+    animation: none;
+    transition: none;
+  }
+}