97 lines
3.7 KiB
TypeScript
97 lines
3.7 KiB
TypeScript
/* eslint-disable */
|
|
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
|
import Button from "@/components/ui/Button";
|
|
import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
|
|
import TextAnimation from "@/components/ui/TextAnimation";
|
|
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
|
import RatingStars from "@/components/ui/RatingStars";
|
|
|
|
const primaryButton = {
|
|
text: "Schedule Service",
|
|
href: "#contact"
|
|
};
|
|
const secondaryButton = {
|
|
text: "Our Services",
|
|
href: "#services"
|
|
};
|
|
const avatarsSrc = [
|
|
"https://storage.googleapis.com/webild/default/templates/web-agency-2/team-1.jpg",
|
|
"https://storage.googleapis.com/webild/default/templates/web-agency-2/team-2.jpg",
|
|
"https://storage.googleapis.com/webild/default/templates/web-agency-2/team-3.jpg",
|
|
"https://storage.googleapis.com/webild/default/templates/web-agency-2/team-1.jpg",
|
|
"https://storage.googleapis.com/webild/default/templates/web-agency-2/team-2.jpg",
|
|
"https://storage.googleapis.com/webild/default/templates/web-agency-2/team-3.jpg"
|
|
];
|
|
|
|
type HeroOverlayProps = {
|
|
tag: string;
|
|
title: string;
|
|
description: string;
|
|
primaryButton: { text: string; href: string };
|
|
secondaryButton: { text: string; href: string };
|
|
avatarsSrc?: string[];
|
|
avatarsLabel?: string;
|
|
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
|
|
|
const HeroInline = () => {
|
|
return (
|
|
<section
|
|
aria-label="Hero section"
|
|
className="relative w-full h-svh overflow-hidden flex flex-col justify-end mb-20"
|
|
>
|
|
<HeroBackgroundSlot />
|
|
<ImageOrVideo
|
|
imageSrc={"https://storage.googleapis.com/webild/default/templates/hvac/img-1.jpg"}
|
|
className="absolute inset-0 w-full h-full object-cover rounded-none"
|
|
/>
|
|
|
|
<div
|
|
className="absolute z-10 w-[150vw] h-[150vw] left-0 bottom-0 -translate-x-1/2 translate-y-1/2 backdrop-blur mask-[radial-gradient(circle,black_20%,transparent_70%)]"
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
<div className="relative z-10 w-content-width mx-auto pb-10 md:pb-25">
|
|
<div className="flex flex-col gap-3 w-full md:w-6/10 lg:w-1/2 xl:w-45/100 2xl:w-4/10">
|
|
<div className="w-fit px-3 py-1 mb-1 text-sm card rounded">
|
|
<p>{"Professional HVAC Services"}</p>
|
|
</div>
|
|
|
|
<TextAnimation
|
|
text={"Your Comfort Is Our Priority"}
|
|
variant="slide-up"
|
|
gradientText={true}
|
|
tag="h1"
|
|
className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-white text-balance"
|
|
/>
|
|
|
|
<TextAnimation
|
|
text={"Professional heating, ventilation, and air conditioning services for homes and businesses. From installations to emergency repairs, we keep your climate perfect year-round."}
|
|
variant="slide-up"
|
|
gradientText={false}
|
|
tag="p"
|
|
className="text-lg md:text-xl text-white leading-snug text-balance"
|
|
/>
|
|
|
|
<div className="flex flex-wrap gap-3 mt-2 md:mt-3">
|
|
<Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
|
|
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
|
|
</div>
|
|
|
|
<div className="mt-4 flex items-center gap-3 bg-card/10 backdrop-blur-sm p-3 rounded-lg w-fit border border-white/10">
|
|
<RatingStars rating={5} className="text-yellow-400" />
|
|
<span className="text-white text-sm font-medium">Trusted by 500+ clients</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default function HeroSection() {
|
|
return (
|
|
<div data-webild-section="hero" id="hero">
|
|
<HeroInline />
|
|
</div>
|
|
);
|
|
}
|