fondias/criptofonzi-brasil
0
1<!DOCTYPE html>2<html lang="pt-BR">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>CriptoFonzi Brasil - Seu Blog de Criptomoedas com Estilo</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>12 <style>13 @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700&display=swap');14 body {15 font-family: 'Sora', sans-serif;16 }17 .gradient-text {18 background-clip: text;19 -webkit-background-clip: text;20 color: transparent;21 background-image: linear-gradient(90deg, #3b82f6, #8b5cf6);22 }23 .post-card:hover {24 transform: translateY(-5px);25 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);26 }27 </style>28</head>29<body class="bg-gray-50 text-gray-800">30 <!-- Vanta.js Background -->31 <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>32 33 <!-- Header -->34 <header class="relative z-10 bg-white/80 backdrop-blur-md shadow-sm">35 <div class="container mx-auto px-4 py-6">36 <div class="flex justify-between items-center">37 <div class="flex items-center space-x-2">38 <i data-feather="dollar-sign" class="text-purple-600"></i>39 <h1 class="text-2xl font-bold gradient-text">CriptoFonzi Brasil</h1>40 </div>41 <nav class="hidden md:flex space-x-8">42 <a href="#" class="font-medium hover:text-purple-600 transition">Início</a>43 <a href="#" class="font-medium hover:text-purple-600 transition">Criptomoedas</a>44 <a href="#" class="font-medium hover:text-purple-600 transition">Blockchain</a>45 <a href="#" class="font-medium hover:text-purple-600 transition">NFTs</a>46 <a href="#" class="font-medium hover:text-purple-600 transition">Tutoriais</a>47 </nav>48 <button class="md:hidden">49 <i data-feather="menu"></i>50 </button>51 </div>52 </div>53 </header>54 55 <!-- Hero Section -->56 <section class="relative z-10 py-20">57 <div class="container mx-auto px-4 text-center">58 <h1 class="text-4xl md:text-6xl font-bold mb-6">Descubra o Mundo das <span class="gradient-text">Criptomoedas</span></h1>59 <p class="text-xl md:text-2xl text-gray-600 mb-10 max-w-3xl mx-auto">Tudo sobre Bitcoin, Ethereum e o ecossistema cripto, traduzido e adaptado para o público brasileiro.</p>60 <div class="flex flex-col sm:flex-row justify-center gap-4">61 <button class="bg-purple-600 hover:bg-purple-700 text-white px-8 py-3 rounded-lg font-medium transition shadow-lg">Comece a Aprender</button>62 <button class="bg-white hover:bg-gray-100 text-gray-800 px-8 py-3 rounded-lg font-medium transition shadow">Últimos Artigos</button>63 </div>64 </div>65 </section>66 67 <!-- Featured Posts -->68 <section class="relative z-10 py-16 bg-white/80 backdrop-blur-sm">69 <div class="container mx-auto px-4">70 <h2 class="text-3xl font-bold mb-12 text-center">Artigos em Destaque</h2>71 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">72 <!-- Post 1 -->73 <div class="bg-white rounded-xl overflow-hidden shadow-lg post-card transition duration-300">74 <img src="http://static.photos/technology/640x360/1" alt="Bitcoin" class="w-full h-48 object-cover">75 <div class="p-6">76 <div class="flex items-center mb-2">77 <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Bitcoin</span>78 <span class="text-gray-500 text-sm ml-auto">2 dias atrás</span>79 </div>80 <h3 class="text-xl font-bold mb-3">O Que é Bitcoin e Como Funciona?</h3>81 <p class="text-gray-600 mb-4">Um guia completo para iniciantes entenderem a primeira criptomoeda do mundo.</p>82 <a href="#" class="text-purple-600 font-medium flex items-center">83 Ler mais <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>84 </a>85 </div>86 </div>87 88 <!-- Post 2 -->89 <div class="bg-white rounded-xl overflow-hidden shadow-lg post-card transition duration-300">90 <img src="http://static.photos/finance/640x360/2" alt="Ethereum" class="w-full h-48 object-cover">91 <div class="p-6">92 <div class="flex items-center mb-2">93 <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Ethereum</span>94 <span class="text-gray-500 text-sm ml-auto">5 dias atrás</span>95 </div>96 <h3 class="text-xl font-bold mb-3">O Merge do Ethereum Explicado</h3>97 <p class="text-gray-600 mb-4">Entenda a transição do Ethereum para proof-of-stake e o que isso significa.</p>98 <a href="#" class="text-purple-600 font-medium flex items-center">99 Ler mais <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>100 </a>101 </div>102 </div>103 104 <!-- Post 3 -->105 <div class="bg-white rounded-xl overflow-hidden shadow-lg post-card transition duration-300">106 <img src="http://static.photos/abstract/640x360/3" alt="NFT" class="w-full h-48 object-cover">107 <div class="p-6">108 <div class="flex items-center mb-2">109 <span class="bg-pink-100 text-pink-800 text-xs px-3 py-1 rounded-full">NFTs</span>110 <span class="text-gray-500 text-sm ml-auto">1 semana atrás</span>111 </div>112 <h3 class="text-xl font-bold mb-3">NFTs: O Guia Definitivo para Iniciantes</h3>113 <p class="text-gray-600 mb-4">Tudo o que você precisa saber sobre tokens não-fungíveis e como começar.</p>114 <a href="#" class="text-purple-600 font-medium flex items-center">115 Ler mais <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>116 </a>117 </div>118 </div>119 </div>120 </div>121 </section>122 123 <!-- Newsletter -->124 <section class="relative z-10 py-16 bg-gradient-to-r from-blue-500 to-purple-600 text-white">125 <div class="container mx-auto px-4 text-center">126 <h2 class="text-3xl font-bold mb-4">Receba Atualizações no Seu E-mail</h2>127 <p class="text-lg mb-8 max-w-2xl mx-auto">Inscreva-se para receber os melhores conteúdos sobre criptomoedas diretamente na sua caixa de entrada.</p>128 <div class="max-w-md mx-auto flex">129 <input type="email" placeholder="Seu melhor e-mail" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800">130 <button class="bg-blue-800 hover:bg-blue-900 px-6 py-3 rounded-r-lg font-medium transition">Inscrever</button>131 </div>132 </div>133 </section>134 135 <!-- Categories -->136 <section class="relative z-10 py-16 bg-white/80 backdrop-blur-sm">137 <div class="container mx-auto px-4">138 <h2 class="text-3xl font-bold mb-12 text-center">Explore Nossas Categorias</h2>139 <div class="grid grid-cols-2 md:grid-cols-4 gap-6">140 <a href="#" class="bg-gray-100 hover:bg-gray-200 rounded-xl p-6 text-center transition">141 <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">142 <i data-feather="bitcoin" class="text-blue-600 w-8 h-8"></i>143 </div>144 <h3 class="font-bold">Bitcoin</h3>145 </a>146 <a href="#" class="bg-gray-100 hover:bg-gray-200 rounded-xl p-6 text-center transition">147 <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">148 <i data-feather="cpu" class="text-purple-600 w-8 h-8"></i>149 </div>150 <h3 class="font-bold">Ethereum</h3>151 </a>152 <a href="#" class="bg-gray-100 hover:bg-gray-200 rounded-xl p-6 text-center transition">153 <div class="bg-pink-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">154 <i data-feather="image" class="text-pink-600 w-8 h-8"></i>155 </div>156 <h3 class="font-bold">NFTs</h3>157 </a>158 <a href="#" class="bg-gray-100 hover:bg-gray-200 rounded-xl p-6 text-center transition">159 <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">160 <i data-feather="lock" class="text-green-600 w-8 h-8"></i>161 </div>162 <h3 class="font-bold">Segurança</h3>163 </a>164 </div>165 </div>166 </section>167 168 <!-- Footer -->169 <footer class="relative z-10 bg-gray-900 text-white py-12">170 <div class="container mx-auto px-4">171 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">172 <div>173 <h3 class="text-xl font-bold mb-4 flex items-center">174 <i data-feather="dollar-sign" class="mr-2"></i> CriptoFonzi Brasil175 </h3>176 <p class="text-gray-400">O melhor conteúdo sobre criptomoedas em português, com estilo e qualidade.</p>177 </div>178 <div>179 <h4 class="font-bold mb-4">Links Rápidos</h4>180 <ul class="space-y-2">181 <li><a href="#" class="text-gray-400 hover:text-white transition">Início</a></li>182 <li><a href="#" class="text-gray-400 hover:text-white transition">Sobre Nós</a></li>183 <li><a href="#" class="text-gray-400 hover:text-white transition">Artigos</a></li>184 <li><a href="#" class="text-gray-400 hover:text-white transition">Contato</a></li>185 </ul>186 </div>187 <div>188 <h4 class="font-bold mb-4">Categorias</h4>189 <ul class="space-y-2">190 <li><a href="#" class="text-gray-400 hover:text-white transition">Bitcoin</a></li>191 <li><a href="#" class="text-gray-400 hover:text-white transition">Ethereum</a></li>192 <li><a href="#" class="text-gray-400 hover:text-white transition">NFTs</a></li>193 <li><a href="#" class="text-gray-400 hover:text-white transition">DeFi</a></li>194 </ul>195 </div>196 <div>197 <h4 class="font-bold mb-4">Redes Sociais</h4>198 <div class="flex space-x-4">199 <a href="#" class="text-gray-400 hover:text-white transition">200 <i data-feather="twitter"></i>201 </a>202 <a href="#" class="text-gray-400 hover:text-white transition">203 <i data-feather="instagram"></i>204 </a>205 <a href="#" class="text-gray-400 hover:text-white transition">206 <i data-feather="facebook"></i>207 </a>208 <a href="#" class="text-gray-400 hover:text-white transition">209 <i data-feather="linkedin"></i>210 </a>211 </div>212 </div>213 </div>214 <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">215 <p>© 2023 CriptoFonzi Brasil. Todos os direitos reservados.</p>216 </div>217 </div>218 </footer>219 220 <script>221 // Initialize Vanta.js222 VANTA.NET({223 el: "#vanta-bg",224 mouseControls: true,225 touchControls: true,226 gyroControls: false,227 minHeight: 200.00,228 minWidth: 200.00,229 scale: 1.00,230 scaleMobile: 1.00,231 color: 0x8b5cf6,232 backgroundColor: 0xf8fafc,233 points: 12.00,234 maxDistance: 22.00,235 spacing: 18.00236 });237 238 // Initialize Feather Icons239 feather.replace();240 </script>241</body>242</html>243