Insurance Service Page - Copy this React, Tailwind Component to your project

import-React-from-'react';-const-App-=-()-=>-{-return-(-<div-className="font-sans-bg-gray-50">-{/*-Hero-Section-*/}-<section-className="bg-blue-900-text-white-text-center-py-20-px-6-md:px-12">-<h1-className="text-4xl-md:text-5xl-font-semibold-mb-4">Protect-Your-Future-with-Insurance</h1>-<p-className="text-lg-mb-8">Affordable-plans,-customized-just-for-you.</p>-<button-className="bg-yellow-500-text-blue-900-py-3-px-8-rounded-lg-text-xl-hover:bg-yellow-400-transition-duration-300">-Get-a-Free-Quote-</button>-</section>-{/*-Features-Section-*/}-<section-className="py-16-px-6-md:px-12-grid-grid-cols-1-sm:grid-cols-2-lg:grid-cols-3-gap-12">-<div-className="bg-white-p-8-rounded-lg-shadow-lg-text-center">-<h3-className="text-xl-font-semibold-text-blue-900-mb-4">Comprehensive-Coverage</h3>-<p-className="text-gray-600">Wide-ranging-policies-that-cover-every-aspect-of-your-life.</p>-</div>-<div-className="bg-white-p-8-rounded-lg-shadow-lg-text-center">-<h3-className="text-xl-font-semibold-text-blue-900-mb-4">Affordable-Plans</h3>-<p-className="text-gray-600">We-offer-flexible-and-affordable-payment-options.</p>-</div>-<div-className="bg-white-p-8-rounded-lg-shadow-lg-text-center">-<h3-className="text-xl-font-semibold-text-blue-900-mb-4">24/7-Support</h3>-<p-className="text-gray-600">We're-here-for-you,-any-time-of-the-day-or-night.</p>-</div>-</section>-{/*-Call-to-Action-Section-*/}-<section-className="bg-blue-900-text-white-py-20-px-6-text-center">-<h2-className="text-3xl-md:text-4xl-font-semibold-mb-6">Get-Started-Today</h2>-<p-className="text-lg-mb-8">Join-thousands-of-satisfied-customers-who-trust-us-with-their-protection.</p>-<button-className="bg-yellow-500-text-blue-900-py-3-px-8-rounded-lg-text-xl-hover:bg-yellow-400-transition-duration-300">-Contact-an-Agent-</button>-</section>-{/*-Footer-Section-*/}-<footer-className="bg-gray-800-text-white-py-8-px-6">-<div-className="max-w-screen-lg-mx-auto-grid-grid-cols-1-sm:grid-cols-2-lg:grid-cols-4-gap-8">-<div>-<h3-className="text-lg-font-semibold">Insurance-Co.</h3>-<p-className="mt-2-text-sm-text-gray-400">Your-trusted-partner-for-all-insurance-needs.</p>-</div>-<div>-<h3-className="text-lg-font-semibold">Quick-Links</h3>-<ul-className="mt-2-text-sm-text-gray-400">-<li><a-href="#"-className="hover:text-yellow-500">Home</a></li>-<li><a-href="#"-className="hover:text-yellow-500">About</a></li>-<li><a-href="#"-className="hover:text-yellow-500">Services</a></li>-<li><a-href="#"-className="hover:text-yellow-500">Contact</a></li>-</ul>-</div>-<div>-<h3-className="text-lg-font-semibold">Contact</h3>-<p-className="mt-2-text-sm-text-gray-400">123-Insurance-St,-City,-Country</p>-<p-className="text-sm-text-gray-400">Email:-support@insurance.com</p>-<p-className="text-sm-text-gray-400">Phone:-+1-234-567-890</p>-</div>-<div>-<h3-className="text-lg-font-semibold">Follow-Us</h3>-<div-className="flex-space-x-4-mt-2">-<a-href="#"-className="text-gray-400-hover:text-yellow-500">Facebook</a>-<a-href="#"-className="text-gray-400-hover:text-yellow-500">Twitter</a>-<a-href="#"-className="text-gray-400-hover:text-yellow-500">LinkedIn</a>-<a-href="#"-className="text-gray-400-hover:text-yellow-500">Instagram</a>-</div>-</div>-</div>-</footer>-</div>-);-}-export-default-App;