230 lines
7.9 KiB
HTML
230 lines
7.9 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block styles %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='js/home.js') }}" defer></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<section class="hero-section">
|
|
<div class="hero-content">
|
|
<h1 class="hero-title">Welcome to WearWell Shop</h1>
|
|
<p class="hero-subtitle">Discover premium fashion for every occasion. Quality clothing, unbeatable prices, and style
|
|
that lasts.</p>
|
|
|
|
<div class="hero-search">
|
|
<form action="{{ url_for('main.products') }}" method="GET">
|
|
<input type="text" name="q" placeholder="Search for products, brands, or categories..."
|
|
class="hero-search-input">
|
|
<button type="submit" class="hero-search-button">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="categories-section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Shop by Category</h2>
|
|
<a href="{{ url_for('main.products') }}" class="view-all-link">
|
|
View All Categories →
|
|
</a>
|
|
</div>
|
|
<div class="categories-grid">
|
|
{% for category in categories[:6] %}
|
|
<a href="{{ url_for('main.products', category=category.id) }}" class="category-card">
|
|
<div class="category-image">
|
|
{% if category.name == "T-Shirts" %}👕
|
|
{% elif category.name == "Jeans" %}👖
|
|
{% elif category.name == "Jackets" %}🧥
|
|
{% elif category.name == "Shoes" %}👟
|
|
{% elif category.name == "Accessories" %}👜
|
|
{% elif category.name == "Dresses" %}👗
|
|
{% elif category.name == "Shirts" %}👔
|
|
{% elif category.name == "Hoodies" %}🧢
|
|
{% else %}👚{% endif %}
|
|
</div>
|
|
<div class="category-name">
|
|
{{ category.name }}
|
|
<span class="category-count">{{ category.products|length }} items</span>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="featured-section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Featured Products</h2>
|
|
<a href="{{ url_for('main.products') }}" class="view-all-link">
|
|
View All Products →
|
|
</a>
|
|
</div>
|
|
|
|
<div class="products-grid">
|
|
{% for product in featured_products[:8] %}
|
|
<div class="product-card-home">
|
|
{% if product.stock <= 5 and product.stock> 0 %}
|
|
<span class="product-badge">Low Stock</span>
|
|
{% elif product.stock == 0 %}
|
|
<span class="product-badge" style="background: #666;">Out of Stock</span>
|
|
{% endif %}
|
|
|
|
<a href="{{ url_for('main.product_detail', id=product.id) }}">
|
|
<div class="product-image-home">
|
|
<img src="{{ product.get_image_url() }}" alt="{{ product.name }}">
|
|
</div>
|
|
|
|
<div class="product-info-home">
|
|
<h3 class="product-title-home">{{ product.name }}</h3>
|
|
|
|
<div class="product-price-home">${{ "%.2f"|format(product.price) }}</div>
|
|
|
|
{% if product.average_rating > 0 %}
|
|
<div class="product-rating-home">
|
|
<div class="stars">
|
|
{% for i in range(5) %}
|
|
<span>{% if i < product.average_rating|int %}★{% else %}☆{% endif %}</span>
|
|
{% endfor %}
|
|
</div>
|
|
<span class="rating-count">({{ product.review_count }})</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="product-meta-home">
|
|
{% if product.company %}
|
|
<span>{{ product.company }}</span>
|
|
{% endif %}
|
|
{% if product.color %}
|
|
<span>{{ product.color }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="promo-banner">
|
|
<div class="promo-content">
|
|
<h2>Summer Sale is Here! 🌞</h2>
|
|
<p>Get up to 50% off on selected items. Limited time offer!</p>
|
|
<a href="{{ url_for('main.products') }}" class="promo-button">
|
|
Shop Now →
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="benefits-section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Why Shop With Us?</h2>
|
|
</div>
|
|
|
|
<div class="benefits-grid">
|
|
<div class="benefit-card">
|
|
<span class="benefit-icon">🚚</span>
|
|
<h3 class="benefit-title">Free Shipping</h3>
|
|
<p class="benefit-description">Free delivery on all orders over $50. Fast and reliable shipping nationwide.</p>
|
|
</div>
|
|
|
|
<div class="benefit-card">
|
|
<span class="benefit-icon">🔄</span>
|
|
<h3 class="benefit-title">Easy Returns</h3>
|
|
<p class="benefit-description">30-day return policy. If you're not satisfied, we'll make it right.</p>
|
|
</div>
|
|
|
|
<div class="benefit-card">
|
|
<span class="benefit-icon">🔒</span>
|
|
<h3 class="benefit-title">Secure Payment</h3>
|
|
<p class="benefit-description">Your payment information is protected with bank-level security.</p>
|
|
</div>
|
|
|
|
<div class="benefit-card">
|
|
<span class="benefit-icon">⭐</span>
|
|
<h3 class="benefit-title">Quality Guarantee</h3>
|
|
<p class="benefit-description">Premium materials and craftsmanship in every product we sell.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="featured-section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Best Sellers</h2>
|
|
<a href="{{ url_for('main.products') }}" class="view-all-link">
|
|
View More →
|
|
</a>
|
|
</div>
|
|
|
|
<div class="products-grid">
|
|
{% for product in best_sellers[:4] %}
|
|
<div class="product-card-home">
|
|
{% if product.stock <= 5 and product.stock> 0 %}
|
|
<span class="product-badge">Popular</span>
|
|
{% endif %}
|
|
|
|
<a href="{{ url_for('main.product_detail', id=product.id) }}">
|
|
<div class="product-image-home">
|
|
<img src="{{ product.get_image_url() }}" alt="{{ product.name }}">
|
|
</div>
|
|
|
|
<div class="product-info-home">
|
|
<h3 class="product-title-home">{{ product.name }}</h3>
|
|
|
|
<div class="product-price-home">${{ "%.2f"|format(product.price) }}</div>
|
|
|
|
{% if product.average_rating > 0 %}
|
|
<div class="product-rating-home">
|
|
<div class="stars">
|
|
{% for i in range(5) %}
|
|
<span>{% if i < product.average_rating|int %}★{% else %}☆{% endif %}</span>
|
|
{% endfor %}
|
|
</div>
|
|
<span class="rating-count">({{ product.review_count }})</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="product-meta-home">
|
|
<span>{{ product.stock }} in stock</span>
|
|
<span>{{ product.like_count }} likes</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="newsletter-section">
|
|
<div class="newsletter-content">
|
|
<h2>Stay in the Loop</h2>
|
|
<p>Subscribe to our newsletter for exclusive deals, new arrivals, and style tips.</p>
|
|
|
|
<form class="newsletter-form">
|
|
<input type="email" placeholder="Enter your email address" class="newsletter-input" required>
|
|
<button type="submit" class="newsletter-button">Subscribe</button>
|
|
</form>
|
|
|
|
<p style="margin-top: 15px; font-size: 0.9em; opacity: 0.8;">
|
|
By subscribing, you agree to our Privacy Policy and consent to receive updates.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|