imadhi
/
academy
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

set new themes 0721

This commit is contained in:
imadhigp 2026-07-21 16:57:33 +05:30
parent 2e799d798a
commit 021ec03fda
6 changed files with 393 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

340
resources/views/abouts.blade.php
View File

@ -25,10 +25,10 @@ body {
color: var(--text-main); color: var(--text-main);
} }
.hero-about{ /* .hero-about{
min-height:60vh; min-height:60vh;
background: background:
linear-gradient(rgba(163, 177, 251, 0.26), rgb(50, 31, 31)), url('https://images.pexels.com/photos/1595385/pexels-photo-1595385.jpeg'); 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-size:cover;
background-position:center; background-position:center;
display:flex; display:flex;
@ -36,6 +36,17 @@ body {
justify-content:center; justify-content:center;
text-align:center; text-align:center;
color:#fff; 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{ .section-title{
@ -61,8 +72,8 @@ body {
.icon-circle { .icon-circle {
width:75px; width:75px;
height:75px; height:75px;
background: var(--primary); background: #6e3232;
color:#fff; color: #f6e983;
border-radius:50%; border-radius:50%;
display:flex; display:flex;
align-items:center; align-items:center;
@ -132,7 +143,8 @@ body {
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.4); box-shadow: 0 5px 15px rgba(188, 26, 26, 0.4);
} }
.btn-view-courses {
/* .btn-view-courses {
background: var(--primary); background: var(--primary);
color: #fff; color: #fff;
transition: all 0.3s ease; transition: all 0.3s ease;
@ -142,6 +154,233 @@ body {
background: var(--secondary); background: var(--secondary);
color: #fff; color: #fff;
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.2); box-shadow: 0 5px 15px rgba(188, 26, 26, 0.2);
} */
.btn-view-courses{
background: #822424;
color: #fff;
padding: 14px 35px;
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="{{ route('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')
<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(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: #fffefa;;
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: 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>
@ -271,4 +510,95 @@ document.addEventListener('DOMContentLoaded', function () {
}); });
</script> </script>
@endsection
</a>
</div>
</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 => {
if (entry.isIntersecting) {
entry.target.classList.add('animated');
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.15
});
animatedElements.forEach(el => observer.observe(el));
});
</script>
@endsection @endsection

21
resources/views/apply.blade.php
View File

@ -13,19 +13,20 @@
:root { :root {
/* Premium Modern Automotive Palette */ /* Premium Modern Automotive Palette */
--primary: #3E51B8; /* Tech Blue */ --primary: #0F2C59;
--primary-dark: #001395; /* Deep Accent Blue */ --secondary: #822424;
--secondary: #6a2525; /* Muted Racing Red */ --secondary-hover: #6a2525;
--secondary-hover: #822424; /* Dark Burnt Red */ --accent-yellow: #FFE618;
--accent-yellow: #FFE618; /* High-Visibility Electric Yellow */ --bg-light: #F8FAFC;
--bg-light: #F8FAFC; /* Clean grey background */ --text-main: #1E293B;
--card-border: rgba(62, 81, 184, 0.12); --card-border: rgba(62, 81, 184, 0.12);
} }
.hero { .hero {
height: 240px; height: 240px;
background: linear-gradient(rgba(0, 19, 149, 0.75), rgba(106, 37, 37, 0.85)), background: linear-gradient(rgba(214, 219, 255, 0.79), rgba(0, 0, 0, 0.85)), url('https://images.unsplash.com/photo-1517520287167-4bbf64a00d66?auto=format&fit=crop&w=1600&q=80');
url('https://images.unsplash.com/photo-1517520287167-4bbf64a00d66?auto=format&fit=crop&w=1600&q=80');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
display: flex; display: flex;
@ -61,7 +62,7 @@
} }
.form-header { .form-header {
background: linear-gradient(135deg, #0028FFBA 0%, #343030fa 100%); background: linear-gradient(135deg, #8C4242 0%, #161414fa 100%);
color: white; color: white;
padding: 25px 30px; padding: 25px 30px;
border-bottom: 3px solid var(--accent-yellow); border-bottom: 3px solid var(--accent-yellow);
@ -115,7 +116,7 @@
} }
.submit-btn { .submit-btn {
background: var(--primary); background:var(--secondary);
color: white; color: white;
border: none; border: none;
padding: 14px 30px; padding: 14px 30px;

6
resources/views/contacts.blade.php
View File

@ -28,7 +28,7 @@ body {
.hero-contact{ .hero-contact{
min-height:50vh; min-height:50vh;
background: background:
linear-gradient(rgba(227, 227, 227, 0.19), rgba(117, 57, 57, 0.8)), url('https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg'); linear-gradient(rgba(218, 225, 255, 0.56), rgba(0, 0, 0, 0.8)), url('https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg');
background-size:cover; background-size:cover;
background-position:center; background-position:center;
display:flex; display:flex;
@ -60,7 +60,7 @@ body {
} }
.btn-contact{ .btn-contact{
background: var(--primary); background: #6a2525 ;
color:#fff; color:#fff;
border-radius:10px; border-radius:10px;
padding:12px 30px; padding:12px 30px;
@ -94,7 +94,7 @@ body {
} }
.info-card i { .info-card i {
color: var(--primary) !important; color: #FFC926 !important;
transition: color 0.3s ease; transition: color 0.3s ease;
} }

40
resources/views/courses.blade.php
View File

@ -78,7 +78,7 @@ body {
} }
.search-box button { .search-box button {
background: linear-gradient(135deg, #3B43B6 0%, var(--secondary-hover) 100%); background: linear-gradient(135deg, #13141A 0%, #8ca8e9 100%);
color: #fff; color: #fff;
border: none; border: none;
padding: 0 30px; padding: 0 30px;
@ -93,17 +93,17 @@ body {
/* ===== HIGHLY SATISFYING HORIZONTAL COURSE CARDS ===== */ /* ===== HIGHLY SATISFYING HORIZONTAL COURSE CARDS ===== */
.course-card { .course-card {
border: 1px solid var(--card-border);
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 8px 30px var(--shadow-color); /* box-shadow: 0 8px 30px var(--shadow-color); */
} }
.course-card:hover { .course-card:hover {
transform: translateY(-6px); transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(62, 81, 184, 0.15); /* box-shadow: 0 20px 40px rgba(62, 81, 184, 0.15); */
border-color: var(--primary-light); /* border-color: var(--primary-light); */
} }
.course-image-wrapper { .course-image-wrapper {
@ -138,7 +138,7 @@ body {
font-size: 23px; font-size: 23px;
font-weight: 750; font-weight: 750;
line-height: 1.3; line-height: 1.3;
color:#1A4E7B; color:#2B2B2B;
margin-bottom: 8px; margin-bottom: 8px;
transition: color 0.3s ease; transition: color 0.3s ease;
} }
@ -150,7 +150,7 @@ body {
.course-author { .course-author {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: var(--primary-light); color: #910909;
margin-bottom: 14px; margin-bottom: 14px;
} }
@ -237,7 +237,7 @@ body {
/* --- Modernized Why Study With Us Section --- */ /* --- Modernized Why Study With Us Section --- */
.features-section { .features-section {
background-color: var(--bg-light); background-color: var(--bg-light);
border-radius: 32px; /* border-radius: 32px; */
padding: 80px 40px; padding: 80px 40px;
margin-bottom: 40px; margin-bottom: 40px;
background-image: radial-gradient(rgba(62, 81, 184, 0.04) 1px, transparent 0); background-image: radial-gradient(rgba(62, 81, 184, 0.04) 1px, transparent 0);
@ -245,10 +245,10 @@ body {
} }
.features-section h2 { .features-section h2 {
font-size: 36px; font-size: 45px;
font-weight: 800; font-weight: 800;
color: #304599; color: #ffffff;
margin-bottom: 12px; margin-bottom: 54px;
} }
.section-divider { .section-divider {
@ -266,7 +266,7 @@ body {
height: 100%; height: 100%;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
border: 1px solid var(--card-border); border: 1px solid var(--card-border);
text-align: left; text-align: center;
box-shadow: 0 6px 20px rgba(62, 81, 184, 0.02); box-shadow: 0 6px 20px rgba(62, 81, 184, 0.02);
} }
@ -282,14 +282,17 @@ body {
font-size: 24px; font-size: 24px;
margin-bottom: 24px; margin-bottom: 24px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
margin-left: 38%;
} }
.feature-box:hover { .feature-box:hover {
transform: translateY(-8px); transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(62, 81, 184, 0.12); box-shadow: 0 15px 35px rgba(62, 81, 184, 0.12);
border-color: rgba(188, 26, 26, 0.2); border-color: rgba(188, 26, 26, 0.2);
color:#6a2525 ;
} }
.feature-box:hover .feature-icon-wrapper { .feature-box:hover .feature-icon-wrapper {
background: linear-gradient(135deg, var(--secondary) 0%, var(--accent-orange) 100%); background: linear-gradient(135deg, var(--secondary) 0%, var(--accent-orange) 100%);
color: #fff; color: #fff;
@ -303,15 +306,23 @@ body {
.feature-box:hover .feature-icon-wrapper i { .feature-box:hover .feature-icon-wrapper i {
transform: rotateY(-180deg); transform: rotateY(-180deg);
} }
.feature-box h5 { .feature-box h5 {
font-size: 19px; font-size: 19px;
font-weight: 700; font-weight: 700;
color: var(--primary); color: #181818;
margin-bottom: 12px; margin-bottom: 12px;
} }
.feature-box h5:hover {
color: #822424 ;
}
.feature-box p { .feature-box p {
font-size: 14.5px; font-size: 14.5px;
color: var(--text-muted); color: var(--text-muted);
@ -495,7 +506,8 @@ $courses=[
{{-- Why Study With Us Section --}} {{-- Why Study With Us Section --}}
<section class="pb-5 why-study-section> <section class="pb-5 why-study-section>
<div class="container"> <div class="container">
<div class="features-section text-center animate-on-scroll fade-up-init" style="background-image: linear-gradient(rgba(141, 189, 255, 0.37), rgba(84, 60, 60, 0.69)), url('https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?auto=format&fit=crop&w=900&q=80'); <div class="features-section text-center animate-on-scroll fade-up-init"
style="background-image: linear-gradient(rgba(110, 126, 166, 0.84), rgba(15, 23, 42, 0.90)), 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-repeat: no-repeat;"> background-repeat: no-repeat;">

9
resources/views/layouts/app.blade.php
View File

@ -17,7 +17,8 @@
} }
.navbar { .navbar {
background: #3E51B8; background:#2D355B;
/* background: #3E51B8; */
z-index: 1000; z-index: 1000;
position: fixed; position: fixed;
top: 0; top: 0;
@ -46,13 +47,13 @@
.nav-link:hover, .nav-link:hover,
.nav-link.active-page { .nav-link.active-page {
/* color: #FFEA85 !important; */ color: #FFEA85 !important;
color: #FF4040FC !important; /* color: #FF4040FC !important; */
font-weight: bold; font-weight: bold;
} }
.site-footer { .site-footer {
background:#253EB3; background:#1F2541;
/* background: #182EA4; */ /* background: #182EA4; */
color: #ffffff; color: #ffffff;
padding: 60px 0 30px; padding: 60px 0 30px;

13
resources/views/welcome.blade.php
View File

@ -31,7 +31,7 @@
/* ===== Global Improvements ===== */ /* ===== Global Improvements ===== */
body { body {
font-family: 'Segoe UI', Arial, sans-serif; font-family: 'Segoe UI', Arial, sans-serif;
color: var(--text-main); color: #FFFD67;
background-color: #ffffff; background-color: #ffffff;
} }
@ -98,7 +98,8 @@ body {
transform: translateY(-3px); transform: translateY(-3px);
} }
/* ===== Hero Section ===== */
.hero { .hero {
height: 650px; height: 650px;
background: linear-gradient(rgba(207, 226, 255, 0.88), rgba(0, 9, 15, 0.75)), url('https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80'); background: linear-gradient(rgba(207, 226, 255, 0.88), rgba(0, 9, 15, 0.75)), url('https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80');
@ -126,10 +127,10 @@ body {
.hero p { .hero p {
font-size: 22px; font-size: 22px;
max-width: 700px; max-width: 700px;
color: #E2E8F0; color: white;
} }
/* ===== NEW & IMPROVED COURSES CARD DESIGN ===== */
.courses-section { .courses-section {
background-color: var(--bg-light); background-color: var(--bg-light);
} }
@ -290,7 +291,7 @@ body {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(rgba(122, 123, 177, 0.9), rgba(0, 9, 15, 0.31)), url('https://images.unsplash.com/photo-1581093803931-46e730e7622e?auto=format&fit=crop&w=1600&q=80'); background: linear-gradient(rgba(17, 17, 39, 0.9), rgba(0, 9, 15, 0.31)), url('https://images.unsplash.com/photo-1581093803931-46e730e7622e?auto=format&fit=crop&w=1600&q=80');
background-position: center; background-position: center;
background-size: cover; background-size: cover;
z-index: 1; z-index: 1;
@ -386,7 +387,7 @@ body {
<div class="text-center mb-5 animate-on-scroll fade-up-init"> <div class="text-center mb-5 animate-on-scroll fade-up-init">
<span class="text-uppercase fw-bold small d-block mb-2" style="color: #822424; letter-spacing: 0.1em;">Academic Programs</span> <span class="text-uppercase fw-bold small d-block mb-2" style="color: #822424; letter-spacing: 0.1em;">Academic Programs</span>
<h2 id="courses-heading" class="display-5 mb-2" style="font-weight: normal; color:#001395;">Our Top Courses</h2> <h2 id="courses-heading" class="display-5 mb-2" style="font-weight: normal; color:#2D355B;">Our Top Courses</h2>
<p class="text-muted fs-5">Explore our professional, industry-recognized automotive engineering curriculums.</p> <p class="text-muted fs-5">Explore our professional, industry-recognized automotive engineering curriculums.</p>
</div> </div>