Skip to content

feat: redesign showcase to cinematic carousel and snap scrolling #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Yiling-J merged 13 commits into from
Jun 9, 2026
Merged

feat: redesign showcase to cinematic carousel and snap scrolling #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
b6bc449
feat: update showcase assets and simplify UI
Yiling-J Jun 9, 2026
4f8609b
feat: redesign showcase to cinematic carousel
Yiling-J Jun 9, 2026
da1cb26
feat: implement full-screen snap-scrolling 2-page layout
Yiling-J Jun 9, 2026
7ec5a2e
fix: enforce full-screen snap-scrolling and fix a11y lint errors
Yiling-J Jun 9, 2026
d34f807
fix: optimize vertical space to ensure footer visibility on features …
Yiling-J Jun 9, 2026
6c4fcf3
fix: restore image width and further optimize vertical spacing
Yiling-J Jun 9, 2026
5ca804d
fix: enforce 16:9 aspect ratio and adjust layout
Yiling-J Jun 9, 2026
b3b2729
style: redesign features title with themed ornate styling
Yiling-J Jun 9, 2026
d6172a7
style: unify features title with Hero badge UI
Yiling-J Jun 9, 2026
e23060b
fix: resolve biome formatting issues causing CI failure
Yiling-J Jun 9, 2026
bf5fb3a
fix: position carousel navigation arrows inside viewport for responsi…
Yiling-J Jun 9, 2026
f96e907
style: position arrows outside on large screens and darken bg when in…
Yiling-J Jun 9, 2026
6888434
fix: biome formatting in InteractiveShowcase
Yiling-J Jun 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/agent-example.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/comment-example.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/list-example.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
191 changes: 117 additions & 74 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" />
Expand Down Expand Up @@ -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">

@gemini-code-assist gemini-code-assist Bot Jun 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using a rigid h-full (which resolves to 100vh here) can cause content to be clipped or overflow on smaller screens or in landscape mode. Changing this to min-h-full ensures the section is at least the height of the viewport but can expand to fit its content if needed.

Suggested change
<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">
<section className="min-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 */}
Expand All @@ -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]"
Expand Down Expand Up @@ -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 */}
Expand Down Expand Up @@ -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"
>
Comment on lines +270 to 273

@gemini-code-assist gemini-code-assist Bot Jun 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using h-full on the features page container restricts its height strictly to 100vh. Since the interactive showcase, header, and footer combined can easily exceed 100vh on smaller laptop screens or mobile devices, this will cause content overflow. Under snap-mandatory, this makes the overflowing content (like the footer) completely unreachable. Changing this to min-h-full allows the container to grow to fit its content.

Suggested change
<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="min-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>
);
}
4 changes: 2 additions & 2 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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"
Expand Down
Loading
Loading