Compare commits

..

1 Commits

Author SHA1 Message Date
75aa34ae6f add chmod +x *.sh 2025-08-14 15:33:24 +02:00
23 changed files with 459 additions and 643 deletions

View File

@ -1,6 +1,9 @@
#!/bin/bash
cd "$(dirname "$0")"
# Ensure all shell scripts are executable
chmod +x *.sh
PREFIX="threefold"
echo "building for folder: /$PREFIX/"

Binary file not shown.

After

Width:  |  Height:  |  Size: 1017 KiB

View File

@ -1,84 +0,0 @@
import { AppsPreview } from '../../../components/Apps'
import { Container } from '../../../components/Container'
export const metadata = {
title: 'Build',
description: 'Build and deploy your applications on ThreeFold\'s decentralized infrastructure.',
}
export default function Build() {
return (
<>
{/* Hero Section */}
<section className="py-24" style={{ backgroundColor: '#121212' }}>
<Container>
<div className="mx-auto max-w-4xl text-center">
<h1 className="text-4xl font-medium tracking-tight text-white lg:text-6xl">
Build on ThreeFold
</h1>
<p className="mt-6 lg:text-lg text-base text-gray-300">
Deploy your Web2, Web3, and AI applications on truly decentralized infrastructure.
Own your data, control your destiny.
</p>
</div>
</Container>
</section>
{/* Apps Preview */}
<AppsPreview />
{/* Developer Tools */}
<section className="py-24" style={{ backgroundColor: '#121212' }}>
<Container>
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl mb-12">
<h2 className="text-3xl font-medium tracking-tight text-white">
Developer Tools & Resources
</h2>
<p className="mt-6 lg:text-lg text-base text-gray-300">
Everything you need to build and deploy on the ThreeFold Grid.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="bg-gray-900 p-8 rounded-2xl">
<h3 className="text-xl font-semibold text-white mb-4">TF Grid SDK</h3>
<p className="text-gray-300 mb-4">
Comprehensive SDK for deploying and managing workloads on the ThreeFold Grid.
</p>
<a href="https://github.com/threefoldtech" className="text-cyan-400 hover:text-cyan-300">
View on GitHub
</a>
</div>
<div className="bg-gray-900 p-8 rounded-2xl">
<h3 className="text-xl font-semibold text-white mb-4">Documentation</h3>
<p className="text-gray-300 mb-4">
Comprehensive guides, tutorials, and API documentation for developers.
</p>
<a href="https://manual.threefold.io" className="text-cyan-400 hover:text-cyan-300">
Read Docs
</a>
</div>
<div className="bg-gray-900 p-8 rounded-2xl">
<h3 className="text-xl font-semibold text-white mb-4">Community Forum</h3>
<p className="text-gray-300 mb-4">
Get help from the community and share your ThreeFold projects.
</p>
<a href="https://forum.threefold.io" className="text-cyan-400 hover:text-cyan-300">
Join Forum
</a>
</div>
<div className="bg-gray-900 p-8 rounded-2xl">
<h3 className="text-xl font-semibold text-white mb-4">Marketplace</h3>
<p className="text-gray-300 mb-4">
Browse and deploy ready-made solutions from the ThreeFold ecosystem.
</p>
<a href="https://marketplace.threefold.io" className="text-cyan-400 hover:text-cyan-300">
Explore
</a>
</div>
</div>
</Container>
</section>
</>
)
}

View File

@ -1,120 +0,0 @@
import { Container } from '../../../components/Container'
export const metadata = {
title: 'Community',
description: 'Join the ThreeFold community building the decentralized internet.',
}
export default function Community() {
return (
<>
{/* Hero Section */}
<section className="py-24" style={{ backgroundColor: '#121212' }}>
<Container>
<div className="mx-auto max-w-4xl text-center">
<h1 className="text-4xl font-medium tracking-tight text-white lg:text-6xl">
Join the Movement
</h1>
<p className="mt-6 lg:text-lg text-base text-gray-300">
ThreeFold is more than technology - it's a global community building
a better internet for everyone.
</p>
</div>
</Container>
</section>
{/* Community Stats */}
<section className="py-24" style={{ backgroundColor: '#121212' }}>
<Container>
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div>
<div className="text-4xl font-bold text-cyan-400 mb-2">50K+</div>
<div className="text-gray-300">Community Members</div>
</div>
<div>
<div className="text-4xl font-bold text-cyan-400 mb-2">1,800+</div>
<div className="text-gray-300">Active Farmers</div>
</div>
<div>
<div className="text-4xl font-bold text-cyan-400 mb-2">500+</div>
<div className="text-gray-300">Developers</div>
</div>
<div>
<div className="text-4xl font-bold text-cyan-400 mb-2">51</div>
<div className="text-gray-300">Countries</div>
</div>
</div>
</Container>
</section>
{/* Community Channels */}
<section className="py-24" style={{ backgroundColor: '#121212' }}>
<Container>
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl mb-12">
<h2 className="text-3xl font-medium tracking-tight text-white">
Connect with the Community
</h2>
<p className="mt-6 lg:text-lg text-base text-gray-300">
Join our global community across multiple platforms.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{[
{
name: 'Forum',
description: 'Discuss ideas, get help, and share your projects',
link: 'https://forum.threefold.io',
members: '15K+ members'
},
{
name: 'Telegram',
description: 'Real-time chat with farmers and developers',
link: 'https://t.me/threefold',
members: '25K+ members'
},
{
name: 'Discord',
description: 'Voice chat and community events',
link: 'https://discord.gg/threefold',
members: '8K+ members'
},
{
name: 'GitHub',
description: 'Contribute to open-source development',
link: 'https://github.com/threefoldtech',
members: '200+ contributors'
},
{
name: 'Twitter/X',
description: 'Latest news and announcements',
link: 'https://twitter.com/threefold_io',
members: '30K+ followers'
},
{
name: 'LinkedIn',
description: 'Professional network and company updates',
link: 'https://linkedin.com/company/threefold',
members: '5K+ followers'
},
].map((channel) => (
<div key={channel.name} className="bg-gray-900 p-8 rounded-2xl hover:bg-gray-800 transition-colors">
<h3 className="text-xl font-semibold text-white mb-4">{channel.name}</h3>
<p className="text-gray-300 mb-4">{channel.description}</p>
<div className="text-sm text-cyan-400 mb-4">{channel.members}</div>
<a
href={channel.link}
className="text-cyan-400 hover:text-cyan-300 font-medium"
target="_blank"
rel="noopener noreferrer"
>
Join {channel.name}
</a>
</div>
))}
</div>
</Container>
</section>
</>
)
}

View File

@ -1,66 +0,0 @@
import { FarmerPreview } from '../../../components/Farmer'
import { Container } from '../../../components/Container'
export const metadata = {
title: 'Farming',
description: 'Learn how to become a ThreeFold farmer and earn rewards by contributing to the decentralized internet.',
}
export default function Farming() {
return (
<>
{/* Hero Section */}
<section className="py-24" style={{ backgroundColor: '#121212' }}>
<Container>
<div className="mx-auto max-w-4xl text-center">
<h1 className="text-4xl font-medium tracking-tight text-white lg:text-6xl">
Become a ThreeFold Farmer
</h1>
<p className="mt-6 lg:text-lg text-base text-gray-300">
Join thousands of farmers worldwide who are building the decentralized internet
and earning rewards for their contribution.
</p>
</div>
</Container>
</section>
{/* Farmer Process */}
<FarmerPreview />
{/* Farming Benefits */}
<section className="py-24" style={{ backgroundColor: '#121212' }}>
<Container>
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl mb-12">
<h2 className="text-3xl font-medium tracking-tight text-white">
Why Become a Farmer?
</h2>
<p className="mt-6 lg:text-lg text-base text-gray-300">
ThreeFold farming offers unique benefits compared to traditional hosting or mining.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="bg-gray-900 p-8 rounded-2xl">
<h3 className="text-xl font-semibold text-white mb-4">Earn TFT Rewards</h3>
<p className="text-gray-300">
Get rewarded in ThreeFold Tokens (TFT) for providing capacity to the grid.
</p>
</div>
<div className="bg-gray-900 p-8 rounded-2xl">
<h3 className="text-xl font-semibold text-white mb-4">Low Energy Usage</h3>
<p className="text-gray-300">
Our efficient Zero-OS uses up to 10x less energy than traditional cloud infrastructure.
</p>
</div>
<div className="bg-gray-900 p-8 rounded-2xl">
<h3 className="text-xl font-semibold text-white mb-4">Easy Setup</h3>
<p className="text-gray-300">
Simply boot any computer with our Zero-OS image and you're farming in minutes.
</p>
</div>
</div>
</Container>
</section>
</>
)
}

View File

@ -1,60 +0,0 @@
import { Dashboard } from '../../../components/Dashboard'
import { Container } from '../../../components/Container'
import GlobeDemo from '../../../components/GlobeDemo'
export const metadata = {
title: 'Grid Status',
description: 'Live statistics and status of the ThreeFold Grid - the world\'s largest decentralized internet infrastructure.',
}
export default function Grid() {
return (
<>
{/* Hero Section */}
<section className="py-24" style={{ backgroundColor: '#121212' }}>
<Container>
<div className="mx-auto max-w-4xl text-center">
<h1 className="text-4xl font-medium tracking-tight text-white lg:text-6xl">
ThreeFold Grid Status
</h1>
<p className="mt-6 lg:text-lg text-base text-gray-300">
Real-time statistics of our global decentralized infrastructure network.
</p>
</div>
</Container>
</section>
{/* Globe Visualization */}
<section className="relative h-[600px]" style={{ backgroundColor: '#121212' }}>
<GlobeDemo />
</section>
{/* Dashboard Stats */}
<Dashboard />
{/* Additional Grid Info */}
<section className="py-24" style={{ backgroundColor: '#121212' }}>
<Container>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div className="text-center">
<div className="text-3xl font-bold text-cyan-400 mb-2">99.9%</div>
<div className="text-gray-300">Uptime</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-cyan-400 mb-2">80%</div>
<div className="text-gray-300">Energy Savings vs Cloud</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-cyan-400 mb-2">10x</div>
<div className="text-gray-300">More Secure</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-cyan-400 mb-2">100%</div>
<div className="text-gray-300">Decentralized</div>
</div>
</div>
</Container>
</section>
</>
)
}

View File

@ -1,11 +1,20 @@
import { SpotlightPreview } from '../../components/Spotlight'
import { StackSectionPreview } from '../../components/StackSection'
import { Dashboard } from '../../components/Dashboard'
import { AppsPreview } from '../../components/Apps'
import { FarmerPreview } from '../../components/Farmer'
import { Reviews } from '../../components/Reviews'
import { Faqs } from '../../components/Faqs'
import Cta from '../../components/Cta'
import { CallToAction } from '@/components/CallToAction'
import { Faqs } from '@/components/Faqs'
import { Hero } from '@/components/Hero'
import { Pricing } from '@/components/Pricing'
import { PrimaryFeatures } from '@/components/PrimaryFeatures'
import { Reviews } from '@/components/Reviews'
import { SecondaryFeatures } from '@/components/SecondaryFeatures'
import Tractions from '@/components/Tractions'
import Benefits from '@/components/Benefits'
import Cta from '@/components/Cta'
import { SpotlightPreview } from '@/components/Spotlight'
import { StackSectionPreview } from '@/components/StackSection'
import GlobeDemo from '@/components/GlobeDemo'
import { Dashboard } from '@/components/Dashboard'
import { AppsPreview } from '@/components/Apps'
import { FarmerPreview } from '@/components/Farmer'
export default function Home() {
return (
@ -15,9 +24,7 @@ export default function Home() {
<Dashboard />
<FarmerPreview />
<AppsPreview />
<Reviews />
<Faqs />
<Cta />
</>
)
}

View File

@ -1,61 +0,0 @@
import { Container } from '../../../components/Container'
import { StackSectionPreview } from '../../../components/StackSection'
export const metadata = {
title: 'Technology',
description: 'Deep dive into ThreeFold\'s revolutionary decentralized infrastructure technology.',
}
export default function Technology() {
return (
<>
{/* Hero Section */}
<section className="py-24" style={{ backgroundColor: '#121212' }}>
<Container>
<div className="mx-auto max-w-4xl text-center">
<h1 className="text-4xl font-medium tracking-tight text-white lg:text-6xl">
Revolutionary Technology Stack
</h1>
<p className="mt-6 lg:text-lg text-base text-gray-300">
ThreeFold has reimagined internet infrastructure from the ground up,
creating a truly decentralized, sustainable, and sovereign alternative to Big Tech.
</p>
</div>
</Container>
</section>
{/* Stack Section */}
<StackSectionPreview />
{/* Technical Details */}
<section className="py-24" style={{ backgroundColor: '#121212' }}>
<Container>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
<div className="bg-gray-900 p-8 rounded-2xl">
<h3 className="text-xl font-semibold text-white mb-4">Zero-OS</h3>
<p className="text-gray-300">
Our lightweight operating system runs directly on bare metal,
eliminating the overhead of traditional virtualization while
providing maximum security and efficiency.
</p>
</div>
<div className="bg-gray-900 p-8 rounded-2xl">
<h3 className="text-xl font-semibold text-white mb-4">Quantum Safe Storage</h3>
<p className="text-gray-300">
Revolutionary storage system that disperses data across multiple
nodes, making it quantum-safe and virtually impossible to hack or lose.
</p>
</div>
<div className="bg-gray-900 p-8 rounded-2xl">
<h3 className="text-xl font-semibold text-white mb-4">Planetary Network</h3>
<p className="text-gray-300">
End-to-end encrypted overlay network that creates the shortest
path between any two points on the internet, bypassing traditional routing.
</p>
</div>
</div>
</Container>
</section>
</>
)
}

View File

@ -2,7 +2,7 @@ import { type Metadata } from 'next'
import { Inter } from 'next/font/google'
import clsx from 'clsx'
import '../styles/tailwind.css'
import '@/styles/tailwind.css'
const inter = Inter({
subsets: ['latin'],
@ -12,12 +12,11 @@ const inter = Inter({
export const metadata: Metadata = {
title: {
template: '%s - ThreeFold',
default: 'ThreeFold - Decentralized Internet Infrastructure',
template: '%s - EngageOS',
default: 'EngageOS - Invest at the perfect time.',
},
description:
'ThreeFold is building a decentralized internet infrastructure owned and operated by the people. Join the movement to create a more sovereign, sustainable, and accessible internet for all.',
keywords: 'decentralized internet, blockchain, Web3, cloud infrastructure, sovereign technology',
'By leveraging insights from our network of industry insiders, youll know exactly when to buy to maximize profit, and exactly when to sell to avoid painful losses.',
}
export default function RootLayout({

View File

@ -1,9 +1,9 @@
import { Container } from '../components/Container'
import { Container } from '@/components/Container'
import Image from 'next/image'
import Benefits1 from '../images/benefits/benefits1.jpg'
import Benefits2 from '../images/benefits/benefits2.jpg'
import Benefits3 from '../images/benefits/benefits3.jpg'
import Benefits4 from '../images/benefits/benefits4.jpg'
import Benefits1 from '@/images/benefits/benefits1.jpg'
import Benefits2 from '@/images/benefits/benefits2.jpg'
import Benefits3 from '@/images/benefits/benefits3.jpg'
import Benefits4 from '@/images/benefits/benefits4.jpg'
export default function Benefits() {
@ -13,10 +13,10 @@ export default function Benefits() {
<Container>
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
<h2 className="lg:text-4xl text-3xl font-medium tracking-tight text-white">
The Benefits of Decentralized Infrastructure
Built Different. For a Change.
</h2>
<p className="mt-6 lg:text-lg text-base text-gray-300">
ThreeFold offers a fundamentally different approach to internet infrastructure, providing unparalleled benefits in terms of sovereignty, sustainability, and accessibility.
EngageOS isn't just another tech platform — it's a digital infrastructure built from the ground up for purpose-driven organizations. From white-label sovereignty to field-ready resilience, every element of EngageOS is designed to meet the real-world challenges of civil society.
</p>
</div>
</Container>
@ -29,10 +29,10 @@ export default function Benefits() {
className="h-80 object-cover object-left"
/>
<div className="p-10">
<h3 className="text-sm/4 font-semibold text-white">True Sovereignty</h3>
<p className="mt-2 text-lg font-medium tracking-tight text-white">Own Your Data, Control Your Destiny</p>
<h3 className="text-sm/4 font-semibold text-white"> Built for Civil Society</h3>
<p className="mt-2 text-lg font-medium tracking-tight text-white">Purpose-First, Not Profit-First</p>
<p className="mt-2 max-w-lg text-sm/6 text-gray-300">
With ThreeFold, you own your data and control your digital presence. Our decentralized architecture ensures your information remains private and secure, free from corporate or governmental oversight.
Unlike traditional SaaS built for commercial scale, EngageOS was born from the realities of NGOs, grassroots coalitions, and purpose-led institutions. Every module, flow, and metric is optimized to serve impact not ad revenue or venture capital.
</p>
</div>
</div>
@ -45,10 +45,10 @@ export default function Benefits() {
className="h-80 object-cover"
/>
<div className="p-10">
<h3 className="text-sm/4 font-semibold text-white">Sustainable & Energy Efficient</h3>
<p className="mt-2 text-lg font-medium tracking-tight text-white">Green Computing for a Better Future</p>
<h3 className="text-sm/4 font-semibold text-white">White-Label, Zero-Code</h3>
<p className="mt-2 text-lg font-medium tracking-tight text-white">Your Brand, Your Movements</p>
<p className="mt-2 max-w-lg text-sm/6 text-gray-300">
Our Zero-OS and optimized network design consume significantly less energy than traditional data centers, making ThreeFold a truly sustainable solution for the planet.
EngageOS empowers organizations to fully own their digital identity. From Red Cross OS to Montessori OS, each instance is custom-branded no tech team required. You launch a platform that looks and feels like you, not us.
</p>
</div>
</div>
@ -61,10 +61,10 @@ export default function Benefits() {
className="h-80 object-cover"
/>
<div className="p-10">
<h3 className="text-sm/4 font-semibold text-white">Accessible & Inclusive</h3>
<p className="mt-2 text-lg font-medium tracking-tight text-white">Internet for Everyone, Everywhere</p>
<h3 className="text-sm/4 font-semibold text-white">Sovereign & Ethical Infrastructure</h3>
<p className="mt-2 text-lg font-medium tracking-tight text-white">Own Your Data. Always.</p>
<p className="mt-2 max-w-lg text-sm/6 text-gray-300">
By distributing computing power globally, ThreeFold makes internet infrastructure accessible to underserved regions, fostering digital inclusion and empowering local communities.
We don't mine or monetize user data. EngageOS runs on decentralized, privacy-respecting infrastructure built for trust, compliance, and sovereignty. You control where your data lives and who sees it.
</p>
</div>
</div>
@ -77,10 +77,10 @@ export default function Benefits() {
className="h-80 object-cover object-left"
/>
<div className="p-10">
<h3 className="text-sm/4 font-semibold text-white">Resilient & Secure</h3>
<p className="mt-2 text-lg font-medium tracking-tight text-white">Quantum-Safe and Unhackable</p>
<h3 className="text-sm/4 font-semibold text-white">Mutualized Model</h3>
<p className="mt-2 text-lg font-medium tracking-tight text-white">Share Infrastructure. Multiply Impact.</p>
<p className="mt-2 max-w-lg text-sm/6 text-gray-300">
ThreeFold's unique data distribution and encryption methods provide quantum-safe security, making your data virtually impossible to hack or lose, ensuring unparalleled resilience.
By pooling tech costs across aligned organizations, EngageOS offers enterprise-grade functionality at a fraction of the price. When one partner grows, the entire ecosystem benefits through shared modules, updates, and insights.
</p>
</div>
</div>

View File

@ -4,21 +4,21 @@ export default function Cta() {
<div className="mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8">
<div className="relative isolate overflow-hidden bg-gray-900 px-6 py-24 text-center shadow-2xl sm:rounded-3xl sm:px-16">
<h2 className="text-4xl font-semibold tracking-tight text-balance text-white sm:text-5xl">
Join the Decentralized Internet Revolution
Scale Your Impact, Not Your Costs
</h2>
<p className="mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-300">
Be part of building a more sovereign, sustainable, and accessible internet.
Start farming nodes or deploy your applications today.
EngageOS gives purpose-driven teams the power to mobilize communities, grow movements, and fundraise faster
all from one unified platform.
</p>
<div className="mt-10 flex items-center justify-center gap-x-6">
<a
href="https://threefold.io/farm"
href="/contact"
className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
>
Start Farming
Contact Us
</a>
<a href="https://threefold.io/build" className="text-sm/6 font-semibold text-white">
Start Building <span aria-hidden="true"></span>
<a href="/demo" className="text-sm/6 font-semibold text-white">
Book a Demo <span aria-hidden="true"></span>
</a>
</div>
@ -27,13 +27,14 @@ export default function Cta() {
aria-hidden="true"
className="absolute top-1/2 left-1/2 -z-10 size-256 -translate-x-1/2 mask-[radial-gradient(closest-side,white,transparent)]"
>
<circle r={512} cx={512} cy={512} fill="url(#threefold-gradient)" fillOpacity="0.7" />
<circle r={512} cx={512} cy={512} fill="url(#engage-gradient)" fillOpacity="0.7" />
<defs>
<radialGradient id="threefold-gradient">
<radialGradient id="engage-gradient">
<stop offset="0%" stopColor="#caa5f0" />
<stop offset="50%" stopColor="#8f79f9" />
<stop offset="100%" stopColor="#5d84e1" />
</radialGradient>
</defs>
</svg>
</div>

View File

@ -1,80 +1,80 @@
import { Container } from '../components/Container'
import { Container } from '@/components/Container'
const faqs = [
[
{
question: 'What is ThreeFold?',
question: 'What is EngageOS?',
answer:
'ThreeFold is building the world\'s largest decentralized internet infrastructure. It\'s a peer-to-peer network of compute, storage, and network capacity owned and operated by independent farmers worldwide.',
'EngageOS is a white-label engagement platform built specifically for purpose-driven organizations. It allows NGOs, foundations, and impact coalitions to launch their own branded platforms to engage communities, deliver training, and mobilize support.',
},
{
question: 'How is ThreeFold different from traditional cloud?',
question: 'Do I need a tech team to use EngageOS?',
answer:
'Unlike centralized cloud providers, ThreeFold is fully decentralized, uses up to 10x less energy, provides quantum-safe security, and gives you complete data sovereignty.',
'No. EngageOS is fully plug-and-play. Its designed so any organization—regardless of technical capacity—can deploy and customize their own platform without writing a line of code.',
},
{
question: 'What can I build on ThreeFold?',
question: 'Can we fully customize the platforms look and feel?',
answer:
'Anything that runs on Linux can run on ThreeFold - from simple websites to complex AI workloads, blockchain nodes, IoT applications, and enterprise solutions.',
'Absolutely. From logos and colors to navigation and community features, EngageOS supports full white-label customization so the platform feels like your own digital headquarters.',
},
],
[
{
question: 'How do I become a ThreeFold farmer?',
question: 'What kinds of organizations use EngageOS?',
answer:
'Simply boot any modern computer with our Zero-OS image. Once connected to the internet, your node will automatically join the grid and start earning TFT rewards.',
'We work with NGOs, educational networks, development agencies, faith-based groups, and mission-aligned coalitions that want to better engage, train, and mobilize their communities at scale.',
},
{
question: 'What are ThreeFold Tokens (TFT)?',
question: 'Is EngageOS multilingual and accessible offline?',
answer:
'TFT is the native currency of the ThreeFold ecosystem. Farmers earn TFT for providing capacity, and users spend TFT to deploy workloads on the grid.',
'Yes. The platform supports multilingual content and offline-friendly delivery—ideal for reaching underserved communities with limited connectivity.',
},
{
question: 'Is ThreeFold secure?',
question: 'Can we use EngageOS for fundraising?',
answer:
'Yes, ThreeFold uses quantum-safe storage algorithms, end-to-end encryption, and a zero-trust security model. Data is dispersed across multiple nodes making it virtually impossible to hack.',
'Yes. EngageOS includes built-in fundraising tools, including peer-to-peer, micro-donation, and pay-it-forward models—plus full donor engagement capabilities.',
},
],
[
{
question: 'How much does it cost to use ThreeFold?',
question: 'How is EngageOS different from other platforms?',
answer:
'Pricing is transparent and competitive with traditional cloud providers, but with added benefits of decentralization and data sovereignty. Check our calculator for specific pricing.',
'Unlike general-purpose platforms, EngageOS is mission-built for civil society. It integrates engagement, learning, and fundraising in one secure, ethical platform—hosted on sovereign infrastructure.',
},
{
question: 'Where is ThreeFold available?',
question: 'What is the pricing model?',
answer:
'ThreeFold operates globally with nodes in over 50 countries. The decentralized nature means you can deploy close to your users anywhere in the world.',
'EngageOS operates on a flexible SaaS model, with plans ranging from €30K to €300K annually depending on features and user scale. For grassroots initiatives, pay-it-forward and sponsorship models are also available.',
},
{
question: 'How do I get started?',
question: 'How do we get started?',
answer:
'Visit our Grid portal to start building, or check out our farming guide to contribute capacity. Our community is always ready to help newcomers.',
'Reach out to our team for a demo or strategy session. Well walk you through the options and help design the best deployment path for your mission.',
},
],
]
export function Faqs() {
return (
<section
id="faqs"
aria-labelledby="faqs-title"
className="border-t border-gray-800 py-20 sm:py-32"
style={{ backgroundColor: '#121212' }}
className="border-t border-gray-200 py-20 sm:py-32"
>
<Container>
<div className="mx-auto max-w-2xl lg:mx-0">
<h2
id="faqs-title"
className="text-3xl font-medium tracking-tight text-white"
className="text-3xl font-medium tracking-tight text-gray-900"
>
Frequently asked questions
</h2>
<p className="mt-2 lg:text-lg text-base text-gray-300">
<p className="mt-2 lg:text-lg text-base text-gray-600">
If you have anything else you want to ask,{' '}
<a
href="mailto:info@threefold.io"
className="text-cyan-400 hover:text-cyan-300 underline"
href="mailto:info@example.com"
className="text-gray-900 underline"
>
reach out to us
</a>
@ -90,10 +90,10 @@ export function Faqs() {
<ul role="list" className="space-y-10">
{column.map((faq, faqIndex) => (
<li key={faqIndex}>
<h3 className="lg:text-lg text-base/6 font-semibold text-white">
<h3 className="lg:text-lg text-base/6 font-semibold text-gray-900">
{faq.question}
</h3>
<p className="mt-4 text-sm text-gray-300">{faq.answer}</p>
<p className="mt-4 text-sm text-gray-700">{faq.answer}</p>
</li>
))}
</ul>

View File

@ -1,11 +1,12 @@
import Image from 'next/image'
import Link from 'next/link'
import { Button } from '../components/Button'
import { Container } from '../components/Container'
import { TextField } from '../components/Fields'
import { Logomark } from '../components/Logo'
import { NavLinks } from '../components/NavLinks'
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import { TextField } from '@/components/Fields'
import { Logomark } from '@/components/Logo'
import { NavLinks } from '@/components/NavLinks'
function QrCodeBorder(props: React.ComponentPropsWithoutRef<'svg'>) {
return (
<svg viewBox="0 0 96 96" fill="none" aria-hidden="true" {...props}>
@ -27,8 +28,8 @@ export function Footer() {
<div className="flex items-center text-white">
<Logomark className="h-10 w-10 flex-none fill-cyan-500" />
<div className="ml-4">
<p className="text-base font-semibold">ThreeFold</p>
<p className="mt-1 text-sm">Building the Decentralized Internet.</p>
<p className="text-base font-semibold">EngageOS</p>
<p className="mt-1 text-sm">Empowering Purpose-Driven Organizations.</p>
</div>
</div>
<nav className="mt-11 flex gap-8">
@ -52,7 +53,7 @@ export function Footer() {
</Button>
</form>
<p className="mt-6 text-sm text-gray-400 md:mt-0">
&copy; Copyright {new Date().getFullYear()} ThreeFold. All rights reserved.
&copy; Copyright {new Date().getFullYear()}. All rights reserved.
</p>
</div>
</Container>

View File

@ -9,12 +9,10 @@ import {
} from '@headlessui/react'
import { AnimatePresence, motion } from 'framer-motion'
import { Button } from '../components/Button'
import { Container } from '../components/Container'
import { Logo } from '../components/Logo'
import { NavLinks } from '../components/NavLinks'
// ... keep the icon components same
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import { Logo } from '@/components/Logo'
import { NavLinks } from '@/components/NavLinks'
function MenuIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
return (
@ -110,27 +108,22 @@ export function Header() {
className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-50 px-6 pt-32 pb-6 shadow-2xl shadow-gray-900/20"
>
<div className="space-y-4">
<MobileNavLink href="/technology">
Technology
<MobileNavLink href="/#features">
Features
</MobileNavLink>
<MobileNavLink href="/grid">
Grid Status
<MobileNavLink href="/#reviews">
Reviews
</MobileNavLink>
<MobileNavLink href="/farming">
Farming
</MobileNavLink>
<MobileNavLink href="/build">
Build
</MobileNavLink>
<MobileNavLink href="/community">
Community
<MobileNavLink href="/#pricing">
Pricing
</MobileNavLink>
<MobileNavLink href="/#faqs">FAQs</MobileNavLink>
</div>
<div className="mt-8 flex flex-col gap-4">
<Button href="https://threefold.io/build" variant="outline">
Start Building
<Button href="/login" variant="outline">
Log in
</Button>
<Button href="https://threefold.io/farm">Start Farming</Button>
<Button href="#">Download the app</Button>
</div>
</PopoverPanel>
</>
@ -140,10 +133,10 @@ export function Header() {
)}
</Popover>
<div className="flex items-center gap-6 max-lg:hidden">
<Button href="https://threefold.io/build" variant="outline">
Start Building
<Button href="/login" variant="outline">
Log in
</Button>
<Button href="https://threefold.io/farm">Start Farming</Button>
<Button href="#">Download</Button>
</div>
</div>
</Container>

View File

@ -2,8 +2,15 @@
import Image from 'next/image'
import { Button } from './Button'
import Engage from '../images/engage.svg'
import { gradientText, gradientDark } from '../components/Gradients'
import Engage from '@/images/engage.svg'
import { gradientText, gradientDark } from '@/components/Gradients'
const navigation = [
{ name: 'Product', href: '#' },
{ name: 'Features', href: '#' },
{ name: 'Marketplace', href: '#' },
{ name: 'Company', href: '#' },
]
export default function HeroHome() {
return (
@ -12,18 +19,18 @@ export default function HeroHome() {
<div className="mx-auto max-w-7xl px-8 lg:px-8">
<div className="mx-auto max-w-3xl text-center">
<h1 className="text-3xl font-medium tracking-tight text-white lg:text-5xl">
Building the Internet of Tomorrow
Empowering Purpose-Driven Organizations.
</h1>
<p className="mt-8 lg:text-lg text-base text-gray-300">
Welcome to <span className={`font-semibold ${gradientText}`}>ThreeFold</span>: the world's largest decentralized internet infrastructure. Built by everyone, for everyone - creating a more sovereign, sustainable, and accessible internet.
<p className="mt-8 lg:lg:text-lg text-base text-base text-gray-300">
Welcome to <span className={`font-semibold ${gradientText}`}>EngageOS</span>: the first all-in-one, white-label engagement platform to mobilize communities, engage supporters, scale impact, and fundraiseat a fraction of the cost.
</p>
<div className="mt-12 flex items-center justify-center gap-x-6 relative z-10">
<Button color="gradient" href="https://threefold.io/build">Start Building</Button>
<Button color="gradient">Get in Touch</Button>
<Button
href="https://threefold.io/farm"
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
variant="outline"
>
<span className="ml-2.5">Start Farming</span>
<span className="ml-2.5">Book a Demo</span>
</Button>
</div>
</div>
@ -31,7 +38,7 @@ export default function HeroHome() {
<div className="mx-auto max-w-7xl px-4 lg:px-8 mb-10 lg:mb-32">
<div className="max-w-4xl flow-root bg-transparent mx-auto relative">
<div className="lg:-m-8 m-10 flex justify-center">
<Image src={Engage} alt="ThreeFold Network" unoptimized />
<Image src={Engage} alt="" unoptimized />
</div>
</div>
</div>

View File

@ -9,11 +9,10 @@ export function NavLinks() {
let timeoutRef = useRef<number | null>(null)
return [
['Technology', '/technology'],
['Grid Status', '/grid'],
['Farming', '/farming'],
['Build', '/build'],
['Community', '/community'],
['Features', '/#features'],
['Reviews', '/#reviews'],
['Pricing', '/#pricing'],
['FAQs', '/#faqs'],
].map(([label, href], index) => (
<Link
key={label}

View File

@ -4,75 +4,217 @@ import { useState } from 'react'
import { Radio, RadioGroup } from '@headlessui/react'
import clsx from 'clsx'
import { Button } from '../components/Button'
import { Container } from '../components/Container'
import { Logomark } from '../components/Logo'
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import { Logomark } from '@/components/Logo'
const plans = [
{
name: 'Explorer',
name: 'Starter',
featured: false,
price: { Monthly: 'Free', Annually: 'Free' },
price: { Monthly: '$0', Annually: '$0' },
description:
'Perfect for developers getting started with decentralized infrastructure.',
'Perfect for small teams and early-stage initiatives getting started with community engagement.',
button: {
label: 'Start Building',
href: 'https://threefold.io/build',
label: 'Launch for Free',
href: '/register',
},
features: [
'Access to TF Grid',
'Deploy basic workloads',
'Community support',
'Documentation & tutorials',
'Basic monitoring',
'Up to 1,000 members',
'Built-in community tools (forums, updates, events)',
'Basic learning paths',
'Donations & campaigns',
'Your logo & colors',
'EngageOS subdomain (yourname.engageos.org)',
'Email support',
],
logomarkClassName: 'fill-gray-300',
},
{
name: 'Builder',
name: 'Impact',
featured: true,
price: { Monthly: '$50', Annually: '$500' },
price: { Monthly: '$89', Annually: '$890' },
description:
'For serious developers and organizations deploying production workloads.',
'For growing organizations ready to scale impact, train supporters, and fundraise with confidence.',
button: {
label: 'Start Building',
href: 'https://threefold.io/build',
label: 'Get Started',
href: '/register',
},
features: [
'Priority grid access',
'Advanced compute & storage',
'Load balancing & scaling',
'Up to 25,000 members',
'Advanced training with AI-powered content',
'Multilingual support',
'Peer-to-peer fundraising tools',
'Impact dashboards & metrics',
'Full branding (custom domain, logo, colors)',
'API access + integrations (Mailchimp, CRM)',
'Priority support',
'Advanced monitoring & analytics',
'Custom domain support',
'API access',
],
logomarkClassName: 'fill-cyan-500',
},
{
name: 'Enterprise',
name: 'Sovereign',
featured: false,
price: { Monthly: 'Custom', Annually: 'Custom' },
description:
'For large organizations needing dedicated infrastructure and custom solutions.',
'Best for large-scale networks and institutions with custom needs, privacy requirements, or regional infrastructure.',
button: {
label: 'Contact Sales',
href: '/contact',
},
features: [
'Dedicated capacity allocation',
'Custom SLA agreements',
'Private network deployment',
'White-label solutions',
'24/7 enterprise support',
'Dedicated account manager',
'Custom integrations',
'Compliance & security audits',
'Unlimited members & projects',
'White-label platform (yourname.org)',
'Self-host or deploy in your region',
'Custom integrations & AI assistants',
'Field-level data collection',
'Dedicated success manager',
'Onboarding & migration support',
'24/7 enterprise-grade support',
],
logomarkClassName: 'fill-gray-500',
},
]
function CheckIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
return (
<svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
<path
d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
fill="currentColor"
/>
<circle
cx="12"
cy="12"
r="8.25"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}
function Plan({
name,
price,
description,
button,
features,
activePeriod,
logomarkClassName,
featured = false,
}: {
name: string
price: {
Monthly: string
Annually: string
}
description: string
button: {
label: string
href: string
}
features: Array<string>
activePeriod: 'Monthly' | 'Annually'
logomarkClassName?: string
featured?: boolean
}) {
return (
<section
className={clsx(
'flex flex-col overflow-hidden rounded-3xl p-6 shadow-lg shadow-black/20',
featured ? 'order-first bg-cyan-600 lg:order-none' : 'bg-gray-900',
)}
>
<h3
className={clsx(
'flex items-center text-sm font-semibold',
featured ? 'text-white' : 'text-white',
)}
>
<Logomark className={clsx('h-6 w-6 flex-none', logomarkClassName)} />
<span className="ml-4">{name}</span>
</h3>
<p
className={clsx(
'relative mt-5 flex text-3xl tracking-tight',
featured ? 'text-white' : 'text-white',
)}
>
{price.Monthly === price.Annually ? (
price.Monthly
) : (
<>
<span
aria-hidden={activePeriod === 'Annually'}
className={clsx(
'transition duration-300',
activePeriod === 'Annually' &&
'pointer-events-none translate-x-6 opacity-0 select-none',
)}
>
{price.Monthly}
</span>
<span
aria-hidden={activePeriod === 'Monthly'}
className={clsx(
'absolute top-0 left-0 transition duration-300',
activePeriod === 'Monthly' &&
'pointer-events-none -translate-x-6 opacity-0 select-none',
)}
>
{price.Annually}
</span>
</>
)}
</p>
<p
className={clsx(
'mt-3 text-sm',
featured ? 'text-gray-100' : 'text-gray-300',
)}
>
{description}
</p>
<div className="order-last mt-6">
<ul
role="list"
className={clsx(
'-my-2 divide-y text-sm',
featured
? 'divide-gray-700 text-gray-100'
: 'divide-gray-700 text-gray-300',
)}
>
{features.map((feature) => (
<li key={feature} className="flex py-2">
<CheckIcon
className={clsx(
'h-6 w-6 flex-none',
featured ? 'text-white' : 'text-cyan-400',
)}
/>
<span className="ml-4">{feature}</span>
</li>
))}
</ul>
</div>
<Button
href={button.href}
color={featured ? 'white' : 'cyan'}
className="mt-6"
aria-label={`Get started with the ${name} plan for ${price}`}
>
{button.label}
</Button>
</section>
)
}
export function Pricing() {
let [activePeriod, setActivePeriod] = useState<'Monthly' | 'Annually'>(
'Monthly',
@ -91,15 +233,65 @@ export function Pricing() {
id="pricing-title"
className="text-3xl font-medium tracking-tight text-white"
>
Transparent pricing for everyone.
Flat pricing, no management fees.
</h2>
<p className="mt-2 lg:text-lg text-base text-gray-300">
Whether you're an individual developer or a large enterprise,
ThreeFold offers fair and transparent pricing for decentralized infrastructure.
Whether you're one person trying to get ahead or a big firm trying
to take over the world, we've got a plan for you.
</p>
</div>
{/* Rest of component remains the same */}
<div className="mt-8 flex justify-center">
<div className="relative">
<RadioGroup
value={activePeriod}
onChange={setActivePeriod}
className="grid grid-cols-2"
>
{['Monthly', 'Annually'].map((period) => (
<Radio
key={period}
value={period}
className={clsx(
'cursor-pointer border border-gray-600 px-[calc(--spacing(3)-1px)] py-[calc(--spacing(2)-1px)] text-sm text-gray-300 transition-colors hover:border-gray-500 data-focus:outline-2 data-focus:outline-offset-2 bg-gray-800',
period === 'Monthly'
? 'rounded-l-lg'
: '-ml-px rounded-r-lg',
)}
>
{period}
</Radio>
))}
</RadioGroup>
<div
aria-hidden="true"
className={clsx(
'pointer-events-none absolute inset-0 z-10 grid grid-cols-2 overflow-hidden rounded-lg bg-cyan-500 transition-all duration-300',
activePeriod === 'Monthly'
? '[clip-path:inset(0_50%_0_0)]'
: '[clip-path:inset(0_0_0_calc(50%-1px))]',
)}
>
{['Monthly', 'Annually'].map((period) => (
<div
key={period}
className={clsx(
'py-2 text-center text-sm font-semibold text-white',
period === 'Annually' && '-ml-px',
)}
>
{period}
</div>
))}
</div>
</div>
</div>
<div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 items-start gap-x-8 gap-y-10 sm:mt-20 lg:max-w-none lg:grid-cols-3">
{plans.map((plan) => (
<Plan key={plan.name} {...plan} activePeriod={activePeriod} />
))}
</div>
</Container>
</section>
)

View File

@ -4,7 +4,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'
import clsx from 'clsx'
import { useInView } from 'framer-motion'
import { Container } from '../components/Container'
import { Container } from '@/components/Container'
interface Review {
title: string
@ -15,63 +15,63 @@ interface Review {
const reviews: Array<Review> = [
{
title: 'Revolutionary decentralized infrastructure.',
body: 'ThreeFold enabled us to deploy our Web3 applications with true sovereignty and privacy. The peer-to-peer network is incredibly resilient.',
author: 'Alex Chen, CTO at DecentraApps',
title: 'A true game-changer for nonprofits.',
body: 'EngageOS allowed us to centralize our volunteer hub, training, and crowdfunding into one platform. We have seen a 3x jump in community engagement.',
author: 'Sarah D., Program Director at WomenRise',
rating: 5,
},
{
title: 'Easy to start farming.',
body: 'Setting up a ThreeFold node was surprisingly simple. Now I\'m earning rewards while contributing to the decentralized internet.',
author: 'Maria Rodriguez, Independent Farmer',
title: 'No tech team needed.',
body: 'Launching our own branded platform felt intimidating—until EngageOS. It is intuitive, scalable, and beautifully designed.',
author: 'Ahmed K., Director at The Green Schools Alliance',
rating: 5,
},
{
title: 'True internet ownership.',
body: 'Finally, an internet infrastructure that belongs to the people, not corporations. ThreeFold is the future.',
author: 'David Kumar, Web3 Developer',
title: 'Empowered our youth programs.',
body: 'Thanks to EngageOS, we built a digital home for our learning initiatives with AI-powered content in three languages.',
author: 'Maria T., Learning Lead at Global Youth Voices',
rating: 5,
},
{
title: 'Sustainable and efficient.',
body: 'The energy efficiency of ThreeFold nodes compared to traditional cloud infrastructure is remarkable. This is how computing should be done.',
author: 'Sarah Thompson, Environmental Tech Advocate',
title: 'Secure and sovereign.',
body: 'As a human rights coalition, data privacy is critical. EngageOS is the only platform that met our ethical tech standards.',
author: 'Lukas M., CTO at Liberty Commons',
rating: 5,
},
{
title: 'Perfect for edge computing.',
body: 'Deploying AI workloads at the edge has never been easier. ThreeFold\'s distributed architecture is exactly what we needed.',
author: 'Dr. James Wilson, AI Research Lab',
title: 'Decentralized. Local-first. Exactly what we needed.',
body: 'EngageOS helped us launch a regional platform for community-led health training across East Africa—with full offline access.',
author: 'Grace N., Digital Programs at Umoja Health Network',
rating: 5,
},
{
title: 'Community-driven excellence.',
body: 'The ThreeFold community is incredibly supportive. From farmers to developers, everyone works together to build something amazing.',
author: 'Lisa Park, Blockchain Consultant',
title: 'The best decision we made this year.',
body: 'Instead of duct-taping tools together, EngageOS gave us one powerful stack to engage, fundraise, and scale impact.',
author: 'Jonas F., COO at Youth in Action Europe',
rating: 5,
},
{
title: 'Zero-OS is a game changer.',
body: 'Running workloads directly on bare metal with Zero-OS eliminates so much complexity while increasing security and performance.',
author: 'Miguel Santos, DevOps Engineer',
title: 'Highly recommend for grassroots orgs.',
body: 'Even with limited staff, we launched a branded hub in 10 days. It is helping our community organize and train in ways we never imagined.',
author: 'Tania B., Founder of SpeakUp Brazil',
rating: 5,
},
{
title: 'Privacy by design.',
body: 'In a world of surveillance capitalism, ThreeFold offers true privacy and data sovereignty. This is what the internet should have been.',
author: 'Dr. Emma Johnson, Privacy Researcher',
title: 'Our community feels seen and heard.',
body: 'With EngageOS, we integrated storytelling, campaigns, and microdonations into a single, smooth experience.',
author: 'Nicolas R., Communications Lead at OurStories Foundation',
rating: 5,
},
{
title: 'Scaling globally.',
body: 'We\'ve deployed across 5 continents using ThreeFold. The global reach and local presence is unmatched.',
author: 'Robert Kim, Global Infrastructure Lead',
title: 'EngageOS scales with us.',
body: 'We piloted in 2 cities and now run campaigns across 7 countries—all on the same platform. It grows with our ambition.',
author: 'Delphine A., Global Lead at Future Farmers',
rating: 5,
},
{
title: 'Building the future together.',
body: 'ThreeFold isn\'t just technology - it\'s a movement. We\'re building the internet infrastructure that future generations deserve.',
author: 'Priya Patel, Community Builder',
title: 'This platform is our movement.',
body: 'Before EngageOS, our digital presence was scattered. Now we have a true home where our supporters connect and take action.',
author: 'Ravi P., Strategy Director at Clean Energy for All',
rating: 5,
},
]
@ -259,10 +259,10 @@ export function Reviews() {
id="reviews-title"
className="text-3xl font-medium tracking-tight text-white sm:text-center"
>
Builders and Farmers Love ThreeFold.
Everyone is changing their life with EngageOS.
</h2>
<p className="mt-2 lg:text-lg text-base text-gray-300 sm:text-center">
Join thousands of people building and powering the decentralized internet.
Thousands of people have doubled their net-worth in the last 30 days.
</p>
<ReviewGrid />
</Container>

View File

@ -1,53 +1,47 @@
import { useId } from 'react'
import {
CpuChipIcon,
ShieldCheckIcon,
GlobeAltIcon,
BoltIcon,
CloudIcon,
CubeIcon
} from '@heroicons/react/24/solid'
import { SquaresPlusIcon, BeakerIcon, CurrencyDollarIcon, AdjustmentsVerticalIcon, SparklesIcon, ServerStackIcon } from '@heroicons/react/24/solid'
import Image from 'next/image'
import AppScreenshot from '../images/app_screenshot.png'
import AppScreenshot from '@/images/app_screenshot.png'
import { Container } from '../components/Container'
import { Container } from '@/components/Container'
const features = [
{
name: 'Quantum-Safe Storage',
name: 'Engage Supporters with Community Tools.',
description:
'Revolutionary storage algorithm that disperses data across multiple nodes, making it quantum-safe and unhackable.',
icon: ShieldCheckIcon,
'Inspire action through built-in community tools like forums, comments, and stories that spark meaningful participation.',
icon: SquaresPlusIcon,
},
{
name: 'Zero-OS Operating System',
name: 'Train with AI-powered Learning Paths.',
description:
'Lightweight OS that runs directly on bare metal, eliminating virtualization overhead and maximizing efficiency.',
icon: CpuChipIcon,
'Deliver scalable training with AI-powered learning paths, auto-generated content, and multilingual support.',
icon: BeakerIcon,
},
{
name: 'Planetary Network',
name: 'Fundraise via Peer & Micro-Donations.',
description:
'End-to-end encrypted overlay network that finds the shortest path between any two points on the internet.',
icon: GlobeAltIcon,
'Empower supporters to fundraise through peer-to-peer campaigns, micro-donations, and integrated payment solutions.',
icon: CurrencyDollarIcon,
},
{
name: 'Energy Efficient',
name: 'Measure & Optimize Real-World Impact.',
description:
'Uses up to 10x less energy than traditional cloud infrastructure through intelligent resource optimization.',
icon: BoltIcon,
'Track real impact with dashboards that visualize KPIs, community activity, and field-level data.',
icon: AdjustmentsVerticalIcon,
},
{
name: 'Edge Computing Ready',
name: 'White-Label Everything.',
description:
'Deploy applications at the edge of the internet for ultra-low latency and improved user experience.',
icon: CloudIcon,
'Own your brand with a fully customizable platform—your name, your colors, your digital HQ.',
icon: SparklesIcon,
},
{
name: 'Autonomous Operation',
name: 'Robust & Secure Infrastructure.',
description:
'Self-healing infrastructure that operates autonomously without human intervention or central control.',
icon: CubeIcon,
'Host on your terms via decentralized, privacy-respecting infrastructure built for trust and security.',
icon: ServerStackIcon,
},
]
@ -55,21 +49,32 @@ export function SecondaryFeatures() {
return (
<section
id="secondary-features"
aria-label="ThreeFold Technology Features"
aria-label="Features for building a portfolio"
className="pt-24 pb-24"
style={{ backgroundColor: '#121212' }}
>
<Container>
<div className="mx-auto max-w-4xl sm:text-center">
<h2 className="lg:text-4xl text-3xl font-medium tracking-tight text-white">
Revolutionary Technology for a Decentralized Future
<h2 className="lg:text-4xl text-3xl font-medium tracking-tight text-gray-900">
The Platform Built for Purpose-driven Organizations
</h2>
<p className="mt-4 lg:text-lg text-base text-gray-300">
ThreeFold's groundbreaking technology stack enables true decentralization,
sustainability, and sovereignty in internet infrastructure.
<p className="mt-4 lg:text-lg text-base text-gray-600">
EngageOS is the first plug-and-play engagement infrastructure built for civil society. From Red Cross OS to Montessori OS, any org can launch their own digital headquartersno tech team needed.
</p>
</div>
<div className="relative overflow-hidden pt-16">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<Image
alt="App screenshot"
src={AppScreenshot}
width={2432}
height={1442}
className="mb-[-12%] rounded-xl shadow-2xl ring-1 ring-gray-900/10"
/>
<div aria-hidden="true" className="relative">
<div className="absolute -inset-x-20 bottom-0 bg-linear-to-t from-white pt-[7%]" />
</div>
</div>
</div>
<ul
role="list"
className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 text-sm sm:mt-20 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-3"
@ -77,13 +82,13 @@ export function SecondaryFeatures() {
{features.map((feature) => (
<li
key={feature.name}
className="rounded-2xl border border-gray-700 bg-gray-900 p-8"
className="rounded-2xl border border-gray-200 p-8"
>
<feature.icon className="h-8 w-8 text-cyan-400" />
<h3 className="mt-6 font-semibold text-white">
<feature.icon className="h-8 w-8" />
<h3 className="mt-6 font-semibold text-gray-900">
{feature.name}
</h3>
<p className="mt-2 text-gray-300">{feature.description}</p>
<p className="mt-2 text-gray-700">{feature.description}</p>
</li>
))}
</ul>

View File

@ -1,20 +1,20 @@
import Image from "next/image"
import Traction from '../images/tractions/tractions.jpg'
import logoForbes from '../images/logos/forbes.svg'
import logoTechcrunch from '../images/logos/techcrunch.svg'
import logoWired from '../images/logos/wired.svg'
import logoCnn from '../images/logos/cnn.svg'
import logoBbc from '../images/logos/bbc.svg'
import logoCbs from '../images/logos/cbs.svg'
import logoFastCompany from '../images/logos/fast-company.svg'
import logoHuffpost from '../images/logos/huffpost.svg'
import clsx from 'clsx'
import Traction from "@/images/tractions/tractions.jpg"
import logoForbes from "@/images/logos/forbes.svg"
import logoTechcrunch from "@/images/logos/techcrunch.svg"
import logoWired from "@/images/logos/wired.svg"
import logoCnn from "@/images/logos/cnn.svg"
import logoBbc from "@/images/logos/bbc.svg"
import logoCbs from "@/images/logos/cbs.svg"
import logoFastCompany from "@/images/logos/fast-company.svg"
import logoHuffpost from "@/images/logos/huffpost.svg"
import clsx from "clsx"
const stats = [
{ id: 1, name: 'Nodes deployed globally', value: '1,800+' },
{ id: 2, name: 'Countries with active farmers', value: '50+' },
{ id: 3, name: 'Total compute capacity (cores)', value: '100K+' },
{ id: 4, name: 'Total storage capacity (TB)', value: '500TB+' },
{ id: 1, name: 'Raised in sponsorship.', value: '7M+' },
{ id: 2, name: 'Views from educational partners.', value: '3B+' },
{ id: 3, name: 'Users deployed.', value: '300K' },
{ id: 4, name: 'Revenues paid to NGOs', value: '$70M' },
]
export default function Tractions() {
@ -56,12 +56,12 @@ export default function Tractions() {
{/* RIGHT TEXT BLOCK */}
<div className="px-6 lg:px-8">
<div className="mx-auto max-w-2xl lg:mr-0 lg:max-w-lg">
<h2 className="text-base/8 font-semibold text-white">Our Global Footprint</h2>
<h2 className="text-base/8 font-semibold text-white">Our track record</h2>
<p className="mt-2 text-3xl font-medium tracking-tight text-white sm:text-4xl">
Powering the Decentralized Internet Worldwide
Trusted by Changemakers worldwide
</p>
<p className="mt-6 lg:text-lg text-base text-gray-300">
ThreeFold is building the world's largest peer-to-peer internet infrastructure, with active nodes and farmers spanning the globe. Join our decentralized network.
EngageOS powers the digital headquarters for over 300,000 users across 50+ countries. From grassroots NGOs to global movements, our platform is built to scale impact, not just numbers.
</p>
<dl className="mt-16 grid max-w-xl grid-cols-1 gap-8 sm:mt-20 sm:grid-cols-2 xl:mt-16">
{stats.map((stat) => (