Components
Studio Hero
The StudioHero component is a modern, full-bleed hero section built entirely with shadcn/ui primitives and Tailwind utility classes. It combines a cinematic background image, soft gradient overlays, and a large typographic watermark to create an atmospheric visual identity for creative studios or agencies. The left column lists key services, while the right side features a concise tagline, category chips, and clear call-to-action buttons. Every element—from overlay accent color to watermark visibility—is configurable through props, allowing designers to easily adapt it to different brands or campaigns.
Loading preview...
// app/hero-demo/page.tsx
import { StudioHero } from "@/components/ui/studio-hero";
export default function Page() {
return (
<StudioHero
wordmark="RUIXEN STUDIOS®"
tagline="Design practice focused on brand systems, motion, and performant web experiences."
chips={["Strategy", "Identity", "Web", "Motion"]}
services={[
{ label: "Brand Systems", href: "#" },
{ label: "E‑commerce & Platforms", href: "#" },
{ label: "Motion & Editing", href: "#" },
{ label: "Campaigns", href: "#" },
]}
ctaPrimary={{ label: "Book a Call", href: "#contact" }}
ctaSecondary={{ label: "See Case Studies", href: "#work" }}
backgroundImage="https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/gold-texture.png"
overlayAccent="rgba(255,185,80,0.28)" // tweak the ambient sweep color
minHeightPx={760}
/>
);
}