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

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

Dependencies

npm

shaderslucide-react