update why nearle page

2026-07-19 23:07:18 +05:30
parent 4073dc8386
commit 9abd59ec85
51 changed files with 3748 additions and 62 deletions
--- a/src/components/why-nearle/WhyNearleHero.tsx
+++ b/src/components/why-nearle/WhyNearleHero.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { motion, useReducedMotion } from "framer-motion";
+import { HeroLogo } from "@/components/heroes/HeroLogo";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
+
+const badgeVariant = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.5, delay: 0.9, ease: EASE } },
+};
+
+const headingVariant = {
+  hidden: { opacity: 0, y: 24 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.6, delay: 1.0, ease: EASE } },
+};
+
+const descVariant = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.55, delay: 1.1, ease: EASE } },
+};
+
+const ctaVariant = {
+  hidden: { opacity: 0, y: 16 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.5, delay: 1.2, ease: EASE } },
+};
+
+export function WhyNearleHero() {
+  const shouldReduce = useReducedMotion();
+
+  return (
+    <section className="w-full flex flex-col select-none bg-white">
+      <div className="relative overflow-hidden border-b border-white/10 bg-gradient-to-br from-[#1A0322] via-[#2B0040] to-[#0A000D]">
+        {/* Ambient background image */}
+        <motion.div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 z-0"
+          initial={shouldReduce ? undefined : { opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 1.4, ease: "easeOut" }}
+        >
+          <Image
+            src="/why-nearle.png"
+            alt=""
+            fill
+            sizes="100vw"
+            className="absolute inset-0 h-full w-full object-cover object-center"
+            priority
+            fetchPriority="high"
+          />
+          {/* Dark gradient overlay to make text pop while keeping the image vibrant */}
+          <div className="absolute inset-0 bg-gradient-to-b from-[#1A0322]/80 via-black/45 to-[#0A000D]/90" />
+        </motion.div>
+
+        <div className="page-container relative z-10 flex min-h-[520px] items-center justify-center px-6 pt-20 pb-14 sm:px-8 sm:pt-24 md:min-h-[76vh] md:py-16">
+          <div className="relative z-20 flex w-full max-w-[880px] flex-col items-center text-center px-2 md:px-8">
+            <HeroLogo />
+
+            <motion.span
+              variants={badgeVariant}
+              initial="hidden"
+              animate="visible"
+              className="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full text-xs font-bold tracking-widest bg-white text-[#6330D6] shadow-md uppercase mb-6 w-fit"
+            >
+              What is AI Commerce?
+            </motion.span>
+
+            <motion.h1
+              variants={headingVariant}
+              initial="hidden"
+              animate="visible"
+              className="font-display text-4xl sm:text-5xl lg:text-[52px] xl:text-[60px] font-extrabold text-white leading-[1.08] tracking-tight [text-shadow:0_4px_32px_rgba(0,0,0,0.5)]"
+            >
+              AI Commerce Starts
+              <br />
+              Where <span className="text-[#C9A2FF]">Quick Commerce</span>
+              <br />
+              Stops.
+            </motion.h1>
+
+            <motion.p
+              variants={descVariant}
+              initial="hidden"
+              animate="visible"
+              className="max-w-[660px] text-lg md:text-xl text-white/90 font-medium mt-6 leading-[1.6]"
+            >
+              Neighborhood stores already have the trust, the customers, and the
+              location. Nearle adds the AI, the digital storefront, and the
+              ordering — so local commerce finally scales without losing what
+              makes it local.
+            </motion.p>
+
+            <motion.div
+              variants={ctaVariant}
+              initial="hidden"
+              animate="visible"
+              className="mt-9"
+            >
+              <Link
+                href="/platform"
+                className="group inline-flex items-center gap-2 rounded-full bg-white px-8 py-4 text-base font-black text-[#16001D] shadow-[0_16px_30px_rgba(0,0,0,0.35)] transition-transform duration-200 hover:scale-[1.03] active:scale-95"
+              >
+                Learn About Our Platform
+                <MaterialIcon
+                  icon="arrow_forward"
+                  size={20}
+                  className="transition-transform duration-200 group-hover:translate-x-0.5"
+                />
+              </Link>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}