academy/resources/views/welcome.blade.php

402 lines
9.9 KiB
PHP

@extends('layouts.app')
@section('title', 'Home')
@push('styles')
<link rel="preload" as="image"
href="https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80"
fetchpriority="high">
<link rel="stylesheet" href="{{ asset('css/pages/home.css') }}">
@endpush
@section('content')
<style>
<style>
:root{
--primary:#5E244E;
--secondary:#8B3A74;
--light:#F8F4F7;
--dark:#2F1027;
--gold:#FFC107;
}
.btn-theme{
background:#5E244E;
color:#fff;
border:2px solid #5E244E;
padding:12px 32px;
border-radius:40px;
font-weight:600;
transition:.3s;
}
.btn-theme:hover{
background:#8B3A74;
border-color:#8B3A74;
color:#fff;
transform:translateY(-3px);
}
.btn-outline-theme{
background:transparent;
color:#fff;
border:2px solid #fff;
padding:12px 32px;
border-radius:40px;
font-weight:600;
transition:.3s;
}
.btn-outline-theme:hover{
background:#fff;
color:#5E244E;
}
.btn-outline-light-custom{
background:#FFC107;
color:#000;
border:2px solid #FFC107;
padding:12px 32px;
border-radius:40px;
font-weight:600;
transition:.3s;
}
.btn-outline-light-custom:hover{
background:#ffcd39;
border-color:#ffcd39;
color:#000;
}
/* ===== Font ===== */
body{
font-family: Arial, Helvetica, sans-serif;
}
.hero{
height:700px;
background:
linear-gradient(rgba(30,10,25,.65),rgba(30,10,25,.65)),
url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80');
background-size:cover;
background-position:center;
}
.hero-content{
height:100%;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
color:#fff;
}
.hero h1{
font-size:60px;
font-weight:700;
font-family: Arial, Helvetica, sans-serif;
}
.hero p{
font-size:22px;
max-width:700px;
font-family: Arial, Helvetica, sans-serif;
}
.btn-theme{
background:#5E244E;
color:#fff;
border:none;
padding:14px 35px;
border-radius:40px;
transition:.3s;
}
.btn-theme:hover{
background:#8B3A74;
color:#fff;
transform:translateY(-3px);
}
.section{
padding:90px 0;
}
.section-title,
h2,
h3,
h4,
h5,
h6{
font-family: Arial, Helvetica, sans-serif;
font-weight:700;
color:#5E244E;
}
.card{
border:none;
overflow:hidden;
border-radius:18px;
transition:.4s;
}
.card img{
transition:.5s;
}
.card:hover{
transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,.15);
}
.card:hover img{
transform:scale(1.08);
}
.card-body h4{
color:#5E244E;
}
.read-btn{
background:#5E244E;
color:#fff;
border-radius:30px;
padding:10px 25px;
border:none;
}
.read-btn:hover{
background:#8B3A74;
color:#fff;
}
.why-section{
background:#F8F4F7;
}
.why-section li{
font-size:18px;
margin-bottom:18px;
}
.why-section i{
color:#5E244E;
}
.cta{
background:#5E244E;
color:#fff;
border-radius:20px;
padding:80px 30px;
}
.cta p{
color:#ddd;
}
.cta .btn{
background:#FFC107;
color:#000;
border:none;
border-radius:40px;
padding:14px 35px;
font-weight:bold;
}
.cta .btn:hover{
background:#ffcd39;
}
</style>
{{-- ===================== HERO ===================== --}}
<section class="hero" role="banner" aria-label="Automobile Engineering Academy introduction">
<div class="container">
<div class="hero-content text-center">
<h1 class="display-4 fw-bold">
Automobile Engineering Academy
</h1>
<p class="lead mb-5">
Driving Innovation Through Education, Research &amp; Technology
</p>
<div class="d-flex flex-wrap justify-content-center gap-3">
<a href="{{ Route::has('apply') ? route('apply') : '#' }}"
class="btn btn-theme">
<i class="fa-solid fa-user-plus me-2"></i>
Apply Now
</a>
<a href="/courses"
class="btn btn-outline-theme">
<i class="fa-solid fa-book-open me-2"></i>
Explore Courses
</a>
<!-- <a href="/contact"
class="btn btn-outline-light-custom">
<i class="fa-solid fa-phone me-2"></i>
Contact Admissions
</a> -->
<a href="mailto:imadhigp@gmail.com" class="btn btn-outline-light-custom">
<i class="fa-solid fa-phone me-2"></i>
Contact Admissions
</a>
</div>
</div>
</div>
</section>
{{-- ===================== OUR COURSES ===================== --}}
<section class="section py-5" aria-labelledby="courses-heading">
<div class="container py-5">
<div class="text-center mb-5">
<h2 id="courses-heading">Our Courses</h2>
<p class="text-muted">
Explore our professional automotive engineering courses.
</p>
</div>
@php
$courses = [
[
'image' => 'https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=800&q=80',
'title' => 'Automotive Engineering course',
'desc' => 'Learn vehicle design, engine technology, diagnostics and manufacturing.',
],
[
'image' => 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=800&q=80',
'title' => 'Mechanical Systems course',
'desc' => 'Study transmission systems, suspension, braking and vehicle maintenance.',
],
[
'image' => 'https://images.unsplash.com/photo-1502877338535-766e1452684a?auto=format&fit=crop&w=800&q=80',
'title' => 'Electric Vehicle Technology course',
'desc' => 'Master EV batteries, powertrains, charging systems and smart mobility.',
],
];
@endphp
<div class="row g-4">
@foreach($courses as $course)
<div class="col-lg-4 col-md-6">
<div class="card shadow-sm border-0 h-100">
<img src="{{ $course['image'] }}"
class="card-img-top"
alt="{{ $course['title'] }}"
width="800"
height="230"
loading="lazy"
decoding="async"
style="height:230px; object-fit:cover;">
<div class="card-body text-center">
<h4 class="fw-bold">
{{ $course['title'] }}
</h4>
<p class="text-muted">
{{ $course['desc'] }}
</p>
<a href="/courses" class="btn read-btn">
View Course
</a>
</div>
</div>
</div>
@endforeach
</div>
</div>
</section>
{{-- ===================== WHY CHOOSE US ===================== --}}
<section class="section py-5 why-section" aria-labelledby="why-us-heading">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-6">
<img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=900&q=80"
alt="Automotive Engineering Lab"
class="img-fluid rounded shadow"
width="900"
height="600"
loading="lazy"
decoding="async">
</div>
<div class="col-lg-6">
<h2 id="why-us-heading" class="fw-bold mb-4">
Why Choose Us?
</h2>
<ul class="list-unstyled">
<li class="mb-3">
<i class="fa-solid fa-check text-success me-2"></i>
Modern Laboratories
</li>
<li class="mb-3">
<i class="fa-solid fa-check text-success me-2"></i>
Industry Qualified Lecturers
</li>
<li class="mb-3">
<i class="fa-solid fa-check text-success me-2"></i>
Hands-on Vehicle Training
</li>
<li class="mb-3">
<i class="fa-solid fa-check text-success me-2"></i>
Hybrid &amp; Electric Vehicle Research Center
</li>
<li class="mb-3">
<i class="fa-solid fa-check text-success me-2"></i>
Internship Opportunities
</li>
</ul>
</div>
</div>
</div>
</section>
{{-- ===================== CALL TO ACTION ===================== --}}
<section class="section py-5">
<div class="container text-center">
<h2 class="fw-bold mb-3">
Join the Future of Automotive Engineering
</h2>
<p class="text-muted mb-4">
Shape the future with innovation, technology and practical learning.
</p>
<a href="{{ Route::has('apply') ? route('apply') : '#' }}"
class="btn btn-theme">
<i class="fa-solid fa-user-plus me-2"></i>
Apply Now
</a>
<!-- <a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-primary btn-lg">
Apply Now
</a> -->
</div>
</section>
@endsection