Complete HTML Source Code
Click to save or print all HTML code
Page Name: Corporate Outplacement Services
Page URL: /outplacement
Total Sections: 5 main sections
Purpose: B2B outplacement services for companies
Target Audience: HR Directors, CHROs, Business Leaders
Created: January 2025
Description: Full-screen hero with headline, CTA buttons, image, and trust badges
<section class="code-section relative min-h-screen bg-gradient-to-br from-[#ECF5FF] via-white to-[#F5F5F5] py-20 overflow-hidden">
<!-- Decorative Elements -->
<div class="absolute top-0 right-0 w-96 h-96 bg-[#4A90E2] rounded-full blur-3xl opacity-10"></div>
<div class="absolute bottom-0 left-0 w-96 h-96 bg-[#50E3C2] rounded-full blur-3xl opacity-10"></div>
<div class="container mx-auto px-4 relative z-10">
<!-- Hero Content -->
<div class="max-w-6xl mx-auto">
<div class="grid lg:grid-cols-2 gap-12 items-center mb-20">
<div>
<div class="inline-block bg-[#4A90E2]/10 px-4 py-2 rounded-full mb-4">
<p class="text-[#4A90E2] font-semibold text-sm">FOR ORGANIZATIONS</p>
</div>
<h1 class="text-4xl lg:text-5xl font-bold text-[#333333] mb-6">
Corporate Outplacement Services
</h1>
<p class="text-xl text-[#9B9B9B] mb-6">
Support your transitioning employees with dignity while protecting your employer brand.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#contact-form" class="px-8 py-4 bg-[#4A90E2] text-white rounded-lg">
Request a Proposal
</a>
<a href="#how-it-works" class="px-8 py-4 bg-[#F5F5F5] text-[#333333] rounded-lg">
See How It Works
</a>
</div>
</div>
<div class="relative">
<img src="https://imagedelivery.net/..." alt="Professional handshake">
<!-- Stats Overlays -->
<div class="absolute -bottom-6 -left-6 bg-white rounded-xl shadow-xl p-6">
<p class="text-3xl font-bold text-[#4A90E2]">87%</p>
<p class="text-sm">Land new roles within 90 days</p>
</div>
</div>
</div>
</div>
<!-- Trust Badges -->
<div class="max-w-6xl mx-auto">
<p class="text-center text-[#9B9B9B] mb-8 font-semibold">
TRUSTED BY LEADING ORGANIZATIONS
</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="text-center"><p class="text-2xl font-bold">Fortune 500</p></div>
<div class="text-center"><p class="text-2xl font-bold">Tech Startups</p></div>
<div class="text-center"><p class="text-2xl font-bold">Healthcare</p></div>
<div class="text-center"><p class="text-2xl font-bold">Manufacturing</p></div>
</div>
</div>
</div>
</section>Description: 6 benefit cards + ROI statistics callout
<section class="code-section bg-white py-20">
<div class="container mx-auto px-4">
<div class="max-w-6xl mx-auto">
<!-- Header -->
<div class="text-center mb-16">
<h2 class="text-3xl lg:text-4xl font-bold text-[#333333] mb-4">
Why Invest in Outplacement Services?
</h2>
<p class="text-lg text-[#9B9B9B]">
Workforce reductions are challenging. The right outplacement partner protects your brand...
</p>
</div>
<!-- Benefits Grid (6 cards) -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
<!-- Benefit Card Example -->
<div class="bg-gradient-to-br from-[#ECF5FF] to-white rounded-xl p-8 border">
<div class="w-16 h-16 bg-gradient-to-br from-[#4A90E2] to-[#357ABD] rounded-xl flex items-center justify-center mb-6">
<i class="fas fa-shield-alt text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-[#333333] mb-3">Protect Your Brand</h3>
<p class="text-[#9B9B9B]">
Minimize negative reviews on Glassdoor and social media...
</p>
</div>
<!-- Repeat for 5 more benefits -->
</div>
<!-- ROI Callout -->
<div class="bg-gradient-to-r from-[#4A90E2] to-[#50E3C2] rounded-2xl p-10 text-white text-center">
<h3 class="text-2xl font-bold mb-4">The ROI is Clear</h3>
<p class="text-lg mb-6">
For every $1 invested, companies save an average of $3...
</p>
<div class="grid md:grid-cols-3 gap-8 mt-8">
<div>
<p class="text-4xl font-bold mb-2">40%</p>
<p class="text-sm">Faster reemployment</p>
</div>
<!-- More stats -->
</div>
</div>
</div>
</div>
</section>Description: Step-by-step process with numbered cards
<section id="how-it-works" class="code-section bg-[#F5F5F5] py-20">
<div class="container mx-auto px-4">
<div class="max-w-6xl mx-auto">
<!-- Header -->
<div class="text-center mb-16">
<h2 class="text-3xl lg:text-4xl font-bold">Our Outplacement Process</h2>
</div>
<!-- 6 Process Steps -->
<div class="space-y-8">
<!-- Step Card Example -->
<div class="bg-white rounded-2xl p-8 shadow-lg border-l-8 border-[#4A90E2]">
<div class="flex flex-col md:flex-row gap-6">
<div class="flex-shrink-0">
<div class="w-16 h-16 bg-gradient-to-br from-[#4A90E2] to-[#357ABD] rounded-xl flex items-center justify-center">
<span class="text-3xl font-bold text-white">1</span>
</div>
</div>
<div class="flex-1">
<h3 class="text-2xl font-bold text-[#333333] mb-3">
Initial Consultation & Customization
</h3>
<p class="text-[#9B9B9B] mb-4">
We meet with your HR team to understand your unique situation...
</p>
<ul class="space-y-2">
<li class="flex items-start gap-2">
<i class="fas fa-check-circle text-[#B8E986]"></i>
<span>Confidential planning session</span>
</li>
<!-- More bullet points -->
</ul>
</div>
</div>
</div>
<!-- Repeat for steps 2-6 -->
</div>
</div>
</div>
</section>Description: 3 pricing tiers (Essential, Professional, Executive) + volume discounts
<section class="code-section bg-white py-20">
<div class="container mx-auto px-4">
<div class="max-w-6xl mx-auto">
<!-- Header -->
<div class="text-center mb-16">
<h2 class="text-3xl lg:text-4xl font-bold">Flexible Service Packages</h2>
</div>
<!-- 3 Package Cards -->
<div class="grid md:grid-cols-3 gap-8 mb-16">
<!-- Essential Package -->
<div class="bg-white rounded-2xl border-2 border-[#D6D6D6] p-8">
<div class="text-center mb-6">
<div class="inline-block bg-[#ECF5FF] px-4 py-2 rounded-full mb-4">
<p class="text-[#4A90E2] font-semibold text-sm">ESSENTIAL</p>
</div>
<h3 class="text-2xl font-bold">Core Support</h3>
<p class="text-4xl font-bold text-[#4A90E2]">$1,500</p>
<p class="text-sm">per employee</p>
</div>
<ul class="space-y-3 mb-8">
<li>Resume & cover letter writing</li>
<!-- More features -->
</ul>
</div>
<!-- Professional Package (Most Popular) -->
<div class="bg-gradient-to-br from-[#4A90E2] to-[#357ABD] rounded-2xl p-8 text-white scale-105">
<div class="absolute -top-4 bg-[#F8E71C] px-6 py-2 rounded-full">
MOST POPULAR
</div>
<!-- Content similar to Essential -->
<p class="text-4xl font-bold">$3,500</p>
</div>
<!-- Executive Package -->
<!-- Similar structure, $7,500 -->
</div>
<!-- Volume Pricing Callout -->
<div class="bg-gradient-to-r from-[#ECF5FF] to-[#F0FFF4] rounded-2xl p-8 border-2">
<h3 class="text-2xl font-bold">Volume Discounts Available</h3>
<!-- Discount tiers: 15%, 20%, custom -->
</div>
</div>
</div>
</section>Description: 2-column layout with form on left, benefits/testimonial on right
<section id="contact-form" class="code-section bg-gradient-to-br from-[#F5F5F5] to-white py-20">
<div class="container mx-auto px-4">
<div class="max-w-6xl mx-auto">
<div class="grid lg:grid-cols-2 gap-12">
<!-- Left: Contact Form -->
<div class="bg-white rounded-2xl shadow-2xl p-8">
<h2 class="text-3xl font-bold mb-4">Request a Proposal</h2>
<form data-landingsite-contact-form>
<!-- Form fields: -->
<input type="text" name="firstName" placeholder="First Name">
<input type="text" name="lastName" placeholder="Last Name">
<input type="email" name="email" placeholder="Work Email">
<input type="tel" name="phone" placeholder="Phone">
<input type="text" name="company" placeholder="Company Name">
<input type="text" name="jobTitle" placeholder="Job Title">
<select name="employeeCount">
<option>1-5 employees</option>
<!-- More options -->
</select>
<textarea name="message" placeholder="Additional Details"></textarea>
<button type="submit">Request Custom Proposal</button>
</form>
</div>
<!-- Right: Why Choose Us -->
<div class="space-y-8">
<h3 class="text-2xl font-bold">Why Choose Career Success Institute?</h3>
<!-- 6 reason cards -->
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-gradient-to-br from-[#4A90E2] rounded-lg">
<i class="fas fa-award text-white"></i>
</div>
<div>
<h4 class="font-bold">Proven Track Record</h4>
<p>15+ years serving Fortune 500 companies...</p>
</div>
</div>
<!-- 5 more reasons -->
<!-- Testimonial -->
<div class="bg-gradient-to-br from-[#4A90E2] to-[#357ABD] rounded-2xl p-8 text-white">
<p class="text-lg italic">"Career Success Institute helped us navigate..."</p>
<p class="font-bold">Sarah Martinez</p>
<p>VP of HR, Tech Company</p>
</div>
<!-- Contact Info -->
<div class="bg-[#F5F5F5] rounded-xl p-6">
<h4 class="font-bold">Prefer to Talk?</h4>
<p>Phone: (555) 123-4567</p>
<p>Email: [email protected]</p>
</div>
</div>
</div>
</div>
</div>
</section>