237 lines
10 KiB
HTML
237 lines
10 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block extra_head %}
|
|
<link rel="stylesheet" href="{% static 'css/home.css' %}">
|
|
<link rel="stylesheet" href="{% static 'css/product.css' %}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="hero reveal">
|
|
<div class="hero-copy">
|
|
<p class="eyebrow">Nepal Special Deals</p>
|
|
<h1 class="hero-title">A smarter, more attractive shopping system with the same Hamro Karma theme.</h1>
|
|
<p class="hero-description">Discover featured offers, explore clean dashboard-style insights, and move through cart, checkout, payment, and order tracking with a more polished user experience.</p>
|
|
<div class="hero-buttons">
|
|
<a href="{% url 'product_list' %}" class="btn btn-primary btn-lg">{{ ui.shop_now }}</a>
|
|
<a href="{% url 'my_orders' %}" class="btn btn-secondary btn-lg">Track Orders</a>
|
|
<a href="{% url 'settings' %}" class="btn btn-secondary btn-lg">Customize</a>
|
|
</div>
|
|
|
|
<div class="hero-metric-grid">
|
|
<div class="hero-metric-card reveal">
|
|
<strong>{{ total_products }}</strong>
|
|
<span>Live products</span>
|
|
</div>
|
|
<div class="hero-metric-card reveal">
|
|
<strong>{{ featured_products }}</strong>
|
|
<span>Featured picks</span>
|
|
</div>
|
|
<div class="hero-metric-card reveal">
|
|
<strong>{{ categories_count }}</strong>
|
|
<span>Active categories</span>
|
|
</div>
|
|
<div class="hero-metric-card reveal">
|
|
<strong>{{ avg_rating|floatformat:1 }}/5</strong>
|
|
<span>Average rating</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-highlights">
|
|
{% for deal in special_deals %}
|
|
<div class="highlight-card reveal">
|
|
<span class="highlight-title">{{ deal.title }}</span>
|
|
<p>{{ deal.description }}</p>
|
|
{% if deal.note %}<small>{{ deal.note }}</small>{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="market-features reveal">
|
|
<a href="{% url 'product_list' %}" class="market-pill market-link">
|
|
<strong>{{ ui.products }}</strong>
|
|
<span>{{ total_products }} items ready to browse</span>
|
|
</a>
|
|
<a href="{% url 'product_list' %}?featured=1" class="market-pill market-link">
|
|
<strong>{{ ui.featured }}</strong>
|
|
<span>{{ featured_products }} curated listings</span>
|
|
</a>
|
|
<a href="{% url 'product_list' %}#categories" class="market-pill market-link">
|
|
<strong>{{ ui.categories }}</strong>
|
|
<span>{{ categories_count }} shopping lanes</span>
|
|
</a>
|
|
<div class="market-pill">
|
|
<strong>Verified flow</strong>
|
|
<span>Checkout, payment, and order status are all connected.</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section-shell spotlight-shell reveal">
|
|
<div class="section-heading">
|
|
<div>
|
|
<h2 class="section-title">Category spotlight</h2>
|
|
<p>Explore the strongest categories in the catalog with counts, ratings, and starting price points.</p>
|
|
</div>
|
|
<a href="{% url 'product_list' %}" class="btn btn-secondary">Browse all products</a>
|
|
</div>
|
|
|
|
<div class="spotlight-grid">
|
|
{% for spotlight in category_spotlights %}
|
|
<article class="spotlight-card reveal">
|
|
<div class="spotlight-head">
|
|
<div>
|
|
<p class="spotlight-kicker">Popular category</p>
|
|
<h3>{{ spotlight.category }}</h3>
|
|
</div>
|
|
<span class="spotlight-pill">{{ spotlight.total }} items</span>
|
|
</div>
|
|
<p>Featured picks: {{ spotlight.featured_total }} • Avg rating: {{ spotlight.avg_rating|floatformat:1 }}/5</p>
|
|
<div class="spotlight-meta">
|
|
<span>Starting from Rs. {{ spotlight.best_price|floatformat:0 }}</span>
|
|
<span>Updated live from your catalog</span>
|
|
</div>
|
|
<a href="{% url 'product_list' %}?category={{ spotlight.category|urlencode }}" class="btn btn-primary small">Explore {{ spotlight.category }}</a>
|
|
</article>
|
|
{% empty %}
|
|
<div class="empty-state">
|
|
<h2>No categories available yet.</h2>
|
|
<p>Add products from admin to start building category spotlights.</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="advertised-deals section-shell reveal">
|
|
<div class="section-heading">
|
|
<div>
|
|
<h2 class="section-title">Advertised Deals</h2>
|
|
<p>Shop the hottest offers, discounts, and promotions curated for Nepali customers.</p>
|
|
</div>
|
|
<a href="{% url 'product_list' %}" class="btn btn-secondary">See all offers</a>
|
|
</div>
|
|
{% if advertised_products %}
|
|
<div class="cards deal-cards">
|
|
{% for product in advertised_products %}
|
|
<div class="card deal-card reveal">
|
|
{% if product.image %}
|
|
<img src="{{ product.image.url }}" alt="{{ product.name }}">
|
|
{% else %}
|
|
<div class="product-image-placeholder">No image</div>
|
|
{% endif %}
|
|
<div class="card-content">
|
|
<div class="deal-topline">
|
|
<span class="deal-badge">Save Rs. {{ product.savings|floatformat:0 }}</span>
|
|
<span class="deal-label">{{ product.deal_label }}</span>
|
|
</div>
|
|
<h3>{{ product.name }}</h3>
|
|
<p class="price">Rs. {{ product.discount_price|default:product.price|floatformat:2 }}</p>
|
|
<p class="deal-note">{{ product.category }}</p>
|
|
<div class="card-actions">
|
|
<a href="{% url 'product_detail' product.id %}" class="btn btn-secondary">View Deal</a>
|
|
<a href="{% url 'buy_now' product.id %}" class="btn btn-primary">Buy Now</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="empty-state"><h2>No deals available.</h2><p>Check back soon for new offers.</p></div>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<section class="section-shell experience-shell reveal">
|
|
<div class="section-heading">
|
|
<div>
|
|
<h2 class="section-title">Special experience upgrades</h2>
|
|
<p>These improvements keep the same theme while making the system feel more advanced and more informative.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="experience-grid">
|
|
{% for feature in experience_highlights %}
|
|
<article class="experience-card reveal">
|
|
<span class="experience-badge">{{ feature.badge }}</span>
|
|
<h3>{{ feature.title }}</h3>
|
|
<p>{{ feature.description }}</p>
|
|
</article>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="trending section-shell reveal">
|
|
<div class="section-heading">
|
|
<div>
|
|
<h2 class="section-title">Trending products</h2>
|
|
<p>Find the top selling items handpicked for you.</p>
|
|
</div>
|
|
<a href="{% url 'product_list' %}?sort=newest" class="btn btn-secondary">See fresh arrivals</a>
|
|
</div>
|
|
{% if trending_products %}
|
|
<div class="cards trending-cards">
|
|
{% for product in trending_products %}
|
|
<div class="card reveal">
|
|
{% if product.image %}<img src="{{ product.image.url }}" alt="{{ product.name }}">{% else %}<div class="product-image-placeholder">No image</div>{% endif %}
|
|
<div class="card-content">
|
|
<div class="tag-row">
|
|
{% if product.featured %}<span class="tag badge-pill">Featured</span>{% endif %}
|
|
<span class="tag category-tag">{{ product.category }}</span>
|
|
{% if product.discount_percent %}<span class="tag savings-tag">Save {{ product.discount_percent }}%</span>{% endif %}
|
|
</div>
|
|
<h3>{{ product.name }}</h3>
|
|
<p class="price">Rs. {{ product.display_price|floatformat:2 }}</p>
|
|
<p class="stock">Stock: {{ product.stock }}</p>
|
|
<div class="card-actions">
|
|
<a href="{% url 'product_detail' product.id %}" class="btn btn-secondary">View Product</a>
|
|
<a href="{% url 'add_to_cart' product.id %}?next={{ request.path|urlencode }}" class="btn btn-primary">Add to Cart</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="empty-state"><h2>No products yet.</h2><p>Add products from admin to show them here.</p></div>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<section class="section-shell quick-action-shell reveal">
|
|
<div class="section-heading">
|
|
<div>
|
|
<h2 class="section-title">Quick access</h2>
|
|
<p>Reach the most useful parts of the system faster from the home screen.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="quick-action-grid">
|
|
{% if user.is_authenticated %}
|
|
<a href="{% url 'my_orders' %}" class="quick-action-card reveal">
|
|
<strong>Order dashboard</strong>
|
|
<p>Open your advanced order list with status filters and payment actions.</p>
|
|
</a>
|
|
<a href="{% url 'wishlist' %}" class="quick-action-card reveal">
|
|
<strong>Wishlist</strong>
|
|
<p>Keep favorite products ready for later and move them into the cart faster.</p>
|
|
</a>
|
|
<a href="{% url 'settings' %}" class="quick-action-card reveal">
|
|
<strong>Preferences</strong>
|
|
<p>Change theme, language, and delivery location from one clean settings page.</p>
|
|
</a>
|
|
{% else %}
|
|
<a href="{% url 'register' %}" class="quick-action-card reveal">
|
|
<strong>Create an account</strong>
|
|
<p>Save your wishlist, manage orders, and keep checkout details ready for later.</p>
|
|
</a>
|
|
<a href="{% url 'login' %}" class="quick-action-card reveal">
|
|
<strong>Sign in</strong>
|
|
<p>Return to your cart, payment flow, and order history without losing progress.</p>
|
|
</a>
|
|
<a href="{% url 'product_list' %}" class="quick-action-card reveal">
|
|
<strong>Browse catalog</strong>
|
|
<p>Explore featured products, categories, and smart filters right away.</p>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|