<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Virtus Roleplay</title>

    <meta name="title" content="VirtusRP - Server GTA Roleplay Italiano | FiveM">
    <meta name="description" content="Entra nel mondo del Roleplay italiano più immersivo. VirtusRP offre un'esperienza unica con ruoli personalizzabili, economia dinamica e una community attiva.">
    <meta name="keywords" content="VirtusRP, GTA RP, FiveM, Roleplay italiano, GTA 5 RP, server roleplay, gaming RP, VirtusRP FiveM">
    <meta name="robots" content="index, follow">
    <meta name="language" content="Italian">
    <meta name="author" content="Vlad.dev">

    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="images/virtus_rp_no_bg.png" type="image/x-icon">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap" rel="stylesheet">

</head>
<body>
    <nav class="text-white fixed w-full z-50 glass-effect mb-10">

        <div class="max-w-7xl mx-auto px-4">
           
            <div class="flex justify-center items-center h-20">
               
                <div class="hidden md:flex items-center space-x-4">
                    <a href="#" class="nav-link text-lg font-semibold hover:text-white transition-colors px-3 py-2">HOME</a>
                    <a href="#" class="nav-link text-lg font-semibold hover:text-white transition-colors px-3 py-2">CHI SIAMO</a>
                    <img src="images/VirtusRP.gif" alt="VirtusRP Logo" class="logo-img">
                    <a href="#" class="nav-link text-lg font-semibold hover:text-white transition-colors px-3 py-2">NEGOZIO</a>
                    <a href="#" class="nav-link text-lg font-semibold hover:text-white transition-colors px-3 py-2">REGOLAMENTO</a> 
                </div>

                
              
                <button id="menu-btn" class="md:hidden p-2 rounded-md hover:bg-gray-700 focus:outline-none">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path class="menu-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                        <path class="close-icon hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

       
            <div id="mobile-menu" class="hidden md:hidden pb-9">
                <div class="flex flex-col space-y-4 text-center">
                    <img src="images/VirtusRP.gif" alt="VirtusRP Logo" class="h-40 mx-auto my-3">
                    <a href="#" class="text-lg font-semibold bg-white text-black border border-white px-3 py-2 rounded-md">HOME</a>
                    <a href="#" class="text-lg font-semibold bg-white text-black border border-white px-3 py-2 rounded-md">CHI SIAMO</a>
                    <a href="#" class="text-lg font-semibold bg-white text-black border border-white px-3 py-2 rounded-md">NEGOZIO</a>
                    <a href="#" class="text-lg font-semibold bg-white text-black border border-white px-3 py-2 rounded-md">REGOLAMENTO</a>
                </div>
            </div>     
        </div>
    </nav>

     <div class="relative min-h-screen w-full overflow-hidden">

    
        <video 
            class="fixed top-0 left-0 w-full h-full object-cover"
            autoplay 
            loop 
            muted 
            playsinline
        >
            <source src="video/cinematic.mp4" type="video/mp4">
        </video>
        
        
        <div class="video-overlay"></div>
        
    
<div class="relative z-10 h-full flex flex-col items-center justify-center text-center px-4 mt-60">
    <h1 class="text-5xl md:text-7xl font-extrabold text-white mb-6">
         BENVENUTO SU
        <span class="accent-text text-gray-400">VIRTUS RP</span>
    </h1>        
    <p class="text-xl md:text-2xl text-white font-medium max-w-2xl mb-4">
        Entra nel mondo del Roleplay italiano più immersivo
    </p>
    <p class="text-lg text-gray-300 max-w-3xl mb-8">
        Unisciti a una community di giocatori appassionati. Vivi storie uniche, crea il tuo personaggio e lascia il tuo segno in città.
    </p>
    <div class="flex flex-col sm:flex-row gap-4">
        <a href="https://discord.com/invite/virtusrp" target="_blank" class="px-8 py-3 bg-white text-gray-900 rounded-lg font-bold hover:bg-gray-200 transition duration-300">
            DISCORD 
        </a>
        <a href="#" class="px-8 py-3 border-2 border-white text-white rounded-lg font-bold hover:bg-white hover:text-gray-900 transition duration-300">
            COME INIZIARE?
        </a>
    </div>
</div>

<div class="min-h-screen text-white py-20 px-4 relative">
    <div class="max-w-7xl mx-auto">

        <div class="text-center mb-20">
            <div class="inline-block glass-effect rounded-2xl p-10 border border-white/10 shadow-2xl transform hover:scale-105 transition-all duration-300">
                <h1 class="text-6xl md:text-8xl font-extrabold mb-6 text-white bg-clip-text">
                    Scegli il Tuo Ruolo
                </h1>
                <p class="text-2xl text-gray-300">Il tuo destino è nelle tue mani...</p>
            </div>
        </div>

   
        <div class="grid md:grid-cols-2 gap-10">
            <div class="space-y-6">
    
                <div class="role-card cursor-pointer glass-effect rounded-xl p-8 transition-all duration-300 hover:transform hover:scale-105 border border-white/5" data-role="criminale">
                    <div class="flex items-center justify-between">
                        <div class="space-y-4">
                            <h3 class="text-3xl font-bold">La Malavita</h3>
                            <ul class="space-y-3 text-gray-300">
                                <li class="flex items-center space-x-2">
                                    <span class="text-white">✦</span>
                                    <span>Bonus Rapina: +15%</span>
                                </li>
                                <li class="flex items-center space-x-2">
                                    <span class="text-white">✦</span>
                                    <span>Accesso Zone Esclusive</span>
                                </li>
                                <li class="flex items-center space-x-2">
                                    <span class="text-white">✦</span>
                                    <span>Contatti nel Mercato Nero</span>
                                </li>
                            </ul>
                        </div>
                        <img src="images/criminale.png" alt="" class="w-40 h-40 object-cover rounded-lg shadow-2xl">
                    </div>
                </div>

      
                <div class="role-card cursor-pointer glass-effect rounded-xl p-8 transition-all duration-300 hover:transform hover:scale-105 border border-white/5" data-role="imprenditore">
                    <div class="flex items-center justify-between">
                        <div class="space-y-4">
                            <h3 class="text-3xl font-bold">Gli Affari</h3>
                            <ul class="space-y-3 text-gray-300">
                                <li class="flex items-center space-x-2">
                                    <span class="text-white">✦</span>
                                    <span>Profitti Aumentati: +20%</span>
                                </li>
                                <li class="flex items-center space-x-2">
                                    <span class="text-white">✦</span>
                                    <span>Prestiti Agevolati</span>
                                </li>
                                <li class="flex items-center space-x-2">
                                    <span class="text-white">✦</span>
                                    <span>Network Esclusivo</span>
                                </li>
                            </ul>
                        </div>
                        <img src="images/affari.png" alt="" class="w-40 h-40 object-cover rounded-lg shadow-2xl">
                    </div>
                </div>

              
                <div class="role-card cursor-pointer glass-effect rounded-xl p-8 transition-all duration-300 hover:transform hover:scale-105 border border-white/5" data-role="polizia">
                    <div class="flex items-center justify-between">
                        <div class="space-y-4">
                            <h3 class="text-3xl font-bold">La Legge</h3>
                            <ul class="space-y-3 text-gray-300">
                                <li class="flex items-center space-x-2">
                                    <span class="text-white">✦</span>
                                    <span>Stipendio Extra: +25%</span>
                                </li>
                                <li class="flex items-center space-x-2">
                                    <span class="text-white">✦</span>
                                    <span>Equipaggiamento Speciale</span>
                                </li>
                                <li class="flex items-center space-x-2">
                                    <span class="text-white">✦</span>
                                    <span>Autorità Aumentata</span>
                                </li>
                            </ul>
                        </div>
                        <img src="images/polizia.png" alt="" class="w-40 h-40 object-cover rounded-lg shadow-2xl">
                    </div>
                </div>
            </div>

           
            <div class="glass-effect rounded-xl p-10 border border-white/5 sticky top-24">
                <div id="role-description" class="space-y-6">
                    <h2 class="text-5xl font-bold mb-6">Il Tuo Percorso</h2>
                    <p class="text-xl text-gray-300">Clicca su un ruolo per scoprire il tuo destino...</p>
                </div>
            </div>
        </div>

        <p class="text-center text-2xl text-gray-400 mt-12">Esplora molti altri percorsi disponibili nella città...</p>
    </div>
</div>



<div class="min-h-screen text-white py-20 px-4 relative">
    <div class="max-w-7xl mx-auto">
 
        <div class="text-center mb-20">
            <div class="inline-block glass-effect rounded-2xl p-10 border border-white/10 shadow-2xl transform hover:scale-105 transition-all duration-300">
                <h1 class="text-6xl md:text-8xl font-extrabold mb-6 text-white bg-clip-text">
                    Come Iniziare?
                </h1>
                <p class="text-2xl text-gray-300">La tua avventura inizia qui</p>
            </div>
        </div>

     
        <div class="grid md:grid-cols-3 gap-10">
          
            <div class="glass-effect rounded-xl p-8 transition-all duration-300 hover:transform hover:scale-105 border border-white/5">
                <div class="flex flex-col items-center text-center space-y-6">
                    <div class="text-5xl font-bold text-white bg-gradient-to-r from-white/20 to-white/10 w-16 h-16 rounded-full flex items-center justify-center">1</div>
                    <h3 class="text-3xl font-bold">Unisciti al Discord</h3>
                    <p class="text-gray-300 text-lg">Entra nel nostro server Discord per connetterti con la community e ricevere supporto immediato.</p>
                    <a href="https://discord.com/invite/virtusrp" target="_blank" class="mt-6 px-8 py-3 bg-white text-gray-900 rounded-lg font-bold hover:bg-gray-200 transition duration-300 transform hover:scale-105">
                        Entra Ora
                    </a>
                </div>
            </div>

         
            <div class="glass-effect rounded-xl p-8 transition-all duration-300 hover:transform hover:scale-105 border border-white/5">
                <div class="flex flex-col items-center text-center space-y-6">
                    <div class="text-5xl font-bold text-white bg-gradient-to-r from-white/20 to-white/10 w-16 h-16 rounded-full flex items-center justify-center">2</div>
                    <h3 class="text-3xl font-bold">Crea il Personaggio</h3>
                    <p class="text-gray-300 text-lg">Sviluppa la tua storia, scegli il tuo background e compila il modulo whitelist.</p>
                    <ul class="mt-4 text-left text-gray-300 space-y-3">
                        <li class="flex items-center space-x-2">
                            <span class="text-white">✦</span>
                            <span>Scegli un nome realistico</span>
                        </li>
                        <li class="flex items-center space-x-2">
                            <span class="text-white">✦</span>
                            <span>Definisci il background</span>
                        </li>
                        <li class="flex items-center space-x-2">
                            <span class="text-white">✦</span>
                            <span>Seleziona le tue abilità</span>
                        </li>
                    </ul>
                </div>
            </div>

       
            <div class="glass-effect rounded-xl p-8 transition-all duration-300 hover:transform hover:scale-105 border border-white/5">
                <div class="flex flex-col items-center text-center space-y-6">
                    <div class="text-5xl font-bold text-white bg-gradient-to-r from-white/20 to-white/10 w-16 h-16 rounded-full flex items-center justify-center">3</div>
                    <h3 class="text-3xl font-bold">Inizia a Giocare</h3>
                    <p class="text-gray-300 text-lg">Scarica FiveM, connettiti al server e inizia la tua avventura in città.</p>
                    <div class="w-full space-y-4">
                        <a href="https://fivem.net/" target="_blank" class="block px-8 py-3 bg-white text-gray-900 rounded-lg font-bold hover:bg-gray-200 transition duration-300 transform hover:scale-105">
                            Scarica FiveM
                        </a>
                        <button onclick="copyIP()" class="block w-full px-8 py-3 border-2 border-white text-white rounded-lg font-bold hover:bg-white hover:text-gray-900 transition duration-300 transform hover:scale-105">
                            IP: play.virtusrp.it
                        </button>
                    </div>
                </div>
            </div>
            <div id="copyPopup" class="fixed bottom-8 right-8 bg-white text-gray-900 px-6 py-3 rounded-lg shadow-xl transform translate-y-full opacity-0 transition-all duration-300 z-50">
                IP copiato negli appunti!
            </div>
        </div>

        
        <div class="mt-20 glass-effect rounded-xl p-10 border border-white/5">
            <h3 class="text-3xl font-bold mb-8 text-center">Consigli per Iniziare</h3>
            <div class="grid md:grid-cols-2 gap-10">
                <div class="space-y-6">
                    <h4 class="text-2xl font-bold mb-4">Per i Novizi</h4>
                    <ul class="space-y-4 text-gray-300">
                        <li class="flex items-center space-x-3">
                            <span class="text-white">✦</span>
                            <span>Leggi attentamente il regolamento</span>
                        </li>
                        <li class="flex items-center space-x-3">
                            <span class="text-white">✦</span>
                            <span>Partecipa al tutorial in-game</span>
                        </li>
                        <li class="flex items-center space-x-3">
                            <span class="text-white">✦</span>
                            <span>Chiedi aiuto ai mentor dedicati</span>
                        </li>
                        <li class="flex items-center space-x-3">
                            <span class="text-white">✦</span>
                            <span>Esplora la città con calma</span>
                        </li>
                    </ul>
                </div>
                <div class="space-y-6">
                    <h4 class="text-2xl font-bold mb-4">Primi Passi</h4>
                    <ul class="space-y-4 text-gray-300">
                        <li class="flex items-center space-x-3">
                            <span class="text-white">✦</span>
                            <span>Trova un lavoro legale iniziale</span>
                        </li>
                        <li class="flex items-center space-x-3">
                            <span class="text-white">✦</span>
                            <span>Socializza con altri giocatori</span>
                        </li>
                        <li class="flex items-center space-x-3">
                            <span class="text-white">✦</span>
                            <span>Partecipa agli eventi community</span>
                        </li>
                        <li class="flex items-center space-x-3">
                            <span class="text-white">✦</span>
                            <span>Costruisci la tua reputazione</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="min-h-screen text-white py-20 px-4 relative">
    <div class="max-w-7xl mx-auto">
        <div class="text-center mb-20">
            <div class="inline-block glass-effect rounded-2xl p-10 border border-white/10 shadow-2xl transform hover:scale-105 transition-all duration-300">
                <h1 class="text-6xl md:text-8xl font-extrabold mb-6 text-white bg-clip-text">
                    Starter Pack
                </h1>
                <p class="text-2xl text-gray-300">Equipaggiamento Iniziale per Ruolo</p>
            </div>
        </div>

        <div class="grid md:grid-cols-3 gap-10">
        
            <div class="glass-effect rounded-xl p-8 hover:transform hover:scale-105 transition-all duration-300">
                <div class="space-y-6">
                    <h3 class="text-3xl font-bold text-center mb-6">Malavita</h3>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between p-4 bg-black/20 rounded-lg">
                            <span>Contanti Iniziali</span>
                            <span class="font-bold">$100,000</span>
                        </div>
                        <div class="flex items-center justify-between p-4 bg-black/20 rounded-lg">
                            <span>Equipaggiamento</span>
                            <span class="font-bold">Pistola + 50 Colpi</span>
                        </div>
                        <div class="flex items-center justify-between p-4 bg-black/20 rounded-lg">
                            <span>Tecnologia</span>
                            <span class="font-bold">Telefono Criptato</span>
                        </div>
                        <div class="flex items-center justify-between p-4 bg-black/20 rounded-lg">
                            <span>Veicolo</span>
                            <span class="font-bold">Auto Rubata</span>
                        </div>
                        <div class="flex items-center justify-between p-4 bg-black/20 rounded-lg">
                            <span>Extra</span>
                            <span class="font-bold">Kit Scasso Base</span>
                        </div>
                    </div>
                </div>
            </div>

            
            <div class="glass-effect rounded-xl p-8 hover:transform hover:scale-105 transition-all duration-300">
                <div class="space-y-6">
                    <h3 class="text-3xl font-bold text-center mb-6">La Legge</h3>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between p-4 bg-black/20 rounded-lg">
                            <span>Stipendio Base</span>
                            <span class="font-bold">$5,000/settimana</span>
                        </div>
                        <div class="flex items-center justify-between p-4 bg-black/20 rounded-lg">
                            <span>Capitale Iniziale</span>
                            <span class="font-bold">Pistola</span>
                        </div>
                        <div class="flex items-center justify-between p-4 bg-black/20 rounded-lg">
                            <span>Tecnologia</span>
                            <span class="font-bold">Radio + Tablet</span>
                        </div>
                        <div class="flex items-center justify-between p-4 bg-black/20 rounded-lg">
                            <span>Veicolo</span>
                            <span class="font-bold">Auto Pattuglia</span>
                        </div>
                        <div class="flex items-center justify-between p-4 bg-black/20 rounded-lg">
                            <span>Extra</span>
                            <span class="font-bold">Uniforme Completa</span>
                        </div>
                    </div>
                </div>
            </div>

          
            <div class="glass-effect rounded-xl p-8 hover:transform hover:scale-105 transition-all duration-300">
                <div class="space-y-6">
                    <h3 class="text-3xl font-bold text-center mb-6">Gli Affari</h3>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between p-4 bg-black/20 rounded-lg">
                            <span>Capitale Iniziale</span>
                            <span class="font-bold">$250,000</span>
                        </div>
                        <div class="flex items-center justify-between p-4 bg-black/20 rounded-lg">
                            <span>Ufficio</span>
                            <span class="font-bold">Location Premium</span>
                        </div>
                        <div class="flex items-center justify-between p-4 bg-black/20 rounded-lg">
                            <span>Tecnologia</span>
                            <span class="font-bold">Laptop + Smartphone</span>
                        </div>
                        <div class="flex items-center justify-between p-4 bg-black/20 rounded-lg">
                            <span>Veicolo</span>
                            <span class="font-bold">Auto Executive</span>
                        </div>
                        <div class="flex items-center justify-between p-4 bg-black/20 rounded-lg">
                            <span>Extra</span>
                            <span class="font-bold">Licenze Business</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="max-w-7xl mx-auto px-4 mt-16">
            <div class="glass-effect rounded-xl p-8 border border-white/10">
                <div class="flex items-center space-x-4 mb-4">
                    <span class="text-2xl font-bold text-white">📌 NOTA BENE</span>
                </div>
                <div class="space-y-4 text-gray-300">
                    <p class="text-lg">
                        La scelta del ruolo iniziale non è permanente! In VirtusRP hai la libertà di evolvere il tuo personaggio:
                    </p>
                    <ul class="list-disc pl-6 space-y-2">
                        <li>Da criminale puoi redimermi e unirti alle Forze dell'Ordine</li>
                        <li>Da poliziotto puoi corrompere il tuo distintivo e passare alla malavita</li>
                        <li>Da imprenditore puoi scegliere se mantenere un business pulito o sporco</li>
                    </ul>
                    <p class="text-lg mt-4">
                        La tua storia evolve in base alle tue scelte. Ogni transizione richiederà roleplay appropriato e convincente.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="min-h-screen text-white py-20 px-4 relative">
    <div class="max-w-7xl mx-auto">
        <div class="text-center mb-20">
            <div class="inline-block glass-effect rounded-2xl p-10 border border-white/10 shadow-2xl transform hover:scale-105 transition-all duration-300">
                <h1 class="text-6xl md:text-8xl font-extrabold mb-6 text-white bg-clip-text">
                    FAQ
                </h1>
                <p class="text-2xl text-gray-300">Domande Frequenti</p>
            </div>
        </div>

        <div class="grid md:grid-cols-2 gap-8">
            <div class="glass-effect rounded-xl p-8 hover:transform hover:scale-105 transition-all duration-300">
                <h3 class="text-2xl font-bold mb-4">Come iniziare a giocare?</h3>
                <p class="text-gray-300">È semplicissimo! Scarica FiveM, unisciti al nostro Discord per restare aggiornato, e connettiti direttamente al server usando l'IP: play.virtusrp.it</p>
            </div>

            <div class="glass-effect rounded-xl p-8 hover:transform hover:scale-105 transition-all duration-300">
                <h3 class="text-2xl font-bold mb-4">Quali sono i requisiti?</h3>
                <p class="text-gray-300">Ti serve solo FiveM installato, un microfono funzionante e voglia di divertirti! Il server è aperto a tutti, senza processi di approvazione.</p>
            </div>

            <div class="glass-effect rounded-xl p-8 hover:transform hover:scale-105 transition-all duration-300">
                <h3 class="text-2xl font-bold mb-4">Come funziona l'economia?</h3>
                <p class="text-gray-300">L'economia è dinamica e player-driven. Inizierai con un capitale base che varia in base al ruolo scelto. Puoi guadagnare attraverso lavori legali, business, investimenti o attività illegali.</p>
            </div>

            <div class="glass-effect rounded-xl p-8 hover:transform hover:scale-105 transition-all duration-300">
                <h3 class="text-2xl font-bold mb-4">Posso cambiare ruolo?</h3>
                <p class="text-gray-300">Assolutamente sì! Il tuo personaggio può evolvere liberamente. Passa da criminale a poliziotto o viceversa, esplora diversi percorsi di carriera e crea la tua storia unica.</p>
            </div>

            <div class="glass-effect rounded-xl p-8 hover:transform hover:scale-105 transition-all duration-300">
                <h3 class="text-2xl font-bold mb-4">Ci sono eventi speciali?</h3>
                <p class="text-gray-300">Organizziamo regolarmente eventi settimanali con storyline uniche, ricompense esclusive e opportunità di roleplay speciali per tutti i giocatori.</p>
            </div>

            <div class="glass-effect rounded-xl p-8 hover:transform hover:scale-105 transition-all duration-300">
                <h3 class="text-2xl font-bold mb-4">Come funziona il supporto?</h3>
                <p class="text-gray-300">Il nostro team di supporto è disponibile dalle 10:00 alle 24:00 su Discord. Siamo sempre pronti ad aiutarti per qualsiasi necessità!</p>
            </div>
        </div>

        <div class="mt-16 text-center">
            <p class="text-xl text-gray-300 mb-6">Hai altre domande?</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="https://discord.gg/virtusrp" target="_blank" class="px-8 py-4 bg-white text-gray-900 rounded-lg font-bold hover:bg-gray-200 transition duration-300 transform hover:scale-105">
                    Unisciti al Discord
                </a>
                <button onclick="copyIP()" class="px-8 py-4 border-2 border-white text-white rounded-lg font-bold hover:bg-white hover:text-gray-900 transition duration-300 transform hover:scale-105">
                    Copia IP Server
                </button>
            </div>
        </div>
    </div>
</div>



<footer class="relative z-10 text-white py-16 glass-effect mt-20">
    <div class="max-w-7xl mx-auto px-4">
       
        <div class="grid md:grid-cols-4 gap-8 mb-12">
       
            <div class="space-y-6">
                <img src="images/VirtusRP.gif" alt="VirtusRP Logo" class="h-40 hover:scale-105 transition-all duration-300">
                <p class="text-gray-300">La più immersiva esperienza di Roleplay italiana. Unisciti a noi e scrivi la tua storia.</p>
                <div class="flex space-x-4">
                    <a href="https://discord.gg/virtusrp" target="_blank" 
                       class="p-2 bg-white/10 rounded-lg hover:bg-white/20 transition-all duration-300">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
                        </svg>
                    </a>
                </div>
            </div>

          
            <div class="space-y-4">
                <h4 class="text-xl font-bold">Links Rapidi</h4>
                <ul class="space-y-2">
                    <li>
                        <a href="#" class="text-gray-300 hover:text-white transition-colors flex items-center space-x-2">
                            <span>→</span>
                            <span>Home</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="text-gray-300 hover:text-white transition-colors flex items-center space-x-2">
                            <span>→</span>
                            <span>Chi Siamo</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="text-gray-300 hover:text-white transition-colors flex items-center space-x-2">
                            <span>→</span>
                            <span>Negozio</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="text-gray-300 hover:text-white transition-colors flex items-center space-x-2">
                            <span>→</span>
                            <span>Regolamento</span>
                        </a>
                    </li>
                </ul>
            </div>

           
            <div class="space-y-4">
                <h4 class="text-xl font-bold">Supporto</h4>
                <ul class="space-y-2">
                    <li>
                        <a href="#" class="text-gray-300 hover:text-white transition-colors flex items-center space-x-2">
                            <span>→</span>
                            <span>FAQ</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="text-gray-300 hover:text-white transition-colors flex items-center space-x-2">
                            <span>→</span>
                            <span>Ticket Support</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="text-gray-300 hover:text-white transition-colors flex items-center space-x-2">
                            <span>→</span>
                            <span>Bug Report</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="text-gray-300 hover:text-white transition-colors flex items-center space-x-2">
                            <span>→</span>
                            <span>Donazioni</span>
                        </a>
                    </li>
                </ul>
            </div>

        
            <div class="space-y-4">
                <h4 class="text-xl font-bold">Contattaci</h4>
                <ul class="space-y-2">
                    <li class="flex items-center space-x-2 text-gray-300">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                        </svg>
                        <span>support@virtusrp.it</span>
                    </li>
                    <li class="flex items-center space-x-2 text-gray-300">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
                        </svg>
                        <span>discord.gg/virtusrp</span>
                    </li>
                    <li class="flex items-center space-x-2 text-gray-300">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
                        </svg>
                        <span>Staff Online: 10:00 - 24:00</span>
                    </li>
                </ul>
            </div>
        </div>

    
        <div class="border-t border-white/10 pt-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <p class="text-sm text-gray-400">© 2024 VirtusRP. Tutti i diritti riservati.</p>
                <div class="flex items-center space-x-2 mt-4 md:mt-0">
                    <span class="text-sm text-gray-400">Sviluppato con ❤️ da</span>
                    <a href="https://vladua.netlify.app" target="_blank" 
                       class="text-sm text-white hover:text-gray-300 transition-colors flex items-center space-x-2">
                        <span>Vlad.dev</span>
                    </a>
                </div>
                <div class="flex space-x-6 mt-4 md:mt-0">
                    <a href="#" class="text-sm text-gray-400 hover:text-white transition-colors">Privacy Policy</a>
                    <a href="#" class="text-sm text-gray-400 hover:text-white transition-colors">Termini di Servizio</a>
                    <a href="#" class="text-sm text-gray-400 hover:text-white transition-colors">Cookie Policy</a>
                </div>
            </div>
        </div>
    </div>
</footer>
