update d2c brands
This commit is contained in:
@@ -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() {
|
||||
<BrandsHero />
|
||||
|
||||
{/* ─── What We Offer ─── */}
|
||||
<section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
|
||||
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
|
||||
<section className="relative overflow-hidden py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
|
||||
<NetworkBackground />
|
||||
<div className="relative z-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24">
|
||||
<AnimatedSection>
|
||||
<div className="text-center mb-10 md:mb-12">
|
||||
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
|
||||
@@ -183,7 +187,7 @@ export default function BrandsPage() {
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-base font-black text-[#16001D] leading-tight mb-2">{item.title}</h3>
|
||||
<p className="text-sm text-[#5E5866] leading-relaxed">{item.desc}</p>
|
||||
<p className="text-m text-[#5E5866] leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
</AnimatedCard>
|
||||
))}
|
||||
@@ -193,40 +197,78 @@ export default function BrandsPage() {
|
||||
|
||||
{/* ─── Industries ─── */}
|
||||
<section className="py-10 md:py-14 xl:py-12 bg-[#FAF7FD] border-b border-[#6330D6]/10">
|
||||
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
|
||||
<AnimatedSection>
|
||||
<div className="text-center mb-10">
|
||||
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
|
||||
Industries We Serve
|
||||
</span>
|
||||
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
|
||||
Your Category Has a Place on Nearle
|
||||
</h2>
|
||||
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
|
||||
Nearle's neighbourhood store network stocks a wide range of everyday product categories. If customers buy it daily, it belongs here.
|
||||
</p>
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedGrid className="grid grid-cols-3 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-9 gap-4">
|
||||
{INDUSTRIES.map((industry) => (
|
||||
<AnimatedCard
|
||||
key={industry.label}
|
||||
className="flex flex-col items-center gap-2.5 p-4 rounded-2xl bg-white border border-[#6330D6]/8 hover:border-[#6330D6]/20 hover:shadow-md transition-all duration-200 cursor-default"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-[#6330D6]/8 text-[#6330D6] flex items-center justify-center">
|
||||
<MaterialIcon icon={industry.icon} size={20} />
|
||||
<div className="px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[30%_1fr] gap-10 xl:gap-16 items-center">
|
||||
{/* Real product collage */}
|
||||
<AnimatedSection className="order-2 lg:order-1" variant="fadeUp">
|
||||
<div className="relative mx-auto h-[280px] w-full max-w-[420px] sm:h-[360px] lg:mx-0 lg:h-[440px]">
|
||||
<div className="absolute left-0 top-0 h-[62%] w-[72%] overflow-hidden rounded-[28px] border-4 border-white shadow-[0_20px_50px_rgba(22,0,29,0.16)]">
|
||||
<Image
|
||||
src="/images/cat-daily-essentials.webp"
|
||||
alt="Daily essentials — milk, bread, and fresh produce stocked on Nearle stores"
|
||||
fill
|
||||
sizes="(max-width: 1023px) 300px, 22vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[10px] font-black text-[#16001D] text-center leading-tight">{industry.label}</span>
|
||||
</AnimatedCard>
|
||||
))}
|
||||
</AnimatedGrid>
|
||||
<div className="absolute right-0 top-[6%] h-[42%] w-[52%] overflow-hidden rounded-[22px] border-4 border-white shadow-[0_16px_40px_rgba(22,0,29,0.14)]">
|
||||
<Image
|
||||
src="/images/cat-health-wellness.webp"
|
||||
alt="Health and personal care products stocked on Nearle stores"
|
||||
fill
|
||||
sizes="(max-width: 1023px) 220px, 16vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute bottom-0 left-[10%] h-[38%] w-[54%] overflow-hidden rounded-[22px] border-4 border-white shadow-[0_16px_40px_rgba(22,0,29,0.14)]">
|
||||
<Image
|
||||
src="/images/cat-pet-essentials.webp"
|
||||
alt="Pet essentials brand stocked on Nearle stores"
|
||||
fill
|
||||
sizes="(max-width: 1023px) 220px, 16vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
|
||||
{/* Content */}
|
||||
<div className="order-1 lg:order-2">
|
||||
<AnimatedSection>
|
||||
<div className="mb-10 text-left">
|
||||
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
|
||||
Industries We Serve
|
||||
</span>
|
||||
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
|
||||
Your Category Has a Place on Nearle
|
||||
</h2>
|
||||
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl leading-relaxed">
|
||||
Nearle's neighbourhood store network stocks a wide range of everyday product categories. If customers buy it daily, it belongs here.
|
||||
</p>
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedGrid className="grid grid-cols-3 gap-4">
|
||||
{INDUSTRIES.map((industry) => (
|
||||
<AnimatedCard
|
||||
key={industry.label}
|
||||
className="flex flex-col items-center gap-2.5 p-4 rounded-2xl bg-white border border-[#6330D6]/8 hover:border-[#6330D6]/20 hover:shadow-md transition-all duration-200 cursor-default"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-[#6330D6]/8 text-[#6330D6] flex items-center justify-center">
|
||||
<MaterialIcon icon={industry.icon} size={20} />
|
||||
</div>
|
||||
<span className="text-[16px] font-black text-[#16001D] text-center leading-tight">{industry.label}</span>
|
||||
</AnimatedCard>
|
||||
))}
|
||||
</AnimatedGrid>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Partnership Process ─── */}
|
||||
<section id="partnership" className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
|
||||
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
|
||||
<div className="px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24">
|
||||
<AnimatedSection>
|
||||
<div className="text-center mb-10 md:mb-12">
|
||||
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
|
||||
@@ -241,6 +283,8 @@ export default function BrandsPage() {
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
|
||||
<PartnershipConnector steps={PARTNERSHIP_STEPS.length} />
|
||||
|
||||
<AnimatedGrid className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
|
||||
{PARTNERSHIP_STEPS.map((step) => (
|
||||
<AnimatedCard
|
||||
@@ -256,7 +300,7 @@ export default function BrandsPage() {
|
||||
<h3 className="font-display text-xl font-black text-[#16001D] leading-tight mb-2">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[#5E5866] leading-relaxed">{step.desc}</p>
|
||||
<p className="text-md text-[#5E5866] leading-relaxed">{step.desc}</p>
|
||||
</AnimatedCard>
|
||||
))}
|
||||
</AnimatedGrid>
|
||||
@@ -265,10 +309,24 @@ export default function BrandsPage() {
|
||||
|
||||
{/* ─── FAQ ─── */}
|
||||
<section className="py-10 md:py-14 xl:py-12 bg-[#FAF7FD] border-b border-[#6330D6]/10">
|
||||
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
|
||||
<div className="px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[360px_1fr] gap-10 lg:gap-16 items-start">
|
||||
<AnimatedSection>
|
||||
<div className="lg:sticky lg:top-28">
|
||||
<div className="relative mb-6">
|
||||
<div className="absolute -left-6 -top-6 h-28 w-28 rounded-full bg-[#6330D6]/25 blur-3xl -z-10" />
|
||||
<div className="absolute -right-4 -bottom-4 h-24 w-24 rounded-full bg-secondary/20 blur-3xl -z-10" />
|
||||
<div className="relative h-[220px] sm:h-[260px] rounded-[28px] overflow-hidden shadow-[0_20px_50px_rgba(22,0,29,0.16)]">
|
||||
<Image
|
||||
src="/images/nearle-merchant/success-owner.webp"
|
||||
alt="Neighbourhood store owner reviewing brand orders on his phone"
|
||||
fill
|
||||
sizes="(max-width: 1023px) 90vw, 360px"
|
||||
className="object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-[#16001D]/70 via-[#6330D6]/20 to-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
|
||||
FAQs
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user