add about page hero image, refactor about components into dedicated folder, update page layout with FadeInOnView animations and HomeStickyHeader, change AboutMission background to transparent, and create new Hero, Mission, and Records components with improved styling and content
This commit is contained in:
BIN
public/images/about/hero.jpg
Normal file
BIN
public/images/about/hero.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 255 KiB |
@@ -1,27 +1,40 @@
|
||||
import { CallToAction } from '@/components/CallToAction'
|
||||
import { FadeInOnView } from '@/components/UI/FadeInOnView'
|
||||
import { Faqs } from '@/components/Faqs'
|
||||
import { Footer } from '@/components/Footer'
|
||||
import { Header_darkbg } from '@/components/Header_darkbg'
|
||||
import { HomeStickyHeader } from '@/components/home/HomeStickyHeader'
|
||||
import { Quote } from '@/components/Quote'
|
||||
import { AboutHero } from '@/components/AboutHero'
|
||||
import { AboutMission } from '@/components/AboutMission'
|
||||
import { AboutRecords } from '@/components/AboutRecords'
|
||||
import { Hero } from '@/components/about/Hero'
|
||||
import {Mission } from '@/components/about/Mission'
|
||||
import { Records } from '@/components/about/Records'
|
||||
import { AboutExperience } from '@/components/AboutExperience'
|
||||
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<>
|
||||
<Header_darkbg />
|
||||
<main>
|
||||
<AboutHero />
|
||||
<AboutMission />
|
||||
<AboutRecords />
|
||||
<HomeStickyHeader />
|
||||
<section className="relative min-h-screen">
|
||||
<Hero className="md:-mt-18 -mt-20" />
|
||||
</section>
|
||||
|
||||
<FadeInOnView delayMs={100}>
|
||||
<Mission />
|
||||
</FadeInOnView>
|
||||
|
||||
<FadeInOnView delayMs={200}>
|
||||
<Records />
|
||||
</FadeInOnView>
|
||||
|
||||
|
||||
<AboutExperience />
|
||||
<Quote />
|
||||
<CallToAction />
|
||||
<Faqs />
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@ const stats = [
|
||||
|
||||
export function AboutMission() {
|
||||
return (
|
||||
<div className="bg-white py-12">
|
||||
<div className="bg-transparent py-12">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto grid max-w-2xl grid-cols-1 items-start gap-x-6 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2">
|
||||
<div className="lg:pr-4">
|
||||
|
||||
46
src/components/about/Hero.tsx
Normal file
46
src/components/about/Hero.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import Image from 'next/image'
|
||||
import clsx from 'clsx'
|
||||
|
||||
import { Button } from '@/components/Button'
|
||||
import { Container } from '@/components/Container'
|
||||
import { Logo_hero } from '@/components/Logo_hero'
|
||||
import { H1, P } from '@/components/UI/Texts'
|
||||
import { FadeInOnView } from '@/components/UI/FadeInOnView'
|
||||
|
||||
|
||||
type HeroProps = {
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function Hero({ className }: HeroProps) {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"relative min-h-screen overflow-hidden flex items-center justify-center -z-20 bg-[url('/images/about/hero.jpg')] bg-cover bg-center bg-no-repeat",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{/* Overlay */}
|
||||
<div className="absolute inset-0 bg-black/25" />
|
||||
|
||||
{/* Content */}
|
||||
|
||||
<Container className="relative z-10 h-full flex flex-col items-center justify-center py-16">
|
||||
<FadeInOnView>
|
||||
<H1 className="max-w-3xl text-center text-white mx-auto">
|
||||
Building the Future of Digital Sovereignty
|
||||
</H1>
|
||||
</FadeInOnView>
|
||||
|
||||
<FadeInOnView
|
||||
delayMs={300}
|
||||
className="mx-auto md:w-[60%] space-y-6 flex flex-col items-center"
|
||||
>
|
||||
<P className="mt-8 text-white text-center mx-auto">
|
||||
OurWorld creates and supports ventures that put sovereignty back in the hands of people and communities. Each venture in our ecosystem contributes to a future where individuals and organizations own their digital presence, data, and destiny.
|
||||
</P>
|
||||
</FadeInOnView>
|
||||
</Container>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
89
src/components/about/Mission.tsx
Normal file
89
src/components/about/Mission.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import { Logo_mission } from '@/components/Logo_mission'
|
||||
import { Logo_hero } from '@/components/Logo_hero'
|
||||
import { H2, Eyebrow, PS } from '@/components/UI/Texts'
|
||||
import { FadeInOnView } from '@/components/UI/FadeInOnView'
|
||||
|
||||
const stats = [
|
||||
{ label: 'Founded', value: '2021' },
|
||||
{ label: 'Employees', value: '37' },
|
||||
{ label: 'Countries', value: '12' },
|
||||
{ label: 'Raised', value: '$25M' },
|
||||
]
|
||||
|
||||
export function Mission() {
|
||||
return (
|
||||
<div className="bg-transparent lg:py-24 py-16">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto grid max-w-2xl grid-cols-1 items-start gap-x-6 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2">
|
||||
<div className="lg:pr-4">
|
||||
<div className="relative overflow-hidden rounded-lg bg-void px-6 pt-64 pb-9 shadow-2xl lg:max-w-lg lg:px-12 lg:pb-8">
|
||||
<img
|
||||
alt=""
|
||||
src="https://images.unsplash.com/photo-1630569267625-157f8f9d1a7e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80"
|
||||
className="absolute inset-0 size-full rounded-3xl object-cover brightness-125 saturate-0"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-void mix-blend-multiply" />
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute top-1/2 left-1/2 -ml-16 -translate-x-1/2 -translate-y-1/2 transform-gpu blur-3xl"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
clipPath:
|
||||
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
|
||||
}}
|
||||
className="aspect-1097/845 w-274.25 bg-linear-to-tr from-[#6EF3C3]/60 to-[#0AB782]opacity-40"
|
||||
/>
|
||||
</div>
|
||||
<figure className="relative isolate">
|
||||
<svg
|
||||
fill="none"
|
||||
viewBox="0 0 162 128"
|
||||
aria-hidden="true"
|
||||
className="absolute -top-4 -left-2 -z-10 h-32 stroke-white/20"
|
||||
>
|
||||
<path
|
||||
d="M65.5697 118.507L65.8918 118.89C68.9503 116.314 71.367 113.253 73.1386 109.71C74.9162 106.155 75.8027 102.28 75.8027 98.0919C75.8027 94.237 75.16 90.6155 73.8708 87.2314C72.5851 83.8565 70.8137 80.9533 68.553 78.5292C66.4529 76.1079 63.9476 74.2482 61.0407 72.9536C58.2795 71.4949 55.276 70.767 52.0386 70.767C48.9935 70.767 46.4686 71.1668 44.4872 71.9924L44.4799 71.9955L44.4726 71.9988C42.7101 72.7999 41.1035 73.6831 39.6544 74.6492C38.2407 75.5916 36.8279 76.455 35.4159 77.2394L35.4047 77.2457L35.3938 77.2525C34.2318 77.9787 32.6713 78.3634 30.6736 78.3634C29.0405 78.3634 27.5131 77.2868 26.1274 74.8257C24.7483 72.2185 24.0519 69.2166 24.0519 65.8071C24.0519 60.0311 25.3782 54.4081 28.0373 48.9335C30.703 43.4454 34.3114 38.345 38.8667 33.6325C43.5812 28.761 49.0045 24.5159 55.1389 20.8979C60.1667 18.0071 65.4966 15.6179 71.1291 13.7305C73.8626 12.8145 75.8027 10.2968 75.8027 7.38572C75.8027 3.6497 72.6341 0.62247 68.8814 1.1527C61.1635 2.2432 53.7398 4.41426 46.6119 7.66522C37.5369 11.6459 29.5729 17.0612 22.7236 23.9105C16.0322 30.6019 10.618 38.4859 6.47981 47.558L6.47976 47.558L6.47682 47.5647C2.4901 56.6544 0.5 66.6148 0.5 77.4391C0.5 84.2996 1.61702 90.7679 3.85425 96.8404L3.8558 96.8445C6.08991 102.749 9.12394 108.02 12.959 112.654L12.959 112.654L12.9646 112.661C16.8027 117.138 21.2829 120.739 26.4034 123.459L26.4033 123.459L26.4144 123.465C31.5505 126.033 37.0873 127.316 43.0178 127.316C47.5035 127.316 51.6783 126.595 55.5376 125.148L55.5376 125.148L55.5477 125.144C59.5516 123.542 63.0052 121.456 65.9019 118.881L65.5697 118.507Z"
|
||||
id="0ef284b8-28c2-426e-9442-8655d393522e"
|
||||
/>
|
||||
<use x={86} href="#0ef284b8-28c2-426e-9442-8655d393522e" />
|
||||
</svg>
|
||||
<blockquote className="mt-6 text-lg font-medium text-white">
|
||||
<p>
|
||||
"We need a human-centric Internet co-owned by all of us, as was intended from the start. One where everyone is equal, where everyone owns their own data, allowing human flourishing to thrive."
|
||||
</p>
|
||||
</blockquote>
|
||||
<figcaption className="mt-6 text-sm/6 text-gray-300">
|
||||
<strong className="font-semibold text-white">Kristof De Spiegeleer,</strong> OurWorld Co-Founder & CEO
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-base/7 text-gray-700 lg:max-w-xl">
|
||||
<FadeInOnView>
|
||||
<Eyebrow className="text-void">MISSION</Eyebrow>
|
||||
<H2 className="mt-2 text-void">
|
||||
Digital Sovereignty for All
|
||||
</H2>
|
||||
</FadeInOnView>
|
||||
<div className="max-w-xl">
|
||||
<FadeInOnView>
|
||||
<PS className="mt-6 text-void">
|
||||
We believe access to compute, data ownership, and digital tools should be <strong>fundamental rights</strong>, not privileges granted by corporations.Our ventures create a parallel system where individuals and communities can achieve true digital sovereignty.
|
||||
</PS>
|
||||
<PS className="mt-8 text-void">
|
||||
Our work spans decentralized internet infrastructure, sovereign data systems, legal structures for autonomy, and AI frameworks that amplify rather than replace human capability. The foundation was built over two decades developing decentralized internet infrastructure, made possible by thousands of contributors worldwide.
|
||||
</PS>
|
||||
<PS className="mt-8 text-void">
|
||||
Now we're expanding that foundation into a full ecosystem where sovereignty isn't just technical, it's legal, financial, and accessible.
|
||||
</PS>
|
||||
</FadeInOnView>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
101
src/components/about/Records.tsx
Normal file
101
src/components/about/Records.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import clsx from 'clsx'
|
||||
import { PS, H2, Eyebrow } from '@/components/UI/Texts'
|
||||
|
||||
const records = [
|
||||
{
|
||||
period: '1997–2002',
|
||||
title: 'World Records for Web Hosting',
|
||||
description:
|
||||
'Kept UEFA, NASA, and World Cup traffic online with continent-scale uptime.',
|
||||
showStream: true,
|
||||
},
|
||||
{
|
||||
period: '2005',
|
||||
title: 'The First Backup Data Duplication System in the World',
|
||||
description:
|
||||
'Cut enterprise backup footprints by up to 100× before dedupe was mainstream.',
|
||||
showStream: false,
|
||||
},
|
||||
{
|
||||
period: '2008',
|
||||
title: 'One of the First Cloud Systems',
|
||||
description:
|
||||
'Shipped the first Virtual Private Data Center and proved elastic compute trust.',
|
||||
showStream: false,
|
||||
},
|
||||
{
|
||||
period: '2010',
|
||||
title: 'The First Multi-Site Consistent Database',
|
||||
description:
|
||||
'Delivered failover that preserved every transaction across sovereign sites.',
|
||||
showStream: true,
|
||||
},
|
||||
{
|
||||
period: '2012',
|
||||
title: 'The First Unbreakable and Distributed Storage System',
|
||||
description:
|
||||
'Built tamper-proof storage that used 10× less energy and never went dark.',
|
||||
showStream: false,
|
||||
},
|
||||
{
|
||||
period: '2017',
|
||||
title: 'Probably the First Proof of Block Stake Blockchain',
|
||||
description:
|
||||
'Merged staking and settlement in one move, years before the market caught up.',
|
||||
showStream: false,
|
||||
},
|
||||
]
|
||||
|
||||
export function Records() {
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-transparent py-16 min-h-screen flex items-center">
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute inset-0 bg-gradient-to-b from-white/5 via-transparent to-white/5"
|
||||
/>
|
||||
<div className="relative mx-auto max-w-7xl px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<Eyebrow className="text-void">WORLD RECORDS</Eyebrow>
|
||||
< H2 className="mt-2 h2-default text-void">
|
||||
Milestones That Pushed the Internet Forward
|
||||
</H2>
|
||||
<PS className="mt-4 max-w-3xl text-sm text-gray-700 sm:text-base">
|
||||
Across decades of building resilient digital infrastructure, our team set new technical benchmarks that still define
|
||||
how mission-critical systems operate today.
|
||||
</PS>
|
||||
|
||||
<div className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
|
||||
{records.map((record) => (
|
||||
<article
|
||||
key={record.title}
|
||||
className={clsx(
|
||||
'group relative flex flex-col gap-4',
|
||||
)}
|
||||
>
|
||||
{record.showStream && (
|
||||
<span
|
||||
className="pointer-events-none absolute inset-y-4 left-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
<div className="my-3 h-[2px] w-3/4 bg-gray-300 overflow-hidden">
|
||||
<div className="h-full w-full bg-green animate-draw-line" />
|
||||
</div>
|
||||
<div className="text-xs font-semibold uppercase tracking-[0.25em] text-gray-800">
|
||||
{record.period}
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-semibold tracking-tight text-void">
|
||||
{record.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-800 lg:text-base">
|
||||
{record.description}
|
||||
</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user