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

ok

Browse Source
This commit is contained in:
sasha-astiadi
2025-09-05 15:28:52 +02:00
parent c8a3b455fe
commit 1df765c4aa
10 changed files with 108 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/tfdash.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 846 KiB

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

@@ -14,6 +14,7 @@ import GlobeDemo from '@/components/GlobeDemo'
import { Dashboard } from '@/components/Dashboard'
import { AppsPreview } from '@/components/Apps'
import { FarmerPreview } from '@/components/Farmer'
import { TfDashboard } from '@/components/TfDashboard'
export default function Home() {
@@ -23,6 +24,7 @@ export default function Home() {
<StackSectionPreview />
<Dashboard />
<FarmerPreview />
<TfDashboard />
<AppsPreview />
</>

4
src/components/Apps.tsx
View File

@@ -22,7 +22,7 @@ const logos = [
export function AppsPreview() {
return (
<div className="relative flex h-[40rem] w-full overflow-hidden rounded-md bg-transparent antialiased md:items-center md:justify-center">
<div className="relative z-10 mx-auto w-full max-w-4xl p-4 pt-24">
<div className="relative z-10 mx-auto w-full max-w-3xl p-4 pt-16">
{/* Heading */}
<motion.div
@@ -31,7 +31,7 @@ export function AppsPreview() {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1 }}
>
<h1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text tracking-tighter text-center text-4xl font-semibold text-transparent lg:text-6xl">
<h1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text tracking-tighter text-center text-4xl font-semibold text-transparent lg:text-5xl">
Anything That Runs on Linux Can Run on ThreeFold
</h1>
</motion.div>

4
src/components/Button.tsx
View File

@@ -14,11 +14,11 @@ const variantStyles = {
'bg-gradient-to-r from-[#caa5f0] via-[#8f79f9] to-[#3c82f5] text-white hover:brightness-110 active:brightness-95',
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-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
'bg-white text-black hover:bg-white/90 active:bg-white/90 active:text-gray-400',
gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
},
outline: {
gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
gray: 'border-gray-300 text-gray-700 hover:border-gray-600 hover:text-white active:bg-gray-100 active:text-gray-600/80',
},
}

2
src/components/Dashboard.tsx
View File

@@ -19,7 +19,7 @@ export function Dashboard() {
<p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-white lg:text-base">
ThreeFold’s groundbreaking technology enables anyone – individuals, organizations, and communities – to deploy their own Internet infrastructure.
</p>
<Button className="mt-6" variant="solid" color="gradient" href="https://threefold.io/build" >Explore TFGrid →</Button>
<Button className="mt-8" variant="outline" href="https://threefold.io/build" >Explore TFGrid →</Button>
</div>

2
src/components/Farmer.tsx
View File

@@ -61,7 +61,7 @@ export function FarmerPreview() {
</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" className=" text-black px-4 py-2 rounded-md hover:bg-gray-700 transition-colors">
<Button variant="outline">
Become A Farmer
</Button>
</div>

8
src/components/Header.tsx
View File

@@ -73,7 +73,7 @@ export function Header() {
{({ open }) => (
<>
<PopoverButton
className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-white p-2 hover:bg-gray-800/50 hover:stroke-gray-300 focus:not-data-focus:outline-hidden active:stroke-white"
className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-white p-2 hover:bg-transparent hover:stroke-gray-200 focus:not-data-focus:outline-hidden active:stroke-white"
aria-label="Toggle site navigation"
>
{({ open }) =>
@@ -134,9 +134,11 @@ export function Header() {
</Popover>
<div className="flex items-center gap-6 max-lg:hidden">
<Button href="/login" variant="outline">
Log in
Info
</Button>
<Button href="#" variant="solid" color="white">
Participate
</Button>
<Button href="#">Download</Button>
</div>
</div>
</Container>

4
src/components/NavLinks.tsx
View File

@@ -17,7 +17,7 @@ export function NavLinks() {
<Link
key={label}
href={href}
className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-gray-300 transition-colors delay-150 hover:text-white hover:delay-0"
className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-gray-600 transition-colors delay-150 hover:text-white hover:delay-0"
onMouseEnter={() => {
if (timeoutRef.current) {
window.clearTimeout(timeoutRef.current)
@@ -33,7 +33,7 @@ export function NavLinks() {
<AnimatePresence>
{hoveredIndex === index && (
<motion.span
className="absolute inset-0 rounded-lg bg-gray-800"
className="absolute inset-0 rounded-lg bg-transparent"
layoutId="hoverBackground"
initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { duration: 0.15 } }}

4
src/components/StackSection.tsx
View File

@@ -17,10 +17,10 @@ export function StackSectionPreview() {
<h2 className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
A Decentralized Infrastructure Layer
</h2>
<p className="mt-4 sm: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.
</p>
<Button className="mt-4" variant="solid" color="gradient" href="https://threefold.io/build" >Discover How It Works →</Button>
<Button className="mt-8" variant="outline" href="https://threefold.io/build" >Discover How It Works →</Button>
</div>
{/* Right Column - Stacked Cubes (2/3 width) */}

91
src/components/TfDashboard.tsx Normal file
View File

@@ -0,0 +1,91 @@
'use client'
import { CloudArrowUpIcon, LockClosedIcon, ServerIcon } from '@heroicons/react/20/solid'
import { motion } from 'framer-motion'
import { Button } from './Button'
const features = [
{
name: 'Push to deploy.',
description: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.',
icon: CloudArrowUpIcon,
},
{
name: 'SSL certificates.',
description: 'Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.',
icon: LockClosedIcon,
},
{
name: 'Database backups.',
description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.',
icon: ServerIcon,
},
]
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="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
className="text-3xl font-semibold tracking-tight text-balance text-white sm:text-4xl"
initial={{opacity: 0}}
animate={{opacity: 1}}
transition={{delay: 0.5, duration: 0.5}}
>
Threefold Dashboard
</motion.h2>
<motion.p
className="mt-4 lg:mt-6 text-sm font-light text-pretty text-white lg:text-base"
initial={{opacity: 0}}
animate={{opacity: 1}}
transition={{delay: 1, duration: 0.5}}
>
ThreeFold is open for developers and system administrators. Deploy virtual machines, containers, Kubernetes clusters, web gateways, and more on top of a best-effort decentralized open source cloud.
</motion.p>
<motion.p
className="mt-6 text-sm font-light text-pretty text-white lg:text-base"
initial={{opacity: 0}}
animate={{opacity: 1}}
transition={{delay: 1.5, duration: 0.5}}
>
The ThreeFold Dashboard is your gateway to the new internet infrastructure. It can be used by any Web2, Web3, AI, or Edge IT workload – enabling a world of possibilities.
</motion.p>
<motion.div
initial={{opacity: 0}}
animate={{opacity: 1}}
transition={{delay: 2, duration: 1}}
>
<Button className="mt-8" variant="outline" href="https://dashboard.threefold.io" >Explore the Dashboard →</Button>
</motion.div>
</div>
<motion.img
alt="Product screenshot"
src="/images/tfdash.png"
width={2432}
height={1442}
className="relative z-0 max-w-xl min-w-full rounded-xl shadow-xl ring-1 ring-white/10 lg:row-span-4 lg:w-5xl lg:max-w-none"
whileHover={{scale: 1.05}}
transition={{duration: 0.5}}
/>
</div>
<div
aria-hidden="true"
className="pointer-events-none absolute top-1/2 left-12 -z-10 -translate-y-1/2 transform-gpu blur-3xl lg:top-auto lg:-bottom-48 lg:translate-y-0"
>
<div
style={{
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"
/>
</div>
</div>
</div>
</div>
)
}