Initial commit

src/pages/about/components/AboutHero.tsx

@@ -0,0 +1,34 @@
+import { motion } from 'framer-motion';
+
+export const AboutHero = () => {
+  return (
+    <section className="relative overflow-hidden rounded-3xl text-white">
+      <img
+        src="/images/hometech2.jpg"
+        alt=""
+        className="absolute inset-0 h-full w-full object-cover"
+      />
+      <div className="absolute inset-0 bg-gradient-to-br from-[#0f172a]/80 via-[#1e1b4b]/70 to-[#312e81]/80" />
+      <motion.div
+        initial={{ opacity: 0, y: 32 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.3 }}
+        transition={{ duration: 0.6, ease: 'easeOut' }}
+        className="relative z-10 px-6 py-20 sm:px-10 lg:px-16 lg:py-24"
+      >
+        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white/70">
+          About GeoMind
+        </p>
+        <h1 className="mt-6 text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl">
+          We Know a Thing or Two About Datacenters
+        </h1>
+        <p className="mt-6 max-w-3xl text-base text-white/75 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,
+          and the AI-powered future.
+        </p>
+      </motion.div>
+    </section>
+  );
+};

src/pages/about/components/MissionVision.tsx

@@ -0,0 +1,45 @@
+import { motion } from 'framer-motion';
+
+export const MissionVision = () => {
+  return (
+    <section className="py-16 lg:py-24">
+      <div className="relative overflow-hidden rounded-3xl border border-slate-100 bg-white/80 p-8 shadow-subtle backdrop-blur lg:p-16">
+        <div className="pointer-events-none absolute -top-36 right-10 h-72 w-72 rounded-full bg-brand-100 opacity-50 blur-3xl" />
+        <motion.div
+          initial={{ opacity: 0, y: 24 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.35 }}
+          transition={{ duration: 0.6, ease: 'easeOut' }}
+          className="relative z-10 space-y-12 lg:grid lg:grid-cols-2 lg:gap-16 lg:space-y-0"
+        >
+          <div>
+            <h2 className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
+              Our Mission
+            </h2>
+            <h3 className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
+              Building Inclusive Digital Infrastructure as a Fundamental Human Right
+            </h3>
+            <p className="mt-6 text-base text-slate-600 sm:text-lg">
+              GeoMind is committed to placing people and the planet at the forefront of our mission.
+              We believe that access to computing resources is a basic human right. By integrating
+              sustainable practices and innovative technologies, we aim to create an inclusive digital
+              infrastructure that empowers communities and fosters global equity.
+            </p>
+          </div>
+          <div className="flex flex-col justify-between text-right">
+            <h2 className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
+              Our Journey
+            </h2>
+            <p className="mt-4 text-base text-slate-600 sm:text-lg">
+              We began by building the backbone of modern digital infrastructure. Over the years, we've
+              pioneered cloud computing, advanced storage systems, and scalable, secure datacenter
+              technologies. We're now creating the next generation of datacenters, a new standard built
+              for the demands of the AI era, offering efficiency, sovereignty, and profitability that
+              traditional datacenters simply can't deliver.
+            </p>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};

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>
+  );
+};