Peças de Interface que Elevam a Presença da sua Página

// ProductCard.tsx (React 18 / 19)
import React from 'react';
import './ProductCard.css';

export interface CardProps {
  title: string;
  price: string;
  badge?: string;
  imageUrl?: string;
  onCtaClick?: () => void;
}

export function ProductCard({ title, price, badge, imageUrl, onCtaClick }: CardProps) {
  return (
    <article className="shark-card group">
      {badge && <span className="shark-badge">{badge}</span>}
      <div className="shark-media">
        <img src={imageUrl || '/product.png'} alt={title} className="shark-img" />
      </div>
      <div className="shark-body">
        <h3 className="shark-title">{title}</h3>
        <p className="shark-price">{price}</p>
        <button onClick={onCtaClick} className="shark-btn">
          Adquirir Agora
        </button>
      </div>
    </article>
  );
}