Coffee card

├── src
`  `├── App.tsx `← we are here`
`  `├── index.css
`  `└── main.tsx

const [card, setCard] = useState({ icon: Coffee, header: 'Starbucks', ti... });
{/*Header*/}
  <card.icon />
  <span>{card.header}</span>
  <Star />
{/*Body*/}
  <h2>{card.title}</h2>
  {card.isNew && <span>New</span>}
  <p>{card.description}</p>
{/*Footer*/}
  <span>{card.price}</span>
  <button>
    <Info />
  </button>
  <button>Details</button>

'use client';

import { Coffee, Star, Info } from 'lucide-react';
import { useState } from 'react';

export default function Home() {
  const [card, setCard] = useState({
    icon: Coffee,
    header: 'Starbucks',
    title: "A 'Giftzy Latte'",
    description: 'One venti Caffe Latte and one Double Chocolate Brownie from Starbucks.',
    price: '$11.07',
    isNew: true,
  });

  return (
    <div className='py-4 bg-gray-200 flex p-4'>
      <div className='bg-white rounded-2xl shadow-md max-w-sm w-full overflow-hidden'>
        {/* Header */}
        <div className='flex items-center justify-between px-5 pt-5 pb-4'>
          <div className='flex items-center gap-3'>
            <div className='w-10 h-10 bg-green-700 rounded-full flex items-center justify-center'>
              <card.icon className='w-5 h-5 text-white' />
            </div>
            <span className='text-base font-semibold text-gray-900'>{card.header}</span>
          </div>
          <button className='text-gray-300 hover:text-yellow-400 transition-colors'>
            <Star className='w-5 h-5' />
          </button>
        </div>

        {/* Divider */}
        <div className='border-t border-gray-100 mx-5' />

        {/* Body */}
        <div className='px-5'>
          <div className='flex items-center'>
            <h2 className='text-lg font-semibold text-gray-900 pt-4 '>{card.title}</h2>
            {card.isNew && (
              <span className='text-xs font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full'>New</span>
            )}
          </div>
          <p className='text-sm text-gray-500 leading-relaxed pb-2'>{card.description}</p>
        </div>

        {/* Footer */}
        <div className='flex items-center justify-between px-5 pt-3 pb-5'>
          <div className='flex items-center gap-1.5'>
            <span className='text-xl font-bold text-gray-900'>{card.price}</span>
            <button className='text-gray-300 hover:text-gray-500 transition-colors'>
              <Info className='w-4 h-4' />
            </button>
          </div>
          <button className='text-sm font-medium text-teal-600 border border-teal-600 rounded-full px-5 py-1.5 hover:bg-teal-50 transition-colors'>
            Details
          </button>
        </div>
      </div>
    </div>
  );
}