120 lines
6.1 KiB
HTML
120 lines
6.1 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block content %}
|
|
<!-- Hero Section -->
|
|
<section class="hero-section py-5 mb-5" style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); position: relative; overflow: hidden;">
|
|
<div class="container py-5">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6 mb-5 mb-lg-0">
|
|
<h1 class="display-3 mb-4" style="line-height: 1.1;">Define Your <span style="color: var(--accent-color);">Minimalist</span> Style.</h1>
|
|
<p class="lead mb-5 text-secondary">Discover our curated collection of premium gadgets and lifestyle essentials designed for the modern home.</p>
|
|
<div class="d-flex gap-3">
|
|
<a href="#products" class="btn btn-primary btn-lg px-4">Shop Collection</a>
|
|
<a href="#" class="btn btn-outline-dark btn-lg px-4">Learn More</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="position-relative">
|
|
<div class="hero-shape" style="position: absolute; width: 400px; height: 400px; background: rgba(244, 63, 94, 0.1); border-radius: 50%; filter: blur(50px); top: -50px; right: -50px; z-index: 0;"></div>
|
|
<img src="https://images.pexels.com/photos/129731/pexels-photo-129731.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Hero Image" class="img-fluid rounded-4 shadow-lg position-relative" style="z-index: 1;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Filter & Search Section -->
|
|
<section class="mb-5" id="products">
|
|
<div class="container">
|
|
<div class="row align-items-center mb-4">
|
|
<div class="col-md-6 mb-3 mb-md-0">
|
|
<h2 class="mb-0">Featured Products</h2>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<form action="{% url 'index' %}" method="GET" class="d-flex gap-2">
|
|
<input type="text" name="q" class="form-control rounded-pill px-4" placeholder="Search products..." value="{{ query|default:'' }}">
|
|
{% if selected_category %}
|
|
<input type="hidden" name="category" value="{{ selected_category }}">
|
|
{% endif %}
|
|
<button type="submit" class="btn btn-primary rounded-pill px-4">Search</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Categories -->
|
|
<div class="d-flex gap-2 overflow-auto pb-3 mb-5" style="scrollbar-width: none;">
|
|
<a href="{% url 'index' %}" class="btn {% if not selected_category %}btn-dark{% else %}btn-outline-dark{% endif %} rounded-pill px-4">All</a>
|
|
{% for category in categories %}
|
|
<a href="{% url 'index' %}?category={{ category.id }}{% if query %}&q={{ query }}{% endif %}"
|
|
class="btn {% if selected_category == category.id %}btn-dark{% else %}btn-outline-dark{% endif %} rounded-pill px-4">
|
|
{{ category.name }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Product Grid -->
|
|
<div class="row g-4">
|
|
{% for product in products %}
|
|
<div class="col-sm-6 col-md-4 col-lg-3">
|
|
<div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden product-card">
|
|
<a href="{% url 'product_detail' product.pk %}" class="text-decoration-none">
|
|
<div class="position-relative overflow-hidden" style="height: 250px;">
|
|
{% if product.image_url %}
|
|
<img src="{% static product.image_url %}" class="card-img-top h-100 w-100 object-fit-cover transition-scale" alt="{{ product.title }}">
|
|
{% else %}
|
|
<div class="h-100 w-100 bg-light d-flex align-items-center justify-content-center">
|
|
<span class="text-muted">No image</span>
|
|
</div>
|
|
{% endif %}
|
|
<div class="position-absolute top-0 end-0 p-3">
|
|
<span class="badge bg-white text-dark shadow-sm rounded-pill">${{ product.price }}</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<div class="card-body p-4 d-flex flex-column">
|
|
<small class="text-uppercase text-secondary fw-bold" style="font-size: 0.7rem; letter-spacing: 1px;">{{ product.category.name }}</small>
|
|
<h5 class="card-title mt-1 mb-2">
|
|
<a href="{% url 'product_detail' product.pk %}" class="text-decoration-none text-dark">{{ product.title }}</a>
|
|
</h5>
|
|
<p class="card-text text-secondary small mb-4 text-truncate-2">{{ product.description }}</p>
|
|
<div class="mt-auto">
|
|
<a href="{% url 'add_to_cart' product.pk %}" class="btn btn-outline-dark w-100 rounded-pill">Add to Cart</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="col-12 text-center py-5">
|
|
<p class="text-muted">No products found matching your criteria.</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.product-card {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
.product-card:hover {
|
|
transform: translateY(-10px);
|
|
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04) !important;
|
|
}
|
|
.transition-scale {
|
|
transition: transform 0.5s ease;
|
|
}
|
|
.product-card:hover .transition-scale {
|
|
transform: scale(1.1);
|
|
}
|
|
.text-truncate-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
.object-fit-cover {
|
|
object-fit: cover;
|
|
}
|
|
</style>
|
|
{% endblock %} |