ourworld_web/www_indaba
21
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

finish indabaos

Browse Source
This commit is contained in:
sasha-astiadi
2025-06-10 18:16:40 +02:00
parent 1f8c99ccef
commit 11630ef24c
308 changed files with 10813 additions and 877 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/indabaos.tsx
View File

@@ -5,45 +5,63 @@ import { clsx } from 'clsx'
import { ChevronRightIcon } from '@heroicons/react/20/solid'
const stats = [
{ id: 1, name: 'Lessons delivered', value: '+4,000,000,000' },
{ id: 2, name: 'Educational resources', value: '+90,000,000' },
{ id: 3, name: 'Spent on infrastructure & content development', value: '+$60,000,000' },
{ id: 1, name: 'A personalized, social and gamified funding platform.', value: 'Adopt a Cause', src: '/indabaos/adopt.webp' },
{ id: 2, name: 'For purpose driven citizens.', value: 'World-class Scalable Projects', src: '/indabaos/sikana.webp' },
{ id: 3, name: 'For NGOs, Experts & content creators.', value: 'A Contribution System', src: '/indabaos/freezone.webp' },
{ id: 4, name: 'For investors & hosts.', value: 'A Funding System', src: '/indabaos/funding.webp' },
]
export function IndabaOs() {
return (
<div className="pt-32 pb-24">
<div className="mx-auto max-w-7xl h-full px-6 lg:px-8">
<div className="relative isolate overflow-hidden bg-white px-6 py-24 lg:py-56 lg:px-8 rounded-2xl min-h-[700px]">
{/* Background image */}
<img
alt=""
src="/indabaos/earth.png"
className="absolute inset-0 -z-10 size-full w-full object-cover"
/>
<div className="pt-24 pb-24">
<div className="mx-auto max-w-7xl h-3/4 px-6 lg:px-8">
<div className="relative isolate overflow-hidden bg-white px-6 py-24 lg:py-56 lg:px-8 rounded-2xl min-h-[700px]">
{/* Background image */}
<img
alt=""
src="/indabaos/earth.png"
className="absolute inset-0 -z-10 size-full w-full object-cover"
/>
{/* Dark overlay on image only */}
<div className="absolute inset-0 -z-10 bg-black/50 pointer-events-none" />
{/* Dark overlay on image */}
<div className="absolute inset-0 -z-10 bg-black/50 pointer-events-none" />
{/* os icon on top */}
<div className="absolute inset-x-0 top-10 flex justify-center pt-8">
<img
alt=""
src="/indabaos/os_icon.png"
className="h-25 w-auto"
/>
</div>
{/* OS icon */}
<div className="absolute inset-x-0 top-15 flex justify-center pt-8">
<img
alt=""
src="/indabaos/os_icon.png"
className="h-35 w-auto"
/>
</div>
{/* Text content is ABOVE overlay */}
<div className="relative z-10 mx-auto max-w-2xl text-center">
<h2 className="text-4xl font-medium tracking-tight text-white sm:text-5xl">
IndabaOS
</h2>
<p className="mt-8 text-lg font-light text-pretty text-white sm:text-xl/8">
Introducing the tech infrastructure that invites the world to accelerate the transition toward high quality youth development.
</p>
</div>
</div>
{/* Text content */}
<div className="relative z-10 mx-auto max-w-2xl text-center">
<h2 className="text-4xl font-medium tracking-tight text-white sm:text-5xl">
IndabaOS
</h2>
<p className="mt-8 text-lg font-light text-pretty text-white sm:text-xl/8">
Introducing the tech infrastructure that invites the world to accelerate the transition toward high quality youth development.
</p>
</div>
{/* Stats integrated into background */}
<div className="relative z-10 mt-10">
<dl className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 text-center max-w-5xl mx-auto">
{stats.map((stat) => (
<div key={stat.id} className="flex flex-col items-center bg-white/10 rounded-xl p-6 backdrop-blur-md shadow-md">
<img
src={stat.src}
alt={stat.name}
className="h-45 w-45 object-contain rounded-xl"
/>
<dd className="text-md font-semibold tracking-tight text-white">{stat.value}</dd>
<dt className="text-sm font-light text-white/90 mt-2">{stat.name}</dt>
</div>
))}
</dl>
</div>
</div>
</div>
</div>
)