feat: redesign showcase to cinematic carousel and snap scrolling

[Yiling-J]

This PR redesigns the showcase section to a cinematic carousel, optimizes images to WebP, implements a full-screen snap-scrolling layout for the landing page, and unifies the features title styling with the Hero badge UI.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[gemini-code-assist]

Code Review

This pull request refactors the application layout to support full-page scroll snapping and simplifies the InteractiveShowcase component into a carousel with previous/next navigation. Feedback highlights critical layout and responsiveness issues, specifically suggesting the use of min-h-full instead of h-full on the Hero and features page sections to prevent content clipping and unreachable areas. Additionally, it is recommended to adjust the absolute positioning of the carousel navigation arrows to ensure they remain visible on medium-sized viewports.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

The absolute positioning of the navigation arrows (left-[-20px] md:left-[-120px] and right-[-20px] md:right-[-120px]) causes them to be positioned completely off-screen on viewports between 768px (md) and 1360px, making them invisible and unusable. Positioning them inside the image viewport (e.g., using left-4 and right-4) resolves this issue and ensures a fully responsive layout across all screen sizes.

Suggested change

	<button
	onClick={handlePrev}
	className="absolute left-[-20px] md:left-[-120px] top-1/2 -translate-y-1/2 z-10 w-10 h-10 md:w-12 md:h-12 rounded-full bg-[#E6C280]/20 border border-white/10 flex items-center justify-center text-white hover:text-black hover:bg-white hover:border-white/20 transition-all backdrop-blur-sm cursor-pointer"
	aria-label="Previous slide"
	>
	<ChevronLeft className="w-6 h-6" />
	</button>
	<button
	onClick={handleNext}
	className="absolute right-[-20px] md:right-[-120px] top-1/2 -translate-y-1/2 z-10 w-10 h-10 md:w-12 md:h-12 rounded-full bg-[#E6C280]/20 border border-white/10 flex items-center justify-center text-white hover:text-black hover:bg-white hover:border-white/20 transition-all backdrop-blur-sm cursor-pointer"
	aria-label="Next slide"
	>
	<ChevronRight className="w-6 h-6" />
	</button>
	<button
	onClick={handlePrev}
	className="absolute left-4 top-1/2 -translate-y-1/2 z-10 w-10 h-10 md:w-12 md:h-12 rounded-full bg-[#E6C280]/20 border border-white/10 flex items-center justify-center text-white hover:text-black hover:bg-white hover:border-white/20 transition-all backdrop-blur-sm cursor-pointer"
	aria-label="Previous slide"
	>
	<ChevronLeft className="w-6 h-6" />
	</button>
	<button
	onClick={handleNext}
	className="absolute right-4 top-1/2 -translate-y-1/2 z-10 w-10 h-10 md:w-12 md:h-12 rounded-full bg-[#E6C280]/20 border border-white/10 flex items-center justify-center text-white hover:text-black hover:bg-white hover:border-white/20 transition-all backdrop-blur-sm cursor-pointer"
	aria-label="Next slide"
	>
	<ChevronRight className="w-6 h-6" />
	</button>

[gemini-code-assist]

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">

[gemini-code-assist]

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"
	>