init

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

app/css/additional-styles/custom-fonts.css

@@ -0,0 +1,4 @@
+@font-face {
+    font-family: "Apfel";
+    src: url("fonts/ApfelGrotezk-Regular.woff2") format("woff2");
+}

app/css/additional-styles/theme.css

@@ -0,0 +1,82 @@
+/* Custom AOS animations */
+@media screen {
+  html:not(.no-js) body [data-aos="fade-up"] {
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+  }
+
+  html:not(.no-js) body [data-aos="fade-down"] {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+  }
+
+  html:not(.no-js) body [data-aos="fade-right"] {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  html:not(.no-js) body [data-aos="fade-left"] {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+
+  html:not(.no-js) body [data-aos="fade-up-right"] {
+    -webkit-transform: translate3d(-10px, 10px, 0);
+    transform: translate3d(-10px, 10px, 0);
+  }
+
+  html:not(.no-js) body [data-aos="fade-up-left"] {
+    -webkit-transform: translate3d(10px, 10px, 0);
+    transform: translate3d(10px, 10px, 0);
+  }
+
+  html:not(.no-js) body [data-aos="fade-down-right"] {
+    -webkit-transform: translate3d(-10px, -10px, 0);
+    transform: translate3d(-10px, -10px, 0);
+  }
+
+  html:not(.no-js) body [data-aos="fade-down-left"] {
+    -webkit-transform: translate3d(10px, -10px, 0);
+    transform: translate3d(10px, -10px, 0);
+  }
+
+  html:not(.no-js) body [data-aos="zoom-in-up"] {
+    -webkit-transform: translate3d(0, 10px, 0) scale(0.6);
+    transform: translate3d(0, 10px, 0) scale(0.6);
+  }
+
+  html:not(.no-js) body [data-aos="zoom-in-down"] {
+    -webkit-transform: translate3d(0, -10px, 0) scale(0.6);
+    transform: translate3d(0, -10px, 0) scale(0.6);
+  }
+
+  html:not(.no-js) body [data-aos="zoom-in-right"] {
+    -webkit-transform: translate3d(-10px, 0, 0) scale(0.6);
+    transform: translate3d(-10px, 0, 0) scale(0.6);
+  }
+
+  html:not(.no-js) body [data-aos="zoom-in-left"] {
+    -webkit-transform: translate3d(10px, 0, 0) scale(0.6);
+    transform: translate3d(10px, 0, 0) scale(0.6);
+  }
+
+  html:not(.no-js) body [data-aos="zoom-out-up"] {
+    -webkit-transform: translate3d(0, 10px, 0) scale(1.2);
+    transform: translate3d(0, 10px, 0) scale(1.2);
+  }
+
+  html:not(.no-js) body [data-aos="zoom-out-down"] {
+    -webkit-transform: translate3d(0, -10px, 0) scale(1.2);
+    transform: translate3d(0, -10px, 0) scale(1.2);
+  }
+
+  html:not(.no-js) body [data-aos="zoom-out-right"] {
+    -webkit-transform: translate3d(-10px, 0, 0) scale(1.2);
+    transform: translate3d(-10px, 0, 0) scale(1.2);
+  }
+
+  html:not(.no-js) body [data-aos="zoom-out-left"] {
+    -webkit-transform: translate3d(10px, 0, 0) scale(1.2);
+    transform: translate3d(10px, 0, 0) scale(1.2);
+  }
+}

app/css/additional-styles/utility-patterns.css

@@ -0,0 +1,55 @@
+/* Buttons */
+.btn,
+.btn-sm {
+  @apply inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-all;
+}
+
+.btn {
+  @apply px-4 py-[11px];
+}
+
+.btn-sm {
+  @apply px-3 py-[7px];
+}
+
+/* Forms */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select,
+.form-checkbox,
+.form-radio {
+  @apply border border-gray-700 bg-gray-900/50 focus:border-gray-600 focus:ring-0 focus:ring-offset-0;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select {
+  @apply rounded-lg px-4 py-2.5 text-sm text-gray-200;
+}
+
+.form-input,
+.form-textarea {
+  @apply placeholder-gray-600;
+}
+
+.form-select {
+  @apply pr-10;
+}
+
+.form-checkbox,
+.form-radio {
+  @apply text-indigo-500;
+}
+
+.form-checkbox {
+  @apply rounded;
+}

app/css/style.css

@@ -0,0 +1,23 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+
+/* Additional styles */
+@import "additional-styles/utility-patterns.css";
+@import "additional-styles/theme.css";
+@import "tailwindcss/utilities";
+
+@keyframes float {
+    0% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(-20px);
+    }
+    100% {
+        transform: translateY(0px);
+    }
+}
+
+.animate-float {
+    animation: float 6s ease-in-out infinite;
+}

app/fonts/fonts.ts

@@ -0,0 +1,97 @@
+import localFont from "next/font/local";
+
+export const timesNowFont = localFont({
+    src: [
+        {
+            path: "../../public/fonts/TimesNow-ExtraLight.woff2",
+            weight: "200",
+            style: "normal",
+        },
+        {
+            path: "../../public/fonts/TimesNow-ExtraLightItalic.woff2",
+            weight: "200",
+            style: "italic",
+        },
+        {
+            path: "../../public/fonts/TimesNow-Light.woff2",
+            weight: "300",
+            style: "normal",
+        },
+        {
+            path: "../../public/fonts/TimesNow-LightItalic.woff2",
+            weight: "300",
+            style: "italic",
+        },
+        {
+            path: "../../public/fonts/TimesNow-SemiLight.woff2",
+            weight: "350",
+            style: "normal",
+        },
+        {
+            path: "../../public/fonts/TimesNow-SemiLightItalic.woff2",
+            weight: "350",
+            style: "italic",
+        },
+        {
+            path: "../../public/fonts/TimesNow-SemiBold.woff2",
+            weight: "600",
+            style: "normal",
+        },
+        {
+            path: "../../public/fonts/TimesNow-SemiBoldItalic.woff2",
+            weight: "600",
+            style: "italic",
+        },
+        {
+            path: "../../public/fonts/TimesNow-Bold.woff2",
+            weight: "700",
+            style: "normal",
+        },
+        {
+            path: "../../public/fonts/TimesNow-BoldItalic.woff2",
+            weight: "700",
+            style: "italic",
+        },
+        {
+            path: "../../public/fonts/TimesNow-ExtraBold.woff2",
+            weight: "800",
+            style: "normal",
+        },
+        {
+            path: "../../public/fonts/TimesNow-ExtraBoldItalic.woff2",
+            weight: "800",
+            style: "italic",
+        },
+    ],
+    variable: "--font-times-now",
+    display: "swap",
+});
+
+export const fkGroteskMonoFont = localFont({
+    src: [
+        {
+            path: "../../public/fonts/FKGroteskMono-Regular.woff2",
+            weight: "400",
+            style: "normal",
+        },
+        {
+            path: "../../public/fonts/FKGroteskMono-Medium.woff2",
+            weight: "500",
+            style: "normal",
+        },
+    ],
+    variable: "--font-fk-grotesk-mono",
+    display: "swap",
+});
+
+export const ppMondwestFont = localFont({
+    src: [
+        {
+            path: "../../public/fonts/PPMondwest-Regular.woff2",
+            weight: "400",
+            style: "normal",
+        },
+    ],
+    variable: "--font-pp-mondwest",
+    display: "swap",
+});

app/layout.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import "./css/style.css";
+import { timesNowFont, fkGroteskMonoFont, ppMondwestFont } from "./fonts/fonts";
+import "aos/dist/aos.css";
+import type React from "react";
+
+export const metadata: Metadata = {
+    title: "ARTIV8",
+    description: "Description",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <html
+            lang="en"
+            className={`${timesNowFont.variable} ${fkGroteskMonoFont.variable} ${ppMondwestFont.variable} scroll-smooth`}
+        >
+            <body className="bg-[#040031] text-white font-times-now">
+                <div className="relative min-h-screen flex flex-col overflow-hidden">
+                    <main className="flex-grow relative z-10 overflow-hidden">{children}</main>
+                </div>
+            </body>
+        </html>
+    );
+}

app/page.tsx

@@ -0,0 +1,21 @@
+import { Header } from "@/components/ui/header";
+import { Hero } from "@/components/hero";
+import { Features } from "@/components/features";
+import { Tokenomics } from "@/components/tokenomics";
+import { Mission } from "@/components/mission";
+import { CTA } from "@/components/cta";
+import { Footer } from "@/components/ui/footer";
+
+export default function Home() {
+    return (
+        <>
+            <Header />
+            <Hero />
+            <Features />
+            <Tokenomics />
+            <Mission />
+            <CTA />
+            <Footer />
+        </>
+    );
+}

components/cta.tsx

@@ -0,0 +1,63 @@
+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>
+    );
+}

components/features.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { Layers, Users, Zap, Code, GitBranch, Terminal } from "lucide-react";
+import { useState } from "react";
+
+const featureData = [
+    {
+        title: "MODULAR ARCHITECTURE",
+        description: "Build and combine AI agents effortlessly with our flexible, component-based system.",
+        icon: Layers,
+    },
+    {
+        title: "Multi-Agent Orchestration",
+        description: "Coordinate multiple AI agents for complex tasks and workflows with ease.",
+        icon: Users,
+    },
+    {
+        title: "High-Performance Runtime",
+        description: "Optimized for real-time applications with sub-millisecond latency.",
+        icon: Zap,
+    },
+    {
+        title: "Extensible API",
+        description: "Seamlessly integrate with existing codebases and extend functionality.",
+        icon: Code,
+    },
+    {
+        title: "Version Control",
+        description: "Built-in versioning for AI models and agent configurations.",
+        icon: GitBranch,
+    },
+    {
+        title: "CLI Tools",
+        description: "Powerful command-line tools for rapid development and deployment.",
+        icon: Terminal,
+    },
+];
+
+export function Features() {
+    const [activeCard, setActiveCard] = useState<number | null>(null);
+
+    return (
+        <section id="features" className="relative pt-20 pb-28 overflow-hidden">
+            <svg className="absolute inset-0 w-full h-[950px]" preserveAspectRatio="none">
+                <image href="/images/features-box.svg" width="100%" height="100%" preserveAspectRatio="none" />
+            </svg>
+            <div className="container relative z-10 mx-auto px-6">
+                <div className="mb-12 space-y-5">
+                    <h2 className="text-sm text-center font-fk-grotesk-mono" data-aos="fade-up">
+                        [ FEATURES ]
+                    </h2>
+                    <h3
+                        className="uppercase text-5xl text-center max-w-lg mx-auto font-extralight"
+                        data-aos="fade-up"
+                        data-aos-delay="100"
+                    >
+                        Project Structure <span className="font-pp-mondwest">and Components</span>
+                    </h3>
+                    <p
+                        className="text-center max-w-lg mx-auto font-semi-light text-lg"
+                        data-aos="fade-up"
+                        data-aos-delay="200"
+                    >
+                        Artiv8 is built upon a modular architecture, allowing developers to effortlessly integrate and
+                        manage multiple AI agents. This design ensures scalability and flexibility, enabling the
+                        creation of complex, intelligent applications.
+                    </p>
+                </div>
+                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-2">
+                    {featureData.map((feature, index) => (
+                        <div
+                            key={index}
+                            className="relative"
+                            data-aos="fade-up"
+                            data-aos-delay={index * 100}
+                            onMouseEnter={() => setActiveCard(index)}
+                            onMouseLeave={() => setActiveCard(null)}
+                        >
+                            <div
+                                className={`p-6 rounded-md bg-[#101014] h-full relative overflow-hidden group transition-all duration-300 ease-in-out ${
+                                    activeCard === index ? "ring-2 ring-[#5e51ec] shadow-lg shadow-[#5e51ec]/20" : ""
+                                }`}
+                            >
+                                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent -translate-x-full group-hover:translate-x-full transition-all duration-700 ease-in-out opacity-20"></div>
+                                <div className="w-20 h-20 rounded-md bg-[#28272c] flex items-center justify-center mb-4 transform group-hover:scale-110 transition-transform duration-300">
+                                    {feature.icon && <feature.icon className="w-10 h-10 text-white" />}
+                                </div>
+                                <h3 className="text-xs uppercase font-fk-grotesk-mono font-medium mb-2">
+                                    {feature.title}
+                                </h3>
+                                <p className="text-[#838383] font-semi-light text-base">{feature.description}</p>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}

components/hero-data-stream-effect.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+export function HeroDataStreamEffect() {
+    const svgRef = useRef<SVGSVGElement>(null);
+
+    useEffect(() => {
+        const svg = svgRef.current;
+        if (!svg) return;
+
+        const resizeSVG = () => {
+            const headerElement = document.querySelector(".hero-header");
+            if (headerElement) {
+                const rect = headerElement.getBoundingClientRect();
+                const width = Math.max(rect.width + 200, window.innerWidth);
+                const height = Math.max(rect.height + 200, window.innerHeight);
+                svg.setAttribute("width", `${width}px`);
+                svg.setAttribute("height", `${height}px`);
+                svg.style.top = `${Math.min(rect.top - 100, 0)}px`;
+                svg.style.left = `${(window.innerWidth - width) / 2}px`;
+            }
+        };
+
+        resizeSVG();
+        window.addEventListener("resize", resizeSVG);
+
+        const createStream = () => {
+            const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            const startX = Math.random() * svg.clientWidth;
+            const startY = -50;
+            const endX = Math.random() * svg.clientWidth;
+            const endY = svg.clientHeight + 50;
+            const midX1 = startX + (Math.random() - 0.5) * 200;
+            const midY1 = startY + (endY - startY) * 0.33;
+            const midX2 = endX + (Math.random() - 0.5) * 200;
+            const midY2 = startY + (endY - startY) * 0.66;
+
+            const d = `M ${startX} ${startY} C ${midX1} ${midY1}, ${midX2} ${midY2}, ${endX} ${endY}`;
+            path.setAttribute("d", d);
+            path.setAttribute("stroke", "rgba(94, 81, 236, 0.4)");
+            path.setAttribute("stroke-width", "1.5");
+            path.setAttribute("fill", "none");
+            path.setAttribute("opacity", "0");
+
+            const length = path.getTotalLength();
+            path.setAttribute("stroke-dasharray", length.toString());
+            path.setAttribute("stroke-dashoffset", length.toString());
+
+            svg.appendChild(path);
+
+            return { path, length };
+        };
+
+        const streams: { path: SVGPathElement; length: number }[] = [];
+        for (let i = 0; i < 15; i++) {
+            streams.push(createStream());
+        }
+
+        let progress = 0;
+        const animate = () => {
+            progress += 0.003;
+            streams.forEach(({ path, length }, index) => {
+                const offset = (progress + index * 0.1) % 1;
+                const opacity = Math.sin(offset * Math.PI) * 0.7;
+                path.setAttribute("stroke-dashoffset", ((1 - offset) * length).toString());
+                path.setAttribute("opacity", opacity.toString());
+            });
+
+            requestAnimationFrame(animate);
+        };
+
+        animate();
+
+        return () => {
+            window.removeEventListener("resize", resizeSVG);
+        };
+    }, []);
+
+    return (
+        <svg
+            ref={svgRef}
+            className="absolute pointer-events-none -z-50 scale-y-150"
+            style={{ filter: "drop-shadow(0 0 10px rgba(94, 81, 236, 0.3))" }}
+        />
+    );
+}

components/hero.tsx

@@ -0,0 +1,74 @@
+"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>
+    );
+}

components/logo.tsx

@@ -0,0 +1,9 @@
+import Link from "next/link";
+
+export function Logo({ width = "w-28" }: { width?: string }) {
+    return (
+        <Link href="/" className="flex items-end space-x-2">
+            <img src="/images/logo.svg" alt="Logo" className={width} />
+        </Link>
+    );
+}

components/mission.tsx

@@ -0,0 +1,24 @@
+export function Mission() {
+    return (
+        <section id="mission" className="relative pb-10 pt-20 bg-[#101014]">
+            <div className="container mx-auto px-4">
+                <div className="mb-12 space-y-5">
+                    <h2 className="text-sm text-center text-[#5e51ec] font-fk-grotesk-mono" data-aos="fade-up">
+                        [ MISSION ]
+                    </h2>
+                    <p className="text-center text-4xl font-semi-light max-w-4xl mx-auto" data-aos="fade-up">
+                        At Artiv8, our mission is to push the boundaries of AI by providing a framework that simplifies
+                        the orchestration of multiple agents. We aim to empower developers to build scalable and
+                        intelligent applications that can tackle complex tasks efficiently.
+                    </p>
+                </div>
+            </div>
+            <img
+                src="/images/3d-mission.webp"
+                alt="3D"
+                className="absolute z-50 -top-[70px] left-6 w-[240px]"
+                data-aos="fade-up"
+            />
+        </section>
+    );
+}

components/tokenomics.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { Users, Megaphone, Building, CircleDollarSign } from "lucide-react";
+import { useState } from "react";
+
+const tokenomicsData = [
+    {
+        title: "Circulating Supply (90%)",
+        description:
+            "The majority of tokens are allocated for general circulation, ensuring wide accessibility and active participation in the ecosystem. This design reduces centralization risks, enhances market liquidity, and ensures a fair launch.",
+        buttons: ["[ DETAILS ]", "[ DETAILS ]", "[ DETAILS ]"],
+        className: "md:col-span-2",
+        icon: CircleDollarSign,
+    },
+    {
+        title: "Team Allocation (4.5%)",
+        description:
+            "A portion of tokens is reserved for the project team to support ongoing development, attract top talent, and ensure continuous innovation. These tokens are vested over a multi-year period to align incentives with long-term platform success.",
+        buttons: ["[ DETAILS ]"],
+        icon: Users,
+    },
+    {
+        title: "Marketing Operations (1%)",
+        description:
+            "Dedicated to promoting the platform and driving adoption through campaigns, community programs, and partnerships.",
+        buttons: ["[ DETAILS ]"],
+        icon: Megaphone,
+    },
+    {
+        title: "Treasury & Ecosystem Development (4.5%)",
+        description:
+            "Reserved for research, grants, and maintaining operational resilience to ensure long-term platform sustainability. This allocation supports community incentives, expansions, and bounties.",
+        buttons: ["[ DETAILS ]", "[ DETAILS ]", "[ DETAILS ]"],
+        className: "md:col-span-2",
+        icon: Building,
+    },
+];
+
+export function Tokenomics() {
+    const [activeCard, setActiveCard] = useState<number | null>(null);
+
+    return (
+        <section id="tokenomics" className="relative py-20 bg-[#101014]">
+            <div className="container mx-auto px-4">
+                <div className="mb-12 space-y-5 text-center">
+                    <h2 className="text-sm text-[#5e51ec] font-fk-grotesk-mono" data-aos="fade-up">
+                        [ TOKENOMICS ]
+                    </h2>
+                    <h3
+                        className="uppercase text-5xl font-extralight max-w-md mx-auto"
+                        data-aos="fade-up"
+                        data-aos-delay="100"
+                    >
+                        Simple <span className="font-pp-mondwest font-normal">Tokenomics</span>
+                    </h3>
+                    <p className="max-w-lg mx-auto text-lg font-semi-light" data-aos="fade-up" data-aos-delay="200">
+                        Our tokenomics model is straightforward and transparent, designed to align with the interests of
+                        our community and stakeholders. Detailed information about token distribution and allocation
+                        will be provided to ensure clarity and trust.
+                    </p>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {tokenomicsData.map((item, index) => (
+                        <div
+                            key={index}
+                            className={`relative ${item.className || ""}`}
+                            data-aos="fade-up"
+                            data-aos-delay={index * 100}
+                            onMouseEnter={() => setActiveCard(index)}
+                            onMouseLeave={() => setActiveCard(null)}
+                        >
+                            <div
+                                className={`p-6 rounded-md bg-[#1c1b20] flex flex-col h-full relative overflow-hidden group transition-all duration-300 ease-in-out ${
+                                    activeCard === index ? "ring-2 ring-[#5e51ec] shadow-lg shadow-[#5e51ec]/20" : ""
+                                }`}
+                            >
+                                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent -translate-x-full group-hover:translate-x-full transition-all duration-700 ease-in-out opacity-10"></div>
+                                <div className="space-y-6 flex-grow relative z-10">
+                                    <div className="w-12 h-12 rounded-md bg-[#28272c] flex items-center justify-center transform group-hover:scale-110 transition-transform duration-300">
+                                        {item.icon && <item.icon className="w-6 h-6 text-white" />}
+                                    </div>
+                                    <h3 className="text-2xl font-fk-grotesk-mono font-normal uppercase">
+                                        {item.title}
+                                    </h3>
+                                    <p className="text-[#838383] text-xl font-semi-light">{item.description}</p>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <img
+                src="/images/3d-tokenomics.webp"
+                alt="3D Tokenomics Illustration"
+                className="absolute z-50 -top-[70px] right-14 w-[250px]"
+                data-aos="fade-up"
+                data-aos-delay="400"
+            />
+        </section>
+    );
+}

components/ui/button.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../utils/utils";
+
+const buttonVariants = cva(
+    "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+    {
+        variants: {
+            variant: {
+                default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+                destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+                outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+                secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+                ghost: "hover:bg-accent hover:text-accent-foreground",
+                link: "text-primary underline-offset-4 hover:underline",
+            },
+            size: {
+                default: "h-9 px-4 py-2",
+                sm: "h-8 rounded-md px-3 text-xs",
+                lg: "h-10 rounded-md px-8",
+                icon: "h-9 w-9",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    }
+);
+
+export interface ButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+        VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, variant, size, asChild = false, ...props }, ref) => {
+        const Comp = asChild ? Slot : "button";
+        return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+    }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

components/ui/footer.tsx

@@ -0,0 +1,52 @@
+import Link from "next/link";
+import { Logo } from "../logo";
+
+export function Footer() {
+    return (
+        <footer className="relative z-10 py-8 font-fk-grotesk-mono bg-[#101014]">
+            <div className="container mx-auto px-6">
+                <div className="flex flex-col md:flex-row justify-between items-center">
+                    <div className="flex flex-col items-start gap-7">
+                        <Logo width="w-[84px]" />
+                        <span className="text-xs">ARTIV8 © 2025</span>
+                    </div>
+                    <div className="text-xs flex flex-col items-end gap-7">
+                        <div className="flex items-center uppercase">
+                            <div className="pr-2 relative">
+                                <Link
+                                    href="https://x.com/artivatedotcom"
+                                    className="px-2.5 py-2 bg-[#28272c] hover:bg-[#28272c]/60 rounded-md"
+                                >
+                                    X.COM
+                                </Link>
+                                <img
+                                    src="/images/button-separator-footer.svg"
+                                    alt="Separator"
+                                    className="absolute w-2 right-0 top-1/2 -translate-y-1/2"
+                                />
+                            </div>
+                            <div className="pr-2 relative">
+                                <Link
+                                    href="https://github.com/barudak21/artivate"
+                                    className="px-2.5 py-2 bg-[#28272c] hover:bg-[#28272c]/60 rounded-md"
+                                >
+                                    GITHUB
+                                </Link>
+                                <img
+                                    src="/images/button-separator-footer.svg"
+                                    alt="Separator"
+                                    className="absolute w-2 right-0 top-1/2 -translate-y-1/2"
+                                />
+                            </div>
+                            <div>
+                                <Link href="#0" className="px-2.5 py-2 bg-[#28272c] hover:bg-[#28272c]/60 rounded-md">
+                                    GITBOOK
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    );
+}

components/ui/header.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Logo } from "@/components/logo";
+import { useState, useEffect } from "react";
+
+export function Header() {
+    const [contractAddress, setContractAddress] = useState("Fetching...");
+    const [buttonText, setButtonText] = useState("Fetching...");
+
+    useEffect(() => {
+        const fetchContractAddress = async () => {
+            try {
+                const res = await fetch("https://catools.dev3vds1.link/get/artivate");
+                const data = await res.json();
+                const address = data[0]?.address || "Unavailable";
+                setContractAddress(address);
+                setButtonText(`CA: ${address}`);
+            } catch (error) {
+                console.error("Error fetching contract address:", error);
+                setContractAddress("Error");
+                setButtonText("CA: Error");
+            }
+        };
+
+        fetchContractAddress();
+    }, []);
+
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(contractAddress);
+            setButtonText("Copied!");
+            setTimeout(() => setButtonText(`CA: ${contractAddress}`), 2000);
+        } catch (err) {
+            console.error("Failed to copy text:", err);
+        }
+    };
+
+    return (
+        <header className="sticky top-0 z-50">
+            <nav className="container mx-auto px-6 py-4">
+                <div className="hidden md:flex items-center justify-between text-xs font-fk-grotesk-mono">
+                    <div className="flex-1">
+                        <div className="flex items-center uppercase">
+                            <div className="pr-2 relative">
+                                <Link
+                                    href="#features"
+                                    className="bg-[#1e1a46] px-3 py-2 rounded-md hover:bg-[#1e1a46]/70 transition-colors"
+                                >
+                                    Features
+                                </Link>
+                                <img
+                                    src="/images/button-separator-header.svg"
+                                    alt="Separator"
+                                    className="absolute w-2 right-0 top-1/2 -translate-y-1/2"
+                                />
+                            </div>
+                            <div className="pr-2 relative">
+                                <Link
+                                    href="#tokenomics"
+                                    className="bg-[#1e1a46] px-4 py-2 rounded-md hover:bg-[#1e1a46]/70 transition-colors"
+                                >
+                                    Tokenomics
+                                </Link>
+                                <img
+                                    src="/images/button-separator-header.svg"
+                                    alt="Separator"
+                                    className="absolute w-2 right-0 top-1/2 -translate-y-1/2"
+                                />
+                            </div>
+                            <div>
+                                <Link
+                                    href="#0"
+                                    className="bg-[#1e1a46] px-4 py-2 rounded-md hover:bg-[#1e1a46]/70 transition-colors"
+                                >
+                                    Applications
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="flex-1 flex justify-center">
+                        <Logo />
+                    </div>
+                    <div className="flex-1 flex justify-end">
+                        <Button
+                            className="bg-[#1e1a46] px-4 py-2 rounded-md hover:bg-[#1e1a46]/70 transition-colors uppercase text-xs"
+                            onClick={handleCopy}
+                        >
+                            {buttonText}
+                        </Button>
+                    </div>
+                </div>
+            </nav>
+        </header>
+    );
+}

components/utils/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}

next.config.js

@@ -0,0 +1,10 @@
+const withMDX = require("@next/mdx")();
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    // Configure `pageExtensions` to include MDX files
+    pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
+    // Optionally, add any other Next.js config below
+};
+
+module.exports = withMDX(nextConfig);

package.json

@@ -0,0 +1,45 @@
+{
+    "name": "artivate",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev --turbopack",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint"
+    },
+    "dependencies": {
+        "@headlessui/react": "^2.1.2",
+        "@headlessui/tailwindcss": "^0.2.1",
+        "@mdx-js/loader": "^3.0.1",
+        "@mdx-js/react": "^3.0.1",
+        "@next/mdx": "15.0.4",
+        "@radix-ui/react-slot": "^1.1.1",
+        "@types/mdx": "^2.0.13",
+        "@types/node": "^22.10.1",
+        "@types/react": "19.0.1",
+        "@types/react-dom": "19.0.1",
+        "aos": "^3.0.0-beta.6",
+        "class-variance-authority": "^0.7.1",
+        "date-fns": "^4.1.0",
+        "framer-motion": "^11.18.2",
+        "lucide-react": "^0.471.1",
+        "next": "^15.1.4",
+        "next-mdx-remote": "^5.0.0",
+        "react": "19.0.0",
+        "react-dom": "19.0.0",
+        "react-icons": "^5.4.0",
+        "rehype-pretty-code": "^0.14.0",
+        "shiki": "^1.14.1",
+        "tailwind-merge": "^2.6.0",
+        "typescript": "^5.5.4"
+    },
+    "devDependencies": {
+        "@tailwindcss/forms": "^0.5.7",
+        "@tailwindcss/typography": "^0.5.14",
+        "@types/aos": "^3.0.7",
+        "autoprefixer": "^10.4.20",
+        "postcss": "^8.4.41",
+        "tailwindcss": "^3.4.10"
+    }
+}

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    "postcss-import": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

public/images/button-separator-footer.svg

@@ -0,0 +1,5 @@
+<svg id="Capa_2" data-name="Capa 2" fill="#28272c" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 18.81">
+  <g id="Capa_1-2" data-name="Capa 1">
+    <path id="ARK_8_-_The_Lands_Between_Collection_Luxury_Clothing_Inspired_by_ELDEN_RING._ARK_8-1" data-name="ARK 8 - The Lands Between Collection  Luxury Clothing Inspired by ELDEN RING.   ARK 8-1" d="M8,3.13V0c-.04,1.72-1.42,3.1-3.13,3.13h-1.73C1.42,3.1.04,1.72,0,0v18.81c.04-1.72,1.42-3.1,3.13-3.13h1.73c1.72.04,3.1,1.42,3.13,3.13V3.13Z"/>
+  </g>
+</svg>

public/images/button-separator-header.svg

@@ -0,0 +1,5 @@
+<svg id="Capa_2" data-name="Capa 2" fill="#1e1a46" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 18.81">
+  <g id="Capa_1-2" data-name="Capa 1">
+    <path id="ARK_8_-_The_Lands_Between_Collection_Luxury_Clothing_Inspired_by_ELDEN_RING._ARK_8-1" data-name="ARK 8 - The Lands Between Collection  Luxury Clothing Inspired by ELDEN RING.   ARK 8-1" d="M8,3.13V0c-.04,1.72-1.42,3.1-3.13,3.13h-1.73C1.42,3.1.04,1.72,0,0v18.81c.04-1.72,1.42-3.1,3.13-3.13h1.73c1.72.04,3.1,1.42,3.13,3.13V3.13Z"/>
+  </g>
+</svg>

public/images/documentation-box.svg

@@ -0,0 +1,5 @@
+<svg id="Capa_2" data-name="Capa 2" fill="#5e51ec" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 902.86 636.89">
+  <g id="Capa_1-2" data-name="Capa 1">
+    <path d="M902.86,101.55v433.79c0,2.83-2.3,5.13-5.13,5.13h-63.66c-2.84,0-5.13,2.29-5.13,5.13v86.16c0,2.82-2.26,5.11-5.08,5.13h-141.38c-2.83,0-5.12-2.29-5.12-5.12v-86.17c0-2.84-2.3-5.13-5.13-5.13h-55.45c-2.83,0-5.11,2.29-5.11,5.11v46.87c0,2.84-2.3,5.13-5.13,5.13h-194.62c-2.83,0-5.12,2.29-5.12,5.12v29.06c0,2.84-2.3,5.13-5.13,5.13h-171.04c-2.84,0-5.13-2.3-5.13-5.13v-29.06c0-2.83-2.3-5.12-5.12-5.12H78.67c-2.83,0-5.13-2.3-5.13-5.13v-46.85c0-2.84-2.3-5.13-5.13-5.13H5.13c-2.84,0-5.13-2.3-5.13-5.13V101.55c0-2.84,2.29-5.13,5.13-5.13h55.45c2.82,0,5.11-2.29,5.11-5.11v-46.87c0-2.84,2.29-5.13,5.13-5.13h172.09c2.82,0,5.12-2.29,5.12-5.12V5.13c0-2.84,2.29-5.13,5.13-5.13h396.54c2.83,0,5.13,2.29,5.13,5.13v29.06c0,2.83,2.29,5.12,5.12,5.12h218.05c2.83,0,5.13,2.29,5.13,5.13v46.85c0,2.83,2.29,5.13,5.13,5.13h9.47c2.83,0,5.13,2.29,5.13,5.13Z"/>
+  </g>
+</svg>

public/images/features-box.svg

@@ -0,0 +1,5 @@
+<svg id="Capa_2" data-name="Capa 2" fill="#5e51ec" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1399.92 1157.9">
+  <g id="Capa_1-2" data-name="Capa 1">
+    <path d="M0,96.42h68.79c2.83,0,5.13-2.3,5.13-5.13V5.13c0-2.81,2.27-5.1,5.08-5.13h141.38c2.83,0,5.12,2.3,5.12,5.13v86.16c0,2.83,2.3,5.13,5.13,5.13h55.43c2.83,0,5.12-2.28,5.13-5.11v-46.87c0-2.83,2.3-5.13,5.13-5.13h194.61c2.83,0,5.12-2.28,5.13-5.11h0V5.13C496.06,2.3,498.36,0,501.19,0h0s396.54,0,396.54,0c2.83,0,5.13,2.3,5.13,5.13h0v29.06c0,2.83,2.29,5.12,5.12,5.12,0,0,.01,0,.02,0h195.5c2.83,0,5.13,2.3,5.13,5.13h0v46.85c0,2.83,2.3,5.13,5.13,5.13h55.49c2.83,0,5.13-2.3,5.13-5.13h0V5.13c0-2.83,2.29-5.12,5.12-5.13h141.34c2.83-.02,5.14,2.27,5.16,5.1,0,.01,0,.02,0,.03v86.16c0,2.83,2.3,5.13,5.13,5.13h68.79v1061.48H0V96.42Z"/>
+  </g>
+</svg>

public/images/features-left.svg

@@ -0,0 +1,5 @@
+<svg id="Capa_2" data-name="Capa 2" fill="#101014" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.9 94.72">
+  <g id="Capa_1-2" data-name="Capa 1">
+    <path d="M7.9,0v94.72c.01-1.72-.72-3.36-2-4.51l-3.9-3.42C.72,85.64-.01,84,0,82.28V4C0,1.83,1.73.05,3.9,0h4Z"/>
+  </g>
+</svg>

public/images/features-top.svg

@@ -0,0 +1,5 @@
+<svg id="Capa_2" data-name="Capa 2" fill="#101014" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 247.49 8">
+  <g id="Capa_1-2" data-name="Capa 1">
+    <path d="M247.49,4C247.49,1.79,245.7,0,243.49,0H12.98c-1.59,0-3.12.63-4.25,1.76l-4.48,4.48c-1.13,1.13-2.66,1.76-4.25,1.76h247.49v-4Z"/>
+  </g>
+</svg>

public/images/logo.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 92.81">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ffffff;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M470.32,92.77h-63.04V29.73h29.68V.05h63.04v63.04h-29.68v29.68ZM420.17,79.88h37.26v-29.68h29.68V12.94h-37.26v29.68h-29.68v37.26Z"/>
+  <g>
+    <path class="cls-1" d="M29.78,0h20.63l29.78,90.88v1.93h-15.47l-7.73-24.11H22.75l-7.67,24.11H0v-1.93L29.78,0ZM26.43,55.37h26.94l-12.96-40.93h-1.03l-12.96,40.93Z"/>
+    <path class="cls-1" d="M130.34,0c4.12,0,7.97.59,11.54,1.77,3.57,1.18,6.69,2.88,9.38,5.09,2.69,2.21,4.79,5.03,6.32,8.44,1.52,3.42,2.29,7.25,2.29,11.51s-.73,8.09-2.19,11.51c-1.46,3.42-3.45,6.23-5.96,8.44-2.51,2.21-5.45,3.91-8.8,5.09-3.35,1.18-6.96,1.77-10.83,1.77h-8.06l35.58,37.25v1.93h-17.27l-37.71-39.51h-1.29v39.51h-15.66V0h42.67ZM103.33,41.32h24.62c5.03,0,9.02-1.21,11.99-3.64,2.97-2.43,4.45-5.9,4.45-10.41s-1.49-8.06-4.48-10.51c-2.99-2.45-6.97-3.67-11.96-3.67h-24.62v28.23Z"/>
+    <path class="cls-1" d="M164.86,0h76.96v13.54h-30.49v79.28h-15.98V13.54h-30.49V0Z"/>
+    <path class="cls-1" d="M316.34,0v12.63h-24.94v67.55h24.94v12.63h-65.87v-12.63h24.94V12.63h-24.94V0h65.87Z"/>
+    <path class="cls-1" d="M324.22,0h15.66l24.11,77.86h1.03L389.19,0h15.21v1.93l-29.78,90.88h-20.63L324.22,1.93V0Z"/>
+  </g>
+</svg>

public/images/pixel-arrow.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="33" height="18" viewBox="0 0 33 18">
+  <g id="PIXEL_ARROW" data-name="PIXEL ARROW" transform="translate(-714 -520)">
+    <g id="Grupo_50" data-name="Grupo 50" transform="translate(151 99)">
+      <rect id="Rectángulo_69" data-name="Rectángulo 69" width="3" height="3" transform="translate(572 421)" fill="#fff"/>
+      <rect id="Rectángulo_70" data-name="Rectángulo 70" width="3" height="3" transform="translate(575 424)" fill="#fff"/>
+      <rect id="Rectángulo_71" data-name="Rectángulo 71" width="3" height="3" transform="translate(578 427)" fill="#fff"/>
+      <rect id="Rectángulo_72" data-name="Rectángulo 72" width="3" height="3" transform="translate(581 424)" fill="#fff"/>
+      <rect id="Rectángulo_73" data-name="Rectángulo 73" width="3" height="3" transform="translate(584 421)" fill="#fff"/>
+    </g>
+    <g id="Grupo_51" data-name="Grupo 51" transform="translate(151 108)">
+      <rect id="Rectángulo_69-2" data-name="Rectángulo 69" width="3" height="3" transform="translate(572 421)" fill="#fff"/>
+      <rect id="Rectángulo_70-2" data-name="Rectángulo 70" width="3" height="3" transform="translate(575 424)" fill="#fff"/>
+      <rect id="Rectángulo_71-2" data-name="Rectángulo 71" width="3" height="3" transform="translate(578 427)" fill="#fff"/>
+      <rect id="Rectángulo_72-2" data-name="Rectángulo 72" width="3" height="3" transform="translate(581 424)" fill="#fff"/>
+      <rect id="Rectángulo_73-2" data-name="Rectángulo 73" width="3" height="3" transform="translate(584 421)" fill="#fff"/>
+      <rect id="Rectángulo_74" data-name="Rectángulo 74" width="3" height="3" transform="translate(587 418)" fill="#fff"/>
+      <rect id="Rectángulo_77" data-name="Rectángulo 77" width="3" height="3" transform="translate(569 418)" fill="#fff"/>
+      <rect id="Rectángulo_78" data-name="Rectángulo 78" width="3" height="3" transform="translate(566 415)" fill="#fff"/>
+      <rect id="Rectángulo_79" data-name="Rectángulo 79" width="3" height="3" transform="translate(563 412)" fill="#fff"/>
+      <rect id="Rectángulo_75" data-name="Rectángulo 75" width="3" height="3" transform="translate(590 415)" fill="#fff"/>
+      <rect id="Rectángulo_76" data-name="Rectángulo 76" width="3" height="3" transform="translate(593 412)" fill="#fff"/>
+    </g>
+  </g>
+</svg>

public/images/tokenomics-bottom.svg

@@ -0,0 +1,5 @@
+<svg id="Capa_2" data-name="Capa 2" fill="#1c1b20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 247.49 8">
+  <g id="Capa_1-2" data-name="Capa 1">
+    <path d="M0,4c0,2.21,1.79,4,4,4h230.51c1.59,0,3.12-.63,4.25-1.76l4.48-4.48C244.37.63,245.9,0,247.49,0H0v4Z"/>
+  </g>
+</svg>

public/images/tokenomics-top.svg

@@ -0,0 +1,5 @@
+<svg id="Capa_2" data-name="Capa 2" fill="#1c1b20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.72 7.9">
+  <g id="Capa_1-2" data-name="Capa 1">
+    <path d="M94.72,7.9H0c1.72.01,3.36-.72,4.51-2l3.42-3.9C9.08.72,10.72-.01,12.44,0h78.28c2.17,0,3.95,1.73,4,3.9v4Z"/>
+  </g>
+</svg>

tailwind.config.js

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ["./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
+    theme: {
+        extend: {
+            fontFamily: {
+                "times-now": ["var(--font-times-now)"],
+                "fk-grotesk-mono": ["var(--font-fk-grotesk-mono)"],
+                "pp-mondwest": ["var(--font-pp-mondwest)"],
+            },
+            fontWeight: {
+                "semi-light": "350",
+            },
+        },
+    },
+    plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography"), require("@headlessui/tailwindcss")],
+};

tsconfig.json

@@ -0,0 +1,29 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "preserve",
+        "incremental": true,
+        "plugins": [
+            {
+                "name": "next"
+            }
+        ],
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["./*"]
+        }
+    },
+    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+    "exclude": ["node_modules"]
+}