117 lines
4.5 KiB
TypeScript
117 lines
4.5 KiB
TypeScript
import {
|
|
GlobeAltIcon,
|
|
UsersIcon,
|
|
CommandLineIcon,
|
|
ShieldCheckIcon,
|
|
SparklesIcon,
|
|
} from '@heroicons/react/24/outline'
|
|
|
|
const foundations = [
|
|
{
|
|
id: 1,
|
|
title: 'Planet First',
|
|
description:
|
|
'We act with respect for the Earth. Each initiative supports regeneration and uses natural resources responsibly. Every venture should leave the planet better than it found it.',
|
|
icon: GlobeAltIcon,
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'People First',
|
|
description:
|
|
'Empowering people to own their digital lives through shared ownership, inclusive governance, and lifelong learning so everyone can grow and take part.',
|
|
icon: UsersIcon,
|
|
},
|
|
]
|
|
|
|
const tools = [
|
|
{
|
|
id: 3,
|
|
title: 'Open Source',
|
|
description:
|
|
'Everything we build is open source. Anyone can use it, improve it, and connect to the ecosystem. Transparency keeps innovation honest.',
|
|
icon: CommandLineIcon,
|
|
},
|
|
{
|
|
id: 4,
|
|
title: 'Simplicity',
|
|
description:
|
|
'Complex systems slow progress. We design modular, autonomous tools that remove unnecessary layers.',
|
|
icon: SparklesIcon,
|
|
},
|
|
{
|
|
id: 5,
|
|
title: 'Authenticity',
|
|
description:
|
|
'We are restoring trust online. Sovereign digital tools verify people and information, building a culture of transparency and accountability.',
|
|
icon: ShieldCheckIcon,
|
|
},
|
|
]
|
|
|
|
export function HomePrinciples() {
|
|
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 lg:max-w-none">
|
|
<div className="text-center">
|
|
<h2 className="h2-default text-gray-900 ">
|
|
The Foundation of Every Venture
|
|
</h2>
|
|
<p className="mt-4 p-default text-gray-600">
|
|
We start every project with two essentials: protect the planet and empower people. Everything else follows from there.
|
|
</p>
|
|
</div>
|
|
<div className="mt-12 space-y-12">
|
|
<section>
|
|
<h3 className="text-sm font-semibold uppercase tracking-wide text-gray-500">Foundational Commitments</h3>
|
|
<dl className="mt-8 grid grid-cols-1 gap-4 lg:grid-cols-2">
|
|
{foundations.map((item) => {
|
|
const Icon = item.icon
|
|
|
|
return (
|
|
<div
|
|
key={item.id}
|
|
className="flex items-start gap-4 rounded-2xl border border-gray-200/70 bg-white/90 p-5 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-lg"
|
|
>
|
|
<div className="flex size-11 shrink-0 items-center justify-center rounded-full bg-gray-100 ring-1 ring-inset ring-gray-200">
|
|
<Icon aria-hidden="true" className="size-6 text-gray-900" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<h4 className="text-xl/7 font-semibold tracking-tight text-gray-900">{item.title}</h4>
|
|
<p className="text-base/7 text-gray-500">{item.description}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</dl>
|
|
</section>
|
|
<section>
|
|
<h3 className="text-sm font-semibold uppercase tracking-wide text-gray-500">Tools We Deploy</h3>
|
|
<p className="mt-3 p-default text-gray-600">
|
|
With people and planet at the core, these are the principles that shape how we build and operate.
|
|
</p>
|
|
<dl className="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{tools.map((item) => {
|
|
const Icon = item.icon
|
|
|
|
return (
|
|
<div
|
|
key={item.id}
|
|
className="flex flex-col items-center rounded-2xl border border-gray-200/70 bg-white/90 p-5 text-center shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-lg"
|
|
>
|
|
<div className="flex size-11 items-center justify-center rounded-full bg-gray-100 ring-1 ring-inset ring-gray-200">
|
|
<Icon aria-hidden="true" className="size-6 text-gray-900" />
|
|
</div>
|
|
<h4 className="mt-4 text-xl/7 font-semibold tracking-tight text-gray-900">{item.title}</h4>
|
|
<p className="mt-2 text-base/7 text-gray-500">{item.description}</p>
|
|
</div>
|
|
)
|
|
})}
|
|
</dl>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|