ourworld_web/www_engage_os
23
0
Fork 1
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove duplicate text-base class and update navigation links in header

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-16 14:55:08 +02:00
parent cd8687db54
commit 4ef0b3918b
9 changed files with 304 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
src/components/BuildStack.tsx Normal file
View File

@@ -0,0 +1,163 @@
"use client";
import { Button } from "./Button";
import Image from "next/image";
import {
CpuChipIcon,
CircleStackIcon,
CurrencyDollarIcon,
ShareIcon,
ShieldCheckIcon,
LinkIcon,
ServerStackIcon,
WifiIcon,
ComputerDesktopIcon,
UsersIcon,
DevicePhoneMobileIcon,
} from "@heroicons/react/24/solid";
const posts = [
{
id: 1,
title: 'ZERO-OS V3',
href: '#',
description1:
'A stateless and lightweight operating system that allows for an improved efficiency of up to 10x for certain workloads.',
description2: '',
icon: <CpuChipIcon className="h-6 w-6 text-white" />,
},
{
id: 2,
title: 'MYCELIUM NETWORK',
href: '#',
description1: 'Decentralized communication layer of TF Grid that connects and coordinates nodes on the ThreeFold Grid, enabling secure and efficient peer-to-peer interactions.',
description2: '',
icon: <ShareIcon className="h-6 w-6 text-white" />,
},
{
id: 3,
title: 'QUANTUM SAFE STORAGE',
href: '#',
description1:
'QSS is a decentralized, globally distributed data storage system. It is unbreakable, self-healing, append-only, and immutable.',
description2: '',
icon: <ShieldCheckIcon className="h-6 w-6 text-white" />,
},
{
id: 4,
title: 'TF CHAIN',
href: '#',
description1:
'An application-specific blockchain customized for the operation of a single application – provisioning decentralized compute, storage, and network capacity.',
description2: '',
icon: <LinkIcon className="h-6 w-6 text-white" />,
},
{
id: 5,
title: '3NODES',
href: '#',
description1:
'Decentralized, user-owned hardware devices that provides computing, storage, and networking resources to power the TF Grid.',
description2: '',
icon: <ServerStackIcon className="h-6 w-6 text-white" />,
},
{
id: 6,
title: 'GATEWAY NODES',
href: '#',
description1:
'Specialized nodes that provide secure access points to the ThreeFold Grid, enabling decentralized networking, private data communication, and seamless interaction between users and applications.',
description2: '',
icon: <WifiIcon className="h-6 w-6 text-white" />,
},
{
id: 7,
title: 'TF DASHBOARD',
href: '#',
description1:
'A user-friendly interface for monitoring, managing, and deploying resources on the ThreeFold Grid.',
description2: '',
icon: <ComputerDesktopIcon className="h-6 w-6 text-white" />,
},
{
id: 8,
title: 'TF DAO',
href: '#',
description1:
'A community-driven governance model that allows farmers to participate in decision-making processes related to the development and direction of the ThreeFold ecosystem.',
description2: '',
icon: <UsersIcon className="h-6 w-6 text-white" />,
},
{
id: 9,
title: 'TF CONNECT APP',
href: '#',
description1:
'A mobile app that serves as a gateway to the ThreeFold ecosystem and its various ThreeFold products and services.',
description2: '',
icon: <DevicePhoneMobileIcon className="h-6 w-6 text-white" />,
},
]
export default function BuildStack() {
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-[#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">
{/* Left Column - Text (1/3 width) */}
<div className="lg:col-span-1 flex max text-center lg:text-left order-1 lg:order-1">
<div className="max-w-xl">
<h2 className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
The ThreeFold Stack
</h2>
<p className="mt-3 text-base text-gray-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
Products designed to power a decentralized, sustainable digital future.
</p>
</div>
</div>
{/* Right Column - Stacked Cubes (2/3 width) */}
<div className="lg:col-span-2 flex items-center justify-center lg:justify-start order-2 lg:order-2">
<Button variant="outline">
Become A Farmer
</Button>
</div>
</div>
<div className="mx-auto mt-10 grid max-w-2xl h-3/4 grid-cols-1 gap-8 lg:mt-10 lg:mx-0 lg:max-w-none lg:grid-cols-3">
{posts.map((post) => (
<article
key={post.id}
className="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-stat-gradient p-8"
>
<div className="absolute inset-0 -z-10 bg-linear-to-t from-gray-200 via-gray-300/10"
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>
<div className="flex items-start gap-x-3 text-lg/6 font-semibold text-white">
{post.icon}
{post.title}
</div>
< div className="max-w-2/3">
<p className="mt-4 text-sm font-light text-gray-700">{post.description1}</p>
<p className=" text-sm font-light text-gray-700">{post.description2}</p>
</div>
</article>
))}
</div>
</div>
</section>
);
}