update animation pages
This commit is contained in:
@@ -1,6 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { motion } from "framer-motion";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
import { fadeUp, fadeIn, scaleIn, staggerContainer, viewport } from "@/lib/animations";
|
||||
|
||||
const FEATURES = [
|
||||
{
|
||||
@@ -68,17 +72,17 @@ export function BusinessSection() {
|
||||
<div className="pointer-events-none absolute -left-16 top-24 h-64 w-64 rounded-full bg-primary/5 blur-3xl" />
|
||||
<div className="pointer-events-none absolute -right-20 bottom-10 h-64 w-64 rounded-full bg-secondary/5 blur-3xl" />
|
||||
|
||||
{/*
|
||||
* Grid layout:
|
||||
* mobile (<768px) : 1 col — text → cards (1/row) → success story [via CSS order]
|
||||
* tablet (768–1279px) : 1 col — text → success story → cards 2×2 [via CSS order]
|
||||
* desktop (≥1280px) : 2 col — [left: text + success story] | [right: cards 2×2]
|
||||
*/}
|
||||
<div className="relative grid gap-6 grid-cols-1 md:gap-7
|
||||
xl:grid-cols-[420px_1fr] xl:gap-8 xl:items-start">
|
||||
|
||||
{/* ── 1. Left text content (always col-1 row-1) ── */}
|
||||
<div className="min-w-0 xl:col-start-1 xl:row-start-1">
|
||||
{/* ── 1. Left text content ── */}
|
||||
<motion.div
|
||||
className="min-w-0 xl:col-start-1 xl:row-start-1"
|
||||
variants={fadeUp}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewport}
|
||||
>
|
||||
{/* Badge */}
|
||||
<div className="flex w-fit items-center gap-2 rounded-full border border-secondary/20 bg-secondary/5 px-3 py-1.5">
|
||||
<div className="flex h-5 w-5 items-center justify-center rounded-full bg-secondary/15">
|
||||
@@ -133,20 +137,23 @@ export function BusinessSection() {
|
||||
<MaterialIcon icon="arrow_forward" size={18} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* ── 2. Feature cards — 2×2 grid (right col on desktop) ──
|
||||
mobile : order-2 → appears after text, before success story
|
||||
tablet : order-3 → appears after text + success story
|
||||
desktop : explicit col-2, row-span-2
|
||||
*/}
|
||||
<div className="min-w-0
|
||||
{/* ── 2. Feature cards ── */}
|
||||
<motion.div
|
||||
className="min-w-0
|
||||
order-2 md:order-3
|
||||
xl:order-none xl:col-start-2 xl:row-start-1 xl:row-span-2
|
||||
grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
grid grid-cols-1 gap-4 md:grid-cols-2"
|
||||
variants={staggerContainer}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewport}
|
||||
>
|
||||
{FEATURES.map((feature) => (
|
||||
<article
|
||||
<motion.article
|
||||
key={feature.title}
|
||||
variants={fadeUp}
|
||||
className="merchant-feature-card flex min-w-0 flex-col overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white shadow-[0_4px_24px_rgba(22,0,29,0.07)]"
|
||||
>
|
||||
<div className="p-5">
|
||||
@@ -174,20 +181,22 @@ export function BusinessSection() {
|
||||
className="block h-auto w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</motion.article>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* ── 3. Success story ──
|
||||
mobile : order-3 → appears after feature cards
|
||||
tablet : order-2 → appears after text, before cards
|
||||
desktop : explicit col-1, row-2 (below text in left column)
|
||||
*/}
|
||||
<div className="min-w-0
|
||||
{/* ── 3. Success story ── */}
|
||||
<motion.div
|
||||
className="min-w-0
|
||||
order-3 md:order-2
|
||||
xl:order-none xl:col-start-1 xl:row-start-2
|
||||
overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white/90 shadow-[0_4px_24px_rgba(22,0,29,0.07)]
|
||||
grid grid-cols-[100px_minmax(0,1fr)]">
|
||||
grid grid-cols-[100px_minmax(0,1fr)]"
|
||||
variants={scaleIn}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewport}
|
||||
>
|
||||
<div className="relative min-h-[128px] overflow-hidden bg-brand-accent-light">
|
||||
<Image
|
||||
src="/images/nearle-merchant/success-owner.webp"
|
||||
@@ -208,14 +217,20 @@ export function BusinessSection() {
|
||||
Nearle helped us reach more customers in our area and manage orders effortlessly.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* ── Benefits strip ── */}
|
||||
<div className="relative mt-6 overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white/90 shadow-[0_4px_24px_rgba(22,0,29,0.06)]">
|
||||
<motion.div
|
||||
className="relative mt-6 overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white/90 shadow-[0_4px_24px_rgba(22,0,29,0.06)]"
|
||||
variants={staggerContainer}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewport}
|
||||
>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 divide-y sm:divide-y-0 sm:divide-x divide-primary/8 xl:divide-x xl:divide-y-0">
|
||||
{BENEFITS.map((b) => (
|
||||
<div key={b.title} className="flex items-start gap-3 p-5">
|
||||
<motion.div key={b.title} variants={fadeIn} className="flex items-start gap-3 p-5">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-secondary/10 text-secondary">
|
||||
<MaterialIcon icon={b.icon} size={20} />
|
||||
</div>
|
||||
@@ -223,10 +238,10 @@ export function BusinessSection() {
|
||||
<div className="text-sm font-black text-brand-dark">{b.title}</div>
|
||||
<div className="mt-0.5 text-xs leading-relaxed text-on-surface-variant">{b.desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user