Skip to content
6
SourceReport issue

Agency Landing

Bright, shader-lit agency landing page: a full-viewport hero with an animated WebGL backdrop and pill navigation, an editorial about section, a featured-work grid of autoplaying video cards, and a dark closing footer with a call to action. Built on the shaders package, with a self-contained light palette.

Preview

Installation

npx shadcn@latest add https://hirael.com/r/agency-landing.json

Code

components/templates/agency-landing/agency-landing.tsx
import { About } from './about';
import { CaseStudies } from './case-studies';
import { Footer } from './footer';
import { Hero } from './hero';

const SYSTEM_FONT =
  'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';

const AgencyLanding = () => {
  return (
    <div className="bg-white text-gray-900 antialiased" style={{ fontFamily: SYSTEM_FONT }}>
      <Hero />
      <About />
      <CaseStudies />
      <Footer />
    </div>
  );
};

export default AgencyLanding;

Dependencies

shadcn registry

badgebutton

npm

shaderslucide-react