test-space / index.html
kallelkad's picture
Add 3 files
7f90652 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HR Excellence Tunisia | Training & Consulting Services</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.hero-gradient {
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
}
.consultant-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.service-card:hover .service-icon {
transform: scale(1.1);
color: #2563eb;
}
.testimonial-card {
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
}
.animated-underline {
position: relative;
display: inline-block;
}
.animated-underline::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: #2563eb;
transition: width 0.3s ease;
}
.animated-underline:hover::after {
width: 100%;
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<!-- Header -->
<header class="sticky top-0 z-50 bg-white shadow-sm">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center">
<div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-xl mr-3">HR</div>
<h1 class="text-xl font-bold text-blue-800">HR Excellence Tunisia</h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#home" class="animated-underline font-medium">Home</a>
<a href="#services" class="animated-underline font-medium">Services</a>
<a href="#consultants" class="animated-underline font-medium">Consultants</a>
<a href="#testimonials" class="animated-underline font-medium">Testimonials</a>
<a href="#contact" class="animated-underline font-medium">Contact</a>
</nav>
<div class="md:hidden">
<button id="menu-toggle" class="text-blue-800 focus:outline-none">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg">
<div class="flex flex-col space-y-4">
<a href="#home" class="font-medium">Home</a>
<a href="#services" class="font-medium">Services</a>
<a href="#consultants" class="font-medium">Consultants</a>
<a href="#testimonials" class="font-medium">Testimonials</a>
<a href="#contact" class="font-medium">Contact</a>
</div>
</div>
</header>
<!-- Hero Section -->
<section id="home" class="hero-gradient text-white py-20 md:py-32">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Transform Your HR Strategy with Tunisian Expertise</h1>
<p class="text-xl mb-8 text-blue-100">Premium HR training and consulting services for African and Tunisian companies delivered by our team of seasoned professionals.</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<a href="#contact" class="bg-white text-blue-800 px-8 py-3 rounded-lg font-semibold text-center hover:bg-blue-50 transition duration-300">Get a Consultation</a>
<a href="#services" class="border-2 border-white px-8 py-3 rounded-lg font-semibold text-center hover:bg-white hover:text-blue-800 transition duration-300">Our Services</a>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="https://images.unsplash.com/photo-1573164713988-8665fc963095?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="HR Team Meeting" class="rounded-xl shadow-2xl max-w-full h-auto">
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="bg-gray-50 py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
<div class="bg-white p-6 rounded-xl shadow-sm">
<div class="text-4xl font-bold text-blue-600 mb-2">15+</div>
<div class="text-gray-600">Years of Combined Experience</div>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm">
<div class="text-4xl font-bold text-blue-600 mb-2">200+</div>
<div class="text-gray-600">Companies Trained</div>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm">
<div class="text-4xl font-bold text-blue-600 mb-2">95%</div>
<div class="text-gray-600">Client Satisfaction Rate</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Our HR Services</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Comprehensive solutions tailored to meet the unique challenges of African and Tunisian businesses</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service 1 -->
<div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300 hover:shadow-md">
<div class="service-icon w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mb-6 transition duration-300">
<i class="fas fa-chalkboard-teacher text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">HR Training Programs</h3>
<p class="text-gray-600 mb-4">Customized training sessions covering recruitment, talent management, performance evaluation, and HR digital transformation.</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Leadership development</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Team building workshops</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Compliance training</span>
</li>
</ul>
</div>
<!-- Service 2 -->
<div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300 hover:shadow-md">
<div class="service-icon w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mb-6 transition duration-300">
<i class="fas fa-briefcase text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Strategic HR Consulting</h3>
<p class="text-gray-600 mb-4">Expert guidance to align your HR strategy with business objectives and African market specificities.</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Organizational design</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Compensation strategy</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Change management</span>
</li>
</ul>
</div>
<!-- Service 3 -->
<div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300 hover:shadow-md">
<div class="service-icon w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mb-6 transition duration-300">
<i class="fas fa-search-dollar text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Talent Acquisition Solutions</h3>
<p class="text-gray-600 mb-4">End-to-end recruitment services and employer branding strategies for attracting top African talent.</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Executive search</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Assessment centers</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Diversity hiring programs</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Consultants Section -->
<section id="consultants" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Meet Our Expert Consultants</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Seasoned professionals with deep understanding of African HR challenges</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Consultant 1 -->
<div class="consultant-card bg-white p-6 rounded-xl shadow-sm transition duration-300">
<div class="flex justify-center mb-6">
<img src="https://media.licdn.com/dms/image/D4E03AQF9Q3JXWZQb9w/profile-displayphoto-shrink_800_800/0/1684231231973?e=2147483647&v=beta&t=4KJYd8GxJ4x3j2hQ5Q6l9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q" alt="Maher Kallel" class="w-32 h-32 rounded-full object-cover border-4 border-blue-100">
</div>
<h3 class="text-xl font-bold text-center mb-2">Maher Kallel</h3>
<p class="text-blue-600 text-center mb-4">HR Strategy & Organizational Development</p>
<p class="text-gray-600 mb-4">With over 20 years in HR leadership roles across Africa, Maher specializes in aligning HR practices with business strategy in multicultural environments.</p>
<div class="flex justify-center space-x-4">
<a href="https://www.linkedin.com/in/maherkallel" target="_blank" class="text-blue-600 hover:text-blue-800">
<i class="fab fa-linkedin text-xl"></i>
</a>
<a href="mailto:maher@hrexcellence.tn" class="text-gray-600 hover:text-blue-800">
<i class="fas fa-envelope text-xl"></i>
</a>
</div>
</div>
<!-- Consultant 2 -->
<div class="consultant-card bg-white p-6 rounded-xl shadow-sm transition duration-300">
<div class="flex justify-center mb-6">
<img src="https://media.licdn.com/dms/image/C4E03AQHqX9X9X9X9Xw/profile-displayphoto-shrink_800_800/0/1517287599000?e=2147483647&v=beta&t=4KJYd8GxJ4x3j2hQ5Q6l9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q" alt="Said Zouaghi" class="w-32 h-32 rounded-full object-cover border-4 border-blue-100">
</div>
<h3 class="text-xl font-bold text-center mb-2">Said Zouaghi</h3>
<p class="text-blue-600 text-center mb-4">Talent Management & Leadership Development</p>
<p class="text-gray-600 mb-4">Said brings 15+ years of experience in designing and implementing talent management systems for African multinationals and SMEs.</p>
<div class="flex justify-center space-x-4">
<a href="https://www.linkedin.com/in/saidzouaghi" target="_blank" class="text-blue-600 hover:text-blue-800">
<i class="fab fa-linkedin text-xl"></i>
</a>
<a href="mailto:said@hrexcellence.tn" class="text-gray-600 hover:text-blue-800">
<i class="fas fa-envelope text-xl"></i>
</a>
</div>
</div>
<!-- Consultant 3 -->
<div class="consultant-card bg-white p-6 rounded-xl shadow-sm transition duration-300">
<div class="flex justify-center mb-6">
<img src="https://media.licdn.com/dms/image/D4E03AQF9Q3JXWZQb9w/profile-displayphoto-shrink_800_800/0/1684231231973?e=2147483647&v=beta&t=4KJYd8GxJ4x3j2hQ5Q6l9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q" alt="Walid Zalila" class="w-32 h-32 rounded-full object-cover border-4 border-blue-100">
</div>
<h3 class="text-xl font-bold text-center mb-2">Walid Zalila</h3>
<p class="text-blue-600 text-center mb-4">HR Digital Transformation & Analytics</p>
<p class="text-gray-600 mb-4">Walid is a tech-savvy HR consultant helping companies leverage digital tools and data analytics to optimize their HR processes.</p>
<div class="flex justify-center space-x-4">
<a href="https://www.linkedin.com/in/walidzalila" target="_blank" class="text-blue-600 hover:text-blue-800">
<i class="fab fa-linkedin text-xl"></i>
</a>
<a href="mailto:walid@hrexcellence.tn" class="text-gray-600 hover:text-blue-800">
<i class="fas fa-envelope text-xl"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Clients Say</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Success stories from African companies we've worked with</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Testimonial 1 -->
<div class="testimonial-card p-8 rounded-xl">
<div class="flex items-center mb-6">
<div class="w-16 h-16 rounded-full bg-gray-200 overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold">Amina Diallo</h4>
<p class="text-gray-600">HR Director, Dakar Manufacturing</p>
</div>
</div>
<p class="text-gray-700 italic mb-6">"Working with Maher transformed our approach to talent management. His deep understanding of West African labor markets helped us reduce turnover by 40% in one year."</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<!-- Testimonial 2 -->
<div class="testimonial-card p-8 rounded-xl">
<div class="flex items-center mb-6">
<div class="w-16 h-16 rounded-full bg-gray-200 overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold">Kwame Osei</h4>
<p class="text-gray-600">CEO, Accra Tech Solutions</p>
</div>
</div>
<p class="text-gray-700 italic mb-6">"Said's leadership development program was exactly what our growing tech company needed. We've seen a 35% improvement in management effectiveness scores since implementation."</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<!-- Testimonial 3 -->
<div class="testimonial-card p-8 rounded-xl">
<div class="flex items-center mb-6">
<div class="w-16 h-16 rounded-full bg-gray-200 overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold">Fatima Ben Ammar</h4>
<p class="text-gray-600">COO, Tunis Financial Services</p>
</div>
</div>
<p class="text-gray-700 italic mb-6">"Walid's HR digital transformation roadmap saved us countless hours in administrative work. Our HR team can now focus on strategic initiatives rather than paperwork."</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
<!-- Testimonial 4 -->
<div class="testimonial-card p-8 rounded-xl">
<div class="flex items-center mb-6">
<div class="w-16 h-16 rounded-full bg-gray-200 overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Client" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold">Jean-Luc Mbenga</h4>
<p class="text-gray-600">HR Manager, Kinshasa Logistics</p>
</div>
</div>
<p class="text-gray-700 italic mb-6">"The combined expertise of this team helped us navigate complex labor regulations across three African countries while maintaining consistent HR standards."</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-sm overflow-hidden">
<div class="md:flex">
<div class="md:w-1/2 bg-blue-800 text-white p-12">
<h2 class="text-3xl font-bold mb-6">Get in Touch</h2>
<p class="mb-8 text-blue-100">Ready to transform your HR practices? Contact us for a free initial consultation.</p>
<div class="space-y-6">
<div class="flex items-start">
<div class="bg-blue-700 p-3 rounded-full mr-4">
<i class="fas fa-map-marker-alt"></i>
</div>
<div>
<h4 class="font-bold">Our Office</h4>
<p class="text-blue-100">15 Rue du Lac, Les Berges du Lac, Tunis 1053</p>
</div>
</div>
<div class="flex items-start">
<div class="
</html>