diff --git a/public/agent-example.webp b/public/agent-example.webp
new file mode 100644
index 0000000..4fec4e3
Binary files /dev/null and b/public/agent-example.webp differ
diff --git a/public/comment-example.webp b/public/comment-example.webp
new file mode 100644
index 0000000..8c163f0
Binary files /dev/null and b/public/comment-example.webp differ
diff --git a/public/list-example.webp b/public/list-example.webp
new file mode 100644
index 0000000..b3770ae
Binary files /dev/null and b/public/list-example.webp differ
diff --git a/src/App.tsx b/src/App.tsx
index 8b837ab..a2e0f14 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,31 +1,31 @@
 import {
-    BookOpen,
-    ExternalLink,
-    FolderKanban,
-    Github,
-    MessageSquare,
-    Play,
-    Sparkles,
-    Upload,
-} from "lucide-react";
-import { motion } from "motion/react";
-import type React from "react";
-import Footer from "./components/Footer";
-import InteractiveShowcase from "./components/InteractiveShowcase";
-import { ShumaiLogo } from "./components/ShumaiLogo";
+  BookOpen,
+  ExternalLink,
+  FolderKanban,
+  Github,
+  MessageSquare,
+  Play,
+  Sparkles,
+  Upload,
+} from 'lucide-react';
+import { motion } from 'motion/react';
+import type React from 'react';
+import Footer from './components/Footer';
+import InteractiveShowcase from './components/InteractiveShowcase';
+import { ShumaiLogo } from './components/ShumaiLogo';
 
 export default function App() {
   // Scroll to workspace demo helper
   const scrollToDemo = (e: React.MouseEvent) => {
     e.preventDefault();
-    const element = document.getElementById("demo-workspace");
+    const element = document.getElementById('features-page');
     if (element) {
-      element.scrollIntoView({ behavior: "smooth", block: "start" });
+      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
   };
 
   return (
-    <div className="chinese-lattice min-h-screen text-gray-100 font-sans selection:bg-[#E6C280] selection:text-[#5C1D24] relative overflow-x-hidden">
+    <div className="chinese-lattice h-full w-full overflow-y-auto overflow-x-hidden snap-y snap-mandatory scroll-smooth text-gray-100 font-sans selection:bg-[#E6C280] selection:text-[#5C1D24] relative">
       {/* Background Soft Ambient Light Blobs */}
       <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-[#8B1C26]/20 rounded-full blur-[120px] pointer-events-none select-none" />
       <div className="absolute top-[800px] right-10 w-[600px] h-[600px] bg-[#E6C280]/5 rounded-full blur-[150px] pointer-events-none select-none" />
@@ -66,8 +66,8 @@ export default function App() {
         </div>
       </header>
 
-      {/* HERO SECTION */}
-      <section className="min-h-screen lg:h-screen flex flex-col justify-between pt-24 pb-6 px-4 max-w-5xl mx-auto relative z-10">
+      {/* HERO SECTION (Page 1) */}
+      <section className="h-full w-full shrink-0 snap-start flex flex-col justify-between pt-24 pb-6 px-4 max-w-5xl mx-auto relative z-10">
         {/* Main Content Area: Centered layout */}
         <div className="flex-1 flex flex-col items-center justify-center w-full max-w-4xl mx-auto text-center py-2 md:py-4">
           {/* Animated badge for app identity with yellow border */}
@@ -78,7 +78,7 @@ export default function App() {
             className="mb-4 relative"
           >
             {/* Double Yellow/Gold Ornate frame precisely matching the user request (traditional style) */}
-            <div className="relative bg-[#51161C]/80 px-6 py-2 rounded-xs select-none">
+            <div className="relative px-6 py-2 rounded-xs select-none">
               {/* SVG Ornate custom corner widgets in all 4 vertex coordinates */}
               <svg
                 className="absolute -top-2.5 -left-2.5 w-6 h-6 text-[#E6C280]"
@@ -153,9 +153,9 @@ export default function App() {
             transition={{ duration: 0.6, delay: 0.2 }}
             className="text-xs md:text-sm text-gray-300 max-w-2xl leading-relaxed mb-6 font-sans"
           >
-            Upload creative files, manage projects, and collaborate with
-            teammates and Shumai Agent in one unified workspace built for
-            precise feedback, shared progress, and open source flexibility.
+            Upload creative files, manage projects, and collaborate with teammates and Shumai Agent
+            in one unified workspace built for precise feedback, shared progress, and open source
+            flexibility.
           </motion.p>
 
           {/* REQUIRED TRIPLE ACTION BUTTON GROUP WITH SLASH-DIVIDED DESIGN */}
@@ -210,85 +210,128 @@ export default function App() {
           className="w-full grid grid-cols-2 md:grid-cols-4 gap-4 border-t border-[#E6C280]/15 pt-4 pb-0 mb-0"
           id="features-preview"
         >
-          <div className="flex flex-col items-center p-1 text-center group">
-            <div className="w-9 h-9 rounded-full bg-[#5C1D24] border border-[#E6C280]/30 text-[#E6C280] flex items-center justify-center mb-2 group-hover:bg-[#E6C280] group-hover:text-[#5C1D24] transition-all">
+          <button
+            type="button"
+            className="flex flex-col items-center p-1 text-center group"
+            onClick={scrollToDemo}
+          >
+            <div className="w-9 h-9 rounded-full bg-[#5C1D24] border border-[#E6C280]/30 text-[#E6C280] flex items-center justify-center mb-2 group-hover:bg-[#E6C280] group-hover:text-[#5C1D24] transition-all cursor-pointer">
               <Upload className="w-4 h-4" />
             </div>
-            <h3 className="text-[11px] font-bold text-gray-200 mb-0.5">
-              Upload files
-            </h3>
+            <h3 className="text-[11px] font-bold text-gray-200 mb-0.5">Upload files</h3>
             <p className="text-[9px] text-gray-400">
               High-fidelity videography and creative templates
             </p>
-          </div>
+          </button>
 
-          <div className="flex flex-col items-center p-1 text-center group">
-            <div className="w-9 h-9 rounded-full bg-[#5C1D24] border border-[#E6C280]/30 text-[#E6C280] flex items-center justify-center mb-2 group-hover:bg-[#E6C280] group-hover:text-[#5C1D24] transition-all">
+          <button
+            type="button"
+            className="flex flex-col items-center p-1 text-center group"
+            onClick={scrollToDemo}
+          >
+            <div className="w-9 h-9 rounded-full bg-[#5C1D24] border border-[#E6C280]/30 text-[#E6C280] flex items-center justify-center mb-2 group-hover:bg-[#E6C280] group-hover:text-[#5C1D24] transition-all cursor-pointer">
               <FolderKanban className="w-4 h-4" />
             </div>
-            <h3 className="text-[11px] font-bold text-gray-200 mb-0.5">
-              Manage projects
-            </h3>
-            <p className="text-[9px] text-gray-400">
-              Unified repositories and asset organization
-            </p>
-          </div>
+            <h3 className="text-[11px] font-bold text-gray-200 mb-0.5">Manage projects</h3>
+            <p className="text-[9px] text-gray-400">Unified repositories and asset organization</p>
+          </button>
 
-          <div className="flex flex-col items-center p-1 text-center group">
-            <div className="w-9 h-9 rounded-full bg-[#5C1D24] border border-[#E6C280]/30 text-[#E6C280] flex items-center justify-center mb-2 group-hover:bg-[#E6C280] group-hover:text-[#5C1D24] transition-all">
+          <button
+            type="button"
+            className="flex flex-col items-center p-1 text-center group"
+            onClick={scrollToDemo}
+          >
+            <div className="w-9 h-9 rounded-full bg-[#5C1D24] border border-[#E6C280]/30 text-[#E6C280] flex items-center justify-center mb-2 group-hover:bg-[#E6C280] group-hover:text-[#5C1D24] transition-all cursor-pointer">
               <Sparkles className="w-4 h-4" />
             </div>
-            <h3 className="text-[11px] font-bold text-gray-200 mb-0.5">
-              Agent Co-Production
-            </h3>
+            <h3 className="text-[11px] font-bold text-gray-200 mb-0.5">Agent Co-Production</h3>
             <p className="text-[9px] text-gray-400">
               Automated co-production guidance & layout audits
             </p>
-          </div>
+          </button>
 
-          <div className="flex flex-col items-center p-1 text-center group">
-            <div className="w-9 h-9 rounded-full bg-[#5C1D24] border border-[#E6C280]/30 text-[#E6C280] flex items-center justify-center mb-2 group-hover:bg-[#E6C280] group-hover:text-[#5C1D24] transition-all">
+          <button
+            type="button"
+            className="flex flex-col items-center p-1 text-center group"
+            onClick={scrollToDemo}
+          >
+            <div className="w-9 h-9 rounded-full bg-[#5C1D24] border border-[#E6C280]/30 text-[#E6C280] flex items-center justify-center mb-2 group-hover:bg-[#E6C280] group-hover:text-[#5C1D24] transition-all cursor-pointer">
               <MessageSquare className="w-4 h-4" />
             </div>
-            <h3 className="text-[11px] font-bold text-gray-200 mb-0.5">
-              Precise feedback
-            </h3>
+            <h3 className="text-[11px] font-bold text-gray-200 mb-0.5">Precise feedback</h3>
             <p className="text-[9px] text-gray-400">
               Frame-accurate point coordinates pin annotation
             </p>
-          </div>
+          </button>
         </div>
       </section>
 
-      {/* WORKSPACE DEMO PREVIEW SECTION */}
-      <section
-        className="py-16 bg-black/40 border-t border-[#E6C280]/15 relative"
-        id="demo-workspace"
+      {/* WORKSPACE DEMO PREVIEW SECTION (Page 2) */}
+      <div
+        className="h-full w-full shrink-0 snap-start flex flex-col justify-between relative bg-black/20 border-t border-[#E6C280]/15 pt-20"
+        id="features-page"
       >
-        <div className="max-w-6xl mx-auto px-4 mb-2">
-          {/* Section banner */}
-          <div className="text-center max-w-2xl mx-auto mb-12">
-            <div className="inline-flex items-center gap-1.5 p-1 px-3 mb-3 rounded-full bg-[#5C1D24]/80 border border-[#E6C280]/40 text-[#E6C280] font-mono text-[9px] uppercase tracking-widest">
-              <Sparkles className="w-3 h-3 text-[#E6C280]" />
-              <span>Symmetric Space Live</span>
+        <section className="flex-1 flex flex-col justify-start py-2" id="demo-workspace">
+          <div className="max-w-6xl mx-auto px-4 w-full">
+            {/* Redesigned themed section header to match Hero badge */}
+            <div className="flex flex-col items-center mb-8">
+              <div className="relative px-6 py-2 rounded-xs select-none">
+                {/* SVG Ornate custom corner widgets in all 4 vertex coordinates */}
+                <svg
+                  className="absolute -top-2.5 -left-2.5 w-6 h-6 text-[#E6C280]"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <path d="M2.5 12V2.5H12" />
+                  <path d="M6.4 2.5V6.4H2.5" />
+                </svg>
+                <svg
+                  className="absolute -top-2.5 -right-2.5 w-6 h-6 text-[#E6C280] transform rotate-90"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <path d="M2.5 12V2.5H12" />
+                  <path d="M6.4 2.5V6.4H2.5" />
+                </svg>
+                <svg
+                  className="absolute -bottom-2.5 -left-2.5 w-6 h-6 text-[#E6C280] transform -rotate-90"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <path d="M2.5 12V2.5H12" />
+                  <path d="M6.4 2.5V6.4H2.5" />
+                </svg>
+                <svg
+                  className="absolute -bottom-2.5 -right-2.5 w-6 h-6 text-[#E6C280] transform rotate-180"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <path d="M2.5 12V2.5H12" />
+                  <path d="M6.4 2.5V6.4H2.5" />
+                </svg>
+
+                <h2 className="font-serif text-lg font-black text-[#E6C280] tracking-[0.25em] uppercase gold-glow">
+                  shumai features
+                </h2>
+              </div>
             </div>
-            <h2 className="text-2xl md:text-4xl font-serif text-white font-black mb-3">
-              Experience shumai in Action
-            </h2>
-            <p className="text-xs text-gray-300 leading-relaxed">
-              Explore shumai's high-fidelity creative workflow, precise
-              coordinate-based designer annotations, and advanced AI agent
-              coordination layouts.
-            </p>
           </div>
-        </div>
 
-        {/* Render interactive applet showcase simulator */}
-        <InteractiveShowcase />
-      </section>
+          {/* Render interactive applet showcase simulator */}
+          <InteractiveShowcase />
+        </section>
 
-      {/* FOOTER */}
-      <Footer />
+        {/* FOOTER */}
+        <Footer />
+      </div>
     </div>
   );
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 644ca20..fdfee32 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,6 +1,6 @@
 export default function Footer() {
   return (
-    <footer className="relative bg-[#1A0609]/95 border-t border-[#E6C280]/10 pt-8 pb-8 overflow-hidden px-4">
+    <footer className="relative bg-[#1A0609]/95 border-t border-[#E6C280]/10 py-2 overflow-hidden px-4">
       {/* Decorative Traditional Grid Lattice overlay in the footer background */}
       <div className="absolute inset-0 opacity-5 pointer-events-none select-none">
         <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
@@ -19,7 +19,7 @@ export default function Footer() {
 
       <div className="max-w-6xl mx-auto relative z-10 flex flex-col sm:flex-row items-center justify-center gap-4 text-center">
         <p className="text-xs text-gray-400 font-mono tracking-wide">
-          © {new Date().getFullYear()} shumai.io — Made by{' '}
+          © {new Date().getFullYear()} shumai.one — Made by{' '}
           <a
             href="https://github.com/Yiling-J"
             target="_blank"
diff --git a/src/components/InteractiveShowcase.tsx b/src/components/InteractiveShowcase.tsx
index 1fa80ce..6c7684a 100644
--- a/src/components/InteractiveShowcase.tsx
+++ b/src/components/InteractiveShowcase.tsx
@@ -1,414 +1,120 @@
-import {
-  CheckCircle2,
-  Clock,
-  Cpu,
-  Eye,
-  FileVideo,
-  Layers,
-  LayoutGrid,
-  Maximize2,
-  MessageSquare,
-  MonitorCheck,
-  Play,
-  Sparkles,
-  Volume2,
-  Zap,
-} from 'lucide-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { AnimatePresence, motion } from 'motion/react';
 import React, { useState } from 'react';
-import ChineseBorder from './ChineseBorder';
 
 const SHOWCASE_TABS = [
   {
     id: 'files' as const,
     label: 'Files & Assets',
-    icon: Layers,
     description:
-      'A centralized creative repository designed to host and organize high-fidelity videography, brand guidelines, storyboards, and multi-layered design grids. Built with imperial metadata trackers and automatic feedback tags, this view organizes your complex digital assets into a beautifully structured catalog with unified state indicators.',
-    badge: 'Imperial Cataloging',
-    screenshotTitle: 'Asset Repository Viewport',
-    image:
-      'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&w=1200&q=80',
-    features: [
-      { label: 'Symmetric GRID layout', val: 'Active' },
-      { label: 'Master files parsed', val: '12 assets' },
-      { label: 'Auto-categorization', val: 'Enabled' },
-    ],
+      'Centralized asset management for organizing high-fidelity media, brand guidelines, and storyboards.',
+    image: '/list-example.webp',
   },
   {
     id: 'review' as const,
-    label: 'Precise Annotator',
-    icon: MessageSquare,
+    label: 'Precise feedback',
     description:
-      'A frame-accurate visual review canvas that simplifies design feedback. Reviewers, designers, and directors can drop direct coordinate pin bubbles (e.g., X:54%, Y:42%) on precision lattices, linking high-fidelity visual notes to exact layout zones. Eliminates any ambiguity in creative direction.',
-    badge: 'Coordinate Review',
-    screenshotTitle: 'Precision Annotation Canvas',
-    image:
-      'https://images.unsplash.com/photo-1542744094-3a31f103e35f?auto=format&fit=crop&w=1200&q=80',
-    features: [
-      { label: 'Frame review speed', val: '0.00s latency' },
-      { label: 'Coordinate pins', val: 'Active' },
-      { label: 'Timeline alignment', val: 'Synced' },
-    ],
+      'Frame-accurate visual review canvas with coordinate-based annotations for clear creative direction.',
+    image: '/comment-example.webp',
   },
   {
     id: 'agent' as const,
-    label: 'Agent',
-    icon: Cpu,
+    label: 'Shumai Agent',
     description:
-      'A state-of-the-art AI creative co-production workspace. The agent automatically audits files for traditional Chinese symmetry guidelines, reviews layout spacing ratios, examines color palette balances, and returns actionable color correction and editing recommendations to streamline your creative pipeline.',
-    badge: 'Cognitive Coproducer',
-    screenshotTitle: 'AI Co-Production Hub',
-    image:
-      'https://images.unsplash.com/photo-1634017839464-5c339ebe3cb4?auto=format&fit=crop&w=1200&q=80',
-    features: [
-      { label: 'Symmetry analysis', val: 'Optimal 98.4%' },
-      { label: 'Color grading audit', val: 'Complete' },
-      { label: 'Active recommendations', val: '3 directives' },
-    ],
+      'AI-powered co-production assistant for automated tasks and creative recommendations.',
+    image: '/agent-example.webp',
   },
 ];
 
 export default function InteractiveShowcase() {
   const [activeTab, setActiveTab] = useState<'files' | 'review' | 'agent'>('files');
 
-  const currentTabData = SHOWCASE_TABS.find((t) => t.id === activeTab) || SHOWCASE_TABS[0];
+  const currentIndex = SHOWCASE_TABS.findIndex((t) => t.id === activeTab);
+  const currentTabData = SHOWCASE_TABS[currentIndex];
 
   const handleTabChange = (tabId: 'files' | 'review' | 'agent') => {
     setActiveTab(tabId);
   };
 
+  const handlePrev = () => {
+    const nextIndex = (currentIndex - 1 + SHOWCASE_TABS.length) % SHOWCASE_TABS.length;
+    setActiveTab(SHOWCASE_TABS[nextIndex].id);
+  };
+
+  const handleNext = () => {
+    const nextIndex = (currentIndex + 1) % SHOWCASE_TABS.length;
+    setActiveTab(SHOWCASE_TABS[nextIndex].id);
+  };
+
   return (
-    <div className="w-full flex flex-col pt-4 pb-12" id="interactive-showcase-box">
-      {/* Segmented controls tab navigation designed like a high-end web app titlebar */}
-      <div className="w-full max-w-5xl mx-auto flex flex-col md:flex-row items-stretch md:items-center justify-between border-b border-[#E6C280]/20 pb-5 mb-8 px-4">
-        <div className="flex items-center gap-3 mb-4 md:mb-0">
-          <div className="w-2 h-2 rounded-full bg-[#E54B4B] animate-pulse" />
-          <span className="font-mono text-[10px] text-[#E6C280] tracking-widest uppercase">
-            Platform Workflow Viewports • High-Fidelity Previews
-          </span>
+    <div className="w-full flex flex-col" id="interactive-showcase-box">
+      {/* Main Presentation Container */}
+      <div className="w-full max-w-6xl mx-auto px-4 relative">
+        {/* CAROUSEL VIEWPORT WITH NAVIGATION ARROWS */}
+        <div className="relative group mb-4">
+          {/* Navigation Arrows - Flanking the image inside viewport */}
+          <button
+            onClick={handlePrev}
+            className="absolute left-4 xl:-left-16 top-1/2 -translate-y-1/2 z-10 w-10 h-10 md:w-12 md:h-12 rounded-full bg-black/60 xl:bg-[#E6C280]/20 border border-white/20 xl:border-white/10 flex items-center justify-center text-white xl:hover:text-black hover:bg-black/80 xl:hover:bg-white hover:border-white/40 xl:hover:border-white/20 transition-all backdrop-blur-md cursor-pointer"
+            aria-label="Previous slide"
+          >
+            <ChevronLeft className="w-6 h-6" />
+          </button>
+
+          <button
+            onClick={handleNext}
+            className="absolute right-4 xl:-right-16 top-1/2 -translate-y-1/2 z-10 w-10 h-10 md:w-12 md:h-12 rounded-full bg-black/60 xl:bg-[#E6C280]/20 border border-white/20 xl:border-white/10 flex items-center justify-center text-white xl:hover:text-black hover:bg-black/80 xl:hover:bg-white hover:border-white/40 xl:hover:border-white/20 transition-all backdrop-blur-md cursor-pointer"
+            aria-label="Next slide"
+          >
+            <ChevronRight className="w-6 h-6" />
+          </button>
+
+          {/* IMAGE VIEWPORT */}
+          <div className="bg-[#1C080B]/40 border border-[#E6C280]/15 rounded-2xl overflow-hidden aspect-video relative shadow-2xl w-full">
+            <AnimatePresence mode="wait">
+              <motion.img
+                key={activeTab}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.4 }}
+                src={currentTabData.image}
+                alt={currentTabData.label}
+                className="absolute inset-0 w-full h-full object-cover"
+              />
+            </AnimatePresence>
+          </div>
         </div>
 
-        {/* Traditional segment bar */}
-        <div className="flex bg-[#3D1418] p-1 rounded-lg border border-[#E6C280]/20 self-start md:self-auto shadow-inner">
+        {/* TEXT-BASED TABS GRID */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-12 mt-4">
           {SHOWCASE_TABS.map((tab) => {
-            const IconComponent = tab.icon;
+            const isActive = activeTab === tab.id;
             return (
               <button
                 key={tab.id}
                 onClick={() => handleTabChange(tab.id)}
-                className={`px-4 py-2 text-xs font-semibold rounded-md transition-all flex items-center gap-2 tracking-wide ${
-                  activeTab === tab.id
-                    ? 'bg-[#E6C280] text-[#5C1D24] shadow-md font-bold'
-                    : 'text-gray-300 hover:text-white hover:bg-[#5C1D24]/40'
-                }`}
-                id={`tab-btn-${tab.id}`}
+                className="flex flex-col items-start text-left group transition-all cursor-pointer"
               >
-                <IconComponent className="w-3.5 h-3.5" />
-                <span>{tab.label}</span>
+                <h3
+                  className={`text-base md:text-lg font-serif font-bold mb-2 transition-colors duration-300 ${
+                    isActive ? 'text-white' : 'text-white/30 group-hover:text-white/60'
+                  }`}
+                >
+                  {tab.label}
+                </h3>
+                <p
+                  className={`text-xs md:text-sm leading-relaxed transition-colors duration-300 ${
+                    isActive ? 'text-gray-300' : 'text-gray-300/20 group-hover:text-gray-300/50'
+                  }`}
+                >
+                  {tab.description}
+                </p>
               </button>
             );
           })}
         </div>
       </div>
-
-      {/* Main Presentation Container */}
-      <div className="w-full max-w-5xl mx-auto px-4">
-        <div className="bg-[#1C080B]/90 border border-[#E6C280]/20 rounded-xl p-6 md:p-8 shadow-2xl relative overflow-hidden">
-          {/* Subtle background glow */}
-          <div className="absolute top-0 right-0 w-80 h-80 bg-red-950/20 rounded-full filter blur-[100px] pointer-events-none" />
-
-          {/* ANIMATED DESCRIPTION ABOVE THE SCREENSHOT IMAGE */}
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={activeTab}
-              initial={{ opacity: 0, y: -10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 10 }}
-              transition={{ duration: 0.25 }}
-              className="mb-8"
-              id="tab-description-header"
-            >
-              <div className="flex items-center gap-2 mb-2">
-                <span className="text-[10px] font-mono text-[#E6C280] bg-[#5C1D24] border border-[#E6C280]/30 px-2 py-0.5 rounded uppercase tracking-wider font-semibold">
-                  {currentTabData.badge}
-                </span>
-                <span className="text-gray-400 font-mono text-[10px]">
-                  • Shumai Interface Element
-                </span>
-              </div>
-              <h3 className="text-xl md:text-2xl font-serif font-black text-white mb-3">
-                {currentTabData.label}
-              </h3>
-              <p className="text-xs md:text-sm text-gray-300 leading-relaxed max-w-4xl font-sans">
-                {currentTabData.description}
-              </p>
-            </motion.div>
-          </AnimatePresence>
-
-          {/* SCREENSHOT IMAGE WORKSPACE (Mock Browser UI Container) */}
-          <ChineseBorder
-            padding="p-0.5"
-            className="shadow-2xl overflow-hidden bg-[#2D0D11]/90 rounded-lg"
-          >
-            <div className="bg-[#130305] rounded overflow-hidden aspect-video relative flex flex-col group min-h-[350px] md:min-h-[480px]">
-              {/* Mock Browser/App Chrome Header */}
-              <div className="bg-[#1C0508]/95 border-b border-[#E6C280]/15 px-4 py-2.5 flex items-center justify-between z-10">
-                <div className="flex items-center gap-1.5">
-                  <span className="w-2.5 h-2.5 rounded-full bg-[#E54B4B]/80" />
-                  <span className="w-2.5 h-2.5 rounded-full bg-[#E6C280]/80" />
-                  <span className="w-2.5 h-2.5 rounded-full bg-yellow-600/30" />
-                  <span className="text-[10px] font-mono text-[#E6C280] ml-3 tracking-widest uppercase">
-                    shumai-workspace // {currentTabData.screenshotTitle}
-                  </span>
-                </div>
-
-                <div className="flex items-center gap-2 font-mono text-[9px] text-[#E6C280]/80 bg-[#3D1418]/60 border border-[#E6C280]/20 px-2 py-0.5 rounded">
-                  <MonitorCheck className="w-3 h-3 text-[#E6C280]" />
-                  <span>PREVIEW MODE</span>
-                </div>
-              </div>
-
-              {/* Dynamic Mockup Image Screenshot with Aesthetic Annotation Layers */}
-              <div className="flex-1 relative overflow-hidden flex items-center justify-center">
-                {/* Simulated Webpage Screenshot */}
-                <img
-                  src={currentTabData.image}
-                  alt={currentTabData.screenshotTitle}
-                  className="absolute inset-0 w-full h-full object-cover opacity-35 group-hover:scale-105 transition-transform duration-700 pointer-events-none select-none"
-                  referrerPolicy="no-referrer"
-                  id="screenshot-image-viewport"
-                />
-
-                {/* Royal dark fade */}
-                <div className="absolute inset-0 bg-gradient-to-t from-[#130305] via-transparent to-[#130305]/70 pointer-events-none" />
-
-                {/* OVERLAYS CUSTOMIZED PER VIEWPORT TO DEFINE HIGH-FIDELITY SCREENSHOT AESTHETIC */}
-                <AnimatePresence mode="wait">
-                  {activeTab === 'files' && (
-                    <motion.div
-                      key="files-overlay"
-                      initial={{ opacity: 0, scale: 0.95 }}
-                      animate={{ opacity: 1, scale: 1 }}
-                      exit={{ opacity: 0, scale: 0.95 }}
-                      className="absolute inset-0 p-4 md:p-8 flex flex-col justify-between"
-                      id="files-mockup-screenshot-content"
-                    >
-                      {/* Grid overlay */}
-                      <div className="grid grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4 w-full">
-                        {[
-                          {
-                            title: 'shumai_cut_final.mp4',
-                            size: '44.2 MB',
-                            cat: 'Video Render',
-                            status: 'Approved',
-                            tagColor: 'text-emerald-400 bg-emerald-950/60 border-emerald-500/20',
-                          },
-                          {
-                            title: 'royal_palette_spec_v2.png',
-                            size: '12.8 MB',
-                            cat: 'Art Guideline',
-                            status: 'In Review',
-                            tagColor: 'text-amber-300 bg-amber-950/60 border-amber-500/20',
-                          },
-                          {
-                            title: 'branding_layout_lattice.ai',
-                            size: '185.0 MB',
-                            cat: 'Vector Master',
-                            status: 'Approved',
-                            tagColor: 'text-emerald-400 bg-emerald-950/60 border-emerald-500/20',
-                          },
-                        ].map((mockFile, i) => (
-                          <div
-                            key={i}
-                            className="bg-[#1C080B]/90 border border-[#E6C280]/20 rounded p-3 shadow-md backdrop-blur-md flex flex-col justify-between h-24 md:h-28"
-                          >
-                            <div>
-                              <div className="flex items-center gap-1.5 text-[9px] text-[#E6C280] font-mono uppercase mb-1">
-                                <FileVideo className="w-3 h-3" />
-                                <span>{mockFile.cat}</span>
-                              </div>
-                              <h4 className="text-[10px] md:text-xs font-semibold text-white truncate">
-                                {mockFile.title}
-                              </h4>
-                            </div>
-                            <div className="flex items-center justify-between mt-2 border-t border-[#E6C280]/10 pt-1.5">
-                              <span className="text-[9px] text-gray-400 font-mono">
-                                {mockFile.size}
-                              </span>
-                              <span
-                                className={`text-[8px] font-mono uppercase px-1.5 py-0.5 rounded border ${mockFile.tagColor}`}
-                              >
-                                {mockFile.status}
-                              </span>
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-
-                      {/* Control bar */}
-                      <div className="w-full bg-[#1C0508]/90 border border-[#E6C280]/20 p-3 rounded flex items-center justify-between backdrop-blur-md">
-                        <div className="flex items-center gap-3">
-                          <LayoutGrid className="w-4 h-4 text-[#E6C280]" />
-                          <span className="text-[10px] text-white font-mono">
-                            12 Assets loaded in this project workspace
-                          </span>
-                        </div>
-                        <span className="text-[9px] text-gray-400 font-mono italic">
-                          Viewing High Fidelity Mirror Screenshot
-                        </span>
-                      </div>
-                    </motion.div>
-                  )}
-
-                  {activeTab === 'review' && (
-                    <motion.div
-                      key="review-overlay"
-                      initial={{ opacity: 0, scale: 0.95 }}
-                      animate={{ opacity: 1, scale: 1 }}
-                      exit={{ opacity: 0, scale: 0.95 }}
-                      className="absolute inset-0 flex flex-col justify-between p-4 md:p-8"
-                      id="annotator-mockup-screenshot-content"
-                    >
-                      {/* Geometric crosshair annotations simulating director feedback */}
-                      <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-                        {/* Golden Target concentric circles */}
-                        <div className="relative w-28 h-28 md:w-36 md:h-36 border border-dashed border-[#E6C280]/50 rounded-full flex items-center justify-center animate-spin-slow">
-                          <div className="w-14 h-14 border border-solid border-[#E6C280]/30 rounded-full flex items-center justify-center">
-                            <div className="w-2 h-2 bg-[#E54B4B] rounded-full" />
-                          </div>
-                        </div>
-
-                        {/* Coordinates lines decoration */}
-                        <div className="absolute top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#E6C280]/20 to-transparent" />
-                        <div className="absolute left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#E6C280]/20 to-transparent" />
-                      </div>
-
-                      {/* Drop Feedback pins simulations */}
-                      <div className="absolute left-[54%] top-[42%] flex items-center gap-2">
-                        <div className="relative flex items-center justify-center w-7 h-7 rounded-full border border-[#E6C280] bg-[#5C1D24] text-[#E6C280] shadow-[0_0_15px_rgba(230,194,128,0.5)]">
-                          <MessageSquare className="w-3.5 h-3.5" />
-                        </div>
-                        <div className="bg-[#1C080B]/95 border border-[#E6C280]/30 p-2 rounded backdrop-blur-md text-[9px] max-w-xs shadow-lg">
-                          <div className="flex justify-between gap-2 font-mono font-bold text-[#E6C280] mb-0.5">
-                            <span>MEI LIN • Art Director</span>
-                            <span>#01 PIN</span>
-                          </div>
-                          <p className="text-white italic">
-                            "Align ending golden logo 0.5s faster and sharpen lattice vectors."
-                          </p>
-                        </div>
-                      </div>
-
-                      {/* Video mockup playback timeline */}
-                      <div className="mt-auto w-full bg-[#1C0508]/90 border border-[#E6C280]/20 p-3 rounded flex items-center gap-3 backdrop-blur-md">
-                        <Play className="w-3.5 h-3.5 text-white fill-white" />
-                        <div className="flex-1 h-1.5 bg-white/10 rounded overflow-hidden relative">
-                          <div className="absolute top-0 left-0 w-1/3 h-full bg-gradient-to-r from-red-600 to-[#E6C280]" />
-                        </div>
-                        <div className="flex items-center gap-2 text-white/50 text-[10px] font-mono">
-                          <Volume2 className="w-3.5 h-3.5" />
-                          <Maximize2 className="w-3.5 h-3.5" />
-                        </div>
-                      </div>
-                    </motion.div>
-                  )}
-
-                  {activeTab === 'agent' && (
-                    <motion.div
-                      key="agent-overlay"
-                      initial={{ opacity: 0, scale: 0.95 }}
-                      animate={{ opacity: 1, scale: 1 }}
-                      exit={{ opacity: 0, scale: 0.95 }}
-                      className="absolute inset-0 p-4 md:p-8 flex flex-col justify-between"
-                      id="agent-mockup-screenshot-content"
-                    >
-                      {/* Left: AI recommendations card overlay */}
-                      <div className="grid grid-cols-1 md:grid-cols-12 gap-4 h-full items-end">
-                        <div className="md:col-span-5 bg-[#1C080B]/95 border border-[#E6C280]/30 rounded-lg p-3.5 shadow-xl backdrop-blur-md flex flex-col gap-2.5 text-left">
-                          <div className="flex items-center gap-1.5 text-[9px] font-mono text-[#E6C280] uppercase tracking-wider">
-                            <Sparkles className="w-3.5 h-3.5" />
-                            <span>CO-PRODUCTION ANALYSIS</span>
-                          </div>
-
-                          <div className="space-y-2">
-                            <div className="p-1.5 rounded bg-white/5 border border-white/5">
-                              <span className="text-[8px] font-bold text-[#E6C280] uppercase block mb-0.5">
-                                Symmetry Evaluation
-                              </span>
-                              <p className="text-[9px] text-gray-300 leading-snug">
-                                The lattice boundary aligns with traditional architectural symmetry
-                                parameters (98.4% Match Score).
-                              </p>
-                            </div>
-                            <div className="p-1.5 rounded bg-white/5 border border-white/5">
-                              <span className="text-[8px] font-bold text-[#E54B4B] uppercase block mb-0.5">
-                                Color Grading Tip
-                              </span>
-                              <p className="text-[9px] text-gray-300 leading-snug">
-                                Boost Imperial Red highlights slightly by +4% during the storyboard
-                                transitions.
-                              </p>
-                            </div>
-                          </div>
-                        </div>
-
-                        {/* Right: Interactive metrics or visual status */}
-                        <div className="md:col-span-7 flex flex-col items-end justify-between h-full py-2">
-                          <div className="bg-[#1C0508]/90 border border-[#E6C280]/20 p-3 rounded-lg backdrop-blur-sm shadow-md text-right max-w-xs">
-                            <span className="block text-[8px] font-mono text-gray-400 uppercase tracking-widest leading-none mb-1">
-                              AUTOMATED DIRECTIVE
-                            </span>
-                            <h4 className="text-[10px] font-serif font-black text-[#E6C280]">
-                              Color Tone Alignment Audited
-                            </h4>
-                            <p className="text-[9px] text-gray-300 mt-1">
-                              Ready for transition exports with optimal gold gradients mapped.
-                            </p>
-                          </div>
-
-                          <div className="w-full bg-[#1C0508]/90 border border-[#E6C280]/20 p-2.5 rounded-lg flex items-center justify-between backdrop-blur-md mt-4">
-                            <div className="flex items-center gap-2">
-                              <Zap className="w-3.5 h-3.5 text-[#E6C280] fill-[#E6C280]/25 text-amber-400" />
-                              <span className="text-[10px] text-white font-mono">
-                                Agent status: Awaiting next file upload
-                              </span>
-                            </div>
-                            <span className="text-[8.5px] font-mono text-[#E6C280] uppercase tracking-wide">
-                              ● SYNCED
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-
-              {/* Decorative traditional corner ornaments indicating "Chinese precision layout design" */}
-              <div className="absolute top-1.5 left-1.5 w-3 h-3 border-t border-l border-[#E6C280]/40 pointer-events-none" />
-              <div className="absolute top-1.5 right-1.5 w-3 h-3 border-t border-r border-[#E6C280]/40 pointer-events-none" />
-              <div className="absolute bottom-1.5 left-1.5 w-3 h-3 border-b border-l border-[#E6C280]/40 pointer-events-none" />
-              <div className="absolute bottom-1.5 right-1.5 w-3 h-3 border-b border-r border-[#E6C280]/40 pointer-events-none" />
-            </div>
-          </ChineseBorder>
-
-          {/* Quick specs section below */}
-          <div className="mt-6 pt-4 border-t border-[#E6C280]/15 grid grid-cols-1 sm:grid-cols-3 gap-4 text-center">
-            {currentTabData.features.map((feat, i) => (
-              <div
-                key={i}
-                className="flex justify-between sm:justify-center sm:flex-col items-center p-2 rounded bg-white/5 border border-white/5 gap-0.5"
-              >
-                <span className="text-[10px] font-mono text-gray-400 uppercase tracking-wide">
-                  {feat.label}
-                </span>
-                <span className="text-xs font-serif font-bold text-[#E6C280]">{feat.val}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
     </div>
   );
 }
diff --git a/src/index.css b/src/index.css
index 52518c3..faad73d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,6 +10,15 @@
     monospace;
 }
 
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
 /* Custom Chinese decorative borders and patterns */
 .chinese-lattice {
   background-image: