64 lines
2.9 KiB
TypeScript
64 lines
2.9 KiB
TypeScript
import Link from "next/link";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
interface CTAProps {
|
|
imageWidth?: number;
|
|
imageHeight?: number;
|
|
}
|
|
|
|
export function CTA({ imageWidth = 970, imageHeight = 446 }: CTAProps) {
|
|
return (
|
|
<section className="relative py-20 text-[#060606] bg-[#101014]">
|
|
<div className="container mx-auto px-4">
|
|
<div className="relative p-8 overflow-hidden h-[446px]" data-aos="zoom-in" data-aos-duration="1000">
|
|
<svg
|
|
className="absolute inset-0 mx-auto animate-pulse"
|
|
style={{ animationDuration: "3s" }}
|
|
width={imageWidth}
|
|
height={imageHeight}
|
|
viewBox={`0 0 ${imageWidth} ${imageHeight}`}
|
|
preserveAspectRatio="none"
|
|
>
|
|
<image
|
|
href="/images/documentation-box.svg"
|
|
width="100%"
|
|
height="100%"
|
|
preserveAspectRatio="none"
|
|
/>
|
|
</svg>
|
|
<div className="relative z-10 text-center space-y-6 flex flex-col justify-center items-center h-full">
|
|
<h2
|
|
className="text-3xl md:text-5xl font-extralight uppercase max-w-xs mx-auto"
|
|
data-aos="fade-up"
|
|
data-aos-delay="200"
|
|
>
|
|
View <span className="font-pp-mondwest font-normal">Documents</span>
|
|
</h2>
|
|
<p className="text-xl max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="300">
|
|
For a comprehensive understanding of our framework, including technical specifications and
|
|
integration guides, please refer to our detailed documentation. These resources are designed
|
|
to assist you in effectively utilizing Artiv8 for your projects.
|
|
</p>
|
|
<div data-aos="fade-up" data-aos-delay="400">
|
|
<Link href="https://github.com/barudak21/artivate" passHref>
|
|
<Button
|
|
size="lg"
|
|
className="bg-[#101014] hover:bg-[#101014]/80 px-12 text-sm text-white"
|
|
>
|
|
LEARN MORE
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img
|
|
src="/images/3d-cta.webp"
|
|
alt="3D"
|
|
className="absolute z-50 top-0 right-10 w-[200px]"
|
|
data-aos="fade-up"
|
|
/>
|
|
</section>
|
|
);
|
|
}
|