Family-run plumbing, Sampletown
Fast, clean plumbing repairs for your home
Call today for a free written quote. We arrive in a marked van and clean up before we leave.
Hero, centered
Headline, short line and two buttons.
Guide
Ready-made Framer components for landing pages
Stop rebuilding the same hero, pricing table and FAQ for every site. Learn how Framer components and sections work, how to add one in a minute, and what a landing page needs to turn visitors into calls and quotes.
The basics
Framer components vs sections
A component is a reusable building block: a button, a card, a call-now bar. A section is a full-width band of a page, such as a hero, a pricing table or an FAQ. Sections are usually made of several components, and a component you build once can be reused on every page and every project.
A code component is a component written as one .tsx file. It shows up in Framer like any other component, and its property controls appear in the properties panel, so you or a client can change text, links and colors without touching code.
Step by step
How to add a component to a Framer project
Open Assets, then Code
In your Framer project open the Assets panel and choose Code.
Create a component and paste the file
Add a new code component and paste the contents of the .tsx file, or import the file.
Drag it onto the page
Drop it on the canvas. Set full-width sections to Fill so they stretch with the page.
Edit the properties
Change the text, links, colors, font and lists in the properties panel. No code needed.
What to put on the page
The landing-page sections most sites need
Six parts cover most small-business sites. A good one is short, specific and easy to scan on a phone.
Hero
One outcome-led headline, one line of support and one clear button, visible without scrolling on a phone.
Navbar and footer
A short navbar with a single action, and a footer that carries the contact details and the legal links.
Pricing
Plain prices and what each one includes, so a visitor can decide without sending a message first.
FAQ
The questions that stop people from buying, answered in a few lines each.
Testimonials and reviews
Real quotes from real customers, shown only when you have them. Components show only what you type in.
Contact and quote
A form, a phone button or both, placed where the visitor is ready to act.
The Kerbkit pack
32 components for local-business sites
Hero, navbar, pricing, FAQ, reviews and footer, plus the parts a local business needs: opening hours, call-now bar, quote form and service areas. $49 once, unlimited client sites.
Simple prices
Fixed prices for the common jobs. Anything bigger gets a written quote.
Service call
$60 per visit
- Diagnosis on site
- Small repairs included
- Written quote for bigger work
Service plan
$12 per month
- Yearly furnace tune-up
- Priority booking
- No trip charge
Full day
$420 per day
- Two technicians
- Materials at cost
- Fixed end time
Pricing table
Up to four plans, one highlighted.
Common questions
Do you charge for a quote?
No. Quotes are free and written, so you know the price before we start.
How soon can you come?
Most service calls are booked within two business days. Emergencies are handled first.
Which payment methods do you take?
Card, check or cash, once the job is finished.
FAQ accordion
Questions that open and close, no script needed.
Opening hours
Open now| Monday | 08:00 – 17:00 |
|---|---|
| Tuesday | 08:00 – 17:00 |
| Wednesday | 08:00 – 17:00 |
| Thursday | 08:00 – 19:00 |
| Friday | 08:00 – 17:00 |
| Saturday | 09:00 – 13:00 |
| Sunday | Closed |
Times shown in the shop's local time.
Opening hours with open now
Weekly table plus an open-now badge from your hours.
Real renders of components in the pack with their default properties. Names, prices and answers are fictional samples you replace.
Start your next client site from the right parts
32 components, $49 once, yours to use on every client site.
FAQ
Questions about Framer components
What is the difference between a Framer component and a section?
A component is a reusable building block, such as a button, a card or a call-now bar. A section is a full-width band of a page, such as a hero, a pricing table or an FAQ, and it is usually built from several components. Code components are components written as a single .tsx file.
How do I add a component to a Framer project?
Open Assets, choose Code, create a new component and paste the .tsx file (or import it). Then drag it from the Assets panel onto the canvas and edit its text, links, colors and lists in the properties panel.
Are there free Framer components?
Yes. Framer has its own marketplace and community resources where some components are free. Check each listing for its license and for what it covers before you use it on a client site.
What do the Kerbkit components cover?
The pack has 32 Framer code components for local-business sites: navbars, heroes, services, opening hours, call-now bar, quote form, pricing, FAQ, reviews and footers. The home page shows a real render of each one.
Can I use them on client sites?
Yes. The license covers any number of websites you build for yourself or for clients, and you may edit the code. Reselling, sharing or publishing the components or the zip itself is not allowed. Each purchase covers one person or studio.
What does it cost and what is the refund policy?
$49 one-time, no subscription. Full refund within 14 days of purchase if the components do not work as described. Email support@kerbkit.com with your Stripe receipt.