codematerwa/templates.php at main · divinwix/codematerwa · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<?php
$page_title = 'Templates - CodeMateRwa';
$page_description = 'Browse premium and free website templates from CodeMateRwa.';
include __DIR__ . '/includes/header.php';

$templates = [];
try {
    $templates = getTemplates(24);
} catch (Exception $e) {
    // fallback: sample templates
    $templates = [
        ['id'=>1, 'name'=>'Startup Landing', 'description'=>'Landing page template (landingpage_web)', 'price'=>0, 'thumbnail'=>'assets/images/template/landingpage_web.jpg'],
        ['id'=>2, 'name'=>'Agency Pro', 'description'=>'Portfolio website template (portfolio_web)', 'price'=>49, 'thumbnail'=>'assets/images/template/portfolio_web.jpg'],
        ['id'=>3, 'name'=>'E‑Commerce Lite', 'description'=>'Business / shop starter template (bussiness_web)', 'price'=>29, 'thumbnail'=>'assets/images/template/bussiness_web.jpg']
    ];
}

// A small gallery of template images to use as fallbacks when a template has no thumbnail.
$templateImages = [
    'assets/images/template/bussiness_web.jpg',
    'assets/images/template/cleaner_web.jpg',
    'assets/images/template/food_web.jpg',
    'assets/images/template/healthcare_web.jpg',
    'assets/images/template/hero.jpg',
    'assets/images/template/interialdesign_web.jpg',
    'assets/images/template/landingpage_web.jpg',
    'assets/images/template/portfolio_web.jpg',
    'assets/images/template/sports_web.jpg',
    'assets/images/template/temp_1.jpg',
    'assets/images/template/university_web.jpg'
];

$tpl_count = count($templateImages);
?>

<section class="container mx-auto px-6 py-16">
    <div class="max-w-4xl mx-auto text-center mb-12">
        <h1 class="text-3xl md:text-4xl font-bold" style="color: #13505bff;">Templates</h1>
        <p class="mt-3" style="color: #0c7489ff;">Hand-picked templates to kickstart your project.</p>
    </div>
    <style>
    /* Card component styles (scoped to this page) */
    .cards { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
    .card-component { width:260px; border-radius:12px; overflow:hidden; box-shadow:0 13px 10px -7px rgba(4, 4, 4, 0.1); transition:transform .3s, box-shadow .3s; background-color: #ffffff; }
    .card-component:hover { transform:translateY(-8px); box-shadow:0 30px 18px -8px rgba(4, 4, 4, 0.12); }
    .card-component .thumb { height:160px; background-size:cover; background-position:center; }
    .card-component .meta { padding:14px; }
    .card-component .category { font-size:12px; text-transform:uppercase; letter-spacing:1px; color: #0c7489ff; }
    .card-component .title { font-size:16px; margin:8px 0; color: #13505bff; }
    .card-component .author { font-size:13px; color: #040404ff; }
    .card-component .footer { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-top:1px solid #d7d9ceff; }
    .card-component .price { font-weight:700; color: #119da4ff; }
    .card-component .btn { background: linear-gradient(135deg, #119da4ff, #0c7489ff); color:white; padding:8px 12px; border-radius:8px; text-decoration:none; }
    </style>

    <div class="cards">
        <?php foreach ($templates as $idx => $tpl): ?>
            <?php
                // Determine thumbnail: prefer provided thumbnail, otherwise pick from template images round-robin
                $thumb = '';
                if (!empty($tpl['thumbnail'])) {
                    $thumb = $tpl['thumbnail'];
                } else {
                    $thumb = $templateImages[$idx % $tpl_count] ?? ($templateImages[0] ?? 'assets/images/hero/1.jpg');
                }

                // Generate a friendly description from the thumbnail filename if none provided
                if (empty($tpl['description'])) {
                    $base = pathinfo($thumb, PATHINFO_FILENAME); // e.g. landingpage_web or cleaner_web
                    // replace underscores and extra words, then capitalize
                    $friendly = str_replace(['_web','_','-'], ['',' ',' '], $base);
                    $friendly = preg_replace('/\bweb\b/i','', $friendly);
                    $friendly = trim(preg_replace('/\s+/', ' ', $friendly));
                    $tpl['description'] = ucwords($friendly) . ' template';
                }
            ?>
            <article class="card-component" id="template-<?= (int)($tpl['id'] ?? $idx) ?>">
                <div class="thumb" style="background-image:url('<?= htmlspecialchars($thumb) ?>')"></div>
                <div class="meta  bg-[#DFD7C5]">
                    <div class="category"><?= htmlspecialchars($tpl['category_name'] ?? 'Template') ?></div>
                    <h3 class="title"><?= htmlspecialchars($tpl['name'] ?? 'Untitled') ?></h3>
                    <p class="text-sm" style="color: #0c7489ff;"><?= htmlspecialchars($tpl['description']) ?></p>
                    <div class="author">by <?= htmlspecialchars($tpl['author'] ?? 'CodeMateRwa') ?></div>
                </div>
                <div class="footer  bg-[#DFD7C5]">
                    <div class="price"><?= isset($tpl['price']) && $tpl['price'] > 0 ? formatPrice($tpl['price']) : 'Free' ?></div>
                    <a class="btn" href="templates.php#template-<?= (int)($tpl['id'] ?? $idx) ?>">Preview</a>
                </div>
            </article>
        <?php endforeach; ?>
    </div>
</section>

<?php include __DIR__ . '/includes/footer.php'; ?>