my-gaming-space / index.html
joaobouner's picture
Add 3 files
520e923 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="2width=device-width, initial-scale=1.0">
<title>GameFuel | Performance Marketing for Latin American Gamers</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: '#FF5C00',
secondary: '#00A3FF',
dark: '#0F0F0F',
light: '#F5F5F5',
accent: '#FFD700',
},
fontFamily: {
'sans': ['Poppins', 'sans-serif'],
'display': ['Rajdhani', 'sans-serif'],
},
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Rajdhani:wght@500;600;700&display=swap');
.hero-gradient {
background: linear-gradient(135deg, #0F0F0F 0%, #2A2A2A 100%);
}
.game-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgba(255, 92, 0, 0.2), 0 10px 10px -5px rgba(255, 92, 0, 0.1);
}
.stats-item {
position: relative;
}
.stats-item::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 60%;
width: 1px;
background-color: rgba(255, 255, 255, 0.1);
}
.stats-item:last-child::after {
display: none;
}
.glow-effect {
box-shadow: 0 0 15px rgba(255, 92, 0, 0.5);
}
.nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background-color: #FF5C00;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
</style>
</head>
<body class="bg-dark text-light font-sans">
<!-- Header -->
<header class="fixed w-full z-50 bg-dark/90 backdrop-blur-md border-b border-gray-800">
<div class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center">
<a href="#" class="flex items-center">
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
<i class="fas fa-gamepad text-xl text-dark"></i>
</div>
<span class="text-2xl font-bold font-display">Game<span class="text-primary">Fuel</span></span>
</a>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#home" class="nav-link relative text-white hover:text-primary transition">Home</a>
<a href="#services" class="nav-link relative text-white hover:text-primary transition">Services</a>
<a href="#case-studies" class="nav-link relative text-white hover:text-primary transition">Case Studies</a>
<a href="#about" class="nav-link relative text-white hover:text-primary transition">About</a>
<a href="#contact" class="nav-link relative text-white hover:text-primary transition">Contact</a>
</nav>
<div class="flex items-center space-x-4">
<div class="hidden md:flex items-center space-x-2">
<span class="w-2 h-2 rounded-full bg-green-500"></span>
<span class="text-sm">Online</span>
</div>
<button class="bg-primary hover:bg-primary/90 text-dark font-bold px-6 py-2 rounded-full transition">
Let's Talk
</button>
<button class="md:hidden text-white">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
</div>
</header>
<!-- Hero Section -->
<section id="home" class="hero-gradient pt-32 pb-20">
<div class="container mx-auto px-6">
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-12 lg:mb-0">
<h1 class="text-4xl md:text-6xl font-bold font-display leading-tight mb-6">
<span class="text-primary">Fueling Growth</span> for Gaming Brands in <span class="text-accent">Latin America</span>
</h1>
<p class="text-lg text-gray-300 mb-8">
We specialize in performance marketing and user acquisition for mobile and PC games across Latin America. Our data-driven strategies deliver real results for gaming studios looking to expand in this booming market.
</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-primary hover:bg-primary/90 text-dark font-bold px-8 py-4 rounded-full transition flex items-center justify-center">
<span>Get Started</span>
<i class="fas fa-arrow-right ml-2"></i>
</button>
<button class="border border-primary text-primary hover:bg-primary/10 font-bold px-8 py-4 rounded-full transition flex items-center justify-center">
<i class="fas fa-play-circle mr-2"></i>
<span>Watch Demo</span>
</button>
</div>
<div class="mt-12 flex items-center space-x-6">
<div class="flex -space-x-2">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-dark" alt="Client">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-dark" alt="Client">
<img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-10 h-10 rounded-full border-2 border-dark" alt="Client">
</div>
<div>
<div class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<i class="fas fa-star text-yellow-400 mr-1"></i>
<i class="fas fa-star text-yellow-400 mr-1"></i>
<i class="fas fa-star text-yellow-400 mr-1"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
<p class="text-sm text-gray-300">Trusted by 50+ gaming studios</p>
</div>
</div>
</div>
<div class="lg:w-1/2 relative">
<div class="relative">
<img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
class="rounded-2xl w-full max-w-lg mx-auto glow-effect" alt="Gaming Marketing">
<div class="absolute -bottom-6 -left-6 bg-dark p-4 rounded-xl shadow-lg w-40">
<div class="flex items-center mb-2">
<div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
<span class="text-xs text-gray-300">Live Campaign</span>
</div>
<h4 class="font-bold text-primary">+120% ROI</h4>
<p class="text-xs text-gray-300">Battle Royale Game</p>
</div>
<div class="absolute -top-6 -right-6 bg-dark p-4 rounded-xl shadow-lg w-40">
<div class="flex items-center mb-2">
<div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
<span class="text-xs text-gray-300">New Users</span>
</div>
<h4 class="font-bold text-secondary">500K+</h4>
<p class="text-xs text-gray-300">MMORPG Launch</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="py-16 bg-gradient-to-r from-dark to-gray-900">
<div class="container mx-auto px-6">
<div class="bg-gray-800/50 rounded-2xl p-8 backdrop-blur-md border border-gray-700">
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="stats-item text-center py-4">
<h3 class="text-4xl font-bold font-display text-primary mb-2">15M+</h3>
<p class="text-gray-300">Gamers Reached</p>
</div>
<div class="stats-item text-center py-4">
<h3 class="text-4xl font-bold font-display text-secondary mb-2">120+</h3>
<p class="text-gray-300">Campaigns Executed</p>
</div>
<div class="stats-item text-center py-4">
<h3 class="text-4xl font-bold font-display text-accent mb-2">8</h3>
<p class="text-gray-300">Latin American Countries</p>
</div>
<div class="text-center py-4">
<h3 class="text-4xl font-bold font-display text-white mb-2">70%</h3>
<p class="text-gray-300">Avg. Retention Increase</p>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-20">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<span class="inline-block px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-semibold mb-4">OUR SERVICES</span>
<h2 class="text-3xl md:text-4xl font-bold font-display mb-4">Performance Marketing <span class="text-primary">Built for Gamers</span></h2>
<p class="text-gray-400 max-w-2xl mx-auto">We understand the unique challenges of acquiring and retaining gamers in Latin America. Our services are tailored to deliver real results.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-800/50 rounded-2xl p-8 border border-gray-700 hover:border-primary transition group">
<div class="w-14 h-14 rounded-xl bg-primary/10 text-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-dark transition">
<i class="fas fa-bullseye text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">User Acquisition</h3>
<p class="text-gray-400 mb-4">Precisely target and acquire high-value gamers through our network of premium publishers and influencers across Latin America.</p>
<ul class="space-y-2 text-gray-300">
<li class="flex items-center">
<i class="fas fa-check-circle text-primary mr-2"></i>
<span>Hyper-targeted campaigns</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-primary mr-2"></i>
<span>CPI/CPA optimization</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-primary mr-2"></i>
<span>Localized creatives</span>
</li>
</ul>
</div>
<div class="bg-gray-800/50 rounded-2xl p-8 border border-gray-700 hover:border-secondary transition group">
<div class="w-14 h-14 rounded-xl bg-secondary/10 text-secondary flex items-center justify-center mb-6 group-hover:bg-secondary group-hover:text-dark transition">
<i class="fas fa-chart-line text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Retention Marketing</h3>
<p class="text-gray-400 mb-4">Keep players engaged and coming back with our data-driven retention strategies tailored to Latin American gaming habits.</p>
<ul class="space-y-2 text-gray-300">
<li class="flex items-center">
<i class="fas fa-check-circle text-secondary mr-2"></i>
<span>Personalized push campaigns</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-secondary mr-2"></i>
<span>Win-back strategies</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-secondary mr-2"></i>
<span>Behavioral segmentation</span>
</li>
</ul>
</div>
<div class="bg-gray-800/50 rounded-2xl p-8 border border-gray-700 hover:border-accent transition group">
<div class="w-14 h-14 rounded-xl bg-accent/10 text-accent flex items-center justify-center mb-6 group-hover:bg-accent group-hover:text-dark transition">
<i class="fas fa-users text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Influencer Marketing</h3>
<p class="text-gray-400 mb-4">Leverage our network of top gaming influencers across Brazil, Mexico, Argentina and more to authentically promote your game.</p>
<ul class="space-y-2 text-gray-300">
<li class="flex items-center">
<i class="fas fa-check-circle text-accent mr-2"></i>
<span>Creator matchmaking</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-accent mr-2"></i>
<span>Campaign management</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-accent mr-2"></i>
<span>Performance tracking</span>
</li>
</ul>
</div>
<div class="bg-gray-800/50 rounded-2xl p-8 border border-gray-700 hover:border-primary transition group">
<div class="w-14 h-14 rounded-xl bg-primary/10 text-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-dark transition">
<i class="fas fa-adjust text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Creative Studio</h3>
<p class="text-gray-400 mb-4">Our in-house creative team produces high-converting ads specifically designed for Latin American gaming audiences.</p>
<ul class="space-y-2 text-gray-300">
<li class="flex items-center">
<i class="fas fa-check-circle text-primary mr-2"></i>
<span>Localized ad creatives</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-primary mr-2"></i>
<span>A/B testing</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-primary mr-2"></i>
<span>Cultural adaptation</span>
</li>
</ul>
</div>
<div class="bg-gray-800/50 rounded-2xl p-8 border border-gray-700 hover:border-secondary transition group">
<div class="w-14 h-14 rounded-xl bg-secondary/10 text-secondary flex items-center justify-center mb-6 group-hover:bg-secondary group-hover:text-dark transition">
<i class="fas fa-globe-americas text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Market Expansion</h3>
<p class="text-gray-400 mb-4">Navigate the complexities of Latin American markets with our regional expertise and local partnerships.</p>
<ul class="space-y-2 text-gray-300">
<li class="flex items-center">
<i class="fas fa-check-circle text-secondary mr-2"></i>
<span>Country-specific strategies</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-secondary mr-2"></i>
<span>Payment method optimization</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-secondary mr-2"></i>
<span>Cultural consulting</span>
</li>
</ul>
</div>
<div class="bg-gray-800/50 rounded-2xl p-8 border border-gray-700 hover:border-accent transition group">
<div class="w-14 h-14 rounded-xl bg-accent/10 text-accent flex items-center justify-center mb-6 group-hover:bg-accent group-hover:text-dark transition">
<i class="fas fa-database text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Analytics & BI</h3>
<p class="text-gray-400 mb-4">Get actionable insights with our advanced analytics platform built specifically for gaming performance marketing.</p>
<ul class="space-y-2 text-gray-300">
<li class="flex items-center">
<i class="fas fa-check-circle text-accent mr-2"></i>
<span>Real-time dashboards</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-accent mr-2"></i>
<span>LTV prediction</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-accent mr-2"></i>
<span>ROAS optimization</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Case Studies Section -->
<section id="case-studies" class="py-20 bg-gray-900/50">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<span class="inline-block px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-semibold mb-4">SUCCESS STORIES</span>
<h2 class="text-3xl md:text-4xl font-bold font-display mb-4">Proven Results in <span class="text-primary">Latin America</span></h2>
<p class="text-gray-400 max-w-2xl mx-auto">We've helped gaming studios of all sizes achieve remarkable growth in the region. Here are some of our success stories.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-gradient-to-br from-dark to-gray-900 rounded-2xl p-8 border border-gray-700 relative overflow-hidden">
<div class="absolute -right-10 -top-10 w-40 h-40 rounded-full bg-primary/10 blur-3xl"></div>
<div class="flex items-center mb-6">
<img src="https://images.unsplash.com/photo-1612287230202-811ffceb50d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80"
class="w-16 h-16 rounded-xl object-cover mr-4" alt="Game Logo">
<div>
<h3 class="font-bold text-xl">Battle Royale Mobile</h3>
<p class="text-gray-400 text-sm">Hyper-casual shooter game</p>
</div>
</div>
<div class="grid grid-cols-2 gap-4 mb-8">
<div class="bg-gray-800/50 p-4 rounded-xl">
<p class="text-gray-400 text-sm mb-1">CPI Reduction</p>
<h4 class="text-2xl font-bold text-primary">-42%</h4>
</div>
<div class="bg-gray-800/50 p-4 rounded-xl">
<p class="text-gray-400 text-sm mb-1">New Users</p>
<h4 class="text-2xl font-bold text-secondary">1.2M+</h4>
</div>
<div class="bg-gray-800/50 p-4 rounded-xl">
<p class="text-gray-400 text-sm mb-1">Day 7 Retention</p>
<h4 class="text-2xl font-bold text-accent">+35%</h4>
</div>
<div class="bg-gray-800/50 p-4 rounded-xl">
<p class="text-gray-400 text-sm mb-1">ROAS</p>
<h4 class="text-2xl font-bold text-white">3.8x</h4>
</div>
</div>
<p class="text-gray-300 mb-6">"GameFuel's expertise in the Brazilian market helped us achieve our most successful launch to date. Their localized creatives and influencer strategy drove unprecedented install volumes at sustainable CPIs."</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full mr-3" alt="Client">
<div>
<p class="font-medium">Carlos Mendez</p>
<p class="text-sm text-gray-400">Head of Growth, Mobile Studio</p>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-dark to-gray-900 rounded-2xl p-8 border border-gray-700 relative overflow-hidden">
<div class="absolute -right-10 -top-10 w-40 h-40 rounded-full bg-secondary/10 blur-3xl"></div>
<div class="flex items-center mb-6">
<img src="https://images.unsplash.com/photo-1551103782-8ab07afd45c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
class="w-16 h-16 rounded-xl object-cover mr-4" alt="Game Logo">
<div>
<h3 class="font-bold text-xl">Fantasy MMORPG</h3>
<p class="text-gray-400 text-sm">Cross-platform RPG</p>
</div>
</div>
<div class="grid grid-cols-2 gap-4 mb-8">
<div class="bg-gray-800/50 p-4 rounded-xl">
<p class="text-gray-400 text-sm mb-1">Installs</p>
<h4 class="text-2xl font-bold text-primary">750K+</h4>
</div>
<div class="bg-gray-800/50 p-4 rounded-xl">
<p class="text-gray-400 text-sm mb-1">Day 30 Retention</p>
<h4 class="text-2xl font-bold text-secondary">+28%</h4>
</div>
<div class="bg-gray-800/50 p-4 rounded-xl">
<p class="text-gray-400 text-sm mb-1">ARPPU Increase</p>
<h4 class="text-2xl font-bold text-accent">+65%</h4>
</div>
<div class="bg-gray-800/50 p-4 rounded-xl">
<p class="text-gray-400 text-sm mb-1">Countries</p>
<h4 class="text-2xl font-bold text-white">6</h4>
</div>
</div>
<p class="text-gray-300 mb-6">"Expanding our MMORPG to Mexico and Argentina was a challenge until we partnered with GameFuel. Their market-specific strategies and payment method optimizations drove both volume and quality users."</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full mr-3" alt="Client">
<div>
<p class="font-medium">Ana Silva</p>
<p class="text-sm text-gray-400">Marketing Director, RPG Studio</p>
</div>
</div>
</div>
</div>
<div class="mt-12 text-center">
<button class="border border-primary text-primary hover:bg-primary/10 font-bold px-8 py-3 rounded-full transition">
View All Case Studies
</button>
</div>
</div>
</section>
<!-- Why Latin America Section -->
<section class="py-20">
<div class="container mx-auto px-6">
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
<span class="inline-block px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-semibold mb-4">MARKET INSIGHTS</span>
<h2 class="text-3xl md:text-4xl font-bold font-display mb-6">Why <span class="text-primary">Latin America</span> is the Next Gaming Frontier</h2>
<p class="text-gray-400 mb-8">With over 300 million gamers and rapidly growing mobile penetration, Latin America represents one of the most exciting growth opportunities for game developers worldwide.</p>
<div class="space-y-6">
<div class="flex">
<div class="mr-4">
<div class="w-12 h-12 rounded-xl bg-primary/10 text-primary flex items-center justify-center">
<i class="fas fa-chart-bar"></i>
</div>
</div>
<div>
<h4 class="font-bold mb-2">Fastest Growing Mobile Market</h4>
<p class="text-gray-400">Latin America's mobile gaming market is growing at 15% YoY, outpacing North America and Europe.</p>
</div>
</div>
<div class="flex">
<div class="mr-4">
<div class="w-12 h-12 rounded-xl bg-secondary/10 text-secondary flex items-center justify-center">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
<div>
<h4 class="font-bold mb-2">Untapped Monetization Potential</h4>
<p class="text-gray-400">While ARPUs are currently lower than mature markets, they're growing rapidly as payment infrastructure improves.</p>
</div>
</div>
<div class="flex">
<div class="mr-4">
<div class="w-12 h-12 rounded-xl bg-accent/10 text-accent flex items-center justify-center">
<i class="fas fa-globe"></i>
</div>
</div>
<div>
<h4 class="font-bold mb-2">Cultural Nuances Matter</h4>
<p class="text-gray-400">Success requires deep understanding of local gaming preferences, cultural references, and payment methods.</p>
</div>
</div>
</div>
</div>
<div class="lg:w-1/2">
<div class="bg-gray-800/50 rounded-2xl p-6 border border-gray-700">
<div class="flex justify-between items-center mb-6">
<h3 class="font-bold text-lg">Latin America Gaming Stats</h3>
<div class="flex items-center text-sm text-gray-400">
<i class="fas fa-circle text-green-500 mr-1"></i>
<span>2023 Data</span>
</div>
</div>
<div class="space-y-5">
<div>
<div class="flex justify-between mb-2">
<span class="text-gray-400">Mobile Gamers</span>
<span class="font-bold">280M+</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="bg-primary h-2 rounded-full" style="width: 85%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="text-gray-400">Market Value</span>
<span class="font-bold">$7.2B</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="bg-secondary h-2 rounded-full" style="width: 65%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="text-gray-400">YoY Growth</span>
<span class="font-bold">15.4%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="bg-accent h-2 rounded-full" style="width: 90%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="text-gray-400">Avg. Playtime</span>
<span class="font-bold">4.7h/week</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 78%"></div>
</div>
</div>
</div>
<div class="mt-8 pt-6 border-t border-gray-700">
<h4 class="font-bold mb-4">Top Countries by Revenue</h4>
<div class="grid grid-cols-3 gap-4 text-center">
<div class="bg-gray-700/50 p-3 rounded-xl">
<div class="w-10 h-10 mx-auto mb-2 bg-primary/10 text-primary flex items-center justify-center rounded-full">
<span>1</span>
</div>
<p class="font-medium">Brazil</p>
</div>
<div class="bg-gray-700/50 p-3 rounded-xl">
<div class="w-10 h-10 mx-auto mb-2 bg-secondary/10 text-secondary flex items-center justify-center rounded-full">
<span>2</span>
</div>
<p class="font-medium">Mexico</p>
</div>
<div class="bg-gray-700/50 p-3 rounded-xl">
<div class="w-10 h-10 mx-auto mb-2 bg-accent/10 text-accent flex items-center justify-center rounded-full">
<span>3</span>
</div>
<p class="font-medium">Argentina</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-20 bg-gray-900/50">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<span class="inline-block px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-semibold mb-4">CLIENT TESTIMONIALS</span>
<h2 class="text-3xl md:text-4xl font-bold font-display mb-4">Trusted by <span class="text-primary">Leading Gaming Studios</span></h2>
<p class="text-gray-400 max-w-2xl mx-auto">Don't just take our word for it. Here's what our partners say about working with us.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-800/50 rounded-2xl p-8 border border-gray-700">
<div class="flex items-center mb-4">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<i class="fas fa-star text-yellow-400 mr-1"></i>
<i class="fas fa-star text-yellow-400 mr-1"></i>
<i class="fas fa-star text-yellow-400 mr-1"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
<p class="text-gray-300 mb-6">"GameFuel's understanding of the Brazilian gaming market is unparalleled. They helped us localize our hyper-casual game and achieve a 40% reduction in CPI while doubling our install volume."</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/75.jpg" class="w-12 h-12 rounded-full mr-4" alt="Client">
<div>
<p class="font-bold">Ricardo Oliveira</p>
<p class="text-sm text-gray-400">Growth Lead, Casual Games</p>
</div>
</div>
</div>
<div class="bg-gray-800/50 rounded-2xl p-8 border border-gray-700">
<div class="flex items-center mb-4">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<i class="fas fa-star text-yellow-400 mr-1"></i>
<i class="fas fa-star text-yellow-400 mr-1"></i>
<i class="fas fa-star text-yellow-400 mr-1"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
<p class="text-gray-300 mb-6">"As a European studio, we struggled to break into Mexico. GameFuel's influencer marketing strategy and localized creatives helped us achieve our most successful launch outside our home market."</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-12 h-12 rounded-full mr-4" alt="Client">
<div>
<p class="font-bold">Sophie Müller</p>
<p class="text-sm text-gray-400">CMO, Midcore Studio</p>
</div>
</div>
</div>
<div class="bg-gray-800/50 rounded-2xl p-8 border border-gray-700">
<div class="flex items-center mb-4">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<i class="fas fa-star text-yellow-400 mr-1"></i>
<i class="fas fa-star text-yellow-400 mr-1"></i>
<i class="fas fa-star text-yellow-400 mr-1"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
<p class="text-gray-300 mb-6">"The team at GameFuel transformed our performance in Argentina. Their payment method optimizations alone increased our conversion rate by 3x. They truly understand the local nuances."</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-12 h-12 rounded-full mr-4" alt="Client">
<div>
<p class="font-bold">Diego Fernandez</p>
<p class="text-sm text-gray-400">Head of UA, RPG Publisher</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 bg-gradient-to-r from-primary/10 to-secondary/10">
<div class="container mx-auto px-6">
<div class="bg-dark rounded-2xl p-12 text-center border border-gray-700 relative overflow-hidden">
<div class="absolute -right-20 -top-20 w-60 h-60 rounded-full bg-primary/10 blur-3xl"></div>
<div class="absolute -left-20 -bottom-20 w-60 h-60 rounded-full bg-secondary/10 blur-3xl"></div>
<div class="relative z-10 max-w-3xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold font-display mb-6">Ready to <span class="text-primary">Dominate</span> the Latin American Gaming Market?</h2>
<p class="text-gray-400 mb-8 text-lg">Schedule a free consultation with our growth experts to discuss how we can help you acquire and retain high-value gamers in Latin America.</p>
<form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
<input type="email" placeholder="Your email address" class="flex-grow bg-gray-800 border border-gray-700 rounded-full px-6 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<button type="submit" class="bg-primary hover:bg-primary/90 text-dark font-bold px-8 py-3 rounded-full transition">
Get Started
</button>
</form>
<div class="mt-8 flex flex-wrap justify-center items-center gap-4 text-gray-400">
<div class="flex items-center">
<i class="fas fa-check-circle text-primary mr-2"></i>
<span>No long-term contracts</span>
</div>
<div class="flex items-center">
<i class="fas fa-check-circle text-primary mr-2"></i>
<span>Performance-based pricing</span>
</div>
<div class="flex items-center">
<i class="fas fa-check-circle text-primary mr-2"></i>
<span>30-day risk-free trial</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark py-12 border-t border-gray-800">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
<div>
<a href="#" class="flex items-center mb-6">
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
<i class="fas fa-gamepad text-xl text-dark"></i>
</div>
<span class="text-2xl font-bold font-display">Game<span class="text-primary">Fuel</span></span>
</a>
<p class="text-gray-400 mb-6">Performance marketing and user acquisition specialists for the Latin American gaming market.</p>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary hover:text-dark transition">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary hover:text-dark transition">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary hover:text-dark transition">
<i class="fab fa-instagram"></i>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-bold mb-6">Services</h3>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-primary transition">User Acquisition</a></li>
<li><a href="#" class="text-gray-400 hover:text-primary transition">Retention Marketing</a></li>
<li><a href="#" class="text-gray-400 hover:text-primary transition">Influencer Marketing</a></li>
<li><a href="#" class="text-gray-400 hover:text-primary transition">Creative Studio</a></li>
<li><a href="#" class="text-gray-400 hover:text-primary transition">Market Expansion</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-6">Countries</h3>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-primary transition">Brazil</a></li>
<li><a href="#" class="text-gray-400 hover:text-primary transition">Mexico</a></li>
<li><a href="#" class="text-gray-400 hover:text-primary transition">Argentina</a></li>
<li><a href="#" class="text-gray-400 hover:text-primary transition">Colombia</a></li>
<li><a href="#" class="text-gray-400 hover:text-primary transition">Chile</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-6">Contact</h3>
<ul class="space-y-3">
<li class="flex items-center">
<i class="fas fa-map-marker-alt text-primary mr-3"></i>
<span class="text-gray-400">São Paulo, Brazil</span>
</li>
<li class="flex items-center">
<i class="fas fa-envelope text-primary mr-3"></i>
<a href="mailto:
</html>