Lovable
Lovable prompt for an FAQ section
A brief that turns Lovable's FAQ section into objection handling: seven questions derived from what stops visitors signing up, each answered with a concrete fact. Single-open accordion behavior and a first-item-open default keep the section readable at a glance. Style, palette, typography, and motion arrive from the customizer dropdowns above the prompt.
Last updated
Prompt
Add an FAQ section to the {{product}} landing page you're building in Lovable, placed after testimonials and before the closing CTA. It exists for {{audience}}, so treat it as objection handling, not documentation.
Question set — derive seven questions from whatever would stop {{audience}} from signing up for {{product}}: price justification, time to first result, whether existing tools and data carry over, contract and cancellation terms, security, who it is not for, and how fast support responds. Write answers as if a founder replied personally: 2–4 sentences, one specific number or fact in each, no hedging.
Accordion behavior:
- One open at a time: expanding a row collapses the previous one, so the page never becomes a wall of open text. Animate the collapse at a duration consistent with the motion spec below.
- Every question row is a button element carrying aria-expanded, and the panel it controls is labelled by the question — the section must work with a keyboard (Tab between rows, Enter to toggle) and a screen reader out of the box.
- The first item starts open on page load so visitors see the interaction pattern.
Layout: a narrow centered column (about 720px max) — an h2 in the territory of "What {{audience}} ask before switching", a one-line subhead, then the stacked rows divided by thin rules. After the last row, add a short line with a button labeled "{{cta}}" for readers whose question wasn't answered — wire it to the same action as the hero button so both count as one goal in the deployed app.
Visual direction:
{{style}}
Palette: {{palette}}
Typography: {{type}}
Motion: {{motion}}
Spacing: about 5rem of padding above and below the section, 1rem internal padding per row, answers indented to align with the question text rather than the chevron. On phones, keep the full-width column and enlarge row padding so taps don't misfire.
Check before deploying: exactly one row open at any moment; the first row is open on load; Enter toggles the focused row; the "{{cta}}" button triggers the same flow as the hero CTA; all seven answers contain a concrete fact.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Your customized prompt
Add an FAQ section to the a project management SaaS landing page you're building in Lovable, placed after testimonials and before the closing CTA. It exists for engineering managers at startups, so treat it as objection handling, not documentation. Question set — derive seven questions from whatever would stop engineering managers at startups from signing up for a project management SaaS: price justification, time to first result, whether existing tools and data carry over, contract and cancellation terms, security, who it is not for, and how fast support responds. Write answers as if a founder replied personally: 2–4 sentences, one specific number or fact in each, no hedging. Accordion behavior: - One open at a time: expanding a row collapses the previous one, so the page never becomes a wall of open text. Animate the collapse at a duration consistent with the motion spec below. - Every question row is a button element carrying aria-expanded, and the panel it controls is labelled by the question — the section must work with a keyboard (Tab between rows, Enter to toggle) and a screen reader out of the box. - The first item starts open on page load so visitors see the interaction pattern. Layout: a narrow centered column (about 720px max) — an h2 in the territory of "What engineering managers at startups ask before switching", a one-line subhead, then the stacked rows divided by thin rules. After the last row, add a short line with a button labeled "start a free trial" for readers whose question wasn't answered — wire it to the same action as the hero button so both count as one goal in the deployed app. Visual direction: Minimal dark style. Near-black canvas (#0A0A0B) with one elevated surface tone (#141416) for cards — never more than two surface steps. Hairline borders (1px, white at 8% opacity) instead of shadows; if a shadow is unavoidable use 0 1px 2px rgba(0,0,0,0.4) and nothing softer. Text in exactly three steps: white at 92% for headings, 60% for body, 40% for captions. Generous negative space — section padding at least 120px on desktop, 64px on mobile. The accent color appears only on interactive elements and one hero highlight, nowhere else. Palette: a strict neutral ramp (white, #F5F5F5, #E5E5E5, #737373, #171717) carries the entire interface; pick one accent and use it only for primary CTAs, active states, and a single hero highlight. If the accent appears more than five times per viewport it stops being an accent. Keep semantic colors (success, error) desaturated so the accent stays in charge. Typography: one geometric sans (a Futura/Poppins-class face) at three weights maximum (400/500/700). Scale: 64-88px hero, 32px section heads, 18px lede, 16px body, 13px caps labels with 0.08em tracking. Tight headline leading (1.05-1.1), relaxed body (1.6). Let the geometry carry the personality — no italics; weight and size do all hierarchy. Motion: none. Zero scroll animations, zero entrance effects — the page is fully composed the instant it paints. Spend the motion budget on input feedback instead: 120-150ms ease-out color and transform transitions on hover and press states only. Hold this constraint absolutely; it is a statement, not an omission. Spacing: about 5rem of padding above and below the section, 1rem internal padding per row, answers indented to align with the question text rather than the chevron. On phones, keep the full-width column and enlarge row padding so taps don't misfire. Check before deploying: exactly one row open at any moment; the first row is open on load; Enter toggles the focused row; the "start a free trial" button triggers the same flow as the hero CTA; all seven answers contain a concrete fact.
Same task in other tools
Questions about this prompt
Why open the first item by default?
An all-closed accordion looks like a list of links and gets skipped. One open answer demonstrates the interaction and pulls the reader into the second question — the prompt puts the strongest objection in that first slot deliberately.
Can Lovable pull these questions from a database instead?
Yes — once the section renders, ask it to move the Q&A pairs into a table and fetch them, which lets you edit copy as data instead of via chat. Do it as a second step; combining layout and persistence in one message tends to make Lovable's output messier.
How do I adapt this when my product isn't a switching decision?
Rewrite the seven objection topics for your actual purchase context: for a new-category tool, swap "do my tools carry over" for "what do I have to learn". The structure — question as objection, answer carrying one verifiable fact — survives any topic swap.
Don't have Lovable yet? This link may be an affiliate link; it never changes what you pay.
Try LovablePart of the Lovable landing-page cluster — start from the main Lovable landing page prompt.