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

feat: add About page components with Journey and Team sections

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-16 21:09:17 +02:00
parent b203e29593
commit 1792262f49
3 changed files with 63 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/AboutJourney.tsx Normal file
View File

@@ -0,0 +1,38 @@
import Image from 'next/image'
const featuredPost = {
id: 1,
title: 'Our Journey',
href: '#',
description:
'For decades, we’ve tackled challenges in data storage, secure networking, and autonomous cloud systems. These experiences, combined with our vision for a better internet, have shaped ThreeFold and continue to guide our growth.',
}
export function AboutJourney() {
return (
<div className=" py-24 sm:py-32">
<div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-12 px-6 sm:gap-y-16 lg:grid-cols-2 lg:px-8">
<article className="mx-auto my-auto w-full max-w-2xl lg:mx-0 lg:max-w-lg">
<h2
id="featured-post"
className="mt-4 text-3xl font-semibold tracking-tight text-pretty text-white sm:text-4xl"
>
{featuredPost.title}
</h2>
<p className="mt-4 text-sm font-light text-pretty lg:text-base text-gray-600">{featuredPost.description}</p>
<div className="mt-4 flex flex-col justify-between gap-6 sm:mt-8 sm:flex-row-reverse sm:gap-8 lg:mt-4 lg:flex-col">
</div>
</article>
<div className="relative lg:col-span-1">
<Image
src="/images/solution1.jpg"
alt="Our Solution"
width={1000}
height={1000}
className="w-full h-auto object-cover rounded-lg"
/>
</div>
</div>
</div>
)
}

6
src/components/AboutSolutions.tsx
View File

@@ -55,7 +55,7 @@ export function AboutSolutions() {
{/* Top-left card */}
<div className="col-start-2 row-start-2 col-span-5 row-span-3 pointer-events-auto">
<div className="bg-[#121212] w-full h-full flex items-center p-6 shadow-lg">
<p className="text-sm text-gray-600 leading-snug">
<p className="text-sm text-gray-600 leading-normal">
Unlike traditional internet infrastructure, ThreeFold runs on a
global mesh of independent cloud providers, individuals and
organizations contributing compute, storage, and network power.
@@ -75,8 +75,8 @@ export function AboutSolutions() {
{/* Bottom-right card */}
<div className="col-start-17 row-start-6 col-span-5 row-span-3 pointer-events-auto">
<div className="bg-[#121212] w-full h-full flex items-center p-6 shadow-lg">
<p className="text-sm text-gray-600 leading-snug">
This physical decentralization removes bottlenecks, increases
<p className="text-sm text-gray-600 leading-normal">
This physical decentralization removes bottlenecks, in creases
resilience, and protects privacy. ThreeFold is a neutral, scalable
foundation for the next-generation internet, where digital
sovereignty and collaboration come first.

22
src/components/AboutTeam.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { Gallery } from './Gallery'
export function AboutTeam() {
return (
<div className="relative my-16 mx-6">
<Gallery />
<div className="mx-auto grid max-w-7xl lg:grid-cols-2">
<div className="px-6 pt-16 pb-24 sm:pt-20 sm:pb-32 lg:col-start-2 lg:px-8 lg:pt-32">
<div className="mx-auto max-w-2xl lg:mr-0 lg:max-w-lg">
<h1 className="mt-2 text-3xl font-medium tracking-tight text-pretty text-white lg:text-4xl">
Founded by Internet Pioneers and Powered by the Community
</h1>
<p className="mt-6 text-sm font-light text-pretty text-gray-600 lg:text-base">
ThreeFold was started by pioneers from the early days of the internet, when it was a true peer-to-peer network. Today, it’s an open-source movement supported by a dedicated team and a vibrant community of contributors. Over 50 full-time developers and countless Hosters worldwide help bring our shared vision to life.
</p>
</div>
</div>
</div>
</div>
)
}