Template
Rami BitarandClaude Opus 5
69f7435d6e
Product cards, header, footer, PDP, and typography reworked toward a leaner layout; adds shop policy pages backed by the Storefront API. - Type: switch to Geist Sans/Mono, regular-weight headings - Product cards: drop borders, rounded corners, and action buttons - Header: shorter bar, no bottom border, center-out hover underline, bag icon replacing the cart icon (drawer wording updated to match) - Footer: single line with policy links and social icons on bg-background - Policies: /policies/[handle] renders shop.privacyPolicy, termsOfService, refundPolicy, shippingPolicy, subscriptionPolicy (SSG, hourly revalidation) - PDP: image grid with mobile carousel + dots and click-to-zoom, sticky info column, colour swatches from option optionValues with a configurable name-to-colour fallback in config/swatches.ts, Shop-purple checkout button - Recommendations: left-aligned heading on bg-background - Ignore .env*.local and tsconfig.tsbuildinfo Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX
80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
RiInstagramLine,
|
|
RiTiktokLine,
|
|
RiFacebookFill,
|
|
} from '@remixicon/react';
|
|
|
|
export interface FooterLink {
|
|
label: string;
|
|
url: string;
|
|
}
|
|
|
|
interface FooterProps {
|
|
storeName?: string;
|
|
copyright?: string;
|
|
links?: FooterLink[];
|
|
instagramUrl?: string;
|
|
tiktokUrl?: string;
|
|
facebookUrl?: string;
|
|
}
|
|
|
|
const Footer: React.FC<FooterProps> = ({
|
|
storeName = 'Shop',
|
|
copyright,
|
|
links = [
|
|
{ label: 'Terms of Service', url: '/policies/terms-of-service' },
|
|
{ label: 'Privacy Policy', url: '/policies/privacy-policy' },
|
|
{ label: 'Refund Policy', url: '/policies/refund-policy' },
|
|
{ label: 'Shipping Policy', url: '/policies/shipping-policy' },
|
|
{ label: 'Subscription Policy', url: '/policies/subscription-policy' },
|
|
],
|
|
instagramUrl = '#',
|
|
tiktokUrl = '#',
|
|
facebookUrl = '#',
|
|
}) => {
|
|
const socials = [
|
|
{ label: 'Instagram', url: instagramUrl, Icon: RiInstagramLine },
|
|
{ label: 'TikTok', url: tiktokUrl, Icon: RiTiktokLine },
|
|
{ label: 'Facebook', url: facebookUrl, Icon: RiFacebookFill },
|
|
];
|
|
|
|
return (
|
|
<footer className="bg-background">
|
|
<div className="max-w-screen-2xl mx-auto px-8 py-10">
|
|
<div className="flex flex-col sm:flex-row items-center justify-between gap-5">
|
|
<div className="flex flex-wrap items-center justify-center sm:justify-start gap-x-5 gap-y-2">
|
|
<p className="text-sm text-muted-foreground leading-5">
|
|
{copyright || `© ${storeName}. All rights reserved.`}
|
|
</p>
|
|
{links.map((link) => (
|
|
<a
|
|
key={link.label}
|
|
href={link.url}
|
|
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-x-4">
|
|
{socials.map(({ label, url, Icon }) => (
|
|
<a
|
|
key={label}
|
|
href={url}
|
|
aria-label={label}
|
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
<Icon size={18} />
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
export default Footer;
|