Blade Products Demo

Product controller with dynamic data generation and template rendering:

<?php
// DemoController.php - Product data generation with real images
public function bladeProducts(Request $request, Response $response): void
{
    // Real product data with Unsplash images
    $productData = [
        [
            'title' => 'Professional Wireless Headphones',
            'description' => 'Premium noise-cancelling headphones with 30-hour battery life.',
            'category' => 'Electronics',
            'image' => 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=300&fit=crop'
        ],
        [
            'title' => 'Smart Fitness Watch',
            'description' => 'Advanced fitness tracking with heart rate monitoring and GPS.',
            'category' => 'Electronics',
            'image' => 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=300&fit=crop'
        ],
        // ... more products
    ];

    $products = [];
    for ($i = 0; $i < 12; $i++) {
        $basePrice = 150 + ($i * 25);
        $hasDiscount = ($i + 1) % 3 === 0;
        $products[] = [
            'id' => $i + 1,
            'title' => $productData[$i]['title'],
            'description' => $productData[$i]['description'],
            'price' => $basePrice,
            'old_price' => $hasDiscount ? $basePrice + 50 : null,
            'image' => $productData[$i]['image'],
            'category' => $productData[$i]['category'],
            'brand' => ['TechPro', 'StyleCraft', 'HomeEssentials', 'SportMax'][$i % 4],
            'is_new' => $i < 3,
            'discount' => $hasDiscount ? rand(15, 35) : 0,
            'rating' => rand(4, 5),
            'review_count' => rand(25, 150)
        ];
    }

    $response->render('demo/blade-products', [
        'title' => 'Template Engine Demo - Products',
        'products' => $products,
        'total_products' => count($products),
        'categories' => ['Electronics', 'Clothing', 'Home & Living', 'Sports']
    ]);
}
?>

Product grid generation with foreach loops and conditional logic:

<!-- Product Grid Generation -->
<div class="row">
    <?php foreach ($products as $index => $product): ?>
    <div class="col-md-4 animate-fade-in" style="animation-delay: <?= $index * 0.1 ?>s">
        <div class="modern-product-card">
            <img src="<?= $product['image'] ?>" alt="<?= $this->escape($product['title']) ?>">
            <div class="product-body">
                <h6><?= $product['title'] ?></h6>
                <p><?= $product['description'] ?></p>
                
                <!-- Conditional pricing logic -->
                <div class="mb-2">
                    <?php if ($product['old_price']): ?>
                        <span class="price-old">$<?= $product['old_price'] ?></span>
                    <?php endif; ?>
                    <span class="price-current">$<?= $product['price'] ?></span>
                    <?php if ($product['discount'] > 0): ?>
                        <span class="discount-badge"><?= $product['discount'] ?>% OFF</span>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
    <?php endforeach; ?>
</div>

Dynamic star rating system with review counts:

<!-- Dynamic Star Rating -->
<div class="rating-section">
    <div class="rating-stars">
        <?php for ($i = 1; $i <= 5; $i++): ?>
            <i class="fas fa-star<?= $i <= $product['rating'] ? '' : '-o' ?>"></i>
        <?php endfor; ?>
    </div>
    <small class="text-muted">(<?= $product['review_count'] ?> reviews)</small>
</div>

<!-- Category Badge System -->
<div class="product-meta">
    <span class="category-badge"><?= $product['category'] ?></span>
    <?php if ($product['is_new']): ?>
        <span class="new-badge">NEW</span>
    <?php endif; ?>
</div>

<!-- Discount Badge Logic -->
<?php if ($product['discount'] > 0): ?>
    <span class="discount-badge">
        <?= $product['discount'] ?>% OFF
    </span>
<?php endif; ?>

XSS protection and secure variable handling:

<!-- Safe HTML Output -->
<h6><?= $this->escape($product['title']) ?></h6>
<p><?= $this->escape($product['description']) ?></p>

<!-- Safe Attribute Values -->
<img src="<?= $this->escape($product['image']) ?>" 
     alt="<?= $this->escape($product['title']) ?>">

<!-- Conditional Security -->
<?php if (isset($product['title']) && !empty($product['title'])): ?>
    <h6><?= $this->escape($product['title']) ?></h6>
<?php else: ?>
    <h6>Product Name Not Available</h6>
<?php endif; ?>

<!-- Numeric Value Validation -->
<span class="price-current">
    $<?= is_numeric($product['price']) ? number_format($product['price'], 2) : '0.00' ?>
</span>

<!-- Array Key Security -->
<?php if (array_key_exists('discount', $product) && $product['discount'] > 0): ?>
    <span class="discount-badge"><?= (int)$product['discount'] ?>% OFF</span>
<?php endif; ?>

Mobile-first responsive product grid with animations:

<!-- Responsive Grid System -->
<div class="row">
    <?php foreach ($products as $index => $product): ?>
    <div class="col-md-4 col-sm-6 col-12 animate-fade-in" 
         style="animation-delay: <?= $index * 0.1 ?>s">
        <div class="modern-product-card">
            <!-- Responsive image -->
            <img src="<?= $product['image'] ?>" 
                 class="img-fluid" 
                 alt="<?= $this->escape($product['title']) ?>">
        </div>
    </div>
    <?php endforeach; ?>
</div>

<!-- CSS Animations -->
<style>
.animate-fade-in {
    animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modern-product-card {
    transition: all 0.3s ease;
}

.modern-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .col-md-4 { width: 100%; }
    .modern-product-card { margin-bottom: 1rem; }
}
</style>

Layout extension system with sections and content blocks:

<!-- Template Layout Extension -->
<?php $this->extend('main'); ?>

<!-- Page Title Section -->
<?php $this->section('title'); ?>
Blade Products Demo - <?= $_ENV['APP_NAME'] ?? 'Coralito Framework' ?>
<?php $this->endSection(); ?>

<!-- Head Section for Styles -->
<?php $this->section('head'); ?>
<style>
    /* Custom styles for this page */
    .blade-hero { /* styles */ }
</style>
<?php $this->endSection(); ?>

<!-- Main Content Section -->
<?php $this->section('content'); ?>
<div class="container-fluid">
    <!-- Page content here -->
</div>
<?php $this->endSection(); ?>

<!-- Footer Scripts Section -->
<?php $this->section('scripts'); ?>
<script>
    // Page-specific JavaScript
    function copyToClipboard(element) {
        // Copy functionality
    }
</script>
<?php $this->endSection(); ?>

Step-by-step guide to create your own product catalog:

<!-- Step 1: Create Controller -->
<?php
namespace App\Frontend\Controllers;

class ProductController extends BaseController
{
    public function index(Request $request, Response $response): void
    {
        $products = $this->productService->getAllProducts();
        
        $response->render('products/index', [
            'title' => 'Our Products',
            'products' => $products,
            'categories' => $this->categoryService->getAll()
        ]);
    }
}
?>

<!-- Step 2: Create Template -->
<?php $this->extend('main'); ?>

<?php $this->section('content'); ?>
<div class="container">
    <h1><?= $title ?></h1>
    <div class="row">
        <?php foreach ($products as $product): ?>
        <div class="col-md-4">
            <div class="product-card">
                <img src="<?= $product['image'] ?>" alt="<?= $this->escape($product['title']) ?>">
                <h5><?= $this->escape($product['title']) ?></h5>
                <p>$<?= number_format($product['price'], 2) ?></p>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</div>
<?php $this->endSection(); ?>

Security guidelines, performance tips, and UI/UX recommendations:

Caching strategies and optimization techniques:

<!-- View Caching Implementation -->
<?php
// Enable view caching in production
if ($_ENV['APP_ENV'] === 'production') {
    $this->enableCache('product_list', 3600); // 1 hour
}
?>

<!-- Lazy Loading Images -->
<img src="<?= $product['image'] ?>" 
     loading="lazy" 
     alt="<?= $this->escape($product['title']) ?>">

<!-- Conditional Asset Loading -->
<?php if ($this->hasProducts()): ?>
    <link rel="stylesheet" href="/assets/css/products.css">
<?php endif; ?>

<!-- Database Query Optimization -->
<?php
// In Controller - batch queries
$products = $this->productRepository->getAllWithCategories();
$categories = $this->categoryRepository->getAllActive();

// Avoid N+1 queries
foreach ($products as &$product) {
    $product['category_name'] = $categories[$product['category_id']]['name'];
}
?>

<!-- Minified Assets -->
<?php if ($_ENV['APP_ENV'] === 'production'): ?>
    <link rel="stylesheet" href="/assets/css/products.min.css">
<?php else: ?>
    <link rel="stylesheet" href="/assets/css/products.css">
<?php endif; ?>