How do I add the template to my project?

Copy each section as its own file into your project, for example under components/. The composition snippet on the template page imports all sections and stacks them into a finished page.

Can I swap individual sections?

Yes. Every section is self-contained. You can swap any section for another one in the same category or add more without touching the rest.

Do I need Premium for the templates?

The preview is free. Copying the included sections follows the same rules as in the library: some sections are free, full access comes with Premium.

All templates

Templates/Agency & Studio

For studios that let the work speak. An editorial hero and a calm project grid set the tone, process, team and contact make the studio tangible.

Agency & Creative Studio10 Sections

The finished page to scroll through, switchable between desktop, tablet and mobile.

Page structure

These sections make up the page above, in exactly this order. Copy each as a separate file into ./components and assemble them with the snippet below.

1
Service Design HeroHero with a clear promise
2
Asymmetric Project GridSelected projects in an asymmetric grid
3
Logo MarqueeCustomer logos as a calm band of trust
4
Woven Image StatementStatement about how we work
5
Gradient Sprint TimelineSprint process as a timeline
6
Team Hover RevealTeam with hover portraits
7
Tilted Testimonial ScatterClient voices, loosely scattered
8
Faq SectionCommon questions before getting in touch
9
Contact SectionContact with location
10
Editorial Mega FooterEditorial mega footer

Composition

Copy the sections below as separate files into ./components and assemble the page with this snippet.

import { ServiceDesignHero } from "./components/ServiceDesignHero";
import { AsymmetricProjectGrid } from "./components/AsymmetricProjectGrid";
import { LogoMarquee } from "./components/LogoMarquee";
import { WovenImageStatement } from "./components/WovenImageStatement";
import { GradientSprintTimeline } from "./components/GradientSprintTimeline";
import { TeamHoverReveal } from "./components/TeamHoverReveal";
import { TiltedTestimonialScatter } from "./components/TiltedTestimonialScatter";
import { FaqSection } from "./components/FaqSection";
import { ContactSection } from "./components/ContactSection";
import { EditorialMegaFooter } from "./components/EditorialMegaFooter";

export default function AgenturStudioPage() {
  return (
    <main>
      <ServiceDesignHero />
      <AsymmetricProjectGrid />
      <LogoMarquee />
      <WovenImageStatement />
      <GradientSprintTimeline />
      <TeamHoverReveal />
      <TiltedTestimonialScatter />
      <FaqSection />
      <ContactSection />
      <EditorialMegaFooter />
    </main>
  );
}

Next template: Coaching & Wellness

FAQ

Frequently asked questions

A curated landing page made of matching library sections in a sensible order from hero to footer. You copy the sections one by one and assemble them with the composition snippet.

Didn't find your question? We're happy to help.

Get in touch