-
+
+
+
+
{/* Leaderboard - Left Side (separate card) */}
-
+
{/* Main Card - Centered */}
-
-
-
+
+
+ {/* Theme Toggle - Top Right */}
+
+
+
-
-
+
@@ -81,7 +80,7 @@ export function CustomFooter() {
transition={{ delay: 0.3 + index * 0.1, duration: 0.6 }}
className="flex flex-col gap-2"
>
-
+
diff --git a/src/components/hero.tsx b/src/components/hero.tsx
index 5f9e9a5..3cb73eb 100644
--- a/src/components/hero.tsx
+++ b/src/components/hero.tsx
@@ -52,9 +52,9 @@ export function Hero() {
};
return (
-
+ (
diff --git a/src/components/custom-footer.tsx b/src/components/custom-footer.tsx
index 1d6c98b..fdf1aa9 100644
--- a/src/components/custom-footer.tsx
+++ b/src/components/custom-footer.tsx
@@ -66,9 +66,8 @@ export function CustomFooter() {
},
},
}}
- className="bg-gradient-to-br from-card via-muted to-card/90 py-6 md:py-12 px-4 md:px-12 h-full w-full flex flex-col justify-between relative overflow-hidden"
+ className="bg-background/96 backdrop-blur-xl border-t border-white/10 py-8 sm:py-10 lg:py-12 px-6 sm:px-10 lg:px-14 h-full w-full flex flex-col justify-between relative overflow-hidden"
>
-
{/* Navigation Section */}
+
+
@@ -109,13 +124,11 @@ export default function Home() {
Auto refresh • 30s
-
Live snapshot
-
+
Server Pulse
-
+
+
{section.title}
{section.links.map((link, linkIndex) => {
@@ -93,7 +92,7 @@ export function CustomFooter() {
target="_blank"
rel="noopener noreferrer"
whileHover={{ x: 8 }}
- className="text-muted-foreground hover:text-foreground transition-colors duration-300 font-sans text-xs md:text-sm group relative"
+ className="text-muted-foreground hover:text-foreground transition-colors duration-300 text-xs md:text-sm group relative"
>
{link.text}
@@ -112,7 +111,7 @@ export function CustomFooter() {
key={linkIndex}
onClick={handleCopyIP}
whileHover={{ x: 8 }}
- className="text-muted-foreground hover:text-foreground transition-colors duration-300 font-sans text-xs md:text-sm text-left group relative"
+ className="text-muted-foreground hover:text-foreground transition-colors duration-300 text-xs md:text-sm text-left group relative"
>
{link.text}
@@ -129,7 +128,7 @@ export function CustomFooter() {
return (
{link.text}
@@ -140,7 +139,7 @@ export function CustomFooter() {
key={linkIndex}
href={link.href}
whileHover={{ x: 8 }}
- className="text-muted-foreground hover:text-foreground transition-colors duration-300 font-sans text-xs md:text-sm group relative"
+ className="text-muted-foreground hover:text-foreground transition-colors duration-300 text-xs md:text-sm group relative"
>
{link.text}
@@ -173,7 +172,7 @@ export function CustomFooter() {
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 1, duration: 0.8 }}
whileHover={{ scale: 1.02 }}
- className="text-[12vw] md:text-[10vw] lg:text-[8vw] xl:text-[6vw] leading-[0.8] font-serif bg-gradient-to-r from-foreground via-muted-foreground to-foreground/60 bg-clip-text text-transparent cursor-default"
+ className="text-[12vw] md:text-[10vw] lg:text-[8vw] xl:text-[6vw] leading-[0.8] text-foreground cursor-default"
>
{footerData.title}
@@ -192,7 +191,7 @@ export function CustomFooter() {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 1.4, duration: 0.5 }}
- className="text-muted-foreground text-xs md:text-sm font-sans hover:text-foreground transition-colors duration-300"
+ className="text-muted-foreground text-xs md:text-sm hover:text-foreground transition-colors duration-300"
>
{footerData.subtitle}
@@ -219,10 +218,10 @@ export function CustomFooter() {
rel="noopener noreferrer"
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
- className="inline-flex items-center gap-2 w-8 h-8 md:w-10 md:h-10 rounded-full bg-muted hover:bg-gradient-to-r hover:from-primary hover:to-secondary transition-colors duration-300 justify-center"
+ className="inline-flex items-center gap-2 w-8 h-8 md:w-10 md:h-10 rounded-full border border-white/10 bg-background/50 hover:bg-primary hover:border-primary/50 transition-all duration-300 justify-center backdrop-blur-sm"
aria-label="Join Discord"
>
-
+
-
+
-
+
Server IP
-
-
+
+
{serverAddress}
-
-
+
+
{[1, 2, 3, 4, 5, 6].map((i) => (
Top Players
-
-
+
+
{data.players.slice(0, 10).map((player, index) => {
const rank = index + 1;
const isTopThree = rank <= 3;
@@ -119,21 +119,21 @@ export function Leaderboard({ className }: { className?: string }) {
3 && "bg-muted text-muted-foreground"
+ "flex items-center justify-center w-6 h-6 rounded-full font-bold text-xs flex-shrink-0 border transition-all duration-200",
+ rank === 1 && "bg-primary/10 border-primary/30 text-primary",
+ rank === 2 && "bg-primary/10 border-primary/30 text-primary",
+ rank === 3 && "bg-primary/10 border-primary/30 text-primary",
+ rank > 3 && "bg-muted text-muted-foreground border-border/50"
)}>
{rank <= 3 ? getRankBadge(rank) : rank}
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index 9bff1dd..8539801 100644
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -1,45 +1,151 @@
'use client';
-import { useState } from 'react';
import Link from 'next/link';
-import { Menu, MenuItem, HoveredLink } from '@/components/ui/navbar-menu';
+import {
+ NavigationMenu,
+ NavigationMenuItem,
+ NavigationMenuLink,
+ NavigationMenuList,
+ navigationMenuTriggerStyle,
+} from '@/components/ui/navigation-menu';
import { ThemeToggle } from '@/components/theme-toggle';
-import { MessageCircle } from 'lucide-react';
+import { MessageCircle, Menu as MenuIcon, X } from 'lucide-react';
import { cn } from '@/lib/utils';
+import { useState, useEffect } from 'react';
+import { usePathname } from 'next/navigation';
+
+interface NavLink {
+ label: string;
+ href: string;
+ external?: boolean;
+ icon?: React.ReactNode;
+}
+
+const navItems: NavLink[] = [
+ {
+ label: 'Home',
+ href: '/',
+ },
+ {
+ label: 'Server',
+ href: '/#server-status',
+ },
+ {
+ label: 'Community',
+ href: 'https://discord.gg/58FnVzmzrS',
+ external: true,
+ icon: (null);
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const pathname = usePathname();
+
+ // Close mobile menu on route change
+ useEffect(() => {
+ setIsMenuOpen(false);
+ }, [pathname]);
+
+ const isActive = (href: string) => {
+ if (href.startsWith('/#')) {
+ return pathname === '/';
+ }
+ return pathname === href;
+ };
+
+ const handleNavClick = (e: React.MouseEvent, href: string) => {
+ if (href.startsWith('/#')) {
+ e.preventDefault();
+ const id = href.replace('/#', '');
+ const element = document.getElementById(id);
+ if (element) {
+ element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+ }
+ }
+ };
return (
-
-