feat: implement vendor landing pages with multi-template support and fix shop routing
Major improvements to shop URL routing and vendor landing page system:
## Landing Page System
- Add template field to ContentPage model for flexible landing page designs
- Create 4 landing page templates: default, minimal, modern, and full
- Implement smart root handler to serve landing pages or redirect to shop
- Add create_landing_page.py script for easy landing page management
- Support both domain/subdomain and path-based vendor access
- Add comprehensive landing page documentation
## Route Fixes
- Fix duplicate /shop prefix in shop_pages.py routes
- Correct product detail page routing (was /shop/shop/products/{id})
- Update all shop routes to work with router prefix mounting
- Remove unused public vendor endpoints (/api/v1/public/vendors)
## Template Link Corrections
- Fix all shop template links to include /shop/ prefix
- Update breadcrumb 'Home' links to point to vendor root (landing page)
- Update header navigation 'Home' link to point to vendor root
- Correct CMS page links in footer navigation
- Fix account, cart, and error page navigation links
## Navigation Architecture
- Establish two-tier navigation: landing page (/) and shop (/shop/)
- Document complete navigation flow and URL hierarchy
- Support for vendors with or without landing pages (auto-redirect fallback)
- Consistent breadcrumb and header navigation behavior
## Documentation
- Add vendor-landing-pages.md feature documentation
- Add navigation-flow.md with complete URL hierarchy
- Update shop architecture docs with error handling section
- Add orphaned docs to mkdocs.yml navigation
- Document multi-access routing patterns
## Database
- Migration f68d8da5315a: add template field to content_pages table
- Support template values: default, minimal, modern, full
This establishes a complete landing page system allowing vendors to have
custom marketing homepages separate from their e-commerce shop, with
flexible template options and proper navigation hierarchy.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -4,12 +4,12 @@ API router configuration for multi-tenant ecommerce platform.
|
||||
|
||||
This module provides:
|
||||
- API version 1 route aggregation
|
||||
- Route organization by user type (admin, vendor, public)
|
||||
- Route organization by user type (admin, vendor, shop)
|
||||
- Proper route prefixing and tagging
|
||||
"""
|
||||
|
||||
from fastapi import APIRouter
|
||||
from app.api.v1 import admin, vendor, public, shop
|
||||
from app.api.v1 import admin, vendor, shop
|
||||
|
||||
api_router = APIRouter()
|
||||
|
||||
@@ -35,17 +35,6 @@ api_router.include_router(
|
||||
tags=["vendor"]
|
||||
)
|
||||
|
||||
# ============================================================================
|
||||
# PUBLIC/CUSTOMER ROUTES (Customer-facing)
|
||||
# Prefix: /api/v1/public
|
||||
# ============================================================================
|
||||
|
||||
api_router.include_router(
|
||||
public.router,
|
||||
prefix="/v1/public",
|
||||
tags=["public"]
|
||||
)
|
||||
|
||||
# ============================================================================
|
||||
# SHOP ROUTES (Public shop frontend API)
|
||||
# Prefix: /api/v1/shop
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
API Version 1 - All endpoints
|
||||
"""
|
||||
|
||||
from . import admin, vendor, public, shop
|
||||
from . import admin, vendor, shop
|
||||
|
||||
__all__ = ["admin", "vendor", "public", "shop"]
|
||||
__all__ = ["admin", "vendor", "shop"]
|
||||
@@ -1,19 +0,0 @@
|
||||
# app/api/v1/public/__init__.py
|
||||
"""
|
||||
Public API endpoints (non-shop, non-authenticated).
|
||||
|
||||
Note: Shop-related endpoints have been migrated to /api/v1/shop/*
|
||||
This module now only contains truly public endpoints:
|
||||
- Vendor lookup (by code, subdomain, ID)
|
||||
"""
|
||||
|
||||
from fastapi import APIRouter
|
||||
from .vendors import vendors
|
||||
|
||||
# Create public router
|
||||
router = APIRouter()
|
||||
|
||||
# Include vendor lookup endpoints (not shop-specific)
|
||||
router.include_router(vendors.router, prefix="/vendors", tags=["public-vendors"])
|
||||
|
||||
__all__ = ["router"]
|
||||
2
app/api/v1/public/vendors/__init__.py
vendored
2
app/api/v1/public/vendors/__init__.py
vendored
@@ -1,2 +0,0 @@
|
||||
# app/api/v1/public/vendors/__init__.py
|
||||
"""Vendor-specific public API endpoints"""
|
||||
128
app/api/v1/public/vendors/vendors.py
vendored
128
app/api/v1/public/vendors/vendors.py
vendored
@@ -1,128 +0,0 @@
|
||||
# app/api/v1/public/vendors/vendors.py
|
||||
"""
|
||||
Public vendor information endpoints.
|
||||
|
||||
Provides public-facing vendor lookup and information retrieval.
|
||||
"""
|
||||
|
||||
import logging
|
||||
from fastapi import APIRouter, Depends, HTTPException, Path
|
||||
from sqlalchemy.orm import Session
|
||||
|
||||
from app.core.database import get_db
|
||||
from models.database.vendor import Vendor
|
||||
|
||||
router = APIRouter()
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
|
||||
@router.get("/by-code/{vendor_code}")
|
||||
def get_vendor_by_code(
|
||||
vendor_code: str = Path(..., description="Vendor code (e.g., TECHSTORE233)"),
|
||||
db: Session = Depends(get_db)
|
||||
):
|
||||
"""
|
||||
Get public vendor information by vendor code.
|
||||
|
||||
This endpoint is used by:
|
||||
- Frontend vendor login page to validate vendor existence
|
||||
- Customer shop to display vendor information
|
||||
|
||||
Returns basic vendor information (no sensitive data).
|
||||
"""
|
||||
vendor = db.query(Vendor).filter(
|
||||
Vendor.vendor_code == vendor_code.upper(),
|
||||
Vendor.is_active == True
|
||||
).first()
|
||||
|
||||
if not vendor:
|
||||
logger.warning(f"Vendor lookup failed for code: {vendor_code}")
|
||||
raise HTTPException(
|
||||
status_code=404,
|
||||
detail=f"Vendor '{vendor_code}' not found or inactive"
|
||||
)
|
||||
|
||||
logger.info(f"Vendor lookup successful: {vendor.vendor_code}")
|
||||
|
||||
# Return public vendor information (no sensitive data)
|
||||
return {
|
||||
"id": vendor.id,
|
||||
"vendor_code": vendor.vendor_code,
|
||||
"subdomain": vendor.subdomain,
|
||||
"name": vendor.name,
|
||||
"description": vendor.description,
|
||||
"website": vendor.website,
|
||||
"is_active": vendor.is_active,
|
||||
"is_verified": vendor.is_verified
|
||||
}
|
||||
|
||||
|
||||
@router.get("/by-subdomain/{subdomain}")
|
||||
def get_vendor_by_subdomain(
|
||||
subdomain: str = Path(..., description="Vendor subdomain (e.g., techstore233)"),
|
||||
db: Session = Depends(get_db)
|
||||
):
|
||||
"""
|
||||
Get public vendor information by subdomain.
|
||||
|
||||
Used for subdomain-based vendor detection in production environments.
|
||||
Example: techstore233.platform.com -> subdomain is "techstore233"
|
||||
"""
|
||||
vendor = db.query(Vendor).filter(
|
||||
Vendor.subdomain == subdomain.lower(),
|
||||
Vendor.is_active == True
|
||||
).first()
|
||||
|
||||
if not vendor:
|
||||
logger.warning(f"Vendor lookup failed for subdomain: {subdomain}")
|
||||
raise HTTPException(
|
||||
status_code=404,
|
||||
detail=f"Vendor with subdomain '{subdomain}' not found or inactive"
|
||||
)
|
||||
|
||||
logger.info(f"Vendor lookup by subdomain successful: {vendor.vendor_code}")
|
||||
|
||||
return {
|
||||
"id": vendor.id,
|
||||
"vendor_code": vendor.vendor_code,
|
||||
"subdomain": vendor.subdomain,
|
||||
"name": vendor.name,
|
||||
"description": vendor.description,
|
||||
"website": vendor.website,
|
||||
"is_active": vendor.is_active,
|
||||
"is_verified": vendor.is_verified
|
||||
}
|
||||
|
||||
|
||||
@router.get("/{vendor_id}/info")
|
||||
def get_vendor_info(
|
||||
vendor_id: int = Path(..., description="Vendor ID"),
|
||||
db: Session = Depends(get_db)
|
||||
):
|
||||
"""
|
||||
Get public vendor information by ID.
|
||||
|
||||
Used when vendor_id is already known (e.g., from URL parameters).
|
||||
"""
|
||||
vendor = db.query(Vendor).filter(
|
||||
Vendor.id == vendor_id,
|
||||
Vendor.is_active == True
|
||||
).first()
|
||||
|
||||
if not vendor:
|
||||
logger.warning(f"Vendor lookup failed for ID: {vendor_id}")
|
||||
raise HTTPException(
|
||||
status_code=404,
|
||||
detail=f"Vendor with ID {vendor_id} not found or inactive"
|
||||
)
|
||||
|
||||
return {
|
||||
"id": vendor.id,
|
||||
"vendor_code": vendor.vendor_code,
|
||||
"subdomain": vendor.subdomain,
|
||||
"name": vendor.name,
|
||||
"description": vendor.description,
|
||||
"website": vendor.website,
|
||||
"is_active": vendor.is_active,
|
||||
"is_verified": vendor.is_verified
|
||||
}
|
||||
@@ -13,21 +13,21 @@ AUTHENTICATION:
|
||||
* Authorization header - for API calls
|
||||
- Customers CANNOT access admin or vendor routes
|
||||
|
||||
Routes:
|
||||
- GET /shop/ → Shop homepage / product catalog
|
||||
- GET /shop/products → Product catalog
|
||||
- GET /shop/products/{id} → Product detail page
|
||||
- GET /shop/categories/{slug} → Category products
|
||||
- GET /shop/cart → Shopping cart
|
||||
- GET /shop/checkout → Checkout process
|
||||
- GET /shop/account/register → Customer registration
|
||||
- GET /shop/account/login → Customer login
|
||||
- GET /shop/account/dashboard → Customer dashboard (auth required)
|
||||
- GET /shop/account/orders → Order history (auth required)
|
||||
- GET /shop/account/orders/{id} → Order detail (auth required)
|
||||
- GET /shop/account/profile → Customer profile (auth required)
|
||||
- GET /shop/account/addresses → Address management (auth required)
|
||||
- GET /shop/{slug} → Dynamic content pages (CMS): /about, /faq, /contact, etc.
|
||||
Routes (all mounted at /shop/* or /vendors/{code}/shop/* prefix):
|
||||
- GET / → Shop homepage / product catalog
|
||||
- GET /products → Product catalog
|
||||
- GET /products/{id} → Product detail page
|
||||
- GET /categories/{slug} → Category products
|
||||
- GET /cart → Shopping cart
|
||||
- GET /checkout → Checkout process
|
||||
- GET /account/register → Customer registration
|
||||
- GET /account/login → Customer login
|
||||
- GET /account/dashboard → Customer dashboard (auth required)
|
||||
- GET /account/orders → Order history (auth required)
|
||||
- GET /account/orders/{id} → Order detail (auth required)
|
||||
- GET /account/profile → Customer profile (auth required)
|
||||
- GET /account/addresses → Address management (auth required)
|
||||
- GET /{slug} → Dynamic content pages (CMS): /about, /faq, /contact, etc.
|
||||
"""
|
||||
|
||||
import logging
|
||||
@@ -188,7 +188,7 @@ async def shop_products_page(request: Request, db: Session = Depends(get_db)):
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/products/{product_id}", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/products/{product_id}", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_product_detail_page(
|
||||
request: Request,
|
||||
product_id: int = Path(..., description="Product ID")
|
||||
@@ -212,7 +212,7 @@ async def shop_product_detail_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/categories/{category_slug}", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/categories/{category_slug}", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_category_page(
|
||||
request: Request,
|
||||
category_slug: str = Path(..., description="Category slug")
|
||||
@@ -236,7 +236,7 @@ async def shop_category_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/cart", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/cart", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_cart_page(request: Request):
|
||||
"""
|
||||
Render shopping cart page.
|
||||
@@ -257,7 +257,7 @@ async def shop_cart_page(request: Request):
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/checkout", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/checkout", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_checkout_page(request: Request):
|
||||
"""
|
||||
Render checkout page.
|
||||
@@ -278,7 +278,7 @@ async def shop_checkout_page(request: Request):
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/search", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/search", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_search_page(request: Request):
|
||||
"""
|
||||
Render search results page.
|
||||
@@ -303,7 +303,7 @@ async def shop_search_page(request: Request):
|
||||
# CUSTOMER ACCOUNT - PUBLIC ROUTES (No Authentication)
|
||||
# ============================================================================
|
||||
|
||||
@router.get("/shop/account/register", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/register", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_register_page(request: Request):
|
||||
"""
|
||||
Render customer registration page.
|
||||
@@ -324,7 +324,7 @@ async def shop_register_page(request: Request):
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/account/login", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/login", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_login_page(request: Request):
|
||||
"""
|
||||
Render customer login page.
|
||||
@@ -345,7 +345,7 @@ async def shop_login_page(request: Request):
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/account/forgot-password", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/forgot-password", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_forgot_password_page(request: Request):
|
||||
"""
|
||||
Render forgot password page.
|
||||
@@ -370,8 +370,8 @@ async def shop_forgot_password_page(request: Request):
|
||||
# CUSTOMER ACCOUNT - AUTHENTICATED ROUTES
|
||||
# ============================================================================
|
||||
|
||||
@router.get("/shop/account/", response_class=RedirectResponse, include_in_schema=False)
|
||||
async def shop_account_root():
|
||||
@router.get("/account/", response_class=RedirectResponse, include_in_schema=False)
|
||||
async def shop_account_root(request: Request):
|
||||
"""
|
||||
Redirect /shop/account/ to dashboard.
|
||||
"""
|
||||
@@ -384,10 +384,20 @@ async def shop_account_root():
|
||||
}
|
||||
)
|
||||
|
||||
return RedirectResponse(url="/shop/account/dashboard", status_code=302)
|
||||
# Get base_url from context for proper redirect
|
||||
vendor = getattr(request.state, 'vendor', None)
|
||||
vendor_context = getattr(request.state, 'vendor_context', None)
|
||||
access_method = vendor_context.get('detection_method', 'unknown') if vendor_context else 'unknown'
|
||||
|
||||
base_url = "/"
|
||||
if access_method == "path" and vendor:
|
||||
full_prefix = vendor_context.get('full_prefix', '/vendor/') if vendor_context else '/vendor/'
|
||||
base_url = f"{full_prefix}{vendor.subdomain}/"
|
||||
|
||||
return RedirectResponse(url=f"{base_url}shop/account/dashboard", status_code=302)
|
||||
|
||||
|
||||
@router.get("/shop/account/dashboard", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/dashboard", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_account_dashboard_page(
|
||||
request: Request,
|
||||
current_user: User = Depends(get_current_customer_from_cookie_or_header),
|
||||
@@ -413,7 +423,7 @@ async def shop_account_dashboard_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/account/orders", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/orders", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_orders_page(
|
||||
request: Request,
|
||||
current_user: User = Depends(get_current_customer_from_cookie_or_header),
|
||||
@@ -439,7 +449,7 @@ async def shop_orders_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/account/orders/{order_id}", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/orders/{order_id}", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_order_detail_page(
|
||||
request: Request,
|
||||
order_id: int = Path(..., description="Order ID"),
|
||||
@@ -466,7 +476,7 @@ async def shop_order_detail_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/account/profile", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/profile", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_profile_page(
|
||||
request: Request,
|
||||
current_user: User = Depends(get_current_customer_from_cookie_or_header),
|
||||
@@ -492,7 +502,7 @@ async def shop_profile_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/account/addresses", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/addresses", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_addresses_page(
|
||||
request: Request,
|
||||
current_user: User = Depends(get_current_customer_from_cookie_or_header),
|
||||
@@ -518,7 +528,7 @@ async def shop_addresses_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/account/wishlist", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/wishlist", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_wishlist_page(
|
||||
request: Request,
|
||||
current_user: User = Depends(get_current_customer_from_cookie_or_header),
|
||||
@@ -544,7 +554,7 @@ async def shop_wishlist_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get("/shop/account/settings", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/account/settings", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def shop_settings_page(
|
||||
request: Request,
|
||||
current_user: User = Depends(get_current_customer_from_cookie_or_header),
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
>
|
||||
<label for="rememberMe">Remember me</label>
|
||||
</div>
|
||||
<a href="/shop/account/forgot-password" class="forgot-password">
|
||||
<a href="{{ base_url }}shop/account/forgot-password" class="forgot-password">
|
||||
Forgot password?
|
||||
</a>
|
||||
</div>
|
||||
@@ -113,12 +113,12 @@
|
||||
<!-- Register Link -->
|
||||
<div class="login-footer">
|
||||
<div class="auth-footer-text">Don't have an account?</div>
|
||||
<a href="/shop/account/register">Create an account</a>
|
||||
<a href="{{ base_url }}shop/account/register">Create an account</a>
|
||||
</div>
|
||||
|
||||
<!-- Back to Shop -->
|
||||
<div class="login-footer" style="border-top: none; padding-top: 0;">
|
||||
<a href="/shop">← Continue shopping</a>
|
||||
<a href="{{ base_url }}shop/">← Continue shopping</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -175,7 +175,7 @@
|
||||
<!-- Login Link -->
|
||||
<div class="login-footer">
|
||||
<div class="auth-footer-text">Already have an account?</div>
|
||||
<a href="/shop/account/login">Sign in instead</a>
|
||||
<a href="{{ base_url }}shop/account/login">Sign in instead</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
|
||||
{# Vendor Logo #}
|
||||
<div class="flex items-center">
|
||||
<a href="{{ base_url }}" class="flex items-center space-x-3">
|
||||
<a href="{{ base_url }}shop/" class="flex items-center space-x-3">
|
||||
{% if theme.branding.logo %}
|
||||
{# Show light logo in light mode, dark logo in dark mode #}
|
||||
<img x-show="!dark"
|
||||
@@ -83,13 +83,13 @@
|
||||
<a href="{{ base_url }}" class="text-gray-700 dark:text-gray-300 hover:text-primary">
|
||||
Home
|
||||
</a>
|
||||
<a href="{{ base_url }}products" class="text-gray-700 dark:text-gray-300 hover:text-primary">
|
||||
<a href="{{ base_url }}shop/products" class="text-gray-700 dark:text-gray-300 hover:text-primary">
|
||||
Products
|
||||
</a>
|
||||
<a href="{{ base_url }}about" class="text-gray-700 dark:text-gray-300 hover:text-primary">
|
||||
<a href="{{ base_url }}shop/about" class="text-gray-700 dark:text-gray-300 hover:text-primary">
|
||||
About
|
||||
</a>
|
||||
<a href="{{ base_url }}contact" class="text-gray-700 dark:text-gray-300 hover:text-primary">
|
||||
<a href="{{ base_url }}shop/contact" class="text-gray-700 dark:text-gray-300 hover:text-primary">
|
||||
Contact
|
||||
</a>
|
||||
</nav>
|
||||
@@ -106,7 +106,7 @@
|
||||
</button>
|
||||
|
||||
{# Cart #}
|
||||
<a href="{{ base_url }}cart" class="relative p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
<a href="{{ base_url }}shop/cart" class="relative p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
||||
@@ -132,7 +132,7 @@
|
||||
</button>
|
||||
|
||||
{# Account #}
|
||||
<a href="{{ base_url }}account" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
<a href="{{ base_url }}shop/account" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
||||
@@ -207,9 +207,9 @@
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">Quick Links</h4>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="{{ base_url }}products" class="text-gray-600 hover:text-primary dark:text-gray-400">Products</a></li>
|
||||
<li><a href="{{ base_url }}shop/products" class="text-gray-600 hover:text-primary dark:text-gray-400">Products</a></li>
|
||||
{% for page in col1_pages %}
|
||||
<li><a href="{{ base_url }}{{ page.slug }}" class="text-gray-600 hover:text-primary dark:text-gray-400">{{ page.title }}</a></li>
|
||||
<li><a href="{{ base_url }}shop/{{ page.slug }}" class="text-gray-600 hover:text-primary dark:text-gray-400">{{ page.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -220,7 +220,7 @@
|
||||
<h4 class="font-semibold mb-4">Information</h4>
|
||||
<ul class="space-y-2">
|
||||
{% for page in col2_pages %}
|
||||
<li><a href="{{ base_url }}{{ page.slug }}" class="text-gray-600 hover:text-primary dark:text-gray-400">{{ page.title }}</a></li>
|
||||
<li><a href="{{ base_url }}shop/{{ page.slug }}" class="text-gray-600 hover:text-primary dark:text-gray-400">{{ page.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -230,18 +230,18 @@
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">Quick Links</h4>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="{{ base_url }}products" class="text-gray-600 hover:text-primary dark:text-gray-400">Products</a></li>
|
||||
<li><a href="{{ base_url }}about" class="text-gray-600 hover:text-primary dark:text-gray-400">About Us</a></li>
|
||||
<li><a href="{{ base_url }}contact" class="text-gray-600 hover:text-primary dark:text-gray-400">Contact</a></li>
|
||||
<li><a href="{{ base_url }}shop/products" class="text-gray-600 hover:text-primary dark:text-gray-400">Products</a></li>
|
||||
<li><a href="{{ base_url }}shop/about" class="text-gray-600 hover:text-primary dark:text-gray-400">About Us</a></li>
|
||||
<li><a href="{{ base_url }}shop/contact" class="text-gray-600 hover:text-primary dark:text-gray-400">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">Information</h4>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="{{ base_url }}faq" class="text-gray-600 hover:text-primary dark:text-gray-400">FAQ</a></li>
|
||||
<li><a href="{{ base_url }}shipping" class="text-gray-600 hover:text-primary dark:text-gray-400">Shipping</a></li>
|
||||
<li><a href="{{ base_url }}returns" class="text-gray-600 hover:text-primary dark:text-gray-400">Returns</a></li>
|
||||
<li><a href="{{ base_url }}shop/faq" class="text-gray-600 hover:text-primary dark:text-gray-400">FAQ</a></li>
|
||||
<li><a href="{{ base_url }}shop/shipping" class="text-gray-600 hover:text-primary dark:text-gray-400">Shipping</a></li>
|
||||
<li><a href="{{ base_url }}shop/returns" class="text-gray-600 hover:text-primary dark:text-gray-400">Returns</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<h1>🛒 Shopping Cart</h1>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<a href="/shop" class="btn-secondary">← Continue Shopping</a>
|
||||
<a href="{{ base_url }}shop/" class="btn-secondary">← Continue Shopping</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
<div class="empty-state-icon">🛒</div>
|
||||
<h3>Your cart is empty</h3>
|
||||
<p>Add some products to get started!</p>
|
||||
<a href="/shop/products" class="btn-primary">Browse Products</a>
|
||||
<a href="{{ base_url }}shop/products" class="btn-primary">Browse Products</a>
|
||||
</div>
|
||||
|
||||
<!-- Cart Items -->
|
||||
@@ -135,7 +135,7 @@
|
||||
Proceed to Checkout
|
||||
</button>
|
||||
|
||||
<a href="/shop/products" class="btn-outline">
|
||||
<a href="{{ base_url }}shop/products" class="btn-outline">
|
||||
Continue Shopping
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -17,12 +17,12 @@
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<a href="{{ base_url or '/' }}" class="btn btn-primary">Continue Shopping</a>
|
||||
<a href="{{ base_url or '/' }}products" class="btn btn-secondary">View All Products</a>
|
||||
<a href="{{ base_url or '/' }}shop/" class="btn btn-primary">Continue Shopping</a>
|
||||
<a href="{{ base_url or '/' }}shop/products" class="btn btn-secondary">View All Products</a>
|
||||
</div>
|
||||
|
||||
<div class="support-link">
|
||||
Can't find what you're looking for? <a href="{{ base_url or '/' }}contact">Contact us</a> and we'll help you find it.
|
||||
Can't find what you're looking for? <a href="{{ base_url or '/' }}shop/contact">Contact us</a> and we'll help you find it.
|
||||
</div>
|
||||
|
||||
{% if vendor %}
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
{{ vendor.description }}
|
||||
</p>
|
||||
{% endif %}
|
||||
<a href="{{ base_url }}products" class="inline-block bg-white text-gray-900 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
|
||||
<a href="{{ base_url }}shop/products" class="inline-block bg-white text-gray-900 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
|
||||
Shop Now
|
||||
</a>
|
||||
</div>
|
||||
@@ -61,7 +61,7 @@
|
||||
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200">
|
||||
Featured Products
|
||||
</h2>
|
||||
<a href="{{ base_url }}products" class="text-primary hover:underline font-medium">
|
||||
<a href="{{ base_url }}shop/products" class="text-primary hover:underline font-medium">
|
||||
View All →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -17,11 +17,11 @@
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<a href="/shop/products" class="btn-back">← Back to Products</a>
|
||||
<a href="{{ base_url }}shop/products" class="btn-back">← Back to Products</a>
|
||||
<h1>{{ vendor.name }}</h1>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<a href="/shop/cart" class="btn-primary">
|
||||
<a href="{{ base_url }}shop/cart" class="btn-primary">
|
||||
🛒 Cart (<span x-text="cartCount"></span>)
|
||||
</a>
|
||||
</div>
|
||||
|
||||
127
app/templates/vendor/landing-default.html
vendored
Normal file
127
app/templates/vendor/landing-default.html
vendored
Normal file
@@ -0,0 +1,127 @@
|
||||
{# app/templates/vendor/landing-default.html #}
|
||||
{# Default/Minimal Landing Page Template #}
|
||||
{% extends "shop/base.html" %}
|
||||
|
||||
{% block title %}{{ vendor.name }}{% endblock %}
|
||||
{% block meta_description %}{{ page.meta_description or vendor.description or vendor.name }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="min-h-screen">
|
||||
|
||||
{# Hero Section - Simple and Clean #}
|
||||
<section class="relative bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/20 dark:to-primary/10 py-20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center">
|
||||
{# Logo #}
|
||||
{% if theme.branding.logo %}
|
||||
<div class="mb-8">
|
||||
<img src="{{ theme.branding.logo }}"
|
||||
alt="{{ vendor.name }}"
|
||||
class="h-20 w-auto mx-auto">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Title #}
|
||||
<h1 class="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
{{ page.title or vendor.name }}
|
||||
</h1>
|
||||
|
||||
{# Tagline #}
|
||||
{% if vendor.tagline %}
|
||||
<p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto">
|
||||
{{ vendor.tagline }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{# CTA Button #}
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="{{ base_url }}shop/"
|
||||
class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg text-white bg-primary hover:bg-primary-dark transition-colors shadow-lg hover:shadow-xl"
|
||||
style="background-color: var(--color-primary)">
|
||||
Browse Our Shop
|
||||
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
{% if page.content %}
|
||||
<a href="#about"
|
||||
class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors border-2 border-gray-200 dark:border-gray-600">
|
||||
Learn More
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# Content Section (if provided) #}
|
||||
{% if page.content %}
|
||||
<section id="about" class="py-16 bg-white dark:bg-gray-900">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||
{{ page.content | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{# Quick Links Section #}
|
||||
<section class="py-16 bg-gray-50 dark:bg-gray-800">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-bold text-center text-gray-900 dark:text-white mb-12">
|
||||
Explore
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<a href="{{ base_url }}shop/products"
|
||||
class="block p-8 bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-xl transition-shadow text-center group">
|
||||
<div class="text-4xl mb-4">🛍️</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary">
|
||||
Shop Products
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Browse our complete catalog
|
||||
</p>
|
||||
</a>
|
||||
|
||||
{% if header_pages %}
|
||||
{% for page in header_pages[:2] %}
|
||||
<a href="{{ base_url }}shop/{{ page.slug }}"
|
||||
class="block p-8 bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-xl transition-shadow text-center group">
|
||||
<div class="text-4xl mb-4">📄</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary">
|
||||
{{ page.title }}
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
{{ page.meta_description or 'Learn more' }}
|
||||
</p>
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<a href="{{ base_url }}shop/about"
|
||||
class="block p-8 bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-xl transition-shadow text-center group">
|
||||
<div class="text-4xl mb-4">ℹ️</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary">
|
||||
About Us
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Learn about our story
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a href="{{ base_url }}shop/contact"
|
||||
class="block p-8 bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-xl transition-shadow text-center group">
|
||||
<div class="text-4xl mb-4">📧</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary">
|
||||
Contact
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Get in touch with us
|
||||
</p>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
269
app/templates/vendor/landing-full.html
vendored
Normal file
269
app/templates/vendor/landing-full.html
vendored
Normal file
@@ -0,0 +1,269 @@
|
||||
{# app/templates/vendor/landing-full.html #}
|
||||
{# Full Landing Page Template - Maximum Features #}
|
||||
{% extends "shop/base.html" %}
|
||||
|
||||
{% block title %}{{ vendor.name }}{% endblock %}
|
||||
{% block meta_description %}{{ page.meta_description or vendor.description or vendor.name }}{% endblock %}
|
||||
|
||||
{# Alpine.js component #}
|
||||
{% block alpine_data %}shopLayoutData(){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="min-h-screen">
|
||||
|
||||
{# Hero Section - Split Design #}
|
||||
<section class="relative overflow-hidden bg-gradient-to-br from-primary/10 to-accent/5 dark:from-primary/20 dark:to-accent/10">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center min-h-screen">
|
||||
{# Left - Content #}
|
||||
<div class="px-4 sm:px-6 lg:px-8 py-20">
|
||||
{% if theme.branding.logo %}
|
||||
<div class="mb-8">
|
||||
<img src="{{ theme.branding.logo }}"
|
||||
alt="{{ vendor.name }}"
|
||||
class="h-16 w-auto">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
|
||||
{{ page.title or vendor.name }}
|
||||
</h1>
|
||||
|
||||
{% if vendor.tagline %}
|
||||
<p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8">
|
||||
{{ vendor.tagline }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% if vendor.description %}
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400 mb-10">
|
||||
{{ vendor.description }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<a href="{{ base_url }}shop/"
|
||||
class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg text-white bg-primary hover:bg-primary-dark transition-colors shadow-lg"
|
||||
style="background-color: var(--color-primary)">
|
||||
Shop Now
|
||||
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#about"
|
||||
class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors border-2 border-gray-200 dark:border-gray-600">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{# Stats/Badges #}
|
||||
<div class="grid grid-cols-3 gap-8 mt-16 pt-10 border-t border-gray-200 dark:border-gray-700">
|
||||
<div>
|
||||
<div class="text-3xl font-bold text-primary mb-2" style="color: var(--color-primary)">100+</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">Products</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl font-bold text-primary mb-2" style="color: var(--color-primary)">24/7</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">Support</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl font-bold text-primary mb-2" style="color: var(--color-primary)">⭐⭐⭐⭐⭐</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">Rated</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Right - Visual #}
|
||||
<div class="hidden lg:flex items-center justify-center p-12">
|
||||
<div class="relative w-full max-w-lg">
|
||||
{# Decorative Circles #}
|
||||
<div class="absolute top-0 -left-4 w-72 h-72 bg-primary rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
|
||||
<div class="absolute -bottom-8 -right-4 w-72 h-72 bg-accent rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse" style="animation-delay: 1s;"></div>
|
||||
|
||||
{# Image placeholder or icon #}
|
||||
<div class="relative z-10 bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-12 text-center">
|
||||
<div class="text-9xl mb-4">🛍️</div>
|
||||
<p class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
|
||||
Your Shopping Destination
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# Features Grid #}
|
||||
<section class="py-24 bg-white dark:bg-gray-900">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
What We Offer
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Everything you need for an exceptional shopping experience
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div class="p-6 rounded-xl bg-gray-50 dark:bg-gray-800 hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4" style="color: var(--color-primary)">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
Premium Quality
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Top-tier products carefully selected for you
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 rounded-xl bg-gray-50 dark:bg-gray-800 hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center mb-4" style="color: var(--color-accent)">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
Fast Shipping
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Quick delivery right to your door
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 rounded-xl bg-gray-50 dark:bg-gray-800 hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4" style="color: var(--color-primary)">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
Best Value
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Competitive prices and great deals
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 rounded-xl bg-gray-50 dark:bg-gray-800 hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center mb-4" style="color: var(--color-accent)">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
24/7 Support
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Always here to help you
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# About Section (with content) #}
|
||||
{% if page.content %}
|
||||
<section id="about" class="py-24 bg-gray-50 dark:bg-gray-800">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="prose prose-xl dark:prose-invert max-w-none">
|
||||
{{ page.content | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{# Quick Navigation #}
|
||||
<section class="py-24 bg-white dark:bg-gray-900">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-bold text-center text-gray-900 dark:text-white mb-12">
|
||||
Explore More
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<a href="{{ base_url }}shop/products"
|
||||
class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/20 dark:to-primary/10 p-8 hover:shadow-xl transition-all">
|
||||
<div class="relative z-10">
|
||||
<div class="text-5xl mb-4">🛍️</div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-primary transition-colors">
|
||||
Shop Products
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Browse our complete collection
|
||||
</p>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-primary opacity-0 group-hover:opacity-5 transition-opacity"></div>
|
||||
</a>
|
||||
|
||||
{% if header_pages %}
|
||||
{% for page in header_pages[:2] %}
|
||||
<a href="{{ base_url }}shop/{{ page.slug }}"
|
||||
class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-accent/10 to-accent/5 dark:from-accent/20 dark:to-accent/10 p-8 hover:shadow-xl transition-all">
|
||||
<div class="relative z-10">
|
||||
<div class="text-5xl mb-4">📄</div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-accent transition-colors">
|
||||
{{ page.title }}
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
{{ page.meta_description or 'Learn more about us' }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-accent opacity-0 group-hover:opacity-5 transition-opacity"></div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<a href="{{ base_url }}shop/about"
|
||||
class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-accent/10 to-accent/5 dark:from-accent/20 dark:to-accent/10 p-8 hover:shadow-xl transition-all">
|
||||
<div class="relative z-10">
|
||||
<div class="text-5xl mb-4">ℹ️</div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-accent transition-colors">
|
||||
About Us
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Learn about our story and mission
|
||||
</p>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-accent opacity-0 group-hover:opacity-5 transition-opacity"></div>
|
||||
</a>
|
||||
|
||||
<a href="{{ base_url }}shop/contact"
|
||||
class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-primary/10 to-primary/5 dark:from-primary/20 dark:to-primary/10 p-8 hover:shadow-xl transition-all">
|
||||
<div class="relative z-10">
|
||||
<div class="text-5xl mb-4">📧</div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-primary transition-colors">
|
||||
Contact Us
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Get in touch with our team
|
||||
</p>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-primary opacity-0 group-hover:opacity-5 transition-opacity"></div>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# Final CTA #}
|
||||
<section class="py-24 bg-gradient-to-r from-primary to-accent text-white">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-4xl md:text-5xl font-bold mb-6">
|
||||
Ready to Start Shopping?
|
||||
</h2>
|
||||
<p class="text-xl mb-10 opacity-90">
|
||||
Join thousands of satisfied customers today
|
||||
</p>
|
||||
<a href="{{ base_url }}shop/products"
|
||||
class="inline-flex items-center justify-center px-10 py-5 text-lg font-bold rounded-xl text-primary bg-white hover:bg-gray-50 transition-all transform hover:scale-105 shadow-2xl">
|
||||
View All Products
|
||||
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
67
app/templates/vendor/landing-minimal.html
vendored
Normal file
67
app/templates/vendor/landing-minimal.html
vendored
Normal file
@@ -0,0 +1,67 @@
|
||||
{# app/templates/vendor/landing-minimal.html #}
|
||||
{# Minimal Landing Page Template - Ultra Clean #}
|
||||
{% extends "shop/base.html" %}
|
||||
|
||||
{% block title %}{{ vendor.name }}{% endblock %}
|
||||
{% block meta_description %}{{ page.meta_description or vendor.description or vendor.name }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center py-20">
|
||||
|
||||
{# Logo #}
|
||||
{% if theme.branding.logo %}
|
||||
<div class="mb-12">
|
||||
<img src="{{ theme.branding.logo }}"
|
||||
alt="{{ vendor.name }}"
|
||||
class="h-24 w-auto mx-auto">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Title #}
|
||||
<h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-8">
|
||||
{{ page.title or vendor.name }}
|
||||
</h1>
|
||||
|
||||
{# Description/Content #}
|
||||
{% if page.content %}
|
||||
<div class="prose prose-lg dark:prose-invert max-w-2xl mx-auto mb-12 text-gray-600 dark:text-gray-300">
|
||||
{{ page.content | safe }}
|
||||
</div>
|
||||
{% elif vendor.description %}
|
||||
<p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-12 max-w-2xl mx-auto">
|
||||
{{ vendor.description }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{# Single CTA #}
|
||||
<div>
|
||||
<a href="{{ base_url }}shop/"
|
||||
class="inline-flex items-center justify-center px-10 py-5 text-xl font-semibold rounded-full text-white bg-primary hover:bg-primary-dark transition-all transform hover:scale-105 shadow-2xl"
|
||||
style="background-color: var(--color-primary)">
|
||||
Enter Shop
|
||||
<svg class="w-6 h-6 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{# Optional Links Below #}
|
||||
{% if header_pages or footer_pages %}
|
||||
<div class="mt-16 pt-8 border-t border-gray-200 dark:border-gray-700">
|
||||
<div class="flex flex-wrap justify-center gap-6 text-sm">
|
||||
<a href="{{ base_url }}shop/products" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors">
|
||||
Products
|
||||
</a>
|
||||
{% for page in (header_pages or footer_pages)[:4] %}
|
||||
<a href="{{ base_url }}shop/{{ page.slug }}" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors">
|
||||
{{ page.title }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
205
app/templates/vendor/landing-modern.html
vendored
Normal file
205
app/templates/vendor/landing-modern.html
vendored
Normal file
@@ -0,0 +1,205 @@
|
||||
{# app/templates/vendor/landing-modern.html #}
|
||||
{# Modern Landing Page Template - Feature Rich #}
|
||||
{% extends "shop/base.html" %}
|
||||
|
||||
{% block title %}{{ vendor.name }}{% endblock %}
|
||||
{% block meta_description %}{{ page.meta_description or vendor.description or vendor.name }}{% endblock %}
|
||||
|
||||
{# Alpine.js component #}
|
||||
{% block alpine_data %}shopLayoutData(){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="min-h-screen">
|
||||
|
||||
{# Hero Section - Full Width with Overlay #}
|
||||
<section class="relative h-screen flex items-center justify-center bg-gradient-to-br from-primary/20 via-accent/10 to-primary/20 dark:from-primary/30 dark:via-accent/20 dark:to-primary/30">
|
||||
<div class="absolute inset-0 bg-grid-pattern opacity-5"></div>
|
||||
|
||||
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
{# Logo #}
|
||||
{% if theme.branding.logo %}
|
||||
<div class="mb-8 animate-fade-in">
|
||||
<img src="{{ theme.branding.logo }}"
|
||||
alt="{{ vendor.name }}"
|
||||
class="h-24 w-auto mx-auto">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Main Heading #}
|
||||
<h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-6 animate-slide-up">
|
||||
{{ page.title or vendor.name }}
|
||||
</h1>
|
||||
|
||||
{# Tagline #}
|
||||
{% if vendor.tagline %}
|
||||
<p class="text-xl md:text-3xl text-gray-700 dark:text-gray-200 mb-12 max-w-4xl mx-auto animate-slide-up animation-delay-200">
|
||||
{{ vendor.tagline }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{# CTAs #}
|
||||
<div class="flex flex-col sm:flex-row gap-6 justify-center animate-fade-in animation-delay-400">
|
||||
<a href="{{ base_url }}shop/"
|
||||
class="group inline-flex items-center justify-center px-10 py-5 text-lg font-bold rounded-xl text-white bg-primary hover:bg-primary-dark transition-all transform hover:scale-105 shadow-2xl hover:shadow-3xl"
|
||||
style="background-color: var(--color-primary)">
|
||||
<span>Start Shopping</span>
|
||||
<svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#features"
|
||||
class="inline-flex items-center justify-center px-10 py-5 text-lg font-bold rounded-xl text-gray-700 dark:text-gray-200 bg-white/90 dark:bg-gray-800/90 backdrop-blur hover:bg-white dark:hover:bg-gray-800 transition-all border-2 border-gray-200 dark:border-gray-600">
|
||||
Discover More
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{# Scroll Indicator #}
|
||||
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
|
||||
<svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# Features Section #}
|
||||
<section id="features" class="py-24 bg-white dark:bg-gray-900">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Why Choose Us
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
{% if vendor.description %}{{ vendor.description }}{% else %}Experience excellence in every purchase{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
|
||||
{# Feature 1 #}
|
||||
<div class="text-center group">
|
||||
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-primary/10 text-primary mb-6 group-hover:scale-110 transition-transform"
|
||||
style="color: var(--color-primary)">
|
||||
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Quality Products
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Carefully curated selection of premium items
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{# Feature 2 #}
|
||||
<div class="text-center group">
|
||||
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-accent/10 text-accent mb-6 group-hover:scale-110 transition-transform"
|
||||
style="color: var(--color-accent)">
|
||||
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Fast Delivery
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Quick and reliable shipping to your doorstep
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{# Feature 3 #}
|
||||
<div class="text-center group">
|
||||
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-primary/10 text-primary mb-6 group-hover:scale-110 transition-transform"
|
||||
style="color: var(--color-primary)">
|
||||
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Best Prices
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Competitive pricing with great value
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# Content Section (if provided) #}
|
||||
{% if page.content %}
|
||||
<section class="py-24 bg-gray-50 dark:bg-gray-800">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="prose prose-xl dark:prose-invert max-w-none">
|
||||
{{ page.content | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{# CTA Section #}
|
||||
<section class="py-24 bg-gradient-to-r from-primary to-accent text-white">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-4xl md:text-5xl font-bold mb-6">
|
||||
Ready to Get Started?
|
||||
</h2>
|
||||
<p class="text-xl mb-10 opacity-90">
|
||||
Explore our collection and find what you're looking for
|
||||
</p>
|
||||
<a href="{{ base_url }}shop/products"
|
||||
class="inline-flex items-center justify-center px-10 py-5 text-lg font-bold rounded-xl text-primary bg-white hover:bg-gray-50 transition-all transform hover:scale-105 shadow-2xl">
|
||||
Browse Products
|
||||
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Animation utilities */
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 1s ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slide-up 0.8s ease-out;
|
||||
}
|
||||
|
||||
.animation-delay-200 {
|
||||
animation-delay: 0.2s;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
|
||||
.animation-delay-400 {
|
||||
animation-delay: 0.4s;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
|
||||
/* Grid pattern */
|
||||
.bg-grid-pattern {
|
||||
background-image:
|
||||
linear-gradient(to right, currentColor 1px, transparent 1px),
|
||||
linear-gradient(to bottom, currentColor 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user