<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Digital Marketing Hero</title>
<!-- Tailwind CSS (CDN) -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- tsParticles (CDN) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.bundle.min.js"></script>
<style>
/* A radial gradient background behind the particles */
body {
background: radial-gradient(circle at center, #2e3192 0%, #1bffff 100%);
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
}
/* Optional wave transition at the bottom */
.wave-bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
</style>
</head>
<body class="relative">
<!-- The tsParticles container (behind the hero content) -->
<div
id="tsparticles"
class="absolute top-0 left-0 w-full h-full z-0"
></div>
<!-- HERO CONTENT -->
<div
class="relative z-10 flex flex-col justify-center items-center h-full text-white p-4 text-center"
>
<h1 class="text-4xl md:text-6xl font-bold mb-4 px-4 max-w-3xl">
Reach New Heights with Our Marketing Expertise
</h1>
<p class="text-lg md:text-xl px-4 max-w-2xl mb-6">
We empower brands to thrive online through data-driven strategies, compelling storytelling,
and cutting-edge advertising technology.
</p>
<!-- BUTTONS (UPDATED) -->
<div class="flex flex-col md:flex-row items-center space-y-3 md:space-y-0 md:space-x-4">
<a
href="#services"
class="bg-white text-indigo-700 font-semibold rounded-full px-6 py-3 shadow-md hover:bg-indigo-50 transition text-center"
>
Our Services
</a>
<a
href="#contact"
class="border-2 border-white bg-transparent hover:bg-white hover:text-indigo-600 transition font-semibold px-6 py-3 rounded-full text-center"
>
Free Strategy Session
</a>
</div>
</div>
<!-- WAVE TRANSITION (BOTTOM) -->
<div class="wave-bottom">
<svg
viewBox="0 0 1440 320"
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#ffffff"
d="M0,64L40,96C80,128,160,192,240,224C320,256,400,256,480,234.7C560,213,640,171,720,138.7C800,107,880,85,960,112C1040,139,1120,213,1200,240C1280,267,1360,245,1400,234.7L1440,224L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"
></path>
</svg>
</div>
<!-- tsParticles Configuration -->
<script>
// Load and configure tsParticles
tsParticles.load("tsparticles", {
fullScreen: {
enable: false // We use our own container sizing
},
background: {
color: "transparent" // Keep the radial gradient behind the particles
},
particles: {
number: {
value: 60 // Number of particles
},
color: {
value: "#ffffff" // Particle color
},
shape: {
type: "star", // Shapes can be 'circle', 'edge', 'polygon', 'star', etc.
options: {
sides: 5
}
},
opacity: {
value: { min: 0.3, max: 0.8 },
animation: {
enable: true,
speed: 1,
minimumValue: 0.1,
sync: false
}
},
size: {
value: { min: 1, max: 4 } // Particle size range
},
links: {
enable: true, // Connect particles with lines
distance: 100,
color: "#ffffff",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 1.5, // Particle movement speed
outModes: {
default: "out"
}
}
},
interactivity: {
detectsOn: "canvas",
events: {
onHover: {
enable: true,
mode: "repulse" // Repel particles on hover
},
onClick: {
enable: true,
mode: "push" // Push new particles on click
},
resize: true
},
modes: {
repulse: {
distance: 100
},
push: {
quantity: 3
}
}
},
detectRetina: true
});
</script>
</body>
</html>
Mudos Digital