mirror of
https://github.com/chaoming/hugo-saasify-theme.git
synced 2025-04-20 07:11:52 +02:00
added features layout and submenu
This commit is contained in:
Chaoming Li
parent
b76e35a95a
commit
b6f26eb065
2 changed files with 106 additions and 0 deletions
76
layouts/_default/feature.html
Normal file
76
layouts/_default/feature.html
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
{{ define "main" }}
|
||||||
|
<article class="feature-page" style="--badge-color: {{ .Params.badgeColor }}">
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<div class="relative isolate overflow-hidden">
|
||||||
|
<style>
|
||||||
|
.badge {
|
||||||
|
background-color: color-mix(in srgb, var(--badge-color) 10%, transparent);
|
||||||
|
color: var(--badge-color);
|
||||||
|
}
|
||||||
|
.gradient-bg {
|
||||||
|
background-image: linear-gradient(180deg, color-mix(in srgb, var(--badge-color) 5%, white), white);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="absolute inset-x-0 top-0 h-96 gradient-bg opacity-75"></div>
|
||||||
|
<div class="relative pt-24 pb-32 sm:pt-32">
|
||||||
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||||
|
<div class="mx-auto max-w-2xl text-center">
|
||||||
|
{{ with .Params.badge }}
|
||||||
|
<div class="mb-6">
|
||||||
|
<span class="badge inline-flex items-center rounded-full px-4 py-1.5 text-sm font-medium">
|
||||||
|
{{ . }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">{{ .Title }}</h1>
|
||||||
|
<p class="mt-6 text-lg leading-8 text-gray-600">{{ .Description }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||||
|
<!-- Key Features Grid -->
|
||||||
|
{{ if .Params.features }}
|
||||||
|
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
|
||||||
|
<div class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2 xl:grid-cols-4">
|
||||||
|
{{ range .Params.features }}
|
||||||
|
<div class="flex flex-col bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 p-8">
|
||||||
|
<dt class="text-lg font-semibold leading-7 text-gray-900">
|
||||||
|
{{ .title }}
|
||||||
|
</dt>
|
||||||
|
<dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
|
||||||
|
<p class="flex-auto">{{ .description }}</p>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
<!-- Content Section -->
|
||||||
|
<div class="prose prose-lg mx-auto mt-16 pb-24">
|
||||||
|
{{ .Content }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Demo Section -->
|
||||||
|
{{ if .Params.demo }}
|
||||||
|
<div class="bg-gray-50 -mx-6 px-6 py-24 sm:py-32">
|
||||||
|
<div class="mx-auto max-w-2xl lg:text-center">
|
||||||
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">See it in action</h2>
|
||||||
|
<p class="mt-6 text-lg leading-8 text-gray-600">{{ .Params.demo.description }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-16 flex justify-center">
|
||||||
|
<div class="relative rounded-xl bg-white p-8 shadow-2xl ring-1 ring-gray-200">
|
||||||
|
<img src="{{ .Params.demo.image }}" alt="Demo" class="rounded-lg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Global CTA -->
|
||||||
|
{{ partial "components/cta.html" . }}
|
||||||
|
</article>
|
||||||
|
{{ end }}
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
{{ $headerConfig := .Site.Params.header }}
|
{{ $headerConfig := .Site.Params.header }}
|
||||||
|
{{ $dropdownConfig := $headerConfig.menu.dropdown }}
|
||||||
<div class="mobile-menu-wrapper">
|
<div class="mobile-menu-wrapper">
|
||||||
<input type="checkbox" id="nav-toggle" class="nav-toggle">
|
<input type="checkbox" id="nav-toggle" class="nav-toggle">
|
||||||
<header class="fixed w-full top-0 z-50 {{ with $headerConfig.background }}{{ . }}{{ else }}bg-white/80 backdrop-blur-sm{{ end }} {{ with $headerConfig.border }}{{ . }}{{ else }}border-b border-gray-100{{ end }}">
|
<header class="fixed w-full top-0 z-50 {{ with $headerConfig.background }}{{ . }}{{ else }}bg-white/80 backdrop-blur-sm{{ end }} {{ with $headerConfig.border }}{{ . }}{{ else }}border-b border-gray-100{{ end }}">
|
||||||
|
|
@ -19,8 +20,26 @@
|
||||||
<!-- Navigation -->
|
<!-- Navigation -->
|
||||||
<div class="hidden md:flex items-center {{ with $headerConfig.menu.spacing }}{{ . }}{{ else }}space-x-8{{ end }}">
|
<div class="hidden md:flex items-center {{ with $headerConfig.menu.spacing }}{{ . }}{{ else }}space-x-8{{ end }}">
|
||||||
{{ range .Site.Menus.main }}
|
{{ range .Site.Menus.main }}
|
||||||
|
{{ if .Params.has_submenu }}
|
||||||
|
<div class="relative group">
|
||||||
|
<button class="flex items-center {{ with $headerConfig.menu.linkClass }}{{ . }}{{ else }}text-base text-gray-900 hover:text-primary-600 font-bold transition duration-200{{ end }}">
|
||||||
|
{{ .Name }}
|
||||||
|
<svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="absolute left-0 mt-2 {{ $dropdownConfig.width | default "w-72" }} opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 ease-in-out">
|
||||||
|
<div class="{{ $dropdownConfig.container_padding | default "py-6" }} {{ $dropdownConfig.background | default "bg-white" }} {{ $dropdownConfig.border | default "border border-gray-100" }} {{ $dropdownConfig.shadow | default "shadow-xl" }} {{ $dropdownConfig.radius | default "rounded-lg" }}">
|
||||||
|
{{ range .Params.submenu }}
|
||||||
|
<a href="{{ .url }}" class="block {{ $dropdownConfig.item_padding | default "px-8 py-3" }} {{ $dropdownConfig.text_size | default "text-sm" }} {{ $dropdownConfig.text_color | default "text-gray-700" }} {{ $dropdownConfig.hover_background | default "hover:bg-gray-50" }}">{{ .name }}</a>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ else }}
|
||||||
<a href="{{ .URL }}" class="{{ with $headerConfig.menu.linkClass }}{{ . }}{{ else }}text-base text-gray-900 hover:text-primary-600 font-bold transition duration-200{{ end }}">{{ .Name }}</a>
|
<a href="{{ .URL }}" class="{{ with $headerConfig.menu.linkClass }}{{ . }}{{ else }}text-base text-gray-900 hover:text-primary-600 font-bold transition duration-200{{ end }}">{{ .Name }}</a>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- CTA Buttons -->
|
<!-- CTA Buttons -->
|
||||||
|
|
@ -55,8 +74,19 @@
|
||||||
<div class="nav-content md:hidden w-full fixed left-0 right-0 top-20 bg-white border-t border-gray-100 shadow-lg">
|
<div class="nav-content md:hidden w-full fixed left-0 right-0 top-20 bg-white border-t border-gray-100 shadow-lg">
|
||||||
<div class="w-full px-6 py-4">
|
<div class="w-full px-6 py-4">
|
||||||
{{ range .Site.Menus.main }}
|
{{ range .Site.Menus.main }}
|
||||||
|
{{ if .Params.has_submenu }}
|
||||||
|
<div class="py-2">
|
||||||
|
<div class="text-xl text-gray-900 font-bold mb-2">{{ .Name }}</div>
|
||||||
|
<div class="pl-4">
|
||||||
|
{{ range .Params.submenu }}
|
||||||
|
<a href="{{ .url }}" class="block text-gray-700 hover:text-primary-600 py-2">{{ .name }}</a>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ else }}
|
||||||
<a href="{{ .URL }}" class="{{ with $headerConfig.menu.mobileLinkClass }}{{ . }}{{ else }}block text-xl text-gray-900 hover:text-primary-600 font-bold transition duration-200 py-2{{ end }}">{{ .Name }}</a>
|
<a href="{{ .URL }}" class="{{ with $headerConfig.menu.mobileLinkClass }}{{ . }}{{ else }}block text-xl text-gray-900 hover:text-primary-600 font-bold transition duration-200 py-2{{ end }}">{{ .Name }}</a>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
{{ if not $headerConfig.hideButtons }}
|
{{ if not $headerConfig.hideButtons }}
|
||||||
<div class="pt-4 space-y-4">
|
<div class="pt-4 space-y-4">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue