454 lines
16 KiB
PHP
454 lines
16 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'About Us')
|
|
|
|
@section('content')
|
|
|
|
<style>
|
|
:root {
|
|
--primary: #3E51B8; /* Tech Blue */
|
|
--primary-light: #0a67df; /* Vibrant Electric Blue */
|
|
--secondary: #BC1A1A; /* Deep Racing Red */
|
|
--secondary-hover: #822424; /* Dark Burnt Red */
|
|
--bg-light: #F8FAFC; /* Soft slate light gray */
|
|
--text-main: #0F172A; /* Slate dark grey */
|
|
--text-muted: #64748B; /* Neutral gray */
|
|
--card-border: rgba(226, 232, 240, 0.9);
|
|
}
|
|
|
|
/* ===== HERO SECTION ===== */
|
|
.hero-about {
|
|
position: relative;
|
|
min-height: 48vh;
|
|
background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(30, 41, 59, 0.82) 50%, rgba(15, 23, 42, 0.92) 100%),
|
|
url('https://images.unsplash.com/photo-1617814076367-b759c7d7e738?auto=format&fit=crop&w=1600&q=80');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-attachment: fixed;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
padding: 70px 20px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: rgba(255, 255, 255, 0.12);
|
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
backdrop-filter: blur(14px);
|
|
-webkit-backdrop-filter: blur(14px);
|
|
color: #FFE618;
|
|
font-size: 12px;
|
|
font-weight: 750;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
padding: 7px 18px;
|
|
border-radius: 999px;
|
|
margin-bottom: 18px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.hero-about h1 {
|
|
font-size: clamp(2.3rem, 4vw, 3.6rem);
|
|
font-weight: 800;
|
|
line-height: 1.15;
|
|
letter-spacing: -0.03em;
|
|
text-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.hero-about p.lead {
|
|
font-size: clamp(1rem, 1.2vw, 1.25rem);
|
|
color: rgba(255, 255, 255, 0.9);
|
|
max-width: 700px;
|
|
margin: 16px auto 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ===== STATS BAR ===== */
|
|
.stats-container {
|
|
margin-top: -38px;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.stat-glass-card {
|
|
background: #ffffff;
|
|
border: 1px solid rgba(226, 232, 240, 0.9);
|
|
border-radius: 20px;
|
|
padding: 20px 16px;
|
|
text-align: center;
|
|
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
|
|
transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
.stat-glass-card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 18px 40px rgba(62, 81, 184, 0.14);
|
|
border-color: rgba(62, 81, 184, 0.3);
|
|
}
|
|
|
|
.stat-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
background: rgba(62, 81, 184, 0.08);
|
|
color: var(--primary);
|
|
border-radius: 12px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 26px;
|
|
font-weight: 800;
|
|
color: var(--text-main);
|
|
line-height: 1;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 12.5px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ===== MINIMALIST VISION & MISSION ===== */
|
|
.minimal-icon-badge {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
flex-shrink: 0;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.animate-item:hover .minimal-icon-badge {
|
|
transform: scale(1.1) rotate(4deg);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.border-start-md {
|
|
border-left: 1px solid rgba(226, 232, 240, 0.9) !important;
|
|
}
|
|
}
|
|
|
|
/* ===== FEATURE BOXES ===== */
|
|
.about-box {
|
|
position: relative;
|
|
background: #ffffff;
|
|
border-radius: 22px;
|
|
padding: 34px 24px;
|
|
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
|
|
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
border: 1px solid rgba(226, 232, 240, 0.9);
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.about-box::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #3E51B8 0%, #FFE618 50%, #BC1A1A 100%);
|
|
opacity: 0.35;
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
|
|
.about-box:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.about-box:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 20px 45px -10px rgba(62, 81, 184, 0.14);
|
|
border-color: rgba(62, 81, 184, 0.3);
|
|
}
|
|
|
|
.icon-circle {
|
|
width: 64px;
|
|
height: 64px;
|
|
background: linear-gradient(135deg, rgba(62, 81, 184, 0.1) 0%, rgba(10, 103, 223, 0.06) 100%);
|
|
color: var(--primary);
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(62, 81, 184, 0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 26px;
|
|
margin: 0 auto 20px;
|
|
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
.about-box:hover .icon-circle {
|
|
background: linear-gradient(135deg, #0F2C59 0%, #3E51B8 100%);
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
transform: scale(1.12) rotate(6deg);
|
|
box-shadow: 0 10px 25px rgba(62, 81, 184, 0.35);
|
|
}
|
|
|
|
/* ===== CTA BUTTON ===== */
|
|
.cta-btn {
|
|
background: linear-gradient(135deg, #0F2C59 0%, #3E51B8 100%);
|
|
color: #ffffff !important;
|
|
padding: 13px 36px;
|
|
border-radius: 999px;
|
|
font-weight: 750;
|
|
font-size: 14.5px;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
transition: all 0.35s ease;
|
|
box-shadow: 0 8px 24px rgba(62, 81, 184, 0.25);
|
|
}
|
|
|
|
.cta-btn:hover {
|
|
background: linear-gradient(135deg, #BC1A1A 0%, #822424 100%);
|
|
transform: translateY(-3px) scale(1.02);
|
|
box-shadow: 0 12px 30px rgba(188, 26, 26, 0.35);
|
|
}
|
|
|
|
.cta-btn i {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.cta-btn:hover i {
|
|
transform: translateX(6px);
|
|
}
|
|
|
|
/* ===== SCROLL ANIMATIONS ===== */
|
|
.animate-item {
|
|
opacity: 0;
|
|
will-change: transform, opacity;
|
|
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
|
|
}
|
|
|
|
.fade-up-init { transform: translateY(30px); }
|
|
.slide-left-init { transform: translateX(-40px); }
|
|
.slide-right-init { transform: translateX(40px); }
|
|
.zoom-in-init { transform: scale(0.94); }
|
|
|
|
.animate-item.animated {
|
|
opacity: 1;
|
|
transform: translate(0) scale(1);
|
|
}
|
|
</style>
|
|
|
|
<!-- HERO SECTION -->
|
|
<section class="hero-about">
|
|
<div class="container">
|
|
<div class="animate-item animated fade-up-init">
|
|
<span class="hero-badge"><i class="fa-solid fa-graduation-cap"></i> Pioneering Automotive Academy</span>
|
|
<h1 class="fw-bold">Empowering Future Mobility Leaders</h1>
|
|
<p class="lead">
|
|
We are committed to delivering world-class automotive engineering education with hands-on workshop mastery, TVEC accredited qualifications, and cutting-edge EV technology training.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FLOATING STATS COUNTER -->
|
|
<div class="container stats-container">
|
|
<div class="row g-3 justify-content-center">
|
|
<div class="col-6 col-md-3 animate-item zoom-in-init" style="transition-delay: 100ms;">
|
|
<div class="stat-glass-card">
|
|
<div class="stat-icon"><i class="fa-solid fa-user-graduate"></i></div>
|
|
<div class="stat-number count-up" data-count-target="2500" data-count-suffix="+">0+</div>
|
|
<div class="stat-label">Graduated Technicians</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3 animate-item zoom-in-init" style="transition-delay: 200ms;">
|
|
<div class="stat-glass-card">
|
|
<div class="stat-icon"><i class="fa-solid fa-screwdriver-wrench"></i></div>
|
|
<div class="stat-number">100%</div>
|
|
<div class="stat-label">Practical Lab Mastery</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3 animate-item zoom-in-init" style="transition-delay: 300ms;">
|
|
<div class="stat-glass-card">
|
|
<div class="stat-icon"><i class="fa-solid fa-award"></i></div>
|
|
<div class="stat-number">15+</div>
|
|
<div class="stat-label">Years of Excellence</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3 animate-item zoom-in-init" style="transition-delay: 400ms;">
|
|
<div class="stat-glass-card">
|
|
<div class="stat-icon"><i class="fa-solid fa-briefcase"></i></div>
|
|
<div class="stat-number">95%</div>
|
|
<div class="stat-label">Job Placement Rate</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VISION & MISSION MINIMALIST 1-ROW SECTION -->
|
|
<section class="py-5 bg-white">
|
|
<div class="container py-3">
|
|
<div class="row g-4 align-items-stretch">
|
|
|
|
<!-- VISION (LEFT COLUMN) -->
|
|
<div class="col-md-6 animate-item slide-left-init">
|
|
<div class="p-4 rounded-4 bg-light border border-light-subtle h-100">
|
|
<div class="d-flex align-items-center gap-3 mb-3">
|
|
<div class="minimal-icon-badge bg-primary-subtle text-primary">
|
|
<i class="fa-solid fa-lightbulb"></i>
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-primary-subtle text-primary fw-bold text-uppercase px-2 py-1 rounded-2 small mb-1" style="font-size: 11px;">GLOBAL GOAL</span>
|
|
<h3 class="fw-bold text-dark mb-0 fs-4">Our Vision</h3>
|
|
</div>
|
|
</div>
|
|
<p class="text-secondary fs-6 lh-base mb-0">
|
|
To be a global leader in automotive education, driving the future of mobility by empowering the next generation of engineers, technicians, and EV innovators.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MISSION (RIGHT COLUMN) -->
|
|
<div class="col-md-6 animate-item slide-right-init">
|
|
<div class="p-4 rounded-4 bg-light border border-light-subtle h-100">
|
|
<div class="d-flex align-items-center gap-3 mb-3">
|
|
<div class="minimal-icon-badge bg-danger-subtle text-danger">
|
|
<i class="fa-solid fa-bullseye"></i>
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-danger-subtle text-danger fw-bold text-uppercase px-2 py-1 rounded-2 small mb-1" style="font-size: 11px;">CORE PURPOSE</span>
|
|
<h3 class="fw-bold text-dark mb-0 fs-4">Our Mission</h3>
|
|
</div>
|
|
</div>
|
|
<p class="text-secondary fs-6 lh-base mb-0">
|
|
To foster technical mastery and critical thinking through immersive, practical learning environments, strong industry partnerships, and a commitment to eco-friendly automotive practices.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ADVANTAGES / WHY CHOOSE US -->
|
|
<section class="py-5 bg-light position-relative">
|
|
<div class="container py-4">
|
|
<div class="text-center mb-5 animate-item fade-up-init">
|
|
<span class="text-uppercase fw-bold small text-primary letter-spacing-1"><i class="fa-solid fa-award me-1"></i> Core Advantage</span>
|
|
<h2 class="display-6 fw-bold text-dark mt-2">Why Study With AutoEdu?</h2>
|
|
<p class="text-muted fs-5 max-width-600 mx-auto">We combine academic excellence with real-world workshop diagnostic training.</p>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;">
|
|
<div class="about-box text-center">
|
|
<div class="icon-circle">
|
|
<i class="fa-solid fa-chalkboard-user"></i>
|
|
</div>
|
|
<h4 class="fw-bold text-dark mb-3">Expert Lecturers</h4>
|
|
<p class="text-muted mb-0 lh-base">
|
|
Learn directly from veteran automotive engineers, diagnostic specialists, and TVEC certified master instructors.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 250ms;">
|
|
<div class="about-box text-center">
|
|
<div class="icon-circle">
|
|
<i class="fa-solid fa-screwdriver-wrench"></i>
|
|
</div>
|
|
<h4 class="fw-bold text-dark mb-3">Practical Training</h4>
|
|
<p class="text-muted mb-0 lh-base">
|
|
Hands-on workshop experience working on modern EFI engines, EV battery test bays, and automated gearboxes.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 400ms;">
|
|
<div class="about-box text-center">
|
|
<div class="icon-circle">
|
|
<i class="fa-solid fa-certificate"></i>
|
|
</div>
|
|
<h4 class="fw-bold text-dark mb-3">Certified Qualifications</h4>
|
|
<p class="text-muted mb-0 lh-base">
|
|
Earn internationally recognized NVQ Level 4/5 diplomas and certifications that accelerate your global career.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CALL TO ACTION (CTA) -->
|
|
<section class="py-5 text-center bg-white overflow-hidden position-relative">
|
|
<div class="container py-4 animate-item fade-up-init">
|
|
<div class="p-5 rounded-4 shadow-sm position-relative overflow-hidden" style="background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);">
|
|
<span class="badge bg-warning text-dark font-monospace mb-3 px-3 py-2 rounded-pill"><i class="fa-solid fa-bolt me-1"></i> ADMISSIONS OPEN 2026</span>
|
|
<h2 class="display-6 fw-bold text-white mb-3">Start Your Automotive Career Today</h2>
|
|
<p class="text-white-50 fs-5 mb-4 max-width-600 mx-auto">
|
|
Take the first step toward becoming a certified automotive engineer or high-voltage EV specialist.
|
|
</p>
|
|
<div class="d-flex justify-content-center">
|
|
<a href="/apply" class="cta-btn">
|
|
Apply For Courses <i class="fa-solid fa-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Scroll animations observer
|
|
const animatedElements = document.querySelectorAll('.animate-item');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('animated');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.15
|
|
});
|
|
|
|
animatedElements.forEach(el => observer.observe(el));
|
|
|
|
// Stats Number Counter Animation
|
|
const counterElements = document.querySelectorAll('.count-up');
|
|
const counterObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const el = entry.target;
|
|
const target = parseInt(el.getAttribute('data-count-target') || '0', 10);
|
|
const suffix = el.getAttribute('data-count-suffix') || '';
|
|
let current = 0;
|
|
const increment = Math.ceil(target / 40);
|
|
const timer = setInterval(() => {
|
|
current += increment;
|
|
if (current >= target) {
|
|
current = target;
|
|
clearInterval(timer);
|
|
}
|
|
el.textContent = current.toLocaleString() + suffix;
|
|
}, 30);
|
|
counterObserver.unobserve(el);
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
counterElements.forEach(el => counterObserver.observe(el));
|
|
});
|
|
</script>
|
|
|
|
@endsection |