Initial commit

src/pages/usecases/components/UseCasesGrid.tsx

@@ -0,0 +1,89 @@
+import { motion } from 'framer-motion';
+
+const useCases = [
+  {
+    title: 'Tier-S Datacenters',
+    description:
+      "GeoMind's datacenters are 60% more efficient, disaster-resistant, highly secure, fully private, and can be deployed in weeks rather than years, offering a faster, safer, and smarter solution for modern data needs.",
+    image: '/images/tier-s.jpeg',
+  },
+  {
+    title: 'Tier-H Datacenters',
+    description:
+      "GeoMind's distributed datacenter architecture extends from core to edge, seamlessly scaling into homes, offices, and communities. Its ultra-efficient AI, compute, and storage nodes deliver unmatched cost efficiency, performance, and scalability.",
+    image: '/images/tier-h.jpeg',
+  },
+  {
+    title: 'Project Mycelium',
+    description:
+      'Project Mycelium is a core use case of our ecosystem, providing a decentralized, scalable, and secure infrastructure. Built on a global network of independent nodes, it allows individuals and businesses to participate in a more open, distributed, and participatory cloud and Internet model.',
+    image: '/images/mycelium.jpeg',
+  },
+  {
+    title: 'Zanzibar Digital Free Zone',
+    description:
+      'Zanzibar Digital Free Zone offers a sovereign jurisdiction for digital innovation, allowing businesses to operate with regulatory clarity and independent dispute resolution. It supports the emerging Real World Assets (RWA) economy, enabling compliant management of digital and physical assets.',
+    image: '/images/freezone.jpeg',
+  },
+  {
+    title: 'COOP Cloud',
+    description:
+      'COOP Cloud is a global cooperative where every user is a member with one vote. Offering a decentralized alternative to centralized cloud providers, it empowers users to deploy nodes worldwide, aiming to create Augmented Collective Intelligence with over one million nodes globally.',
+    image: '/images/coop.jpeg',
+  },
+  {
+    title: 'Sovereign Cloud & Internet for Countries',
+    description:
+      'Most countries lack independent Internet infrastructure and rely on foreign operators. GeoMind enables countries to deploy their own sovereign Cloud & Internet, ensuring economic benefits, data sovereignty, and local control. Several governments are already exploring this.',
+    image: '/images/countries.jpeg',
+  },
+];
+
+export const UseCasesGrid = () => {
+  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 -bottom-20 -left-32 h-72 w-72 rounded-full bg-brand-100 opacity-50 blur-3xl" />
+        <div className="pointer-events-none absolute -top-24 right-12 h-48 w-48 rounded-full bg-brand-200 opacity-40 blur-3xl" />
+        <motion.div
+          initial={{ opacity: 0, y: 24 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.3 }}
+          transition={{ duration: 0.6, ease: 'easeOut' }}
+          className="relative z-10"
+        >
+          <h2 className="text-3xl font-semibold text-ink sm:text-4xl">Use Cases</h2>
+          <p className="mt-5 max-w-4xl text-base text-slate-600 sm:text-lg">
+            GeoMind's next-generation datacenter architecture extends from core to edge, seamlessly
+            connecting Tier S hyperscale facilities with Tier H local nodes to create a unified,
+            sovereign infrastructure. Up to 60% more energy-efficient and built for resilience, privacy,
+            and quantum-safe security, it can be deployed in weeks rather than years. These capabilities
+            power the transformative use cases below, driving a more secure, efficient, and autonomous
+            digital future.
+          </p>
+          <div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+            {useCases.map((useCase, index) => (
+              <motion.article
+                key={useCase.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="overflow-hidden rounded-3xl border border-slate-100 bg-white/90 shadow-subtle"
+              >
+                <div className="relative h-48 overflow-hidden">
+                  <img src={useCase.image} alt={useCase.title} className="h-full w-full object-cover" />
+                  <div className="absolute inset-0 bg-gradient-to-t from-ink/70 via-transparent to-transparent" />
+                  <h3 className="absolute bottom-4 left-4 text-lg font-semibold text-white">
+                    {useCase.title}
+                  </h3>
+                </div>
+                <p className="p-6 text-sm leading-6 text-slate-600">{useCase.description}</p>
+              </motion.article>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};