Axis
CRM for consultants landing — blurred orb hero, companies strip, feature blocks, tool feature, stats, testimonials, pricing, auth.
Clone it
terminalClone the templategit clone https://github.com/MUKE-coder/vibekit.git /tmp/vibekit-templates
cp -r /tmp/vibekit-templates/public-templates/blog-template ./axis
cd axis
pnpm install
pnpm devWhat's in the box
- Navbar with theme toggle
- Hero with blurred-orb gradient backdrop
- Companies / trusted-by strip
- Feature blocks with product screenshots
- Tool feature deep-dive
- Stats band
- Testimonials grid
- Pricing tiers
- Auth /auth page
- Light + dark mode with full token system
When to use
B2B SaaS, CRM, sales tools, professional-services software, anywhere you want an editorial 'serious product' aesthetic with bold sections and rich product screenshots.
Consumer or playful brands — Axis leans editorial/professional. For B2C launches use Notio or one of the v0 landing variants instead.
The 9 customization sections
When you ask your AI agent to customize this template, it will walk through these sections in order, asking you the questions for each. The agent only edits the files needed to apply your answers — no restructuring.
- 01 · Branding3 q
Logo, brand color, typography, light/dark default.
- →What's the product name and one-line tagline?
- →What's your brand color? (hex — used for accents and CTAs)
- →Default theme: light, dark, or follow system?
- 02 · Hero5 q
Headline + sub + CTA pair + dashboard mock + blurred orb.
- →What's the hero headline? (e.g. 'The CRM built for how consultants actually work')
- →Sub-headline (1–2 sentences)?
- →Primary CTA label + URL?
- →Secondary CTA label + URL? (e.g. 'Watch Demo')
- →Keep the dashboard mock or replace with your product screenshot?
- 03 · Companies / trusted by2 q
Logo strip of customer or integration brands.
- →Which logos? (4–8 brands — yours or integrations)
- →Is this 'Trusted by' or 'Integrates with'?
- 04 · Feature blocks2 q
Stacked feature sections with product screenshots and copy.
- →List 3–4 feature blocks: headline + 1-paragraph body + screenshot URL.
- →Image-left or image-right preference? (current default alternates)
- 05 · Tool feature2 q
Deep-dive section for the headline tool / capability.
- →What's the single capability you want to highlight here? (one product feature in depth)
- →Provide a screenshot or animation URL.
- 06 · Stats1 q
Single-row metric band.
- →What 3–4 stats best demonstrate traction? (number + short label each)
- 07 · Testimonials2 q
Customer quotes grid.
- →Do you have 3–6 real customer quotes?
- →For each: quote, author name, role, company.
- 08 · Pricing2 q
Tier cards with feature lists and CTA.
- →How many tiers? (typically 2–3)
- →Each tier: name, monthly price, feature list, CTA URL.
- 09 · Auth page2 q
/auth — wire to Better Auth or keep as a placeholder.
- →Wire to JB Better Auth UI, or keep /auth as a static placeholder for now?
- →If auth: Google? GitHub? Email-only?
Customization prompt — paste into your AI agent
After you clone, open the project in Claude Code, Cursor, Cline, or any agent that reads files. Paste this prompt to start the section-by-section interview:
paste into your AI agentCustomization interview promptI want to customize the "Axis" template using the VibeKit customization guide.
Walk me through the 9 sections one at a time. For each section, ask the questions defined in the guide below, wait for my answers, then move on.
After all sections are answered, edit ONLY the files needed to apply my answers — config files, content, branding. Don't restructure the project.
CUSTOMIZATION GUIDE:
Single-page B2B SaaS landing. Walk through Branding → Hero → Companies → Feature blocks → Tool feature → Stats → Testimonials → Pricing → Auth. Each section is `src/components/<name>.tsx`. The blurred-orb backdrop uses Tailwind v4 CSS variables `--color-hero-start/mid/end` in `src/app/globals.css` — edit those to retune the gradient. To wire real auth, install JB Better Auth UI and replace `/auth`. Don't restructure files — only edit section contents and design tokens.
SECTIONS:
1. Branding — Logo, brand color, typography, light/dark default.
Questions:
- What's the product name and one-line tagline?
- What's your brand color? (hex — used for accents and CTAs)
- Default theme: light, dark, or follow system?
2. Hero — Headline + sub + CTA pair + dashboard mock + blurred orb.
Questions:
- What's the hero headline? (e.g. 'The CRM built for how consultants actually work')
- Sub-headline (1–2 sentences)?
- Primary CTA label + URL?
- Secondary CTA label + URL? (e.g. 'Watch Demo')
- Keep the dashboard mock or replace with your product screenshot?
3. Companies / trusted by — Logo strip of customer or integration brands.
Questions:
- Which logos? (4–8 brands — yours or integrations)
- Is this 'Trusted by' or 'Integrates with'?
4. Feature blocks — Stacked feature sections with product screenshots and copy.
Questions:
- List 3–4 feature blocks: headline + 1-paragraph body + screenshot URL.
- Image-left or image-right preference? (current default alternates)
5. Tool feature — Deep-dive section for the headline tool / capability.
Questions:
- What's the single capability you want to highlight here? (one product feature in depth)
- Provide a screenshot or animation URL.
6. Stats — Single-row metric band.
Questions:
- What 3–4 stats best demonstrate traction? (number + short label each)
7. Testimonials — Customer quotes grid.
Questions:
- Do you have 3–6 real customer quotes?
- For each: quote, author name, role, company.
8. Pricing — Tier cards with feature lists and CTA.
Questions:
- How many tiers? (typically 2–3)
- Each tier: name, monthly price, feature list, CTA URL.
9. Auth page — /auth — wire to Better Auth or keep as a placeholder.
Questions:
- Wire to JB Better Auth UI, or keep /auth as a static placeholder for now?
- If auth: Google? GitHub? Email-only?
Begin with section 1 now.