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.

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

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:

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:

# 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:

/** @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:

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

5. Use the Landing Page

Option A: Use the Complete Landing Page

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

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

Option B: Use Individual Sections

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:

// 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:

{
  "name": "User Name",
  "email": "[email protected]",
  "workflow": "User's workflow description"
}

Customize the Hero Section

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

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:

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:

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:

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

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

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

With Custom Branding

// 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:

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.

License

MIT © IslaIntel

Support

• 📧 Email: [email protected]
• 🌐 Website: https://www.islaintel.com
• 📝 Documentation: https://www.islaintel.com/docs

Built with ❤️ by IslaIntel