animation fixed in section
This commit is contained in:
@@ -5,6 +5,9 @@ import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
|
||||
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
|
||||
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
|
||||
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 type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@@ -215,21 +218,23 @@ export default function BrandsPage() {
|
||||
{/* ─── 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">
|
||||
<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">
|
||||
What Nearle Offers Brands
|
||||
</span>
|
||||
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
|
||||
The Full Stack of Neighbourhood Commerce
|
||||
</h2>
|
||||
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
|
||||
From your first store listing to city-wide distribution — Nearle builds the infrastructure so you can focus on your product.
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
What Nearle Offers Brands
|
||||
</span>
|
||||
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
|
||||
The Full Stack of Neighbourhood Commerce
|
||||
</h2>
|
||||
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
|
||||
From your first store listing to city-wide distribution — Nearle builds the infrastructure so you can focus on your product.
|
||||
</p>
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<AnimatedGrid className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{WHAT_WE_OFFER.map((item) => (
|
||||
<div
|
||||
<AnimatedCard
|
||||
key={item.title}
|
||||
className="rounded-[28px] border border-[#6330D6]/10 bg-[#FAF7FD] p-7 flex flex-col gap-4 hover:shadow-[0_10px_32px_rgba(22,0,29,0.09)] transition-shadow duration-300"
|
||||
>
|
||||
@@ -245,30 +250,32 @@ export default function BrandsPage() {
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedCard>
|
||||
))}
|
||||
</div>
|
||||
</AnimatedGrid>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── 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">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<div className="grid grid-cols-3 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-9 gap-4">
|
||||
<AnimatedGrid className="grid grid-cols-3 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-9 gap-4">
|
||||
{INDUSTRIES.map((industry) => (
|
||||
<div
|
||||
<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"
|
||||
>
|
||||
@@ -276,30 +283,32 @@ export default function BrandsPage() {
|
||||
<MaterialIcon icon={industry.icon} size={20} />
|
||||
</div>
|
||||
<span className="text-[10px] font-black text-[#16001D] text-center leading-tight">{industry.label}</span>
|
||||
</div>
|
||||
</AnimatedCard>
|
||||
))}
|
||||
</div>
|
||||
</AnimatedGrid>
|
||||
</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="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">
|
||||
How It Works
|
||||
</span>
|
||||
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
|
||||
The Partnership Process
|
||||
</h2>
|
||||
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
|
||||
From first conversation to city-wide brand presence in four structured steps.
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
How It Works
|
||||
</span>
|
||||
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
|
||||
The Partnership Process
|
||||
</h2>
|
||||
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
|
||||
From first conversation to city-wide brand presence in four structured steps.
|
||||
</p>
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
|
||||
<AnimatedGrid className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
|
||||
{PARTNERSHIP_STEPS.map((step) => (
|
||||
<article
|
||||
<AnimatedCard
|
||||
key={step.num}
|
||||
className="relative flex flex-col rounded-[28px] border border-[#6330D6]/10 bg-[#FAF7FD] p-7 shadow-[0_8px_32px_rgba(22,0,29,0.05)]"
|
||||
>
|
||||
@@ -313,9 +322,9 @@ export default function BrandsPage() {
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[#5E5866] leading-relaxed">{step.desc}</p>
|
||||
</article>
|
||||
</AnimatedCard>
|
||||
))}
|
||||
</div>
|
||||
</AnimatedGrid>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -323,24 +332,26 @@ export default function BrandsPage() {
|
||||
<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="grid grid-cols-1 lg:grid-cols-[360px_1fr] gap-10 lg:gap-16 items-start">
|
||||
<div className="lg:sticky lg:top-28">
|
||||
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
|
||||
FAQs
|
||||
</span>
|
||||
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
|
||||
Brand Partner Questions
|
||||
</h2>
|
||||
<p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-6">
|
||||
What brand managers usually ask before starting their Nearle partnership.
|
||||
</p>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center gap-2 text-sm font-black text-[#6330D6] hover:text-[#5225b8] transition-colors"
|
||||
>
|
||||
<span>Talk to our sales team</span>
|
||||
<MaterialIcon icon="arrow_forward" size={16} />
|
||||
</Link>
|
||||
</div>
|
||||
<AnimatedSection>
|
||||
<div className="lg:sticky lg:top-28">
|
||||
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
|
||||
FAQs
|
||||
</span>
|
||||
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
|
||||
Brand Partner Questions
|
||||
</h2>
|
||||
<p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-6">
|
||||
What brand managers usually ask before starting their Nearle partnership.
|
||||
</p>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center gap-2 text-sm font-black text-[#6330D6] hover:text-[#5225b8] transition-colors"
|
||||
>
|
||||
<span>Talk to our sales team</span>
|
||||
<MaterialIcon icon="arrow_forward" size={16} />
|
||||
</Link>
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
|
||||
<FAQAccordion items={FAQ_ITEMS} />
|
||||
</div>
|
||||
@@ -348,43 +359,17 @@ export default function BrandsPage() {
|
||||
</section>
|
||||
|
||||
{/* ─── CTA Banner ─── */}
|
||||
<section className="bg-white px-2 pt-2 pb-2 md:px-3 md:pt-3 md:pb-3 lg:px-4 lg:pt-4 lg:pb-4 xl:px-5 xl:pt-4 xl:pb-4 2xl:px-6 2xl:pb-5">
|
||||
<div className="w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#1A0322] via-[#2B0040] to-[#0A000D] text-white">
|
||||
<div className="px-6 py-12 md:px-10 md:py-14 lg:px-14 xl:py-12 text-center relative">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_30%,rgba(99,48,214,0.2),transparent_50%)] pointer-events-none" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_70%,rgba(0,109,55,0.12),transparent_45%)] pointer-events-none" />
|
||||
<div className="relative z-10 max-w-2xl mx-auto">
|
||||
<span className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/15 text-white/70 text-xs font-black uppercase tracking-widest mb-6">
|
||||
<MaterialIcon icon="hub" size={14} />
|
||||
Brand Partnership
|
||||
</span>
|
||||
<h2 className="font-display text-3xl md:text-4xl xl:text-5xl font-black mb-4 tracking-tight leading-tight">
|
||||
Ready to Grow in
|
||||
<br />Every Neighbourhood?
|
||||
</h2>
|
||||
<p className="text-sm md:text-base text-white/70 mb-8 leading-relaxed max-w-lg mx-auto">
|
||||
Let's talk about what a Nearle brand partnership looks like for your products. Our sales team will design a custom plan for your brand.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-3.5">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm hover:shadow-xl transition-all duration-200 active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
<MaterialIcon icon="forum" size={18} />
|
||||
<span>Talk to Sales</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-8 py-3.5 rounded-xl text-sm transition-all duration-200 active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
<MaterialIcon icon="mail" size={18} />
|
||||
<span>Send an Enquiry</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<CTABanner
|
||||
badge={{ icon: "hub", label: "Brand Partnership" }}
|
||||
heading={<>Ready to Grow in<br />Every Neighbourhood?</>}
|
||||
body="Let's talk about what a Nearle brand partnership looks like for your products. Our sales team will design a custom plan for your brand."
|
||||
primary={{ href: "/contact", icon: "forum", label: "Talk to Sales" }}
|
||||
secondary={{ href: "/contact", icon: "mail", label: "Send an Enquiry" }}
|
||||
decorations={[
|
||||
"circle at 70% 30%, rgba(99,48,214,0.2), transparent 50%",
|
||||
"circle at 20% 70%, rgba(0,109,55,0.12), transparent 45%",
|
||||
]}
|
||||
/>
|
||||
</PremiumPageShell>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user