react loyalty practice

import './Loyalty.css'

function Loyalty() {
return (

Loyalty Scheme

Complete 8 purchases and get free delivery!

  <div className="loyalty-section">
    <h2>Your Rewards</h2>
    <div className="reward-card">
      <p>10% off all dairy products</p>
      <button>Activate</button>
    </div>
    <div className="reward-card">
      <p>15% off your next order</p>
      <button>Activate</button>
    </div>
  </div>

  <div className="loyalty-section">
    <h2>Stamp Card</h2>
    <div className="stamps">
      {Array.from({ length: 8 }).map((_, i) => (
        <div key={i} className="stamp">
          {i === 7 ? 'FREE' : i + 1}
        </div>
      ))}
    </div>
  </div>
</div>

)
}

export default Loyalty

.page { padding: 30px; }
.page h1 { margin-bottom: 10px; }
.subtitle { color: #666; margin-bottom: 30px; }

.loyalty-section { margin-bottom: 30px; }
.loyalty-section h2 { margin-bottom: 15px; }

.reward-card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
margin-bottom: 10px;
max-width: 400px;
display: flex;
justify-content: space-between;
align-items: center;
}

.reward-card button {
background: #A2C24A;
color: white;
border: none;
border-radius: 6px;
padding: 8px 16px;
cursor: pointer;
font-family: 'Gluten', cursive;
}

.stamps { display: flex; gap: 10px; flex-wrap: wrap; }

.stamp {
width: 55px;
height: 55px;
border-radius: 50%;
background: #A2C24A;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 13px;
}