ourworld_web/www_threefold_2025
23
0
Fork 0
forked from ourworld_web/www_engage_os
Code Pull Requests Activity

ALL

Browse Source
This commit is contained in:
sasha-astiadi
2025-09-08 15:27:33 +02:00
parent 4bea627e6d
commit a69f35c9a7
21 changed files with 254 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/(main)/page.tsx
View File

@@ -1,5 +1,4 @@
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'
@@ -16,6 +15,8 @@ import { AppsPreview } from '@/components/Apps'
import { FarmerPreview } from '@/components/Farmer'
import { TfDashboard } from '@/components/TfDashboard'
import { ProductsPreview } from '@/components/Products'
import { CallTo } from '@/components/CallTo'
import { Faqss } from '@/components/Faqs'
export default function Home() {
@@ -28,7 +29,8 @@ export default function Home() {
<TfDashboard />
<AppsPreview />
<ProductsPreview />
<CallTo />
<Faqss />
</>
)
}

12
src/app/layout.tsx
View File

@@ -12,11 +12,11 @@ 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 by everyone, for everyone.',
},
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 a fully operational, decentralized internet infrastructure – deployed locally, scalable globally, and owned and powered by the people.',
}
export default function RootLayout({
@@ -25,8 +25,10 @@ export default function RootLayout({
children: React.ReactNode
}) {
return (
<html lang="en" className={clsx('antialiased', inter.variable)} style={{ backgroundColor: '#121212' }}>
<body style={{ backgroundColor: '#121212', color: '#ffffff' }}>{children}</body>
<html lang="en" className={clsx('antialiased', inter.variable)} suppressHydrationWarning>
<body className="bg-[#121212] text-white" suppressHydrationWarning>
{children}
</body>
</html>
)
}

26
src/components/Button.tsx
View File

@@ -4,6 +4,8 @@ import clsx from 'clsx'
const baseStyles = {
solid:
'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold transition-colors',
glass:
'rounded-md bg-white/10 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-white/15',
outline:
'inline-flex justify-center rounded-lg border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-sm transition-colors',
}
@@ -11,7 +13,7 @@ const baseStyles = {
const variantStyles = {
solid: {
gradient:
'bg-gradient-to-r from-[#caa5f0] via-[#8f79f9] to-[#3c82f5] text-white hover:brightness-110 active:brightness-95',
'btn-new-gradient',
cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors',
white:
'bg-white text-black hover:bg-white/90 active:bg-white/90 active:text-gray-400',
@@ -27,6 +29,9 @@ type ButtonProps = (
variant?: 'solid'
color?: keyof typeof variantStyles.solid
}
| {
variant: 'glass'
}
| {
variant: 'outline'
color?: keyof typeof variantStyles.outline
@@ -41,15 +46,22 @@ type ButtonProps = (
export function Button({ className, ...props }: ButtonProps) {
props.variant ??= 'solid'
props.color ??= 'gray'
if (props.variant !== 'glass') {
props.color ??= 'gray'
}
let variantClass: string | undefined = undefined
if (props.variant === 'outline' && props.color) {
variantClass = variantStyles.outline[props.color]
} else if (props.variant === 'solid' && props.color) {
variantClass = variantStyles.solid[props.color]
}
className = clsx(
baseStyles[props.variant],
props.variant === 'outline'
? variantStyles.outline[props.color]
: props.variant === 'solid'
? variantStyles.solid[props.color]
: undefined,
variantClass,
className,
)

47
src/components/CallTo.tsx Normal file
View File

@@ -0,0 +1,47 @@
export function CallTo() {
return (
<div className="bg-transparent">
<div className="mx-auto max-w-7xl py-24 px-6 lg:px-4">
<div className="relative isolate overflow-hidden bg-stat-gradient py-16 text-center after:pointer-events-none after:absolute after:inset-0 sm:rounded-3xl sm:px-16">
<div className="mx-auto max-w-2xl lg:max-w-2xl">
<h2 className="text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
More Resilient, More Powerful, More Diverse With You
</h2>
<p className="mx-auto mt-6 max-w-xl text-sm font-light text-pretty text-white lg:text-base">
Unlike the corporate internet, where users are the product, in the new internet, participants are the owners and beneficiaries.
</p>
<p className="mx-auto mt-6 max-w-xl text-sm font-light text-pretty text-white lg:text-base">
By participating, you're not just using the technology, you're also helping to build a digital world that protects privacy, promotes fairness, and returns control to the people.
</p>
<div className="mt-10 flex items-center justify-center gap-x-6">
<a
href="#"
className="rounded-md bg-white/10 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-white/15"
>
{' '}
Get started{' '}
</a>
<a href="#" className="text-sm/6 font-semibold text-white">
Learn more
<span aria-hidden="true">→</span>
</a>
</div>
<svg
viewBox="0 0 1024 1024"
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(#827591b1-ce8c-4110-b064-7cb85a0b1217)" fillOpacity="0.7" />
<defs>
<radialGradient id="827591b1-ce8c-4110-b064-7cb85a0b1217">
<stop stopColor="#fff4f8" />
<stop offset={1} stopColor="#97979d" />
</radialGradient>
</defs>
</svg>
</div>
</div>
</div>
</div>
)
}

10
src/components/Dashboard.tsx
View File

@@ -6,7 +6,7 @@ import { Button } from "./Button";
export function Dashboard() {
return (
<div className="py-24 bg-transparent">
<div className="py-24 bg-transparent relative">
<div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
{/* Column 1: Title & NODES */}
@@ -87,23 +87,23 @@ function StatCard({
}) {
return (
<div
className={`relative flex flex-col overflow-hidden rounded-2xl bg-stat-gradient p-8 shadow-sm backdrop-blur transition-all duration-300 ease-out hover:scale-105 ${className}`}
className={`relative flex flex-col overflow-hidden rounded-2xl bg-stat-gradient p-8 transition-all duration-300 ease-out hover:scale-105 ${className}`}
style={{
filter: 'brightness(1)',
}}
onMouseEnter={(e) => {
e.currentTarget.style.filter = 'brightness(0.8) drop-shadow(0 0 20px rgba(156, 163, 175, 0.5))';
e.currentTarget.style.filter = 'brightness(0.8)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.filter = 'brightness(1)';
}}
>
<h3 className="text-lg font-semibold text-cyan-400">{label}</h3>
<h3 className="text-lg font-semibold text-gradient-neutral-vertical">{label}</h3>
<p className="mt-2 text-sm font-light text-pretty text-white lg:text-base">
{description}
</p>
<div className="mt-8 flex items-center space-x-3">
<span className="text-cyan-400 text-3xl">•</span>
<span className="text-gradient-neutral-vertical text-3xl">•</span>
<div className="text-5xl font-semibold tracking-tight text-white tabular-nums">
{value}
{unit && (

63
src/components/Faq.tsx Normal file
View File

@@ -0,0 +1,63 @@
const faqs = [
{
question: 'Is this a separate new Internet?',
answer: 'ThreeFold creates a decentralized internet infrastructure that can operate independently, offering alternatives to traditional centralized systems while maintaining compatibility with existing internet protocols.',
},
{
question: 'Why do we need a new Internet?',
answer: 'The current internet is increasingly centralized and controlled by few entities. ThreeFold provides a more democratic, private, and secure alternative where users and developers have full control over their data and applications.',
},
{
question: 'How can I participate?',
answer: 'You can participate by becoming a farmer, a user, a partner or by developing apps. Provide capacity to the ThreeFold Grid, Use capacity, build solutions, develop applications, and many more.',
},
{
question: 'How can I get V4 nodes?',
answer: 'Our partners are selling V4 nodes with a new reward scheme and ready to grow to millions of nodes. Click here to get V4 nodes.',
},
{
question: 'What can I do with the ThreeFold Grid?',
answer: 'ThreeFold grid can be used to host any web2, web3 and future workload. For more details see our docs.',
},
{
question: 'How secure and private is my data?',
answer: 'ThreeFold is designed to be secure and private by default. We use end-to-end encryption to protect your data and ensure that only you have access to your data.',
},
{
question: 'Who should use the ThreeFold Grid?',
answer: 'Individuals, businesses, and organizations who want to be autonomous and have full control over their data and applications. Security is a very big problem today, Technology as used by ThreeFold has the potential to resolve this if used properly. We are building a channel of solution providers and integrators who want to build on top of ThreeFold.',
},
]
export function Faq () {
return (
<div className="bg-transparent">
<div className="mx-auto max-w-7xl px-6 py-24 sm:pt-32 lg:px-8 lg:py-40">
<div className="lg:grid lg:grid-cols-12 lg:gap-8">
<div className="lg:col-span-5">
<h2 className="text-3xl font-semibold tracking-tight text-pretty text-white sm:text-4xl">
Frequently asked questions
</h2>
<p className="mt-4 text-base/7 text-pretty text-gray-400">
Can’t find the answer you’re looking for? Reach out to our{' '}
<a href="#" className="font-semibold text-indigo-400 hover:text-indigo-300">
customer support
</a>{' '}
team.
</p>
</div>
<div className="mt-10 lg:col-span-7 lg:mt-0">
<dl className="space-y-10">
{faqs.map((faq) => (
<div key={faq.question}>
<dt className="text-base/7 font-semibold text-white">{faq.question}</dt>
<dd className="mt-2 text-base/7 text-gray-400">{faq.answer}</dd>
</div>
))}
</dl>
</div>
</div>
</div>
</div>
)
}

8
src/components/Faqs.tsx
View File

@@ -55,7 +55,7 @@ const faqs = [
]
export function Faqs() {
export function Faqss () {
return (
<section
id="faqs"
@@ -66,14 +66,14 @@ export function Faqs() {
<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-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl"
>
Frequently asked questions
</h2>
<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@example.com"
href="mailto:info@threefold.io"
className="text-gray-900 underline"
>
reach out to us
@@ -83,7 +83,7 @@ export function Faqs() {
</div>
<ul
role="list"
className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 sm:mt-20 lg:max-w-none lg:grid-cols-3"
className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-8 lg:max-w-none lg:grid-cols-3"
>
{faqs.map((column, columnIndex) => (
<li key={columnIndex}>

4
src/components/Farmer.tsx
View File

@@ -47,7 +47,7 @@ export function FarmerPreview() {
return (
<section className="w-full bg-transparent px-4 py-8 sm:px-6 mt-12 sm:pb-12 lg:px-8 relative">
{/* Gradient Blob Component */}
<div className="absolute w-[400px] h-[200px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-40 rounded-full blur-[150px] bottom-[200px] left-[-150px] z-0" />
<div className="absolute w-[400px] h-[200px] bg-gradient-to-br from-[#535353] to-[#7e7e7e] opacity-60 rounded-full blur-[150px] bottom-[200px] left-[-150px] z-0" />
<div className="absolute w-[200px] h-[100px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-50 rounded-full blur-[150px] top-[200px] right-[-150px] z-0" />
<div className="mx-auto max-w-7xl">
<div className="lg:flex lg:items-center lg:justify-between lg:px-8">
@@ -70,7 +70,7 @@ export function FarmerPreview() {
{posts.map((post) => (
<article
key={post.id}
className="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-state-gradient px-8 lg:pt-12"
className="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-stat-gradient px-8 lg:pt-12"
>
<div className="absolute inset-0 -z-10 bg-linear-to-t from-gray-200 via-gray-300/10"
style={{

6
src/components/Footer.tsx
View File

@@ -29,10 +29,10 @@ export function Footer() {
<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">Empowering Purpose-Driven Organizations.</p>
<p className="mt-1 text-sm">Decentralized internet infrastructure by everyone, for everyone.</p>
</div>
</div>
<nav className="mt-11 flex gap-8">
<nav className="mt-8 flex gap-8">
<NavLinks />
</nav>
</div>
@@ -47,7 +47,7 @@ export function Footer() {
required
className="w-60 min-w-0 shrink"
/>
<Button type="submit" color="cyan" className="ml-4 flex-none">
<Button type="submit" variant='glass' className="ml-4 flex-none">
<span className="hidden lg:inline">Join our newsletter</span>
<span className="lg:hidden">Join newsletter</span>
</Button>

2
src/components/Header.tsx
View File

@@ -136,7 +136,7 @@ export function Header() {
<Button href="/login" variant="outline">
Info
</Button>
<Button href="#" variant="solid" color="white">
<Button href="#" variant="glass">
Participate
</Button>
</div>

34
src/components/Products.tsx
View File

@@ -59,9 +59,7 @@ export function ProductsPreview() {
return (
<section className="w-full bg-transparent px-4 py-8 sm:px-6 mt-12 sm:pb-12 lg:px-6 relative">
{/* Gradient Blob Component */}
<div className="absolute w-[400px] h-[200px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-40 rounded-full blur-[150px] bottom-[200px] left-[-150px] z-0" />
<div className="absolute w-[200px] h-[100px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-50 rounded-full blur-[150px] top-[200px] right-[-150px] z-0" />
<div className="mx-auto max-w-7xl">
<div className="lg:flex lg:items-center lg:justify-between lg:px-8">
{/* Left Column - Text (1/3 width) */}
@@ -82,26 +80,36 @@ export function ProductsPreview() {
</Button>
</div>
</div>
<div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
<div className="mt-10 grid grid-cols-1 gap-6 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
{products.map(product => (
<div key={product.id} className={`relative ${product.colSpan}`}>
<div className={`absolute inset-0 rounded-lg bg-gray-100 ${product.bgRounded}`} />
<div className={`relative flex h-full flex-col lg:flex-row overflow-hidden ${product.rounded}`}>
<div className={`flex justify-center items-center h-15 ${product.id > 2 ? 'lg:h-48' : 'lg:h-40'} lg:w-1/4 p-2`}>
<div
key={product.id}
className={`rounded-2xl bg-stat-gradient p-8 shadow-sm backdrop-blur transition-all duration-300 ease-out hover:scale-105 ${product.colSpan}`}
style={{
filter: 'brightness(1)',
}}
onMouseEnter={(e) => {
e.currentTarget.style.filter = 'brightness(0.8) drop-shadow(0 0 20px rgba(156, 163, 175, 0.5))';
}}
onMouseLeave={(e) => {
e.currentTarget.style.filter = 'brightness(1)';
}}
>
<div className="flex h-full flex-col lg:flex-row items-center lg:items-start gap-6">
<div className="flex-shrink-0">
<img
alt={`${product.title} screenshot`}
src={product.img}
className="w-full lg:w-full h-full object-contain p-2"
className="w-20 h-20 lg:w-24 lg:h-24 object-contain"
/>
</div>
<div className="pl-2 pr-6 flex-1 flex flex-col justify-center">
<p className="lg:mt-0 mt-4 text-lg lg:text-xl font-medium tracking-tight text-white">{product.title}</p>
<p className="mt-2 max-w-lg text-sm/6 leading-tight text-gray-600">
<div className="flex-1 text-center lg:text-left">
<h3 className="text-xl lg:text-2xl font-semibold text-white mb-3">{product.title}</h3>
<p className="text-gray-700 text-sm font-light text-pretty lg:text-base">
{product.desc}
</p>
</div>
</div>
<div className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-white/15 ${product.bgRounded}`} />
</div>
))}
</div>

2
src/components/Spotlight.tsx
View File

@@ -38,7 +38,7 @@ export function SpotlightPreview() {
ThreeFold is a fully operational, decentralized internet infrastructure – deployed locally, scalable globally, and owned and powered by the people.
</p>
<div className="mt-8 flex flex-col sm:flex-row justify-center gap-4">
<Button href="/login" variant="outline" color="gray">
<Button href="/login" variant="glass">
Start Building
</Button>
<Button href="#" variant="outline" color="gray">

2
src/components/StackSection.tsx
View File

@@ -20,7 +20,7 @@ export function StackSectionPreview() {
<p className="mt-4 lg:mt-6 text-sm font-light text-pretty text-white lg:text-base">
We have built a foundational platform that runs directly on bare metal, offering a scalable solution focused on the essential building blocks of the Internet and Cloud: compute, data, and network.
</p>
<Button className="mt-8" variant="outline" href="https://threefold.io/build" >Discover How It Works →</Button>
<Button className="mt-12" variant="outline" href="https://threefold.io/build" >Discover How It Works →</Button>
</div>
{/* Right Column - Stacked Cubes (2/3 width) */}

4
src/components/TfDashboard.tsx
View File

@@ -26,7 +26,7 @@ export function TfDashboard() {
return (
<div className="bg-transparent pt-24 pb-0">
<div className="mx-auto max-w-7xl px-4 lg:px-2">
<div className="relative isolate overflow-hidden bg-transparent px-6 py-12 after:pointer-events-none after:absolute after:inset-0 after:inset-ring after:inset-ring-white/10 sm:rounded-3xl sm:px-10 sm:py-24 after:sm:rounded-3xl lg:py-24 xl:px-24">
<div className="relative isolate overflow-hidden bg-stat-gradient px-6 py-12 after:pointer-events-none after:absolute lg:rounded-3xl sm:px-10 sm:py-24 after:lg:rounded-3xl lg:py-24 xl:px-24">
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-center lg:gap-y-0">
<div className="lg:row-start-2 lg:max-w-md">
<motion.h2
@@ -81,7 +81,7 @@ export function TfDashboard() {
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
className="aspect-1155/678 w-288.75 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-20"
className="aspect-1155/678 w-288.75 bg-linear-to-tr from-[#fff4f8] to-[#97979d] opacity-20"
/>
</div>
</div>

74
src/styles/tailwind.css
View File

@@ -228,4 +228,78 @@
.bg-stat-gradient {
background: linear-gradient(to bottom, rgba(17, 17, 17, 0.5), rgba(50, 48, 49, 0.5));
}
.btn-new-gradient {
background: radial-gradient(circle, rgba(230, 245, 236, 1) 0%, rgba(172, 193, 232, 1) 100%);
color: #545853;
}
.btn-new-gradient:hover {
background: radial-gradient(circle, rgba(230, 245, 236, 0.8) 0%, rgba(172, 193, 232, 0.8) 100%);
color: #545853;
}
.btn-new-gradient:active {
background: radial-gradient(circle, rgba(230, 245, 236, 0.6) 0%, rgba(172, 193, 232, 0.6) 100%);
color: #545853;
}
.bg-gradient-soft {
background: #e6f5ec;
background: radial-gradient(circle, rgba(230, 245, 236, 1) 0%, rgba(172, 193, 232, 1) 100%);
}
.bg-gradient-dark {
background: #e6f5ec;
background: radial-gradient(circle, rgb(204, 255, 225) 0%, rgb(156, 186, 240) 100%);
}
.bg-gradient-neutral {
@apply bg-gradient-to-b from-neutral-50 to-neutral-400;
/* Recommended text colors for good contrast */
color: #1f2937; /* neutral-800 for light text */
}
/* Alternative text color variants */
.bg-gradient-neutral .text-light {
color: #374151; /* neutral-700 */
}
.bg-gradient-neutral .text-medium {
color: #4b5563; /* neutral-600 */
}
.bg-gradient-neutral .text-dark {
color: #1f2937; /* neutral-800 */
}
/* Text gradient utilities */
.text-gradient-neutral {
background: linear-gradient(to right, rgb(249, 250, 251), rgb(75, 85, 99));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.text-gradient-neutral-vertical {
background: linear-gradient(to bottom, rgb(249, 250, 251), rgb(126, 126, 126));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Variations with different opacity levels */
.text-gradient-neutral-light {
background: linear-gradient(to right, rgba(249, 250, 251, 0.8), rgba(75, 85, 99, 0.8));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.text-gradient-neutral-dark {
background: linear-gradient(to right, rgba(156, 163, 175, 0.8), rgba(31, 41, 55, 1));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
}