<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Roda Certa</title>
  <link rel="stylesheet" href="style.css">
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .page-wrapper {
      display: flex;
      flex: 1;
    }

    .sidebar {
      width: 240px;
      background-color: #1e1e1e;
      color: white;
      padding: 20px;
      height: 100vh;
      position: fixed;
      overflow-y: auto;
    }

    .logo-container {
      text-align: center;
      margin-bottom: 20px;
    }

    .logo-container img {
      width: 100%;
      max-width: 160px;
      height: auto;
      border-radius: 8px;
      object-fit: contain;
    }

    .sidebar h2 {
      text-align: center;
      margin-bottom: 20px;
    }

    .sidebar ul {
      list-style: none;
      padding: 0;
    }

    .sidebar ul li {
      margin-bottom: 15px;
    }

    .sidebar ul li a {
      color: white;
      text-decoration: none;
      font-size: 16px;
    }

    .sidebar ul li a:hover {
      text-decoration: underline;
    }

    .main-content {
      margin-left: 260px;
      padding: 30px;
      flex: 1;
    }

    section {
      margin-bottom: 50px;
      background-color: white;
      padding: 20px;
      border-radius: 8px;
    }

    section h2 {
      color: #333;
    }

    button {
      background-color: #ff6600;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
    }

    button:hover {
      background-color: #e65c00;
    }

    .redes-sociais {
      display: flex;
      gap: 15px;
      margin-top: 20px;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }

    .redes-sociais a {
      text-decoration: none;
    }

    .icone-circular {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;
      background-color: #fff;
      box-shadow: 0 0 8px rgba(0,0,0,0.1);
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform 0.2s ease;
      position: relative;
    }

    .icone-circular img {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 80px;
      height: 80px;
      transform: translate(-50%, -50%);
      object-fit: cover;
      display: block;
    }

    .redes-sociais a:hover .icone-circular {
      transform: scale(1.1);
    }

    footer {
      text-align: center;
      font-size: 14px;
      color: #888;
      padding: 20px;
      background-color: #f9f9f9;
    }

    footer a {
      color: #888;
      text-decoration: none;
    }

    footer a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <div class="page-wrapper">
    <div class="sidebar">
      <div class="logo-container">
        <img src="logo.png" alt="Logo Roda Certa">
      </div>
      <h2>Roda Certa</h2>
      <ul>
        <li><a href="home.php">🏠 Home</a></li>
        <li><a href="servicos.php">🛠️ Serviços</a></li>
        <li><a href="projetos.php">📐 Projetos</a></li>
        <li><a href="quem-somos.php">👨‍🔧 Quem Somos</a></li>
        <li><a href="depoimentos.php">💬 Depoimentos</a></li>
        <li><a href="galeria.php">🖼️ Galeria</a></li>
        <li><a href="contato.php">📞 Contato</a></li>
      </ul>
    </div>

    <div class="main-content">
      <section>
        <h1>Bem-vindo à Roda Certa</h1>
        <p>Especialistas em recuperação e personalização de rodas automotivas.</p>
        <button>Solicite um Orçamento, entre em contato no botão abaixo!</button>
        <div class="redes-sociais">
          <a href="https://wa.me/11943781196" target="_blank">
            <div class="icone-circular">
              <img src="https://media1.giphy.com/media/DRinNvjCXc5Iexx0CH/giphy.gif" alt="WhatsApp">
            </div>
          </a>
          <a href="https://instagram.com/seuusuario" target="_blank">
            <div class="icone-circular">
              <img src="https://media3.giphy.com/media/YwNCU8P5jGMNKGG5Bq/giphy.gif" alt="Instagram">
            </div>
          </a>
          <a href="https://www.facebook.com/isaque.santos.505322" target="_blank">
            <div class="icone-circular">
              <img src="https://media4.giphy.com/media/9FbLcp4NnluxdR6EyZ/giphy.gif" alt="Facebook">
            </div>
          </a>
        </div>
      </section>
    </div>
  </div>

  <footer>
    <p>© Todos os direitos reservados — Roda Certa</p>
    <p>Desenvolvido por <a href="https://wa.me/43988642229" target="_blank">Du Boxe TV</a></p>
  </footer>
</body>
</html>