59 lines
2.7 KiB
TypeScript
59 lines
2.7 KiB
TypeScript
import Section from "@/components/Section";
|
|
import Heading from "@/components/Heading";
|
|
import Button from "@/components/Button";
|
|
import Generating from "@/components/Generating";
|
|
import Image from "@/components/Image";
|
|
|
|
type HeroProps = {};
|
|
|
|
const Hero = ({}: HeroProps) => (
|
|
<Section>
|
|
<div className="container md:pt-10 lg:pt-16 xl:pt-20">
|
|
<Heading
|
|
className="md:mb-15"
|
|
textAlignClassName="text-center"
|
|
titleLarge="Roadmap"
|
|
textLarge="This document provides a comprehensive guide to developing a chat AI app, including its key features and development steps."
|
|
>
|
|
<Button
|
|
className="mt-8 md:mt-12"
|
|
href="mailto:info@ui8.net"
|
|
white
|
|
>
|
|
Suggest features
|
|
</Button>
|
|
</Heading>
|
|
<div className="relative max-w-5xl mx-auto">
|
|
<div className="relative z-1 p-0.5 rounded-2xl bg-conic-gradient">
|
|
<div className="relative bg-n-8 rounded-[0.875rem]">
|
|
<div className="h-[1.375rem] bg-[#43435C] rounded-t-[0.875rem]"></div>
|
|
<div className="relative h-[30.625rem] rounded-b-[0.875rem] overflow-hidden">
|
|
<Image
|
|
className="absolute top-1/2 left-1/2 max-w-none -translate-x-[51%] -translate-y-[58%]"
|
|
src="/images/roadmap/hero.png"
|
|
width={654}
|
|
height={932}
|
|
alt="Hero"
|
|
/>
|
|
</div>
|
|
<div className="hidden absolute -top-20 left-[14%] md:block pointer-events-none">
|
|
<Image
|
|
className="w-full"
|
|
src="/images/roadmap/coins.png"
|
|
width={76}
|
|
height={190}
|
|
alt="Coins"
|
|
/>
|
|
</div>
|
|
<Generating className="absolute left-4 right-4 bottom-5 border border-n-1/10 md:left-1/2 md:right-auto md:bottom-8 md:w-[30.5rem] md:-translate-x-1/2" />
|
|
</div>
|
|
</div>
|
|
<div className="relative z-1 h-6 mx-2.5 bg-[#1B1B2E] shadow-xl rounded-b-[1.25rem] lg:h-6 lg:mx-8"></div>
|
|
<div className="relative z-1 h-6 mx-6 bg-[#1B1B2E]/70 shadow-xl rounded-b-[1.25rem] lg:h-6 lg:mx-20"></div>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
);
|
|
|
|
export default Hero;
|