A Fine Balance
A gallery-style SaaS homepage: hanging violet, apricot and green sculptures on warm white, with mono captions.
- Astro
- HubSpot
- WordPress
- Framer soon
Answer Garden:SaaS homepage template for Astro, HubSpot and WordPress
A SaaS homepage set in a botanical conservatory. Monumental leaves frame a headline that steps across the page, features branch off a vine, and setup steps grow from cuttings.
- Sections
- 13, 4 with their own script
- Editable fields
- 291 in HubSpot and WordPress
- Typefaces
- Young Serif, Karla
- Image files
- 8
- Downloads
- Astro 623 KB, HubSpot 3.5 MB, WordPress 972 KB
- Look
- Light background
- Framer
- Coming soon
Screenshots of the live demo at 1440 and 390 pixels. The content is placeholder: Quillon, a fictional customer support platform.
Download Answer Garden
Free: a short form (first name and work email) once, then every zip downloads straight away. Free to use and adapt for personal and commercial sites. Each zip holds one folder, answer-garden, with a README; the install steps below are condensed from it.
An Astro project: one component per section, design tokens in global.css, images in public/assets.
Needs Node 22.12 or newer.
- Unzip answer-garden-astro.zip; it holds one folder, answer-garden.
- In that folder run npm install (Node 22.12 or newer).
- Run npm run dev and open http://localhost:4321.
- Edit the copy in src/components, the colors and type in src/styles/global.css, and the images in public/assets.
- Run npm run build; the static site is written to dist/.
More from the Astro README
What is where
- src/pages/index.astro: the page head and the sections in order.
- src/components: one file per section (13 in all), each with its markup, styles and script.
- src/styles/global.css: design tokens (colors, type, spacing) and base styles.
- public/assets: the images.
Make it yours
- Repeated items (cards, steps, questions) share the same markup: copy one to add another.
- Remove a section by deleting its tag and its import in src/pages/index.astro.
- Reuse a section elsewhere by copying its component file and global.css; a section depends on nothing else.
- Set the title, meta description and JSON-LD block in src/pages/index.astro before publishing.
- "Start free trial" links to /signup, "Book a demo" to /demo, "Log in" to /login and "Talk to sales" to /contact-sales. Point them at your own pages.
- Both the monthly and annual price of each plan are in the pricing component; its script shows one or the other.
A HubSpot CMS theme: one module per section, each with its own fields, plus Home and Page templates.
Needs a free HubSpot account and Node.js 20 or newer for the HubSpot CLI.
- Install the HubSpot CLI: npm install -g @hubspot/cli (Node.js 20 or newer).
- Run hs account auth and paste a personal access key with Design Manager ticked.
- Unzip answer-garden-hubspot.zip, then from the folder that holds answer-garden run hs cms upload answer-garden answer-garden.
- In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find Answer Garden and click Set as active theme.
- Choose the template Answer Garden - Home.
More from the HubSpot README
Change the content
- Each of the 13 sections is a module with its own fields, 291 in all. Click a section in the page editor and its fields open on the left, grouped by item.
- A field left empty removes its element; an empty image field shows the template's own image.
- Sections are rows: drag, clone or delete them, and add one back from the theme's modules.
- Header and footer are global content: what you change there changes on every page.
- The template Answer Garden - Page has the same header and footer and an empty area for other modules.
What the fields do not cover
- More items than the template has (a fourth plan, an extra question) needs an edit in modules/<name>.module/module.html and fields.json.
- Icons and drawings are inline SVG in module.html; colors, fonts and spacing are variables at the top of css/styles.css.
- No blog templates and no 404, password or search pages of its own: HubSpot uses its defaults.
- HubSpot takes no WebP in a theme, so the images are PNG and JPEG. Fonts load from Google Fonts.
How it was checked
- Uploaded with the HubSpot CLI and rendered through HubSpot's theme preview in Chromium: every file uploads without an error and the homepage matches the static version pixel for pixel at 1440px and 390px.
- Not checked: the page editor itself, publishing a page, and browsers other than Chromium.
A WordPress block theme: one block per section with its fields in the editor, plus page, post, blog and 404 templates.
Needs WordPress 6.6 or newer and PHP 7.4 or newer.
- In WordPress go to Appearance > Themes > Add New Theme > Upload Theme.
- Choose answer-garden-wordpress.zip, then Install Now and Activate.
- Open the site: the homepage shows the template, whatever Settings > Reading says.
- Edit each section in Appearance > Editor > Templates > Front Page, in the Block tab on the right, then Save.
More from the WordPress README
Change the content
- Each of the 13 sections is a block with its own fields, 291 in all, listed in the Block tab and grouped by item. The page updates as you type.
- Links: signup or /signup is a page of your site, #pricing jumps to a section, and full addresses, mailto: and tel: work as written.
- A field left empty removes its element; clear every field of a card and the card goes.
- Move sections with the arrows in the toolbar, or add one back from the block inserter under "Answer Garden". The same blocks work on any page.
What the fields do not cover
- More items than the template has needs an edit in sections/<name>.php (markup) and inc/sections.php (fields).
- Icons are inline SVG; colors, fonts and spacing are variables at the top of css/styles.css.
- The theme prints the page title; leave the meta description and structured data to an SEO plugin.
- Functions and blocks are prefixed answer_garden_ and answer-garden/.
How it was checked
- Installed from the zip in WordPress Playground on WordPress 7.1.3 with PHP 8.3 and on WordPress 6.6.10 with PHP 7.4: no PHP warnings, and the homepage matches the static version pixel for pixel at 1440px and 390px.
- Not checked: a real hosting account, browsers other than Chromium, other plugins and multisite.
Framer
Framer version coming soon. It will be listed here next to the other three downloads.
The 13 sections of Answer Garden
In page order. In HubSpot each one is a module and in WordPress a block, 291 fields in all; in Astro each is one component file. Remove, reorder or reuse any of them on its own.
-
Header
Wordmark, Product and Solutions menus, Pricing, Customers, Docs, Log in and the trial button
34 fields · has its own script -
Hero
Stepped headline framed by leaf silhouettes, intro, two buttons and the trial note
15 fields -
Features
Six capabilities on a branching vine, with the "Review draft" dialog
45 fields · has its own script -
How it works
Three setup stages beside growing cuttings
16 fields -
Integrations
Six integration categories and the integrations link
11 fields -
Customers
Customer line and six names as text
7 fields -
Testimonials
Lead quote inside an orchid heart leaf, two supporting quotes
15 fields -
Numbers
Four numbers with small plant accents
16 fields -
Pricing
Flat Starter, Growth and Scale comparison with the Monthly / Annual control
53 fields · has its own script -
Security
Four security points
8 fields -
FAQ
Five questions, answers shown
11 fields · has its own script -
Closing call to action
Final invitation framed by foliage, both buttons
11 fields -
Footer
Product description, email, directories and legal line
49 fields
Design notes
The designer pictured a botanical conservatory for customer support. The first screen is pale citron with huge leaf silhouettes at the edges, and the headline steps diagonally across the page instead of sitting in one column.
The idea carries through: the six features hang off a central branching vine, the three setup steps sit beside cuttings that grow from step to step, and the lead testimonial sits inside an orchid heart-shaped leaf.
Aubergine text and buttons on citron and cream keep contrast high. Buttons are full pills.
Shape and spacing
Pill buttons (100px radius), 16px panel corners, 24 to 90px side margins depending on width, 21px body text on desktop.
Images
8 transparent WebP illustrations (hero foliage, hanging leaves, the vine, a cluster, three cuttings, the quotation heart). They are generated for the template, with no text, real logos or recognizable people in them.
Typefaces
- Young SerifDisplay headings, wordmark and large figures
- KarlaBody copy, navigation, buttons and labels (400 to 700)
Loaded from Google Fonts.
Colors
- Pale citron
#F1F3C8Opening and accent surfaces - Aubergine
#3C203BText, actions and dark sections - Moss
#69764AFoliage - Orchid
#C799D4Secondary foliage and highlights - Cream
#FFFDF2Reading surface and reversed text
What works on the page
- "Explore the garden" scrolls to the features; feature headings move focus to their descriptions.
- "Review draft" opens an illustrative product dialog that closes with Escape.
- Monthly and Annual is a keyboard-operable segmented control; on phones the plans stack as three groups.
- A one-time leaf reveal in the hero, switched off under reduced-motion settings.
Who Answer Garden fits
A product with a growth, garden or knowledge theme, where the leaves read as part of the story.
A brand that wants warmth and character over a standard SaaS grid.
Teams that need a full pricing comparison table, not only three cards.
Sites that want a product demo moment on the homepage without video: the Review draft dialog.
See the whole page as one image (1080 by 5330 pixels, 289 KB)
Questions about Answer Garden
What does the "Review draft" button do?
It opens a small dialog with an illustrative AI draft, so visitors see the product idea without leaving the page. It closes with Escape. Its controls are a picture of a product, not a working app.
Why is the HubSpot download larger than the others?
HubSpot does not accept WebP files in a theme, so the leaf illustrations are PNG there. The HubSpot zip is about 3.5 MB against about 0.6 MB for Astro.
Can I keep the layout but use my own colors?
The page colors change in one place: they are custom properties at the top of the stylesheet. The leaves are image files in moss and orchid, so a very different palette also means replacing those eight illustrations.
Is Answer Garden free for commercial use?
Free to use and adapt for personal and commercial sites. Quillon and every name and number on the page are placeholders.
More SaaS templates like Answer Garden
Same content, different designs. Answer Garden is listed in SaaS templates, Tech website templates, Landing page templates, Homepage templates, HubSpot themes and WordPress block themes. Or browse the full gallery.
Conversation Circle
A light, chat-led SaaS homepage: speech bubbles and curved connectors around a large serif headline.
- Astro
- HubSpot
- WordPress
- Framer soon
Quiet Current
A cinematic SaaS homepage: a right-aligned serif title over dark water, square edges and silver currents.
- Astro
- HubSpot
- WordPress
- Framer soon
Start with one process.
We learn the business and build your first go-to-market process on us this month.