set courese backend

app/Http/Controllers/StudentPortalController.php

@@ -34,28 +34,94 @@ public function studentlogin(Request $request)
 }
 
 
+
+public function showProfile(Request $request)
+{
+    
+    $log_id = $request->session()->get('student_log_id');
+    $student_code = $request->session()->get('student_id');
+
+    if (!$log_id && !$student_code) {
+        return redirect('/')->with('error', 'Please login first!');
+    }
+
+     
+    $student = DB::table('student_details')
+                 ->where('student_portal_log_id', $log_id)
+                 ->orWhere('student_id', $student_code)
+                 ->first();
+
+    
+    if (!$student) {
+        return redirect()->back()->with('error', 'Student details not found in database!');
+    }
+
+    return view('StudentProfile', compact('student'));
+}
+
+
+// public function showProfile(Request $request)
+// {
+    
+//     $log_id = $request->session()->get('student_log_id');
+//     $student_code = $request->session()->get('student_id');
+
+//     if (!$log_id && !$student_code) {
+//         return redirect('/')->with('error', 'Please login first!');
+//     }
+
+     
+//     $student = DB::table('student_details')
+//                  ->where('student_portal_log_id', $log_id)
+//                  ->orWhere('student_id', $student_code)
+//                  ->first();
+
+    
+//     if (!$student) {
+//         return redirect()->back()->with('error', 'Student details not found in database!');
+//     }
+
+//     return view('StudentProfile', compact('student'));
+// }
+
+
+
 // public function showProfile(Request $request)
 // {
      
 //     $log_id = $request->session()->get('student_id');
 
-        
 //     if (!$log_id) {
 //         return redirect('/')->with('error', 'Please login first!');
 //     }
 
      
 //     $student = DB::table('student_details')
-//                      ->where('student_portal_log_id', $log_id)
+//                  ->where('student_id', $log_id)
+//                  ->orWhere('student_portal_log_id', $log_id)
 //                  ->first();
 
    
 //     if (!$student) {
-//             return redirect()->back()->with('error', 'Student details not found!');
+//         $student = (object)[
+//             'image' => '',
+//             'full_name' => 'Data Not Found (Check DB)',
+//             'student_id' => $log_id,
+//             'nic_passport' => 'N/A',
+//             'date_of_birth' => '2000-01-01',
+//             'gender' => 'N/A',
+//             'email' => 'N/A',
+//             'phone' => 'N/A',
+//             'qualification' => 'N/A',
+//             'institute' => 'N/A',
+//             'year_completed' => 'N/A',
+//             'course_name' => 'N/A',
+//             'duration' => 'N/A',
+//             'current_semester' => 'N/A',
+//             'trainer_name' => 'N/A'
+//         ];
 //     }
 
-         
 //     return view('StudentProfile', compact('student'));
 // }
-
 }

app/Http/Controllers/applyController.php

@@ -2,9 +2,60 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Application;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
 
-class applyController extends Controller
+class ApplyController extends Controller
 {
-    //
+    public function index()
+    {
+        return view('apply'); // Tawa name ekak nam view name eka wenas karanna
+    }
+
+    public function store(Request $request)
+    {
+        // 1. Data Validation Rules
+        $validatedData = $request->validate([
+            'first_name' => 'required|string|max:255',
+            'last_name' => 'required|string|max:255',
+            'nic' => 'nullable|string|max:50',
+            'nationality' => 'nullable|string|max:100',
+            'address' => 'required|string|max:500',
+            'state' => 'required|string|max:255',
+            'gender' => 'nullable|string',
+            'dob' => 'nullable|date',
+            'mobile' => 'required|string|max:20',
+            'mobile2' => 'nullable|string|max:20',
+            'email' => 'required|email|max:255',
+            'preferred_contact_method' => 'nullable|string',
+            'still_at_school' => 'nullable|string',
+            'highest_qualification' => 'nullable|string',
+            'school_name' => 'nullable|string|max:255',
+            'year_completed' => 'nullable|numeric|digits:4',
+            'exam_passed' => 'nullable|string',
+            'subjects' => 'nullable|string|max:255',
+            'grades_results' => 'nullable|string',
+            'certificates.*' => 'nullable|file|mimes:pdf,jpg,jpeg,png|max:5120', // Max 5MB per file
+            'emergency_contact_name' => 'required|string|max:255',
+            'emergency_contact_relationship' => 'required|string|max:255',
+        ]);
+
+        // 2. Multi File Upload Process
+        $certificatePaths = [];
+        if ($request->hasFile('certificates')) {
+            foreach ($request->file('certificates') as $file) {
+                $path = $file->store('certificates', 'public');
+                $certificatePaths[] = $path;
+            }
+        }
+
+        // 3. Current Logged-in User ID එක set කිරීම & Data Save කිරීම
+        $application = new Application($validatedData);
+        $application->user_id = Auth::id(); // Log unukena ge ID eka attach wei
+        $application->certificates = $certificatePaths; // Paths array eka save wei
+        $application->save();
+
+        return redirect()->back()->with('success', 'Your application has been submitted successfully!');
+    }
 }

app/Http/Controllers/auth/ForgotPasswordController.php

@@ -0,0 +1,112 @@
+<?php
+
+namespace App\Http\Controllers\Auth;  
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Session;
+use Illuminate\Support\Facades\Mail;
+use Illuminate\Support\Facades\Hash;
+use App\Mail\OtpEmail;
+use App\Models\User;
+
+class ForgotPasswordController extends Controller  
+{
+    public function index()
+    {
+        return view('forgotPassword');
+    }
+
+    public function resetEmail(Request $request)
+    {
+        $request->validate([
+            'email' => 'required|email|exists:users,email'
+        ], [
+            'email.exists' => 'The provided email is not registered in our system.'
+        ]);
+
+        $email = $request->input('email');
+        $user = User::where('email', $email)->first();
+
+        $otp = random_int(100000, 999999);
+
+        Session::put('otp', $otp);
+        Session::put('email', $email);
+
+        $user->email_otp = $otp;
+        $user->save();
+
+        Mail::to($email)->send(new OtpEmail($otp));
+
+        return response()->json([
+            'success' => true, 
+            'message' => 'OTP has been sent to your email.'
+        ]);
+    }
+
+   
+    
+    public function verifyOtpEmail(Request $request)
+    {
+        $request->validate([
+            'otp' => 'required|numeric'
+        ]);
+
+        $otp = $request->input('otp');
+        $email = Session::get('email');
+
+        if (!$email) {
+            return response()->json([
+                'success' => false, 
+                'message' => 'Session expired. Please request a new OTP.'
+            ], 400);
+        }
+
+        $user = User::where('email', $email)
+                    ->where('email_otp', $otp)
+                    ->first();
+
+        if ($user) {
+            Session::put('otp_verified', true);
+
+            return response()->json([
+                'success' => true, 
+                'message' => 'OTP is correct.', 
+                'email'   => $email
+            ]);
+        }
+
+        return response()->json([
+            'success' => false, 
+            'message' => 'Invalid OTP code. Please try again.'
+        ], 422);
+    }
+
+    public function updatePassword(Request $request)
+    {
+        $request->validate([
+            'email'       => 'required|email|exists:users,email',
+            'password_mo' => 'required|string|min:8|confirmed',
+        ]);
+
+        $email = $request->input('email');
+        
+        if (!Session::get('otp_verified') || Session::get('email') !== $email) {
+            return redirect()->back()->with('error', 'Unauthorized access or session expired.');
+        }
+
+        $user = User::where('email', $email)->first();
+
+        if ($user) {
+            $user->password = Hash::make($request->input('password_mo'));
+            $user->email_otp = null;
+            $user->save();
+
+            Session::forget(['otp', 'email', 'otp_verified']);
+
+            return redirect('/signin')->with('success', 'Password updated successfully. Please login.');
+        }
+
+        return redirect()->back()->with('error', 'User not found.');
+    }
+}

app/Http/Controllers/coursesController.php

@@ -2,9 +2,16 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\courses;  
 use Illuminate\Http\Request;
 
 class coursesController extends Controller
 {
-    //
+    public function index()
+    {
+        
+        $courses = courses::all(); 
+
+        return view('courses', compact('courses'));
+    }
 }

app/Http/Controllers/studentportalnavController.php

@@ -3,14 +3,22 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;  
 
 class studentportalnavController extends Controller
 {
     public function logout(Request $request)
     {
+         
+        $request->session()->forget(['student_log_id', 'student_id']);
+
+         
         Auth::logout();
+
+         
         $request->session()->invalidate();
         $request->session()->regenerateToken();
+
         return response()->json([
             'success' => true,
             'message' => 'Logged out successfully'

app/Mail/OtpEmail.php

@@ -0,0 +1,56 @@
+<?php
+
+namespace App\Mail;
+
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Mail\Mailable;
+use Illuminate\Mail\Mailables\Attachment;
+use Illuminate\Mail\Mailables\Content;
+use Illuminate\Mail\Mailables\Envelope;
+use Illuminate\Queue\SerializesModels;
+
+class OtpEmail extends Mailable
+{
+    use Queueable, SerializesModels;
+
+    public $otp;
+
+    /**
+     * Create a new message instance.
+     */
+    public function __construct($otp) 
+    {
+        $this->otp = $otp;
+    }
+
+    /**
+     * Get the message envelope.
+     */
+    public function envelope(): Envelope
+    {
+        return new Envelope(
+            subject: 'Academy - Password Reset OTP', 
+        );
+    }
+
+    /**
+     * Get the message content definition.
+     */
+    public function content(): Content
+    {
+        return new Content(
+            view: 'Mail.otp',
+        );
+    }
+
+    /**
+     * Get the attachments for the message.
+     *
+     * @return array<int, Attachment>
+     */
+    public function attachments(): array
+    {
+        return [];
+    }
+}

app/Models/Application.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Application extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'user_id',
+        'first_name',
+        'last_name',
+        'nic',
+        'nationality',
+        'address',
+        'state',
+        'gender',
+        'dob',
+        'mobile',
+        'mobile2',
+        'email',
+        'preferred_contact_method',
+        'still_at_school',
+        'highest_qualification',
+        'school_name',
+        'year_completed',
+        'exam_passed',
+        'subjects',
+        'grades_results',
+        'certificates',
+        'emergency_contact_name',
+        'emergency_contact_relationship',
+    ];
+
+    // Array/JSON Cast for dynamic Multi-file storage
+    protected $casts = [
+        'certificates' => 'array',
+        'dob' => 'date',
+    ];
+
+    public function user()
+    {
+        return $this->belongsTo(User::class);
+    }
+}

app/Models/User.php

@@ -24,6 +24,7 @@ class User extends Authenticatable
     'email',
     'phone',      
     'password',
+    'email_otp',
 ];
 
     /**

app/Models/courses.php

@@ -2,9 +2,29 @@
 
 namespace App\Models;
 
+use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 
 class courses extends Model
 {
-    //
+    use HasFactory;
+
+    
+    protected $table = 'courses';
+
+     
+    protected $fillable = [
+        'title',
+        'image',
+        'duration',
+        'level',
+        'author',
+        'desc',
+        'student',
+        'rating',
+        'badge',
+        'trending',
+        'course_code',
+        'status'
+    ];
 }

database/migrations/2026_07_28_030733_add_email_otp_to_users_table.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+           $table->string('email_otp')->nullable()->after('password');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+           $table->dropColumn('email_otp');
+        });
+    }
+};

database/migrations/2026_07_28_064543_create_applications_table.php

@@ -0,0 +1,59 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('applications', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('user_id')->constrained()->onDelete('cascade');
+            
+            // Student Info
+            $table->string('first_name');
+            $table->string('last_name');
+            $table->string('nic')->nullable();
+            $table->string('nationality')->nullable();
+            $table->string('address');
+            $table->string('state');
+            $table->string('gender')->nullable();
+            $table->date('dob')->nullable();
+
+            // Contact Info
+            $table->string('mobile');
+            $table->string('mobile2')->nullable();
+            $table->string('email');
+            $table->string('preferred_contact_method')->nullable();
+
+            // Academic Qualifications
+            $table->string('still_at_school')->nullable();
+            $table->string('highest_qualification')->nullable();
+            $table->string('school_name')->nullable();
+            $table->integer('year_completed')->nullable();
+            $table->string('exam_passed')->nullable();
+            $table->string('subjects')->nullable();
+            $table->text('grades_results')->nullable();
+            $table->json('certificates')->nullable(); // Multi-file paths JSON row එකක් ලෙස
+
+            // Emergency Contacts
+            $table->string('emergency_contact_name');
+            $table->string('emergency_contact_relationship');
+ 
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('applications');
+    }
+};

resources/views/Feedback&Complain.blade.php

@@ -1,111 +1,170 @@
 @extends('layouts.studentportalnav')
 
-@section('title','Feedback & Complaint')
+@section('title', 'Feedback & Complaint')
 
 @section('content')
 
+<!-- Bootstrap 5 -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+
+<!-- Font Awesome -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+<!-- Google Font -->
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
+
 <style>
-body{
-    background:#f6f7fb;
+:root {
+    --theme-navy: #2D355B;        /* Primary Navy */
+    --theme-navy-dark: #1F2541;   /* Dark Navy */
+    --theme-red: #822424;         /* Primary Accent Red */
+    --theme-red-hover: #df2c3e;   /* Red Hover */
+    --theme-yellow: #FFEA85;      /* Accent Yellow/Gold */
+    --bg-light: #F6F6F6;          /* Page Background */
+    --white: #ffffff;
+}
+
+body {
+    font-family: 'Poppins', sans-serif;
+    background: var(--bg-light);
 }
 
 /* Header */
-.feedback-header{
-    background:linear-gradient(135deg,#5E244E,#4a1c3e);
-    color:white;
-    padding:40px;
-    border-radius:20px;
-    margin-bottom:35px;
-    box-shadow:0 15px 35px rgba(0,0,0,.12);
+.feedback-header {
+    background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
+    color: var(--white);
+    padding: 35px 30px;
+    border-radius: 16px;
+    margin-bottom: 30px;
+    box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
+    border-left: 5px solid var(--theme-red);
 }
 
-.feedback-header h2{
-    font-weight:700;
+.feedback-header h2 {
+    font-weight: 700;
 }
 
-.feedback-header p{
-    color:#ddd;
+.feedback-header p {
+    color: rgba(255, 255, 255, 0.85);
+    margin-bottom: 0;
 }
 
 /* Cards */
-.feedback-card{
-    background:#fff;
-    border-radius:20px;
-    border:none;
-    padding:30px;
-    box-shadow:0 10px 30px rgba(0,0,0,.08);
-    height:100%;
+.feedback-card {
+    background: var(--white);
+    border: 1px solid #e2e8f0;
+    border-radius: 16px;
+    padding: 30px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
+    height: 100%;
 }
 
-.card-title{
-    color:#5E244E;
-    font-weight:700;
-    margin-bottom:25px;
+.card-title {
+    color: var(--theme-navy);
+    font-weight: 700;
+    margin-bottom: 25px;
 }
 
-.card-title i{
-    color:#d4af37;
-    margin-right:8px;
+.card-title i {
+    color: var(--theme-red);
+    margin-right: 8px;
+}
+
+/* Form Controls */
+.form-label {
+    font-weight: 600;
+    color: var(--theme-navy);
+    font-size: 14px;
 }
 
-/* Inputs */
 .form-control,
-.form-select{
-    border-radius:15px;
-    padding:12px;
-    border:1px solid #ddd;
+.form-select {
+    border-radius: 10px;
+    padding: 12px 15px;
+    border: 1px solid #cbd5e1;
+    font-size: 14px;
 }
 
 .form-control:focus,
-.form-select:focus{
-    border-color:#744a68;
-    box-shadow:0 0 0 .2rem rgba(94,36,78,.15);
+.form-select:focus {
+    border-color: var(--theme-navy);
+    box-shadow: 0 0 0 0.25rem rgba(45, 53, 91, 0.15);
 }
 
-/* Button */
-.submit-btn{
-    background:#5E244E;
-    color:white;
-    border:none;
-    border-radius:50px;
-    padding:12px 30px;
-    font-weight:600;
+/* Buttons */
+.submit-btn {
+    background: var(--theme-red) !important;
+    color: var(--white) !important;
+    border: none;
+    border-radius: 8px;
+    padding: 12px 30px;
+    font-weight: 600;
+    transition: all 0.2s ease;
+    width: 100%;
 }
 
-.submit-btn:hover{
-    background:#4a1c3e;
-    color:#fff;
+.submit-btn:hover {
+    background: var(--theme-red-hover) !important;
+    color: var(--white) !important;
 }
 
-/* History */
-.history-card{
-    margin-top:35px;
-    background:white;
-    border-radius:20px;
-    overflow:hidden;
-    box-shadow:0 10px 30px rgba(0,0,0,.08);
+/* History Card */
+.history-card {
+    margin-top: 35px;
+    background: var(--white);
+    border: 1px solid #e2e8f0;
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
 }
 
-.history-head{
-    background:#5E244E;
-    color:white;
-    padding:18px 25px;
+.history-head {
+    background: var(--theme-navy);
+    color: var(--white);
+    padding: 18px 25px;
 }
 
-.badge-status{
-    padding:7px 15px;
-    border-radius:50px;
-    font-size:13px;
+.history-head h5 {
+    font-weight: 700;
+    margin: 0;
 }
 
-.pending{
-    background:#fff3cd;
-    color:#856404;
+.table th {
+    background: #f8fafc;
+    color: var(--theme-navy);
+    font-weight: 600;
+    border-bottom: 2px solid #e2e8f0;
+    padding: 14px 20px;
 }
 
-.resolved{
-    background:#d1e7dd;
-    color:#0f5132;
+.table td {
+    vertical-align: middle;
+    padding: 14px 20px;
+}
+
+/* Status Badges */
+.badge-status {
+    padding: 6px 14px;
+    border-radius: 30px;
+    font-size: 12px;
+    font-weight: 600;
+    display: inline-block;
+}
+
+.pending {
+    background: rgba(255, 234, 133, 0.4);
+    color: #856404;
+}
+
+.resolved {
+    background: #d1e7dd;
+    color: #0f5132;
+}
+
+@media(max-width:768px) {
+    .feedback-header, .feedback-card {
+        padding: 25px;
+    }
 }
 </style>
 
@@ -113,89 +172,21 @@ body{
 
     <!-- Header -->
     <div class="feedback-header">
-        <h2><i class="fas fa-comments"></i> Feedback & Complaint</h2>
-        <p> Share your suggestions, feedback, or complaints with the
-            Automobile Engineering Academy management team.</p>
+        <h2 class="mb-1"><i class="fas fa-comments me-2" style="color: var(--theme-yellow);"></i> Feedback & Complaint</h2>
+        <p>Share your suggestions, feedback, or complaints with the Automobile Engineering Academy management team.</p>
     </div>
 
-    <div class="row g-4">
-        <!-- Feedback Form -->
-        <div class="col-lg-6">
-            <div class="feedback-card">
-                <h4 class="card-title"><i class="fas fa-star"></i> Submit Feedback</h4>
-                <form id="feedbackForm" action="{{ route('feedback.store') }}" method="POST">
-    @csrf
-    <div class="mb-3">
-        <label class="form-label"> Feedback Type </label>
-        <!-- Added name="feedback_type" -->
-        <select class="form-select" id="feedbackType" name="feedback_type" required>
-            <option value=""> Select Type </option>
-            <option value="Course">Course</option>
-            <option value="Lecturer">Lecturer </option>
-            <option value="Workshop">Workshop </option>
-            <option value="Facilities"> Facilities </option>
-        </select>
-    </div>
-    <div class="mb-3">
-        <label class="form-label">Subject </label>
-        <!-- Added name="subject" -->
-        <input type="text" class="form-control" id="feedbackSubject" name="subject" placeholder="Enter subject" required>
-    </div>
-    <div class="mb-3">
-        <label class="form-label">Your Feedback </label>
-        <!-- Added name="feedback_text" -->
-        <textarea class="form-control" id="feedbackText" name="feedback_text" rows="5" placeholder="Write your feedback" required></textarea>
-    </div>
-    <button type="submit" class="submit-btn">
-        <i class="fas fa-paper-plane"></i>Submit Feedback
-    </button>
-</form>
-            </div>
-        </div>
-
-        <!-- Complaint Form -->
-        <!-- <div class="col-lg-6">
-            <div class="feedback-card">
-                <h4 class="card-title"><i class="fas fa-exclamation-triangle"></i> Submit Complaint</h4>
-                <form id="complaintForm">
-                    <div class="mb-3">
-                        <label class="form-label"> Complaint Category</label>
-                        <select class="form-select" id="complaintCategory" required>
-                            <option value="">Select Category </option>
-                            <option value="Academic Issue"> Academic Issue</option>
-                            <option value="Staff Issue">Staff Issue </option>
-                            <option value="Technical Issue">Technical Issue</option>
-                            <option value="Other">Other</option>
-                        </select>
-                    </div>
-                    <div class="mb-3">
-                        <label class="form-label"> Complaint Title </label>
-                        <input type="text" class="form-control" id="complaintTitle" placeholder="Enter complaint title" required>
-                    </div>
-                    <div class="mb-3">
-                        <label class="form-label"> Complaint Details</label>
-                        <textarea class="form-control" id="complaintDetails" rows="5" placeholder="Explain your complaint" required></textarea>
-                    </div>
-                    <button type="submit" class="submit-btn">
-                        <i class="fas fa-paper-plane"></i>Submit Complaint
-                    </button>
-                </form>
-            </div>
-        </div>
-    </div> -->
-    <form id="feedbackForm" action="{{ route('feedback.store') }}" method="POST">
-    @csrf
-
-   
+    <!-- Alert Messages (Validation & Success) -->
     @if(session('success'))
-        <div class="alert alert-success alert-dismissible fade show" role="alert">
-            {{ session('success') }}
+        <div class="alert alert-success alert-dismissible fade show rounded-3 mb-4" role="alert">
+            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         </div>
     @endif
 
     @if ($errors->any())
-        <div class="alert alert-danger">
-            <ul class="mb-0">
+        <div class="alert alert-danger rounded-3 mb-4">
+            <ul class="mb-0 ps-3">
                 @foreach ($errors->all() as $error)
                     <li>{{ $error }}</li>
                 @endforeach
@@ -203,14 +194,23 @@ body{
         </div>
     @endif
 
+    <div class="row g-4">
+        <!-- Feedback Form -->
+        <div class="col-lg-6">
+            <div class="feedback-card">
+                <h4 class="card-title"><i class="fas fa-star"></i> Submit Feedback</h4>
+                
+                <form id="feedbackForm" action="{{ route('feedback.store') }}" method="POST">
+                    @csrf
+                    
                     <div class="mb-3">
                         <label class="form-label"> Feedback Type </label>
                         <select class="form-select" id="feedbackType" name="feedback_type" required>
                             <option value=""> Select Type </option>
                             <option value="Course" {{ old('feedback_type') == 'Course' ? 'selected' : '' }}>Course</option>
-            <option value="Lecturer" {{ old('feedback_type') == 'Lecturer' ? 'selected' : '' }}>Lecturer</option>
-            <option value="Workshop" {{ old('feedback_type') == 'Workshop' ? 'selected' : '' }}>Workshop</option>
-            <option value="Facilities" {{ old('feedback_type') == 'Facilities' ? 'selected' : '' }}>Facilities</option>
+                            <option value="Lecturer" {{ old('feedback_type') == 'Lecturer' ? 'selected' : '' }}>Lecturer </option>
+                            <option value="Workshop" {{ old('feedback_type') == 'Workshop' ? 'selected' : '' }}>Workshop </option>
+                            <option value="Facilities" {{ old('feedback_type') == 'Facilities' ? 'selected' : '' }}> Facilities </option>
                         </select>
                     </div>
 
@@ -219,24 +219,64 @@ body{
                         <input type="text" class="form-control" id="feedbackSubject" name="subject" value="{{ old('subject') }}" placeholder="Enter subject" required>
                     </div>
 
-    <div class="mb-3">
+                    <div class="mb-4">
                         <label class="form-label">Your Feedback </label>
                         <textarea class="form-control" id="feedbackText" name="feedback_text" rows="5" placeholder="Write your feedback" required>{{ old('feedback_text') }}</textarea>
                     </div>
 
-    <button type="submit" class="submit-btn">
-        <i class="fas fa-paper-plane"></i> Submit Feedback
+                    <button type="submit" class="submit-btn shadow-sm">
+                        <i class="fas fa-paper-plane me-2"></i>Submit Feedback
                     </button>
-</form>
+                </form>
+            </div>
+        </div>
+
+        <!-- Complaint Form -->
+        <div class="col-lg-6">
+            <div class="feedback-card">
+                <h4 class="card-title"><i class="fas fa-exclamation-triangle"></i> Submit Complaint</h4>
+                
+                <form id="complaintForm" action="{{ route('feedback.store') }}" method="POST">
+                    @csrf
+                    <input type="hidden" name="is_complaint" value="1"> <!-- IF NEEDED FOR BACKEND -->
+
+                    <div class="mb-3">
+                        <label class="form-label"> Complaint Category</label>
+                        <select class="form-select" id="complaintCategory" name="complaint_category" required>
+                            <option value="">Select Category </option>
+                            <option value="Academic Issue"> Academic Issue</option>
+                            <option value="Staff Issue">Staff Issue </option>
+                            <option value="Technical Issue">Technical Issue</option>
+                            <option value="Other">Other</option>
+                        </select>
+                    </div>
+
+                    <div class="mb-3">
+                        <label class="form-label"> Complaint Title </label>
+                        <input type="text" class="form-control" id="complaintTitle" name="complaint_title" placeholder="Enter complaint title" required>
+                    </div>
+
+                    <div class="mb-4">
+                        <label class="form-label"> Complaint Details</label>
+                        <textarea class="form-control" id="complaintDetails" name="complaint_details" rows="5" placeholder="Explain your complaint" required></textarea>
+                    </div>
+
+                    <button type="submit" class="submit-btn shadow-sm">
+                        <i class="fas fa-paper-plane me-2"></i>Submit Complaint
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
 
     <!-- Previous History Table -->
     <div class="history-card">
         <div class="history-head">
-            <h4 class="mb-0"><i class="fas fa-history"></i> Previous Requests</h4>
+            <h5><i class="fas fa-history me-2" style="color: var(--theme-yellow);"></i> Previous Requests</h5>
         </div>
 
         <div class="table-responsive">
-            <table class="table table-hover mb-0">
+            <table class="table table-hover align-middle mb-0">
                 <thead>
                     <tr>
                         <th> Type </th>
@@ -248,16 +288,16 @@ body{
             
                 <tbody id="historyTableBody">
                     <tr>
-                        <td>Feedback</td>
+                        <td><span class="fw-semibold" style="color: var(--theme-navy);">Feedback</span></td>
                         <td>Workshop Equipment </td>
                         <td>10 July 2026</td>
-                        <td><span class="badge-status resolved"> Resolved</span></td>
+                        <td><span class="badge-status resolved"><i class="fas fa-check me-1"></i> Resolved</span></td>
                     </tr>
                     <tr>
-                        <td>Complaint</td>
+                        <td><span class="fw-semibold" style="color: var(--theme-navy);">Complaint</span></td>
                         <td>Class Schedule Issue </td>
                         <td>05 July 2026 </td>
-                        <td><span class="badge-status pending"> Pending </span></td>
+                        <td><span class="badge-status pending"><i class="fas fa-clock me-1"></i> Pending </span></td>
                     </tr>
                 </tbody>
             </table>
@@ -266,6 +306,4 @@ body{
 
 </div>
 
-
-
 @endsection

resources/views/StudentPortal.blade.php

@@ -1,310 +1,295 @@
 @extends('layouts.studentportalnav')
 
-@section('title','Dashboard')
+@section('title', 'Dashboard')
 
 @section('content')
 
 <style>
-:root{
-    --primary:#5E244E;
-    --secondary:#8B3A74;
-    --light:#f5f6fb;
-    --dark:#2d2d2d;
+:root {
+    --theme-navy: #2D355B;        /* Primary Dark Navy */
+    --theme-footer-navy: #1F2541; /* Darker Navy */
+    --theme-red: #822424;         /* Primary Accent Red */
+    --theme-red-hover: #df2c3e;   /* Red Hover State */
+    --theme-yellow: #FFEA85;      /* Accent Gold/Yellow */
+    --theme-bg: #F6F6F6;          /* Page Background */
+    --text-dark: #333333;
 }
 
-body{
-    background:var(--light);
+body {
+    background-color: var(--theme-bg);
+    color: var(--text-dark);
 }
 
 /* Header */
-.dashboard-header{
-    display:flex;
-    justify-content:space-between;
-    align-items:center;
-    margin-bottom:30px;
+.dashboard-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+    padding-bottom: 15px;
+    border-bottom: 2px solid #e2e8f0;
 }
 
-.dashboard-header h2{
-    font-weight:700;
-    color:var(--dark);
+.dashboard-header h2 {
+    font-weight: 700;
+    color: var(--theme-navy);
+    margin-bottom: 5px;
 }
 
-.dashboard-header p{
-    color:#777;
-    margin:0;
+.dashboard-header p {
+    color: #6c757d;
+    margin: 0;
+    font-size: 0.95rem;
 }
 
-.avatar{
-    width:55px;
-    height:55px;
-    border-radius:50%;
-    background:var(--primary);
-    color:#fff;
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    font-weight:bold;
-    font-size:20px;
+.avatar {
+    width: 55px;
+    height: 55px;
+    border-radius: 50%;
+    background: var(--theme-navy);
+    color: var(--theme-yellow);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 20px;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
 }
 
 /* Statistic Cards */
-
-.stat-card{
-    background:#fff;
-    border-radius:15px;
-    padding:25px;
-    box-shadow:0 8px 20px rgba(0,0,0,.08);
-    transition:.3s;
-    height:100%;
+.stat-card {
+    background: #ffffff;
+    border-radius: 12px;
+    padding: 24px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+    transition: all 0.3s ease;
+    height: 100%;
+    border: 1px solid #e2e8f0;
 }
 
-.stat-card:hover{
-    transform:translateY(-6px);
+.stat-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 20px rgba(45, 53, 91, 0.12);
+    border-color: var(--theme-navy);
 }
 
-.stat-icon{
-    width:60px;
-    height:60px;
-    border-radius:12px;
-    display:flex;
-    justify-content:center;
-    align-items:center;
-    color:#fff;
-    font-size:22px;
-    margin-bottom:20px;
+.stat-icon {
+    width: 55px;
+    height: 55px;
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #ffffff;
+    font-size: 22px;
+    margin-bottom: 16px;
 }
 
-.stat-card h3{
-    font-weight:700;
-    margin-bottom:5px;
+.stat-card h3 {
+    font-weight: 700;
+    color: var(--theme-navy);
+    margin-bottom: 4px;
 }
 
-.stat-card p{
-    color:#777;
-    margin:0;
+.stat-card p {
+    color: #6c757d;
+    font-size: 0.9rem;
+    font-weight: 600;
+    margin: 0;
 }
 
 /* Services */
-
-.section-title{
-    font-size:24px;
-    font-weight:bold;
-    margin:40px 0 20px;
+.section-title {
+    font-size: 22px;
+    font-weight: 700;
+    color: var(--theme-navy);
+    margin: 40px 0 20px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
 }
 
-.service-card{
-    background:#fff;
-    border-radius:15px;
-    padding:30px;
-    text-align:center;
-    transition:.3s;
-    box-shadow:0 8px 20px rgba(0,0,0,.08);
-    height:100%;
+.section-title::before {
+    content: '';
+    display: inline-block;
+    width: 5px;
+    height: 24px;
+    background-color: var(--theme-red);
+    border-radius: 2px;
 }
 
-.service-card:hover{
-    transform:translateY(-8px);
+.service-card {
+    background: #ffffff;
+    border-radius: 12px;
+    padding: 30px 20px;
+    text-align: center;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+    height: 100%;
+    border: 1px solid #e2e8f0;
 }
 
-.service-card i{
-    font-size:45px;
-    color:var(--primary);
-    margin-bottom:20px;
+.service-card:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 8px 22px rgba(0,0,0,0.1);
+    border-color: var(--theme-red);
 }
 
-.service-card h5{
-    font-weight:700;
+.service-card i {
+    font-size: 40px;
+    color: var(--theme-red);
+    margin-bottom: 16px;
+    transition: transform 0.3s ease, color 0.3s ease;
 }
 
-.service-card p{
-    color:#777;
-    font-size:14px;
+.service-card:hover i {
+    transform: scale(1.1);
+    color: var(--theme-red-hover);
+}
+
+.service-card h5 {
+    font-weight: 700;
+    color: var(--theme-navy);
+    margin-bottom: 10px;
+}
+
+.service-card p {
+    color: #6c757d;
+    font-size: 13.5px;
+    margin: 0;
+    line-height: 1.5;
 }
 </style>
 
 <div class="container-fluid">
 
-<div class="dashboard-header">
-
-<div>
-<h2>Welcome Back,  student
-<p>Manage your academic activities from your dashboard.</p>
-</div>
-
-<!-- <div class="avatar">
-S
-</div> -->
-
-</div>
-
-<!-- Statistics -->
-
-<div class="row g-4">
-
-<div class="col-lg-3 col-md-6">
-<div class="stat-card">
-
-<div class="stat-icon" style="background:#5E244E;">
-<i class="fa-solid fa-book"></i>
-</div>
-
-<h3>6</h3>
-<p>Enrolled Courses</p>
-
-</div>
-</div>
-
-<div class="col-lg-3 col-md-6">
-<div class="stat-card">
-
-<div class="stat-icon" style="background:#0d9488;">
-<i class="fa-solid fa-file-lines"></i>
-</div>
-
-<h3>3</h3>
-<p>Assignments</p>
-
-</div>
-</div>
-
-<div class="col-lg-3 col-md-6">
-<div class="stat-card">
-
-<div class="stat-icon" style="background:#d97706;">
-<i class="fa-solid fa-chart-column"></i>
-</div>
-
-<h3>78%</h3>
-<p>Average Result</p>
-
-</div>
-</div>
-
-<div class="col-lg-3 col-md-6">
-<div class="stat-card">
-
-<div class="stat-icon" style="background:#dc2626;">
-<i class="fa-solid fa-bell"></i>
-</div>
-
-<h3>2</h3>
-<p>Exam Notices</p>
-
-</div>
-</div>
-
-</div>
-
-<!-- Services -->
-
-<div class="section-title">
-Student Services
-</div>
-
-<div class="row g-4">
-
-<div class="col-lg-4 col-md-6"  >
-<a href="/mycourse" class="text-decoration-none" style="color:#5E244E">
-
-<div class="service-card">
-
-<i class="fa-solid fa-book"></i>
-
-<h5>My Courses</h5>
-
-<p>Access all learning materials and course content.</p>
-
-</div>
-
-</a>
-</div>
-
-<div class="col-lg-4 col-md-6" >
-<a href="/timetable" class="text-decoration-none" style="color:#5E244E">
-
-<div class="service-card">
-
-<i class="fa-solid fa-calendar-days"></i>
-
-<h5>Class Timetable</h5>
-
-<p>View your weekly lecture timetable.</p>
-
-</div>
-
-</a>
-</div>
-
-<div class="col-lg-4 col-md-6">
-<a href="/Assignments" class="text-decoration-none" style="color:#5E244E">
-
-<div class="service-card">
-
-<i class="fa-solid fa-file-lines"></i>
-
-<h5>Assignments</h5>
-
-<p>Submit and manage assignments.</p>
-
-</div>
-
-</a>
-</div>
-
-<div class="col-lg-4 col-md-6">
-<a href="/results" class="text-decoration-none" style="color:#5E244E">
-
-<div class="service-card">
-
-<i class="fa-solid fa-square-poll-vertical"></i>
-
-<h5>Exam Results</h5>
-
-<p>Check semester examination results.</p>
-
-</div>
-
-</a>
-</div>
-
-<div class="col-lg-4 col-md-6">
-<a href="/Feedback&Complain" class="text-decoration-none"style="color:#5E244E">
-
-<div class="service-card">
-
-<i class="fa-solid fa-comments"></i>
-
-<h5>Feedback & Complaint</h5>
-
-<p>Send feedback and contact administration.</p>
-
-</div>
-
-</a>
-</div>
-
-<div class="col-lg-4 col-md-6">
-
- <a href="/StudentProfile" class="text-decoration-none"style="color:#5E244E">
-
-<div class="service-card">
-
-<i class="fa-solid fa-user"></i>
- 
-<!-- <a href="{{ route('StudentProfile') }}" class="text-decoration-none"style="color:#5E244E">
+    <!-- Dashboard Header -->
+    <div class="dashboard-header">
+        <div>
+            <h2>Welcome Back, {{ Auth::check() ? Auth::user()->first_name : 'Student' }}!</h2>
+            <p>Manage your academic activities and course updates from your dashboard.</p>
+        </div>
+
+        @if(Auth::check())
+            <div class="avatar" title="{{ Auth::user()->first_name }}">
+                {{ strtoupper(substr(Auth::user()->first_name, 0, 1)) }}
+            </div>
+        @endif
+    </div>
+
+    <!-- Statistics Cards -->
+    <div class="row g-4">
+
+        <div class="col-lg-3 col-md-6">
+            <div class="stat-card">
+                <div class="stat-icon" style="background: var(--theme-navy);">
+                    <i class="fa-solid fa-book"></i>
+                </div>
+                <h3>6</h3>
+                <p>Enrolled Courses</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3 col-md-6">
+            <div class="stat-card">
+                <div class="stat-icon" style="background: #0d9488;">
+                    <i class="fa-solid fa-file-lines"></i>
+                </div>
+                <h3>3</h3>
+                <p>Assignments</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3 col-md-6">
+            <div class="stat-card">
+                <div class="stat-icon" style="background: #d97706;">
+                    <i class="fa-solid fa-chart-column"></i>
+                </div>
+                <h3>78%</h3>
+                <p>Average Result</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3 col-md-6">
+            <div class="stat-card">
+                <div class="stat-icon" style="background: var(--theme-red);">
+                    <i class="fa-solid fa-bell"></i>
+                </div>
+                <h3>2</h3>
+                <p>Exam Notices</p>
+            </div>
+        </div>
+
+    </div>
+
+    <!-- Student Services Section -->
+    <div class="section-title">
+        Student Services
+    </div>
+
+    <div class="row g-4">
+
+        <div class="col-lg-4 col-md-6">
+            <a href="/mycourse" class="text-decoration-none">
                 <div class="service-card">
-    <i class="fas fa-user"></i> Profile
-</a> -->
-<h5>Student Profile</h5>
+                    <i class="fa-solid fa-book"></i>
+                    <h5>My Courses</h5>
+                    <p>Access all learning materials, lectures, and course content.</p>
+                </div>
+            </a>
+        </div>
 
-<p>Update your personal information.</p>
+        <div class="col-lg-4 col-md-6">
+            <a href="/timetable" class="text-decoration-none">
+                <div class="service-card">
+                    <i class="fa-solid fa-calendar-days"></i>
+                    <h5>Class Timetable</h5>
+                    <p>View your weekly lecture schedule and upcoming classes.</p>
+                </div>
+            </a>
+        </div>
 
-</div>
+        <div class="col-lg-4 col-md-6">
+            <a href="/results" class="text-decoration-none">
+                <div class="service-card">
+                    <i class="fa-solid fa-square-poll-vertical"></i>
+                    <h5>Exam Results</h5>
+                    <p>Check semester examination marks and performance reports.</p>
+                </div>
+            </a>
+        </div>
 
-</a>
-</div>
+        <div class="col-lg-4 col-md-6">
+            <a href="/Studentguidelines" class="text-decoration-none">
+                <div class="service-card">
+                    <i class="fa-solid fa-book-open"></i>
+                    <h5>Student Guidelines</h5>
+                    <p>Read campus rules, regulations, and academic guidelines.</p>
+                </div>
+            </a>
+        </div>
 
-</div>
+        <div class="col-lg-4 col-md-6">
+            <a href="/Feedback&Complain" class="text-decoration-none">
+                <div class="service-card">
+                    <i class="fa-solid fa-comments"></i>
+                    <h5>Feedback & Complaint</h5>
+                    <p>Send feedback or submit inquiries directly to administration.</p>
+                </div>
+            </a>
+        </div>
+
+        <div class="col-lg-4 col-md-6">
+            <a href="/StudentProfile" class="text-decoration-none">
+                <div class="service-card">
+                    <i class="fa-solid fa-user"></i>
+                    <h5>Student Profile</h5>
+                    <p>Manage and update your personal student profile details.</p>
+                </div>
+            </a>
+        </div>
+
+    </div>
 
 </div>
 

resources/views/StudentProfile.blade.php

@@ -4,383 +4,289 @@
 
 @section('content')
 
-<style>
+<!-- Bootstrap 5 -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 
-body{
-    background:#f6f7fb;
+<!-- Font Awesome -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+<!-- Google Font -->
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+<style>
+:root {
+    --theme-navy: #2D355B;        /* Primary Navy */
+    --theme-navy-dark: #1F2541;   /* Dark Navy */
+    --theme-red: #822424;         /* Primary Accent Red */
+    --theme-red-hover: #df2c3e;   /* Red Hover */
+    --theme-yellow: #FFEA85;      /* Accent Yellow/Gold */
+    --bg-light: #F6F6F6;          /* Page Background */
+    --white: #ffffff;
 }
 
+body {
+    font-family: 'Poppins', sans-serif;
+    background: var(--bg-light);
+}
 
 /* Header */
-
-.profile-header{
-
-    background:linear-gradient(135deg,#5E244E,#4a1c3e);
-    color:#fff;
-    border-radius:20px;
-    padding:40px;
-    margin-bottom:35px;
-    box-shadow:0 15px 35px rgba(0,0,0,.15);
-
+.profile-header {
+    background: linear-gradient(135deg, var(--theme-navy) 0%, var(--theme-navy-dark) 100%) !important;
+    color: var(--white);
+    border-radius: 16px;
+    padding: 35px 30px;
+    margin-bottom: 30px;
+    box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
+    border-left: 5px solid var(--theme-red);
 }
 
-
-.profile-header h2{
-
-    font-weight:700;
-
+.profile-header h2 {
+    font-weight: 700;
 }
 
-
-.profile-header p{
-
-    color:#ddd;
-
+.profile-header p {
+    color: rgba(255, 255, 255, 0.85);
+    margin-bottom: 0;
 }
 
-
-
 /* Profile Card */
-
-.profile-card{
-
-    background:#fff;
-    border-radius:20px;
-    padding:30px;
-    box-shadow:0 10px 30px rgba(0,0,0,.08);
-    height:100%;
-
+.profile-card {
+    background: var(--white);
+    border-radius: 16px;
+    padding: 30px;
+    border: 1px solid #e2e8f0;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
+    height: 100%;
 }
 
-
-
 /* Student Image */
-
-.profile-image{
-
-    width:150px;
-    height:150px;
-    border-radius:50%;
-    object-fit:cover;
-    border:6px solid #d4af37;
-
+.profile-image {
+    width: 140px;
+    height: 140px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 4px solid var(--theme-navy);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-
-.student-name{
-
-    color:#5E244E;
-    font-weight:700;
-    margin-top:15px;
-
+.student-name {
+    color: var(--theme-navy);
+    font-weight: 700;
+    margin-top: 15px;
 }
 
-
-.student-id{
-
-    background:#5E244E;
-    color:#fff;
-    padding:8px 20px;
-    border-radius:50px;
-    display:inline-block;
-    font-size:14px;
-
+.student-id {
+    background: var(--theme-navy);
+    color: var(--white);
+    padding: 8px 20px;
+    border-radius: 50px;
+    display: inline-block;
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
 }
 
-
-
 /* Information */
-
-.info-title{
-
-    color:#5E244E;
-    font-weight:700;
-    border-bottom:2px solid #d4af37;
-    padding-bottom:10px;
-    margin-bottom:20px;
-
+.info-title {
+    color: var(--theme-navy);
+    font-weight: 700;
+    border-bottom: 2px solid var(--theme-yellow);
+    padding-bottom: 10px;
+    margin-bottom: 20px;
 }
 
-
-.info-row{
-
-    display:flex;
-    justify-content:space-between;
-    padding:12px 0;
-    border-bottom:1px solid #eee;
-
+.info-title i {
+    color: var(--theme-red);
+    margin-right: 8px;
 }
 
-
-.label{
-
-    color:#777;
-
+.info-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 12px 0;
+    border-bottom: 1px solid #f1f5f9;
 }
 
-
-.value{
-
-    font-weight:600;
-    color:#333;
-
+.info-row:last-child {
+    border-bottom: none;
 }
 
-
-
-/* Course */
-
-.course-box{
-
-    background:#5E244E;
-    color:#fff;
-    padding:25px;
-    border-radius:20px;
-
+.label {
+    color: #64748b;
+    font-weight: 500;
 }
 
-
-.course-box h4{
-
-    color:#d4af37;
-    font-weight:700;
-
+.value {
+    font-weight: 600;
+    color: #1e293b;
 }
 
-
-.course-item{
-
-    margin-top:12px;
-
+/* Course Box */
+.course-box {
+    background: linear-gradient(135deg, var(--theme-navy) 0%, var(--theme-navy-dark) 100%);
+    color: var(--white);
+    padding: 30px;
+    border-radius: 16px;
+    box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
+    height: 100%;
 }
 
-
-.course-item i{
-
-    color:#d4af37;
-    width:25px;
-
+.course-box h4 {
+    color: var(--theme-yellow);
+    font-weight: 700;
+    margin-bottom: 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+    padding-bottom: 10px;
 }
 
-
-
-/* Button */
-
-.edit-btn{
-
-    background:#d4af37;
-    color:white;
-    border:none;
-    border-radius:50px;
-    padding:12px 30px;
-    font-weight:600;
-
+.course-item {
+    margin-top: 14px;
+    font-size: 15px;
+    color: rgba(255, 255, 255, 0.9);
 }
 
-
-.edit-btn:hover{
-
-    background:#c49d20;
-    color:#fff;
-
+.course-item i {
+    color: var(--theme-yellow);
+    width: 28px;
 }
 
+/* Buttons */
+.edit-btn {
+    background: var(--theme-red) !important;
+    color: var(--white) !important;
+    border: none;
+    border-radius: 8px;
+    padding: 10px 25px;
+    font-weight: 600;
+    transition: all 0.2s ease;
+}
 
+.edit-btn:hover {
+    background: var(--theme-red-hover) !important;
+    color: var(--white) !important;
+}
+
+@media(max-width:768px) {
+    .profile-header, .profile-card, .course-box {
+        padding: 25px;
+    }
+}
 </style>
 
-
-
 <div class="container py-4">
 
-
     <!-- Header -->
-
     <div class="profile-header">
-
-
-        <h2>
-
-            <i class="fas fa-user-graduate"></i>
-
-            Student Profile
-
-        </h2>
-
-
-        <p>
-
-            Manage your personal information and academic details.
-
-        </p>
-
-
+        <h2> <i class="fas fa-user-graduate"></i> Student Profile </h2>
+        <p>Manage your personal information and academic details.</p>
     </div>
 
+    <!-- Main Profile Row -->
     <div class="row g-4">
-
-
-        <!-- Profile Left -->
-
+        <!-- Profile Card -->
         <div class="col-lg-4">
             <div class="profile-card text-center">
-                 <img src="https://i.pravatar.cc/300"
-                     class="profile-image">
-                <h3 class="student-name">Kasun Perera </h3>
+                <img src="{{ !empty($student->image) ? asset($student->image) : 'https://i.pravatar.cc/300' }}" 
+                     class="profile-image" alt="Profile Image">
+                     
+                <h3 class="student-name">{{ $student->full_name }}</h3>
 
                 <span class="student-id">
-                    Student ID : AEA20260045
+                    Student ID : {{ $student->student_id }}
                 </span>
                 <hr>
 
                 <button class="edit-btn mt-3">
-              <i class="fas fa-edit"></i> Edit Profile </button>
+                    <i class="fas fa-edit"></i> Edit Profile 
+                </button>
             </div>
         </div>
 
-
-        <!-- Details -->
+        <!-- Personal Details -->
         <div class="col-lg-8">
             <div class="profile-card">
                 <h4 class="info-title">
-                    <i class="fas fa-user"></i>
-                    Personal Information
+                    <i class="fas fa-user"></i> Personal Information
                 </h4>
 
                 <div class="info-row">
-                    <span class="label">
-                        Full Name
-                    </span>
-                    <span class="value">
-                        Kasuni Perera
-                    </span>
+                    <span class="label">Full Name</span>
+                    <span class="value">{{ $student->full_name }}</span>
                 </div>
 
-
                 <div class="info-row">
-                    <span class="label">
-                        NIC / Passport
-                    </span>
-                    <span class="value">
-                        200012345678
-                    </span>
+                    <span class="label">NIC / Passport</span>
+                    <span class="value">{{ $student->nic_passport }}</span>
                 </div>
 
-
                 <div class="info-row">
-                    <span class="label">
-                        Date of Birth
-                    </span>
+                    <span class="label">Date of Birth</span>
                     <span class="value">
-                        15 March 2000
+                        {{ !empty($student->date_of_birth) ? date('d F Y', strtotime($student->date_of_birth)) : 'N/A' }}
                     </span>
                 </div>
 
-
                 <div class="info-row">
-                    <span class="label">
-                        Gender
-                    </span>
-                    <span class="value">
-                        Male
-                    </span>
+                    <span class="label">Gender</span>
+                    <span class="value">{{ $student->gender }}</span>
                 </div>
 
-
                 <div class="info-row">
-                    <span class="label">
-                        Email
-                    </span>
-                    <span class="value">
-                        student@email.com
-                    </span>
+                    <span class="label">Email</span>
+                    <span class="value">{{ $student->email }}</span>
                 </div>
 
-
                 <div class="info-row">
-                    <span class="label">
-                        Phone
-                    </span>
-                    <span class="value">
-                        +94 77 1234567
-                    </span>
+                    <span class="label">Phone</span>
+                    <span class="value">{{ $student->phone }}</span>
                 </div>
-
             </div>
         </div>
     </div>
 
+    <!-- Education & Course Details Row -->
     <div class="row g-4 mt-1">
-
-
-
         <!-- Education -->
         <div class="col-lg-6">
             <div class="profile-card">
                 <h4 class="info-title">
-                    <i class="fas fa-graduation-cap"></i>
-                    Educational Background
+                    <i class="fas fa-graduation-cap"></i> Educational Background
                 </h4>
                 <div class="info-row">
-                    <span class="label">
-                        Qualification
-                    </span>
-
-                    <span class="value">
-                        NVQ Level 4
-                    </span>
+                    <span class="label">Qualification</span>
+                    <span class="value">{{ $student->qualification }}</span>
                 </div>
                 <div class="info-row">
-                    <span class="label">
-                        Institute
-                    </span>
-                    <span class="value">
-                        ABC Technical College
-                    </span>
+                    <span class="label">Institute</span>
+                    <span class="value">{{ $student->institute }}</span>
                 </div>
-
-
-
-
                 <div class="info-row">
-                    <span class="label">
-                        Year Completed
-                    </span>
-                    <span class="value">
-                        2025
-                    </span>
-                </div>
-
+                    <span class="label">Year Completed</span>
+                    <span class="value">{{ $student->year_completed }}</span>
+                </div>
             </div>
         </div>
-
-
-
-
-
 
         <!-- Course Details -->
-
-
         <div class="col-lg-6">
             <div class="course-box">
-                <h4><i class="fas fa-car"></i>Course Details</h4>
+                <h4><i class="fas fa-car"></i> Course Details</h4>
 
                 <div class="course-item">
-            <i class="fas fa-book"></i> Diploma in Automobile Engineering  </div>
-            <div class="course-item"> <i class="fas fa-calendar"></i> Duration : 2 Years</div>
-
+                    <i class="fas fa-book"></i> {{ $student->course_name }}
+                </div>
                 <div class="course-item"> 
-                    <i class="fas fa-layer-group"></i>Current Semester : Semester 2
+                    <i class="fas fa-calendar"></i> Duration : {{ $student->duration }}
+                </div>
+                <div class="course-item">
+                    <i class="fas fa-layer-group"></i> Current Semester : {{ $student->current_semester }}
+                </div>
+                <div class="course-item">
+                    <i class="fas fa-user-tie"></i> Trainer : {{ $student->trainer_name }}
+                </div>
+            </div>
+        </div>
     </div>
 
-           <div class="course-item">
-                    <i class="fas fa-user-tie"></i>
-                    Trainer : Mr. Nimal Silva
-                </div>
-            </div>
-        </div>
-    </div>
 </div>
-
-
 @endsection

resources/views/Studentguidelines.blade.php

@@ -4,469 +4,348 @@
 
 @section('content')
 
+<!-- Bootstrap 5 -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+
+<!-- Font Awesome -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+<!-- Google Font -->
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
+
 <style>
+:root {
+    --theme-navy: #2D355B;        /* Primary Navy */
+    --theme-navy-dark: #1F2541;   /* Dark Navy */
+    --theme-red: #822424;         /* Primary Accent Red */
+    --theme-red-hover: #df2c3e;   /* Red Hover */
+    --theme-yellow: #FFEA85;      /* Accent Yellow/Gold */
+    --bg-light: #F6F6F6;          /* Page Background */
+    --white: #ffffff;
+}
 
-body{
-    background:#f6f7fb;
+body {
+    font-family: 'Poppins', sans-serif;
+    background: var(--bg-light);
 }
 
 /*==========================
-Hero
+Hero Section
 ===========================*/
-
-.guideline-hero{
-    background:linear-gradient(135deg,#5E244E,#4a1c3e);
-    border-radius:20px;
-    padding:45px;
-    color:#fff;
-    margin-bottom:35px;
-    box-shadow:0 18px 40px rgba(0,0,0,.12);
+.guideline-hero {
+    background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
+    border-radius: 16px;
+    padding: 35px 30px;
+    color: var(--white);
+    margin-bottom: 30px;
+    box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
+    border-left: 5px solid var(--theme-red);
 }
 
-.guideline-hero h2{
-    font-weight:700;
-    margin-bottom:10px;
+.guideline-hero h2 {
+    font-weight: 700;
+    margin-bottom: 10px;
 }
 
-.guideline-hero p{
-    color:#ececec;
-    margin-bottom:0;
-    font-size:15px;
+.guideline-hero p {
+    color: rgba(255, 255, 255, 0.85);
+    margin-bottom: 0;
+    font-size: 15px;
 }
 
 /*==========================
-Cards
+Guide Cards
 ===========================*/
-
-.guide-card{
-
-    background:#fff;
-    border:none;
-    border-radius:20px;
-    box-shadow:0 10px 30px rgba(0,0,0,.08);
-    transition:.3s;
-    overflow:hidden;
-    height:100%;
-
+.guide-card {
+    background: var(--white);
+    border: 1px solid #e2e8f0;
+    border-radius: 16px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
+    transition: all 0.3s ease;
+    overflow: hidden;
+    height: 100%;
 }
 
-.guide-card:hover{
-
-    transform:translateY(-6px);
-
+.guide-card:hover {
+    transform: translateY(-4px);
+    border-color: var(--theme-navy);
+    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
 }
 
-.card-head{
-
-    background:#5E244E;
-    color:#fff;
-    padding:18px 22px;
-
+.card-head {
+    background: #753636;
+    color: var(--white);
+    padding: 18px 22px;
 }
 
-.card-head h5{
-
-    margin:0;
-    font-weight:600;
-
+.card-head h5 {
+    margin: 0;
+    font-weight: 600;
 }
 
-.card-head i{
-
-    color:#d4af37;
-    margin-right:10px;
-
+.card-head i {
+    color: var(--theme-yellow);
+    margin-right: 10px;
 }
 
-.card-body{
-
-    padding:22px;
-
+.card-body {
+    padding: 22px;
 }
 
-.card-body ul{
-
-    padding-left:20px;
-
+.card-body ul {
+    padding-left: 20px;
+    margin-bottom: 0;
 }
 
-.card-body li{
-
-    margin-bottom:10px;
-    color:#555;
+.card-body li {
+    margin-bottom: 10px;
+    color: #475569;
+}
 
+.card-body li:last-child {
+    margin-bottom: 0;
 }
 
 /*==========================
-Alert
+Notice Alert Box
 ===========================*/
-
-.notice{
-
-    background:#fff7e4;
-    border-left:6px solid #d4af37;
-    border-radius:16px;
-    padding:22px;
-    margin-top:35px;
-    box-shadow:0 8px 25px rgba(0,0,0,.06);
-
+.notice {
+    background: rgba(255, 234, 133, 0.2);
+    border-left: 5px solid var(--theme-red);
+    border-radius: 16px;
+    padding: 22px;
+    margin-top: 35px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, .03);
 }
 
-.notice h5{
-
-    color:#5E244E;
-    font-weight:700;
-
+.notice h5 {
+    color: var(--theme-navy);
+    font-weight: 700;
 }
 
-.notice p{
-
-    margin-bottom:0;
-    color:#555;
-
+.notice p {
+    margin-bottom: 0;
+    color: #475569;
 }
 
 /*==========================
-Contact
+Contact Box
 ===========================*/
-
-.contact-card{
-
-    margin-top:35px;
-    border-radius:20px;
-    background:#4a1c3e;
-    color:#fff;
-    padding:35px;
-    box-shadow:0 12px 35px rgba(0,0,0,.12);
-
+.contact-card {
+    margin-top: 30px;
+    border-radius: 16px;
+    background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
+    color: var(--white);
+    padding: 35px;
+    box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
 }
 
-.contact-card h4{
-
-    color:#d4af37;
-    font-weight:700;
-
+.contact-card h4 {
+    color: var(--theme-yellow);
+    font-weight: 700;
 }
 
-.contact-item{
-
-    margin-top:18px;
-    font-size:15px;
-
+.contact-item {
+    margin-top: 18px;
+    font-size: 15px;
 }
 
-.contact-item i{
-
-    color:#d4af37;
-    width:28px;
-
+.contact-item i {
+    color: var(--theme-yellow);
+    width: 28px;
 }
 
+@media(max-width:768px) {
+    .guideline-hero, .contact-card {
+        padding: 25px;
+    }
+}
 </style>
 
 <div class="container py-4">
 
     <!-- Hero -->
-
     <div class="guideline-hero">
-
         <h2>
-            <i class="fas fa-book-open"></i>
+            <i class="fas fa-book-open me-2" style="color: var(--theme-yellow);"></i>
             Student Guidelines
         </h2>
-
         <p>
             Welcome to the Automobile Engineering Academy. These guidelines are
             designed to help every student maintain professionalism, safety,
             discipline, and academic excellence throughout the training programme.
         </p>
-
     </div>
 
+    <!-- Guidelines Cards -->
     <div class="row g-4">
 
         <!-- Classroom -->
-
         <div class="col-lg-6">
-
             <div class="guide-card">
-
                 <div class="card-head">
-
                     <h5>
                         <i class="fas fa-chalkboard-teacher"></i>
                         Classroom Rules
                     </h5>
-
                 </div>
-
                 <div class="card-body">
-
                     <ul>
-
                         <li>Attend every class on time.</li>
-
                         <li>Maintain discipline and respect lecturers.</li>
-
                         <li>Switch mobile phones to silent mode.</li>
-
                         <li>Complete all assignments before deadlines.</li>
-
                         <li>Keep classrooms clean and organized.</li>
-
                     </ul>
-
                 </div>
-
             </div>
-
         </div>
 
         <!-- Workshop -->
-
         <div class="col-lg-6">
-
             <div class="guide-card">
-
                 <div class="card-head">
-
                     <h5>
                         <i class="fas fa-tools"></i>
                         Workshop Safety
                     </h5>
-
                 </div>
-
                 <div class="card-body">
-
                     <ul>
-
                         <li>Wear PPE before entering workshops.</li>
-
                         <li>Follow instructor safety instructions.</li>
-
                         <li>Never operate equipment without permission.</li>
-
                         <li>Report damaged tools immediately.</li>
-
                         <li>Keep workstations clean after practical sessions.</li>
-
                     </ul>
-
                 </div>
-
             </div>
-
         </div>
 
         <!-- Attendance -->
-
         <div class="col-lg-6">
-
             <div class="guide-card">
-
                 <div class="card-head">
-
                     <h5>
                         <i class="fas fa-user-check"></i>
                         Attendance Policy
                     </h5>
-
                 </div>
-
                 <div class="card-body">
-
                     <ul>
-
                         <li>Minimum attendance requirement is 80%.</li>
-
                         <li>Medical leave must be supported by documents.</li>
-
                         <li>Repeated absence may affect examinations.</li>
-
                         <li>Late arrivals will be recorded.</li>
-
                         <li>Inform the administration if absent.</li>
-
                     </ul>
-
                 </div>
-
             </div>
-
         </div>
 
         <!-- Dress -->
-
         <div class="col-lg-6">
-
             <div class="guide-card">
-
                 <div class="card-head">
-
                     <h5>
                         <i class="fas fa-user-tie"></i>
                         Uniform & PPE
                     </h5>
-
                 </div>
-
                 <div class="card-body">
-
                     <ul>
-
                         <li>Wear academy uniform during lectures.</li>
-
                         <li>Safety shoes are compulsory.</li>
-
                         <li>Use gloves and safety glasses.</li>
-
                         <li>Long hair must be tied properly.</li>
-
                         <li>ID card must be visible at all times.</li>
-
                     </ul>
-
                 </div>
-
             </div>
-
         </div>
 
         <!-- Assessment -->
-
         <div class="col-lg-6">
-
             <div class="guide-card">
-
                 <div class="card-head">
-
                     <h5>
                         <i class="fas fa-file-alt"></i>
                         Assessment Rules
                     </h5>
-
                 </div>
-
                 <div class="card-body">
-
                     <ul>
-
                         <li>Submit assignments before due dates.</li>
-
                         <li>No plagiarism is permitted.</li>
-
                         <li>Bring required materials for practical tests.</li>
-
                         <li>Follow examination regulations.</li>
-
                         <li>Maintain academic honesty.</li>
-
                     </ul>
-
                 </div>
-
             </div>
-
         </div>
 
         <!-- Conduct -->
-
         <div class="col-lg-6">
-
             <div class="guide-card">
-
                 <div class="card-head">
-
                     <h5>
                         <i class="fas fa-handshake"></i>
                         Student Conduct
                     </h5>
-
                 </div>
-
                 <div class="card-body">
-
                     <ul>
-
                         <li>Respect staff and fellow students.</li>
-
                         <li>Protect academy property.</li>
-
                         <li>Do not smoke inside the campus.</li>
-
                         <li>Avoid discrimination and harassment.</li>
-
                         <li>Represent the academy professionally.</li>
-
                     </ul>
-
                 </div>
-
             </div>
-
         </div>
 
     </div>
 
     <!-- Notice -->
-
     <div class="notice">
-
         <h5>
-            <i class="fas fa-exclamation-circle text-warning"></i>
+            <i class="fas fa-exclamation-circle me-1" style="color: var(--theme-red);"></i>
             Important Notice
         </h5>
-
         <p>
-
             Students who fail to follow academy regulations may face disciplinary
             action according to the Automobile Engineering Academy Student Policy.
-
         </p>
-
     </div>
 
     <!-- Contact -->
-
     <div class="contact-card">
-
         <h4>
-
-            <i class="fas fa-headset"></i>
+            <i class="fas fa-headset me-2"></i>
             Student Support
-
         </h4>
-
-        <p class="mt-3">
-
+        <p class="mt-3 text-white-50">
             If you have any questions regarding academic regulations,
             attendance, workshop safety, or student services, please contact
             the Student Affairs Office.
-
         </p>
 
         <div class="contact-item">
-
             <i class="fas fa-envelope"></i>
             support@academy.lk
-
         </div>
 
         <div class="contact-item">
-
             <i class="fas fa-phone"></i>
             +94 11 234 5678
-
         </div>
 
         <div class="contact-item">
-
             <i class="fas fa-map-marker-alt"></i>
             Automobile Engineering Academy
-
         </div>
-
     </div>
 
 </div>

resources/views/abouts.blade.php

@@ -6,16 +6,29 @@
 
 <style>
 :root{
-    --primary:#5E244E;
-    --secondary:#8B3A74;
-    --light:#f8f4f7;
+    /* 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);
 }
 
-.hero-about{
+body {
+    font-family: 'Segoe UI', Arial, sans-serif;
+    color: var(--text-main);
+}
+
+/* .hero-about{
     min-height:60vh;
     background:
-    linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),
-    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;
@@ -23,6 +36,17 @@
     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{
@@ -34,22 +58,22 @@
     background:#fff;
     border-radius:20px;
     padding:35px 25px;
-    box-shadow:0 10px 30px rgba(0,0,0,.05);
+    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 #efeff4;
+    border: 1px solid var(--card-border);
 }
 
 .about-box:hover {
     transform: translateY(-10px) scale(1.02);
-    box-shadow: 0 20px 40px rgba(94, 36, 78, 0.1);
-    border-color: var(--primary);
+    box-shadow: 0 20px 40px rgba(62, 81, 184, 0.12);
+    border-color: var(--primary-light);
 }
 
 .icon-circle {
     width:75px;
     height:75px;
-    background:var(--primary);
-    color:#fff;
+    background: #6e3232;
+    color: #f6e983;
     border-radius:50%;
     display:flex;
     align-items:center;
@@ -60,8 +84,9 @@
 }
 
 .about-box:hover .icon-circle {
-    background: var(--secondary);
-    transform: rotateY(180deg); /* කාඩ් එක උඩට යද්දී අයිකන් එක කැරකෙනවා */
+    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);
 }
 
 /* ========================================================
@@ -73,41 +98,36 @@
     transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
-/* 1. පල්ලෙහා ඉඳන් උඩට එන ඇනිමේෂන් */
 .fade-up-init {
     transform: translateY(40px);
 }
 
-/* 2. වමේ ඉඳන් දකුණට (රූපය සඳහා) */
 .slide-left-init {
     transform: translateX(-50px);
 }
 
-/* 3. දකුණේ ඉඳන් වමට (විස්තරය සඳහා) */
 .slide-right-init {
     transform: translateX(50px);
 }
 
-/* 4. Zoom වෙලා bounce වෙන්න (කාඩ්ස් සඳහා) */
 .zoom-in-init {
     transform: scale(0.85);
 }
 
-/* Active Class (Scroll කරද්දී apply වේ) */
 .animate-item.animated {
     opacity: 1;
     transform: translate(0) scale(1);
 }
 
-/* CTA බටන් එක ගැස්සෙන ඇනිමේෂන් එකක් */
+/* Automotive Theme Glow Pulse Button */
 @keyframes pulse-btn {
-    0% { box-shadow: 0 0 0 0 rgba(94, 36, 78, 0.4); }
-    70% { box-shadow: 0 0 0 15px rgba(94, 36, 78, 0); }
-    100% { box-shadow: 0 0 0 0 rgba(94, 36, 78, 0); }
+    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);
+    background: var(--primary-light);
     color: #fff !important;
     padding: 14px 35px;
     border-radius: 50px;
@@ -118,8 +138,249 @@
 }
 
 .cta-btn:hover {
-    background: var(--secondary);
+    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')
+
+<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-1552519507-da3b142c6e3d?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>
 
@@ -140,14 +401,12 @@
 <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">
@@ -159,7 +418,7 @@
                 We focus on building skilled professionals who are ready for
                 the global automotive industry.
             </p>
-            <a href="{{ route('courses') }}" class="btn btn-dark btn-lg px-4 rounded-pill">
+            <a href="/courses" class="btn btn-view-courses btn-lg px-4 rounded-pill shadow-sm">
                 View Courses
             </a>
         </div>
@@ -177,7 +436,6 @@
 </div>
 
 <div class="row g-4">
-    <!-- කාඩ් එකින් එක Zoom-in වේ -->
     <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;">
         <div class="about-box text-center">
             <div class="icon-circle">
@@ -245,7 +503,98 @@ document.addEventListener('DOMContentLoaded', function () {
             }
         });
     }, {
-        threshold: 0.15 // Element එකෙන් 15%ක් පෙනෙද්දීම ඇනිමේෂන් එක පටන් ගනී
+        threshold: 0.15 
+    });
+
+    animatedElements.forEach(el => observer.observe(el));
+});
+</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));

resources/views/apply.blade.php

@@ -1,141 +1,189 @@
 @extends('layouts.app')
 
-@section('title','Apply Now')
+@section('title', 'Apply Now')
 
 @section('content')
 
 <style>
     body {
-        font-family: Arial, Helvetica, sans-serif;
-        background: #f5f5f5;
+        font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
+        background: #F8FAFC;
+        color: #1E293B;
     }
 
     :root {
-        --primary: #5E244E;
-        --secondary: #8B3A74;
-        --light: #F8F4F7;
+        /* Premium Modern Automotive Palette */
+        --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: 220px;
-        background: linear-gradient(rgba(20,20,20,.55),rgba(20,20,20,.55)),
-                    url('https://images.unsplash.com/photo-1517520287167-4bbf64a00d66?auto=format&fit=crop&w=1600&q=80');
+        height: 240px;
+        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;
         justify-content: center;
         align-items: center;
         color: white;
+        text-align: center;
     }
 
     .hero h1 {
-        font-size: 32px; 
-        font-weight: bold;
+        font-size: 36px; 
+        font-weight: 800;
         margin: 0;
+        letter-spacing: -0.5px;
     }
 
     .apply-area {
-        margin-top: -40px;
-        margin-bottom: 40px;
+        margin-top: -50px;
+        margin-bottom: 50px;
     }
 
-    
     .form-container-sm {
-        max-width: 820px;
+        max-width: 850px;
         margin: 0 auto;
     }
 
     .form-card {
         background: white;
-        border-radius: 10px;
+        border-radius: 16px;
         overflow: hidden;
-        box-shadow: 0 10px 30px rgba(0,0,0,.08);
+        border: 1px solid var(--card-border);
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
     }
 
     .form-header {
-        background: var(--primary);
+        background: linear-gradient(135deg, #8C4242 0%, #161414fa 100%);
         color: white;
-        padding: 15px 25px;
+        padding: 25px 30px;
+        border-bottom: 3px solid var(--accent-yellow);
     }
 
     .form-header h2 {
         margin: 0;
-        font-size: 20px;
-        font-weight: bold;
+        font-size: 22px;
+        font-weight: 700;
     }
 
     .section-title {
-        background: #735D6D;
+        background: var(--secondary);
         color: white;
-        padding: 8px 12px;
-        margin-top: 22px;
-        margin-bottom: 15px;
+        padding: 10px 16px;
+        margin-top: 30px;
+        margin-bottom: 20px;
         font-size: 14px;
-        border-radius: 5px;
+        border-radius: 6px;
         font-weight: 600;
+        letter-spacing: 0.5px;
+        box-shadow: 0 4px 10px rgba(106, 37, 37, 0.15);
     }
 
     .form-label {
         font-weight: 600;
         font-size: 13px; 
-        margin-bottom: 4px;
+        margin-bottom: 6px;
+        color: #000;
     }
 
     .form-control,
     .form-select {
-        border-radius: 5px;
-        padding: 6px 10px; 
-        font-size: 13px;
+        border: 1px solid #cbd5e1;
+        border-radius: 8px;
+        padding: 10px 14px; 
+        font-size: 14px;
+        transition: all 0.2s ease;
+    }
+
+    .form-control:focus,
+    .form-select:focus {
+        border-color: var(--primary);
+        box-shadow: 0 0 0 4px rgba(62, 81, 184, 0.15);
+        outline: 0;
     }
 
     .required {
-        color: red;
+        color: var(--secondary-hover);
+        font-weight: bold;
     }
 
     .submit-btn {
-        background: var(--primary);
+        background:var(--secondary);
         color: white;
         border: none;
-        padding: 8px 20px;
-        font-size: 15px;
-        font-weight: bold;
-        border-radius: 30px;
+        padding: 14px 30px;
+        font-size: 16px;
+        font-weight: 700;
+        border-radius: 8px;
         cursor: pointer;
         width: 100%;
-        transition: 0.3s ease;
+        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+        box-shadow: 0 4px 12px rgba(62, 81, 184, 0.2);
     }
 
     .submit-btn:hover {
-        background: var(--secondary);
-        transform: translateY(-1px);
+        background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
+        color: var(--accent-yellow);
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(130, 36, 36, 0.35);
     }
     
-   
     .mb-3-custom {
-        margin-bottom: 0.75rem !important; 
+        margin-bottom: 1.25rem !important; 
+    }
+
+    .form-check-input:checked {
+        background-color: var(--primary);
+        border-color: var(--primary);
     }
 </style>
 
 <div class="hero">
-    <div class="text-center">
+    <div class="text-center px-3">
         <h1>Course Enrolment Form</h1>
-        <p class="lead mb-0" style="font-size: 14px; opacity: 0.9;">Automobile Engineering Academy</p>
+        <p class="lead mb-0 mt-2 fw-semibold" style="font-size: 15px; opacity: 0.95; color: var(--accent-yellow);">
+            Automobile Engineering Academy
+        </p>
     </div>
 </div>
 
 <div class="container apply-area">
-   
     <div class="form-container-sm">
         <div class="form-card">
             <div class="form-header">
                 <h2>
                     <i class="fa-solid fa-file-circle-check me-2"></i>
-                    Course Enrolment Form
+                    New Student Registration
                 </h2>
             </div>
 
-            <div class="p-4">
-                <form action="#" method="POST" enctype="multipart/form-data">
+            <div class="p-4 p-md-5">
+
+                                @if(session('success'))
+                        <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
+                            {{ session('success') }}
+                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                        </div>
+                    @endif
+
+                    @if($errors->any())
+                        <div class="alert alert-danger mb-4">
+                            <ul class="mb-0">
+                                @foreach($errors->all() as $error)
+                                    <li>{{ $error }}</li>
+                                @endforeach
+                            </ul>
+                        </div>
+                    @endif
+                <form action="{{ route('apply.store') }}" method="POST" enctype="multipart/form-data">
                     @csrf
 
                     {{-- STUDENT INFORMATION --}}
@@ -146,32 +194,32 @@
                     <div class="row">
                         <div class="col-md-6 mb-3-custom">
                             <label class="form-label">First Name <span class="required">*</span></label>
-                            <input type="text" name="first_name" class="form-control" required>
+                            <input type="text" name="first_name" class="form-control" placeholder="Enter your first name" required>
                         </div>
 
                         <div class="col-md-6 mb-3-custom">
                             <label class="form-label">Last Name <span class="required">*</span></label>
-                            <input type="text" name="last_name" class="form-control" required>
+                            <input type="text" name="last_name" class="form-control" placeholder="Enter your last name" required>
                         </div>
 
                         <div class="col-md-6 mb-3-custom">
-                            <label class="form-label">NIC / Passport</label>
-                            <input type="text" name="nic" class="form-control">
+                            <label class="form-label">NIC / Passport Number</label>
+                            <input type="text" name="nic" class="form-control" placeholder="Identity Document No.">
                         </div>
 
                         <div class="col-md-6 mb-3-custom">
                             <label class="form-label">Nationality</label>
-                            <input type="text" name="nationality" class="form-control">
+                            <input type="text" name="nationality" class="form-control" placeholder="e.g. Sri Lankan">
                         </div>
 
                         <div class="col-md-6 mb-3-custom">
-                            <label class="form-label">Address <span class="required">*</span></label>
-                            <input type="text" name="address" class="form-control" required>
+                            <label class="form-label">Residential Address <span class="required">*</span></label>
+                            <input type="text" name="address" class="form-control" placeholder="Street address" required>
                         </div>
 
                         <div class="col-md-6 mb-3-custom">
                             <label class="form-label">District / City / State <span class="required">*</span></label>
-                            <input type="text" name="state" class="form-control" required>
+                            <input type="text" name="state" class="form-control" placeholder="City or region" required>
                         </div>
 
                         <div class="col-md-6 mb-3-custom">
@@ -198,17 +246,17 @@
                     <div class="row">
                         <div class="col-md-6 mb-3-custom">
                             <label class="form-label">Contact Number <span class="required">*</span></label>
-                            <input type="tel" name="mobile" class="form-control" required>
+                            <input type="tel" name="mobile" class="form-control" placeholder="Primary phone number" required>
                         </div>
 
                         <div class="col-md-6 mb-3-custom">
                             <label class="form-label">Alternative Contact Number</label>
-                            <input type="tel" name="mobile2" class="form-control">
+                            <input type="tel" name="mobile2" class="form-control" placeholder="Backup phone number">
                         </div>
 
                         <div class="col-md-6 mb-3-custom">
                             <label class="form-label">Email Address <span class="required">*</span></label>
-                            <input type="email" name="email" class="form-control" required>
+                            <input type="email" name="email" class="form-control" placeholder="name@example.com" required>
                         </div>
                         
                         <div class="col-md-6 mb-3-custom">
@@ -216,7 +264,7 @@
                             <select name="preferred_contact_method" class="form-select">
                                 <option selected disabled>Select Your Option</option>
                                 <option value="email">Email</option>
-                                <option value="phone">Phone</option>
+                                <option value="phone">Phone Call</option>
                                 <option value="sms">SMS</option>
                             </select>
                         </div>
@@ -224,12 +272,12 @@
 
                     {{-- EDUCATION --}}
                     <div class="section-title">
-                        <i class="fa-solid fa-graduation-cap me-2"></i> Education
+                        <i class="fa-solid fa-graduation-cap me-2"></i> Academic Qualifications
                     </div>
 
                     <div class="row">
                         <div class="col-md-6 mb-3-custom">
-                            <label class="form-label">Still at school?</label>
+                            <label class="form-label">Are you currently a school student?</label>
                             <select name="still_at_school" class="form-select">
                                 <option selected disabled>Select Your Option</option>
                                 <option value="Yes">Yes</option>
@@ -255,7 +303,7 @@
 
                         <div class="col-md-6 mb-3-custom">
                             <label class="form-label">School / College Name</label>
-                            <input type="text" name="school_name" class="form-control" placeholder="Enter School Name">
+                            <input type="text" name="school_name" class="form-control" placeholder="Enter last attended school name">
                         </div>
 
                         <div class="col-md-6 mb-3-custom">
@@ -266,10 +314,10 @@
                         <div class="col-md-6 mb-3-custom">
                             <label class="form-label">Examination Passed</label>
                             <select name="exam_passed" class="form-select">
-                                <option selected disabled>Select Examination</option>
+                                <option selected disabled>Select Final Examination</option>
                                 <option value="G.C.E. O/L">G.C.E. O/L</option>
                                 <option value="G.C.E. A/L">G.C.E. A/L</option>
-                                <option value="NVQ">NVQ</option>
+                                <option value="NVQ">NVQ Standards</option>
                                 <option value="Certificate">Certificate</option>
                                 <option value="Diploma">Diploma</option>
                                 <option value="Degree">Degree</option>
@@ -278,17 +326,17 @@
                         </div>
 
                         <div class="col-md-6 mb-3-custom">
-                            <label class="form-label">Subjects</label>
-                            <input type="text" name="subjects" class="form-control" placeholder="e.g. Mathematics, Science">
+                            <label class="form-label">Core Subjects</label>
+                            <input type="text" name="subjects" class="form-control" placeholder="e.g. Mathematics, Science, Tech">
                         </div>
 
                         <div class="col-12 mb-3-custom">
-                            <label class="form-label">Grades / Results</label>
-                            <textarea name="grades_results" class="form-control" rows="2" placeholder="Enter your grades or examination results"></textarea>
+                            <label class="form-label">Grades / Academic Results Summary</label>
+                            <textarea name="grades_results" class="form-control" rows="3" placeholder="List your relevant examination grades or index summaries..."></textarea>
                         </div>
 
                         <div class="col-12 mb-3-custom">
-                            <label class="form-label">Educational Certificates</label>
+                            <label class="form-label">Upload Educational Certificates (Multiple Allowed)</label>
                             <input type="file" name="certificates[]" class="form-control" accept=".pdf,.jpg,.jpeg,.png" multiple>
                         </div>
                     </div>
@@ -301,24 +349,24 @@
                     <div class="row">
                         <div class="col-md-6 mb-3-custom">
                             <label class="form-label">Emergency Contact Name <span class="required">*</span></label>
-                            <input type="text" name="emergency_contact_name" class="form-control" required>
+                            <input type="text" name="emergency_contact_name" class="form-control" placeholder="Full name of guardian/relative" required>
                         </div>
 
                         <div class="col-md-6 mb-3-custom">
                             <label class="form-label">Relationship <span class="required">*</span></label>
-                            <input type="text" name="emergency_contact_relationship" class="form-control" required>
+                            <input type="text" name="emergency_contact_relationship" class="form-control" placeholder="e.g. Father, Mother, Spouse" required>
                         </div>
                     </div>
 
                     {{-- TERMS AND CONDITIONS --}}
-                    <div class="form-check mb-3 mt-2">
+                    <div class="form-check mb-4 mt-3">
                         <input class="form-check-input" type="checkbox" id="terms" required>
-                        <label class="form-check-label" for="terms" style="font-size: 13px;">
-                            I agree to the terms and conditions <span class="required">*</span>
+                        <label class="form-check-label fw-semibold" for="terms" style="font-size: 13px; color: #000; cursor: pointer;">
+                            I hereby declare that the details furnished above are true and correct to the best of my knowledge <span class="required">*</span>
                         </label>
                     </div>
 
-                    <div class="mt-3">
+                    <div class="mt-4">
                         <button type="submit" class="submit-btn">Submit Application</button>
                     </div>
 

resources/views/contacts.blade.php

@@ -6,20 +6,29 @@
 
 <style>
 :root{
-    --primary:#5E244E;
-    --secondary:#8B3A74;
-    --light:#f8f4f7;
+    /* 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: Arial, Helvetica, sans-serif;
+    font-family: 'Segoe UI', Arial, sans-serif;
+    color: var(--text-main);
 }
 
 .hero-contact{
     min-height:50vh;
     background:
-    linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),
-    url('https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg');
+    linear-gradient(rgba(233, 236, 246, 0.6), rgba(39, 35, 35, 0.71)), url('https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg');
     background-size:cover;
     background-position:center;
     display:flex;
@@ -33,37 +42,39 @@ body {
     background:#fff;
     border-radius:20px;
     padding:35px;
-    box-shadow: 0 10px 30px rgba(0,0,0,.05);
-    border: 1px solid #efeff4;
+    box-shadow: 0 10px 30px rgba(0,0,0,.04);
+    border: 1px solid var(--card-border);
 }
 
 .form-control{
     border-radius:10px;
     padding:12px;
-    border: 1px solid #ced4da;
+    border: 1px solid #cbd5e1;
     transition: all 0.3s ease;
 }
 
 .form-control:focus {
-    border-color: var(--primary);
-    box-shadow: 0 0 0 0.25rem rgba(94, 36, 78, 0.25);
+    border-color: var(--primary-light);
+    box-shadow: 0 0 0 4px rgba(10, 103, 223, 0.15);
+    outline: 0;
 }
 
 .btn-contact{
-    background:var(--primary);
+    background: #6a2525 ;
     color:#fff;
     border-radius:10px;
     padding:12px 30px;
     font-weight: 600;
     transition: all 0.3s ease;
     border: none;
+    box-shadow: 0 4px 12px rgba(62, 81, 184, 0.2);
 }
 
 .btn-contact:hover{
-    background:var(--secondary);
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
     color:#fff;
     transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(94, 36, 78, 0.3);
+    box-shadow: 0 6px 15px rgba(188, 26, 26, 0.3);
 }
 
 .info-card{
@@ -72,19 +83,23 @@ body {
     padding:20px;
     text-align:center;
     box-shadow: 0 5px 20px rgba(0,0,0,.04);
-    border: 1px solid #efeff4;
+    border: 1px solid var(--card-border);
     transition:.3s;
 }
 
 .info-card:hover{
     transform:translateY(-5px);
-    border-color: var(--primary);
-    box-shadow: 0 10px 25px rgba(94, 36, 78, 0.08);
+    border-color: var(--primary-light);
+    box-shadow: 0 10px 25px rgba(62, 81, 184, 0.1);
 }
 
- 
 .info-card i {
-    color: var(--primary) !important;
+    color: #861E28 !important;
+    transition: color 0.3s ease;
+}
+
+.info-card:hover i {
+    color: var(--secondary) !important;
 }
 
 /* ========================================================
@@ -96,17 +111,14 @@ body {
     transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
- 
 .fade-up-init {
     transform: translateY(30px);
 }
 
- 
 .slide-left-init {
     transform: translateX(-40px);
 }
 
- 
 .fade-in-init {
     transform: scale(0.98);
 }
@@ -123,7 +135,7 @@ body {
     <div class="container">
         <div class="animate-item animated fade-up-init">
             <h1 class="fw-bold display-4">Contact Us</h1>
-            <p class="fs-5">We are here to help you. Reach us anytime.</p>
+            <p class="fs-5 text-white-50" style="color:rgba(255, 255, 255, 0.8) !important">We are here to help you. Reach us anytime.</p>
         </div>
     </div>
 </section>
@@ -138,9 +150,7 @@ body {
 <div class="col-md-6 animate-item slide-left-init">
 <div class="contact-box">
 
-<h3 class="mb-4 fw-bold" style="color: #1c1d1f;">Send Message</h3>
-
-
+<h3 class="mb-4 fw-bold" style="color: var(--text-main);">Send Message</h3>
 
 @if(session('success'))
     <div class="alert alert-success">
@@ -148,27 +158,26 @@ body {
     </div>
 @endif
 
-
 <form action="{{ route('contact.store') }}" method="POST">
 @csrf
 
 <div class="mb-3">
-    <label class="form-label fw-semibold">Name</label>
+    <label class="form-label fw-semibold text-secondary-emphasis">Name</label>
     <input type="text" name="name" class="form-control" placeholder="Your Name" required>
 </div>
 
 <div class="mb-3">
-    <label class="form-label fw-semibold">Email</label>
+    <label class="form-label fw-semibold text-secondary-emphasis">Email</label>
     <input type="email" name="email" class="form-control" placeholder="Your Email" required>
 </div>
 
 <div class="mb-3">
-    <label class="form-label fw-semibold">Subject</label>
+    <label class="form-label fw-semibold text-secondary-emphasis">Subject</label>
     <input type="text" name="subject" class="form-control" placeholder="Subject" required>
 </div>
 
 <div class="mb-3">
-    <label class="form-label fw-semibold">Message</label>
+    <label class="form-label fw-semibold text-secondary-emphasis">Message</label>
     <textarea name="message" rows="5" class="form-control" placeholder="Your Message" required></textarea>
 </div>
 
@@ -181,7 +190,7 @@ Send Message
 </div>
 </div>
 
- 
+<!-- Info Cards -->
 <div class="col-md-6 animate-item fade-in-init">
 
 <div class="info-card mb-3">
@@ -216,38 +225,18 @@ Send Message
 </section>
 
 <!-- MAP -->
- <section class="pb-5">
-<div class="container">
-
-<!-- <iframe
-  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=place_id:ChIJXdB3Sy_84joRYNze2w86UjQ"
-  width="100%"
-  height="300"
-  style="border:0;border-radius:15px;"
-  allowfullscreen=""
-  loading="lazy">
-</iframe> -->
-
+<section class="pb-5">
+<div class="container animate-item fade-up-init">
 <iframe
   src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d989.8732851214081!2d80.0435697!3d7.0771955!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae2fc2f4b77d05d%3A0x34523a0fdbdedc60!2sGlitz%20Park!5e0!3m2!1sen!2slk!4v1719999999999!5m2!1sen!2slk"
   width="100%"
-  height="300"
-  style="border:0;border-radius:15px;"
-  allowfullscreen=""
-  loading="lazy">
-</iframe>
-<!-- <section class="pb-5">
-<div class="container animate-item fade-up-init">
-<iframe
-  src="https://www.google.com/maps/embed/pb=!1m14!1m8!1m3!1d989.8732851214081!2d80.0435697!3d7.0771955!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae2fc2f4b77d05d%3A0x34523a0fdbdedc60!2sGlitz%20Park!5e0!3m2!1sen!2slk!4v1719999999999!5m2!1sen!2slk"
-  width="100%"
   height="350"
-  style="border:0;border-radius:20px; box-shadow: 0 10px 30px rgba(0,0,0,.05);"
+  style="border:0;border-radius:20px; box-shadow: 0 10px 30px rgba(0,0,0,.04); border: 1px solid var(--card-border);"
   allowfullscreen=""
   loading="lazy">
 </iframe>
 </div>
-</section> -->
+</section>
 
 <script>
 document.addEventListener('DOMContentLoaded', function () {
@@ -267,5 +256,7 @@ document.addEventListener('DOMContentLoaded', function () {
     animatedElements.forEach(el => observer.observe(el));
 });
 </script>
+|
+
 
 @endsection

resources/views/courses.blade.php

@@ -1,60 +1,75 @@
 @extends('layouts.app')
 
-@section('title','Our Courses')
+@section('title', 'Our Courses')
 
 @section('content')
 
 <style>
-:root{
-    --primary:#5E244E;
-    --secondary:#8B3A74;
-    --light:#f8f4f7;
-    --card-border: #efeff4;
-    --text-muted: #6a6f73;
-    --success-green: #1f8a4c;
+:root {
+    /* Premium Modern Automotive Palette */
+    --primary: #3E51B8;
+    --primary-light: #0a67df;
+    --secondary: #BC1A1A;
+    --secondary-hover: #822424;
+    --accent-dark: #753939;
+    --accent-light: rgba(227, 100, 20, 0.1);
+    --accent-orange: #e36414;
+    --accent-yellow: #FFE618;
+    --bg-light: #F8FAFC;
+    
+    --text-main: #1E293B;
+    --text-muted: #64748B;
+    --card-border: rgba(62, 81, 184, 0.1);
+    --shadow-color: rgba(15, 44, 89, 0.05);
+    --success-green: #10B981;
 }
 
 body {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: 'Segoe UI', Arial, sans-serif;
+    color: var(--text-main);
+    background-color: #ffffff;
 }
 
+/* ===== Hero Section ===== */
 .hero {
-    background-image: linear-gradient(rgba(109, 105, 105, 0.65), rgb(64, 59, 66)), 
-                      url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80');
+    background-image: linear-gradient(rgba(207, 220, 238, 0.9), rgba(35, 29, 29, 0.85)), url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     color: #ffffff;
-    padding: 120px 0;
+    padding: 130px 0;
     text-align: center;
 }
 
-.hero h1{
-    font-size:50px;
-    font-weight:700;
+.hero h1 {
+    font-size: 55px;
+    font-weight: 800;
+    text-shadow: 0 2px 15px rgba(0,0,0,0.4);
 }
 
-.hero p{
-    max-width:700px;
-    margin:auto;
-    font-size:18px;
+.hero p {
+    max-width: 700px;
+    margin: auto;
+    font-size: 19px;
+    color: #F1F5F9;
 }
 
-/* --- Search Box Styling --- */
+/* --- Premium Search Box Styling --- */
 .search-box {
-    max-width: 500px;
-    margin: 30px auto 0 auto;
+    max-width: 550px;
+    margin: 35px auto 0 auto;
     position: relative;
     display: flex;
-    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
     overflow: hidden;
     background: #fff;
     border-radius: 100px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .search-box input {
     width: 100%;
-    padding: 15px 25px;
+    padding: 16px 28px;
     border: none;
     outline: none;
     font-size: 16px;
@@ -62,92 +77,107 @@ body {
 }
 
 .search-box button {
-    background: var(--primary);
+    background: linear-gradient(135deg, #13141A 0%, #8ca8e9 100%);
     color: #fff;
     border: none;
-    padding: 0 25px;
+    padding: 0 30px;
     cursor: pointer;
-    transition: 0.3s;
+    transition: all 0.3s ease;
     font-size: 18px;
 }
 
 .search-box button:hover {
-    background: var(--secondary);
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
 }
 
+/* ===== HORIZONTAL COURSE CARDS ===== */
 .course-card {
-    border: 1px solid var(--card-border);
-    border-radius: 20px;
     overflow: hidden;
     background: #fff;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    box-shadow: none;
-    scale: .99;
+    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 
 .course-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
+    transform: translateY(-6px);
 }
 
 .course-image-wrapper {
-    padding: 16px;
+    padding: 20px;
+    height: 100%;
 }
 
 .course-card img {
-    height: 200px;
+    height: 220px;
     width: 100%;
     object-fit: cover;
-    /* border-radius: 14px; */
+    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.course-card:hover img {
+    transform: scale(1.04);
 }
 
 .course-card .card-body {
-    padding: 24px;
+    padding: 32px 32px 32px 10px;
     display: flex;
     flex-direction: column;
 }
 
+@media (max-width: 767px) {
+    .course-card .card-body {
+        padding: 0 24px 24px 24px;
+    }
+}
+
 .course-title {
-    font-size: 21px;
-    font-weight: 700;
+    font-size: 23px;
+    font-weight: 750;
     line-height: 1.3;
-    color: #1c1d1f;
+    color:#2B2B2B;
     margin-bottom: 8px;
+    transition: color 0.3s ease;
+}
+
+.course-card:hover .course-title {
+    color: var(--secondary);
 }
 
 .course-author {
     font-size: 14px;
-    color: var(--text-muted);
-    margin-bottom: 12px;
+    font-weight: 600;
+    color: #910909;
+    margin-bottom: 14px;
 }
 
 .course-short-desc {
-    font-size: 14px;
-    color: #4f5357;
-    margin-bottom: 16px;
-    line-height: 1.5;
+    font-size: 14.5px;
+    color: #556575;
+    margin-bottom: 20px;
+    line-height: 1.6;
 }
 
 .course-meta-row {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 8px;
-    margin-bottom: 14px;
+    gap: 12px;
+    margin-bottom: 18px;
 }
 
 .badge-bestseller {
-    background-color: #ece3f1;
-    color: var(--primary);
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--accent-orange) 100%);
+    color: #fff;
     font-weight: 700;
-    font-size: 11px;
-    padding: 3px 10px;
-    border-radius: 4px;
+    font-size: 10.5px;
+    padding: 4px 12px;
+    border-radius: 30px;
     text-transform: uppercase;
+    letter-spacing: 0.05em;
+    box-shadow: 0 4px 10px rgba(188, 26, 26, 0.2);
 }
 
 .rating-star {
-    color: #b4690e;
+    color: #f39c12;
     font-weight: 700;
     font-size: 14px;
     display: flex;
@@ -157,20 +187,21 @@ body {
 
 .rating-count {
     color: var(--text-muted);
-    font-size: 13px;
+    font-size: 13.5px;
+    font-weight: 500;
 }
 
 .course-features {
     display: flex;
-    gap: 15px;
-    font-size: 13px;
+    gap: 20px;
+    font-size: 13.5px;
     color: var(--success-green);
-    margin-bottom: 20px;
-    font-weight: 500;
+    margin-bottom: 24px;
+    font-weight: 600;
 }
 
 .course-features span i {
-    margin-right: 4px;
+    margin-right: 6px;
 }
 
 .course-footer {
@@ -178,116 +209,129 @@ body {
 }
 
 .read-btn {
-    background: var(--primary);
+    background: #822424;
     color: #fff;
-    padding: 12px 20px;
+    padding: 13px 28px;
     font-weight: 600;
-    border-radius: 8px;
     font-size: 15px;
-    transition: 0.2s;
-    border: none;
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    border: 2px solid transparent;
     text-decoration: none;
     display: block;
     text-align: center;
+    box-shadow: 0 4px 12px rgba(10, 103, 223, 0.2);
 }
 
 .read-btn:hover {
-    background: var(--secondary);
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
     color: #fff;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 18px rgba(188, 26, 26, 0.3);
 }
 
-/* --- Modernized Why Study With Us Section --- */
+/* --- Features Section --- */
 .features-section {
-    background-color: #f8f9fa;
-    border-radius: 24px;
-    padding: 60px 40px;
-    margin-bottom: 60px;
+    background-color: var(--bg-light);
+    padding: 80px 40px;
+    margin-bottom: 40px;
+    background-image: radial-gradient(rgba(62, 81, 184, 0.04) 1px, transparent 0);
+    background-size: 20px 20px;
 }
 
 .features-section h2 {
-    font-size: 32px;
-    font-weight: 700;
-    color: #1c1d1f;
-    margin-bottom: 40px;
+    font-size: 45px;
+    font-weight: 800;
+    color: #ffffff;
+    margin-bottom: 54px;
 }
 
 .feature-box {
     background: #fff;
-    padding: 30px 24px;
-    border-radius: 16px;
+    padding: 40px 28px;
+    border-radius: 24px;
     height: 100%;
-    transition: all 0.3s ease;
-    border: 1px solid #efeff4;
-    text-align: left;
+    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+    border: 1px solid var(--card-border);
+    text-align: center;
+    box-shadow: 0 6px 20px rgba(62, 81, 184, 0.02);
 }
 
 .feature-icon-wrapper {
-    width: 50px;
-    height: 50px;
-    background-color: #ece3f1;
+    width: 58px;
+    height: 58px;
+    background-color: rgba(62, 81, 184, 0.08);
     color: var(--primary);
-    border-radius: 12px;
+    border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 22px;
-    margin-bottom: 20px;
-    transition: transform 0.5s ease;  
+    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  {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
-    border-color: var(--primary);
+    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 i {
-    transform: rotate(360deg);
+.feature-box:hover .feature-icon-wrapper {
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--accent-orange) 100%);
+    color: #fff;
+    transform: rotateY(180deg);
+    box-shadow: 0 8px 15px rgba(188, 26, 26, 0.25);
 }
 
 .feature-icon-wrapper i {
-    transition: transform 0.5s ease;  
+    transition: transform 0.4s ease;
+}
+
+.feature-box:hover .feature-icon-wrapper i   {
+    transform: rotateY(-180deg);
 }
 
 .feature-box h5 {
-    font-size: 18px;
+    font-size: 19px;
     font-weight: 700;
-    color: #1c1d1f;
-    margin-bottom: 10px;
+    color: #181818;
+    margin-bottom: 12px;
+}
+
+.feature-box h5:hover {
+    color: #822424 ;
 }
 
 .feature-box p {
-    font-size: 14px;
+    font-size: 14.5px;
     color: var(--text-muted);
     margin-bottom: 0;
-    line-height: 1.5;
+    line-height: 1.6;
 }
 
 #noResults {
     font-size: 18px;
     font-weight: bold;
-    color: #666;
-    margin-top: 20px;
+    color: var(--text-muted);
+    margin-top: 30px;
 }
 
-/* ========================================================
-   Custom Pure CSS Animations (Scroll Animations)
-   ======================================================== */
-/* .animate-on-scroll {
+/* Animations */
+.animate-on-scroll {
     opacity: 0;
-    transition: all 0.8s ease-out;
+    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .fade-up-init {
-    transform: translateY(30px);
+    transform: translateY(40px);
 }
 
 .animate-on-scroll.animated {
     opacity: 1;
     transform: translateY(0);
-} */
+}
 </style>
 
 {{-- Hero --}}
@@ -313,77 +357,6 @@ body {
     </div>
 </section>
 
-@php
-$courses=[
-    [
-        'image'=>'https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=900&q=80',
-        'title'=>'Diploma in Automotive Engineering',
-        'duration'=>'2 Years',
-        'level'=>'Diploma',
-        'author'=>'Automotive Engineering Dept.',
-        'desc'=>'Master engine diagnostics, modern hybrid vehicle maintenance, and advanced automotive electrical systems with hands-on labs.',
-        'students'=>'1,240 students enrolled',
-        'rating'=>'4.9',
-        'badge'=>'Popular'
-    ],
-    [
-        'image'=>'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=900&q=80',
-        'title'=>'Mechanical Systems Technology',
-        'duration'=>'18 Months',
-        'level'=>'Certificate',
-        'author'=>'Tech & Service Campus',
-        'desc'=>'Comprehensive training on vehicle suspension, transmissions, steering, braking mechanisms, and professional repair workshop skills.',
-        'students'=>'850 students enrolled',
-        'rating'=>'4.7',
-        'badge'=>'Bestseller'
-    ],
-    [
-        'image'=>'https://images.unsplash.com/photo-1502877338535-766e1452684a?auto=format&fit=crop&w=900&q=80',
-        'title'=>'Electric Vehicle Technology',
-        'duration'=>'1 Year',
-        'level'=>'Advanced',
-        'author'=>'EV Research Institute',
-        'desc'=>'Dive into the future of mobility. Learn about smart EV battery packs, fast charging infrastructures, and high-voltage safety.',
-        'students'=>'640 students enrolled',
-        'rating'=>'4.8',
-        'badge'=>'New'
-    ],
-    [
-        'image'=>'https://images.unsplash.com/photo-1616788494707-ec28f08d05a1?auto=format&fit=crop&w=900&q=80',
-        'title'=>'Advanced EFI Engine Tuning & Diagnostic',
-        'duration'=>'6 Months',
-        'level'=>'Expert',
-        'author'=>'Performance Tuning Lab',
-        'desc'=>'Learn professional ECU remapping, electronic fuel injection (EFI) tuning, sensor calibration, and master high-end oscilloscope diagnostics.',
-        'students'=>'420 students enrolled',
-        'rating'=>'4.9',
-        'badge'=>'Hot & New'
-    ],
-    [
-        'image'=>'https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?auto=format&fit=crop&w=900&q=80',
-        'title'=>'Hybrid & Plug-in Hybrid Masterclass',
-        'duration'=>'8 Months',
-        'level'=>'Professional',
-        'author'=>'Automotive Engineering Dept.',
-        'desc'=>'Specialized training in Toyota/Honda Hybrid Synergy Drive systems, inverter repairs, planetary gearboxes, and live diagnostic scanner masterclass.',
-        'students'=>'980 students enrolled',
-        'rating'=>'4.8',
-        'badge'=>'Top Rated'
-    ],
-    [
-        'image'=>'https://images.unsplash.com/photo-1517524008697-84bbe3c3fd98?auto=format&fit=crop&w=900&q=80',
-        'title'=>'Automotive Body Electronics & Comfort Systems',
-        'duration'=>'1 Year',
-        'level'=>'Diploma',
-        'author'=>'Tech & Service Campus',
-        'desc'=>'Covering modern CAN-bus/LIN-bus communication networks, SRS airbag systems, ABS/ESP braking electronics, and smart climate control.',
-        'students'=>'510 students enrolled',
-        'rating'=>'4.6',
-        'badge'=>'Trending'
-    ],
-];
-@endphp
-
 <section class="py-5">
     <div class="container">
         
@@ -392,35 +365,52 @@ $courses=[
         </div>
 
         <div class="row g-4" id="courseContainer">
-            @foreach($courses as $index => $course)
+            @forelse($courses as $index => $course)
                 <div class="col-12 course-item animate-on-scroll fade-up-init" style="transition-delay: {{ $index * 100 }}ms;">
                     <div class="card course-card h-100">
                         <div class="row g-0 align-items-center">
                             
+                            {{-- Course Image --}}
                             <div class="col-md-4">
                                 <div class="course-image-wrapper">
-                                    <img src="{{ $course['image'] }}" alt="{{ $course['title'] }}">
+                                    <img src="{{ $course->image }}" alt="{{ $course->title }}">
                                 </div>
                             </div>
                             
+                            {{-- Course Details --}}
                             <div class="col-md-8">
                                 <div class="card-body">
-                                    <h4 class="course-title">{{ $course['title'] }}</h4>
-                                    <div class="course-author">{{ $course['author'] }}</div>
+                                    <h4 class="course-title">{{ $course->title }}</h4>
                                     
-                                    <p class="course-short-desc">{{ $course['desc'] }}</p>
+                                    @if($course->author)
+                                        <div class="course-author">
+                                            <i class="fa-solid fa-user-gear me-1"></i> {{ $course->author }}
+                                        </div>
+                                    @endif
+                                    
+                                    <p class="course-short-desc">{{ $course->desc }}</p>
                                     
                                     <div class="course-meta-row">
-                                        <span class="badge-bestseller">{{ $course['badge'] }}</span>
+                                        @if($course->badge)
+                                            <span class="badge-bestseller">{{ $course->badge }}</span>
+                                        @endif
+
+                                        @if($course->rating)
                                             <span class="rating-star">
-                                            <i class="fas fa-star"></i> {{ $course['rating'] }}
+                                                <i class="fas fa-star"></i> {{ $course->rating }}
                                             </span>
-                                        <span class="rating-count">({{ $course['students'] }})</span>
+                                        @endif
+
+                                        @if($course->student)
+                                            <span class="rating-count">({{ $course->student }} students enrolled)</span>
+                                        @endif
                                     </div>
 
                                     <div class="course-features">
-                                        <span><i class="fas fa-tools"></i> Practical Labs</span>
-                                        <span><i class="fas fa-certificate"></i> Verified ({{ $course['duration'] }})</span>
+                                        <span><i class="fas fa-tools"></i> Level: {{ $course->level ?? 'General' }}</span>
+                                        @if($course->duration)
+                                            <span><i class="fas fa-certificate"></i> Duration: {{ $course->duration }}</span>
+                                        @endif
                                     </div>
 
                                     <div class="course-footer" style="max-width: 200px;">
@@ -432,16 +422,24 @@ $courses=[
                         </div>
                     </div>
                 </div>
-            @endforeach
+            @empty
+                <div class="col-12 text-center py-5">
+                    <h4>No courses available at the moment.</h4>
+                </div>
+            @endforelse
         </div>
 
     </div>
 </section>
 
 {{-- Why Study With Us Section --}}
-<section class="pb-5">
+<section class="pb-5 why-study-section">
     <div class="container">
-        <div class="features-section text-center animate-on-scroll fade-up-init">
+        <div class="features-section text-center animate-on-scroll fade-up-init" 
+             style="background-image: linear-gradient(rgba(77, 103, 169, 0.61), rgba(0, 0, 0, 0.9)), url('https://images.pexels.com/photos/4489749/pexels-photo-4489749.jpeg?auto=compress&cs=tinysrgb&w=1600');
+                    background-size: cover;
+                    background-position: center;
+                    background-repeat: no-repeat;">
             <h2>Why Study With Us?</h2>
             
             <div class="row g-4">
@@ -499,8 +497,8 @@ document.addEventListener('DOMContentLoaded', function () {
         let hasResults = false;
 
         courseItems.forEach(function(item) {
-            let title = item.querySelector('.course-title').textContent.toLowerCase();
-            let desc = item.querySelector('.course-short-desc').textContent.toLowerCase();
+            let title = item.querySelector('.course-title') ? item.querySelector('.course-title').textContent.toLowerCase() : '';
+            let desc = item.querySelector('.course-short-desc') ? item.querySelector('.course-short-desc').textContent.toLowerCase() : '';
 
             if (title.includes(filter) || desc.includes(filter)) {
                 item.style.setProperty('display', '', 'important');  

resources/views/forgotPassword.blade.php

@@ -0,0 +1,437 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <title>Password Recovery</title>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
+
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: #f4f6f9;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+        .container-box {
+            background: #ffffff;
+            width: 100%;
+            max-width: 420px;
+            border-radius: 16px;
+            padding: 40px 36px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+        }
+        .icon-wrap {
+            width: 64px;
+            height: 64px;
+            background: #943835e3;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 20px;
+        }
+        .icon-wrap i { font-size: 24px; color: #eeff8f; }
+        h1 { font-size: 22px; color: #1f2937; text-align: center; margin-bottom: 8px; font-weight: 700; }
+        p.subtitle { text-align: center; color: #6b7280; font-size: 14px; margin-bottom: 28px; line-height: 1.5; }
+        .form-group { margin-bottom: 20px; position: relative; }
+        label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
+        input[type="email"], input[type="text"], input[type="password"] {
+            width: 100%; padding: 12px 14px; border: 1.5px solid #e5e7eb;
+            border-radius: 10px; font-size: 14px; color: #1f2937; outline: none;
+            transition: all 0.2s ease;
+        }
+        input:focus { border-color: #943835e3; box-shadow: 0 0 0 3px rgba(148, 56, 53, 0.15); }
+        .toggle-password { position: absolute; right: 14px; top: 38px; cursor: pointer; color: #6b7280; }
+        .err, .error { color: #dc2626; font-size: 12.5px; margin-top: 6px; display: block; }
+        .otp-input { letter-spacing: 4px; text-align: center; font-size: 20px; font-weight: 700; }
+        button[type="submit"] {
+            width: 100%; padding: 13px; background: #943835e3; color: #fff;
+            border: none; border-radius: 10px; font-size: 15px; font-weight: 600;
+            cursor: pointer; margin-top: 10px; transition: transform 0.15s ease;
+        }
+        button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(148, 56, 53, 0.35); }
+        button[type="submit"]:disabled { background: #94383580; cursor: not-allowed; }
+        .back-link { display: block; text-align: center; margin-top: 22px; font-size: 13.5px; color: #6b7280; }
+        .back-link a { color: #231d77e3; font-weight: 600; text-decoration: none; }
+        .powered { text-align: center; margin-top: 20px; font-size: 12px; color: #9ca3af; }
+
+        .otp-container {
+            display: flex;
+            justify-content: space-between;
+            gap: 8px;
+            margin-top: 10px;
+            margin-bottom: 10px;
+        }
+
+        .otp-box {
+            width: 48px;
+            height: 52px;
+            text-align: center;
+            font-size: 22px;
+            font-weight: 700;
+            border: 1.5px solid #e5e7eb;
+            border-radius: 10px;
+            outline: none;
+            transition: all 0.2s ease;
+        }
+
+        .otp-box:focus {
+            border-color: #943835e3;
+            box-shadow: 0 0 0 3px rgba(148, 56, 53, 0.15);
+        }
+
+        .success-icon-wrap {
+            font-size: 60px;
+            color: #10b981; /* Green color */
+            margin-bottom: 15px;
+        }
+
+        .login-btn-link {
+            display: block;
+            width: 100%;
+            padding: 13px;
+            background: #943835e3;
+            color: #fff;
+            text-decoration: none;
+            border-radius: 10px;
+            font-size: 15px;
+            font-weight: 600;
+            margin-top: 20px;
+            transition: transform 0.15s ease;
+        }
+
+        .login-btn-link:hover {
+            color: #fff;
+            transform: translateY(-1px);
+            box-shadow: 0 8px 20px rgba(148, 56, 53, 0.35);
+        }
+    </style>
+</head>
+<body>
+
+<div class="container-box">
+    <div class="icon-wrap" id="main-icon">
+        <i class="fa-solid fa-key"></i>
+    </div>
+
+    <!-- Step 1: Email Form -->
+    <form class="login-form" name="login-form" action="{{ route('password.email') }}" method="post" id="login-form">
+        @csrf
+        <h1>Recover Password</h1>
+        <p class="subtitle">Enter your registered email address to receive an OTP code.</p>
+
+        <div class="form-group">
+            <label for="email-login">Email Address</label>
+            <input type="email" name="email" id="email-login" placeholder="name@example.com" required>
+            <span id="email-err" class="err"></span>
+            @if ($errors->has('email'))
+                <span class="err">{{ $errors->first('email') }}</span>
+            @endif
+        </div>
+
+        <button type="submit" id="verify-btn" onclick="validateEmail(event)">Verify Email</button>
+
+        <div class="back-link">
+            Remember the password? <a href="/signin">Please Login</a>
+        </div>
+    </form>
+
+    <!-- Step 2: OTP Verification Form -->
+    <div id="otp_sec" style="display: none;">
+        <h1>Enter OTP Code</h1>
+        <p class="subtitle">Please check your email and enter the 6-digit verification code.</p>
+
+        <form name="emailOtpForm" id="emailOtpForm">
+            @csrf
+            <div class="form-group">
+                <label>Verification Code</label>
+
+                <div class="otp-container">
+                    <input type="text" class="otp-box" maxlength="1" pattern="\d*" inputmode="numeric" required>
+                    <input type="text" class="otp-box" maxlength="1" pattern="\d*" inputmode="numeric" required>
+                    <input type="text" class="otp-box" maxlength="1" pattern="\d*" inputmode="numeric" required>
+                    <input type="text" class="otp-box" maxlength="1" pattern="\d*" inputmode="numeric" required>
+                    <input type="text" class="otp-box" maxlength="1" pattern="\d*" inputmode="numeric" required>
+                    <input type="text" class="otp-box" maxlength="1" pattern="\d*" inputmode="numeric" required>
+                </div>
+                <input type="hidden" id="otp" name="otpm">
+
+                <span id="otpm_err" class="err"></span>
+            </div>
+
+            <button type="submit" onclick="showPassword(event)">Submit Code</button>
+        </form>
+    </div>
+
+    <!-- Step 3: Password Reset Form -->
+    <div id="password_sec" style="display: none;">
+        <h1>Reset Password</h1>
+        <p class="subtitle">Create a new password for your account.</p>
+
+        <form class="login-form" name="reset-password-form" id="reset-password-form" action="{{ route('password.update') }}" method="post" onsubmit="handlePasswordReset(event)">
+            @csrf
+            <input type="hidden" name="email" value="" id="hidden_email">
+
+            <div class="form-group">
+                <label for="password-m">New Password</label>
+                <input type="password" name="password_mo" id="password-m" placeholder="••••••••" required>
+                <i class="fa-solid fa-eye toggle-password" id="view1" onclick="togglePassword('password-m', 'view1', 'no-view1')"></i>
+                <i class="fa-solid fa-eye-slash toggle-password" id="no-view1" onclick="togglePassword('password-m', 'view1', 'no-view1')" style="display:none;"></i>
+            </div>
+
+            <div class="form-group">
+                <label for="confirm_password">Confirm Password</label>
+                <input type="password" name="password_mo_confirmation" id="confirm_password" placeholder="••••••••" required>
+                <i class="fa-solid fa-eye toggle-password" id="view-con1" onclick="togglePassword('confirm_password', 'view-con1', 'no-view-con1')"></i>
+                <i class="fa-solid fa-eye-slash toggle-password" id="no-view-con1" onclick="togglePassword('confirm_password', 'view-con1', 'no-view-con1')" style="display:none;"></i>
+                <span id="con-pass-err" class="error"></span>
+            </div>
+
+            <button type="submit" id="reset-btn">Reset Password</button>
+
+            <div class="back-link">
+                Remember password? <a href="/signin">Please Login</a>
+            </div>
+        </form>
+    </div>
+
+    <!-- Step 4: Success Message Screen -->
+    <div id="success_sec" style="display: none; text-align: center;">
+        <div class="success-icon-wrap">
+            <i class="fa-solid fa-circle-check"></i>
+        </div>
+        <h1>Password Reset Successful!</h1>
+        <p class="subtitle">Your password has been reset successfully. You can now log in with your new password.</p>
+
+        <a href="/signin" class="login-btn-link">Proceed to Login</a>
+    </div>
+
+    <p class="powered">Powered by <a href="#" style="color: #6b7280; text-decoration: none; font-weight: 600;">GPiT</a></p>
+</div>
+
+<script>
+    function validateEmail(event) {
+        event.preventDefault();
+
+        var email = document.getElementById('email-login').value;
+        var emailErr = document.getElementById('email-err');
+        var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+        var verifyBtn = document.getElementById('verify-btn');
+
+        emailErr.textContent = '';
+        
+        if (email.trim() === '') {
+            emailErr.textContent = 'Please enter your email';
+            return;
+        }
+
+        verifyBtn.disabled = true;
+        verifyBtn.textContent = 'Please Wait...';
+
+        fetch("{{ route('password.email') }}", {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json',
+                'X-CSRF-TOKEN': csrfToken
+            },
+            body: JSON.stringify({ email: email })
+        })
+        .then(async response => {
+            const text = await response.text(); 
+            try {
+                return JSON.parse(text); 
+            } catch (e) {
+                console.error("SERVER ERROR DETAILS:", text);
+                throw new Error("Server returned HTML response instead of JSON.");
+            }
+        })
+        .then(data => {
+            if (data.success) {
+                document.getElementById("hidden_email").value = email;
+                document.getElementById("login-form").style.display = "none";
+                document.getElementById("otp_sec").style.display = "block";
+            } else {
+                if (data.errors && data.errors.email) {
+                    emailErr.textContent = data.errors.email[0];
+                } else {
+                    emailErr.textContent = data.message || 'Email not found in our records.';
+                }
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            emailErr.textContent = 'An error occurred. Check browser console (F12) for details.';
+        })
+        .finally(() => {
+            verifyBtn.disabled = false;
+            verifyBtn.textContent = 'Verify Email';
+        });
+    }
+
+    function showPassword(event) {
+        event.preventDefault();
+
+        const otp = document.getElementById('otp').value;
+        const otpm_err = document.getElementById('otpm_err');
+        const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+
+        otpm_err.innerText = '';
+
+        if (otp.trim() === '' || otp.length < 6) {
+            otpm_err.innerText = 'Please enter a valid 6-digit OTP code.';
+            return;
+        }
+
+        fetch("{{ route('password.verify.otp') }}", {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-TOKEN': token
+            },
+            body: JSON.stringify({ otp: otp })
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                document.getElementById("otp_sec").style.display = "none";
+                document.getElementById("password_sec").style.display = "block";
+            } else {
+                otpm_err.innerText = data.message || 'Invalid OTP code';
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            otpm_err.innerText = 'Verification failed. Try again.';
+        });
+    }
+
+    function handlePasswordReset(event) {
+        event.preventDefault();
+
+        const form = document.getElementById('reset-password-form');
+        const formData = new FormData(form);
+        const resetBtn = document.getElementById('reset-btn');
+        const passErr = document.getElementById('con-pass-err');
+
+        const pass = document.getElementById('password-m').value;
+        const confirmPass = document.getElementById('confirm_password').value;
+
+        if (pass !== confirmPass) {
+            passErr.innerText = "Passwords do not match!";
+            passErr.style.color = "#dc2626";
+            return;
+        }
+
+        resetBtn.disabled = true;
+        resetBtn.textContent = 'Resetting...';
+
+        fetch(form.action, {
+            method: 'POST',
+            headers: {
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
+                'Accept': 'application/json'
+            },
+            body: formData
+        })
+        .then(async response => {
+            const data = await response.json();
+            if (response.ok || data.success) {
+               
+                document.getElementById("main-icon").style.display = "none";
+                document.getElementById("password_sec").style.display = "none";
+                document.getElementById("success_sec").style.display = "block";
+            } else {
+                passErr.innerText = data.message || 'Failed to reset password.';
+                passErr.style.color = "#dc2626";
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            // Unexpected redirect/success response handling
+            document.getElementById("main-icon").style.display = "none";
+            document.getElementById("password_sec").style.display = "none";
+            document.getElementById("success_sec").style.display = "block";
+        })
+        .finally(() => {
+            resetBtn.disabled = false;
+            resetBtn.textContent = 'Reset Password';
+        });
+    }
+
+    $('#password-m, #confirm_password').on('keyup', function() {
+        if ($('#password-m').val() !== '' && $('#password-m').val() === $('#confirm_password').val()) {
+            $('#con-pass-err').html('Passwords match').css('color', '#047857');
+        } else if ($('#confirm_password').val() !== '') {
+            $('#con-pass-err').html('Passwords do not match').css('color', '#dc2626');
+        }
+    });
+
+    function togglePassword(inputId, eyeId, eyeSlashId) {
+        var field = document.getElementById(inputId);
+        var eye = document.getElementById(eyeId);
+        var eyeSlash = document.getElementById(eyeSlashId);
+
+        if (field.type === "password") {
+            field.type = "text";
+            eye.style.display = "none";
+            eyeSlash.style.display = "block";
+        } else {
+            field.type = "password";
+            eye.style.display = "block";
+            eyeSlash.style.display = "none";
+        }
+    }
+
+    document.addEventListener("DOMContentLoaded", function () {
+        const inputs = document.querySelectorAll(".otp-box");
+        const hiddenOtpInput = document.getElementById("otp");
+
+        inputs.forEach((input, index) => {
+            input.addEventListener("input", (e) => {
+                input.value = input.value.replace(/\D/g, '');  
+
+                if (input.value && index < inputs.length - 1) {
+                    inputs[index + 1].focus();
+                }
+                updateHiddenOtp();
+            });
+
+            input.addEventListener("keydown", (e) => {
+                if (e.key === "Backspace" && !input.value && index > 0) {
+                    inputs[index - 1].focus();
+                }
+            });
+
+            input.addEventListener("paste", (e) => {
+                e.preventDefault();
+                const pasteData = e.clipboardData.getData("text").trim().replace(/\D/g, '');
+                if (pasteData.length === 6) {
+                    pasteData.split("").forEach((char, i) => {
+                        if (inputs[i]) inputs[i].value = char;
+                    });
+                    inputs[5].focus();
+                    updateHiddenOtp();
+                }
+            });
+        });
+
+        function updateHiddenOtp() {
+            let fullOtp = "";
+            inputs.forEach(input => fullOtp += input.value);
+            hiddenOtpInput.value = fullOtp;
+        }
+    });
+</script>
+
+</body>
+</html>

resources/views/help_code.blade.php

@@ -0,0 +1,466 @@
+<!-- feedback controller function  -->
+
+ 
+ 
+
+<!-- use Illuminate\Http\Request;
+use App\Models\Feedback;
+use App\Models\user; -->
+
+ 
+ 
+<!-- // public function feedback(Request $request) 
+// {
+   
+//     $request->validate([
+//         'feedback_type' => 'required',
+//         'subject' => 'required|string|max:255',
+//         'feedback_text' => 'required|string',
+//     ]);
+ 
+   
+//     Feedback::create([
+//     'student_id'    => auth()->id(), 
+//     'feedback_type' => $request->feedback_type,
+//     'subject'       => $request->subject,
+//     'feedback_text' => $request->feedback_text,
+//     'status'        => 'Pending', 
+// ]);
+
+//     return redirect()->back()->with('success', 'Feedback submitted successfully!');
+// }
+
+
+//  public function feedback(Request $request) 
+// {
+//     $request->validate([
+//         'feedback_type' => 'required',
+//         'subject'       => 'required|string|max:255',
+//         'feedback_text' => 'required|string',
+//     ]);
+
+     
+//     $studentLogId = session('student_portal_log_id');
+
+    
+//     if (!$studentLogId) {
+//         return redirect('/students')->with('error', 'Please login first to submit feedback!');
+//     }
+
+//     Feedback::create([
+//         'student_id'    => $studentLogId,  
+//         'feedback_type' => $request->feedback_type,
+//         'subject'       => $request->subject,
+//         'feedback_text' => $request->feedback_text,
+//         'status'        => 'Pending', 
+//     ]);
+
+//     return redirect('/Feedback&Complain')->back()->with('success', 'Feedback submitted successfully!');}
+// -->
+
+
+########### ########### ########### ########### ########### ########### ########### ########### 
+
+
+<!-- js table data view -->
+
+
+<!-- JavaScript to handle Submissions -->
+<!-- <script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const tableBody = document.getElementById('historyTableBody');
+
+    
+    function getFormattedDate() {
+        const options = { day: '2-digit', month: 'long', year: 'numeric' };
+        return new Date().toLocaleDateString('en-GB', options);
+    }
+
+   
+    document.getElementById('feedbackForm').addEventListener('submit', function(e) {
+        e.preventDefault();
+
+        const subject = document.getElementById('feedbackSubject').value;
+        const date = getFormattedDate();
+
+         
+        const newRow = document.createElement('tr');
+        newRow.innerHTML = `
+            <td>Feedback</td>
+            <td>${subject}</td>
+            <td>${date}</td>
+            <td><span class="badge-status pending"> Pending </span></td>
+        `;
+
+         
+        tableBody.insertBefore(newRow, tableBody.firstChild);
+
+        
+        this.reset();
+        alert('Feedback submitted successfully!');
+    });
+
+    // 2. Complaint Form Submission
+    document.getElementById('complaintForm').addEventListener('submit', function(e) {
+        e.preventDefault();
+
+        const title = document.getElementById('complaintTitle').value;
+        const date = getFormattedDate();
+
+        const newRow = document.createElement('tr');
+        newRow.innerHTML = `
+            <td>Complaint</td>
+            <td>${title}</td>
+            <td>${date}</td>
+            <td><span class="badge-status pending"> Pending </span></td>
+        `;
+
+        tableBody.insertBefore(newRow, tableBody.firstChild);
+
+        this.reset();
+        alert('Complaint submitted successfully!');
+    });
+});
+</script>  -->
+
+
+
+########### ########### ########### ########### ########### ########### ########### ########### 
+
+<!-- student view profile blade -->
+
+
+
+<!-- @extends('layouts.studentportalnav')
+
+@section('title', 'Student Profile')
+
+@section('content')
+
+<style>
+
+body{
+    background:#f6f7fb;
+}
+
+
+/* Header */
+
+.profile-header{
+
+    background:linear-gradient(135deg,#5E244E,#4a1c3e);
+    color:#fff;
+    border-radius:20px;
+    padding:40px;
+    margin-bottom:35px;
+    box-shadow:0 15px 35px rgba(0,0,0,.15);
+
+}
+
+
+.profile-header h2{
+
+    font-weight:700;
+
+}
+
+
+.profile-header p{
+
+    color:#ddd;
+
+}
+
+
+
+/* Profile Card */ 
+
+.profile-card{
+
+    background:#fff;
+    border-radius:20px;
+    padding:30px;
+    box-shadow:0 10px 30px rgba(0,0,0,.08);
+    height:100%;
+
+}
+
+
+
+/* Student Image */
+
+.profile-image{
+
+    width:150px;
+    height:150px;
+    border-radius:50%;
+    object-fit:cover;
+    border:6px solid #d4af37;
+
+}
+
+
+.student-name{
+
+    color:#5E244E;
+    font-weight:700;
+    margin-top:15px;
+
+}
+
+
+.student-id{
+
+    background:#5E244E;
+    color:#fff;
+    padding:8px 20px;
+    border-radius:50px;
+    display:inline-block;
+    font-size:14px;
+
+}
+
+
+
+/* Information */
+
+.info-title{
+
+    color:#5E244E;
+    font-weight:700;
+    border-bottom:2px solid #d4af37;
+    padding-bottom:10px;
+    margin-bottom:20px;
+
+}
+
+
+.info-row{
+
+    display:flex;
+    justify-content:space-between;
+    padding:12px 0;
+    border-bottom:1px solid #eee;
+
+}
+
+
+.label{
+
+    color:#777;
+
+}
+
+
+.value{
+
+    font-weight:600;
+    color:#333;
+
+}
+
+
+
+/* Course */
+
+.course-box{
+
+    background:#5E244E;
+    color:#fff;
+    padding:25px;
+    border-radius:20px;
+
+}
+
+
+.course-box h4{
+
+    color:#d4af37;
+    font-weight:700;
+
+}
+
+
+.course-item{
+
+    margin-top:12px;
+
+}
+
+
+.course-item i{
+
+    color:#d4af37;
+    width:25px;
+
+}
+
+
+
+/* Button */
+
+.edit-btn{
+
+    background:#d4af37;
+    color:white;
+    border:none;
+    border-radius:50px;
+    padding:12px 30px;
+    font-weight:600;
+
+}
+
+
+.edit-btn:hover{
+
+    background:#c49d20;
+    color:#fff;
+
+}
+
+
+</style>
+
+
+
+<div class="container py-4">
+
+
+  Header -->
+
+    <!-- <div class="profile-header">
+    <h2> <i class="fas fa-user-graduate"></i>Student Profile </h2>
+        <p>Manage your personal information and academic details. </p>
+    </div>
+
+
+<div class="col-lg-4">
+    <div class="profile-card text-center">
+       
+        <img src="{{ !empty($student->image) ? asset($student->image) : 'https://i.pravatar.cc/300' }}" 
+             class="profile-image" alt="Profile Image">
+             
+        <h3 class="student-name">{{ $student->full_name }}</h3>
+
+        <span class="student-id">
+            Student ID : {{ $student->student_id }}
+        </span>
+        <hr>
+
+        <button class="edit-btn mt-3">
+            <i class="fas fa-edit"></i> Edit Profile 
+        </button>
+    </div>
+</div>
+
+ Details -->
+<!-- <div class="col-lg-8">
+    <div class="profile-card">
+        <h4 class="info-title">
+            <i class="fas fa-user"></i>
+            Personal Information
+        </h4>
+
+        <div class="info-row">
+            <span class="label">Full Name</span>
+            <span class="value">{{ $student->full_name }}</span>
+        </div>
+
+        <div class="info-row">
+            <span class="label">NIC / Passport</span>
+            <span class="value">{{ $student->nic_passport }}</span>
+        </div>
+
+        <div class="info-row">
+            <span class="label">Date of Birth</span>
+            <span class="value">
+                {{ date('d F Y', strtotime($student->date_of_birth)) }}
+            </span>
+        </div>
+
+        <div class="info-row">
+            <span class="label">Gender</span>
+            <span class="value">{{ $student->gender }}</span>
+        </div>
+
+        <div class="info-row">
+            <span class="label">Email</span>
+            <span class="value">{{ $student->email }}</span>
+        </div>
+
+        <div class="info-row">
+            <span class="label">Phone</span>
+            <span class="value">{{ $student->phone }}</span>
+        </div>
+    </div>
+</div>
+
+<div class="row g-4 mt-1"> -->
+    <!-- Education -->
+    <!-- <div class="col-lg-6">
+        <div class="profile-card">
+            <h4 class="info-title">
+                <i class="fas fa-graduation-cap"></i>
+                Educational Background
+            </h4>
+            <div class="info-row">
+                <span class="label">Qualification</span>
+                <span class="value">{{ $student->qualification }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">Institute</span>
+                <span class="value">{{ $student->institute }}</span>
+            </div>
+            <div class="info-row">
+                <span class="label">Year Completed</span>
+                <span class="value">{{ $student->year_completed }}</span>
+            </div>
+        </div>
+    </div> -->
+
+    <!-- Course Details -->
+    <!-- <div class="col-lg-6">
+        <div class="course-box">
+            <h4><i class="fas fa-car"></i>Course Details</h4>
+
+            <div class="course-item">
+                <i class="fas fa-book"></i> {{ $student->course_name }}
+            </div>
+            <div class="course-item"> 
+                <i class="fas fa-calendar"></i> Duration : {{ $student->duration }}
+            </div>
+            <div class="course-item">
+                <i class="fas fa-layer-group"></i> Current Semester : {{ $student->current_semester }}
+            </div>
+            <div class="course-item">
+                <i class="fas fa-user-tie"></i> Trainer : {{ $student->trainer_name }}
+            </div>
+        </div>
+    </div>
+</div>
+
+
+ 
+@endsection     -->
+
+########### ########### ########### ########### ########### ########### ########### ########### 
+
+<!-- // Home Page
+Route::get('/', function () {
+    return view('welcome');
+});
+
+ 
+// Route::get('/StudentProfile', [studentsController::class, 'showProfile'])->name('StudentProfile');
+
+Route::post('/studentlogout', [studentportalnavController::class, 'logout']);
+
+// Route::post('/feedback', [FeedbackController ::class, 'feedback'])->name('feedback.store'); -->
+<!-- 
+Route::post('/feedback/store', [FeedbackController::class, 'feedback']) ->middleware('auth') ->name('feedback.store');
+
+ 
+Route::post('/contact-submit', [ContactMsgController::class, 'store'])->name('contact.store'); -->
+
+
+

resources/views/layouts/app.blade.php

@@ -12,13 +12,13 @@
     <style>
         body {
             font-family: 'Segoe UI', sans-serif;
-            background: #f5f7fb;
-           
+            background: #F6F6F6;
             padding-top: 56px; 
         }
 
         .navbar {
-            background: #5E244E;
+            background:#2D355B;
+            /* background:  #3E51B8; */
             z-index: 1000;
             position: fixed;
             top: 0;
@@ -35,37 +35,39 @@
         }
 
         .navbar-brand:hover {
-            color: #ffc107;
+            color: #f4f4f8;
         }
 
         .nav-link {
-            color: rgba(255, 255, 255, 0.85) !important;
+            color: rgba(255, 255, 255, 0.9) !important;
             margin-left: 20px;
             transition: 0.2s ease;
-            font-weight:bold;
-
+            font-weight: bold;
+            font-size: 18px;
         }
  
         .nav-link:hover,
         .nav-link.active-page {
-            color: #ffc107 !important;
-            font-weight:bold;
+            color: #FFEA85 !important;
+           /* color: #FF4040FC !important; */
+            font-weight: bold;
         }
 
         .site-footer {
-            background: #2F1027;
-            color: #f1e9ee;
+            background:#1F2541;
+            /* background: #182EA4; */
+            color: #ffffff;
             padding: 60px 0 30px;
         }
 
         .site-footer h4 {
-            color: #fff;
+            color: #FFEA85;
             font-weight: 700;
             margin-bottom: 18px;
         }
 
         .site-footer p {
-            color: #d8c7d3;
+            color: #f1f3f9;
             line-height: 1.6;
         }
 
@@ -80,7 +82,7 @@
         }
         
         .user-dropdown-toggle:hover {
-            color: #ffc107;
+            color: #FFEA85;
         }
 
         .user-profile-name {
@@ -97,48 +99,61 @@
         }
 
         .footer-links a {
-            color: #d8c7d3;
+            color: #f1f3f9;
             text-decoration: none;
             transition: .2s;
         }
 
         .footer-links a:hover {
-            color: #FFC107;
+            color: #FFEA85;
             padding-left: 4px;
         }
 
         .footer-contact li {
             margin-bottom: 14px;
-            color: #d8c7d3;
+            color: #f1f3f9;
             display: flex;
             align-items: flex-start;
             gap: 10px;
         }
 
         .footer-contact i {
-            color: #FFC107;
+            color: #FFEA85;
             margin-top: 3px;
         }
 
         .footer-contact a {
-            color: #d8c7d3;
+            color: #f1f3f9;
             text-decoration: none;
         }
 
         .footer-contact a:hover {
-            color: #FFC107;
+            color: #FFEA85;
         }
 
         .site-footer hr {
-            border-color: rgba(255,255,255,.15);
+            border-color: rgba(255,255,255,.2);
             margin: 40px 0 20px;
         }
 
         .footer-bottom {
-            color: #b8a6b3;
+            color: #e2e5f3;
             font-size: 14px;
         }
 
+        /* Custom Theme Overrides for Buttons */
+        .btn-theme-register {
+            background-color: #F73F52;
+            color: white;
+            border: none;
+            transition: background-color 0.2s;
+        }
+
+        .btn-theme-register:hover {
+            background-color: #df2c3e;
+            color: white;
+        }
+
         .animate {
             animation-duration: 0.2s;
             animation-fill-mode: both;
@@ -163,7 +178,7 @@
             .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
                 max-width: 1435px;
             }
-}
+        }
     </style>
 </head>
 <body>
@@ -222,7 +237,7 @@
                             <ul class="dropdown-menu dropdown-menu-md-end shadow animate slideIn" aria-labelledby="userMenu">
                                 <li>
                                     <a class="dropdown-item" href="{{ route('profile.view') }}">
-                                        <i class="fa-solid fa-user "></i> Profile
+                                        <i class="fa-solid fa-user"></i> Profile
                                     </a>
                                 </li>
                                 <li><hr class="dropdown-divider"></li>
@@ -236,7 +251,8 @@
                     @else
                         <div class="d-flex gap-2" style="padding-left:214px;">
                             <a href="/signin" class="btn btn-outline-light btn-sm px-3">Sign In</a>
-                            <a href="/signup" class="btn btn-warning btn-sm px-3">Register</a>
+                            <!-- Swapped btn-warning for our new custom primary brand color button -->
+                            <a href="/signup" class="btn btn-theme-register btn-sm px-3" style="background: #822424;border: 2px solid #FFF;">Register</a>
                         </div>
                     @endif
                 </li>
@@ -245,13 +261,11 @@
     </div>
 </nav>
 
-
-
 <main>
     @yield('content')
 </main>
 
-<footer class="site-footer" role="contentinfo" >
+<footer class="site-footer" role="contentinfo">
     <div class="container">
         <div class="row g-4">
             <div class="col-md-4">

resources/views/layouts/studentportalnav.blade.php

@@ -4,32 +4,35 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="csrf-token" content="{{ csrf_token() }}">
-    <title>Responsive Student Portal</title>
+    <title>@yield('title', 'Student Portal - Automobile Academic')</title>
      
-    <!-- Font Awesome Icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Font Awesome Icons & Bootstrap 5 -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     
     <style>
-        /* Global Root Variables */
+        /* Global Root Variables based on Master Layout */
         :root {
-            --primary: #000000;  
-            --background: #f5f6fb;
+            --theme-navy: #2D355B;        /* Primary Dark Navy */
+            --theme-footer-navy: #1F2541; /* Dark Navy for active/hover states */
+            --theme-red: #822424;         /* Primary Accent Red */
+            --theme-red-hover: #df2c3e;   /* Red Hover state */
+            --theme-yellow: #FFEA85;      /* Accent Yellow/Gold */
+            --theme-bg: #F6F6F6;          /* Light Background */
             --sidebar-width: 260px;
-            --text-color: #333333;
-            --sidebar-bg: #5E244E;
+            --text-dark: #333333;
         }
 
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            font-family: 'Segoe UI', sans-serif;
         }
 
         body {
-            background-color: var(--background);
-            color: var(--text-color);
+            background-color: var(--theme-bg);
+            color: var(--text-dark);
             display: flex;
             min-height: 100vh;
             overflow-x: hidden;
@@ -39,7 +42,7 @@
         .sidebar {
             width: var(--sidebar-width);
             height: 100vh;
-            background: var(--sidebar-bg);
+            background: var(--theme-navy);
             color: #fff;
             position: fixed;
             top: 0;
@@ -49,34 +52,20 @@
             z-index: 1030;
             display: flex;
             flex-direction: column;
+            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
         }
 
         .sidebar .brand {
-            padding: 0 24px 24px;
+            padding: 0 24px 20px;
             font-weight: 700;
-            font-size: 1.2rem;
-            border-bottom: 1px solid rgba(255,255,255,.12);
+            font-size: 1.25rem;
+            color: #ffffff;
+            border-bottom: 1px solid rgba(255,255,255,.15);
             margin-bottom: 12px;
             display: flex;
             align-items: center;
         }
 
-        /* User Profile Section inside Sidebar */
-        .sidebar-user-profile {
-            padding: 15px 24px;
-            border-bottom: 1px solid rgba(255,255,255,.12);
-            margin-bottom: 15px;
-        }
-        
-        .sidebar-user-profile .dropdown-toggle {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            color: #fff;
-            text-decoration: none;
-            font-size: 0.95rem;
-        }
-
         .sidebar .nav {
             display: flex;
             flex-direction: column;
@@ -85,14 +74,15 @@
         }
 
         .sidebar .nav-link {
-            color: rgba(255,255,255,.75);
+            color: rgba(255, 255, 255, 0.85);
             padding: 14px 24px;
-            font-size: .95rem;
+            font-size: 0.95rem;
+            font-weight: 600;
             display: flex;
             align-items: center;
             gap: 12px;
-            transition: .2s;
-            border-left: 3px solid transparent;
+            transition: all 0.2s ease;
+            border-left: 4px solid transparent;
             text-decoration: none;
         }
 
@@ -101,26 +91,53 @@
             text-align: center; 
         }
 
+        /* Hover & Active states matched to Main Theme */
         .sidebar .nav-link:hover {
-            background: rgba(255,255,255,.06);
-            color: #fff;
+            background: rgba(255, 255, 255, 0.08);
+            color: var(--theme-yellow) !important;
+            padding-left: 28px;
         }
 
         .sidebar .nav-link.active {
-            background: rgba(255,255,255,.1);
-            color: #fff;
-            border-left: 3px solid #fff;
-            font-weight: 600;
+            background: var(--theme-footer-navy);
+            color: var(--theme-yellow) !important;
+            border-left: 4px solid #F73F52;
+            font-weight: 700;
         }
 
-        .sidebar .logout-link {
-            color: rgba(255,255,255,.6);
+        /* User Profile Section inside Sidebar */
+        .sidebar-user-profile {
+            padding: 15px 24px;
+            border-top: 1px solid rgba(255,255,255,.15);
             margin-top: auto;
+            background: var(--theme-footer-navy);
         }
         
-        .sidebar .logout-link:hover {
+        .sidebar-user-profile .user-dropdown-toggle {
+            display: flex;
+            align-items: center;
+            gap: 10px;
             color: #fff;
-            background: rgba(220,53,69,.25);
+            text-decoration: none;
+            font-size: 0.95rem;
+            transition: color 0.2s ease;
+        }
+
+        .sidebar-user-profile .user-dropdown-toggle:hover {
+            color: var(--theme-yellow);
+        }
+
+        /* Custom Theme Buttons */
+        .btn-theme-register {
+            background-color: var(--theme-red);
+            color: white;
+            border: 1px solid #ffffff;
+            transition: background-color 0.2s ease;
+        }
+
+        .btn-theme-register:hover {
+            background-color: var(--theme-red-hover);
+            color: white;
         }
 
         /* ---------- Main Content Layout ---------- */
@@ -129,16 +146,17 @@
             width: calc(100% - var(--sidebar-width));
             min-height: 100vh;
             padding: 40px;
-            background: var(--background);
+            background: var(--theme-bg);
             transition: all 0.3s ease;
         }
 
         /* Mobile Header Toggle Bar */
         .mobile-header {
             display: none;
-            background: #fff;
-            padding: 15px 20px;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+            background: var(--theme-navy);
+            color: #ffffff;
+            padding: 12px 20px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
             align-items: center;
             justify-content: space-between;
             position: fixed;
@@ -151,18 +169,22 @@
         .sidebar-toggle {
             background: none;
             border: none;
-            font-size: 1.5rem;
+            font-size: 1.4rem;
             cursor: pointer;
-            color: var(--sidebar-bg);
+            color: #ffffff;
             display: flex;
             align-items: center;
             justify-content: center;
         }
 
+        .sidebar-toggle:hover {
+            color: var(--theme-yellow);
+        }
+
         .mobile-brand {
             font-weight: 700;
             font-size: 1.1rem;
-            color: #333;
+            color: #ffffff;
         }
 
         /* Overlay Background when sidebar open on Mobile */
@@ -173,7 +195,7 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background: rgba(0,0,0,0.4);
+            background: rgba(0,0,0,0.5);
             z-index: 1025;
             opacity: 0;
             transition: opacity 0.3s ease;
@@ -184,7 +206,7 @@
             opacity: 1;
         }
 
-        /* ---------- Responsive Media Queries (Mobile & Tablets) ---------- */
+        /* Responsive Breakpoints */
         @media (max-width: 991px) {
             .sidebar {
                 left: calc(-1 * var(--sidebar-width)); 
@@ -196,7 +218,7 @@
 
             .main {
                 margin-left: 0;  
-                padding: 90px 20px 20px 20px;  
+                padding: 85px 20px 20px 20px;  
                 width: 100%;
             }
 
@@ -213,22 +235,24 @@
         <button class="sidebar-toggle" id="toggleBtn" aria-label="Toggle Sidebar">
             <i class="fa-solid fa-bars"></i>
         </button>
-        <div class="mobile-brand">Student Portal</div>
+        <div class="mobile-brand">
+            <i class="fa-solid fa-car-side me-1"></i> AutoEdu Portal
+        </div>
         
-        <!-- Mobile View User Profile Header Dropdown -->
+        <!-- Mobile View User Profile Dropdown -->
         <div class="mobile-user-profile">
             @if(Auth::check())
                 <div class="dropdown">
-                    <a class="text-dark  no-toggle-icon" href="#" role="button" id="userMenuMobile" data-bs-toggle="dropdown" aria-expanded="false">
-                        <i class="fa-solid fa-circle-user" style="font-size: 35px; color: var(--sidebar-bg);"></i>
-                         <strong>{{ Auth::user()->first_name }}</strong>
+                    <a class="text-white text-decoration-none dropdown-toggle d-flex align-items-center gap-2" href="#" role="button" id="userMenuMobile" data-bs-toggle="dropdown" aria-expanded="false">
+                        <i class="fa-solid fa-circle-user" style="font-size: 26px; color: var(--theme-yellow);"></i>
+                        <span class="fw-semibold small">{{ Auth::user()->first_name }}</span>
                     </a>
                     <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="userMenuMobile">
-                        <li class="px-3 py-2 ">
-                            <!-- <small class="text-muted">Signed in as</small><br> -->
-                            <!-- <strong>{{ Auth::user()->first_name }}</strong> -->
+                        <li>
+                            <a class="dropdown-item" href="/StudentProfile">
+                                <i class="fa-solid fa-user me-2"></i> Profile
+                            </a>
                         </li>
-                        <li><a class="dropdown-item mt-1" href="/StudentProfile"><i class="fa-solid fa-user me-2"></i> Profile</a></li>
                         <li><hr class="dropdown-divider"></li>
                         <li>
                             <button type="button" onclick="submitLogout()" class="dropdown-item text-danger w-100 text-start border-0 bg-transparent">
@@ -238,7 +262,7 @@
                     </ul>
                 </div>
             @else
-                <a href="/signin" class="btn btn-sm btn-outline-dark"><i class="fa-solid fa-right-to-bracket"></i></a>
+                <a href="/signin" class="btn btn-sm btn-outline-light"><i class="fa-solid fa-right-to-bracket me-1"></i> Sign In</a>
             @endif
         </div>
     </header>
@@ -249,51 +273,47 @@
     <!-- Sidebar Navigation -->
     <aside class="sidebar" id="sidebar">
         <div class="brand">
-            <i class="fa-solid fa-graduation-cap"></i>&nbsp;&nbsp;Student Portal
+            <i class="fa-solid fa-car-side me-2"></i> AutoEdu
         </div>
         
-        <!-- Sidebar Active User Profile Details (Desktop View) -->
-       
-        
+        <!-- Navigation Links -->
         <nav class="nav">
-            <a href="/Dashboard" class="nav-link ">
-                <i class="fa-solid fa-gauge"></i>Dashboard
+            <a href="/Dashboard" class="nav-link {{ request()->is('Dashboard*') ? 'active' : '' }}">
+                <i class="fa-solid fa-gauge"></i> Dashboard
             </a>
-            <a href="/mycourse" class="nav-link">
-                <i class="fa-solid fa-book"></i>My Courses
+            <a href="/mycourse" class="nav-link {{ request()->is('mycourse*') ? 'active' : '' }}">
+                <i class="fa-solid fa-book"></i> My Courses
             </a>
-            <a href="/timetable" class="nav-link">
-                <i class="fa-solid fa-calendar-days"></i>Class Timetable
+            <a href="/timetable" class="nav-link {{ request()->is('timetable*') ? 'active' : '' }}">
+                <i class="fa-solid fa-calendar-days"></i> Class Timetable
             </a>
-            <!-- <a href="/Assignments" class="nav-link">
-                <i class="fa-solid fa-file-lines"></i>Assignments
+            <a href="/results" class="nav-link {{ request()->is('results*') ? 'active' : '' }}">
+                <i class="fa-solid fa-square-poll-vertical"></i> Exam Results
+            </a>
+            <a href="/Studentguidelines" class="nav-link {{ request()->is('Studentguidelines*') ? 'active' : '' }}">
+                <i class="fa-solid fa-book-open"></i> Student Guidelines
+            </a>
+            <a href="/Feedback&Complain" class="nav-link {{ request()->is('Feedback&Complain*') ? 'active' : '' }}">
+                <i class="fa-solid fa-comments"></i> Feedback & Complain
+            </a>
+            <!-- <a href="/StudentProfile" class="nav-link {{ request()->is('StudentProfile*') ? 'active' : '' }}">
+                <i class="fa-solid fa-user"></i> Student Profile   
             </a> -->
-            <a href="/results" class="nav-link">
-                <i class="fa-solid fa-square-poll-vertical"></i>Exam Results
+            <a href="{{ route('StudentProfile') }}" class="nav-link {{ request()->routeIs('StudentProfile') ? 'active' : '' }}">
+                <i class="fa-solid fa-user"></i> Student Profile   
             </a>
-             
-            <a href="/Studentguidelines" class="nav-link">
-                <i class="fa-solid fa-book-open"></i>Student Guidelines
-            </a>
-            <a href="/Feedback&Complain" class="nav-link">
-                <i class="fa-solid fa-comments"></i>Feedback & Complain
-            </a>
-            <a href="/StudentProfile" class="nav-link">
-                <i class="fa-solid fa-user"></i>Student Profile
-            </a>
-            
-            
         </nav>
 
+        <!-- Sidebar User Profile (Desktop View Footer) -->
         <div class="sidebar-user-profile">
             @if(Auth::check())
                 @php
                     $displayName = Auth::user()->first_name . ' ' . Auth::user()->last_name;
                 @endphp
-                <div class="dropdown">
-                    <a class="dropdown-toggle" href="#" role="button" id="userMenuDesktop" data-bs-toggle="dropdown" aria-expanded="false">
-                        <i class="fa-solid fa-circle-user" style="font-size: 24px;"></i>
-                        <span class="user-profile-name text-truncate" style="max-width: 160px;">{{ $displayName }}</span>
+                <div class="dropdown dropup">
+                    <a class="user-dropdown-toggle dropdown-toggle" href="#" role="button" id="userMenuDesktop" data-bs-toggle="dropdown" aria-expanded="false">
+                        <i class="fa-solid fa-circle-user" style="font-size: 24px; color: var(--theme-yellow);"></i>
+                        <span class="text-truncate" style="max-width: 150px;">{{ $displayName }}</span>
                     </a>
                     
                     <ul class="dropdown-menu dropdown-menu-start shadow w-100" aria-labelledby="userMenuDesktop">
@@ -304,20 +324,19 @@
                         </li>
                         <li><hr class="dropdown-divider"></li>
                         <li>
-                            <a href="#" onclick="submitLogout(); return false;" class="nav-link logout-link mt-auto" style="color:black;">
-                                <i class="fa-solid fa-right-from-bracket"></i>Logout
-                            </a>
+                            <button type="button" onclick="submitLogout()" class="dropdown-item text-danger border-0 bg-transparent w-100 text-start">
+                                <i class="fa-solid fa-right-from-bracket me-2"></i> Logout
+                            </button>
                         </li>
                     </ul>
                 </div>
             @else
-                <div class="d-flex gap-2 px-2">
+                <div class="d-flex gap-2">
                     <a href="/signin" class="btn btn-outline-light btn-sm w-50">Sign In</a>
-                    <a href="/signup" class="btn btn-warning btn-sm w-50">Register</a>
+                    <a href="/signup" class="btn btn-theme-register btn-sm w-50">Register</a>
                 </div>
             @endif
         </div>
-        
     </aside>
 
     <!-- Main Content Area -->
@@ -325,27 +344,56 @@
         @yield('content')
     </main>
     
-    <!-- Sidebar Toggle JavaScript -->
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+
+
     <script>
+
+function submitLogout() {
+    const tokenEl = document.querySelector('meta[name="csrf-token"]');
+
+    fetch('/studentlogout', { 
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json',
+            'X-CSRF-TOKEN': tokenEl ? tokenEl.getAttribute('content') : ''
+        }
+    })
+    .then(res => res.json())
+    .then(data => {
+        if (data.success) {
+   
+            window.location.href = '/signin'; 
+        } else {
+            alert('Logout failed. Please try again.');
+        }
+    })
+    .catch(err => {
+        console.error('Error:', err);
+        alert('Server side error occurred during logout.');
+    });
+}
+    </script>
+
+    <!-- <script>
+        // Sidebar Toggle Logic
         const toggleBtn = document.getElementById('toggleBtn');
         const sidebar = document.getElementById('sidebar');
         const overlay = document.getElementById('sidebarOverlay');
 
-        // Function to toggle sidebar view
         toggleBtn.addEventListener('click', () => {
             sidebar.classList.toggle('show');
             overlay.classList.toggle('show');
         });
 
-        // Close sidebar if user clicks outside of it
         overlay.addEventListener('click', () => {
             sidebar.classList.remove('show');
             overlay.classList.remove('show');
         });
-    </script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 
-    <script>
+        // Dynamic Logout Logic
         function submitLogout() {
             const tokenEl = document.querySelector('meta[name="csrf-token"]');
 
@@ -375,8 +423,7 @@
                 console.error('Error:', err);
                 alert('Server side error occurred during logout.');
             });
-}
-
-</script>
+        }
+    </script> -->
 </body>
 </html>

resources/views/mail/otp.blade.php

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Password Reset OTP - Academy</title>
+    <style>
+        body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+        table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
+        img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
+        body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; background-color: #f4f7f6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
+    </style>
+</head>
+<body style="margin: 0; padding: 0; background-color: #f4f7f6;">
+
+    <table border="0" cellpadding="0" cellspacing="0" width="100%">
+        <tr>
+            <td align="center" style="padding: 40px 10px;">
+                <!-- Main Container -->
+                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 550px; background-color: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05);">
+                    
+                    <!-- Header / Logo Area -->
+                    <tr>
+                        <td align="center" style="padding: 30px 20px; background-color: #1a2b4c;">
+                            <!-- Academy Logo / Branding -->
+                            <h2 style="color: #ffffff; margin: 0; font-size: 24px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;">
+                                ACADEMY
+                            </h2>
+                        </td>
+                    </tr>
+
+                    <!-- Body Content -->
+                    <tr>
+                        <td style="padding: 40px 30px; text-align: center;">
+                            <h1 style="color: #20396b; font-size: 22px; font-weight: 700; margin-top: 0; margin-bottom: 12px;">
+                                Reset Your Password
+                            </h1>
+                            
+                            <p style="color: #683636; font-size: 15px; line-height: 22px; margin-bottom: 25px;">
+                                Hello,<br>
+                                We received a request to reset the password for your Academy account. Use the Verification Code (OTP) below to proceed.
+                            </p>
+
+                            <!-- OTP Box -->
+                            <div style="background-color: #f0f4f9; border: 2px dashed #0236b9; border-radius: 8px; padding: 18px; margin: 20px 0; display: inline-block; width: 80%;">
+                                <span style="font-size: 32px; font-weight: 800; color: #0236b9; letter-spacing: 6px; font-family: 'Courier New', Courier, monospace;">
+                                    {{ $otp }}
+                                </span>
+                            </div>
+
+                            <p style="color: #888888; font-size: 13px; line-height: 18px; margin-top: 25px;">
+                                This OTP is valid for <strong>10 minutes</strong>. If you did not request a password reset, please ignore this email.
+                            </p>
+                        </td>
+                    </tr>
+
+                    <!-- Divider -->
+                    <tr>
+                        <td style="padding: 0 30px;">
+                            <hr style="border: none; border-top: 1px solid #eeeeee; margin: 0;">
+                        </td>
+                    </tr>
+
+                    <!-- Footer -->
+                    <tr>
+                        <td style="padding: 25px 30px; text-align: center; background-color: #fafafa;">
+                            <p style="color: #999999; font-size: 12px; margin: 0 0 8px 0;">
+                                Regards,<br>
+                                <strong>Academy Learning Team</strong>
+                            </p>
+                            <p style="color: #cccccc; font-size: 11px; margin: 0;">
+                                &copy; {{ date('Y') }} Academy. All rights reserved.
+                            </p>
+                        </td>
+                    </tr>
+
+                </table>
+            </td>
+        </tr>
+    </table>
+
+</body>
+</html>

resources/views/mycourse.blade.php

@@ -4,46 +4,39 @@
 
 @section('content')
 
-
-
- 
-
-<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
-
 <style>
 :root {
-    --purple-main: #5E244E;
-    --purple-dark: #4a1c3e;
-    --purple-light: #744a68;
-    --gold-accent: #D4AF37;
-    --gold-hover: #b8972e;
-    --bg-light: #f8fafc;
+    --theme-navy: #2D355B;        /* Primary Navy */
+    --theme-navy-dark: #1F2541;   /* Dark Navy */
+    --theme-red: #822424;         /* Primary Accent Red */
+    --theme-red-hover: #df2c3e;   /* Red Hover */
+    --theme-yellow: #FFEA85;      /* Accent Yellow/Gold */
+    --bg-light: #F6F6F6;          /* Page Background */
     --white: #ffffff;
 }
 
 body {
     background: var(--bg-light);
-    font-family: 'Poppins', sans-serif;
+    font-family: 'Segoe UI', sans-serif;
 }
 
 .main-portal-content {
-    padding: 20px 15px;
+    padding: 10px 5px;
     min-height: 100vh;
     transition: all 0.3s ease;
 }
 
 /* Premium Hero Section */
 .hero {
-    background: linear-gradient(135deg, var(--purple-main) 0%, var(--purple-dark) 100%) !important;
+    background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
     color: var(--white) !important;
-    border-radius: 20px; 
-    padding: 30px 20px;
+    border-radius: 16px; 
+    padding: 35px 30px;
     margin-bottom: 30px;
-    box-shadow: 0 10px 30px rgba(74, 28, 62, 0.15);
+    box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
     position: relative;
     overflow: hidden;
+    border-left: 5px solid var(--theme-red);
 }
 
 .hero::after {
@@ -60,33 +53,34 @@ body {
 
 /* Course Card */
 .course-card {
-    border: none !important;
-    border-radius: 20px !important; 
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 16px !important; 
     overflow: hidden;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; 
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; 
     background: var(--white);
     margin-bottom: 30px;
 }
 
 .course-card img {
-    height: 200px;
+    height: 240px;
     object-fit: cover;
     width: 100%;
 }
 
 /* Sidebar Info Boxes */
 .info-box {
-    border-radius: 16px !important; 
+    border-radius: 12px !important; 
     padding: 20px 24px;
     background: var(--white);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important; 
-    border: 1px solid rgba(94, 36, 78, 0.05) !important;
+    box-shadow: 0 4px 12px rgba(219, 240, 99, 0.04) !important; 
+    border: 1px solid #e2e8f0 !important;
     transition: all 0.3s ease;
 }
 
 .info-box:hover {
     transform: translateY(-3px);
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
+    border-color: var(--theme-navy) !important;
 }
 
 .stat-icon {
@@ -95,97 +89,118 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 12px;
+    border-radius: 10px;
     font-size: 18px;
-    background: rgba(94, 36, 78, 0.08);
-    color: var(--purple-main);
+    background: var(--theme-red) !important;
+    color:  #ffff8d;
 }
 
 /* Modules Card */
 .module-card {
-    border: 1px solid rgba(94, 36, 78, 0.06) !important;
-    border-radius: 16px !important; 
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 14px !important; 
+    transition: all 0.3s ease;
     background: var(--white);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
 }
 
 .module-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08) !important;
-    border-color: var(--purple-light) !important;
+    transform: translateY(-4px);
+    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08) !important;
+    border-color: var(--theme-red) !important;
 }
 
 /* Progress bar customizations */
 .progress {
     height: 10px !important;
     border-radius: 50px !important;
-    background-color: #f1f5f9 !important;
+    background-color: #e2e8f0 !important;
 }
 
 .progress-bar {
     border-radius: 50px !important;
-    background: linear-gradient(90deg, var(--gold-accent), #f4d05e) !important;
+    background: linear-gradient(90deg, var(--theme-red), var(--theme-red-hover)) !important;
 }
 
 /* Status Badges */
 .status {
     font-size: 11px;
-    font-weight: 600;
-    padding: 5px 14px;
+    font-weight: 700;
+    padding: 6px 14px;
     border-radius: 50px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
-.completed { background: rgba(94, 36, 78, 0.1); color: var(--purple-main); }
-.progressing { background: rgba(212, 175, 55, 0.15); color: #9c7e1c; }
-.locked { background: #f1f5f9; color: #64748b; }
+.completed { background: rgba(45, 53, 91, 0.12); color: var(--theme-navy); }
+.progressing { background: rgba(247, 63, 82, 0.15); color: var(--theme-red); }
+.locked { background: #e2e8f0; color: #64748b; }
 
 /* Custom Buttons */
-.btn-gold {
-    background-color: var(--gold-accent) !important; 
-    border-color: var(--gold-accent) !important;
+.btn-theme-red {
+    background-color: var(--theme-red) !important; 
+    border-color: var(--theme-red) !important;
     color: #fff !important;
-    border-radius: 10px;
+    border-radius: 8px;
     font-weight: 600;
+    transition: all 0.2s ease;
+}
+.btn-theme-red:hover { 
+    background-color: var(--theme-red-hover) !important; 
+    border-color: var(--theme-red-hover) !important; 
 }
-.btn-gold:hover { background-color: var(--gold-hover) !important; }
 
-.btn-purple {
-    background-color: var(--purple-main) !important;
-    border-color: var(--purple-main) !important;
+.btn-theme-navy {
+    background-color: var(--theme-navy) !important;
+    border-color: var(--theme-navy) !important;
     color: #fff !important;
-    border-radius: 10px;
-    font-weight: 500;
+    border-radius: 8px;
+    font-weight: 600;
+    transition: all 0.2s ease;
+}
+.btn-theme-navy:hover { 
+    background-color: var(--theme-navy-dark) !important; 
 }
-.btn-purple:hover { background-color: var(--purple-dark) !important; }
 
 .btn-continue {
-    background-color: #fff !important;
-    color: var(--purple-main) !important;
-    border-radius: 10px;
+    background-color: var(--theme-red) !important;
+    color: #ffffff !important;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+}
+.btn-continue:hover { 
+    background-color: var(--theme-red-hover) !important; 
+}
+
+/* Section Title Indicator */
+.section-title-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 30px 0 20px;
+}
+
+.section-title-wrapper::before {
+    content: '';
+    display: inline-block;
+    width: 5px;
+    height: 24px;
+    background-color: var(--theme-red);
+    border-radius: 2px;
 }
-.btn-continue:hover { background-color: #f1f5f9 !important; }
 
 /* Responsive Media Queries */
 @media (min-width: 768px) {
     .main-portal-content {
-        padding: 34px;
+        padding: 10px;
     }
     .hero {
-        padding: 45px;
+        padding: 40px;
     }
     .course-card img {
         height: 280px;
     }
 }
-
-@media (min-width: 992px) {
-    .main-portal-content {
-        margin-left: 18px;
-    }
-}
 </style>
 
 <div class="main-portal-content">
@@ -202,7 +217,7 @@ body {
                     </a>
                 </div>
                 <div class="col-lg-3 col-md-4 text-center d-none d-md-block">
-                    <i class="fa-solid fa-car-side" style="font-size:100px; opacity:.2; color: var(--gold-accent);"></i>
+                    <i class="fa-solid fa-car-side" style="font-size: 157px;opacity: 0.35;color: #8C080F;"></i>
                 </div>
             </div>
         </div>
@@ -219,22 +234,22 @@ body {
                     <div class="card-body p-4">
                         <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3">
                             <div>
-                                <h3 class="fw-bold text-dark mb-1">AE101</h3>
+                                <h3 class="fw-bold mb-1" style="color: var(--theme-navy);">AE101</h3>
                                 <p class="text-muted small mb-0">
-                                    <i class="fa-solid fa-building me-1" style="color: var(--purple-light);"></i> Automotive Engineering Department
+                                    <i class="fa-solid fa-building me-1" style="color: var(--theme-red);"></i> Automotive Engineering Department
                                 </p>
                             </div>
-                            <span class="badge bg-dark px-3 py-2 rounded-pill">Diploma</span>
+                            <span class="badge px-3 py-2 rounded-pill" style="background-color: var(--theme-navy); color: var(--theme-yellow);">Diploma</span>
                         </div>
 
                         <p class="text-secondary small lh-base">
-                            Master engine diagnostics, suspension systems, transmission technology, electrical systems and hybrid vehicle maintenance.
+                            Master engine diagnostics, suspension systems, transmission technology, electrical systems, and hybrid vehicle maintenance through hands-on training and theoretical modules.
                         </p>
 
                         <div class="mt-4">
                             <div class="d-flex justify-content-between mb-2 small">
-                                <span class="text-dark fw-semibold">Overall Progress</span>
-                                <span class="fw-bold" style="color: var(--purple-main);">55%</span>
+                                <span class="fw-semibold" style="color: var(--theme-navy);">Overall Progress</span>
+                                <span class="fw-bold" style="color: var(--theme-red);">55%</span>
                             </div>
                             <div class="progress">
                                 <div class="progress-bar" style="width:55%"></div>
@@ -244,9 +259,9 @@ body {
                 </div>
 
                 <!-- Modules Header -->
-                <div class="my-4">
-                    <h4 class="fw-bold text-dark">
-                        <i class="fa-solid fa-list-check me-2" style="color: var(--gold-accent);"></i> Course Modules
+                <div class="section-title-wrapper">
+                    <h4 class="fw-bold mb-0" style="color: var(--theme-navy);">
+                        Course Modules
                     </h4>
                 </div>
 
@@ -258,13 +273,13 @@ body {
                             <div class="card-body p-4 d-flex flex-column justify-content-between">
                                 <div>
                                     <div class="d-flex justify-content-between align-items-start gap-2 mb-2">
-                                        <h6 class="fw-bold text-dark mb-0">Engine Fundamentals</h6>
+                                        <h6 class="fw-bold mb-0" style="color: var(--theme-navy);">Engine Fundamentals</h6>
                                         <span class="status completed">Completed</span>
                                     </div>
-                                    <p class="text-muted small">Learn engine parts and working principles.</p>
+                                    <p class="text-muted small mb-0">Learn engine parts and working principles.</p>
                                 </div>
-                                <div class="mt-3">
-                                    <button class="btn btn-purple w-100 btn-sm py-2">Review Module</button>
+                                <div class="mt-4">
+                                    <button class="btn btn-theme-navy w-100 btn-sm py-2">Review Module</button>
                                 </div>
                             </div>
                         </div>
@@ -276,13 +291,13 @@ body {
                             <div class="card-body p-4 d-flex flex-column justify-content-between">
                                 <div>
                                     <div class="d-flex justify-content-between align-items-start gap-2 mb-2">
-                                        <h6 class="fw-bold text-dark mb-0">Transmission Systems</h6>
+                                        <h6 class="fw-bold mb-0" style="color: var(--theme-navy);">Transmission Systems</h6>
                                         <span class="status progressing">In Progress</span>
                                     </div>
-                                    <p class="text-muted small">Manual & Automatic transmission systems.</p>
+                                    <p class="text-muted small mb-0">Manual & Automatic transmission systems.</p>
                                 </div>
-                                <div class="mt-3">
-                                    <button class="btn btn-gold w-100 btn-sm py-2">Continue Learning</button>
+                                <div class="mt-4">
+                                    <button class="btn btn-theme-red w-100 btn-sm py-2">Continue Learning</button>
                                 </div>
                             </div>
                         </div>
@@ -297,9 +312,9 @@ body {
                                         <h6 class="fw-bold text-secondary mb-0">Brake Systems</h6>
                                         <span class="status locked"><i class="fa fa-lock me-1"></i> Locked</span>
                                     </div>
-                                    <p class="text-muted small">Complete previous module to unlock.</p>
+                                    <p class="text-muted small mb-0">Complete previous module to unlock.</p>
                                 </div>
-                                <div class="mt-3">
+                                <div class="mt-4">
                                     <button class="btn btn-secondary w-100 btn-sm py-2" disabled>Locked</button>
                                 </div>
                             </div>
@@ -315,9 +330,9 @@ body {
                                         <h6 class="fw-bold text-secondary mb-0">Hybrid Technology</h6>
                                         <span class="status locked"><i class="fa fa-lock me-1"></i> Locked</span>
                                     </div>
-                                    <p class="text-muted small">Learn EV and Hybrid systems.</p>
+                                    <p class="text-muted small mb-0">Learn EV and Hybrid systems.</p>
                                 </div>
-                                <div class="mt-3">
+                                <div class="mt-4">
                                     <button class="btn btn-secondary w-100 btn-sm py-2" disabled>Locked</button>
                                 </div>
                             </div>
@@ -334,7 +349,7 @@ body {
                         <div class="info-box d-flex align-items-center">
                             <div class="stat-icon"><i class="fa fa-book"></i></div>
                             <div class="ms-3">
-                                <h5 class="fw-bold mb-0" style="color: var(--purple-dark);">12</h5>
+                                <h5 class="fw-bold mb-0" style="color: var(--theme-navy);">12</h5>
                                 <span class="text-muted small">Modules Available</span>
                             </div>
                         </div>
@@ -344,7 +359,7 @@ body {
                         <div class="info-box d-flex align-items-center">
                             <div class="stat-icon"><i class="fa fa-clock"></i></div>
                             <div class="ms-3">
-                                <h5 class="fw-bold mb-0" style="color: var(--purple-dark);">2 Years</h5>
+                                <h5 class="fw-bold mb-0" style="color: var(--theme-navy);">2 Years</h5>
                                 <span class="text-muted small">Course Duration</span>
                             </div>
                         </div>
@@ -354,7 +369,7 @@ body {
                         <div class="info-box d-flex align-items-center">
                             <div class="stat-icon"><i class="fa fa-award"></i></div>
                             <div class="ms-3">
-                                <h5 class="fw-bold mb-0" style="color: var(--purple-dark);">NVQ Level 5</h5>
+                                <h5 class="fw-bold mb-0" style="color: var(--theme-navy);">NVQ Level 5</h5>
                                 <span class="text-muted small">Qualification</span>
                             </div>
                         </div>
@@ -367,5 +382,4 @@ body {
     </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 @endsection

resources/views/results.blade.php

@@ -4,523 +4,373 @@
 
 @section('content')
 
-<style>
+<!-- Bootstrap 5 -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 
-body{
-    background:#f6f7fb;
+<!-- Font Awesome -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+<!-- Google Font -->
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+<style>
+:root {
+    --theme-navy: #2D355B;        /* Primary Navy */
+    --theme-navy-dark: #1F2541;   /* Dark Navy */
+    --theme-red: #822424;         /* Primary Accent Red */
+    --theme-red-hover: #df2c3e;   /* Red Hover */
+    --theme-yellow: #FFEA85;      /* Accent Yellow/Gold */
+    --bg-light: #F6F6F6;          /* Page Background */
+    --white: #ffffff;
+}
+
+body {
+    font-family: 'Poppins', sans-serif;
+    background: var(--bg-light);
 }
 
 /* =======================
-Hero
+Hero Section
 ======================= */
-
-.result-hero{
-
-    background:linear-gradient(135deg,#5E244E,#4a1c3e);
-    color:#fff;
-    border-radius:20px;
-    padding:40px;
-    margin-bottom:30px;
-    box-shadow:0 15px 35px rgba(0,0,0,.15);
-
+.result-hero {
+    background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
+    color: var(--white);
+    border-radius: 16px;
+    padding: 35px 30px;
+    margin-bottom: 30px;
+    box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
+    border-left: 5px solid var(--theme-red);
 }
 
-.result-hero h2{
-
-    font-weight:700;
-
+.result-hero h2 {
+    font-weight: 700;
 }
 
-.result-hero p{
-
-    color:#ddd;
-    margin-bottom:0;
-
+.result-hero p {
+    color: rgba(255, 255, 255, 0.85);
+    margin-bottom: 0;
 }
 
 /* =======================
 Summary Cards
 ======================= */
-
-.summary-card{
-
-    background:#fff;
-    border:none;
-    border-radius:20px;
-    padding:25px;
-    text-align:center;
-    box-shadow:0 10px 25px rgba(0,0,0,.08);
-    transition:.3s;
-
+.summary-card {
+    background: var(--white);
+    border: 1px solid #e2e8f0;
+    border-radius: 16px;
+    padding: 25px;
+    text-align: center;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
+    transition: all 0.3s ease;
 }
 
-.summary-card:hover{
-
-    transform:translateY(-5px);
-
+.summary-card:hover {
+    transform: translateY(-4px);
+    border-color: var(--theme-navy);
+    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
 }
 
-.summary-card i{
-
-    font-size:40px;
-    color:#5E244E;
-    margin-bottom:15px;
-
+.summary-card i {
+    font-size: 36px;
+    color: var(--theme-red);
+    margin-bottom: 12px;
 }
 
-.summary-card h3{
-
-    color:#5E244E;
-    font-weight:700;
-
+.summary-card h3 {
+    color: var(--theme-navy);
+    font-weight: 700;
+    margin-bottom: 4px;
 }
 
-.summary-card small{
-
-    color:#777;
-
+.summary-card small {
+    color: #64748b;
+    font-weight: 500;
 }
 
 /* =======================
 Result Table
 ======================= */
-
-.result-card{
-
-    margin-top:35px;
-    background:#fff;
-    border-radius:20px;
-    overflow:hidden;
-    box-shadow:0 10px 30px rgba(0,0,0,.08);
-
+.result-card {
+    margin-top: 30px;
+    background: var(--white);
+    border: 1px solid #e2e8f0;
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
 }
 
-.table-head{
-
-    background:#5E244E;
-    color:#fff;
-    padding:18px 25px;
-
+.table-head {
+    background: var(--theme-navy);
+    color: var(--white);
+    padding: 18px 25px;
 }
 
-.table{
-
-    margin-bottom:0;
-
+.table {
+    margin-bottom: 0;
 }
 
-.table th{
-
-    background:#744a68;
-    color:#fff;
-    border:none;
-
+.table th {
+    background: #f8fafc;
+    color: var(--theme-navy);
+    font-weight: 600;
+    border-bottom: 2px solid #e2e8f0;
+    padding: 14px 20px;
 }
 
-.table td{
-
-    vertical-align:middle;
-
+.table td {
+    vertical-align: middle;
+    padding: 14px 20px;
 }
 
-.grade{
-
-    padding:7px 15px;
-    border-radius:30px;
-    font-weight:600;
-    color:#fff;
-    display:inline-block;
-
+.grade {
+    padding: 5px 14px;
+    border-radius: 30px;
+    font-weight: 600;
+    font-size: 13px;
+    color: var(--white);
+    display: inline-block;
 }
 
-.a{
-
-    background:#28a745;
-
+.grade.a {
+    background: var(--theme-navy);
 }
 
-.b{
-
-    background:#17a2b8;
-
+.grade.b {
+    background: var(--theme-red);
 }
 
-.c{
-
-    background:#ffc107;
-    color:#222;
-
+.grade.c {
+    background: #e67e22;
 }
 
-.fail{
-
-    background:#dc3545;
+.grade.fail {
+    background: #dc3545;
+}
 
+.status-pass {
+    color: #198754;
+    font-weight: 600;
 }
 
 /* =======================
 Progress
 ======================= */
+.progress {
+    height: 10px;
+    border-radius: 20px;
+    background-color: #e2e8f0;
+}
 
-.progress{
-
-    height:10px;
-    border-radius:20px;
+.progress-bar-navy {
+    background-color: var(--theme-navy) !important;
+}
 
+.progress-bar-red {
+    background-color: var(--theme-red) !important;
 }
 
 /* =======================
-Download
+Download Card
 ======================= */
-
-.download-card{
-
-    margin-top:30px;
-    background:#4a1c3e;
-    color:#fff;
-    border-radius:20px;
-    padding:30px;
-    display:flex;
-    justify-content:space-between;
-    align-items:center;
-    flex-wrap:wrap;
-
+.download-card {
+    margin-top: 30px;
+    background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
+    color: var(--white);
+    border-radius: 16px;
+    padding: 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 15px;
+    box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
 }
 
-.download-card h4{
-
-    color:#d4af37;
-    font-weight:700;
-
+.download-card h4 {
+    color: var(--theme-yellow);
+    font-weight: 700;
+    margin-bottom: 6px;
 }
 
-.btn-result{
-
-    background:#d4af37;
-    color:#fff;
-    border:none;
-    border-radius:50px;
-    padding:12px 30px;
-    font-weight:600;
-
+.btn-result {
+    background-color: var(--theme-red) !important;
+    color: var(--white) !important;
+    border: none;
+    border-radius: 8px;
+    padding: 10px 24px;
+    font-weight: 600;
+    transition: all 0.2s ease;
 }
 
-.btn-result:hover{
-
-    background:#c49d20;
-    color:#fff;
-
+.btn-result:hover {
+    background-color: var(--theme-red-hover) !important;
+    color: var(--white) !important;
 }
 
+@media(max-width:768px) {
+    .result-hero {
+        padding: 25px;
+    }
+}
 </style>
 
 <div class="container py-4">
 
-    <!-- Hero -->
-
+    <!-- Hero Section -->
     <div class="result-hero">
-
         <h2>
-
-            <i class="fas fa-award"></i>
-
+            <i class="fas fa-award me-2" style="color: var(--theme-yellow);"></i>
             Academic Results
-
         </h2>
-
         <p>
-
-            View your examination results and academic performance.
-
+            View your examination results and overall academic performance.
         </p>
-
     </div>
 
-    <!-- Summary -->
-
-    <div class="row">
-
-        <div class="col-md-4 mb-4">
-
+    <!-- Summary Cards -->
+    <div class="row g-4">
+        <div class="col-md-4">
             <div class="summary-card">
-
                 <i class="fas fa-chart-line"></i>
-
                 <h3>82%</h3>
-
                 <small>Overall Average</small>
-
+            </div>
         </div>
 
-        </div>
-
-        <div class="col-md-4 mb-4">
-
+        <div class="col-md-4">
             <div class="summary-card">
-
                 <i class="fas fa-medal"></i>
-
                 <h3>3.65</h3>
-
                 <small>Current GPA</small>
-
+            </div>
         </div>
 
-        </div>
-
-        <div class="col-md-4 mb-4">
-
+        <div class="col-md-4">
             <div class="summary-card">
-
-                <i class="fas fa-book"></i>
-
+                <i class="fas fa-book-open"></i>
                 <h3>6 / 6</h3>
-
                 <small>Modules Passed</small>
-
             </div>
-
         </div>
-
     </div>
 
     <!-- Result Table -->
-
     <div class="result-card">
-
         <div class="table-head">
-
-            <h4 class="mb-0">
-
+            <h5 class="mb-0 fw-bold">
                 Semester Results
-
-            </h4>
-
+            </h5>
         </div>
 
-        <table class="table table-hover">
-
+        <div class="table-responsive">
+            <table class="table table-hover align-middle">
                 <thead>
-
                     <tr>
-
                         <th>Module</th>
                         <th>Marks</th>
                         <th>Grade</th>
                         <th>Status</th>
-
                     </tr>
-
                 </thead>
 
                 <tbody>
-
                     <tr>
-
-                <td>Engine Technology</td>
-
+                        <td class="fw-semibold" style="color: var(--theme-navy);">Engine Technology</td>
                         <td>91</td>
-
                         <td>
-
-                    <span class="grade a">
-
-                        A+
-
-                    </span>
-
+                            <span class="grade a">A+</span>
                         </td>
-
-                <td>Pass</td>
-
+                        <td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
                     </tr>
 
                     <tr>
-
-                <td>Brake Systems</td>
-
+                        <td class="fw-semibold" style="color: var(--theme-navy);">Brake Systems</td>
                         <td>84</td>
-
                         <td>
-
-                    <span class="grade a">
-
-                        A
-
-                    </span>
-
+                            <span class="grade a">A</span>
                         </td>
-
-                <td>Pass</td>
-
+                        <td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
                     </tr>
 
                     <tr>
-
-                <td>Electrical Systems</td>
-
+                        <td class="fw-semibold" style="color: var(--theme-navy);">Electrical Systems</td>
                         <td>79</td>
-
                         <td>
-
-                    <span class="grade b">
-
-                        B+
-
-                    </span>
-
+                            <span class="grade b">B+</span>
                         </td>
-
-                <td>Pass</td>
-
+                        <td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
                     </tr>
 
                     <tr>
-
-                <td>Transmission Systems</td>
-
+                        <td class="fw-semibold" style="color: var(--theme-navy);">Transmission Systems</td>
                         <td>74</td>
-
                         <td>
-
-                    <span class="grade b">
-
-                        B
-
-                    </span>
-
+                            <span class="grade b">B</span>
                         </td>
-
-                <td>Pass</td>
-
+                        <td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
                     </tr>
 
                     <tr>
-
-                <td>Workshop Practice</td>
-
+                        <td class="fw-semibold" style="color: var(--theme-navy);">Workshop Practice</td>
                         <td>88</td>
-
                         <td>
-
-                    <span class="grade a">
-
-                        A
-
-                    </span>
-
+                            <span class="grade a">A</span>
                         </td>
-
-                <td>Pass</td>
-
+                        <td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
                     </tr>
 
                     <tr>
-
-                <td>Industrial Safety</td>
-
+                        <td class="fw-semibold" style="color: var(--theme-navy);">Industrial Safety</td>
                         <td>81</td>
-
                         <td>
-
-                    <span class="grade a">
-
-                        A-
-
-                    </span>
-
+                            <span class="grade a">A-</span>
                         </td>
-
-                <td>Pass</td>
-
+                        <td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
                     </tr>
-
                 </tbody>
-
             </table>
-
+        </div>
     </div>
 
-    <!-- Performance -->
-
-    <div class="result-card mt-4">
-
+    <!-- Performance Bars -->
+    <div class="result-card">
         <div class="table-head">
-
-            <h4 class="mb-0">
-
+            <h5 class="mb-0 fw-bold">
                 Overall Performance
-
-            </h4>
-
+            </h5>
         </div>
 
         <div class="p-4">
-
-            <p class="mb-2">
-
-                Course Completion
-
-            </p>
-
+            <div class="d-flex justify-content-between mb-2">
+                <span class="fw-semibold" style="color: var(--theme-navy);">Course Completion</span>
+                <span class="fw-bold" style="color: var(--theme-navy);">82%</span>
+            </div>
             <div class="progress mb-4">
-
-                <div class="progress-bar bg-success"
-
-                     style="width:82%">
-
+                <div class="progress-bar progress-bar-navy" style="width:82%"></div>
             </div>
 
+            <div class="d-flex justify-content-between mb-2">
+                <span class="fw-semibold" style="color: var(--theme-navy);">Attendance Score</span>
+                <span class="fw-bold" style="color: var(--theme-red);">90%</span>
             </div>
-
-            <p class="mb-2">
-
-                Attendance Score
-
-            </p>
-
             <div class="progress">
-
-                <div class="progress-bar bg-warning"
-
-                     style="width:90%">
-
+                <div class="progress-bar progress-bar-red" style="width:90%"></div>
+            </div>
+        </div>
     </div>
 
-            </div>
-
-        </div>
-
-    </div>
-
-    <!-- Download -->
-
+    <!-- Download Section -->
     <div class="download-card">
-
         <div>
-
-            <h4>
-
-                Download Official Result Sheet
-
-            </h4>
-
+            <h4>Download Official Result Sheet</h4>
             <p class="mb-0">
-
-                Download your latest semester examination results in PDF format.
-
+                Get your latest semester examination results in official PDF format.
             </p>
-
         </div>
 
-        <button class="btn btn-result">
-
-            <i class="fas fa-download"></i>
-
-            Download PDF
-
+        <button class="btn btn-result shadow-sm">
+            <i class="fas fa-download me-2"></i>Download PDF
         </button>
-
     </div>
 
 </div>

resources/views/signin.blade.php

@@ -3,26 +3,50 @@
 @section('title', 'Student Login')
 
 @push('styles')
+<!-- Google Font -->
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
+
 <style>
-    body {
-        background: #f5f7fb;
+    :root {
+        --theme-navy: #2D355B;        /* Primary Navy */
+        --theme-navy-dark: #1F2541;   /* Dark Navy */
+        --theme-red: #822424;         /* Primary Accent Red */
+        --theme-red-hover: #df2c3e;   /* Red Hover */
+        --theme-yellow: #FFEA85;      /* Accent Yellow/Gold */
+        --bg-light: #F6F6F6;          /* Page Background */
+        --white: #ffffff;
     }
-    * {
-        font-family: 'Arial', Helvetica, sans-serif;
-         transform: scale(0.95);
+
+    body {
+        background: var(--bg-light);
+        font-family: 'Poppins', sans-serif;
     }
 
     /* LEFT PANEL */
     .left-panel {
         min-height: 100vh;
-        background: #f8f9fa;
+        background: linear-gradient(135deg, var(--theme-navy) 0%, var(--theme-navy-dark) 100%);
         display: flex;
         justify-content: center;
         align-items: center;
+        color: var(--white);
+        border-right: 5px solid var(--theme-red);
     }
 
     .left-panel img {
-        max-width: 450px;
+        max-width: 400px;
+        filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3));
+    }
+
+    .left-panel h2 {
+        color: var(--white);
+        font-size: 28px;
+        margin-top: 20px;
+    }
+
+    .left-panel p {
+        color: rgba(255, 255, 255, 0.8);
+        font-size: 15px;
     }
 
     /* RIGHT PANEL */
@@ -32,106 +56,103 @@
         justify-content: center;
         align-items: center;
         padding: 40px;
+        background: var(--bg-light);
+        scale: 0.7;
     }
 
     /* LOGIN BOX */
     .box {
         width: 100%;
-        max-width: 500px;
-        background: #ffffff;
-        padding: 45px;
-        border-radius: 18px;
-        box-shadow: 0 15px 40px rgba(0,0,0,0.12);
+        max-width: 480px;
+        background: var(--white);
+        padding: 45px 40px;
+        border-radius: 16px;
+        box-shadow: 0 10px 30px rgba(31, 37, 65, 0.08);
+        border: 1px solid #e2e8f0;
     }
 
     /* TITLE */
     .headline {
         text-align: center;
-        font-size: 32px;
+        font-size: 28px;
         font-weight: 700;
-        color: #222;
+        color: var(--theme-navy);
         margin-bottom: 35px;
     }
 
-    /* INPUT */
+    /* INPUT CONTAINER */
     .input-container {
         position: relative;
-        margin-bottom: 25px;
-        font-size: 22px;
-        font-family: arial;
+        margin-bottom: 28px;
     }
 
     .input-container input {
         width: 100%;
-        height: 50px;
-        padding: 12px 0;
+        height: 48px;
+        padding: 10px 0 5px 0;
         border: none;
-        border-bottom: 2px solid #ddd;
+        border-bottom: 2px solid #cbd5e1;
         background: transparent;
         outline: none;
-        font-size: 22px;
-        font-family: arial;
-         
+        font-size: 16px;
+        color: #1e293b;
+        transition: all 0.3s ease;
     }
 
     .input-container label {
         position: absolute;
-        top: 15px;
+        top: 12px;
         left: 0;
-        color: #744a68;
-        transition: .3s;
+        color: #64748b;
+        transition: 0.3s ease;
         pointer-events: none;
-        font-size: 22px;
-        font-family: arial;
-        
+        font-size: 15px;
     }
 
     /* FLOATING LABEL & VALIDATION STATES */
-    .input-container input:focus,
-    .input-container input:valid {
-        border-bottom-color: #744a68;
-        font-size: 20px;
-        font-family: arial;
+    .input-container input:focus {
+        border-bottom-color: var(--theme-navy);
     }
 
     .input-container input:focus + label,
     .input-container input:not(:placeholder-shown) + label {
         top: -12px;
         font-size: 12px;
-        color: #744a68;
+        color: var(--theme-navy);
         font-weight: 600;
     }
 
     /* FORGOT PASSWORD */
     .forgot-link {
-        color: #744a68;
-        font-size: 16px;
+        color: var(--theme-red);
+        font-size: 14px;
         text-decoration: none;
         font-weight: 500;
+        padding-left: 37%;
         transition: color 0.2s ease-in-out;
     }
 
     .forgot-link:hover {
         text-decoration: underline;
-        color: #5E244E;
+        color: var(--theme-red-hover);
     }
 
     /* BUTTON */
     .btn-primary {
-        height: 50px;
+        height: 48px;
         width: 100%;
         font-size: 16px;
         font-weight: 600;
-        background: #5E244E;
+        background: var(--theme-red) !important;
         border: none;
-        color: white;
-        /* border-radius: 8px; */
-        transition: background 0.2s ease-in-out, transform 0.1s ease;
+        color: var(--white) !important;
+        border-radius: 8px;
+        transition: all 0.2s ease;
     }
 
     .btn-primary:hover, .btn-primary:focus {
-        background: #4a1c3e;
-        color: white;
+        background:  #822424 !important;
+        box-shadow: 0 4px 12px rgba(130, 36, 36, 0.3);
     }
 
     .btn-primary:active {
@@ -141,22 +162,25 @@
     /* BOTTOM TEXT */
     .dontacc {
         text-align: center;
+        margin-top: 15px;
     }
 
     .dontacc p {
-        color: #666;
+        color: #64748b;
+        font-size: 14px;
     }
 
     .dontacc a {
-        color: #744a68;
+        color: var(--theme-navy);
         text-decoration: none;
         font-weight: 600;
-        font-size: 16px;
-  font-family: arial;
+        font-size: 15px;
+        transition: color 0.2s ease;
     }
 
     .dontacc a:hover {
         text-decoration: underline;
+        color: var(--theme-navy-dark);
     }
 
     /* RESPONSIVE DESIGN */
@@ -171,14 +195,11 @@
         }
 
         .box {
-            padding: 30px;
+            padding: 35px 25px;
         }
 
         .headline {
-            font-size: 28px;
-            color: #5E244E;
-            font-weight: bold;
-            font-family: Arial;
+            font-size: 24px;
         }
     }
 </style>
@@ -188,17 +209,9 @@
 <div class="container-fluid">
     <div class="row min-vh-100">
 
-        <!-- <div class="col-lg-6 left-panel">
-            <div class="text-center">
-                <img src="{{ asset('images/login-banner.png') }}" class="img-fluid mb-4" alt="Automobile Engineering Academy">
-                <h2 class="fw-bold">Automobile Engineering Academy</h2>
-                <p class="text-muted px-5">
-                    Driving Innovation Through Education, Research and Technology.
-                </p>
-            </div>
-        </div> -->
     
-        <div class="col-lg-6 right-panel">
+
+        <div class="col-lg-6 right-panel col-12 mx-auto">
             <div class="box">
                 <h2 class="headline">Student Sign In</h2>
 
@@ -223,15 +236,14 @@
 
                     
 
-                    <button type="submit" class="btn btn-primary mb-4">
+                    <button type="submit" class="btn btn-primary mb-4 shadow-sm">
                         Sign In
                     </button>
-
-                    <div class="d-flex justify-content-end mb-4"  style="gap: 10px;padding-top: 10px; padding-left: 190px;">
+                     <div class="d-flex justify-content-end mb-4">
                         <a href="{{ url('/password/reset') }}" class="forgot-link">Forgot Password?</a>
                     </div>
 
-                    <div class="dontacc" style="padding-top: 10px; "    >
+                    <div class="dontacc">
                         <!-- <p class="mb-1">Don't have an account?</p> -->
                         <a href="{{ url('/signup') }}">Create Student Account</a>
                     </div>

resources/views/signup.blade.php

@@ -37,6 +37,7 @@
         padding: 45px;
         border-radius: 18px;
         box-shadow: 0 15px 40px rgba(0,0,0,0.12);
+        scale : 0.72
     }
 
     /* TITLE */
@@ -109,14 +110,14 @@
         width: 100%;
         font-size: 16px;
         font-weight: 600;
-        background: #5E244E;
+        background: #822424;
         border: none;
         color: white;
         transition: background 0.2s ease-in-out, transform 0.1s ease;
     }
 
     .btn-primary:hover, .btn-primary:focus {
-        background: #4a1c3e;
+        background: #822424;
         color: white;
     }
 

resources/views/students.blade.php

@@ -5,74 +5,95 @@
 @section('content')
 
 <style>
-:root{
-    --primary:#5E244E;
-    --secondary:#8B3A74;
-    --light:#f8f4f7;
+:root {
+    /* Premium Modern Automotive Palette matched from previous page */
+    --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 */
+    --accent-orange: #e36414;     /* Warning/Industrial Orange */
+    --accent-yellow: #FFE618;     /* High-Visibility Electric Yellow */
+    --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: Arial, Helvetica, sans-serif;
+    font-family: 'Segoe UI', Arial, sans-serif;
+    color: var(--text-main);
 }
 
-.hero{
-    background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
+.hero {
+    background: linear-gradient(rgba(214, 218, 238, 0.85), rgba(0, 0, 0, 0.6)),
     url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
-    background-size:cover;
-    background-position:center;
-    color:#fff;
-    padding:80px 0; 
-    text-align:center;
+    
+    background-size: cover;
+    background-position: center;
+    color: #fff;
+    padding: 80px 0; 
+    text-align: center;
+    height: 480px;
 }
 
-.portal-card{
-    border:none;
-    border-radius:15px;
-    transition:.4s cubic-bezier(0.165, 0.84, 0.44, 1);
-    box-shadow:0 5px 20px rgba(0,0,0,.08);
-    border: 1px solid #efeff4;
+.portal-card {
+    border: none;
+    border-radius: 15px;
+    transition: .4s cubic-bezier(0.165, 0.84, 0.44, 1);
+    box-shadow: 0 5px 20px rgba(0,0,0,.04);
+    border: 1px solid var(--card-border);
+    cursor: pointer;
 }
 
-.portal-card:hover{
-    transform:translateY(-8px);
-    border-color: var(--primary);
-    box-shadow: 0 15px 30px rgba(94, 36, 78, 0.1);
+.portal-card:hover {
+    transform: translateY(-8px);
+    border-color: #5f3131;
+    box-shadow: 0 15px 30px rgba(62, 81, 184, 0.12);
 }
 
-.portal-icon{
-    width:70px;
-    height:70px;
-    background:#5E244E;
-    color:#fff;
-    border-radius:50%;
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    font-size:28px;
-    margin:auto;
+.portal-icon {
+    width: 70px;
+    height: 70px;
+    background: #822a32;
+    color: #ffed8b;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+    margin: auto;
     transition: 0.4s ease;
 }
 
 .portal-card:hover .portal-icon {
-    background: var(--secondary);
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
     transform: scale(1.1);
+    box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
 }
 
-.btn-portal{
-    background:#5E244E;
-    color:#fff;
-    padding:12px 35px;
-    border: none;
+.btn-portal {
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
+    color: #fff;
+    padding: 12px 35px;
+   
     border-radius: 8px;
     font-weight: 600;
     transition: all 0.3s ease;
 }
 
-.btn-portal:hover{
-    background:#8B3A74;
-    color:#fff;
+.btn-portal:hover {
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
+    color: #f4ff8d;
     transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(94, 36, 78, 0.3);
+    box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
+    
+}
+
+.btn:hover {
+  border-color: rgba(255, 255, 255, 0.98);
 }
  
 .modal-content {
@@ -81,8 +102,6 @@ body {
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }
 
-
-
 .modal.fade .modal-dialog {
     transform: scale(0.85);
     transition: transform 0.3s ease-out;
@@ -131,14 +150,14 @@ body {
 }
  
 .form-control:focus {
-    border-color: var(--secondary);
-    box-shadow: 0 0 0 4px rgba(139, 58, 116, 0.12);
+    border-color: var(--primary-light);
+    box-shadow: 0 0 0 4px rgba(10, 103, 223, 0.15);
     outline: 0;
 }
 
 .input-group:focus-within .input-group-text {
-    border-color: var(--secondary);
-    color: var(--secondary);
+    border-color: var(--primary-light);
+    color: var(--primary-light);
 }
 
 .modal-footer {
@@ -170,19 +189,34 @@ body {
     border: none;
     font-weight: 600;
     padding: 10px 0;
-    box-shadow: 0 4px 12px rgba(94, 36, 78, 0.2);
+    box-shadow: 0 4px 12px rgba(62, 81, 184, 0.2);
     transition: all 0.2s;
     width: 100%;
     border-radius: 8px;
 }
 
 .btn-modal-login:hover {
-    background: var(--secondary);
+    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
     color: #fff;
     transform: translateY(-1px);
-    box-shadow: 0 6px 15px rgba(94, 36, 78, 0.3);
+    box-shadow: 0 6px 15px rgba(188, 26, 26, 0.3);
 }
 
+.bg-light {
+  background: linear-gradient(rgba(162, 190, 255, 0.49), rgba(237, 235, 255, 0.9)), url('https://images.pexels.com/photos/3807277/pexels-photo-3807277.jpeg?auto=compress&cs=tinysrgb&w=1600');
+    background-position-x: 0%, 0%;
+    background-position-y: 0%, 0%;
+    background-repeat: repeat, repeat;
+    background-attachment: scroll, scroll;
+    background-size: auto, auto;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  color: white;
+}
+
+
 /* ========================================================
    Custom CSS Scroll Animations
    ======================================================== */
@@ -208,10 +242,13 @@ body {
     opacity: 1;
     transform: translate(0) scale(1);
 }
+/* .rounded-pill {
+  border-radius: inherit;
+} */
 </style>
 
 <section class="hero">
-    <div class="container">
+    <div class="container" style="padding-top: 46px;">
         <div class="animate-item animated fade-up-init">
             <h1 class="fw-bold display-5">Student Portal</h1>
             <p class="mt-3 fs-5" style="max-width: 700px; margin: auto;">
@@ -236,7 +273,6 @@ body {
             </p>
         </div>
 
-     
         <div class="row g-4 animate-item fade-in-init">
             <div class="col-md-4">
                 <div class="card portal-card h-100 text-center p-4" onclick="studentlogin()">
@@ -302,27 +338,88 @@ body {
 </section>
 
 <!-- QUICK LINKS -->
-<section class="py-5 bg-light overflow-hidden">
+<!-- <section class="py-5 bg-light overflow-hidden">
     <div class="container">
-        <div class="text-center mb-5 animate-item fade-up-init" onclick="studentlogin()">
+        <div class="text-center mb-5 animate-item fade-up-init">
             <h2 class="fw-bold">Quick Links</h2>
         </div>
 
-        <div class="row text-center animate-item slide-right-init" onclick="studentlogin()">
+        <div class="row text-center animate-item slide-right-init" style="color:white;">
             <div class="col-md-3 mb-3">
-                <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Academic Calendar</a>
+                <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill" style="color:white;">Academic Calendar</a>
             </div>
             <div class="col-md-3 mb-3">
-                <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Student Handbook</a>
+                <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill" style="color:white;">Student Handbook</a>
             </div>
             <div class="col-md-3 mb-3">
-                <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Examination Notices</a>
+                <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill" style="color:white;">Examination Notices</a>
             </div>
             <div class="col-md-3 mb-3">
-                <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Contact Support</a>
+                <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill" style="color:white;">Contact Support</a>
             </div>
         </div>
     </div>
+</section> -->
+
+<section class="py-5 overflow-hidden" 
+         style="background: linear-gradient(rgba(25, 48, 102, 0.49), rgba(10, 9, 17, 0.9)), url('https://images.pexels.com/photos/3807277/pexels-photo-3807277.jpeg?auto=compress&cs=tinysrgb&w=1600'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; color: white; height: 395px; ">
+    <div class="container">
+        
+        <!-- Section Title -->
+        <div class="text-center mb-5 animate-item fade-up-init">
+            <h2 class="fw-bold mb-2" style="color: #ffffff;">Quick Links</h2>
+            <p style="color: #ffffff; font-size: 0.95rem; font-weight: 500;">Access important student portals and resources instantly</p>
+        </div>
+
+        <!-- Quick Links Grid -->
+        <div class="row g-3 justify-content-center animate-item slide-right-init">
+            
+            <!-- Link 1 -->
+            <div class="col-6 col-md-3">
+                <a href="#" class="d-flex flex-column align-items-center text-decoration-none p-4 rounded-4 text-center" 
+                   style="background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); transition: all 0.3s ease;">
+                    <div style="color: #0284c7; font-size: 2rem;" class="mb-2">
+                        <i class="bi bi-calendar-event"></i>
+                    </div>
+                    <span class="fw-bold" style="color: #002886; font-size: 19px;">Academic Calendar</span>
+                </a>
+            </div>
+
+            <!-- Link 2 -->
+            <div class="col-6 col-md-3">
+                <a href="#" class="d-flex flex-column align-items-center text-decoration-none p-4 rounded-4 text-center" 
+                   style="background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); transition: all 0.3s ease;">
+                    <div style="color: #0284c7; font-size: 2rem;" class="mb-2">
+                        <i class="bi bi-journal-bookmark"></i>
+                    </div>
+                    <span class="fw-bold" style="color: #002886; font-size: 19px;">Student Handbook</span>
+                </a>
+            </div>
+
+            <!-- Link 3 -->
+            <div class="col-6 col-md-3">
+                <a href="#" class="d-flex flex-column align-items-center text-decoration-none p-4 rounded-4 text-center" 
+                   style="background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); transition: all 0.3s ease;">
+                    <div style="color: #0284c7; font-size: 2rem;" class="mb-2">
+                        <i class="bi bi-file-earmark-text"></i>
+                    </div>
+                    <span class="fw-bold" style="color: #002886; font-size: 19px;">Examination Notices</span>
+                </a>
+            </div>
+
+            <!-- Link 4 -->
+            <div class="col-6 col-md-3">
+                <a href="#" class="d-flex flex-column align-items-center text-decoration-none p-4 rounded-4 text-center" 
+                   style="background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); transition: all 0.3s ease;">
+                    <div style="color: #0284c7; font-size: 2rem;" class="mb-2">
+                        <i class="bi bi-headset"></i>
+                    </div>
+                    <span class="fw-bold" style="color: #002886; font-size: 19px;">Contact Support</span>
+                </a>
+            </div>
+
+        </div>
+    </div>
 </section>
 
 <!-- BOTTOM CTA -->
@@ -409,6 +506,4 @@ document.addEventListener('DOMContentLoaded', function () {
 });
 </script>
 
-
-
 @endsection

resources/views/timetable.blade.php

@@ -14,372 +14,350 @@
 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
 
 <style>
-body{
-    font-family:'Poppins',sans-serif;
-    background:#f4f7fc;
+:root {
+    --theme-navy: #2D355B;        /* Primary Navy */
+    --theme-navy-dark: #1F2541;   /* Dark Navy */
+    --theme-red: #822424;         /* Primary Accent Red */
+    --theme-red-hover: #df2c3e;   /* Red Hover */
+    --theme-yellow: #FFEA85;      /* Accent Yellow/Gold */
+    --bg-light: #F6F6F6;          /* Page Background */
+    --white: #ffffff;
 }
 
-.page-header{
-    background:linear-gradient(135deg,#9954b8,#4f3d5b));
-    color:#fff;
-    padding:45px;
-    border-radius:20px;
-    background-color: #5E244E;
-    margin-bottom:30px;
+body {
+    font-family: 'Poppins', sans-serif;
+    background: var(--bg-light);
 }
 
-.page-header h2{
-    font-weight:700;
+/* Page Header Hero Section */
+.page-header {
+    background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
+    color: var(--white);
+    padding: 35px 30px;
+    border-radius: 16px;
+    margin-bottom: 30px;
+    box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
+    border-left: 5px solid var(--theme-red);
 }
 
-.page-header p{
-    opacity:.9;
+.page-header h2 {
+    font-weight: 700;
 }
 
-.info-card{
-    border:none;
-    border-radius:15px;
-    box-shadow:0 10px 30px rgba(0,0,0,.08);
+.page-header p {
+    opacity: .85;
 }
 
-.table-card{
-    background:#fff;
-    border-radius:20px;
-    box-shadow:0 10px 30px rgba(0,0,0,.08);
-    overflow:hidden;
+/* Info Cards & Wrapper */
+.info-card {
+    background: var(--white);
+    border: 1px solid #e2e8f0;
+    border-radius: 16px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
 }
 
-.table thead{
-    background:#0d6efd;
-    color:#fff;
+.today-card {
+    background: var(--white);
+    border: 1px solid #e2e8f0;
+    border-radius: 16px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
+    padding: 25px;
+    height: 100%;
+}
+
+.today-card h5, 
+.info-card h5 {
+    font-weight: 600;
+    color: var(--theme-navy);
+}
+
+/* Timetable Card Section */
+.table-card {
+    background: var(--white);
+    border: 1px solid #e2e8f0;
+    border-radius: 16px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
+    overflow: hidden;
+}
+
+.table thead {
+    background: var(--theme-navy);
+    color: var(--white);
+}
+
+.table thead th {
+    font-weight: 600;
+    padding: 15px 10px;
 }
 
 .table td,
-.table th{
-    text-align:center;
-    vertical-align:middle;
-    min-width:140px;
+.table th {
+    text-align: center;
+    vertical-align: middle;
+    min-width: 140px;
 }
 
-.badge-theory{
-    background:#0d6efd;
+.table tbody th {
+    background-color: #f8fafc;
+    color: var(--theme-navy);
+    font-weight: 600;
 }
 
-.badge-practical{
-    background:#198754;
+/* Updated Status Badges */
+.badge-theory {
+    background: var(--theme-navy) !important;
+    color: var(--white) !important;
 }
 
-.badge-workshop{
-    background:#fd7e14;
+.badge-practical {
+    background: var(--theme-red) !important;
+    color: var(--white) !important;
 }
 
-.badge-break{
-    background:#ffc107;
-    color:#000;
+.badge-workshop {
+    background: #e67e22 !important; /* Workshop Accent */
+    color: var(--white) !important;
 }
 
-.table tbody tr:hover{
-    background:#f8fbff;
-    transition:.3s;
+.badge-break {
+    background: var(--theme-yellow) !important;
+    color: var(--theme-navy-dark) !important;
+    font-weight: 600;
 }
 
-.legend span{
-    margin-right:15px;
+.table tbody tr:hover {
+    background: rgba(45, 53, 91, 0.02);
+    transition: .3s;
 }
 
-.legend .badge{
-    padding:8px 12px;
+.lunch-row {
+    background-color: rgba(255, 234, 133, 0.25) !important;
+    color: var(--theme-navy-dark);
+    font-weight: 600;
 }
 
-.today-card{
-    background:white;
-    border-radius:15px;
-    box-shadow:0 10px 25px rgba(0,0,0,.08);
-    padding:25px;
-    height:100%;
+.legend span {
+    margin-right: 12px;
+    display: inline-block;
+    margin-bottom: 8px;
 }
 
-.today-card h5{
-    font-weight:600;
+.legend .badge {
+    padding: 8px 14px;
+    font-size: 12px;
 }
 
-.download-btn{
-    border-radius:50px;
-    padding:10px 25px;
+/* Custom Buttons */
+.download-btn {
+    border-radius: 8px;
+    padding: 10px 22px;
+    background-color: var(--theme-red) !important;
+    color: var(--white) !important;
+    border: none;
+    font-weight: 500;
+    transition: all 0.2s ease;
 }
 
-@media(max-width:768px){
-
-.table td,
-.table th{
-    font-size:13px;
-    min-width:120px;
+.download-btn:hover {
+    background-color: var(--theme-red-hover) !important;
+    color: var(--white) !important;
 }
 
-.page-header{
-    padding:25px;
-}
+@media(max-width:768px) {
+    .table td,
+    .table th {
+        font-size: 13px;
+        min-width: 120px;
+    }
+
+    .page-header {
+        padding: 25px;
+    }
 }
 </style>
 
 <div class="container py-4">
 
     <!-- Header -->
-
     <div class="page-header">
-
-        <div class="d-flex justify-content-between align-items-center flex-wrap">
-
+        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
             <div>
-
-                <h2><i class="fas fa-calendar-alt me-2"></i>My Class Timetable</h2>
-
+                <h2 class="mb-1"><i class="fas fa-calendar-alt me-2" style="color: var(--theme-yellow);"></i>My Class Timetable</h2>
                 <p class="mb-0">
                     Automobile Engineering Academy Student Portal
                 </p>
-
             </div>
 
-            <button class="btn btn-light download-btn" onclick="window.print()">
-                <i class="fas fa-print me-2"></i>Print
+            <button class="btn download-btn shadow-sm" onclick="window.print()">
+                <i class="fas fa-print me-2"></i>Print Timetable
             </button>
-
-        </div>
-
+        </div>
     </div>
 
+    <!-- Top Grid Info -->
     <div class="row g-4 mb-4">
 
+        <!-- Today's Schedule Card -->
         <div class="col-lg-4">
-
             <div class="today-card">
-
                 <h5 class="mb-3">
-                    <i class="fas fa-clock text-primary me-2"></i>
-                    Today's Classes
+                    <i class="fas fa-clock me-2" style="color: var(--theme-red);"></i>
+                    Today's Schedule
                 </h5>
 
-                <div class="mb-3">
-
+                <div class="mb-3 p-2 rounded" style="background: #f8fafc; border-left: 3px solid var(--theme-navy);">
                     <strong>08:30 - 10:30</strong><br>
-
-                    <span class="badge badge-theory">
-                        Theory
-                    </span>
-
-                    Engine Fundamentals
-
+                    <span class="badge badge-theory me-1">Theory</span>
+                    <span>Engine Fundamentals</span>
                 </div>
 
-                <div class="mb-3">
-
+                <div class="mb-3 p-2 rounded" style="background: #f8fafc; border-left: 3px solid #e67e22;">
                     <strong>10:45 - 12:30</strong><br>
-
-                    <span class="badge badge-workshop">
-                        Workshop
-                    </span>
-
-                    Practical Session
-
+                    <span class="badge badge-workshop me-1">Workshop</span>
+                    <span>Practical Session</span>
                 </div>
 
-                <div>
-
+                <div class="p-2 rounded" style="background: #f8fafc; border-left: 3px solid var(--theme-red);">
                     <strong>01:30 - 03:30</strong><br>
-
-                    <span class="badge badge-practical">
-                        Practical
-                    </span>
-
-                    Electrical System
-
-                </div>
-
-            </div>
-
+                    <span class="badge badge-practical me-1">Practical</span>
+                    <span>Electrical System</span>
+                </div>
+            </div>
         </div>
 
+        <!-- Legend Card -->
         <div class="col-lg-8">
-
-            <div class="info-card p-4 h-100">
-
+            <div class="info-card p-4 h-100 d-flex flex-column justify-content-between">
+                <div>
                     <h5 class="mb-3">
-                    <i class="fas fa-info-circle text-primary me-2"></i>
+                        <i class="fas fa-info-circle me-2" style="color: var(--theme-navy);"></i>
                         Timetable Legend
                     </h5>
 
-                <div class="legend">
-
+                    <div class="legend mb-2">
                         <span>
                             <span class="badge badge-theory">Theory</span>
                         </span>
-
                         <span>
                             <span class="badge badge-practical">Practical</span>
                         </span>
-
                         <span>
                             <span class="badge badge-workshop">Workshop</span>
                         </span>
-
                         <span>
                             <span class="badge badge-break">Break</span>
                         </span>
-
+                    </div>
                 </div>
 
-                <hr>
-
-                <p class="mb-0 text-muted">
-                    Please arrive at least 15 minutes before each class.
-                    Attendance is compulsory for all practical sessions.
+                <div>
+                    <hr class="text-muted">
+                    <p class="mb-0 text-muted small">
+                        <i class="fas fa-exclamation-circle me-1" style="color: var(--theme-red);"></i>
+                        Please arrive at least 15 minutes before each class. Attendance is compulsory for all practical sessions.
                     </p>
-
+                </div>
+            </div>
         </div>
 
     </div>
 
-    </div>
-
-    <!-- Timetable -->
-
+    <!-- Timetable Grid -->
     <div class="table-card">
-
         <div class="table-responsive">
-
             <table class="table table-bordered align-middle mb-0">
-
                 <thead>
-
                     <tr>
-
                         <th>Time</th>
-
                         <th>Monday</th>
-
                         <th>Tuesday</th>
-
                         <th>Wednesday</th>
-
                         <th>Thursday</th>
-
                         <th>Friday</th>
-
                     </tr>
-
                 </thead>
-
                 <tbody>
-
                     <tr>
-
                         <th>08:30 - 10:30</th>
-
                         <td>
-                        <span class="badge badge-theory">Theory</span><br>
+                            <span class="badge badge-theory mb-1">Theory</span><br>
                             Engine Fundamentals
                         </td>
-
                         <td>
-                        <span class="badge badge-practical">Practical</span><br>
+                            <span class="badge badge-practical mb-1">Practical</span><br>
                             Engine Lab
                         </td>
-
                         <td>
-                        <span class="badge badge-theory">Theory</span><br>
+                            <span class="badge badge-theory mb-1">Theory</span><br>
                             Transmission
                         </td>
-
                         <td>
-                        <span class="badge badge-workshop">Workshop</span><br>
+                            <span class="badge badge-workshop mb-1">Workshop</span><br>
                             Engine Repair
                         </td>
-
                         <td>
-                        <span class="badge badge-theory">Theory</span><br>
+                            <span class="badge badge-theory mb-1">Theory</span><br>
                             Vehicle Safety
                         </td>
-
                     </tr>
 
                     <tr>
-
                         <th>10:45 - 12:30</th>
-
                         <td>
-                        <span class="badge badge-workshop">Workshop</span><br>
+                            <span class="badge badge-workshop mb-1">Workshop</span><br>
                             Service Practice
                         </td>
-
                         <td>
-                        <span class="badge badge-theory">Theory</span><br>
+                            <span class="badge badge-theory mb-1">Theory</span><br>
                             Electrical
                         </td>
-
                         <td>
-                        <span class="badge badge-practical">Practical</span><br>
+                            <span class="badge badge-practical mb-1">Practical</span><br>
                             Diagnostics
                         </td>
-
                         <td>
-                        <span class="badge badge-theory">Theory</span><br>
+                            <span class="badge badge-theory mb-1">Theory</span><br>
                             Fuel System
                         </td>
-
                         <td>
-                        <span class="badge badge-workshop">Workshop</span><br>
+                            <span class="badge badge-workshop mb-1">Workshop</span><br>
                             Engine Assembly
                         </td>
-
                     </tr>
 
-                <tr class="table-warning">
-
+                    <tr class="lunch-row">
                         <th>12:30 - 01:30</th>
-
                         <td colspan="5">
                             🍴 LUNCH BREAK
                         </td>
-
                     </tr>
 
                     <tr>
-
                         <th>01:30 - 03:30</th>
-
                         <td>
-                        <span class="badge badge-practical">Practical</span><br>
+                            <span class="badge badge-practical mb-1">Practical</span><br>
                             Electrical System
                         </td>
-
                         <td>
-                        <span class="badge badge-workshop">Workshop</span><br>
+                            <span class="badge badge-workshop mb-1">Workshop</span><br>
                             Welding
                         </td>
-
                         <td>
-                        <span class="badge badge-theory">Theory</span><br>
+                            <span class="badge badge-theory mb-1">Theory</span><br>
                             Auto Electronics
                         </td>
-
                         <td>
-                        <span class="badge badge-practical">Practical</span><br>
+                            <span class="badge badge-practical mb-1">Practical</span><br>
                             Brake System
                         </td>
-
                         <td>
-                        <span class="badge badge-theory">Theory</span><br>
+                            <span class="badge badge-theory mb-1">Theory</span><br>
                             Revision
                         </td>
-
                     </tr>
-
                 </tbody>
-
             </table>
-
         </div>
-
     </div>
 
 </div>

resources/views/welcome.blade.php

@@ -12,473 +12,646 @@
 @section('content')
 
 <style>
-:root{
-    --primary:#5E244E;
-    --secondary:#8B3A74;
-    --light:#F8F4F7;
-    --dark:#2F1027;
-    --gold:#FFC107;
-    --card-border: #efeff4;
-    --text-muted: #6a6f73;
-    --success-green: #1f8a4c;
+:root {
+    /* Modern, Sleek Automotive Palette */
+    --primary: #0F2C59;           /* Deep Navy */
+    --secondary: #E36414;         /* Electric Industrial Orange */
+    --secondary-hover: #C5530E;   /* Deeper burnt orange */
+    --accent-light: #E6FFFA;
+    --accent-blue: #3085C3;       /* Premium Tech Blue */
+    --bg-light: #F4F6F9;          /* Soft slate light gray */
+    
+    /* Semantic Adjustments */
+    --text-main: #1E293B;         
+    --text-muted: #64748B;        
+    --card-border: rgba(15, 44, 89, 0.08);
+    --shadow-color: rgba(15, 44, 89, 0.06);
 }
 
-/* ===== Font & Base ===== */
-body{
-    font-family: Arial, Helvetica, sans-serif;
+/* ===== Global Improvements ===== */
+body {
+    font-family: 'Segoe UI', Arial, sans-serif;
+    color: #1E293B;
+    background-color: #ffffff;
 }
 
-.section{
-    padding:90px 0;
+.section {
+    padding: 53px 0;
 }
  
-.section-title, h2, h3, h4, h5, h6{
-    font-family: Arial, Helvetica, sans-serif;
-    font-weight:700;
-    color:#5E244E;
+
+.section-title, h2, h3, h4, h5, h6 {
+    font-family: 'Segoe UI', Arial, sans-serif;
+    font-weight: 700;
+    color: var(--primary);
 }
 
-/* ===== Buttons ===== */
-.btn-theme{
-    background:#5E244E;
-    color:#fff;
-    border:2px solid #5E244E;
-    padding:14px 35px;
-    border-radius:40px;
-    font-weight:600;
-    transition:.3s;
+/* ===== Premium Theme Buttons ===== */
+.btn-theme {
+    background: #305CB1;
+    color: #fff;
+    padding: 14px 35px;
+    border-radius: 40px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    font-weight: bolder;
 }
 
-.btn-theme:hover{
-    background:#8B3A74;
-    border-color:#8B3A74;
-    color:#fff;
-    transform:translateY(-3px);
+.btn-theme: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-outline-theme{
-    background:transparent;
-    color:#fff;
-    border:2px solid #fff;
-    padding:12px 32px;
-    border-radius:40px;
-    font-weight:600;
-    transition:.3s;
+.btn-outline-theme {
+    background: transparent;
+    color: #fff;
+    border: 2px solid #fff;
+    padding: 12px 32px;
+    border-radius: 40px;
+    font-weight: 600;
+    transition: all 0.3s ease;
 }
 
-.btn-outline-theme:hover{
-    background:#fff;
-    color:#5E244E;
+.btn-outline-theme:hover {
+    background: #fff;
+    color: var(--primary);
+    transform: translateY(-3px);
 }
 
-.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 {
+    background: #f2e862;
+    color: #000000;
+    border: 2px solid rgba(255, 255, 255, 0.25);
+    padding: 12px 32px;
+    border-radius: 40px;
+    font-weight: 600;
+    backdrop-filter: blur(5px);
+    transition: all 0.3s ease;
 }
 
-.btn-outline-light-custom:hover{
-    background:#ffcd39;
-    border-color:#ffcd39;
-    color:#000;
+.btn-outline-light-custom:hover {
+    background: #f2e862;
+    color: var(--primary);
+    border-color: #fff;
+    transform: translateY(-3px);
 }
 
-/* ===== Hero ===== */
 .hero {
-    height:650px;
-    background: linear-gradient(rgba(0, 0, 0, 0.65),rgba(30,10,25,.65)),
-                url('https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80');
-    background-size: cover;
+    height:636px;
+    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-position: center;
+    background-size: cover;
 }  
 
-.hero-content{
-    height:100%;
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    flex-direction:column;
-    color:#fff;
+.hero-content {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    color: #fff;
     padding-top: 38px;
 }
 
-.hero h1{
-    font-size:60px;
-    font-weight:700;
-    margin-top: 75px;
+.hero h1 {
+    font-size: 63px;
+    font-weight: 800;
+    margin-top: -87px;
+    text-shadow: 0 2px 15px rgba(0,0,0,0.3);
 }
 
-.hero p{
-    font-size:22px;
-    max-width:700px;
+.hero p {
+    font-size: 22px;
+    max-width: 700px;
+    color: white;
+}
+
+.courses-section {
+    background-color: var(--bg-light);
 }
 
 .course-card {
     border: 1px solid var(--card-border);
-    /* border-radius: 20px; */
     overflow: hidden;
-    /* background: #fff; */
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    
+    background: #fff;
+    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    box-shadow: 0 5px 15px var(--shadow-color);
 }
 
 .course-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
+    transform: translateY(-6px);
+    box-shadow: 0 15px 35px rgba(15, 44, 89, 0.12);
+    border-color: rgba(48, 133, 195, 0.25);
 }
 
 .course-image-wrapper {
-    padding: 16px 16px 0 16px;
+    position: relative;
     overflow: hidden;
+    height: 210px;
 }
 
 .course-card img {
-    height: 190px;
+    height: 100%;
     width: 100%;
     object-fit: cover;
-    /* border-radius: 14px; */
-    transition: 0.5s;
+    transition: transform 0.6s ease;
 }
 
 .course-card:hover img {
-    transform: scale(1.05);
+    transform: scale(1.06);
+}
+
+.badge-floating {
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    background: #BC1A1A;
+    color: #fff;
+    font-weight: 700;
+    font-size: 11px;
+    padding: 5px 12px;
+    border-radius: 30px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    z-index: 2;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
 }
 
 .course-card .card-body {
-    padding: 20px 24px 24px 24px;
+    padding: 24px;
     display: flex;
     flex-direction: column;
-    text-align: left;
+    flex-grow: 1;
 }
 
 .course-title {
-    font-size: 21px;
+    font-size: 20px;
     font-weight: 700;
-    line-height: 1.3;
-    color: #1c1d1f;
-    margin-bottom: 6px;
+    color: var(--primary);
+    margin-bottom: 8px;
+    line-height: 1.4;
+    transition: color 0.3s ease;
+}
+
+.course-card:hover .course-title {
+    color: #914040;
 }
 
 .course-author {
-    font-size: 14px;
-    color: var(--text-muted);
-    margin-bottom: 8px;
+    font-size: 13.5px;
+    font-weight: 500;
+    color: var(--accent-blue);
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
 }
 
 .course-short-desc {
     font-size: 14px;
-    color: #4f5357;
-    margin-bottom: 12px;
-    line-height: 1.5;
+    color: #556575;
+    line-height: 1.6;
+    margin-bottom: 15px;
+}
+
+.course-features-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 15px;
+}
+
+.feature-pill {
+    background: rgba(48, 133, 195, 0.08);
+    color: var(--accent-blue);
+    font-size: 12px;
+    font-weight: 600;
+    padding: 4px 10px;
+    border-radius: 6px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.course-footer {
+    margin-top: auto;
+    padding-top: 15px;
+    border-top: 1px solid rgba(15, 44, 89, 0.08);
 }
 
 .course-meta-row {
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-bottom: 14px;
-}
-
-.badge-bestseller {
-    background-color: #ece3f1;
-    color: var(--primary);
-    font-weight: 700;
-    font-size: 11px;
-    padding: 3px 10px;
-    border-radius: 4px;
-    text-transform: uppercase;
+    justify-content: space-between;
+    margin-bottom: 15px;
 }
 
 .rating-star {
-    color: #b4690e;
+    color: #f39c12; 
     font-weight: 700;
     font-size: 14px;
-    display: flex;
-    align-items: center;
-    gap: 4px;
 }
 
 .rating-count {
     color: var(--text-muted);
-    font-size: 13px;
-}
-
-.course-features {
-    display: flex;
-    gap: 15px;
-    font-size: 13px;
-    color: var(--success-green);
-    margin-bottom: 18px;
     font-weight: 500;
 }
 
-.course-features span i {
-    margin-right: 4px;
-}
-
-.course-footer {
-    margin-top: auto;
-}
-
 .read-btn {
-    background: var(--primary);
-    color: #fff;
-    padding: 10px 25px;
-    font-weight: 600;
-    border-radius: 30px;
-    font-size: 15px;
-    transition: 0.2s;
-    border: none;
+    background:#822424;
+    color: white;
+    padding: 10px 20px;
+    font-weight: 700;
+    border-radius: 6px;
+    font-size: 14px;
+    transition: all 0.3s ease;
     text-decoration: none;
-    display: inline-block;
+    display: block;
+    text-align: center;
 }
 
-.read-btn:hover {
-    background: var(--secondary);
+.course-card:hover .read-btn {
+    background: #822424;
+    border-color: #e3eb73;
     color: #fff;
 }
 
 /* ===== Why Choose Us ===== */
-.why-section {
-    background: #F8F4F7;
-    overflow-x: hidden;
+.why-overlay {
+    position: absolute;
+    top: 0; 
+    left: 0; 
+    width: 100%; 
+    height: 100%;
+    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;
 }
 
-.why-section li {
-    font-size: 18px;
-    margin-bottom: 18px;
+.why-content-wrapper {
+    position: relative;
+    z-index: 2;
 }
 
-.why-section i {
-    color: #5E244E;
+.custom-feature-card {
+    background: rgba(255, 255, 255, 0.43);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 16px;
+    padding: 30px;
+    transition: all 0.3s ease;
 }
 
+.custom-feature-card:hover {
+    transform: translateY(-5px);
+    background: rgba(255, 255, 255, 0.07);
+    border-color: rgba(255, 255, 255, 0.2);
+}
 
+.icon-box {
+    background: #6a2525;
+    color: #FFE618;
+    width: 60px;
+    height: 60px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    transition: all 0.3s ease;
+}
+
+.custom-feature-card:hover .icon-box {
+    background: #6a2525;
+    color: #faf9f5;
+}
+
+/* ===== Animations ===== */
 .animate-on-scroll {
     opacity: 0;
-    transition: all 1s ease-out;
+    transition: all 0.8s ease-out;
 }
 
- 
-.fade-up-init {
-    transform: translateY(40px);
-}
-
- 
-.fade-left-init {
-    transform: translateX(50px);
-}
-
- 
-.fade-right-init {
-    transform: translateX(-50px);
-}
-
- 
-.zoom-in-init {
-    transform: scale(0.9);
-}
-
- 
+.fade-up-init { transform: translateY(30px); }
+.zoom-in-init { transform: scale(0.95); }
 .animate-on-scroll.animated {
     opacity: 1;
-    transform: translateY(0) translateX(0) scale(1);
+    transform: translateY(0) scale(1);
+}
+
+/* ===== Modal Styling ===== */
+.custom-modal-header {
+    background-color:  white;
+    color: #fff;
+    border-bottom: 3px solid var(--secondary);
+    padding: 23px;
 }
 </style>
 
 {{-- ===================== HERO ===================== --}}
-<section class="hero" role="banner" aria-label="Automobile Engineering Academy introduction">
-    <div class="container">
-        
+<section class="hero" role="banner" aria-label="Automobile Engineering Academy Introduction">
+    <div class="container h-100">
         <div class="hero-content text-center animate-on-scroll animated fade-up-init">
-            <h1 class="display-4 fw-bold">
-                Automobile Engineering Academy
-            </h1>
-            <p>
-                Driving Innovation Through Education, Research &amp; Technology
-            </p>
+            <h1 class="display-4">Automobile Engineering Academy</h1>
+            <p class="mb-4">Driving Innovation Through Education, Research &amp; Technology</p>
 
-            <div class="d-flex flex-wrap justify-content-center gap-3 mt-3">
-                <a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-theme">
-                    <i class="fa-solid fa-user-plus me-2"></i> Apply Now
+            <div class="d-flex flex-wrap justify-content-center gap-3">
+                <a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-theme" style="background: #822424;border: 2px solid #FFF;">
+                    <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
+                    <i class="fa-solid fa-book-open me-2"></i>Explore Courses
                 </a>
-
                <a href="mailto:imadhigp@gmail.com" class="btn btn-outline-light-custom">
-                    <i class="fa-solid fa-phone me-2"></i> Contact Admissions
+                    <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"  >
-    <!-- style=" background: linear-gradient(rgba(177, 155, 185, 0.65),rgba(133, 118, 129, 0.65)),
-                url('https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80');" -->
-    <div class="container py-5">
-
+{{-- ===================== COURSES SECTION ===================== --}}
+<section class="section courses-section" aria-labelledby="courses-heading">
+    <div class="container">
         <div class="text-center mb-5 animate-on-scroll fade-up-init">
-            <h2 id="courses-heading">Our Courses</h2>
-            <p class="text-muted">
-                Explore our professional automotive engineering courses.
-            </p>
+            <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:#2D355B;">Our Top Courses</h2>
+            <p class="text-muted fs-5">Explore our professional, industry-recognized automotive engineering curriculums.</p>
         </div>
 
         @php
             $courses = [
                 [
+                    'id' => 'course-1',
+                    'category' => 'mechanical',
+                    'level' => 'ol',
                     '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.',
+                    'desc'  => 'Learn vehicle design, engine technology, diagnostics and manufacturing workflows comprehensively.',
                     'author' => 'Automotive Engineering Dept.',
                     'rating' => '4.9',
                     'students' => '1.2k students',
                     'badge' => 'Popular'
                 ],
                 [
+                    'id' => 'course-2',
+                    'category' => 'mechanical',
+                    'level' => 'al',
                     '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.',
+                    'desc'  => 'Study power transmission systems, active suspension, breaking dynamics and diagnostics.',
                     'author' => 'Tech & Service Campus',
                     'rating' => '4.7',
                     'students' => '850 students',
                     'badge' => 'Bestseller'
                 ],
                 [
+                    'id' => 'course-3',
+                    'category' => 'ev',
+                    'level' => 'al',
                     '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.',
+                    'title' => 'Electric Vehicle Tech Course',
+                    'desc'  => 'Master advanced EV battery management, powertrains, smart networks and electric mobility.',
                     'author' => 'EV Research Institute',
                     'rating' => '4.8',
                     'students' => '640 students',
                     'badge' => 'New'
-                ],
+                ]
             ];
         @endphp
 
         <div class="row g-4 mb-5">
-            @foreach($courses as $index => $course)
-                
-                <div class="col-lg-4 col-md-6 " style="transition-delay: {{ $index * 150 }}ms;">
-                    <div class="card course-card h-100">
-                        
+            @foreach($courses as $key => $course)
+                <div class="col-lg-4 col-md-6 d-flex align-items-stretch animate-on-scroll fade-up-init" style="transition-delay: {{ $key * 100 }}ms;">
+                    <div class="card course-card w-100 d-flex flex-column">
+                        <a href="/courses" style="text-decoration:none;">
                             <div class="course-image-wrapper">
-                            <img src="{{ $course['image'] }}" alt="{{ $course['title'] }}" loading="lazy" decoding="async">
+                                <span class="badge-floating">{{ $course['badge'] }}</span>
+                                <img src="{{ $course['image'] }}" alt="{{ $course['title'] }}" loading="lazy">
                             </div>
                         
                             <div class="card-body">
                                 <h4 class="course-title">{{ $course['title'] }}</h4>
-                            <div class="course-author">{{ $course['author'] }}</div>
-                            
+                                <div class="course-author">
+                                    <i class="fa-solid fa-graduation-cap"></i> {{ $course['author'] }}
+                                </div>
                                 <p class="course-short-desc">{{ $course['desc'] }}</p>
                                 
-                            <div class="course-meta-row">
-                                <span class="badge-bestseller">{{ $course['badge'] }}</span>
-                                <span class="rating-star">
-                                    <i class="fas fa-star"></i> {{ $course['rating'] }}
-                                </span>
-                                <span class="rating-count">({{ $course['students'] }})</span>
-                            </div>
-
-                            <div class="course-features">
-                                <span><i class="fas fa-tools"></i> Practical Labs</span>
-                                <span><i class="fas fa-certificate"></i> Verified Course</span>
+                                <div class="course-features-container">
+                                    <span class="feature-pill"><i class="fas fa-tools"></i> Practical Labs</span>
+                                    <span class="feature-pill"><i class="fas fa-certificate"></i> Accredited</span>
                                 </div>
 
                                 <div class="course-footer">
-                                <a href="/courses" class="read-btn">View Course</a>
+                                    <div class="course-meta-row">
+                                        <span class="rating-star">
+                                            <i class="fas fa-star me-1"></i>{{ $course['rating'] }}
+                                            <span class="rating-count">({{ $course['students'] }})</span>
+                                        </span>
+                                        <span class="small fw-bold" style="color: #2ecc71;"><i class="fa-solid fa-circle-check me-1"></i>Active</span>
+                                    </div>
+                                    <a href="/courses" class="read-btn">View Details</a>
                                 </div>
                             </div>
-
+                        </a>
                     </div>
                 </div>
             @endforeach
         </div>
 
         <div class="text-center animate-on-scroll fade-up-init">
-            <a href="/courses" class="btn btn-theme" style="border-radius: 40px;">
+            <a href="/courses" class="btn btn-theme" style="background:#822424;">
                 View All Courses <i class="fa-solid fa-arrow-right ms-2"></i>
             </a>
         </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">
-
-            <!-- Image: Slides from Left -->
-            <div class="col-lg-6 animate-on-scroll fade-right-init">
-                <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-sm"
-                     width="900"
-                     height="600"
-                     loading="lazy"
-                     decoding="async">
+<section class="section why-section text-white position-relative overflow-hidden" aria-labelledby="why-us-heading" style="background-attachment: fixed;">
+    <div class="why-overlay"></div>
+    <div class="position-absolute top-0 start-0 w-100 h-100" style="z-index: 0;">
+        <img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=1600&q=80" 
+             alt="Background Lab" class="w-100 h-100" style="object-fit: cover; opacity: 0.12; filter: grayscale(30%) brightness(80%);">
     </div>
 
-            <!-- Content: Slides from Right -->
-            <div class="col-lg-6 animate-on-scroll fade-left-init">
-                <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 class="container why-content-wrapper position-relative" style="z-index: 2;">
+        <div class="text-center mb-5 animate-on-scroll fade-up-init">
+            <h2 id="why-us-heading" class="display-5 text-white mb-0 fw-bold" style="letter-spacing: -0.02em;">Why Choose Us?</h2>
         </div>
 
+        <div class="row g-4 justify-content-center animate-on-scroll fade-up-init">
+            <div class="col-md-6 col-lg-4">
+                <div class="custom-feature-card h-100 d-flex flex-column align-items-center text-center p-4" style="border-radius: 20px; transition: all 0.4s ease;">
+                    <div class="icon-box d-flex align-items-center justify-content-center" style="box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-radius: 16px;">
+                        <i class="fa-solid fa-flask-vial fs-3 fa-beat-hover"></i>
+                    </div>
+                    <h4 class="text-white fs-5 mb-3 fw-semibold">Modern Laboratories</h4>
+                    <p class="text-white-50 small mb-0 lh-base">State-of-the-art facilities equipped with latest industrial testing tools.</p>
+                </div>
+            </div>
+
+            <div class="col-md-6 col-lg-4">
+                <div class="custom-feature-card h-100 d-flex flex-column align-items-center text-center p-4" style="border-radius: 20px; transition: all 0.4s ease;">
+                    <div class="icon-box d-flex align-items-center justify-content-center" style="box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-radius: 16px;">
+                        <i class="fa-solid fa-graduation-cap fs-3 fa-bounce-hover"></i>
+                    </div>
+                    <h4 class="text-white fs-5 mb-3 fw-semibold">Qualified Lecturers</h4>
+                    <p class="text-white-50 small mb-0 lh-base">Learn directly from veteran automotive engineers and researchers.</p>
+                </div>
+            </div>
+
+            <div class="col-md-6 col-lg-4">
+                <div class="custom-feature-card h-100 d-flex flex-column align-items-center text-center p-4" style="border-radius: 20px; transition: all 0.4s ease;">
+                    <div class="icon-box d-flex align-items-center justify-content-center" style="box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-radius: 16px;">
+                        <i class="fa-solid fa-car fs-3 fa-shake-hover"></i>
+                    </div>
+                    <h4 class="text-white fs-5 mb-3 fw-semibold">Hands-on Training</h4>
+                    <p class="text-white-50 small mb-0 lh-base">Gain real-world diagnostics experience inside our dedicated workshop floors.</p>
+                </div>
+            </div>
         </div>
     </div>
 </section>
 
 {{-- ===================== CALL TO ACTION ===================== --}}
-<section class="section py-5 animate-on-scroll zoom-in-init">
-    <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>
+<section class="section py-5 text-center animate-on-scroll zoom-in-init">
+    <div class="container">
+        <h2 class="display-6 mb-3">Join the Future of Automotive Engineering</h2>
+        <p class="text-muted mb-4 max-width-600 mx-auto">Shape your technical career through modern innovation, practical mastery, and expert guidance.</p>
+        <a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-theme" style="background: #822424;">Apply Now</a>
     </div>
 </section>
 
+{{-- ===================== COURSE FINDER MODAL ===================== --}}
+
+<div class="modal fade" id="courseFinderModal" tabindex="-1" aria-labelledby="courseFinderModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
+        <div class="modal-content border-0 shadow">
+            
+            <div class="modal-header custom-modal-header  text-white">
+                <h5 class="modal-title fw-bold fs-6 fs-md-5" id="courseFinderModalLabel">
+                    <i class="fa-solid fa-compass me-2"></i>Find Your Course
+                </h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+
+            <div class="modal-body p-3 p-md-4">
+                <form id="courseFinderForm">
+                    
+                    {{-- Qualification Field --}}
+                    <div class="mb-3">
+                        <label for="educationLevel" class="form-label fw-semibold text-dark small fs-6">
+                            <i class="fa-solid fa-user-degree me-1 text-primary"></i> What is your highest educational qualification?
+                        </label>
+                        <select class="form-select form-select-lg border-2 fs-6" id="educationLevel" required>
+                            <option value="" selected disabled>Select Educational Qualification</option>
+                            <option value="ol">Completed Ordinary Level (O/L)</option>
+                            <option value="al">Completed Advanced Level (A/L)</option>
+                            <option value="diploma">Diploma / Vocational Qualification</option>
+                        </select>
+                    </div>
+
+                    {{-- Interest Area Field --}}
+                    <div class="mb-4">
+                        <label for="interestArea" class="form-label fw-semibold text-dark small fs-6">
+                            <i class="fa-solid fa-car-battery me-1 text-primary"></i> Which area of Automotive Engineering interests you most?
+                        </label>
+                        <select class="form-select form-select-lg border-2 fs-6" id="interestArea" required>
+                            <option value="" selected disabled>Select Field of Interest</option>
+                            <option value="mechanical">Automotive Mechanical & Diagnostics</option>
+                            <option value="ev">Electric Vehicles (EV) & Battery Technology</option>
+                            <option value="all">General Automotive Engineering (All Areas)</option>
+                        </select>
+                    </div>
+
+                    {{-- Submit Button --}}
+                    <button type="submit" class="btn btn-theme w-100 py-2.5 fw-bold text-white shadow-sm" style="background:#822424;">
+                        <i class="fa-solid fa-magnifying-glass me-2"></i>Find Recommended Courses
+                    </button>
+                </form>
+
+                {{-- Result Area --}}
+                <div id="recommendedResults" class="mt-4" style="display: none;">
+                    <hr class="my-3 my-md-4">
+                    <h5 class="fw-bold text-success mb-3 fs-6 fs-md-5">
+                        <i class="fa-solid fa-circle-check me-2"></i>Recommended Courses for You:
+                    </h5>
+                    <div id="resultsContainer" class="row g-3">
+                        <!-- JS injected courses will appear here -->
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+
+<!-- <div class="modal fade" id="courseFinderModal" tabindex="-1" aria-labelledby="courseFinderModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content" style="width:60%;">
+            <div class="modal-header custom-modal-header">
+                <h5 class="modal-title fw-bold" id="courseFinderModalLabel">
+                    <i class="fa-solid fa-compass me-2"></i>Find Your Course
+                </h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body p-4">
+                <form id="courseFinderForm">
+                    <div class="mb-3">
+                        <label for="educationLevel" class="form-label fw-semibold text-dark">
+                            <i class="fa-solid fa-user-degree me-1 text-primary"></i> What is your highest educational qualification?
+                        </label>
+                        <select class="form-select border-2" id="educationLevel" required style="  padding: .375rem 2.25rem 2.375rem .75rem;height: 89px;">
+                            <option value="" selected disabled>Select Educational Qualification</option>
+                            <option value="ol">Completed Ordinary Level (O/L)</option>
+                            <option value="al">Completed Advanced Level (A/L)</option>
+                            <option value="diploma">Diploma / Vocational Qualification</option>
+                        </select>
+                    </div>
+
+                    <div class="mb-4">
+                        <label for="interestArea" class="form-label fw-semibold text-dark">
+                             Which area of Automotive Engineering interests you most?
+                        </label>
+                        <select class="form-select border-2" id="interestArea" required style="  padding: .375rem 2.25rem 2.375rem .75rem;height: 89px;">
+                            <option value="" selected disabled>Select Field of Interest</option>
+                            <option value="mechanical">Automotive Mechanical & Diagnostics</option>
+                            <option value="ev">Electric Vehicles (EV) & Battery Technology</option>
+                            <option value="all">General Automotive Engineering (All Areas)</option>
+                        </select>
+                    </div>
+
+                    <button type="submit" class="btn btn-theme w-100" style="background:#822424;">
+                        <i class="fa-solid fa-magnifying-glass me-2"></i>Find Recommended Courses
+                    </button>
+                </form> -->
+
+                {{-- Result Area --}}
+                <!-- <div id="recommendedResults" class="mt-4" style="display: none;">
+                    <hr class="my-4">
+                    <h5 class="fw-bold text-success mb-3">
+                        <i class="fa-solid fa-circle-check me-2"></i>Recommended Courses for You:
+                    </h5>
+                    <div id="resultsContainer" class="row g-3">
+                        
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div> -->
 
 <script>
     document.addEventListener('DOMContentLoaded', function () {
+        // 1. Scroll Animations
         const animatedElements = document.querySelectorAll('.animate-on-scroll');
-
         const observer = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
@@ -486,11 +659,64 @@ body{
                     observer.unobserve(entry.target);  
                 }
             });
-        }, {
-            threshold: 0.15  
+        }, { threshold: 0.1 });
+        animatedElements.forEach(el => observer.observe(el));
+
+        // 2. Auto Open Modal on Site Load
+        const courseModalElement = document.getElementById('courseFinderModal');
+        if (courseModalElement && typeof bootstrap !== 'undefined') {
+            const courseModal = new bootstrap.Modal(courseModalElement);
+            courseModal.show();
+        }
+
+        // 3. Course Recommendation Logic
+        const allCourses = @json($courses);
+        const form = document.getElementById('courseFinderForm');
+        const resultsArea = document.getElementById('recommendedResults');
+        const resultsContainer = document.getElementById('resultsContainer');
+
+        form.addEventListener('submit', function (e) {
+            e.preventDefault();
+            
+            const selectedLevel = document.getElementById('educationLevel').value;
+            const selectedInterest = document.getElementById('interestArea').value;
+
+            // Filter logic
+            const filtered = allCourses.filter(course => {
+                const matchCategory = (selectedInterest === 'all') || (course.category === selectedInterest);
+                const matchLevel = (selectedLevel === 'ol' && course.level === 'ol') || 
+                                   (selectedLevel === 'al') || 
+                                   (selectedLevel === 'diploma');
+                return matchCategory && matchLevel;
             });
 
-        animatedElements.forEach(el => observer.observe(el));
+            // Display Results
+            resultsContainer.innerHTML = '';
+            if (filtered.length > 0) {
+                filtered.forEach(course => {
+                    const cardHTML = `
+                        <div class="col-md-6">
+                            <div class="card h-100 border shadow-sm">
+                                <img src="${course.image}" class="card-img-top" style="height: 120px; object-fit: cover;" alt="${course.title}">
+                                <div class="card-body p-3 d-flex flex-column justify-content-between">
+                                    <div>
+                                        <h6 class="fw-bold mb-1" style="color: var(--primary);">${course.title}</h6>
+                                        <p class="small text-muted mb-2">${course.desc.substring(0, 60)}...</p>
+                                    </div>
+                                    <a href="/courses" class="btn btn-sm btn-outline-primary mt-2" style="color: #fff;
+  background: #953f3f;border-color:white;">View Details</a>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                    resultsContainer.innerHTML += cardHTML;
+                });
+            } else {
+                resultsContainer.innerHTML = `<p class="text-muted">No specific courses matched your criteria. Please explore all available courses.</p>`;
+            }
+
+            resultsArea.style.display = 'block';
+        });
     });
 </script>
 

routes/web.php

@@ -6,6 +6,11 @@ use App\Http\Controllers\StudentPortalController;
 use App\Http\Controllers\ContactMsgController;
 use App\Http\Controllers\FeedbackController;
 use App\Http\Controllers\studentportalnavController;
+use App\Http\Controllers\auth\asswordController;
+use App\Http\Controllers\Auth\ForgotPasswordController;
+use App\Http\Controllers\coursesController;
+use App\Http\Controllers\ApplyController;
+
 
 /*
 |--------------------------------------------------------------------------
@@ -18,7 +23,35 @@ Route::get('/', function () {
     return view('welcome');
 });
  
-Route::post('/studentlogout', [studentportalnavController::class, 'logout']);
+Route::get('/courses', [coursesController::class, 'index'])->name('courses.index');
+ 
+
+Route::middleware(['auth'])->group(function () {
+    Route::get('/apply', [ApplyController::class, 'index'])->name('apply.index');
+    Route::post('/apply', [ApplyController::class, 'store'])->name('apply.store');
+});
+ 
+
+Route::middleware('guest')->group(function () {
+   
+    Route::get('/password/reset', [ForgotPasswordController::class, 'index'])->name('password.request');
+      Route::post('/resetEmail', [ForgotPasswordController::class, 'resetEmail'])->name('password.email');
+
+    Route::post('/verify-otp', [ForgotPasswordController::class, 'verifyOtpEmail'])->name('password.verify.otp');
+
+    
+    Route::post('/update-password', [ForgotPasswordController::class, 'updatePassword'])->name('password.update');
+});
+
+ 
+
+
+ 
+Route::post('/studentlogout', [studentportalnavController::class, 'logout'])->name('student.logout');
+
+Route::get('/StudentProfile', [StudentPortalController::class, 'showProfile'])->name('StudentProfile');
+
+// Route::post('/studentlogout', [studentportalnavController::class, 'logout']);
 
 Route::post('/feedback/store', [FeedbackController::class, 'feedback']) ->middleware('auth') ->name('feedback.store');
  
@@ -58,7 +91,7 @@ Route::get('/student-portal', function () {
 
 
 Route::view('/apply', 'apply')->name('apply');
-Route::view('/courses', 'courses')->name('courses');
+// Route::view('/courses', 'courses')->name('courses');
 Route::view('/students', 'students')->name('students');
 Route::view('/abouts', 'abouts')->name('abouts');
 Route::view('/contact', 'contacts')->name('contact');
@@ -75,4 +108,4 @@ Route::view('/Assignments','Assignments')->name('Assignments');
 Route::view('/Studentguidelines','Studentguidelines')->name('Studentguidelines');
 Route::view('/results','results')->name('results');
 Route::view('/Feedback&Complain','Feedback&Complain')->name('Feedback&Complain');
-Route::view('/StudentProfile','StudentProfile')->name('StudentProfile');
+// Route::view('/StudentProfile','StudentProfile')->name('StudentProfile');