sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement vendor landing pages with multi-template support and fix shop routing

Browse Source 
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:
Samir Boulahtit
2025-11-23 00:10:45 +01:00
parent d85a68f175
commit b7bf505a61
26 changed files with 1967 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/templates/shop/account/login.html
View File

@@ -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>

2
app/templates/shop/account/register.html
View File

@@ -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>

30
app/templates/shop/base.html
View File

@@ -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 %}

6
app/templates/shop/cart.html
View File

@@ -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>

6
app/templates/shop/errors/404.html
View File

@@ -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 %}

4
app/templates/shop/home.html
View File

@@ -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>

4
app/templates/shop/product.html
View File

@@ -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
View 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
View 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
View 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
View 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 %}