Canopy: Insurance template
Insurance explained in plain English.
For insurance and regulated products: a split hero, a before-and-after of claims, plan tiers, reviews, an FAQ with live help and a support hub.
About the Canopy template
Canopy explains insurance in plain English. A split hero, a claims before-and-after, monthly plans, customer reviews, an FAQ with live help and a support hub.
Insurance explained in plain English. It is a complete insurance landing page for React and Tailwind CSS 4, assembled from 8 Charcoal UI sections.
Who Canopy is for
- Insurance for freelancers and small businesses.
- Insurtech startups.
- Warranty and protection plans.
- Regulated financial products.
What is inside
8 sections, top to bottom:
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Split: Copy on the left, a live product window on the right with a stat card and a chart that draw themselves in.
- Features Versus: Old way versus new way: the same tasks side by side, with a toggle that flips the whole table.
- Pricing Tiers: Three plans with a monthly/yearly switch; prices roll to the new amount and the popular plan glows.
- Testimonials Rating: Store-style review summary with an average, a star histogram that filters, and verified reviews.
- FAQ Support: FAQ accordion beside a sticky support card with the team, live status and reply time.
- Contact Support: Support hub with every channel's live status and reply time, plus a system status strip.
- Footer Columns: Brand, four link columns, a newsletter field and a bottom bar.
How it is built
Plans use a custom price unit and the FAQ covers regulation. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.
Install Canopy
npx shadcn@latest add @charcoal/canopyTemplates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.
Frequently asked questions
- Can I use Canopy for a client site?
- Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
- Is Canopy a Next.js template?
- It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.
Sections in this template
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Split: Copy on the left, a live product window on the right with a stat card and a chart that draw themselves in.
- Features Versus: Old way versus new way: the same tasks side by side, with a toggle that flips the whole table.
- Pricing Tiers: Three plans with a monthly/yearly switch; prices roll to the new amount and the popular plan glows.
- Testimonials Rating: Store-style review summary with an average, a star histogram that filters, and verified reviews.
- FAQ Support: FAQ accordion beside a sticky support card with the team, live status and reply time.
- Contact Support: Support hub with every channel's live status and reply time, plus a system status strip.
- Footer Columns: Brand, four link columns, a newsletter field and a bottom bar.