75 lines
3.0 KiB
TypeScript
75 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useEffect } from "react";
|
|
import { HeroDataStreamEffect } from "@/components/hero-data-stream-effect";
|
|
|
|
export function Hero() {
|
|
useEffect(() => {
|
|
// Initialize AOS
|
|
if (typeof window !== "undefined") {
|
|
const AOS = require("aos");
|
|
AOS.init({
|
|
duration: 1000,
|
|
once: true,
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<section className="relative py-20 mb-14 overflow-visible">
|
|
<HeroDataStreamEffect />
|
|
<svg className="absolute inset-0 w-full h-full -z-10 scale-[330%]">
|
|
<image
|
|
href="/images/pattern-header.svg"
|
|
width="100%"
|
|
height="100%"
|
|
preserveAspectRatio="xMidYMid slice"
|
|
/>
|
|
</svg>
|
|
<div className="container mx-auto px-6 relative">
|
|
<div className="max-w-4xl mx-auto space-y-6">
|
|
<h1
|
|
className="hero-header text-5xl md:text-7xl font-extralight text-center uppercase space-y-2"
|
|
data-aos="fade-up"
|
|
data-aos-delay="200"
|
|
>
|
|
<div>Artiv8</div>
|
|
<div className="font-pp-mondwest font-normal">Multi-Agent</div>
|
|
<div className="font-pp-mondwest font-normal">Framework</div>
|
|
</h1>
|
|
<p
|
|
className="text-xl max-w-2xl text-center font-semi-light mx-auto"
|
|
data-aos="fade-up"
|
|
data-aos-delay="300"
|
|
>
|
|
Orchestrate AI agents with unparalleled precision. Build scalable, intelligent applications that
|
|
push the boundaries of what's possible.
|
|
</p>
|
|
<div className="flex" data-aos="fade-up" data-aos-delay="400">
|
|
<Link href="https://github.com/barudak21/artivate" passHref className="mx-auto">
|
|
<Button
|
|
size="lg"
|
|
className="bg-[#5e51ec] hover:bg-[#5e51ec]/60 text-white uppercase text-sm font-fk-grotesk-mono font-normal py-3 px-12"
|
|
>
|
|
Learn More
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
<div data-aos="fade-up" data-aos-delay="500">
|
|
<img src="/images/pixel-arrow.svg" alt="Arrow" className="mx-auto mt-20 animate-bounce" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img
|
|
src="/images/3d-hero.webp"
|
|
alt="3D"
|
|
className="absolute z-50 -bottom-[100px] left-12 w-[300px]"
|
|
data-aos="fade-up"
|
|
data-aos-delay="600"
|
|
/>
|
|
</section>
|
|
);
|
|
}
|