mirror of
https://github.com/chaoming/hugo-saasify-theme.git
synced 2025-04-20 19:41:52 +02:00
105 lines
4.9 KiB
HTML
105 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{ .Site.LanguageCode | default "en" }}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
|
|
<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/png" href="{{ "favicon.png" | relURL }}">
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap" rel="stylesheet">
|
|
|
|
<!-- Main CSS -->
|
|
{{ $css := resources.Get "css/main.css" }}
|
|
{{ $css = $css | resources.PostCSS }}
|
|
{{ if hugo.IsProduction }}
|
|
{{ $css = $css | minify | fingerprint | resources.PostProcess }}
|
|
{{ end }}
|
|
<link rel="stylesheet" href="{{ $css.RelPermalink }}">
|
|
</head>
|
|
<body class="flex flex-col min-h-screen">
|
|
<!-- Header -->
|
|
{{ partial "header" . }}
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-grow pt-20">
|
|
{{ block "main" . }}{{ end }}
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-gray-50 border-t border-gray-100">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl py-12 md:py-16">
|
|
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
|
|
<!-- Brand -->
|
|
<div class="space-y-4">
|
|
<a href="{{ .Site.BaseURL }}" class="inline-block">
|
|
{{ with .Site.Params.logo }}
|
|
<img src="{{ . | relURL }}" alt="{{ $.Site.Title }}" class="h-8">
|
|
{{ else }}
|
|
<span class="text-xl font-bold text-gray-900">{{ .Site.Title }}</span>
|
|
{{ end }}
|
|
</a>
|
|
<p class="text-gray-600">{{ .Site.Params.description }}</p>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<div>
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider text-gray-900 mb-4">Product</h3>
|
|
<ul class="space-y-3">
|
|
{{ range .Site.Menus.footer_product }}
|
|
<li><a href="{{ .URL }}" class="text-gray-600 hover:text-primary-600">{{ .Name }}</a></li>
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider text-gray-900 mb-4">Company</h3>
|
|
<ul class="space-y-3">
|
|
{{ range .Site.Menus.footer_company }}
|
|
<li><a href="{{ .URL }}" class="text-gray-600 hover:text-primary-600">{{ .Name }}</a></li>
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Newsletter -->
|
|
<div>
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider text-gray-900 mb-4">Stay Updated</h3>
|
|
<form class="space-y-4">
|
|
<div>
|
|
<label for="email" class="sr-only">Email address</label>
|
|
<input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" placeholder="Enter your email">
|
|
</div>
|
|
<button type="submit" class="w-full inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out bg-primary-600 text-white hover:bg-primary-700 hover:scale-105">Subscribe</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom -->
|
|
<div class="mt-12 pt-8 border-t border-gray-200">
|
|
<div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
|
|
<p class="text-gray-600 text-sm">
|
|
© {{ now.Format "2006" }} {{ .Site.Title }}. All rights reserved.
|
|
</p>
|
|
<div class="flex space-x-6">
|
|
{{ range .Site.Menus.footer_legal }}
|
|
<a href="{{ .URL }}" class="text-sm text-gray-600 hover:text-primary-600">{{ .Name }}</a>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Mobile Menu Script -->
|
|
<script>
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() {
|
|
document.getElementById('mobile-menu').classList.toggle('hidden');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|