...
This commit is contained in:
parent
0310ecfb31
commit
acf41091cb
Binary file not shown.
|
Before Width: | Height: | Size: 1017 KiB |
84
src/app/(main)/build/page.tsx
Normal file
84
src/app/(main)/build/page.tsx
Normal file
@ -0,0 +1,84 @@
|
||||
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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
120
src/app/(main)/community/page.tsx
Normal file
120
src/app/(main)/community/page.tsx
Normal file
@ -0,0 +1,120 @@
|
||||
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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
66
src/app/(main)/farming/page.tsx
Normal file
66
src/app/(main)/farming/page.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
60
src/app/(main)/grid/page.tsx
Normal file
60
src/app/(main)/grid/page.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,20 +1,11 @@
|
||||
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'
|
||||
|
||||
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'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
@ -24,7 +15,9 @@ export default function Home() {
|
||||
<Dashboard />
|
||||
<FarmerPreview />
|
||||
<AppsPreview />
|
||||
|
||||
<Reviews />
|
||||
<Faqs />
|
||||
<Cta />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
61
src/app/(main)/technology/page.tsx
Normal file
61
src/app/(main)/technology/page.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -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,11 +12,12 @@ const inter = Inter({
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
template: '%s - EngageOS',
|
||||
default: 'EngageOS - Invest at the perfect time.',
|
||||
template: '%s - ThreeFold',
|
||||
default: 'ThreeFold - Decentralized Internet Infrastructure',
|
||||
},
|
||||
description:
|
||||
'By leveraging insights from our network of industry insiders, you’ll know exactly when to buy to maximize profit, and exactly when to sell to avoid painful losses.',
|
||||
'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',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
@ -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">
|
||||
Built Different. For a Change.
|
||||
</h2>
|
||||
The Benefits of Decentralized Infrastructure
|
||||
</h2>
|
||||
<p className="mt-6 lg:text-lg text-base text-gray-300">
|
||||
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.
|
||||
ThreeFold offers a fundamentally different approach to internet infrastructure, providing unparalleled benefits in terms of sovereignty, sustainability, and accessibility.
|
||||
</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"> Built for Civil Society</h3>
|
||||
<p className="mt-2 text-lg font-medium tracking-tight text-white">Purpose-First, Not Profit-First</p>
|
||||
<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>
|
||||
<p className="mt-2 max-w-lg text-sm/6 text-gray-300">
|
||||
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.
|
||||
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.
|
||||
</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">White-Label, Zero-Code</h3>
|
||||
<p className="mt-2 text-lg font-medium tracking-tight text-white">Your Brand, Your Movements</p>
|
||||
<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>
|
||||
<p className="mt-2 max-w-lg text-sm/6 text-gray-300">
|
||||
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.
|
||||
Our Zero-OS and optimized network design consume significantly less energy than traditional data centers, making ThreeFold a truly sustainable solution for the planet.
|
||||
</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">Sovereign & Ethical Infrastructure</h3>
|
||||
<p className="mt-2 text-lg font-medium tracking-tight text-white">Own Your Data. Always.</p>
|
||||
<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>
|
||||
<p className="mt-2 max-w-lg text-sm/6 text-gray-300">
|
||||
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.
|
||||
By distributing computing power globally, ThreeFold makes internet infrastructure accessible to underserved regions, fostering digital inclusion and empowering local communities.
|
||||
</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">Mutualized Model</h3>
|
||||
<p className="mt-2 text-lg font-medium tracking-tight text-white">Share Infrastructure. Multiply Impact.</p>
|
||||
<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>
|
||||
<p className="mt-2 max-w-lg text-sm/6 text-gray-300">
|
||||
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.
|
||||
ThreeFold's unique data distribution and encryption methods provide quantum-safe security, making your data virtually impossible to hack or lose, ensuring unparalleled resilience.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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">
|
||||
Scale Your Impact, Not Your Costs
|
||||
Join the Decentralized Internet Revolution
|
||||
</h2>
|
||||
<p className="mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-300">
|
||||
EngageOS gives purpose-driven teams the power to mobilize communities, grow movements, and fundraise faster—
|
||||
all from one unified platform.
|
||||
Be part of building a more sovereign, sustainable, and accessible internet.
|
||||
Start farming nodes or deploy your applications today.
|
||||
</p>
|
||||
<div className="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a
|
||||
href="/contact"
|
||||
href="https://threefold.io/farm"
|
||||
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"
|
||||
>
|
||||
Contact Us
|
||||
Start Farming
|
||||
</a>
|
||||
<a href="/demo" className="text-sm/6 font-semibold text-white">
|
||||
Book a Demo <span aria-hidden="true">→</span>
|
||||
<a href="https://threefold.io/build" className="text-sm/6 font-semibold text-white">
|
||||
Start Building <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -27,14 +27,13 @@ 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(#engage-gradient)" fillOpacity="0.7" />
|
||||
<circle r={512} cx={512} cy={512} fill="url(#threefold-gradient)" fillOpacity="0.7" />
|
||||
<defs>
|
||||
<radialGradient id="engage-gradient">
|
||||
<radialGradient id="threefold-gradient">
|
||||
<stop offset="0%" stopColor="#caa5f0" />
|
||||
<stop offset="50%" stopColor="#8f79f9" />
|
||||
<stop offset="100%" stopColor="#5d84e1" />
|
||||
</radialGradient>
|
||||
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
@ -1,80 +1,80 @@
|
||||
import { Container } from '@/components/Container'
|
||||
import { Container } from '../components/Container'
|
||||
|
||||
const faqs = [
|
||||
[
|
||||
{
|
||||
question: 'What is EngageOS?',
|
||||
question: 'What is ThreeFold?',
|
||||
answer:
|
||||
'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.',
|
||||
'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.',
|
||||
},
|
||||
{
|
||||
question: 'Do I need a tech team to use EngageOS?',
|
||||
question: 'How is ThreeFold different from traditional cloud?',
|
||||
answer:
|
||||
'No. EngageOS is fully plug-and-play. It’s designed so any organization—regardless of technical capacity—can deploy and customize their own platform without writing a line of code.',
|
||||
'Unlike centralized cloud providers, ThreeFold is fully decentralized, uses up to 10x less energy, provides quantum-safe security, and gives you complete data sovereignty.',
|
||||
},
|
||||
{
|
||||
question: 'Can we fully customize the platform’s look and feel?',
|
||||
question: 'What can I build on ThreeFold?',
|
||||
answer:
|
||||
'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.',
|
||||
'Anything that runs on Linux can run on ThreeFold - from simple websites to complex AI workloads, blockchain nodes, IoT applications, and enterprise solutions.',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
question: 'What kinds of organizations use EngageOS?',
|
||||
question: 'How do I become a ThreeFold farmer?',
|
||||
answer:
|
||||
'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.',
|
||||
'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.',
|
||||
},
|
||||
{
|
||||
question: 'Is EngageOS multilingual and accessible offline?',
|
||||
question: 'What are ThreeFold Tokens (TFT)?',
|
||||
answer:
|
||||
'Yes. The platform supports multilingual content and offline-friendly delivery—ideal for reaching underserved communities with limited connectivity.',
|
||||
'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.',
|
||||
},
|
||||
{
|
||||
question: 'Can we use EngageOS for fundraising?',
|
||||
question: 'Is ThreeFold secure?',
|
||||
answer:
|
||||
'Yes. EngageOS includes built-in fundraising tools, including peer-to-peer, micro-donation, and pay-it-forward models—plus full donor engagement capabilities.',
|
||||
'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.',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
question: 'How is EngageOS different from other platforms?',
|
||||
question: 'How much does it cost to use ThreeFold?',
|
||||
answer:
|
||||
'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.',
|
||||
'Pricing is transparent and competitive with traditional cloud providers, but with added benefits of decentralization and data sovereignty. Check our calculator for specific pricing.',
|
||||
},
|
||||
{
|
||||
question: 'What is the pricing model?',
|
||||
question: 'Where is ThreeFold available?',
|
||||
answer:
|
||||
'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.',
|
||||
'ThreeFold operates globally with nodes in over 50 countries. The decentralized nature means you can deploy close to your users anywhere in the world.',
|
||||
},
|
||||
{
|
||||
question: 'How do we get started?',
|
||||
question: 'How do I get started?',
|
||||
answer:
|
||||
'Reach out to our team for a demo or strategy session. We’ll walk you through the options and help design the best deployment path for your mission.',
|
||||
'Visit our Grid portal to start building, or check out our farming guide to contribute capacity. Our community is always ready to help newcomers.',
|
||||
},
|
||||
],
|
||||
]
|
||||
|
||||
|
||||
export function Faqs() {
|
||||
return (
|
||||
<section
|
||||
id="faqs"
|
||||
aria-labelledby="faqs-title"
|
||||
className="border-t border-gray-200 py-20 sm:py-32"
|
||||
className="border-t border-gray-800 py-20 sm:py-32"
|
||||
style={{ backgroundColor: '#121212' }}
|
||||
>
|
||||
<Container>
|
||||
<div className="mx-auto max-w-2xl lg:mx-0">
|
||||
<h2
|
||||
id="faqs-title"
|
||||
className="text-3xl font-medium tracking-tight text-gray-900"
|
||||
className="text-3xl font-medium tracking-tight text-white"
|
||||
>
|
||||
Frequently asked questions
|
||||
</h2>
|
||||
<p className="mt-2 lg:text-lg text-base text-gray-600">
|
||||
<p className="mt-2 lg:text-lg text-base text-gray-300">
|
||||
If you have anything else you want to ask,{' '}
|
||||
<a
|
||||
href="mailto:info@example.com"
|
||||
className="text-gray-900 underline"
|
||||
href="mailto:info@threefold.io"
|
||||
className="text-cyan-400 hover:text-cyan-300 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-gray-900">
|
||||
<h3 className="lg:text-lg text-base/6 font-semibold text-white">
|
||||
{faq.question}
|
||||
</h3>
|
||||
<p className="mt-4 text-sm text-gray-700">{faq.answer}</p>
|
||||
<p className="mt-4 text-sm text-gray-300">{faq.answer}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
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}>
|
||||
@ -28,8 +27,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">EngageOS</p>
|
||||
<p className="mt-1 text-sm">Empowering Purpose-Driven Organizations.</p>
|
||||
<p className="text-base font-semibold">ThreeFold</p>
|
||||
<p className="mt-1 text-sm">Building the Decentralized Internet.</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="mt-11 flex gap-8">
|
||||
@ -53,7 +52,7 @@ export function Footer() {
|
||||
</Button>
|
||||
</form>
|
||||
<p className="mt-6 text-sm text-gray-400 md:mt-0">
|
||||
© Copyright {new Date().getFullYear()}. All rights reserved.
|
||||
© Copyright {new Date().getFullYear()} ThreeFold. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
@ -9,10 +9,12 @@ 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'
|
||||
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
|
||||
|
||||
function MenuIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
@ -108,22 +110,27 @@ 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="/#features">
|
||||
Features
|
||||
<MobileNavLink href="/technology">
|
||||
Technology
|
||||
</MobileNavLink>
|
||||
<MobileNavLink href="/#reviews">
|
||||
Reviews
|
||||
<MobileNavLink href="/grid">
|
||||
Grid Status
|
||||
</MobileNavLink>
|
||||
<MobileNavLink href="/#pricing">
|
||||
Pricing
|
||||
<MobileNavLink href="/farming">
|
||||
Farming
|
||||
</MobileNavLink>
|
||||
<MobileNavLink href="/build">
|
||||
Build
|
||||
</MobileNavLink>
|
||||
<MobileNavLink href="/community">
|
||||
Community
|
||||
</MobileNavLink>
|
||||
<MobileNavLink href="/#faqs">FAQs</MobileNavLink>
|
||||
</div>
|
||||
<div className="mt-8 flex flex-col gap-4">
|
||||
<Button href="/login" variant="outline">
|
||||
Log in
|
||||
<Button href="https://threefold.io/build" variant="outline">
|
||||
Start Building
|
||||
</Button>
|
||||
<Button href="#">Download the app</Button>
|
||||
<Button href="https://threefold.io/farm">Start Farming</Button>
|
||||
</div>
|
||||
</PopoverPanel>
|
||||
</>
|
||||
@ -133,10 +140,10 @@ export function Header() {
|
||||
)}
|
||||
</Popover>
|
||||
<div className="flex items-center gap-6 max-lg:hidden">
|
||||
<Button href="/login" variant="outline">
|
||||
Log in
|
||||
<Button href="https://threefold.io/build" variant="outline">
|
||||
Start Building
|
||||
</Button>
|
||||
<Button href="#">Download</Button>
|
||||
<Button href="https://threefold.io/farm">Start Farming</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
@ -2,15 +2,8 @@
|
||||
|
||||
import Image from 'next/image'
|
||||
import { Button } from './Button'
|
||||
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: '#' },
|
||||
]
|
||||
import Engage from '../images/engage.svg'
|
||||
import { gradientText, gradientDark } from '../components/Gradients'
|
||||
|
||||
export default function HeroHome() {
|
||||
return (
|
||||
@ -19,26 +12,26 @@ 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">
|
||||
Empowering Purpose-Driven Organizations.
|
||||
Building the Internet of Tomorrow
|
||||
</h1>
|
||||
<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 fundraise—at a fraction of the cost.
|
||||
<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>
|
||||
<div className="mt-12 flex items-center justify-center gap-x-6 relative z-10">
|
||||
<Button color="gradient">Get in Touch</Button>
|
||||
<Button
|
||||
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
||||
variant="outline"
|
||||
>
|
||||
<span className="ml-2.5">Book a Demo</span>
|
||||
</Button>
|
||||
<Button color="gradient" href="https://threefold.io/build">Start Building</Button>
|
||||
<Button
|
||||
href="https://threefold.io/farm"
|
||||
variant="outline"
|
||||
>
|
||||
<span className="ml-2.5">Start Farming</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="" unoptimized />
|
||||
<Image src={Engage} alt="ThreeFold Network" unoptimized />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -9,10 +9,11 @@ export function NavLinks() {
|
||||
let timeoutRef = useRef<number | null>(null)
|
||||
|
||||
return [
|
||||
['Features', '/#features'],
|
||||
['Reviews', '/#reviews'],
|
||||
['Pricing', '/#pricing'],
|
||||
['FAQs', '/#faqs'],
|
||||
['Technology', '/technology'],
|
||||
['Grid Status', '/grid'],
|
||||
['Farming', '/farming'],
|
||||
['Build', '/build'],
|
||||
['Community', '/community'],
|
||||
].map(([label, href], index) => (
|
||||
<Link
|
||||
key={label}
|
||||
|
||||
@ -4,217 +4,75 @@ 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: 'Starter',
|
||||
name: 'Explorer',
|
||||
featured: false,
|
||||
price: { Monthly: '$0', Annually: '$0' },
|
||||
price: { Monthly: 'Free', Annually: 'Free' },
|
||||
description:
|
||||
'Perfect for small teams and early-stage initiatives getting started with community engagement.',
|
||||
'Perfect for developers getting started with decentralized infrastructure.',
|
||||
button: {
|
||||
label: 'Launch for Free',
|
||||
href: '/register',
|
||||
label: 'Start Building',
|
||||
href: 'https://threefold.io/build',
|
||||
},
|
||||
features: [
|
||||
'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',
|
||||
'Access to TF Grid',
|
||||
'Deploy basic workloads',
|
||||
'Community support',
|
||||
'Documentation & tutorials',
|
||||
'Basic monitoring',
|
||||
],
|
||||
logomarkClassName: 'fill-gray-300',
|
||||
},
|
||||
{
|
||||
name: 'Impact',
|
||||
name: 'Builder',
|
||||
featured: true,
|
||||
price: { Monthly: '$89', Annually: '$890' },
|
||||
price: { Monthly: '$50', Annually: '$500' },
|
||||
description:
|
||||
'For growing organizations ready to scale impact, train supporters, and fundraise with confidence.',
|
||||
'For serious developers and organizations deploying production workloads.',
|
||||
button: {
|
||||
label: 'Get Started',
|
||||
href: '/register',
|
||||
label: 'Start Building',
|
||||
href: 'https://threefold.io/build',
|
||||
},
|
||||
features: [
|
||||
'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 grid access',
|
||||
'Advanced compute & storage',
|
||||
'Load balancing & scaling',
|
||||
'Priority support',
|
||||
'Advanced monitoring & analytics',
|
||||
'Custom domain support',
|
||||
'API access',
|
||||
],
|
||||
logomarkClassName: 'fill-cyan-500',
|
||||
},
|
||||
{
|
||||
name: 'Sovereign',
|
||||
name: 'Enterprise',
|
||||
featured: false,
|
||||
price: { Monthly: 'Custom', Annually: 'Custom' },
|
||||
description:
|
||||
'Best for large-scale networks and institutions with custom needs, privacy requirements, or regional infrastructure.',
|
||||
'For large organizations needing dedicated infrastructure and custom solutions.',
|
||||
button: {
|
||||
label: 'Contact Sales',
|
||||
href: '/contact',
|
||||
},
|
||||
features: [
|
||||
'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',
|
||||
'Dedicated capacity allocation',
|
||||
'Custom SLA agreements',
|
||||
'Private network deployment',
|
||||
'White-label solutions',
|
||||
'24/7 enterprise support',
|
||||
'Dedicated account manager',
|
||||
'Custom integrations',
|
||||
'Compliance & security audits',
|
||||
],
|
||||
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',
|
||||
@ -233,65 +91,15 @@ export function Pricing() {
|
||||
id="pricing-title"
|
||||
className="text-3xl font-medium tracking-tight text-white"
|
||||
>
|
||||
Flat pricing, no management fees.
|
||||
Transparent pricing for everyone.
|
||||
</h2>
|
||||
<p className="mt-2 lg:text-lg text-base text-gray-300">
|
||||
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.
|
||||
Whether you're an individual developer or a large enterprise,
|
||||
ThreeFold offers fair and transparent pricing for decentralized infrastructure.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
{/* Rest of component remains the same */}
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
|
||||
@ -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: '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',
|
||||
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',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
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',
|
||||
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',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
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',
|
||||
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',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
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',
|
||||
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',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
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',
|
||||
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',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
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',
|
||||
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',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
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',
|
||||
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',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
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',
|
||||
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',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
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',
|
||||
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',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
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',
|
||||
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',
|
||||
rating: 5,
|
||||
},
|
||||
]
|
||||
@ -259,10 +259,10 @@ export function Reviews() {
|
||||
id="reviews-title"
|
||||
className="text-3xl font-medium tracking-tight text-white sm:text-center"
|
||||
>
|
||||
Everyone is changing their life with EngageOS.
|
||||
Builders and Farmers Love ThreeFold.
|
||||
</h2>
|
||||
<p className="mt-2 lg:text-lg text-base text-gray-300 sm:text-center">
|
||||
Thousands of people have doubled their net-worth in the last 30 days.
|
||||
Join thousands of people building and powering the decentralized internet.
|
||||
</p>
|
||||
<ReviewGrid />
|
||||
</Container>
|
||||
|
||||
@ -1,47 +1,53 @@
|
||||
import { useId } from 'react'
|
||||
import { SquaresPlusIcon, BeakerIcon, CurrencyDollarIcon, AdjustmentsVerticalIcon, SparklesIcon, ServerStackIcon } from '@heroicons/react/24/solid'
|
||||
import {
|
||||
CpuChipIcon,
|
||||
ShieldCheckIcon,
|
||||
GlobeAltIcon,
|
||||
BoltIcon,
|
||||
CloudIcon,
|
||||
CubeIcon
|
||||
} 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: 'Engage Supporters with Community Tools.',
|
||||
name: 'Quantum-Safe Storage',
|
||||
description:
|
||||
'Inspire action through built-in community tools like forums, comments, and stories that spark meaningful participation.',
|
||||
icon: SquaresPlusIcon,
|
||||
'Revolutionary storage algorithm that disperses data across multiple nodes, making it quantum-safe and unhackable.',
|
||||
icon: ShieldCheckIcon,
|
||||
},
|
||||
{
|
||||
name: 'Train with AI-powered Learning Paths.',
|
||||
name: 'Zero-OS Operating System',
|
||||
description:
|
||||
'Deliver scalable training with AI-powered learning paths, auto-generated content, and multilingual support.',
|
||||
icon: BeakerIcon,
|
||||
'Lightweight OS that runs directly on bare metal, eliminating virtualization overhead and maximizing efficiency.',
|
||||
icon: CpuChipIcon,
|
||||
},
|
||||
{
|
||||
name: 'Fundraise via Peer & Micro-Donations.',
|
||||
name: 'Planetary Network',
|
||||
description:
|
||||
'Empower supporters to fundraise through peer-to-peer campaigns, micro-donations, and integrated payment solutions.',
|
||||
icon: CurrencyDollarIcon,
|
||||
'End-to-end encrypted overlay network that finds the shortest path between any two points on the internet.',
|
||||
icon: GlobeAltIcon,
|
||||
},
|
||||
{
|
||||
name: 'Measure & Optimize Real-World Impact.',
|
||||
name: 'Energy Efficient',
|
||||
description:
|
||||
'Track real impact with dashboards that visualize KPIs, community activity, and field-level data.',
|
||||
icon: AdjustmentsVerticalIcon,
|
||||
'Uses up to 10x less energy than traditional cloud infrastructure through intelligent resource optimization.',
|
||||
icon: BoltIcon,
|
||||
},
|
||||
{
|
||||
name: 'White-Label Everything.',
|
||||
name: 'Edge Computing Ready',
|
||||
description:
|
||||
'Own your brand with a fully customizable platform—your name, your colors, your digital HQ.',
|
||||
icon: SparklesIcon,
|
||||
'Deploy applications at the edge of the internet for ultra-low latency and improved user experience.',
|
||||
icon: CloudIcon,
|
||||
},
|
||||
{
|
||||
name: 'Robust & Secure Infrastructure.',
|
||||
name: 'Autonomous Operation',
|
||||
description:
|
||||
'Host on your terms via decentralized, privacy-respecting infrastructure built for trust and security.',
|
||||
icon: ServerStackIcon,
|
||||
'Self-healing infrastructure that operates autonomously without human intervention or central control.',
|
||||
icon: CubeIcon,
|
||||
},
|
||||
]
|
||||
|
||||
@ -49,32 +55,21 @@ export function SecondaryFeatures() {
|
||||
return (
|
||||
<section
|
||||
id="secondary-features"
|
||||
aria-label="Features for building a portfolio"
|
||||
aria-label="ThreeFold Technology Features"
|
||||
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-gray-900">
|
||||
The Platform Built for Purpose-driven Organizations
|
||||
<h2 className="lg:text-4xl text-3xl font-medium tracking-tight text-white">
|
||||
Revolutionary Technology for a Decentralized Future
|
||||
</h2>
|
||||
<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 headquarters—no tech team needed.
|
||||
<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>
|
||||
</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"
|
||||
@ -82,13 +77,13 @@ export function SecondaryFeatures() {
|
||||
{features.map((feature) => (
|
||||
<li
|
||||
key={feature.name}
|
||||
className="rounded-2xl border border-gray-200 p-8"
|
||||
className="rounded-2xl border border-gray-700 bg-gray-900 p-8"
|
||||
>
|
||||
<feature.icon className="h-8 w-8" />
|
||||
<h3 className="mt-6 font-semibold text-gray-900">
|
||||
<feature.icon className="h-8 w-8 text-cyan-400" />
|
||||
<h3 className="mt-6 font-semibold text-white">
|
||||
{feature.name}
|
||||
</h3>
|
||||
<p className="mt-2 text-gray-700">{feature.description}</p>
|
||||
<p className="mt-2 text-gray-300">{feature.description}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@ -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: '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' },
|
||||
{ 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+' },
|
||||
]
|
||||
|
||||
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 track record</h2>
|
||||
<h2 className="text-base/8 font-semibold text-white">Our Global Footprint</h2>
|
||||
<p className="mt-2 text-3xl font-medium tracking-tight text-white sm:text-4xl">
|
||||
Trusted by Changemakers worldwide
|
||||
Powering the Decentralized Internet Worldwide
|
||||
</p>
|
||||
<p className="mt-6 lg:text-lg text-base text-gray-300">
|
||||
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.
|
||||
ThreeFold is building the world's largest peer-to-peer internet infrastructure, with active nodes and farmers spanning the globe. Join our decentralized network.
|
||||
</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) => (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user