|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>WizzyWeb Wizards - Magical Web Building</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const logo = document.querySelector('.relative'); |
|
|
logo.addEventListener('mouseenter', () => { |
|
|
anime({ |
|
|
targets: logo, |
|
|
rotate: '+=360', |
|
|
duration: 800, |
|
|
easing: 'easeInOutQuad' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<style> |
|
|
.magic-gradient { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
} |
|
|
@keyframes blob { |
|
|
0% { transform: translate(0px, 0px) scale(1); } |
|
|
33% { transform: translate(30px, -50px) scale(1.1); } |
|
|
66% { transform: translate(-20px, 20px) scale(0.9); } |
|
|
100% { transform: translate(0px, 0px) scale(1); } |
|
|
} |
|
|
.animate-blob { |
|
|
animation: blob 7s infinite; |
|
|
} |
|
|
.animation-delay-2000 { |
|
|
animation-delay: 2s; |
|
|
} |
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.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); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100"> |
|
|
<div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"> |
|
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-white/80"></div> |
|
|
<div class="absolute inset-0 bg-gradient-to-r from-purple-500/10 to-blue-500/10"></div> |
|
|
<div class="absolute inset-0 animate-pulse opacity-20"> |
|
|
<div class="absolute top-1/4 left-1/4 w-32 h-32 rounded-full bg-purple-500 blur-3xl"></div> |
|
|
<div class="absolute top-3/4 right-1/4 w-48 h-48 rounded-full bg-blue-500 blur-3xl"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<nav class="relative z-10 bg-white/80 backdrop-blur-md shadow-sm"> |
|
|
<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"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="relative"> |
|
|
<div class="h-8 w-8 rounded-full bg-purple-600 flex items-center justify-center"> |
|
|
<div class="h-6 w-6 rounded-full bg-white flex items-center justify-center"> |
|
|
<div class="h-4 w-4 rounded-full bg-purple-600"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -bottom-1 -right-1 h-3 w-3 rounded-full bg-yellow-400 border-2 border-white"></div> |
|
|
</div> |
|
|
<span class="ml-2 text-xl font-bold text-gray-900">BARQ</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
|
|
<a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Home</a> |
|
|
<a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Tools</a> |
|
|
<a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Resources</a> |
|
|
<a href="#" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Community</a> |
|
|
<a href="/contact.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Contact</a> |
|
|
<a href="#" class="bg-purple-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-purple-700 transition">Get Started</a> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center md:hidden"> |
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<div class="relative z-10 overflow-hidden"> |
|
|
<div class="absolute -top-32 -right-32 w-64 h-64 bg-purple-500 rounded-full filter blur-3xl opacity-20"></div> |
|
|
<div class="absolute -bottom-32 -left-32 w-64 h-64 bg-blue-500 rounded-full filter blur-3xl opacity-20"></div> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32"> |
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center"> |
|
|
<div> |
|
|
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-gray-900 [text-shadow:_0_2px_8px_rgb(0_0_0_/_10%)]"> |
|
|
<span class="block">Crafting Digital</span> |
|
|
<span class="block text-transparent bg-clip-text magic-gradient animate-text-shimmer bg-[linear-gradient(110deg,#667eea,45%,#764ba2,55%,#667eea)] bg-[length:250%_100%]">Masterpieces</span> |
|
|
</h1> |
|
|
<p class="mt-6 max-w-lg text-xl text-gray-600"> |
|
|
Where code meets creativity - building breathtaking web experiences that convert visitors into customers. |
|
|
</p> |
|
|
<div class="mt-10 flex flex-wrap gap-4"> |
|
|
<div class="inline-flex rounded-md shadow"> |
|
|
<a href="#" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white magic-gradient hover:opacity-90 md:py-4 md:text-lg md:px-10"> |
|
|
View Portfolio |
|
|
</a> |
|
|
</div> |
|
|
<div class="inline-flex"> |
|
|
<a href="#" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-purple-700 bg-purple-100 hover:bg-purple-200 md:py-4 md:text-lg md:px-10"> |
|
|
<i data-feather="message-square" class="w-5 h-5 mr-2"></i> |
|
|
Get Free Quote |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-12 lg:mt-0"> |
|
|
<div class="relative"> |
|
|
<div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div> |
|
|
<div class="absolute -bottom-8 -right-8 w-32 h-32 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div> |
|
|
<div class="absolute top-1/2 left-1/2 w-24 h-24 bg-yellow-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div> |
|
|
<div class="relative rounded-2xl bg-white p-2 shadow-xl border border-gray-100"> |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<div class="rounded-lg overflow-hidden"> |
|
|
<img src="http://static.photos/technology/640x360/1" alt="Web Development" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="rounded-lg overflow-hidden"> |
|
|
<img src="http://static.photos/workspace/640x360/2" alt="UI Design" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="rounded-lg overflow-hidden"> |
|
|
<img src="http://static.photos/code/640x360/3" alt="Coding" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="rounded-lg overflow-hidden"> |
|
|
<img src="http://static.photos/office/640x360/4" alt="Development" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative z-10 py-12 bg-white/90 backdrop-blur-lg"> |
|
|
<div class="absolute inset-0 overflow-hidden"> |
|
|
<div class="absolute -top-32 -left-32 w-64 h-64 bg-purple-500 rounded-full filter blur-3xl opacity-10"></div> |
|
|
<div class="absolute -bottom-32 -right-32 w-64 h-64 bg-blue-500 rounded-full filter blur-3xl opacity-10"></div> |
|
|
</div> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Specialties</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
My Digital Craftsmanship |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3"> |
|
|
|
|
|
<div class="card-hover bg-white p-8 rounded-xl shadow-lg border border-white/20 backdrop-blur-sm hover:shadow-xl transition-all duration-300"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> |
|
|
<i data-feather="lock"></i> |
|
|
</div> |
|
|
<h3 class="mt-6 text-lg font-medium text-gray-900">Security Spells</h3> |
|
|
<p class="mt-2 text-base text-gray-600"> |
|
|
Protecting your digital realm with modern security practices and protocols. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card-hover bg-white p-8 rounded-lg shadow-md"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> |
|
|
<i data-feather="zap"></i> |
|
|
</div> |
|
|
<h3 class="mt-6 text-lg font-medium text-gray-900">Frontend Alchemy</h3> |
|
|
<p class="mt-2 text-base text-gray-600"> |
|
|
Transforming designs into responsive, interactive experiences with React, Vue & Tailwind. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card-hover bg-white p-8 rounded-lg shadow-md"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600"> |
|
|
<i data-feather="package"></i> |
|
|
</div> |
|
|
<h3 class="mt-6 text-lg font-medium text-gray-900">Backend Wizardry</h3> |
|
|
<p class="mt-2 text-base text-gray-600"> |
|
|
Crafting robust APIs and scalable architectures with Node.js and Python. |
|
|
</p> |
|
|
</body> |
|
|
</html> |
