gpt-all-star

Here's a React component for a user profile card in a web application:

```jsx
import React from 'react';
import PropTypes from 'prop-types';

const UserProfileCard = ({ user }) => {
  return (
    <div className="user-profile-card">
      <div className="profile-header">
        <img
          src={user.avatar}
          alt={`${user.name}'s avatar`}
          className="profile-avatar"
        />
        <h2 className="profile-name">{user.name}</h2>
      </div>
      <div className="profile-details">
        <p className="profile-email">{user.email}</p>
        <p className="profile-role">{user.role}</p>
      </div>
      <div className="profile-actions">
        <button className="btn btn-primary">Message</button>
        <button className="btn btn-secondary">View Profile</button>
      </div>
    </div>
  )
}

UserProfileCard.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string.isRequired,
    avatar: PropTypes.string.isRequired,
    email: PropTypes.string.isRequired,
    role: PropTypes.string.isRequired,
  }).isRequired,
}

export default UserProfileCard
```

This component includes:
- A responsive layout with a profile header, details section, and action buttons
- Accessible image alt text and semantic HTML
- PropTypes for type checking
- Clean, commented code for maintainability

To use this component, import it into your application and pass a user object with the required properties.