Nuvolaris Team Component

A React component showcasing the Nuvolaris team members.

Installation

npm install nuvolaris-team

Usage

import Team from 'nuvolaris-team';

function App() {
  return <Team />;
}

Props

TeamProps

• members (optional): Array of team member objects
• title (optional): Section title (default: "Nuvolaris Team")
• subtitle (optional): Section subtitle (default: "Meet the experts driving innovation in serverless computing")
• className (optional): Additional CSS classes
• imageBasePath (optional): Base path for images (e.g., "/public" or "")

TeamMember

interface TeamMember {
  name: string;
  title: string;
  description: string;
  image?: string;
}

Custom Usage

import Team, { TeamMember } from 'nuvolaris-team';

const customMembers: TeamMember[] = [
  {
    name: "John Doe",
    title: "Software Engineer",
    description: "Expert in React and TypeScript",
    image: "/path/to/image.jpg"
  }
];

function App() {
  return (
    <Team
      members={customMembers}
      title="Our Team"
      subtitle="Meet our amazing team"
      className="my-custom-class"
    />
  );
}

Using Images from public/content/team folder

Place your team member images in your project's public/content/team/ folder:

public/
└── content/
    └── team/
        ├── michele-sciabarra.jpeg
        ├── mirella-digirolamo.jpeg
        ├── giuseppe-depalma.jpeg
        └── daniele-evangelisti.jpeg

The component will automatically look for images at /content/team/... paths. If an image is not found, it will display the member's initials as a fallback.

You can also use the imageBasePath prop to customize the base path:

<Team imageBasePath="/assets" />
// This will look for images at /assets/content/team/...

Styling

The component uses Tailwind CSS classes. Make sure your project has Tailwind CSS configured with the following CSS variables:

• --background
• --foreground
• --card
• --border
• --primary
• --muted-foreground

Or you can override the styling using the className prop.

License

Apache-2.0