You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
152 lines
6.0 KiB
152 lines
6.0 KiB
import Image from "next/image";
|
|
|
|
export function Footer() {
|
|
return (
|
|
<footer
|
|
id="footer"
|
|
className="relative w-full max-w-[1920px] h-[800px] bg-[#03070d] overflow-hidden select-none mx-auto pointer-events-none"
|
|
>
|
|
{/* 1. Back Frame (Frame Back, id: 1429:9164, width: 1920, height: 703, x: 0, y: 97) */}
|
|
<div className="absolute left-0 top-[97px] w-full h-[703px] max-w-[1920px] overflow-hidden z-10">
|
|
{/* Background Grid & Line Mesh (Group 1000011255, id: 1429:9165, w: 3024.56, h: 862.58) */}
|
|
<div className="absolute left-1/2 -translate-x-1/2 top-0 w-[1920px] h-[703px] pointer-events-none">
|
|
<Image
|
|
src="/assets/images/footer_back.png"
|
|
alt=""
|
|
width={1920}
|
|
height={703}
|
|
priority
|
|
unoptimized
|
|
className="w-full h-full object-cover object-top pointer-events-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* 3D Floating Shape - Right (Object, id: 1429:10203, width: 48, height: 48, x: 1165, y: 413 [rel y: 316]) */}
|
|
<div className="absolute left-[calc(50%-960px+1165px)] top-[316px] w-[48px] h-[48px] pointer-events-none z-20">
|
|
<Image
|
|
src="/assets/images/footer_object_right.png"
|
|
alt=""
|
|
width={48}
|
|
height={48}
|
|
unoptimized
|
|
className="w-full h-full object-contain pointer-events-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* 3D Floating Shape - Left (Object, id: 1429:10206, width: 48, height: 48, x: 673, y: 449 [rel y: 352]) */}
|
|
<div className="absolute left-[calc(50%-960px+673px)] top-[352px] w-[48px] h-[48px] pointer-events-none z-20">
|
|
<Image
|
|
src="/assets/images/footer_object_left.png"
|
|
alt=""
|
|
width={48}
|
|
height={48}
|
|
unoptimized
|
|
className="w-full h-full object-contain pointer-events-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 2. Glow Lighting Halos (Ellipses 1073-1080, #0029b2, blur radius 300px) */}
|
|
<div className="absolute inset-0 w-full h-full pointer-events-none z-0 overflow-hidden">
|
|
{/* Ellipse 1073 (id: 1429:10260, x: 621, y: 49) */}
|
|
<div className="absolute left-[calc(50%-960px+321px)] top-[-251px] w-[782px] h-[782px] mix-blend-screen opacity-90 pointer-events-none">
|
|
<Image
|
|
src="/assets/images/footer_glow_ellipse.svg"
|
|
alt=""
|
|
width={782}
|
|
height={782}
|
|
unoptimized
|
|
className="w-full h-full object-contain pointer-events-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* Ellipse 1074 (id: 1429:10267, x: 1119, y: 49) */}
|
|
<div className="absolute left-[calc(50%-960px+819px)] top-[-251px] w-[782px] h-[782px] mix-blend-screen opacity-90 pointer-events-none">
|
|
<Image
|
|
src="/assets/images/footer_glow_ellipse.svg"
|
|
alt=""
|
|
width={782}
|
|
height={782}
|
|
unoptimized
|
|
className="w-full h-full object-contain pointer-events-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* Ellipse 1075 & 1077 (id: 1429:10261 & 1429:10262, x: 621, y: 452) */}
|
|
<div className="absolute left-[calc(50%-960px+321px)] top-[152px] w-[782px] h-[782px] mix-blend-screen opacity-90 pointer-events-none">
|
|
<Image
|
|
src="/assets/images/footer_glow_ellipse.svg"
|
|
alt=""
|
|
width={782}
|
|
height={782}
|
|
unoptimized
|
|
className="w-full h-full object-contain pointer-events-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* Ellipse 1076 & 1078 (id: 1429:10264 & 1429:10265, x: 1155, y: 435) */}
|
|
<div className="absolute left-[calc(50%-960px+855px)] top-[135px] w-[782px] h-[782px] mix-blend-screen opacity-90 pointer-events-none">
|
|
<Image
|
|
src="/assets/images/footer_glow_ellipse.svg"
|
|
alt=""
|
|
width={782}
|
|
height={782}
|
|
unoptimized
|
|
className="w-full h-full object-contain pointer-events-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* Ellipse 1079 (id: 1429:10263, x: 583, y: 486) */}
|
|
<div className="absolute left-[calc(50%-960px+283px)] top-[186px] w-[782px] h-[782px] mix-blend-screen opacity-80 pointer-events-none">
|
|
<Image
|
|
src="/assets/images/footer_glow_ellipse.svg"
|
|
alt=""
|
|
width={782}
|
|
height={782}
|
|
unoptimized
|
|
className="w-full h-full object-contain pointer-events-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* Ellipse 1080 (id: 1429:10266, x: 1117, y: 469) */}
|
|
<div className="absolute left-[calc(50%-960px+817px)] top-[169px] w-[782px] h-[782px] mix-blend-screen opacity-80 pointer-events-none">
|
|
<Image
|
|
src="/assets/images/footer_glow_ellipse.svg"
|
|
alt=""
|
|
width={782}
|
|
height={782}
|
|
unoptimized
|
|
className="w-full h-full object-contain pointer-events-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 3. TeamBy Outlined Logo Vector (TeamBy, id: 1429:10259, width: 804, height: 201, x: 558, y: 91) */}
|
|
<div className="absolute left-[calc(50%-960px+558px)] top-[91px] w-[808px] h-[204px] pointer-events-none select-none z-20">
|
|
<Image
|
|
src="/assets/images/footer_teamby.svg"
|
|
alt="TeamBy"
|
|
width={808}
|
|
height={204}
|
|
priority
|
|
unoptimized
|
|
className="w-full h-full object-contain pointer-events-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* 4. Constellation / Star Arc Container (Container, id: 1429:10209, width: 1105.89, height: 261.82, x: 397.39, y: 312.59) */}
|
|
<div className="absolute left-[calc(50%-960px+397px)] top-[312px] w-[1126px] h-[361px] pointer-events-none select-none z-20">
|
|
<Image
|
|
src="/assets/images/footer_container.svg"
|
|
alt=""
|
|
width={1126}
|
|
height={361}
|
|
unoptimized
|
|
className="w-full h-full object-contain pointer-events-none"
|
|
/>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|
|
|
|
export const FooterSection = Footer;
|