<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elimuhub - Holiday Tuition Program</title>
<style>
:root {
--primary-color: #FF6B00;
--secondary-color: #000000;
--accent-color: #FFC107;
--text-color: #FFFFFF;
--light-bg: #111111;
--slide-duration: 0.8s;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: var(--secondary-color);
color: var(--text-color);
overflow: hidden;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
}
.conversation-container {
width: 100%;
max-width: 900px;
height: 100%;
max-height: 700px;
background-color: var(--secondary-color);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
overflow: hidden;
display: flex;
flex-direction: column;
border: 2px solid var(--primary-color);
}
.header {
background-color: var(--secondary-color);
color: var(--primary-color);
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
border-bottom: 2px solid var(--primary-color);
}
.logo {
height: 40px;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
.chat-title {
font-size: 1.3rem;
font-weight: 600;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 1px;
}
.chat-area {
flex: 1;
overflow-y: auto;
padding: 20px;
background-color: var(--light-bg);
scroll-behavior: smooth;
}
.message {
margin-bottom: 20px;
display: flex;
flex-direction: column;
animation: fadeIn 0.5s ease;
}
.parent-message {
align-items: flex-start;
}
.elimuhub-message {
align-items: flex-end;
margin-top: 8px;
}
.message-title {
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 5px;
color: var(--primary-color);
text-transform: uppercase;
}
.message-image {
max-width: 70%;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
margin-bottom: 5px;
border: 2px solid var(--primary-color);
}
.message-text {
padding: 15px 20px;
border-radius: 18px;
max-width: 80%;
line-height: 1.5;
position: relative;
font-size: 1.1rem;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
animation: fadeIn var(--slide-duration) ease;
}
.parent-text {
background-color: #333333;
color: var(--text-color);
border-bottom-left-radius: 5px;
align-self: flex-start;
}
.elimuhub-text {
background-color: var(--primary-color);
color: #000036;
border-bottom-right-radius: 5px;
align-self: flex-end;
font-weight: 600;
font-size: 1.0rem;
position: relative;
}
.elimuhub-text::after {
content: '';
position: absolute;
bottom: -8px;
right: 20px;
border-width: 10px 10px 0;
border-style: solid;
border-color: var(--primary-color) transparent transparent;
}
.footer {
background-color: var(--secondary-color);
padding: 20px;
text-align: center;
border-top: 2px solid var(--primary-color);
}
.cta-button {
background-color: var(--primary-color);
color: var(--secondary-color);
border: none;
padding: 15px 30px;
border-radius: 30px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(255, 107, 0, 0.4);
display: inline-flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.cta-button:hover {
background-color: #FF8C00;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(255, 107, 0, 0.6);
}
.slide {
display: none;
}
.slide.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.controls {
position: absolute;
bottom: 90px;
left: 0;
right: 0;
display: flex;
justify-content: center;
z-index: 10;
}
.control-btn {
background: rgba(255, 255, 255, 0.3);
border: none;
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 6px;
cursor: pointer;
transition: all 0.3s;
}
.control-btn.active {
background: var(--primary-color);
transform: scale(1.4);
box-shadow: 0 0 10px rgba(255, 107, 0, 0.8);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.conversation-container {
max-height: 90vh;
}
.message-image {
max-width: 85%;
}
.message-text {
max-width: 90%;
font-size: 1rem;
padding: 12px 16px;
}
.cta-button {
padding: 12px 25px;
font-size: 1rem;
}
.controls {
bottom: 80px;
}
}
@media (max-width: 468px) {
.chat-title {
font-size: 1.1rem;
}
.logo {
height: 30px;
}
.message-text {
font-size: 0.95rem;
}
.footer p {
font-size: 0.8rem;
}
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="conversation-container">
<div class="header">
<div class="chat-title">Client Inquiry</div>
<img src="https://i.postimg.cc/qMKXTnBJ/elimuhub-consultants-logo.png" alt="Elimuhub Logo" class="logo" loading="lazy">
</div>
<div class="chat-area">
<!-- Slide 1 -->
<div class="slide active">
<div class="message parent-message">
<div class="message-title">Client Inquiry</div>
<img src="https://i.postimg.cc/QtyFxPq2/Image-1-Parent-Hello-I-m-interested-in-your--holiday.jpg" alt="Parent inquiry" class="message-image" loading="lazy">
</div>
<div class="message elimuhub-message">
<div class="message-title">Our Response</div>
<div class="message-text elimuhub-text">
Hello! Thank you for your interest. Our Holiday Tuition Program offers personalized home-based learning with experienced tutors. We cover all subjects including Math, Science, English & Kiswahili. When would be convenient to discuss your child's needs?
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="slide">
<div class="message parent-message">
<div class="message-title">Client Inquiry</div>
<img src="https://i.postimg.cc/4nCnp9qw/image-2-Parent-That-sounds-great-What-are-the-available.jpg" alt="Parent asking about schedule" class="message-image" loading="lazy">
</div>
<div class="message elimuhub-message">
<div class="message-title">Our Response</div>
<div class="message-text elimuhub-text">
We offer flexible scheduling: Morning (8AM-12PM) or Afternoon (2PM-6PM) sessions. Each session is 2 hours with breaks. Our tutors adapt to your child's learning pace. We also provide progress reports to track improvement.
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="slide">
<div class="message parent-message">
<div class="message-title">Client Inquiry</div>
<img src="https://i.postimg.cc/gjLnwDSn/image-3-Parent-Perfect-My-child-struggles.jpg" alt="Parent mentioning child's struggles" class="message-image" loading="lazy">
</div>
<div class="message elimuhub-message">
<div class="message-title">Our Response</div>
<div class="message-text elimuhub-text">
Absolutely! We have qualified Math & Science specialists who use interactive teaching methods, visual aids, and practical examples. Our approach focuses on concept clarity and exam preparation techniques. Your child will gain confidence in these subjects.
</div>
</div>
</div>
<!-- Slide 4 -->
<div class="slide">
<div class="message parent-message">
<div class="message-title">Client Inquiry</div>
<img src="https://i.postimg.cc/LXXqSRjk/image-4-Parent-Excellent-Since-it-s-home-based.jpg" alt="Parent asking about coverage" class="message-image" loading="lazy">
</div>
<div class="message elimuhub-message">
<div class="message-title">Our Response</div>
<div class="message-text elimuhub-text">
Yes, we cover all Nairobi areas including yours! Our rates are competitive and depend on subjects & session frequency. We offer package deals for the full program. Shall we schedule a free consultation to discuss specifics?
</div>
</div>
</div>
<!-- Slide 5 -->
<div class="slide">
<div class="message parent-message">
<div class="message-title">Client Inquiry</div>
<img src="https://i.postimg.cc/G36jXS1g/image-5-Parent-That-would-be-wonderful-When-can.jpg" alt="Parent asking about consultation" class="message-image" loading="lazy">
</div>
<div class="message elimuhub-message">
<div class="message-title">Our Response</div>
<div class="message-text elimuhub-text">
Great! Our tutors are degree holders with teaching experience. We can schedule your free consultation this weekend. What day works best - Saturday or Sunday?
</div>
</div>
</div>
<!-- Slide 6 -->
<div class="slide">
<div class="message parent-message">
<div class="message-title">Client Inquiry</div>
<img src="https://i.postimg.cc/sDS4q9jj/image-6-PARENT-Wonderful-Saturday-2-PM-confirmed-We-re.png" alt="Parent confirming appointment" class="message-image" loading="lazy">
</div>
<div class="message elimuhub-message">
<div class="message-title">Our Response</div>
<div class="message-text elimuhub-text">
Wonderful! Saturday 2PM confirmed. I'll send the materials shortly. We're excited to help your child excel this holiday! 📚✨
</div>
</div>
</div>
</div>
<div class="controls">
<button class="control-btn active" data-index="0" aria-label="Slide 1"></button>
<button class="control-btn" data-index="1" aria-label="Slide 2"></button>
<button class="control-btn" data-index="2" aria-label="Slide 3"></button>
<button class="control-btn" data-index="3" aria-label="Slide 4"></button>
<button class="control-btn" data-index="4" aria-label="Slide 5"></button>
<button class="control-btn" data-index="5" aria-label="Slide 6"></button>
</div>
<div class="footer">
<button class="cta-button" id="enrollNow">
<i class="fas fa-calendar-check"></i> Book Free Consultation
</button>
<p style="margin-top: 15px; font-size: 0.9rem; color: var(--primary-color);">
LIMITED SLOTS AVAILABLE! CALL NOW: 0731 838 387
</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const slides = document.querySelectorAll('.slide');
const controlBtns = document.querySelectorAll('.control-btn');
const enrollBtn = document.getElementById('enrollNow');
let currentSlide = 0;
let slideInterval;
const slideDuration = 5000;
function showSlide(index) {
if (index >= slides.length) index = 0;
if (index < 0) index = slides.length - 1;
slides.forEach(slide => slide.classList.remove('active'));
slides[index].classList.add('active');
controlBtns.forEach(btn => btn.classList.remove('active'));
controlBtns[index].classList.add('active');
currentSlide = index;
// Auto-scroll to bottom
const chatArea = document.querySelector('.chat-area');
chatArea.scrollTop = chatArea.scrollHeight;
}
function nextSlide() {
showSlide(currentSlide + 1);
}
function startSlideShow() {
clearInterval(slideInterval);
slideInterval = setInterval(nextSlide, slideDuration);
}
// Initialize
showSlide(0);
startSlideShow();
// Control buttons
controlBtns.forEach(btn => {
btn.addEventListener('click', () => {
const index = parseInt(btn.getAttribute('data-index'));
showSlide(index);
startSlideShow();
});
});
// Keyboard navigation
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') nextSlide();
if (e.key === 'ArrowLeft') showSlide(currentSlide - 1);
if (e.key === ' ') {
slideInterval ? clearInterval(slideInterval) : startSlideShow();
slideInterval = null;
}
startSlideShow();
});
// Touch events for mobile
let touchStartX = 0;
document.addEventListener('touchstart', (e) => {
touchStartX = e.changedTouches[0].screenX;
}, false);
document.addEventListener('touchend', (e) => {
const touchEndX = e.changedTouches[0].screenX;
const threshold = 50;
if (touchEndX < touchStartX - threshold) nextSlide();
if (touchEndX > touchStartX + threshold) showSlide(currentSlide - 1);
startSlideShow();
}, false);
// Enroll button action
enrollBtn.addEventListener('click', () => {
alert('Thank you for your interest! Our team will contact you shortly to confirm your free consultation.\n\nCall us now at 0731 838 387 for immediate assistance.');
});
});
</script>
</body>
```html
