91 lines
3.0 KiB
HTML
91 lines
3.0 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}منار التحفيظ - الرئيسية{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
.hero-section {
|
|
background: linear-gradient(135deg, rgba(0, 77, 64, 0.8), rgba(253, 251, 246, 0.5));
|
|
padding: 100px 0;
|
|
color: white;
|
|
}
|
|
.hero-section h1 {
|
|
font-size: 3.5rem;
|
|
font-weight: 700;
|
|
color: white;
|
|
}
|
|
.hero-section .lead {
|
|
font-size: 1.5rem;
|
|
}
|
|
.section {
|
|
padding: 60px 0;
|
|
}
|
|
.teacher-card {
|
|
border: none;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="hero-section text-center">
|
|
<div class="container">
|
|
<h1>أنر دربك بحفظ كتاب الله</h1>
|
|
<p class="lead">انضم إلينا في رحلة إيمانية لتعلم وحفظ القرآن الكريم مع نخبة من المعلمين المهرة.</p>
|
|
<a href="#" class="btn btn-secondary btn-lg">اكتشف برامجنا</a>
|
|
</div>
|
|
</div>
|
|
|
|
<section id="about-snippet" class="section bg-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-8 offset-md-2 text-center">
|
|
<h2>عن منار التحفيظ</h2>
|
|
<p class="lead">نحن مؤسسة تعليمية تهدف إلى تيسير تعلم القرآن الكريم وحفظه لجميع الأعمار حول العالم، باستخدام أساليب تفاعلية ومنهجية مبتكرة.</p>
|
|
<a href="/about" class="btn btn-primary">اعرف المزيد</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="teachers-preview" class="section">
|
|
<div class="container">
|
|
<div class="row mb-4">
|
|
<div class="col text-center">
|
|
<h2>نخبة من المعلمين</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="card teacher-card text-center p-3">
|
|
<img src="https://i.pravatar.cc/150?img=1" class="rounded-circle mx-auto" alt="Teacher">
|
|
<div class="card-body">
|
|
<h5 class="card-title">الشيخ أحمد المصري</h5>
|
|
<p class="card-text">إجازة في القراءات العشر</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card teacher-card text-center p-3">
|
|
<img src="https://i.pravatar.cc/150?img=2" class="rounded-circle mx-auto" alt="Teacher">
|
|
<div class="card-body">
|
|
<h5 class="card-title">الأستاذة فاطمة الهاشمي</h5>
|
|
<p class="card-text">خبرة 10 سنوات في تعليم الأطفال</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card teacher-card text-center p-3">
|
|
<img src="https://i.pravatar.cc/150?img=3" class="rounded-circle mx-auto" alt="Teacher">
|
|
<div class="card-body">
|
|
<h5 class="card-title">الدكتور يوسف عبد الرحمن</h5>
|
|
<p class="card-text">متخصص في علوم التجويد</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|