Initial commit

src/templates/RoadmapPage/Hero/index.tsx

@@ -0,0 +1,58 @@
+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;