{% extends 'base.html.twig' %}

{% block title %}Home
{% endblock %}

{% block body %}
	{% include 'includes/header.html.twig' %}
	<main>
		<section class="section-hero">
			<div class="container">
				<div class="row">
					<div class="col-md-6">
						<div class="banner-col-left">
							<div class="container-col-left">
								<h1>Best online platform for education.</h1>
								<div class="description-text">
									<p>
										Online courses from the world's leading
																																																																																																																					                                    experts. Join 17 million learners today.
									</p>
								</div>

								<div class="d-flex align-items-center gap-4 w-100">
									<button class="btn-get-started">
										<span class="icon">
											<img src="{{ asset('assets/icons/likeIcon.svg') }}" alt="">
										</span>
										Get started
									</button>

									<a href="#" class="btn-how-it-works">
										<span class="icon">
											<img src="{{ asset('assets/icons/YtbIcon.svg') }}" alt="">
										</span>
										How it works
									</a>
								</div>

								<div class="info-section">
									<div class="info-box">
										<h4 class="info-title">Tutors</h4>
										<hr class="info-divider">
										<p class="info-value">260+</p>
									</div>
									<div class="info-box">
										<h4 class="info-title">Students</h4>
										<hr class="info-divider">
										<p class="info-value">5340+</p>
									</div>
									<div class="info-box">
										<h4 class="info-title">Courses</h4>
										<hr class="info-divider">
										<p class="info-value">280+</p>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="col-md-6 p-5 text-center banner-colRight">
						<img src="{{ asset('assets/images/image-banner02.png') }}" alt="">
					</div>
				</div>
			</div>
		</section>

		<section class="learning-section">
			<div class="container">
				<div class="row">
					<div class="col-md-6">
						<div class="h-100">
							<div class="learning-col-left">
								<div class="d-flex align-items-center mb-3 Guaranteed-text">
									<img src="{{ asset('assets/icons/icon-certified.svg') }}" alt="Guaranteed and certified">
									<h6 class="m-0">Guaranteed and certified</h6>
								</div>
								<h1>Online learning wherever and whenever.</h1>
								<a href="#" class="btn-Learn-more mt-3">Learn more
									<span>
										<img src="{{ asset('assets/icons/ArrowIcon.svg') }}" alt="ArrowIcon">
									</span>
								</a>
							</div>
						</div>
					</div>

					<div class="col-md-6">
						<div class="features">
							<div class="row mb-5">
								<div class="col-md-6 feature-item">
									<h2 class="numbering">01</h2>
									<h5 class="feature-title">Flexible schedule</h5>
									<p>eLearning allows learners to quickly and more easily complete their training.</p>
								</div>
							</div>

							<div class="row justify-content-end mb-5">
								<div class="col-md-6 feature-item">
									<h2 class="numbering">02</h2>
									<h5 class="feature-title">Expert Instructor</h5>
									<p>eLearning allows learners to quickly and more easily complete their training.</p>
								</div>
							</div>

							<div class="row">
								<div class="col-md-6 feature-item">
									<h2 class="numbering">03</h2>
									<h5 class="feature-title">Flexible schedule</h5>
									<p>eLearning allows learners to quickly and more easily complete their training.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</section>

		<section class="courses-section" data-controller="course-filter">
			<div class="container">
				<div class="container-courses">
					<div class="d-flex justify-content-between align-items-center mb-5">
						<div class="popular-courses">Popular courses</div>
						<div class="courses-nav">
							<ul>
								<li>
									<a href="#" data-action="course-filter#filter" data-category="all">All</a>
								</li>
								
								{% for category in service_categories.getCourseCategories %}
									<li>
										<a href="#" data-action="course-filter#filter" data-category="{{ category.slug }}">
											{{ category.category }}
										</a>
									</li>
								{% endfor %}
							</ul>
						</div>
					</div>

					<!-- Appel de la liste des cours -->
					<div data-course-filter-target="courseList">
						{% include 'components/course_list.html.twig' with { 'courses': courses } %}
					</div>
					<div class="text-end mt-5">
						<a href="{{ path('app_course') }}" class="show-more-courses mt-3">
							Show more
							<span>
								<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewbox="0 0 25 25" fill="none">
									<path d="M5.52203 12.75H19.522M19.522 12.75L13.522 6.75M19.522 12.75L13.522 18.75" stroke="#041228" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
								</svg>
							</span>
						</a>
					</div>
				</div>
			</div>
		</section>


		<section class="online-learning-section">
			<div class="container">
				<div class="row">
					<div class="col-md-6">
						<div class="learnin-col-left">
							<img src="{{ asset('assets/images/student03.png') }}" alt="">
						</div>
					</div>
					<div class="col-md-6">
						<div class="learning-col-left">
							<div class="d-flex align-items-center mb-3 Guaranteed-text">
								<img src="{{ asset('assets/icons/PremiumIcon.svg') }}" alt="Guaranteed and certified">
								<h6 class="m-0">Premium learning experience</h6>
							</div>
							<h1>Providing amazing online courses.</h1>
							<div class="accordion" id="accordionExample">
								<div class="accordion-section active-section">
									<div class="accordion-header" id="headingOne">
										<h3 class="collapsed" data-bs-toggle="collapse" data-bs-target="#skills-details" aria-expanded="false" aria-controls="skills-details">
											Master the skills that matter to you
										</h3>
									</div>
									<div id="skills-details" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
										<p class="accordion-body details">
											Web-based training you can consume at your own pace. Courses are interactive.
										</p>
									</div>
								</div>

								<div class="accordion-section">
									<div class="accordion-header" id="headingTwo">
										<h3 class="collapsed" data-bs-toggle="collapse" data-bs-target="#methods-details" aria-expanded="false" aria-controls="methods-details">
											Connect with effective methods
										</h3>
									</div>
									<div id="methods-details" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
										<p class="accordion-body details">
											Learn using proven techniques and methods that work.
										</p>
									</div>
								</div>

								<div class="accordion-section">
									<div class="accordion-header" id="headingThree">
										<h3 class="collapsed" data-bs-toggle="collapse" data-bs-target="#learning-details" aria-expanded="false" aria-controls="learning-details">
											Increase your learning skills
										</h3>
									</div>
									<div id="learning-details" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
										<p class="accordion-body details">
											Build habits that make you a more effective learner.
										</p>
									</div>
								</div>
							</div>

							<div class="text-end">
								<a href="#" class="btn-Learn-more mt-3">Learn more
									<span>
										<img src="{{ asset('assets/icons/ArrowIcon.svg') }}" alt="ArrowIcon">
									</span>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="feedback-section">
			<div class="container">
				<div class="row align-items-center">
					<div class="col-md-6 mb-5">
						<div>
							<div class="feedback-col-left">
								<div class="d-flex align-items-center mb-3 Guaranteed-text">
									<img src="{{ asset('assets/icons/feedbackIcon.svg') }}" alt="Guaranteed and certified">
									<h6 class="m-0">Premium learning experience</h6>
								</div>
								<h1 class="trusted">Trusted by genius people.</h1>
								<div class="description-text">
									<p>
										Lorem ipsum dolor sit amet consectetur adipiscing elit venenatis dictum nec.
									</p>
								</div>
								<div class="d-flex align-items-center gap-4 w-100">
									<h1>99%</h1>
									<p>Students complete course successfully.</p>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel">
							<div class="carousel-inner">
								<div class="carousel-item active">
									<div class="feedback-card">
										<div class="row">
											<div class="col-md-5 feedback-img">
												<img src="{{ asset('assets/images/feedbackImg.png') }}" alt="Profile Picture" class="">
											</div>
											<div class="col-md-7 p-5">
												<div class="stars mb-4">
													<img src="{{ asset('assets/icons/starsIcons.svg') }}" alt="">
												</div>
												<p class="mb-4">Course materials were good, the mentoring approach was good and working with other people via the internet was good.</p>
												<h5>Samia Karim</h5>
												<p class="feedback-author">Lorem ipsum</p>
											</div>
										</div>
									</div>
								</div>
								<div class="carousel-item">
									<div class="feedback-card">
										<div class="row">
											<div class="col-md-5 feedback-img">
												<img src="{{ asset('assets/images/feedbackImg.png') }}" alt="Profile Picture" class="">
											</div>
											<div class="col-md-7 p-5">
												<div class="stars mb-4">
													<img src="{{ asset('assets/icons/starsIcons.svg') }}" alt="">
												</div>
												<p class="mb-4">Course materials were good, the mentoring approach was good and working with other people via the internet was good.</p>
												<h5>Samia Karim</h5>
												<p class="feedback-author">Lorem ipsum</p>
											</div>
										</div>
									</div>
								</div>
								<div class="carousel-item">
									<div class="feedback-card">
										<div class="row">
											<div class="col-md-5 feedback-img">
												<img src="{{ asset('assets/images/feedbackImg.png') }}" alt="Profile Picture" class="">
											</div>
											<div class="col-md-7 p-5">
												<div class="stars mb-4">
													<img src="{{ asset('assets/icons/starsIcons.svg') }}" alt="">
												</div>
												<p class="mb-4">Course materials were good, the mentoring approach was good and working with other people via the internet was good.</p>
												<h5>Samia Karim</h5>
												<p class="feedback-author">Lorem ipsum</p>
											</div>
										</div>
									</div>
								</div>
							</div>
							<button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev">
								<span class="carousel-control-prev-icon" aria-hidden="true"></span>
								<span class="visually-hidden">Previous</span>
							</button>
							<button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next">
								<span class="carousel-control-next-icon" aria-hidden="true"></span>
								<span class="visually-hidden">Next</span>
							</button>
						</div>
					</div>
				</div>

				<div class="row mt-5">
					<div class="col-12 brands d-flex justify-content-around align-items-center">
						<img src="{{ asset('assets/images/logo1.png') }}" alt="Walmart">
						<img src="{{ asset('assets/images/logo2.png') }}" alt="Logitech">
						<img src="{{ asset('assets/images/logo3.png') }}" alt="Invision">
						<img src="{{ asset('assets/images/logo4.png') }}" alt="Yahoo!">
						<img src="{{ asset('assets/images/logo5.png') }}" alt="Monday">
					</div>
				</div>
			</div>
		</section>

		<section class="articles-section">
			<div class="container my-5">
				<h2 class="mb-4">Latest articles</h2>
				<div class="row">
					<div class="col-md-4">
						<div class="article-card">
							<img src="{{ asset('assets/images/imgArticl01.png') }}" alt="imgArticle" class="article-Img"/>
							<div class="category-tag">Web Development</div>
							<div class="article-meta">
								<div class="mb-3">
									<img src="{{ asset('assets/images/Article-Author01.png') }}" alt="Author-Img">
									<span>by Lorem Ipsum</span>
								</div>
								<h3 class="article-title">Learn Python Programming Masterclass</h3>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="article-card">
							<img src="{{ asset('assets/images/imgArticl01.png') }}" alt="imgArticle" class="article-Img"/>
							<div class="category-tag article-dev">Web Development</div>
							<div class="article-meta">
								<div class="mb-3">
									<img src="{{ asset('assets/images/Article-Author02.png') }}" alt="Author-Img">
									<span>by Lorem Ipsum</span>
								</div>
								<h3 class="article-title">Learn Python Programming Masterclass</h3>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="article-card">
							<img src="{{ asset('assets/images/imgArticl01.png') }}" alt="imgArticle" class="article-Img"/>
							<div class="category-tag article-mobile-dev">Web Development</div>
							<div class="article-meta">
								<div class="mb-3">
									<img src="{{ asset('assets/images/Article-Author.png') }}" alt="Author-Img">
									<span>by Lorem Ipsum</span>
								</div>
								<h3 class="article-title">Learn Python Programming Masterclass</h3>
							</div>
						</div>
					</div>
				</div>

				{% include 'includes/banner_help.html.twig' %}
			</div>
		</section>


	</main>
	{% include 'includes/footer.html.twig' %}

{% endblock %}