Fintech Landing Page Component

A modern, responsive landing page component built with React, TypeScript, Tailwind CSS, and shadcn/ui. Perfect for fintech applications and financial services websites.

Features

• 🎨 Modern, responsive design with glassmorphic effects
• 🌙 Dark/light theme support
• 📱 Mobile-first responsive design
• ⚡ Built with Vite for fast development
• 🎯 TypeScript for type safety
• 🎨 Tailwind CSS with shadcn/ui components
• 🔧 Highly customizable and extensible

Installation

Option 1: Install as NPM Package (Recommended)

npm install fintech-landing-page
# or
yarn add fintech-landing-page
# or
pnpm add fintech-landing-page

Option 2: Copy Components Directly

Copy the src/components and src/pages directories to your project and install the required dependencies.

Usage

Basic Usage

import { FintechLandingPage } from 'fintech-landing-page';
import 'fintech-landing-page/styles';

function App() {
  return (
    <FintechLandingPage 
      onGetStarted={() => console.log('Get Started clicked')}
      onBookDemo={() => console.log('Book Demo clicked')}
      onLogin={() => console.log('Login clicked')}
    />
  );
}

Advanced Usage with Customization

import { FintechLandingPage } from 'fintech-landing-page';
import 'fintech-landing-page/styles';

function App() {
  const handleGetStarted = () => {
    // Navigate to your app's signup page
    window.location.href = '/signup';
  };

  const handleBookDemo = () => {
    // Open demo booking modal or navigate to demo page
    window.location.href = '/demo';
  };

  const handleLogin = () => {
    // Navigate to your app's login page
    window.location.href = '/login';
  };

  const customLogo = (
    <div className="text-2xl font-bold text-primary">
      Your Brand
    </div>
  );

  return (
    <FintechLandingPage 
      onGetStarted={handleGetStarted}
      onBookDemo={handleBookDemo}
      onLogin={handleLogin}
      customLogo={customLogo}
      customTheme="auto"
      className="custom-landing-page"
    />
  );
}

Using Individual Components

import { 
  Header, 
  HeroSection, 
  Features, 
  Testimonials, 
  Pricing, 
  Footer 
} from 'fintech-landing-page';
import 'fintech-landing-page/styles';

function CustomLandingPage() {
  return (
    <div className="min-h-screen">
      <Header 
        onLogin={() => console.log('Login')}
        customTheme="dark"
      />
      <HeroSection 
        onGetStarted={() => console.log('Get Started')}
        onBookDemo={() => console.log('Book Demo')}
      />
      <Features />
      <Testimonials />
      <Pricing onGetStarted={() => console.log('Get Started')} />
      <Footer />
    </div>
  );
}

Props

FintechLandingPage Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onGetStarted | () => void | undefined | Callback when "Start for free" button is clicked | | onBookDemo | () => void | undefined | Callback when "Book a demo" button is clicked | | onLogin | () => void | undefined | Callback when "Log in" button is clicked | | customLogo | React.ReactNode | undefined | Custom logo component to replace the default logo | | customTheme | 'light' \| 'dark' \| 'auto' | 'auto' | Theme preference | | className | string | '' | Additional CSS classes |

Header Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onLogin | () => void | undefined | Callback when login button is clicked | | customLogo | React.ReactNode | undefined | Custom logo component | | customTheme | 'light' \| 'dark' \| 'auto' | 'auto' | Theme preference |

HeroSection Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onGetStarted | () => void | undefined | Callback when "Start for free" button is clicked | | onBookDemo | () => void | undefined | Callback when "Book a demo" button is clicked |

Styling

Required CSS

Make sure to import the required CSS files:

import 'fintech-landing-page/styles';

Tailwind CSS Configuration

If you're using Tailwind CSS in your project, make sure your tailwind.config.js includes the landing page components:

module.exports = {
  content: [
    // ... your content paths
    './node_modules/fintech-landing-page/dist/**/*.{js,ts,jsx,tsx}',
  ],
  // ... rest of your config
}

Custom Styling

You can override styles using Tailwind CSS classes or CSS custom properties:

/* Custom CSS variables for theming */
:root {
  --primary: 222.2 84% 4.9%;
  --primary-foreground: 210 40% 98%;
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  /* ... other variables */
}

Integration with React Router

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { FintechLandingPage } from 'fintech-landing-page';
import YourApp from './YourApp';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<FintechLandingPage />} />
        <Route path="/app/*" element={<YourApp />} />
      </Routes>
    </BrowserRouter>
  );
}

Integration with Next.js

// pages/index.tsx
import { FintechLandingPage } from 'fintech-landing-page';
import 'fintech-landing-page/styles';

export default function HomePage() {
  return <FintechLandingPage />;
}

Building from Source

If you want to build the component library from source:

# Install dependencies
npm install

# Build the library
npm run build:lib

# The built files will be in the `dist` directory

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Dependencies

This component requires the following peer dependencies:

• React 18+
• React DOM 18+
• Tailwind CSS 3.4+

License

MIT License - feel free to use this component in your projects.