npm package: @islaintel/islawaves-landing
Description: IslaWaves landing page component with animated 3D hero section for Next.js applications
Author: IslaIntel
Latest version: 1.0.1

# IslaWaves Landing Page

A beautiful, production-ready landing page component for Next.js applications featuring an animated 3D hero section built with Three.js and React Three Fiber.

![IslaWaves Landing](https://img.shields.io/badge/Next.js-15+-black?style=flat-square&logo=next.js)
![React](https://img.shields.io/badge/React-19+-blue?style=flat-square&logo=react)
![TypeScript](https://img.shields.io/badge/TypeScript-5+-blue?style=flat-square&logo=typescript)
![Tailwind CSS](https://img.shields.io/badge/Tailwind-4+-38bdf8?style=flat-square&logo=tailwind-css)

## Features

- ✨ **Stunning 3D Hero Section** with animated Three.js graphics
- 📱 **Fully Responsive** - optimized for mobile, tablet, and desktop
- 🎨 **Tailwind CSS 4** - modern utility-first styling
- 🌙 **Dark Mode Support** - seamless theme switching
- ⚡ **Performance Optimized** - smooth 60fps animations
- 🎯 **TypeScript** - full type safety
- 🧩 **Modular Components** - use sections independently or as a complete page
- 🔗 **Integrated Waitlist** - "Join the Waitlist" CTAs with relative routing
- 📬 **Form Integration** - Contact form with Zapier webhook support
- ♿ **Accessible** - WCAG compliant

## Installation

```bash
npm install @islaintel/islawaves-landing
# or
yarn add @islaintel/islawaves-landing
# or
pnpm add @islaintel/islawaves-landing
```

## Quick Start

### 1. Install Required Dependencies

This package requires the following peer dependencies:

```bash
npm install next@15 react@19 react-dom@19 tailwindcss@4
```

### 2. Copy Static Assets

Copy the required image assets from the package to your `public` folder:

```bash
# From your project root
cp -r node_modules/@islaintel/islawaves-landing/public/* public/
```

Required assets:
- `public/islawaves-logo-square.png` - Header logo
- `public/islawaves-logo-horizontal.png` - Footer logo
- `public/logos/*` - Various service integration icons

### 3. Configure Tailwind CSS

Add the package paths to your `tailwind.config.js` or `tailwind.config.ts`:

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    // Add this line to include the package components
    './node_modules/@islaintel/islawaves-landing/src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        playfair: ['Playfair Display', 'serif'],
      },
    },
  },
  plugins: [],
}
```

### 4. Import Global Styles

In your root layout (`app/layout.tsx`), import the package styles:

```tsx
import '@islaintel/islawaves-landing/styles'
import './globals.css' // Your custom styles
```

### 5. Use the Landing Page

#### Option A: Use the Complete Landing Page

```tsx
import { IslaWavesLanding } from '@islaintel/islawaves-landing'

export default function Home() {
  return <IslaWavesLanding />
}
```

#### Option B: Use Individual Sections

```tsx
import { 
  Header,
  HeroSection,
  FeaturesSection,
  PricingSection,
  ContactSection,
  FooterSection 
} from '@islaintel/islawaves-landing'

export default function Home() {
  return (
    <div className="min-h-screen">
      <div className="flex flex-col relative min-h-screen">
        <Header />
        <div className="w-full border-t" />
        
        <div className="flex-1 flex flex-col">
          <HeroSection />
          <main className="bg-background">
            <FeaturesSection />
            <PricingSection />
            <ContactSection />
            <FooterSection />
          </main>
        </div>
      </div>
    </div>
  )
}
```

## Customization

### Waitlist Integration

The package includes "Join the Waitlist" CTAs in the header and hero section that route to `/waitlist`. Users need to create their own waitlist page:

```tsx
// app/waitlist/page.tsx
export default function Waitlist() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="max-w-md w-full p-8">
        <h1 className="text-3xl font-bold mb-4">Join the Waitlist</h1>
        {/* Your waitlist form here */}
      </div>
    </div>
  )
}
```

### Contact Form Integration

The contact form is pre-configured with a Zapier webhook. To use your own webhook, update the `ContactSection` component or pass a custom webhook URL via props.

The form submits data in this format:
```json
{
  "name": "User Name",
  "email": "user@example.com",
  "workflow": "User's workflow description"
}
```

### Customize the Hero Section

The `HeroSection` component accepts props to customize the 3D animation:

```tsx
import { HeroSection } from '@islaintel/islawaves-landing'

export default function CustomHero() {
  return (
    <HeroSection 
      rotateX={-10}
      rotateY={35}
      rotateZ={0}
      // ... many more 3D customization options
    />
  )
}
```

### Use Individual Components

You can import and use individual UI components:

```tsx
import { Button, Card, Input } from '@islaintel/islawaves-landing'

export default function MyCustomPage() {
  return (
    <div>
      <Button variant="default">Click Me</Button>
      <Card>
        {/* Your content */}
      </Card>
    </div>
  )
}
```

## Configuration Requirements

### Fonts

This package uses the following fonts. Add them to your `app/layout.tsx`:

```tsx
import { Inter } from 'next/font/google'
import { Playfair_Display } from 'next/font/google'

const inter = Inter({ 
  subsets: ['latin'],
  variable: '--font-inter',
})

const playfair = Playfair_Display({ 
  subsets: ['latin'],
  variable: '--font-playfair',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.variable} ${playfair.variable}`}>
      <body className={inter.className}>{children}</body>
    </html>
  )
}
```

### Theme Provider (Optional)

For dark mode support, wrap your app with the theme provider:

```tsx
import { ThemeProvider } from 'next-themes'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}
```

## Package Structure

```
@islaintel/islawaves-landing/
├── src/
│   ├── components/
│   │   ├── gptui/          # 3D Hero components
│   │   ├── islawaves/      # Landing page sections
│   │   └── ui/             # Reusable UI components
│   ├── app/
│   │   └── globals.css     # Global styles
│   └── index.ts            # Main exports
├── public/                  # Static assets
└── README.md
```

## Dependencies

This package includes the following dependencies:

- **3D Graphics**: `three`, `@react-three/fiber`, `@react-three/drei`
- **UI Components**: `@radix-ui/*` components
- **Animation**: `framer-motion`
- **Styling**: `tailwind-merge`, `class-variance-authority`
- **Icons**: `@tabler/icons-react`, `lucide-react`
- **Forms**: `react-hook-form`, `zod`

All dependencies are included - you don't need to install them separately!

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

WebGL support required for 3D animations.

## Examples

### Minimal Setup

```tsx
// app/page.tsx
import { IslaWavesLanding } from '@islaintel/islawaves-landing'

export default function Home() {
  return <IslaWavesLanding />
}
```

### With Custom Branding

```tsx
// Customize the content by creating your own sections
import { 
  Header,
  HeroSection,
  FooterSection 
} from '@islaintel/islawaves-landing'

export default function CustomPage() {
  return (
    <div className="min-h-screen">
      <Header />
      <HeroSection />
      {/* Add your custom sections here */}
      <FooterSection />
    </div>
  )
}
```

## Performance Tips

1. **Lazy Load Heavy Components**: Use dynamic imports for the 3D hero section if it's not immediately visible
2. **Optimize Images**: Compress the logo images in the `public` folder
3. **Reduce Motion**: The package respects `prefers-reduced-motion` for accessibility

## Troubleshooting

### Three.js errors

If you see Three.js related errors, ensure you have the correct peer dependencies:

```bash
npm install three@latest @react-three/fiber@latest @react-three/drei@latest
```

### Tailwind styles not applying

Make sure you've added the package path to your `tailwind.config.js` content array.

### Images not loading

Verify that you've copied the assets from `node_modules/@islaintel/islawaves-landing/public/` to your `public/` folder.

## Contributing

Issues and pull requests are welcome! Please visit our [GitHub repository](https://github.com/islaintel/islawaves-landing).

## License

MIT © IslaIntel

## Support

- 📧 Email: support@islaintel.com
- 🌐 Website: [https://www.islaintel.com](https://www.islaintel.com)
- 📝 Documentation: [https://www.islaintel.com/docs](https://www.islaintel.com/docs)

---

Built with ❤️ by [IslaIntel](https://www.islaintel.com)