@extends('layouts.frontend')
@section('title','Scholarships')
@section('content')
<style>
.hero{background:#0bb43c;color:#fff;padding:70px 20px;text-align:center}
.container{max-width:1100px;margin:auto;padding:30px 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.card{border:1px solid #ddd;border-radius:10px;padding:20px;background:#fff}
.btn{background:#0bb43c;color:#fff;padding:12px 22px;border-radius:6px;text-decoration:none;display:inline-block}
.section{margin:50px 0}
ul{padding-left:20px}
</style>

<div class="hero">
<h1>VONF Scholarship Programme</h1>
<p>Empowering students through access to quality education.</p>
<a class="btn" href="{{ route('frontend.contact') }}">Apply Now</a>
</div>

<div class="container">
<div class="section">
<h2>About the Programme</h2>
<p>The Veronica Onyeneke Foundation (VONF) Scholarship Programme supports deserving students through financial assistance, mentorship, leadership development, and educational opportunities.</p>
</div>

<div class="section">
<h2>Scholarship Categories</h2>
<div class="grid">
<div class="card"><h3>Secondary School</h3><p>Support for outstanding secondary school students.</p></div>
<div class="card"><h3>Undergraduate</h3><p>Scholarships for university students.</p></div>
<div class="card"><h3>Vocational Skills</h3><p>Training grants for practical skills acquisition.</p></div>
</div>
</div>

<div class="section">
<h2>Eligibility</h2>
<ul>
<li>Be academically qualified.</li>
<li>Demonstrate financial need.</li>
<li>Provide valid identification.</li>
<li>Submit complete application.</li>
</ul>
</div>

<div class="section">
<h2>Required Documents</h2>
<ul>
<li>Application Form</li>
<li>Passport Photograph</li>
<li>Academic Results</li>
<li>Admission Letter (if applicable)</li>
<li>Valid Identification</li>
</ul>
</div>

<div class="section">
<h2>Selection Process</h2>
<ol>
<li>Application Submission</li>
<li>Document Review</li>
<li>Interview (if required)</li>
<li>Final Selection</li>
<li>Award Notification</li>
</ol>
</div>

<div class="section">
<h2>Benefits</h2>
<div class="grid">
<div class="card">Tuition Assistance</div>
<div class="card">Learning Materials</div>
<div class="card">Mentorship</div>
<div class="card">Leadership Training</div>
</div>
</div>

<div class="section">
<h2>Frequently Asked Questions</h2>
<p><strong>Who can apply?</strong><br>Eligible students meeting programme requirements.</p>
<p><strong>Is it fully funded?</strong><br>Funding depends on the scholarship category.</p>
</div>

<div class="section" style="text-align:center">
<h2>Ready to Apply?</h2>
<p>Join thousands of young people empowered through education.</p>
<a class="btn" href="{{ route('frontend.contact') }}">Start Application</a>
</div>
</div>
@endsection