<<<<<<< HEAD

Modern Stripe-Inspired Navigation 🚀

A modern, animated navigation component inspired by Stripe's design system. Built with React, TypeScript, Tailwind CSS, and Framer Motion.

✨ Features

• 🎯 Pixel-perfect recreation of Stripe's navigation
• 📱 Fully responsive design with mobile-first approach
• 🎨 Smooth animations powered by Framer Motion
• 🌙 Customizable theming with Tailwind CSS
• 🎮 Interactive hover effects and transitions
• 📦 Tree-shakeable and optimized bundle
• 💻 TypeScript support for better developer experience
• 🔍 Accessible by default

🚀 Demo

Live Demo

🛠️ Installation

# Using npm
npm install modern-stripe-nav

# Using yarn
yarn add modern-stripe-nav

# Using pnpm
pnpm add modern-stripe-nav

💻 Usage

import { Navbar } from 'modern-stripe-nav';
import { productItems, solutionItems, developerItems, resourceItems } from './mockData';

function App() {
  return (
    <div className="app">
      <Navbar />
    </div>
  );
}

Customizing Navigation Items

// mockData.ts
import { CreditCard, Building2, ShoppingCart /* ... */ } from 'lucide-react';

export const productItems = [
  {
    title: "Global Payments",
    links: [
      { name: "Payments", icon: CreditCard },
      // ... more items
    ]
  }
  // ... more sections
];

🎨 Customization

The component uses Tailwind CSS for styling and can be customized using your project's tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        background: 'var(--background)',
        text: 'var(--text)',
        // ... your custom colors
      },
    },
  },
};

📚 API Reference

Navbar Props

DropdownMenu Props

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines to get started.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by Stripe's navigation design
• Built with React
• Styled with Tailwind CSS
• Animations powered by Framer Motion
• Icons from Lucide

🌟 Support

If you found this helpful, please consider giving it a star ⭐️ to show your support!

Report Bug · Request Feature

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

33a036c (feat: Initial commit 🚀)