<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative Corporate Agency</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen flex flex-col p-6 md:p-12 lg:px-24">
<!-- Navbar -->
<nav class="max-w-7xl mx-auto w-full flex justify-between items-center py-6">
<div class="font-black text-xl tracking-tighter">LOGO HERE</div>
<div class="hidden md:flex gap-10 text-[11px] font-bold uppercase tracking-[0.2em] text-gray-400">
<a href="#" class="text-white">Home</a>
<a href="#" class="hover:text-white transition">About Us</a>
<a href="#" class="hover:text-white transition">Services</a>
<a href="#" class="hover:text-white transition">Contact</a>
</div>
<button class="bg-[#dcdcdc] text-black px-10 py-2.5 rounded-md text-[11px] font-extrabold uppercase tracking-widest hover:bg-white transition">
Login
</button>
</nav>
<!-- Hero Section -->
<main class="max-w-7xl mx-auto w-full grid lg:grid-cols-2 gap-16 items-center flex-grow py-12 lg:py-0">
<!-- Left Side Text -->
<div class="text-center lg:text-left z-10">
<!-- Updated Heading to White -->
<h1 class="serif text-white text-[75px] md:text-[110px] leading-[1] mb-2 tracking-tight">
Creative
</h1>
<h2 class="text-[#00f2ff] font-black text-xl md:text-2xl tracking-[0.35em] uppercase mb-8">
Corporate Agency
</h2>
<p class="text-gray-400 text-sm md:text-base max-w-lg leading-relaxed mb-12 mx-auto lg:mx-0">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
</p>
<button class="border-2 border-white text-white px-10 py-3.5 text-[12px] font-bold uppercase tracking-[0.2em] hover:bg-white hover:text-black transition">
Learn More
</button>
</div>
<!-- Right Side Illustration -->
<div class="relative h-[450px] md:h-[600px] flex flex-col items-center justify-center">
<!-- Lamp Cable -->
<div class="absolute top-0 w-[1px] h-32 bg-gray-500/50"></div>
<!-- Lamp Head -->
<div class="absolute top-32 w-14 h-7 bg-white rounded-t-full shadow-[0_0_40px_white]"></div>
<!-- Light Beam -->
<div class="light-beam absolute top-36 w-64 h-[400px] opacity-70"></div>
<!-- 3D Pedestal and Icon -->
<div class="absolute bottom-10 flex flex-col items-center">
<!-- Floating Icon (Diamond Shape) -->
<div class="w-14 h-14 bg-[#00f2ff] rounded-lg rotate-45 mb-[-25px] z-20 shadow-[0_0_35px_#00f2ff]"></div>
<!-- Pedestal Layers (3D Look) -->
<div class="pedestal w-44 h-16 z-10"></div>
<div class="pedestal w-60 h-20 -mt-12 opacity-60"></div>
<div class="pedestal w-80 h-24 -mt-16 opacity-30"></div>
</div>
</div>
</main>
</body>
</html>]]>
