<!DOCTYPE html>
<html lang="en">
  

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="shortcut icon" type="image/png" href="./imagem/newcolor_nofound.png">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <script defer src="script.js"></script>
  <title>ColdGG</title>
</head>

<body>

  <nav class="navbar">
    <div class="nav-container">
      <div class="logo">
        <img src="./imagem/newcolor_nofound.png" alt="Logo"> <!-- COLOQUE A LOGO DEPOIS DO IMAGEM/...... -->
      </div>

      <ul class="nav-links">
        <li><a href="#inicio">Inicio</a></li>        <!-- #INICIO = ID -->
        <li><a href="#produtos">Serviços</a></li>    <!-- #PRODUTOS = ID -->
        <li><a href="#sobre">Sobre</a></li>          <!-- #SOBRE = ID -->
      </ul>

      <div class="nav-buttons">
        <a href="https://discord.gg/coldgg" class="get-started">Contato →</a> <!-- LINK DISCORD COLOQUE NO LUGAR DO # -->
      </div>
    </div>
  </nav>

  <!-- Navbar Fixa no Mobile -->
  <div class="top-navbar">
    <a href="#inicio" class="nav-item active">
      <i class="fas fa-home"></i>
      <span>Inicio</span>
    </a>
    <a href="#produtos" class="nav-item">
      <i class="fas fa-box"></i>
      <span>Serviços</span>
    </a>
    <a href="#sobre" class="nav-item">
      <i class="fas fa-info-circle"></i>
      <span>Sobre</span>
    </a>
    <a href="https://discord.gg/coldgg" class="nav-item">  <!-- LINK DISCORD COLOQUE NO LUGAR DO # -->
      <i class="fas fa-comment-dots"></i>
      <span>Contato</span>
    </a>
  </div>



  <section class="hero" id="inicio">
    <canvas id="background"></canvas>
    <div class="hero-content">
        <h1>Maior loja de dumps do FiveM</h1>
        <p>Desde 2022 fazendos os melhores dumps.</p>
        <a href="#" class="magic-button">Produtos</a>  <!-- LINK PARA A PÁGINA DA LOJA COLOQUE NO LUGAR DO # -->

        <!-- Ícones e informações abaixo do botão -->
        <div class="info-container">
            <div class="info-item">
                <i class="fas fa-sync-alt"></i>
                <span>Entrega automática</span>
            </div>
            <div class="info-item">
                <i class="fas fa-shield-alt"></i>
                <span>100% Seguro</span>
            </div>
            <div class="info-item">
                <i class="fas fa-headset"></i>
                <span>Suporte 24/7</span>
            </div>
        </div>
    </div>

    <!-- Seta animada -->
    <div class="scroll-arrow">
        <i class="fas fa-chevron-down"></i>
    </div>
  </section>



  <button id="scrollTopBtn"><i class="fas fa-chevron-up"></i></button>


  <!-- <section class="technologies">
      <h2>CIDADES QUE <span class="marcas">CONFIAM</span> NA COLDGG</h2>
      <div class="technologies-container">
        <div class="tech">
          <img src="./imagem/newcolor_nofound.png" alt="Marca 1"> 
        </div>
        <div class="tech">
          <img src="./imagem/newcolor_nofound.png" alt="Marca 2"> 
        </div>       
        <div class="tech">
          <img src="./imagem/newcolor_nofound.png" alt="Marca 6"> 
        </div>  
        <div class="tech">
          <img src="./imagem/newcolor_nofound.png" alt="Marca 4">
        </div>
        <div class="tech">
          <img src="./imagem/newcolor_nofound.png" alt="Marca 4"> 
        </div>
      </div>
  </section> -->



  <section class="product-section">
    <div class="product-header">
      <p class="section-subtitle">— FAQ</p>
      <h2 class="section-title">Perguntas Frequentes</h2>
      <!-- <p class="section-description">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet dolore saepe sed? Quisquam debitis soluta facere qui deleniti. Aperiam.
      </p> -->                         <!-- DESCOMENTE PARA ADICIONAR UMA DESCRIÇÃO -->
    </div>

    <div class="product-content">
      <div class="product-image">
        <img src="./imagem/teste.gif" alt="Imagem do Produto"> <!-- COLOQUE A LOGO DEPOIS DO IMAGEM/...... -->
      </div>

      <div class="product-info-boxes">
        <div class="info-box">
          <h3>A compra será anônima?</h3>
          <p>Sim, todas as compras realizadas na ColdGG são completamente anônimas. Não solicitamos informações pessoais durante o processo de compra, garantindo total privacidade para os nossos clientes.</p>
        </div>

        <div class="info-box">
          <h3>Ao adquirir, onde vou receber meu produto?</h3>
          <p>Você irá receber no seu endereço de e-mail fornecido no momento da compra.</p>
        </div>

        <div class="info-box">
          <h3>O dump que eu quero não tem aqui, onde posso conseguir?</h3>
          <p>Você pode encomendar dumps de qualquer servidor no Discord da ColdGG.</p>
        </div>
      </div>
    </div>

    <div class="product-stats">
      <div class="stat">
        <h2>+800</h2>
        <p>Clientes satisfeitos</p>
      </div>
      <div class="stat">
        <h2>+2500</h2>
        <p>Vendas realizadas</p>
      </div>
      <!-- <div class="stat">
        <h2>2500</h2>
        <p>Dumps realizados</p>
      </div> -->
    </div>
  </section>

  <section class="differential-header">
    <div class="reveal">
      <p class="subtitle">→ COMO COMPRAR</p>
      <h1>Como comprar na ColdGG</h1>
      <!-- <p class="description">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque in nulla esse perferendis, totam deserunt doloribus obcaecati eligendi sint autem maxime nesciunt numquam.
      </p> -->
      <div class="differential-container">
        <!-- Card 1 -->
        <div class="differential-card">
          <div class="icon-diferencial">
            <!-- Ícone de engrenagem -->
            <i class="fa-solid fa-cart-shopping"></i>
          </div>
          <h3>Escolha um dump</h3>
          <p>
            Escolha o dump da cidade que você deseja
          </p>
        </div>

        <!-- Card 2 -->
        <div class="differential-card">
          <div class="icon-diferencial">
            <!-- Ícone de foguete -->
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="white">
              <path
                d="M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1zm0 20a9 9 0 1 1 9-9 9 9 0 0 1-9 9zm.5-9.67V6.5a.5.5 0 0 0-1 0v5a.49.49 0 0 0 .15.35l3.29 3.3a.5.5 0 0 0 .71-.71z" />
            </svg>
          </div>
          <h3>Realize o pagamento</h3>
          <p>
            Escolha o seu método de pagamento preferido e finalize a compra
          </p>
        </div>

        <!-- Card 3 -->
        <div class="differential-card">
          <div class="icon-diferencial">
            <!-- Ícone de pessoa -->
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
              stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
              <circle cx="12" cy="7" r="4"></circle>
            </svg>
          </div>
          <h3>Receba seu produto</h3>
          <p>
            Receba o dump no seu e-mail instantaneamente
          </p>
        </div>
      </div>
    </div>
  </section>



  <header class="solutions-header" id="produtos">
    <div class="reveal">
      <p class="subtitle">→ NOSSOS SERVIÇOS</p>
      <h1>Veja nossos serviços</h1>
      <!-- <p class="description">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita totam dolorem sunt qui, eaque quis consectetur ex maxime ullam. Quas sit iure.
      </p> COMENTE PARA REMOVER A DESCRIÇÃO -->
      <div class="animate">
        <div class="solutions-container">
          <!-- Categoria 1: Veiculos -->
          <div class="solution-card">
            <div class="icon-container">
              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="white">
                <path d="M5 11h14l-1.5-4.5c-.3-.9-1.2-1.5-2.1-1.5H8.6c-.9 0-1.8.6-2.1 1.5L5 11zm15 1H4c-.6 0-1 .4-1 1v1.5c0 .8.7 1.5 1.5 1.5S6 15.8 6 15V14h12v1c0 .8.7 1.5 1.5 1.5S21 15.8 21 15V14c0-.6-.4-1-1-1zm-3 4c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
              </svg>              
            </div>
            <h3>Personalização completa de Veículos!</h3>
            <!-- <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto molestias aspernatur culpa necessitatibus est soluta libero non itaque omnis unde amet, recusandae officia blanditiis ex perferendis eum a, iure qui.
            </p> -->
          </div>

          <!-- Categoria 2: Separação -->
          <div class="solution-card">
            <div class="icon-container">
              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="white">
                <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM7 19H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm4 8H9v-2h2v2zm0-4H9v-2h2v2zm0-4H9V9h2v2zm4 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V9h2v2zm4 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V9h2v2z"/>
              </svg>              
            </div>
            <h3>Separação de roupas, mapas e veículos</h3>
            <!-- <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores quo vel voluptates temporibus, officia voluptas tempora ad velit deleniti fugiat velit deleniti fugiat.
            </p> -->
          </div>

          <!-- Categoria 3: Mapas FiveM -->
          <div class="solution-card">
            <div class="icon-container">
              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="white">
                <path d="M20.5 3l-6.1 2.7L9 3 3.5 5.2V21l6.1-2.7 5.4 2.7L20.5 19V3zm-11.5 15l-4 1.8V6.6l4-1.8v13.2zm6-1.5l-4-2V4.3l4 2v10.2zm5 1.5l-4 1.8V7.6l4-1.8v12.2z"/>
              </svg>              
            </div>
            <h3>Fazemos tudo que você precisa em seus mapas</h3>
            <!-- <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius modi voluptatum necessitatibus illum ab harum enim cumque aut debitis sunt explicabo maxime rem eos quae inventore laborum, culpa eum ipsa.
            </p> -->
          </div>

          <!-- Categoria 4: Dumps -->
          <div class="solution-card">
            <div class="icon-container">
              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="white">
                <path d="M4 3h10l6 6v10.9c0 .6-.4 1.1-1 1.1H5c-.6 0-1-.5-1-1.1V4c0-.6.5-1 1-1zm11 7h4l-4-4v4zm-9-2v2h8V8H6zm0 4v6h12v-6H6z"/>
              </svg>              
            </div>
            <h3>Dumps</h3>
            <!-- <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quo atque modi ad ea sit id laborum quos odio. Maxime inventore reprehenderit facere praesentium at.
            </p> -->
          </div>
        </div>
      </div>
    </div>
  </header>

  <section class="about-header" id="sobre">
    <div class="reveal">
      <p class="subtitle">→ CONHEÇA MAIS SOBRE A COLDGG</p>
      <h1>Sobre Nós</h1>
      <div class="about-content">
        <div class="about-main">
          <p class="badge">ColdGG</p>
          <h2 class="highlight-title">Saiba Mais Sobre a ColdGG</h2>
          <p class="description">
            Desde 2022, somos a maior loja de Dumps do FiveM. Atualmente, além de dumps, oferecemos também mapas e carros personalizados para melhorar sua experiência no FiveM!
          </p>
        </div>
        <!-- <div class="about-cards">
          <div class="about-card">
            <p class="badge-design">Sobre 1</p>
            <h3 class="highlight-title">Your Tittle Here</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam modi ex eaque suscipit voluptate, eos iste dolores, explicabo minima, esse asperiores? Consequuntur error repellendus cum quo neque, aliquid impedit ducimus.
            </p>
          </div>
          <div class="about-card">
            <p class="badge-development">Sobre 2</p>
            <h3 class="highlight-title">Your Tittle Here</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam modi ex eaque suscipit voluptate, eos iste dolores, explicabo minima, esse asperiores? Consequuntur error repellendus cum quo neque, aliquid impedit ducimus.
            </p>
          </div> -->
        </div>
      </div>
    </div>
  </section>

  <footer class="custom-footer">
    <div class="custom-footer-container">
        <!-- Contatos -->
        <div class="footer-box">
            <p class="footer-title">Contatos da ColdGG</p>
            <div class="footer-social-icons">
                <!-- <a href="#"><i class="fab fa-tiktok"></i></a>  -->
                <!-- <a href="#"><i class="fab fa-instagram"></i></a> -->
                 <a href="https://discord.gg/coldgg"><i class="fab fa-discord"></i></a>
                <a href="https://www.youtube.com/@grupocold"><i class="fab fa-youtube"></i></a>
                <!-- <a href="#"><i class="fab fa-facebook"></i></a> -->
            </div>
        </div>

        <!-- Discord -->
        <div class="footer-box">
            <div class="footer-discord-content">
                <div class="footer-discord-text">
                    <p class="footer-title">Entre em nosso Discord</p>
                    <a href="https://discord.gg/coldgg" class="footer-discord-link"> <!-- LINK DISCORD -->
                        <span>discord.gg/coldgg</span>
                    </a>
                </div>
                <div class="footer-qr-container">
                    <img src="./imagem/frame.png" alt="QR Code do Discord" class="footer-qr-code">
                </div>
            </div>
        </div>
    </div>

    <!-- Links do Rodapé -->
    <div class="footer-navigation">
        <a href="#inicio">Início <i class="fas fa-external-link-alt"></i></a>
        <a href="#produtos">Produtos <i class="fas fa-external-link-alt"></i></a>
    </div>

    <!-- Direitos Autorais -->
    <p class="footer-copyright">&copy; 2022-2025 ColdGG.</p>
  </footer>






  <!-- NAVBAR ROLL PC --> <!-- NÃO MEXER SE NAO SOUBER OQ ESTA FAZENDO -->
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      document.querySelectorAll(".nav-links a").forEach(anchor => {
        anchor.addEventListener("click", function (e) {
          const href = this.getAttribute("href");
          if (href.startsWith("#")) {
            e.preventDefault();
            const targetId = href.substring(1);
            const targetSection = document.getElementById(targetId);

            if (targetSection) {
              smoothScrollTo(targetSection.offsetTop - 50, 1000);
            }
          }
        });
      });

      function smoothScrollTo(targetPosition, duration) {
        const startPosition = window.scrollY;
        const distance = targetPosition - startPosition;
        let startTime = null;

        function animationScroll(currentTime) {
          if (startTime === null) startTime = currentTime;
          const timeElapsed = currentTime - startTime;
          const progress = Math.min(timeElapsed / duration, 1);

          window.scrollTo(0, startPosition + distance * easeOutCubic(progress));

          if (timeElapsed < duration) {
            requestAnimationFrame(animationScroll);
          }
        }

        function easeOutCubic(t) {
          return 1 - Math.pow(1 - t, 3);
        }

        requestAnimationFrame(animationScroll);
      }
    });
  </script>


  <!-- NAVBAR MOBILE --> <!-- NÃO MEXER SE NAO SOUBER OQ ESTA FAZENDO -->
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const navItems = document.querySelectorAll(".nav-item");

      navItems.forEach(item => {
        item.addEventListener("click", function () {
          navItems.forEach(nav => nav.classList.remove("active"));
          this.classList.add("active");
        });
      });
    });
  </script>



</body>

</html>