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

add pngs

Browse Source
This commit is contained in:
sasha-astiadi
2025-08-07 17:22:35 +02:00
parent b9b2148417
commit f63e3229c7
8 changed files with 171 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Apps.tsx
View File

@@ -21,7 +21,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-20 md:pt-0">
<div className="relative z-10 mx-auto w-full max-w-4xl p-4 pt-24">
{/* Heading */}
<motion.div
@@ -67,7 +67,7 @@ export function AppsPreview() {
}}
transition={{ duration: 0.6, ease: "easeOut" }}
>
<Image src={logo} alt="" unoptimized />
<Image src={logo} alt="" unoptimized className="hover:backdrop-opacity-100 opacity-90" />
</motion.div>
))}
</motion.div>

75
src/components/Farmer.tsx
View File

@@ -1,29 +1,96 @@
"use client";
import { Button } from "./Button";
import Image from "next/image";
const posts = [
{
id: 1,
title: 'Host A Node',
href: '#',
description1:
'All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.',
description2: '',
imageUrl:
'./images/3nodes.png',
},
{
id: 2,
title: 'Offer Capacity',
href: '#',
description1: 'The capacity of the node gets registered on the ThreeFold Blockchain and is available for users on the TF Marketplace.',
description2: '',
imageUrl:
'./images/capacity.png',
},
{
id: 3,
title: 'Earn Rewards',
href: '#',
description1:
'Farmers earn rewards for their used resources, enabling a fair and transparent peer-to-peer economy.',
description2: '',
imageUrl:
'./images/rewards.png',
},
]
export function FarmerPreview() {
return (
<section className="w-full bg-transparent px-4 py-8 sm:px-6 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 */}
<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) */}
<div className="lg:col-span-1 flex text-center lg:text-left order-1 lg:order-1">
<h2 className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-3xl">
<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">
Contribute to the Decentralized Internet in 3 Steps
</h2>
</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" className=" text-white px-4 py-2 rounded-md hover:bg-gray-700 transition-colors">
<Button variant="outline" className=" text-black px-4 py-2 rounded-md hover:bg-gray-700 transition-colors">
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-state-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={{
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>
<h3 className="mt-12 text-lg/6 font-semibold text-white">
<a href={post.href}>
<span className="absolute inset-10" />
{post.title}
</a>
</h3>
< 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>
<img alt="" src={post.imageUrl} className="w-1/2 h-full translate-x-20 -translate-32 transform object-cover object-top-left lg:translate-x-50 lg:-translate-20 opacity-70 hover:opacity-95" />
</article>
))}
</div>
</div>
</section>
);

2
src/components/StackSection.tsx
View File

@@ -13,7 +13,7 @@ export function StackSectionPreview() {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-16 items-center lg:items-start">
{/* Left Column - Text (1/3 width) */}
<div className="text-center lg:text-left lg:col-span-1 order-1 lg:order-1">
<h2 className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-3xl">
<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">

97
src/components/ui/Blog.tsx Normal file
View File

@@ -0,0 +1,97 @@
const posts = [
{
id: 1,
title: 'Boost your conversion rate',
href: '#',
description:
'Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.',
imageUrl:
'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80',
date: 'Mar 16, 2020',
datetime: '2020-03-16',
author: {
name: 'Michael Foster',
imageUrl:
'https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
},
{
id: 2,
title: 'How to use search engine optimization to drive sales',
href: '#',
description: 'Optio cum necessitatibus dolor voluptatum provident commodi et. Qui aperiam fugiat nemo cumque.',
imageUrl:
'https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
date: 'Mar 10, 2020',
datetime: '2020-03-10',
author: {
name: 'Lindsay Walton',
imageUrl:
'https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
},
{
id: 3,
title: 'Improve your customer experience',
href: '#',
description:
'Cupiditate maiores ullam eveniet adipisci in doloribus nulla minus. Voluptas iusto libero adipisci rem et corporis.',
imageUrl:
'https://images.unsplash.com/photo-1492724441997-5dc865305da7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
date: 'Feb 12, 2020',
datetime: '2020-02-12',
author: {
name: 'Tom Cook',
imageUrl:
'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
},
]
export default function Example() {
return (
<div className="bg-white py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">
From the blog
</h2>
<p className="mt-2 text-lg/8 text-gray-600">Learn how to grow your business with our expert advice.</p>
</div>
<div className="mx-auto mt-16 grid max-w-2xl auto-rows-fr grid-cols-1 gap-8 sm:mt-20 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-gray-900 px-8 pt-80 pb-8 sm:pt-48 lg:pt-80"
>
<img alt="" src={post.imageUrl} className="absolute inset-0 -z-10 size-full object-cover" />
<div className="absolute inset-0 -z-10 bg-linear-to-t from-gray-900 via-gray-900/40" />
<div className="absolute inset-0 -z-10 rounded-2xl inset-ring inset-ring-gray-900/10" />
<div className="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm/6 text-gray-300">
<time dateTime={post.datetime} className="mr-8">
{post.date}
</time>
<div className="-ml-4 flex items-center gap-x-4">
<svg viewBox="0 0 2 2" className="-ml-0.5 size-0.5 flex-none fill-white/50">
<circle r={1} cx={1} cy={1} />
</svg>
<div className="flex gap-x-2.5">
<img alt="" src={post.author.imageUrl} className="size-6 flex-none rounded-full bg-white/10" />
{post.author.name}
</div>
</div>
</div>
<h3 className="mt-3 text-lg/6 font-semibold text-white">
<a href={post.href}>
<span className="absolute inset-0" />
{post.title}
</a>
</h3>
</article>
))}
</div>
</div>
</div>
)
}