ianshaloom
c8f5d8d096
- Added new FAQ sections for account security, ordering and checkout, returns, shipping, and contact information. - Introduced legal documents including privacy policy, terms of service, data protection, and general terms and conditions. - Updated package dependencies to include gray-matter and remark-gfm for enhanced markdown support.
138 lines
6.0 KiB
TypeScript
138 lines
6.0 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
const CTA_IMAGES = {
|
|
main: "/images/cta/cta-01.webp",
|
|
kitty: "/images/cta/cta-02.webp",
|
|
doggy: "/images/cta/cta-03.webp",
|
|
} as const;
|
|
|
|
export function CtaSection() {
|
|
return (
|
|
<section
|
|
aria-label="Promotional offers and shop by pet"
|
|
className="w-full max-w-full min-w-0 overflow-x-hidden"
|
|
>
|
|
<div className="mx-auto max-w-7xl min-w-0">
|
|
<div className="grid min-w-0 grid-cols-2 gap-4 overflow-x-hidden lg:grid-cols-3 lg:grid-rows-2 lg:gap-5">
|
|
{/* Main CTA — Up to 45% OFF */}
|
|
<section
|
|
aria-labelledby="cta-main"
|
|
className="relative col-span-2 flex min-h-[280px] flex-col justify-between overflow-hidden rounded-[var(--radius)] p-6 md:p-8 lg:row-span-2"
|
|
>
|
|
<div className="absolute inset-0 z-0">
|
|
<Image
|
|
src={CTA_IMAGES.main}
|
|
alt=""
|
|
fill
|
|
className="object-cover brightness-[0.92] contrast-[1.05] saturate-[0.88]"
|
|
sizes="(max-width: 1024px) 100vw, 66vw"
|
|
/>
|
|
</div>
|
|
<div
|
|
className="absolute inset-0 z-[1] bg-gradient-to-r from-[var(--brand-mist)]/95 via-[var(--brand-mist)]/40 to-transparent"
|
|
aria-hidden
|
|
/>
|
|
<div className="relative z-10 flex min-h-0 flex-1 flex-col justify-center pr-4 md:max-w-[58%] md:pr-8">
|
|
<p className="font-sans text-base font-normal text-[var(--foreground)] md:text-lg">
|
|
Up to
|
|
</p>
|
|
<h2
|
|
id="cta-main"
|
|
className="mt-1 font-[family-name:var(--font-fraunces)] text-4xl font-bold leading-tight tracking-tight text-[var(--foreground)] drop-shadow-sm md:text-5xl lg:text-6xl lg:leading-tight"
|
|
>
|
|
<span className="relative inline-block border-b-4 border-[var(--warm)] pb-1">
|
|
25% OFF
|
|
</span>
|
|
</h2>
|
|
<p className="mt-3 font-sans text-base text-[var(--foreground)] md:text-lg">
|
|
Thousands of pet essentials
|
|
</p>
|
|
<Link
|
|
href="/shop"
|
|
className="mt-6 inline-flex min-h-[48px] w-fit items-center justify-center gap-2 rounded-full bg-[#e89120] px-6 py-3 font-sans text-base font-semibold text-white shadow-lg transition-[transform,box-shadow] duration-[var(--transition-base)] hover:scale-[1.02] hover:bg-[#d97f0f] hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-[#38a99f] focus:ring-offset-2 md:px-8 md:py-4"
|
|
>
|
|
Shop Pet Deals
|
|
<span aria-hidden>→</span>
|
|
</Link>
|
|
</div>
|
|
<div className="relative z-10 mt-4 flex items-center gap-1 font-sans text-[var(--muted)] text-sm" aria-hidden>
|
|
|
|
<span>Healthy pets, happy homes.</span>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
{/* Doggy CTA */}
|
|
<section
|
|
aria-labelledby="cta-doggy"
|
|
className="relative h-[130px] overflow-hidden rounded-[var(--radius)] p-3 md:h-[160px] md:p-6 lg:h-auto"
|
|
>
|
|
<div className="absolute inset-0 z-0 bg-[var(--brand-dark)]/70" aria-hidden />
|
|
<div className="relative z-10">
|
|
<h2
|
|
id="cta-doggy"
|
|
className="font-[family-name:var(--font-fraunces)] text-lg font-bold text-white md:text-2xl"
|
|
>
|
|
Shop Dog Essentials
|
|
</h2>
|
|
<Link
|
|
href="/shop/dogs"
|
|
className="mt-3 inline-flex min-h-[44px] w-fit items-center justify-center gap-1.5 rounded-full bg-[#f4a13a] px-4 py-2.5 font-sans text-sm font-bold text-[#1a2e2d] shadow-lg transition-[transform,box-shadow] duration-[var(--transition-base)] hover:scale-[1.02] hover:bg-[#f5ad4d] hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-[var(--brand-dark)] md:mt-4 md:min-h-[48px] md:px-8 md:py-4 md:text-base"
|
|
>
|
|
Shop Now
|
|
<span aria-hidden>→</span>
|
|
</Link>
|
|
</div>
|
|
<div className="absolute inset-0">
|
|
<Image
|
|
src={CTA_IMAGES.kitty}
|
|
alt=""
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 768px) 50vw, 33vw"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Kitty CTA */}
|
|
<section
|
|
aria-labelledby="cta-kitty"
|
|
className="relative h-[130px] overflow-hidden rounded-[var(--radius)] p-3 md:h-[160px] md:p-6 lg:h-auto"
|
|
>
|
|
<div className="absolute inset-0 z-0 bg-[var(--brand-dark)]/70" aria-hidden />
|
|
<div className="relative z-10">
|
|
<h2
|
|
id="cta-kitty"
|
|
className="font-[family-name:var(--font-fraunces)] text-lg font-bold text-white md:text-2xl"
|
|
>
|
|
Shop Cat Essentials
|
|
</h2>
|
|
<Link
|
|
href="/shop/cats"
|
|
className="mt-3 inline-flex min-h-[44px] w-fit items-center justify-center gap-1.5 rounded-full bg-[#f4a13a] px-4 py-2.5 font-sans text-sm font-bold text-[#1a2e2d] shadow-lg transition-[transform,box-shadow] duration-[var(--transition-base)] hover:scale-[1.02] hover:bg-[#f5ad4d] hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-[var(--brand-dark)] md:mt-4 md:min-h-[48px] md:px-8 md:py-4 md:text-base"
|
|
>
|
|
Shop Now
|
|
<span aria-hidden>→</span>
|
|
</Link>
|
|
</div>
|
|
<div className="absolute inset-0">
|
|
<Image
|
|
src={CTA_IMAGES.doggy}
|
|
alt=""
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 768px) 50vw, 33vw"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|