Home Page - Copy this React, Tailwind Component to your project

So-this-is-the-code.-I-want-you-to-use-consisten-design-techniques-and-not-mess-this-up.-<div-className="homepage">-<header-className="relative-h-screen-w-full-overflow-hidden">-<div-className="absolute-inset-0-bg-gradient-to-br-from-blue-700-to-gray-900">-<div-className="absolute-inset-0-bg-black/40"-/>-</div>-<div-className="relative-h-full-flex-flex-col-items-center-justify-center-px-4-sm:px-6-lg:px-8">-<div-className="max-w-4xl-mx-auto-text-center-space-y-8">-<h1-className={`text-4xl-sm:text-5xl-lg:text-6xl-font-bold-text-white-mb-6-transform-transition-all-duration-1000-${-isVisible-?-"translate-y-0-opacity-100"-:-"translate-y-10-opacity-0"-}`}->-Welcome-to-Beyond-Spotless-Car-Detailing-</h1>-<p-className={`text-xl-sm:text-2xl-text-gray-200-mb-8-transform-transition-all-duration-1000-delay-300-${-isVisible-?-"translate-y-0-opacity-100"-:-"translate-y-10-opacity-0"-}`}->-Experience-The-Best-Car-Detailing-Services-Tailored-To-Perfection-</p>-<button-className={`group-inline-flex-items-center-gap-2-bg-blue-600-hover:bg-blue-700-text-white-font-semibold-py-3-px-8-rounded-full-transition-all-duration-300-transform-hover:scale-105-focus:outline-none-focus:ring-2-focus:ring-blue-500-focus:ring-offset-2-${-isVisible-?-"translate-y-0-opacity-100"-:-"translate-y-10-opacity-0"-}`}-aria-label="Book-a-detailing-service"->-Book-a-Detailing-Now-<FaArrowRight-className="group-hover:translate-x-1-transition-transform-duration-300"-/>-</button>-<div-className={`mt-12-flex-justify-center-space-x-6-transform-transition-all-duration-1000-delay-500-${-isVisible-?-"translate-y-0-opacity-100"-:-"translate-y-10-opacity-0"-}`}->-<div-className="text-center-px-4">-<div-className="text-4xl-font-bold-text-white">500+</div>-<div-className="text-sm-text-gray-300">Happy-Clients</div>-</div>-<div-className="text-center-px-4">-<div-className="text-4xl-font-bold-text-white">10+</div>-<div-className="text-sm-text-gray-300">Years-Experience</div>-</div>-</div>-</div>-</div>-<div-className="absolute-bottom-0-left-0-right-0">-<svg-className="w-full-h-24-text-white"-viewBox="0-0-1440-74"-fill="currentColor"-preserveAspectRatio="none"->-<path-d="M0,0-C480,74-960,74-1440,0-L1440,74-L0,74-Z"-/>-</svg>-</div>-</header>-<div-className="bg-gradient-to-r-from-red-100-to-green-100-py-16-px-4-sm:px-6-lg:px-8-relative-overflow-hidden">-{/*-Animated-snowflakes-*/}-<div-className="absolute-top-0-left-0-w-full-h-full">-{[...Array(20)].map((_,-i)-=>-(-<FaSnowflake-key={i}-className="text-white-absolute-animate-fall"-style={{-left:-`${Math.random()-*-100}%`,-animationDelay:-`${Math.random()-*-5}s`,-fontSize:-`${Math.random()-*-20-+-10}px`,-opacity:-0.7,-}}-/>-))}-</div>-<div-className="max-w-7xl-mx-auto-relative">-<div-className="lg:flex-lg:items-center-lg:justify-between">-<div-className="lg:w-1/2">-<div-className="flex-items-center-mb-4">-<FaTree-className="text-green-600-text-4xl-mr-3"-/>-<FaStar-className="text-yellow-400-text-2xl-animate-pulse"-/>-</div>-<h2-className="text-4xl-font-extrabold-text-gray-900-sm:text-5xl-sm:tracking-tight-lg:text-6xl">-Christmas-Special:-Car-Detailing-Gift-Cards-</h2>-<p-className="mt-5-text-xl-text-gray-600">-Spread-the-holiday-cheer-with-a-gift-that-keeps-on-giving!-Our-Beyond-Spotless-gift-cards-are-the-perfect-way-to-show-you-care-about-their-ride.-</p>-<div-className="mt-8">-<a-href="https://app.squareup.com/gift/MLB52JSDG2GSR/order"-className="inline-flex-items-center-px-8-py-4-border-border-transparent-text-base-font-medium-rounded-full-shadow-sm-text-white-bg-gradient-to-r-from-red-600-to-green-600-hover:from-red-700-hover:to-green-700-transition-all-duration-300-ease-in-out-transform-hover:scale-105-hover:shadow-xl"-aria-label="Purchase-gift-card"-target="_blank"->-<FaGift-className="mr-2-h-5-w-5-animate-bounce"-/>-Purchase-Detailing-Gift-Card-</a>-</div>-<div-className="mt-6-text-sm-text-gray-600-bg-white-bg-opacity-50-p-4-rounded-lg-shadow-md">-<p-className="flex-items-center">-<FaStar-className="text-yellow-400-mr-2"-/>-Premium-detailing-packages-starting-from-$129-to-$199-</p>-<p-className="mt-1-flex-items-center">-<FaStar-className="text-yellow-400-mr-2"-/>-Special-holiday-packages-include-interior-and-exterior-detailing-</p>-<p-className="mt-1-flex-items-center">-<FaStar-className="text-yellow-400-mr-2"-/>-Valid-for-12-months-from-Christmas-</p>-</div>-</div>-<div-className="mt-10-lg:mt-0-lg:w-1/2">-<div-className="relative">-<img-className="w-full-rounded-xl-shadow-2xl-transform-hover:scale-105-transition-transform-duration-300"-src="https://images.unsplash.com/photo-1607860108855-64acf2078ed9"-alt="Luxury-car-detailing-service"-onError={(e)-=>-{-e.target.src-=-"https://images.unsplash.com/photo-1518306727298-4c17e1bf6942";-e.target.alt-=-"Fallback-car-detailing-image";-}}-/>-<div-className="absolute--bottom-4--right-4-h-24-w-24-bg-gradient-to-br-from-red-600-to-green-600-rounded-full-flex-items-center-justify-center-text-white-text-xl-font-bold-transform-rotate-12-animate-pulse">-<span>25%-OFF</span>-</div>-<div-className="absolute-top-4-left-4-bg-red-600-text-white-px-4-py-2-rounded-full-text-sm-font-semibold">-Holiday-Special-</div>-</div>-</div>-</div>-</div>-<style-jsx>{`-@keyframes-fall-{-0%-{-transform:-translateY(-10px)-rotate(0deg);-opacity:-0;-}-50%-{-transform:-translateY(50vh)-rotate(180deg);-opacity:-0.7;-}-100%-{-transform:-translateY(100vh)-rotate(360deg);-opacity:-0;-}-}-.animate-fall-{-animation:-fall-5s-linear-infinite;-}-`}</style>-</div>-<section-className="services-section">-<h2-className="section-title">Our-Services</h2>-<div-className="services-grid">-{services.map((service,-index)-=>-(-<div-className="service-card"-key={index}>-<a-href="/services"-target="_blank"-rel="noopener-noreferrer">-<img-src={service.image}-alt={service.title}-className="service-image"-/>-<div-className="service-title">{service.title}</div>{"-"}-{/*-Always-Visible-Title-*/}-<div-className="service-overlay">-<h3>{service.title}</h3>-<p>{service.description}</p>-</div>-</a>-</div>-))}-</div>-</section>-<section-className="contact-section">-<h2-className="section-title">Get-in-Touch</h2>-<p>-Ready-to-give-your-car-the-care-it-deserves?-Visit-us-or-book-an-appointment-today!-</p>-<a-href="https://wa.me/+17745648277"-target="_blank"-rel="noopener-noreferrer"->-<button-className="contact-button">Contact-Us</button>-</a>-</section>-</div>