Templates: complete Astro sites built from Pro sections

A flip countdown to the launch over a retro grid, a signup field whose text blurs away as it sends, and a thanks page that tells the reader their place in line.

The form sends with JavaScript switched off, to Formspree, Netlify Forms or an endpoint of your own; the script adds the status line, the place in line and the confetti.

Pro sections it uses · 6

• Waitlist Hero
• Feature Atlas
• FAQ
• Thank You
• 404
• Footer

Every script the page loads, inline and imported, measured from the template’s build on 2026-10-10. Raw is the file as built, gzip is that file gzipped. A ceiling per page holds each figure in CI.

The home page opens on the product: a browser window with the dashboard in it that stands upright as the page scrolls, and a demo video one click away.

Then the features, prices billed monthly or yearly, a changelog, a blog in MDX with an RSS feed, an about page, a contact form and a two-step sign-in for your own auth service. Both forms send without JavaScript.

Pro sections it uses · 24

• Sticky Nav Bar
• Product Hero
• Logo Wall
• Sticky Features
• Feature Atlas
• Integration Beams
• Stats Row
• Testimonial Marquee
• Pricing Cards
• FAQ
• Call to Action
• Feature Tabs
• Feature Rows
• Comparison Table
• Pricing Table
• Changelog
• Blog Grid
• Blog Article
• Steps / Timeline
• Team Grid
• Contact Split
• Sign In
• 404
• Footer

Every script the page loads, inline and imported, measured from the template’s build on 2026-10-10. Raw is the file as built, gzip is that file gzipped. A ceiling per page holds each figure in CI.

The home page opens on a prompt box whose examples open the demo on a task. A run of the agent replays lane by lane, from the failed job to the approval, and the demo page plays a conversation with it: each tool call, what it returned and the answer.

Then the config that connects the agent to Claude Code, Cursor or Codex, security, prices per seat with credits, a changelog, docs in MDX and a two-step sign-in for your own auth service. It is drawn dark first, and every task the agent is shown doing is one content file.

Pro sections it uses · 20

• Sticky Nav Bar
• Prompt Hero
• Logo Wall
• Agent Run
• Feature Tabs
• Feature with Code
• Integration Beams
• Testimonial Cards
• Pricing Cards
• FAQ
• Call to Action
• Chat Demo
• Feature Rows
• Stats Row
• Pricing Table
• Changelog
• Blog Article
• Sign In
• 404
• Footer

Every script the page loads, inline and imported, measured from the template’s build on 2026-10-10. Raw is the file as built, gzip is that file gzipped. A ceiling per page holds each figure in CI.

The home page opens on the name in big type and a reel, then the work as an index whose covers follow the pointer. A work page filters the projects by discipline and plays a clip on hover; each case study opens its cover to the full width as the page scrolls, with a before and after, the results and a gallery.

Services, clients, quotes, an about page with the team, a journal in MDX with an RSS feed, and a contact form with a project type and a budget range that sends without JavaScript. Four sample projects with work made for them, every picture captured from Pro’s own GPU effects.

Pro sections it uses · 17

• Nav Fullscreen
• Hero Kinetic
• Project Index
• Services List
• Logo Wall
• Testimonial Cards
• Work Grid
• Case Study Hero
• Feature Rows
• Stats Row
• Steps / Timeline
• Team Grid
• Blog Hover List
• Blog Article
• Contact Split
• 404
• Footer Big Type

Every script the page loads, inline and imported, measured from the template’s build on 2026-10-10. Raw is the file as built, gzip is that file gzipped. A ceiling per page holds each figure in CI.

Six industries from one source, each one line of config: a creative agency, a restaurant, a small place to stay, a beach club, a spa and a photography studio, with their own words, prices, page names and drawings. Eight palettes, each measured so the text on every colour block reads at 4.5 : 1, and three type pairings.

A headline that rises line by line with its last word turning, the offer as colour cards and as pages of packages, two crossing bands of words, the work as a stacked deck that recedes as you scroll, figures on a colour block, and a footer uncovered by the page with the name in two faces. Light only, and the contact form sends without JavaScript.

Pro sections it uses · 13

• Sticky Nav Bar
• Hero Blocks
• Block Cards
• Ticker Bands
• Case Stack
• Motif Stats
• Sticker Cloud
• Dot Process
• Block CTA
• Package Cards
• Contact Split
• 404
• Footer Big Type

Every script the page loads, inline and imported, measured from the template’s build on 2026-10-10. Raw is the file as built, gzip is that file gzipped. A ceiling per page holds each figure in CI.

Six industries from one source, each one line of config: a ceramics studio, a clothing label, a coffee roaster, a skincare maker, a furniture workshop and a bakery, with their own words, products, page names and drawings. Six palettes, each measured so the text on every colour block reads at 4.5 : 1, and three type pairings.

Every product is drawn in the browser on a plate in the palette’s colours, so a new palette recolours the shop: the first screen turns through them, a colourway recolours the drawing in place, and the picture travels from its card to its page. The materials as a pickable index with drawn swatches, how a thing is made on a stitched thread, the next batch with how many are spoken for, and a footer made like a sewn label. Light only, and both forms send without JavaScript.

Pro sections it uses · 11

• Sticky Nav Bar
• Hero Specimen
• Product Rail
• Product Grid
• Material Index
• Process Thread
• Product Drop
• Product Detail
• Visit Card
• Contact Split
• Footer Label

Every script the page loads, inline and imported, measured from the template’s build on 2026-10-10. Raw is the file as built, gzip is that file gzipped. A ceiling per page holds each figure in CI.

Six kinds of event from one source, each one line of config: a conference, a music festival, a monthly meetup, a weekend market, a city race and a season of workshops, with their own words, lineups, programmes, tickets and page names. Six palettes, each measured so the text on every colour block reads at 4.5 : 1, and three type pairings.

Every person is drawn in the browser from their name until you add a photograph, so a lineup of placeholders already reads as a lineup. A link to a session opens the programme on its day, the venue’s list lights its place on the map, and the footer is made like a ticket with its stub. Light only, and the message form sends without JavaScript.

Pro sections it uses · 9

• Sticky Nav Bar
• Hero Poster
• Lineup Grid
• Schedule Days
• Ticket Tiers
• Venue Guide
• FAQ
• Contact Split
• Ticket Stub

Every script the page loads, inline and imported, measured from the template’s build on 2026-10-10. Raw is the file as built, gzip is that file gzipped. A ceiling per page holds each figure in CI.

Six kinds of work from one source, each one line of config: a newsletter, a podcast, an online course, a coach, an illustrator and a video maker, with their own words, pieces, offers and page names, and their own way of picturing a piece (a waveform, a drawing or a video frame). Six palettes of three soft tints, an accent and a strong ink, each measured so the text on every colour block reads at 4.5 : 1, and three type pairings.

You are drawn in the browser from your name until you add a photograph, and the tiles lean toward the pointer. A podcast episode with an audio file plays in the page, a course’s modules open under their offer, the notes settle as they scroll in, and the footer signs off like a letter. Light only, and the signup sends without JavaScript.

Pro sections it uses · 9

• Sticky Nav Bar
• Hero Bento
• Piece List
• Signup Preview
• Offer Shelf
• Notes Wall
• Now List
• FAQ
• Footer Signoff

Every script the page loads, inline and imported, measured from the template’s build on 2026-10-10. Raw is the file as built, gzip is that file gzipped. A ceiling per page holds each figure in CI.

Six kinds of product from one source, each one line of config: an email API, serverless Postgres, a search API, feature flags, a media API and a log API, each with its own OpenAPI document, guides, prices, regions and status. Six palettes, three dark and three light, each measured so the text on every colour reads at 4.5 : 1, and three type pairings.

The reference writes a request in cURL, JavaScript, Python and Go for every operation, and the language picked switches every sample on the page. The pricing slider reprices every plan with no script, search covers the docs and the reference, and the contact form sends without JavaScript.

Pro sections it uses · 15

• Sticky Nav Bar
• Request Hero
• Feature Atlas
• Feature with Code
• Regions Map
• Changelog
• Block CTA
• Docs Shell
• Quickstart Steps
• API Reference
• Usage Pricing
• FAQ
• Status Board
• Contact Split
• Footer

Every script the page loads, inline and imported, measured from the template’s build on 2026-10-10. Raw is the file as built, gzip is that file gzipped. A ceiling per page holds each figure in CI.

Six kinds of app from one source, each one line of config: a habit tracker, a budget app, a language course, a sleep app, a recipe planner and a trip planner. The screens are drawn from rows written as JSON, so a palette recolours them and no screenshot goes stale. Six palettes, five light and one dark, each measured so the text on every colour reads at 4.5 : 1, and three type pairings.

The store buttons are text, a QR code encoded at build opens a page that sends a phone on to its own store, and the press kit draws its icon files at build. The privacy page ships as an outline, and the build stops until it is written; the support form sends without JavaScript.

Pro sections it uses · 12

• Sticky Nav Bar
• App Hero
• Screens Scroll
• Widget Bento
• Rating Summary
• Pricing Cards
• Store CTA
• Changelog
• FAQ
• Contact Split
• Press Kit
• Footer

Every script the page loads, inline and imported, measured from the template’s build on 2026-10-10. Raw is the file as built, gzip is that file gzipped. A ceiling per page holds each figure in CI.

Six kinds of agency from one source, each one line of config: a city agency, prime homes, lettings, a new development, holiday homes and commercial property. Every home is drawn from a word and a seed, by day, at dusk and at night, so a palette recolours every picture and a new listing needs no photograph until you have one. Six palettes, five light and one dark, each measured so the text on every colour block reads at 4.5 : 1, and three type pairings.

A home’s picture travels from its card to its page, the floor plan lights a room as its line is pointed at, and the calculator works out a loan, or the money to move in for a let, as the figures change and prints a table without JavaScript. The viewing request and the contact form send without JavaScript too.

Pro sections it uses · 11

• Sticky Nav Bar
• Listing Hero
• Listing Grid
• Listing Gallery
• Floor Plan
• Mortgage Calculator
• Area Panels
• Agent Cards
• Block CTA
• Contact Split
• Footer

Every script the page loads, inline and imported, measured from the template’s build on 2026-10-10. Raw is the file as built, gzip is that file gzipped. A ceiling per page holds each figure in CI.

Six kinds of practice from one source, each one line of config: a dentist, a family doctor, a physiotherapist, a vet, a law firm and an accountant. Six palettes, five light and one dark, each measured so the text on every colour block reads at 4.5 : 1, and three type pairings.

Calm by default: the site opens as a reader who asked for less motion sees it, and one setting turns the arrivals back on. The open line reads the hours in the practice’s own time zone, the request is checked a step at a time and still sends as one form without JavaScript, and the privacy page ships as an outline the build waits for.

Pro sections it uses · 13

• Sticky Nav Bar
• Hero Practice
• Service Index
• Steps / Timeline
• People List
• FAQ
• Block CTA
• Service Detail
• Fee Table
• Contact Split
• Visit Card
• Notice Band
• Footer

Every script the page loads, inline and imported, measured from the template’s build on 2026-10-10. Raw is the file as built, gzip is that file gzipped. A ceiling per page holds each figure in CI.

Six kinds of stay from one source, each one line of config: a guesthouse, a villa let whole, a boutique hotel, an eco lodge, a surf camp and a mountain cabin. The rooms and the house are drawn, so a palette repaints every room and a new room needs no photograph until you have one. Six palettes, five light and one dark, each measured so the text on every colour block reads at 4.5 : 1, and three type pairings.

No booking is kept on the site: the dates and the guests go to your engine as the parameters it reads, a plain form without JavaScript, with the room’s code from its own page. Light falls over the day picture, the night one lights its windows, and the pictures of the house clear from squares as they scroll in.

Pro sections it uses · 13

• Sticky Nav Bar
• Hero Stay
• Booking Bar
• Room Cards
• Nearby List
• Block CTA
• Fee Table
• Service Detail
• Visit Card
• House Rules
• FAQ
• Contact Split
• Footer

Every script the page loads, inline and imported, measured from the template’s build on 2026-10-10. Raw is the file as built, gzip is that file gzipped. A ceiling per page holds each figure in CI.