diff --git a/public/images/build.svg b/public/images/build.svg new file mode 100644 index 0000000..c6e0eb0 --- /dev/null +++ b/public/images/build.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/net.jpeg b/public/images/net.jpeg new file mode 100644 index 0000000..f433509 Binary files /dev/null and b/public/images/net.jpeg differ diff --git a/src/app/(main)/about/page.tsx b/src/app/(main)/about/page.tsx new file mode 100644 index 0000000..b7ef1bf --- /dev/null +++ b/src/app/(main)/about/page.tsx @@ -0,0 +1,7 @@ +export default function About() { + return ( +
+ {/* About page content will go here */} +
+ ) +} diff --git a/src/app/(main)/build/page.tsx b/src/app/(main)/build/page.tsx new file mode 100644 index 0000000..3d3ed1c --- /dev/null +++ b/src/app/(main)/build/page.tsx @@ -0,0 +1,12 @@ +import BuildHero from "@/components/BuildHero"; +import BuildStack from "@/components/BuildStack"; + +export default function Build() { + return ( +
+ + +
+ ) + } + \ No newline at end of file diff --git a/src/components/AboutHero.tsx b/src/components/AboutHero.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/BuildHero.tsx b/src/components/BuildHero.tsx new file mode 100644 index 0000000..6180106 --- /dev/null +++ b/src/components/BuildHero.tsx @@ -0,0 +1,45 @@ +import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react' +import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline' +import { ChevronRightIcon } from '@heroicons/react/20/solid' +import { Button } from './Button' + + +export default function BuildHero() { + return ( +
+
+
+
+
+
+
+
+
+

+ Build on a Decentralized Internet Infrastructure +

+

+ Our unique technology enables anyone to become a provider of network, storage and compute capacity. +

+
+ +
+
+
+
+
+ {/* Illustration taken from Lucid Illustrations: https://lucid.pixsellz.io/ */} + +
+
+
+
+
+
+
+ ) +} diff --git a/src/components/BuildStack.tsx b/src/components/BuildStack.tsx new file mode 100644 index 0000000..32578f9 --- /dev/null +++ b/src/components/BuildStack.tsx @@ -0,0 +1,163 @@ +"use client"; + +import { Button } from "./Button"; +import Image from "next/image"; + +import { + CpuChipIcon, + CircleStackIcon, + CurrencyDollarIcon, + ShareIcon, + ShieldCheckIcon, + LinkIcon, + ServerStackIcon, + WifiIcon, + ComputerDesktopIcon, + UsersIcon, + DevicePhoneMobileIcon, +} from "@heroicons/react/24/solid"; + +const posts = [ + { + id: 1, + title: 'ZERO-OS V3', + href: '#', + description1: + 'A stateless and lightweight operating system that allows for an improved efficiency of up to 10x for certain workloads.', + description2: '', + icon: , + }, + { + id: 2, + title: 'MYCELIUM NETWORK', + href: '#', + description1: 'Decentralized communication layer of TF Grid that connects and coordinates nodes on the ThreeFold Grid, enabling secure and efficient peer-to-peer interactions.', + description2: '', + icon: , + }, + { + id: 3, + title: 'QUANTUM SAFE STORAGE', + href: '#', + description1: + 'QSS is a decentralized, globally distributed data storage system. It is unbreakable, self-healing, append-only, and immutable.', + description2: '', + icon: , + }, + { + id: 4, + title: 'TF CHAIN', + href: '#', + description1: + 'An application-specific blockchain customized for the operation of a single application – provisioning decentralized compute, storage, and network capacity.', + description2: '', + icon: , + }, + { + id: 5, + title: '3NODES', + href: '#', + description1: + 'Decentralized, user-owned hardware devices that provides computing, storage, and networking resources to power the TF Grid.', + description2: '', + icon: , + }, + { + id: 6, + title: 'GATEWAY NODES', + href: '#', + description1: + 'Specialized nodes that provide secure access points to the ThreeFold Grid, enabling decentralized networking, private data communication, and seamless interaction between users and applications.', + description2: '', + icon: , + }, + { + id: 7, + title: 'TF DASHBOARD', + href: '#', + description1: + 'A user-friendly interface for monitoring, managing, and deploying resources on the ThreeFold Grid.', + description2: '', + icon: , + }, + { + id: 8, + title: 'TF DAO', + href: '#', + description1: + 'A community-driven governance model that allows farmers to participate in decision-making processes related to the development and direction of the ThreeFold ecosystem.', + description2: '', + icon: , + }, + { + id: 9, + title: 'TF CONNECT APP', + href: '#', + description1: + 'A mobile app that serves as a gateway to the ThreeFold ecosystem and its various ThreeFold products and services.', + description2: '', + icon: , + }, +] + + +export default function BuildStack() { + + return ( +
+ {/* Gradient Blob Component */} +
+
+
+
+ {/* Left Column - Text (1/3 width) */} +
+
+

+ The ThreeFold Stack +

+

+ Products designed to power a decentralized, sustainable digital future. +

+
+
+ {/* Right Column - Stacked Cubes (2/3 width) */} +
+ +
+
+
+ {posts.map((post) => ( +
+
{ + e.currentTarget.style.filter = 'brightness(0.8) drop-shadow(0 0 20px rgba(156, 163, 175, 0.5))'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.filter = 'brightness(1)'; + }} + > +
+
+ {post.icon} + {post.title} +
+ < div className="max-w-2/3"> +

{post.description1}

+

{post.description2}

+
+ + ))} +
+
+
+ ); +} diff --git a/src/components/HeroHome.tsx b/src/components/HeroHome.tsx index 0c447ea..ad1b6c0 100644 --- a/src/components/HeroHome.tsx +++ b/src/components/HeroHome.tsx @@ -21,7 +21,7 @@ export default function HeroHome() {

Empowering Purpose-Driven Organizations.

-

+

Welcome to ThreeFold: the first all-in-one, white-label engagement platform to mobilize communities, engage supporters, scale impact, and fundraise—at a fraction of the cost.

diff --git a/src/components/NavLinks.tsx b/src/components/NavLinks.tsx index df52c13..682d1c8 100644 --- a/src/components/NavLinks.tsx +++ b/src/components/NavLinks.tsx @@ -9,8 +9,8 @@ export function NavLinks() { let timeoutRef = useRef(null) return [ - ['About', '/#features'], - ['Build', '/#reviews'], + ['About', '/about'], + ['Build', '/build'], ['Host', '/#pricing'], ].map(([label, href], index) => (