Vista Pacific Capital - Equipment Financing Landing Page

Overview

A modern, responsive landing page for Vista Pacific Capital's equipment financing services. Built with Next.js, TypeScript, and Tailwind CSS, featuring animated components with Framer Motion and Lucide icons.

Features

🎯 Core Features

• Responsive design optimized for all screen sizes
• Animated components using Framer Motion
• SEO optimization with meta tags
• Interactive UI elements
• Real-time form validation
• Custom gradients and animations

📱 Key Sections

1. Hero Section

   • Live rates badge with animation
   • Hero title with gradient text
   • Feature grid with hover effects
   • Quick quote form
   • CTA buttons

2. Services Section

   • Industry-specific solutions
   • Interactive service cards
   • Custom icons for each service
   • Feature lists

3. Benefits Section

   • Animated benefit cards
   • Custom gradient backgrounds
   • Icon integration
   • Feature lists with checkmarks

4. FAQ Section

   • Common questions and answers
   • Interactive card design
   • Hover animations

5. Final CTA Section

   • Background image with overlay
   • Gradient effects
   • Call-to-action button

Technical Stack

🛠 Core Technologies

• Next.js (React Framework)
• TypeScript
• Tailwind CSS
• Framer Motion
• Lucide Icons

📦 Key Components

SEO Configuration

interface SEOProps {
  title: string;
  description: string;
  keywords: string;
}

Service Card Structure

interface Service {
  title: string;
  description: string;
  features: string[];
  icon: LucideIcon;
  href: string;
}

Benefit Card Structure

interface Benefit {
  title: string;
  description: string;
  icon: LucideIcon;
  points: string[];
}

🎨 Design System

Color Palette

• Primary Blue: #1B365D
• Secondary Blue: #2C4C7C
• Accent Cyan: Various opacities of cyan
• CTA Orange: #FF6B35
• Text Colors: Various gradients and opacities

Animation Configurations

const fadeInUp = {
  hidden: { opacity: 0, y: 20 },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: { duration: 0.6, ease: "easeOut" }
  }
};

UI Components

QuickQuoteForm

• Real-time validation
• Multi-step form process
• Responsive design
• Custom styling

Service Cards

• Hover animations
• Icon integration
• Feature lists
• Call-to-action links

Benefit Cards

• Custom gradients
• Icon animations
• Feature lists
• Hover effects

Implementation Details

🔧 Setup

1. Install dependencies:

npm install
# Required packages: next, react, typescript, tailwindcss, framer-motion, lucide-react

2. Configure Tailwind:

npx tailwindcss init -p

💻 Development

1. Run development server:

npm run dev

2. Build for production:

npm run build

🎨 Styling Guidelines

• Use Tailwind utility classes
• Follow gradient patterns for consistency
• Maintain responsive design principles
• Use custom animation configs

Best Practices

🎯 Performance

• Image optimization with Next.js Image component
• Lazy loading for off-screen components
• Optimized animations with Framer Motion
• SEO optimization with meta tags

📱 Responsive Design

• Mobile-first approach
• Flexible grid layouts
• Responsive typography
• Adaptive spacing

🔍 SEO

• Comprehensive meta tags
• Semantic HTML structure
• Optimized content structure
• Social media meta tags

Customization

🎨 Theme Customization

• Modify color schemes in Tailwind config
• Adjust animation parameters
• Update gradient patterns
• Customize component styles

📝 Content Management

• Update service offerings in services array
• Modify benefits in benefits array
• Adjust FAQ content in faqs array
• Edit SEO meta tags

Proprietary Notice

Confidentiality and Ownership

This codebase is the exclusive property of Vista Pacific Capital. All rights reserved. This software, including its source code, design, functionality, and documentation, is confidential and proprietary information.

Restrictions

• No unauthorized copying, modification, or distribution
• No public sharing or open-source distribution
• No use without explicit written permission
• No reverse engineering or decompilation

Security Notice

This repository contains sensitive business logic and proprietary algorithms. Access should be strictly limited to authorized personnel only.

---