Initial commit

src/pages/about/components/TrackRecord.tsx

@@ -0,0 +1,68 @@
+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 lg:py-24">
+      <div className="mx-auto max-w-3xl text-center">
+        <h2 className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
+          Our Track Record
+        </h2>
+        <p className="mt-4 text-3xl font-semibold text-ink 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-slate-100 bg-white/90 p-8 shadow-subtle backdrop-blur"
+          >
+            <div className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-brand-50 font-semibold text-brand-600">
+              {index + 1}
+            </div>
+            <h3 className="mt-6 text-lg font-semibold text-ink">{record.title}</h3>
+            <p className="mt-3 text-sm leading-6 text-slate-600">{record.description}</p>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+};