Speedwell Readme

The premier feminine website template for women-owned businesses who want to build at the speed of thought with AI, look more professional than the competition, and rank #1 on Google.

🌐 Demo: speedwell.gallop.software
🎨 Template: gallop.software/templates
📦 Repository: github.com/gallop-software/speedwell
🏷️ Category: Small Business Template

---

Why Use Gallop Templates?

Just chat with Claude AI inside Cursor text editor using our Gallop templates, and you will never want to design a site with WordPress again. Simply describe what you want, and it writes the code. No CMS, no page builders, no endless options fields, and no design limitations. Just type and watch. Build fun and cute custom layouts, 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.1 with App Router
• ⚛️ React 19 for cutting-edge performance
• 🎨 Tailwind CSS 4.1 for pixel-perfect design
• 📝 TSX-powered content - No CMS required
• 🖼️ Image processing with automatic optimization
• 🔍 Built-in search powered by FlexSearch
• 📱 Fully responsive and mobile-optimized
• ⚡ Lightning-fast performance
• 🎭 Framer Motion animations
• 🎯 SEO and AI optimized with structured data
• 🤖 AI-friendly codebase structure
• 🛡️ Gallop Canon - AI guardrails for consistent, reliable code
• 📊 Vercel Analytics integration

---

Getting Started

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

Step 1: Install Cursor

Available for Mac and Windows. This is where you'll chat with Claude AI to build your site. VSCode with the Github CoPilot also works if you prefer. We recommend Claude AI as the AI model of choice.

Step 2: Download This Template

Click the green Code button at the top of this page, then click Download ZIP. Unzip the folder somewhere easy to find (like your Desktop).

Step 3: Open in Cursor

1. Open Cursor
2. Click File → Open Folder
3. Select the unzipped speedwell folder
4. Click Open

Step 4: Ask Claude AI for Help

Press Cmd+L (Mac) or Ctrl+L (Windows) to open the chat panel. Now just ask:

I'm new to this. Help me get this website running on my computer.

Claude will walk you through everything, including installing any tools you need. Just follow along and ask questions whenever you're stuck.

Step 5: Start Building

Once your site is running, you can describe any changes you want:

Change the homepage heading to Welcome to My Bakery

Make the accent color pink

Add a new page called Services

Optimize the SEO on my homepage

Join the Community

Connect with other Gallop users on Slack. Share your progress, swap AI prompting tips, and see how non-programmers are building websites that once required a seasoned software engineer.

---

Put Your Site Online

When you're ready to share your site with the world, you'll need a free GitHub account to store your code and a free Vercel account to host your site.

The Easy Way

Just ask Claude AI:

Help me create a GitHub account, push this project to GitHub, and deploy to Vercel

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

For Technical Users

If you're comfortable with Git:

Step 1: Create Your Repository

Step 2: Clone Your Repository

Ask Claude AI:

Help me clone my new GitHub repository and run it locally

Or run these commands in your terminal:

git clone https://github.com/YOUR-USERNAME/YOUR-REPO-NAME.git
cd YOUR-REPO-NAME
npm install
npm run dev

Open http://localhost:3000 to view your site. Press Ctrl+C to stop the server. When ready to test production, run npm run build then npm start.

Step 3: Deploy to Vercel

Select your repository, and Vercel will automatically deploy whenever you push changes.

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

Speedwell Pro

Want access to all 117 blocks including premium designs? Purchase Speedwell Pro and clone from the Pro repository, which includes all Pro blocks ready to use.

---

About Gallop Templates

Speedwell is part of the Gallop template ecosystem, built for Cursor and Claude AI. Cursor is Gallop's preferred AI programming editor, purpose-built for coding with AI. VSCode works too, but Cursor's native Claude integration makes development faster and more intuitive.

Why Claude? Claude is the premier coding AI agent. It understands context better, writes cleaner code, and handles complex multi-file changes that other AI models struggle with. When you chat with Claude in Cursor, you're working with the best AI pair programmer available.

Gallop Canon: AI Guardrails

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

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

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

Canon Commands:

• npm run check - Run lint, TypeScript, and unused checks together
• npm run generate:ai-rules - Regenerate AI rules from Canon
• npm run update:canon - Update to latest Canon version

Built for SEO and AI Discoverability

This template was crafted from the ground up to get your business website ranked #1 on Google and mentioned 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 businesses to users.

AI mentions are becoming more important than traditional SEO. When someone asks an AI assistant for recommendations, you want your business in that answer. Gallop templates are built with the structured data and semantic markup that AI models rely on to understand and recommend your business. Businesses using this template are already ranking on Google and getting discovered by AI assistants.

What You Can Build

• Build websites with AI - Let AI do the technical heavy lifting while you provide instructions
• Skip the boring work - Let AI help write your content, optimize your SEO, and handle tedious page updates
• Pixel-perfect design - TailwindCSS integration for rapid development without leaving component files
• Automate workflows - AI-powered scripts for sitewide SEO and AI discoverability improvements, image regeneration, and content updates
• Get found online - Battle-tested foundation with structured data for search engines and AI assistants that recommend businesses
• Deploy instantly - Next.js architecture on Vercel 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 business websites. That expertise is baked into every template, every component, and every line of code.

---

Project Structure

speedwell/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (default)/         # Default layout route group
│   │   │   ├── layout.tsx     # Default navbar layout
│   │   │   ├── category/      # Category pages
│   │   │   └── .../           # Other page routes
│   │   ├── (hero)/            # Hero layout route group
│   │   │   ├── layout.tsx     # Hero navbar layout
│   │   │   ├── page.tsx       # Home page
│   │   │   ├── testimonials/  # Testimonials page
│   │   │   └── .../           # Other hero pages
│   │   ├── (post)/            # Blog post route group
│   │   │   ├── layout.tsx     # Post layout with gradient
│   │   │   └── post/[slug]/   # Dynamic blog posts
│   │   ├── (demo)/            # Demo/preview route group
│   │   │   └── block/         # Block preview routes
│   │   ├── (one-page-site)/   # Single-page layout group
│   │   ├── (alternate)/       # Alternate navbar group
│   │   ├── (color-navbar)/    # Colored navbar group
│   │   ├── api/               # API routes
│   │   ├── sitemap_index.xml/ # Sitemap generation
│   │   ├── error.tsx          # Error boundary
│   │   ├── layout.tsx         # Root layout
│   │   ├── metadata.tsx       # Site metadata
│   │   ├── not-found.tsx      # 404 page
│   │   ├── sitemap.ts         # Sitemap config
│   │   ├── README.md          # Layouts documentation
│   │   └── *.png, *.ico       # App icons and favicon
│   ├── blog/                  # Blog post content (TSX files)
│   ├── blocks/                # Reusable content blocks
│   │   ├── hero-*.tsx         # Hero sections (1-19)
│   │   ├── content-*.tsx      # Content sections (1-46)
│   │   ├── section-*.tsx      # Section layouts (1-10)
│   │   ├── call-to-action-*.tsx  # CTAs (1-7)
│   │   ├── testimonial-*.tsx  # Testimonials (1-9)
│   │   ├── form-*.tsx         # Form sections (1-7)
│   │   ├── cover-*.tsx        # Cover sections (1-7)
│   │   ├── archive-*.tsx      # Archive layouts (1-3)
│   │   ├── about-*.tsx        # About sections (1-3)
│   │   ├── pricing-*.tsx      # Pricing sections (1-2)
│   │   ├── process-*.tsx      # Process sections (1)
│   │   ├── sidebar-*.tsx      # Sidebar sections (1)
│   │   └── README.md          # Blocks documentation
│   ├── components/            # React components
│   │   ├── navbar/           # Main navigation
│   │   ├── navbar-2/         # Alternate navigation
│   │   ├── navbar-3/         # Third navigation variant
│   │   ├── blog/             # Blog components
│   │   ├── search/           # Search components
│   │   ├── lightbox/         # Lightbox gallery
│   │   ├── page-wrapper.tsx  # Page wrapper with structured data
│   │   ├── accordion.tsx
│   │   ├── button.tsx
│   │   ├── card-*.tsx
│   │   ├── footer.tsx
│   │   ├── gallery.tsx
│   │   ├── heading.tsx
│   │   ├── image.tsx
│   │   ├── logo.tsx
│   │   ├── section.tsx
│   │   └── ...
│   ├── fonts/                # Font configuration files
│   │   ├── accent.ts        # Accent font config
│   │   ├── body.ts          # Body font config
│   │   ├── heading.ts       # Primary heading font
│   │   ├── heading2.ts      # Secondary heading font
│   │   └── heading3.ts      # Tertiary heading font
│   ├── hooks/                # Custom React hooks
│   ├── styles/               # Global styles
│   │   └── tailwind.css     # Tailwind CSS entry
│   ├── tools/                # Utility tools
│   ├── utils/                # Helper functions
│   └── state.ts              # Global state management
├── public/
│   ├── blocks/               # Block preview screenshots
│   ├── originals/            # Source images (not deployed)
│   │   ├── portfolio/
│   │   └── profiles/
│   ├── images/               # Processed images
│   │   ├── portfolio/
│   │   └── profiles/
│   ├── videos/               # Video assets
│   ├── search-index.json     # FlexSearch index
│   └── speedwell.jpg         # Featured image
├── _fonts/                   # Font source files (managed by Studio)
│   ├── barlow/              # Barlow font family
│   │   ├── barlow-regular.ttf
│   │   ├── barlow-regular.woff2
│   │   └── ...
│   ├── montserrat/          # Montserrat font family
│   ├── opensans/            # Open Sans font family
│   ├── poppins/             # Poppins font family
│   └── .../                 # Other font families
├── _data/                    # Generated metadata
│   ├── _blog.json           # Blog metadata
│   └── _studio.json         # Studio/image metadata
├── _scripts/                 # Build scripts
│   ├── generate-blog-metadata.mjs
│   ├── generate-search.mjs
│   └── ...
├── next.config.mjs          # Next.js configuration
├── 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
└── .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 Gallop Canon lint rules on blocks
• npm run ts - TypeScript type checking without emitting
• npm run prettier - Format all files with Prettier
• npm run unused - Find unused files with knip
• npm run check - Run lint, TypeScript, and unused checks

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
• npm run generate:ai-rules - Generate AI rules for Cursor and Copilot

Content & Assets

• npm run images - Process images from public/originals/ to responsive variants
• npm run images:reset - Delete processed images and regenerate all
• npm run blog - Generate blog post metadata to _data/_blog.json → docs
• npm run search - Build FlexSearch index for site search → docs
• npm run favicon - Generate favicon files from public/originals/favicon.png → docs
• npm run featured-image - Screenshot homepage for social preview → docs
• npm run blocks - Generate blocks catalog with screenshots
• npm run blocks:screenshots - Force regenerate all block screenshots
• npm run blocks:sort - Sort blocks in catalog
• npm run blocks:lite - Convert pro blocks → docs
• npm run layouts - Generate layouts catalog from app route groups
• npm run layouts:screenshots - Force regenerate all layout screenshots
• npm run layouts:sort - Sort layouts in catalog

Environment

• npm run env - Push .env.production to Vercel → docs
• npm run env:prod - Push to production environment
• npm run env:prev - Push to preview environment

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
• npm run update:canon - Update Gallop Canon package

Maintenance

• 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.1.4 - React framework with App Router
• React 19 - UI library
• Tailwind CSS 4.1.18 - Utility-first CSS framework
• Headless UI 2.2.9 - Unstyled accessible components
• Valtio 2.3.0 - State management
• Swiper 12.0.3 - Modern slider/carousel
• Yet Another React Lightbox 3.28.0 - Image gallery
• FlexSearch 0.8.212 - Full-text search
• Algolia Autocomplete 1.19.4 - Search autocomplete
• Vimeo Player 2.30.1 - Video player integration
• Framer Motion 12.29.0 - Animation library
• DayJS 1.11.19 - Date formatting
• Luxon 3.7.2 - DateTime library
• React Intersection Observer 10.0.2 - Scroll-based animations and lazy loading
• React Highlight Words 0.21.0 - Text highlighting
• Iconify Icons - Icon sets (Heroicons, Lucide, Material Design)
• clsx 2.1.1 - Conditional className utility
• React DOM 19.2.3 - React rendering
• Vercel Analytics 1.6.1 - Analytics integration
• Next Third Parties 16.1.4 - Third-party script optimization

Development

Tools for building and developing the site:

• TypeScript 5 - Type safety and IntelliSense
• ESLint 9 - Code linting
• Prettier 3.8.1 - Code formatting
• Prettier Plugin Organize Imports 4.3.0 - Auto-organize imports
• Prettier Plugin Tailwindcss 0.7.2 - Sort Tailwind classes
• PostCSS 8.5.6 - CSS transformations
• Gallop Canon 2.16.1 - ESLint rules and AI rules generator

Scripts & Processing

Build-time tools for content and asset generation:

• Sharp 0.34.5 - Image processing and optimization
• Puppeteer 24.36.0 - Screenshot generation (featured images)
• jsdom 27.4.0 - DOM parsing for search index generation
• @sindresorhus/slugify 3.0.0 - URL-friendly slugs for search indexing
• xml2js 0.6.2 - XML/RSS feed generation

---

Support & Community

• Documentation: gallop.software
• Issues: GitHub Issues
• 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

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