Files
www_geomind/src/pages/about/components/TrackRecord.tsx
2025-10-11 06:18:46 +03:00

69 lines
3.0 KiB
TypeScript

import { motion } from 'framer-motion';
const records = [
{
title: 'World Records for Web Hosting (1997-2002)',
description:
'Our team started the Internet hosting and data center business in Europe. We hosted some of the largest websites in the world including UEFA, NASA, World Cup.',
},
{
title: 'The FIRST Backup Data Duplication system in the world (2005)',
description:
'Our advancements in this field brought up to 100x benefit compared to the status quo running in data centers at the time.',
},
{
title: 'One of the FIRST Cloud Systems (2008)',
description:
'We were one of the pioneers of cloud computing in general. Terms like Virtual Private Data Center were invented by us.',
},
{
title: 'The FIRST multi-site consistent database (2010)',
description:
'We invented a method to store data in a database over multiple sites in such a way data could never be lost, corrupted, or order of updates changed.',
},
{
title: 'The FIRST unbreakable and distributed storage system (2012)',
description:
'Not only incorruptible, our system also boasts 10x energy efficiency compared to alternative solutions, marking a significant technological leap.',
},
{
title: 'Probably the FIRST proof of block stake blockchain (2017)',
description:
'This blockchain was sustainable and scalable and allowed people to transact their stake as well as their digital currency in the same transaction, which still to date is novel.',
},
];
export const TrackRecord = () => {
return (
<section className="py-16 text-slate-100 lg:py-24">
<div className="mx-auto max-w-3xl text-center">
<h2 className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
Our Track Record
</h2>
<p className="mt-4 text-3xl font-semibold text-white sm:text-4xl">
Our team has been at the forefront of datacenter and cloud innovation for decades,
building systems that were faster, safer, and more scalable than anything before.
</p>
</div>
<div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{records.map((record, index) => (
<motion.div
key={record.title}
initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.25 }}
transition={{ duration: 0.5, delay: index * 0.05 }}
className="flex h-full flex-col rounded-3xl border border-white/10 bg-black p-8 shadow-none backdrop-blur"
>
<div className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-brand-500/15 font-semibold text-brand-200">
{index + 1}
</div>
<h3 className="mt-6 text-lg font-semibold text-white">{record.title}</h3>
<p className="mt-3 text-sm leading-6 text-slate-300">{record.description}</p>
</motion.div>
))}
</div>
</section>
);
};