Can it be called one component and how to do it right?

Question

JavaScript

The layout contains 2 different products in the form of cards.
The cards are the same with the following criteria:
- Width of the card;
- Card color;
- Price layout with a button i.e. footer;
- A block with a photo (they differ only in the gradient; one has it; the other does not);
It confuses me that they have different heights. I'm just learning React and where I haven't read articles, everyone writes differently. Someone says the component should be specific to one card, others say it should be universal. How should I proceed in this case?
I myself see the picture like this:
Card/Card.jsx - Card wrapper, where I will indicate the color of the card and the width, since these parameters are present in both cards.
Card/Price.jsx - Price and buy button
Card/ProductOne.jsx - Content of the first product
Card/ProductTwo.jsx - Content of the second product Do
you think this is the right approach?