app landing-page mobile download features testimonials modern
App Landing Modern
Modern mobile app landing page with CSS phone mockup, feature grid, testimonials, and download CTA section.
modern Responsive
Live Preview
Sections
navbarherophone-mockupfeatures-gridtestimonialsdownload-ctafooter
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pulse — Your Life, Organized</title>
<meta name="description" content="Pulse is the mobile app that helps you organize your life, track habits, and stay productive." />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
body { font-family: 'Inter', sans-serif; }
html { scroll-behavior: smooth; }
/* ── Brand tokens ────────────────────────────────────────── */
:root {
--ws-color-surface: #ffffff;
--ws-color-surface-alt: #faf5ff;
--ws-color-surface-muted: #f3e8ff;
--ws-color-text: #0f172a;
--ws-color-text-soft: #1e293b;
--ws-color-text-muted: #64748b;
--ws-color-text-faint: #94a3b8;
--ws-color-border: #e2e8f0;
--ws-color-primary: #7c3aed;
--ws-color-primary-hover: #6d28d9;
--ws-color-primary-soft: rgba(124,58,237,0.08);
--ws-color-primary-text: #ffffff;
}
/* ── Snippet: interactions/hover-lift ────────────────────── */
.hover-lift {
--lift-distance: -4px;
--lift-shadow: 0 8px 24px oklch(0 0 0 / 0.15);
--lift-duration: 0.25s;
transition:
transform var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1),
box-shadow var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
transform: translateY(var(--lift-distance));
box-shadow: var(--lift-shadow);
}
@media (prefers-reduced-motion: reduce) {
.hover-lift { transition: none; }
}
</style>
</head>
<body class="bg-white text-slate-800 antialiased">
<!-- Navbar -->
<nav class="ws-navbar sticky top-0 z-50 bg-white/80 backdrop-blur-lg border-b border-slate-100" aria-label="Main navigation">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
<a href="#" class="flex items-center gap-2 text-xl font-bold text-violet-600" aria-label="Pulse home">
<svg class="w-8 h-8" viewBox="0 0 32 32" fill="none" aria-hidden="true">
<rect width="32" height="32" rx="10" fill="#7C3AED" />
<path d="M8 16h4l3-8 4 16 3-8h4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Pulse
</a>
<div class="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600">
<a href="#features" class="hover:text-violet-600 transition-colors">Features</a>
<a href="#testimonials" class="hover:text-violet-600 transition-colors">Reviews</a>
<a href="#download" class="hover:text-violet-600 transition-colors">Download</a>
</div>
<a href="#download" class="hidden md:inline-flex text-sm font-semibold px-5 py-2.5 rounded-full bg-violet-600 text-white hover:bg-violet-700 transition-colors shadow-sm">
Get the App
</a>
<button class="md:hidden p-2 rounded-lg hover:bg-slate-100" aria-label="Toggle menu">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
</div>
</nav>
<!-- Hero -->
<section class="ws-hero relative overflow-hidden bg-gradient-to-b from-violet-50 to-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-28 lg:py-32">
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
<div class="text-center lg:text-left">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-violet-100 text-violet-700 text-sm font-medium mb-6">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
Rated 4.9 on App Store
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 leading-tight tracking-tight mb-6">
Your life,<br /><span class="text-violet-600">beautifully organized</span>
</h1>
<p class="text-lg text-slate-500 max-w-lg mx-auto lg:mx-0 mb-8 leading-relaxed">
Pulse combines task management, habit tracking, and daily journaling into one elegant app. Stay focused on what matters most.
</p>
<div class="flex flex-col sm:flex-row items-center gap-4 justify-center lg:justify-start">
<a href="#" class="flex items-center gap-3 px-6 py-3 rounded-xl bg-slate-900 text-white hover:bg-slate-800 transition">
<svg class="w-7 h-7" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
<div class="text-left">
<p class="text-[10px] leading-none text-slate-300">Download on the</p>
<p class="text-base font-semibold leading-tight">App Store</p>
</div>
</a>
<a href="#" class="flex items-center gap-3 px-6 py-3 rounded-xl bg-slate-900 text-white hover:bg-slate-800 transition">
<svg class="w-7 h-7" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 01-.61-.92V2.734a1 1 0 01.609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-1.832l2.702 1.564a1 1 0 010 1.722l-2.702 1.564-2.564-2.564 2.564-2.286zM5.864 2.658L16.8 9.29l-2.3 2.3-8.636-8.932z"/></svg>
<div class="text-left">
<p class="text-[10px] leading-none text-slate-300">Get it on</p>
<p class="text-base font-semibold leading-tight">Google Play</p>
</div>
</a>
</div>
</div>
<!-- Phone Mockup -->
<div class="flex justify-center lg:justify-end">
<div class="relative w-72 sm:w-80">
<div class="relative bg-slate-900 rounded-[3rem] p-3 shadow-2xl shadow-violet-600/20">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-36 h-7 bg-slate-900 rounded-b-3xl z-10"></div>
<div class="rounded-[2.3rem] overflow-hidden bg-gradient-to-br from-violet-500 via-purple-500 to-fuchsia-500 aspect-[9/19.5] flex flex-col items-center justify-center text-white p-6">
<p class="text-sm font-medium opacity-80 mb-1">Good morning</p>
<p class="text-2xl font-bold mb-6">Sarah</p>
<div class="w-full space-y-3">
<div class="bg-white/20 backdrop-blur rounded-xl p-3 flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-white/30 flex items-center justify-center text-xs">5</div>
<div>
<p class="text-sm font-semibold">Tasks today</p>
<p class="text-xs opacity-75">3 completed</p>
</div>
</div>
<div class="bg-white/20 backdrop-blur rounded-xl p-3 flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-white/30 flex items-center justify-center text-xs">7</div>
<div>
<p class="text-sm font-semibold">Day streak</p>
<p class="text-xs opacity-75">Keep it going!</p>
</div>
</div>
<div class="bg-white/20 backdrop-blur rounded-xl p-3 flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-white/30 flex items-center justify-center text-xs">92</div>
<div>
<p class="text-sm font-semibold">Focus score</p>
<p class="text-xs opacity-75">Excellent!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features Grid -->
<section id="features" class="ws-features py-20 sm:py-28">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-16">
<p class="text-sm font-semibold text-violet-600 uppercase tracking-wider mb-3">Features</p>
<h2 class="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">Everything you need, nothing you don't</h2>
<p class="text-lg text-slate-500">Pulse is designed to be simple yet powerful. Here's what makes it special.</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="hover-lift p-6 rounded-2xl bg-slate-50 hover:bg-violet-50 transition-colors">
<div class="w-12 h-12 rounded-xl bg-violet-100 text-violet-600 flex items-center justify-center mb-4">
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 mb-2">Smart Tasks</h3>
<p class="text-slate-500 leading-relaxed">AI-powered task prioritization that learns from your habits and adjusts deadlines automatically.</p>
</div>
<div class="hover-lift p-6 rounded-2xl bg-slate-50 hover:bg-violet-50 transition-colors">
<div class="w-12 h-12 rounded-xl bg-violet-100 text-violet-600 flex items-center justify-center mb-4">
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6" /></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 mb-2">Habit Tracking</h3>
<p class="text-slate-500 leading-relaxed">Build lasting habits with streak counters, visual progress charts, and gentle daily reminders.</p>
</div>
<div class="hover-lift p-6 rounded-2xl bg-slate-50 hover:bg-violet-50 transition-colors">
<div class="w-12 h-12 rounded-xl bg-violet-100 text-violet-600 flex items-center justify-center mb-4">
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 013 3h-15a3 3 0 013-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 01-.982-3.172M9.497 14.25a7.454 7.454 0 00.981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 007.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M18.75 4.236c.982.143 1.954.317 2.916.52A6.003 6.003 0 0016.27 9.728M18.75 4.236V4.5c0 2.108-.966 3.99-2.48 5.228m0 0a6.023 6.023 0 01-7.54 0" /></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 mb-2">Focus Mode</h3>
<p class="text-slate-500 leading-relaxed">Block distractions with customizable focus sessions. Pomodoro timer built right in.</p>
</div>
<div class="hover-lift p-6 rounded-2xl bg-slate-50 hover:bg-violet-50 transition-colors">
<div class="w-12 h-12 rounded-xl bg-violet-100 text-violet-600 flex items-center justify-center mb-4">
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" /></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 mb-2">Daily Journal</h3>
<p class="text-slate-500 leading-relaxed">Reflect on your day with guided journaling prompts and mood tracking to spot patterns.</p>
</div>
<div class="hover-lift p-6 rounded-2xl bg-slate-50 hover:bg-violet-50 transition-colors">
<div class="w-12 h-12 rounded-xl bg-violet-100 text-violet-600 flex items-center justify-center mb-4">
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 mb-2">Team Sharing</h3>
<p class="text-slate-500 leading-relaxed">Share goals and track progress with your accountability partners or team members.</p>
</div>
<div class="hover-lift p-6 rounded-2xl bg-slate-50 hover:bg-violet-50 transition-colors">
<div class="w-12 h-12 rounded-xl bg-violet-100 text-violet-600 flex items-center justify-center mb-4">
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z" /></svg>
</div>
<h3 class="text-lg font-semibold text-slate-900 mb-2">AI Insights</h3>
<p class="text-slate-500 leading-relaxed">Get personalized productivity insights powered by AI that help you optimize your daily routine.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials" class="ws-testimonials py-20 sm:py-28 bg-slate-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-16">
<p class="text-sm font-semibold text-violet-600 uppercase tracking-wider mb-3">Testimonials</p>
<h2 class="text-3xl sm:text-4xl font-bold text-slate-900">Loved by 50,000+ users</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
<div class="flex gap-1 text-amber-400 mb-4">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<p class="text-slate-600 leading-relaxed mb-4">"Pulse replaced three apps for me. Task management, habit tracking, and journaling — all in one beautiful interface."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-violet-100 flex items-center justify-center text-sm font-semibold text-violet-600">SK</div>
<div>
<p class="text-sm font-semibold text-slate-900">Sarah Kim</p>
<p class="text-xs text-slate-400">Product Designer</p>
</div>
</div>
</div>
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
<div class="flex gap-1 text-amber-400 mb-4">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<p class="text-slate-600 leading-relaxed mb-4">"The focus mode is a game-changer. I've increased my deep work hours by 40% since I started using Pulse."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-emerald-100 flex items-center justify-center text-sm font-semibold text-emerald-600">MR</div>
<div>
<p class="text-sm font-semibold text-slate-900">Marco Rivera</p>
<p class="text-xs text-slate-400">Software Engineer</p>
</div>
</div>
</div>
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
<div class="flex gap-1 text-amber-400 mb-4">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<p class="text-slate-600 leading-relaxed mb-4">"The journal feature helped me understand my productivity patterns. I'm more intentional with my time now."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-sm font-semibold text-amber-600">LT</div>
<div>
<p class="text-sm font-semibold text-slate-900">Lisa Thompson</p>
<p class="text-xs text-slate-400">Freelance Writer</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Download CTA -->
<section id="download" class="ws-cta py-20 sm:py-28">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="bg-gradient-to-br from-violet-600 to-purple-700 rounded-3xl p-10 sm:p-16 text-white">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Ready to get organized?</h2>
<p class="text-lg text-violet-200 max-w-md mx-auto mb-8">Download Pulse today and join 50,000+ people who are taking control of their productivity.</p>
<div class="flex flex-col sm:flex-row items-center gap-4 justify-center">
<a href="#" class="flex items-center gap-3 px-6 py-3 rounded-xl bg-white text-slate-900 font-semibold hover:bg-slate-100 transition shadow-lg">
<svg class="w-7 h-7" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
App Store
</a>
<a href="#" class="flex items-center gap-3 px-6 py-3 rounded-xl bg-white/20 text-white font-semibold hover:bg-white/30 transition">
<svg class="w-7 h-7" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 01-.61-.92V2.734a1 1 0 01.609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-1.832l2.702 1.564a1 1 0 010 1.722l-2.702 1.564-2.564-2.564 2.564-2.286zM5.864 2.658L16.8 9.29l-2.3 2.3-8.636-8.932z"/></svg>
Google Play
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="ws-footer border-t border-slate-100 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2 text-lg font-bold text-slate-900">
<svg class="w-7 h-7" viewBox="0 0 32 32" fill="none" aria-hidden="true">
<rect width="32" height="32" rx="10" fill="#7C3AED" />
<path d="M8 16h4l3-8 4 16 3-8h4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Pulse
</div>
<div class="flex items-center gap-6 text-sm text-slate-500">
<a href="#" class="hover:text-slate-700 transition-colors">Privacy</a>
<a href="#" class="hover:text-slate-700 transition-colors">Terms</a>
<a href="#" class="hover:text-slate-700 transition-colors">Contact</a>
</div>
<p class="text-sm text-slate-400">© 2026 Pulse. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>
Complete mobile app landing page with a modern violet color palette. Features a CSS phone mockup in the hero, 6-feature grid, 3-column testimonials, and a gradient download CTA section with App Store and Google Play badges.