npm package: @florianbonnet/newsletter-template
Description: A React template for newsletter signup page based on Figma Simple Design System
Author: Florian Bonnet
Latest version: 1.0.0

# Newsletter Template Package

A React component library based on the Simple Design System from Figma, specifically designed for newsletter signup pages and content cards. Perfect for use with v0 and other React applications.

## Installation

```bash
npm install @florianbonnet/newsletter-template
```

## Quick Start

```jsx
import { NewsletterTemplate } from '@florianbonnet/newsletter-template';

function App() {
  return (
    <NewsletterTemplate
      title="Welcome to our platform"
      description="Discover amazing features and join our community."
      onCardButtonClick={() => console.log('Card button clicked')}
      onNewsletterSubmit={(email) => console.log('Newsletter signup:', email)}
    />
  );
}
```

## Components

### NewsletterTemplate (Main Component)

The complete template matching the Figma design with both card and newsletter sections.

```jsx
import { NewsletterTemplate } from '@florianbonnet/newsletter-template';

<NewsletterTemplate
  title="Introducing the redesigned Figma"
  description="Body text for whatever you'd like to say..."
  buttonText="Read this article"
  newsletterHeading="Subscribe to our Newsletter"
  emailPlaceholder="you@example.com"
  submitButtonText="Submit"
  onCardButtonClick={() => {}}
  onNewsletterSubmit={(email) => {}}
  showCard={true}
  showNewsletter={true}
/>
```

### Card Component

A standalone card component for content display.

```jsx
import { Card } from '@florianbonnet/newsletter-template';
import { Zap } from 'lucide-react';

<Card
  title="Power up your workflow"
  description="Boost your productivity with our powerful new tools."
  buttonText="Get started"
  icon={<Zap className="w-8 h-8 text-yellow-500" />}
  onButtonClick={() => {}}
/>
```

### NewsletterForm Component

A standalone newsletter signup form.

```jsx
import { NewsletterForm } from '@florianbonnet/newsletter-template';

<NewsletterForm
  heading="Stay updated"
  emailPlaceholder="Enter your email"
  submitButtonText="Subscribe"
  onSubmit={(email) => {}}
/>
```

### Button Component

A customizable button component matching the design system.

```jsx
import { Button } from '@florianbonnet/newsletter-template';
import { ArrowRight } from 'lucide-react';

<Button
  variant="primary"
  size="medium"
  onClick={() => {}}
  endIcon={<ArrowRight />}
>
  Get Started
</Button>
```

### InputField Component

A form input field component.

```jsx
import { InputField } from '@florianbonnet/newsletter-template';

<InputField
  type="email"
  value={email}
  onChange={setEmail}
  placeholder="Enter your email"
  label="Email Address"
  required
/>
```

## Props Reference

### NewsletterTemplate Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | "Introducing the redesigned Figma" | Card title |
| `description` | `string` | "Body text for whatever..." | Card description |
| `buttonText` | `string` | "Read this article" | Card button text |
| `newsletterHeading` | `string` | "Subscribe to our Newsletter" | Newsletter section heading |
| `emailPlaceholder` | `string` | "you@example.com" | Email input placeholder |
| `submitButtonText` | `string` | "Submit" | Newsletter submit button text |
| `icon` | `React.ReactNode` | `<Star />` | Custom icon for the card |
| `onCardButtonClick` | `() => void` | - | Card button click handler |
| `onNewsletterSubmit` | `(email: string) => void` | - | Newsletter form submit handler |
| `className` | `string` | "" | Custom CSS classes |
| `showCard` | `boolean` | `true` | Show/hide card section |
| `showNewsletter` | `boolean` | `true` | Show/hide newsletter section |

## Styling

This package uses Tailwind CSS classes. Make sure you have Tailwind CSS configured in your project. The components are designed to be responsive and follow the exact specifications from the Figma design.

### Required Dependencies

- React 16.8+
- Tailwind CSS (for styling)
- lucide-react (for icons)

## Usage with v0

This package is specifically designed to work well with v0. You can import and use the components directly:

```jsx
import { NewsletterTemplate, Card, NewsletterForm } from '@florianbonnet/newsletter-template';

// Use the complete template
<NewsletterTemplate />

// Or use individual components
<Card title="..." description="..." />
<NewsletterForm onSubmit={handleSubmit} />
```

## Customization

### Custom Icons

You can replace the default star icon with any React component:

```jsx
import { Heart, Zap, Coffee } from 'lucide-react';

<NewsletterTemplate
  icon={<Heart className="w-8 h-8 text-red-500" />}
  // ... other props
/>
```

### Custom Styling

Add custom classes to override default styles:

```jsx
<NewsletterTemplate
  className="my-custom-class"
  // ... other props
/>
```

## Development

### Setup

```bash
git clone <repository-url>
cd newsletter-template-package
npm install
```

### Storybook

View components in Storybook:

```bash
npm run storybook
```

### Build

```bash
npm run build
```

## Design System

This package follows the Simple Design System from Figma with the following specifications:

- **Typography**: Inter font family
- **Colors**: Neutral grays with high contrast
- **Spacing**: Consistent 4px grid system
- **Border Radius**: 8px for components, 16px for containers
- **Layout**: Flexbox-based responsive design

## License

MIT

## Contributing

1. Fork the repository
2. Create your feature branch
3. Make your changes
4. Add/update tests and stories
5. Submit a pull request

## Support

For issues and questions, please visit our [GitHub repository](https://github.com/florianbonnet/newsletter-template).