animation fixed in section

2026-06-29 16:52:46 +05:30
parent 9449accea6
commit 114b49570b
36 changed files with 2308 additions and 1301 deletions
--- a/src/components/heroes/BusinessHero.tsx
+++ b/src/components/heroes/BusinessHero.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
+import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
+import {
+  slideInLeftSubtle,
+  fadeUp,
+  fadeIn,
+  scaleIn,
+  staggerContainer,
+  viewport,
+} from "@/lib/animations";
+
+const HERO_BENEFITS = [
+  { title: "More Visibility Across Nearle", icon: "visibility", desc: "Get discovered by locals" },
+  { title: "Easy Order Management", icon: "assignment", desc: "Track and fulfill cleanly" },
+  { title: "Grow Repeat Customers", icon: "trending_up", desc: "Build neighborhood loyalty" },
+  { title: "Local Delivery Support", icon: "local_shipping", desc: "Deliver fast & verified" },
+];
+
+const COLLAGE_CARDS = [
+  { text: "Nearby Customers", icon: "people" },
+  { text: "Orders & Offers", icon: "local_offer" },
+  { text: "Local Delivery Support", icon: "local_shipping" },
+];
+
+// Choreography: badge slides left → title fades up → description fades in (opacity only) → CTAs scale in
+const badgeVariant = slideInLeftSubtle;
+const titleVariant = {
+  hidden: { opacity: 0, y: 28 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.55, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] },
+  },
+};
+const descVariant = fadeIn;
+const ctaVariant = scaleIn;
+
+export function BusinessHero() {
+  return (
+    <section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
+      <div className="border-b border-[#6330D6]/10">
+        <div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 max-w-[1600px] mx-auto">
+
+          {/* Left Column: animated with unique stagger */}
+          <motion.div
+            className="flex flex-col text-left max-w-xl"
+            variants={staggerContainer}
+            initial="hidden"
+            animate="visible"
+          >
+            <motion.span
+              variants={badgeVariant}
+              className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit"
+            >
+              Nearle for Business
+            </motion.span>
+
+            <motion.h1
+              variants={titleVariant}
+              className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight"
+            >
+              Grow Your Local Business,
+              <br />
+              <span className="text-[#6330D6]">Neighbourhood by Neighbourhood.</span>
+            </motion.h1>
+
+            <motion.p
+              variants={descVariant}
+              className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed"
+            >
+              Get discovered by nearby customers, manage orders, and build repeat business from one simple platform.
+            </motion.p>
+
+            <motion.div
+              variants={ctaVariant}
+              className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto"
+            >
+              <Link
+                href="/contact"
+                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
+              >
+                List Your Store
+              </Link>
+              <Link
+                href="/contact"
+                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
+              >
+                Explore Solutions
+              </Link>
+            </motion.div>
+          </motion.div>
+
+          {/* Right Column: subtle fade-in — HeroVisualCollage internal animations choreograph each element */}
+          <motion.div
+            className="w-full"
+            variants={fadeIn}
+            initial="hidden"
+            animate="visible"
+            transition={{ delay: 0.2 }}
+          >
+            <HeroVisualCollage
+              centerImage="/nearlenewlogo.png"
+              leftImage="/images/cat-daily-essentials.png"
+              rightImage="/Nearle Business.png"
+              glassCards={COLLAGE_CARDS}
+              isPhoneCenter={false}
+            />
+          </motion.div>
+        </div>
+      </div>
+
+      <div className="bg-[#FAF7FD] border-b border-[#6330D6]/10">
+        <div className="px-6 md:px-12 lg:px-16 max-w-[1600px] mx-auto">
+          <FeatureStatsRow items={HERO_BENEFITS} />
+        </div>
+      </div>
+    </section>
+  );
+}