diff --git a/public/Gemini_Generated_Image_lxh416lxh416lxh4.png b/public/Gemini_Generated_Image_lxh416lxh416lxh4.png new file mode 100644 index 0000000..1887d63 Binary files /dev/null and b/public/Gemini_Generated_Image_lxh416lxh416lxh4.png differ diff --git a/public/nerale (1).png b/public/nerale (1).png new file mode 100644 index 0000000..dce4953 Binary files /dev/null and b/public/nerale (1).png differ diff --git a/src/app/brands/page.tsx b/src/app/brands/page.tsx index ce27a83..b3515cb 100644 --- a/src/app/brands/page.tsx +++ b/src/app/brands/page.tsx @@ -2,8 +2,7 @@ import React from "react"; import Link from "next/link"; import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { PremiumPageShell } from "@/components/layout/PremiumPageShell"; -import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage"; -import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow"; +import { BrandsHero } from "@/components/heroes/BrandsHero"; import { FAQAccordion } from "@/components/ui/FAQAccordion"; import { AnimatedSection } from "@/components/motion/AnimatedSection"; import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid"; @@ -22,13 +21,6 @@ export const metadata: Metadata = { }, }; -const HERO_STATS = [ - { title: "Distribution Network", icon: "hub", desc: "Neighbourhood stores across city" }, - { title: "Retail Visibility", icon: "visibility", desc: "Premium shelf positioning" }, - { title: "Brand Campaigns", icon: "campaign", desc: "Hyperlocal promotions" }, - { title: "Real-Time Analytics", icon: "analytics", desc: "Sales & reach data" }, -]; - const WHAT_WE_OFFER = [ { icon: "hub", @@ -153,67 +145,10 @@ const FAQ_ITEMS = [ ]; export default function BrandsPage() { - const collageCards = [ - { text: "Local Distribution", icon: "hub" }, - { text: "Brand Campaigns", icon: "campaign" }, - { text: "Retail Analytics", icon: "analytics" }, - ]; - return ( {/* ─── Hero Section ─── */} -
-
-
-
- - Brand Partnerships - - -

- Expand Your Brand Across -
- Local Communities. -

- -

- Nearle connects FMCG brands, food companies, and local manufacturers with verified neighbourhood stores and their loyal customer communities. -

- -
- - Talk to Sales - - - See Partnership Process - -
-
- -
- -
-
-
- -
-
- -
-
-
+ {/* ─── What We Offer ─── */}
diff --git a/src/app/delivery-partners/page.tsx b/src/app/delivery-partners/page.tsx index d689328..1922eee 100644 --- a/src/app/delivery-partners/page.tsx +++ b/src/app/delivery-partners/page.tsx @@ -26,7 +26,7 @@ export const metadata: Metadata = { const HERO_STATS = [ { title: "Flexible Hours", icon: "schedule", desc: "Work when it suits you" }, { title: "Weekly Payouts", icon: "payments", desc: "Earnings settled every week" }, - { title: "Short Distances", icon: "near_me", desc: "Deliver within 2km radius" }, + { title: "Short Distances", icon: "near_me", desc: "Deliver within your neighbourhood" }, { title: "Local Support", icon: "support_agent", desc: "Our team is always there" }, ]; @@ -46,7 +46,7 @@ const BENEFITS = [ { icon: "near_me", title: "Short Local Deliveries", - desc: "Deliver within a 2km radius of your neighbourhood. No long-distance trips. No highway runs. Stay close to home.", + desc: "Deliver within your neighbourhood. No long-distance trips. No highway runs. Stay close to home.", tone: "bg-[#6330D6]/8 text-[#6330D6]", }, { diff --git a/src/components/heroes/AboutHero.tsx b/src/components/heroes/AboutHero.tsx index 7ef4cb5..62c332a 100644 --- a/src/components/heroes/AboutHero.tsx +++ b/src/components/heroes/AboutHero.tsx @@ -3,6 +3,7 @@ import Image from "next/image"; import { motion } from "framer-motion"; import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow"; +import { HeroLogo } from "@/components/heroes/HeroLogo"; import { staggerContainer } from "@/lib/animations"; const HERO_STATS = [ @@ -14,19 +15,20 @@ const HERO_STATS = [ const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number]; +// Shared cascade timing: logo settles at ~1.2s, then badge → heading → description const badgeVariant = { hidden: { opacity: 0, y: 10, scale: 0.95 }, - visible: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.38, ease: EASE } }, + visible: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.38, delay: 0.9, ease: EASE } }, }; const titleVariant = { hidden: { opacity: 0, y: 28 }, - visible: { opacity: 1, y: 0, transition: { duration: 0.65, ease: EASE } }, + visible: { opacity: 1, y: 0, transition: { duration: 0.65, delay: 1.05, ease: EASE } }, }; const descVariant = { hidden: { opacity: 0, y: 18 }, - visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: EASE } }, + visible: { opacity: 1, y: 0, transition: { duration: 0.5, delay: 1.25, ease: EASE } }, }; export function AboutHero() { @@ -60,6 +62,8 @@ export function AboutHero() { initial="hidden" animate="visible" > + + {/* Badge */} +
+ {/* Background: modern Indian shopping street — boutique storefronts, real photography */} + + + + + {/* Overlay: dark behind the text on the left, fading out so the storefront stays vivid on the right */} +
+ +
+
+ + + + Nearle for D2C Brands + + + + Grow Your Brand, +
+ Right Around +
+ Your Customers. + + + + Help your D2C brand reach nearby customers, increase repeat purchases, and build a loyal local community—all from one powerful platform. + + + +
+
+
+
+ ); +} diff --git a/src/components/heroes/BusinessHero.tsx b/src/components/heroes/BusinessHero.tsx index 54c36b2..2c7e20b 100644 --- a/src/components/heroes/BusinessHero.tsx +++ b/src/components/heroes/BusinessHero.tsx @@ -3,11 +3,8 @@ import Image from "next/image"; import { motion } from "framer-motion"; import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow"; -import { - slideInLeftSubtle, - fadeIn, - staggerContainer, -} from "@/lib/animations"; +import { HeroLogo } from "@/components/heroes/HeroLogo"; +import { staggerContainer } from "@/lib/animations"; const HERO_BENEFITS = [ { title: "More Visibility Across Nearle", icon: "visibility", desc: "Get discovered by locals" }, @@ -16,16 +13,21 @@ const HERO_BENEFITS = [ { title: "Local Delivery Support", icon: "local_shipping", desc: "Deliver fast & verified" }, ]; -const badgeVariant = slideInLeftSubtle; +const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number]; + +// Shared cascade timing: logo settles at ~1.2s, then badge → heading → description +const badgeVariant = { + hidden: { opacity: 0, x: -20 }, + visible: { opacity: 1, x: 0, transition: { duration: 0.5, delay: 0.9, ease: EASE } }, +}; 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] }, - }, + visible: { opacity: 1, y: 0, transition: { duration: 0.55, delay: 1.05, ease: EASE } }, +}; +const descVariant = { + hidden: { opacity: 0 }, + visible: { opacity: 1, transition: { duration: 0.45, delay: 1.25, ease: "easeOut" as const } }, }; -const descVariant = fadeIn; export function BusinessHero() { return ( @@ -52,6 +54,8 @@ export function BusinessHero() { initial="hidden" animate="visible" > + + (null); + const isInView = useInView(ref, { amount: 0.2 }); + const [settled, setSettled] = useState(false); + + return ( +
+ !settled && setSettled(true)} + > + + Nearle + + +
+ ); +} diff --git a/src/components/heroes/PeopleHero.tsx b/src/components/heroes/PeopleHero.tsx index 3cfb157..30ba479 100644 --- a/src/components/heroes/PeopleHero.tsx +++ b/src/components/heroes/PeopleHero.tsx @@ -3,12 +3,8 @@ import Image from "next/image"; import { motion } from "framer-motion"; import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow"; -import { - scaleInSpring, - fadeUpStrong, - fadeUp, - staggerFast, -} from "@/lib/animations"; +import { HeroLogo } from "@/components/heroes/HeroLogo"; +import { staggerFast } from "@/lib/animations"; const HERO_STATS = [ { title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" }, @@ -17,9 +13,21 @@ const HERO_STATS = [ { title: "Trusted Platform", icon: "star", desc: "Loved by local shoppers" }, ]; -const badgeVariant = scaleInSpring; -const titleVariant = fadeUpStrong; -const descVariant = fadeUp; +const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number]; + +// Shared cascade timing: logo settles at ~1.2s, then badge → heading → description +const badgeVariant = { + hidden: { opacity: 0, scale: 0.88 }, + visible: { opacity: 1, scale: 1, transition: { type: "spring" as const, stiffness: 280, damping: 20, delay: 0.9 } }, +}; +const titleVariant = { + hidden: { opacity: 0, y: 36 }, + visible: { opacity: 1, y: 0, transition: { duration: 0.65, delay: 1.05, ease: EASE } }, +}; +const descVariant = { + hidden: { opacity: 0, y: 24 }, + visible: { opacity: 1, y: 0, transition: { duration: 0.5, delay: 1.25, ease: EASE } }, +}; export function PeopleHero() { return ( @@ -45,6 +53,8 @@ export function PeopleHero() { initial="hidden" animate="visible" > + + (null); + + // Subtle mouse parallax: background drifts 5px toward the cursor + const mouseX = useMotionValue(0); + const mouseY = useMotionValue(0); + const springX = useSpring(mouseX, { stiffness: 60, damping: 20, mass: 0.5 }); + const springY = useSpring(mouseY, { stiffness: 60, damping: 20, mass: 0.5 }); + const bgParallaxX = useTransform(springX, [-0.5, 0.5], [-5, 5]); + const bgParallaxY = useTransform(springY, [-0.5, 0.5], [-5, 5]); + + function handleMouseMove(e: MouseEvent) { + if (shouldReduce) return; + const rect = e.currentTarget.getBoundingClientRect(); + mouseX.set((e.clientX - rect.left) / rect.width - 0.5); + mouseY.set((e.clientY - rect.top) / rect.height - 0.5); + } + + function handleMouseLeave() { + mouseX.set(0); + mouseY.set(0); + } return (
-
+
-
+
- +
+ + {/* Badge */} Welcome to Nearle - {/* H1: line-by-line mask reveal */} - + {/* H1: line-by-line reveal */} +
Everything Local. @@ -110,11 +143,13 @@ export function Hero() { {/* Description */} Discover verified local stores, exclusive offers, fast delivery, and a better way to shop within your neighbourhood. - +
@@ -150,7 +185,7 @@ export function Hero() { {idx < PROOF_ITEMS.length - 1 && (