diff --git a/src/app/brands/page.tsx b/src/app/brands/page.tsx index b3515cb..9ca9c7d 100644 --- a/src/app/brands/page.tsx +++ b/src/app/brands/page.tsx @@ -1,4 +1,5 @@ import React from "react"; +import Image from "next/image"; import Link from "next/link"; import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { PremiumPageShell } from "@/components/layout/PremiumPageShell"; @@ -7,6 +8,8 @@ import { FAQAccordion } from "@/components/ui/FAQAccordion"; import { AnimatedSection } from "@/components/motion/AnimatedSection"; import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid"; import { CTABanner } from "@/components/ui/CTABanner"; +import { NetworkBackground } from "@/components/brands/NetworkBackground"; +import { PartnershipConnector } from "@/components/brands/PartnershipConnector"; import type { Metadata } from "next"; export const metadata: Metadata = { @@ -151,8 +154,9 @@ export default function BrandsPage() { {/* ─── What We Offer ─── */} -
-
+
+ +
@@ -183,7 +187,7 @@ export default function BrandsPage() {

{item.title}

-

{item.desc}

+

{item.desc}

))} @@ -193,40 +197,78 @@ export default function BrandsPage() { {/* ─── Industries ─── */}
-
- -
- - Industries We Serve - -

- Your Category Has a Place on Nearle -

-

- Nearle's neighbourhood store network stocks a wide range of everyday product categories. If customers buy it daily, it belongs here. -

-
- - - - {INDUSTRIES.map((industry) => ( - -
- +
+
+ {/* Real product collage */} + +
+
+ Daily essentials — milk, bread, and fresh produce stocked on Nearle stores
- {industry.label} - - ))} - +
+ Health and personal care products stocked on Nearle stores +
+
+ Pet essentials brand stocked on Nearle stores +
+
+ + + {/* Content */} +
+ +
+ + Industries We Serve + +

+ Your Category Has a Place on Nearle +

+

+ Nearle's neighbourhood store network stocks a wide range of everyday product categories. If customers buy it daily, it belongs here. +

+
+ + + + {INDUSTRIES.map((industry) => ( + +
+ +
+ {industry.label} + + ))} + +
+
{/* ─── Partnership Process ─── */}
-
+
@@ -241,6 +283,8 @@ export default function BrandsPage() {
+ + {PARTNERSHIP_STEPS.map((step) => ( {step.title} -

{step.desc}

+

{step.desc}

 ))} @@ -265,10 +309,24 @@ export default function BrandsPage() { {/* ─── FAQ ─── */}
-
+
+
+
+
+
+ Neighbourhood store owner reviewing brand orders on his phone +
+
+
FAQs diff --git a/src/components/brands/NetworkBackground.tsx b/src/components/brands/NetworkBackground.tsx new file mode 100644 index 0000000..eef4f64 --- /dev/null +++ b/src/components/brands/NetworkBackground.tsx @@ -0,0 +1,85 @@ +"use client"; + +import { motion, useReducedMotion } from "framer-motion"; + +const NODES = [ + { cx: 60, cy: 80 }, { cx: 220, cy: 40 }, { cx: 380, cy: 120 }, + { cx: 520, cy: 60 }, { cx: 680, cy: 140 }, { cx: 140, cy: 260 }, + { cx: 320, cy: 300 }, { cx: 480, cy: 260 }, { cx: 620, cy: 320 }, + { cx: 80, cy: 420 }, { cx: 260, cy: 460 }, { cx: 440, cy: 420 }, + { cx: 600, cy: 480 }, { cx: 740, cy: 400 }, +]; + +const LINES: [number, number][] = [ + [0, 1], [1, 2], [2, 3], [3, 4], [0, 5], [1, 6], [2, 7], [3, 8], [4, 8], + [5, 6], [6, 7], [7, 8], [5, 9], [6, 10], [7, 11], [8, 12], [9, 10], [10, 11], [11, 12], [12, 13], [8, 13], +]; + +const PARTICLES = [ + { cx: 100, cy: 500 }, { cx: 260, cy: 80 }, { cx: 420, cy: 520 }, { cx: 580, cy: 100 }, + { cx: 720, cy: 480 }, { cx: 40, cy: 250 }, { cx: 380, cy: 200 }, { cx: 660, cy: 260 }, +]; + +/** Ambient network backdrop for Section 1 — nodes, routes, and drifting particles at very low opacity. Purely decorative. */ +export function NetworkBackground() { + const reduce = useReducedMotion(); + + return ( + + ); +} diff --git a/src/components/brands/PartnershipConnector.tsx b/src/components/brands/PartnershipConnector.tsx new file mode 100644 index 0000000..b8141e2 --- /dev/null +++ b/src/components/brands/PartnershipConnector.tsx @@ -0,0 +1,55 @@ +"use client"; + +import { motion, useReducedMotion } from "framer-motion"; + +const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number]; + +/** One-shot workflow connector for the Partnership Process — draws once on scroll into view, then a glow dot travels Step 1 → Step 4 and stops. No looping. Desktop-only (aligns to the single-row xl:grid-cols-4 layout). */ +export function PartnershipConnector({ steps }: { steps: number }) { + const reduce = useReducedMotion(); + const positions = Array.from({ length: steps }, (_, i) => ((i + 0.5) / steps) * 100); + const start = positions[0]; + const end = positions[positions.length - 1]; + const lineDuration = 0.9; + const dotDuration = 1.1; + + return ( + + ); +}