105 lines
3.9 KiB
TypeScript
105 lines
3.9 KiB
TypeScript
import { ArrowPathIcon, CircleStackIcon, InboxIcon, RocketLaunchIcon, ScaleIcon, TrashIcon, UsersIcon } from '@heroicons/react/24/outline'
|
|
|
|
const features = [
|
|
{
|
|
name: 'A Funding Platform',
|
|
description:
|
|
'Access capital for projects building on decentralized infrastructure, with a focus on ventures that contribute to digital sovereignty for people and sustainable technology for the planet.',
|
|
href: '#',
|
|
icon: CircleStackIcon,
|
|
},
|
|
{
|
|
name: 'Legal & Financial Autonomy',
|
|
description:
|
|
'Operate through our free zone with optimized legal and financial structures designed for global teams. Startups benefit from transparent, innovation-friendly structures designed for streamlined borderless operations.',
|
|
href: '#',
|
|
icon: ScaleIcon,
|
|
},
|
|
{
|
|
name: 'Technological Empowerment',
|
|
description:
|
|
'Build on our interconnected stack of decentralized cloud infrastructure, sovereign data centers, and agentic AI frameworks, giving your startup the tools for complete digital autonomy.',
|
|
href: '#',
|
|
icon: RocketLaunchIcon,
|
|
},
|
|
{
|
|
name: 'Collaborative Ecosystem',
|
|
description:
|
|
'Join a network of ventures building interconnected solutions for digital sovereignty. Share resources, infrastructure, and knowledge across projects working toward a decentralized future.',
|
|
href: '#',
|
|
icon: ArrowPathIcon,
|
|
},
|
|
]
|
|
|
|
export function HomeAbout() {
|
|
return (
|
|
<div className="relative bg-black py-24 sm:py-32 overflow-hidden">
|
|
|
|
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div
|
|
aria-hidden="true"
|
|
className="absolute inset-0 -z-10 overflow-hidden"
|
|
>
|
|
<div
|
|
style={{
|
|
background: 'linear-gradient(135deg, #ff80b5 0%, #9089fc 100%)',
|
|
width: '800px',
|
|
height: '600px',
|
|
borderRadius: '50%',
|
|
filter: 'blur(100px)',
|
|
opacity: 0.3,
|
|
position: 'absolute',
|
|
top: '20%',
|
|
right: '10%'
|
|
}}
|
|
/>
|
|
<div
|
|
style={{
|
|
background: 'linear-gradient(225deg, #9089fc 0%, #ff80b5 100%)',
|
|
width: '600px',
|
|
height: '400px',
|
|
borderRadius: '50%',
|
|
filter: 'blur(80px)',
|
|
opacity: 0.2,
|
|
position: 'absolute',
|
|
bottom: '20%',
|
|
left: '10%'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="mx-auto max-w-4xl lg:mx-0">
|
|
<p className="subtitle text-white">ABOUT</p>
|
|
<h2 className="mt-2 h2-default text-white">
|
|
Enabling an Interconnected Ecosystem to Enhance Collective Intelligence Through Collaboration.
|
|
</h2>
|
|
</div>
|
|
<div className="lg:mx-0 max-w-2xl mt-6">
|
|
<p className="p-default text-gray-300">
|
|
OurWorld is a venture creator providing startups with decentralized infrastructure, legal frameworks, and technological capacity to build without traditional constraints.
|
|
</p>
|
|
</div>
|
|
<div className="mx-auto mt-16 max-w-2xl lg:mt-16 lg:max-w-none">
|
|
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2">
|
|
{features.map((feature) => (
|
|
<div key={feature.name} className="flex flex-col">
|
|
<dt className="text-xl/7 font-semibold text-white">
|
|
<div className="mb-6 flex size-10 items-center justify-center rounded-lg bg-white">
|
|
<feature.icon aria-hidden="true" className="size-6 text-black" />
|
|
</div>
|
|
{feature.name}
|
|
</dt>
|
|
<dd className="mt-1 flex flex-auto flex-col text-base/7 text-gray-300">
|
|
<p className="flex-auto">{feature.description}</p>
|
|
<p className="mt-6">
|
|
|
|
</p>
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|