Skip to content
38

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

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

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 AgencyLanding = () => {
  return (
    <div className="bg-background [font-family: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'] text-foreground antialiased">
      <Hero />
      <About />
      <CaseStudies />
      <Footer />
    </div>
  );
};

export default AgencyLanding;

Dependencies

npm

shaderslucide-react