Initial commit

src/pages/home/components/ImpactBanner.tsx

@@ -0,0 +1,33 @@
+import { motion } from 'framer-motion';
+import { PrimaryButton } from '../../../components/ui/PrimaryButton';
+
+export const ImpactBanner = () => {
+  return (
+    <section className="relative overflow-hidden rounded-3xl bg-white shadow-subtle">
+      <div className="absolute inset-0 -z-10">
+        <img
+          src="/images/mesh2.gif"
+          alt=""
+          className="h-full w-full object-cover opacity-50"
+        />
+        <div className="absolute inset-0 bg-gradient-to-br from-white via-white/80 to-white/40 backdrop-blur" />
+      </div>
+      <motion.div
+        initial={{ opacity: 0, y: 28 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.3 }}
+        transition={{ duration: 0.6, ease: 'easeOut' }}
+        className="px-6 py-12 text-center sm:px-10 lg:px-16 lg:py-16"
+      >
+        <h2 className="text-3xl font-semibold text-ink sm:text-4xl">Designed for Real-World Impact</h2>
+        <p className="mx-auto mt-5 max-w-3xl text-base text-slate-600 sm:text-lg">
+          GeoMind enables enterprises and infrastructure providers to run secure, profitable,
+          efficient, and sovereign clouds anywhere.
+        </p>
+        <div className="mt-8 flex justify-center">
+          <PrimaryButton to="/usecases">Use Cases</PrimaryButton>
+        </div>
+      </motion.div>
+    </section>
+  );
+};