<div class="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800 text-white p-6">
<div class="max-w-7xl mx-auto space-y-12">
<div class="bg-gray-800/50 rounded-xl p-6 backdrop-blur-sm">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center space-x-3">
<svg class="w-6 h-6 text-red-500 animate-pulse" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 18.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13Z" />
<path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z" />
svg>
<h2 class="text-2xl font-bold">Live Streamh2>
div>
<button class="px-4 py-2 bg-red-500 hover:bg-red-600 rounded-md flex items-center">
<svg class="w-4 h-4 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="5 3 19 12 5 21 5 3" />
svg>
Start Stream
button>
div>
<div class="aspect-video bg-gray-900 rounded-lg overflow-hidden">
<div class="w-full h-full flex items-center justify-center text-gray-500">
Stream Preview
div>
div>
div>
<div class="bg-gray-800/50 rounded-xl p-6 backdrop-blur-sm">
<h2 class="text-2xl font-bold mb-6">Featured Playlistsh2>
<div class="border-b border-gray-700 mb-6">
<div class="flex space-x-8">
<button class="px-4 py-2 text-white border-b-2 border-red-500">Hip Hopbutton>
<button class="px-4 py-2 text-gray-400 hover:text-white">Rockbutton>
<button class="px-4 py-2 text-gray-400 hover:text-white">Jazzbutton>
<button class="px-4 py-2 text-gray-400 hover:text-white">Electronicbutton>
div>
div>
<div class="space-y-4">
<div class="flex items-center justify-between p-4 bg-gray-700/30 rounded-lg hover:bg-gray-700/50 transition-colors">
<div class="flex items-center space-x-4">
<button class="p-2 rounded-full hover:bg-white/10">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="5 3 19 12 5 21 5 3" />
svg>
button>
<div>
<p class="font-medium">Track Titlep>
<p class="text-sm text-gray-400">Artist Namep>
div>
div>
<span class="text-sm text-gray-400">3:45span>
div>
div>
div>
<div class="bg-gray-800/50 rounded-xl p-6 backdrop-blur-sm">
<div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-bold">Latest Articlesh2>
<a href="#" class="text-white hover:text-gray-300 flex items-center">
View All
<svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
<polyline points="15 3 21 3 21 9" />
<line x1="10" y1="14" x2="21" y2="3" />
svg>
a>
div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<article class="group cursor-pointer">
<div class="relative aspect-video mb-4 overflow-hidden rounded-lg">
<img
src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?auto=format&fit=crop&w=500&q=80"
alt="Article Title"
class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"
/>
div>
<div class="space-y-2">
<div class="flex items-center space-x-2 text-sm">
<span class="text-red-500">Music Productionspan>
<span class="text-gray-400">•span>
<span class="text-gray-400">October 1, 2023span>
div>
<h3 class="text-lg font-semibold group-hover:text-red-500 transition-colors">
The Evolution of Modern Music Production
h3>
<p class="text-gray-400 text-sm line-clamp-2">
Exploring how technology has transformed the way we create and consume music...
p>
div>
article>
div>
div>
div>
div>
