All Prompts
All Prompts

footersectionresponsivenavigationsocialtailwindlayout
Multi-Column Website Footer with Social Links
Многоколоночный футер сайта с ссылками на соцсети. Адаптивный дизайн, навигация, контакты. Идеален для современных веб-приложений.
Prompt
<footer class="z-10 bg-[#030304] border-white/5 border-t pt-16 pb-12 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
<div class="col-span-1 lg:col-span-1">
<div class="flex items-center gap-2 mb-4">
<div class="w-6 h-6 flex items-center justify-center rounded bg-amber-500 text-black">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-4 h-4 stroke-[2.5]"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
</div>
<h4 class="text-sm font-medium text-white">World Championship of Wealth</h4>
</div>
<p class="leading-relaxed text-xs text-slate-500 mb-6">A leaderboard showcasing multi-asset performance across Cryptos, Options, Stocks, and Yield — the COSY standard.
Disclaimer: Not investment advice. Past performance is not indicative of future results.</p>
<div class="flex gap-4">
<a href="#" class="text-slate-500 transition-colors hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="twitter" class="lucide lucide-twitter w-4 h-4"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" class=""></path></svg></a>
<a href="#" class="text-slate-500 transition-colors hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="linkedin" class="lucide lucide-linkedin w-4 h-4"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" class=""></path><rect width="4" height="12" x="2" y="9" class=""></rect><circle cx="4" cy="4" r="2" class=""></circle></svg></a>
<a href="#" class="text-slate-500 transition-colors hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="github" class="lucide lucide-github w-4 h-4"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" class=""></path><path d="M9 18c-4.51 2-5-2-7-2" class=""></path></svg></a>
</div>
</div>
<div class="">
<h4 class="text-sm font-medium mb-4 text-white">Explore</h4>
<ul class="text-xs space-y-2 text-slate-400">
<li class="">Dashboard</li>
<li class="">Leaderboard</li>
<li class="">Methodology
</li>
</ul>
</div>
<div class="">
<h4 class="text-sm font-medium mb-4 text-white">Company</h4>
<ul class="space-y-2 text-xs text-slate-400">
<li class="">About</li>
<li class=""><a href="#" class="transition-colors hover:text-white">FAQ</a></li>
<li class=""></li>
</ul>
</div>
<div class="">
<h4 class="font-medium text-sm mb-4 text-white">Contact</h4>
<div class="space-y-3">
<div class="flex items-center gap-2 text-xs text-slate-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="message-circle" class="lucide lucide-message-circle w-3 h-3"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" class=""></path></svg>
<span class="">WhatsApp: (815) 8-WEALTH</span>
</div>
<div class="flex items-center gap-2 text-xs text-slate-400">
<span class="">Presented by Wealth Management System Inc.</span>
</div>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row items-center justify-between pt-8 border-t text-[10px] border-white/5 text-slate-600">
<p class="">© 2026 Spiking Performance Inc. All rights reserved.</p>
<div class="flex gap-4 mt-4 md:mt-0">
<a href="#" class="hover:text-slate-400">Privacy Policy</a>
<a href="#" class="hover:text-slate-400">Terms of Service</a>
</div>
</div>
</div>
</footer>