Skip to content

Falcon

Agency / Portfolio / Blog Pro HTML

Bold agency / portfolio / blog theme. Stacking color-block case studies, mega-menu navigation, marquee bands, and a confident Anton type system. Light + dark variants included.

$79 $59 launch sale

Editions: Astro (source), HTML (plain files, no build).

Read the Falcon docs Lifetime updates Personal & client use
All-Access Pass

One payment for Falcon and everything else - all 31 themes, every future release, and the visual builder included.

$1371 $199 one-time
Get the All-Access Pass
A closer look

See Falcon in action

Every page and section is part of the download. Use these as launch-day templates - keep the structure, swap the copy.

Homepage hero - type-led with featured image
Stacking case-study card (Cohort)
Who we are - about block
Meet the team grid
Blog index
Contact page - light theme variant
Editing live in the AeroLaunch visual builder
14
Pages
25
Sections
Light + Dark
Variants
Yellow
Signature Accent

Falcon is for independent studios and small agencies that want their site to do the heavy lifting. GSAP-pinned stacking case-study cards, a full-bleed mega-menu, three marquee variants (logo / photo / CTA), a values-tabs section with synchronized image swiper, char-shift hover micro-interactions, and a giant Anton type system. Brand yellow (#ffd640) as a single signature accent.

Best Fit For

  • Independent design + development studios
  • Small to mid-size agencies
  • Brand-led freelancers
  • Creative consultancies
  • WordPress / Astro shops
  • White-label production teams

Full Page Set

Every page is real and editable - no placeholders, no "coming soon" stubs.

Home
Work
Work Detail
About
Services
Service Detail
Blog
Blog Post
Pricing
Contact
All Sections
Privacy
Terms
404

25 Sections Included

Every section is a ready-to-use Astro component. Add it to any page, customize via config, or remove what you don't need.

Nav (mega-menu)
Sticky header with logo, links, colored mega-menu panels per service, mobile drawer, light/dark toggle, and sticky CTA pill
Hero (type-led)
Mono kicker + giant Anton cap headline + featured hero image. Three size variants (xl/lg/headline)
Logo Marquee
Infinite-loop monochrome client logo strip, 120s animation, light/dark aware
Photo Marquee
Infinite-loop photo strip used on the about page and project detail pages
Display Label
Massive centered uppercase label up to 160px - section break or anchor
Stacking Cases
Signature GSAP-pinned case-study deck. Each project card pins to the top with a 24px peek between cards
Two-Up Content
Generic 2-up block: kicker + heading + body + CTA on one side, image(s) on the other. Reversible.
Testimonial
Large display-type blockquote with avatar + name + role attribution
Services Grid
3-column colored service cards with sub-link lists. Per-card background colors + inverted-on-light variant
Who We Are
2-up 'about us' block with display-large heading + team photo
Blog Grid
3-column post grid with date, category, title, excerpt, author - reads from astro:content
CTA Marquee
Full-bleed yellow CTA band - infinite-scroll text + button pill, 180s animation
Footer
3 link columns + address column + bottom legal strip
Footer Wordmark
Giant SVG wordmark clipped at the bottom of every page (optional)
Stats Inline
Text + image + inline stats with divider line
Team Grid
4-column portrait grid with hover-revealed pill that opens a full bio modal
Values Tabs
Tabbed word-buttons swap a description AND a synchronized 3-photo gallery
Partners Block
2-up text + image, 5-client logo row, and a bottom display-quote testimonial
Contact Teasers
3-card service teasers that lift on hover, linking deeper into the site
Contact Form
Provider-switched form (Formspree / FormSubmit / Netlify) with 'what happens next' sidebar + honeypot
Find Us
Address + OpenStreetMap embed + 'Get directions' link
FAQ Accordion
Native <details> accordion with yellow + icon rotation
Pricing
3-tier engagement pricing - Sprint / Studio / Partnership with a featured-middle highlight + dark/inverted variants
Timeline
Vertical company timeline with year column, yellow milestone dots, and a connecting line
Newsletter
Inline email signup. Provider-switched (Mailchimp / ConvertKit / Buttondown) with honeypot spam protection

What's Included

Stacking scroll case-study deck (GSAP ScrollTrigger) with 24px peek between cards
Mega-menu navigation with colored full-bleed service panels
Three marquee variants: logo strip, photo strip, CTA band
Per-tab Swiper-style values section that swaps text + image together
char-shift hover micro-interaction on every link (double-stack letter lift)
Filterable work index page (filter chips refresh GSAP triggers)
Team grid with hover-revealed pill → bio modal
Provider-switched contact form (Formspree / FormSubmit / Netlify)

Cards That Pin and Peek

Falcon's signature move is the stacking case-study deck. Each project card pins to the top of the viewport as you scroll, then the next one slides over it with a 24px peek of the card below. GSAP ScrollTrigger handles the pinning, and the filter chips on /work/ kill and rebuild triggers when you change the view - so filtering never breaks the scroll behavior.

Type That Earns Its Scale

Anton at 96px+ does the work that photography would do in a different theme. Tight letter-spacing, 85–95% line-height, and JetBrains Mono kickers above every section. The display type IS the brand - paired with Inter body text for readability without visual conflict.

One Accent Color, Earned

Brand yellow (#ffd640) shows up exactly where attention should go: CTA pills, the bottom marquee band, the sticky 'Let's chat' popup, and one case-study card as a deliberate palette interruption. Eleven other case-study colors live alongside it, but yellow is the through-line.

Set up in minutes

Forms, newsletter, and analytics - pre-wired

Falcon is ready to connect to your preferred providers. Pick from the options below, drop in a single API key, and your contact form, newsletter signup, and analytics are live - no backend, no JavaScript, no glue code.

Contact form

The Contact section's <form> renders with no JS. Set one provider in site.ts; the form action wires automatically.

  • Formspree
    50 free submissions / month, no domain restriction
  • FormSubmit
    Free, no signup - just an email confirmation
  • Netlify Forms
    Free 100/month - Netlify hosting only
Setup guide

Newsletter

The Newsletter form sends subscribers directly to your ESP. The email input name auto-adjusts per provider.

  • Mailchimp
    Standard EMAIL field; honeypot supported
  • ConvertKit (Kit)
    email_address field; works with any form ID
  • Buttondown
    email field; lightest, indie-friendly
Setup guide

Analytics

Layout.astro injects the right script tag based on the provider you choose. No client-side branching.

  • Google Analytics 4
    Paste your G-XXXXXXXXXX measurement ID
  • Plausible
    Privacy-friendly, ~1 KB script, no cookies
  • Umami
    Self-hostable, also cookie-free
Setup guide

Tech Stack

Astro 7 Tailwind v4 TypeScript Responsive SEO Ready Blog Ready

Config-Driven Setup

Every theme uses a single src/config/site.ts file for customization. Change your brand, navigation, form providers, analytics, and section content without touching component code.

Full site.ts reference in the docs

site.ts
// src/config/site.ts
export const siteConfig = {
  name: "Your Company",
  tagline: "Your tagline here",
  url: "https://yourdomain.com",

  navigation: { sticky: true, links: [...], cta: {...} },
  social:     { twitter: "...", github: "...", linkedin: "..." },
  seo:        { title: "...", description: "...", ogImage: "/og.png" },

  // ── Provider switches ────────────────────────────────
  contactForm: { provider: "formspree",  formspreeId: "your-id" },
  newsletter:  { provider: "convertkit", actionUrl: "https://..." },
  analytics:   { provider: "plausible",  plausibleDomain: "you.com" },

  // ── Section data ─────────────────────────────────────
  team, video, timeline, comparison, gallery,
  carousel, tabs, appDownload, map, footer,
} as const;
HTML

The same design as plain HTML

No Astro, no npm, no build step. Unzip the folder, open index.html straight from your disk and it works. Every page is a plain .html file you edit in any editor, the styling lives in one readable CSS file with the colours at the top, and an optional Tailwind folder is there if you want utility classes back. Deploy it to any static host: Netlify, Cloudflare Pages, GitHub Pages or plain cPanel.

Full documentation, ready before you buy

Browse the install guide, the site.ts reference, provider setup, deploy instructions, and the Falcon-specific page - all live now.