87 lines
4.5 KiB
HTML
87 lines
4.5 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block content %}
|
|
<section class="hero-section py-5 mb-5" style="background: linear-gradient(135deg, var(--primary-navy) 0%, var(--slate-blue) 100%); color: white;">
|
|
<div class="container py-5">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6">
|
|
<h1 class="display-3 fw-bold mb-4">Elevate Your Future with Expert Guidance</h1>
|
|
<p class="lead mb-5 opacity-75">Discover a curated catalog of world-class courses taught by leading academics and industry professionals.</p>
|
|
<div class="d-flex gap-3">
|
|
<a href="#catalog" class="btn btn-gold px-4 py-3">Browse Catalog</a>
|
|
<a href="{% url 'signup' %}" class="btn btn-outline-light px-4 py-3">Join for Free</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-5 offset-lg-1 d-none d-lg-block">
|
|
<div class="p-4 bg-white bg-opacity-10 rounded-4 shadow-lg" style="backdrop-filter: blur(10px);">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="bg-gold p-2 rounded-circle me-3" style="width: 40px; height: 40px; background-color: var(--academic-gold);"></div>
|
|
<div class="flex-grow-1 bg-white bg-opacity-20 rounded" style="height: 10px;"></div>
|
|
</div>
|
|
<div class="bg-white bg-opacity-20 rounded mb-2" style="height: 150px;"></div>
|
|
<div class="bg-white bg-opacity-20 rounded" style="height: 10px; width: 60%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="catalog" class="container">
|
|
<div class="row mb-5 align-items-end">
|
|
<div class="col-md-6">
|
|
<h2 class="display-5 mb-0">Our Courses</h2>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<form method="get" class="d-flex gap-2">
|
|
<input type="text" name="q" class="form-control" placeholder="Search courses..." value="{{ query }}">
|
|
<select name="level" class="form-select" style="width: 150px;">
|
|
<option value="">All Levels</option>
|
|
{% for l in levels %}
|
|
<option value="{{ l }}" {% if level == l %}selected{% endif %}>{{ l }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<button type="submit" class="btn btn-primary">Filter</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
{% for course in courses %}
|
|
<div class="col-md-4">
|
|
<div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
|
|
{% if course.image_url %}
|
|
<img src="{{ course.image_url }}" class="card-img-top" alt="{{ course.title }}" style="height: 200px; object-fit: cover;">
|
|
{% else %}
|
|
<div class="bg-secondary bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
|
|
<span class="text-muted">No Image Available</span>
|
|
</div>
|
|
{% endif %}
|
|
<div class="card-body p-4">
|
|
<div class="d-flex justify-content-between align-items-start mb-2">
|
|
<span class="badge bg-opacity-10 text-primary bg-primary px-3 py-2 rounded-pill">{{ course.level }}</span>
|
|
<span class="fw-bold text-navy">${{ course.price }}</span>
|
|
</div>
|
|
<h5 class="card-title fw-bold mb-3">{{ course.title }}</h5>
|
|
<p class="card-text text-muted small mb-4">{{ course.description|truncatewords:20 }}</p>
|
|
<div class="d-flex align-items-center">
|
|
{% if course.instructor.photo_url %}
|
|
<img src="{{ course.instructor.photo_url }}" class="rounded-circle me-2" width="30" height="30">
|
|
{% endif %}
|
|
<small class="text-muted">By {{ course.instructor.name }}</small>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-white border-0 p-4 pt-0">
|
|
<a href="{% url 'course_detail' course.slug %}" class="btn btn-outline-primary w-100 rounded-3">View Details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="col-12 text-center py-5">
|
|
<p class="lead text-muted">No courses found matching your criteria.</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|