From 021ec03fda8719aa5917bf70adf6fb8bf5b9996e Mon Sep 17 00:00:00 2001
From: imadhigp <imadhigp@gmail.com>
Date: Tue, 21 Jul 2026 16:57:33 +0530
Subject: [PATCH] set  new themes 0721

---
 resources/views/abouts.blade.php      | 342 +++++++++++++++++++++++++-
 resources/views/apply.blade.php       |  21 +-
 resources/views/contacts.blade.php    |   6 +-
 resources/views/courses.blade.php     |  50 ++--
 resources/views/layouts/app.blade.php |   9 +-
 resources/views/welcome.blade.php     |  13 +-
 6 files changed, 393 insertions(+), 48 deletions(-)

diff --git a/resources/views/abouts.blade.php b/resources/views/abouts.blade.php
index eb5163d..56288bd 100644
--- a/resources/views/abouts.blade.php
+++ b/resources/views/abouts.blade.php
@@ -25,10 +25,10 @@ body {
     color: var(--text-main);
 }
 
-.hero-about{
+/* .hero-about{
     min-height:60vh;
     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-position:center;
     display:flex;
@@ -36,6 +36,17 @@ body {
     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{
@@ -61,8 +72,8 @@ body {
 .icon-circle {
     width:75px;
     height:75px;
-    background: var(--primary);
-    color:#fff;
+    background: #6e3232;
+    color: #f6e983;
     border-radius:50%;
     display:flex;
     align-items:center;
@@ -132,7 +143,8 @@ body {
     box-shadow: 0 5px 15px rgba(188, 26, 26, 0.4);
 }
 
-.btn-view-courses {
+
+ /* .btn-view-courses {
     background: var(--primary);
     color: #fff;
     transition: all 0.3s ease;
@@ -141,7 +153,234 @@ body {
 .btn-view-courses:hover {
     background: var(--secondary);
     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>
 
@@ -271,4 +510,95 @@ document.addEventListener('DOMContentLoaded', function () {
 });
 </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
\ No newline at end of file
diff --git a/resources/views/apply.blade.php b/resources/views/apply.blade.php
index 895adbf..3392212 100644
--- a/resources/views/apply.blade.php
+++ b/resources/views/apply.blade.php
@@ -13,19 +13,20 @@
 
     :root {
         /* Premium Modern Automotive Palette */
-        --primary: #3E51B8;           /* Tech Blue */
-        --primary-dark: #001395;      /* Deep Accent Blue */
-        --secondary: #6a2525;         /* Muted Racing Red */
-        --secondary-hover: #822424;   /* Dark Burnt Red */
-        --accent-yellow: #FFE618;     /* High-Visibility Electric Yellow */
-        --bg-light: #F8FAFC;          /* Clean grey background */
+        --primary: #0F2C59;           
+        --secondary: #822424;          
+        --secondary-hover: #6a2525;    
+        --accent-yellow: #FFE618;     
+        --bg-light: #F8FAFC;  
+         --text-main: #1E293B;      
         --card-border: rgba(62, 81, 184, 0.12);
     }
 
+    
+
     .hero {
         height: 240px;
-        background: linear-gradient(rgba(0, 19, 149, 0.75), rgba(106, 37, 37, 0.85)),
-                    url('https://images.unsplash.com/photo-1517520287167-4bbf64a00d66?auto=format&fit=crop&w=1600&q=80');
+        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');
         background-size: cover;
         background-position: center;
         display: flex;
@@ -61,7 +62,7 @@
     }
 
     .form-header {
-        background: linear-gradient(135deg, #0028FFBA 0%, #343030fa 100%);
+        background: linear-gradient(135deg, #8C4242 0%, #161414fa 100%);
         color: white;
         padding: 25px 30px;
         border-bottom: 3px solid var(--accent-yellow);
@@ -115,7 +116,7 @@
     }
 
     .submit-btn {
-        background: var(--primary);
+        background:var(--secondary);
         color: white;
         border: none;
         padding: 14px 30px;
diff --git a/resources/views/contacts.blade.php b/resources/views/contacts.blade.php
index 8f3216e..ebd54f1 100644
--- a/resources/views/contacts.blade.php
+++ b/resources/views/contacts.blade.php
@@ -28,7 +28,7 @@ body {
 .hero-contact{
     min-height:50vh;
     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-position:center;
     display:flex;
@@ -60,7 +60,7 @@ body {
 }
 
 .btn-contact{
-    background: var(--primary);
+    background: #6a2525 ;
     color:#fff;
     border-radius:10px;
     padding:12px 30px;
@@ -94,7 +94,7 @@ body {
 }
 
 .info-card i {
-    color: var(--primary) !important;
+    color: #FFC926 !important;
     transition: color 0.3s ease;
 }
 
diff --git a/resources/views/courses.blade.php b/resources/views/courses.blade.php
index f785aed..203641a 100644
--- a/resources/views/courses.blade.php
+++ b/resources/views/courses.blade.php
@@ -78,7 +78,7 @@ body {
 }
 
 .search-box button {
-    background: linear-gradient(135deg, #3B43B6 0%, var(--secondary-hover) 100%);
+    background: linear-gradient(135deg, #13141A 0%, #8ca8e9 100%);
     color: #fff;
     border: none;
     padding: 0 30px;
@@ -93,17 +93,17 @@ body {
 
 /* ===== HIGHLY SATISFYING HORIZONTAL COURSE CARDS ===== */
 .course-card {
-    border: 1px solid var(--card-border);
+   
     overflow: hidden;
     background: #fff;
     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 {
     transform: translateY(-6px);
-    box-shadow: 0 20px 40px rgba(62, 81, 184, 0.15);
-    border-color: var(--primary-light);
+    /* box-shadow: 0 20px 40px rgba(62, 81, 184, 0.15); */
+    /* border-color: var(--primary-light); */
 }
 
 .course-image-wrapper {
@@ -138,7 +138,7 @@ body {
     font-size: 23px;
     font-weight: 750;
     line-height: 1.3;
-    color:#1A4E7B;
+    color:#2B2B2B;
     margin-bottom: 8px;
     transition: color 0.3s ease;
 }
@@ -150,7 +150,7 @@ body {
 .course-author {
     font-size: 14px;
     font-weight: 600;
-    color: var(--primary-light);
+    color: #910909;
     margin-bottom: 14px;
 }
 
@@ -237,7 +237,7 @@ body {
 /* --- Modernized Why Study With Us Section --- */
 .features-section {
     background-color: var(--bg-light);
-    border-radius: 32px;
+    /* border-radius: 32px; */
     padding: 80px 40px;
     margin-bottom: 40px;
     background-image: radial-gradient(rgba(62, 81, 184, 0.04) 1px, transparent 0);
@@ -245,10 +245,10 @@ body {
 }
 
 .features-section h2 {
-    font-size: 36px;
+    font-size: 45px;
     font-weight: 800;
-    color: #304599;
-    margin-bottom: 12px;
+    color: #ffffff;
+    margin-bottom: 54px;
 }
 
 .section-divider {
@@ -266,7 +266,7 @@ body {
     height: 100%;
     transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
     border: 1px solid var(--card-border);
-    text-align: left;
+    text-align: center;
     box-shadow: 0 6px 20px rgba(62, 81, 184, 0.02);
 }
 
@@ -282,14 +282,17 @@ body {
     font-size: 24px;
     margin-bottom: 24px;
     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);
     box-shadow: 0 15px 35px rgba(62, 81, 184, 0.12);
     border-color: rgba(188, 26, 26, 0.2);
+    color:#6a2525 ;
 }
 
+
 .feature-box:hover .feature-icon-wrapper {
     background: linear-gradient(135deg, var(--secondary) 0%, var(--accent-orange) 100%);
     color: #fff;
@@ -301,17 +304,25 @@ body {
     transition: transform 0.4s ease;
 }
 
-.feature-box:hover .feature-icon-wrapper i {
+.feature-box:hover .feature-icon-wrapper i   {
     transform: rotateY(-180deg);
+     
 }
 
 .feature-box h5 {
     font-size: 19px;
     font-weight: 700;
-    color: var(--primary);
+    color: #181818;
     margin-bottom: 12px;
 }
 
+.feature-box h5:hover {
+    color: #822424 ;
+}
+
+
+
+
 .feature-box p {
     font-size: 14.5px;
     color: var(--text-muted);
@@ -495,10 +506,11 @@ $courses=[
 {{-- Why Study With Us Section --}}
 <section  class="pb-5 why-study-section>
     <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');
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;">
+    <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-position: center;
+                background-repeat: no-repeat;">
             <h2>Why Study With Us?</h2>
             <!-- <div class="section-divider"></div> -->
             
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index b9497ba..d378208 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -17,7 +17,8 @@
         }
 
         .navbar {
-            background:  #3E51B8;
+            background:#2D355B;
+            /* background:  #3E51B8; */
             z-index: 1000;
             position: fixed;
             top: 0;
@@ -46,13 +47,13 @@
  
         .nav-link:hover,
         .nav-link.active-page {
-            /* color: #FFEA85 !important; */
-           color: #FF4040FC !important;
+            color: #FFEA85 !important;
+           /* color: #FF4040FC !important; */
             font-weight: bold;
         }
 
         .site-footer {
-            background:#253EB3;
+            background:#1F2541;
             /* background: #182EA4; */
             color: #ffffff;
             padding: 60px 0 30px;
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index 5fdb352..84067d2 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -31,7 +31,7 @@
 /* ===== Global Improvements ===== */
 body {
     font-family: 'Segoe UI', Arial, sans-serif;
-    color: var(--text-main);
+    color: #FFFD67;
     background-color: #ffffff;
 }
 
@@ -98,7 +98,8 @@ body {
     transform: translateY(-3px);
 }
 
-/* ===== Hero Section ===== */
+
+
 .hero {
     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');
@@ -126,10 +127,10 @@ body {
 .hero p {
     font-size: 22px;
     max-width: 700px;
-    color: #E2E8F0;
+    color: white;
 }
 
-/* ===== NEW & IMPROVED COURSES CARD DESIGN ===== */
+
 .courses-section {
     background-color: var(--bg-light);
 }
@@ -290,7 +291,7 @@ body {
     left: 0; 
     width: 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-size: cover;
     z-index: 1;
@@ -386,7 +387,7 @@ body {
         
         <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>
-            <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>
         </div>