Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WatchDog ATM Monitoring | Clear Choice Payment Solutions</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#FF4F00', // International Orange | |
| secondary: '#003366', // Navy Blue | |
| accent: '#FF4F00', // International Orange | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #FF4F00 0%, #003366 100%); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .pricing-card:hover { | |
| transform: scale(1.03); | |
| } | |
| .stat-item { | |
| position: relative; | |
| } | |
| .stat-item:not(:last-child):after { | |
| content: ''; | |
| position: absolute; | |
| right: 0; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| height: 60%; | |
| width: 1px; | |
| background-color: rgba(255, 255, 255, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="bg-primary p-2 rounded-lg mr-3"> | |
| <i class="fas fa-shield-dog text-white text-2xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold text-primary">Watch<span class="text-secondary">Dog</span></h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#features" class="font-medium hover:text-primary transition">Features</a> | |
| <a href="#benefits" class="font-medium hover:text-primary transition">Benefits</a> | |
| <a href="#pricing" class="font-medium hover:text-primary transition">Pricing</a> | |
| <a href="#testimonials" class="font-medium hover:text-primary transition">Testimonials</a> | |
| <a href="#contact" class="font-medium hover:text-primary transition">Contact</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="hidden md:inline-block px-4 py-2 font-medium hover:text-primary transition">Login</a> | |
| <a href="#contact" class="bg-primary hover:bg-opacity-90 text-white px-6 py-2 rounded-lg font-medium transition shadow-md">Get Started</a> | |
| <button class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white"> | |
| <div class="container mx-auto px-4 py-20 md:py-28"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Protect Your ATM Network with <span class="text-white">Real-Time Monitoring</span></h2> | |
| <p class="text-xl mb-8 opacity-90">WatchDog provides comprehensive ATM monitoring solutions designed specifically for AIDs and ISOs to maximize uptime, reduce costs, and enhance security.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#contact" class="bg-white hover:bg-gray-100 text-primary px-8 py-3 rounded-lg font-bold text-lg transition shadow-lg text-center">Request Demo</a> | |
| <a href="#features" class="bg-secondary hover:bg-opacity-90 text-white px-8 py-3 rounded-lg font-bold text-lg transition shadow-lg text-center">Learn More</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative max-w-md"> | |
| <div class="absolute -top-6 -left-6 w-32 h-32 bg-white rounded-full opacity-20"></div> | |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-primary rounded-full opacity-20"></div> | |
| <div class="relative bg-white bg-opacity-10 backdrop-blur-sm rounded-2xl p-6 border border-white border-opacity-20 shadow-2xl"> | |
| <div class="bg-black rounded-lg overflow-hidden"> | |
| <div class="bg-gray-800 px-4 py-2 flex items-center"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-white text-sm font-mono ml-4">WatchDog Dashboard</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div class="bg-secondary bg-opacity-50 rounded p-3"> | |
| <div class="text-blue-300 text-xs mb-1">ATMs Online</div> | |
| <div class="text-white font-bold text-xl">1,248</div> | |
| </div> | |
| <div class="bg-primary bg-opacity-50 rounded p-3"> | |
| <div class="text-orange-300 text-xs mb-1">Alerts Today</div> | |
| <div class="text-white font-bold text-xl">24</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded p-3 mb-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="text-gray-400 text-xs">Recent Alerts</div> | |
| <div class="text-yellow-400 text-xs">2 New</div> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-red-500 mr-2"></div> | |
| <div class="text-white text-sm truncate">ATM #4582 - Cash Low</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="text-white text-sm truncate">ATM #3291 - Receipt Paper Low</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded p-3"> | |
| <div class="text-gray-400 text-xs mb-2">Response Times</div> | |
| <div class="h-2 bg-gray-700 rounded-full mb-1"> | |
| <div class="h-2 bg-green-500 rounded-full" style="width: 95%"></div> | |
| </div> | |
| <div class="text-white text-xs text-right">95% within 30 mins</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="bg-secondary text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div class="stat-item px-4"> | |
| <div class="text-4xl font-bold mb-2">99.9%</div> | |
| <div class="text-gray-300">Uptime Guarantee</div> | |
| </div> | |
| <div class="stat-item px-4"> | |
| <div class="text-4xl font-bold mb-2">24/7</div> | |
| <div class="text-gray-300">Monitoring</div> | |
| </div> | |
| <div class="stat-item px-4"> | |
| <div class="text-4xl font-bold mb-2">5,000+</div> | |
| <div class="text-gray-300">ATMs Protected</div> | |
| </div> | |
| <div class="px-4"> | |
| <div class="text-4xl font-bold mb-2"><30s</div> | |
| <div class="text-gray-300">Alert Response</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Powerful Features for <span class="text-primary">ATM Professionals</span></h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Designed specifically for AIDs and ISOs to streamline operations and maximize profitability</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-bell text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Real-Time Alerts</h3> | |
| <p class="text-gray-600 mb-4">Instant notifications for cash levels, receipt paper, hardware failures, and security breaches sent via SMS, email, or app.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Customizable threshold settings</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Multi-level escalation paths</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-chart-line text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Performance Analytics</h3> | |
| <p class="text-gray-600 mb-4">Comprehensive reporting on uptime, transaction volumes, and service response times to optimize your network.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Custom report generation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Historical trend analysis</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-shield-alt text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Security Monitoring</h3> | |
| <p class="text-gray-600 mb-4">Advanced detection of skimming devices, forced entry attempts, and other security threats to protect your assets.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Integration with surveillance</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Automated law enforcement alerts</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-exchange-alt text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Remote Management</h3> | |
| <p class="text-gray-600 mb-4">Control and configure your ATMs remotely to reduce service calls and improve operational efficiency.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Software updates</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Configuration changes</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-users text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Dedicated Support</h3> | |
| <p class="text-gray-600 mb-4">24/7 access to ATM monitoring specialists who understand the unique needs of AIDs and ISOs.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Dedicated account manager</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Priority response for VIP ATMs</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-plug text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Seamless Integration</h3> | |
| <p class="text-gray-600 mb-4">Compatible with all major ATM manufacturers and processors for easy deployment.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>API access for custom solutions</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Bulk import/export capabilities</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Benefits Section --> | |
| <section id="benefits" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Why <span class="text-primary">ATM Professionals</span> Choose WatchDog</h2> | |
| <p class="text-xl text-gray-600 mb-8">Our monitoring solution is built specifically for the unique challenges faced by ATM AIDs and ISOs in today's competitive market.</p> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="mr-6"> | |
| <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-money-bill-wave text-white text-xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">Increase Profitability</h3> | |
| <p class="text-gray-600">Reduce downtime and service costs while maximizing transaction revenue through proactive monitoring.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="mr-6"> | |
| <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-clock text-white text-xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">Save Time</h3> | |
| <p class="text-gray-600">Automate routine monitoring tasks and focus on growing your business instead of putting out fires.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="mr-6"> | |
| <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-lock text-white text-xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">Enhance Security</h3> | |
| <p class="text-gray-600">Protect your assets and reputation with advanced security monitoring that deters criminal activity.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-gray-50 border border-gray-200 rounded-xl p-8 shadow-sm"> | |
| <h3 class="text-2xl font-bold mb-6 text-center">See the WatchDog Difference</h3> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium">Without WatchDog</span> | |
| <span class="font-medium">With WatchDog</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 rounded-full mb-1"> | |
| <div class="h-2 bg-red-500 rounded-full" style="width: 70%"></div> | |
| </div> | |
| <div class="text-sm text-gray-500">70% of issues detected by customer complaints</div> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium">Without WatchDog</span> | |
| <span class="font-medium">With WatchDog</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 rounded-full mb-1"> | |
| <div class="h-2 bg-primary rounded-full" style="width: 95%"></div> | |
| </div> | |
| <div class="text-sm text-gray-500">95% of issues detected before affecting customers</div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-times text-red-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Average 4+ hours downtime per incident</h4> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-check text-green-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Average under 30 minutes response time</h4> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-times text-red-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Reactive service approach</h4> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-check text-green-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Proactive monitoring and prevention</h4> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Simple, <span class="text-primary">Transparent</span> Pricing</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Flexible plans designed to scale with your ATM network</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Basic Plan --> | |
| <div class="pricing-card bg-white rounded-xl p-8 shadow-md transition duration-300"> | |
| <h3 class="text-2xl font-bold mb-4">Starter</h3> | |
| <p class="text-gray-600 mb-6">Perfect for small ATM operators</p> | |
| <div class="mb-8"> | |
| <span class="text-4xl font-bold">$19</span> | |
| <span class="text-gray-600">/month per ATM</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>Basic monitoring (cash, paper, comms)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>Email & SMS alerts</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>Standard response (8am-8pm)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>Basic reporting</span> | |
| </li> | |
| </ul> | |
| <a href="#contact" class="block text-center bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-3 rounded-lg transition">Get Started</a> | |
| </div> | |
| <!-- Professional Plan --> | |
| <div class="pricing-card bg-white rounded-xl p-8 shadow-lg border-2 border-primary relative transition duration-300 transform"> | |
| <div class="absolute top-0 right-0 bg-primary text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">MOST POPULAR</div> | |
| <h3 class="text-2xl font-bold mb-4">Professional</h3> | |
| <p class="text-gray-600 mb-6">Ideal for growing ATM networks</p> | |
| <div class="mb-8"> | |
| <span class="text-4xl font-bold">$29</span> | |
| <span class="text-gray-600">/month per ATM</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>Advanced monitoring (all components)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>App push notifications</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>24/7 emergency response</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>Advanced analytics</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>Security monitoring</span> | |
| </li> | |
| </ul> | |
| <a href="#contact" class="block text-center bg-primary hover:bg-opacity-90 text-white font-medium py-3 rounded-lg transition">Get Started</a> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="pricing-card bg-white rounded-xl p-8 shadow-md transition duration-300"> | |
| <h3 class="text-2xl font-bold mb-4">Enterprise</h3> | |
| <p class="text-gray-600 mb-6">For large ATM networks & ISOs</p> | |
| <div class="mb-8"> | |
| <span class="text-4xl font-bold">Custom</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>All Professional features plus:</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>Dedicated account manager</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>Custom integrations</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>Bulk discounts</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>White-label reporting</span> | |
| </li> | |
| </ul> | |
| <a href="#contact" class="block text-center bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-3 rounded-lg transition">Contact Sales</a> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-white rounded-xl p-8 shadow-sm max-w-4xl mx-auto"> | |
| <h3 class="text-xl font-bold mb-4 text-center">Volume Discounts Available</h3> | |
| <p class="text-center text-gray-600 mb-6">The more ATMs you monitor with WatchDog, the more you save. Contact us for custom pricing for networks with 50+ ATMs.</p> | |
| <div class="flex justify-center"> | |
| <a href="#contact" class="bg-primary hover:bg-opacity-90 text-white px-8 py-3 rounded-lg font-bold transition">Request Custom Quote</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Trusted by <span class="text-primary">ATM Professionals</span></h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Hear from AIDs and ISOs who rely on WatchDog to protect their networks</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 rounded-xl p-8 border border-gray-200"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-primary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Michael R.</h4> | |
| <p class="text-sm text-gray-600">ATM ISO, 120+ locations</p> | |
| </div> | |
| </div> | |
| <div class="text-gray-700 mb-4"> | |
| <i class="fas fa-quote-left text-gray-300 mr-2"></i> | |
| WatchDog has reduced our service costs by 40% and improved our uptime to 99.6%. The real-time alerts let us address issues before they become problems for our customers. | |
| </div> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 rounded-xl p-8 border border-gray-200"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-primary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Sarah L.</h4> | |
| <p class="text-sm text-gray-600">AID, 35 ATMs</p> | |
| </div> | |
| </div> | |
| <div class="text-gray-700 mb-4"> | |
| <i class="fas fa-quote-left text-gray-300 mr-2"></i> | |
| As a small operator, I can't afford downtime. WatchDog gives me enterprise-level monitoring at an affordable price. Their support team is incredibly responsive and knowledgeable about ATM operations. | |
| </div> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-50 rounded-xl p-8 border border-gray-200"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-primary"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">David T.</h4> | |
| <p class="text-sm text-gray-600">Regional ISO, 250+ ATMs</p> | |
| </div> | |
| </div> | |
| <div class="text-gray-700 mb-4"> | |
| <i class="fas fa-quote-left text-gray-300 mr-2"></i> | |
| The detailed reporting and analytics have been game-changers for our business. We can now make data-driven decisions about ATM placement and cash management. The security features have also helped us prevent several fraud attempts. | |
| </div> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 flex justify-center"> | |
| <a href="#contact" class="bg-primary hover:bg-opacity-90 text-white px-8 py-3 rounded-lg font-bold transition">Join Our Satisfied Customers</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-primary text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Protect Your ATM Network?</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Get started with WatchDog today and experience the peace of mind that comes with professional ATM monitoring.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#contact" class="bg-white hover:bg-gray-100 text-primary px-8 py-3 rounded-lg font-bold text-lg transition shadow-lg">Request Demo</a> | |
| <a href="tel:+18005551234" class="bg-secondary hover:bg-opacity-90 text-white px-8 py-3 rounded-lg font-bold text-lg transition shadow-lg"> | |
| <i class="fas fa-phone mr-2"></i> Call Now: (800) 555-1234 | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Get in <span class="text-primary">Touch</span></h2> | |
| <p class="text-xl text-gray-600 mb-8">Our team of ATM monitoring experts is ready to answer your questions and help you get started with WatchDog.</p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="mr-6"> | |
| <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-map-marker-alt text-white text-xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">Headquarters</h3> | |
| <p class="text-gray-600">123 ATM Street<br>Financial District, NY 10001</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mr-6"> | |
| <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-phone text-white text-xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">Phone</h3> | |
| <p class="text-gray-600">Sales: (800) 555-1234<br>Support: (800) 555-5678</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mr-6"> | |
| <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-envelope text-white text-xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">Email</h3> | |
| <p class="text-gray-600">sales@watchdogatm.com<br>support@watchdogatm.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mr-6"> | |
| <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-clock text-white text-xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">Hours</h3> | |
| <p class="text-gray-600">Sales: Mon-Fri 8am-6pm EST<br>Support: 24/7/365</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-gray-50 rounded-xl p-8 shadow-sm"> | |
| <h3 class="text-2xl font-bold mb-6">Send Us a Message</h3> | |
| <form> | |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label for="company" class="block text-gray-700 font-medium mb-2">Company</label> | |
| <input type="text" id="company" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-gray-700 font-medium mb-2">Phone</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="atms" class="block text-gray-700 font-medium mb-2">Number of ATMs</label> | |
| <select id="atms" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option value="1-10">1-10</option> | |
| <option value="11-25">11-25</option> | |
| <option value="26-50">26-50</option> | |
| <option value="51-100">51-100</option> | |
| <option value="100+">100+</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-primary hover:bg-opacity-90 text-white font-bold py-3 px-4 rounded-lg transition shadow-md"> | |
| Submit Inquiry | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-secondary text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-12"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary p-2 rounded-lg mr-3"> | |
| <i class="fas fa-shield-dog text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Watch<span class="text-white">Dog</span></h3> | |
| </div> | |
| <p class="text-gray-300 mb-4">Professional ATM monitoring solutions for AIDs and ISOs from Clear Choice Payment Solutions.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-300 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#features" class="text-gray-300 hover:text-white transition">Features</a></li> | |
| <li><a href="#benefits" class="text-gray-300 hover:text-white transition">Benefits</a></li> | |
| <li><a href="#pricing" class="text-gray-300 hover:text-white transition">Pricing</a></li> | |
| <li><a href="#testimonials" class="text-gray-300 hover:text-white transition">Testimonials</a></li> | |
| <li><a href="#contact" class="text-gray-300 hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">API Reference</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Help Center</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">ATM Best Practices</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Service Level Agreement</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Compliance</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 WatchDog ATM Monitoring by Clear Choice Payment Solutions. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple form submission handler | |
| document.querySelector('form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| alert('Thank you for your inquiry! A WatchDog representative will contact you shortly.'); | |
| this.reset(); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sonofawalter/watch-dog" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |