芝麻web文件管理V1.00

编辑当前文件:/home/unicorntechnolog/public_html/platinumfintech/whychooseus.php

<?php
// why-choose-us.php

// Include the mail handler
require_once 'mail.php';

// Initialize variables
$success_message = '';
$error_message = '';
$fullName = $phone = $countryCode = $email = $company = $message = '';

// Process form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Get form data - REMOVED firstName field
    $fullName = trim($_POST['fullName'] ?? '');
    $phone = trim($_POST['phone'] ?? '');
    $countryCode = trim($_POST['countryCode'] ?? '');
    $email = trim($_POST['email'] ?? '');
    $company = trim($_POST['company'] ?? '');
    $message = trim($_POST['message'] ?? '');
    
    // Send email
    $result = sendContactEmail([
        'fullName' => $fullName,
        'phone' => $phone,
        'countryCode' => $countryCode,
        'email' => $email,
        'company' => $company,
        'message' => $message
    ]);
    
    if ($result['success']) {
        // Store success message in session and redirect to prevent resubmission
        $_SESSION['form_success'] = 'Thank you for your message! We will get back to you soon.';
        header('Location: ' . $_SERVER['PHP_SELF']);
        exit;
    } else {
        $error_message = $result['message'];
    }
}

// Check for success message from session (after redirect)
session_start();
if (isset($_SESSION['form_success'])) {
    $success_message = $_SESSION['form_success'];
    unset($_SESSION['form_success']); // Clear the session message
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Why Choose - Platinum Fintech Solutions</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

/* =====================
           Contact Section Styles
           ===================== */
        .contact {
            padding: 5rem 5%;
            background: #0a0a0a;
            color: #fff;
            font-family: 'Inter', sans-serif;
        }

/* Section Title */
        .contact .section-title h2 {
            font-size: 2.8rem;
            font-weight: 700;
            text-align: center;
            background: linear-gradient(90deg, #00ff88, #00ffaa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 10px;
        }

.contact .section-title p {
            font-size: 1.05rem;
            color: #aaa;
            text-align: center;
            max-width: 900px;
            margin: 2 auto 50px auto;
        }

/* Layout */
        .contact-container {
            display: grid;
            max-width: 800px;
            margin: 0 auto;
        }

/* ===== Contact Form ===== */
        .contact-form {
            background: rgba(25, 25, 25, 0.85);
            backdrop-filter: blur(15px);
            border-radius: 20px;
            padding: 40px;
            border: 1px solid rgba(0, 255, 136, 0.2);
            box-shadow: 0 10px 30px rgba(0, 255, 136, 0.05);
            transition: all 0.3s ease;
        }

.contact-form:hover {
            box-shadow: 0 15px 35px rgba(0, 255, 136, 0.15);
        }

.contact-form .form-group {
            margin-bottom: 25px;
        }

.contact-form label {
            display: block;
            font-size: 0.95rem;
            font-weight: 500;
            margin-bottom: 8px;
            color: #ccc;
        }

.contact-form label i {
            color: #00ff88;
            margin-right: 8px;
        }

.contact-form .form-control {
            width: 100%;
            padding: 14px 18px;
            background: #111;
            border: 1px solid #333;
            border-radius: 12px;
            color: #fff;
            font-size: 0.95rem;
            transition: all 0.3s ease;
        }

.contact-form .form-control:focus {
            border-color: #00ff88;
            box-shadow: 0 0 12px rgba(0, 255, 136, 0.4);
            outline: none;
        }

/* Phone Input Styling (compact) */
        .phone-input-container {
            display: flex;
            align-items: center;
            width: 100%;
            position: relative;
        }

.phone-input-container .iti {
            display:flex;
            gap:10px;
            flex: 1;
        }

.phone-input-container .iti__selected-flag {
            border-radius: 12px 0 0 12px;
            padding: 0 10px;
            background: #111;
            border: 1px solid #333;
            display: flex;
            align-items: center;
        }
        .iti__flag-container {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            padding: 0;
        }
        .phone-input-container input {
            height: 48px;
            border-radius: 0 12px 12px 0;
            border: 1px solid #333;
            border-left: none;
            flex: 1;
            background: #111;
            color: #fff;
            font-size: 0.95rem;
            padding: 14px 18px;
            transition: all 0.3s ease;
        }

.phone-input-container input:focus {
            border-color: #00ff88;
            box-shadow: 0 0 12px rgba(0, 255, 136, 0.4);
            outline: none;
        }

.iti__country-list {
            background: #111;
            border: 1px solid #333;
            border-radius: 12px;
            overflow-y: auto;
            max-height: 250px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            position: absolute;
            z-index: 10000;
        }

.iti__country {
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #fff;
        }

.iti__country:hover,
        .iti__country.iti__highlight {
            background: rgba(0, 255, 136, 0.2);
        }

.iti__dial-code {
            color: #aaa;
        }

/* Hidden country code input */
        .hidden-input {
            display: none;
        }

/* Button */
        .contact-form button {
            width: 100%;
            padding: 15px;
            background: linear-gradient(90deg, #00ff88, #00ffaa);
            color: #111;
            font-weight: 600;
            font-size: 1rem;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.3s;
        }

.contact-form button i {
            margin-right: 8px;
        }

.contact-form button:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
        }
        
        
        /* Form Messages */
        .form-message {
            padding: 15px 20px;
            border-radius: 12px;
            margin-bottom: 25px;
            font-weight: 500;
            border: 1px solid;
            animation: slideInDown 0.5s ease;
        }
        
        .form-message.success {
            background: rgba(0, 255, 136, 0.1);
            border-color: var(--primary-green);
            color: var(--primary-green);
        }
        
        .form-message.error {
            background: rgba(255, 71, 87, 0.1);
            border-color: #ff4757;
            color: #ff6b6b;
        }
        
        .form-message i {
            margin-right: 10px;
        }
        
        /* Enhanced Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes slideInDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.5); }
            70% { box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); }
            100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); }
        }
        
        .btn {
            padding: 0.8rem 2rem;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
            display: inline-block;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .btn-outline {
            border: 1px solid var(--primary-green);
            color: var(--primary-green);
            background: transparent;
        }
        
        .btn-outline:hover {
            background-color: var(--primary-green);
            color: var(--text-light);
            transform: translateY(-2px);
            box-shadow: var(--accent-glow);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
            color: var(--text-light);
            box-shadow: var(--accent-glow);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
        }
        
        /* Animation for scroll elements */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }
        
        .animate-on-scroll.animated {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Success message */
        .success-message {
            display: none;
            background: rgba(0, 255, 136, 0.1);
            border: 1px solid var(--primary-green);
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            text-align: center;
            color: var(--primary-green);
        }
        
        /* Alert styles for phone validation */
        .alert {
            padding: 15px;
            margin-top: 10px;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        
        .alert-info {
            border-color: #bce8f1;
            color: #31708f;
            background-color: #d9edf7;
        }
        
        .alert-error {
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }

/* ========== RESPONSIVE STYLES ========== */
        
        /* Large Devices (1200px and up) - Default styles apply */
        
        /* Medium Devices (992px to 1199px) */
        @media (max-width: 1199px) {
            .hero h1 {
                font-size: 2.5rem;
            }
           
            .features-grid {
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            }
            
            .feature-card {
                padding: 25px;
            }
            
            .section-title h2 {
                font-size: 2.5rem;
            }
            .cta-buttons-h {
                    justify-content: center;
                    align-items: center;
            }

}
        
        /* Small Devices (768px to 991px) */
        @media (max-width: 991px) {
            .hero {
                flex-direction: column;
                text-align: center;
                padding: 3rem 5%;
                min-height: auto;
            }
            
            .hero-content {
                padding-right: 0;
                margin-bottom: 3rem;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .hero p {
                max-width: 100%;
                font-size: 1rem;
                padding-left: 0;
                border-left: none;
                text-align: center;
            }
            
            .hero-image img {
                width: 80%;
                max-width: 500px;
            }
            
            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .btn {
                width: 100%;
                max-width: 300px;
            }
            
            .features-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
            
            .feature-card {
                padding: 25px;
            }
            
            .section-title h2 {
                font-size: 2.2rem;
            }
            
            .section-title p {
                font-size: 1rem;
            }
            
            
            .contact-form {
                padding: 30px;
            }
            
            .cta {
                padding: 80px 0;
            }
            
            .why-choose-us {
                padding: 4rem 5%;
            }
        }
        
        /* Extra Small Devices (767px and below) */
        @media (max-width: 767px) {
            .hero h1 {
                font-size: 2.2rem;
            }
            
            .hero p {
                font-size: 0.95rem;
                justify-content: center;
                text-align: center;
            }
            
            .hero-badge {
                font-size: 0.8rem;
                padding: 6px 12px;
            }
            
            .section-title h2 {
                font-size: 1.8rem;
            }
            
            .section-title p {
                font-size: 0.95rem;
            }
            
            .feature-card {
                padding: 20px;
            }
            
            .feature-icon {
                font-size: 2rem;
                margin-bottom: 15px;
            }
            
            .feature-card h3 {
                font-size: 1.2rem;
            }
            
            .feature-card p {
                font-size: 0.9rem;
            }
            
            .contact-form {
                padding: 25px;
            }
            
            .contact .section-title h2 {
                font-size: 2rem;
            }
            
            .contact .section-title p {
                font-size: 0.95rem;
            }
            
            .contact-form .form-control {
                padding: 12px 15px;
                font-size: 0.9rem;
            }
            
            .phone-input-container input {
                height: 44px;
                padding: 12px 15px;
                font-size: 0.9rem;
            }
            
            .contact-form button {
                padding: 12px;
                font-size: 0.95rem;
            }
            
            .cta {
                padding: 60px 0;
            }
            
            .cta h2 {
                font-size: 1.8rem;
            }
            
            .why-choose-us {
                padding: 3rem 5%;
            }
            
            .cta-buttons-h {
                    justify-content: center;
                    display: flex;
                    gap: 1rem;
                    margin-top: 2.5rem;
                    flex-direction: column;
                    align-items: center;
            }

}
        
        /* Very Small Devices (480px and below) */
        @media (max-width: 480px) {
            .hero h1 {
                font-size: 1.8rem;
            }
            
            .hero p {
                font-size: 0.9rem;
            }
            
            .hero-badge {
                font-size: 0.75rem;
            }
            
            .section-title h2 {
                font-size: 1.5rem;
            }
            
            .section-title p {
                font-size: 0.9rem;
            }
            
            .feature-card {
                padding: 18px;
            }
            
            .feature-icon {
                font-size: 1.8rem;
            }
            
            .feature-card h3 {
                font-size: 1.1rem;
            }
            
            .feature-card p {
                font-size: 0.85rem;
            }
            
            .contact-form {
                padding: 20px;
            }
            
            .contact .section-title h2 {
                font-size: 1.7rem;
            }
            
            .contact .section-title p {
                font-size: 0.9rem;
            }
            
            .contact-form .form-control {
                padding: 10px 12px;
                font-size: 0.85rem;
            }
            
            .phone-input-container input {
                height: 42px;
                padding: 10px 12px;
                font-size: 0.85rem;
            }
            
            .contact-form button {
                padding: 10px;
                font-size: 0.9rem;
            }
            
            .cta {
                padding: 50px 0;
            }
            
            .cta h2 {
                font-size: 1.5rem;
            }
            
            .why-choose-us {
                padding: 2.5rem 5%;
            }
        }
    </style>
</head>
<body>
    <div class="video-background">
        <video autoplay muted loop playsinline>
            
            <source src="img/video/v5.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <div class="video-overlay"></div>

<?php @include 'header.php' ?>

<section class="hero">
        <div class="hero-content" data-aos="fade-right" data-aos-duration="1000">
            
            <span class="green-bubble">Smart Strategy. Seamless Execution. Real Results.</span>
            
            
            <h1 class="gradient-text"> <span class="hero-badge">Why Choose Us</span></h1>
            
            
            <p class="partner-trust">We're a partner you can trust.</p>
            
            <p>Choosing the right partner for your prop firm or brokerage is one of the most important business decisions you'll make.</p>
            <p>At <span class="hero-highlight">Platinum Fintech Solutions</span>, we don't just provide advice — we deliver tailored strategies, hands-on execution, and real results backed by deep industry experience.</p>
            <p>Whether you're launching a new brand or optimizing a multi-region operation, we bring clarity, confidence, and measurable impact to every stage of your journey.</p>
            <div class="cta-buttons-h">
                <a href="https://calendly.com/platinumfintechsolutions" class="btn btn-primary"><i class="far fa-calendar-alt"></i> Book a Discovery Call</a>
                <a href="https://api.whatsapp.com/send?phone=35699081987" class="btn btn-outline"><i class="far fa-comment-dots"></i> Start Chat Now</a>
            </div>
        </div>
        <div class="hero-image" data-aos="fade-left" data-aos-duration="1000">
            <div class="hover-lift">
                <img src="img/home-hero.png" alt="Why Choose Us - Platinum Fintech Solutions">
            </div>
        </div>
    </section>

<section id="what-sets-us-apart" class="why-choose-us">
        <div class="container">
            <div class="section-title" data-aos="fade-up" data-aos-duration="1000">
                <h2>What Sets Us Apart</h2>
                <p>Discover why leading fintech companies choose <span class="hero-highlight">Platinum Fintech Solutions</span> as their trusted partner.</p>
            </div>
            <div class="features-grid">
                <div class="feature-card hover-lift hover-glow" data-aos="zoom-in" data-aos-duration="800" data-aos-delay="100">
                    <div class="feature-icon">🧠</div>
                    <h3>Deep Industry Expertise</h3>
                    <p>With years of hands-on experience in the fintech and trading ecosystem, we understand the platforms, regulations, providers, and technology stacks that drive performance. This knowledge allows us to anticipate challenges and deliver smarter solutions for our clients.</p>
                </div>
                
                <div class="feature-card hover-lift hover-glow" data-aos="zoom-in" data-aos-duration="800" data-aos-delay="200">
                    <div class="feature-icon">🎯</div>
                    <h3>Customized Approach</h3>
                    <p>No two businesses are the same — and neither are our solutions. Every project is tailored to your specific goals, budget, and growth stage. You get exactly what you need — nothing more, nothing less.</p>
                </div>
                
                <div class="feature-card hover-lift hover-glow" data-aos="zoom-in" data-aos-duration="800" data-aos-delay="300">
                    <div class="feature-icon">🚀</div>
                    <h3>Fast & Efficient Execution</h3>
                    <p>We move quickly without cutting corners. Whether you're racing to launch a new prop firm or streamlining an existing brokerage, we focus on lean delivery, smart workflows, and operational efficiency that drive results.</p>
                </div>
                
                <div class="feature-card hover-lift hover-glow" data-aos="zoom-in" data-aos-duration="800" data-aos-delay="400">
                    <div class="feature-icon">🤝</div>
                    <h3>Trusted Network of Providers</h3>
                    <p>Over the years, we've built strong relationships with top-tier industry providers — from technology vendors to liquidity partners. We don't just introduce you to them; we connect you directly, giving you priority access, seamless integrations, and in many cases, preferred pricing below market rates.</p>
                </div>
                
                <div class="feature-card hover-lift hover-glow" data-aos="zoom-in" data-aos-duration="800" data-aos-delay="500">
                    <div class="feature-icon">📈</div>
                    <h3>Results That Matter</h3>
                    <p>Your success defines ours. From helping startups go live in record time to boosting revenue for established brands, our track record speaks for itself. We deliver measurable, sustainable growth — not just promises.</p>
                </div>
                
                <div class="feature-card hover-lift hover-glow" data-aos="zoom-in" data-aos-duration="800" data-aos-delay="600">
                    <div class="feature-icon">🔒</div>
                    <h3>Confidentiality & Integrity</h3>
                    <p>We work with firms at every stage — from stealth-mode startups to well-known global brands. Discretion, integrity, and trust are at the core of everything we do.</p>
                </div>
            </div>
        </div>
    </section>

<section class="cta">
        <div class="container" data-aos="zoom-in" data-aos-duration="1000">
            <h2>Ready to Work with a Serious Partner?</h2>
            <p>If you're ready to build something that lasts, we're here to make it happen - Get in touch!</p>
            <div class="cta-buttons">
                <a href="https://calendly.com/platinumfintechsolutions" class="btn btn-primary"><i class="far fa-calendar-alt"></i> Book a Discovery Call</a>
                <a href="https://api.whatsapp.com/send?phone=35699081987" class="btn btn-outline"><i class="far fa-comment-dots"></i> Start Chat Now</a>
            </div>
        </div>
    </section>

<section id="contact" class="contact">
        <div class="container">
            <div class="section-title">
                <h2>Get In Touch</h2>
                <p>We'd love to hear from you. Fill out the form or reach us directly through the details below.</p>
            </div>
            
            
            <?php if (!empty($success_message)): ?>
                <div class="form-message success">
                    <i class="fas fa-check-circle"></i> <?php echo $success_message; ?>
                </div>
            <?php endif; ?>
            
            <?php if (!empty($error_message)): ?>
                <div class="form-message error">
                    <i class="fas fa-exclamation-circle"></i> <?php echo $error_message; ?>
                </div>
            <?php endif; ?>
            
            <div class="contact-container">
                
                <div class="contact-form">
                    <form id="contactForm" method="POST" action="">
                        
                        <div class="form-group">
                            <label for="fullName"><i class="fas fa-user"></i> Full Name</label> 
                            <input type="text" id="fullName" name="fullName" class="form-control" placeholder="John Doe" required value="<?php echo htmlspecialchars($fullName); ?>">
                        </div>
                        <div class="form-group">
                            <label for="phone"><i class="fas fa-phone"></i> Phone Number</label>
                            <div class="phone-input-container">
                                <input type="tel" id="phone" name="phone" class="form-control" placeholder="Phone Number" required value="<?php echo htmlspecialchars($phone); ?>">
                            </div>
                            <input type="hidden" id="countryCode" name="countryCode" value="<?php echo htmlspecialchars($countryCode); ?>">
                        </div>
                        <div class="form-group">
                            <label for="email"><i class="fas fa-envelope"></i> Email Address</label> 
                            <input type="email" id="email" name="email" class="form-control" placeholder="john@example.com" required value="<?php echo htmlspecialchars($email); ?>">
                        </div>
                        <div class="form-group">
                            <label for="company"><i class="fas fa-building"></i> Company / Business URL</label> 
                            <input type="text" id="company" name="company" class="form-control" placeholder="www.company.com" required value="<?php echo htmlspecialchars($company); ?>">
                        </div>
                        <div class="form-group">
                            <label for="message"><i class="fas fa-comment-dots"></i> Message</label> 
                            <textarea id="message" name="message" class="form-control" rows="5" placeholder="Provide us with some information..." required><?php echo htmlspecialchars($message); ?></textarea>
                        </div>
                        <button type="submit"><i class="fas fa-paper-plane"></i> Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<?php @include 'footer.php' ?>

// Form submission handler
            document.getElementById('contactForm').addEventListener('submit', function(e) {
                // Update country code before submission
                if (window.phoneInputInstance) {
                    const countryData = window.phoneInputInstance.getSelectedCountryData();
                    countryCodeInput.value = countryData.iso2.toUpperCase() + ' (+' + countryData.dialCode + ')';
                }
                
                // Client-side validation
                const phoneInput = document.querySelector('#phone');
                if (phoneInput.value.trim()) {
                    if (window.phoneInputInstance && !window.phoneInputInstance.isValidNumber()) {
                        e.preventDefault();
                        alert('Please enter a valid phone number.');
                        return false;
                    }
                } else {
                    e.preventDefault();
                    alert('Please enter your phone number.');
                    return false;
                }
                
                // If validation passes, the form will submit normally
                return true;
            });

// Auto-hide success/error messages after 10 seconds
            setTimeout(function() {
                const messages = document.querySelectorAll('.form-message');
                messages.forEach(function(message) {
                    message.style.opacity = '0';
                    message.style.transition = 'opacity 0.5s ease';
                    setTimeout(function() {
                        message.remove();
                    }, 500);
                });
            }, 10000);
        });
    </script>
</body>
</html>