Je vais créer une carte de produit élégante et propre pour votre pièce automobile Alfa Romeo. Voici un design moderne qui met en valeur toutes les informations importantes :
Cette carte de produit présente un design moderne et professionnel avec :
- En-tête : Badge de marque et indicateur de disponibilité
- Contenu principal : Nom de la pièce, compatibilité véhicule, prix et stock
- Pied de page : Bouton d'action et référence produit
- Design responsive : S'adapte à différentes tailles d'écran
- Effets visuels : Ombre au survol pour une meilleure interactivité
Le design utilise une palette de couleurs neutres et professionnelles, parfaite pour un catalogue de pièces automobiles.
Parfait ! Je vais modifier la carte produit pour rendre l'image optionnelle et vous montrer les deux versions côte à côte :
Parfait ! J'ai créé une carte produit flexible qui peut fonctionner avec ou sans image. Voici les améliorations apportées :
Fonctionnalités ajoutées :
- Image optionnelle : La prop
showImagecontrôle l'affichage de l'image - Design adaptatif : La carte s'ajuste automatiquement selon la présence d'une image
- Même style : Le design reste cohérent dans les deux versions
- Comparaison côte à côte : Vous pouvez voir les deux variantes en même temps
Avantages :
- Flexibilité : Utilisable pour tous vos produits, avec ou sans photo
- Performance : L'image ne se charge que si nécessaire
- Consistance : Le style reste identique dans les deux cas
- Responsive : S'adapte parfaitement sur mobile et desktop
Vous pouvez maintenant utiliser cette carte pour tous vos produits, qu'ils aient une image ou non !
j'aime bien ce que tu propose !Mais mon je n'utilise pas une library de composant !voici ma product card actuellement je veux que tu la modifie toujour en utilisant uniquement tailwind afin qu'elle ressemble exactement a ce que tu m'as montré.Ne modifier surtout pas ma logique metier seulement l'ux/ui pour ressemble a ce que tu m'a montré.import type { productCard } from "../../types";import { useTheme } from "../useTheme";import { CheckCircle, Package, Car } from "lucide-react";interface ProductCardProps { productcard: productCard; isInCart: boolean;}export const ProductCard: React.FC<ProductCardProps> = ({ productcard: { image, price, articlenumber, partname, brand, model, quantity, available, onBuyClick = () => {}, }, isInCart,}) => { const { isDark } = useTheme(); return ( <div className={max-w-sm rounded-lg shadow-sm border overflow-hidden hover:shadow-md transition-all duration-300 ${ isDark ? "bg-gray-800 border-gray-700 text-white" : "bg-white border-gray-200 text-gray-900" } } > {/* Image Section /} {image && ( <div className="relative overflow-hidden"> <img src={image} alt={partname} className="w-full h-48 object-cover" /> </div> )} {/ Content Section /} <div className="p-4"> {/ Brand Badge /} <div className="flex items-center justify-between mb-3"> <div className="flex items-center gap-2"> <div className={w-4 h-4 rounded-full ${ isDark ? "bg-gray-100" : "bg-gray-800" }}> </div> <span className={text-sm font-medium ${ isDark ? "text-gray-100" : "text-gray-800" }}> {brand} </span> </div> <div className="flex items-center gap-1"> <div className="w-3 h-3 bg-green-500 rounded-full"></div> <span className="text-sm text-green-600 font-medium"> Disponible </span> </div> </div> {/ Title /} <h3 className={text-xl font-bold mb-2 ${ isDark ? "text-white" : "text-gray-900" }}> {partname} </h3> {/ Subtitle /} <p className={text-sm mb-4 ${ isDark ? "text-gray-400" : "text-gray-500" }}> Compatible {brand} {model} </p> {/ Price and Stock /} <div className="flex items-center justify-between mb-4"> <div className={text-2xl font-bold ${ isDark ? "text-gray-100" : "text-gray-900" }}> {price} </div> <div className="flex items-center gap-2"> <div className="w-4 h-4 border border-gray-400 rounded flex items-center justify-center"> <div className="w-2 h-2 bg-gray-400 rounded"></div> </div> <span className={text-sm ${ isDark ? "text-gray-300" : "text-gray-500" }}> {quantity} en stock </span> </div> </div> {/ Reference /} <div className={text-sm mb-4 ${ isDark ? "text-gray-400" : "text-gray-500" }}> Ref: {articlenumber} </div> {/ Buy Button */} {!isInCart ? ( <button onClick={onBuyClick} className="w-full bg-gray-900 text-white font-semibold py-3 px-4 rounded-lg hover:bg-gray-200 hover:text-gray-900 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2" > Ajouter au panier </button> ) : ( <button onClick={() => {}} className="w-full bg-gray-200 text-gray-800 font-semibold py-3 px-4 rounded-lg cursor-not-allowed opacity-50" disabled={true} > Déjà dans le panier </button> )} </div> </div> );};