Charcoal UI

Ashfall: Creative agency template

Work first. Words second.

An agency or studio site: gallery hero, alternating case studies, numbers, one big testimonial and a giant wordmark footer.

About the Ashfall template

Ashfall is an agency or studio site: a gallery hero of your work, alternating case studies, numbers, one big testimonial, an FAQ and a giant wordmark footer.

Work first. Words second. It is a complete creative agency landing page for React and Tailwind CSS 4, assembled from 7 Charcoal UI sections.

Who Ashfall is for

  • Design and branding agencies.
  • Video and photo studios.
  • Freelancers with a body of work.
  • Architecture and interiors.

What is inside

7 sections, top to bottom:

  • Navbar Mega Menu: A full-width bar with a mega menu that unfolds on hover or focus.
  • Hero Gallery: Agency hero: an oversized headline with a highlighted phrase over two counter-scrolling rows of work.
  • Features Alternating: Alternating image and text rows that slide in from opposite sides as you scroll.
  • Stats Counters: Four big numbers that roll into place when they enter view.
  • Testimonials Spotlight: One large quote at a time, with avatar buttons to switch between voices.
  • FAQ Grid: Questions laid out in a grid with a contact card, for short answers.
  • Footer Wordmark: An enormous wordmark that rises into view, under a short row of links.

How it is built

Work rows, case studies and the wordmark are props, so it becomes your studio by editing content, not code.

Install Ashfall

npx shadcn@latest add @charcoal/ashfall

Templates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.

Frequently asked questions

Can I use Ashfall for a client site?
Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
Is Ashfall a Next.js template?
It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.

Sections in this template

  • Navbar Mega Menu: A full-width bar with a mega menu that unfolds on hover or focus.
  • Hero Gallery: Agency hero: an oversized headline with a highlighted phrase over two counter-scrolling rows of work.
  • Features Alternating: Alternating image and text rows that slide in from opposite sides as you scroll.
  • Stats Counters: Four big numbers that roll into place when they enter view.
  • Testimonials Spotlight: One large quote at a time, with avatar buttons to switch between voices.
  • FAQ Grid: Questions laid out in a grid with a contact card, for short answers.
  • Footer Wordmark: An enormous wordmark that rises into view, under a short row of links.

Ashfall as Markdown