mirror of
https://github.com/chaoming/hugo-saasify-theme.git
synced 2025-04-20 19:51:54 +02:00
192 lines
9.3 KiB
HTML
192 lines
9.3 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">
|
|
|
|
<!-- Temporary Tailwind CDN for development -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: {
|
|
50: '#f0f9ff',
|
|
100: '#e0f2fe',
|
|
200: '#bae6fd',
|
|
300: '#7dd3fc',
|
|
400: '#38bdf8',
|
|
500: '#0ea5e9',
|
|
600: '#0284c7',
|
|
700: '#0369a1',
|
|
800: '#075985',
|
|
900: '#0c4a6e',
|
|
},
|
|
secondary: {
|
|
50: '#faf5ff',
|
|
100: '#f3e8ff',
|
|
200: '#e9d5ff',
|
|
300: '#d8b4fe',
|
|
400: '#c084fc',
|
|
500: '#a855f7',
|
|
600: '#9333ea',
|
|
700: '#7e22ce',
|
|
800: '#6b21a8',
|
|
900: '#581c87',
|
|
},
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
heading: ['Plus Jakarta Sans', 'sans-serif'],
|
|
},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="flex flex-col min-h-screen">
|
|
<!-- Header -->
|
|
<header class="fixed w-full top-0 z-50 bg-white/80 backdrop-blur-sm border-b border-gray-100">
|
|
<div class="container">
|
|
<nav class="flex items-center justify-between h-20">
|
|
<!-- Logo -->
|
|
<a href="{{ .Site.BaseURL }}" class="flex items-center">
|
|
{{ 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>
|
|
|
|
<!-- Navigation -->
|
|
<div class="hidden md:flex items-center space-x-8">
|
|
{{ range .Site.Menus.main }}
|
|
<a href="{{ .URL }}" class="text-gray-600 hover:text-primary-600 font-medium transition duration-200">{{ .Name }}</a>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<!-- CTA Buttons -->
|
|
<div class="hidden md:flex items-center space-x-4">
|
|
<a href="{{ .Site.Params.signInURL | default "#" }}" class="inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600">
|
|
Sign in
|
|
</a>
|
|
<a href="{{ .Site.Params.getStartedURL | default "#" }}" class="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">
|
|
Get Started
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Mobile Menu Button -->
|
|
<button class="md:hidden p-2" id="mobile-menu-button" aria-label="Menu">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div class="md:hidden hidden" id="mobile-menu">
|
|
<div class="py-4 space-y-4">
|
|
{{ range .Site.Menus.main }}
|
|
<a href="{{ .URL }}" class="block text-gray-600 hover:text-primary-600 font-medium transition duration-200 py-2">{{ .Name }}</a>
|
|
{{ end }}
|
|
<div class="pt-4 space-y-4">
|
|
<a href="{{ .Site.Params.signInURL | default "#" }}" class="block text-center inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600">
|
|
Sign in
|
|
</a>
|
|
<a href="{{ .Site.Params.getStartedURL | default "#" }}" class="block text-center 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">
|
|
Get Started
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|