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

BIN
public/images/360_F_1663671675_OFF7GuHYNFIJ46vqjdaBoDVj6rwJMWLJ.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
public/images/ChatGPT Image Sep 7, 2025, 11_14_41 PM.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
public/images/I been to the doctor he says I'm all right I know he's lying, I'm losing my sight He should have examined the eyes of my mind 2020 vision and walkin' 'round blind.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 248 KiB

BIN
public/images/Untitled design.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 332 KiB

BIN
public/images/eye-icon-crayon-chalk-drawing-260nw-2575604137.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
public/images/tfdash.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 846 KiB

After

Width:  |  Height:  |  Size: 634 KiB

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

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

12
src/app/layout.tsx
View File

@@ -12,11 +12,11 @@ const inter = Inter({
export const metadata: Metadata = { export const metadata: Metadata = {
title: { title: {
template: '%s - EngageOS', template: '%s - ThreeFold',
default: 'EngageOS - Invest at the perfect time.', default: 'ThreeFold - Decentralized internet by everyone, for everyone.',
}, },
description: 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({ export default function RootLayout({
@@ -25,8 +25,10 @@ export default function RootLayout({
children: React.ReactNode children: React.ReactNode
}) { }) {
return ( return (
<html lang="en" className={clsx('antialiased', inter.variable)} style={{ backgroundColor: '#121212' }}> <html lang="en" className={clsx('antialiased', inter.variable)} suppressHydrationWarning>
<body style={{ backgroundColor: '#121212', color: '#ffffff' }}>{children}</body> <body className="bg-[#121212] text-white" suppressHydrationWarning>
{children}
</body>
</html> </html>
) )
} }

26
src/components/Button.tsx
View File

@@ -4,6 +4,8 @@ import clsx from 'clsx'
const baseStyles = { const baseStyles = {
solid: solid:
'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold transition-colors', '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: outline:
'inline-flex justify-center rounded-lg border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-sm transition-colors', '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 = { const variantStyles = {
solid: { solid: {
gradient: 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', 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: white:
'bg-white text-black hover:bg-white/90 active:bg-white/90 active:text-gray-400', 'bg-white text-black hover:bg-white/90 active:bg-white/90 active:text-gray-400',
@@ -27,6 +29,9 @@ type ButtonProps = (
variant?: 'solid' variant?: 'solid'
color?: keyof typeof variantStyles.solid color?: keyof typeof variantStyles.solid
} }
| {
variant: 'glass'
}
| { | {
variant: 'outline' variant: 'outline'
color?: keyof typeof variantStyles.outline color?: keyof typeof variantStyles.outline
@@ -41,15 +46,22 @@ type ButtonProps = (
export function Button({ className, ...props }: ButtonProps) { export function Button({ className, ...props }: ButtonProps) {
props.variant ??= 'solid' 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( className = clsx(
baseStyles[props.variant], baseStyles[props.variant],
props.variant === 'outline' variantClass,
? variantStyles.outline[props.color]
: props.variant === 'solid'
? variantStyles.solid[props.color]
: undefined,
className, 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() { export function Dashboard() {
return ( 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="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"> <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
{/* Column 1: Title & NODES */} {/* Column 1: Title & NODES */}
@@ -87,23 +87,23 @@ function StatCard({
}) { }) {
return ( return (
<div <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={{ style={{
filter: 'brightness(1)', filter: 'brightness(1)',
}} }}
onMouseEnter={(e) => { 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) => { onMouseLeave={(e) => {
e.currentTarget.style.filter = 'brightness(1)'; 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"> <p className="mt-2 text-sm font-light text-pretty text-white lg:text-base">
{description} {description}
</p> </p>
<div className="mt-8 flex items-center space-x-3"> <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"> <div className="text-5xl font-semibold tracking-tight text-white tabular-nums">
{value} {value}
{unit && ( {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 ( return (
<section <section
id="faqs" id="faqs"
@@ -66,14 +66,14 @@ export function Faqs() {
<div className="mx-auto max-w-2xl lg:mx-0"> <div className="mx-auto max-w-2xl lg:mx-0">
<h2 <h2
id="faqs-title" 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 Frequently asked questions
</h2> </h2>
<p className="mt-2 lg:text-lg text-base text-gray-600"> <p className="mt-2 lg:text-lg text-base text-gray-600">
If you have anything else you want to ask,{' '} If you have anything else you want to ask,{' '}
<a <a
href="mailto:info@example.com" href="mailto:info@threefold.io"
className="text-gray-900 underline" className="text-gray-900 underline"
> >
reach out to us reach out to us
@@ -83,7 +83,7 @@ export function Faqs() {
</div> </div>
<ul <ul
role="list" 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) => ( {faqs.map((column, columnIndex) => (
<li key={columnIndex}> <li key={columnIndex}>

4
src/components/Farmer.tsx
View File

@@ -47,7 +47,7 @@ export function FarmerPreview() {
return ( return (
<section className="w-full bg-transparent px-4 py-8 sm:px-6 mt-12 sm:pb-12 lg:px-8 relative"> <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 */} {/* 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="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="mx-auto max-w-7xl">
<div className="lg:flex lg:items-center lg:justify-between lg:px-8"> <div className="lg:flex lg:items-center lg:justify-between lg:px-8">
@@ -70,7 +70,7 @@ export function FarmerPreview() {
{posts.map((post) => ( {posts.map((post) => (
<article <article
key={post.id} 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" <div className="absolute inset-0 -z-10 bg-linear-to-t from-gray-200 via-gray-300/10"
style={{ 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" /> <Logomark className="h-10 w-10 flex-none fill-cyan-500" />
<div className="ml-4"> <div className="ml-4">
<p className="text-base font-semibold">ThreeFold</p> <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>
</div> </div>
<nav className="mt-11 flex gap-8"> <nav className="mt-8 flex gap-8">
<NavLinks /> <NavLinks />
</nav> </nav>
</div> </div>
@@ -47,7 +47,7 @@ export function Footer() {
required required
className="w-60 min-w-0 shrink" 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="hidden lg:inline">Join our newsletter</span>
<span className="lg:hidden">Join newsletter</span> <span className="lg:hidden">Join newsletter</span>
</Button> </Button>

2
src/components/Header.tsx
View File

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

34
src/components/Products.tsx
View File

@@ -59,9 +59,7 @@ export function ProductsPreview() {
return ( return (
<section className="w-full bg-transparent px-4 py-8 sm:px-6 mt-12 sm:pb-12 lg:px-6 relative"> <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="mx-auto max-w-7xl">
<div className="lg:flex lg:items-center lg:justify-between lg:px-8"> <div className="lg:flex lg:items-center lg:justify-between lg:px-8">
{/* Left Column - Text (1/3 width) */} {/* Left Column - Text (1/3 width) */}
@@ -82,26 +80,36 @@ export function ProductsPreview() {
</Button> </Button>
</div> </div>
</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 => ( {products.map(product => (
<div key={product.id} className={`relative ${product.colSpan}`}> <div
<div className={`absolute inset-0 rounded-lg bg-gray-100 ${product.bgRounded}`} /> key={product.id}
<div className={`relative flex h-full flex-col lg:flex-row overflow-hidden ${product.rounded}`}> className={`rounded-2xl bg-stat-gradient p-8 shadow-sm backdrop-blur transition-all duration-300 ease-out hover:scale-105 ${product.colSpan}`}
<div className={`flex justify-center items-center h-15 ${product.id > 2 ? 'lg:h-48' : 'lg:h-40'} lg:w-1/4 p-2`}> 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 <img
alt={`${product.title} screenshot`} alt={`${product.title} screenshot`}
src={product.img} 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>
<div className="pl-2 pr-6 flex-1 flex flex-col justify-center"> <div className="flex-1 text-center lg:text-left">
<p className="lg:mt-0 mt-4 text-lg lg:text-xl font-medium tracking-tight text-white">{product.title}</p> <h3 className="text-xl lg:text-2xl font-semibold text-white mb-3">{product.title}</h3>
<p className="mt-2 max-w-lg text-sm/6 leading-tight text-gray-600"> <p className="text-gray-700 text-sm font-light text-pretty lg:text-base">
{product.desc} {product.desc}
</p> </p>
</div> </div>
</div> </div>
<div className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-white/15 ${product.bgRounded}`} />
</div> </div>
))} ))}
</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. ThreeFold is a fully operational, decentralized internet infrastructure – deployed locally, scalable globally, and owned and powered by the people.
</p> </p>
<div className="mt-8 flex flex-col sm:flex-row justify-center gap-4"> <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 Start Building
</Button> </Button>
<Button href="#" variant="outline" color="gray"> <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"> <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. 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> </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> </div>
{/* Right Column - Stacked Cubes (2/3 width) */} {/* Right Column - Stacked Cubes (2/3 width) */}

4
src/components/TfDashboard.tsx
View File

@@ -26,7 +26,7 @@ export function TfDashboard() {
return ( return (
<div className="bg-transparent pt-24 pb-0"> <div className="bg-transparent pt-24 pb-0">
<div className="mx-auto max-w-7xl px-4 lg:px-2"> <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="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"> <div className="lg:row-start-2 lg:max-w-md">
<motion.h2 <motion.h2
@@ -81,7 +81,7 @@ export function TfDashboard() {
clipPath: 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%)', '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>
</div> </div>

74
src/styles/tailwind.css
View File

@@ -228,4 +228,78 @@
.bg-stat-gradient { .bg-stat-gradient {
background: linear-gradient(to bottom, rgba(17, 17, 17, 0.5), rgba(50, 48, 49, 0.5)); 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;
}
} }