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.
81 lines
3.7 KiB
TypeScript
81 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { Button, Input } from "@heroui/react";
|
|
|
|
const NEWSLETTER_IMAGE = "/content/newsletter-dog.png";
|
|
|
|
function EnvelopeIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
|
|
<polyline points="22,6 12,13 2,6" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function NewsletterSection() {
|
|
return (
|
|
<section
|
|
id="newsletter"
|
|
aria-label="Newsletter signup"
|
|
className="relative max-w-7xl mx-auto w-full px-4 md:px-8 mb-12"
|
|
>
|
|
<div className="relative overflow-hidden bg-[#eaf7d9] rounded-[32px] md:rounded-[48px] p-6 sm:p-10 md:p-12 lg:p-16 w-full min-h-[460px] md:min-h-[400px] flex flex-col md:flex-row items-center md:items-stretch">
|
|
|
|
{/* Left Content */}
|
|
<div className="relative z-20 w-full md:w-[55%] lg:w-1/2 flex flex-col justify-center items-center md:items-start space-y-6 md:space-y-8 max-w-[400px] lg:max-w-md pt-2 md:pt-0 mb-[210px] sm:mb-[300px] md:mb-0 text-center md:text-left mx-auto md:mx-0">
|
|
<h2 className="font-[family-name:var(--font-fraunces)] font-medium text-2xl md:text-3xl text-neutral-900 tracking-tight flex flex-col md:block w-full">
|
|
<span className="text-balance mx-auto md:mx-0 max-w-[280px] md:max-w-none">
|
|
Inner peace, inner peas...
|
|
</span>
|
|
<span className="font-bold mt-2 md:mt-0 md:ml-1 text-balance">
|
|
Newsletter please
|
|
</span>
|
|
<span className="mt-1 md:mt-0 md:ml-1">🐶...</span>
|
|
</h2>
|
|
|
|
<form
|
|
className="w-full"
|
|
onSubmit={(e) => e.preventDefault()}
|
|
noValidate
|
|
>
|
|
{/* Mobile: stacked. Desktop (md+): combined pill */}
|
|
<div className="flex flex-col gap-2 md:flex-row md:gap-0 md:items-center md:bg-white md:rounded-full md:p-1.5 md:pl-4 md:shadow-sm md:overflow-hidden md:h-[64px]">
|
|
<div className="flex items-center bg-white rounded-full h-12 px-4 shadow-sm md:bg-transparent md:shadow-none md:rounded-none md:px-0 md:h-full flex-1 min-w-0">
|
|
<EnvelopeIcon className="size-[18px] shrink-0 text-neutral-400 mr-2" />
|
|
<Input
|
|
id="newsletter-email"
|
|
name="newsletter-email"
|
|
type="email"
|
|
placeholder="Enter your email"
|
|
aria-label="Email for newsletter"
|
|
className="flex-1 bg-transparent border-transparent shadow-none rounded-none px-0 h-full text-sm md:text-base min-w-0 focus-visible:border-transparent focus-visible:ring-0"
|
|
/>
|
|
</div>
|
|
<Button
|
|
type="submit"
|
|
className="bg-[#51a67f] hover:bg-[#43906d] text-white rounded-full px-8 h-12 md:h-full w-full md:w-auto font-medium text-sm md:text-base shadow-none transition-colors border-none shrink-0"
|
|
>
|
|
Subscribe
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Right Content - Dog Image */}
|
|
<div className="absolute bottom-0 left-0 right-0 md:left-auto md:right-0 w-full md:w-[55%] h-[210px] sm:h-[340px] md:h-[110%] z-10 pointer-events-none flex justify-center md:justify-end">
|
|
<Image
|
|
src={NEWSLETTER_IMAGE}
|
|
alt="Peaceful dog"
|
|
fill
|
|
className="object-contain object-bottom md:object-right-bottom"
|
|
sizes="(max-width: 768px) 100vw, 50vw"
|
|
priority={false}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|