Index: in/templates/main/base.html
===================================================================
--- main/templates/main/base.html	(revision 7e767ce392072d870454bda4c5aaff770dec07f5)
+++ 	(revision )
@@ -1,1214 +1,0 @@
-{% extends 'main/header.html' %}
-{% load category_filters %}
-{% load custom_filters %}
-{% load static %}
-{% block content %}
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
-    <title>Home</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <style>
-        /* Common Styles */
-                :root {
-            --primary-color: #2e652e;
-            --primary-dark: #1f3f1f;
-            --secondary-color: white; /* Text color */
-            --light-bg: #f5f5f5;
-            --white: #ffffff;
-            --text-dark: #333333;
-            --text-light: #666666;
-            --border-color: #e0e0e0;
-            --error-color: #e74c3c;
-            {#--orange-light: rgba(249,139,36,0.85);#}
-            --orange-light: rgba(253,216,53,0.85);
-            --orange-dark: #F2C9A1;
-            {#--orange-solid: #f98b24;#}
-            --orange-solid: rgba(246,215,27,0.85);
-                    color: rgba(246,193,52,0.85);
-                    color: rgba(246,215,27,0.85)
-        }
-
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-            background-color: var(--light-bg);
-            color: var(--text-dark);
-            line-height: 1.6;
-        }
-
-        /* Main Content */
-        .main-content {
-            display: flex;
-            max-width: 1200px;
-            margin: 20px auto;
-            padding: 0 15px;
-            gap: 20px;
-        }
-
-        /* Left Sidebar */
-        .left-sidebar {
-            width: 250px;
-        }
-
-        .sidebar-section {
-            background-color: var(--white);
-            border-radius: 8px;
-            padding: 15px;
-            margin-bottom: 20px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
-                        box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-        }
-
-        .sidebar-section:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-        }
-
-        .sidebar-section h3 {
-            color: var(--white);
-            margin-bottom: 15px;
-            padding-bottom: 10px;
-            border-bottom: 1px solid rgba(255,255,255,0.3);
-        }
-
-        /* Popular Categories */
-        .popular-categories {
-            display: grid;
-            grid-template-columns: repeat(1, 1fr);
-            gap: 15px;
-            margin-bottom: 20px;
-        }
-
-        .popular-category {
-            background-color: var(--white);
-            border-radius: 8px;
-            overflow: hidden;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            text-align: center;
-        }
-
-        .popular-category:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-        }
-
-        .popular-category-image {
-            height: 100px;
-            background-size: cover;
-            background-position: center;
-            transition: transform 0.4s ease;
-        }
-
-        .popular-category:hover .popular-category-image {
-            transform: scale(1.05);
-        }
-
-        .popular-category-title {
-            padding: 12px;
-            font-weight: 600;
-            color: var(--primary-color);
-            transition: color 0.3s ease;
-        }
-
-        .popular-category:hover .popular-category-title {
-            color: var(--orange-solid);
-        }
-
-        /* Main Content Area */
-        .content-area {
-            flex-grow: 1;
-        }
-
-        /* ====== BANNER STYLES ====== */
-        .banner-container {
-            margin: 0 auto 30px;
-            max-width: 1200px;
-            position: relative;
-            border-radius: 16px;
-            overflow: hidden;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
-        }
-
-        .banner-slides {
-            position: relative;
-            width: 100%;
-            height: 400px;
-            overflow: hidden;
-        }
-
-        .banner-slide {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-size: cover;
-            background-position: center;
-            display: flex;
-            align-items: center;
-            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            opacity: 0;
-            transform: scale(1.02);
-        }
-
-        .banner-slide.active {
-            opacity: 1;
-            z-index: 1;
-            transform: scale(1);
-        }
-
-        .banner-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, rgba(23,47,23,0.85) 0%, rgba(42,82,42,0.85) 100%);
-            transition: opacity 0.8s ease;
-        }
-
-        .banner-content {
-            position: relative;
-            z-index: 2;
-            padding: 0 60px;
-            max-width: 600px;
-            color: white;
-            text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
-        }
-
-        .banner-title {
-            font-size: 2.8rem;
-            font-weight: 800;
-            margin-bottom: 15px;
-            line-height: 1.2;
-            color: var(--secondary-color);
-            text-shadow: none;
-            transition: all 0.8s ease;
-        }
-
-        .banner-subtitle {
-            font-size: 1.3rem;
-            margin-bottom: 25px;
-            opacity: 0.9;
-            transition: all 0.8s ease;
-            color: var(--secondary-color);
-        }
-
-        .banner-btn {
-            display: inline-block;
-            padding: 12px 30px;
-            background-color: var(--orange-solid);
-            color: var(--secondary-color);
-            font-weight: 700;
-            border-radius: 50px;
-            text-decoration: none;
-            box-shadow: 0 4px 15px rgba(249, 139, 36, 0.3);
-            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            border: none;
-            cursor: pointer;
-        }
-
-        .banner-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px rgba(249, 139, 36, 0.4);
-            background-color: var(--orange-light);
-        }
-
-        .banner-nav {
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 50px;
-            height: 50px;
-            background: rgba(255,255,255,0.2);
-            backdrop-filter: blur(5px);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-size: 20px;
-            cursor: pointer;
-            z-index: 10;
-            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            border: 1px solid rgba(255,255,255,0.3);
-            opacity: 0.7;
-        }
-
-        .banner-nav:hover {
-            background: rgba(255,255,255,0.3);
-            opacity: 1;
-            transform: translateY(-50%) scale(1.1);
-        }
-
-        .banner-prev {
-            left: 20px;
-        }
-
-        .banner-next {
-            right: 20px;
-        }
-
-        .banner-dots {
-            position: absolute;
-            bottom: 20px;
-            left: 0;
-            right: 0;
-            display: flex;
-            justify-content: center;
-            gap: 10px;
-            z-index: 10;
-        }
-
-        .banner-dot {
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            background: rgba(255,255,255,0.5);
-            cursor: pointer;
-            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-        }
-
-        .banner-dot.active {
-            background: var(--orange-solid);
-            transform: scale(1.3);
-        }
-
-        .banner-dot:hover {
-            transform: scale(1.2);
-        }
-
-        /* Animation */
-        @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .banner-content > * {
-            animation: fadeInUp 0.8s ease forwards;
-        }
-
-        .banner-content h1 {
-            animation-delay: 0.3s;
-        }
-
-        .banner-content p {
-            animation-delay: 0.5s;
-        }
-
-        .banner-content a {
-            animation-delay: 0.7s;
-        }
-
-        /* Section Titles */
-        .section-title {
-            font-size: 1.5rem;
-            font-weight: 600;
-            margin-bottom: 20px;
-            color: var(--primary-color);
-            position: relative;
-            padding-bottom: 10px;
-        }
-
-        .section-title::after {
-            content: '';
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            width: 50px;
-            height: 3px;
-            background: linear-gradient(to right, var(--primary-color), var(--orange-solid));
-            border-radius: 3px;
-        }
-
-        /* Market Flyers */
-        .market-flyers {
-            background-color: var(--white);
-            border-radius: 8px;
-            padding: 20px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            transition: transform 0.4s ease, box-shadow 0.4s ease;
-        }
-
-        .market-flyers:hover {
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-        }
-
-        .flyers-container {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 20px;
-        }
-
-        .flyer-card {
-            background: var(--white);
-            border-radius: 8px;
-            overflow: hidden;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-        }
-
-        .flyer-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-        }
-
-        .flyer-header {
-            padding: 15px;
-            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
-            text-align: center;
-            color: white;
-        }
-
-        .flyer-header h3 {
-            margin: 0;
-            font-size: 1.2rem;
-            font-weight: 600;
-        }
-
-        .flyer-products {
-            padding: 15px;
-        }
-
-        .flyer-product {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-            padding: 10px 0;
-            border-bottom: 1px solid var(--border-color);
-            transition: transform 0.3s ease;
-        }
-
-        .flyer-product:hover {
-            transform: translateX(5px);
-        }
-
-        .flyer-product img {
-            width: 60px;
-            height: 60px;
-            object-fit: cover;
-            border-radius: 5px;
-            transition: transform 0.3s ease;
-        }
-
-        .flyer-product:hover img {
-            transform: scale(1.05);
-        }
-
-        .product-info {
-            flex: 1;
-        }
-
-        .product-name {
-            display: block;
-            font-weight: 500;
-            margin-bottom: 5px;
-            font-size: 14px;
-            transition: color 0.3s ease;
-        }
-
-        .flyer-product:hover .product-name {
-            color: var(--orange-solid);
-        }
-
-        .product-price {
-            display: flex;
-            gap: 10px;
-            font-size: 14px;
-        }
-
-        .old-price {
-            text-decoration: line-through;
-            color: #999;
-        }
-
-        .new-price {
-            color: var(--error-color);
-            font-weight: bold;
-        }
-
-        .view-all-btn {
-            width: 100%;
-            padding: 10px;
-            background-color: var(--orange-solid);
-            color: var(--secondary-color);
-            border: none;
-            font-weight: bold;
-            cursor: pointer;
-            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            border-radius: 4px;
-            margin-top: 10px;
-        }
-
-        .view-all-btn:hover {
-            background-color: var(--orange-light);
-            transform: translateY(-2px);
-            box-shadow: 0 4px 8px rgba(249, 139, 36, 0.3);
-        }
-
-        /* Footer */
-        footer {
-            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
-            color: white;
-            padding: 40px 20px;
-            margin-top: auto;
-        }
-
-        .footer-content {
-            max-width: 1200px;
-            margin: 0 auto;
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 30px;
-        }
-
-        .footer-section h3 {
-            margin-bottom: 20px;
-            font-size: 1.2rem;
-            color: var(--orange-light);
-            position: relative;
-            padding-bottom: 10px;
-        }
-
-        .footer-section h3::after {
-            content: '';
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            width: 40px;
-            height: 2px;
-            background: var(--orange-light);
-        }
-
-        .footer-section p, .footer-section a {
-            color: #ddd;
-            margin-bottom: 10px;
-            display: block;
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-size: 14px;
-        }
-
-        .footer-section a:hover {
-            color: var(--orange-light);
-            transform: translateX(5px);
-            text-decoration: none;
-        }
-
-        .footer-section.social a {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            transition: transform 0.3s ease;
-        }
-
-        .footer-section.social a:hover {
-            transform: translateX(5px);
-        }
-
-        .copyright {
-            text-align: center;
-            padding-top: 20px;
-            margin-top: 20px;
-            border-top: 1px solid rgba(255, 255, 255, 0.2);
-            color: #bbb;
-            font-size: 0.9rem;
-        }
-
-        /* Message Styling */
-        .message-container {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            z-index: 1000;
-            max-width: 400px;
-        }
-
-        .alert {
-            padding: 15px;
-            margin-bottom: 10px;
-            border-radius: 4px;
-            position: relative;
-            background-color: #f8f9fa;
-            border-left: 4px solid #6c757d;
-            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            transform: translateX(100%);
-            opacity: 0;
-        }
-
-        .alert.show {
-            transform: translateX(0);
-            opacity: 1;
-        }
-
-        /* Modal */
-        .modal {
-            display: none;
-            position: fixed;
-            z-index: 1000;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.7);
-            overflow-y: auto;
-            opacity: 0;
-            transition: opacity 0.4s ease;
-        }
-
-        .modal.show {
-            opacity: 1;
-        }
-
-        .modal-content {
-            background-color: #fefefe;
-            margin: 5% auto;
-            padding: 30px;
-            border-radius: 15px;
-            max-width: 900px;
-            width: 90%;
-            box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
-            position: relative;
-            transform: translateY(-20px);
-            transition: transform 0.4s ease;
-        }
-
-        .modal.show .modal-content {
-            transform: translateY(0);
-        }
-
-        .close-modal {
-            position: absolute;
-            right: 25px;
-            top: 25px;
-            color: #aaa;
-            font-size: 28px;
-            font-weight: bold;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .close-modal:hover {
-            color: var(--orange-solid);
-            transform: rotate(90deg);
-        }
-
-        .modal-title {
-            font-size: 1.8rem;
-            color: var(--primary-color);
-            margin-bottom: 20px;
-            padding-bottom: 10px;
-            border-bottom: 2px solid var(--primary-color);
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .modal-products-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 25px;
-            margin-top: 20px;
-        }
-
-        .modal-product {
-            background: var(--white);
-            border-radius: 10px;
-            overflow: hidden;
-            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
-            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-        }
-
-        .modal-product:hover {
-            transform: translateY(-8px);
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-        }
-
-        .modal-product img {
-            width: 100%;
-            height: 180px;
-            object-fit: cover;
-            border-bottom: 1px solid var(--border-color);
-            transition: transform 0.4s ease;
-        }
-
-        .modal-product:hover img {
-            transform: scale(1.05);
-        }
-
-        .modal-product-info {
-            padding: 15px;
-        }
-
-        .modal-product-name {
-            font-size: 1rem;
-            font-weight: 600;
-            margin-bottom: 10px;
-            color: var(--text-dark);
-            display: block;
-            transition: color 0.3s ease;
-        }
-
-        .modal-product:hover .modal-product-name {
-            color: var(--orange-solid);
-        }
-
-        .modal-product-price {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .modal-old-price {
-            text-decoration: line-through;
-            color: #999;
-            font-size: 0.9rem;
-        }
-
-        .modal-new-price {
-            color: var(--error-color);
-            font-weight: bold;
-            font-size: 1.1rem;
-        }
-
-        .discount-badge {
-            background-color: var(--error-color);
-            color: white;
-            padding: 3px 8px;
-            border-radius: 4px;
-            font-size: 0.8rem;
-            font-weight: bold;
-            margin-left: 10px;
-        }
-
-        .no-products {
-            text-align: center;
-            padding: 40px;
-            color: var(--text-light);
-            font-size: 1.1rem;
-            grid-column: 1 / -1;
-        }
-
-        .loading-spinner {
-            display: inline-block;
-            width: 40px;
-            height: 40px;
-            border: 4px solid rgba(46, 101, 46, 0.2);
-            border-radius: 50%;
-            border-top-color: var(--primary-color);
-            animation: spin 1s ease-in-out infinite;
-            margin: 20px auto;
-            grid-column: 1 / -1;
-        }
-
-        @keyframes spin {
-            to {
-                transform: rotate(360deg);
-            }
-        }
-
-        /* Responsiveness */
-        @media (max-width: 1024px) {
-            .flyers-container {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            .banner-title {
-                font-size: 2.4rem;
-            }
-
-            .banner-subtitle {
-                font-size: 1.1rem;
-            }
-        }
-
-        @media (max-width: 768px) {
-            .main-content {
-                flex-direction: column;
-                padding: 10px;
-            }
-
-            .content-area {
-                order: 1;
-            }
-
-            .left-sidebar {
-                width: 100%;
-                order: 2;
-                margin-top: 20px;
-            }
-
-            .popular-categories {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            .banner-slides {
-                height: 350px;
-            }
-
-            .banner-content {
-                padding: 0 30px;
-                text-align: center;
-            }
-
-            .banner-title {
-                font-size: 2rem;
-            }
-
-            .banner-nav {
-                width: 40px;
-                height: 40px;
-                font-size: 16px;
-            }
-
-            .flyers-container {
-                grid-template-columns: 1fr;
-            }
-
-            .modal-products-grid {
-                grid-template-columns: 1fr;
-            }
-        }
-
-        @media (max-width: 576px) {
-            .banner-slides {
-                height: 300px;
-            }
-
-            .banner-title {
-                font-size: 1.8rem;
-            }
-
-            .banner-subtitle {
-                font-size: 1rem;
-            }
-
-            .banner-btn {
-                padding: 10px 20px;
-            }
-
-            .popular-categories {
-                grid-template-columns: 1fr;
-            }
-        }
-
-        a {
-            text-decoration: none;
-            color: inherit;
-        }
-
-        #store-name {
-            margin-left: 5px;
-            color: var(--orange-solid);
-        }
-    </style>
-</head>
-<body>
-
-<div class="message-container">
-    {% if messages %}
-        {% for message in messages %}
-            <div class="alert alert-{{ message.tags }}">
-                {{ message }}
-                <span class="close-btn" onclick="this.parentElement.remove()">×</span>
-            </div>
-        {% endfor %}
-    {% endif %}
-</div>
-
-<!-- Main Content -->
-<div class="main-content">
-    <main class="content-area">
-        <div class="banner-container">
-            <div class="banner-slides">
-                <!-- Banner 1 -->
-                <div class="banner-slide active" style="background-image: url('{% static 'images/baner1.jpg' %}')">
-                    <div class="banner-overlay"></div>
-                    <div class="banner-content">
-                        <h1 class="banner-title">Сите производи на едно место!</h1>
-                        <p class="banner-subtitle">Пронајди ги најевтините производи со <span style="color: rgba(246,215,27,0.85)"><b>Штедко</b></span></p>
-                        <a href="{% url 'product_list' %}" class="banner-btn">Започни сега</a>
-                    </div>
-                </div>
-
-                <!-- Banner 2 -->
-                <div class="banner-slide" style="background-image: url('{% static 'images/baner2.jpg' %}')">
-                    <div class="banner-overlay"></div>
-                    <div class="banner-content">
-                        <h1 class="banner-title">Не ги пропуштај дневните попусти!</h1>
-                        <p class="banner-subtitle">До 70% попуст на избрани производи</p>
-                        <a href="{% url 'product_list' %}?discounted=1" class="banner-btn">Види попусти</a>
-                    </div>
-                </div>
-
-                <!-- Banner 3 -->
-                <div class="banner-slide" style="background-image: url('{% static 'images/kreiraj_listi.png' %}')">
-                    <div class="banner-overlay"></div>
-                    <div class="banner-content">
-                        <h1 class="banner-title">Направи си <span style="color: rgba(246,215,27,0.85)">листа</span> за пазарење и дознај</h1>
-                        <p class="banner-subtitle">во кој маркет е <span style="color: rgba(246,215,27,0.85)">најевтино</span>!</p>
-                        <a href="{% url 'product_list' %}?sort=newest" class="banner-btn">Истражувај</a>
-                    </div>
-                </div>
-            </div>
-
-            <button class="banner-nav banner-prev">❮</button>
-            <button class="banner-nav banner-next">❯</button>
-
-            <div class="banner-dots">
-                <div class="banner-dot active"></div>
-                <div class="banner-dot"></div>
-                <div class="banner-dot"></div>
-            </div>
-        </div>
-
-        <section class="market-flyers">
-            <h2 class="section-title">Актуелни Попусти</h2>
-            <div class="flyers-container">
-                {% if stores_with_products %}
-                    {% for store in stores_with_products %}
-                        <div class="flyer-card">
-                            <div class="flyer-header">
-                                <h3>{{ store.name }}</h3>
-                            </div>
-                            <div class="flyer-products">
-                                {% if store.products %}
-                                    {% for product in store.products|slice:":3" %}
-                                        <a href="{% url 'product_detail' product.id %}">
-                                            <div class="flyer-product">
-                                                <img src="{{ product.image_url }}" alt="{{ product.name }}"
-                                                     onerror="this.onerror=null;this.src='{% static 'images/no-image.png' %}'">
-                                                <div class="product-info">
-                                                    <span class="product-name">{{ product.name }}</span>
-                                                    <span class="product-price">
-                                                        <span class="old-price">{{ product.price }} ден.</span>
-                                                        <span class="new-price">{{ product.actual_price }} ден.</span>
-                                                    </span>
-                                                </div>
-                                            </div>
-                                        </a>
-                                    {% endfor %}
-                                {% else %}
-                                    <p>Нема достапни попусти за {{ store.name }}.</p>
-                                {% endif %}
-                            </div>
-                            <button class="view-all-btn" data-store="{{ store.name }}" style="box-shadow: 0 8px 25px rgba(249, 139, 36, 0.4);">
-                                Види ги сите попусти
-                            </button>
-                        </div>
-                    {% endfor %}
-                {% else %}
-                    <p>No flyer data available. Please log in or check back later.</p>
-                {% endif %}
-            </div>
-        </section>
-    </main>
-    <aside class="left-sidebar">
-        <div class="sidebar-section">
-            <h3 style="background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); padding: 10px; border-radius: 10px">
-                Популарни категории</h3>
-            <div class="popular-categories">
-                <a href="{% url 'product_list' %}?category=Dairy" class="popular-category">
-                    <div class="popular-category-image"
-                         style="background-image: url('{% static 'images/categories/dairy.jpg' %}')"></div>
-                    <div class="popular-category-title">Млечни производи</div>
-                </a>
-                <a href="{% url 'product_list' %}?category=Vegetables" class="popular-category">
-                    <div class="popular-category-image"
-                         style="background-image: url('{% static 'images/categories/vegetables.jpg' %}')"></div>
-                    <div class="popular-category-title">Зеленчук</div>
-                </a>
-                <a href="{% url 'product_list' %}?category=Drinks" class="popular-category">
-                    <div class="popular-category-image"
-                         style="background-image: url('{% static 'images/categories/drinks.jpg' %}')"></div>
-                    <div class="popular-category-title">Пијалоци</div>
-                </a>
-                <a href="{% url 'product_list' %}?category=Cosmetics" class="popular-category">
-                    <div class="popular-category-image"
-                         style="background-image: url('{% static 'images/categories/cosmetics.jpg' %}')"></div>
-                    <div class="popular-category-title">Козметика</div>
-                </a>
-            </div>
-        </div>
-    </aside>
-</div>
-
-<!-- Modal for showing all discounted products -->
-<div id="products-modal" class="modal">
-    <div class="modal-content">
-        <span class="close-modal">×</span>
-        <h2 class="modal-title">
-            <i class="fas fa-tags"></i>
-            Попусти во <span id="store-name"></span>
-        </h2>
-        <div class="modal-products-grid" id="modal-products">
-            <!-- Products will be loaded here via JavaScript -->
-        </div>
-    </div>
-</div>
-
-<!-- Footer -->
-<footer>
-    <div class="footer-content">
-        <div class="footer-section">
-            <h3>За нас</h3>
-            <p>Ние сме водечка онлајн продавница со најдобри цени и квалитетни производи.</p>
-        </div>
-        <div class="footer-section">
-            <h3>Контакт</h3>
-            <p>Телефон: +389 70 123 456</p>
-            <p>Email: kontakt@nasataprodavnica.com</p>
-            <p>Адреса: Улица ББ, Скопје</p>
-        </div>
-        <div class="footer-section">
-            <h3>Брзи линкови</h3>
-            <a href="{% url 'home' %}">Дома</a>
-            <a href="{% url 'product_list' %}">Каталог</a>
-            <a href="#">Услови на користење</a>
-            <a href="#">Политика на приватност</a>
-        </div>
-        <div class="footer-section social">
-            <h3>Следете нè</h3>
-            <a href="#" target="_blank"><i class="fab fa-facebook-f"></i> Facebook</a>
-            <a href="#" target="_blank"><i class="fab fa-instagram"></i> Instagram</a>
-            <a href="#" target="_blank"><i class="fab fa-twitter"></i> Twitter</a>
-        </div>
-    </div>
-    <div class="copyright">
-        © 2023 Нашата Продавница. Сите права се задржани.
-    </div>
-</footer>
-
-<script>
-    // Banner carousel functionality
-    document.addEventListener('DOMContentLoaded', function() {
-        const bannerSlides = document.querySelectorAll('.banner-slide');
-        const prevBtn = document.querySelector('.banner-prev');
-        const nextBtn = document.querySelector('.banner-next');
-        const dots = document.querySelectorAll('.banner-dot');
-        const bannerContainer = document.querySelector('.banner-container');
-
-        let currentIndex = 0;
-        let interval;
-        let touchStartX = 0;
-        let touchEndX = 0;
-        const ROTATION_INTERVAL = 10000; // 10 seconds
-
-        // Initialize the first banner
-        showSlide(currentIndex);
-
-        // Auto-rotate banners
-        function startAutoRotate() {
-            interval = setInterval(nextSlide, ROTATION_INTERVAL);
-        }
-
-        function resetInterval() {
-            clearInterval(interval);
-            startAutoRotate();
-        }
-
-        function showSlide(index) {
-            // Hide all slides
-            bannerSlides.forEach(slide => {
-                slide.classList.remove('active');
-            });
-
-            // Show current slide
-            bannerSlides[index].classList.add('active');
-
-            // Update dots
-            dots.forEach(dot => dot.classList.remove('active'));
-            dots[index].classList.add('active');
-        }
-
-        function nextSlide() {
-            currentIndex = (currentIndex + 1) % bannerSlides.length;
-            showSlide(currentIndex);
-        }
-
-        function prevSlide() {
-            currentIndex = (currentIndex - 1 + bannerSlides.length) % bannerSlides.length;
-            showSlide(currentIndex);
-        }
-
-        // Button controls
-        nextBtn.addEventListener('click', function() {
-            nextSlide();
-            resetInterval();
-        });
-
-        prevBtn.addEventListener('click', function() {
-            prevSlide();
-            resetInterval();
-        });
-
-        // Dot navigation
-        dots.forEach((dot, index) => {
-            dot.addEventListener('click', function() {
-                currentIndex = index;
-                showSlide(currentIndex);
-                resetInterval();
-            });
-        });
-
-        // Touch events for mobile swipe
-        bannerContainer.addEventListener('touchstart', function(e) {
-            touchStartX = e.changedTouches[0].screenX;
-            clearInterval(interval);
-        }, {passive: true});
-
-        bannerContainer.addEventListener('touchend', function(e) {
-            touchEndX = e.changedTouches[0].screenX;
-            handleSwipe();
-            resetInterval();
-        }, {passive: true});
-
-        function handleSwipe() {
-            const threshold = 50; // Minimum swipe distance
-
-            if (touchEndX < touchStartX - threshold) {
-                // Swiped left - next slide
-                nextSlide();
-            } else if (touchEndX > touchStartX + threshold) {
-                // Swiped right - previous slide
-                prevSlide();
-            }
-        }
-
-        // Start auto-rotation
-        startAutoRotate();
-
-        // Pause on hover
-        bannerContainer.addEventListener('mouseenter', function() {
-            clearInterval(interval);
-        });
-
-        bannerContainer.addEventListener('mouseleave', function() {
-            resetInterval();
-        });
-
-        // Show messages with animation
-        document.querySelectorAll('.alert').forEach(alert => {
-            setTimeout(() => {
-                alert.classList.add('show');
-            }, 100);
-        });
-    });
-
-    // Modal functionality
-    document.addEventListener('DOMContentLoaded', function() {
-        const modal = document.getElementById('products-modal');
-        const modalTitle = document.getElementById('store-name');
-        const modalProducts = document.getElementById('modal-products');
-        const closeModal = document.querySelector('.close-modal');
-
-        document.querySelectorAll('.view-all-btn').forEach(button => {
-            button.addEventListener('click', function() {
-                const store = this.getAttribute('data-store');
-                modalTitle.textContent = store;
-                modalProducts.innerHTML = '<div class="loading-spinner"></div>';
-
-                // Show modal with fade in
-                modal.style.display = 'block';
-                setTimeout(() => {
-                    modal.classList.add('show');
-                }, 10);
-
-                fetch(`/get-store-products/?store=${encodeURIComponent(store)}`, {
-                    credentials: 'same-origin'
-                })
-                    .then(response => {
-                        if (!response.ok) {
-                            throw new Error('Network response was not ok');
-                        }
-                        return response.json();
-                    })
-                    .then(data => {
-                        if (data.products && data.products.length > 0) {
-                            modalProducts.innerHTML = '';
-                            data.products.forEach(product => {
-                                const discount = Math.round(((product.price - product.actual_price) / product.price) * 100);
-
-                                const productElement = document.createElement('div');
-                                productElement.className = 'modal-product';
-                                productElement.innerHTML = `
-                                    <a href="/product/${product.id}/">
-                                        <img src="${product.image_url}" alt="${product.name}" onerror="this.onerror=null;this.src='{% static 'images/no-image.png' %}'">
-                                        <div class="modal-product-info">
-                                            <span class="modal-product-name">${product.name}</span>
-                                            <div class="modal-product-price">
-                                                <span class="modal-old-price">${product.price} ден.</span>
-                                                <div>
-                                                    <span class="modal-new-price">${product.actual_price} ден.</span>
-                                                    <span class="discount-badge">-${discount}%</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </a>
-                                `;
-                                modalProducts.appendChild(productElement);
-                            });
-                        } else {
-                            modalProducts.innerHTML = '<div class="no-products"><i class="fas fa-box-open" style="font-size: 2rem; color: #ccc; margin-bottom: 15px;"></i><p>Нема достапни попусти за оваа продавница.</p></div>';
-                        }
-                    })
-                    .catch(error => {
-                        console.error('Error:', error);
-                        modalProducts.innerHTML = `
-                            <div class="no-products">
-                                <i class="fas fa-exclamation-triangle" style="font-size: 2rem; color: #e74c3c; margin-bottom: 15px;"></i>
-                                <p>Грешка при вчитување на производите.</p>
-                                <a href="/login/" style="color: #2e652e; font-weight: bold;">Најави се</a> или обидете се повторно.
-                            </div>
-                        `;
-                    });
-
-                document.body.style.overflow = 'hidden';
-            });
-        });
-
-        function closeModalHandler() {
-            modal.classList.remove('show');
-            setTimeout(() => {
-                modal.style.display = 'none';
-                document.body.style.overflow = 'auto';
-            }, 400);
-        }
-
-        closeModal.addEventListener('click', closeModalHandler);
-
-        window.addEventListener('click', function(event) {
-            if (event.target === modal) {
-                closeModalHandler();
-            }
-        });
-
-        // Auto-close messages after 5 seconds
-        setTimeout(() => {
-            document.querySelectorAll('.alert').forEach(alert => {
-                alert.style.opacity = '0';
-                setTimeout(() => alert.remove(), 300);
-            });
-        }, 5000);
-    });
-</script>
-</body>
-</html>
-{% endblock %}
Index: main/templates/main/home.html
===================================================================
--- main/templates/main/home.html	(revision 7e767ce392072d870454bda4c5aaff770dec07f5)
+++ main/templates/main/home.html	(revision 09a55ba56c74813273c03182cd01e2f8d3314915)
@@ -1,3 +1,3 @@
-{% extends 'main/base.html' %}
+{% extends 'main/index.html' %}
 {% block content %}
     This is the home page!
Index: main/templates/main/index.html
===================================================================
--- main/templates/main/index.html	(revision 09a55ba56c74813273c03182cd01e2f8d3314915)
+++ main/templates/main/index.html	(revision 09a55ba56c74813273c03182cd01e2f8d3314915)
@@ -0,0 +1,1214 @@
+{% extends 'main/header.html' %}
+{% load category_filters %}
+{% load custom_filters %}
+{% load static %}
+{% block content %}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+    <title>Home</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <style>
+        /* Common Styles */
+                :root {
+            --primary-color: #2e652e;
+            --primary-dark: #1f3f1f;
+            --secondary-color: white; /* Text color */
+            --light-bg: #f5f5f5;
+            --white: #ffffff;
+            --text-dark: #333333;
+            --text-light: #666666;
+            --border-color: #e0e0e0;
+            --error-color: #e74c3c;
+            {#--orange-light: rgba(249,139,36,0.85);#}
+            --orange-light: rgba(253,216,53,0.85);
+            --orange-dark: #F2C9A1;
+            {#--orange-solid: #f98b24;#}
+            --orange-solid: rgba(246,215,27,0.85);
+                    color: rgba(246,193,52,0.85);
+                    color: rgba(246,215,27,0.85)
+        }
+
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+            background-color: var(--light-bg);
+            color: var(--text-dark);
+            line-height: 1.6;
+        }
+
+        /* Main Content */
+        .main-content {
+            display: flex;
+            max-width: 1200px;
+            margin: 20px auto;
+            padding: 0 15px;
+            gap: 20px;
+        }
+
+        /* Left Sidebar */
+        .left-sidebar {
+            width: 250px;
+        }
+
+        .sidebar-section {
+            background-color: var(--white);
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 20px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+                        box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        }
+
+        .sidebar-section:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+        }
+
+        .sidebar-section h3 {
+            color: var(--white);
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid rgba(255,255,255,0.3);
+        }
+
+        /* Popular Categories */
+        .popular-categories {
+            display: grid;
+            grid-template-columns: repeat(1, 1fr);
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+
+        .popular-category {
+            background-color: var(--white);
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            text-align: center;
+        }
+
+        .popular-category:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+        }
+
+        .popular-category-image {
+            height: 100px;
+            background-size: cover;
+            background-position: center;
+            transition: transform 0.4s ease;
+        }
+
+        .popular-category:hover .popular-category-image {
+            transform: scale(1.05);
+        }
+
+        .popular-category-title {
+            padding: 12px;
+            font-weight: 600;
+            color: var(--primary-color);
+            transition: color 0.3s ease;
+        }
+
+        .popular-category:hover .popular-category-title {
+            color: var(--orange-solid);
+        }
+
+        /* Main Content Area */
+        .content-area {
+            flex-grow: 1;
+        }
+
+        /* ====== BANNER STYLES ====== */
+        .banner-container {
+            margin: 0 auto 30px;
+            max-width: 1200px;
+            position: relative;
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+        }
+
+        .banner-slides {
+            position: relative;
+            width: 100%;
+            height: 400px;
+            overflow: hidden;
+        }
+
+        .banner-slide {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-size: cover;
+            background-position: center;
+            display: flex;
+            align-items: center;
+            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            opacity: 0;
+            transform: scale(1.02);
+        }
+
+        .banner-slide.active {
+            opacity: 1;
+            z-index: 1;
+            transform: scale(1);
+        }
+
+        .banner-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, rgba(23,47,23,0.85) 0%, rgba(42,82,42,0.85) 100%);
+            transition: opacity 0.8s ease;
+        }
+
+        .banner-content {
+            position: relative;
+            z-index: 2;
+            padding: 0 60px;
+            max-width: 600px;
+            color: white;
+            text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
+        }
+
+        .banner-title {
+            font-size: 2.8rem;
+            font-weight: 800;
+            margin-bottom: 15px;
+            line-height: 1.2;
+            color: var(--secondary-color);
+            text-shadow: none;
+            transition: all 0.8s ease;
+        }
+
+        .banner-subtitle {
+            font-size: 1.3rem;
+            margin-bottom: 25px;
+            opacity: 0.9;
+            transition: all 0.8s ease;
+            color: var(--secondary-color);
+        }
+
+        .banner-btn {
+            display: inline-block;
+            padding: 12px 30px;
+            background-color: var(--orange-solid);
+            color: var(--secondary-color);
+            font-weight: 700;
+            border-radius: 50px;
+            text-decoration: none;
+            box-shadow: 0 4px 15px rgba(249, 139, 36, 0.3);
+            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            border: none;
+            cursor: pointer;
+        }
+
+        .banner-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px rgba(249, 139, 36, 0.4);
+            background-color: var(--orange-light);
+        }
+
+        .banner-nav {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 50px;
+            height: 50px;
+            background: rgba(255,255,255,0.2);
+            backdrop-filter: blur(5px);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 20px;
+            cursor: pointer;
+            z-index: 10;
+            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            border: 1px solid rgba(255,255,255,0.3);
+            opacity: 0.7;
+        }
+
+        .banner-nav:hover {
+            background: rgba(255,255,255,0.3);
+            opacity: 1;
+            transform: translateY(-50%) scale(1.1);
+        }
+
+        .banner-prev {
+            left: 20px;
+        }
+
+        .banner-next {
+            right: 20px;
+        }
+
+        .banner-dots {
+            position: absolute;
+            bottom: 20px;
+            left: 0;
+            right: 0;
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            z-index: 10;
+        }
+
+        .banner-dot {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: rgba(255,255,255,0.5);
+            cursor: pointer;
+            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        }
+
+        .banner-dot.active {
+            background: var(--orange-solid);
+            transform: scale(1.3);
+        }
+
+        .banner-dot:hover {
+            transform: scale(1.2);
+        }
+
+        /* Animation */
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .banner-content > * {
+            animation: fadeInUp 0.8s ease forwards;
+        }
+
+        .banner-content h1 {
+            animation-delay: 0.3s;
+        }
+
+        .banner-content p {
+            animation-delay: 0.5s;
+        }
+
+        .banner-content a {
+            animation-delay: 0.7s;
+        }
+
+        /* Section Titles */
+        .section-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 20px;
+            color: var(--primary-color);
+            position: relative;
+            padding-bottom: 10px;
+        }
+
+        .section-title::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 50px;
+            height: 3px;
+            background: linear-gradient(to right, var(--primary-color), var(--orange-solid));
+            border-radius: 3px;
+        }
+
+        /* Market Flyers */
+        .market-flyers {
+            background-color: var(--white);
+            border-radius: 8px;
+            padding: 20px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            transition: transform 0.4s ease, box-shadow 0.4s ease;
+        }
+
+        .market-flyers:hover {
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+
+        .flyers-container {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 20px;
+        }
+
+        .flyer-card {
+            background: var(--white);
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        }
+
+        .flyer-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+        }
+
+        .flyer-header {
+            padding: 15px;
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+            text-align: center;
+            color: white;
+        }
+
+        .flyer-header h3 {
+            margin: 0;
+            font-size: 1.2rem;
+            font-weight: 600;
+        }
+
+        .flyer-products {
+            padding: 15px;
+        }
+
+        .flyer-product {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            padding: 10px 0;
+            border-bottom: 1px solid var(--border-color);
+            transition: transform 0.3s ease;
+        }
+
+        .flyer-product:hover {
+            transform: translateX(5px);
+        }
+
+        .flyer-product img {
+            width: 60px;
+            height: 60px;
+            object-fit: cover;
+            border-radius: 5px;
+            transition: transform 0.3s ease;
+        }
+
+        .flyer-product:hover img {
+            transform: scale(1.05);
+        }
+
+        .product-info {
+            flex: 1;
+        }
+
+        .product-name {
+            display: block;
+            font-weight: 500;
+            margin-bottom: 5px;
+            font-size: 14px;
+            transition: color 0.3s ease;
+        }
+
+        .flyer-product:hover .product-name {
+            color: var(--orange-solid);
+        }
+
+        .product-price {
+            display: flex;
+            gap: 10px;
+            font-size: 14px;
+        }
+
+        .old-price {
+            text-decoration: line-through;
+            color: #999;
+        }
+
+        .new-price {
+            color: var(--error-color);
+            font-weight: bold;
+        }
+
+        .view-all-btn {
+            width: 100%;
+            padding: 10px;
+            background-color: var(--orange-solid);
+            color: var(--secondary-color);
+            border: none;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            border-radius: 4px;
+            margin-top: 10px;
+        }
+
+        .view-all-btn:hover {
+            background-color: var(--orange-light);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(249, 139, 36, 0.3);
+        }
+
+        /* Footer */
+        footer {
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+            color: white;
+            padding: 40px 20px;
+            margin-top: auto;
+        }
+
+        .footer-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 30px;
+        }
+
+        .footer-section h3 {
+            margin-bottom: 20px;
+            font-size: 1.2rem;
+            color: var(--orange-light);
+            position: relative;
+            padding-bottom: 10px;
+        }
+
+        .footer-section h3::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 40px;
+            height: 2px;
+            background: var(--orange-light);
+        }
+
+        .footer-section p, .footer-section a {
+            color: #ddd;
+            margin-bottom: 10px;
+            display: block;
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-size: 14px;
+        }
+
+        .footer-section a:hover {
+            color: var(--orange-light);
+            transform: translateX(5px);
+            text-decoration: none;
+        }
+
+        .footer-section.social a {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            transition: transform 0.3s ease;
+        }
+
+        .footer-section.social a:hover {
+            transform: translateX(5px);
+        }
+
+        .copyright {
+            text-align: center;
+            padding-top: 20px;
+            margin-top: 20px;
+            border-top: 1px solid rgba(255, 255, 255, 0.2);
+            color: #bbb;
+            font-size: 0.9rem;
+        }
+
+        /* Message Styling */
+        .message-container {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 1000;
+            max-width: 400px;
+        }
+
+        .alert {
+            padding: 15px;
+            margin-bottom: 10px;
+            border-radius: 4px;
+            position: relative;
+            background-color: #f8f9fa;
+            border-left: 4px solid #6c757d;
+            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            transform: translateX(100%);
+            opacity: 0;
+        }
+
+        .alert.show {
+            transform: translateX(0);
+            opacity: 1;
+        }
+
+        /* Modal */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+            overflow-y: auto;
+            opacity: 0;
+            transition: opacity 0.4s ease;
+        }
+
+        .modal.show {
+            opacity: 1;
+        }
+
+        .modal-content {
+            background-color: #fefefe;
+            margin: 5% auto;
+            padding: 30px;
+            border-radius: 15px;
+            max-width: 900px;
+            width: 90%;
+            box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
+            position: relative;
+            transform: translateY(-20px);
+            transition: transform 0.4s ease;
+        }
+
+        .modal.show .modal-content {
+            transform: translateY(0);
+        }
+
+        .close-modal {
+            position: absolute;
+            right: 25px;
+            top: 25px;
+            color: #aaa;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .close-modal:hover {
+            color: var(--orange-solid);
+            transform: rotate(90deg);
+        }
+
+        .modal-title {
+            font-size: 1.8rem;
+            color: var(--primary-color);
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 2px solid var(--primary-color);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .modal-products-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 25px;
+            margin-top: 20px;
+        }
+
+        .modal-product {
+            background: var(--white);
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
+            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        }
+
+        .modal-product:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+        }
+
+        .modal-product img {
+            width: 100%;
+            height: 180px;
+            object-fit: cover;
+            border-bottom: 1px solid var(--border-color);
+            transition: transform 0.4s ease;
+        }
+
+        .modal-product:hover img {
+            transform: scale(1.05);
+        }
+
+        .modal-product-info {
+            padding: 15px;
+        }
+
+        .modal-product-name {
+            font-size: 1rem;
+            font-weight: 600;
+            margin-bottom: 10px;
+            color: var(--text-dark);
+            display: block;
+            transition: color 0.3s ease;
+        }
+
+        .modal-product:hover .modal-product-name {
+            color: var(--orange-solid);
+        }
+
+        .modal-product-price {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .modal-old-price {
+            text-decoration: line-through;
+            color: #999;
+            font-size: 0.9rem;
+        }
+
+        .modal-new-price {
+            color: var(--error-color);
+            font-weight: bold;
+            font-size: 1.1rem;
+        }
+
+        .discount-badge {
+            background-color: var(--error-color);
+            color: white;
+            padding: 3px 8px;
+            border-radius: 4px;
+            font-size: 0.8rem;
+            font-weight: bold;
+            margin-left: 10px;
+        }
+
+        .no-products {
+            text-align: center;
+            padding: 40px;
+            color: var(--text-light);
+            font-size: 1.1rem;
+            grid-column: 1 / -1;
+        }
+
+        .loading-spinner {
+            display: inline-block;
+            width: 40px;
+            height: 40px;
+            border: 4px solid rgba(46, 101, 46, 0.2);
+            border-radius: 50%;
+            border-top-color: var(--primary-color);
+            animation: spin 1s ease-in-out infinite;
+            margin: 20px auto;
+            grid-column: 1 / -1;
+        }
+
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        /* Responsiveness */
+        @media (max-width: 1024px) {
+            .flyers-container {
+                grid-template-columns: repeat(2, 1fr);
+            }
+
+            .banner-title {
+                font-size: 2.4rem;
+            }
+
+            .banner-subtitle {
+                font-size: 1.1rem;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .main-content {
+                flex-direction: column;
+                padding: 10px;
+            }
+
+            .content-area {
+                order: 1;
+            }
+
+            .left-sidebar {
+                width: 100%;
+                order: 2;
+                margin-top: 20px;
+            }
+
+            .popular-categories {
+                grid-template-columns: repeat(2, 1fr);
+            }
+
+            .banner-slides {
+                height: 350px;
+            }
+
+            .banner-content {
+                padding: 0 30px;
+                text-align: center;
+            }
+
+            .banner-title {
+                font-size: 2rem;
+            }
+
+            .banner-nav {
+                width: 40px;
+                height: 40px;
+                font-size: 16px;
+            }
+
+            .flyers-container {
+                grid-template-columns: 1fr;
+            }
+
+            .modal-products-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        @media (max-width: 576px) {
+            .banner-slides {
+                height: 300px;
+            }
+
+            .banner-title {
+                font-size: 1.8rem;
+            }
+
+            .banner-subtitle {
+                font-size: 1rem;
+            }
+
+            .banner-btn {
+                padding: 10px 20px;
+            }
+
+            .popular-categories {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
+
+        #store-name {
+            margin-left: 5px;
+            color: var(--orange-solid);
+        }
+    </style>
+</head>
+<body>
+
+<div class="message-container">
+    {% if messages %}
+        {% for message in messages %}
+            <div class="alert alert-{{ message.tags }}">
+                {{ message }}
+                <span class="close-btn" onclick="this.parentElement.remove()">×</span>
+            </div>
+        {% endfor %}
+    {% endif %}
+</div>
+
+<!-- Main Content -->
+<div class="main-content">
+    <main class="content-area">
+        <div class="banner-container">
+            <div class="banner-slides">
+                <!-- Banner 1 -->
+                <div class="banner-slide active" style="background-image: url('{% static 'images/baner1.jpg' %}')">
+                    <div class="banner-overlay"></div>
+                    <div class="banner-content">
+                        <h1 class="banner-title">Сите производи на едно место!</h1>
+                        <p class="banner-subtitle">Пронајди ги најевтините производи со <span style="color: rgba(246,215,27,0.85)"><b>Штедко</b></span></p>
+                        <a href="{% url 'product_list' %}" class="banner-btn">Започни сега</a>
+                    </div>
+                </div>
+
+                <!-- Banner 2 -->
+                <div class="banner-slide" style="background-image: url('{% static 'images/baner2.jpg' %}')">
+                    <div class="banner-overlay"></div>
+                    <div class="banner-content">
+                        <h1 class="banner-title">Не ги пропуштај дневните попусти!</h1>
+                        <p class="banner-subtitle">До 70% попуст на избрани производи</p>
+                        <a href="{% url 'product_list' %}?discounted=1" class="banner-btn">Види попусти</a>
+                    </div>
+                </div>
+
+                <!-- Banner 3 -->
+                <div class="banner-slide" style="background-image: url('{% static 'images/kreiraj_listi.png' %}')">
+                    <div class="banner-overlay"></div>
+                    <div class="banner-content">
+                        <h1 class="banner-title">Направи си <span style="color: rgba(246,215,27,0.85)">листа</span> за пазарење и дознај</h1>
+                        <p class="banner-subtitle">во кој маркет е <span style="color: rgba(246,215,27,0.85)">најевтино</span>!</p>
+                        <a href="{% url 'product_list' %}?sort=newest" class="banner-btn">Истражувај</a>
+                    </div>
+                </div>
+            </div>
+
+            <button class="banner-nav banner-prev">❮</button>
+            <button class="banner-nav banner-next">❯</button>
+
+            <div class="banner-dots">
+                <div class="banner-dot active"></div>
+                <div class="banner-dot"></div>
+                <div class="banner-dot"></div>
+            </div>
+        </div>
+
+        <section class="market-flyers">
+            <h2 class="section-title">Актуелни Попусти</h2>
+            <div class="flyers-container">
+                {% if stores_with_products %}
+                    {% for store in stores_with_products %}
+                        <div class="flyer-card">
+                            <div class="flyer-header">
+                                <h3>{{ store.name }}</h3>
+                            </div>
+                            <div class="flyer-products">
+                                {% if store.products %}
+                                    {% for product in store.products|slice:":3" %}
+                                        <a href="{% url 'product_detail' product.id %}">
+                                            <div class="flyer-product">
+                                                <img src="{{ product.image_url }}" alt="{{ product.name }}"
+                                                     onerror="this.onerror=null;this.src='{% static 'images/no-image.png' %}'">
+                                                <div class="product-info">
+                                                    <span class="product-name">{{ product.name }}</span>
+                                                    <span class="product-price">
+                                                        <span class="old-price">{{ product.price }} ден.</span>
+                                                        <span class="new-price">{{ product.actual_price }} ден.</span>
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    {% endfor %}
+                                {% else %}
+                                    <p>Нема достапни попусти за {{ store.name }}.</p>
+                                {% endif %}
+                            </div>
+                            <button class="view-all-btn" data-store="{{ store.name }}" style="box-shadow: 0 8px 25px rgba(249, 139, 36, 0.4);">
+                                Види ги сите попусти
+                            </button>
+                        </div>
+                    {% endfor %}
+                {% else %}
+                    <p>No flyer data available. Please log in or check back later.</p>
+                {% endif %}
+            </div>
+        </section>
+    </main>
+    <aside class="left-sidebar">
+        <div class="sidebar-section">
+            <h3 style="background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); padding: 10px; border-radius: 10px">
+                Популарни категории</h3>
+            <div class="popular-categories">
+                <a href="{% url 'product_list' %}?category=Dairy" class="popular-category">
+                    <div class="popular-category-image"
+                         style="background-image: url('{% static 'images/categories/dairy.jpg' %}')"></div>
+                    <div class="popular-category-title">Млечни производи</div>
+                </a>
+                <a href="{% url 'product_list' %}?category=Vegetables" class="popular-category">
+                    <div class="popular-category-image"
+                         style="background-image: url('{% static 'images/categories/vegetables.jpg' %}')"></div>
+                    <div class="popular-category-title">Зеленчук</div>
+                </a>
+                <a href="{% url 'product_list' %}?category=Drinks" class="popular-category">
+                    <div class="popular-category-image"
+                         style="background-image: url('{% static 'images/categories/drinks.jpg' %}')"></div>
+                    <div class="popular-category-title">Пијалоци</div>
+                </a>
+                <a href="{% url 'product_list' %}?category=Cosmetics" class="popular-category">
+                    <div class="popular-category-image"
+                         style="background-image: url('{% static 'images/categories/cosmetics.jpg' %}')"></div>
+                    <div class="popular-category-title">Козметика</div>
+                </a>
+            </div>
+        </div>
+    </aside>
+</div>
+
+<!-- Modal for showing all discounted products -->
+<div id="products-modal" class="modal">
+    <div class="modal-content">
+        <span class="close-modal">×</span>
+        <h2 class="modal-title">
+            <i class="fas fa-tags"></i>
+            Попусти во <span id="store-name"></span>
+        </h2>
+        <div class="modal-products-grid" id="modal-products">
+            <!-- Products will be loaded here via JavaScript -->
+        </div>
+    </div>
+</div>
+
+<!-- Footer -->
+<footer>
+    <div class="footer-content">
+        <div class="footer-section">
+            <h3>За нас</h3>
+            <p>Ние сме водечка онлајн продавница со најдобри цени и квалитетни производи.</p>
+        </div>
+        <div class="footer-section">
+            <h3>Контакт</h3>
+            <p>Телефон: +389 70 123 456</p>
+            <p>Email: kontakt@nasataprodavnica.com</p>
+            <p>Адреса: Улица ББ, Скопје</p>
+        </div>
+        <div class="footer-section">
+            <h3>Брзи линкови</h3>
+            <a href="{% url 'home' %}">Дома</a>
+            <a href="{% url 'product_list' %}">Каталог</a>
+            <a href="#">Услови на користење</a>
+            <a href="#">Политика на приватност</a>
+        </div>
+        <div class="footer-section social">
+            <h3>Следете нè</h3>
+            <a href="#" target="_blank"><i class="fab fa-facebook-f"></i> Facebook</a>
+            <a href="#" target="_blank"><i class="fab fa-instagram"></i> Instagram</a>
+            <a href="#" target="_blank"><i class="fab fa-twitter"></i> Twitter</a>
+        </div>
+    </div>
+    <div class="copyright">
+        © 2023 Нашата Продавница. Сите права се задржани.
+    </div>
+</footer>
+
+<script>
+    // Banner carousel functionality
+    document.addEventListener('DOMContentLoaded', function() {
+        const bannerSlides = document.querySelectorAll('.banner-slide');
+        const prevBtn = document.querySelector('.banner-prev');
+        const nextBtn = document.querySelector('.banner-next');
+        const dots = document.querySelectorAll('.banner-dot');
+        const bannerContainer = document.querySelector('.banner-container');
+
+        let currentIndex = 0;
+        let interval;
+        let touchStartX = 0;
+        let touchEndX = 0;
+        const ROTATION_INTERVAL = 10000; // 10 seconds
+
+        // Initialize the first banner
+        showSlide(currentIndex);
+
+        // Auto-rotate banners
+        function startAutoRotate() {
+            interval = setInterval(nextSlide, ROTATION_INTERVAL);
+        }
+
+        function resetInterval() {
+            clearInterval(interval);
+            startAutoRotate();
+        }
+
+        function showSlide(index) {
+            // Hide all slides
+            bannerSlides.forEach(slide => {
+                slide.classList.remove('active');
+            });
+
+            // Show current slide
+            bannerSlides[index].classList.add('active');
+
+            // Update dots
+            dots.forEach(dot => dot.classList.remove('active'));
+            dots[index].classList.add('active');
+        }
+
+        function nextSlide() {
+            currentIndex = (currentIndex + 1) % bannerSlides.length;
+            showSlide(currentIndex);
+        }
+
+        function prevSlide() {
+            currentIndex = (currentIndex - 1 + bannerSlides.length) % bannerSlides.length;
+            showSlide(currentIndex);
+        }
+
+        // Button controls
+        nextBtn.addEventListener('click', function() {
+            nextSlide();
+            resetInterval();
+        });
+
+        prevBtn.addEventListener('click', function() {
+            prevSlide();
+            resetInterval();
+        });
+
+        // Dot navigation
+        dots.forEach((dot, index) => {
+            dot.addEventListener('click', function() {
+                currentIndex = index;
+                showSlide(currentIndex);
+                resetInterval();
+            });
+        });
+
+        // Touch events for mobile swipe
+        bannerContainer.addEventListener('touchstart', function(e) {
+            touchStartX = e.changedTouches[0].screenX;
+            clearInterval(interval);
+        }, {passive: true});
+
+        bannerContainer.addEventListener('touchend', function(e) {
+            touchEndX = e.changedTouches[0].screenX;
+            handleSwipe();
+            resetInterval();
+        }, {passive: true});
+
+        function handleSwipe() {
+            const threshold = 50; // Minimum swipe distance
+
+            if (touchEndX < touchStartX - threshold) {
+                // Swiped left - next slide
+                nextSlide();
+            } else if (touchEndX > touchStartX + threshold) {
+                // Swiped right - previous slide
+                prevSlide();
+            }
+        }
+
+        // Start auto-rotation
+        startAutoRotate();
+
+        // Pause on hover
+        bannerContainer.addEventListener('mouseenter', function() {
+            clearInterval(interval);
+        });
+
+        bannerContainer.addEventListener('mouseleave', function() {
+            resetInterval();
+        });
+
+        // Show messages with animation
+        document.querySelectorAll('.alert').forEach(alert => {
+            setTimeout(() => {
+                alert.classList.add('show');
+            }, 100);
+        });
+    });
+
+    // Modal functionality
+    document.addEventListener('DOMContentLoaded', function() {
+        const modal = document.getElementById('products-modal');
+        const modalTitle = document.getElementById('store-name');
+        const modalProducts = document.getElementById('modal-products');
+        const closeModal = document.querySelector('.close-modal');
+
+        document.querySelectorAll('.view-all-btn').forEach(button => {
+            button.addEventListener('click', function() {
+                const store = this.getAttribute('data-store');
+                modalTitle.textContent = store;
+                modalProducts.innerHTML = '<div class="loading-spinner"></div>';
+
+                // Show modal with fade in
+                modal.style.display = 'block';
+                setTimeout(() => {
+                    modal.classList.add('show');
+                }, 10);
+
+                fetch(`/get-store-products/?store=${encodeURIComponent(store)}`, {
+                    credentials: 'same-origin'
+                })
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error('Network response was not ok');
+                        }
+                        return response.json();
+                    })
+                    .then(data => {
+                        if (data.products && data.products.length > 0) {
+                            modalProducts.innerHTML = '';
+                            data.products.forEach(product => {
+                                const discount = Math.round(((product.price - product.actual_price) / product.price) * 100);
+
+                                const productElement = document.createElement('div');
+                                productElement.className = 'modal-product';
+                                productElement.innerHTML = `
+                                    <a href="/product/${product.id}/">
+                                        <img src="${product.image_url}" alt="${product.name}" onerror="this.onerror=null;this.src='{% static 'images/no-image.png' %}'">
+                                        <div class="modal-product-info">
+                                            <span class="modal-product-name">${product.name}</span>
+                                            <div class="modal-product-price">
+                                                <span class="modal-old-price">${product.price} ден.</span>
+                                                <div>
+                                                    <span class="modal-new-price">${product.actual_price} ден.</span>
+                                                    <span class="discount-badge">-${discount}%</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </a>
+                                `;
+                                modalProducts.appendChild(productElement);
+                            });
+                        } else {
+                            modalProducts.innerHTML = '<div class="no-products"><i class="fas fa-box-open" style="font-size: 2rem; color: #ccc; margin-bottom: 15px;"></i><p>Нема достапни попусти за оваа продавница.</p></div>';
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error:', error);
+                        modalProducts.innerHTML = `
+                            <div class="no-products">
+                                <i class="fas fa-exclamation-triangle" style="font-size: 2rem; color: #e74c3c; margin-bottom: 15px;"></i>
+                                <p>Грешка при вчитување на производите.</p>
+                                <a href="/login/" style="color: #2e652e; font-weight: bold;">Најави се</a> или обидете се повторно.
+                            </div>
+                        `;
+                    });
+
+                document.body.style.overflow = 'hidden';
+            });
+        });
+
+        function closeModalHandler() {
+            modal.classList.remove('show');
+            setTimeout(() => {
+                modal.style.display = 'none';
+                document.body.style.overflow = 'auto';
+            }, 400);
+        }
+
+        closeModal.addEventListener('click', closeModalHandler);
+
+        window.addEventListener('click', function(event) {
+            if (event.target === modal) {
+                closeModalHandler();
+            }
+        });
+
+        // Auto-close messages after 5 seconds
+        setTimeout(() => {
+            document.querySelectorAll('.alert').forEach(alert => {
+                alert.style.opacity = '0';
+                setTimeout(() => alert.remove(), 300);
+            });
+        }, 5000);
+    });
+</script>
+</body>
+</html>
+{% endblock %}
Index: main/views.py
===================================================================
--- main/views.py	(revision 7e767ce392072d870454bda4c5aaff770dec07f5)
+++ main/views.py	(revision 09a55ba56c74813273c03182cd01e2f8d3314915)
@@ -39,5 +39,5 @@
 
 def index(response):
-    return render(response, "main/base.html")
+    return render(response, "main/index.html")
 
 
@@ -110,8 +110,8 @@
     }
 
-    return render(response, 'main/base.html', context)
+    return render(response, 'main/index.html', context)
 
 # def base(response):
-#     return render(response, "main/base.html")
+#     return render(response, "main/index.html")
 from django.db.models import Q
 from django.utils import timezone
@@ -307,5 +307,5 @@
         'stores_with_products': stores_with_products
     }
-    return render(request, 'main/base.html', context)
+    return render(request, 'main/index.html', context)
 
 
