Skip to content

Commit 20d0d2e

Browse files
Yiling-JYiling-J
authored
Merge pull request #3 from shumaiOne/feat/showcase-update
feat: redesign showcase to cinematic carousel and snap scrolling
2 parents 7f63f72 + 6888434 commit 20d0d2e

7 files changed

Lines changed: 204 additions & 446 deletions

File tree

‎public/agent-example.webp‎

421 KB
Loading

‎public/comment-example.webp‎

204 KB
Loading

‎public/list-example.webp‎

101 KB
Loading

‎src/App.tsx‎

Lines changed: 117 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
11
import {
2-
BookOpen,
3-
ExternalLink,
4-
FolderKanban,
5-
Github,
6-
MessageSquare,
7-
Play,
8-
Sparkles,
9-
Upload,
10-
} from "lucide-react";
11-
import { motion } from "motion/react";
12-
import type React from "react";
13-
import Footer from "./components/Footer";
14-
import InteractiveShowcase from "./components/InteractiveShowcase";
15-
import { ShumaiLogo } from "./components/ShumaiLogo";
2+
BookOpen,
3+
ExternalLink,
4+
FolderKanban,
5+
Github,
6+
MessageSquare,
7+
Play,
8+
Sparkles,
9+
Upload,
10+
} from 'lucide-react';
11+
import { motion } from 'motion/react';
12+
import type React from 'react';
13+
import Footer from './components/Footer';
14+
import InteractiveShowcase from './components/InteractiveShowcase';
15+
import { ShumaiLogo } from './components/ShumaiLogo';
1616

1717
export default function App() {
1818
// Scroll to workspace demo helper
1919
const scrollToDemo = (e: React.MouseEvent) => {
2020
e.preventDefault();
21-
const element = document.getElementById("demo-workspace");
21+
const element = document.getElementById('features-page');
2222
if (element) {
23-
element.scrollIntoView({ behavior: "smooth", block: "start" });
23+
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
2424
}
2525
};
2626

2727
return (
28-
<div className="chinese-lattice min-h-screen text-gray-100 font-sans selection:bg-[#E6C280] selection:text-[#5C1D24] relative overflow-x-hidden">
28+
<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">
2929
{/* Background Soft Ambient Light Blobs */}
3030
<div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-[#8B1C26]/20 rounded-full blur-[120px] pointer-events-none select-none" />
3131
<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() {
6666
</div>
6767
</header>
6868

69-
{/* HERO SECTION */}
70-
<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">
69+
{/* HERO SECTION (Page 1) */}
70+
<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">
7171
{/* Main Content Area: Centered layout */}
7272
<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">
7373
{/* Animated badge for app identity with yellow border */}
@@ -78,7 +78,7 @@ export default function App() {
7878
className="mb-4 relative"
7979
>
8080
{/* Double Yellow/Gold Ornate frame precisely matching the user request (traditional style) */}
81-
<div className="relative bg-[#51161C]/80 px-6 py-2 rounded-xs select-none">
81+
<div className="relative px-6 py-2 rounded-xs select-none">
8282
{/* SVG Ornate custom corner widgets in all 4 vertex coordinates */}
8383
<svg
8484
className="absolute -top-2.5 -left-2.5 w-6 h-6 text-[#E6C280]"
@@ -153,9 +153,9 @@ export default function App() {
153153
transition={{ duration: 0.6, delay: 0.2 }}
154154
className="text-xs md:text-sm text-gray-300 max-w-2xl leading-relaxed mb-6 font-sans"
155155
>
156-
Upload creative files, manage projects, and collaborate with
157-
teammates and Shumai Agent in one unified workspace built for
158-
precise feedback, shared progress, and open source flexibility.
156+
Upload creative files, manage projects, and collaborate with teammates and Shumai Agent
157+
in one unified workspace built for precise feedback, shared progress, and open source
158+
flexibility.
159159
</motion.p>
160160

161161
{/* REQUIRED TRIPLE ACTION BUTTON GROUP WITH SLASH-DIVIDED DESIGN */}
@@ -210,85 +210,128 @@ export default function App() {
210210
className="w-full grid grid-cols-2 md:grid-cols-4 gap-4 border-t border-[#E6C280]/15 pt-4 pb-0 mb-0"
211211
id="features-preview"
212212
>
213-
<div className="flex flex-col items-center p-1 text-center group">
214-
<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">
213+
<button
214+
type="button"
215+
className="flex flex-col items-center p-1 text-center group"
216+
onClick={scrollToDemo}
217+
>
218+
<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">
215219
<Upload className="w-4 h-4" />
216220
</div>
217-
<h3 className="text-[11px] font-bold text-gray-200 mb-0.5">
218-
Upload files
219-
</h3>
221+
<h3 className="text-[11px] font-bold text-gray-200 mb-0.5">Upload files</h3>
220222
<p className="text-[9px] text-gray-400">
221223
High-fidelity videography and creative templates
222224
</p>
223-
</div>
225+
</button>
224226

225-
<div className="flex flex-col items-center p-1 text-center group">
226-
<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">
227+
<button
228+
type="button"
229+
className="flex flex-col items-center p-1 text-center group"
230+
onClick={scrollToDemo}
231+
>
232+
<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">
227233
<FolderKanban className="w-4 h-4" />
228234
</div>
229-
<h3 className="text-[11px] font-bold text-gray-200 mb-0.5">
230-
Manage projects
231-
</h3>
232-
<p className="text-[9px] text-gray-400">
233-
Unified repositories and asset organization
234-
</p>
235-
</div>
235+
<h3 className="text-[11px] font-bold text-gray-200 mb-0.5">Manage projects</h3>
236+
<p className="text-[9px] text-gray-400">Unified repositories and asset organization</p>
237+
</button>
236238

237-
<div className="flex flex-col items-center p-1 text-center group">
238-
<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">
239+
<button
240+
type="button"
241+
className="flex flex-col items-center p-1 text-center group"
242+
onClick={scrollToDemo}
243+
>
244+
<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">
239245
<Sparkles className="w-4 h-4" />
240246
</div>
241-
<h3 className="text-[11px] font-bold text-gray-200 mb-0.5">
242-
Agent Co-Production
243-
</h3>
247+
<h3 className="text-[11px] font-bold text-gray-200 mb-0.5">Agent Co-Production</h3>
244248
<p className="text-[9px] text-gray-400">
245249
Automated co-production guidance & layout audits
246250
</p>
247-
</div>
251+
</button>
248252

249-
<div className="flex flex-col items-center p-1 text-center group">
250-
<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">
253+
<button
254+
type="button"
255+
className="flex flex-col items-center p-1 text-center group"
256+
onClick={scrollToDemo}
257+
>
258+
<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">
251259
<MessageSquare className="w-4 h-4" />
252260
</div>
253-
<h3 className="text-[11px] font-bold text-gray-200 mb-0.5">
254-
Precise feedback
255-
</h3>
261+
<h3 className="text-[11px] font-bold text-gray-200 mb-0.5">Precise feedback</h3>
256262
<p className="text-[9px] text-gray-400">
257263
Frame-accurate point coordinates pin annotation
258264
</p>
259-
</div>
265+
</button>
260266
</div>
261267
</section>
262268

263-
{/* WORKSPACE DEMO PREVIEW SECTION */}
264-
<section
265-
className="py-16 bg-black/40 border-t border-[#E6C280]/15 relative"
266-
id="demo-workspace"
269+
{/* WORKSPACE DEMO PREVIEW SECTION (Page 2) */}
270+
<div
271+
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"
272+
id="features-page"
267273
>
268-
<div className="max-w-6xl mx-auto px-4 mb-2">
269-
{/* Section banner */}
270-
<div className="text-center max-w-2xl mx-auto mb-12">
271-
<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">
272-
<Sparkles className="w-3 h-3 text-[#E6C280]" />
273-
<span>Symmetric Space Live</span>
274+
<section className="flex-1 flex flex-col justify-start py-2" id="demo-workspace">
275+
<div className="max-w-6xl mx-auto px-4 w-full">
276+
{/* Redesigned themed section header to match Hero badge */}
277+
<div className="flex flex-col items-center mb-8">
278+
<div className="relative px-6 py-2 rounded-xs select-none">
279+
{/* SVG Ornate custom corner widgets in all 4 vertex coordinates */}
280+
<svg
281+
className="absolute -top-2.5 -left-2.5 w-6 h-6 text-[#E6C280]"
282+
viewBox="0 0 24 24"
283+
fill="none"
284+
stroke="currentColor"
285+
strokeWidth="2"
286+
>
287+
<path d="M2.5 12V2.5H12" />
288+
<path d="M6.4 2.5V6.4H2.5" />
289+
</svg>
290+
<svg
291+
className="absolute -top-2.5 -right-2.5 w-6 h-6 text-[#E6C280] transform rotate-90"
292+
viewBox="0 0 24 24"
293+
fill="none"
294+
stroke="currentColor"
295+
strokeWidth="2"
296+
>
297+
<path d="M2.5 12V2.5H12" />
298+
<path d="M6.4 2.5V6.4H2.5" />
299+
</svg>
300+
<svg
301+
className="absolute -bottom-2.5 -left-2.5 w-6 h-6 text-[#E6C280] transform -rotate-90"
302+
viewBox="0 0 24 24"
303+
fill="none"
304+
stroke="currentColor"
305+
strokeWidth="2"
306+
>
307+
<path d="M2.5 12V2.5H12" />
308+
<path d="M6.4 2.5V6.4H2.5" />
309+
</svg>
310+
<svg
311+
className="absolute -bottom-2.5 -right-2.5 w-6 h-6 text-[#E6C280] transform rotate-180"
312+
viewBox="0 0 24 24"
313+
fill="none"
314+
stroke="currentColor"
315+
strokeWidth="2"
316+
>
317+
<path d="M2.5 12V2.5H12" />
318+
<path d="M6.4 2.5V6.4H2.5" />
319+
</svg>
320+
321+
<h2 className="font-serif text-lg font-black text-[#E6C280] tracking-[0.25em] uppercase gold-glow">
322+
shumai features
323+
</h2>
324+
</div>
274325
</div>
275-
<h2 className="text-2xl md:text-4xl font-serif text-white font-black mb-3">
276-
Experience shumai in Action
277-
</h2>
278-
<p className="text-xs text-gray-300 leading-relaxed">
279-
Explore shumai's high-fidelity creative workflow, precise
280-
coordinate-based designer annotations, and advanced AI agent
281-
coordination layouts.
282-
</p>
283326
</div>
284-
</div>
285327

286-
{/* Render interactive applet showcase simulator */}
287-
<InteractiveShowcase />
288-
</section>
328+
{/* Render interactive applet showcase simulator */}
329+
<InteractiveShowcase />
330+
</section>
289331

290-
{/* FOOTER */}
291-
<Footer />
332+
{/* FOOTER */}
333+
<Footer />
334+
</div>
292335
</div>
293336
);
294337
}

‎src/components/Footer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export default function Footer() {
22
return (
3-
<footer className="relative bg-[#1A0609]/95 border-t border-[#E6C280]/10 pt-8 pb-8 overflow-hidden px-4">
3+
<footer className="relative bg-[#1A0609]/95 border-t border-[#E6C280]/10 py-2 overflow-hidden px-4">
44
{/* Decorative Traditional Grid Lattice overlay in the footer background */}
55
<div className="absolute inset-0 opacity-5 pointer-events-none select-none">
66
<svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
@@ -19,7 +19,7 @@ export default function Footer() {
1919

2020
<div className="max-w-6xl mx-auto relative z-10 flex flex-col sm:flex-row items-center justify-center gap-4 text-center">
2121
<p className="text-xs text-gray-400 font-mono tracking-wide">
22-
© {new Date().getFullYear()} shumai.io — Made by{' '}
22+
© {new Date().getFullYear()} shumai.one — Made by{' '}
2323
<a
2424
href="https://github.com/Yiling-J"
2525
target="_blank"

0 commit comments

Comments
 (0)