1// Clean React component -- no anti-patterns
 2
 3import React from 'react';
 4
 5export function FeatureCard({ title, description, icon }) {
 6  return (
 7    <div className="rounded-lg bg-white p-6 shadow-sm ring-1 ring-gray-200">
 8      <div className="flex items-center gap-4">
 9        <div className="text-teal-600 text-2xl">{icon}</div>
10        <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
11      </div>
12      <p className="text-gray-600 mt-2">{description}</p>
13    </div>
14  );
15}
16
17export function HeroSection() {
18  return (
19    <section className="bg-gray-950 py-20">
20      <h1 className="text-5xl font-bold text-white">Welcome</h1>
21      <p className="mt-4 text-gray-300">Build something amazing today</p>
22    </section>
23  );
24}
25
26export function StatsCard({ value, label }) {
27  return (
28    <div className="rounded-lg p-6 ring-1 ring-gray-200">
29      <span className="text-3xl font-bold tabular-nums">{value}</span>
30      <p className="text-gray-600 mt-1">{label}</p>
31    </div>
32  );
33}