Enterprise Travel Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VoyageCorp | Enterprise Travel & Expense Management</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    
    <header>
        <div class="container header-container">
            <a href="#" class="logo">
                <div class="logo-icon">
                    <i class="fas fa-plane"></i>
                </div>
                <div class="logo-text">Voyage<span>Corp</span></div>
            </a>
            <ul class="nav-links">
                <li><a href="#solutions">Solutions</a></li>
                <li><a href="#expense">Expense Management</a></li>
                <li><a href="#clients">Clients</a></li>
                <li><a href="#testimonials">Testimonials</a></li>
            </ul>
            <div class="nav-cta">
                <a href="#enquiry" class="btn">Request Demo</a>
            </div>
            <div class="mobile-menu-toggle">
                <i class="fas fa-bars"></i>
            </div>
        </div>
    </header>

<section class="hero">
        <div class="container">
            <div class="hero-content fade-in">
                <div class="section-title" style="text-align: left; margin-bottom: 40px;">
                    <div class="subtitle">Enterprise Travel Platform</div>
                    <h1>Redefining Corporate Travel Management</h1>
                    <p style="text-align: left; margin: 0;">Streamline travel operations, control costs, and ensure compliance with our AI-powered travel and expense management platform designed for global enterprises.</p>
                </div>
                <div class="hero-btns">
                    <a href="#enquiry" class="btn">Request a Demo <i class="fas fa-arrow-right" style="margin-left: 10px;"></i></a>
                    <a href="#solutions" class="btn btn-secondary">Explore Solutions</a>
                </div>
                <div class="hero-stats">
                    <div class="stat-item">
                        <div class="stat-number">42%</div>
                        <div class="stat-label">Average Cost Reduction</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">99.8%</div>
                        <div class="stat-label">Policy Compliance</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">24/7</div>
                        <div class="stat-label">Global Support</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="solutions" class="solutions">
        <div class="container">
            <div class="section-title fade-in">
                <div class="subtitle">Our Solutions</div>
                <h2>Comprehensive Travel Management</h2>
                <p>End-to-end solutions designed to streamline corporate travel while enhancing employee experience and controlling costs.</p>
            </div>
            <div class="solutions-grid">
                <div class="solution-card fade-in">
                    <div class="solution-icon">
                        <i class="fas fa-globe-americas"></i>
                    </div>
                    <h3>Global Booking Platform</h3>
                    <p>Access negotiated rates with 500+ airlines, 900k hotels, and global car rental services through our unified booking platform with AI-powered recommendations.</p>
                </div>
                <div class="solution-card fade-in">
                    <div class="solution-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3>Travel Risk Management</h3>
                    <p>Real-time risk monitoring, traveler tracking, emergency response, and insurance integration to ensure employee safety worldwide.</p>
                </div>
                <div class="solution-card fade-in">
                    <div class="solution-icon">
                        <i class="fas fa-chart-network"></i>
                    </div>
                    <h3>Advanced Analytics</h3>
                    <p>Predictive insights, spend analysis, and customizable reporting dashboards to optimize travel programs and identify savings opportunities.</p>
                </div>
            </div>
        </div>
    </section>

<section id="expense" class="expense-management">
        <div class="container">
            <div class="section-title fade-in">
                <div class="subtitle">Expense Management</div>
                <h2>Seamless Travel & Expense Integration</h2>
                <p>Connect travel bookings with expense reporting, reconciliation, and reimbursement in one unified platform.</p>
            </div>
            <div class="expense-container">
                <div class="expense-image fade-in">
                    <img src="https://images.unsplash.com/photo-1551641506-ee5bf4cb45f1?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHRva3lvfGVufDB8fDB8fHww" alt="Expense Management Dashboard">
                    <div class="exp-image-overlay"></div>
                </div>
                <div class="expense-benefits fade-in">
                    <div class="benefit-item">
                        <li>
                            <div class="benefit-icon">
                                <i class="fas fa-bolt"></i>
                            </div>
                            <div class="benefit-content">
                                <h4>Automated Expense Capture</h4>
                                <p>AI-powered receipt scanning and data extraction eliminates 80% of manual entry with 99% accuracy.</p>
                            </div>
                        </li>
                    </div>
                    <div class="benefit-item">
                        <li>
                            <div class="benefit-icon">
                                <i class="fas fa-sync-alt"></i>
                            </div>
                            <div class="benefit-content">
                                <h4>Real-time Policy Validation</h4>
                                <p>Expenses are automatically checked against company policies before submission, flagging violations instantly.</p>
                            </div>
                        </li>
                    </div>
                    <div class="benefit-item">
                        <li>
                            <div class="benefit-icon">
                                <i class="fas fa-plug"></i>
                            </div>
                            <div class="benefit-content">
                                <h4>ERP Integration</h4>
                                <p>Direct sync with SAP, Oracle, NetSuite, QuickBooks and other financial systems for seamless reconciliation.</p>
                            </div>
                        </li>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="clients" class="clients">
        <div class="container">
            <div class="section-title fade-in">
                <div class="subtitle">Trusted Partners</div>
                <h2>Trusted by Global Enterprises</h2>
                <p>Join industry leaders who rely on VoyageCorp for their corporate travel management.</p>
            </div>
            <div class="client-logos">
                <div class="client-logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" alt="Google">
                </div>
                <div class="client-logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Microsoft_logo_%282019%29.svg" alt="Microsoft">
                </div>
                <div class="client-logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg" alt="Netflix">
                </div>
                <div class="client-logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" alt="IBM">
                </div>
                <div class="client-logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/f/fd/Salesforce_logo.png" alt="Salesforce">
                </div>
            </div>
        </div>
    </section>

<section id="testimonials" class="testimonials">
        <div class="container">
            <div class="section-title fade-in">
                <div class="subtitle" style="background: rgba(255, 255, 255, 0.15);">Client Success</div>
                <h2>What Our Clients Say</h2>
                <p>See how leading enterprises transformed their travel management with VoyageCorp.</p>
            </div>
            <div class="testimonial-slider">
                <div class="testimonial fade-in">
                    <div class="testimonial-content">
                        "Implementing VoyageCorp reduced our travel administration costs by 42% in the first year. The policy compliance tools alone saved us over $200K in unauthorized expenses. Their platform's integration with our SAP system was seamless."
                    </div>
                    <div class="testimonial-author">
                        <div class="author-avatar">SJ</div>
                        <div class="author-info">
                            <h4>Sarah Johnson</h4>
                            <p>Global Travel Director, Technova Inc.</p>
                        </div>
                    </div>
                </div>
                <div class="slider-controls">
                    <div class="slider-dot active"></div>
                    <div class="slider-dot"></div>
                    <div class="slider-dot"></div>
                    <div class="slider-dot"></div>
                </div>
            </div>
        </div>
    </section>

<section id="enquiry" class="enquiry">
        <div class="container">
            <div class="section-title fade-in">
                <div class="subtitle">Get Started</div>
                <h2>Request a Custom Demo</h2>
                <p>Let us show you how VoyageCorp can transform your corporate travel management.</p>
            </div>
            <div class="form-container fade-in">
                <form id="enquiryForm">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="firstName">First Name *</label>
                            <input type="text" id="firstName" name="firstName" required>
                        </div>
                        <div class="form-group">
                            <label for="lastName">Last Name *</label>
                            <input type="text" id="lastName" name="lastName" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="email">Business Email *</label>
                            <input type="email" id="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="phone">Phone Number</label>
                            <input type="tel" id="phone" name="phone">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="company">Company Name *</label>
                            <input type="text" id="company" name="company" required>
                        </div>
                        <div class="form-group">
                            <label for="employees">Number of Employees *</label>
                            <select id="employees" name="employees" required>
                                <option value="">Select Range</option>
                                <option value="500-1000">500 - 1,000</option>
                                <option value="1000-5000">1,000 - 5,000</option>
                                <option value="5000-10000">5,000 - 10,000</option>
                                <option value="10000+">10,000+</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="message">Specific Requirements or Questions</label>
                        <textarea id="message" name="message" placeholder="Tell us about your current travel management challenges and what you'd like to achieve..."></textarea>
                    </div>
                    <div class="form-footer">
                        <button type="submit" class="btn">Request Demo <i class="fas fa-paper-plane" style="margin-left: 10px;"></i></button>
                        <p style="margin-top: 20px; font-size: 0.9rem; color: var(--medium-grey)">We'll contact you within 24 business hours to schedule a personalized demo.</p>
                    </div>
                </form>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <div class="footer-logo">
                        <div class="logo-icon" style="width: 50px; height: 50px;">
                            <i class="fas fa-plane"></i>
                        </div>
                        <div class="logo-text">Voyage<span>Corp</span></div>
                    </div>
                    <div class="footer-about">
                        <p>Enterprise travel management solutions for global businesses. Streamlining corporate travel, controlling costs, and ensuring compliance since 2010.</p>
                    </div>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="footer-column">
                    <h3>Solutions</h3>
                    <ul class="footer-links">
                        <li><a href="#">Corporate Travel Management</a></li>
                        <li><a href="#">Expense Management</a></li>
                        <li><a href="#">Travel Risk Management</a></li>
                        <li><a href="#">Analytics & Reporting</a></li>
                        <li><a href="#">Global Support</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Resources</h3>
                    <ul class="footer-links">
                        <li><a href="#">Case Studies</a></li>
                        <li><a href="#">Travel Policy Templates</a></li>
                        <li><a href="#">Compliance Guides</a></li>
                        <li><a href="#">Industry Reports</a></li>
                        <li><a href="#">Blog</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Company</h3>
                    <ul class="footer-links">
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">Security</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                &copy; 2023 VoyageCorp. All rights reserved. | Privacy Policy | Terms of Service
            </div>
        </div>
    </footer>

</body>
</html>

CSS

/* Base Styles & Variables */
        :root {
            --dark-blue: #0c1f3d;
            --navy: #1a2f5a;
            --accent-blue: #2d5dcc;
            --light-blue: #4a7cff;
            --teal: #2cc8c8;
            --dark-grey: #2d3748;
            --medium-grey: #4a5568;
            --light-grey: #edf2f7;
            --white: #ffffff;
            --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.15);
            --gradient-primary: linear-gradient(135deg, #2d5dcc 0%, #4a7cff 100%);
            --gradient-dark: linear-gradient(135deg, #0c1f3d 0%, #1a2f5a 100%);
            --border-radius: 12px;
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            scroll-behavior: smooth;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            color: var(--dark-grey);
            background-color: var(--white);
            line-height: 1.7;
            overflow-x: hidden;
        }
        
        h1, h2, h3, h4 {
            font-weight: 700;
            line-height: 1.2;
        }
        
        .container {
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
        }
        
        section {
            padding: 100px 0;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 70px;
            position: relative;
        }
        
        .section-title .subtitle {
            display: inline-block;
            color: var(--accent-blue);
            font-weight: 600;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 15px;
            background: rgba(45, 93, 204, 0.1);
            padding: 8px 20px;
            border-radius: 30px;
        }
        
        .section-title h2 {
            font-size: 2.8rem;
            color: var(--dark-blue);
            margin-bottom: 20px;
        }
        
        .section-title p {
            font-size: 1.1rem;
            color: var(--medium-grey);
            max-width: 700px;
            margin: 0 auto;
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 16px 36px;
            background: var(--gradient-primary);
            color: white;
            text-decoration: none;
            border-radius: var(--border-radius);
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: var(--transition);
            font-size: 1rem;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .btn:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background: var(--gradient-dark);
            transition: all 0.5s ease;
            z-index: -1;
        }
        
        .btn:hover:before {
            width: 100%;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }
        
        .btn-secondary {
            background: transparent;
            color: var(--accent-blue);
            border: 2px solid var(--accent-blue);
        }
        
        .btn-secondary:before {
            display: none;
        }
        
        .btn-secondary:hover {
            background: var(--accent-blue);
            color: white;
        }
        
        /* Header */
        header {
            background-color: rgba(255, 255, 255, 0.98);
            padding: 20px 0;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            box-shadow: var(--shadow-sm);
            backdrop-filter: blur(10px);
        }
        
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            display: flex;
            align-items: center;
            text-decoration: none;
        }
        
        .logo-icon {
            width: 40px;
            height: 40px;
            background: var(--gradient-primary);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
        }
        
        .logo-icon i {
            color: white;
            font-size: 1.2rem;
        }
        
        .logo-text {
            font-size: 1.6rem;
            font-weight: 800;
            color: var(--dark-blue);
        }
        
        .logo-text span {
            color: var(--accent-blue);
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 40px;
        }
        
        .nav-links a {
            color: var(--dark-blue);
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            position: relative;
            padding: 5px 0;
        }
        
        .nav-links a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--gradient-primary);
            bottom: 0;
            left: 0;
            transition: width 0.3s ease;
        }
        
        .nav-links a:hover:after {
            width: 100%;
        }
        
        .nav-cta {
            margin-left: 40px;
        }
        
        .mobile-menu-toggle {
            display: none;
            font-size: 1.5rem;
            color: var(--dark-blue);
            cursor: pointer;
        }
        
        /* Hero Section */
        .hero {
            padding-top: 160px;
            padding-bottom: 120px;
            background: var(--gradient-dark);
            position: relative;
            overflow: hidden;
        }
        
        .hero:before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1536098561742-ca998e48cbcc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHRva3lvfGVufDB8fDB8fHww');
            background-size: cover;
            background-position: center;
            opacity: 0.2;
        }
        
        .hero-content {
            max-width: 650px;
            position: relative;
            z-index: 2;
        }
        
        .hero h1 {
            font-size: 3.8rem;
            color: white;
            margin-bottom: 25px;
            line-height: 1.1;
        }
        
        .hero p {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.85);
            margin-bottom: 40px;
            max-width: 600px;
        }
        
        .hero-btns {
            display: flex;
            gap: 20px;
            margin-top: 40px;
        }
        
        .hero-stats {
            display: flex;
            margin-top: 70px;
            gap: 50px;
        }
        
        .stat-item {
            color: white;
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 5px;
            color: var(--teal);
        }
        
        .stat-label {
            font-size: 0.9rem;
            opacity: 0.8;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* Corporate Travel Solutions */
        .solutions {
            background-color: var(--white);
            position: relative;
        }
        
        .solutions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
        }
        
        .solution-card {
            background-color: white;
            border-radius: var(--border-radius);
            padding: 50px 35px;
            box-shadow: var(--shadow-md);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .solution-card:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background: var(--gradient-primary);
            transition: width 0.3s ease;
            z-index: -1;
        }
        
        .solution-card:hover:before {
            width: 100%;
        }
        
        .solution-card:hover {
            transform: translateY(-15px);
            box-shadow: var(--shadow-lg);
        }
        
        .solution-card:hover .solution-icon,
        .solution-card:hover h3,
        .solution-card:hover p {
            color: white;
        }
        
        .solution-icon {
            font-size: 3.5rem;
            color: var(--accent-blue);
            margin-bottom: 30px;
            transition: var(--transition);
        }
        
        .solution-card h3 {
            font-size: 1.5rem;
            margin-bottom: 20px;
            transition: var(--transition);
        }
        
        .solution-card p {
            color: var(--medium-grey);
            transition: var(--transition);
        }
        
        /* Expense Management */
        .expense-management {
            background-color: var(--light-grey);
            position: relative;
        }
        
        .expense-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }
        
        .expense-image {
            position: relative;
        }
        
        .expense-image img {
            width: 100%;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-lg);
        }
        
        .exp-image-overlay {
            position: absolute;
            bottom: -30px;
            right: -30px;
            width: 200px;
            height: 200px;
            background: var(--gradient-primary);
            border-radius: var(--border-radius);
            z-index: -1;
        }
        
        .expense-benefits {
            list-style: none;
        }
        
        .expense-benefits li {
            margin-bottom: 30px;
            display: flex;
            align-items: flex-start;
        }
        
        .benefit-icon {
            width: 60px;
            height: 60px;
            background: rgba(45, 93, 204, 0.1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            flex-shrink: 0;
        }
        
        .benefit-icon i {
            color: var(--accent-blue);
            font-size: 1.5rem;
        }
        
        .benefit-content h4 {
            font-size: 1.2rem;
            margin-bottom: 8px;
        }
        
        /* Client Logos */
        .clients {
            background-color: var(--white);
            padding: 80px 0;
        }
        
        .client-logos {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 40px;
        }
        
        .client-logo {
            height: 60px;
            display: flex;
            align-items: center;
            filter: grayscale(1);
            opacity: 0.6;
            transition: var(--transition);
        }
        
        .client-logo:hover {
            filter: grayscale(0);
            opacity: 1;
            transform: translateY(-5px);
        }
        
        .client-logo img {
            height: 100%;
            width: auto;
        }
        
        /* Testimonials */
        .testimonials {
            background: var(--gradient-dark);
            position: relative;
            overflow: hidden;
        }
        
        .testimonials:before {
            content: '';
            position: absolute;
            top: -100px;
            right: -100px;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
        }
        
        .testimonials:after {
            content: '';
            position: absolute;
            bottom: -150px;
            left: -150px;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
        }
        
        .testimonials .section-title h2,
        .testimonials .section-title p {
            color: white;
        }
        
        .testimonial-slider {
            max-width: 900px;
            margin: 0 auto;
            position: relative;
        }
        
        .testimonial {
            background-color: white;
            border-radius: var(--border-radius);
            padding: 60px;
            box-shadow: var(--shadow-lg);
            text-align: center;
        }
        
        .testimonial-content {
            font-size: 1.25rem;
            font-style: italic;
            margin-bottom: 35px;
            color: var(--dark-grey);
            line-height: 1.8;
            position: relative;
        }
        
        .testimonial-content:before {
            content: '"';
            font-size: 5rem;
            color: var(--accent-blue);
            position: absolute;
            top: -30px;
            left: -20px;
            opacity: 0.2;
            font-family: serif;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .author-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--gradient-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: white;
            font-weight: 700;
            font-size: 1.2rem;
        }
        
        .author-info h4 {
            font-size: 1.2rem;
            color: var(--dark-blue);
        }
        
        .author-info p {
            color: var(--medium-grey);
            font-size: 0.9rem;
        }
        
        .slider-controls {
            display: flex;
            justify-content: center;
            margin-top: 40px;
            gap: 10px;
        }
        
        .slider-dot {
            width: 14px;
            height: 14px;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .slider-dot.active {
            background-color: white;
            transform: scale(1.2);
        }
        
        /* Enquiry Form */
        .enquiry {
            background-color: var(--white);
        }
        
        .form-container {
            max-width: 900px;
            margin: 0 auto;
            background-color: white;
            border-radius: var(--border-radius);
            padding: 70px;
            box-shadow: var(--shadow-lg);
            position: relative;
            overflow: hidden;
        }
        
        .form-container:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: var(--gradient-primary);
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        
        .form-group {
            margin-bottom: 30px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: var(--dark-blue);
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 18px 20px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-size: 1rem;
            transition: var(--transition);
            font-family: 'Inter', sans-serif;
        }
        
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: var(--accent-blue);
            outline: none;
            box-shadow: 0 0 0 3px rgba(45, 93, 204, 0.1);
        }
        
        .form-group textarea {
            min-height: 160px;
            resize: vertical;
        }
        
        .form-footer {
            text-align: center;
            margin-top: 40px;
        }
        
        /* Footer */
        footer {
            background-color: var(--dark-blue);
            color: white;
            padding: 100px 0 40px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: 1.5fr repeat(3, 1fr);
            gap: 60px;
            margin-bottom: 60px;
        }
        
        .footer-column h3 {
            color: white;
            font-size: 1.3rem;
            margin-bottom: 30px;
        }
        
        .footer-logo {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
        }
        
        .footer-about p {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 25px;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 15px;
        }
        
        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: var(--transition);
        }
        
        .footer-links a:hover {
            color: var(--teal);
            padding-left: 5px;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 25px;
        }
        
        .social-links a {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            transition: var(--transition);
        }
        
        .social-links a:hover {
            background: var(--accent-blue);
            transform: translateY(-3px);
        }
        
        .copyright {
            text-align: center;
            padding-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
        }
        
        /* Animation Classes */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Responsive */
        @media (max-width: 1100px) {
            .expense-container {
                grid-template-columns: 1fr;
                gap: 60px;
            }
            
            .exp-image-overlay {
                display: none;
            }
            
            .footer-content {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 900px) {
            .hero h1 {
                font-size: 3rem;
            }
            
            .section-title h2 {
                font-size: 2.3rem;
            }
            
            .nav-links, .nav-cta {
                display: none;
            }
            
            .mobile-menu-toggle {
                display: block;
            }
            
            .form-container {
                padding: 50px 40px;
            }
        }
        
        @media (max-width: 768px) {
            section {
                padding: 80px 0;
            }
            
            .hero {
                padding-top: 140px;
                padding-bottom: 100px;
            }
            
            .hero-btns {
                flex-direction: column;
            }
            
            .hero-stats {
                flex-wrap: wrap;
                gap: 30px;
            }
            
            .form-row {
                grid-template-columns: 1fr;
            }
            
            .solutions-grid {
                grid-template-columns: 1fr;
            }
            
            .client-logos {
                justify-content: center;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 576px) {
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
            
            .testimonial {
                padding: 40px 30px;
            }
            
            .form-container {
                padding: 40px 25px;
            }
        }

JavaScript

// Form submission handler
        document.getElementById('enquiryForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get form data
            const formData = {
                firstName: document.getElementById('firstName').value,
                lastName: document.getElementById('lastName').value,
                email: document.getElementById('email').value,
                phone: document.getElementById('phone').value,
                company: document.getElementById('company').value,
                employees: document.getElementById('employees').value,
                message: document.getElementById('message').value
            };
            
            // Show success message
            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            
            submitBtn.innerHTML = '<i class="fas fa-check"></i> Request Sent!';
            submitBtn.style.background = '#10b981';
            
            // Reset the form
            setTimeout(() => {
                document.getElementById('enquiryForm').reset();
                submitBtn.innerHTML = originalText;
                submitBtn.style.background = '';
                
                // Show success notification
                alert('Thank you for your enquiry, ' + formData.firstName + '! We will contact you at ' + formData.email + ' within 24 business hours to schedule your demo.');
            }, 1500);
        });
        
        // Testimonial slider functionality
        const dots = document.querySelectorAll('.slider-dot');
        const testimonials = [
            {
                content: "Implementing VoyageCorp reduced our travel administration costs by 42% in the first year. The policy compliance tools alone saved us over $200K in unauthorized expenses. Their platform's integration with our SAP system was seamless.",
                author: "Sarah Johnson",
                role: "Global Travel Director, Technova Inc.",
                initials: "SJ"
            },
            {
                content: "The integrated expense management system cut our reimbursement processing time from 14 days to just 3. Our finance team can now focus on strategic analysis instead of manual data entry. The AI-powered receipt scanning is a game-changer.",
                author: "Michael Chen",
                role: "CFO, Globex Corporation",
                initials: "MC"
            },
            {
                content: "With offices in 12 countries, we needed a unified travel platform. VoyageCorp provided the global coverage and local support we needed while improving policy compliance by 67%. Their risk management features give us peace of mind.",
                author: "Elena Rodriguez",
                role: "VP Operations, Innovatek Solutions",
                initials: "ER"
            },
            {
                content: "The analytics dashboard provided insights that helped us renegotiate hotel contracts, saving $1.2M annually. The platform pays for itself many times over. Implementation was smooth with excellent support throughout.",
                author: "David Kim",
                role: "Head of Travel, Stratagem Corp",
                initials: "DK"
            }
        ];
        
        let currentTestimonial = 0;
        
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                // Update active dot
                dots.forEach(d => d.classList.remove('active'));
                dot.classList.add('active');
                
                // Update testimonial content
                currentTestimonial = index;
                updateTestimonial();
            });
        });
        
        function updateTestimonial() {
            const testimonial = testimonials[currentTestimonial];
            const testimonialElement = document.querySelector('.testimonial');
            
            testimonialElement.innerHTML = `
                <div class="testimonial-content">${testimonial.content}</div>
                <div class="testimonial-author">
                    <div class="author-avatar">${testimonial.initials}</div>
                    <div class="author-info">
                        <h4>${testimonial.author}</h4>
                        <p>${testimonial.role}</p>
                    </div>
                </div>
            `;
            
            // Add fade-in animation
            testimonialElement.classList.remove('fade-in');
            void testimonialElement.offsetWidth; // Trigger reflow
            testimonialElement.classList.add('fade-in');
        }
        
        // Auto-rotate testimonials
        setInterval(() => {
            currentTestimonial = (currentTestimonial + 1) % testimonials.length;
            
            // Update active dot
            dots.forEach((dot, index) => {
                if(index === currentTestimonial) {
                    dot.classList.add('active');
                } else {
                    dot.classList.remove('active');
                }
            });
            
            // Update testimonial content
            updateTestimonial();
        }, 6000);
        
        // Scroll animation
        const fadeElements = document.querySelectorAll('.fade-in');
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, { threshold: 0.1 });
        
        fadeElements.forEach(element => {
            observer.observe(element);
        });
        
        // Mobile menu toggle
        const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
        const navLinks = document.querySelector('.nav-links');
        const navCta = document.querySelector('.nav-cta');
        
        mobileMenuToggle.addEventListener('click', () => {
            const isHidden = navLinks.style.display === 'none' || navLinks.style.display === '';
            
            if (isHidden) {
                navLinks.style.display = 'flex';
                navLinks.style.flexDirection = 'column';
                navLinks.style.position = 'absolute';
                navLinks.style.top = '100%';
                navLinks.style.left = '0';
                navLinks.style.width = '100%';
                navLinks.style.backgroundColor = 'white';
                navLinks.style.padding = '30px';
                navLinks.style.boxShadow = 'var(--shadow-md)';
                
                navCta.style.display = 'block';
                navCta.style.marginTop = '20px';
                navCta.style.marginLeft = '0';
                
                mobileMenuToggle.innerHTML = '<i class="fas fa-times"></i>';
            } else {
                navLinks.style.display = 'none';
                navCta.style.display = 'none';
                mobileMenuToggle.innerHTML = '<i class="fas fa-bars"></i>';
            }
        });
        
        // Close mobile menu on click outside
        document.addEventListener('click', (e) => {
            if (!e.target.closest('.header-container') && window.innerWidth <= 900) {
                navLinks.style.display = 'none';
                navCta.style.display = 'none';
                mobileMenuToggle.innerHTML = '<i class="fas fa-bars"></i>';
            }
        });
        
        // Header background on scroll
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            if (window.scrollY > 100) {
                header.style.boxShadow = 'var(--shadow-md)';
                header.style.backgroundColor = 'rgba(255, 255, 255, 0.98)';
            } else {
                header.style.boxShadow = 'var(--shadow-sm)';
                header.style.backgroundColor = 'rgba(255, 255, 255, 0.98)';
            }
        });

Enterprise Travel Template Preview

Download Options