Lambda Agency is a content-driven agency template built on Astro 6 and Tailwind CSS v4. It ships with every page wired up, every content collection structured, and every SEO detail in place, so you can focus on customizing your message instead of scaffolding your site.
Lambda Agency stays fast by default: no animation libraries, no client-side frameworks, no unnecessary overhead. What you get is a clean editorial aesthetic, a performance-first architecture, and a codebase that stays out of your way.
Live demo: https://lambda-agency.netlify.app
Who is this template for?
Lambda Agency is the right fit for:
Digital agencies and design studios that need a complete, professional web presence with blog, portfolio, and contact, ready to ship without months of development.
Freelancers and independent consultants looking for a polished, content-driven site that presents services and case studies with credibility and clarity.
Developers and agencies building for clients who want a well-structured, type-safe starting point they can confidently customize and hand off.
Teams that value performance and want Lighthouse scores in the high 90s out of the box, including on mobile, without fighting their own tooling.
Features
- Full-screen mobile menu: A smooth, fullscreen overlay navigation with large numbered items and an integrated contact CTA at the bottom. No JavaScript frameworks, just clean event delegation and scoped CSS.
- MDX Blog with full editorial structure: Content Collections with Zod schema validation, featured posts, related posts, author cards, category and tag filtering, newsletter CTA, and optimized cover images. Everything a real content operation needs.
- Portfolio with dual image support: Each project carries a 4:5 portrait thumbnail for listings and a 16:9 landscape cover for the detail page. Category filtering, project galleries, results metrics, and prev/next navigation are all included.
- Responsive image pipeline: The hero image is preloaded with a matching responsive WebP srcset, the browser fetches exactly the variant it will render. No double downloads, no layout shift.
- SEO component: Handles title tags, meta description, canonical URLs, Open Graph, Twitter Cards, and JSON-LD Schema.org (WebSite and Article types) from a single component. Pass props per page, done.
- CSS-only FAQ accordion: Smooth expand/collapse animation using the grid-template-rows trick, no JavaScript required. Respects the user's reduced-motion preference.
- Legal pages included: Privacy Policy and Terms of Service ship with a structured placeholder outline. Update the copy with your real policies and they're ready.
- View Transitions: Enabled globally via Astro's ClientRouter. Add transition names to specific elements for named animations across page navigations.
- Type-safe content and configuration: All site data, agency info, nav, services, team, testimonials, logos, lives in typed TypeScript files. Change a value once, every page updates.
Tech Stack
- Astro 6 — static output, fully typed, zero client JS by default
- Tailwind CSS v4 — CSS-first configuration via @theme tokens
- TypeScript (strict mode)
- MDX — full component support in blog posts
- astro:assets — automatic WebP, responsive srcset, lazy loading
- @astrojs/sitemap — auto-generated on every build
Pages & Sections
- Home: Hero with editorial image and floating stat cards, client logo strip, services preview, featured projects grid, about teaser, testimonials, CTA.
- Services: Overview of capabilities, detailed service list, process steps.
- Projects: Filterable portfolio grid with category tabs. Each project detail page includes hero cover, gallery, results metrics, and prev/next navigation.
- About: Team grid with social links, values section, stats, agency story with image.
- Blog: Featured post highlight, full post listing with filters. Each post includes author card, related posts, tags, category, and reading time.
- Contact: Contact form (ready to wire to Formspree, Web3Forms, or Netlify Forms), agency info block, social links, FAQ accordion.
- Legal: Privacy Policy and Terms of Service with structured placeholder content.
- 404: Custom not-found page with hand-drawn illustration and animated compass needle.
Performance
95+ Lighthouse on mobile and desktop. Fonts loaded non-blocking via the media="print" onload pattern. Hero LCP image preloaded with exact srcset match. No render-blocking scripts. Fully static output.
Additional Highlights
- Handwritten annotation details (Caveat font) for editorial personality
- font-display: swap on all font families
- Semantic HTML throughout, correct heading hierarchy, landmark regions, ARIA where needed
- Zero-config deploy to Vercel, Netlify, Cloudflare Pages, or any static host
- Single config file (src/data/site.ts) for all agency-wide settings: name, contact, social links, hero image, OG image
