<!-- Redesigned CTA Section -->
<section class="cta-section-new">
<div class="container">
<div class="cta-wrapper">
<div class="cta-content-wrapper">
<div class="cta-icon">
<i class="fas fa-rocket"></i>
</div>
<div class="cta-text">
<h2>Ready to Start Your Learning Journey?</h2>
<p>Enroll in our courses today and take the first step towards a successful career in the tech industry.</p>
<div class="cta-offer">
<span class="offer-text">Limited Time Offer!</span>
<div class="countdown" id="offer-countdown">
<div class="countdown-item">
<span class="countdown-number" id="countdown-hours">24</span>
<span class="countdown-label">Hours</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="countdown-minutes">00</span>
<span class="countdown-label">Minutes</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="countdown-seconds">00</span>
<span class="countdown-label">Seconds</span>
</div>
</div>
</div>
</div>
<div class="cta-buttons">
<a href="enroll.php?course_id=<?php echo $course['id']; ?>" class="btn btn-primary btn-enroll">
<i class="fas fa-graduation-cap me-2"></i>Enroll Now
</a>
<a href="contact.php" class="btn btn-outline-light btn-contact">
<i class="fas fa-envelope me-2"></i>Contact Us
</a>
</div>
</div>
</div>
</div>
</section>
<!-- CSS for the redesigned CTA section -->
<style>
.cta-section-new {
position: relative;
padding: 60px 0;
margin: 50px 0;
background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.cta-section-new::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"%3E%3Cpath fill="%23ffffff" fill-opacity="0.1" d="M0,192L48,197.3C96,203,192,213,288,202.7C384,192,480,160,576,165.3C672,171,768,213,864,213.3C960,213,1056,171,1152,149.3C1248,128,1344,128,1392,128L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"%3E%3C/path%3E%3C/svg%3E');
background-size: cover;
background-position: center;
opacity: 0.3;
}
.cta-wrapper {
position: relative;
z-index: 1;
padding: 20px;
}
.cta-content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.cta-icon {
font-size: 48px;
color: #fff;
margin-bottom: 20px;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}
.cta-text h2 {
font-size: 2.5rem;
font-weight: 700;
color: #fff;
margin-bottom: 15px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.cta-text p {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 30px;
}
.cta-offer {
background-color: rgba(255, 255, 255, 0.15);
padding: 20px 30px;
border-radius: 12px;
margin-bottom: 30px;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.offer-text {
display: block;
font-size: 1.1rem;
font-weight: 600;
color: #fff;
margin-bottom: 10px;
}
.countdown {
display: flex;
justify-content: center;
gap: 15px;
}
.countdown-item {
display: flex;
flex-direction: column;
align-items: center;
}
.countdown-number {
font-size: 1.8rem;
font-weight: 700;
color: #fff;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 8px;
padding: 5px 10px;
min-width: 60px;
text-align: center;
}
.countdown-label {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.8);
margin-top: 5px;
}
.cta-buttons {
display: flex;
gap: 15px;
margin-top: 10px;
}
.btn-enroll {
background-color: #fff;
color: #4e73df;
font-weight: 600;
padding: 12px 30px;
border-radius: 50px;
transition: all 0.3s ease;
border: 2px solid #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.btn-enroll:hover {
background-color: #f8f9fc;
color: #224abe;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.btn-contact {
padding: 12px 30px;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
border: 2px solid rgba(255, 255, 255, 0.7);
}
.btn-contact:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: #fff;
transform: translateY(-3px);
}
@media (max-width: 768px) {
.cta-section-new {
padding: 40px 0;
margin: 30px 0;
}
.cta-text h2 {
font-size: 2rem;
}
.cta-text p {
font-size: 1rem;
}
.cta-buttons {
flex-direction: column;
width: 100%;
}
.btn-enroll, .btn-contact {
width: 100%;
}
}
</style>
<!-- JavaScript for the countdown timer -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Set the countdown time to 24 hours from now
let countDownDate = new Date();
countDownDate.setHours(countDownDate.getHours() + 24);
// Update the countdown every 1 second
let countdownTimer = setInterval(function() {
// Get current time
let now = new Date().getTime();
// Find the distance between now and the countdown date
let distance = countDownDate - now;
// Time calculations for hours, minutes and seconds
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result
document.getElementById("countdown-hours").textContent = hours < 10 ? "0" + hours : hours;
document.getElementById("countdown-minutes").textContent = minutes < 10 ? "0" + minutes : minutes;
document.getElementById("countdown-seconds").textContent = seconds < 10 ? "0" + seconds : seconds;
// If the countdown is finished, clear the interval
if (distance < 0) {
clearInterval(countdownTimer);
document.getElementById("offer-countdown").innerHTML = "EXPIRED";
}
}, 1000);
});
</script>
<!-- End Redesigned CTA Section -->
