Skip to content

Instantly share code, notes, and snippets.

@gabrielqmatos88

gabrielqmatos88/deepsite.html

Created April 28, 2025 20:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gabrielqmatos88/5577e5cf936d52764c9eb2a877fe0c6d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gabrielqmatos88/5577e5cf936d52764c9eb2a877fe0c6d to your computer and use it in GitHub Desktop.
Download ZIP
Generated site using deepsite on huggingface
Raw
deepsite.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PayTech Solutions | Payment Development Specialists</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: '#4F46E5',
secondary: '#10B981',
dark: '#1F2937',
light: '#F9FAFB',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
scroll-behavior: smooth;
}
.hero-gradient {
background: linear-gradient(135deg, #4F46E5 0%, #10B981 100%);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.integration-logo {
filter: grayscale(100%);
opacity: 0.6;
transition: all 0.3s ease;
}
.integration-logo:hover {
filter: grayscale(0);
opacity: 1;
}
.animated-underline {
position: relative;
display: inline-block;
}
.animated-underline::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: #4F46E5;
transition: width 0.3s ease;
}
.animated-underline:hover::after {
width: 100%;
}
</style>
</head>
<body class="bg-light">
<!-- Navigation -->
<nav class="bg-white shadow-md sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i class="fas fa-code text-primary text-2xl mr-2"></i>
<span class="text-xl font-bold text-dark">PayTech Solutions</span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
<a href="#services" class="text-dark hover:text-primary px-3 py-2 rounded-md text-sm font-medium animated-underline">Services</a>
<a href="#solutions" class="text-dark hover:text-primary px-3 py-2 rounded-md text-sm font-medium animated-underline">Solutions</a>
<a href="#integrations" class="text-dark hover:text-primary px-3 py-2 rounded-md text-sm font-medium animated-underline">Integrations</a>
<a href="#about" class="text-dark hover:text-primary px-3 py-2 rounded-md text-sm font-medium animated-underline">About</a>
<a href="#contact" class="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-opacity-90 transition duration-300">Contact Us</a>
</div>
<div class="-mr-2 flex items-center md:hidden">
<button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-dark hover:text-primary focus:outline-none">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:text-primary hover:bg-gray-50">Services</a>
<a href="#solutions" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:text-primary hover:bg-gray-50">Solutions</a>
<a href="#integrations" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:text-primary hover:bg-gray-50">Integrations</a>
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:text-primary hover:bg-gray-50">About</a>
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-primary hover:bg-opacity-90">Contact Us</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-gradient text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
<div class="md:flex md:items-center md:justify-between">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Powering the Future of Digital Payments</h1>
<p class="text-xl mb-8 opacity-90">Specialized payment solutions, seamless integrations, and custom development to transform your payment infrastructure.</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 text-primary px-6 py-3 rounded-md font-medium hover:bg-opacity-90 transition duration-300 text-center">Get Started</a>
<a href="#solutions" class="border border-white text-white px-6 py-3 rounded-md font-medium hover:bg-white hover:bg-opacity-10 transition duration-300 text-center">Learn More</a>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="relative w-full max-w-md">
<div class="absolute -top-6 -left-6 w-32 h-32 bg-white bg-opacity-10 rounded-full"></div>
<div class="absolute -bottom-6 -right-6 w-32 h-32 bg-white bg-opacity-10 rounded-full"></div>
<div class="relative bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-2xl p-6 shadow-xl">
<div class="bg-white rounded-lg p-4 mb-4">
<div class="flex justify-between items-center mb-3">
<div class="w-10 h-6 bg-gray-200 rounded"></div>
<div class="w-16 h-6 bg-gray-200 rounded"></div>
</div>
<div class="w-full h-40 bg-gray-100 rounded mb-3"></div>
<div class="flex justify-between">
<div class="w-16 h-4 bg-gray-200 rounded"></div>
<div class="w-16 h-4 bg-gray-200 rounded"></div>
</div>
</div>
<div class="bg-white rounded-lg p-4">
<div class="flex items-center mb-3">
<div class="w-8 h-8 bg-primary rounded-full mr-3"></div>
<div class="w-24 h-4 bg-gray-200 rounded"></div>
</div>
<div class="w-full h-10 bg-primary bg-opacity-20 rounded mb-2"></div>
<div class="w-full h-10 bg-secondary rounded text-white font-medium flex items-center justify-center">
Process Payment
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Trusted By Section -->
<section class="bg-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<p class="text-center text-gray-500 mb-8">Trusted by innovative companies worldwide</p>
<div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center justify-center">
<img src="https://via.placeholder.com/150x60?text=Stripe" alt="Stripe" class="integration-logo h-10 mx-auto">
<img src="https://via.placeholder.com/150x60?text=PayPal" alt="PayPal" class="integration-logo h-10 mx-auto">
<img src="https://via.placeholder.com/150x60?text=Square" alt="Square" class="integration-logo h-10 mx-auto">
<img src="https://via.placeholder.com/150x60?text=Adyen" alt="Adyen" class="integration-logo h-10 mx-auto">
<img src="https://via.placeholder.com/150x60?text=Braintree" alt="Braintree" class="integration-logo h-10 mx-auto">
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-dark mb-4">Our Specialized Services</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">We provide end-to-end payment solutions tailored to your business needs.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover">
<div class="p-6">
<div class="w-12 h-12 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-cogs text-primary text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-dark mb-3">Payment Gateway Development</h3>
<p class="text-gray-600 mb-4">Custom payment gateway solutions built from the ground up to meet your specific requirements.</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle text-secondary mr-2 mt-1"></i>
<span>Secure transaction processing</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-secondary mr-2 mt-1"></i>
<span>Multi-currency support</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-secondary mr-2 mt-1"></i>
<span>Fraud detection systems</span>
</li>
</ul>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover">
<div class="p-6">
<div class="w-12 h-12 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-plug text-primary text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-dark mb-3">Payment Integrations</h3>
<p class="text-gray-600 mb-4">Seamless integration with leading payment processors and financial institutions.</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle text-secondary mr-2 mt-1"></i>
<span>API-first approach</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-secondary mr-2 mt-1"></i>
<span>PCI-DSS compliant</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-secondary mr-2 mt-1"></i>
<span>Recurring billing support</span>
</li>
</ul>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover">
<div class="p-6">
<div class="w-12 h-12 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-shield-alt text-primary text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-dark mb-3">Payment Security</h3>
<p class="text-gray-600 mb-4">Comprehensive security solutions to protect your transactions and customer data.</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle text-secondary mr-2 mt-1"></i>
<span>Tokenization services</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-secondary mr-2 mt-1"></i>
<span>3D Secure implementation</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-secondary mr-2 mt-1"></i>
<span>Compliance consulting</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Solutions Section -->
<section id="solutions" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="md:flex md:items-center md:space-x-12">
<div class="md:w-1/2 mb-10 md:mb-0">
<h2 class="text-3xl font-bold text-dark mb-6">Tailored Payment Solutions</h2>
<p class="text-lg text-gray-600 mb-8">We understand that every business has unique payment requirements. Our solutions are designed to adapt to your specific needs.</p>
<div class="space-y-6">
<div class="flex">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-10 w-10 rounded-md bg-primary text-white">
<i class="fas fa-store"></i>
</div>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-dark">E-commerce Platforms</h3>
<p class="mt-1 text-gray-600">Complete payment solutions for online stores with cart recovery and conversion optimization.</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-10 w-10 rounded-md bg-secondary text-white">
<i class="fas fa-mobile-alt"></i>
</div>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-dark">Mobile Applications</h3>
<p class="mt-1 text-gray-600">In-app payment processing with native SDKs for iOS and Android platforms.</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-10 w-10 rounded-md bg-primary text-white">
<i class="fas fa-subscription"></i>
</div>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-dark">Subscription Services</h3>
<p class="mt-1 text-gray-600">Automated billing systems with flexible pricing models and dunning management.</p>
</div>
</div>
</div>
</div>
<div class="md:w-1/2">
<div class="bg-gray-50 rounded-xl p-8 shadow-lg">
<div class="mb-6">
<div class="flex items-center mb-2">
<div class="w-3 h-3 bg-secondary rounded-full mr-2"></div>
<h3 class="text-lg font-semibold">Payment Flow Analytics</h3>
</div>
<div class="h-2 bg-gray-200 rounded-full mb-1">
<div class="h-2 bg-secondary rounded-full" style="width: 90%"></div>
</div>
<p class="text-sm text-gray-500">Success rate: 90%</p>
</div>
<div class="mb-6">
<div class="flex items-center mb-2">
<div class="w-3 h-3 bg-primary rounded-full mr-2"></div>
<h3 class="text-lg font-semibold">Fraud Prevention</h3>
</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>
<p class="text-sm text-gray-500">Block rate: 95%</p>
</div>
<div class="mb-6">
<div class="flex items-center mb-2">
<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
<h3 class="text-lg font-semibold">Checkout Speed</h3>
</div>
<div class="h-2 bg-gray-200 rounded-full mb-1">
<div class="h-2 bg-green-500 rounded-full" style="width: 85%"></div>
</div>
<p class="text-sm text-gray-500">Average time: 1.2s</p>
</div>
<div class="bg-dark rounded-lg p-4 text-white">
<div class="flex items-center justify-between mb-2">
<h3 class="font-medium">Real-time Monitoring</h3>
<span class="text-xs bg-green-500 px-2 py-1 rounded-full">LIVE</span>
</div>
<div class="flex justify-between text-sm">
<div>
<p class="text-gray-400">Transactions</p>
<p>1,248</p>
</div>
<div>
<p class="text-gray-400">Volume</p>
<p>$42,580</p>
</div>
<div>
<p class="text-gray-400">Avg. Value</p>
<p>$34.12</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Integrations Section -->
<section id="integrations" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-dark mb-4">Seamless Integrations</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">Connect with the payment ecosystem through our pre-built integrations and APIs.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 flex flex-col items-center text-center transition-all duration-300 hover:shadow-md">
<div class="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mb-4">
<i class="fab fa-cc-stripe text-blue-600 text-2xl"></i>
</div>
<h3 class="text-lg font-medium text-dark mb-2">Stripe</h3>
<p class="text-gray-600 text-sm">Full-featured Stripe integration with Connect support.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 flex flex-col items-center text-center transition-all duration-300 hover:shadow-md">
<div class="w-16 h-16 bg-yellow-50 rounded-full flex items-center justify-center mb-4">
<i class="fab fa-cc-paypal text-yellow-600 text-2xl"></i>
</div>
<h3 class="text-lg font-medium text-dark mb-2">PayPal</h3>
<p class="text-gray-600 text-sm">Complete PayPal integration including Smart Buttons.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 flex flex-col items-center text-center transition-all duration-300 hover:shadow-md">
<div class="w-16 h-16 bg-green-50 rounded-full flex items-center justify-center mb-4">
<i class="fas fa-square text-green-600 text-2xl"></i>
</div>
<h3 class="text-lg font-medium text-dark mb-2">Square</h3>
<p class="text-gray-600 text-sm">In-person and online payments with Square.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 flex flex-col items-center text-center transition-all duration-300 hover:shadow-md">
<div class="w-16 h-16 bg-purple-50 rounded-full flex items-center justify-center mb-4">
<i class="fas fa-bolt text-purple-600 text-2xl"></i>
</div>
<h3 class="text-lg font-medium text-dark mb-2">Braintree</h3>
<p class="text-gray-600 text-sm">Drop-in UI and custom Braintree implementations.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 flex flex-col items-center text-center transition-all duration-300 hover:shadow-md">
<div class="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mb-4">
<i class="fas fa-globe text-blue-600 text-2xl"></i>
</div>
<h3 class="text-lg font-medium text-dark mb-2">Adyen</h3>
<p class="text-gray-600 text-sm">Global payments platform with 250+ payment methods.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 flex flex-col items-center text-center transition-all duration-300 hover:shadow-md">
<div class="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mb-4">
<i class="fas fa-credit-card text-red-600 text-2xl"></i>
</div>
<h3 class="text-lg font-medium text-dark mb-2">Authorize.Net</h3>
<p class="text-gray-600 text-sm">Reliable payment gateway for businesses of all sizes.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 flex flex-col items-center text-center transition-all duration-300 hover:shadow-md">
<div class="w-16 h-16 bg-indigo-50 rounded-full flex items-center justify-center mb-4">
<i class="fas fa-university text-indigo-600 text-2xl"></i>
</div>
<h3 class="text-lg font-medium text-dark mb-2">Bank APIs</h3>
<p class="text-gray-600 text-sm">Direct bank integrations for faster settlements.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 flex flex-col items-center text-center transition-all duration-300 hover:shadow-md">
<div class="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mb-4">
<i class="fas fa-plus text-gray-600 text-2xl"></i>
</div>
<h3 class="text-lg font-medium text-dark mb-2">Custom Gateway</h3>
<p class="text-gray-600 text-sm">Need something special? We can build it.</p>
</div>
</div>
<div class="mt-12 text-center">
<a href="#contact" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-opacity-90 transition duration-300">
Request Custom Integration
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-12 lg:gap-8">
<div class="lg:col-span-5">
<h2 class="text-3xl font-bold text-dark mb-6">About PayTech Solutions</h2>
<p class="text-lg text-gray-600 mb-6">We are a team of payment technology specialists with over 15 years of experience in building secure, scalable payment solutions.</p>
<p class="text-gray-600 mb-8">Our mission is to simplify payment complexity for businesses, enabling them to focus on their core products while we handle the payments infrastructure.</p>
<div class="bg-gray-50 rounded-lg p-6 mb-8">
<div class="flex items-start">
<div class="flex-shrink-0">
<i class="fas fa-award text-secondary text-xl"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-dark mb-2">Certified Experts</h3>
<p class="text-gray-600">Our team holds certifications in PCI DSS, PA-DSS, and major payment platforms.</p>
</div>
</div>
</div>
<a href="#contact" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-opacity-90 transition duration-300">
Meet Our Team
</a>
</div>
<div class="lg:col-span-7 mt-12 lg:mt-0">
<div class="bg-gray-50 rounded-xl p-8 shadow-lg">
<h3 class="text-xl font-semibold text-dark mb-6">Our Payment Technology Stack</h3>
<div class="space-y-6">
<div>
<h4 class="text-lg font-medium text-dark mb-3">Core Technologies</h4>
<div class="flex flex-wrap gap-3">
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Node.js</span>
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">Python</span>
<span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Java</span>
<span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">Ruby</span>
<span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">Go</span>
</div>
</div>
<div>
<h4 class="text-lg font-medium text-dark mb-3">Databases</h4>
<div class="flex flex-wrap gap-3">
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">PostgreSQL</span>
<span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">MySQL</span>
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">MongoDB</span>
<span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">Redis</span>
</div>
</div>
<div>
<h4 class="text-lg font-medium text-dark mb-3">Security</h4>
<div class="flex flex-wrap gap-3">
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">PCI DSS</span>
<span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">3D Secure</span>
<span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">Tokenization</span>
<span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">HSM</span>
</div>
</div>
<div>
<h4 class="text-lg font-medium text-dark mb-3">Infrastructure</h4>
<div class="flex flex-wrap gap-3">
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">AWS</span>
<span class="px-3 py-1 bg-orange-100 text-orange-800 rounded-full text-sm">GCP</span>
<span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">Azure</span>
<span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Docker</span>
<span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">Kubernetes</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-dark mb-4">What Our Clients Say</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">Trusted by businesses worldwide to handle their critical payment infrastructure.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-xl shadow-sm transition-all duration-300 hover:shadow-md">
<div class="flex items-center mb-4">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson">
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-dark">Sarah Johnson</h3>
<p class="text-gray-500">CTO, EcomStore</p>
</div>
</div>
<p class="text-gray-600 mb-4">"PayTech Solutions transformed our checkout flow, increasing our conversion rate by 22%. Their expertise in payment optimization is unmatched."</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="bg-white p-8 rounded-xl shadow-sm transition-all duration-300 hover:shadow-md">
<div class="flex items-center mb-4">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael Chen">
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-dark">Michael Chen</h3>
<p class="text-gray-500">CEO, SaaSPlatform</p>
</div>
</div>
<p class="text-gray-600 mb-4">"The custom subscription billing system they built for us handles millions in recurring revenue flawlessly. Their attention to detail is impressive."</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="bg-white p-8 rounded-xl shadow-sm transition-all duration-300 hover:shadow-md">
<div class="flex items-center mb-4">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez">
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-dark">Emma Rodriguez</h3>
<p class="text-gray-500">Product Manager, FinTechApp</p>
</div>
</div>
<p class="text-gray-600 mb-4">"Their Stripe integration expertise helped us launch our marketplace 3 weeks ahead of schedule. The team is responsive and truly understands payments."</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 bg-primary text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-bold mb-6">Ready to Transform Your Payment Infrastructure?</h2>
<p class="text-xl opacity-90 mb-8 max-w-3xl mx-auto">Let's discuss how we can help you build, integrate, or optimize your payment systems.</p>
<a href="#contact" class="inline-flex items-center px-8 py-4 border border-transparent text-base font-medium rounded-md shadow-sm text-primary bg-white hover:bg-opacity-90 transition duration-300">
Get Started Today
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-2 lg:gap-12">
<div class="mb-12 lg:mb-0">
<h2 class="text-3xl font-bold text-dark mb-6">Get in Touch</h2>
<p class="text-lg text-gray-600 mb-8">Have a project in mind or questions about our services? Our payment experts are ready to help.</p>
<div class="space-y-6">
<div class="flex">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-10 w-10 rounded-md bg-primary text-white">
<i class="fas fa-envelope"></i>
</div>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-dark">Email Us</h3>
<p class="mt-1 text-gray-600">[email protected]</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-10 w-10 rounded-md bg-secondary text-white">
<i class="fas fa-phone-alt"></i>
</div>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-dark">Call Us</h3>
<p class="mt-1 text-gray-600">+1 (555) 123-4567</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-10 w-10 rounded-md bg-primary text-white">
<i class="fas fa-map-marker-alt"></i>
</div>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-dark">Visit Us</h3>
<p class="mt-1 text-gray-600">123 Payment Street, San Francisco, CA 94103</p>
</div>
</div>
</div>
<div class="mt-12">
<h3 class="text-lg font-medium text-dark mb-4">Follow Us</h3>
<div class="flex space-x-4">
<a href="#" class="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:text-primary hover:bg-gray-200 transition duration-300">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:text-primary hover:bg-gray-200 transition duration-300">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:text-primary hover:bg-gray-200 transition duration-300">
<i class="fab fa-github"></i>
</a>
<a href="#" class="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:text-primary hover:bg-gray-200 transition duration-300">
<i class="fab fa-medium-m"></i>
</a>
</div>
</div>
</div>
<div class="bg-gray-50 rounded-xl p-8 shadow-lg">
<h3 class="text-2xl font-semibold text-dark mb-6">Send Us a Message</h3>
<form id="contactForm" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
<input type="text" id="name" name="name" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition duration-300">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
<input type="email" id="email" name="email" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition duration-300">
</div>
<div>
<label for="company" class="block text-sm font-medium text-gray-700 mb-1">Company (Optional)</label>
<input type="text" id="company" name="company" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition duration-300">
</div>
<div>
<label for="service" class="block text-sm font-medium text-gray-700 mb-1">Service Interested In</label>
<select id="service" name="service" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition duration-300">
<option value="">Select a service</option>
<option value="gateway">Payment Gateway Development</option>
<option value="integration">Payment Integrations</option>
<option value="security">Payment Security</option>
<option value="consulting">Payment Consulting</option>
<option value="other">Other</option>
</select>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
<textarea id="message" name="message" rows="4" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition duration-300"></textarea>
</div>
<div>
<button type="submit" class="w-full flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-opacity-90 transition duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
Send Message
<i class="fas fa-paper-plane ml-2"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div>
<h3 class="text-lg font-semibold mb-4">Services</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Gateway Development</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Payment Integrations</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Security & Compliance</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Consulting</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Solutions</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">E-commerce</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Mobile Apps</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Marketplaces</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Subscription Services</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Legal</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms of Service</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Security</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">GDPR</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center mb-4 md:mb-0">
<i class="fas fa-code text-primary text-xl mr-2"></i>
<span class="text-xl font-bold">PayTech Solutions</span>
</div>
<p class="text-gray-400 text-sm">© 2023 PayTech Solutions. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Form submission
const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
// Get form values
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
// Here you would typically send the form data to a server
// For this example, we'll just show an alert
alert(`Thank you, ${name}! We've received your message and will contact you at ${email} soon.`);
// Reset form
contactForm.reset();
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// Close mobile menu if open
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
}
});
});
// Animate elements when they come into view
const animateOnScroll = () => {
const elements = document.querySelectorAll('.card-hover, .integration-logo');
elements.forEach(element => {
const elementPosition = element.getBoundingClientRect().top;
const screenPosition = window.innerHeight / 1.2;
if (elementPosition < screenPosition) {
element.style.opacity = '1';
element.style.transform = 'translateY(0)';
}
});
};
// Set initial state for animated elements
document.querySelectorAll('.card-hover, .integration-logo').forEach(element => {
element.style.opacity = '0';
element.style.transform = 'translateY(20px)';
element.style.transition = 'all 0.6s ease';
});
// Add scroll event listener
window.addEventListener('scroll', animateOnScroll);
// Trigger once on page load
window.addEventListener('load', animateOnScroll);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment