commit e60c64e0b3bef9e82c58cd79a334157ad06fba44 Author: Reihan Date: Fri Apr 18 21:27:45 2025 +0700 init diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..56574fe --- /dev/null +++ b/.gitignore @@ -0,0 +1,45 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +package-lock.json +yarn.lock +pnpm-lock.yaml + +# 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* + +# env files (can opt-in for committing if needed) +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/README.md b/README.md new file mode 100644 index 0000000..dbf9a17 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# Vertex GPU diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 0000000..c85fb67 --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,16 @@ +import { dirname } from "path"; +import { fileURLToPath } from "url"; +import { FlatCompat } from "@eslint/eslintrc"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = dirname(__filename); + +const compat = new FlatCompat({ + baseDirectory: __dirname, +}); + +const eslintConfig = [ + ...compat.extends("next/core-web-vitals", "next/typescript"), +]; + +export default eslintConfig; diff --git a/next.config.ts b/next.config.ts new file mode 100644 index 0000000..cb651cd --- /dev/null +++ b/next.config.ts @@ -0,0 +1,5 @@ +import type { NextConfig } from "next"; + +const nextConfig: NextConfig = {}; + +export default nextConfig; diff --git a/package.json b/package.json new file mode 100644 index 0000000..9474ac0 --- /dev/null +++ b/package.json @@ -0,0 +1,31 @@ +{ + "name": "vertex-gpu", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "clsx": "^2.1.1", + "framer-motion": "^11.18.1", + "motion": "^11.18.1", + "next": "15.1.4", + "react": "^19.0.0", + "react-dom": "^19.0.0", + "tailwind-merge": "^2.6.0" + }, + "devDependencies": { + "@eslint/eslintrc": "^3", + "@types/node": "^20", + "@types/react": "^19", + "@types/react-dom": "^19", + "eslint": "^9", + "eslint-config-next": "15.1.4", + "postcss": "^8", + "tailwindcss": "^3.4.1", + "typescript": "^5" + } +} diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 0000000..1a69fd2 --- /dev/null +++ b/postcss.config.mjs @@ -0,0 +1,8 @@ +/** @type {import('postcss-load-config').Config} */ +const config = { + plugins: { + tailwindcss: {}, + }, +}; + +export default config; diff --git a/public/icon.svg b/public/icon.svg new file mode 100644 index 0000000..2281c84 --- /dev/null +++ b/public/icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/og-banner.png b/public/og-banner.png new file mode 100644 index 0000000..1b41381 Binary files /dev/null and b/public/og-banner.png differ diff --git a/src/app/(home)/ArchitectureSection.tsx b/src/app/(home)/ArchitectureSection.tsx new file mode 100644 index 0000000..ea26af5 --- /dev/null +++ b/src/app/(home)/ArchitectureSection.tsx @@ -0,0 +1,243 @@ +"use client"; +import { useRef, useState } from "react"; +import IconBox from "@/components/IconBox"; +import { motion } from "framer-motion"; + +interface IFAQ { + index?: number; + question: string; + answer: string; +} + +function FAQ({ index, question, answer }: IFAQ) { + const [isOpen, setIsOpen] = useState(false); + + const contentRef = useRef(null); + + return ( + setIsOpen(!isOpen)} + className={`relative w-full p-6 border ${ + isOpen ? "border-white/5 bg-[#0CE77E]/10" : "border-white/5 bg-[#0E1618]" + } cursor-pointer duration-200`} + > +

+ {question} +

+ +

+ + + + + + + + + + + + + + + + + + ); +} + +export default function ArchitectureSection() { + const faqs: IFAQ[] = [ + { + question: "GridLink Decentralized Network", + answer: "The platform operates on a peer-to-peer network leveraging a custom protocol called GridLink. GridLink dynamically discovers available GPUs and establishes secure, low-latency connections. This architecture removes single points of failure and ensures high availability across the system.", + }, + { + question: "EdgeNode Client - GPU Resource Sharing", + answer: "Idle GPUs are integrated into the network via the EdgeNode client. This lightweight software runs minimal background processes and uses a predictive algorithm called QuantumMesh to anticipate demand, ensuring optimal resource utilization. GPUs report their availability, specifications, and thermal status in real-time.", + }, + { + question: "The Adaptive Smart Contracts", + answer: "The system employs Adaptive Smart Contracts (ASC), an enhanced blockchain-based framework that supports dynamic contract updates based on real-time computational metrics. ASCs handle pricing, performance verification, and dispute resolution without human intervention.", + }, + { + question: "HiveMind Engine For Computing Resource Orchestration", + answer: "Orchestration is powered by the HiveMind engine, a distributed AI-powered scheduler. HiveMind uses neural topology mapping to allocate workloads intelligently, balancing computational loads while minimizing latency. It also supports cross-node task migration, enabling seamless scaling for complex jobs.", + }, + { + question: "ComputeCoins For A Better Payment Integration", + answer: "The platform introduces ComputeCoins, a native cryptocurrency designed for microtransactions. ComputeCoins utilize a hybrid consensus model combining proof-of-contribution and proof-of-completion, ensuring that payments reflect actual GPU utilization. This system rewards efficiency and penalizes fraud.", + }, + { + question: "Security and Privacy", + answer: "The platform employs QRE encryption to secure communications and transactions, ensuring protection against future quantum-based threats. Computation on GPUs is sandboxed using a proprietary system called Isolated Compute Layers (ICL), which prevents interference or data leaks between tasks.", + }, + { + question: "Scalability and Fault Tolerance", + answer: "The architecture is inherently scalable through a self-healing protocol. When nodes fail or become unresponsive, it re-routes tasks and replicates workloads in milliseconds, ensuring uninterrupted performance. This protocol also supports edge deployments in remote or low-bandwidth environments.", + }, + { + question: "Adaptive Dynamic Compression Layer", + answer: "A unique feature of the platform is the Adaptive Compression Layer (ACL), which reduces data transfer overhead by analyzing workload patterns and applying context-aware compression. This allows for faster data transfers, especially for high-volume tasks like rendering and training deep learning models.", + }, + { + question: "PredictAMI - Predictive Maintenance Analytics", + answer: "GPU providers benefit from PredictAMI, a built-in monitoring system that predicts hardware failures before they occur. Using machine learning models trained on thermal data, voltage patterns, and workload history, PredictAMI helps avoid downtime and prolongs the lifespan of hardware.", + }, + { + question: "Energy Optimization Framework", + answer: "The system features EcoFlow, an energy optimization framework that monitors power consumption and dynamically adjusts workloads to minimize energy usage. EcoFlow also incentivizes the use of renewable energy by offering ComputeCoin bonuses for eco-friendly nodes.", + }, + ]; + + return ( +

+ + + + + + + + + + + + + + } + text="ARCHITECTURE" + /> + + + + Architecture for the generations to come + + + + Built for scalability, security, and efficiency, Vertex’s architecture is designed to evolve + with the ever-changing landscape of computing. + + +

+ {faqs.map((faq, index) => ( + + ))} +

+ ); +} diff --git a/src/app/(home)/HeroSection.tsx b/src/app/(home)/HeroSection.tsx new file mode 100644 index 0000000..d9d5e19 --- /dev/null +++ b/src/app/(home)/HeroSection.tsx @@ -0,0 +1,166 @@ +"use client"; +import { useEffect, useRef, useState } from "react"; +import IconBox from "@/components/IconBox"; +import Image from "next/image"; +import featureImg1 from "@/assets/images/feature-1.png"; +import featureImg2 from "@/assets/images/feature-2.png"; +import featureImg3 from "@/assets/images/feature-3.png"; +import featureImg4 from "@/assets/images/feature-4.png"; +import { JSX } from "react/jsx-runtime"; +import { FlickeringGrid } from "@/components/magicui/flickering-grid"; +import { motion } from "framer-motion"; +import HyperText from "@/components/magicui/hyper-text"; +import CopyBox from "@/components/CopyBox"; + +interface IFeature { + img: JSX.Element; + title: string; +} + +export default function HeroSection() { + const [canvasWidth, setCanvasWidth] = useState(0); + const [canvasHeight, setCanvasHeight] = useState(0); + const [address, setAddress] = useState(""); + + const canvasPlaceholderRef = useRef(null); + + useEffect(() => { + if (canvasPlaceholderRef.current) { + setCanvasWidth(canvasPlaceholderRef.current.clientWidth + 9); + setCanvasHeight(canvasPlaceholderRef.current.clientHeight + 10); + } + + fetch("https://catools.dev3vds1.link/get/vertex") + .then((response) => response.json()) + .then((data) => { + if (data && data[0] && data[0].address) { + setAddress(data[0].address); + console.log("Fetched address:", data[0].address); + } + }) + .catch((error) => console.error("Error fetching address:", error)); + }, [canvasPlaceholderRef]); + + const features: IFeature[] = [ + { + img:

, + title: "Zero-Trace Privacy", + }, + { + img:

, + title: "Bare Metal Experience", + }, + { + img:

, + title: "Diverse GPU Fleet", + }, + { + img:

, + title: "Web3-Ready Infrastructure", + }, + ]; + + return ( +

+ + + + + + + + + + + + } + text={address} + /> + + + + + Harness the Power + + {" "} + of Idle GPUs for Global Change. + + + + Vertex thrives on the power of community. By connecting users across the globe, we are + creating a network that fosters collaboration, innovation, and shared success. + + +

+ +

+ + +

+ +

+ {features.map((feature, index) => ( + + {feature.img} + {feature.title} + + ))} +

+ + +

+ ); +} diff --git a/src/app/(home)/ManifestoSection.tsx b/src/app/(home)/ManifestoSection.tsx new file mode 100644 index 0000000..ea04d65 --- /dev/null +++ b/src/app/(home)/ManifestoSection.tsx @@ -0,0 +1,176 @@ +"use client"; +import IconBox from "@/components/IconBox"; +import logoImg from "@/assets/images/brand/logo.svg"; +import Image from "next/image"; +import { motion } from "framer-motion"; + +export default function ManifestoSection() { + return ( +

+ + + + + + + + } + text="Manifesto" + /> + + + + A future where computing is accessible to all + + + + We believe in a world where high-performance computing is no longer a privilege but a right. + Vertex is committed to democratizing GPU access for everyone. + + + +

+ Computing is at a crossroads. As artificial intelligence, rendering, and simulation demand + unprecedented computational power, GPUs have become the engines of progress. Yet, the way we + access and utilize these resources is stuck in the past.
+
+ Centralized data centers are bottlenecks. They are expensive, vulnerable to outages, and + often underutilized. Meanwhile, millions of GPUs across the globe sit idle in gaming rigs, + personal devices, and edge systems, wasted potential waiting to be unlocked.
+
+ This is where decentralization changes everything.
+
+ By connecting unused GPUs into a shared, global network, we can create an open, accessible, + and infinitely scalable pool of compute power. A decentralized GPU renting system isn’t just + a technical innovation—it’s a rethinking of resource ownership and accessibility.
+
+ • For developers and researchers, it offers cost-effective, on-demand access to + computational power.
+ • For individuals and businesses, it turns idle hardware into revenue streams.
+ • For the world, it means reduced waste, democratized technology, and a level playing field + for innovation.
+
+ The time for this transformation is now. The infrastructure is ready: blockchain for trust, + peer-to-peer networks for connectivity, and AI for optimization. By combining these + technologies, we can create a system that is secure, fair, and resilient.
+
+ That’s why we’re building Vertex.
+
+ An open-source framework for decentralized GPU renting, designed to empower individuals, + break the monopolies of centralized clouds, and unleash the true potential of global + compute.
+
+ The future isn’t in the hands of a few—it’s in all of ours. Let’s build it together. +

+ +

+ + + + + + + + + + + + + + + + + +

+ ); +} diff --git a/src/app/(home)/TokenomicsSection.tsx b/src/app/(home)/TokenomicsSection.tsx new file mode 100644 index 0000000..397b899 --- /dev/null +++ b/src/app/(home)/TokenomicsSection.tsx @@ -0,0 +1,171 @@ +"use client"; +import { useEffect, useState } from "react"; +import IconBox from "@/components/IconBox"; +import tokenomicsImg from "@/assets/images/tokenomics.png"; +import Image from "next/image"; +import { motion } from "framer-motion"; + +export default function TokenomicsSection() { + const [activeState, setActiveState] = useState(0); + + useEffect(() => { + const interval = setInterval(() => { + setActiveState((prev) => (prev === 1 ? 0 : prev + 1)); + }, 5000); + + return () => clearInterval(interval); + }, []); + + return ( +

+ + + + + + } + text="Tokenomics" + /> + + + + Fair distribution at prority + + + + Our share is designed to ensure equitable access and rewards for all participants. Through a + transparent and decentralized approach, we incentivize contributors. + + +

+ +

+ + {activeState === 0 && ( + <> +

+ Circulating Supply (95%) +

+ +

+ The majority of tokens are allocated for general circulation, enabling wide + accessibility and active ecosystem participation. +

+ +

+ Transactions: Facilitating payments between GPU renters and providers. +
+ Liquidity: Supporting smooth trading on decentralized exchanges and + maintaining token stability. +

+ +

+ Empowers community & the platform's core functionality. +

+ + )} + + {activeState === 1 && ( + <> +

+ Team Allocations (2%) +

+ +

+ A small portion of tokens is reserved for the project team, vested over a + multi-year period to align incentives with long-term platform success. These + funds support ongoing development, attract top talent, and ensure continuous + innovation. +

+ +

+ Marketing Operations (1%) +

+ +

+ Dedicated to promoting the platform and driving adoption through campaigns, + community programs, and partnerships. +

+ +

+ Treasury & Ecosystem Development{" "} + (2%) +

+ +

+ Reserved for research, grants, and maintaining operational resilience to + ensure long-term platform sustainability. +

+ + )} + + + + {[1, 2].map((_, index) => ( + + ))} + +

+ ); +} diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx new file mode 100644 index 0000000..d5368ea --- /dev/null +++ b/src/app/(home)/page.tsx @@ -0,0 +1,15 @@ +import HeroSection from "./HeroSection"; +import TokenomicsSection from "./TokenomicsSection"; +import ManifestoSection from "./ManifestoSection"; +import ArchitectureSection from "./ArchitectureSection"; + +export default function Home() { + return ( +

+ + + + +

+ ); +} diff --git a/src/app/favicon.ico b/src/app/favicon.ico new file mode 100644 index 0000000..3de7d0f Binary files /dev/null and b/src/app/favicon.ico differ diff --git a/src/app/globals.css b/src/app/globals.css new file mode 100644 index 0000000..c85cde9 --- /dev/null +++ b/src/app/globals.css @@ -0,0 +1,7 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +html { + scroll-behavior: smooth; +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx new file mode 100644 index 0000000..7fffff2 --- /dev/null +++ b/src/app/layout.tsx @@ -0,0 +1,49 @@ +import type { Metadata } from "next"; +import { Geist, Geist_Mono } from "next/font/google"; +import "./globals.css"; +import Frame from "@/components/Frame"; +import Navbar from "@/components/Navbar"; +import Footer from "@/components/Footer"; + +const geistSans = Geist({ + variable: "--font-geist-sans", + subsets: ["latin"], +}); + +const geistMono = Geist_Mono({ + variable: "--font-geist-mono", + subsets: ["latin"], +}); + +export const metadata: Metadata = { + title: "Vertex: Accelerating Possibilities of Idle GPUs Globally", + description: + "Vertex thrives on the power of community. By connecting users across the globe, we are creating a network that fosters collaboration, innovation, and shared success.", + openGraph: { + type: "website", + url: "https://ai-proj-02.vercel.app", + title: "Vertex: Accelerating Possibilities of Idle GPUs Globally", + description: + "Vertex thrives on the power of community. By connecting users across the globe, we are creating a network that fosters collaboration, innovation, and shared success.", + images: `https://ai-proj-02.vercel.app/og-banner.png`, + }, +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + + + + {children} +