Premium
0
55
PulseMedia
PulseMedia is a responsive marketing analytics SaaS template for agencies, growth teams, campaign optimization platforms, and advertising intelligence products.
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>PulseMedia | Tailwind CSS Marketing Analytics SaaS Template</title>
<meta
name="description"
content="PulseMedia is a responsive marketing analytics SaaS template for agencies, growth teams, campaign optimization platforms, and advertising intelligence products."
/>
<meta
name="keywords"
content="marketing analytics template, advertising dashboard, campaign optimization, growth SaaS, agency platform"
/>
<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="PulseMedia | Tailwind CSS Marketing Analytics SaaS Template">
<meta property="og:description" content="A responsive marketing analytics SaaS template for agencies, growth teams, campaign optimization platforms, and advertising intelligence products.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="PulseMedia template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="PulseMedia | Tailwind CSS Marketing Analytics SaaS Template">
<meta name="twitter:description" content="A responsive marketing analytics SaaS template for agencies, growth teams, campaign optimization platforms, and advertising intelligence products.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="PulseMedia 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: #030712;
color: #f3f4f6;
}
.glow-overlay {
background: radial-gradient(
circle at 50% 0%,
rgba(59, 130, 246, 0.15) 0%,
transparent 70%
);
}
.glass-card {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.faq-chevron {
transition:
transform 300ms ease,
color 150ms ease;
}
.faq-toggle[aria-expanded="true"] .faq-chevron {
color: #3b82f6;
transform: rotate(180deg);
}
.pricing-toggle {
color: #9ca3af;
}
.pricing-toggle[aria-pressed="true"] {
background-color: #2563eb;
color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
.faq-chevron {
transition: none;
}
}
</style>
</head>
<body class="antialiased selection:bg-blue-500/30 selection:text-white">
<!-- block:start navbar -->
<header
id="header"
class="fixed top-0 left-0 w-full z-50 bg-[#030712]/80 backdrop-blur-md border-b border-white/5"
>
<div
class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between"
>
<div class="flex items-center gap-2">
<div
class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center shadow-[0_0_20px_rgba(37,99,235,0.4)]"
>
<i class="fa-solid fa-bolt-lightning text-white text-sm"></i>
</div>
<span class="text-xl font-bold tracking-tight">PulseMedia</span>
</div>
<nav
class="hidden md:flex items-center gap-10 text-sm font-medium text-gray-400"
>
<a href="#features" class="hover:text-blue-400 transition-colors"
>Solutions</a
>
<a href="#pricing" class="hover:text-blue-400 transition-colors"
>Plans</a
>
<a href="#faq" class="hover:text-blue-400 transition-colors"
>Resources</a
>
<a href="#contact" class="hover:text-blue-400 transition-colors"
>Support</a
>
</nav>
<div class="flex items-center gap-4">
<a
href="#pricing"
class="hidden sm:inline-flex bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-full text-sm font-semibold transition-all shadow-lg shadow-blue-900/20"
>
Get Started Free
</a>
<button
id="mobile-menu-button"
type="button"
class="md:hidden w-10 h-10 rounded-full border border-white/10 text-gray-300 hover:text-white hover:bg-white/5 transition-colors"
aria-label="Open navigation"
aria-expanded="false"
aria-controls="mobile-navigation"
>
<i class="fa-solid fa-bars" aria-hidden="true"></i>
</button>
</div>
</div>
<nav
id="mobile-navigation"
class="md:hidden px-6 pb-5 border-t border-white/5"
aria-label="Mobile navigation"
hidden
>
<div class="flex flex-col gap-1 pt-3 text-sm font-medium text-gray-300">
<a href="#features" class="rounded-lg px-3 py-2 hover:bg-white/5"
>Solutions</a
>
<a href="#pricing" class="rounded-lg px-3 py-2 hover:bg-white/5"
>Plans</a
>
<a href="#faq" class="rounded-lg px-3 py-2 hover:bg-white/5"
>Resources</a
>
<a href="#contact" class="rounded-lg px-3 py-2 hover:bg-white/5"
>Support</a
>
</div>
</nav>
</header>
<!-- block:end navbar -->
<main class="relative">
<div class="absolute inset-0 glow-overlay pointer-events-none"></div>
<!-- block:start hero -->
<section id="hero" class="relative pt-32 pb-20 md:pt-48 md:pb-32 px-6">
<div class="max-w-4xl mx-auto text-center space-y-8">
<div
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-xs font-bold uppercase tracking-wider"
>
<span class="relative flex h-2 w-2">
<span
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"
></span>
<span
class="relative inline-flex rounded-full h-2 w-2 bg-blue-500"
></span>
</span>
Intelligent Ad Optimization
</div>
<h1
class="text-5xl md:text-7xl font-bold tracking-tight leading-[1.1] text-white"
>
Supercharge Your <br />
<span
class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-400"
>Growth Engine</span
>
</h1>
<p class="text-lg text-gray-400 max-w-2xl mx-auto leading-relaxed">
Unify your marketing data, automate high-frequency decisions, and
scale your ROI with our all-in-one performance dashboard.
</p>
<div
class="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4"
>
<a
href="#"
class="w-full sm:w-auto bg-white text-black px-8 py-3.5 rounded-full font-bold hover:bg-gray-200 transition-all"
>
Launch Dashboard
</a>
<a
href="#"
class="w-full sm:w-auto px-8 py-3.5 rounded-full font-bold text-white border border-white/10 hover:bg-white/5 transition-all"
>
Watch Demo
</a>
</div>
<!-- Dashboard Mockup -->
<div class="mt-20 relative group">
<div
class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-20 group-hover:opacity-30 transition duration-1000"
></div>
<div
class="relative bg-[#0b0e14] border border-white/10 rounded-2xl overflow-hidden shadow-2xl"
>
<!-- Mockup Header -->
<div
class="h-12 border-b border-white/5 bg-white/5 flex items-center px-4 justify-between"
>
<div class="flex gap-2">
<div class="w-3 h-3 rounded-full bg-red-500/50"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500/50"></div>
<div class="w-3 h-3 rounded-full bg-green-500/50"></div>
</div>
<div class="flex items-center gap-4">
<div class="w-32 h-2 bg-white/10 rounded-full"></div>
<div class="w-8 h-8 rounded-full bg-white/10"></div>
</div>
</div>
<!-- Mockup Body -->
<div class="p-6 grid grid-cols-12 gap-6">
<!-- Sidebar -->
<div class="col-span-3 space-y-4">
<div
class="h-8 bg-blue-500/10 rounded-lg border border-blue-500/20"
></div>
<div class="h-4 bg-white/5 rounded w-3/4"></div>
<div class="h-4 bg-white/5 rounded w-1/2"></div>
<div class="h-4 bg-white/5 rounded w-2/3"></div>
<div class="h-4 bg-white/5 rounded w-1/2"></div>
</div>
<!-- Content -->
<div class="col-span-9 space-y-6">
<div class="grid grid-cols-3 gap-4">
<div
class="h-24 bg-white/5 rounded-xl border border-white/5 p-4 space-y-3"
>
<div class="w-1/2 h-2 bg-white/10 rounded"></div>
<div class="w-3/4 h-6 bg-white/5 rounded"></div>
</div>
<div
class="h-24 bg-white/5 rounded-xl border border-white/5 p-4 space-y-3"
>
<div class="w-1/2 h-2 bg-white/10 rounded"></div>
<div class="w-3/4 h-6 bg-white/5 rounded"></div>
</div>
<div
class="h-24 bg-white/5 rounded-xl border border-white/5 p-4 space-y-3"
>
<div class="w-1/2 h-2 bg-white/10 rounded"></div>
<div class="w-3/4 h-6 bg-white/5 rounded"></div>
</div>
</div>
<div
class="h-64 bg-white/5 rounded-xl border border-white/5 relative flex items-end p-6 gap-2"
>
<div class="w-full bg-blue-500/20 h-[30%] rounded-t"></div>
<div class="w-full bg-blue-500/30 h-[45%] rounded-t"></div>
<div class="w-full bg-blue-500/40 h-[60%] rounded-t"></div>
<div class="w-full bg-blue-500/50 h-[80%] rounded-t"></div>
<div class="w-full bg-blue-500/60 h-[70%] rounded-t"></div>
<div class="w-full bg-blue-500/70 h-[90%] rounded-t"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end hero -->
<!-- block:start clients -->
<section id="trusted" class="py-20 border-t border-white/5">
<div class="max-w-7xl mx-auto px-6">
<p
class="text-center text-sm font-semibold text-gray-500 uppercase tracking-[0.2em] mb-12"
>
Empowering teams at 300+ leading companies
</p>
<div
class="flex flex-wrap justify-center gap-12 md:gap-20 opacity-30 grayscale contrast-125"
>
<i class="fa-brands fa-shopify text-4xl"></i>
<i class="fa-brands fa-hubspot text-4xl"></i>
<i class="fa-brands fa-stripe text-4xl"></i>
<i class="fa-brands fa-slack text-4xl"></i>
<i class="fa-brands fa-amazon text-4xl"></i>
<i class="fa-brands fa-google text-4xl"></i>
</div>
</div>
</section>
<!-- block:end clients -->
<!-- block:start pricing -->
<section id="pricing" class="py-24 bg-[#030712] relative overflow-hidden">
<div
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-blue-500/5 rounded-full blur-[120px]"
></div>
<div class="max-w-7xl mx-auto px-6 relative z-10">
<div class="text-center space-y-4 mb-16">
<h2 class="text-4xl font-bold">Simple, Scalable Pricing</h2>
<p class="text-gray-400">
Choose the perfect plan for your business journey.
</p>
<div class="flex items-center justify-center mt-8">
<div
class="bg-white/5 p-1 rounded-full border border-white/10 flex"
role="group"
aria-label="Pricing type"
>
<button
type="button"
class="pricing-toggle px-6 py-1.5 rounded-full text-xs font-bold hover:text-white transition-colors"
data-pricing-type="individual"
aria-pressed="true"
>
Individual
</button>
<button
type="button"
class="pricing-toggle px-6 py-1.5 rounded-full text-xs font-bold hover:text-white transition-colors"
data-pricing-type="enterprise"
aria-pressed="false"
>
Enterprise
</button>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
<!-- Starter -->
<div
class="glass-card p-8 rounded-2xl flex flex-col group hover:border-blue-500/30 transition-all duration-500"
>
<div class="mb-8">
<h3 class="text-lg font-bold mb-2">Lite</h3>
<div class="text-4xl font-black mb-1" aria-live="polite">
<span data-pricing-value>$49</span
><span
class="text-sm font-normal text-gray-400"
data-pricing-period
>/mo</span
>
</div>
<p class="text-sm text-gray-500">
For freelancers and small agencies.
</p>
</div>
<ul class="space-y-4 mb-8 flex-grow">
<li class="flex items-center gap-3 text-sm text-gray-400">
<i class="fa-solid fa-check text-blue-500"></i> Up to 5
campaigns
</li>
<li class="flex items-center gap-3 text-sm text-gray-400">
<i class="fa-solid fa-check text-blue-500"></i> Standard
analytics
</li>
<li class="flex items-center gap-3 text-sm text-gray-400">
<i class="fa-solid fa-check text-blue-500"></i> Weekly reports
</li>
</ul>
<button
class="w-full py-3 rounded-xl border border-white/10 font-bold hover:bg-white/5 transition-all"
>
Get Started
</button>
</div>
<!-- Growth -->
<div
class="glass-card p-8 rounded-2xl flex flex-col relative border-blue-600/50 shadow-[0_0_40px_rgba(37,99,235,0.1)] group hover:scale-[1.02] transition-all duration-500"
>
<div
class="absolute -top-4 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-[10px] font-black uppercase tracking-widest px-4 py-1 rounded-full shadow-lg shadow-blue-900/40"
>
Most Popular
</div>
<div class="mb-8">
<h3 class="text-lg font-bold mb-2">Growth</h3>
<div class="text-4xl font-black mb-1" aria-live="polite">
<span data-pricing-value>$129</span
><span
class="text-sm font-normal text-gray-400"
data-pricing-period
>/mo</span
>
</div>
<p class="text-sm text-gray-500">
For growing teams and businesses.
</p>
</div>
<ul class="space-y-4 mb-8 flex-grow">
<li class="flex items-center gap-3 text-sm text-white/80">
<i class="fa-solid fa-check text-blue-500"></i> Unlimited
campaigns
</li>
<li class="flex items-center gap-3 text-sm text-white/80">
<i class="fa-solid fa-check text-blue-500"></i> Real-time
insights
</li>
<li class="flex items-center gap-3 text-sm text-white/80">
<i class="fa-solid fa-check text-blue-500"></i> AI-powered
optimization
</li>
<li class="flex items-center gap-3 text-sm text-white/80">
<i class="fa-solid fa-check text-blue-500"></i> Priority
support
</li>
</ul>
<button
class="w-full py-3 rounded-xl bg-blue-600 text-white font-bold hover:bg-blue-700 transition-all shadow-lg shadow-blue-900/20"
>
Upgrade Now
</button>
</div>
<!-- Pro -->
<div
class="glass-card p-8 rounded-2xl flex flex-col group hover:border-blue-500/30 transition-all duration-500"
>
<div class="mb-8">
<h3 class="text-lg font-bold mb-2">Enterprise</h3>
<div class="text-4xl font-black mb-1" aria-live="polite">
<span data-pricing-value>Custom</span
><span
class="text-sm font-normal text-gray-400"
data-pricing-period
hidden
></span>
</div>
<p class="text-sm text-gray-500">
Tailored solutions for global scales.
</p>
</div>
<ul class="space-y-4 mb-8 flex-grow">
<li class="flex items-center gap-3 text-sm text-gray-400">
<i class="fa-solid fa-check text-blue-500"></i> Custom
integrations
</li>
<li class="flex items-center gap-3 text-sm text-gray-400">
<i class="fa-solid fa-check text-blue-500"></i> Dedicated
manager
</li>
<li class="flex items-center gap-3 text-sm text-gray-400">
<i class="fa-solid fa-check text-blue-500"></i> 24/7 Premium
support
</li>
</ul>
<button
class="w-full py-3 rounded-xl border border-white/10 font-bold hover:bg-white/5 transition-all"
>
Contact Sales
</button>
</div>
</div>
</div>
</section>
<!-- block:end pricing -->
<!-- block:start features -->
<section id="features" class="py-24">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16 space-y-4">
<div
class="inline-block px-3 py-1 rounded-full bg-white/5 border border-white/10 text-xs font-bold text-blue-400"
>
Powerful Features
</div>
<h2 class="text-4xl font-bold">Insights That Drive ROI</h2>
<p class="text-gray-400 max-w-xl mx-auto">
Track, analyze, and optimize your entire digital footprint from a
single intuitive command center.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Analytics Card -->
<div
class="glass-card rounded-[2rem] p-8 space-y-8 group overflow-hidden"
>
<div class="space-y-3">
<h3 class="text-2xl font-bold">
Real-Time Performance Tracking
</h3>
<p class="text-gray-500">
Gain instant visibility into user behavior and conversion
metrics across all your active channels.
</p>
</div>
<div
class="bg-[#0b0e14] border border-white/5 rounded-2xl p-6 h-64 relative overflow-hidden"
>
<div class="flex justify-between items-center mb-4">
<div class="w-24 h-2 bg-white/10 rounded"></div>
<div
class="w-12 h-6 bg-blue-500/20 rounded-full border border-blue-500/30 flex items-center justify-center text-[10px] font-bold text-blue-400"
>
LIVE
</div>
</div>
<div class="flex items-end h-32 gap-1.5">
<div class="w-full bg-blue-500/20 h-[40%] rounded"></div>
<div class="w-full bg-blue-500/30 h-[60%] rounded"></div>
<div class="w-full bg-blue-500/40 h-[50%] rounded"></div>
<div class="w-full bg-blue-600 h-[80%] rounded"></div>
<div class="w-full bg-blue-500/40 h-[65%] rounded"></div>
<div class="w-full bg-blue-500/20 h-[45%] rounded"></div>
<div class="w-full bg-blue-500/30 h-[55%] rounded"></div>
</div>
<div class="mt-4 flex justify-between">
<div class="w-1/4 h-2 bg-white/5 rounded"></div>
<div class="w-1/4 h-2 bg-white/5 rounded"></div>
</div>
</div>
</div>
<!-- Strategy Card -->
<div
class="glass-card rounded-[2rem] p-8 space-y-8 group overflow-hidden"
>
<div class="space-y-3">
<h3 class="text-2xl font-bold">Intelligent Decision Engine</h3>
<p class="text-gray-500">
Leverage advanced machine learning to predict trends and
automate budget allocation for maximum impact.
</p>
</div>
<div
class="bg-[#0b0e14] border border-white/5 rounded-2xl p-6 h-64 grid grid-cols-2 gap-4"
>
<div class="bg-white/5 rounded-xl p-4 space-y-4">
<div class="w-1/2 h-2 bg-white/10 rounded"></div>
<div class="flex items-center gap-2">
<div
class="w-8 h-8 rounded-full border-4 border-blue-500 border-r-transparent"
></div>
<div class="w-8 h-2 bg-blue-400/50 rounded"></div>
</div>
</div>
<div class="bg-white/5 rounded-xl p-4 space-y-4">
<div class="w-1/2 h-2 bg-white/10 rounded"></div>
<div class="flex items-center gap-2">
<div
class="w-8 h-8 rounded-full border-4 border-indigo-500 border-b-transparent"
></div>
<div class="w-8 h-2 bg-indigo-400/50 rounded"></div>
</div>
</div>
<div
class="col-span-2 bg-white/5 rounded-xl p-4 flex items-center justify-between"
>
<div class="flex gap-2">
<div class="w-6 h-6 rounded-full bg-white/10"></div>
<div class="w-20 h-2 bg-white/10 rounded mt-2"></div>
</div>
<div
class="w-12 h-4 bg-green-500/20 rounded-full border border-green-500/30"
></div>
</div>
</div>
</div>
</div>
<div class="mt-12 flex flex-wrap justify-center gap-4">
<span
class="px-4 py-1.5 rounded-full bg-white/5 border border-white/10 text-xs font-medium text-gray-400"
>Budget Optimization</span
>
<span
class="px-4 py-1.5 rounded-full bg-white/5 border border-white/10 text-xs font-medium text-gray-400"
>Churn Prediction</span
>
<span
class="px-4 py-1.5 rounded-full bg-white/5 border border-white/10 text-xs font-medium text-gray-400"
>Sentiment Analysis</span
>
<span
class="px-4 py-1.5 rounded-full bg-white/5 border border-white/10 text-xs font-medium text-gray-400"
>Creative Audit</span
>
</div>
</div>
</section>
<!-- block:end features -->
<!-- block:start features-2 -->
<section id="solutions" class="py-24 bg-[#050914]">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="space-y-6 text-center md:text-left">
<div
class="w-12 h-12 bg-blue-600/10 rounded-xl flex items-center justify-center text-blue-500 mx-auto md:mx-0"
>
<i class="fa-solid fa-wand-magic-sparkles text-xl"></i>
</div>
<h4 class="text-xl font-bold">Campaign Automation</h4>
<p class="text-gray-500 text-sm leading-relaxed">
Let AI handle the repetitive tasks while you focus on high-level
creative strategy and vision.
</p>
</div>
<div class="space-y-6 text-center md:text-left">
<div
class="w-12 h-12 bg-indigo-600/10 rounded-xl flex items-center justify-center text-indigo-500 mx-auto md:mx-0"
>
<i class="fa-solid fa-database text-xl"></i>
</div>
<h4 class="text-xl font-bold">Unified Data Layer</h4>
<p class="text-gray-500 text-sm leading-relaxed">
Break down silos by centralizing all your platform data into a
single, queryable source of truth.
</p>
</div>
<div class="space-y-6 text-center md:text-left">
<div
class="w-12 h-12 bg-purple-600/10 rounded-xl flex items-center justify-center text-purple-500 mx-auto md:mx-0"
>
<i class="fa-solid fa-user-group text-xl"></i>
</div>
<h4 class="text-xl font-bold">Precision Targeting</h4>
<p class="text-gray-500 text-sm leading-relaxed">
Identify and reach your ideal customer segments with laser
precision using behavioral triggers.
</p>
</div>
</div>
</div>
</section>
<!-- block:end features-2 -->
<!-- block:start faq -->
<section id="faq" class="py-24">
<div class="max-w-3xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold mb-4">Common Questions</h2>
<p class="text-gray-400">
Everything you need to know about PulseMedia.
</p>
</div>
<div class="space-y-4">
<div
class="glass-card rounded-2xl overflow-hidden border border-white/5 transition-all duration-300"
>
<button
id="faq-button-1"
type="button"
class="faq-toggle w-full px-8 py-6 flex items-center justify-between gap-6 text-left group"
aria-expanded="true"
aria-controls="faq-panel-1"
>
<span class="font-bold"
>How does the AI optimization actually work?</span
>
<i
class="faq-chevron fa-solid fa-chevron-down shrink-0 text-gray-500 group-hover:text-blue-500"
aria-hidden="true"
></i>
</button>
<div
id="faq-panel-1"
role="region"
aria-labelledby="faq-button-1"
>
<p class="px-8 pb-6 text-gray-500 text-sm leading-relaxed">
Our proprietary engine analyzes historical performance data
against real-time market trends to adjust bids, budgets, and
targeting parameters every minute.
</p>
</div>
</div>
<div
class="glass-card rounded-2xl overflow-hidden border border-white/5 transition-all duration-300"
>
<button
id="faq-button-2"
type="button"
class="faq-toggle w-full px-8 py-6 flex items-center justify-between gap-6 text-left group"
aria-expanded="false"
aria-controls="faq-panel-2"
>
<span class="font-bold">Can I integrate my existing CRM?</span>
<i
class="faq-chevron fa-solid fa-chevron-down shrink-0 text-gray-500 group-hover:text-blue-500"
aria-hidden="true"
></i>
</button>
<div
id="faq-panel-2"
role="region"
aria-labelledby="faq-button-2"
hidden
>
<p class="px-8 pb-6 text-gray-500 text-sm leading-relaxed">
Yes. PulseMedia connects with leading CRM platforms and
supports custom integrations through its API, keeping campaign
and customer data synchronized.
</p>
</div>
</div>
<div
class="glass-card rounded-2xl overflow-hidden border border-white/5 transition-all duration-300"
>
<button
id="faq-button-3"
type="button"
class="faq-toggle w-full px-8 py-6 flex items-center justify-between gap-6 text-left group"
aria-expanded="false"
aria-controls="faq-panel-3"
>
<span class="font-bold"
>Is PulseMedia suitable for small businesses?</span
>
<i
class="faq-chevron fa-solid fa-chevron-down shrink-0 text-gray-500 group-hover:text-blue-500"
aria-hidden="true"
></i>
</button>
<div
id="faq-panel-3"
role="region"
aria-labelledby="faq-button-3"
hidden
>
<p class="px-8 pb-6 text-gray-500 text-sm leading-relaxed">
Absolutely. The Lite plan gives smaller teams the essential
campaign tracking and reporting tools they need, with room to
upgrade as they grow.
</p>
</div>
</div>
<div
class="glass-card rounded-2xl overflow-hidden border border-white/5 transition-all duration-300"
>
<button
id="faq-button-4"
type="button"
class="faq-toggle w-full px-8 py-6 flex items-center justify-between gap-6 text-left group"
aria-expanded="false"
aria-controls="faq-panel-4"
>
<span class="font-bold">What kind of support is included?</span>
<i
class="faq-chevron fa-solid fa-chevron-down shrink-0 text-gray-500 group-hover:text-blue-500"
aria-hidden="true"
></i>
</button>
<div
id="faq-panel-4"
role="region"
aria-labelledby="faq-button-4"
hidden
>
<p class="px-8 pb-6 text-gray-500 text-sm leading-relaxed">
Every plan includes access to the help center and product
guidance. Growth and Enterprise customers also receive
priority support from our specialists.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- block:end faq -->
<!-- block:start contact -->
<section id="contact" class="py-24 border-t border-white/5">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16 space-y-4">
<h2 class="text-4xl font-bold">Need Personal Assistance?</h2>
<p class="text-gray-400">
Our team is here to help you navigate your growth journey.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<div
class="glass-card p-10 rounded-[2.5rem] text-center space-y-6 group cursor-pointer hover:bg-white/[0.05] transition-all"
>
<div
class="w-16 h-16 bg-blue-600/10 rounded-full flex items-center justify-center text-blue-500 mx-auto group-hover:scale-110 transition-transform"
>
<i class="fa-solid fa-headset text-2xl"></i>
</div>
<div class="space-y-2">
<h4 class="text-xl font-bold">Expert Support</h4>
<p class="text-gray-500 text-sm">
Facing technical hurdles? Our support engineers are available
round the clock.
</p>
</div>
<a
href="#"
class="inline-block px-8 py-3 rounded-full bg-blue-600 text-white font-bold text-sm"
>Help Center</a
>
</div>
<div
class="glass-card p-10 rounded-[2.5rem] text-center space-y-6 group cursor-pointer hover:bg-white/[0.05] transition-all"
>
<div
class="w-16 h-16 bg-indigo-600/10 rounded-full flex items-center justify-center text-indigo-500 mx-auto group-hover:scale-110 transition-transform"
>
<i class="fa-solid fa-paper-plane text-2xl"></i>
</div>
<div class="space-y-2">
<h4 class="text-xl font-bold">Sales Inquiry</h4>
<p class="text-gray-500 text-sm">
Want to discuss enterprise volume or custom needs? Talk to our
consultants.
</p>
</div>
<a
href="#"
class="inline-block px-8 py-3 rounded-full bg-indigo-600 text-white font-bold text-sm"
>Contact Sales</a
>
</div>
</div>
</div>
</section>
<!-- block:end contact -->
</main>
<!-- block:start footer -->
<footer id="footer" class="py-20 border-t border-white/5 bg-[#030712]">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-20">
<div class="col-span-1 md:col-span-1 space-y-6">
<div class="flex items-center gap-2">
<div
class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center"
>
<i class="fa-solid fa-bolt-lightning text-white text-sm"></i>
</div>
<span class="text-xl font-bold tracking-tight">PulseMedia</span>
</div>
<p class="text-gray-500 text-sm leading-relaxed">
Elevating marketing standards through intelligence and automation.
Scale with confidence.
</p>
<div class="flex gap-4">
<a
href="#"
class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-500 hover:text-white transition-all"
><i class="fa-brands fa-instagram"></i
></a>
<a
href="#"
class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-500 hover:text-white transition-all"
><i class="fa-brands fa-twitter"></i
></a>
<a
href="#"
class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-500 hover:text-white transition-all"
><i class="fa-brands fa-linkedin-in"></i
></a>
</div>
</div>
<div>
<h5
class="text-sm font-bold uppercase tracking-widest text-gray-300 mb-6"
>
Product
</h5>
<ul class="space-y-4 text-sm text-gray-500">
<li>
<a href="#" class="hover:text-blue-400 transition-colors"
>Features</a
>
</li>
<li>
<a href="#" class="hover:text-blue-400 transition-colors"
>Integrations</a
>
</li>
<li>
<a href="#" class="hover:text-blue-400 transition-colors"
>Pricing</a
>
</li>
<li>
<a href="#" class="hover:text-blue-400 transition-colors"
>Updates</a
>
</li>
</ul>
</div>
<div>
<h5
class="text-sm font-bold uppercase tracking-widest text-gray-300 mb-6"
>
Company
</h5>
<ul class="space-y-4 text-sm text-gray-500">
<li>
<a href="#" class="hover:text-blue-400 transition-colors"
>About Us</a
>
</li>
<li>
<a href="#" class="hover:text-blue-400 transition-colors"
>Teams</a
>
</li>
<li>
<a href="#" class="hover:text-blue-400 transition-colors"
>Careers</a
>
</li>
<li>
<a href="#" class="hover:text-blue-400 transition-colors"
>Contact</a
>
</li>
</ul>
</div>
<div>
<h5
class="text-sm font-bold uppercase tracking-widest text-gray-300 mb-6"
>
Resources
</h5>
<ul class="space-y-4 text-sm text-gray-500">
<li>
<a href="#" class="hover:text-blue-400 transition-colors"
>Help Center</a
>
</li>
<li>
<a href="#" class="hover:text-blue-400 transition-colors"
>Case Studies</a
>
</li>
<li>
<a href="#" class="hover:text-blue-400 transition-colors"
>Blog</a
>
</li>
<li>
<a href="#" class="hover:text-blue-400 transition-colors"
>API Docs</a
>
</li>
</ul>
</div>
</div>
<div
class="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-gray-600 font-medium"
>
<div class="flex gap-8">
<a href="#" class="hover:text-white transition-colors"
>Privacy Policy</a
>
<a href="#" class="hover:text-white transition-colors"
>Terms of Conditions</a
>
</div>
<p>PulseMedia, All rights reserved © 2024</p>
</div>
</div>
</footer>
<!-- block:end footer -->
<script>
const pricingOptions = {
individual: [
{ value: "$49", period: "/mo" },
{ value: "$129", period: "/mo" },
{ value: "Custom", period: "" },
],
enterprise: [
{ value: "$249", period: "/mo" },
{ value: "$599", period: "/mo" },
{ value: "$1,499", period: "/mo" },
],
};
const pricingValues = document.querySelectorAll("[data-pricing-value]");
const pricingPeriods = document.querySelectorAll("[data-pricing-period]");
document.querySelectorAll(".pricing-toggle").forEach((button) => {
button.addEventListener("click", () => {
const selectedPricing = pricingOptions[button.dataset.pricingType];
document
.querySelectorAll(".pricing-toggle")
.forEach((pricingButton) => {
pricingButton.setAttribute(
"aria-pressed",
String(pricingButton === button),
);
});
selectedPricing.forEach((price, index) => {
pricingValues[index].textContent = price.value;
pricingPeriods[index].textContent = price.period;
pricingPeriods[index].hidden = !price.period;
});
});
});
document.querySelectorAll(".faq-toggle").forEach((button) => {
button.addEventListener("click", () => {
const wasExpanded = button.getAttribute("aria-expanded") === "true";
document.querySelectorAll(".faq-toggle").forEach((faqButton) => {
const panel = document.getElementById(
faqButton.getAttribute("aria-controls"),
);
faqButton.setAttribute("aria-expanded", "false");
panel.hidden = true;
});
if (!wasExpanded) {
const panel = document.getElementById(
button.getAttribute("aria-controls"),
);
button.setAttribute("aria-expanded", "true");
panel.hidden = false;
}
});
});
const mobileMenuButton = document.getElementById("mobile-menu-button");
const mobileNavigation = document.getElementById("mobile-navigation");
mobileMenuButton.addEventListener("click", () => {
const isOpen = mobileMenuButton.getAttribute("aria-expanded") === "true";
mobileMenuButton.setAttribute("aria-expanded", String(!isOpen));
mobileNavigation.hidden = isOpen;
});
mobileNavigation.querySelectorAll("a").forEach((link) => {
link.addEventListener("click", () => {
mobileMenuButton.setAttribute("aria-expanded", "false");
mobileNavigation.hidden = true;
});
});
</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
