Waida Studio
Grin Golf - Astro 7 Theme for Golf Clubs, Academies and Pro Shops
A pro-shop storefront and academy site in one, with not one byte of framework JavaScript. Grin Golf is a complete golf and sports-club theme built on Astro 7. Every page pre-renders to static HTML, so it loads instantly and deploys anywhere — and it ships zero framework JavaScript, just one small vanilla script.
Live demo: https://gringolf-astro.vercel.app
WHAT'S INSIDE
19 page templates — 32 static pages per build: home, about, shop, product detail, pricing, plan detail, blog, blog post, contact, checkout, PayPal checkout, order confirmation, login, signup, style guide, license, changelog, password (401) and 404
Products — 6 items as Markdown, each with its category, price, review count and rating, up to three option sets, a full variant table of up to 48 buyable combinations, and four FAQ rows on its own page
Blog — 7 articles as Markdown, with a full-bleed featured banner above six category tabs, an author-and-date byline on every card, and a rich-text body with headings, lists, quotes and full-width figures
Membership plans — 3 tiers as Markdown, printed on the home page, on /pricing and on a detail page each, with the highlighted tier's inline colours carried as fields rather than hard-coded
Commerce pages — a cart drawer, checkout, PayPal checkout and order confirmation, with option pills, quantity editing, line totals, subtotals and checkout validation (localStorage-based; wire up Stripe or Lemon Squeezy when you're ready to sell)
Motion that earns its keep — scroll reveals at the design's own offsets and delays, a five-slide testimonial cross-fade with dots, arrow keys and swipe, a statistics roll, endless belts, six-tab category sets on both the shop and the blog, FAQ accordions, a discount overlay and a write-a-review dialogue — all in one vanilla script, all respecting prefers-reduced-motion
Edit content, not code — add a Markdown file and a line of JSON, and the product, its listing card, its category tab, the related strip on every other product page and its own detail page all follow
Design-token system — the whole palette and type scale are 102 CSS custom properties in one :root block; change them there and every page follows
Self-hosted fonts — Anton, Plus Jakarta Sans, Inter and Big Shoulders Display as woff2, no CDN requests
Responsive imagery — 1,879 srcset attributes across the build, so every picture ships at the size the slot actually needs
Keyboard-reachable throughout — the tab sets have a roving tabindex with arrow keys, Home and End; the option pills are real buttons in an ARIA radio group
TypeScript throughout, zod-validated content schema
TECH STACK
Astro 7 · Markdown content collections · TypeScript · the template's own CSS — no utility framework, no build-time CSS pipeline
REQUIREMENTS
Node 22.12 or newer. npm ships with it. Nothing else to install.
LICENSE
One end product per license. You may modify the source freely; you may not resell, sublicense or redistribute it, in whole or in substantial part.
SUPPORT