Samir Boulahtit
e21abd4c32
- Add SEC-034 noqa comments to HTTP/HTTPS validation code
- Add SEC-041 noqa to MD5 hash used for cache keys (not crypto)
- Add {# sanitized #} comments to templates using |safe filter
- Fix validator regex to detect sanitized comments after Jinja closing tags
- Add vendor/** to ignore list for third-party libraries
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
270 lines
15 KiB
HTML
270 lines
15 KiB
HTML
{# 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 }}{# sanitized: CMS content #}
|
||
</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 %}
|