192 lines
10 KiB
TypeScript
192 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
|
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import { Calculator, Zap, Info } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="grid"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="InsureAuto"
|
|
navItems={[
|
|
{ name: "Calculator", id: "calculator" },
|
|
{ name: "Why Us", id: "why-us" },
|
|
{ name: "FAQ", id: "faq" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
title="Get Your Instant Car Insurance Premium Estimate"
|
|
description="Transparent, instant quotes with live breakdown. Adjust vehicle details, location, and coverage to see your exact premium in real-time."
|
|
tag="Smart Pricing"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
leftCarouselItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/business-men-use-laptops-alongside-outdoor-vehicles_1359-1424.jpg?_wi=1", imageAlt: "Insurance calculator interface"
|
|
}
|
|
]}
|
|
rightCarouselItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-vector/flat-icons-set-web-project-plan-interface-design-marketing-research_126523-1105.jpg?_wi=1", imageAlt: "Premium breakdown visualization"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Start Calculating", href: "#calculator" },
|
|
{ text: "Learn More", href: "#why-us" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
carouselPosition="left"
|
|
ariaLabel="Car insurance premium calculator hero section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="calculator" data-section="calculator">
|
|
<FeatureCardTwentyThree
|
|
title="Premium Calculator"
|
|
description="Select your vehicle details and coverage preferences. Watch as your premium estimate updates instantly with a detailed cost breakdown."
|
|
tag="Interactive Calculator"
|
|
tagIcon={Calculator}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
carouselMode="buttons"
|
|
features={[
|
|
{
|
|
id: "brand-select", title: "Vehicle Brand", tags: [
|
|
"Dropdown selector for popular car manufacturers", "Includes: Maruti, Hyundai, Toyota, Honda, Ford, Tata, and more"
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/business-men-use-laptops-alongside-outdoor-vehicles_1359-1424.jpg?_wi=2", imageAlt: "Vehicle brand selection dropdown"
|
|
},
|
|
{
|
|
id: "year-input", title: "Vehicle Year", tags: [
|
|
"Year of manufacture selection", "Affects depreciation and premium calculation"
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-vector/flat-icons-set-web-project-plan-interface-design-marketing-research_126523-1105.jpg?_wi=2", imageAlt: "Vehicle year input interface"
|
|
},
|
|
{
|
|
id: "city-select", title: "Location / City", tags: [
|
|
"Select your city for location-based pricing", "Factors in regional risk assessment"
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/business-men-use-laptops-alongside-outdoor-vehicles_1359-1424.jpg?_wi=3", imageAlt: "City selection dropdown"
|
|
},
|
|
{
|
|
id: "ncb-slider", title: "NCB Percentage (0-50%)", tags: [
|
|
"No Claim Bonus slider control", "Drag to adjust your discount percentage"
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-vector/flat-icons-set-web-project-plan-interface-design-marketing-research_126523-1105.jpg?_wi=3", imageAlt: "NCB slider control"
|
|
},
|
|
{
|
|
id: "coverage-toggle", title: "Coverage Type", tags: [
|
|
"Toggle between Comprehensive and Third-Party", "Comprehensive includes own-damage protection"
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/business-men-use-laptops-alongside-outdoor-vehicles_1359-1424.jpg?_wi=4", imageAlt: "Coverage type toggle switch"
|
|
},
|
|
{
|
|
id: "live-breakdown", title: "Live Premium Breakdown", tags: [
|
|
"Base Premium + GST (18%) + NCB Discount + Add-ons", "Updates instantly as you adjust inputs"
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-vector/flat-icons-set-web-project-plan-interface-design-marketing-research_126523-1105.jpg?_wi=4", imageAlt: "Premium cost breakdown display"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing-breakdown" data-section="pricing-breakdown">
|
|
<FaqDouble
|
|
title="Why This Price?"
|
|
description="Understand how your insurance premium is calculated. Expand each section to see the breakdown and factors affecting your quote."
|
|
tag="Transparency"
|
|
tagIcon={Info}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
animationType="smooth"
|
|
faqs={[
|
|
{
|
|
id: "base-premium", title: "What is the Base Premium?", content: "The base premium is calculated based on your vehicle's make, model, year, and engine capacity. Newer vehicles and higher engine capacity typically have different base premiums. This forms the foundation of your insurance cost before any discounts or taxes are applied."
|
|
},
|
|
{
|
|
id: "gst-calculation", title: "Why is GST 18% charged?", content: "GST (Goods and Services Tax) at 18% is a mandatory government tax on insurance premiums in India. This is added to your base premium after discounts. It's a regulatory requirement and applies to all insurance products."
|
|
},
|
|
{
|
|
id: "ncb-discount", title: "How does NCB Discount work?", content: "No Claim Bonus (NCB) is a reward for not making claims in previous years. You can accumulate up to 50% discount by maintaining a clean claim history. The NCB percentage you select is deducted from the premium before GST is applied."
|
|
},
|
|
{
|
|
id: "add-ons", title: "What are Add-ons?", content: "Add-ons are optional coverage extensions you can choose to enhance your base plan. Common add-ons include: Zero Depreciation, Return to Invoice, Roadside Assistance, Personal Accident, and Engine Protection. Each add-on has an additional cost."
|
|
},
|
|
{
|
|
id: "coverage-difference", title: "What's the difference between coverage types?", content: "Third-Party coverage is mandatory and covers damage/liability you cause to others. Comprehensive coverage includes your own vehicle's damages from accidents, theft, natural disasters, and more. Comprehensive is more expensive but offers better protection."
|
|
},
|
|
{
|
|
id: "location-impact", title: "How does location affect pricing?", content: "Urban areas with higher traffic and accident rates typically have higher premiums than rural areas. Your city selection factors in local claim history, traffic density, and theft rates, which directly impact the risk assessment and your final premium."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Calculator", href: "#calculator" },
|
|
{ label: "Premium Estimate", href: "#calculator" },
|
|
{ label: "Coverage Plans", href: "#" },
|
|
{ label: "Add-ons", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About InsureAuto", href: "#" },
|
|
{ label: "Why Choose Us", href: "#why-us" },
|
|
{ label: "Blog & Insights", href: "#" },
|
|
{ label: "Contact Support", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms & Conditions", href: "#" },
|
|
{ label: "Disclaimer", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
{ label: "Instagram", href: "https://instagram.com" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2024 InsureAuto. All rights reserved. Trusted car insurance quotes, transparent pricing."
|
|
ariaLabel="Footer section with links and company information"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |