106 lines
6.2 KiB
TypeScript
106 lines
6.2 KiB
TypeScript
import { motion } from 'framer-motion';
|
||
|
||
const records = [
|
||
{
|
||
title: 'World Records for Web Hosting (1997-2002)',
|
||
description: 'Kept UEFA, NASA, and World Cup traffic online with continent-scale uptime.',
|
||
layout: 'lg:col-span-3 lg:row-span-2',
|
||
showStream: true,
|
||
},
|
||
{
|
||
title: 'The First Backup Data Duplication System in the World (2005)',
|
||
description: 'Cut enterprise backup footprints by up to 100× before dedupe was mainstream.',
|
||
layout: 'lg:col-span-3',
|
||
},
|
||
{
|
||
title: 'One of the First Cloud Systems (2008)',
|
||
description: 'Shipped the first Virtual Private Data Center and proved elastic compute trust.',
|
||
layout: 'lg:col-span-3',
|
||
},
|
||
{
|
||
title: 'The First Multi-Site Consistent Database (2010)',
|
||
description: 'Delivered failover that preserved every transaction across sovereign sites.',
|
||
layout: 'lg:col-span-3 lg:row-span-2',
|
||
showStream: true,
|
||
},
|
||
{
|
||
title: 'The First Unbreakable and Distributed Storage System (2012)',
|
||
description: 'Built tamper-proof storage that used 10× less energy and never went dark.',
|
||
layout: 'lg:col-span-3',
|
||
},
|
||
{
|
||
title: 'Probably the First Proof of Block Stake Blockchain (2017)',
|
||
description: 'Merged staking and settlement in one move—years before the market caught up.',
|
||
layout: 'lg:col-span-3',
|
||
},
|
||
] as const;
|
||
|
||
export const AboutHero = () => {
|
||
return (
|
||
<section className="relative isolate bg-black px-6 pb-16 pt-0 sm:px-10 sm:pb-20 sm:pt-2 lg:px-16 lg:pb-24 lg:pt-4">
|
||
<div className="mx-auto w-full max-w-7xl">
|
||
<div className="grid gap-8 sm:gap-10 lg:grid-cols-[minmax(360px,420px)_minmax(0,1fr)] lg:items-stretch lg:gap-12 xl:grid-cols-[minmax(400px,500px)_minmax(0,1fr)]">
|
||
<div className="relative h-full">
|
||
<div className="group relative overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#06091d] via-[#0e1540] to-[#1c1448] text-white shadow-[0_35px_90px_-45px_rgba(15,23,42,0.95)] transition-all duration-500 hover:-translate-y-1.5 hover:border-brand-400/60 hover:shadow-[0_40px_120px_-45px_rgba(99,102,241,0.55)]">
|
||
<img
|
||
src="/images/hometech2.jpg"
|
||
alt=""
|
||
className="absolute inset-0 h-full w-full object-cover opacity-40 mix-blend-screen transition-transform duration-700 group-hover:scale-105"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent mix-blend-overlay transition-opacity duration-500 group-hover:opacity-90" />
|
||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(79,70,229,0.4),_transparent_60%)] opacity-90 transition-opacity duration-500 group-hover:opacity-100" />
|
||
<div className="absolute top-[-25%] right-[-5%] h-[420px] w-[420px] rounded-full bg-[#6366f1]/30 blur-3xl transition-transform duration-700 group-hover:scale-110" />
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 32 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, ease: 'easeOut' }}
|
||
className="relative z-10 px-6 py-20 sm:px-12 lg:px-16 lg:py-24"
|
||
>
|
||
<span className="inline-flex items-center gap-3 text-[0.68rem] uppercase tracking-[0.42em] text-white/70">
|
||
<span className="h-px w-10 bg-white/40" />
|
||
About GeoMind
|
||
<span className="h-px w-10 bg-white/40" />
|
||
</span>
|
||
<h1 className="mt-8 max-w-3xl text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl lg:leading-[1.1]">
|
||
We Know a Thing or Two About Datacenters
|
||
</h1>
|
||
<p className="mt-6 max-w-3xl text-base text-white/80 sm:text-lg">
|
||
For decades, we've built the technologies that power the internet, from record-breaking
|
||
web hosting to unbreakable cloud systems. Now, we're redefining what datacenters stand
|
||
for: secure, sovereign, and profitable infrastructure designed for people, the planet. Here’s the short list of milestones that still guide our build.
|
||
</p>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid h-full grid-cols-1 gap-3 sm:grid-cols-2 lg:auto-rows-[minmax(120px,_1fr)] lg:grid-cols-6">
|
||
{records.map((record, index) => (
|
||
<motion.article
|
||
key={record.title}
|
||
initial={{ opacity: 0, y: 24 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.05 }}
|
||
className={`group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.04] p-5 backdrop-blur transition-all duration-300 hover:-translate-y-1.5 hover:border-brand-400/60 hover:bg-white/[0.08] hover:shadow-[0_32px_80px_-50px_rgba(56,189,248,0.55)] ${record.layout}`}
|
||
>
|
||
<h3 className="text-lg font-semibold leading-snug text-white">{record.title}</h3>
|
||
<p className="mt-3 text-sm leading-6 text-slate-200">{record.description}</p>
|
||
{record.showStream && (
|
||
<div className="pointer-events-none absolute inset-x-5 bottom-5 h-3 overflow-hidden rounded-full border border-white/10 bg-white/[0.06]">
|
||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(59,130,246,0.45),transparent_72%)] opacity-70" />
|
||
<div className="absolute inset-0 bg-[linear-gradient(90deg,rgba(56,189,248,0)_0%,rgba(99,102,241,0.75)_50%,rgba(56,189,248,0)_100%)] opacity-90 [background-size:200%_100%] animate-data-stream" />
|
||
<div
|
||
className="absolute inset-0 bg-[linear-gradient(90deg,rgba(255,255,255,0)_0%,rgba(255,255,255,0.55)_12%,rgba(255,255,255,0)_40%)] mix-blend-screen opacity-70 [background-size:220%_100%] animate-data-stream"
|
||
style={{ animationDelay: '1.4s' }}
|
||
/>
|
||
</div>
|
||
)}
|
||
<div className="absolute -right-12 -top-12 h-24 w-24 rounded-full bg-brand-500/10 blur-3xl transition-transform duration-500 group-hover:scale-110" />
|
||
</motion.article>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|