{% extends 'base.html' %}
{% load static %}
{% block title %} Home{% endblock %}
{% block content %}
<!-- Carousel Start -->
<div class="container-fluid px-0 mb-5">
<div id="header-carousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="{% static 'img/carousel-1.png' %}" alt="Image">
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7 text-center">
<p class="fs-4 text-white animated zoomIn">Welcome to the <strong class="text-dark">Online Store</strong></p>
<h3 class=" text-dark mb-4 animated zoomIn">Explore our collection of antiques and collectables.</h3>
<a href="" class="btn btn-light rounded-pill py-3 px-5 animated zoomIn">Explore More</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="{% static 'img/carousel-2.png' %}" alt="Image">
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7 text-center">
<p class="fs-4 text-white animated zoomIn">Welcome to the <strong class="text-dark">Online Store</strong></p>
<h3 class=" text-dark mb-4 animated zoomIn">The Best Way to manage and control online market .</h3>
<a href="" class="btn btn-light rounded-pill py-3 px-5 animated zoomIn">Explore More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#header-carousel"
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="#header-carousel"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- Carousel End -->
<!-- Store Start -->
<div class="container-xxl py-5">
<div class="container">
<div class="section-title text-center mx-auto wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
<p class="fs-5 fw-medium fst-italic text-primary">Online Store</p>
<h1 class="display-6">View Items, Sets, Repositories and Sales made!!</h1>
</div>
<div class="row g-4">
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
<div class="store-item position-relative text-center">
<img class="img-fluid" src="{% static 'img/carousel-1.png' %}" alt="">
<div class="p-4">
<h4 class="mb-3">ITEMS</h4>
<p>Aliqu diam amet diam et eos. Clita erat ipsum lorem erat ipsum lorem sit sed</p>
</div>
<div class="store-overlay">
<a href="{% url 'item_list' %}" class="btn btn-primary rounded-pill py-2 px-4 m-2">More Detail <i class="fa fa-arrow-right ms-2"></i></a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.3s">
<div class="store-item position-relative text-center">
<img class="img-fluid" src="{% static 'img/carousel-2.png' %}" alt="">
<div class="p-4">
<h4 class="mb-3">SETS</h4>
<p>Aliqu diam amet diam et eos. Clita erat ipsum lorem erat ipsum lorem sit sed</p>
</div>
<div class="store-overlay">
<a href="{% url 'set_list' %}" class="btn btn-primary rounded-pill py-2 px-4 m-2">More Detail <i class="fa fa-arrow-right ms-2"></i></a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
<div class="store-item position-relative text-center">
<img class="img-fluid" src="{% static 'img/repository.jpg' %}" alt="">
<div class="p-4">
<h4 class="mb-3">Repositories</h4>
<p>Aliqu diam amet diam et eos. Clita erat ipsum lorem erat ipsum lorem sit sed</p>
</div>
<div class="store-overlay">
<a href="{% url 'repository_list' %}" class="btn btn-primary rounded-pill py-2 px-4 m-2">More Detail <i class="fa fa-arrow-right ms-2"></i></a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
<div class="store-item position-relative text-center">
<img class="img-fluid" src="{% static 'img/store-product-3.jpg' %}" alt="">
<div class="p-4">
<h4 class="mb-3">SALES</h4>
<p>Aliqu diam amet diam et eos. Clita erat ipsum lorem erat ipsum lorem sit sed</p>
</div>
<div class="store-overlay">
<a href="{% url 'sale_list' %}" class="btn btn-primary rounded-pill py-2 px-4 m-2">More Detail <i class="fa fa-arrow-right ms-2"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Store End -->
<!-- Video Start -->
<div class="container-fluid video my-5">
<div class="container">
<div class="row g-0">
<div class="col-lg-6 py-5 wow fadeIn" data-wow-delay="0.1s">
<div class="py-5">
<h1 class="display-6 mb-4">This is the <span class="text-white">Video</span> Demo <span class="text-white">for the Project</span></h1>
<h5 class="fw-normal lh-base fst-italic text-white mb-5">view the project set up and configuration </h5>
<div class="row g-4 mb-5">
<div class="col-sm-6">
<div class="d-flex align-items-center">
<div class="flex-shrink-0 btn-lg-square bg-white text-primary rounded-circle me-3">
<i class="fa fa-check"></i>
</div>
<span class="text-dark">Project Setup</span>
</div>
</div>
<div class="col-sm-6">
<div class="d-flex align-items-center">
<div class="flex-shrink-0 btn-lg-square bg-white text-primary rounded-circle me-3">
<i class="fa fa-check"></i>
</div>
<span class="text-dark">Frontend Design</span>
</div>
</div>
<div class="col-sm-6">
<div class="d-flex align-items-center">
<div class="flex-shrink-0 btn-lg-square bg-white text-primary rounded-circle me-3">
<i class="fa fa-check"></i>
</div>
<span class="text-dark">Backend Intergration</span>
</div>
</div>
<div class="col-sm-6">
<div class="d-flex align-items-center">
<div class="flex-shrink-0 btn-lg-square bg-white text-primary rounded-circle me-3">
<i class="fa fa-check"></i>
</div>
<span class="text-dark">Ease of use</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s">
<div class="h-100 d-flex align-items-center justify-content-center" style="min-height: 300px;">
<button type="button" class="btn-play" >
<a target="_blank" href=""><span></span></a>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Video End -->
<!-- Video Modal Start -->
<div class="modal modal-video fade" id="videoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content rounded-0">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Youtube Video</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- 16:9 aspect ratio -->
<div class="ratio ratio-16x9">
<iframe class="embed-responsive-item" src="" id="video" allowfullscreen allowscriptaccess="always"
allow="autoplay"></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- Video Modal End -->
<!-- Contact Start -->
<div class="container-xxl contact py-5">
<div class="container">
<div class="section-title text-center mx-auto wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
<p class="fs-5 fw-medium fst-italic text-primary">Team Members</p>
<h1 class="display-6">We are a group of 3 members</h1>
</div>
<div class="row justify-content-center wow fadeInUp" data-wow-delay="0.1s">
<div class="col-lg-8">
<p class="text-center mb-5">Below are the team members that facilitated in creation of this project . each user and the role played </p>
<div class="row g-5">
<div class="col-md-4 text-center wow fadeInUp" data-wow-delay="0.4s">
<div class="btn-square mx-auto mb-3">
<i class="fa fa-user fa-2x text-white"></i>
</div>
<p class="mb-2">M Tahsin</p>
<p class="mb-0">Role: Project Manager &
Quality Assurance Analyst
</p>
</div>
<div class="col-md-4 text-center wow fadeInUp" data-wow-delay="0.4s">
<div class="btn-square mx-auto mb-3">
<i class="fa fa-user fa-2x text-white"></i>
</div>
<p class="mb-2">meshaal albaker
</p>
<p class="mb-0">Role: Backend</p>
</div>
<div class="col-md-4 text-center wow fadeInUp" data-wow-delay="0.4s">
<div class="btn-square mx-auto mb-3">
<i class="fa fa-user fa-2x text-white"></i>
</div>
<p class="mb-2">roaa alzahrani</p>
<p class="mb-0">Role: Frontend</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Start -->
{% endblock %}