[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import Navbar from "@/components/layout/navbar" import Footer from "@/components/layout/footer" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Team Valioux | Professional Esports Organization", description: "Team Valioux is a professional esports organization competing across multiple games with pro teams, academy rosters, and content creators.", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Hero from "@/components/home/hero" import TeamsOverview from "@/components/home/teams-overview" import ContentCreatorsPreview from "@/components/home/content-creators-preview" import LatestNews from "@/components/home/latest-news" import SponsorsBanner from "@/components/home/sponsors-banner" import CallToAction from "@/components/shared/call-to-action" export default function Home() { return (

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --primary: 270 100% 50%; /* Purple */ --primary-foreground: 0 0% 100%; /* White */ --secondary: 195 100% 75%; /* Baby Blue */ --secondary-foreground: 0 0% 0%; /* Black */ --background: 0 0% 0%; /* Black */ --foreground: 0 0% 100%; /* White */ --accent: 270 100% 60%; /* Lighter Purple */ --accent-foreground: 0 0% 100%; /* White */ } body { @apply bg-background text-foreground; } @layer components { .gradient-text { @apply bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-blue-400; } .valioux-card { @apply bg-zinc-900 border border-zinc-800 rounded-lg overflow-hidden transition-all duration-300 hover:border-purple-500 hover:shadow-[0_0_15px_rgba(168,85,247,0.3)]; } .valioux-button-primary { @apply bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-6 rounded-md transition-all duration-200 hover:shadow-[0_0_15px_rgba(168,85,247,0.5)]; } .valioux-button-secondary { @apply bg-transparent border border-purple-500 text-white font-medium py-2 px-6 rounded-md transition-all duration-200 hover:bg-purple-500/10 hover:shadow-[0_0_15px_rgba(168,85,247,0.3)]; } .section-title { @apply text-3xl md:text-4xl font-bold mb-8 gradient-text; } .section-container { @apply container mx-auto px-4 py-16; } } [V0_FILE]typescriptreact:file="tailwind.config.js" isFixed="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, animation: { "pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite", float: "float 6s ease-in-out infinite", }, keyframes: { float: { "0%, 100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-10px)" }, }, }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/layout/footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import { Twitter, Instagram, Twitch, Youtube, DiscIcon as Discord } from "lucide-react" import Logo from "@/components/shared/logo" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/shared/call-to-action.tsx" isMerged="true" import Link from "next/link" interface CallToActionProps { title: string description: string buttonText: string buttonLink: string secondaryButtonText?: string secondaryButtonLink?: string } export default function CallToAction({ title, description, buttonText, buttonLink, secondaryButtonText, secondaryButtonLink, }: CallToActionProps) { return (

{title}

{description}

{buttonText} {secondaryButtonText && secondaryButtonLink && ( {secondaryButtonText} )}

) } [V0_FILE]typescriptreact:file="components/home/hero.tsx" isQuickEdit="true" isMerged="true" import Link from "next/link" import Logo from "@/components/shared/logo" export default function Hero() { return (

{/* Background with animated gradient */}

#WeAreValioux

A professional Fortnite esports organization pushing the boundaries of competitive gaming

Our Teams Join Us

) } [V0_FILE]typescriptreact:file="components/home/teams-overview.tsx" isQuickEdit="true" isMerged="true" import Link from "next/link" import { ArrowRight } from "lucide-react" const teams = [ { name: "Pro Team", requirements: "TOP 200 EU Player", bgClass: "from-purple-900/50 to-black", }, { name: "Academy Team", requirements: "10k PR or more", bgClass: "from-blue-900/50 to-black", }, { name: "Talents Team", requirements: "3-5k PR", bgClass: "from-indigo-900/50 to-black", }, ] export default function TeamsOverview() { return (

Our Fortnite Teams

{teams.map((team) => (

{team.name}

Requirements:

{team.requirements}

View Roster

))}

View All Teams

) } [V0_FILE]typescriptreact:file="components/home/content-creators-preview.tsx" isMerged="true" import Link from "next/link" import { Twitch, Youtube } from "lucide-react" const creators = [ { name: "ValiGamer", role: "Streamer", platforms: ["twitch", "youtube"], specialty: "FPS Games", }, { name: "NightOwl", role: "Content Creator", platforms: ["youtube"], specialty: "Game Analysis", }, { name: "ProCoach", role: "Coach & Streamer", platforms: ["twitch"], specialty: "Strategy & Coaching", }, { name: "DesignMaster", role: "Graphic Designer", platforms: [], specialty: "Visual Content", }, ] export default function ContentCreatorsPreview() { return (

Content Creators

{creators.map((creator) => (

{creator.name.charAt(0)}

{creator.name}

{creator.role}

{creator.specialty}

{creator.platforms.includes("twitch") && ( )} {creator.platforms.includes("youtube") && ( )}

))}

Meet All Creators

) } [V0_FILE]typescriptreact:file="components/home/latest-news.tsx" isMerged="true" import Link from "next/link" import { Calendar, ArrowRight } from "lucide-react" const newsItems = [ { title: "Team Valioux Signs New Valorant Roster", date: "March 1, 2024", excerpt: "We're excited to announce our new professional Valorant roster joining the Valioux family.", slug: "new-valorant-roster", }, { title: "Upcoming Tournament: Spring Invitational", date: "February 25, 2024", excerpt: "Team Valioux will be participating in the Spring Invitational tournament next month.", slug: "spring-invitational", }, { title: "Partnership Announcement: Gaming Gear Pro", date: "February 18, 2024", excerpt: "We're thrilled to announce our new partnership with Gaming Gear Pro, a leading gaming peripherals company.", slug: "gaming-gear-partnership", }, ] export default function LatestNews() { return (

Latest News

View All

{newsItems.map((item) => (

{item.date}

{item.title}

{item.excerpt}

))}

) } [V0_FILE]typescriptreact:file="components/home/sponsors-banner.tsx" isMerged="true" import Link from "next/link" export default function SponsorsBanner() { return (

Our Partners

{[1, 2, 3, 4].map((sponsor) => (

Partner {sponsor}

))}

Become a Partner

) } [V0_FILE]typescriptreact:file="app/about/page.tsx" isQuickEdit="true" isMerged="true" import CallToAction from "@/components/shared/call-to-action" export default function AboutPage() { return (

About Team Valioux

Team Valioux is a professional esports organization founded with a vision to excel in competitive gaming while fostering talent and creating a supportive community.

Our Mission

At Team Valioux, our mission is to build a world-class esports organization that not only competes at the highest level but also nurtures emerging talent and creates opportunities for players, content creators, and staff to thrive in the gaming industry.

We believe in fostering a positive, inclusive environment where passion for gaming meets professional excellence. Our teams are built on the foundations of respect, dedication, and continuous improvement.

Core Values

Excellence

Striving for the highest standards in competition and content creation
Community

Building a supportive network of players, creators, and fans
Innovation

Embracing new strategies, technologies, and approaches
Integrity

Maintaining honesty, fairness, and sportsmanship in all endeavors

The Story of Valioux

Founded by Ege and Jason from Germany, Team Valioux emerged from a passion for competitive Fortnite and a vision to create an organization that would develop and showcase top talent in the European Fortnite scene.

Starting with a focus on competitive Fortnite, we've built a structured approach with three distinct team tiers: our Pro Team featuring top EU players, our Academy Team for established competitors, and our Talents Team for promising up-and-comers.

Today, Team Valioux continues to grow under the management of Deevl, competing in major tournaments, producing engaging content, and building a community that celebrates the passion and excitement of competitive Fortnite.

Leadership Team

{[ { name: "Ege", role: "Founder", description: "25, Self-employed in gastronomy and betting shops. From Germany.", }, { name: "Jason", role: "Founder", description: "22, Works as a heating engineer. From Germany." }, { name: "Deevl", role: "Manager", description: "14, Still in school, from Switzerland. Manages a bit of everything.", }, ].map((leader) => (

{leader.name.charAt(0)}

{leader.name}

{leader.role}

{leader.description}

))}

) } [V0_FILE]typescriptreact:file="app/teams/page.tsx" isQuickEdit="true" isMerged="true" import Link from "next/link" import { Filter } from "lucide-react" const teams = [ { division: "Pro Team", requirements: "TOP 200 EU Player", players: [ { name: "Player1", role: "IGL", country: "Germany" }, { name: "Player2", role: "Fragger", country: "France" }, { name: "Player3", role: "Support", country: "Sweden" }, // Add actual players when available ], }, { division: "Academy Team", requirements: "10k PR or more", players: [ { name: "Player4", role: "IGL", country: "Poland" }, { name: "Player5", role: "Fragger", country: "Denmark" }, { name: "Player6", role: "Support", country: "Netherlands" }, // Add actual players when available ], }, { division: "Talents Team", requirements: "3-5k PR", players: [ { name: "Player7", role: "IGL", country: "Germany" }, { name: "Player8", role: "Fragger", country: "Sweden" }, { name: "Player9", role: "Support", country: "Denmark" }, // Add actual players when available ], }, ] export default function TeamsPage() { return (

Our Fortnite Teams

Meet the professional Fortnite players representing Team Valioux across our divisions.

Team Rosters

{teams.map((team, index) => (

Fortnite - {team.division}

Requirements: {team.requirements}

{team.players.map((player, playerIndex) => ( ))}

Player	Role	Country	Profile
{player.name.charAt(0)} {player.name}	{player.role}	{player.country}	View Profile

))}

) } [V0_FILE]typescriptreact:file="app/creators/page.tsx" isMerged="true" import Link from "next/link" import { Twitch, Youtube, Instagram, Twitter } from "lucide-react" const creators = [ { name: "ValiGamer", role: "Streamer", platforms: ["twitch", "youtube", "twitter", "instagram"], specialty: "FPS Games", description: "Professional Valorant player turned content creator, specializing in gameplay tutorials and esports analysis.", }, { name: "NightOwl", role: "Content Creator", platforms: ["youtube", "twitter"], specialty: "Game Analysis", description: "In-depth game analysis and strategy guides for competitive players looking to improve their skills.", }, { name: "ProCoach", role: "Coach & Streamer", platforms: ["twitch", "youtube", "twitter"], specialty: "Strategy & Coaching", description: "Former professional player now coaching and creating educational content for aspiring esports athletes.", }, { name: "DesignMaster", role: "Graphic Designer", platforms: ["instagram", "twitter"], specialty: "Visual Content", description: "Creating stunning graphics, team logos, and visual content for Team Valioux and the broader esports community.", }, { name: "StreamQueen", role: "Variety Streamer", platforms: ["twitch", "twitter", "instagram"], specialty: "Entertainment", description: "Entertaining variety streamer known for high-energy gameplay and community interaction.", }, { name: "TechGuru", role: "Tech Specialist", platforms: ["youtube", "twitter"], specialty: "Gaming Hardware", description: "Reviews and guides on the latest gaming hardware, setups, and optimization techniques.", }, ] export default function CreatorsPage() { return (

Content Creators

Meet the talented creators who bring Team Valioux content to life across multiple platforms.

{creators.map((creator) => (

{creator.name.charAt(0)}

{creator.name}

{creator.role}

{creator.description}

Specialty: {creator.specialty}

{creator.platforms.includes("twitch") && ( )} {creator.platforms.includes("youtube") && ( )} {creator.platforms.includes("twitter") && ( )} {creator.platforms.includes("instagram") && ( )}

))}

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Mail, MapPin, Send } from "lucide-react" export default function ContactPage() { const [formType, setFormType] = useState<"general" | "player" | "creator" | "partner">("general") return (

Contact Us

Get in touch with Team Valioux for inquiries, applications, or partnership opportunities.

Email Us

info.valioux@gmail.com

Location

Berlin, Germany

Get in Touch

Select the appropriate form based on your inquiry. We'll get back to you as soon as possible.

{formType === "general" && "General Inquiry"} {formType === "player" && "Player Application"} {formType === "creator" && "Content Creator Application"} {formType === "partner" && "Partnership Inquiry"}

Full Name

Email Address

{formType === "player" && (

Game

Role/Position

)} {formType === "creator" && (

Content Type

Platform/Portfolio

)} {formType === "partner" && (

Company/Organization

Partnership Type

)}

Message

) } [V0_FILE]typescriptreact:file="app/partners/page.tsx" isMerged="true" import Link from "next/link" import { Check } from "lucide-react" import CallToAction from "@/components/shared/call-to-action" const benefits = [ "Brand exposure to our growing esports audience", "Logo placement on team jerseys and streams", "Social media promotion across our channels", "Collaborative content with our players and creators", "Access to exclusive events and tournaments", "Custom partnership activations tailored to your brand", ] const partnershipTypes = [ { title: "Official Sponsor", description: "Become an official sponsor of Team Valioux with premium brand placement and maximum exposure.", features: [ "Logo on all team jerseys", "Featured on website and social media", "Regular content collaborations", "Event presence and activations", "Player appearances and endorsements", ], }, { title: "Equipment Partner", description: "Provide your gaming hardware or peripherals to our players and receive authentic endorsements.", features: [ "Product used by our pro players", "Authentic product reviews and showcases", "Unboxing and setup videos", "Social media mentions and tags", "Product placement in streams", ], }, { title: "Content Collaboration", description: "Create engaging content with our players and creators to reach our audience in an authentic way.", features: [ "Custom content series", "Stream integrations and overlays", "Social media takeovers", "Behind-the-scenes access", "Co-branded digital assets", ], }, ] export default function PartnersPage() { return (

Partnership Opportunities

Join forces with Team Valioux and connect your brand with our passionate esports community.

Why Partner With Us?

Team Valioux offers unique partnership opportunities for brands looking to connect with the growing esports audience. Our professional teams, content creators, and community provide multiple touchpoints for authentic brand integration.

We work closely with our partners to create custom activations that align with your marketing objectives and resonate with our audience.

Become a Partner

Partnership Benefits

{benefit}

Partnership Opportunities

{partnershipTypes.map((type, index) => (

{type.title}

{type.description}

{feature}

Learn More

))}

Current Partners

{[1, 2, 3, 4].map((partner) => (

Partner {partner}

))}

Join these leading brands in partnering with Team Valioux to connect with the passionate esports community.

) } [V0_FILE]typescriptreact:file="app/news/page.tsx" isMerged="true" import Link from "next/link" import { Calendar, ArrowRight } from "lucide-react" const newsItems = [ { title: "Team Valioux Signs New Valorant Roster", date: "March 1, 2024", excerpt: "We're excited to announce our new professional Valorant roster joining the Valioux family.", slug: "new-valorant-roster", category: "Team Announcement", }, { title: "Upcoming Tournament: Spring Invitational", date: "February 25, 2024", excerpt: "Team Valioux will be participating in the Spring Invitational tournament next month.", slug: "spring-invitational", category: "Tournament", }, { title: "Partnership Announcement: Gaming Gear Pro", date: "February 18, 2024", excerpt: "We're thrilled to announce our new partnership with Gaming Gear Pro, a leading gaming peripherals company.", slug: "gaming-gear-partnership", category: "Partnership", }, { title: "League of Legends Team Advances to Playoffs", date: "February 10, 2024", excerpt: "Our League of Legends team has secured their spot in the regional playoffs after a strong regular season.", slug: "lol-playoffs-qualification", category: "Competition", }, { title: "New Content Creator Joins Team Valioux", date: "February 5, 2024", excerpt: "We're excited to welcome StreamQueen to our content creator roster, bringing her unique entertainment style to Team Valioux.", slug: "new-content-creator", category: "Team Announcement", }, { title: "Rocket League Team Finishes Second in Winter Cup", date: "January 28, 2024", excerpt: "Our Rocket League team put up an impressive performance, finishing second in the Winter Cup tournament.", slug: "rocket-league-winter-cup", category: "Competition", }, ] export default function NewsPage() { return (

News & Events

Stay up to date with the latest announcements, tournament results, and team updates.

Latest News

{newsItems.map((item) => (

{item.category}

{item.date}

{item.title}

{item.excerpt}

))}

) } [V0_FILE]typescriptreact:file="components/shared/logo.tsx" isMerged="true" import Image from "next/image" export default function Logo({ className = "h-8 w-8" }: { className?: string }) { return (

) } [V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" import type { ReactNode } from "react" import Link from "next/link" import { User, Settings, Bell, CreditCard, LogOut } from "lucide-react" interface DashboardLayoutProps { children: ReactNode } export default function DashboardLayout({ children }: DashboardLayoutProps) { return (

{/* Sidebar */} {/* Main content */}

{children}

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" "use client" import type React from "react" import { useState } from "react" import { Camera } from "lucide-react" export default function ProfilePage() { const [isEditing, setIsEditing] = useState(false) const [profile, setProfile] = useState({ username: "ValiPlayer123", fullName: "Alex Johnson", bio: "Competitive Fortnite player since 2018. Passionate about esports and gaming.", location: "Berlin, Germany", discord: "valiPlayer#1234", twitter: "@valiPlayer", }) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setProfile((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Here you would typically save the profile to your backend setIsEditing(false) } return (

My Profile

{/* Profile picture */}

{profile.username.charAt(0)}

{/* Profile info */}

{isEditing ? (

Username

Full Name

Bio

</div>
                <div>
                  <label htmlFor="location" className="block text-sm font-medium text-zinc-300 mb-1">
                    Location
                  </label>
                  <input
                    type="text"
                    id="location"
                    name="location"
                    value={profile.location}
                    onChange={handleChange}
                    className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                  />
                </div>
                <div className="flex gap-4">
                  <button type="submit" className="valioux-button-primary">
                    Save Changes
                  </button>
                  <button type="button" onClick={() => setIsEditing(false)} className="valioux-button-secondary">
                    Cancel
                  </button>
                </div>
              </form>
            ) : (
              <div>
                <h2 className="text-2xl font-bold mb-2">{profile.username}</h2>
                <p className="text-zinc-300 mb-4">{profile.fullName}</p>
                <p className="text-zinc-400 mb-6">{profile.bio}</p>
                <div className="space-y-2 mb-6">
                  <p className="text-zinc-400">
                    <span className="font-medium text-zinc-300">Location:</span> {profile.location}
                  </p>
                  <p className="text-zinc-400">
                    <span className="font-medium text-zinc-300">Discord:</span> {profile.discord}
                  </p>
                  <p className="text-zinc-400">
                    <span className="font-medium text-zinc-300">Twitter:</span> {profile.twitter}
                  </p>
                </div>
                <button onClick={() => setIsEditing(true)} className="valioux-button-primary">
                  Edit Profile
                </button>
              </div>
            )}
          </div>
        </div>
      </div>

<div className="valioux-card p-8">
        <h2 className="text-xl font-bold mb-4">Gaming Information</h2>
        <div className="space-y-6">
          <div>
            <h3 className="text-lg font-medium mb-2">Fortnite</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <p className="text-sm text-zinc-400">Epic Games Username</p>
                <p className="font-medium">ValiPlayer123</p>
              </div>
              <div>
                <p className="text-sm text-zinc-400">Region</p>
                <p className="font-medium">Europe</p>
              </div>
              <div>
                <p className="text-sm text-zinc-400">PR Points</p>
                <p className="font-medium">4,500</p>
              </div>
              <div>
                <p className="text-sm text-zinc-400">Team Division</p>
                <p className="font-medium">Academy Team</p>
              </div>
            </div>
          </div>
          <button className="valioux-button-secondary">Edit Gaming Information</button>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/account/page.tsx"
"use client"

import { useState } from "react"
import { Eye, EyeOff } from "lucide-react"

export default function AccountSettingsPage() {
  const [showPassword, setShowPassword] = useState(false)
  const [email, setEmail] = useState("alex.johnson@example.com")
  const [isChangingEmail, setIsChangingEmail] = useState(false)
  const [isChangingPassword, setIsChangingPassword] = useState(false)

return (
    <div className="max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold mb-8">Account Settings</h1>

<div className="space-y-8">
        {/* Email Settings */}
        <div className="valioux-card p-8">
          <h2 className="text-xl font-bold mb-4">Email Address</h2>
          {isChangingEmail ? (
            <form className="space-y-4">
              <div>
                <label htmlFor="email" className="block text-sm font-medium text-zinc-300 mb-1">
                  New Email Address
                </label>
                <input
                  type="email"
                  id="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                />
              </div>
              <div>
                <label htmlFor="current-password" className="block text-sm font-medium text-zinc-300 mb-1">
                  Current Password
                </label>
                <div className="relative">
                  <input
                    type={showPassword ? "text" : "password"}
                    id="current-password"
                    className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                  />
                  <button
                    type="button"
                    className="absolute inset-y-0 right-0 pr-3 flex items-center"
                    onClick={() => setShowPassword(!showPassword)}
                  >
                    {showPassword ? (
                      <EyeOff className="h-5 w-5 text-zinc-400" />
                    ) : (
                      <Eye className="h-5 w-5 text-zinc-400" />
                    )}
                  </button>
                </div>
              </div>
              <div className="flex gap-4">
                <button type="submit" className="valioux-button-primary">
                  Update Email
                </button>
                <button type="button" onClick={() => setIsChangingEmail(false)} className="valioux-button-secondary">
                  Cancel
                </button>
              </div>
            </form>
          ) : (
            <div>
              <p className="text-zinc-300 mb-4">Your current email address is: {email}</p>
              <button onClick={() => setIsChangingEmail(true)} className="valioux-button-primary">
                Change Email
              </button>
            </div>
          )}
        </div>

{/* Password Settings */}
        <div className="valioux-card p-8">
          <h2 className="text-xl font-bold mb-4">Password</h2>
          {isChangingPassword ? (
            <form className="space-y-4">
              <div>
                <label htmlFor="current-password-2" className="block text-sm font-medium text-zinc-300 mb-1">
                  Current Password
                </label>
                <div className="relative">
                  <input
                    type={showPassword ? "text" : "password"}
                    id="current-password-2"
                    className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                  />
                  <button
                    type="button"
                    className="absolute inset-y-0 right-0 pr-3 flex items-center"
                    onClick={() => setShowPassword(!showPassword)}
                  >
                    {showPassword ? (
                      <EyeOff className="h-5 w-5 text-zinc-400" />
                    ) : (
                      <Eye className="h-5 w-5 text-zinc-400" />
                    )}
                  </button>
                </div>
              </div>
              <div>
                <label htmlFor="new-password" className="block text-sm font-medium text-zinc-300 mb-1">
                  New Password
                </label>
                <div className="relative">
                  <input
                    type={showPassword ? "text" : "password"}
                    id="new-password"
                    className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                  />
                </div>
              </div>
              <div>
                <label htmlFor="confirm-password" className="block text-sm font-medium text-zinc-300 mb-1">
                  Confirm New Password
                </label>
                <div className="relative">
                  <input
                    type={showPassword ? "text" : "password"}
                    id="confirm-password"
                    className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                  />
                </div>
              </div>
              <div className="flex gap-4">
                <button type="submit" className="valioux-button-primary">
                  Update Password
                </button>
                <button type="button" onClick={() => setIsChangingPassword(false)} className="valioux-button-secondary">
                  Cancel
                </button>
              </div>
            </form>
          ) : (
            <div>
              <p className="text-zinc-300 mb-4">For security reasons, we recommend changing your password regularly.</p>
              <button onClick={() => setIsChangingPassword(true)} className="valioux-button-primary">
                Change Password
              </button>
            </div>
          )}
        </div>

{/* Address Settings */}
        <div className="valioux-card p-8">
          <h2 className="text-xl font-bold mb-4">Address Information</h2>
          <form className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label htmlFor="address-line1" className="block text-sm font-medium text-zinc-300 mb-1">
                  Address Line 1
                </label>
                <input
                  type="text"
                  id="address-line1"
                  className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                />
              </div>
              <div>
                <label htmlFor="address-line2" className="block text-sm font-medium text-zinc-300 mb-1">
                  Address Line 2 (Optional)
                </label>
                <input
                  type="text"
                  id="address-line2"
                  className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                />
              </div>
              <div>
                <label htmlFor="city" className="block text-sm font-medium text-zinc-300 mb-1">
                  City
                </label>
                <input
                  type="text"
                  id="city"
                  className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                />
              </div>
              <div>
                <label htmlFor="postal-code" className="block text-sm font-medium text-zinc-300 mb-1">
                  Postal Code
                </label>
                <input
                  type="text"
                  id="postal-code"
                  className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                />
              </div>
              <div>
                <label htmlFor="country" className="block text-sm font-medium text-zinc-300 mb-1">
                  Country
                </label>
                <select
                  id="country"
                  className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                >
                  <option value="">Select a country</option>
                  <option value="germany">Germany</option>
                  <option value="france">France</option>
                  <option value="uk">United Kingdom</option>
                  <option value="usa">United States</option>
                  <option value="other">Other</option>
                </select>
              </div>
              <div>
                <label htmlFor="phone" className="block text-sm font-medium text-zinc-300 mb-1">
                  Phone Number (Optional)
                </label>
                <input
                  type="tel"
                  id="phone"
                  className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                />
              </div>
            </div>
            <button type="submit" className="valioux-button-primary">
              Save Address
            </button>
          </form>
        </div>

{/* Delete Account */}
        <div className="valioux-card p-8 border border-red-900">
          <h2 className="text-xl font-bold mb-4 text-red-500">Danger Zone</h2>
          <p className="text-zinc-300 mb-4">Once you delete your account, there is no going back. Please be certain.</p>
          <button className="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded-md transition-all duration-200">
            Delete Account
          </button>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/notifications/page.tsx"
"use client"

import { useState } from "react"

export default function NotificationsPage() {
  const [emailNotifications, setEmailNotifications] = useState({
    news: true,
    events: true,
    teamUpdates: true,
    accountUpdates: true,
    marketing: false,
  })

const handleToggle = (key: keyof typeof emailNotifications) => {
    setEmailNotifications((prev) => ({
      ...prev,
      [key]: !prev[key],
    }))
  }

return (
    <div className="max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold mb-8">Notification Settings</h1>

<div className="valioux-card p-8">
        <h2 className="text-xl font-bold mb-6">Email Notifications</h2>
        <div className="space-y-6">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="font-medium">News and Announcements</h3>
              <p className="text-sm text-zinc-400">Receive updates about Team Valioux news and announcements</p>
            </div>
            <label className="relative inline-flex items-center cursor-pointer">
              <input
                type="checkbox"
                checked={emailNotifications.news}
                onChange={() => handleToggle("news")}
                className="sr-only peer"
              />
              <div className="w-11 h-6 bg-zinc-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-purple-500 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
            </label>
          </div>

<div className="flex items-center justify-between">
            <div>
              <h3 className="font-medium">Events and Tournaments</h3>
              <p className="text-sm text-zinc-400">Get notified about upcoming events and tournaments</p>
            </div>
            <label className="relative inline-flex items-center cursor-pointer">
              <input
                type="checkbox"
                checked={emailNotifications.events}
                onChange={() => handleToggle("events")}
                className="sr-only peer"
              />
              <div className="w-11 h-6 bg-zinc-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-purple-500 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
            </label>
          </div>

<div className="flex items-center justify-between">
            <div>
              <h3 className="font-medium">Team Updates</h3>
              <p className="text-sm text-zinc-400">Receive updates about team roster changes and results</p>
            </div>
            <label className="relative inline-flex items-center cursor-pointer">
              <input
                type="checkbox"
                checked={emailNotifications.teamUpdates}
                onChange={() => handleToggle("teamUpdates")}
                className="sr-only peer"
              />
              <div className="w-11 h-6 bg-zinc-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-purple-500 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
            </label>
          </div>

<div className="flex items-center justify-between">
            <div>
              <h3 className="font-medium">Account Updates</h3>
              <p className="text-sm text-zinc-400">
                Receive important notifications about your account security and updates
              </p>
            </div>
            <label className="relative inline-flex items-center cursor-pointer">
              <input
                type="checkbox"
                checked={emailNotifications.accountUpdates}
                onChange={() => handleToggle("accountUpdates")}
                className="sr-only peer"
              />
              <div className="w-11 h-6 bg-zinc-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-purple-500 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
            </label>
          </div>

<div className="flex items-center justify-between">
            <div>
              <h3 className="font-medium">Marketing and Promotions</h3>
              <p className="text-sm text-zinc-400">Receive promotional offers and marketing communications</p>
            </div>
            <label className="relative inline-flex items-center cursor-pointer">
              <input
                type="checkbox"
                checked={emailNotifications.marketing}
                onChange={() => handleToggle("marketing")}
                className="sr-only peer"
              />
              <div className="w-11 h-6 bg-zinc-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-purple-500 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
            </label>
          </div>

<div className="pt-4 border-t border-zinc-800">
            <button className="valioux-button-primary">Save Preferences</button>
          </div>
        </div>
      </div>

<div className="valioux-card p-8 mt-8">
        <h2 className="text-xl font-bold mb-6">Email Frequency</h2>
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-zinc-300 mb-2">
              How often would you like to receive emails?
            </label>
            <select className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
              <option value="immediately">Immediately (as they happen)</option>
              <option value="daily">Daily Digest</option>
              <option value="weekly">Weekly Digest</option>
              <option value="monthly">Monthly Digest</option>
            </select>
          </div>
          <button className="valioux-button-primary">Save Preferences</button>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/billing/page.tsx"
export default function BillingPage() {
  return (
    <div className="max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold mb-8">Billing & Subscriptions</h1>

<div className="valioux-card p-8 mb-8">
        <h2 className="text-xl font-bold mb-6">Current Membership</h2>
        <div className="bg-gradient-to-r from-purple-900/50 to-blue-900/50 p-6 rounded-lg mb-6">
          <div className="flex justify-between items-center">
            <div>
              <h3 className="text-lg font-bold">Free Membership</h3>
              <p className="text-zinc-300">Basic access to Team Valioux community</p>
            </div>
            <span className="bg-purple-600 text-white px-3 py-1 rounded-full text-sm">Active</span>
          </div>
        </div>
        <div>
          <h3 className="font-medium mb-2">Membership Benefits:</h3>
          <ul className="space-y-2 text-zinc-300 mb-6">
            <li className="flex items-start">
              <span className="w-2 h-2 bg-purple-500 rounded-full mr-3 mt-2"></span>
              <span>Access to community forums</span>
            </li>
            <li className="flex items-start">
              <span className="w-2 h-2 bg-purple-500 rounded-full mr-3 mt-2"></span>
              <span>Basic profile customization</span>
            </li>
            <li className="flex items-start">
              <span className="w-2 h-2 bg-purple-500 rounded-full mr-3 mt-2"></span>
              <span>Participation in community events</span>
            </li>
          </ul>
          <button className="valioux-button-primary">Upgrade Membership</button>
        </div>
      </div>

<div className="valioux-card p-8 mb-8">
        <h2 className="text-xl font-bold mb-6">Premium Membership Options</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="border border-zinc-800 rounded-lg p-6 hover:border-purple-500 transition-colors">
            <h3 className="text-lg font-bold mb-2">Pro Membership</h3>
            <p className="text-2xl font-bold mb-4">
              €4.99<span className="text-sm text-zinc-400">/month</span>
            </p>
            <ul className="space-y-2 text-zinc-300 mb-6">
              <li className="flex items-start">
                <span className="w-2 h-2 bg-purple-500 rounded-full mr-3 mt-2"></span>
                <span>All Free benefits</span>
              </li>
              <li className="flex items-start">
                <span className="w-2 h-2 bg-purple-500 rounded-full mr-3 mt-2"></span>
                <span>Exclusive Discord role</span>
              </li>
              <li className="flex items-start">
                <span className="w-2 h-2 bg-purple-500 rounded-full mr-3 mt-2"></span>
                <span>Early access to team news</span>
              </li>
              <li className="flex items-start">
                <span className="w-2 h-2 bg-purple-500 rounded-full mr-3 mt-2"></span>
                <span>10% off merchandise</span>
              </li>
            </ul>
            <button className="valioux-button-primary w-full">Subscribe</button>
          </div>

<div className="border border-zinc-800 rounded-lg p-6 hover:border-purple-500 transition-colors">
            <h3 className="text-lg font-bold mb-2">Elite Membership</h3>
            <p className="text-2xl font-bold mb-4">
              €9.99<span className="text-sm text-zinc-400">/month</span>
            </p>
            <ul className="space-y-2 text-zinc-300 mb-6">
              <li className="flex items-start">
                <span className="w-2 h-2 bg-purple-500 rounded-full mr-3 mt-2"></span>
                <span>All Pro benefits</span>
              </li>
              <li className="flex items-start">
                <span className="w-2 h-2 bg-purple-500 rounded-full mr-3 mt-2"></span>
                <span>Monthly coaching session</span>
              </li>
              <li className="flex items-start">
                <span className="w-2 h-2 bg-purple-500 rounded-full mr-3 mt-2"></span>
                <span>Exclusive in-game items</span>
              </li>
              <li className="flex items-start">
                <span className="w-2 h-2 bg-purple-500 rounded-full mr-3 mt-2"></span>
                <span>25% off merchandise</span>
              </li>
            </ul>
            <button className="valioux-button-primary w-full">Subscribe</button>
          </div>
        </div>
      </div>

<div className="valioux-card p-8">
        <h2 className="text-xl font-bold mb-6">Payment Methods</h2>
        <p className="text-zinc-300 mb-6">No payment methods added yet.</p>
        <button className="valioux-button-primary">Add Payment Method</button>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Eye, EyeOff } from "lucide-react"

export default function LoginPage() {
  const [showPassword, setShowPassword] = useState(false)

return (
    <div className="min-h-screen flex items-center justify-center py-12 px-4">
      <div className="max-w-md w-full space-y-8">
        <div className="text-center">
          <h1 className="text-3xl font-bold">Welcome Back</h1>
          <p className="mt-2 text-zinc-400">Sign in to your Team Valioux account</p>
        </div>

<div className="valioux-card p-8">
          <form
            className="space-y-6"
            onSubmit={(e) => {
              e.preventDefault()
              window.location.href = "/dashboard"
            }}
          >
            <div>
              <label htmlFor="email" className="block text-sm font-medium text-zinc-300 mb-1">
                Email Address
              </label>
              <input
                id="email"
                name="email"
                type="email"
                autoComplete="email"
                required
                className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
              />
            </div>

<div>
              <label htmlFor="password" className="block text-sm font-medium text-zinc-300 mb-1">
                Password
              </label>
              <div className="relative">
                <input
                  id="password"
                  name="password"
                  type={showPassword ? "text" : "password"}
                  autoComplete="current-password"
                  required
                  className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                />
                <button
                  type="button"
                  className="absolute inset-y-0 right-0 pr-3 flex items-center"
                  onClick={() => setShowPassword(!showPassword)}
                >
                  {showPassword ? (
                    <EyeOff className="h-5 w-5 text-zinc-400" />
                  ) : (
                    <Eye className="h-5 w-5 text-zinc-400" />
                  )}
                </button>
              </div>
            </div>

<div className="flex items-center justify-between">
              <div className="flex items-center">
                <input
                  id="remember-me"
                  name="remember-me"
                  type="checkbox"
                  className="h-4 w-4 bg-zinc-800 border-zinc-700 rounded focus:ring-purple-500"
                />
                <label htmlFor="remember-me" className="ml-2 block text-sm text-zinc-300">
                  Remember me
                </label>
              </div>

<div className="text-sm">
                <Link href="/forgot-password" className="text-purple-400 hover:text-purple-300">
                  Forgot your password?
                </Link>
              </div>
            </div>

<div className="mt-6 text-center">
            <p className="text-sm text-zinc-400">
              Don't have an account?{" "}
              <Link href="/register" className="text-purple-400 hover:text-purple-300">
                Register
              </Link>
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/register/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Eye, EyeOff } from "lucide-react"

export default function RegisterPage() {
  const [showPassword, setShowPassword] = useState(false)

return (
    <div className="min-h-screen flex items-center justify-center py-12 px-4">
      <div className="max-w-md w-full space-y-8">
        <div className="text-center">
          <h1 className="text-3xl font-bold">Create an Account</h1>
          <p className="mt-2 text-zinc-400">Join the Team Valioux community</p>
        </div>

<div className="valioux-card p-8">
          <form
            className="space-y-6"
            onSubmit={(e) => {
              e.preventDefault()
              window.location.href = "/dashboard"
            }}
          >
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label htmlFor="first-name" className="block text-sm font-medium text-zinc-300 mb-1">
                  First Name
                </label>
                <input
                  id="first-name"
                  name="first-name"
                  type="text"
                  required
                  className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                />
              </div>
              <div>
                <label htmlFor="last-name" className="block text-sm font-medium text-zinc-300 mb-1">
                  Last Name
                </label>
                <input
                  id="last-name"
                  name="last-name"
                  type="text"
                  required
                  className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                />
              </div>
            </div>

<div>
              <label htmlFor="email" className="block text-sm font-medium text-zinc-300 mb-1">
                Email Address
              </label>
              <input
                id="email"
                name="email"
                type="email"
                autoComplete="email"
                required
                className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
              />
            </div>

<div>
              <label htmlFor="username" className="block text-sm font-medium text-zinc-300 mb-1">
                Username
              </label>
              <input
                id="username"
                name="username"
                type="text"
                required
                className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
              />
            </div>

<div>
              <label htmlFor="password" className="block text-sm font-medium text-zinc-300 mb-1">
                Password
              </label>
              <div className="relative">
                <input
                  id="password"
                  name="password"
                  type={showPassword ? "text" : "password"}
                  autoComplete="new-password"
                  required
                  className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
                />
                <button
                  type="button"
                  className="absolute inset-y-0 right-0 pr-3 flex items-center"
                  onClick={() => setShowPassword(!showPassword)}
                >
                  {showPassword ? (
                    <EyeOff className="h-5 w-5 text-zinc-400" />
                  ) : (
                    <Eye className="h-5 w-5 text-zinc-400" />
                  )}
                </button>
              </div>
            </div>

<div>
              <label htmlFor="confirm-password" className="block text-sm font-medium text-zinc-300 mb-1">
                Confirm Password
              </label>
              <input
                id="confirm-password"
                name="confirm-password"
                type={showPassword ? "text" : "password"}
                autoComplete="new-password"
                required
                className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
              />
            </div>

<div className="flex items-center">
              <input
                id="terms"
                name="terms"
                type="checkbox"
                required
                className="h-4 w-4 bg-zinc-800 border-zinc-700 rounded focus:ring-purple-500"
              />
              <label htmlFor="terms" className="ml-2 block text-sm text-zinc-300">
                I agree to the{" "}
                <Link href="/terms" className="text-purple-400 hover:text-purple-300">
                  Terms of Service
                </Link>{" "}
                and{" "}
                <Link href="/privacy" className="text-purple-400 hover:text-purple-300">
                  Privacy Policy
                </Link>
              </label>
            </div>

<div>
              <button type="submit" className="valioux-button-primary w-full">
                Create Account
              </button>
            </div>
          </form>

<div className="mt-6 text-center">
            <p className="text-sm text-zinc-400">
              Already have an account?{" "}
              <Link href="/login" className="text-purple-400 hover:text-purple-300">
                Sign in
              </Link>
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/layout/navbar.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Menu, X } from "lucide-react"
import Logo from "@/components/shared/logo"

const navigation = [
  { name: "Home", href: "/" },
  { name: "About", href: "/about" },
  { name: "Teams", href: "/teams" },
  { name: "Creators", href: "/creators" },
  { name: "News", href: "/news" },
  { name: "Partners", href: "/partners" },
  { name: "Contact", href: "/contact" },
]

export default function Navbar() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  const [userMenuOpen, setUserMenuOpen] = useState(false)

useEffect(() => {
    // Check if we're on a dashboard page to simulate logged in state
    if (typeof window !== "undefined") {
      setIsLoggedIn(window.location.pathname.includes("/dashboard"))
    }
  }, [])

return (
    <header className="bg-black/80 backdrop-blur-md sticky top-0 z-50 border-b border-zinc-800">
      <nav className="container mx-auto flex items-center justify-between p-4">
        <div className="flex items-center">
          <Link href="/" className="flex items-center">
            <Logo className="h-10 w-10" />
            <span className="ml-2 text-xl font-bold">VALIOUX</span>
          </Link>
        </div>

{/* Desktop navigation */}
        <div className="hidden md:flex md:gap-x-8">
          {navigation.map((item) => (
            <Link
              key={item.name}
              href={item.href}
              className="text-sm font-medium text-zinc-300 hover:text-white transition-colors relative group"
            >
              {item.name}
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-purple-500 transition-all duration-300 group-hover:w-full"></span>
            </Link>
          ))}
        </div>

<div className="hidden md:flex items-center gap-4">
          {isLoggedIn ? (
            <div className="relative">
              <button
                onClick={() => setUserMenuOpen(!userMenuOpen)}
                className="flex items-center gap-2 text-sm font-medium text-zinc-300 hover:text-white"
              >
                <div className="w-8 h-8 bg-gradient-to-br from-purple-600 to-blue-400 rounded-full flex items-center justify-center">
                  <span className="font-bold">V</span>
                </div>
                <span>My Account</span>
              </button>
              {userMenuOpen && (
                <div className="absolute right-0 mt-2 w-48 bg-zinc-900 border border-zinc-800 rounded-md shadow-lg py-1 z-50">
                  <Link
                    href="/dashboard"
                    className="block px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-800"
                    onClick={() => setUserMenuOpen(false)}
                  >
                    Dashboard
                  </Link>
                  <Link
                    href="/dashboard/account"
                    className="block px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-800"
                    onClick={() => setUserMenuOpen(false)}
                  >
                    Account Settings
                  </Link>
                  <Link
                    href="/dashboard/notifications"
                    className="block px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-800"
                    onClick={() => setUserMenuOpen(false)}
                  >
                    Notifications
                  </Link>
                  <div className="border-t border-zinc-800 my-1"></div>
                  <button
                    onClick={() => {
                      setUserMenuOpen(false)
                      window.location.href = "/"
                    }}
                    className="block w-full text-left px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-800"
                  >
                    Sign Out
                  </button>
                </div>
              )}
            </div>
          ) : (
            <>
              <Link href="/login" className="text-sm font-medium text-zinc-300 hover:text-white">
                Log in
              </Link>
              <Link href="/register" className="valioux-button-primary">
                Register
              </Link>
            </>
          )}
        </div>

{/* Mobile menu button */}
        <div className="flex md:hidden">
          <button
            type="button"
            className="text-zinc-300 hover:text-white"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          >
            <span className="sr-only">Open main menu</span>
            {mobileMenuOpen ? (
              <X className="h-6 w-6" aria-hidden="true" />
            ) : (
              <Menu className="h-6 w-6" aria-hidden="true" />
            )}
          </button>
        </div>
      </nav>

{/* Mobile menu */}
      {mobileMenuOpen && (
        <div className="md:hidden bg-zinc-900 border-b border-zinc-800">
          <div className="space-y-1 px-4 py-4">
            {navigation.map((item) => (
              <Link
                key={item.name}
                href={item.href}
                className="block py-2 text-base font-medium text-zinc-300 hover:text-white"
                onClick={() => setMobileMenuOpen(false)}
              >
                {item.name}
              </Link>
            ))}

{isLoggedIn ? (
              <>
                <div className="pt-4 border-t border-zinc-800 mt-4">
                  <p className="text-sm text-zinc-400 mb-2">My Account</p>
                  <Link
                    href="/dashboard"
                    className="block py-2 text-base font-medium text-zinc-300 hover:text-white"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    Dashboard
                  </Link>
                  <Link
                    href="/dashboard/account"
                    className="block py-2 text-base font-medium text-zinc-300 hover:text-white"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    Account Settings
                  </Link>
                  <Link
                    href="/dashboard/notifications"
                    className="block py-2 text-base font-medium text-zinc-300 hover:text-white"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    Notifications
                  </Link>
                  <button
                    onClick={() => {
                      setMobileMenuOpen(false)
                      window.location.href = "/"
                    }}
                    className="block py-2 text-base font-medium text-zinc-300 hover:text-white w-full text-left"
                  >
                    Sign Out
                  </button>
                </div>
              </>
            ) : (
              <div className="pt-4 flex flex-col gap-2">
                <Link
                  href="/login"
                  className="valioux-button-secondary w-full text-center"
                  onClick={() => setMobileMenuOpen(false)}
                >
                  Log in
                </Link>
                <Link
                  href="/register"
                  className="valioux-button-primary w-full text-center"
                  onClick={() => setMobileMenuOpen(false)}
                >
                  Register
                </Link>
              </div>
            )}
          </div>
        </div>
      )}
    </header>
  )
}
</article></body></html>