Day 1 — ProfileCard

Exercise

1. Create src/components/ProfileCard.js
2. Your ProfileCard will use these props: name, title, desc, and imageSrc. Start with the three text props; you will add imageSrc in Hands-on #02.
3. Display the three text props in your JSX.

Copy this starter with name, title, and desc:

1export function ProfileCard({ name, title, desc }) {
2  return (
3    <div className="flex items-center gap-4 text-gray-900">
4      <div>
5        <h2 className="text-xl font-semibold">{name}</h2>
6        <p className="text-gray-600">{title}</p>
7        <p className="mt-1 text-sm">{desc}</p>
8      </div>
9    </div>
10  );
11}

How every element works

• export function ProfileCard(…) — creates a reusable component other files can import.
• { name, title, desc } — props boxes. Parent pages pass values in; this component receives them.
• return ( … ) — what React shows on screen (must return JSX).
• Outer div with flex items-center gap-4 — lays content in a row with spacing (room for a photo later).
• {name}, {title}, {desc} — curly braces inject the prop values into JSX.
• Tailwind classes like text-xl, font-semibold, text-gray-600 — style without a separate CSS file.