Autosave: 20260220-205036

config/settings.py

@@ -155,6 +155,10 @@ STATICFILES_DIRS = [
     BASE_DIR / 'node_modules',
 ]
 
+# Media files (User-uploaded files)
+MEDIA_URL = '/media/'
+MEDIA_ROOT = BASE_DIR / 'media'
+
 # Email
 EMAIL_BACKEND = os.getenv(
     "EMAIL_BACKEND",
@@ -179,4 +183,4 @@ if EMAIL_USE_SSL:
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field
 
-DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

config/urls.py

@@ -27,3 +27,4 @@ urlpatterns = [
 if settings.DEBUG:
     urlpatterns += static("/assets/", document_root=settings.BASE_DIR / "assets")
     urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
+    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

core/admin.py

@@ -1,3 +1,67 @@
 from django.contrib import admin
+from .models import Category, Vendor, Product
 
-# Register your models here.
+@admin.register(Category)
+class CategoryAdmin(admin.ModelAdmin):
+    list_display = ('name', 'slug')
+    prepopulated_fields = {'slug': ('name',)}
+
+@admin.register(Vendor)
+class VendorAdmin(admin.ModelAdmin):
+    list_display = ('name', 'whatsapp_number', 'created_at')
+    prepopulated_fields = {'slug': ('name',)}
+    search_fields = ('name', 'whatsapp_number')
+
+    def get_queryset(self, request):
+        qs = super().get_queryset(request)
+        if request.user.is_superuser:
+            return qs
+        return qs.filter(user=request.user)
+
+@admin.register(Product)
+class ProductAdmin(admin.ModelAdmin):
+    list_display = ('name', 'vendor', 'category', 'price', 'stock', 'is_active', 'created_at')
+    list_filter = ('vendor', 'category', 'is_active')
+    prepopulated_fields = {'slug': ('name',)}
+    search_fields = ('name', 'vendor__name', 'category__name')
+
+    def get_queryset(self, request):
+        qs = super().get_queryset(request)
+        if request.user.is_superuser:
+            return qs
+        # Filter products by the vendor linked to the user
+        try:
+            vendor = request.user.vendor_profile
+            return qs.filter(vendor=vendor)
+        except:
+            return qs.none()
+
+    def get_form(self, request, obj=None, **kwargs):
+        form = super().get_form(request, obj, **kwargs)
+        if not request.user.is_superuser:
+            # If a vendor is logged in, hide the 'vendor' field from the form
+            if 'vendor' in form.base_fields:
+                form.base_fields['vendor'].required = False
+                # Remove it from the displayed fields if it's there
+                # However, for simplicity, we'll just handle it in save_model
+        return form
+
+    def save_model(self, request, obj, form, change):
+        if not request.user.is_superuser:
+            # Automatically set the vendor if it's not set and the user is a vendor
+            try:
+                obj.vendor = request.user.vendor_profile
+            except:
+                pass
+        super().save_model(request, obj, form, change)
+
+    def get_fieldsets(self, request, obj=None):
+        fieldsets = super().get_fieldsets(request, obj)
+        if not request.user.is_superuser:
+            # Exclude vendor field from the form for vendors
+            for fieldset in fieldsets:
+                if 'vendor' in fieldset[1]['fields']:
+                    # Create a new tuple without 'vendor'
+                    new_fields = tuple(f for f in fieldset[1]['fields'] if f != 'vendor')
+                    fieldset[1]['fields'] = new_fields
+        return fieldsets

core/management/commands/create_vendor_accounts.py

@@ -0,0 +1,50 @@
+from django.core.management.base import BaseCommand
+from django.contrib.auth.models import User, Permission
+from django.contrib.contenttypes.models import ContentType
+from core.models import Vendor, Product, Category
+
+class Command(BaseCommand):
+    help = 'Create user accounts for existing vendors and grant permissions'
+
+    def handle(self, *args, **kwargs):
+        vendors = Vendor.objects.all()
+        password = 'vendorpass'
+        
+        # Get permissions
+        models = [Vendor, Product, Category]
+        permissions = []
+        for model in models:
+            content_type = ContentType.objects.get_for_model(model)
+            permissions.extend(Permission.objects.filter(content_type=content_type))
+            
+        for vendor in vendors:
+            if not vendor.user:
+                username = vendor.slug.replace('-', '_')
+                
+                # Ensure unique username
+                base_username = username
+                counter = 1
+                while User.objects.filter(username=username).exists():
+                    username = f"{base_username}{counter}"
+                    counter += 1
+                    
+                user = User.objects.create_user(
+                    username=username,
+                    email='',
+                    password=password,
+                    is_staff=True
+                )
+                
+                vendor.user = user
+                vendor.save()
+                self.stdout.write(self.style.SUCCESS(f'Created user "{username}" for vendor "{vendor.name}"'))
+            else:
+                user = vendor.user
+                user.is_staff = True
+                user.save()
+            
+            # Grant permissions
+            user.user_permissions.add(*permissions)
+            self.stdout.write(self.style.SUCCESS(f'Granted permissions to user "{user.username}"'))
+
+        self.stdout.write(self.style.SUCCESS('Successfully processed vendor accounts. Default password: vendorpass'))

core/management/commands/seed_data.py

@@ -0,0 +1,124 @@
+from django.core.management.base import BaseCommand
+from core.models import Category, Vendor, Product
+from django.utils.text import slugify
+
+class Command(BaseCommand):
+    help = 'Seeds initial data for Pasar UMKM Pemagarsari'
+
+    def handle(self, *args, **options):
+        # Create Categories
+        categories_data = [
+            {'name': 'Makanan', 'icon': 'fa-utensils'},
+            {'name': 'Minuman', 'icon': 'fa-coffee'},
+            {'name': 'Kerajinan', 'icon': 'fa-palette'},
+            {'name': 'Pakaian', 'icon': 'fa-tshirt'},
+            {'name': 'Jasa', 'icon': 'fa-tools'},
+            {'name': 'Pertanian', 'icon': 'fa-leaf'},
+        ]
+        
+        cats = {}
+        for cat in categories_data:
+            obj, created = Category.objects.get_or_create(
+                name=cat['name'],
+                defaults={'icon': cat['icon']}
+            )
+            cats[cat['name']] = obj
+            if created:
+                self.stdout.write(self.style.SUCCESS(f'Created category: {cat["name"]}'))
+
+        # Create Vendors
+        vendors_data = [
+            {
+                'name': 'Dapur Bu Siti',
+                'whatsapp_number': '628123456789',
+                'description': 'Spesialis kue basah dan masakan tradisional khas Pemagarsari.',
+                'address': 'RT 01 RW 02, Desa Pemagarsari'
+            },
+            {
+                'name': 'Kerajinan Bambu Jaya',
+                'whatsapp_number': '628987654321',
+                'description': 'Produk anyaman bambu berkualitas tinggi untuk dekorasi rumah.',
+                'address': 'RT 05 RW 01, Desa Pemagarsari'
+            },
+            {
+                'name': 'Kopi Desa Kita',
+                'whatsapp_number': '628555444333',
+                'description': 'Kopi asli hasil perkebunan Desa Pemagarsari yang diproses secara tradisional.',
+                'address': 'RT 03 RW 03, Desa Pemagarsari'
+            }
+        ]
+
+        vens = {}
+        for ven in vendors_data:
+            obj, created = Vendor.objects.get_or_create(
+                name=ven['name'],
+                defaults={
+                    'whatsapp_number': ven['whatsapp_number'],
+                    'description': ven['description'],
+                    'address': ven['address']
+                }
+            )
+            vens[ven['name']] = obj
+            if created:
+                self.stdout.write(self.style.SUCCESS(f'Created vendor: {ven["name"]}'))
+
+        # Create Products
+        products_data = [
+            {
+                'name': 'Kue Klepon Lumer',
+                'vendor': vens['Dapur Bu Siti'],
+                'category': cats['Makanan'],
+                'price': 15000,
+                'description': 'Klepon dengan gula merah cair yang melimpah dan taburan kelapa gurih. Isi 10 pcs.'
+            },
+            {
+                'name': 'Nasi Liwet Komplit',
+                'vendor': vens['Dapur Bu Siti'],
+                'category': cats['Makanan'],
+                'price': 25000,
+                'description': 'Nasi liwet dengan lauk ayam goreng, tahu tempe, sambal, dan lalapan.'
+            },
+            {
+                'name': 'Tas Anyaman Bambu',
+                'vendor': vens['Kerajinan Bambu Jaya'],
+                'category': cats['Kerajinan'],
+                'price': 85000,
+                'description': 'Tas jinjing elegan hasil anyaman tangan pengrajin lokal. Kuat dan ramah lingkungan.'
+            },
+            {
+                'name': 'Wadah Serbaguna',
+                'vendor': vens['Kerajinan Bambu Jaya'],
+                'category': cats['Kerajinan'],
+                'price': 45000,
+                'description': 'Satu set wadah serbaguna untuk keperluan dapur atau dekorasi.'
+            },
+            {
+                'name': 'Kopi Robusta Pemagarsari (250g)',
+                'vendor': vens['Kopi Desa Kita'],
+                'category': cats['Minuman'],
+                'price': 35000,
+                'description': 'Bubuk kopi robusta pilihan dengan aroma yang kuat dan rasa yang mantap.'
+            },
+            {
+                'name': 'Gula Semut Aren',
+                'vendor': vens['Kopi Desa Kita'],
+                'category': cats['Minuman'],
+                'price': 20000,
+                'description': 'Gula aren kualitas premium, sangat cocok untuk pemanis kopi atau minuman lainnya.'
+            }
+        ]
+
+        for prod in products_data:
+            obj, created = Product.objects.get_or_create(
+                name=prod['name'],
+                vendor=prod['vendor'],
+                defaults={
+                    'category': prod['category'],
+                    'price': prod['price'],
+                    'description': prod['description']
+                }
+            )
+            if created:
+                self.stdout.write(self.style.SUCCESS(f'Created product: {prod["name"]}'))
+
+        self.stdout.write(self.style.SUCCESS('Successfully seeded initial data.'))

core/management/commands/update_images.py

@@ -0,0 +1,36 @@
+from django.core.management.base import BaseCommand
+from core.models import Vendor, Product
+from core.pexels import fetch_first
+import os
+
+class Command(BaseCommand):
+    help = 'Fetches sample images from Pexels for existing products and vendors'
+
+    def handle(self, *args, **options):
+        self.stdout.write("Fetching images for vendors...")
+        for vendor in Vendor.objects.all():
+            if not vendor.logo:
+                self.stdout.write(f"Fetching logo for vendor: {vendor.name}")
+                result = fetch_first(f"shop logo {vendor.name}", orientation="square")
+                if result:
+                    vendor.logo = result['local_path']
+                    vendor.save()
+                    self.stdout.write(self.style.SUCCESS(f"Updated logo for {vendor.name}"))
+                else:
+                    self.stdout.write(self.style.WARNING(f"Could not fetch logo for {vendor.name}"))
+
+        self.stdout.write("Fetching images for products...")
+        for product in Product.objects.all():
+            if not product.image:
+                self.stdout.write(f"Fetching image for product: {product.name}")
+                # Use a specific query based on the product name and category
+                query = f"{product.category.name} {product.name}"
+                result = fetch_first(query, orientation="landscape")
+                if result:
+                    product.image = result['local_path']
+                    product.save()
+                    self.stdout.write(self.style.SUCCESS(f"Updated image for {product.name}"))
+                else:
+                    self.stdout.write(self.style.WARNING(f"Could not fetch image for {product.name}"))
+
+        self.stdout.write(self.style.SUCCESS('Successfully updated all missing images.'))

core/migrations/0001_initial.py

@@ -0,0 +1,56 @@
+# Generated by Django 5.2.7 on 2026-02-20 18:37
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Category',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=100)),
+                ('slug', models.SlugField(blank=True, unique=True)),
+                ('icon', models.CharField(blank=True, help_text='FontAwesome icon class', max_length=50)),
+            ],
+            options={
+                'verbose_name_plural': 'Categories',
+            },
+        ),
+        migrations.CreateModel(
+            name='Vendor',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=200)),
+                ('slug', models.SlugField(blank=True, unique=True)),
+                ('description', models.TextField(blank=True)),
+                ('whatsapp_number', models.CharField(help_text='Format: 628123456789', max_length=20)),
+                ('address', models.TextField(blank=True)),
+                ('logo', models.ImageField(blank=True, null=True, upload_to='vendors/')),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Product',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=255)),
+                ('slug', models.SlugField(blank=True, unique=True)),
+                ('description', models.TextField()),
+                ('price', models.DecimalField(decimal_places=2, max_digits=12)),
+                ('image', models.ImageField(blank=True, null=True, upload_to='products/')),
+                ('stock', models.PositiveIntegerField(default=1)),
+                ('is_active', models.BooleanField(default=True)),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('category', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='products', to='core.category')),
+                ('vendor', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='products', to='core.vendor')),
+            ],
+        ),
+    ]

core/migrations/0002_vendor_user.py

@@ -0,0 +1,21 @@
+# Generated by Django 5.2.7 on 2026-02-20 19:03
+
+import django.db.models.deletion
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0001_initial'),
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='vendor',
+            name='user',
+            field=models.OneToOneField(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='vendor_profile', to=settings.AUTH_USER_MODEL),
+        ),
+    ]

core/models.py

@@ -1,3 +1,64 @@
 from django.db import models
+from django.urls import reverse
+from django.utils.text import slugify
+from django.contrib.auth.models import User
 
-# Create your models here.
+class Category(models.Model):
+    name = models.CharField(max_length=100)
+    slug = models.SlugField(unique=True, blank=True)
+    icon = models.CharField(max_length=50, blank=True, help_text="FontAwesome icon class")
+
+    class Meta:
+        verbose_name_plural = "Categories"
+
+    def save(self, *args, **kwargs):
+        if not self.slug:
+            self.slug = slugify(self.name)
+        super().save(*args, **kwargs)
+
+    def __str__(self):
+        return self.name
+
+class Vendor(models.Model):
+    user = models.OneToOneField(User, on_delete=models.CASCADE, related_name='vendor_profile', null=True, blank=True)
+    name = models.CharField(max_length=200)
+    slug = models.SlugField(unique=True, blank=True)
+    description = models.TextField(blank=True)
+    whatsapp_number = models.CharField(max_length=20, help_text="Format: 628123456789")
+    address = models.TextField(blank=True)
+    logo = models.ImageField(upload_to='vendors/', blank=True, null=True)
+    created_at = models.DateTimeField(auto_now_add=True)
+
+    def save(self, *args, **kwargs):
+        if not self.slug:
+            self.slug = slugify(self.name)
+        super().save(*args, **kwargs)
+
+    def __str__(self):
+        return self.name
+
+class Product(models.Model):
+    vendor = models.ForeignKey(Vendor, on_delete=models.CASCADE, related_name='products')
+    category = models.ForeignKey(Category, on_delete=models.SET_NULL, null=True, related_name='products')
+    name = models.CharField(max_length=255)
+    slug = models.SlugField(unique=True, blank=True)
+    description = models.TextField()
+    price = models.DecimalField(max_digits=12, decimal_places=2)
+    image = models.ImageField(upload_to='products/', blank=True, null=True)
+    stock = models.PositiveIntegerField(default=1)
+    is_active = models.BooleanField(default=True)
+    created_at = models.DateTimeField(auto_now_add=True)
+
+    def save(self, *args, **kwargs):
+        if not self.slug:
+            self.slug = slugify(self.name)
+        super().save(*args, **kwargs)
+
+    def __str__(self):
+        return self.name
+
+    def get_whatsapp_url(self):
+        message = f"Halo {self.vendor.name}, saya tertarik membeli {self.name} seharga Rp {self.price:,.0f}. Apakah stok masih ada?"
+        import urllib.parse
+        encoded_message = urllib.parse.quote(message)
+        return f"https://wa.me/{self.vendor.whatsapp_number}?text={encoded_message}"

core/pexels.py

@@ -0,0 +1,44 @@
+import os
+from pathlib import Path
+import httpx
+
+API_KEY = os.getenv("PEXELS_KEY", "Vc99rnmOhHhJAbgGQoKLZtsaIVfkeownoQNbTj78VemUjKh08ZYRbf18")
+CACHE_DIR = Path("media/pexels")
+
+def _client():
+    return httpx.Client(
+        base_url="https://api.pexels.com/v1/",
+        headers={"Authorization": API_KEY},
+        timeout=15,
+    )
+
+def fetch_first(query: str, orientation: str = "portrait") -> dict | None:
+    if not API_KEY:
+        return None
+    try:
+        with _client() as client:
+            resp = client.get(
+                "search",
+                params={"query": query, "orientation": orientation, "per_page": 1, "page": 1},
+            )
+            resp.raise_for_status()
+        data = resp.json()
+        photo = (data.get("photos") or [None])[0]
+        if not photo:
+            return None
+        src = photo["src"].get("large2x") or photo["src"].get("large") or photo["src"].get("original")
+        CACHE_DIR.mkdir(parents=True, exist_ok=True)
+        target = CACHE_DIR / f"{photo['id']}.jpg"
+        if src:
+            img = httpx.get(src, timeout=15)
+            img.raise_for_status()
+            target.write_bytes(img.content)
+        return {
+            "id": photo["id"],
+            "local_path": f"pexels/{photo['id']}.jpg",
+            "photographer": photo.get("photographer"),
+            "photographer_url": photo.get("photographer_url"),
+        }
+    except Exception as e:
+        print(f"Error fetching from Pexels: {e}")
+        return None

core/templates/base.html

@@ -1,25 +1,103 @@
+{% load static %}
 <!DOCTYPE html>
-<html lang="en">
-
+<html lang="id">
 <head>
-  <meta charset="UTF-8">
-  <title>{% block title %}Knowledge Base{% endblock %}</title>
-  {% if project_description %}
-  <meta name="description" content="{{ project_description }}">
-  <meta property="og:description" content="{{ project_description }}">
-  <meta property="twitter:description" content="{{ project_description }}">
-  {% endif %}
-  {% if project_image_url %}
-  <meta property="og:image" content="{{ project_image_url }}">
-  <meta property="twitter:image" content="{{ project_image_url }}">
-  {% endif %}
-  {% load static %}
-  <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
-  {% block head %}{% endblock %}
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>{% block title %}Pasar UMKM Desa Pemagarsari{% endblock %}</title>
+    <meta name="description" content="{% block meta_description %}Pasar Online UMKM Desa Pemagarsari. Berdayakan ekonomi lokal melalui transaksi mudah via WhatsApp.{% endblock %}">
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
+    
+    <!-- Bootstrap CSS CDN -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ current_time|date:'U' }}">
+    
+    {% block extra_head %}{% endblock %}
 </head>
-
 <body>
-  {% block content %}{% endblock %}
-</body>
 
-</html>
+    <!-- Navbar -->
+    <nav class="navbar navbar-expand-lg navbar-dark sticky-top">
+        <div class="container">
+            <a class="navbar-brand" href="{% url 'home' %}">
+                <i class="fas fa-store me-2"></i> PASAR UMKM
+            </a>
+            <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav me-auto mb-3 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link" href="{% url 'home' %}">Beranda</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{% url 'product_list' %}">Semua Produk</a>
+                    </li>
+                </ul>
+                <div class="d-grid d-lg-block">
+                    <a href="/admin/" class="btn btn-outline-light btn-sm rounded-pill px-3">
+                        <i class="fas fa-user-circle me-1"></i> Admin / Vendor Login
+                    </a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main>
+        {% block content %}{% endblock %}
+    </main>
+
+    <!-- Footer -->
+    <footer class="footer mt-auto">
+        <div class="container">
+            <div class="row g-4">
+                <div class="col-lg-4 col-md-6">
+                    <h5 class="fw-bold">Pasar UMKM Pemagarsari</h5>
+                    <p class="small opacity-75">Inisiatif Desa Pemagarsari untuk menghubungkan UMKM lokal dengan pembeli melalui sistem pasar online yang modern dan mudah.</p>
+                </div>
+                <div class="col-lg-2 col-6">
+                    <h5 class="fw-bold">Navigasi</h5>
+                    <ul class="list-unstyled">
+                        <li><a href="{% url 'home' %}" class="footer-link small">Beranda</a></li>
+                        <li><a href="{% url 'product_list' %}" class="footer-link small">Semua Produk</a></li>
+                        <li><a href="/admin/" class="footer-link small">Admin / Vendor</a></li>
+                    </ul>
+                </div>
+                <div class="col-lg-2 col-6">
+                    <h5 class="fw-bold">Bantuan</h5>
+                    <ul class="list-unstyled">
+                        <li><a href="#" class="footer-link small">Cara Belanja</a></li>
+                        <li><a href="#" class="footer-link small">Syarat & Ketentuan</a></li>
+                        <li><a href="#" class="footer-link small">Kebijakan Privasi</a></li>
+                    </ul>
+                </div>
+                <div class="col-lg-4 col-md-6">
+                    <h5 class="fw-bold">Kontak Kami</h5>
+                    <p class="small mb-2"><i class="fas fa-map-marker-alt me-2 text-accent"></i> Kantor Desa Pemagarsari, Jawa Barat</p>
+                    <p class="small mb-3"><i class="fas fa-phone me-2 text-accent"></i> +62-21-XXXXXXX</p>
+                    <div class="d-flex gap-3">
+                        <a href="#" class="text-white fs-5 opacity-75 hover-opacity-100"><i class="fab fa-instagram"></i></a>
+                        <a href="#" class="text-white fs-5 opacity-75 hover-opacity-100"><i class="fab fa-facebook"></i></a>
+                        <a href="#" class="text-white fs-5 opacity-75 hover-opacity-100"><i class="fab fa-whatsapp"></i></a>
+                    </div>
+                </div>
+            </div>
+            <hr class="mt-5 mb-4 border-light opacity-10">
+            <div class="text-center">
+                <p class="mb-0 small text-light opacity-50">&copy; 2026 Desa Pemagarsari. Berdaya Bersama UMKM Lokal.</p>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Bootstrap JS CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    {% block extra_js %}{% endblock %}
+</body>
+</html>

core/templates/core/index.html

@@ -1,145 +1,170 @@
 {% extends "base.html" %}
-
-{% block title %}{{ project_name }}{% endblock %}
-
-{% block head %}
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-<style>
-  :root {
-    --bg-color-start: #6a11cb;
-    --bg-color-end: #2575fc;
-    --text-color: #ffffff;
-    --card-bg-color: rgba(255, 255, 255, 0.01);
-    --card-border-color: rgba(255, 255, 255, 0.1);
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  body {
-    margin: 0;
-    font-family: 'Inter', sans-serif;
-    background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-    color: var(--text-color);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    text-align: center;
-    overflow: hidden;
-    position: relative;
-  }
-
-  body::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><path d='M-10 10L110 10M10 -10L10 110' stroke-width='1' stroke='rgba(255,255,255,0.05)'/></svg>");
-    animation: bg-pan 20s linear infinite;
-    z-index: -1;
-  }
-
-  @keyframes bg-pan {
-    0% {
-      background-position: 0% 0%;
-    }
-
-    100% {
-      background-position: 100% 100%;
-    }
-  }
-
-  main {
-    padding: 2rem;
-  }
-
-  .card {
-    background: var(--card-bg-color);
-    border: 1px solid var(--card-border-color);
-    border-radius: 16px;
-    padding: 2.5rem 2rem;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
-  }
-
-  h1 {
-    font-size: clamp(2.2rem, 3vw + 1.2rem, 3.2rem);
-    font-weight: 700;
-    margin: 0 0 1.2rem;
-    letter-spacing: -0.02em;
-  }
-
-  p {
-    margin: 0.5rem 0;
-    font-size: 1.1rem;
-    opacity: 0.92;
-  }
-
-  .loader {
-    margin: 1.5rem auto;
-    width: 56px;
-    height: 56px;
-    border: 4px solid rgba(255, 255, 255, 0.25);
-    border-top-color: #fff;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  .runtime code {
-    background: rgba(0, 0, 0, 0.25);
-    padding: 0.15rem 0.45rem;
-    border-radius: 4px;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
-  }
-
-  footer {
-    position: absolute;
-    bottom: 1rem;
-    width: 100%;
-    text-align: center;
-    font-size: 0.85rem;
-    opacity: 0.75;
-  }
-</style>
-{% endblock %}
+{% load static %}
 
 {% block content %}
-<main>
-  <div class="card">
-    <h1>Analyzing your requirements and generating your app…</h1>
-    <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-      <span class="sr-only">Loading…</span>
+<!-- Hero Section -->
+<header class="hero-section text-center">
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-lg-10 col-xl-8">
+                <h1 class="mb-4">Selamat Datang di Pasar UMKM Desa Pemagarsari</h1>
+                <p class="lead mb-5 opacity-90 mx-auto max-width-700">Pasar digital untuk produk unggulan lokal dari desa kita sendiri. Berdayakan ekonomi lokal melalui kemudahan transaksi via WhatsApp.</p>
+                <div class="d-flex flex-column flex-sm-row justify-content-center gap-3 px-4 px-sm-0">
+                    <a href="{% url 'product_list' %}" class="btn btn-accent btn-lg shadow">
+                        <i class="fas fa-shopping-bag me-2"></i> Jelajahi Produk
+                    </a>
+                    <a href="#kategori" class="btn btn-outline-light btn-lg">
+                        <i class="fas fa-list-ul me-2"></i> Lihat Kategori
+                    </a>
+                </div>
+            </div>
+        </div>
     </div>
-    <p class="hint">AppWizzy AI is collecting your requirements and applying the first changes.</p>
-    <p class="hint">This page will refresh automatically as the plan is implemented.</p>
-    <p class="runtime">
-      Runtime: Django <code>{{ django_version }}</code> · Python <code>{{ python_version }}</code>
-      — UTC <code>{{ current_time|date:"Y-m-d H:i:s" }}</code>
-    </p>
-  </div>
-</main>
-<footer>
-  Page updated: {{ current_time|date:"Y-m-d H:i:s" }} (UTC)
-</footer>
+</header>
+
+<!-- Image Banner Section -->
+<section class="banner-promo py-5">
+    <div class="container">
+        <div class="row">
+            <div class="col-12">
+                <div class="banner-wrapper rounded-4 overflow-hidden shadow-lg">
+                    <img src="{% static 'images/banner-umkm.png' %}" class="img-fluid w-100" alt="Banner Pasar UMKM Desa Pemagarsari">
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Categories Section -->
+<section id="kategori" class="py-5 bg-white">
+    <div class="container">
+        <div class="text-center mb-5">
+            <h2 class="section-title">Kategori Pilihan</h2>
+        </div>
+        <div class="row row-cols-2 row-cols-md-3 row-cols-lg-6 g-3 g-md-4 justify-content-center">
+            {% if categories %}
+                {% for category in categories %}
+                <div class="col">
+                    <a href="{% url 'product_list_by_category' category.slug %}" class="category-pill">
+                        <i class="fas {{ category.icon|default:'fa-tag' }} text-primary"></i>
+                        <span>{{ category.name }}</span>
+                    </a>
+                </div>
+                {% endfor %}
+            {% else %}
+                <div class="col">
+                    <a href="#" class="category-pill">
+                        <i class="fas fa-utensils text-primary"></i>
+                        <span>Makanan</span>
+                    </a>
+                </div>
+                <div class="col">
+                    <a href="#" class="category-pill">
+                        <i class="fas fa-coffee text-primary"></i>
+                        <span>Minuman</span>
+                    </a>
+                </div>
+                <div class="col">
+                    <a href="#" class="category-pill">
+                        <i class="fas fa-palette text-primary"></i>
+                        <span>Kerajinan</span>
+                    </a>
+                </div>
+                <div class="col">
+                    <a href="#" class="category-pill">
+                        <i class="fas fa-tshirt text-primary"></i>
+                        <span>Pakaian</span>
+                    </a>
+                </div>
+                <div class="col">
+                    <a href="#" class="category-pill">
+                        <i class="fas fa-seedling text-primary"></i>
+                        <span>Pertanian</span>
+                    </a>
+                </div>
+                <div class="col">
+                    <a href="#" class="category-pill">
+                        <i class="fas fa-concierge-bell text-primary"></i>
+                        <span>Jasa</span>
+                    </a>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</section>
+
+<!-- Featured Products -->
+<section class="py-5">
+    <div class="container">
+        <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center align-items-sm-end mb-5 text-center text-sm-start gap-3">
+            <div>
+                <h2 class="mb-1">Produk Terbaru</h2>
+                <p class="text-muted mb-0">Temukan yang baru dari UMKM Desa Pemagarsari</p>
+            </div>
+            <a href="{% url 'product_list' %}" class="btn btn-link text-primary fw-bold text-decoration-none p-0">
+                Lihat Semua <i class="fas fa-arrow-right ms-1"></i>
+            </a>
+        </div>
+        <div class="row g-3 g-md-4">
+            {% if featured_products %}
+                {% for product in featured_products %}
+                <div class="col-6 col-lg-3">
+                    <div class="card h-100">
+                        <div class="position-relative">
+                            {% if product.image %}
+                                <img src="{{ product.image.url }}" class="card-img-top" alt="{{ product.name }}" style="height: 160px; @media(min-width: 768px){height: 200px}; object-fit: cover;">
+                            {% else %}
+                                <div class="bg-secondary-subtle d-flex align-items-center justify-content-center" style="height: 160px; @media(min-width: 768px){height: 200px};">
+                                    <i class="fas fa-image fa-2x text-muted opacity-50"></i>
+                                </div>
+                            {% endif %}
+                            <span class="badge bg-white text-primary position-absolute top-0 end-0 m-2 shadow-sm border-0">{{ product.category.name }}</span>
+                        </div>
+                        <div class="card-body p-3 p-md-4 d-flex flex-column">
+                            <h5 class="card-title mb-1">
+                                <a href="{% url 'product_detail' product.slug %}" class="text-decoration-none text-dark">{{ product.name }}</a>
+                            </h5>
+                            <p class="small text-muted mb-3 d-none d-md-block"><i class="fas fa-store me-1"></i> {{ product.vendor.name }}</p>
+                            <div class="mt-auto">
+                                <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-2">
+                                    <span class="product-price">Rp {{ product.price|floatformat:0 }}</span>
+                                    <a href="{{ product.get_whatsapp_url }}" target="_blank" class="btn btn-sm wa-btn shadow-sm">
+                                        <i class="fab fa-whatsapp me-1"></i> Beli
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            {% else %}
+                <!-- Placeholder for empty state -->
+                {% for i in "1234" %}
+                <div class="col-6 col-lg-3">
+                    <div class="card h-100 shadow-sm opacity-50">
+                        <div class="bg-secondary-subtle d-flex align-items-center justify-content-center" style="height: 160px; @media(min-width: 768px){height: 200px};">
+                            <i class="fas fa-box-open fa-2x text-muted opacity-50"></i>
+                        </div>
+                        <div class="card-body">
+                            <h5 class="card-title">Produk Contoh {{ i }}</h5>
+                            <p class="product-price">Rp XX.XXX</p>
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            {% endif %}
+        </div>
+    </div>
+</section>
+
+<!-- Call to Action for Vendors -->
+<section class="py-5 bg-primary text-white text-center">
+    <div class="container py-4">
+        <h2 class="text-white mb-3">Punya Usaha di Pemagarsari?</h2>
+        <p class="lead mb-4 opacity-90 mx-auto max-width-700">Daftarkan usaha Anda sekarang dan jangkau lebih banyak pembeli secara online.</p>
+        <a href="/admin/" class="btn btn-accent btn-lg px-5 shadow-sm">
+            <i class="fas fa-user-plus me-2"></i> Daftar Sebagai Vendor
+        </a>
+    </div>
+</section>
 {% endblock %}

core/templates/core/product_detail.html

@@ -0,0 +1,117 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}{{ product.name }} - Pasar UMKM Pemagarsari{% endblock %}
+
+{% block content %}
+<section class="py-3 py-md-5">
+    <div class="container">
+        <!-- Breadcrumb - Hidden on small mobile to save space -->
+        <nav aria-label="breadcrumb" class="mb-4 d-none d-sm-block">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="{% url 'home' %}" class="text-decoration-none">Beranda</a></li>
+                <li class="breadcrumb-item"><a href="{% url 'product_list' %}" class="text-decoration-none">Produk</a></li>
+                <li class="breadcrumb-item active" aria-current="page">{{ product.name }}</li>
+            </ol>
+        </nav>
+
+        <div class="row g-4 g-lg-5">
+            <!-- Product Image -->
+            <div class="col-lg-6">
+                <div class="card shadow-sm border-0 p-1 p-md-2 h-100 bg-white overflow-hidden">
+                    {% if product.image %}
+                        <img src="{{ product.image.url }}" class="img-fluid rounded w-100" alt="{{ product.name }}" style="object-fit: cover; max-height: 500px;">
+                    {% else %}
+                        <div class="bg-secondary-subtle d-flex align-items-center justify-content-center" style="min-height: 300px; height: 100%;">
+                            <i class="fas fa-image fa-5x text-muted opacity-50"></i>
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+
+            <!-- Product Info -->
+            <div class="col-lg-6">
+                <div class="ps-lg-3 mt-3 mt-lg-0">
+                    <span class="badge bg-secondary mb-3 px-3 py-2 fs-7">{{ product.category.name }}</span>
+                    <h1 class="h2 mb-2">{{ product.name }}</h1>
+                    
+                    <div class="mb-4 d-flex align-items-center justify-content-between justify-content-lg-start">
+                        <span class="h2 text-primary fw-bold mb-0">Rp {{ product.price|floatformat:0 }}</span>
+                        {% if product.stock > 0 %}
+                            <span class="badge bg-success ms-lg-3"><i class="fas fa-check-circle me-1"></i> Stok Tersedia</span>
+                        {% else %}
+                            <span class="badge bg-danger ms-lg-3"><i class="fas fa-times-circle me-1"></i> Stok Habis</span>
+                        {% endif %}
+                    </div>
+
+                    <div class="card bg-light border-0 mb-4 shadow-sm">
+                        <div class="card-body p-3 p-md-4">
+                            <h5 class="mb-3 h6 fw-bold text-uppercase">Informasi Produk</h5>
+                            <p class="mb-0 text-muted lh-base">{{ product.description }}</p>
+                        </div>
+                    </div>
+
+                    <div class="card border-0 mb-4 shadow-sm" style="border-left: 5px solid var(--primary) !important;">
+                        <div class="card-body p-3 d-flex align-items-center">
+                            <div class="flex-shrink-0">
+                                {% if product.vendor.logo %}
+                                    <img src="{{ product.vendor.logo.url }}" class="rounded-circle shadow-sm" style="width: 50px; height: 50px; object-fit: cover;">
+                                {% else %}
+                                    <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center shadow-sm" style="width: 50px; height: 50px;">
+                                        <i class="fas fa-store"></i>
+                                    </div>
+                                {% endif %}
+                            </div>
+                            <div class="flex-grow-1 ms-3">
+                                <h6 class="mb-0 small text-muted">Dijual oleh:</h6>
+                                <h5 class="mb-0 h6 fw-bold"><a href="{% url 'vendor_detail' product.vendor.slug %}" class="text-decoration-none text-dark">{{ product.vendor.name }}</a></h5>
+                            </div>
+                            <div class="flex-shrink-0 ms-2">
+                                <a href="{% url 'vendor_detail' product.vendor.slug %}" class="btn btn-outline-primary btn-sm px-3 rounded-pill">Lihat Toko</a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- CTA Section -->
+                    <div class="d-grid gap-3 sticky-bottom bg-white p-3 p-lg-0 shadow-sm shadow-lg-none mt-5 mt-lg-0 rounded-top" style="z-index: 1000; bottom: 0; left: 0; right: 0;">
+                        <a href="{{ product.get_whatsapp_url }}" target="_blank" class="btn btn-lg wa-btn shadow py-3">
+                            <i class="fab fa-whatsapp me-2 fa-lg"></i> BELI VIA WHATSAPP
+                        </a>
+                        <p class="text-center small text-muted mb-0 d-none d-lg-block"><i class="fas fa-shield-alt me-1"></i> Transaksi aman langsung ke penjual.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Related Products -->
+        <div class="mt-5 pt-5 border-top">
+            <h3 class="mb-4 h4 fw-bold">Produk Serupa</h3>
+            <div class="row g-3 g-md-4">
+                {% for rel_prod in related_products %}
+                <div class="col-6 col-md-3">
+                    <div class="card h-100 shadow-sm border-0">
+                        <div class="position-relative">
+                            {% if rel_prod.image %}
+                                <img src="{{ rel_prod.image.url }}" class="card-img-top" alt="{{ rel_prod.name }}" style="height: 120px; @media(min-width: 768px){height: 180px}; object-fit: cover;">
+                            {% else %}
+                                <div class="bg-secondary-subtle d-flex align-items-center justify-content-center" style="height: 120px; @media(min-width: 768px){height: 180px};">
+                                    <i class="fas fa-image fa-lg text-muted opacity-50"></i>
+                                </div>
+                            {% endif %}
+                        </div>
+                        <div class="card-body p-3">
+                            <h6 class="card-title mb-1 small fw-bold">
+                                <a href="{% url 'product_detail' rel_prod.slug %}" class="text-decoration-none text-dark">{{ rel_prod.name }}</a>
+                            </h6>
+                            <p class="product-price mb-0 small">Rp {{ rel_prod.price|floatformat:0 }}</p>
+                        </div>
+                    </div>
+                </div>
+                {% empty %}
+                <div class="col-12 text-muted">Belum ada produk serupa yang tersedia.</div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+</section>
+{% endblock %}

core/templates/core/product_list.html

@@ -0,0 +1,98 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}
+    {% if category %}{{ category.name }}{% else %}Semua Produk{% endif %} - Pasar UMKM Pemagarsari
+{% endblock %}
+
+{% block content %}
+<section class="py-4 py-md-5 bg-white border-bottom shadow-sm">
+    <div class="container py-2 text-center">
+        <h1 class="mb-3">{% if category %}{{ category.name }}{% else %}Semua Produk{% endif %}</h1>
+        <p class="lead text-muted mx-auto max-width-700">Jelajahi berbagai pilihan produk terbaik dari UMKM Desa Pemagarsari.</p>
+    </div>
+</section>
+
+<section class="py-4 py-md-5">
+    <div class="container">
+        <div class="row g-4">
+            <!-- Sidebar / Category List -->
+            <div class="col-lg-3">
+                <!-- Mobile Category Horizontal Scroll -->
+                <div class="d-lg-none mb-4 overflow-x-auto pb-2" style="white-space: nowrap;">
+                    <a href="{% url 'product_list' %}" class="btn {% if not category %}btn-primary{% else %}btn-outline-primary{% endif %} btn-sm me-2 rounded-pill px-3">
+                        Semua
+                    </a>
+                    {% for cat in categories %}
+                    <a href="{% url 'product_list_by_category' cat.slug %}" class="btn {% if category.id == cat.id %}btn-primary{% else %}btn-outline-primary{% endif %} btn-sm me-2 rounded-pill px-3">
+                        {{ cat.name }}
+                    </a>
+                    {% endfor %}
+                </div>
+
+                <!-- Desktop Sidebar -->
+                <div class="card shadow-sm border-0 sticky-top d-none d-lg-block" style="top: 100px;">
+                    <div class="card-body p-4">
+                        <h5 class="mb-4">Kategori</h5>
+                        <div class="list-group list-group-flush">
+                            <a href="{% url 'product_list' %}" class="list-group-item list-group-item-action border-0 px-0 {% if not category %}text-primary fw-bold{% else %}text-muted{% endif %}">
+                                <i class="fas fa-th-large me-2"></i> Semua Kategori
+                            </a>
+                            {% for cat in categories %}
+                            <a href="{% url 'product_list_by_category' cat.slug %}" class="list-group-item list-group-item-action border-0 px-0 {% if category.id == cat.id %}text-primary fw-bold{% else %}text-muted{% endif %}">
+                                <i class="fas {{ cat.icon|default:'fa-tag' }} me-2"></i> {{ cat.name }}
+                            </a>
+                            {% endfor %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Product Grid -->
+            <div class="col-lg-9">
+                <div class="row g-3 g-md-4">
+                    {% if products %}
+                        {% for product in products %}
+                        <div class="col-6 col-md-4">
+                            <div class="card h-100 shadow-sm">
+                                <div class="position-relative">
+                                    {% if product.image %}
+                                        <img src="{{ product.image.url }}" class="card-img-top" alt="{{ product.name }}" style="height: 150px; @media(min-width: 768px){height: 180px}; object-fit: cover;">
+                                    {% else %}
+                                        <div class="bg-secondary-subtle d-flex align-items-center justify-content-center" style="height: 150px; @media(min-width: 768px){height: 180px};">
+                                            <i class="fas fa-image fa-2x text-muted opacity-50"></i>
+                                        </div>
+                                    {% endif %}
+                                    <span class="badge bg-white text-primary position-absolute top-0 end-0 m-2 shadow-sm border-0 d-none d-md-inline-block">{{ product.category.name }}</span>
+                                </div>
+                                <div class="card-body p-3 p-md-4 d-flex flex-column">
+                                    <h5 class="card-title mb-1">
+                                        <a href="{% url 'product_detail' product.slug %}" class="text-decoration-none text-dark">{{ product.name }}</a>
+                                    </h5>
+                                    <p class="small text-muted mb-3 d-none d-md-block"><i class="fas fa-store me-1"></i> {{ product.vendor.name }}</p>
+                                    <div class="mt-auto">
+                                        <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-2">
+                                            <span class="product-price">Rp {{ product.price|floatformat:0 }}</span>
+                                            <a href="{{ product.get_whatsapp_url }}" target="_blank" class="btn btn-sm wa-btn shadow-sm">
+                                                <i class="fab fa-whatsapp me-1"></i> Beli
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        {% endfor %}
+                    {% else %}
+                        <div class="col-12 text-center py-5">
+                            <i class="fas fa-box-open fa-4x text-muted mb-4 opacity-50"></i>
+                            <h3 class="text-muted">Maaf, belum ada produk yang tersedia.</h3>
+                            <p class="text-muted">Coba cari di kategori lain atau kembali lagi nanti.</p>
+                            <a href="{% url 'product_list' %}" class="btn btn-primary mt-3 px-4">Lihat Semua Produk</a>
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+{% endblock %}

core/templates/core/vendor_detail.html

@@ -0,0 +1,83 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}{{ vendor.name }} - UMKM Desa Pemagarsari{% endblock %}
+
+{% block content %}
+<!-- Vendor Header -->
+<section class="py-4 py-md-5 bg-white border-bottom shadow-sm">
+    <div class="container py-2 text-center px-4 px-md-0">
+        <div class="mb-4">
+            {% if vendor.logo %}
+                <img src="{{ vendor.logo.url }}" class="rounded-circle shadow-sm mb-3" style="width: 100px; height: 100px; @media(min-width: 768px){width: 120px; height: 120px}; object-fit: cover;">
+            {% else %}
+                <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center shadow-sm mb-3 mx-auto" style="width: 100px; height: 100px; @media(min-width: 768px){width: 120px; height: 120px};">
+                    <i class="fas fa-store fa-3x"></i>
+                </div>
+            {% endif %}
+        </div>
+        <h1 class="h2 mb-2">{{ vendor.name }}</h1>
+        <p class="lead text-muted max-width-700 mx-auto small mb-4">{{ vendor.description|default:"Toko terpercaya di Desa Pemagarsari." }}</p>
+        
+        <div class="d-flex flex-column flex-sm-row justify-content-center gap-2 gap-md-3 mt-4">
+            <a href="https://wa.me/{{ vendor.whatsapp_number }}" target="_blank" class="btn btn-outline-success px-4 rounded-pill shadow-sm">
+                <i class="fab fa-whatsapp me-2"></i> Chat Penjual
+            </a>
+            <div class="btn btn-outline-secondary px-4 rounded-pill shadow-sm">
+                <i class="fas fa-map-marker-alt me-2"></i> {{ vendor.address|default:"Desa Pemagarsari" }}
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Vendor Products -->
+<section class="py-4 py-md-5 bg-light">
+    <div class="container py-2">
+        <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center align-items-sm-end mb-4 mb-md-5 text-center text-sm-start gap-2">
+            <div>
+                <h2 class="h3 mb-1">Produk Dari Toko Ini</h2>
+                <p class="text-muted mb-0">Katalog lengkap {{ vendor.name }}</p>
+            </div>
+            <span class="badge bg-white text-primary border shadow-sm px-3 py-2 rounded-pill">{{ products|length }} Produk</span>
+        </div>
+        
+        <div class="row g-3 g-md-4">
+            {% if products %}
+                {% for product in products %}
+                <div class="col-6 col-md-3">
+                    <div class="card h-100 shadow-sm border-0">
+                        <div class="position-relative">
+                            {% if product.image %}
+                                <img src="{{ product.image.url }}" class="card-img-top" alt="{{ product.name }}" style="height: 140px; @media(min-width: 768px){height: 180px}; object-fit: cover;">
+                            {% else %}
+                                <div class="bg-secondary-subtle d-flex align-items-center justify-content-center" style="height: 140px; @media(min-width: 768px){height: 180px};">
+                                    <i class="fas fa-image fa-2x text-muted opacity-50"></i>
+                                </div>
+                            {% endif %}
+                        </div>
+                        <div class="card-body p-3 p-md-4 d-flex flex-column">
+                            <h5 class="card-title mb-1 small fw-bold">
+                                <a href="{% url 'product_detail' product.slug %}" class="text-decoration-none text-dark">{{ product.name }}</a>
+                            </h5>
+                            <p class="product-price mb-3">Rp {{ product.price|floatformat:0 }}</p>
+                            <div class="d-grid mt-auto">
+                                <a href="{{ product.get_whatsapp_url }}" target="_blank" class="btn btn-sm wa-btn shadow-sm py-2 px-1">
+                                    <i class="fab fa-whatsapp me-1"></i> Beli Sekarang
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            {% else %}
+                <div class="col-12 text-center py-5">
+                    <i class="fas fa-box-open fa-4x text-muted mb-4 opacity-50"></i>
+                    <h3 class="text-muted">Maaf, toko ini belum memiliki produk.</h3>
+                    <p class="text-muted">Silakan kembali lagi nanti atau lihat produk dari toko lain.</p>
+                    <a href="{% url 'product_list' %}" class="btn btn-primary mt-3 px-4 rounded-pill">Jelajahi Produk Lain</a>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</section>
+{% endblock %}

core/urls.py

@@ -1,7 +1,10 @@
 from django.urls import path
-
-from .views import home
+from . import views
 
 urlpatterns = [
-    path("", home, name="home"),
-]
+    path("", views.home, name="home"),
+    path("produk/", views.product_list, name="product_list"),
+    path("kategori/<slug:category_slug>/", views.product_list, name="product_list_by_category"),
+    path("produk/<slug:slug>/", views.product_detail, name="product_detail"),
+    path("toko/<slug:slug>/", views.vendor_detail, name="vendor_detail"),
+]

core/views.py

@@ -1,25 +1,56 @@
 import os
 import platform
-
-from django import get_version as django_version
-from django.shortcuts import render
+from django.shortcuts import render, get_object_or_404
 from django.utils import timezone
-
+from .models import Category, Vendor, Product
 
 def home(request):
-    """Render the landing screen with loader and environment details."""
-    host_name = request.get_host().lower()
-    agent_brand = "AppWizzy" if host_name == "appwizzy.com" else "Flatlogic"
-    now = timezone.now()
+    """Render the landing screen with marketplace products and categories."""
+    categories = Category.objects.all()
+    featured_products = Product.objects.filter(is_active=True).order_by('-created_at')[:8]
+    vendors = Vendor.objects.all()[:6]
 
     context = {
-        "project_name": "New Style",
-        "agent_brand": agent_brand,
-        "django_version": django_version(),
-        "python_version": platform.python_version(),
-        "current_time": now,
-        "host_name": host_name,
-        "project_description": os.getenv("PROJECT_DESCRIPTION", ""),
-        "project_image_url": os.getenv("PROJECT_IMAGE_URL", ""),
+        "project_name": "Pasar UMKM Desa Pemagarsari",
+        "categories": categories,
+        "featured_products": featured_products,
+        "vendors": vendors,
     }
     return render(request, "core/index.html", context)
+
+def product_list(request, category_slug=None):
+    """List all products, optionally filtered by category."""
+    category = None
+    products = Product.objects.filter(is_active=True)
+    if category_slug:
+        category = get_object_or_404(Category, slug=category_slug)
+        products = products.filter(category=category)
+    
+    context = {
+        'category': category,
+        'products': products,
+        'categories': Category.objects.all(),
+    }
+    return render(request, "core/product_list.html", context)
+
+def product_detail(request, slug):
+    """Show details of a single product."""
+    product = get_object_or_404(Product, slug=slug, is_active=True)
+    related_products = Product.objects.filter(category=product.category).exclude(id=product.id)[:4]
+    
+    context = {
+        'product': product,
+        'related_products': related_products,
+    }
+    return render(request, "core/product_detail.html", context)
+
+def vendor_detail(request, slug):
+    """Show details of a single vendor and their products."""
+    vendor = get_object_or_404(Vendor, slug=slug)
+    products = vendor.products.filter(is_active=True)
+    
+    context = {
+        'vendor': vendor,
+        'products': products,
+    }
+    return render(request, "core/vendor_detail.html", context)

requirements.txt

@@ -1,3 +1,4 @@
 Django==5.2.7
 mysqlclient==2.2.7
 python-dotenv==1.1.1
+httpx

static/css/custom.css

@@ -1,4 +1,306 @@
-/* Custom styles for the application */
-body {
-    font-family: system-ui, -apple-system, sans-serif;
+/* Custom styles for Pasar UMKM Desa Pemagarsari */
+
+:root {
+  --primary: #2D6A4F;
+  --primary-dark: #1B4332;
+  --secondary: #95D5B2;
+  --accent: #FFB703;
+  --bg-light: #F8F9FA;
+  --text-dark: #212529;
+  --shadow-sm: 0 2px 8px rgba(0,0,0,.05);
+  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
+  --border-radius: 15px;
 }
+
+body {
+  font-family: 'Open Sans', sans-serif;
+  background-color: var(--bg-light);
+  color: var(--text-dark);
+  font-size: 0.95rem;
+}
+
+@media (min-width: 768px) {
+  body {
+    font-size: 1rem;
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 700;
+  color: var(--primary-dark);
+}
+
+/* Navbar adjustments */
+.navbar {
+  background-color: var(--primary);
+  box-shadow: 0 2px 10px rgba(0,0,0,.15);
+  padding: 0.5rem 0;
+}
+
+.navbar-brand {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 800;
+  letter-spacing: -0.5px;
+  font-size: 1.15rem;
+}
+
+/* Hero Section - Mobile First */
+.hero-section {
+  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+  color: white;
+  padding: 40px 0;
+  border-radius: 0 0 20px 20px;
+}
+
+.hero-section h1 {
+  font-size: 1.75rem;
+  line-height: 1.2;
+}
+
+.hero-section .lead {
+  font-size: 1rem !important;
+  margin-bottom: 1.5rem !important;
+}
+
+@media (min-width: 768px) {
+  .hero-section {
+    padding: 60px 0;
+    border-radius: 0 0 40px 40px;
+  }
+  .hero-section h1 {
+    font-size: 2.75rem;
+  }
+  .hero-section .lead {
+    font-size: 1.15rem !important;
+    margin-bottom: 2rem !important;
+  }
+}
+
+/* Buttons */
+.btn {
+  border-radius: 10px;
+  padding: 10px 20px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.btn-lg {
+  padding: 12px 25px;
+  border-radius: 12px;
+}
+
+.btn-primary {
+  background-color: var(--primary);
+  border-color: var(--primary);
+}
+
+.btn-primary:hover {
+  background-color: var(--primary-dark);
+  border-color: var(--primary-dark);
+  transform: translateY(-2px);
+}
+
+.btn-accent {
+  background-color: var(--accent);
+  color: var(--text-dark);
+  border: none;
+  box-shadow: 0 4px 15px rgba(255, 183, 3, 0.3);
+}
+
+.btn-accent:hover {
+  background-color: #E9A602;
+  color: var(--text-dark);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(255, 183, 3, 0.4);
+}
+
+/* Cards */
+.card {
+  border: none;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 992px) {
+  .card:hover {
+    transform: translateY(-8px);
+    box-shadow: var(--shadow-md);
+  }
+}
+
+/* Category Pills - Mobile Responsive */
+.category-pill {
+  background: white;
+  padding: 12px 15px;
+  border-radius: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  text-decoration: none;
+  color: var(--text-dark);
+  font-weight: 600;
+  font-size: 0.85rem;
+  box-shadow: var(--shadow-sm);
+  transition: all 0.3s ease;
+  height: 100%;
+  text-align: center;
+}
+
+.category-pill i {
+  font-size: 1.25rem;
+}
+
+@media (min-width: 768px) {
+  .category-pill {
+    flex-direction: row;
+    padding: 15px 25px;
+    font-size: 1rem;
+  }
+}
+
+.category-pill:hover {
+  background: var(--secondary);
+  color: var(--primary-dark);
+  transform: scale(1.05);
+}
+
+/* Product Pricing */
+.product-price {
+  color: var(--primary);
+  font-weight: 800;
+  font-size: 1.1rem;
+}
+
+@media (min-width: 768px) {
+  .product-price {
+    font-size: 1.25rem;
+  }
+}
+
+/* WA Button */
+.wa-btn {
+  background-color: #25D366;
+  color: white;
+  font-weight: 700;
+  border: none;
+}
+
+.wa-btn:hover {
+  background-color: #128C7E;
+  color: white;
+}
+
+/* Footer */
+.footer {
+  background-color: var(--primary-dark);
+  color: rgba(255,255,255,.8);
+  padding: 60px 0 20px;
+}
+
+.footer h5 {
+  color: white;
+  margin-bottom: 25px;
+  font-size: 1.1rem;
+}
+
+.footer-link {
+  color: rgba(255,255,255,.6);
+  text-decoration: none;
+  display: block;
+  margin-bottom: 12px;
+  transition: color 0.2s ease;
+}
+
+.footer-link:hover {
+  color: white;
+  padding-left: 5px;
+}
+
+/* Utility Classes */
+.max-width-700 {
+  max-width: 700px;
+}
+
+.section-title {
+  position: relative;
+  display: inline-block;
+  margin-bottom: 1.5rem;
+}
+
+.section-title::after {
+  content: '';
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 50px;
+  height: 4px;
+  background-color: var(--accent);
+  border-radius: 2px;
+}
+
+@media (max-width: 576px) {
+  .container {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  
+  .py-5 {
+    padding-top: 2.5rem !important;
+    padding-bottom: 2.5rem !important;
+  }
+}
+
+/* Product Card Improvements for Mobile Grid */
+@media (max-width: 767px) {
+  .card-body {
+    padding: 1rem !important;
+  }
+  
+  .card-title {
+    font-size: 0.95rem;
+    height: 2.4em;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  
+  .product-price {
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+  
+  .wa-btn {
+    width: 100%;
+    padding: 8px;
+    font-size: 0.85rem;
+  }
+}
+
+/* Banner Section */
+.banner-promo {
+  background-color: #fff;
+  padding-top: 2rem !important;
+  padding-bottom: 2rem !important;
+}
+
+.banner-wrapper {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  border-radius: 15px;
+}
+
+.banner-wrapper:hover {
+  transform: scale(1.01);
+  box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
+}
+
+.banner-wrapper img {
+  border-radius: 15px;
+  display: block;
+}

staticfiles/css/custom.css

@@ -1,21 +1,306 @@
+/* Custom styles for Pasar UMKM Desa Pemagarsari */
 
 :root {
-    --bg-color-start: #6a11cb;
-    --bg-color-end: #2575fc;
-    --text-color: #ffffff;
-    --card-bg-color: rgba(255, 255, 255, 0.01);
-    --card-border-color: rgba(255, 255, 255, 0.1);
+  --primary: #2D6A4F;
+  --primary-dark: #1B4332;
+  --secondary: #95D5B2;
+  --accent: #FFB703;
+  --bg-light: #F8F9FA;
+  --text-dark: #212529;
+  --shadow-sm: 0 2px 8px rgba(0,0,0,.05);
+  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
+  --border-radius: 15px;
 }
+
 body {
-    margin: 0;
-    font-family: 'Inter', sans-serif;
-    background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-    color: var(--text-color);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    text-align: center;
-    overflow: hidden;
-    position: relative;
+  font-family: 'Open Sans', sans-serif;
+  background-color: var(--bg-light);
+  color: var(--text-dark);
+  font-size: 0.95rem;
 }
+
+@media (min-width: 768px) {
+  body {
+    font-size: 1rem;
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 700;
+  color: var(--primary-dark);
+}
+
+/* Navbar adjustments */
+.navbar {
+  background-color: var(--primary);
+  box-shadow: 0 2px 10px rgba(0,0,0,.15);
+  padding: 0.5rem 0;
+}
+
+.navbar-brand {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 800;
+  letter-spacing: -0.5px;
+  font-size: 1.15rem;
+}
+
+/* Hero Section - Mobile First */
+.hero-section {
+  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+  color: white;
+  padding: 40px 0;
+  border-radius: 0 0 20px 20px;
+}
+
+.hero-section h1 {
+  font-size: 1.75rem;
+  line-height: 1.2;
+}
+
+.hero-section .lead {
+  font-size: 1rem !important;
+  margin-bottom: 1.5rem !important;
+}
+
+@media (min-width: 768px) {
+  .hero-section {
+    padding: 60px 0;
+    border-radius: 0 0 40px 40px;
+  }
+  .hero-section h1 {
+    font-size: 2.75rem;
+  }
+  .hero-section .lead {
+    font-size: 1.15rem !important;
+    margin-bottom: 2rem !important;
+  }
+}
+
+/* Buttons */
+.btn {
+  border-radius: 10px;
+  padding: 10px 20px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.btn-lg {
+  padding: 12px 25px;
+  border-radius: 12px;
+}
+
+.btn-primary {
+  background-color: var(--primary);
+  border-color: var(--primary);
+}
+
+.btn-primary:hover {
+  background-color: var(--primary-dark);
+  border-color: var(--primary-dark);
+  transform: translateY(-2px);
+}
+
+.btn-accent {
+  background-color: var(--accent);
+  color: var(--text-dark);
+  border: none;
+  box-shadow: 0 4px 15px rgba(255, 183, 3, 0.3);
+}
+
+.btn-accent:hover {
+  background-color: #E9A602;
+  color: var(--text-dark);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(255, 183, 3, 0.4);
+}
+
+/* Cards */
+.card {
+  border: none;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 992px) {
+  .card:hover {
+    transform: translateY(-8px);
+    box-shadow: var(--shadow-md);
+  }
+}
+
+/* Category Pills - Mobile Responsive */
+.category-pill {
+  background: white;
+  padding: 12px 15px;
+  border-radius: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  text-decoration: none;
+  color: var(--text-dark);
+  font-weight: 600;
+  font-size: 0.85rem;
+  box-shadow: var(--shadow-sm);
+  transition: all 0.3s ease;
+  height: 100%;
+  text-align: center;
+}
+
+.category-pill i {
+  font-size: 1.25rem;
+}
+
+@media (min-width: 768px) {
+  .category-pill {
+    flex-direction: row;
+    padding: 15px 25px;
+    font-size: 1rem;
+  }
+}
+
+.category-pill:hover {
+  background: var(--secondary);
+  color: var(--primary-dark);
+  transform: scale(1.05);
+}
+
+/* Product Pricing */
+.product-price {
+  color: var(--primary);
+  font-weight: 800;
+  font-size: 1.1rem;
+}
+
+@media (min-width: 768px) {
+  .product-price {
+    font-size: 1.25rem;
+  }
+}
+
+/* WA Button */
+.wa-btn {
+  background-color: #25D366;
+  color: white;
+  font-weight: 700;
+  border: none;
+}
+
+.wa-btn:hover {
+  background-color: #128C7E;
+  color: white;
+}
+
+/* Footer */
+.footer {
+  background-color: var(--primary-dark);
+  color: rgba(255,255,255,.8);
+  padding: 60px 0 20px;
+}
+
+.footer h5 {
+  color: white;
+  margin-bottom: 25px;
+  font-size: 1.1rem;
+}
+
+.footer-link {
+  color: rgba(255,255,255,.6);
+  text-decoration: none;
+  display: block;
+  margin-bottom: 12px;
+  transition: color 0.2s ease;
+}
+
+.footer-link:hover {
+  color: white;
+  padding-left: 5px;
+}
+
+/* Utility Classes */
+.max-width-700 {
+  max-width: 700px;
+}
+
+.section-title {
+  position: relative;
+  display: inline-block;
+  margin-bottom: 1.5rem;
+}
+
+.section-title::after {
+  content: '';
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 50px;
+  height: 4px;
+  background-color: var(--accent);
+  border-radius: 2px;
+}
+
+@media (max-width: 576px) {
+  .container {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  
+  .py-5 {
+    padding-top: 2.5rem !important;
+    padding-bottom: 2.5rem !important;
+  }
+}
+
+/* Product Card Improvements for Mobile Grid */
+@media (max-width: 767px) {
+  .card-body {
+    padding: 1rem !important;
+  }
+  
+  .card-title {
+    font-size: 0.95rem;
+    height: 2.4em;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  
+  .product-price {
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+  
+  .wa-btn {
+    width: 100%;
+    padding: 8px;
+    font-size: 0.85rem;
+  }
+}
+
+/* Banner Section */
+.banner-promo {
+  background-color: #fff;
+  padding-top: 2rem !important;
+  padding-bottom: 2rem !important;
+}
+
+.banner-wrapper {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  border-radius: 15px;
+}
+
+.banner-wrapper:hover {
+  transform: scale(1.01);
+  box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
+}
+
+.banner-wrapper img {
+  border-radius: 15px;
+  display: block;
+}