65 lines
2.1 KiB
Cheetah
65 lines
2.1 KiB
Cheetah
{{define "catalog.tmpl"}}
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Catalog - Decor By Hannahs</title>
|
|
<link rel="stylesheet" href="/static/css/styles.css">
|
|
<script>
|
|
(function() {
|
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
})();
|
|
</script>
|
|
<script src="/static/js/alpine.js" defer></script>
|
|
<script src="/static/htmx/htmx.min.js" defer></script>
|
|
<script src="/static/js/drawer.js" defer></script>
|
|
</head>
|
|
|
|
<body>
|
|
{{template "header" .}}
|
|
|
|
<main>
|
|
<div style="margin-bottom: 2rem; position: relative;">
|
|
<img src="/assets/party-icons/party-hat-with-horn.png" alt="Party horn" style="position: absolute; top: -10px; right: 20px; width: 70px; height: 70px; transform: rotate(-15deg); opacity: 0.9;">
|
|
<h1 style="font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem;">Our Services</h1>
|
|
<p style="color: hsl(var(--muted-foreground)); font-size: 1.125rem;">Browse our decoration packages and services</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2">
|
|
{{ range .Services }}
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">{{ .Name }}</h3>
|
|
{{ if .ImageUrl.Valid }}
|
|
<div style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem;">
|
|
<span class="badge" style="background: hsl(var(--accent));">Featured</span>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
<div class="card-content">
|
|
<p>{{ .Description }}</p>
|
|
{{ if .ImageUrl.Valid }}
|
|
<img src="{{ .ImageUrl.String }}" alt="{{ .Name }}" style="width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius); margin-top: 1rem;">
|
|
{{ end }}
|
|
</div>
|
|
<div class="card-footer">
|
|
<a href="/booking" class="btn btn-primary">Book This Service</a>
|
|
<a href="#" class="btn btn-outline">Learn More</a>
|
|
</div>
|
|
</div>
|
|
{{ else }}
|
|
<div class="card" style="grid-column: 1 / -1; text-align: center; padding: 3rem;">
|
|
<p style="color: hsl(var(--muted-foreground)); font-size: 1.125rem;">No services available yet. Check back soon!</p>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</main>
|
|
|
|
{{template "footer"}}
|
|
{{template "theme-script"}}
|
|
</body>
|
|
</html>
|
|
{{end}}
|