<div class="min-h-screen bg-gray-900 text-orange-200 p-4 sm:p-8 dark:bg-gray-950">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Left Column: User Profile -->
<div class="md:col-span-1 bg-gradient-to-br from-indigo-900 to-purple-900 rounded-3xl shadow-xl border border-purple-700 transform hover:scale-105 transition-all duration-300 dark:from-purple-950 dark:to-gray-900">
<div class="p-6 sm:p-8 text-center relative">
<div class="absolute top-4 right-4 flex space-x-2">
<span class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
</span>
<span class="text-xs font-mono text-orange-400">STATUS: ONLINE</span>
</div>
<img class="w-32 h-32 rounded-full mx-auto border-4 border-orange-500 shadow-lg glow-effect-orange mb-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
<h2 class="text-3xl font-bold text-orange-400 mb-2 font-mono">AURORA_SKYWALKER</h2>
<p class="text-sm text-purple-300 mb-4">Cyber-Explorer | Data-Nomad | Pixel-Poet</p>
<div class="flex justify-center space-x-4 mb-6">
<a href="#" class="text-orange-400 hover:text-orange-300 transition-colors duration-200"><i class="fas fa-envelope"></i></a>
<a href="#" class="text-orange-400 hover:text-orange-300 transition-colors duration-200"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-orange-400 hover:text-orange-300 transition-colors duration-200"><i class="fab fa-instagram"></i></a>
</div>
<div class="text-left space-y-3">
<div class="border-t border-purple-800 pt-4 flex items-center space-x-2">
<i class="fas fa-map-marker-alt text-orange-500"></i>
<span class="text-sm text-indigo-300">Location: Neo-Vegas Sector 7</span>
</div>
<div class="flex items-center space-x-2">
<i class="fas fa-calendar-alt text-orange-500"></i>
<span class="text-sm text-indigo-300">Member Since: 2077.01.15</span>
</div>
<div class="flex items-center space-x-2">
<i class="fas fa-star text-orange-500"></i>
<span class="text-sm text-indigo-300">Rating: 4.8 / 5.0 (2,104 reviews)</span>
</div>
</div>
<button class="mt-8 px-6 py-3 bg-orange-600 text-white rounded-full text-lg font-bold uppercase tracking-wider shadow-lg transform hover:scale-105 hover:bg-orange-700 transition-all duration-300 glow-button-orange focus:outline-none focus:ring-4 focus:ring-orange-500 focus:ring-opacity-75">
Edit Profile
</button>
</div>
</div>
<!-- Right Column: Stats & Activity -->
<div class="md:col-span-2 space-y-8">
<!-- Navigation Tabs -->
<div class="bg-gradient-to-r from-red-800 to-orange-800 rounded-3xl p-2 shadow-xl border border-red-700 dark:from-red-950 dark:to-orange-900">
<div class="flex flex-wrap justify-around text-sm sm:text-base font-bold font-mono">
<a href="#" class="px-4 py-2 text-white glow-text-white-active rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105 active:bg-orange-900 active:ring-2 active:ring-orange-500">Dashboard</a>
<a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Bookings</a>
<a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Trips</a>
<a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Reviews</a>
<a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Settings</a>
</div>
</div>
<!-- Stats Section -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-orange-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
<i class="fas fa-plane-departure text-orange-400 text-3xl mb-3 glow-effect-orange-sm"></i>
<p class="text-2xl font-bold font-mono text-orange-300">17</p>
<p class="text-sm text-gray-400">Total Expeditions</p>
</div>
<div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-purple-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
<i class="fas fa-map-marked-alt text-purple-400 text-3xl mb-3 glow-effect-purple-sm"></i>
<p class="text-2xl font-bold font-mono text-purple-300">5</p>
<p class="text-sm text-gray-400">Planetary Zones</p>
</div>
<div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-red-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
<i class="fas fa-hourglass-half text-red-400 text-3xl mb-3 glow-effect-red-sm"></i>
<p class="text-2xl font-bold font-mono text-red-300">234</p>
<p class="text-sm text-gray-400">Hours Logged</p>
</div>
<div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-green-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
<i class="fas fa-users text-green-400 text-3xl mb-3 glow-effect-green-sm"></i>
<p class="text-2xl font-bold font-mono text-green-300">12</p>
<p class="text-sm text-gray-400">Travel Buddies</p>
</div>
</div>
<!-- Recent Activity / Upcoming Bookings -->
<div class="bg-gradient-to-br from-gray-800 to-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl border border-gray-700 dark:from-gray-900 dark:to-gray-900">
<h3 class="text-2xl font-bold font-mono text-orange-400 mb-6 glow-text-orange">RECENT SYNAPSE LOGS</h3>
<div class="space-y-6">
<!-- Activity Item 1 -->
<div class="flex items-center bg-gray-700 p-4 rounded-xl border border-gray-600 transition-transform duration-200 hover:scale-[1.02] dark:bg-gray-800">
<div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 border-orange-500 shadow-md glow-effect-orange-sm">
<img src="https://picsum.photos/id/1040/80/80" alt="Destination" class="w-full h-full object-cover">
</div>
<div class="flex-grow ml-4">
<p class="text-lg font-semibold text-orange-300 mb-1">Trip to Kepler-186f: Red Canopy Forests</p>
<p class="text-sm text-gray-400">Departure: 2083.05.20 <span class="text-purple-400">//</span> Status: <span class="text-green-400">COMPLETED</span></p>
<p class="text-xs text-gray-500">Booking ID: #KX93F-AX7</p>
</div>
<button class="ml-4 px-4 py-2 bg-purple-600 text-white rounded-full text-sm font-bold shadow-md hover:bg-purple-700 transition-colors duration-200 glow-button-purple focus:outline-none focus:ring-2 focus:ring-purple-500">
View Details
</button>
</div>
<!-- Activity Item 2 -->
<div class="flex items-center bg-gray-700 p-4 rounded-xl border border-gray-600 transition-transform duration-200 hover:scale-[1.02] dark:bg-gray-800">
<div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 border-purple-500 shadow-md glow-effect-purple-sm">
<img src="https://picsum.photos/id/1043/80/80" alt="Destination" class="w-full h-full object-cover">
</div>
<div class="flex-grow ml-4">
<p class="text-lg font-semibold text-purple-300 mb-1">Lunar Base Alpha: Gravity Chamber Training</p>
<p class="text-sm text-gray-400">Departure: 2084.01.10 <span class="text-orange-400">//</span> Status: <span class="text-red-400">PENDING APPROVAL</span></p>
<p class="text-xs text-gray-500">Booking ID: #LBX2C-Y-4</p>
</div>
<button class="ml-4 px-4 py-2 bg-orange-600 text-white rounded-full text-sm font-bold shadow-md hover:bg-orange-700 transition-colors duration-200 glow-button-orange focus:outline-none focus:ring-2 focus:ring-orange-500">
Modify Booking
</button>
</div>
<!-- Activity Item 3 -->
<div class="flex items-center bg-gray-700 p-4 rounded-xl border border-gray-600 transition-transform duration-200 hover:scale-[1.02] dark:bg-gray-800">
<div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 border-red-500 shadow-md glow-effect-red-sm">
<img src="https://picsum.photos/id/1051/80/80" alt="Destination" class="w-full h-full object-cover">
</div>
<div class="flex-grow ml-4">
<p class="text-lg font-semibold text-red-300 mb-1">Mars Colonization Project: Phase 3 Briefing</p>
<p class="text-sm text-gray-400">Departure: 2085.03.15 <span class="text-indigo-400">//</span> Status: <span class="text-yellow-400">CONFIRMED</span></p>
<p class="text-xs text-gray-500">Booking ID: #MCP7E-Z1</p>
</div>
<button class="ml-4 px-4 py-2 bg-indigo-600 text-white rounded-full text-sm font-bold shadow-md hover:bg-indigo-700 transition-colors duration-200 glow-button-indigo focus:outline-none focus:ring-2 focus:ring-indigo-500">
View Itinerary
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Custom Glow Effects (using pseudo-elements or custom classes) -->
<style>
.glow-effect-orange {
box-shadow: 0 0 15px rgba(255, 165, 0, 0.7), 0 0 30px rgba(255, 140, 0, 0.5);
}
.glow-effect-orange-sm {
filter: drop-shadow(0 0 5px rgba(255, 165, 0, 0.6));
}
.glow-button-orange {
box-shadow: 0 0 8px rgba(255, 165, 0, 0.7);
}
.glow-button-orange:hover {
box-shadow: 0 0 15px rgba(255, 165, 0, 0.9);
}
.glow-effect-purple-sm {
filter: drop-shadow(0 0 5px rgba(128, 0, 128, 0.6));
}
.glow-button-purple {
box-shadow: 0 0 8px rgba(128, 0, 128, 0.7);
}
.glow-button-purple:hover {
box-shadow: 0 0 15px rgba(128, 0, 128, 0.9);
}
.glow-effect-red-sm {
filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.6));
}
.glow-button-red {
box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
}
.glow-button-indigo {
box-shadow: 0 0 8px rgba(79, 70, 229, 0.7);
}
.glow-button-indigo:hover {
box-shadow: 0 0 15px rgba(79, 70, 229, 0.9);
}
.glow-effect-green-sm {
filter: drop-shadow(0 0 5px rgba(0, 128, 0, 0.6));
}
.glow-text-orange {
text-shadow: 0 0 8px rgba(255, 165, 0, 0.8);
}
.glow-text-white-active {
text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}
</style>
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</div>
