MastroGPT Component

A React component for showcasing MastroGPT - The Development Environment for Your Private AI.

Installation

npm install nuvolaris-mastrogpt

Usage

import MastroGPT from 'nuvolaris-mastrogpt';

function App() {
  return (
    <MastroGPT
      onDownloadClick={() => console.log('Download clicked')}
      onLaunchClick={() => console.log('Launch clicked')}
    />
  );
}

Props

MastroGPTProps

• heroImage (optional): URL for the hero section image
• interfaceImage (optional): URL for the interface screenshot
• trainingImage (optional): URL for the training materials image
• onDownloadClick (optional): Callback function for download button
• onLaunchClick (optional): Callback function for launch button
• className (optional): Additional CSS classes

Example with Images

import MastroGPT from 'nuvolaris-mastrogpt';

function App() {
  return (
    <MastroGPT
      heroImage="/images/mastrogpt-hero.jpg"
      interfaceImage="/images/mastrogpt-interface.jpg"
      trainingImage="/images/training.jpg"
      onDownloadClick={() => {
        window.location.href = '/download';
      }}
      onLaunchClick={() => {
        window.location.href = '/launch';
      }}
    />
  );
}

Features

The component includes:

• Hero Section: Eye-catching introduction with gradient background
• What is MastroGPT: Overview of the platform
• Key Features: Comprehensive list of capabilities
• Who Needs It: Target audience breakdown
• What You Can Build: Use case examples
• Benefits: Value propositions
• Training Section: Educational offerings
• Call to Action: Download and launch buttons

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
• --secondary
• --muted-foreground

Image Placeholders

If no images are provided, the component will show placeholder graphics with emoji icons. This allows you to use the component immediately while you prepare your images.

Recommended Image Sizes

• Hero Image: 1200x675px (16:9 aspect ratio)
• Interface Image: 800x800px (1:1 aspect ratio)
• Training Image: 1200x675px (16:9 aspect ratio)

License

Apache-2.0