ui5
This commit is contained in:
KaviSaparamadu
parent
70a97b4019
commit
d7d4d815e3
|
|
@ -1,500 +1,416 @@
|
||||||
@extends('layouts.app')
|
@extends('layouts.app')
|
||||||
|
|
||||||
@section('title','About Us')
|
@section('title', 'About Us')
|
||||||
|
|
||||||
@section('content')
|
|
||||||
|
|
||||||
<style>
|
|
||||||
:root{
|
|
||||||
/* Premium Modern Automotive Palette */
|
|
||||||
--primary: #3E51B8; /* Tech Blue */
|
|
||||||
--primary-light: #0a67df; /* Vibrant Electric Blue */
|
|
||||||
--secondary: #BC1A1A; /* Deep Racing Red */
|
|
||||||
--secondary-hover: #822424; /* Dark Burnt Red */
|
|
||||||
--accent-dark: #753939; /* Muted Crimson */
|
|
||||||
--bg-light: #F8FAFC; /* Soft slate light gray */
|
|
||||||
|
|
||||||
/* Semantic Adjustments */
|
|
||||||
--text-main: #1E293B; /* Slate dark grey */
|
|
||||||
--text-muted: #64748B; /* Neutral gray */
|
|
||||||
--card-border: rgba(62, 81, 184, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Segoe UI', Arial, sans-serif;
|
|
||||||
color: var(--text-main);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .hero-about{
|
|
||||||
min-height:60vh;
|
|
||||||
background:
|
|
||||||
linear-gradient(rgba(185, 205, 253, 0.31), rgb(0, 0, 0)), url('https://images.pexels.com/photos/1595385/pexels-photo-1595385.jpeg');
|
|
||||||
background-size:cover;
|
|
||||||
background-position:center;
|
|
||||||
display:flex;
|
|
||||||
align-items:center;
|
|
||||||
justify-content:center;
|
|
||||||
text-align:center;
|
|
||||||
color:#fff;
|
|
||||||
} */
|
|
||||||
.hero-about {
|
|
||||||
min-height: 60vh;
|
|
||||||
background: linear-gradient(rgba(194, 217, 255, 0.75), rgba(0, 0, 0, 0.85)), url('https://images.unsplash.com/photo-1617814076367-b759c7d7e738?auto=format&fit=crop&w=1600&q=80');
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title{
|
|
||||||
text-align:center;
|
|
||||||
margin-bottom:40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-box {
|
|
||||||
background:#fff;
|
|
||||||
border-radius:20px;
|
|
||||||
padding:35px 25px;
|
|
||||||
box-shadow: 0 10px 30px rgba(0,0,0,.04);
|
|
||||||
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
||||||
border: 1px solid var(--card-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-box:hover {
|
|
||||||
transform: translateY(-10px) scale(1.02);
|
|
||||||
box-shadow: 0 20px 40px rgba(62, 81, 184, 0.12);
|
|
||||||
border-color: var(--primary-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-circle {
|
|
||||||
width:75px;
|
|
||||||
height:75px;
|
|
||||||
background: #6e3232;
|
|
||||||
color: #f6e983;
|
|
||||||
border-radius:50%;
|
|
||||||
display:flex;
|
|
||||||
align-items:center;
|
|
||||||
justify-content:center;
|
|
||||||
font-size:28px;
|
|
||||||
margin:auto;
|
|
||||||
transition: all 0.4s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-box:hover .icon-circle {
|
|
||||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
|
|
||||||
transform: rotateY(180deg);
|
|
||||||
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========================================================
|
|
||||||
Advanced CSS 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(40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-left-init {
|
|
||||||
transform: translateX(-50px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-right-init {
|
|
||||||
transform: translateX(50px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.zoom-in-init {
|
|
||||||
transform: scale(0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-item.animated {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate(0) scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Automotive Theme Glow Pulse Button */
|
|
||||||
@keyframes pulse-btn {
|
|
||||||
0% { box-shadow: 0 0 0 0 rgba(10, 103, 223, 0.4); }
|
|
||||||
70% { box-shadow: 0 0 0 15px rgba(10, 103, 223, 0); }
|
|
||||||
100% { box-shadow: 0 0 0 0 rgba(10, 103, 223, 0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn {
|
|
||||||
background: var(--primary-light);
|
|
||||||
color: #fff !important;
|
|
||||||
padding: 14px 35px;
|
|
||||||
border-radius: 50px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: 0.3s;
|
|
||||||
animation: pulse-btn 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn:hover {
|
|
||||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
|
|
||||||
transform: scale(1.05);
|
|
||||||
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* .btn-view-courses {
|
|
||||||
background: var(--primary);
|
|
||||||
color: #fff;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-view-courses:hover {
|
|
||||||
background: var(--secondary);
|
|
||||||
color: #fff;
|
|
||||||
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.2);
|
|
||||||
} */
|
|
||||||
|
|
||||||
|
|
||||||
.btn-view-courses{
|
|
||||||
background: #822424;
|
|
||||||
color: #fff;
|
|
||||||
/* padding: 14px ; */
|
|
||||||
border-radius: 40px;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-view-courses:hover {
|
|
||||||
background: var(--secondary-hover);
|
|
||||||
border-color: var(--secondary-hover);
|
|
||||||
color: #fff;
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 8px 20px rgba(227, 100, 20, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<!-- HERO -->
|
|
||||||
<section class="hero-about">
|
|
||||||
<div class="container">
|
|
||||||
<div class="animate-item animated fade-up-init">
|
|
||||||
<h1 class="fw-bold display-4">About Our Institute</h1>
|
|
||||||
<p class="mt-3 lead" style="max-width: 700px; margin: auto;">
|
|
||||||
We are committed to delivering high-quality automotive education
|
|
||||||
with practical training and industry-focused learning.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- ABOUT CONTENT -->
|
|
||||||
<section class="py-5 overflow-hidden">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row align-items-center g-5">
|
|
||||||
<div class="col-md-6 animate-item slide-left-init">
|
|
||||||
<img src="https://images.pexels.com/photos/3862130/pexels-photo-3862130.jpeg"
|
|
||||||
class="img-fluid rounded shadow-lg"
|
|
||||||
alt="About Image">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-6 animate-item slide-right-init">
|
|
||||||
<h2 class="fw-bold mb-3">Who We Are</h2>
|
|
||||||
<p class="text-muted fs-5">
|
|
||||||
Our institute specializes in automotive engineering education,
|
|
||||||
offering hands-on training in modern vehicle technologies,
|
|
||||||
mechanical systems, and electric vehicles.
|
|
||||||
</p>
|
|
||||||
<p class="text-muted mb-4">
|
|
||||||
We focus on building skilled professionals who are ready for
|
|
||||||
the global automotive industry.
|
|
||||||
</p>
|
|
||||||
<a href="/courses" class="btn btn-view-courses btn-lg px-4 rounded-pill shadow-sm">
|
|
||||||
View Courses@extends('layouts.app')
|
|
||||||
|
|
||||||
@section('title','About Us')
|
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
/* Premium Modern Automotive Palette */
|
|
||||||
--primary: #3E51B8; /* Tech Blue */
|
--primary: #3E51B8; /* Tech Blue */
|
||||||
--primary-light: #0a67df; /* Vibrant Electric Blue */
|
--primary-light: #0a67df; /* Vibrant Electric Blue */
|
||||||
--secondary: #BC1A1A; /* Deep Racing Red */
|
--secondary: #BC1A1A; /* Deep Racing Red */
|
||||||
--secondary-hover: #822424; /* Dark Burnt Red */
|
--secondary-hover: #822424; /* Dark Burnt Red */
|
||||||
--accent-dark: #753939; /* Muted Crimson */
|
|
||||||
--bg-light: #F8FAFC; /* Soft slate light gray */
|
--bg-light: #F8FAFC; /* Soft slate light gray */
|
||||||
|
--text-main: #0F172A; /* Slate dark grey */
|
||||||
/* Semantic Adjustments */
|
|
||||||
--text-main: #1E293B; /* Slate dark grey */
|
|
||||||
--text-muted: #64748B; /* Neutral gray */
|
--text-muted: #64748B; /* Neutral gray */
|
||||||
--card-border: rgba(62, 81, 184, 0.1);
|
--card-border: rgba(226, 232, 240, 0.9);
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Segoe UI', Arial, sans-serif;
|
|
||||||
color: var(--text-main);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== HERO SECTION ===== */
|
||||||
.hero-about {
|
.hero-about {
|
||||||
min-height: 60vh;
|
position: relative;
|
||||||
background: linear-gradient(rgba(194, 217, 255, 0.75), rgba(0, 0, 0, 0.85)),url('https://images.unsplash.com/photo-1552519507-da3b142c6e3d?auto=format&fit=crop&w=1600&q=80');
|
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-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
color: #ffffff;
|
||||||
|
padding: 70px 20px;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.hero-badge {
|
||||||
text-align: center;
|
display: inline-flex;
|
||||||
margin-bottom: 40px;
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-box {
|
.hero-about h1 {
|
||||||
background: #fff;
|
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;
|
border-radius: 20px;
|
||||||
padding: 35px 25px;
|
padding: 20px 16px;
|
||||||
box-shadow: 0 10px 30px rgba(0,0,0,.04);
|
text-align: center;
|
||||||
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
|
||||||
border: 1px solid var(--card-border);
|
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 {
|
.about-box:hover {
|
||||||
transform: translateY(-10px) scale(1.02);
|
transform: translateY(-8px);
|
||||||
box-shadow: 0 20px 40px rgba(62, 81, 184, 0.12);
|
box-shadow: 0 20px 45px -10px rgba(62, 81, 184, 0.14);
|
||||||
border-color: var(--primary-light);
|
border-color: rgba(62, 81, 184, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-circle {
|
.icon-circle {
|
||||||
width: 75px;
|
width: 64px;
|
||||||
height: 75px;
|
height: 64px;
|
||||||
background: #6e3232;
|
background: linear-gradient(135deg, rgba(62, 81, 184, 0.1) 0%, rgba(10, 103, 223, 0.06) 100%);
|
||||||
color: #fffefa;;
|
color: var(--primary);
|
||||||
border-radius: 50%;
|
border-radius: 20px;
|
||||||
|
border: 1px solid rgba(62, 81, 184, 0.2);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 28px;
|
font-size: 26px;
|
||||||
margin: auto;
|
margin: 0 auto 20px;
|
||||||
transition: all 0.4s ease;
|
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-box:hover .icon-circle {
|
.about-box:hover .icon-circle {
|
||||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
|
background: linear-gradient(135deg, #0F2C59 0%, #3E51B8 100%);
|
||||||
transform: rotateY(180deg);
|
color: #ffffff;
|
||||||
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
|
border-color: transparent;
|
||||||
|
transform: scale(1.12) rotate(6deg);
|
||||||
|
box-shadow: 0 10px 25px rgba(62, 81, 184, 0.35);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========================================================
|
/* ===== CTA BUTTON ===== */
|
||||||
Advanced CSS Scroll Animations
|
.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 {
|
.animate-item {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
will-change: transform, opacity;
|
will-change: transform, opacity;
|
||||||
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
|
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-up-init {
|
.fade-up-init { transform: translateY(30px); }
|
||||||
transform: translateY(40px);
|
.slide-left-init { transform: translateX(-40px); }
|
||||||
}
|
.slide-right-init { transform: translateX(40px); }
|
||||||
|
.zoom-in-init { transform: scale(0.94); }
|
||||||
.slide-left-init {
|
|
||||||
transform: translateX(-50px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-right-init {
|
|
||||||
transform: translateX(50px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.zoom-in-init {
|
|
||||||
transform: scale(0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-item.animated {
|
.animate-item.animated {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translate(0) scale(1);
|
transform: translate(0) scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Automotive Theme Glow Pulse Button */
|
|
||||||
@keyframes pulse-btn {
|
|
||||||
0% { box-shadow: 0 0 0 0 rgba(10, 103, 223, 0.4); }
|
|
||||||
70% { box-shadow: 0 0 0 15px rgba(10, 103, 223, 0); }
|
|
||||||
100% { box-shadow: 0 0 0 0 rgba(10, 103, 223, 0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .cta-btn {
|
|
||||||
background: var(--primary-light);
|
|
||||||
color: #fff !important;
|
|
||||||
padding: 14px 35px;
|
|
||||||
border-radius: 50px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
animation: pulse-btn 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn:hover {
|
|
||||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
|
|
||||||
transform: scale(1.05);
|
|
||||||
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.4);
|
|
||||||
} */
|
|
||||||
|
|
||||||
.cta-btn{
|
|
||||||
background: #822424;
|
|
||||||
color: #fff;
|
|
||||||
padding: 14px 35px;
|
|
||||||
border-radius: 40px;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-btn:hover {
|
|
||||||
background: var(--secondary-hover);
|
|
||||||
border-color: var(--secondary-hover);
|
|
||||||
color: #fff;
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 8px 20px rgba(227, 100, 20, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.btn-view-courses {
|
|
||||||
background: var(--secondary-hover);
|
|
||||||
color: #fff;
|
|
||||||
padding: 14px 35px;
|
|
||||||
border-radius: 40px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
/* border: none; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-view-courses:hover {
|
|
||||||
background: var(--secondary);
|
|
||||||
color: #fff;
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 8px 20px rgba(188, 26, 26, 0.3);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<!-- HERO -->
|
<!-- HERO SECTION -->
|
||||||
<section class="hero-about">
|
<section class="hero-about">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="animate-item animated fade-up-init">
|
<div class="animate-item animated fade-up-init">
|
||||||
<h1 class="fw-bold display-4">About Our Institute</h1>
|
<span class="hero-badge"><i class="fa-solid fa-graduation-cap"></i> Pioneering Automotive Academy</span>
|
||||||
<p class="mt-3 lead" style="max-width: 700px; margin: auto;">
|
<h1 class="fw-bold">Empowering Future Mobility Leaders</h1>
|
||||||
We are committed to delivering high-quality automotive education
|
<p class="lead">
|
||||||
with practical training and industry-focused learning.
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ABOUT CONTENT function -->
|
<!-- FLOATING STATS COUNTER -->
|
||||||
<section class="py-5 overflow-hidden">
|
<div class="container stats-container">
|
||||||
<div class="container">
|
<div class="row g-3 justify-content-center">
|
||||||
<div class="row align-items-center g-5">
|
<div class="col-6 col-md-3 animate-item zoom-in-init" style="transition-delay: 100ms;">
|
||||||
<div class="col-md-6 animate-item slide-left-init">
|
<div class="stat-glass-card">
|
||||||
<img src="https://images.pexels.com/photos/3862130/pexels-photo-3862130.jpeg"
|
<div class="stat-icon"><i class="fa-solid fa-user-graduate"></i></div>
|
||||||
class="img-fluid rounded shadow-lg"
|
<div class="stat-number count-up" data-count-target="2500" data-count-suffix="+">0+</div>
|
||||||
alt="About Image">
|
<div class="stat-label">Graduated Technicians</div>
|
||||||
|
</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>
|
||||||
|
|
||||||
<div class="col-md-6 animate-item slide-right-init">
|
<!-- VISION & MISSION MINIMALIST 1-ROW SECTION -->
|
||||||
<h2 class="fw-bold mb-3">Vision</h2>
|
<section class="py-5 bg-white">
|
||||||
<p class="text-muted fs-5" style="justfy-content: justify;">
|
<div class="container py-3">
|
||||||
To be a global leader in automotive education, driving the future of mobility by empowering the next generation of engineers, technicians, and innovators.
|
<div class="row g-4 align-items-stretch">
|
||||||
</p>
|
|
||||||
<h2 class="fw-bold mb-3">Mission</h2>
|
|
||||||
<p class="text-muted fs-5" style="justfy-content: justify;">
|
|
||||||
To foster technical mastery and critical thinking through immersive, practical learning environments, strong industry partnerships, and a commitment to eco-friendly automotive practices.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- <a href="/courses" class="btn btn-view-courses btn-lg px-4 rounded-pill shadow-sm">
|
<!-- VISION (LEFT COLUMN) -->
|
||||||
View Courses
|
<div class="col-md-6 animate-item slide-left-init">
|
||||||
</a> -->
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- FEATURES -->
|
<!-- ADVANTAGES / WHY CHOOSE US -->
|
||||||
<section class="py-5 bg-light">
|
<section class="py-5 bg-light position-relative">
|
||||||
<div class="container">
|
<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="section-title animate-item fade-up-init">
|
<div class="row g-4">
|
||||||
<h2 class="fw-bold">Why Choose Us</h2>
|
<div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;">
|
||||||
<p class="text-muted">We provide the best learning experience</p>
|
<div class="about-box text-center">
|
||||||
</div>
|
<div class="icon-circle">
|
||||||
|
<i class="fa-solid fa-chalkboard-user"></i>
|
||||||
<div class="row g-4">
|
</div>
|
||||||
<div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;">
|
<h4 class="fw-bold text-dark mb-3">Expert Lecturers</h4>
|
||||||
<div class="about-box text-center">
|
<p class="text-muted mb-0 lh-base">
|
||||||
<div class="icon-circle">
|
Learn directly from veteran automotive engineers, diagnostic specialists, and TVEC certified master instructors.
|
||||||
<i class="fa-solid fa-chalkboard-user"></i>
|
</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>
|
||||||
<h4 class="mt-4 fw-bold">Expert Lecturers</h4>
|
|
||||||
<p class="text-muted mb-0">
|
|
||||||
Experienced industry professionals guiding your learning journey.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</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="mt-4 fw-bold">Practical Training</h4>
|
|
||||||
<p class="text-muted mb-0">
|
|
||||||
Hands-on workshop experience with real vehicles and tools.
|
|
||||||
</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="mt-4 fw-bold">Certified Courses</h4>
|
|
||||||
<p class="text-muted mb-0">
|
|
||||||
Industry-recognized certifications to boost your career.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- CTA -->
|
<!-- CALL TO ACTION (CTA) -->
|
||||||
<section class="py-5 text-center bg-white overflow-hidden">
|
<section class="py-5 text-center bg-white overflow-hidden position-relative">
|
||||||
<div class="container py-4 animate-item fade-up-init">
|
<div class="container py-4 animate-item fade-up-init">
|
||||||
<h2 class="fw-bold mb-3">Start Your Automotive Career Today</h2>
|
<div class="p-5 rounded-4 shadow-sm position-relative overflow-hidden" style="background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);">
|
||||||
<p class="text-muted fs-5 mb-5">
|
<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>
|
||||||
Join our institute and become a skilled automotive professional.
|
<h2 class="display-6 fw-bold text-white mb-3">Start Your Automotive Career Today</h2>
|
||||||
</p>
|
<p class="text-white-50 fs-5 mb-4 max-width-600 mx-auto">
|
||||||
<div class="d-flex justify-content-center">
|
Take the first step toward becoming a certified automotive engineer or high-voltage EV specialist.
|
||||||
<a href="/apply" class="cta-btn shadow">
|
</p>
|
||||||
Apply Courses
|
<div class="d-flex justify-content-center">
|
||||||
</a>
|
<a href="/apply" class="cta-btn">
|
||||||
|
Apply For Courses <i class="fa-solid fa-arrow-right"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
// Scroll animations observer
|
||||||
const animatedElements = document.querySelectorAll('.animate-item');
|
const animatedElements = document.querySelectorAll('.animate-item');
|
||||||
|
|
||||||
const observer = new IntersectionObserver((entries) => {
|
const observer = new IntersectionObserver((entries) => {
|
||||||
entries.forEach(entry => {
|
entries.forEach(entry => {
|
||||||
if (entry.isIntersecting) {
|
if (entry.isIntersecting) {
|
||||||
|
|
@ -507,99 +423,32 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||||
});
|
});
|
||||||
|
|
||||||
animatedElements.forEach(el => observer.observe(el));
|
animatedElements.forEach(el => observer.observe(el));
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
@endsection
|
// Stats Number Counter Animation
|
||||||
</a>
|
const counterElements = document.querySelectorAll('.count-up');
|
||||||
</div>
|
const counterObserver = new IntersectionObserver((entries) => {
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- FEATURES -->
|
|
||||||
<section class="py-5 bg-light">
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<div class="section-title animate-item fade-up-init">
|
|
||||||
<h2 class="fw-bold">Why Choose Us</h2>
|
|
||||||
<p class="text-muted">We provide the best learning experience</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="mt-4 fw-bold">Expert Lecturers</h4>
|
|
||||||
<p class="text-muted mb-0">
|
|
||||||
Experienced industry professionals guiding your learning journey.
|
|
||||||
</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="mt-4 fw-bold">Practical Training</h4>
|
|
||||||
<p class="text-muted mb-0">
|
|
||||||
Hands-on workshop experience with real vehicles and tools.
|
|
||||||
</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="mt-4 fw-bold">Certified Courses</h4>
|
|
||||||
<p class="text-muted mb-0">
|
|
||||||
Industry-recognized certifications to boost your career.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-5 text-center bg-white overflow-hidden">
|
|
||||||
<div class="container py-4 animate-item fade-up-init">
|
|
||||||
<h2 class="fw-bold mb-3">Start Your Automotive Career Today</h2>
|
|
||||||
<p class="text-muted fs-5 mb-5">
|
|
||||||
Join our institute and become a skilled automotive professional.
|
|
||||||
</p>
|
|
||||||
<div class="d-flex justify-content-center">
|
|
||||||
<a href="/apply" class="cta-btn shadow">
|
|
||||||
Apply Courses
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
|
||||||
const animatedElements = document.querySelectorAll('.animate-item');
|
|
||||||
|
|
||||||
const observer = new IntersectionObserver((entries) => {
|
|
||||||
entries.forEach(entry => {
|
entries.forEach(entry => {
|
||||||
if (entry.isIntersecting) {
|
if (entry.isIntersecting) {
|
||||||
entry.target.classList.add('animated');
|
const el = entry.target;
|
||||||
observer.unobserve(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 });
|
||||||
threshold: 0.15
|
|
||||||
});
|
|
||||||
|
|
||||||
animatedElements.forEach(el => observer.observe(el));
|
counterElements.forEach(el => counterObserver.observe(el));
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
@endsection
|
@endsection
|
||||||
Loading…
Reference in New Issue