@extends('layouts.app')

@section('title', 'Student Portal')

@section('content')

<style>
:root{
    --primary:#5E244E;
    --secondary:#8B3A74;
    --light:#f8f4f7;
}

.hero{
    background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
    background-size:cover;
    background-position:center;
    color:#fff;
    padding:120px 0;
    text-align:center;
}

.portal-card{
    border:none;
    border-radius:15px;
    transition:.3s;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.portal-card:hover{
    transform:translateY(-8px);
}

.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;
}

.btn-portal{
    background:#5E244E;
    color:#fff;
    border-radius:30px;
    padding:10px 30px;
}

.btn-portal:hover{
    background:#8B3A74;
    color:#fff;
}
</style>

<!-- Hero -->
<section class="hero">
    <div class="container">
        <h1 class="fw-bold">Student Portal</h1>
        <p class="mt-3">
            Access your courses, timetable, assignments, examination results,
            payments and profile from one place.
        </p>

        <a href="#" class="btn btn-portal mt-3">
    Student Login
</a>
    </div>
</section>

<!-- Features -->
<section class="py-5">
<div class="container">

<div class="text-center mb-5">
    <h2>Student Services</h2>
    <p class="text-muted">
        Everything you need during your academic journey.
    </p>
</div>

<div class="row g-4">

<div class="col-md-4">
<div class="card portal-card h-100 text-center p-4">
<div class="portal-icon">
<i class="fa-solid fa-book"></i>
</div>
<h4 class="mt-4">My Courses</h4>
<p class="text-muted">
View enrolled courses and learning materials.
</p>
</div>
</div>

<div class="col-md-4">
<div class="card portal-card h-100 text-center p-4">
<div class="portal-icon">
<i class="fa-solid fa-calendar-days"></i>
</div>
<h4 class="mt-4">Class Timetable</h4>
<p class="text-muted">
Check your weekly lecture schedule.
</p>
</div>
</div>

<div class="col-md-4">
<div class="card portal-card h-100 text-center p-4">
<div class="portal-icon">
<i class="fa-solid fa-file-lines"></i>
</div>
<h4 class="mt-4">Assignments</h4>
<p class="text-muted">
Submit assignments and download resources.
</p>
</div>
</div>

<div class="col-md-4">
<div class="card portal-card h-100 text-center p-4">
<div class="portal-icon">
<i class="fa-solid fa-square-poll-vertical"></i>
</div>
<h4 class="mt-4">Exam Results</h4>
<p class="text-muted">
View semester and final examination results.
</p>
</div>
</div>

<div class="col-md-4">
<div class="card portal-card h-100 text-center p-4">
<div class="portal-icon">
<i class="fa-solid fa-credit-card"></i>
</div>
<h4 class="mt-4">Fee Payments</h4>
<p class="text-muted">
Pay course fees and download payment receipts.
</p>
</div>
</div>

<div class="col-md-4">
<div class="card portal-card h-100 text-center p-4">
<div class="portal-icon">
<i class="fa-solid fa-user"></i>
</div>
<h4 class="mt-4">Student Profile</h4>
<p class="text-muted">
Update your personal information securely.
</p>
</div>
</div>

</div>

</div>
</section>

<!-- Quick Links -->
<section class="py-5 bg-light">
<div class="container">

<div class="text-center mb-5">
<h2>Quick Links</h2>
</div>

<div class="row text-center">

<div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100">
Academic Calendar
</a>
</div>

<div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100">
Student Handbook
</a>
</div>

<div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100">
Examination Notices
</a>
</div>

<div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100">
Contact Support
</a>
</div>

</div>

</div>
</section>

<!-- CTA -->
<section class="py-5">
<div class="container text-center">

<h2>Ready to Access Your Student Account?</h2>

<p class="text-muted">
Log in to manage your academic activities and stay updated.
</p>

<a href="#" class="btn btn-portal mt-3">
    Student Login
</a>

</div>
</section>

@endsection