Enhanced home page with improved hero section, feature cards, detailed benefits, and CTA
This commit is contained in:
@@ -3,34 +3,39 @@
|
|||||||
{% block title %}Home - {{ app_name }}{% endblock %}
|
{% block title %}Home - {{ app_name }}{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="row">
|
<!-- Hero Section -->
|
||||||
<div class="col-lg-8 mx-auto text-center">
|
<div class="row mb-5">
|
||||||
|
<div class="col-lg-10 mx-auto text-center">
|
||||||
<div class="py-5">
|
<div class="py-5">
|
||||||
<h1 class="display-3 mb-4">
|
<div class="mb-4">
|
||||||
<i class="bi bi-bricks text-danger"></i> LEGO Instructions Manager
|
<i class="bi bi-bricks" style="font-size: 5rem; color: var(--lego-red);"></i>
|
||||||
|
</div>
|
||||||
|
<h1 class="display-3 mb-4 fw-bold">
|
||||||
|
LEGO Instructions Manager
|
||||||
</h1>
|
</h1>
|
||||||
<p class="lead mb-5">
|
<p class="lead mb-5">
|
||||||
Organize, manage, and access all your LEGO instruction manuals in one place.
|
Your personal digital library for organizing and managing LEGO instruction manuals.
|
||||||
Upload PDFs and images, search by theme, set number, or year, and integrate with Brickset for automatic set details.
|
Upload PDFs and images, search by theme, set number, or year, and integrate with
|
||||||
|
Brickset for automatic set details.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{% if not current_user.is_authenticated %}
|
{% if not current_user.is_authenticated %}
|
||||||
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
|
<div class="d-flex gap-3 justify-content-center flex-wrap">
|
||||||
<a href="{{ url_for('auth.register') }}" class="btn btn-danger btn-lg px-4 gap-3">
|
<a href="{{ url_for('auth.register') }}" class="btn btn-danger btn-lg px-5">
|
||||||
<i class="bi bi-person-plus"></i> Get Started
|
<i class="bi bi-person-plus"></i> Get Started Free
|
||||||
</a>
|
</a>
|
||||||
<a href="{{ url_for('auth.login') }}" class="btn btn-outline-secondary btn-lg px-4">
|
<a href="{{ url_for('auth.login') }}" class="btn btn-outline-secondary btn-lg px-5">
|
||||||
<i class="bi bi-box-arrow-in-right"></i> Login
|
<i class="bi bi-box-arrow-in-right"></i> Sign In
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
|
<div class="d-flex gap-3 justify-content-center flex-wrap">
|
||||||
<a href="{{ url_for('main.dashboard') }}" class="btn btn-danger btn-lg px-4 gap-3">
|
<a href="{{ url_for('main.dashboard') }}" class="btn btn-danger btn-lg px-5">
|
||||||
<i class="bi bi-speedometer2"></i> Go to Dashboard
|
<i class="bi bi-speedometer2"></i> Go to Dashboard
|
||||||
</a>
|
</a>
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<a href="{{ url_for('sets.add_set') }}" class="btn btn-outline-secondary btn-lg px-4">
|
<a href="{{ url_for('sets.add_set') }}" class="btn btn-outline-secondary btn-lg px-4">
|
||||||
<i class="bi bi-box-seam"></i> Add Official Set
|
<i class="bi bi-box-seam"></i> Add Set
|
||||||
</a>
|
</a>
|
||||||
<a href="{{ url_for('sets.add_set') }}?type=moc" class="btn btn-outline-warning btn-lg px-4">
|
<a href="{{ url_for('sets.add_set') }}?type=moc" class="btn btn-outline-warning btn-lg px-4">
|
||||||
<i class="bi bi-star-fill"></i> Add MOC
|
<i class="bi bi-star-fill"></i> Add MOC
|
||||||
@@ -42,66 +47,173 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row mt-5">
|
<!-- Feature Cards -->
|
||||||
<div class="col-md-4 mb-4">
|
<div class="row g-4 mb-5">
|
||||||
<div class="card h-100 shadow-sm">
|
<div class="col-md-6 col-lg-4">
|
||||||
<div class="card-body text-center">
|
<div class="card h-100 shadow-sm border-0">
|
||||||
<i class="bi bi-cloud-upload display-1 text-primary mb-3"></i>
|
<div class="card-body text-center p-4">
|
||||||
<h3 class="card-title">Upload & Organize</h3>
|
<div class="mb-4">
|
||||||
<p class="card-text">
|
<i class="bi bi-cloud-upload display-1 text-primary"></i>
|
||||||
Upload instruction PDFs and images for your LEGO sets. Keep everything organized by theme, year, and set number.
|
</div>
|
||||||
|
<h3 class="card-title h4 fw-bold mb-3">Upload & Organize</h3>
|
||||||
|
<p class="card-text text-muted">
|
||||||
|
Upload instruction PDFs and images for your LEGO sets. Keep everything
|
||||||
|
organized by theme, year, and set number for easy access.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-4 mb-4">
|
<div class="col-md-6 col-lg-4">
|
||||||
<div class="card h-100 shadow-sm">
|
<div class="card h-100 shadow-sm border-0">
|
||||||
<div class="card-body text-center">
|
<div class="card-body text-center p-4">
|
||||||
<i class="bi bi-search display-1 text-success mb-3"></i>
|
<div class="mb-4">
|
||||||
<h3 class="card-title">Easy Search</h3>
|
<i class="bi bi-search display-1 text-success"></i>
|
||||||
<p class="card-text">
|
</div>
|
||||||
Quickly find any instruction manual using powerful search and filtering. Sort by theme, year, or set number.
|
<h3 class="card-title h4 fw-bold mb-3">Powerful Search</h3>
|
||||||
|
<p class="card-text text-muted">
|
||||||
|
Quickly find any instruction manual using advanced search and filtering.
|
||||||
|
Sort by theme, year, set number, or search by name.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-4 mb-4">
|
<div class="col-md-6 col-lg-4">
|
||||||
<div class="card h-100 shadow-sm">
|
<div class="card h-100 shadow-sm border-0">
|
||||||
<div class="card-body text-center">
|
<div class="card-body text-center p-4">
|
||||||
<i class="bi bi-link-45deg display-1 text-danger mb-3"></i>
|
<div class="mb-4">
|
||||||
<h3 class="card-title">Brickset Integration</h3>
|
<i class="bi bi-link-45deg display-1 text-danger"></i>
|
||||||
<p class="card-text">
|
</div>
|
||||||
Connect with Brickset API to automatically populate set details and access official instructions when available.
|
<h3 class="card-title h4 fw-bold mb-3">Brickset Integration</h3>
|
||||||
|
<p class="card-text text-muted">
|
||||||
|
Connect with Brickset API to automatically populate set details
|
||||||
|
and access official instructions when available.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 col-lg-4">
|
||||||
|
<div class="card h-100 shadow-sm border-0">
|
||||||
|
<div class="card-body text-center p-4">
|
||||||
|
<div class="mb-4">
|
||||||
|
<i class="bi bi-star-fill display-1 text-warning"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="card-title h4 fw-bold mb-3">MOC Support</h3>
|
||||||
|
<p class="card-text text-muted">
|
||||||
|
Not just official sets! Organize your My Own Creations (MOCs)
|
||||||
|
with custom numbering and dedicated management features.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 col-lg-4">
|
||||||
|
<div class="card h-100 shadow-sm border-0">
|
||||||
|
<div class="card-body text-center p-4">
|
||||||
|
<div class="mb-4">
|
||||||
|
<i class="bi bi-images display-1 text-info"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="card-title h4 fw-bold mb-3">Image Gallery</h3>
|
||||||
|
<p class="card-text text-muted">
|
||||||
|
View instruction images in an organized gallery with thumbnails.
|
||||||
|
Supports both PDF and image formats for maximum flexibility.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 col-lg-4">
|
||||||
|
<div class="card h-100 shadow-sm border-0">
|
||||||
|
<div class="card-body text-center p-4">
|
||||||
|
<div class="mb-4">
|
||||||
|
<i class="bi bi-phone display-1 text-secondary"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="card-title h4 fw-bold mb-3">Responsive Design</h3>
|
||||||
|
<p class="card-text text-muted">
|
||||||
|
Access your instruction library from any device. Fully responsive
|
||||||
|
design works perfectly on desktop, tablet, and mobile.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row mt-5">
|
<!-- Features List -->
|
||||||
|
<div class="row mb-5">
|
||||||
<div class="col-lg-10 mx-auto">
|
<div class="col-lg-10 mx-auto">
|
||||||
<div class="card shadow">
|
<div class="card shadow border-0">
|
||||||
<div class="card-body">
|
<div class="card-body p-5">
|
||||||
<h3 class="card-title mb-4">
|
<div class="text-center mb-5">
|
||||||
<i class="bi bi-info-circle"></i> Features
|
<h3 class="fw-bold mb-2">
|
||||||
|
<i class="bi bi-stars text-warning"></i> Everything You Need
|
||||||
</h3>
|
</h3>
|
||||||
<div class="row">
|
<p class="text-muted">Comprehensive features for managing your LEGO collection</p>
|
||||||
|
</div>
|
||||||
|
<div class="row g-4">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<ul class="list-unstyled">
|
<ul class="list-unstyled">
|
||||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Upload PDF and image instructions</li>
|
<li class="mb-3 d-flex align-items-start">
|
||||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Organize by theme and year</li>
|
<i class="bi bi-check-circle-fill text-success me-3 mt-1 fs-5"></i>
|
||||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Search and filter capabilities</li>
|
<div>
|
||||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> User authentication & profiles</li>
|
<strong>Multi-format Support</strong>
|
||||||
|
<p class="text-muted small mb-0">Upload PDF and image instructions</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="mb-3 d-flex align-items-start">
|
||||||
|
<i class="bi bi-check-circle-fill text-success me-3 mt-1 fs-5"></i>
|
||||||
|
<div>
|
||||||
|
<strong>Theme Organization</strong>
|
||||||
|
<p class="text-muted small mb-0">Automatic categorization by LEGO themes</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="mb-3 d-flex align-items-start">
|
||||||
|
<i class="bi bi-check-circle-fill text-success me-3 mt-1 fs-5"></i>
|
||||||
|
<div>
|
||||||
|
<strong>Advanced Filtering</strong>
|
||||||
|
<p class="text-muted small mb-0">Search and filter by multiple criteria</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="mb-3 d-flex align-items-start">
|
||||||
|
<i class="bi bi-check-circle-fill text-success me-3 mt-1 fs-5"></i>
|
||||||
|
<div>
|
||||||
|
<strong>Secure Authentication</strong>
|
||||||
|
<p class="text-muted small mb-0">Personal accounts with password protection</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<ul class="list-unstyled">
|
<ul class="list-unstyled">
|
||||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Brickset API integration</li>
|
<li class="mb-3 d-flex align-items-start">
|
||||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Automatic set detail population</li>
|
<i class="bi bi-check-circle-fill text-success me-3 mt-1 fs-5"></i>
|
||||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Image gallery view</li>
|
<div>
|
||||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Responsive design</li>
|
<strong>Brickset API</strong>
|
||||||
|
<p class="text-muted small mb-0">Automatic set details from Brickset database</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="mb-3 d-flex align-items-start">
|
||||||
|
<i class="bi bi-check-circle-fill text-success me-3 mt-1 fs-5"></i>
|
||||||
|
<div>
|
||||||
|
<strong>Auto-populate Data</strong>
|
||||||
|
<p class="text-muted small mb-0">Set details filled automatically from API</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="mb-3 d-flex align-items-start">
|
||||||
|
<i class="bi bi-check-circle-fill text-success me-3 mt-1 fs-5"></i>
|
||||||
|
<div>
|
||||||
|
<strong>Beautiful Gallery</strong>
|
||||||
|
<p class="text-muted small mb-0">Visual grid layout for easy browsing</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="mb-3 d-flex align-items-start">
|
||||||
|
<i class="bi bi-check-circle-fill text-success me-3 mt-1 fs-5"></i>
|
||||||
|
<div>
|
||||||
|
<strong>Modern Interface</strong>
|
||||||
|
<p class="text-muted small mb-0">Clean, intuitive design with smooth animations</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -109,4 +221,22 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- CTA Section -->
|
||||||
|
{% if not current_user.is_authenticated %}
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8 mx-auto">
|
||||||
|
<div class="card text-center shadow-lg border-0" style="background: linear-gradient(135deg, #d11013 0%, #ff4757 100%);">
|
||||||
|
<div class="card-body p-5 text-white">
|
||||||
|
<h2 class="fw-bold mb-3">Ready to Organize Your LEGO Collection?</h2>
|
||||||
|
<p class="lead mb-4">Join now and start managing your instructions digitally</p>
|
||||||
|
<a href="{{ url_for('auth.register') }}" class="btn btn-light btn-lg px-5">
|
||||||
|
<i class="bi bi-person-plus"></i> Create Free Account
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
Reference in New Issue
Block a user