160 lines
6.8 KiB
JavaScript
160 lines
6.8 KiB
JavaScript
"use client";
|
|
import Image from "next/image";
|
|
import AnimatedText from "@/components/common/AnimatedText";
|
|
import Link from "next/link";
|
|
|
|
export default function HeroUI({ data }) {
|
|
if (!data) return null;
|
|
|
|
const bgImage = data.image || "/assets/img/photos/blurry.png";
|
|
const title = data.title || "";
|
|
const subtitle = data.subtitle || "";
|
|
const buttonText = data.button_text || "MORE";
|
|
const buttonLink = data.button_link || "#";
|
|
const buttonText2 = data.button_2_text || "MORE";
|
|
const buttonLink2 = data.button_2_link || "#";
|
|
|
|
return (
|
|
<div className="container pt-36 xl:py-[12.5rem] lg:py-[12.5rem] md:py-[12.5rem] !text-center !relative">
|
|
<div
|
|
className="absolute left-0 top-0 w-full h-full"
|
|
style={{
|
|
zIndex: 0,
|
|
minHeight: "300px",
|
|
maxWidth: "100vw",
|
|
overflow: "hidden",
|
|
backgroundImage: `url(${bgImage})`,
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "center",
|
|
pointerEvents: "none",
|
|
}}
|
|
/>
|
|
<div className="flex flex-wrap mx-[-15px] !relative">
|
|
<div className="lg:w-8/12 xl:w-8/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
|
|
<div
|
|
className="absolute shape grape w-12 hidden xl:block lg:block opacity-80"
|
|
style={{ top: "-7%", left: "-13%" }}
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" className="svg-inject icon-svg !w-full !h-full">
|
|
<g fill="none" stroke="#6366f1" strokeWidth="2.5">
|
|
<rect x="16" y="16" width="32" height="32" rx="8"/>
|
|
<rect x="26" y="26" width="12" height="12" rx="3"/>
|
|
<path d="M32 6v8M32 50v8M6 32h8M50 32h8M12 12l4 4M48 48l4 4M12 52l4-4M48 16l4-4"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
className="absolute shape violet !w-[4rem] hidden xl:block lg:block opacity-60"
|
|
style={{ bottom: "18%", left: "-10%" }}
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" className="svg-inject icon-svg !w-full !h-full">
|
|
<g fill="none" stroke="#38bdf8" strokeWidth="2.5">
|
|
<ellipse cx="32" cy="28" rx="16" ry="18"/>
|
|
<path d="M32 46v8M28 54h8"/>
|
|
<path d="M24 46h16"/>
|
|
<circle cx="32" cy="36" r="3"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
className="absolute shape fuchsia w-14 hidden xl:block lg:block opacity-50"
|
|
style={{
|
|
top: "-2%",
|
|
right: "-15%",
|
|
transform: "rotate(70deg)",
|
|
}}
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" className="svg-inject icon-svg !w-full !h-full">
|
|
<g fill="none" stroke="#a78bfa" strokeWidth="2.5">
|
|
<circle cx="32" cy="32" r="18"/>
|
|
<ellipse cx="32" cy="32" rx="26" ry="7"/>
|
|
<circle cx="44" cy="24" r="3" fill="#a78bfa"/>
|
|
<circle cx="24" cy="40" r="1.5" fill="#a78bfa"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
className="absolute shape yellow w-12 hidden xl:block lg:block opacity-70"
|
|
style={{ bottom: "15%", right: "-10%" }}
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" className="svg-inject icon-svg !w-full !h-full">
|
|
<g fill="none" stroke="#f472b6" strokeWidth="2.5">
|
|
<path d="M32 10c8 8 8 22 0 30-8-8-8-22 0-30z"/>
|
|
<path d="M32 40v12"/>
|
|
<circle cx="32" cy="32" r="3" fill="#f472b6"/>
|
|
<path d="M40 8l2 4 4 2-4 2-2 4-2-4-4-2 4-2z"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
className="absolute shape top-helper w-10 hidden xl:block lg:block opacity-40"
|
|
style={{ top: "-20%", left: "30%" }}
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" className="svg-inject icon-svg !w-full !h-full">
|
|
<g fill="none" stroke="#7f9cf5" strokeWidth="2">
|
|
<circle cx="32" cy="32" r="10"/>
|
|
<circle cx="32" cy="12" r="2"/>
|
|
<circle cx="32" cy="52" r="2"/>
|
|
<circle cx="12" cy="32" r="2"/>
|
|
<circle cx="52" cy="32" r="2"/>
|
|
<path d="M32 22V14M32 50v-8M22 32h-8M50 32h-8"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
className="absolute shape bottom-helper w-10 hidden xl:block lg:block opacity-30"
|
|
style={{ bottom: "-20%", left: "70%" }}
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" className="svg-inject icon-svg !w-full !h-full">
|
|
<g fill="none" stroke="#38bdf8" strokeWidth="2">
|
|
<rect x="28" y="36" width="8" height="16" rx="2"/>
|
|
<rect x="20" y="28" width="24" height="8" rx="2"/>
|
|
<circle cx="32" cy="32" r="4"/>
|
|
<path d="M32 28v-8M32 44v8"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h1 className="xl:!text-[3.2rem] !text-[calc(1.445rem_+_2.34vw)] font-semibold !leading-[1.15] !mb-5 md:mx-10 lg:mx-0 xl:mx-0">
|
|
{title}
|
|
</h1>
|
|
<h2 className="xl:!text-[2.2rem] !text-[calc(1rem_+_2vw)] font-semibold !leading-[1.15] !mb-5 md:mx-10 lg:mx-0 xl:mx-0">
|
|
<span className="rotator-fade !text-[#333333]">
|
|
<AnimatedText
|
|
strings={[
|
|
data.p1,
|
|
data.p2,
|
|
data.p3
|
|
].filter(Boolean)}
|
|
/>
|
|
</span>
|
|
</h2>
|
|
<p className="lead !text-[1.2rem] !leading-[1.6] !mb-8">
|
|
{subtitle}
|
|
</p>
|
|
</div>
|
|
<div
|
|
className="flex justify-center"
|
|
>
|
|
<span>
|
|
<Link
|
|
href={buttonLink}
|
|
className="btn btn-lg btn-grape !text-white !bg-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f] active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f] !rounded-[0.8rem] mx-1"
|
|
>
|
|
{buttonText}
|
|
</Link>
|
|
</span>
|
|
<span>
|
|
<Link
|
|
href={buttonLink2}
|
|
className="btn btn-lg btn-fuchsia !text-white !bg-[#1A1A1A] hover:text-white hover:bg-[#1A1A1A] hover:!border-[#1A1A1A] active:text-white active:bg-[#1A1A1A] active:border-[#1A1A1A] disabled:text-white disabled:bg-[#1A1A1A] disabled:border-[#1A1A1A] !rounded-[0.8rem] mx-1"
|
|
>
|
|
{buttonText2}
|
|
</Link>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|