Hugging Face's logo

Spaces:
Xacodavt
/
entre-em-contato
Running

App Files Community
entre-em-contato
File size: 6,753 Bytes 
db992e4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contato - Slime War</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
    
    body {
      font-family: 'Poppins', sans-serif;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      min-height: 100vh;
    }
    
    .slime-shape {
      position: absolute;
      width: 300px;
      height: 300px;
      background: linear-gradient(45deg, #4ade80, #3b82f6);
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      filter: blur(60px);
      opacity: 0.15;
      z-index: -1;
      animation: morph 8s ease-in-out infinite;
    }
    
    .contact-card {
      backdrop-filter: blur(16px);
      background: rgba(15, 23, 42, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .gradient-text {
      background: linear-gradient(45deg, #4ade80, #3b82f6);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    
    .gradient-btn {
      background: linear-gradient(45deg, #4ade80, #3b82f6);
      transition: all 0.3s ease;
    }
    
    .gradient-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    }
    
    @keyframes morph {
      0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
      50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
      100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    }
    
    .social-icon {
      transition: all 0.3s ease;
    }
    
    .social-icon:hover {
      transform: translateY(-5px) scale(1.1);
    }
  </style>
</head>
<body class="text-gray-200">
  <div class="slime-shape top-[-50px] left-[-50px]"></div>
  <div class="slime-shape bottom-[-50px] right-[-50px]"></div>
  
  <div class="container mx-auto px-4 py-12 max-w-4xl">
    <div class="flex justify-between items-center mb-12">
      <h1 class="text-4xl font-bold">
        <span class="gradient-text">Slime War</span>
      </h1>
      <a href="index_adsense_consent.html" class="gradient-btn text-white px-6 py-2 rounded-full font-medium flex items-center">
        <i class="fas fa-arrow-left mr-2"></i> Voltar
      </a>
    </div>
    
    <div class="contact-card rounded-2xl p-8 shadow-xl mb-12">
      <h2 class="text-3xl font-bold mb-6 gradient-text">Entre em Contato</h2>
      <p class="text-lg mb-8">Tem dúvidas, sugestões ou quer se conectar com a equipe do Slime War? Estamos sempre felizes em ouvir de você!</p>
      
      <div class="grid md:grid-cols-2 gap-8">
        <div>
          <div class="flex items-start mb-6">
            <div class="bg-indigo-500 bg-opacity-20 p-3 rounded-full mr-4">
              <i class="fas fa-envelope text-indigo-400 text-xl"></i>
            </div>
            <div>
              <h3 class="font-semibold text-lg">Email</h3>
              <a href="mailto:[email protected]" class="text-blue-400 hover:text-blue-300 transition">[email protected]</a>
            </div>
          </div>
          
          <div class="flex items-start mb-6">
            <div class="bg-green-500 bg-opacity-20 p-3 rounded-full mr-4">
              <i class="fas fa-headset text-green-400 text-xl"></i>
            </div>
            <div>
              <h3 class="font-semibold text-lg">Suporte</h3>
              <p class="text-gray-400">24/7 via ticket system</p>
            </div>
          </div>
        </div>
        
        <div>
          <div class="flex items-start mb-6">
            <div class="bg-purple-500 bg-opacity-20 p-3 rounded-full mr-4">
              <i class="fas fa-map-marker-alt text-purple-400 text-xl"></i>
            </div>
            <div>
              <h3 class="font-semibold text-lg">Localização</h3>
              <p class="text-gray-400">São Paulo, Brasil</p>
            </div>
          </div>
          
          <div class="flex items-start">
            <div class="bg-pink-500 bg-opacity-20 p-3 rounded-full mr-4">
              <i class="fas fa-clock text-pink-400 text-xl"></i>
            </div>
            <div>
              <h3 class="font-semibold text-lg">Horário</h3>
              <p class="text-gray-400">Seg-Sex: 9h-18h</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="contact-card rounded-2xl p-8 shadow-xl">
      <h2 class="text-3xl font-bold mb-6 gradient-text">Redes Sociais</h2>
      <p class="text-lg mb-8">Siga-nos para ficar por dentro das últimas novidades e atualizações!</p>
      
      <div class="flex flex-wrap gap-4">
        <a href="#" class="social-icon bg-blue-600 hover:bg-blue-500 w-14 h-14 rounded-full flex items-center justify-center">
          <i class="fab fa-facebook-f text-xl"></i>
        </a>
        <a href="#" class="social-icon bg-pink-600 hover:bg-pink-500 w-14 h-14 rounded-full flex items-center justify-center">
          <i class="fab fa-instagram text-xl"></i>
        </a>
        <a href="#" class="social-icon bg-blue-400 hover:bg-blue-300 w-14 h-14 rounded-full flex items-center justify-center">
          <i class="fab fa-twitter text-xl"></i>
        </a>
        <a href="#" class="social-icon bg-red-600 hover:bg-red-500 w-14 h-14 rounded-full flex items-center justify-center">
          <i class="fab fa-youtube text-xl"></i>
        </a>
        <a href="#" class="social-icon bg-gray-800 hover:bg-gray-700 w-14 h-14 rounded-full flex items-center justify-center">
          <i class="fab fa-github text-xl"></i>
        </a>
        <a href="#" class="social-icon bg-green-500 hover:bg-green-400 w-14 h-14 rounded-full flex items-center justify-center">
          <i class="fab fa-whatsapp text-xl"></i>
        </a>
      </div>
    </div>
  </div>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Xacodavt/entre-em-contato" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>