consulting corporate business services case-studies contact-form corporate
Consulting Business
Corporate consulting firm page with services, case studies, and contact form.
corporate Responsive
Live Preview
Sections
navbarheroservicesaboutclient-logoscase-studiescontactfooter
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>Apex Consulting — Transform Your Business</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;800&display=swap');
body { font-family: 'Inter', sans-serif; }
/* Brand tokens */
:root {
--ws-color-accent: oklch(0.48 0.20 250); /* blue-600 */
--ws-color-accent-hover: oklch(0.43 0.20 250); /* blue-700 */
--ws-color-accent-subtle: oklch(0.95 0.04 250); /* blue-50 */
--ws-color-accent-muted: oklch(0.72 0.15 250); /* blue-400 */
--ws-color-surface-alt: oklch(0.97 0.004 250); /* slate-50 */
--ws-color-dark: oklch(0.21 0.016 250); /* slate-900 */
--ws-color-darkest: oklch(0.14 0.012 250); /* slate-950 */
}
</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-7xl mx-auto flex items-center justify-between px-4 sm:px-6 py-4">
<a href="#" class="text-xl font-bold tracking-tight">Apex<span class="text-blue-600">.</span></a>
<ul class="hidden md:flex items-center gap-8 text-sm text-slate-600">
<li><a href="#services" class="hover:text-blue-600 transition-colors">Services</a></li>
<li><a href="#about" class="hover:text-blue-600 transition-colors">About</a></li>
<li><a href="#cases" class="hover:text-blue-600 transition-colors">Case Studies</a></li>
<li><a href="#contact" class="hover:text-blue-600 transition-colors">Contact</a></li>
</ul>
<a href="#contact" class="hidden sm:inline-flex px-5 py-2.5 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">Get Started</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 bg-gradient-to-b from-slate-50 to-white">
<div class="max-w-4xl mx-auto text-center">
<div class="inline-flex items-center px-3 py-1 bg-blue-50 text-blue-700 text-xs font-medium rounded-full mb-6">Trusted by 200+ companies worldwide</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mb-6">Transform Your Business <span class="text-blue-600">With Confidence</span></h1>
<p class="text-slate-500 text-lg sm:text-xl max-w-2xl mx-auto mb-10 leading-relaxed">We help ambitious organizations navigate complexity, unlock growth, and build lasting competitive advantage through strategic consulting.</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#contact" class="px-8 py-3.5 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">Schedule a Consultation</a>
<a href="#cases" class="px-8 py-3.5 text-sm font-semibold text-slate-700 bg-slate-100 rounded-lg hover:bg-slate-200 transition-colors">View Case Studies</a>
</div>
</div>
</section>
<!-- Services -->
<section id="services" class="ws-features py-24 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<p class="text-blue-600 text-sm font-semibold uppercase tracking-widest mb-3">What We Do</p>
<h2 class="text-3xl sm:text-4xl font-bold">Our Services</h2>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="p-6 bg-slate-50 rounded-2xl border border-slate-100 hover:border-blue-200 transition-colors">
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 text-blue-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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
</div>
<h3 class="font-semibold text-lg mb-2">Strategy & Growth</h3>
<p class="text-slate-500 text-sm leading-relaxed">Market analysis, competitive positioning, and actionable growth roadmaps tailored to your industry.</p>
</div>
<div class="p-6 bg-slate-50 rounded-2xl border border-slate-100 hover:border-blue-200 transition-colors">
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 text-blue-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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</div>
<h3 class="font-semibold text-lg mb-2">Operations</h3>
<p class="text-slate-500 text-sm leading-relaxed">Process optimization, supply chain efficiency, and operational excellence to reduce costs and improve delivery.</p>
</div>
<div class="p-6 bg-slate-50 rounded-2xl border border-slate-100 hover:border-blue-200 transition-colors">
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 text-blue-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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
</div>
<h3 class="font-semibold text-lg mb-2">People & Culture</h3>
<p class="text-slate-500 text-sm leading-relaxed">Leadership development, organizational design, and culture transformation to attract and retain top talent.</p>
</div>
<div class="p-6 bg-slate-50 rounded-2xl border border-slate-100 hover:border-blue-200 transition-colors">
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 text-blue-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="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
</div>
<h3 class="font-semibold text-lg mb-2">Digital Transformation</h3>
<p class="text-slate-500 text-sm leading-relaxed">Technology strategy, digital adoption, and data-driven decision making for the modern enterprise.</p>
</div>
</div>
</div>
</section>
<!-- About / Team -->
<section id="about" class="py-24 px-4 bg-slate-50">
<div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-16 items-center">
<div>
<p class="text-blue-600 text-sm font-semibold uppercase tracking-widest mb-3">About Us</p>
<h2 class="text-3xl sm:text-4xl font-bold mb-6">25 Years of Delivering Results</h2>
<p class="text-slate-600 leading-relaxed mb-4">Founded in 2001, Apex Consulting has helped over 200 companies across 30 industries navigate their most critical challenges. Our team of 85 consultants brings deep expertise from McKinsey, BCG, Deloitte, and leading Fortune 500 companies.</p>
<p class="text-slate-600 leading-relaxed mb-8">We believe in partnerships, not projects. Every engagement is designed to transfer knowledge and build internal capability so our impact lasts long after we leave.</p>
<div class="ws-stats grid grid-cols-3 gap-6">
<div>
<p class="text-3xl font-extrabold text-blue-600">200+</p>
<p class="text-slate-500 text-sm">Clients Served</p>
</div>
<div>
<p class="text-3xl font-extrabold text-blue-600">$4.2B</p>
<p class="text-slate-500 text-sm">Value Created</p>
</div>
<div>
<p class="text-3xl font-extrabold text-blue-600">96%</p>
<p class="text-slate-500 text-sm">Client Retention</p>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="aspect-[3/4] bg-gradient-to-br from-slate-200 to-slate-300 rounded-2xl flex items-center justify-center"><span class="text-slate-400 text-xs">Team Photo 1</span></div>
<div class="aspect-[3/4] bg-gradient-to-br from-blue-100 to-slate-200 rounded-2xl flex items-center justify-center mt-8"><span class="text-slate-400 text-xs">Team Photo 2</span></div>
</div>
</div>
</section>
<!-- Client Logos -->
<section class="ws-logo-cloud py-16 px-4 border-y border-slate-100">
<div class="max-w-7xl mx-auto">
<p class="text-center text-slate-400 text-sm font-medium uppercase tracking-widest mb-10">Trusted By Industry Leaders</p>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-8 items-center">
<div class="h-10 bg-slate-100 rounded-lg flex items-center justify-center"><span class="text-slate-400 text-xs font-medium">Acme Corp</span></div>
<div class="h-10 bg-slate-100 rounded-lg flex items-center justify-center"><span class="text-slate-400 text-xs font-medium">TechFlow</span></div>
<div class="h-10 bg-slate-100 rounded-lg flex items-center justify-center"><span class="text-slate-400 text-xs font-medium">Pinnacle</span></div>
<div class="h-10 bg-slate-100 rounded-lg flex items-center justify-center"><span class="text-slate-400 text-xs font-medium">NovaStar</span></div>
<div class="h-10 bg-slate-100 rounded-lg flex items-center justify-center"><span class="text-slate-400 text-xs font-medium">Meridian</span></div>
<div class="h-10 bg-slate-100 rounded-lg flex items-center justify-center"><span class="text-slate-400 text-xs font-medium">Atlas Inc</span></div>
</div>
</div>
</section>
<!-- Case Studies -->
<section id="cases" class="ws-cards py-24 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<p class="text-blue-600 text-sm font-semibold uppercase tracking-widest mb-3">Results That Speak</p>
<h2 class="text-3xl sm:text-4xl font-bold">Case Studies</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="group bg-white border border-slate-200 rounded-2xl overflow-hidden hover:shadow-lg transition-shadow">
<div class="aspect-[16/10] bg-gradient-to-br from-blue-100 to-blue-50 flex items-center justify-center">
<span class="text-blue-300 text-sm">Case Study Image</span>
</div>
<div class="p-6">
<p class="text-blue-600 text-xs font-semibold uppercase tracking-wider mb-2">Manufacturing</p>
<h3 class="font-bold text-lg mb-2">40% Cost Reduction for Global Manufacturer</h3>
<p class="text-slate-500 text-sm leading-relaxed mb-4">Streamlined supply chain operations across 12 facilities, saving $180M annually through process optimization.</p>
<a href="#" class="text-blue-600 text-sm font-semibold hover:text-blue-700">Read Case Study →</a>
</div>
</div>
<div class="group bg-white border border-slate-200 rounded-2xl overflow-hidden hover:shadow-lg transition-shadow">
<div class="aspect-[16/10] bg-gradient-to-br from-emerald-100 to-emerald-50 flex items-center justify-center">
<span class="text-emerald-300 text-sm">Case Study Image</span>
</div>
<div class="p-6">
<p class="text-emerald-600 text-xs font-semibold uppercase tracking-wider mb-2">Healthcare</p>
<h3 class="font-bold text-lg mb-2">Digital Transformation at Regional Hospital</h3>
<p class="text-slate-500 text-sm leading-relaxed mb-4">Implemented an integrated patient management system, reducing wait times by 60% and improving satisfaction scores.</p>
<a href="#" class="text-blue-600 text-sm font-semibold hover:text-blue-700">Read Case Study →</a>
</div>
</div>
<div class="group bg-white border border-slate-200 rounded-2xl overflow-hidden hover:shadow-lg transition-shadow">
<div class="aspect-[16/10] bg-gradient-to-br from-purple-100 to-purple-50 flex items-center justify-center">
<span class="text-purple-300 text-sm">Case Study Image</span>
</div>
<div class="p-6">
<p class="text-purple-600 text-xs font-semibold uppercase tracking-wider mb-2">Financial Services</p>
<h3 class="font-bold text-lg mb-2">3x Revenue Growth for Fintech Startup</h3>
<p class="text-slate-500 text-sm leading-relaxed mb-4">Defined go-to-market strategy and operational framework that tripled ARR from $12M to $36M in 18 months.</p>
<a href="#" class="text-blue-600 text-sm font-semibold hover:text-blue-700">Read Case Study →</a>
</div>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="ws-contact py-24 px-4 bg-slate-900 text-white">
<div class="max-w-3xl mx-auto">
<div class="text-center mb-12">
<p class="text-blue-400 text-sm font-semibold uppercase tracking-widest mb-3">Let's Talk</p>
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Ready to Get Started?</h2>
<p class="text-slate-400">Tell us about your challenge. We'll respond within 24 hours.</p>
</div>
<form class="ws-forms space-y-6">
<div class="grid sm:grid-cols-2 gap-6">
<div>
<label for="name" class="block text-sm font-medium text-slate-300 mb-2">Full Name</label>
<input id="name" type="text" placeholder="Jane Smith" required class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-sm text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500" />
</div>
<div>
<label for="company" class="block text-sm font-medium text-slate-300 mb-2">Company</label>
<input id="company" type="text" placeholder="Acme Corp" class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-sm text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500" />
</div>
</div>
<div>
<label for="email" class="block text-sm font-medium text-slate-300 mb-2">Work Email</label>
<input id="email" type="email" placeholder="jane@acme.com" required class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-sm text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500" />
</div>
<div>
<label for="message" class="block text-sm font-medium text-slate-300 mb-2">How Can We Help?</label>
<textarea id="message" rows="4" placeholder="Tell us about your project or challenge..." required class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-sm text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"></textarea>
</div>
<button type="submit" class="w-full sm:w-auto px-8 py-3.5 text-sm font-semibold bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">Send Message</button>
</form>
</div>
</section>
<!-- Footer -->
<footer class="ws-footer bg-slate-950 py-12 px-4">
<div class="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-6">
<a href="#" class="text-lg font-bold text-white">Apex<span class="text-blue-500">.</span></a>
<ul class="flex gap-6 text-sm text-slate-500">
<li><a href="#" class="hover:text-white transition-colors">Privacy</a></li>
<li><a href="#" class="hover:text-white transition-colors">Terms</a></li>
<li><a href="#" class="hover:text-white transition-colors">Careers</a></li>
</ul>
<p class="text-slate-600 text-sm">© 2026 Apex Consulting. All rights reserved.</p>
</div>
</footer>
</body>
</html>
Professional corporate consulting template with blue accents. Features a services grid with icons, team/about section with stats, client logo bar, three case study cards, and a full contact form on a dark background.