Premium
0
12
Obsidian Markets
Trading Platform
Download Codebase
Commercial License<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Obsidian Markets - Trading Platform</title>
<meta name="description" content="Obsidian Markets is a polished Tailwind CSS trading platform template for Forex, stocks, indices, metals, and online brokerage services." />
<meta name="keywords" content="Obsidian Markets, Tailwind CSS template, HTML website template, trading platform template, broker landing page, Forex dashboard, responsive fintech design" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@700;800;900&display=swap');
body { font-family: 'Inter', sans-serif; }
h1, h2, h3, .font-heading { font-family: 'Outfit', sans-serif; }
.floating {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.glow-obsidian {
box-shadow: 0 0 50px rgba(31, 41, 55, 0.2);
}
.gradient-text {
background: linear-gradient(to right, #1f2937, #6348E0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body class="bg-[#FDFDFF] overflow-x-hidden text-[#1A1A1A]">
<!-- block:start navigation -->
<nav class="fixed top-0 left-0 w-full z-50 px-4 md:px-8 py-4">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<!-- Logo -->
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-gradient-to-tr from-slate-900 to-indigo-700 rounded-lg flex items-center justify-center">
<i class="fa-solid fa-gem text-white text-sm"></i>
</div>
<span class="font-bold text-xl tracking-tight font-heading">Obsidian Markets</span>
</div>
<!-- Desktop Links -->
<div class="hidden lg:flex items-center gap-1 bg-white shadow-sm border border-gray-100 rounded-full px-2 py-1">
<button class="px-5 py-2 text-sm font-medium hover:text-indigo-600 flex items-center gap-1">Trading <i class="fa-solid fa-chevron-down text-[10px]"></i></button>
<button class="px-5 py-2 text-sm font-medium hover:text-indigo-600 flex items-center gap-1">Platforms <i class="fa-solid fa-chevron-down text-[10px]"></i></button>
<button class="px-5 py-2 text-sm font-medium hover:text-indigo-600 flex items-center gap-1">Tools & Education <i class="fa-solid fa-chevron-down text-[10px]"></i></button>
<button class="px-5 py-2 text-sm font-medium hover:text-indigo-600 flex items-center gap-1">About Us <i class="fa-solid fa-chevron-down text-[10px]"></i></button>
<button class="px-5 py-2 text-sm font-medium hover:text-indigo-600">Partners</button>
</div>
<!-- Auth -->
<div class="flex items-center gap-3">
<a href="#" class="hidden sm:block px-6 py-2 text-sm font-semibold hover:text-indigo-600 transition">Log in</a>
<a href="#" class="px-6 py-2.5 bg-slate-900 text-white text-sm font-semibold rounded-xl hover:bg-slate-800 transition shadow-lg shadow-gray-200">Sign up</a>
</div>
</div>
</nav>
<!-- block:end navigation -->
<!-- block:start hero -->
<section id="hero" class="relative w-full min-h-screen flex flex-col items-center justify-center pt-32 px-4 text-center overflow-hidden">
<!-- Floating background assets -->
<div class="absolute inset-0 z-0 pointer-events-none">
<div class="absolute top-[20%] left-[10%] floating" style="animation-delay: 0s;">
<img class="w-16 h-16 object-contain opacity-40 md:opacity-100" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_e9a282d953_d57796d97f6de574.png" alt="gold bitcoin coin, 3d render, high quality, shiny" />
</div>
<div class="absolute top-[30%] right-[15%] floating" style="animation-delay: 1s;">
<img class="w-20 h-20 object-contain opacity-40 md:opacity-100" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_dafcdb1365_a682861868c182e7.png" alt="green ethereum coin, 3d render, floating, holographic" />
</div>
<div class="absolute bottom-[25%] left-[15%] floating" style="animation-delay: 2s;">
<img class="w-24 h-24 object-contain opacity-40 md:opacity-100" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_ed7af34e52_b0c3fe3b4f6974dc.png" alt="3d render of purple crypto token with bnb logo, floating" />
</div>
<div class="absolute bottom-[30%] right-[10%] floating" style="animation-delay: 1.5s;">
<img class="w-28 h-28 object-contain opacity-40 md:opacity-100" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_dffa1dced3_456d545ba5522656.png" alt="floating glass ethereum symbol, blue and purple tints, 3d render" />
</div>
<!-- Particle effects/Glow -->
<div class="absolute inset-0 bg-[radial-gradient(circle_at_center,_rgba(99,72,224,0.05)_0%,_transparent_70%)]"></div>
</div>
<!-- Content -->
<div class="relative z-10 max-w-4xl mx-auto flex flex-col items-center">
<div class="bg-indigo-50 text-indigo-600 px-4 py-1.5 rounded-full text-xs font-bold tracking-tight mb-8 flex items-center gap-2 border border-indigo-100">
<i class="fa-solid fa-bolt-lightning text-[10px]"></i> Premium Multi-Asset Trading
</div>
<h1 class="text-5xl md:text-8xl font-bold tracking-tight text-slate-900 leading-[1.0] mb-6">
Trade globally with <br class="hidden md:block" /> <span class="gradient-text">Obsidian broker</span>
</h1>
<p class="text-gray-500 text-lg md:text-xl max-w-2xl mb-10 leading-relaxed font-medium">
Institutional-grade liquidity and execution for Forex, Stocks, Indices, and Metals.
</p>
<div class="flex flex-col sm:flex-row items-center gap-8 mb-20">
<button class="px-10 py-4 bg-slate-900 text-white font-bold rounded-2xl hover:bg-slate-800 transition shadow-xl shadow-gray-200">
Invest Now
</button>
<div class="flex items-center gap-3 text-left">
<div class="text-3xl font-bold text-slate-900 leading-none">12+</div>
<div class="text-xs text-gray-400 font-bold uppercase tracking-widest leading-tight">years of<br />reliability</div>
</div>
</div>
<!-- Scroll Indicator -->
<div class="flex flex-col items-center gap-2 text-gray-300">
<span class="text-[10px] font-bold uppercase tracking-[0.3em]">Scroll To Explore</span>
<i class="fa-solid fa-arrow-down text-sm animate-bounce mt-2"></i>
</div>
</div>
</section>
<!-- block:end hero -->
<!-- block:start steps -->
<section id="steps" class="w-full px-4 md:px-8 py-24 bg-white">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<!-- Left Illustration -->
<div class="relative">
<div class="bg-gradient-to-br from-slate-900 to-indigo-900 rounded-[2.5rem] p-8 md:p-12 aspect-square flex items-center justify-center overflow-hidden">
<!-- Simulated App Interface -->
<div class="w-full max-w-md bg-white/10 backdrop-blur-xl border border-white/20 rounded-3xl p-6 shadow-2xl relative">
<div class="flex justify-between items-center mb-8">
<div class="bg-white/20 px-4 py-2 rounded-full text-white text-xs font-medium flex items-center gap-2">
<i class="fa-solid fa-coins"></i> Choose market
</div>
</div>
<!-- Stock Cards -->
<div class="space-y-4">
<div class="bg-white rounded-2xl p-4 flex items-center justify-between shadow-sm">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600 font-bold">G</div>
<div>
<div class="text-sm font-bold text-slate-900">GOOGL</div>
<div class="text-[10px] text-gray-400">Alphabet Co.</div>
</div>
</div>
<div class="text-right">
<div class="text-sm font-bold text-slate-900">$2,351</div>
<div class="text-[10px] text-green-500 font-bold">+0.81%</div>
</div>
</div>
<div class="bg-white rounded-2xl p-4 flex items-center justify-between shadow-sm scale-105 transform translate-x-2 border-2 border-indigo-500">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600 font-bold">O</div>
<div>
<div class="text-sm font-bold text-slate-900">OBSD</div>
<div class="text-[10px] text-gray-400">Obsidian Tech.</div>
</div>
</div>
<div class="text-right">
<div class="text-sm font-bold text-slate-900">$842</div>
<div class="text-[10px] text-indigo-500 font-bold">+2.45%</div>
</div>
</div>
<div class="bg-white rounded-2xl p-4 flex items-center justify-between shadow-sm">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gray-50 rounded-xl flex items-center justify-center text-slate-900 font-bold">A</div>
<div>
<div class="text-sm font-bold text-slate-900">AAPL</div>
<div class="text-[10px] text-gray-400">Apple Inc.</div>
</div>
</div>
<div class="text-right">
<div class="text-sm font-bold text-slate-900">$174</div>
<div class="text-[10px] text-green-500 font-bold">+0.12%</div>
</div>
</div>
</div>
</div>
<!-- Abstract background shapes -->
<div class="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full blur-3xl"></div>
<div class="absolute -bottom-10 -left-10 w-40 h-40 bg-white/10 rounded-full blur-3xl"></div>
</div>
</div>
<!-- Right Content -->
<div class="flex flex-col justify-center">
<span class="text-sm font-bold text-gray-400 mb-8 tracking-widest uppercase">Start Investing</span>
<div class="space-y-12">
<div class="group opacity-30 hover:opacity-100 transition duration-300">
<h3 class="text-5xl font-bold text-slate-900 mb-4 transition">01. Registration</h3>
<div class="h-1 w-0 bg-slate-900 group-hover:w-24 transition-all duration-300"></div>
</div>
<div class="group opacity-30 hover:opacity-100 transition duration-300">
<h3 class="text-5xl font-bold text-slate-900 mb-4 transition">02. Verification</h3>
<div class="h-1 w-0 bg-slate-900 group-hover:w-24 transition-all duration-300"></div>
</div>
<div class="group opacity-100">
<h3 class="text-6xl font-bold text-slate-900 mb-6">03. Start trading</h3>
<div class="h-1.5 w-32 bg-indigo-600 mb-10"></div>
<div class="max-w-xs mb-10">
<h4 class="font-bold text-lg text-slate-900 mb-2">1 platform for everything.</h4>
<p class="text-sm text-gray-400">Trade across 13 global currencies with zero fees on initial deposits.</p>
</div>
<div class="flex flex-wrap items-center gap-6">
<button class="px-8 py-3.5 bg-slate-900 text-white font-bold rounded-xl hover:bg-slate-800 transition">
Explore Platforms
</button>
<button class="flex items-center gap-3 text-sm font-bold group">
<div class="w-10 h-10 rounded-full bg-indigo-50 flex items-center justify-center text-indigo-600 group-hover:bg-indigo-100 transition">
<i class="fa-solid fa-play text-xs ml-1"></i>
</div>
Watch Guide
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end steps -->
<!-- block:start information -->
<section id="info" class="w-full px-4 md:px-8 py-24 bg-gray-50 overflow-hidden">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-20">
<h2 class="text-4xl md:text-6xl font-bold text-slate-900 mb-6">Institutional grade execution</h2>
<p class="text-gray-500 max-w-2xl mx-auto">Our infrastructure is built for speed, transparency, and reliability, giving you the obsidian edge in the markets.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-10 rounded-[2.5rem] shadow-sm hover:shadow-xl transition-shadow border border-gray-100">
<div class="w-14 h-14 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 mb-8">
<i class="fa-solid fa-bolt text-2xl"></i>
</div>
<h4 class="text-2xl font-bold text-slate-900 mb-4">Fast Execution</h4>
<p class="text-gray-500 leading-relaxed">Ultra-low latency connectivity to top-tier liquidity providers ensures your orders are filled instantly.</p>
</div>
<div class="bg-white p-10 rounded-[2.5rem] shadow-sm hover:shadow-xl transition-shadow border border-gray-100">
<div class="w-14 h-14 bg-slate-50 rounded-2xl flex items-center justify-center text-slate-900 mb-8">
<i class="fa-solid fa-shield-halved text-2xl"></i>
</div>
<h4 class="text-2xl font-bold text-slate-900 mb-4">Secure Assets</h4>
<p class="text-gray-500 leading-relaxed">Client funds are kept in segregated accounts with leading international banks, providing maximum security.</p>
</div>
<div class="bg-white p-10 rounded-[2.5rem] shadow-sm hover:shadow-xl transition-shadow border border-gray-100">
<div class="w-14 h-14 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 mb-8">
<i class="fa-solid fa-chart-line text-2xl"></i>
</div>
<h4 class="text-2xl font-bold text-slate-900 mb-4">Deep Liquidity</h4>
<p class="text-gray-500 leading-relaxed">Access to institutional-grade depth of market with competitive spreads starting from 0.0 pips.</p>
</div>
</div>
</div>
</section>
<!-- block:end information -->
<!-- block:start reviews -->
<section id="reviews" class="w-full px-4 md:px-8 py-24 bg-white">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center gap-16">
<div class="w-full md:w-1/3">
<h2 class="text-5xl font-bold text-slate-900 mb-6">Trusted by professionals</h2>
<p class="text-gray-500 mb-8">See why thousands of traders choose Obsidian Markets for their daily operations.</p>
<div class="flex items-center gap-4">
<div class="flex -space-x-3">
<img class="w-10 h-10 rounded-full border-2 border-white" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" />
<img class="w-10 h-10 rounded-full border-2 border-white" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg" />
<img class="w-10 h-10 rounded-full border-2 border-white" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" />
</div>
<div class="text-sm font-bold text-slate-900">4.9/5 on Trustpilot</div>
</div>
</div>
<div class="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-6">
<div class="bg-gray-50 p-8 rounded-3xl">
<div class="flex gap-1 text-indigo-600 mb-4">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
</div>
<p class="text-slate-900 font-medium mb-6">"Execution speed is unparalleled. I've used many brokers, but Obsidian's latency is consistently the lowest."</p>
<div class="flex items-center gap-3">
<div class="text-sm font-bold">Alex Rivera</div>
<div class="text-xs text-gray-400">Day Trader</div>
</div>
</div>
<div class="bg-gray-50 p-8 rounded-3xl mt-4 sm:mt-12">
<div class="flex gap-1 text-indigo-600 mb-4">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
</div>
<p class="text-slate-900 font-medium mb-6">"The mobile app is surprisingly powerful. I can manage my portfolio easily on the go without missing any tools."</p>
<div class="flex items-center gap-3">
<div class="text-sm font-bold">Sarah Chen</div>
<div class="text-xs text-gray-400">Portfolio Manager</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end reviews -->
<!-- block:start pricing -->
<section id="pricing" class="w-full px-4 md:px-8 py-24 bg-slate-900 text-white rounded-[4rem] mx-4 md:mx-0">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-6xl font-bold mb-6">Trading Account Types</h2>
<p class="text-gray-400">Transparent pricing models tailored to your trading style.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<!-- Standard -->
<div class="bg-white/5 border border-white/10 rounded-[2.5rem] p-10 hover:bg-white/10 transition">
<h3 class="text-2xl font-bold mb-2">Standard</h3>
<p class="text-gray-400 text-sm mb-8">Ideal for retail traders</p>
<div class="mb-8">
<span class="text-4xl font-bold">0.0</span>
<span class="text-gray-400 font-bold uppercase text-xs tracking-widest ml-1">Pips Spread</span>
</div>
<ul class="space-y-4 mb-10 text-sm text-gray-300">
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-green-400"></i> No Commission</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-green-400"></i> Minimum Deposit $100</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-green-400"></i> Leverage up to 1:500</li>
</ul>
<button class="w-full py-4 bg-white text-slate-900 font-bold rounded-2xl hover:bg-gray-100 transition">Open Standard</button>
</div>
<!-- Raw -->
<div class="bg-indigo-600 rounded-[2.5rem] p-10 shadow-2xl shadow-indigo-900/40 relative overflow-hidden group">
<div class="absolute top-6 right-6 bg-white/20 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest">Most Popular</div>
<h3 class="text-2xl font-bold mb-2">Raw Spread</h3>
<p class="text-indigo-100 text-sm mb-8">For high-frequency traders</p>
<div class="mb-8">
<span class="text-4xl font-bold">0.0</span>
<span class="text-indigo-200 font-bold uppercase text-xs tracking-widest ml-1">Pips Spread</span>
</div>
<ul class="space-y-4 mb-10 text-sm text-indigo-100">
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-white"></i> $3.50 Commission</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-white"></i> Institutional Execution</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-white"></i> API Access Included</li>
</ul>
<button class="w-full py-4 bg-slate-900 text-white font-bold rounded-2xl hover:bg-slate-800 transition">Open Raw Account</button>
<!-- Decorative SVG -->
<div class="absolute -bottom-10 -right-10 opacity-20 group-hover:scale-110 transition duration-500">
<i class="fa-solid fa-gem text-9xl"></i>
</div>
</div>
</div>
</div>
</section>
<!-- block:end pricing -->
<!-- block:start contact -->
<section id="contact" class="w-full px-4 md:px-8 py-24 bg-gray-50 overflow-hidden">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
<!-- Left Side: Form -->
<div class="bg-white p-8 md:p-12 rounded-[2.5rem] shadow-xl shadow-gray-100 border border-gray-100">
<h2 class="text-4xl font-bold text-slate-900 mb-2">Get in touch</h2>
<p class="text-gray-500 mb-8">Our team of experts is ready to help you navigate the obsidian markets.</p>
<form class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-2">
<label class="text-xs font-bold uppercase tracking-widest text-slate-400">Full Name</label>
<input type="text" placeholder="John Doe" class="w-full px-6 py-4 bg-gray-50 border-none rounded-2xl focus:ring-2 focus:ring-indigo-600 transition outline-none">
</div>
<div class="space-y-2">
<label class="text-xs font-bold uppercase tracking-widest text-slate-400">Email Address</label>
<input type="email" placeholder="john@example.com" class="w-full px-6 py-4 bg-gray-50 border-none rounded-2xl focus:ring-2 focus:ring-indigo-600 transition outline-none">
</div>
</div>
<div class="space-y-2">
<label class="text-xs font-bold uppercase tracking-widest text-slate-400">Subject</label>
<select class="w-full px-6 py-4 bg-gray-50 border-none rounded-2xl focus:ring-2 focus:ring-indigo-600 transition outline-none appearance-none">
<option>Account Opening</option>
<option>Technical Support</option>
<option>Partnership Inquiry</option>
<option>Other</option>
</select>
</div>
<div class="space-y-2">
<label class="text-xs font-bold uppercase tracking-widest text-slate-400">Message</label>
<textarea rows="4" placeholder="How can we help you?" class="w-full px-6 py-4 bg-gray-50 border-none rounded-2xl focus:ring-2 focus:ring-indigo-600 transition outline-none"></textarea>
</div>
<button class="w-full py-4 bg-slate-900 text-white font-bold rounded-2xl hover:bg-slate-800 transition shadow-lg shadow-gray-200">
Send Message
</button>
</form>
</div>
<!-- Right Side: Info -->
<div class="lg:pt-12">
<div class="space-y-12">
<div>
<h3 class="text-2xl font-bold text-slate-900 mb-6">Our global presence</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
<div class="space-y-2">
<div class="text-indigo-600 font-bold">London, UK</div>
<p class="text-sm text-gray-500 leading-relaxed">Level 24, The Shard<br>32 London Bridge St<br>SE1 9SG, United Kingdom</p>
</div>
<div class="space-y-2">
<div class="text-indigo-600 font-bold">Dubai, UAE</div>
<p class="text-sm text-gray-500 leading-relaxed">Emirates Financial Towers<br>DIFC, Level 15, South Tower<br>Dubai, United Arab Emirates</p>
</div>
</div>
</div>
<div>
<h3 class="text-2xl font-bold text-slate-900 mb-6">Direct support</h3>
<div class="space-y-4">
<div class="flex items-center gap-4 group">
<div class="w-12 h-12 rounded-2xl bg-indigo-50 flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition">
<i class="fa-solid fa-phone"></i>
</div>
<div>
<div class="text-xs font-bold text-slate-400 uppercase tracking-widest">Call us</div>
<div class="text-slate-900 font-bold">+44 20 3808 5000</div>
</div>
</div>
<div class="flex items-center gap-4 group">
<div class="w-12 h-12 rounded-2xl bg-indigo-50 flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition">
<i class="fa-solid fa-envelope"></i>
</div>
<div>
<div class="text-xs font-bold text-slate-400 uppercase tracking-widest">Email us</div>
<div class="text-slate-900 font-bold">support@obsidianmarkets.com</div>
</div>
</div>
</div>
</div>
<div class="p-8 bg-indigo-600 rounded-[2rem] text-white overflow-hidden relative group">
<div class="relative z-10">
<h4 class="text-xl font-bold mb-2">Live 24/7 Support</h4>
<p class="text-indigo-100 text-sm mb-6">Connect with our support team instantly via live chat.</p>
<button class="px-6 py-3 bg-white text-indigo-600 font-bold rounded-xl hover:bg-gray-50 transition">
Start Live Chat
</button>
</div>
<div class="absolute -bottom-10 -right-10 opacity-10 group-hover:scale-110 transition duration-500">
<i class="fa-solid fa-headset text-9xl"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end contact -->
<!-- block:start footer -->
<footer id="footer" class="bg-white pt-32 pb-12 px-4 md:px-8">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-12 mb-20">
<div class="col-span-2">
<div class="flex items-center gap-2 mb-6">
<div class="w-8 h-8 bg-slate-900 rounded-lg flex items-center justify-center text-white">
<i class="fa-solid fa-gem text-xs"></i>
</div>
<span class="font-bold text-xl font-heading">Obsidian Markets</span>
</div>
<p class="text-gray-400 text-sm max-w-xs mb-6">Premier trading infrastructure for modern investors. Regulated and trusted worldwide.</p>
<div class="flex gap-4">
<a href="#" class="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center text-gray-400 hover:text-indigo-600 transition"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center text-gray-400 hover:text-indigo-600 transition"><i class="fa-brands fa-linkedin"></i></a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center text-gray-400 hover:text-indigo-600 transition"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
<div>
<h6 class="font-bold text-slate-900 mb-6 uppercase text-[10px] tracking-widest">Markets</h6>
<ul class="space-y-4 text-sm text-gray-500">
<li><a href="#" class="hover:text-indigo-600">Forex Pairs</a></li>
<li><a href="#" class="hover:text-indigo-600">Global Stocks</a></li>
<li><a href="#" class="hover:text-indigo-600">Indices</a></li>
<li><a href="#" class="hover:text-indigo-600">Commodities</a></li>
</ul>
</div>
<div>
<h6 class="font-bold text-slate-900 mb-6 uppercase text-[10px] tracking-widest">Platforms</h6>
<ul class="space-y-4 text-sm text-gray-500">
<li><a href="#" class="hover:text-indigo-600">MetaTrader 4</a></li>
<li><a href="#" class="hover:text-indigo-600">MetaTrader 5</a></li>
<li><a href="#" class="hover:text-indigo-600">Obsidian Pro App</a></li>
<li><a href="#" class="hover:text-indigo-600">Web Dashboard</a></li>
</ul>
</div>
<div>
<h6 class="font-bold text-slate-900 mb-6 uppercase text-[10px] tracking-widest">Support</h6>
<ul class="space-y-4 text-sm text-gray-500">
<li><a href="#" class="hover:text-indigo-600">Contact Desk</a></li>
<li><a href="#" class="hover:text-indigo-600">Knowledge Base</a></li>
<li><a href="#" class="hover:text-indigo-600">Legal Docs</a></li>
</ul>
</div>
<div>
<h6 class="font-bold text-slate-900 mb-6 uppercase text-[10px] tracking-widest">Company</h6>
<ul class="space-y-4 text-sm text-gray-500">
<li><a href="#" class="hover:text-indigo-600">Our Story</a></li>
<li><a href="#" class="hover:text-indigo-600">Careers</a></li>
</ul>
</div>
</div>
<div class="pt-8 border-t border-gray-100 flex flex-col md:flex-row justify-between items-center gap-6">
<p class="text-xs text-gray-400">© 2024 Obsidian Markets. All rights reserved.</p>
<div class="flex gap-6 text-[10px] font-bold text-gray-300 uppercase tracking-widest">
<span>Terms</span>
<span>Security</span>
<span>Risk Warning</span>
</div>
</div>
</div>
</footer>
<!-- block:end footer -->
</body>
</html>
Unlimited access to all templates
Unlock our entire library of premium UI kits, dashboards, and landing pages with a single yearly payment.
€60
per year
Get Unlimited Access
