<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bento Services Grid</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center min-h-screen p-6">
<div class="max-w-7xl w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Social Media Marketing -->
<div class="bento-card">
<p class="text-gray-500 text-xs font-bold uppercase tracking-widest mb-2">Social Media</p>
<h2 class="text-red-accent text-4xl font-black">Marketing</h2>
<div class="absolute inset-0 flex items-center justify-center pt-20">
<div class="relative w-48 h-48 opacity-40">
<i class="fab fa-tiktok absolute top-0 left-4 text-xl"></i>
<i class="fab fa-instagram absolute top-4 right-10 text-2xl"></i>
<span class="absolute bottom-16 right-4 font-black text-xl">G</span>
</div>
<div class="absolute z-10 w-16 h-16 bg-[#18181b] rounded-2xl flex items-center justify-center shadow-2xl border border-white/5">
<i class="fas fa-cog text-white text-2xl"></i>
</div>
</div>
</div>
<!-- Website Development -->
<div class="bento-card border-red-glow">
<p class="text-gray-500 text-xs font-bold uppercase tracking-widest mb-2">Website</p>
<h2 class="text-white text-4xl font-black">Development</h2>
<div class="code-box">
<span class="text-pink-500">const</span> data = <span class="text-blue-400">await</span> fetch();<br>
render(<span class="text-red-400"><Hubs /></span>);
</div>
</div>
<!-- Graphic Designing -->
<div class="bento-card">
<p class="text-gray-500 text-xs font-bold uppercase tracking-widest mb-2">Graphic</p>
<h2 class="text-red-accent text-4xl font-black">Designing</h2>
<div class="shape-gray"></div>
<div class="shape-white"></div>
</div>
<!-- Video Editing (Wide) -->
<div class="bento-card editing-gradient lg:col-span-2">
<p class="text-white/70 text-xs font-bold uppercase tracking-widest mb-2">Video</p>
<h2 class="text-white text-5xl font-black">Editing</h2>
<div class="editor-ui">
<div class="flex gap-3">
<div class="ui-dot"></div>
<div class="ui-dot"></div>
<div class="ui-dot"></div>
</div>
</div>
<!-- Cursor Icon -->
<i class="fas fa-mouse-pointer absolute bottom-20 left-1/4 text-white text-3xl drop-shadow-lg"></i>
</div>
<!-- SEO Optimization -->
<div class="bento-card h-[380px] flex flex-col justify-between">
<div>
<p class="text-gray-500 text-xs font-bold uppercase tracking-widest mb-2">SEO</p>
<h2 class="text-red-accent text-4xl font-black">Optimization</h2>
</div>
<div class="bg-[#050505] p-8 rounded-3xl border border-white/5">
<p class="text-gray-600 text-[10px] font-bold uppercase tracking-widest mb-1">Active Visitors</p>
<p class="text-white text-4xl font-bold mb-6">157,367</p>
<svg class="w-full h-16" viewBox="0 0 100 40">
<path class="graph-line" d="M0,35 Q15,35 25,20 T45,25 T70,10 T100,20" />
</svg>
</div>
</div>
</div>
</body>
</html>]]>
