consulting coaching personal-brand testimonials packages booking creative
Consulting Coach
Personal brand coaching page with service packages, testimonials, and booking CTA.
creative Responsive
Live Preview
Sections
navbarheroofferingstestimonialsbooking-ctastorycontactfooter
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>Elena Rivera — Business & Life Coach</title>
<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">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
/* Brand tokens */
:root {
--ws-color-accent: oklch(0.53 0.22 10); /* rose-600 */
--ws-color-accent-hover: oklch(0.58 0.22 10); /* rose-500 */
--ws-color-accent-subtle: oklch(0.97 0.04 10); /* rose-50 */
--ws-color-accent-muted: oklch(0.75 0.15 10); /* rose-300 */
--ws-color-warm-light: oklch(0.96 0.03 55); /* orange-50 warm tint */
}
</style>
</head>
<body class="bg-white text-slate-900 antialiased">
<!-- Navbar -->
<nav class="ws-navbar sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-slate-100" aria-label="Main navigation">
<div class="max-w-6xl mx-auto flex items-center justify-between px-4 sm:px-6 py-4">
<a href="#" class="text-xl font-bold tracking-tight text-rose-600">Elena Rivera</a>
<ul class="hidden md:flex items-center gap-8 text-sm text-slate-600">
<li><a href="#offerings" class="hover:text-rose-600 transition-colors">Services</a></li>
<li><a href="#testimonials" class="hover:text-rose-600 transition-colors">Testimonials</a></li>
<li><a href="#story" class="hover:text-rose-600 transition-colors">About</a></li>
<li><a href="#contact" class="hover:text-rose-600 transition-colors">Contact</a></li>
</ul>
<a href="#book" class="hidden sm:inline-flex px-5 py-2.5 text-sm font-semibold text-white bg-rose-600 rounded-full hover:bg-rose-500 transition-colors">Book a Call</a>
<button class="md:hidden p-2 text-slate-600" aria-label="Open menu">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
</div>
</nav>
<!-- Hero -->
<section class="ws-hero py-24 sm:py-32 px-4">
<div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
<div>
<p class="text-rose-600 text-sm font-medium uppercase tracking-widest mb-4">Certified Executive Coach</p>
<h1 class="text-4xl sm:text-5xl font-bold leading-tight mb-6">Unlock Your Full Potential</h1>
<p class="text-slate-500 text-lg leading-relaxed mb-8">I help ambitious professionals and entrepreneurs break through limitations, find clarity, and build the life and career they truly want.</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#book" class="px-8 py-3.5 text-sm font-semibold text-white bg-rose-600 rounded-full hover:bg-rose-500 transition-colors text-center">Book a Free Discovery Call</a>
<a href="#offerings" class="px-8 py-3.5 text-sm font-semibold text-slate-700 border border-slate-200 rounded-full hover:bg-slate-50 transition-colors text-center">Explore Packages</a>
</div>
</div>
<div class="aspect-[3/4] bg-gradient-to-br from-rose-100 via-pink-50 to-orange-50 rounded-3xl flex items-center justify-center">
<span class="text-rose-300 text-sm">Portrait Photo</span>
</div>
</div>
</section>
<!-- Offerings -->
<section id="offerings" class="ws-pricing py-24 px-4 bg-rose-50/50">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-16">
<p class="text-rose-600 text-sm font-medium uppercase tracking-widest mb-3">Packages</p>
<h2 class="text-3xl sm:text-4xl font-bold">What I Offer</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="p-8 bg-white rounded-2xl border border-slate-100 shadow-sm">
<div class="w-12 h-12 flex items-center justify-center bg-rose-100 text-rose-600 rounded-xl mb-5">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
</div>
<h3 class="font-bold text-lg mb-1">Clarity Intensive</h3>
<p class="text-rose-600 font-semibold text-sm mb-4">$497 / one-time</p>
<p class="text-slate-500 text-sm leading-relaxed mb-6">A focused 3-session deep dive to identify your goals, overcome blocks, and create a clear action plan.</p>
<ul class="space-y-2 text-sm text-slate-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-rose-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>3 x 60-minute sessions</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-rose-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Personalized roadmap</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-rose-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Email support for 2 weeks</li>
</ul>
</div>
<div class="p-8 bg-white rounded-2xl border-2 border-rose-200 shadow-sm relative">
<div class="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 bg-rose-600 text-white text-xs font-semibold rounded-full">Most Popular</div>
<div class="w-12 h-12 flex items-center justify-center bg-rose-100 text-rose-600 rounded-xl mb-5">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
</div>
<h3 class="font-bold text-lg mb-1">Growth Accelerator</h3>
<p class="text-rose-600 font-semibold text-sm mb-4">$1,497 / 3 months</p>
<p class="text-slate-500 text-sm leading-relaxed mb-6">Comprehensive coaching program with bi-weekly sessions, accountability, and ongoing support.</p>
<ul class="space-y-2 text-sm text-slate-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-rose-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>6 x 75-minute sessions</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-rose-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Unlimited Voxer support</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-rose-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Weekly accountability check-ins</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-rose-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Resource library access</li>
</ul>
</div>
<div class="p-8 bg-white rounded-2xl border border-slate-100 shadow-sm">
<div class="w-12 h-12 flex items-center justify-center bg-rose-100 text-rose-600 rounded-xl mb-5">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
</div>
<h3 class="font-bold text-lg mb-1">VIP Day</h3>
<p class="text-rose-600 font-semibold text-sm mb-4">$2,997 / one day</p>
<p class="text-slate-500 text-sm leading-relaxed mb-6">An immersive full-day experience to tackle your biggest challenge and leave with a complete strategy.</p>
<ul class="space-y-2 text-sm text-slate-600">
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-rose-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>6-hour intensive session</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-rose-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>Complete strategy document</li>
<li class="flex items-start gap-2"><svg class="w-4 h-4 text-rose-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>30-day follow-up session</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials" class="ws-testimonials py-24 px-4">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-16">
<p class="text-rose-600 text-sm font-medium uppercase tracking-widest mb-3">Success Stories</p>
<h2 class="text-3xl sm:text-4xl font-bold">What My Clients Say</h2>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="p-8 bg-slate-50 rounded-2xl">
<p class="text-slate-600 leading-relaxed mb-6">"Elena helped me see things I'd been blind to for years. Within three months I got promoted, started a side project, and finally felt like I was living on my own terms. Her intuition is incredible."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-rose-200 rounded-full flex items-center justify-center text-rose-700 font-semibold text-sm">MK</div>
<div>
<p class="font-medium text-sm">Maria Kowalski</p>
<p class="text-slate-400 text-xs">VP of Product, TechCo</p>
</div>
</div>
</div>
<div class="p-8 bg-slate-50 rounded-2xl">
<p class="text-slate-600 leading-relaxed mb-6">"I came to Elena feeling completely burned out and stuck. She didn't just help me find clarity — she gave me the tools and confidence to completely redesign my career. Best investment I ever made."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-rose-200 rounded-full flex items-center justify-center text-rose-700 font-semibold text-sm">DR</div>
<div>
<p class="font-medium text-sm">David Ruiz</p>
<p class="text-slate-400 text-xs">Founder, Meridian Studio</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Booking CTA -->
<section id="book" class="ws-cta py-24 px-4 bg-gradient-to-br from-rose-600 to-pink-600 text-white">
<div class="max-w-2xl mx-auto text-center">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Ready to Make a Change?</h2>
<p class="text-rose-100 text-lg mb-10 leading-relaxed">Book a free 30-minute discovery call. No pressure, no pitch — just an honest conversation about where you are and where you want to be.</p>
<a href="#" class="inline-flex px-10 py-4 text-sm font-semibold bg-white text-rose-600 rounded-full hover:bg-rose-50 transition-colors">Book Your Free Call</a>
<p class="text-rose-200 text-sm mt-4">Limited spots available each month</p>
</div>
</section>
<!-- About / Story -->
<section id="story" class="py-24 px-4">
<div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-16 items-center">
<div class="aspect-[4/3] bg-gradient-to-br from-rose-100 to-orange-50 rounded-3xl flex items-center justify-center order-2 md:order-1">
<span class="text-rose-300 text-sm">Lifestyle Photo</span>
</div>
<div class="order-1 md:order-2">
<p class="text-rose-600 text-sm font-medium uppercase tracking-widest mb-3">My Story</p>
<h2 class="text-3xl sm:text-4xl font-bold mb-6">From Corporate Burnout to Purpose</h2>
<p class="text-slate-600 leading-relaxed mb-4">After 12 years climbing the corporate ladder — VP at 32, corner office, six-figure salary — I had everything society told me to want. And I was miserable.</p>
<p class="text-slate-600 leading-relaxed mb-4">That breaking point became my turning point. I invested in my own coaching journey, got certified through ICF, and discovered my calling: helping other high-achievers find fulfillment, not just success.</p>
<p class="text-slate-600 leading-relaxed mb-6">Today, I've coached over 300 professionals across 15 countries. My approach blends evidence-based psychology with practical strategy — because you deserve more than just "believe in yourself."</p>
<div class="ws-stats flex gap-6 text-sm text-slate-500">
<span class="font-medium">ICF Certified</span>
<span>•</span>
<span class="font-medium">300+ Clients</span>
<span>•</span>
<span class="font-medium">15 Countries</span>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="ws-contact py-24 px-4 bg-slate-50">
<div class="max-w-xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-4">Get in Touch</h2>
<p class="text-slate-500 mb-8">Have questions? Reach out directly — I respond within 48 hours.</p>
<div class="space-y-3 text-slate-600 mb-8">
<p><strong>Email:</strong> elena@elenarivera.com</p>
<p><strong>Instagram:</strong> @elenariveracoach</p>
<p><strong>LinkedIn:</strong> /in/elenarivera</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="ws-footer bg-slate-900 py-10 px-4">
<div class="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-6">
<a href="#" class="text-lg font-bold text-white">Elena Rivera</a>
<div class="flex gap-5">
<a href="#" class="text-slate-400 hover:text-rose-400 transition-colors" aria-label="Instagram">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
</a>
<a href="#" class="text-slate-400 hover:text-rose-400 transition-colors" aria-label="LinkedIn">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 23.2 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
<a href="#" class="text-slate-400 hover:text-rose-400 transition-colors" aria-label="YouTube">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
</a>
</div>
<p class="text-slate-500 text-sm">© 2026 Elena Rivera Coaching. All rights reserved.</p>
</div>
</footer>
</body>
</html>
Warm, personal coaching template with rose accents. Features a personal introduction hero with photo placeholder, three pricing packages (with “Most Popular” badge), client testimonials, a bold booking CTA section, and an origin story section.