1c034400ca
- Pulse theme tokens in app.schema.json: Archivo Black headings (weight 400) + Inter body, white bg / black pill buttons, xl radius, AI-generated athletic imagery - Add headerFontWeight theme prop so single-weight fonts (Archivo Black) load and render correctly; ThemeProvider applies font-family + weight inline so Typography works regardless of `as` element - New shared Heading component (tagline / title / subtitle with size + align + tone variants) and Typography caption variant for taglines; refactor features, faq, cta, testimonials, products-carousel, products-grid, collection-grid, recommended-products, image-gallery, newsletter-cta to use them - Hero accepts a `buttons` array (label / href / variant) replacing primaryCta/secondaryCta; cover-image component removed and existing cover blocks migrated to Hero blocks with `buttons: []` - Newsletter CTA uses shadcn Button + Input so it inherits theme radius; stacked layout fixed to keep the image - Product/collection card titles use Typography subtitle variants (font-body), heading font weight is theme-controlled - Remove orphan commerce/shop-header.tsx and commerce/shop-footer.tsx; the editor-driven navigation/footer are the live chrome Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Typography } from '@/components/Typography';
|
|
|
|
interface CollectionImage {
|
|
url: string;
|
|
altText?: string;
|
|
}
|
|
|
|
interface Collection {
|
|
id: string;
|
|
title: string;
|
|
handle: string;
|
|
description?: string;
|
|
image?: CollectionImage;
|
|
}
|
|
|
|
interface CollectionCardProps {
|
|
collection: Collection;
|
|
}
|
|
|
|
const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
|
|
return (
|
|
<Link to={`/collections/${collection.handle}`} className="block group">
|
|
<Card className="hover:shadow-xl transition-shadow duration-300 overflow-hidden py-0 gap-0">
|
|
{/* Collection Image */}
|
|
<div className="aspect-video overflow-hidden bg-muted">
|
|
{collection.image ? (
|
|
<img
|
|
src={collection.image.url}
|
|
alt={collection.image.altText || collection.title}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center text-muted-foreground">
|
|
<i className="ri-folder-line text-6xl"></i>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Collection Info */}
|
|
<CardContent className="p-6">
|
|
<Typography
|
|
variant="subtitle1"
|
|
className="mb-3 font-semibold tracking-tight text-foreground transition-colors group-hover:text-muted-foreground"
|
|
>
|
|
{collection.title}
|
|
</Typography>
|
|
|
|
{collection.description && (
|
|
<p className="text-muted-foreground">
|
|
{collection.description.substring(0, 100)}
|
|
{collection.description.length > 100 ? '...' : ''}
|
|
</p>
|
|
)}
|
|
|
|
<div className="mt-4 text-foreground font-semibold group-hover:text-muted-foreground transition-colors flex items-center">
|
|
<span>View Collection</span>
|
|
<i className="ri-arrow-right-s-line ml-2"></i>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default CollectionCard; |