initial dev

src/pages/home/components/HeroSection.tsx

@@ -0,0 +1,48 @@
+import { motion } from 'framer-motion';
+
+export const HeroSection = () => {
+  return (
+    <section className="relative snap-start">
+      <div className="relative flex h-screen w-full flex-col overflow-hidden bg-mist">
+        <video className="absolute inset-0 h-full w-full object-cover" autoPlay muted loop playsInline>
+          <source src="/videos/hero.mp4" type="video/mp4" />
+        </video>
+
+        <div className="absolute inset-0 bg-mist/70 backdrop-blur-[2px]" />
+
+        <div className="relative z-10 mx-auto flex h-full w-full max-w-7xl flex-col justify-between px-6 pb-16 pt-32 sm:px-10 lg:px-20">
+          <motion.div
+            initial={{ opacity: 0, y: 40 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, ease: 'easeOut' }}
+            className="max-w-3xl space-y-6"
+          >
+            <span className="text-xs font-semibold uppercase tracking-[0.4em] text-ink/70">
+              Geomind
+            </span>
+            <h1 className="text-4xl font-medium leading-tight text-ink sm:text-5xl md:text-6xl">
+              Geospatial intelligence for real-world momentum.
+            </h1>
+            <p className="max-w-xl text-lg text-ink/80">
+              Introduce a compelling statement here that speaks to the transformation you deliver.
+              Keep it short, grounded, and ready for future storytelling.
+            </p>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, ease: 'easeOut', delay: 0.4 }}
+            className="flex items-center justify-between text-xs uppercase tracking-[0.3em] text-ink/60"
+          >
+            <span>Scroll to explore</span>
+            <div className="flex items-center gap-3">
+              <span className="h-px w-16 bg-ink/40" />
+              <span>Landing overview</span>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};