Finlion Website

A modern, responsive business website built with Next.js, featuring a contact form, services showcase, and responsive design.

Features

• Modern, responsive design with Tailwind CSS
• Server-side rendering with Next.js 15+
• Contact form with email integration
• Rate limiting for API routes
• Redis integration for caching and rate limiting
• Docker containerization for both development and production
• Animated UI components with Framer Motion
• Toast notifications system
• Responsive navigation with mobile support
• Services showcase section
• About page
• Contact page with form validation

Technology Stack

Frontend

• Next.js 15.0.4 with App Router
• React 19.0.0
• TypeScript
• Tailwind CSS for styling
• Framer Motion for animations
• HeadlessUI for UI components
• Lucide React & React Icons for icons

Backend

• Next.js API Routes
• Nodemailer for email functionality
• Upstash Redis for rate limiting
• Environment variables management

Development & Build Tools

• PNPM 9.14.2 package manager
• ESLint for code linting
• TypeScript for type safety
• Docker & Docker Compose
• PostCSS & Autoprefixer

Getting Started

Prerequisites

• Node.js 18+ installed
• PNPM package manager
• Docker and Docker Compose (for containerized development)
• Redis (handled through Upstash)

Environment Variables

Create a .env file in the root directory with the following variables:

# Email Configuration
SMTP_HOST=your-smtp-host
SMTP_PORT=your-smtp-port
SMTP_USER=your-smtp-user
SMTP_PASS=your-smtp-password
FROM_EMAIL=your-from-email
TO_EMAIL=your-to-email

# Redis Configuration (for rate limiting)
UPSTASH_REDIS_REST_URL=your-redis-url
UPSTASH_REDIS_REST_TOKEN=your-redis-token

Development Setup

1. Install PNPM (if not already installed):

corepack enable && corepack prepare pnpm@latest --activate

2. Install dependencies:

pnpm install

3. Start the development server:

Using Docker:

docker compose -f docker-compose.dev.yml up

Without Docker:

pnpm dev

The site will be available at http://localhost:3000

Production Deployment

1. Build and run using Docker:

docker compose up -d

The production site will be available at http://localhost:805

Project Structure

├── public/               # Static files
│   ├── images/          # Image assets
│   └── ...
├── src/
│   ├── app/            # Next.js app router pages
│   │   ├── api/       # API routes
│   │   ├── about/     # About page
│   │   ├── contact/   # Contact page
│   │   └── services/  # Services page
│   ├── components/    # React components
│   │   ├── home/     # Home page components
│   │   ├── layout/   # Layout components
│   │   ├── providers/ # Context providers
│   │   ├── shared/   # Shared components
│   │   └── ui/       # UI components
│   ├── data/         # Static data
│   ├── lib/          # Utility functions
│   ├── styles/       # Global styles
│   └── types/        # TypeScript types

API Routes

• /api/contact - Contact form submission endpoint with rate limiting

Available Scripts

• pnpm dev - Start development server
• pnpm build - Build production application
• pnpm start - Start production server
• pnpm lint - Run ESLint

Docker Configuration

Three Docker Compose configurations are available:

• docker-compose.yml - Production deployment
• docker-compose.dev.yml - Development environment with hot reload
• docker-compose.staging.yml - Staging environment

Contributing

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

License

This project is proprietary and confidential.