Ascot Readme

A modern, AI-built website template for steel manufacturers, metal roofing suppliers, and metal building dealers. Ship a fast Next.js front end with a full product catalog, panel and trim profile pages, 3D building visualizers, and an AI sales assistant that answers customer questions and captures quote requests, all without a CMS.

🌐 Demo: ascot.gallop.software
☁️ Cloudflare Demo: ascot-cloudflare.gallop.software
🎨 Template: gallop.software/templates
📦 Repository: github.com/gallop-software/ascot
🏷️ Category: Steel Manufacturer & Metal Building Template

Why Use Gallop Templates?

Steel and metal building sites live or die on the catalog: panel profiles, gauges, coatings, trim, color charts, and building packages. This template keeps all of that in two plain TypeScript files, so you can rebrand the entire site by editing company details and catalog data instead of hunting through dozens of components. Just chat with AI inside our Gallop AI Editor, describe the panel, product page, or layout you want, and AI writes the code. Add smooth animations, configure your SEO and AI discoverability instantly, expand endlessly, and get prompting tips from our Gallop community. Go live in minutes.

Features

• 🚀 Next.js 16.2 with App Router
• ⚛️ React 19 for cutting-edge performance
• 🎨 Tailwind CSS 4.3 for pixel-perfect design
• 🏭 Centralized company config - Rebrand from src/config.ts and src/catalog.ts, not scattered components
• 📐 Panel profile pages - Per-profile routes with specs, gauges, coatings, and cross-links
• 🧱 Product catalog - Panels, structural components, trim, and accessories in one typed dataset
• 🏗️ 3D building, panel, and trim viewers built with React Three Fiber
• 🎨 Color chart with swatches and configurable finish disclaimers
• 🤖 AI sales assistant - Streaming chat widget that answers from your own config and catalog
• 📝 Quote and contact forms with Cloudflare Turnstile spam protection
• 🔍 Built-in search powered by FlexSearch with Algolia Autocomplete
• 🗺️ Sitemap and robots generated from your routes
• 📱 Fully responsive and mobile-optimized
• ⚡ Lightning-fast page loads
• 🎭 Framer Motion animations
• 🎯 SEO and AI optimized with LocalBusiness and Product structured data
• 📄 llms.txt summary for AI crawlers
• 🛡️ Gallop Canon - AI guardrails for consistent, reliable code
• 🎨 Iconify icons (Heroicons, Lucide, Material Design, Simple Icons)
• 📊 Vercel Analytics integration

Getting Started

New to this? No problem. You'll have AI guiding you the entire way.

The Gallop AI Editor

The Gallop AI Editor is a desktop app built specifically for AI-powered web development for Next.js. It includes everything you need — code editor, AI assistant, Git, terminal, media manager, font manager, SEO & structured data scanner, and a gallery of open-source templates — all in one window with nothing to configure.

It was purpose-built for this workflow, whether you're a complete beginner or an advanced Next.js developer who wants AI-assisted development:

Available for Mac and Windows.

Step 1: Install Gallop AI Editor

1. Go to gallop.software and download the installer for your platform
2. Open the installer and follow the prompts
3. Launch the Gallop AI Editor
4. If prompted, the editor will walk you through installing Node.js automatically — just follow the on-screen steps

Step 2: Create Your Project

Open the New Project modal. It has three tabs — Gallop Templates, Git Repositories, and Local — and you want the first one.

1. On the Gallop Templates tab, select Ascot from the gallery
2. Name your new repository, and pick which GitHub account or organization owns it
3. Choose whether it's public or private
4. Pick the folder on your computer where it should live
5. Click create

The editor then does everything else in one pass:

• Creates your own repository on GitHub from the template — a clean repo that belongs to you, with no shared history tying it back to the original
• Clones it to your machine in the folder you picked, with a progress bar
• Opens it as a project, ready to run

Because the repository is created here, your GitHub repo already exists by the time you reach Put Your Site Online — there's nothing to set up on GitHub when it's time to deploy.

Why this is one click: you're already signed in to GitHub inside the editor, so it can create the repository on your behalf without asking you for anything.

Step 3: Start Your Site

Click the play icon in the left rail (or press Cmd+1) to open the Start Website view. It's a terminal with a toolbar across the top — two clicks and your site is live locally.

1. Click Install and wait for it to finish. This downloads everything the project needs, and takes a minute or two the first time.
2. Click Start Website. Your site is now running at http://localhost:3000.
3. Click the globe icon in the top-right title bar to open your site in a browser. Hover it and it tells you the port it's running on.

Here's the full toolbar, and the command each button saves you from typing:

The play icon in the left rail turns green with a dot while your site is running, so you can tell at a glance from any view.

Leave the server running while you work. You only need Start Website once per session — the site refreshes on its own every time you or the AI saves a file.

If something looks stuck — a change won't appear, or the site won't load — try Refresh Cache first, and Stop then Start Website if that doesn't do it.

Step 4: Set Up Your Keys

Copy .env.local.sample to .env.local and fill in the keys you need. The AI can do this for you — just ask — and every variable is documented inline in the sample file.

Two of them matter more than the rest:

• OPENAI_API_KEY and OPENAI_VECTOR_STORE_ID power the AI sales assistant. The vector store must hold your own product documentation — pointing it at another company's store makes the assistant answer confidently about products you don't sell.
• NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY and CLOUDFLARE_TURNSTILE_SECRET_KEY are required, not optional. The quote form runs with Turnstile enabled, so without a site key the widget can't issue a token and submissions fail verification.

Mailgun handles form delivery, and the analytics variables are optional. Never commit .env.local or .env.production — both are gitignored, and both hold real secrets.

Step 5: Chat with AI

Press Cmd+J to show the AI panel on the right. Click the + in its header and you'll get a picker with three cards:

Both AI options are Claude Code. Gallop's AI Chat runs Claude Code under the hood and puts a friendlier interface on top of it; the Claude Code card gives you the same engine as its normal terminal interface. Same capabilities, same access to your project — pick whichever you find easier to read.

• New to this? Use AI Chat. Answers render as formatted text, file changes are easier to follow, and screenshots insert straight into the conversation.
• Already use Claude Code? Use the Claude Code card. Everything works the way you're used to, including slash commands and your existing habits.

You can run both at once in separate tabs — they're independent sessions.

Pick AI Chat, then just ask:

I'm new to this. Help me rebrand this site for my metal building company.

The AI assistant can read and edit your project files, run commands, and explain anything you're confused about. Just describe what you want in plain English:

Replace the company name, phone, address, and service area in src/config.ts

Add a 26 gauge standing seam panel profile to the catalog

Make the accent color a deep galvanized blue

Add a new page for post frame building packages

Tip: Press Cmd+Shift+S to take a screenshot of your running site and attach it to the chat. The AI can see exactly what you see and suggest changes visually.

Working in the Editor

Everything below is how you actually build your site day to day. The left rail switches between views; each has a keyboard shortcut.

Cmd+K cycles forward through views if you'd rather not remember numbers.

The AI Panel

The AI panel lives on the right and is where most of your work happens.

• Cmd+J shows and hides it. Hiding does not stop what's running — a long AI task keeps going while the panel is closed.
• Cmd+I expands it to fill the window, for when you're reading a long answer.
• Cmd+T opens a new tab; Cmd+Shift+[ and Cmd+Shift+] cycle between them. You can drag tabs to reorder them.
• Every tab has a ×. Close the last one and you're back at the AI Chat / Claude Code / Terminal picker.

Agent mode vs Plan mode — on an AI Chat tab, press Cmd+. to switch between them. (Claude Code tabs have their own mode controls, so Cmd+. doesn't apply there.)

Two AI Chat slash commands are worth knowing: /new starts a fresh conversation, and /compact summarizes a long one so you can keep going without losing the thread.

How you pay for AI is set in the panel's settings gear. There are three options, and none of them require you to have an API key:

Sessions pick up this setting when they start, so change it before opening a chat tab.

This is separate from the OPENAI_API_KEY in your .env.local. That one powers the sales assistant on your live site, which answers your customers' questions — it has nothing to do with how you're billed for building the site.

Showing AI What You See

Describing a visual bug is hard. Show it instead.

• Cmd+Shift+S — drag a box around any part of your running site. The capture opens in an annotator where you can draw arrows and boxes, then Insert it straight into a chat tab.
• Cmd+Shift+G — opens the code file behind whatever page your browser is showing. No hunting through folders to find which file draws a page.
• Cmd+Shift+L — drops the file you're editing into the chat as a reference, so you can say "fix the spacing here" without explaining where "here" is.

Studio: Images and Fonts

Cmd+4 opens Studio, which manages everything in your public/ folder.

• Drop in images and it generates thumbnails and blur placeholders automatically
• Crop and edit without leaving the editor
• Push assets to a CDN so they load fast worldwide
• Drop in a font and it converts to WOFF2, the format browsers load fastest

Studio keeps its records in _data/_studio.json. That file is generated — let Studio manage it.

SEO

Cmd+5 opens the SEO view. You run a report yourself — the AI can't trigger one for you:

1. Type or paste the URL you want to check (your local site works: http://localhost:3000)
2. Pick a report from the dropdown
3. Click Analyze

Each report opens in its own tab, so you can check several pages side by side. Ascot emits LocalBusiness and Organization schema site-wide, plus Product and BreadcrumbList schema on every panel profile page, so the structured-data report is worth running on /panels/pro-rib as well as your homepage.

Once you have the results, hand them to AI: screenshot the report with Cmd+Shift+S and insert it into a chat, or paste the details in. Then ask for what you want:

Here's the SEO report for my homepage. Fix everything it flags.

Source Control

Cmd+2 gives you Git without the command line — stage individual lines, review diffs side by side, and browse history. If you'd rather not think about Git at all, don't: ask AI to "commit my changes and push them."

Keyboard Shortcuts

On Windows, use Ctrl wherever this says Cmd.

Join the Community

Connect with other Gallop users on Discord or Slack. Share your progress, swap AI prompting tips, and see how non-programmers are launching sites that once required a full development team.

Rebranding

"Frontier Metals" is fictional demo content. Company identity is centralized, so rebranding means editing a handful of files instead of dozens of components.

Important: Certifications, warranties, engineering approvals, code compliance, and test results are configurable placeholders. Never present them as fact until your own documentation backs them up.

Put Your Site Online

Your code is already on GitHub — you're signed in inside the editor, and your repository was created when you started the project. All that's left is a hosting account: either Vercel or Cloudflare. Check their current plans before you pick — pricing and what each tier allows change over time.

The Easy Way: Let AI Deploy It

Press Cmd+6 (the rocket icon) to open the Publish view. It has a tab for each service you might need:

Each tab links straight to the page where you generate the token, with the right permissions preselected — you paste it in, click Connect to verify it, then Save.

From then on the editor injects those credentials into your terminal and AI chat automatically, so the assistant can deploy on your behalf and you never paste a token into a project file.

Important: credentials are handed to a session when it starts. After saving a new token, open a new chat or terminal tab — an existing one won't see it.

Then just ask:

Push my latest changes to GitHub and deploy this site

The AI will walk you through every step. When you're done, your site will be live with a URL you can share.

Already know which host you want? Use the ready-made prompt for Vercel or Cloudflare.

Deploy to Vercel

Connect your Vercel account in the Gallop AI Editor, then paste this into the AI chat:

Deploy this site to Vercel. My Vercel account is already connected.

Please:
1. Push my latest changes to GitHub
2. Link this project to Vercel and deploy it to production
3. Ask me for my production URL, OpenAI, Turnstile, and Mailgun values,
   then add them as environment variables
   (see .env.production.sample for the full list)
4. Tell me the live URL when it's done

Never commit .env.production — it holds real secrets.

Vercel redeploys automatically every time you push, so from here on your changes go live by asking the AI to push them.

Environment variables, without the busywork. The Vercel tab in the Publish view can push and pull your .env files against your Vercel project directly. Change a value locally, push it up; pull production values down to check them. It shows you a full diff before anything is written, and backs up your local file before a pull.

Congratulations! Your site is now live to the world. Share your new URL and start bringing in quote requests. Ready for a custom domain? See Vercel's domain setup guide.

Deploy to Cloudflare Workers

Prefer Cloudflare? Ascot also runs on Cloudflare Workers via the OpenNext adapter.

Step 1 — Connect Cloudflare in the Publish view (Cmd+6). Once saved, the editor puts your Cloudflare credentials (CLOUDFLARE_API_TOKEN and CLOUDFLARE_ACCOUNT_ID) into the terminal environment and makes them available to the AI chat. Wrangler reads those variables automatically, which means nobody has to run npx wrangler login, and no token is ever pasted into a file.

Step 2 — Paste this prompt into the AI chat:

Deploy this site to Cloudflare Workers. My Cloudflare account is already
connected, so CLOUDFLARE_API_TOKEN and CLOUDFLARE_ACCOUNT_ID are in the
terminal environment — do not run `wrangler login`.

Please:
1. Run `npm run cf:setup` to create .env.production from the sample
2. Ask me for my production URL, OpenAI, Turnstile, and Mailgun values,
   then fill in .env.production
3. Run `npm run cf:deploy` to build and create the Worker
4. Run `npm run cf:secrets` to upload the secrets
5. Tell me the live URL when it's done

Never commit .env.production — it holds real secrets.

The AI will pause at step 2 to collect your values. Everything else runs unattended. First deploy takes a few minutes.

Step 3 — Follow-up prompts for anything after the first deploy:

Deploy my latest changes to Cloudflare

I changed my Mailgun API key in .env.production — push the updated secrets to Cloudflare

Rename my Cloudflare Worker to my-business-site and redeploy

My quote form isn't sending email on Cloudflare — check my secrets are set correctly

If a prompt fails, paste the error back into the chat. The most common causes are a Cloudflare account that isn't connected yet (so wrangler has no credentials) and running cf:secrets before the Worker exists — the AI can diagnose both from the error text.

Reference: How the Cloudflare Deployment Works

Everything below is reference material for your AI assistant — what files Cloudflare needs, which ones get created, and what has to change when you rename things. You don't need to read or run any of it yourself; the prompts above cover the whole process. It's here so the AI has accurate ground truth, and so you have something to point at if a deploy goes wrong.

The Three Kinds of Cloudflare Files

Ascot ships Cloudflare-ready. If you forked or generated this repo, every config file already exists — you do not create any of them. The only file you add by hand is .env.production.

1. Config files — already in the repo, keep them

2. Files you create — never committed

Both are covered by the .env* and .dev.vars* rules in .gitignore, so they stay out of Git automatically. Never commit either one.

3. Build output — generated, never commit

All three are already gitignored. .open-next/ does not exist until you build, which is why cf:deploy and cf:preview always run the build first.

The Deployment Sequence

This is what the AI runs on your behalf, in this order:

npm run cf:setup     # scaffolds .env.production
# fill in .env.production with your values
npm run cf:deploy    # build + deploy — creates the Worker on first run
npm run cf:secrets   # push .env.production to the Worker's secret store (after the Worker exists)

No wrangler login step is needed: connecting Cloudflare in the editor already put CLOUDFLARE_API_TOKEN in the environment, and wrangler picks it up automatically.

Order matters: cf:secrets cannot create a Worker, so deploy once first. After that, secrets and code are independent — you only re-run cf:secrets when a value changes, and every later deploy reuses them.

How cf:secrets finds the right Worker: it runs wrangler secret bulk .env.production, which targets your authenticated Cloudflare account plus the Worker named in wrangler.jsonc — no URL involved. It uploads every key in the file, NEXT_PUBLIC_PRODUCTION_URL and NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY included; those are harmless as secrets but have no effect, because NEXT_PUBLIC_* values are inlined at build time rather than read at runtime.

• Authenticate first. Either set CLOUDFLARE_API_TOKEN in your environment (what the Gallop AI Editor does for you when you connect Cloudflare) or run npx wrangler login for OAuth, cached in ~/.wrangler. If your account can't be inferred from the token, also set CLOUDFLARE_ACCOUNT_ID. Wrangler ships as a dev dependency, so npx runs the local copy — no global install needed. Without auth, cf:secrets and cf:deploy can't reach Cloudflare.
• Names must match. The name in wrangler.jsonc must equal the Worker's actual name in your dashboard. If a Git-connected deploy created it under a different name, update wrangler.jsonc to match — otherwise cf:secrets pushes to a nonexistent Worker.

Renaming the Worker

wrangler.jsonc ships with the Worker named ascot. If you rename it, two values must change together:

{
  "name": "your-site-name",           // ← 1. the Worker name
  "services": [
    {
      "binding": "WORKER_SELF_REFERENCE",
      "service": "your-site-name"     // ← 2. must be identical to "name"
    }
  ]
}

WORKER_SELF_REFERENCE is how the Worker calls itself, which OpenNext relies on. If the two strings drift apart, the deploy succeeds and the site fails at runtime — a confusing failure worth avoiding.

Git-Connected Builds

If you connect the repo in the Cloudflare dashboard instead of deploying from your machine:

• Build command: npm run cf:build
• Deploy command: npx opennextjs-cloudflare deploy (the same command npm run cf:deploy uses)
• Build variables: set NEXT_PUBLIC_PRODUCTION_URL and NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY here. Anything prefixed NEXT_PUBLIC_ is inlined into the JavaScript at build time, so it must exist as a build variable — a runtime secret is too late.
• Secrets: the MAILGUN_*, OPENAI_*, and CLOUDFLARE_TURNSTILE_SECRET_KEY values are read at runtime, so npm run cf:secrets (or the dashboard's secret UI) covers them. They do not belong in build variables.

Custom domains live under the Worker's Settings → Domains & Routes.

Workers Runtime Constraints

Workers is not Node.js, and two limits shape how you write code for it:

• There is no filesystem. fs.readFileSync(process.cwd() + '/_data/...') does not throw on Workers — it silently returns empty, so your content vanishes with no error. Always import generated JSON through the @/data/* alias so it is bundled at build time. This is an enforced Canon rule; see CLAUDE.md.
• nodejs_compat is required. The flag in wrangler.jsonc provides the Node APIs Next.js expects. Removing it breaks the build.

Quick Reference

About Gallop Templates

Ascot is part of the Gallop template ecosystem. Gallop templates are designed to be built with AI — just describe what you want in plain English and watch your site come to life.

Gallop AI Editor

The Gallop AI Editor is a desktop code editor built specifically for AI-powered web development. It combines a full code editor, Claude AI assistant, visual Git interface, integrated terminal, media manager, and template gallery into one app. Everything is preconfigured to work with Gallop templates out of the box — no extensions, no plugins, no setup.

Key highlights:

• Claude AI built in — Chat with Claude to write code, debug issues, and learn as you go, with the latest Claude models available out of the box
• Agent and Plan modes — Agent mode lets AI apply changes automatically. Plan mode shows you what AI wants to do before it does it, so you stay in control
• Screenshot capture — Press Cmd+Shift+S to screenshot your running site and share it with AI for visual feedback
• Built-in template gallery — Browse the Gallop templates, all free and open source, and start one in a single click: your own GitHub repository created and cloned locally without leaving the editor
• Visual Git — Stage, commit, and merge with a 3-column visual interface. No command line required
• Studio media manager — Manage images, fonts, and assets with thumbnail previews and CDN sync
• Node.js manager — Install and switch Node.js versions without touching the terminal
• Auto-updates — The editor keeps itself up to date automatically

Gallop Canon: AI Guardrails

Every Gallop template includes @gallop.software/canon, a system of ESLint rules and AI instructions that keep your AI assistant on track. Canon ensures:

• Consistent architecture - AI follows the same patterns across your entire codebase
• No breaking changes - Guardrails prevent AI from introducing common mistakes
• Faster development - AI already knows the project structure, components, and conventions
• Quality code - Enforced best practices for performance, SEO, AI discoverability, and maintainability

Canon rules cover server-first blocks, layout hierarchy, typography and list components, semantic color tokens, Iconify icons, alias imports, and cross-zone import boundaries. CLAUDE.md in the project root is the canonical AI reference for this template.

Think of Canon as training wheels that never come off. AI stays within proven patterns, so you get reliable results every time.

Canon Commands:

• npm run check - Run ESLint and TypeScript checks together
• npm run audit - Audit the codebase for Canon compliance
• npm run unused - Detect unused files and exports with Knip

Built-In AI Sales Assistant

The site ships with a streaming chat widget backed by an API route at src/app/api/assistant/route.ts. Its system prompt is generated from src/config.ts and src/catalog.ts, so the assistant answers questions about your panel profiles, gauges, colors, trim, and service area using your real data — and it stays accurate automatically when you rebrand. Add your API key to .env.local to enable it, or remove the widget entirely if you'd rather not run it.

Built for SEO and AI Discoverability

This template was crafted from the ground up to get your business ranked #1 on Google and recommended by AI assistants like ChatGPT and Google's Gemini. The software architecture, semantic HTML structure, metadata system, and structured data are optimized for both search engine crawlers and AI models that recommend suppliers to buyers.

AI mentions are becoming more important than traditional SEO. When a contractor asks an AI assistant where to buy standing seam panels, you want your company in that answer. Gallop templates ship with LocalBusiness and Product structured data, plus a hand-maintained public/llms.txt summary that gives AI crawlers a clean, factual overview of your company and catalog.

What You Can Build

• Build with AI - Let AI do the technical heavy lifting while you provide the product knowledge
• Sell your catalog - Panel profiles, gauges, coatings, trim, and building packages with real specification tables
• Show, don't tell - 3D building, panel, and trim viewers plus a live color chart
• Capture leads - Quote and contact forms with spam protection, ready for your CRM or inbox
• Get found online - Battle-tested foundation with structured data for search engines and AI assistants
• Deploy instantly - Next.js architecture on Vercel or Cloudflare Workers for cheap, fast hosting

Built by Industry Veterans

The team behind Gallop has decades of combined experience building websites, apps, and web applications for top global brands. We've helped businesses achieve #1 Google rankings in competitive markets and understand what it takes to build world class manufacturer websites. That expertise is baked into every template, every component, and every line of code.

Project Structure

ascot/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (hero)/            # Hero layout route group
│   │   │   ├── layout.tsx
│   │   │   ├── page.tsx       # Home page
│   │   │   ├── _blocks/       # Home page blocks
│   │   │   │   ├── hero.tsx
│   │   │   │   ├── trust-bar.tsx
│   │   │   │   ├── panels.tsx
│   │   │   │   ├── products.tsx
│   │   │   │   ├── buildings.tsx
│   │   │   │   ├── process.tsx
│   │   │   │   ├── testimonials.tsx
│   │   │   │   ├── quote-form.tsx
│   │   │   │   └── cta.tsx
│   │   │   ├── panels/        # Panel index
│   │   │   │   ├── page.tsx
│   │   │   │   ├── _blocks/
│   │   │   │   └── [profile]/ # Per-profile detail pages
│   │   │   ├── projects/      # Project case studies
│   │   │   │   ├── page.tsx   # Project archive
│   │   │   │   ├── <slug>/    # One folder per project
│   │   │   │   │   ├── page.tsx    # Route + metadata + JSON-LD
│   │   │   │   │   └── content.tsx # TITLE, Content, BlogContent
│   │   │   │   └── category/[slug]/ # Category archive
│   │   │   ├── products/      # Product catalog
│   │   │   ├── trims/         # Trim and accessories
│   │   │   ├── buildings/     # Steel building systems
│   │   │   ├── about/
│   │   │   └── contact/
│   │   ├── (default)/         # Default layout route group
│   │   ├── api/               # API routes
│   │   │   ├── assistant/     # Streaming AI sales assistant
│   │   │   ├── submit-form/   # Quote and contact submissions
│   │   │   └── flow-trace/
│   │   ├── global-error.tsx   # Error boundary
│   │   ├── global-not-found.tsx # 404 page
│   │   ├── layout.tsx         # Root layout
│   │   ├── metadata.tsx       # Site metadata and JSON-LD
│   │   ├── robots.ts          # Robots.txt config
│   │   ├── sitemap.ts         # Sitemap config
│   │   └── *.png, *.ico       # App icons and favicon
│   ├── components/            # React components
│   │   ├── navbar/           # Navigation + utility bar config
│   │   ├── footer/           # Footer config and components
│   │   ├── form/             # Form components
│   │   ├── search/           # Search components
│   │   ├── ai-chat/          # AI assistant widget
│   │   ├── building-viewer/  # 3D building visualizer
│   │   ├── panel-viewer/     # 3D panel profile viewer
│   │   ├── trim-viewer/      # 3D trim profile viewer
│   │   ├── page-wrapper.tsx  # Page wrapper with structured data
│   │   ├── color-swatches.tsx
│   │   ├── panel-profile-card.tsx
│   │   ├── product-category-card.tsx
│   │   ├── specification-list.tsx
│   │   ├── statistics-strip.tsx
│   │   ├── process-steps.tsx
│   │   ├── testimonial-card.tsx
│   │   ├── heading.tsx
│   │   ├── section.tsx
│   │   ├── image.tsx
│   │   └── ...
│   ├── fonts/                # Font configuration files
│   ├── hooks/                # Custom React hooks
│   ├── styles/               # Global styles
│   │   └── tailwind.css     # Tailwind entry + @theme color tokens
│   ├── tools/                # Utility tools
│   ├── utils/                # Helper functions
│   ├── config.ts             # Company identity (edit this to rebrand)
│   ├── catalog.ts            # Panels, products, colors, buildings, content
│   └── state.ts              # Global state management
├── public/
│   ├── favicon.png           # Favicon
│   ├── logo.png              # Logo used for OpenGraph images
│   ├── images/               # Processed responsive images (managed by Studio)
│   ├── image-*.jpg           # Catalog and block photography
│   ├── llms.txt              # Hand-maintained AI crawler summary
│   ├── search-index.json    # FlexSearch index (generated)
│   └── _headers             # Cloudflare header rules
├── _fonts/                   # Font source files (managed by Studio)
│   ├── barlow/              # 13 families included — barlow,
│   ├── montserrat/          # montserrat, poppins, raleway,
│   ├── oswald/              # oswald, rubik, urbanist, and more
│   └── .../
├── _data/                    # Generated metadata — never edit by hand
│   ├── _blog.json           # Blog metadata (npm run blog)
│   └── _studio.json         # Studio media metadata
├── _scripts/                 # Build scripts (Node-only, not imported at runtime)
│   ├── generate-blog-metadata.mjs
│   ├── generate-search.mjs
│   ├── generate-search.sh
│   └── *.md                 # Docs for each script
├── CLAUDE.md                # Canonical AI reference for this template
├── next.config.mjs          # Next.js configuration
├── open-next.config.ts      # Cloudflare Workers adapter config
├── wrangler.jsonc           # Cloudflare Worker manifest
├── tsconfig.json            # TypeScript config
├── postcss.config.js        # PostCSS config
├── package.json             # Dependencies & scripts
├── knip.config.js           # Unused file detection config
├── eslint.config.mjs        # ESLint config
├── .env.local.sample        # Local env template
├── .env.production.sample   # Production env template
└── .prettierrc              # Prettier config

Available Scripts

Development

• npm run dev - Start development server at http://localhost:3000
• npm run build - Build for production (runs blog metadata first)
• npm run start - Start production server
• npm run lint - Run ESLint on all source files
• npm run lint:file - Run ESLint on a specific file
• npm run lint:gallop - Run the Gallop Canon rules on blocks as warnings
• npm run lint:next - Run ESLint with the three strictest Canon rules disabled
• npm run ts - TypeScript type checking without emitting
• npm run prettier - Format all files with Prettier
• npm run check - Run lint and TypeScript together

Gallop Canon

• npm run audit - Audit codebase with Gallop Canon
• npm run audit:strict - Strict audit mode
• npm run audit:json - Output audit results as JSON

Content & Assets

• npm run blog - Generate blog post metadata to _data/_blog.json → docs
• npm run search - Build FlexSearch index for site search → docs

Cloudflare Deployment

Your AI assistant runs these for you — see Deploy to Cloudflare Workers.

• npm run cf:setup - Create .env.production from the sample
• npm run cf:build - Build the Worker into .open-next/
• npm run cf:preview - Build and run the Workers runtime locally
• npm run cf:deploy - Build and deploy to Cloudflare
• npm run cf:upload - Build and upload a version without making it live
• npm run cf:secrets - Push .env.production to the Worker's secret store
• npm run cf:typegen - Regenerate cloudflare-env.d.ts from your bindings

Package Management

• npm run update:check - Check for package updates
• npm run update:patch - Update to latest patch versions
• npm run update:minor - Update to latest minor versions
• npm run update:major - Update to latest major versions
• npm run update:interactive - Interactively choose updates
• npm run update:doctor - Update and test changes incrementally

Maintenance

• npm run unused - Find unused files and exports with Knip
• npm run refresh - Remove node_modules and .next, then reinstall
• npm run clean - Remove node_modules, .next, and package-lock.json, then reinstall

Technologies

Frontend (Runtime)

Every dependency is battle-tested in production and chosen for stability, performance, and long-term maintainability.

• Next.js 16.2 - React framework with App Router
• React 19 - UI library
• Tailwind CSS 4.3 - Utility-first CSS framework
• Headless UI 2.2.10 - Unstyled accessible components
• Three.js 0.180.0 - 3D rendering for the building, panel, and trim viewers
• React Three Fiber 9.6.1 + Drei 10.7.7 - React renderer and helpers for Three.js
• OpenAI SDK 6.44.0 - Streaming AI sales assistant API route
• Valtio 2.3.2 - State management
• Swiper 12.1.4 - Sliders and testimonial carousels
• Yet Another React Lightbox 3.32.0 - Image galleries
• FlexSearch 0.8.212 - Full-text site search
• Algolia Autocomplete 1.19.8 - Search autocomplete
• Framer Motion 12.39.0 - Animation library
• Luxon 3.7.2 - DateTime library
• React Intersection Observer 10.0.3 - Scroll-based animations and lazy loading
• React Highlight Words 0.21.0 - Search result highlighting
• Marked 18.0.5 - Markdown rendering for assistant replies
• React Turnstile 1.5.3 - Cloudflare Turnstile form protection
• Iconify Icons - Icon sets (Heroicons, Lucide, Material Design, Simple Icons)
• clsx 2.1.1 - Conditional className utility
• Vercel Analytics 1.6.1 - Analytics integration
• Next Third Parties 16.2.6 - Third-party script optimization
• OpenNext Cloudflare 1.20.2 - Adapter for deploying to Cloudflare Workers

Development

Tools for building and developing the site:

• TypeScript 5 - Type safety and IntelliSense
• ESLint 9 - Code linting
• ESLint Config Next 16.2.6 - Next.js lint rules
• Prettier 3.8.3 - Code formatting
• Prettier Plugin Organize Imports 4.3.0 - Auto-organize imports
• Prettier Plugin Tailwindcss 0.8.0 - Sort Tailwind classes
• PostCSS 8.5.15 - CSS transformations
• Knip 5.88.1 - Unused file and export detection
• Wrangler 4.113.0 - Cloudflare CLI, used by the cf:* scripts
• Gallop Canon 2.34.0 - ESLint rules and architecture audit CLI

Scripts & Processing

Build-time tools for content and asset generation:

• jsdom 27.4.0 - DOM parsing for search index generation
• @sindresorhus/slugify 3.0.0 - URL-friendly slugs for search indexing

Support & Community

• Documentation: gallop.software
• Issues: GitHub Issues
• Discord: Join Community
• Slack: Join Community
• Professional Services: Web Plant Media, LLC

License

MIT License - see LICENSE for details

Credits

Contributors:

• Chris Baldelomar
• Niel Wostan
• Rabpreet Singh

Built with ❤️ by the team at Gallop

Learn More

• Gallop AI Editor
• Gallop Templates
• Next.js Documentation
• Tailwind CSS Documentation
• React Documentation