Premium
0
47
Cerebra
Cerebra is a responsive neuroscience analytics template for EEG research, cognitive mapping, neural data visualization, and health technology platforms.
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>Cerebra | Tailwind CSS Neuroscience Analytics Template</title>
<meta name="description" content="Cerebra is a responsive Tailwind CSS neuroscience analytics template for EEG research, cognitive mapping, neural data visualization, and health technology platforms.">
<meta name="keywords" content="neuroscience analytics template, EEG research platform, cognitive mapping dashboard, neural data visualization, health technology, Tailwind CSS template">
<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="Cerebra | Tailwind CSS Neuroscience Analytics Template">
<meta property="og:description" content="A responsive Tailwind CSS neuroscience analytics template for EEG research, cognitive mapping, neural data visualization, and health technology platforms.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="Cerebra template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="Cerebra | Tailwind CSS Neuroscience Analytics Template">
<meta name="twitter:description" content="A responsive Tailwind CSS neuroscience analytics template for EEG research, cognitive mapping, neural data visualization, and health technology platforms.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="Cerebra template preview">
<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">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Plus Jakarta Sans', 'sans-serif'],
},
colors: {
brand: {
base: '#FFFFFF',
ink: '#0D1117',
muted: '#484F58',
primary: '#6366F1',
secondary: '#A855F7',
light: '#F8FAFC'
}
}
}
}
}
</script>
<style>
.hero-gradient {
background: radial-gradient(circle at top right, rgba(168, 85, 247, 0.15), transparent),
radial-gradient(circle at bottom left, rgba(99, 102, 241, 0.1), transparent);
}
.feature-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(248, 250, 252, 1) 100%);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body class="font-sans text-brand-ink bg-white overflow-x-hidden">
<!-- block:start navbar -->
<nav id="header" class="fixed top-0 left-0 w-full z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between relative">
<div class="flex items-center space-x-12 min-w-0">
<a href="#" class="flex items-center space-x-2 min-w-0">
<div class="w-9 h-9 sm:w-10 sm:h-10 bg-brand-ink rounded-lg flex items-center justify-center text-white shrink-0">
<i class="fa-solid fa-brain"></i>
</div>
<span class="text-xl sm:text-2xl font-bold tracking-tight truncate">Cerebra</span>
</a>
<div class="hidden lg:flex items-center space-x-8 text-sm font-semibold text-brand-muted">
<a href="#" class="hover:text-brand-primary transition-colors">Neuroscience</a>
<a href="#" class="hover:text-brand-primary transition-colors">Methods</a>
<a href="#" class="hover:text-brand-primary transition-colors">Case Studies</a>
<a href="#" class="hover:text-brand-primary transition-colors">Pricing</a>
<a href="#" class="hover:text-brand-primary transition-colors">Library</a>
</div>
</div>
<div class="flex items-center space-x-2 sm:space-x-4 shrink-0">
<a href="#" class="hidden lg:inline px-5 py-2.5 text-sm font-bold text-brand-ink hover:text-brand-primary transition-colors">Log In</a>
<a href="#" class="px-4 sm:px-6 py-2 sm:py-2.5 bg-brand-ink text-white rounded-full text-xs sm:text-sm font-bold shadow-lg hover:opacity-90 transition-opacity whitespace-nowrap">Request Demo</a>
<button
id="mobile-menu-button"
type="button"
class="lg:hidden w-10 h-10 flex items-center justify-center text-brand-ink"
aria-label="Open navigation"
aria-expanded="false"
aria-controls="mobile-navigation"
>
<span id="mobile-menu-icon-open" aria-hidden="true"><i class="fa-solid fa-bars"></i></span>
<span id="mobile-menu-icon-close" class="hidden" aria-hidden="true"><i class="fa-solid fa-xmark"></i></span>
</button>
</div>
<nav
id="mobile-navigation"
class="lg:hidden absolute top-full right-6 mt-2 w-56 p-3 bg-white border border-gray-100 rounded-2xl shadow-xl"
aria-label="Mobile navigation"
hidden
>
<div class="flex flex-col text-sm font-semibold text-brand-muted">
<a href="#" class="px-3 py-2.5 rounded-xl hover:bg-brand-light hover:text-brand-primary">Neuroscience</a>
<a href="#" class="px-3 py-2.5 rounded-xl hover:bg-brand-light hover:text-brand-primary">Methods</a>
<a href="#" class="px-3 py-2.5 rounded-xl hover:bg-brand-light hover:text-brand-primary">Case Studies</a>
<a href="#" class="px-3 py-2.5 rounded-xl hover:bg-brand-light hover:text-brand-primary">Pricing</a>
<a href="#" class="px-3 py-2.5 rounded-xl hover:bg-brand-light hover:text-brand-primary">Library</a>
<a href="#" class="px-3 py-2.5 rounded-xl hover:bg-brand-light hover:text-brand-primary">Log In</a>
</div>
</nav>
</div>
</nav>
<!-- block:end navbar -->
<!-- block:start hero -->
<section class="pt-32 pb-20 hero-gradient relative overflow-hidden">
<div class="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12 items-center">
<div class="space-y-8">
<h1 class="text-5xl lg:text-7xl font-extrabold tracking-tight leading-[1.1]">
Intelligent Mapping for <span class="text-brand-primary italic font-medium">Cognitive Vitality</span>
</h1>
<p class="text-lg text-brand-muted max-w-xl leading-relaxed font-medium">
Our AI-driven neuro-engine transforms raw EEG signals into dynamic 4D cognitive landscapes, providing researchers with unparalleled depth into resting-state brain architecture.
</p>
<div class="flex flex-wrap gap-4">
<a href="#" class="px-8 py-4 bg-brand-ink text-white rounded-full font-bold flex items-center space-x-2 hover:bg-brand-primary transition-colors shadow-xl">
<span>Trial Dashboard</span>
<i class="fa-solid fa-arrow-right text-xs"></i>
</a>
<a href="#" class="px-8 py-4 border border-gray-200 rounded-full font-bold flex items-center space-x-2 hover:bg-brand-light transition-colors">
<i class="fa-solid fa-download text-xs"></i>
<span>Methodology PDF</span>
</a>
</div>
<div class="flex items-center space-x-4 pt-4">
<div class="flex -space-x-3">
<img class="w-10 h-10 rounded-full border-2 border-white object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" alt="user">
<img class="w-10 h-10 rounded-full border-2 border-white object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg" alt="user">
<img class="w-10 h-10 rounded-full border-2 border-white object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" alt="user">
</div>
<div class="text-xs">
<p class="font-bold">2.4k+ Global Institutions</p>
<div class="flex text-yellow-400 mt-0.5">
<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>
</div>
</div>
</div>
<div class="relative">
<div class="relative z-10 rounded-[3rem] overflow-hidden shadow-2xl">
<img class="w-full aspect-square object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_e550b27683_20130bf8e532404b.png" alt="High-detail 3D anatomical render of a glowing human brain, vibrant neural pathways and activity node" />
<!-- UI Overlays -->
<div class="absolute top-8 left-8 bg-white/20 backdrop-blur-md p-3 rounded-xl border border-white/30 text-[10px] text-white font-bold uppercase tracking-widest">
<i class="fa-solid fa-circle-nodes mr-1 text-brand-primary"></i> Connectivity High
</div>
<div class="absolute bottom-8 right-8 bg-white/20 backdrop-blur-md p-3 rounded-xl border border-white/30 text-[10px] text-white font-bold uppercase tracking-widest">
<i class="fa-solid fa-bolt mr-1 text-yellow-400"></i> Real-time Power
</div>
</div>
<div class="absolute -z-10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[140%] h-[140%] bg-brand-primary/5 blur-[120px] rounded-full"></div>
</div>
</div>
</section>
<!-- block:end hero -->
<!-- block:start about -->
<section class="py-24 bg-white">
<div class="max-w-4xl mx-auto px-6 text-center space-y-6">
<h2 class="text-4xl md:text-5xl font-bold tracking-tight">What defines Cerebra?</h2>
<h3 class="text-2xl md:text-3xl text-brand-primary font-bold">Unlocking the Human Connectome</h3>
<p class="text-lg text-brand-muted leading-relaxed font-medium">
Cerebra was built to bridge the gap between abstract neurology and clinical precision. We distill the most intricate neurological patterns into actionable bio-signatures, empowering practitioners to move from manual observation to AI-accelerated foresight.
</p>
</div>
<div class="max-w-7xl mx-auto px-6 mt-20 grid lg:grid-cols-2 gap-16 items-center">
<div class="relative">
<img class="w-full aspect-video object-contain" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_80fac5ae51_c84103dbb49cf62f.png" alt="3D illustration of a singular neural cell with glowing synapses and branching dendrites, high resolu" />
</div>
<div class="grid grid-cols-2 gap-8">
<div class="space-y-3">
<div class="w-12 h-12 bg-brand-light rounded-2xl flex items-center justify-center text-brand-primary">
<i class="fa-solid fa-cube"></i>
</div>
<h4 class="font-bold text-lg">Instant 4D Spatial Reports</h4>
<p class="text-sm text-brand-muted font-medium">Generate volumetric heatmaps of neural activity in seconds.</p>
</div>
<div class="space-y-3">
<div class="w-12 h-12 bg-brand-light rounded-2xl flex items-center justify-center text-brand-secondary">
<i class="fa-solid fa-chart-area"></i>
</div>
<h4 class="font-bold text-lg">Predictive Phenotyping</h4>
<p class="text-sm text-brand-muted font-medium">Forecast behavioral trajectories based on baseline rest activity.</p>
</div>
<div class="space-y-3">
<div class="w-12 h-12 bg-brand-light rounded-2xl flex items-center justify-center text-green-500">
<i class="fa-solid fa-wave-square"></i>
</div>
<h4 class="font-bold text-lg">Automated Artifact Scrubbing</h4>
<p class="text-sm text-brand-muted font-medium">Clean signals automatically with deep learning denoising.</p>
</div>
<div class="space-y-3">
<div class="w-12 h-12 bg-brand-light rounded-2xl flex items-center justify-center text-orange-500">
<i class="fa-solid fa-vr-cardboard"></i>
</div>
<h4 class="font-bold text-lg">Dynamic Visualization</h4>
<p class="text-sm text-brand-muted font-medium">Interact with live topographical spectro-density maps.</p>
</div>
</div>
</div>
</section>
<!-- block:end about -->
<!-- block:start features -->
<section class="py-24 bg-brand-light border-y border-gray-100">
<div class="max-w-7xl mx-auto px-6 text-center mb-16 space-y-4">
<h2 class="text-4xl font-bold tracking-tight">Core Capacities:</h2>
<h3 class="text-2xl font-bold text-brand-muted italic">Clinical Precision in Every Metric</h3>
<p class="text-brand-muted max-w-2xl mx-auto font-medium">
Our core engine allows practitioners to navigate beyond qualitative assessments, delivering deep metrics required for next-gen diagnostics.
</p>
</div>
<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-8">
<div class="feature-card p-10 rounded-[2.5rem] border border-gray-100 flex flex-col items-center text-center">
<div class="w-32 h-32 mb-8 flex items-center justify-center">
<img class="w-full h-full object-contain" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_7f068e237b_94b8321563572593.png" alt="minimalist 3D icon of a glowing brain structure in soft blue, glassmorphism style" />
</div>
<h4 class="text-2xl font-extrabold uppercase tracking-widest text-brand-primary mb-4">Neural Age</h4>
<p class="text-brand-muted font-medium">Quantify the biological maturity of cortical networks against global benchmarks.</p>
</div>
<div class="feature-card p-10 rounded-[2.5rem] border border-gray-100 flex flex-col items-center text-center">
<div class="w-32 h-32 mb-8 flex items-center justify-center">
<img class="w-full h-full object-contain" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_b30a054fcd_a11c361da6a2bffc.png" alt="minimalist 3D icon of a fractured sphere in soft purple, glassmorphism style" />
</div>
<h4 class="text-2xl font-extrabold uppercase tracking-widest text-brand-secondary mb-4">Cognitive Bio</h4>
<p class="text-brand-muted font-medium">Identify latent behavioral traits through sophisticated frequency-band decomposition.</p>
</div>
<div class="feature-card p-10 rounded-[2.5rem] border border-gray-100 flex flex-col items-center text-center">
<div class="w-32 h-32 mb-8 flex items-center justify-center">
<img class="w-full h-full object-contain" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_ff67d4ee8b_c9bea8f896489bac.png" alt="minimalist 3D icon of a crystalline head silhouette in soft indigo, glassmorphism style" />
</div>
<h4 class="text-2xl font-extrabold uppercase tracking-widest text-brand-ink mb-4">Pathology Risk</h4>
<p class="text-brand-muted font-medium">Calculate probability indices for various neurological variances using deep classifiers.</p>
</div>
</div>
<div class="text-center mt-16">
<a href="#" class="px-8 py-3 bg-brand-ink text-white rounded-full font-bold hover:bg-brand-primary transition-colors text-sm">Explore All Analytics</a>
</div>
</section>
<!-- block:end features -->
<!-- block:start features-2 -->
<section class="py-24 bg-white">
<div class="max-w-4xl mx-auto px-6 text-center space-y-6 mb-20">
<h2 class="text-4xl font-bold tracking-tight">The Cerebra Edge</h2>
<h3 class="text-2xl font-bold text-brand-primary">The New Paradigm in Bio-Analysis</h3>
<p class="text-brand-muted font-medium">
Unlike traditional EEG software that requires hours of manual vetting, Cerebra automates the heavy lifting while maintaining complete transparency.
</p>
</div>
<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12">
<div class="p-8 rounded-3xl border border-gray-100 flex items-start space-x-6 hover:bg-brand-light transition-colors">
<div class="w-14 h-14 bg-purple-100 rounded-2xl flex items-center justify-center text-purple-600 flex-shrink-0">
<i class="fa-solid fa-bolt-lightning text-xl"></i>
</div>
<div>
<div class="flex items-center justify-between mb-2">
<h4 class="font-bold text-xl">Zero-Delay Processing</h4>
<i class="fa-solid fa-arrow-up-right-from-square text-xs text-gray-300"></i>
</div>
<p class="text-brand-muted font-medium leading-relaxed">Stream raw data and receive parsed, cleaned reports in real-time. No more waiting for offline post-processing.</p>
</div>
</div>
<div class="p-8 rounded-3xl border border-gray-100 flex items-start space-x-6 hover:bg-brand-light transition-colors">
<div class="w-14 h-14 bg-indigo-100 rounded-2xl flex items-center justify-center text-indigo-600 flex-shrink-0">
<i class="fa-solid fa-microscope text-xl"></i>
</div>
<div>
<div class="flex items-center justify-between mb-2">
<h4 class="font-bold text-xl">Comparative Databases</h4>
<i class="fa-solid fa-arrow-up-right-from-square text-xs text-gray-300"></i>
</div>
<p class="text-brand-muted font-medium leading-relaxed">Match individual results against our library of over 1.2M anonymized records for statistically robust insights.</p>
</div>
</div>
<div class="p-8 rounded-3xl border border-gray-100 flex items-start space-x-6 hover:bg-brand-light transition-colors">
<div class="w-14 h-14 bg-blue-100 rounded-2xl flex items-center justify-center text-blue-600 flex-shrink-0">
<i class="fa-solid fa-magnifying-glass-chart text-xl"></i>
</div>
<div>
<div class="flex items-center justify-between mb-2">
<h4 class="font-bold text-xl">Deep Classifier Logic</h4>
<i class="fa-solid fa-arrow-up-right-from-square text-xs text-gray-300"></i>
</div>
<p class="text-brand-muted font-medium leading-relaxed">Our models are trained on 15+ clinical variances, providing specific evidence-based diagnostic support.</p>
</div>
</div>
<div class="p-8 rounded-3xl border border-gray-100 flex items-start space-x-6 hover:bg-brand-light transition-colors">
<div class="w-14 h-14 bg-pink-100 rounded-2xl flex items-center justify-center text-pink-600 flex-shrink-0">
<i class="fa-solid fa-heart-pulse text-xl"></i>
</div>
<div>
<div class="flex items-center justify-between mb-2">
<h4 class="font-bold text-xl">Holistic Bio-Feedback</h4>
<i class="fa-solid fa-arrow-up-right-from-square text-xs text-gray-300"></i>
</div>
<p class="text-brand-muted font-medium leading-relaxed">Combine neural activity with secondary physiological markers for a total overview of human performance.</p>
</div>
</div>
</div>
</section>
<!-- block:end features-2 -->
<!-- block:start process -->
<section class="py-24 bg-white">
<div class="max-w-4xl mx-auto px-6 text-center space-y-6 mb-20">
<h2 class="text-4xl font-bold tracking-tight">The 4-Step Pipeline</h2>
<h3 class="text-2xl font-bold text-brand-muted italic">From Data to Intelligence</h3>
<p class="text-brand-muted font-medium">Follow this streamlined workflow to convert resting brain activity into a comprehensive clinical dossier.</p>
</div>
<div class="max-w-7xl mx-auto px-6 space-y-8">
<div class="grid lg:grid-cols-2 gap-8">
<div class="bg-white border border-gray-100 rounded-[2rem] p-8 flex items-center space-x-8 hover:shadow-xl transition-shadow">
<div class="w-32 h-32 rounded-2xl overflow-hidden flex-shrink-0">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_e9023cc655_2622f1b574f76801.png" alt="minimalist 3D illustration of a human head silhouette with neural nodes, soft purple tones" />
</div>
<div class="flex-grow">
<div class="text-6xl font-black text-gray-100 mb-2 leading-none">01</div>
<h4 class="text-xl font-bold mb-2">Resting Acquisition</h4>
<p class="text-sm text-brand-muted font-medium">A simple 6-minute resting EEG session uploaded to our encrypted HIPAA-grade cloud.</p>
</div>
</div>
<div class="bg-white border border-gray-100 rounded-[2rem] p-8 flex items-center space-x-8 hover:shadow-xl transition-shadow">
<div class="w-32 h-32 rounded-2xl overflow-hidden flex-shrink-0">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_e9023cc655_57a0c5bdf3d06281.png" alt="minimalist 3D illustration of a glowing brain orb with swirling data streams, soft blue tones" />
</div>
<div class="flex-grow">
<div class="text-6xl font-black text-gray-100 mb-2 leading-none">02</div>
<h4 class="text-xl font-bold mb-2">Neural Engine Analysis</h4>
<p class="text-sm text-brand-muted font-medium">AI instantly parses the session, identifying spectral peaks and network synchronization patterns.</p>
</div>
</div>
<div class="bg-white border border-gray-100 rounded-[2rem] p-8 flex items-center space-x-8 hover:shadow-xl transition-shadow">
<div class="w-32 h-32 rounded-2xl overflow-hidden flex-shrink-0">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_e9023cc655_184b98d8a807cd00.png" alt="minimalist 3D illustration of a futuristic digital medical tablet showing charts, soft pink tones" />
</div>
<div class="flex-grow">
<div class="text-6xl font-black text-gray-100 mb-2 leading-none">03</div>
<h4 class="text-xl font-bold mb-2">Insight Synthesis</h4>
<p class="text-sm text-brand-muted font-medium">Interact with detailed 3D brain maps and customized metric dashboards on any device.</p>
</div>
</div>
<div class="bg-white border border-gray-100 rounded-[2rem] p-8 flex items-center space-x-8 hover:shadow-xl transition-shadow">
<div class="w-32 h-32 rounded-2xl overflow-hidden flex-shrink-0">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_e9023cc655_7c9a7f7ae842b7d9.png" alt="minimalist 3D illustration of two overlapping head silhouettes, soft teal tones" />
</div>
<div class="flex-grow">
<div class="text-6xl font-black text-gray-100 mb-2 leading-none">04</div>
<h4 class="text-xl font-bold mb-2">Longitudinal Comparison</h4>
<p class="text-sm text-brand-muted font-medium">Track evolution over multiple sessions to quantify cognitive recovery or developmental progress.</p>
</div>
</div>
</div>
</div>
</section>
<!-- block:end process -->
<!-- block:start pricing -->
<section class="py-24 bg-brand-light">
<div class="max-w-4xl mx-auto px-6 text-center space-y-6 mb-20">
<h2 class="text-4xl font-bold tracking-tight">Cerebra Licensing</h2>
<h3 class="text-2xl font-bold text-brand-primary">Scalable Solutions for Research</h3>
<p class="text-brand-muted font-medium">Choose a configuration that fits your clinical workflow, from lightweight cloud access to full hardware integration.</p>
</div>
<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
<div class="bg-white p-12 rounded-[3rem] border border-gray-100 flex flex-col items-center text-center shadow-sm">
<h4 class="text-2xl font-bold mb-1">Standard License</h4>
<p class="text-sm text-brand-muted font-medium mb-8">Cloud Analytics Only</p>
<div class="mb-8">
<p class="text-xs font-bold text-brand-muted uppercase tracking-widest mb-1">Activation Fee</p>
<p class="text-5xl font-black tracking-tight">$950</p>
</div>
<ul class="space-y-4 text-sm font-semibold text-brand-muted mb-10">
<li class="flex items-center space-x-2"><i class="fa-solid fa-check text-brand-primary"></i> <span>iOS & Android Client App</span></li>
<li class="flex items-center space-x-2"><i class="fa-solid fa-check text-brand-primary"></i> <span>Browser-Based Analysis Portal</span></li>
<li class="flex items-center space-x-2"><i class="fa-solid fa-check text-brand-primary"></i> <span>Encrypted Cloud Storage</span></li>
<li class="flex items-center space-x-2"><i class="fa-solid fa-check text-brand-primary"></i> <span>HIPAA-Compliant Reporting</span></li>
</ul>
<a href="#" class="w-full py-4 bg-brand-ink text-white rounded-full font-bold hover:bg-brand-primary transition-colors">Select Plan</a>
</div>
<div class="bg-gradient-to-br from-white to-purple-50 p-12 rounded-[3rem] border border-brand-primary/20 flex flex-col items-center text-center shadow-xl relative overflow-hidden">
<div class="absolute top-6 right-6 bg-brand-primary text-white text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-widest">Recommended</div>
<h4 class="text-2xl font-bold mb-1">Enterprise Suite</h4>
<p class="text-sm text-brand-muted font-medium mb-8">Hardware + Intelligence Bundle</p>
<div class="mb-8">
<p class="text-xs font-bold text-brand-muted uppercase tracking-widest mb-1">Package Cost</p>
<p class="text-5xl font-black tracking-tight">$3,450</p>
</div>
<ul class="space-y-4 text-sm font-semibold text-brand-muted mb-10">
<li class="flex items-center space-x-2"><i class="fa-solid fa-check text-brand-primary"></i> <span>19-Channel Medical EEG Headset</span></li>
<li class="flex items-center space-x-2"><i class="fa-solid fa-check text-brand-primary"></i> <span>Full API & SDK Access</span></li>
<li class="flex items-center space-x-2"><i class="fa-solid fa-check text-brand-primary"></i> <span>Unlimited Spectral Reports</span></li>
<li class="flex items-center space-x-2"><i class="fa-solid fa-check text-brand-primary"></i> <span>Dedicated Success Manager</span></li>
</ul>
<a href="#" class="w-full py-4 bg-brand-primary text-white rounded-full font-bold hover:shadow-lg transition-all">Get Enterprise</a>
</div>
</div>
</section>
<!-- block:end pricing -->
<!-- block:start reviews -->
<section class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16 space-y-4">
<h2 class="text-4xl font-bold tracking-tight">Trust Index</h2>
<h3 class="text-2xl font-bold text-brand-muted italic">Endorsed by Clinical Leaders</h3>
<p class="text-brand-muted font-medium">Join a global collective of researchers advancing the frontier of human understanding.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="p-8 rounded-[2rem] bg-brand-light border border-gray-100 flex flex-col justify-between">
<div class="space-y-4">
<div class="flex text-yellow-400 text-xs">
<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-sm font-medium leading-relaxed italic text-brand-muted">"Cerebra transformed our diagnostic precision. What used to take hours of manual signal vetting is now handled in minutes with superior clarity."</p>
</div>
<div class="flex items-center space-x-4 mt-8">
<img class="w-12 h-12 rounded-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-4.jpg" alt="user">
<div>
<p class="font-bold text-sm">Dr. Elias Vance</p>
<p class="text-[10px] font-bold text-brand-muted uppercase tracking-widest">Director, Neuro-Research Center</p>
</div>
</div>
</div>
<div class="p-8 rounded-[2rem] bg-brand-light border border-gray-100 flex flex-col justify-between">
<div class="space-y-4">
<div class="flex text-yellow-400 text-xs">
<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-sm font-medium leading-relaxed italic text-brand-muted">"The topographical spectro-density maps are a game changer for patient engagement. It makes complex neurological data visible and understandable."</p>
</div>
<div class="flex items-center space-x-4 mt-8">
<img class="w-12 h-12 rounded-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-5.jpg" alt="user">
<div>
<p class="font-bold text-sm">Sarah Jenkins</p>
<p class="text-[10px] font-bold text-brand-muted uppercase tracking-widest">Lead Research Tech, MIT</p>
</div>
</div>
</div>
<div class="p-8 rounded-[2rem] bg-brand-light border border-gray-100 flex flex-col justify-between">
<div class="space-y-4">
<div class="flex text-yellow-400 text-xs">
<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-sm font-medium leading-relaxed italic text-brand-muted">"Integration was seamless. We were able to sync our existing amplifier hardware with the Cerebra cloud portal in under an hour."</p>
</div>
<div class="flex items-center space-x-4 mt-8">
<img class="w-12 h-12 rounded-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-6.jpg" alt="user">
<div>
<p class="font-bold text-sm">Dr. Marcus Chen</p>
<p class="text-[10px] font-bold text-brand-muted uppercase tracking-widest">Cognitive Scientist, Stanford</p>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="#" class="px-8 py-3 bg-brand-ink text-white rounded-full font-bold hover:bg-brand-primary transition-colors text-sm">View More Case Studies</a>
</div>
</div>
</section>
<!-- block:end reviews -->
<!-- block:start faq -->
<section class="py-24 bg-brand-light">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16 space-y-4">
<h2 class="text-4xl font-bold tracking-tight">Support Center</h2>
<h3 class="text-2xl font-bold text-brand-muted italic">Deployment Details</h3>
<p class="text-brand-muted font-medium">Find immediate answers to technical specifications and integration protocols.</p>
</div>
<div class="grid lg:grid-cols-2 gap-16 items-start">
<div class="rounded-[3rem] overflow-hidden shadow-2xl relative group">
<img class="w-full h-[600px] object-cover transition-transform duration-700 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_c1c9a41895_08bdc8cb647b0061.png" alt="Cinematic portrait of a scientist in a futuristic laboratory wearing a neural interface headset, sof" />
<div class="absolute inset-0 bg-gradient-to-t from-brand-ink/80 to-transparent"></div>
<div class="absolute bottom-10 left-10 text-white">
<p class="text-sm font-bold uppercase tracking-widest mb-2 text-brand-primary">Next Gen EEG</p>
<h4 class="text-2xl font-bold">Research Without Boundaries</h4>
</div>
</div>
<div class="space-y-4">
<details class="group bg-white border border-gray-100 rounded-3xl p-6 transition-all" open>
<summary class="list-none flex justify-between items-center cursor-pointer font-bold text-lg">
Is Cerebra a clinical diagnostic tool?
<span class="text-brand-primary group-open:rotate-45 transition-transform"><i class="fa-solid fa-plus"></i></span>
</summary>
<p class="mt-4 text-brand-muted text-sm font-medium leading-relaxed">Cerebra is an AI-powered decision support and research suite. While it provides high-precision metrics and probability models, it is intended to augment clinical judgment, not replace it.</p>
</details>
<details class="group bg-white border border-gray-100 rounded-3xl p-6 transition-all">
<summary class="list-none flex justify-between items-center cursor-pointer font-bold text-lg">
Which EEG formats do you support?
<span class="text-brand-primary group-open:rotate-45 transition-transform"><i class="fa-solid fa-plus"></i></span>
</summary>
<p class="mt-4 text-brand-muted text-sm font-medium leading-relaxed">We natively support EDF, EDF+, BDF, and CSV. Our cloud ingestion engine also includes converters for most major proprietary hardware manufacturer formats.</p>
</details>
<details class="group bg-white border border-gray-100 rounded-3xl p-6 transition-all">
<summary class="list-none flex justify-between items-center cursor-pointer font-bold text-lg">
Can I integrate Cerebra with our existing LIS?
<span class="text-brand-primary group-open:rotate-45 transition-transform"><i class="fa-solid fa-plus"></i></span>
</summary>
<p class="mt-4 text-brand-muted text-sm font-medium leading-relaxed">Yes, our full REST API allows for seamless integration with Laboratory Information Systems (LIS) and existing patient record databases.</p>
</details>
<details class="group bg-white border border-gray-100 rounded-3xl p-6 transition-all">
<summary class="list-none flex justify-between items-center cursor-pointer font-bold text-lg">
How is "Neural Age" calculated?
<span class="text-brand-primary group-open:rotate-45 transition-transform"><i class="fa-solid fa-plus"></i></span>
</summary>
<p class="mt-4 text-brand-muted text-sm font-medium leading-relaxed">Neural Age is derived from a deep convolutional neural network trained on over 500,000 baseline recordings, focusing on spectral density and alpha-peak frequency markers.</p>
</details>
<details class="group bg-white border border-gray-100 rounded-3xl p-6 transition-all">
<summary class="list-none flex justify-between items-center cursor-pointer font-bold text-lg">
Is data encrypted and GDPR compliant?
<span class="text-brand-primary group-open:rotate-45 transition-transform"><i class="fa-solid fa-plus"></i></span>
</summary>
<p class="mt-4 text-brand-muted text-sm font-medium leading-relaxed">Absolutely. All data is encrypted at rest and in transit using AES-256. We maintain full HIPAA and GDPR compliance across all global nodes.</p>
</details>
</div>
</div>
</div>
</section>
<!-- block:end faq -->
<!-- block:start footer -->
<footer class="bg-brand-ink text-white pt-24 pb-12">
<div class="max-w-7xl mx-auto px-6">
<div class="grid lg:grid-cols-12 gap-16 mb-20">
<div class="lg:col-span-4 space-y-8">
<a href="#" class="flex items-center space-x-2">
<div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center text-brand-ink">
<i class="fa-solid fa-brain"></i>
</div>
<span class="text-2xl font-bold tracking-tight">Cerebra</span>
</a>
<p class="text-gray-400 text-sm leading-relaxed max-w-xs font-medium">
Cerebra was founded on a singular vision: to democratize deep brain analysis and unlock the secrets of human cognitive architecture.
</p>
<div class="flex space-x-4 text-xl">
<a href="#" class="hover:text-brand-primary transition-colors"><i class="fa-brands fa-linkedin"></i></a>
<a href="#" class="hover:text-brand-primary transition-colors"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" class="hover:text-brand-primary transition-colors"><i class="fa-brands fa-github"></i></a>
<a href="#" class="hover:text-brand-primary transition-colors"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
<div class="lg:col-span-2 space-y-6">
<h4 class="font-bold uppercase text-xs tracking-widest text-gray-500">Service</h4>
<ul class="space-y-4 text-sm font-semibold text-gray-400">
<li><a href="#" class="hover:text-white transition-colors">EEG Analysis</a></li>
<li><a href="#" class="hover:text-white transition-colors">Brain Mapping</a></li>
<li><a href="#" class="hover:text-white transition-colors">Mental Health Insights</a></li>
<li><a href="#" class="hover:text-white transition-colors">AI Predictions</a></li>
</ul>
</div>
<div class="lg:col-span-2 space-y-6">
<h4 class="font-bold uppercase text-xs tracking-widest text-gray-500">Company</h4>
<ul class="space-y-4 text-sm font-semibold text-gray-400">
<li><a href="#" class="hover:text-white transition-colors">About Us</a></li>
<li><a href="#" class="hover:text-white transition-colors">Our Team</a></li>
<li><a href="#" class="hover:text-white transition-colors">Careers</a></li>
<li><a href="#" class="hover:text-white transition-colors">Contact</a></li>
<li><a href="#" class="hover:text-white transition-colors">FAQ</a></li>
</ul>
</div>
<div class="lg:col-span-2 space-y-6">
<h4 class="font-bold uppercase text-xs tracking-widest text-gray-500">Resources</h4>
<ul class="space-y-4 text-sm font-semibold text-gray-400">
<li><a href="#" class="hover:text-white transition-colors">API Reference</a></li>
<li><a href="#" class="hover:text-white transition-colors">Tutorials</a></li>
<li><a href="#" class="hover:text-white transition-colors">Support</a></li>
<li><a href="#" class="hover:text-white transition-colors">Blog</a></li>
</ul>
</div>
<div class="lg:col-span-2 space-y-6">
<h4 class="font-bold uppercase text-xs tracking-widest text-gray-500">Newsletter</h4>
<form class="space-y-4">
<p class="text-xs text-gray-500 font-bold uppercase">Subscribe Our Monthly Newsletter</p>
<div class="flex">
<input type="email" placeholder="email@example.com" class="bg-gray-800 border-none rounded-l-lg px-4 py-2 text-sm w-full focus:ring-1 focus:ring-brand-primary">
<button class="bg-white text-brand-ink px-4 py-2 rounded-r-lg font-bold hover:bg-brand-primary hover:text-white transition-colors"><i class="fa-solid fa-paper-plane"></i></button>
</div>
</form>
</div>
</div>
<div class="border-t border-gray-800 pt-12 flex flex-col md:flex-row justify-between items-center text-[10px] font-bold text-gray-500 uppercase tracking-widest">
<p>Copyright © 2026 Cerebra Neuro-Tech. All Rights Reserved.</p>
<div class="flex space-x-8 mt-4 md:mt-0">
<a href="#" class="hover:text-white transition-colors">Terms and Conditions</a>
<a href="#" class="hover:text-white transition-colors">Privacy Policy</a>
</div>
</div>
</div>
</footer>
<!-- block:end footer -->
<script>
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenuIconOpen = document.getElementById('mobile-menu-icon-open');
const mobileMenuIconClose = document.getElementById('mobile-menu-icon-close');
const mobileNavigation = document.getElementById('mobile-navigation');
function setMobileMenu(open) {
mobileMenuButton.setAttribute('aria-expanded', String(open));
mobileMenuButton.setAttribute('aria-label', open ? 'Close navigation' : 'Open navigation');
mobileMenuIconOpen.classList.toggle('hidden', open);
mobileMenuIconClose.classList.toggle('hidden', !open);
mobileNavigation.hidden = !open;
}
mobileMenuButton.addEventListener('click', () => {
setMobileMenu(mobileMenuButton.getAttribute('aria-expanded') !== 'true');
});
mobileNavigation.querySelectorAll('a').forEach((link) => {
link.addEventListener('click', () => setMobileMenu(false));
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') setMobileMenu(false);
});
document.addEventListener('click', (event) => {
if (!document.getElementById('header').contains(event.target)) setMobileMenu(false);
});
window.addEventListener('resize', () => {
if (window.innerWidth >= 1024) setMobileMenu(false);
});
</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
