Free
0
42
IgnitionLab
IgnitionLab is a high-octane SaaS template for machine learning infrastructure, neural core products, and cloud-scale innovation teams.
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>IgnitionLab | Tailwind CSS Machine Learning Infrastructure Template</title>
<meta name="description" content="IgnitionLab is a high-octane Tailwind CSS SaaS template for machine learning infrastructure, neural core products, and cloud-scale innovation teams.">
<meta name="keywords" content="IgnitionLab, Tailwind CSS template, HTML website template, SaaS landing page, machine learning infrastructure, neural core, responsive business design">
<meta name="author" content="Let's templates">
<link rel="canonical" href="">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Let's templates">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="">
<meta property="og:title" content="IgnitionLab | Tailwind CSS Machine Learning Infrastructure Template">
<meta property="og:description" content="A high-octane Tailwind CSS SaaS template for machine learning infrastructure, neural core products, and cloud-scale innovation teams.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="IgnitionLab template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="IgnitionLab | Tailwind CSS Machine Learning Infrastructure Template">
<meta name="twitter:description" content="A high-octane Tailwind CSS SaaS template for machine learning infrastructure, neural core products, and cloud-scale innovation teams.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="IgnitionLab template preview">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #ffffff;
color: #1a1a1a;
overflow-x: hidden;
}
.grid-lines {
background-image: linear-gradient(to right, #f1f5f9 1px, transparent 1px);
background-size: 10% 100%;
}
.glass-block {
backdrop-filter: blur(8px);
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.gradient-bg {
background: linear-gradient(90deg, #60a5fa 0%, #c084fc 50%, #fb923c 100%);
filter: blur(60px);
opacity: 0.8;
}
.toggle-switch {
width: 70px;
height: 36px;
background: linear-gradient(45deg, #c084fc, #fb923c);
border-radius: 20px;
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 10px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.toggle-knob {
width: 28px;
height: 28px;
background: white;
border-radius: 50%;
position: absolute;
top: 4px;
right: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.cta-button {
background: #1e293b;
color: white;
padding: 18px 36px;
border-radius: 50px;
font-weight: 700;
box-shadow: 0 20px 40px -10px rgba(30, 41, 59, 0.4);
transition: all 0.3s ease;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 25px 50px -12px rgba(30, 41, 59, 0.5);
}
.section-grid {
background-image: linear-gradient(#f1f5f9 1px, transparent 1px), linear-gradient(90deg, #f1f5f9 1px, transparent 1px);
background-size: 40px 40px;
}
.il-nav-link.is-active {
color: #0f172a;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
@media (min-width: 1024px) {
.il-nav-link.is-active {
background: transparent;
box-shadow: none;
font-weight: 700;
}
}
</style>
</head>
<body>
<!-- block:start navbar -->
<header id="header" class="fixed top-0 left-0 w-full z-50 bg-white/90 backdrop-blur-md border-b border-slate-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 py-3 lg:py-0 lg:h-20 grid grid-cols-[1fr_auto] lg:grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-3">
<a href="#hero" class="flex items-center gap-2 w-fit shrink-0 col-start-1 row-start-1">
<div class="text-[#6366f1]">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
</div>
<span class="text-lg sm:text-xl font-bold tracking-tight text-slate-800">IgnitionLab</span>
</a>
<nav class="col-span-2 lg:col-span-1 lg:col-start-2 lg:row-start-1 min-w-0 flex items-center gap-0.5 lg:gap-10 lg:justify-center bg-slate-100/90 lg:bg-transparent p-1 lg:p-0 rounded-full lg:rounded-none border border-slate-200/80 lg:border-0 text-[13px] lg:text-[15px] font-semibold lg:font-medium text-slate-500">
<a href="#hero" data-nav-link class="il-nav-link is-active flex-1 lg:flex-none text-center whitespace-nowrap py-2 lg:py-0 px-2 rounded-full hover:text-slate-900 transition-colors" aria-current="page">Home</a>
<a href="#features" data-nav-link class="il-nav-link flex-1 lg:flex-none text-center whitespace-nowrap py-2 lg:py-0 px-2 rounded-full hover:text-slate-900 transition-colors">Product</a>
<a href="#pricing" data-nav-link class="il-nav-link flex-1 lg:flex-none text-center whitespace-nowrap py-2 lg:py-0 px-2 rounded-full hover:text-slate-900 transition-colors">Pricing</a>
<a href="#contact" data-nav-link class="il-nav-link flex-1 lg:flex-none text-center whitespace-nowrap py-2 lg:py-0 px-2 rounded-full hover:text-slate-900 transition-colors">Support</a>
</nav>
<div class="flex items-center gap-2 sm:gap-4 col-start-2 row-start-1 lg:col-start-3 shrink-0">
<button class="hidden lg:flex items-center gap-2 px-3 py-1.5 rounded-full border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50">
<i class="fa-solid fa-globe"></i> EN <i class="fa-solid fa-chevron-down text-[10px]"></i>
</button>
<a href="#" class="text-sm font-bold text-slate-700 hover:text-slate-900 px-1.5 lg:px-4">Login</a>
<a href="#contact" class="bg-[#1e293b] text-white px-3.5 py-2 lg:px-6 lg:py-2.5 rounded-full text-xs lg:text-sm font-bold hover:bg-slate-800 transition-all whitespace-nowrap">Get started</a>
</div>
</div>
</header>
<!-- block:end navbar -->
<main class="relative">
<div class="relative min-h-screen grid-lines">
<!-- block:start hero -->
<section id="hero" class="relative pt-44 pb-64 px-6 z-10">
<div class="max-w-5xl mx-auto">
<h1 class="text-6xl md:text-8xl font-bold tracking-tight text-[#334155] leading-[1.05] mb-10">
Your high-octane <br />
<span class="flex items-center flex-wrap">
innovation <div class="toggle-switch"><div class="toggle-knob"></div></div> engine.
</span>
</h1>
<p class="text-xl text-slate-500 font-medium mb-12 max-w-2xl leading-relaxed">
Machine learning workflows tailored for rapid scaling <br class="hidden md:block" /> and peak operational efficiency.
</p>
<button class="cta-button">
Unleash Potential
</button>
</div>
</section>
<!-- block:end hero -->
<div class="absolute bottom-0 left-0 w-full h-[500px] overflow-hidden pointer-events-none">
<div class="absolute bottom-[-100px] left-0 w-full h-full gradient-bg"></div>
<div class="absolute bottom-0 left-0 w-full flex flex-col gap-1 p-1">
<div class="flex gap-1 justify-center translate-y-4">
<div class="glass-block w-40 h-40 opacity-20"></div>
<div class="glass-block w-40 h-40 opacity-40"></div>
<div class="glass-block w-40 h-40 opacity-10"></div>
<div class="glass-block w-40 h-40 opacity-50"></div>
<div class="glass-block w-40 h-40 opacity-20"></div>
<div class="glass-block w-40 h-40 opacity-60"></div>
<div class="glass-block w-40 h-40 opacity-10"></div>
</div>
<div class="flex gap-1 justify-center translate-y-2">
<div class="glass-block w-40 h-40"></div>
<div class="glass-block w-40 h-40 opacity-40"></div>
<div class="glass-block w-40 h-40"></div>
<div class="glass-block w-40 h-40 opacity-30"></div>
<div class="glass-block w-40 h-40"></div>
<div class="glass-block w-40 h-40 opacity-20"></div>
<div class="glass-block w-40 h-40"></div>
</div>
<div class="flex gap-1 justify-center">
<div class="glass-block w-40 h-40"></div>
<div class="glass-block w-40 h-40"></div>
<div class="glass-block w-40 h-40"></div>
<div class="glass-block w-40 h-40"></div>
<div class="glass-block w-40 h-40"></div>
<div class="glass-block w-40 h-40"></div>
<div class="glass-block w-40 h-40"></div>
<div class="glass-block w-40 h-40"></div>
</div>
<div class="flex gap-1 justify-center translate-y-[-4px]">
<div class="glass-block w-40 h-40"></div>
<div class="glass-block w-40 h-40"></div>
<div class="glass-block w-40 h-40"></div>
<div class="glass-block w-40 h-40"></div>
<div class="glass-block w-40 h-40"></div>
<div class="glass-block w-40 h-40"></div>
<div class="glass-block w-40 h-40"></div>
<div class="glass-block w-40 h-40"></div>
<div class="glass-block w-40 h-40"></div>
</div>
</div>
</div>
</div>
<div id="contents" class="relative z-20 bg-white">
<!-- block:start clients -->
<section id="clients" class="py-20 border-y border-slate-100">
<div class="max-w-7xl mx-auto px-6">
<div class="flex flex-wrap justify-between items-center gap-10 opacity-40 grayscale transition-all hover:grayscale-0">
<div class="flex items-center gap-2 font-bold text-xl"><i class="fa-solid fa-bolt"></i> ENERGY</div>
<div class="flex items-center gap-2 font-bold text-xl"><i class="fa-solid fa-shield"></i> SECURE</div>
<div class="flex items-center gap-2 font-bold text-xl"><i class="fa-solid fa-cube"></i> NEXUS</div>
<div class="flex items-center gap-2 font-bold text-xl"><i class="fa-solid fa-terminal"></i> CODE</div>
<div class="flex items-center gap-2 font-bold text-xl"><i class="fa-solid fa-dna"></i> BIOTECH</div>
</div>
</div>
</section>
<!-- block:end clients -->
<!-- block:start about -->
<section id="about" class="py-32 section-grid">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center mb-24">
<div class="space-y-8">
<div class="inline-block px-3 py-1 bg-indigo-50 rounded-full text-xs font-bold text-indigo-600 uppercase tracking-widest">Our Story</div>
<h2 class="text-4xl md:text-5xl font-bold tracking-tight text-slate-800 leading-tight">Born in the lab, raised for the cloud.</h2>
<p class="text-lg text-slate-500 leading-relaxed">IgnitionLab started as a specialized research initiative at the intersection of high-frequency trading and neural network optimization. Today, we're a global infrastructure partner for teams who refuse to compromise on velocity.</p>
<div class="flex gap-4">
<a href="#careers" class="px-8 py-3 bg-slate-900 text-white rounded-full font-bold hover:bg-slate-800 transition-all">Join the Lab</a>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="space-y-4">
<img class="w-full h-64 object-cover rounded-3xl" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_1a3492a9f5_b4eacc53e921b4ee.png" alt="modern creative workspace" />
<img class="w-full h-48 object-cover rounded-3xl" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_3068cc5c6d_d88e128c684c35ac.png" alt="team collaborating" />
</div>
<div class="space-y-4 pt-12">
<img class="w-full h-48 object-cover rounded-3xl" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_c1c9a41895_08bdc8cb647b0061.png" alt="tech lab" />
<img class="w-full h-64 object-cover rounded-3xl" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_e332dc11ba_f6fba336acc8efc6.png" alt="server infrastructure" />
</div>
</div>
</div>
</div>
</section>
<!-- block:end about -->
<!-- block:start careers -->
<section id="careers" class="py-32 bg-slate-50">
<div class="max-w-7xl mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-end gap-8 mb-16">
<div class="max-w-2xl space-y-4">
<h2 class="text-4xl font-bold tracking-tight text-slate-800">Pioneer the Future</h2>
<p class="text-slate-500">We're looking for high-octane engineers and researchers who are obsessed with removing friction from the digital world.</p>
</div>
<button class="px-8 py-3 border-2 border-slate-200 rounded-full font-bold text-slate-700 hover:bg-white transition-all">View 12 Openings</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="glass-block p-8 bg-white hover:border-indigo-100 transition-all cursor-pointer">
<div class="text-xs font-bold text-indigo-600 uppercase tracking-widest mb-4">Engineering</div>
<h4 class="text-xl font-bold mb-2">Inference Architect</h4>
<p class="text-sm text-slate-400 mb-6">Remote / Global</p>
<div class="flex items-center gap-2 text-slate-800 font-bold text-sm">Apply Now <i class="fa-solid fa-arrow-right text-[10px]"></i></div>
</div>
<div class="glass-block p-8 bg-white hover:border-indigo-100 transition-all cursor-pointer">
<div class="text-xs font-bold text-indigo-600 uppercase tracking-widest mb-4">Research</div>
<h4 class="text-xl font-bold mb-2">Neural Optimization Lead</h4>
<p class="text-sm text-slate-400 mb-6">Palo Alto, CA</p>
<div class="flex items-center gap-2 text-slate-800 font-bold text-sm">Apply Now <i class="fa-solid fa-arrow-right text-[10px]"></i></div>
</div>
<div class="glass-block p-8 bg-white hover:border-indigo-100 transition-all cursor-pointer">
<div class="text-xs font-bold text-indigo-600 uppercase tracking-widest mb-4">Design</div>
<h4 class="text-xl font-bold mb-2">Systems UX Designer</h4>
<p class="text-sm text-slate-400 mb-6">London, UK</p>
<div class="flex items-center gap-2 text-slate-800 font-bold text-sm">Apply Now <i class="fa-solid fa-arrow-right text-[10px]"></i></div>
</div>
</div>
</div>
</section>
<!-- block:end careers -->
<!-- block:start about-2 -->
<section id="info" class="py-32 section-grid">
<div class="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
<div class="space-y-8">
<div class="inline-block px-3 py-1 bg-slate-100 rounded-full text-xs font-bold text-slate-500 uppercase tracking-widest">Architectural Precision</div>
<h2 class="text-4xl md:text-5xl font-bold tracking-tight text-slate-800 leading-tight">We build the infrastructure for the next generation of digital pioneers.</h2>
<p class="text-lg text-slate-500 leading-relaxed">Our lab combines frontier machine learning with architectural precision. We don't just optimize workflows; we reinvent the velocity of your business.</p>
<div class="flex gap-4">
<button class="px-6 py-3 border border-slate-200 rounded-full font-bold text-slate-700 hover:bg-slate-50 transition-colors">Our Philosophy</button>
</div>
</div>
<div class="relative">
<div class="glass-block p-1 bg-white/50 border-white">
<img class="w-full h-[400px] object-cover rounded-lg" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_16d24e7e97_be21aa436e2547c8.png" alt="abstract high-tech laboratory with neon blue lights and clean white surfaces, minimalist scientific " />
</div>
<div class="absolute -bottom-10 -right-10 glass-block p-8 w-48 hidden md:block">
<div class="text-3xl font-black text-slate-800">10ms</div>
<div class="text-xs font-bold text-slate-400 uppercase tracking-widest mt-2">Latency Target</div>
</div>
</div>
</div>
</section>
<!-- block:end about-2 -->
<!-- block:start features -->
<section id="features" class="py-32">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-20 space-y-4">
<h2 class="text-4xl font-bold tracking-tight text-slate-800">Peak Performance Modules</h2>
<p class="text-slate-500 max-w-xl mx-auto">Pre-configured engines designed to slot directly into your existing cloud infrastructure.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="glass-block p-10 hover:border-indigo-200 transition-all group">
<div class="w-12 h-12 bg-indigo-50 text-indigo-500 rounded-xl flex items-center justify-center mb-8 group-hover:bg-indigo-500 group-hover:text-white transition-all">
<i class="fa-solid fa-microchip text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-4">Neural Core</h3>
<p class="text-slate-500 text-sm leading-relaxed">Proprietary inference engine optimized for low-latency decision making at scale.</p>
</div>
<div class="glass-block p-10 hover:border-purple-200 transition-all group">
<div class="w-12 h-12 bg-purple-50 text-purple-500 rounded-xl flex items-center justify-center mb-8 group-hover:bg-purple-500 group-hover:text-white transition-all">
<i class="fa-solid fa-bolt-lightning text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-4">Velocity Rails</h3>
<p class="text-slate-500 text-sm leading-relaxed">High-frequency data conduits that eliminate bottlenecks in your processing pipeline.</p>
</div>
<div class="glass-block p-10 hover:border-orange-200 transition-all group">
<div class="w-12 h-12 bg-orange-50 text-orange-500 rounded-xl flex items-center justify-center mb-8 group-hover:bg-orange-500 group-hover:text-white transition-all">
<i class="fa-solid fa-shield-halved text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-4">Secure Vault</h3>
<p class="text-slate-500 text-sm leading-relaxed">Zero-trust architecture ensuring that your training data remains isolated and encrypted.</p>
</div>
</div>
</div>
</section>
<!-- block:end features -->
<!-- block:start stats -->
<section id="stats" class="py-24 bg-slate-900 text-white relative overflow-hidden">
<div class="absolute inset-0 opacity-10 grid-lines"></div>
<div class="max-w-7xl mx-auto px-6 relative z-10">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-12 text-center">
<div class="space-y-2">
<div class="text-5xl font-black tracking-tighter">99.9%</div>
<div class="text-xs font-bold text-slate-400 uppercase tracking-[0.3em]">Uptime SLA</div>
</div>
<div class="space-y-2">
<div class="text-5xl font-black tracking-tighter">2.4ms</div>
<div class="text-xs font-bold text-slate-400 uppercase tracking-[0.3em]">Avg Response</div>
</div>
<div class="space-y-2">
<div class="text-5xl font-black tracking-tighter">140+</div>
<div class="text-xs font-bold text-slate-400 uppercase tracking-[0.3em]">Integrations</div>
</div>
<div class="space-y-2">
<div class="text-5xl font-black tracking-tighter">12k</div>
<div class="text-xs font-bold text-slate-400 uppercase tracking-[0.3em]">Daily Commits</div>
</div>
</div>
</div>
</section>
<!-- block:end stats -->
<!-- block:start pricing -->
<section id="pricing" class="py-32 section-grid">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-20">
<h2 class="text-4xl font-bold tracking-tight text-slate-800">Tailored Lab Plans</h2>
<p class="text-slate-500 mt-4">Scalable infrastructure that grows with your innovation velocity.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
<!-- Starter -->
<div class="glass-block p-10 bg-white flex flex-col">
<div class="mb-8">
<h4 class="text-sm font-bold text-slate-400 uppercase tracking-widest mb-2">Researcher</h4>
<div class="text-4xl font-black text-slate-800">$0<span class="text-sm font-normal text-slate-400 italic">/forever</span></div>
</div>
<ul class="space-y-4 mb-10 flex-grow text-sm text-slate-600">
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-indigo-500"></i> Single-node deployment</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-indigo-500"></i> Community support</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-indigo-500"></i> Standard latency</li>
</ul>
<button class="w-full py-4 rounded-full border border-slate-200 font-bold hover:bg-slate-50 transition-all">Start Experimenting</button>
</div>
<!-- Scale -->
<div class="glass-block p-10 bg-white border-indigo-200 shadow-2xl shadow-indigo-100 flex flex-col relative scale-105 z-10">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-indigo-600 text-white text-[10px] font-black uppercase tracking-widest px-4 py-1 rounded-full">Most Popular</div>
<div class="mb-8">
<h4 class="text-sm font-bold text-slate-400 uppercase tracking-widest mb-2">Innovation</h4>
<div class="text-4xl font-black text-slate-800">$499<span class="text-sm font-normal text-slate-400 italic">/mo</span></div>
</div>
<ul class="space-y-4 mb-10 flex-grow text-sm text-slate-600">
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-indigo-500"></i> Multi-region scaling</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-indigo-500"></i> Priority 24/7 support</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-indigo-500"></i> Ultra-low latency</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-indigo-500"></i> Custom API nodes</li>
</ul>
<button class="w-full py-4 rounded-full bg-indigo-600 text-white font-bold hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-200">Accelerate Growth</button>
</div>
<!-- Custom -->
<div class="glass-block p-10 bg-white flex flex-col">
<div class="mb-8">
<h4 class="text-sm font-bold text-slate-400 uppercase tracking-widest mb-2">Enterprise</h4>
<div class="text-4xl font-black text-slate-800">Talk to us</div>
</div>
<ul class="space-y-4 mb-10 flex-grow text-sm text-slate-600">
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-indigo-500"></i> Dedicated hardware</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-indigo-500"></i> On-premise options</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-indigo-500"></i> Custom Compliance</li>
</ul>
<button class="w-full py-4 rounded-full border border-slate-200 font-bold hover:bg-slate-50 transition-all">Contact Lab</button>
</div>
</div>
</div>
</section>
<!-- block:end pricing -->
<!-- block:start reviews -->
<section id="reviews" class="py-32">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<div class="glass-block p-12 space-y-6 italic">
<div class="flex gap-1 text-orange-400 text-xs 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-xl text-slate-600 leading-relaxed">"IgnitionLab's inference engine reduced our operational latency by 70% in less than two weeks. It's the infrastructure we've been waiting for."</p>
<div class="flex items-center gap-4 pt-4 border-t border-slate-100">
<div class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center font-bold">JD</div>
<div>
<div class="text-sm font-bold text-slate-800">James Dalton</div>
<div class="text-xs text-slate-400 font-bold uppercase tracking-widest">CTO @ NexaGrid</div>
</div>
</div>
</div>
<div class="glass-block p-12 space-y-6 italic">
<div class="flex gap-1 text-orange-400 text-xs 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-xl text-slate-600 leading-relaxed">"The transition was seamless. We slot their Neural Core into our existing stack and saw immediate velocity gains without changing a line of code."</p>
<div class="flex items-center gap-4 pt-4 border-t border-slate-100">
<div class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center font-bold">SM</div>
<div>
<div class="text-sm font-bold text-slate-800">Sarah Miller</div>
<div class="text-xs text-slate-400 font-bold uppercase tracking-widest">Lead Engineer @ VoltSystems</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end reviews -->
<!-- block:start contact -->
<section id="contact" class="py-32 bg-slate-50">
<div class="max-w-3xl mx-auto px-6 text-center space-y-12">
<div class="space-y-4">
<h2 class="text-4xl font-bold tracking-tight text-slate-800">Ready to Ignite?</h2>
<p class="text-slate-500">Connect with our engineering team to discuss your scaling requirements.</p>
</div>
<div class="glass-block p-10 bg-white">
<form class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<input type="text" placeholder="Your Name" class="w-full px-6 py-4 bg-slate-50 border-none rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none">
<input type="email" placeholder="Work Email" class="w-full px-6 py-4 bg-slate-50 border-none rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none">
</div>
<textarea placeholder="Tell us about your infrastructure goals..." rows="4" class="w-full px-6 py-4 bg-slate-50 border-none rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none"></textarea>
<button class="w-full cta-button">Submit Inquiry</button>
</form>
</div>
</div>
</section>
<!-- block:end contact -->
<!-- block:start footer -->
<footer class="py-24 border-t border-slate-100 bg-white">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-20">
<div class="space-y-6">
<div class="flex items-center gap-2">
<div class="text-[#6366f1]">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
</div>
<span class="text-xl font-bold tracking-tight text-slate-800">IgnitionLab</span>
</div>
<p class="text-slate-500 text-sm leading-relaxed">
High-octane infrastructure for the next generation of digital pioneers. Unleash your innovation potential with our neural core technology.
</p>
<div class="flex gap-4">
<a href="#" class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:bg-indigo-50 hover:text-indigo-600 transition-all"><i class="fa-brands fa-twitter"></i></a>
<a href="#" class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:bg-indigo-50 hover:text-indigo-600 transition-all"><i class="fa-brands fa-linkedin-in"></i></a>
<a href="#" class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:bg-indigo-50 hover:text-indigo-600 transition-all"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<div>
<h5 class="font-bold text-slate-800 mb-6 uppercase text-xs tracking-widest">Product</h5>
<ul class="space-y-4 text-sm text-slate-500">
<li><a href="#" class="hover:text-indigo-600 transition-colors">Neural Core</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Velocity Rails</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Secure Vault</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Pricing Plans</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Documentation</a></li>
</ul>
</div>
<div>
<h5 class="font-bold text-slate-800 mb-6 uppercase text-xs tracking-widest">Company</h5>
<ul class="space-y-4 text-sm text-slate-500">
<li><a href="#about" class="hover:text-indigo-600 transition-colors">Our Story</a></li>
<li><a href="#careers" class="hover:text-indigo-600 transition-colors">Careers</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Newsroom</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Brand Assets</a></li>
<li><a href="#contact" class="hover:text-indigo-600 transition-colors">Contact Us</a></li>
</ul>
</div>
<div>
<h5 class="font-bold text-slate-800 mb-6 uppercase text-xs tracking-widest">Resources</h5>
<ul class="space-y-4 text-sm text-slate-500">
<li><a href="#" class="hover:text-indigo-600 transition-colors">Help Center</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">API Reference</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">System Status</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Compliance</a></li>
<li><a href="#" class="hover:text-indigo-600 transition-colors">Legal</a></li>
</ul>
</div>
</div>
<div class="pt-8 border-t border-slate-100 flex flex-col md:flex-row justify-between items-center gap-4 text-xs font-bold text-slate-400 uppercase tracking-widest">
<p>© 2024 IgnitionLab Intelligence Inc. All rights reserved.</p>
<div class="flex gap-8">
<a href="#" class="hover:text-slate-900 transition-colors">Privacy Policy</a>
<a href="#" class="hover:text-slate-900 transition-colors">Terms of Service</a>
<a href="#" class="hover:text-slate-900 transition-colors">Cookies</a>
</div>
</div>
</div>
</footer>
<!-- block:end footer -->
</div>
</main>
<script>
(function () {
var links = document.querySelectorAll("[data-nav-link]");
function setActive(href) {
links.forEach(function (link) {
var isActive = link.getAttribute("href") === href;
link.classList.toggle("is-active", isActive);
if (isActive) {
link.setAttribute("aria-current", "page");
} else {
link.removeAttribute("aria-current");
}
});
}
links.forEach(function (link) {
link.addEventListener("click", function () {
setActive(link.getAttribute("href"));
});
});
})();
</script>
</body>
</html>
Unlimited access to all templates
Unlock our entire library of premium UI kits, dashboards, and landing pages. Renews automatically, cancel anytime.
€20
/ 3 months
or €60 / year
Get Unlimited Access
