Refactor theme colors and styles; remove unused favicon; update translations and layouts

- Deleted unused favicon file.
- Updated Tailwind CSS configuration to redefine primary and secondary colors.
- Adjusted button styles in CSS to use new color definitions.
- Removed English translations and added French translations for various UI elements.
- Created new layouts for features and updated existing layouts to reflect new design.
- Modified header and CTA components to use updated color scheme.
- Cleaned up pricing table shortcode to align with new styles.
- Updated theme metadata to reflect new author and project details.
This commit is contained in:
Boris Waaub
2026-01-28 13:22:33 +01:00
parent ad649599c9
commit d50f7013a9
39 changed files with 1119 additions and 810 deletions
@@ -22,7 +22,7 @@
{{ range .values }}
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary-600 text-white">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary-400 text-white">
{{ .icon }}
</div>
</div>
@@ -27,7 +27,7 @@
<nav class="mt-12 flex justify-between items-center">
{{ if $paginator.HasPrev }}
<a href="{{ $paginator.Prev.URL }}"
class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
</svg>
@@ -40,7 +40,7 @@
<div class="flex space-x-2">
{{ range $paginator.Pagers }}
{{ if eq . $paginator }}
<span class="px-4 py-2 bg-primary-600 text-white rounded-lg">
<span class="px-4 py-2 bg-primary-400 text-white rounded-lg">
{{ .PageNumber }}
</span>
{{ else }}
@@ -54,7 +54,7 @@
{{ if $paginator.HasNext }}
<a href="{{ $paginator.Next.URL }}"
class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
{{ i18n "next" }}
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
@@ -1,20 +0,0 @@
{{ define "main" }}
<div class="pt-2">
<div class="container mx-auto px-4 py-6">
<div class="flex flex-col md:flex-row gap-6 items-start">
<!-- Sidebar -->
<div class="w-full md:w-1/4 lg:w-1/5 pt-1">
{{ partial "docs-sidebar.html" . }}
</div>
<!-- Main Content -->
<main class="w-full md:w-3/4 lg:w-4/5 pt-2">
<article class="prose max-w-none -mt-2 pt-6">
{{ .Content }}
</article>
</main>
</div>
</div>
</div>
{{ end }}
@@ -0,0 +1,79 @@
{{ define "main" }}
<div class="pt-2">
<div class="container mx-auto px-4 py-6">
<div class="flex flex-col md:flex-row gap-6 items-start">
<!-- Sidebar -->
<div class="w-full md:w-1/4 lg:w-1/5 pt-1">
{{ partial "features-sidebar.html" . }}
</div>
<!-- Main Content -->
<main class="w-full md:w-3/4 lg:w-4/5 pt-2">
<article class="feature-page">
<h1 class="text-4xl font-bold text-center mb-5">{{ .Title }}</h1>
{{ with .Params.description }}
<p class="text-center font-light text-gray-500 sm:text-xl">{{ . }}</p>
{{ end }}
<!-- Main Content -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{{ $paginator := .Paginate (.Pages.ByWeight) }}
{{ range $paginator.Pages }}
{{ partial "feature-card.html" . }}
{{ end }}
</div>
{{ $paginator := .Paginate .Pages }}
{{ if gt $paginator.TotalPages 1 }}
<nav class="mt-12 flex justify-between items-center">
{{ if $paginator.HasPrev }}
<a href="{{ $paginator.Prev.URL }}"
class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
</svg>
{{ i18n "previous" }}
</a>
{{ else }}
<div></div>
{{ end }}
<div class="flex space-x-2">
{{ range $paginator.Pagers }}
{{ if eq . $paginator }}
<span class="px-4 py-2 bg-primary-400 text-white rounded-lg">
{{ .PageNumber }}
</span>
{{ else }}
<a href="{{ .URL }}"
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors duration-200">
{{ .PageNumber }}
</a>
{{ end }}
{{ end }}
</div>
{{ if $paginator.HasNext }}
<a href="{{ $paginator.Next.URL }}"
class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
{{ i18n "next" }}
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</a>
{{ else }}
<div></div>
{{ end }}
</nav>
{{ end }}
<!-- Global CTA -->
{{ partial "components/cta.html" . }}
</article>
</main>
</div>
</div>
</div>
{{ end }}
@@ -0,0 +1,93 @@
{{ define "main" }}
<div class="pt-2 feature-page badge-{{ .Params.badgeColor }}">
<style>
.badge {
background-color: color-mix(in srgb, var(--badge-color) 30%, transparent);
color: #222;
}
.gradient-bg {
background-image: linear-gradient(180deg, color-mix(in srgb, var(--badge-color) 15%, white), white);
}
</style>
<div class="absolute inset-x-0 top-0 h-96 gradient-bg opacity-75"></div>
<div class="container mx-auto px-4 py-6">
<div class="flex flex-col md:flex-row gap-6 items-start">
<!-- Sidebar -->
<div class="w-full md:w-1/4 lg:w-1/5 pt-1">
{{ partial "features-sidebar.html" . }}
</div>
<!-- Main Content -->
<main class="w-full md:w-3/4 lg:w-4/5 pt-2">
<article >
<!-- Hero Section -->
<div class="relative isolate overflow-hidden">
<div class="relative pt-16 pb-16 ">
<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">{{ i18n "seeItInAction" }}</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>
</main>
</div>
</div>
</div>
{{ end }}
@@ -4,7 +4,7 @@
{{ $angle := .Site.Params.cta.gradient_angle | default 45 }}
{{ $from := .Site.Params.cta.gradient_from }}
{{ $to := .Site.Params.cta.gradient_to }}
<div class="relative rounded-lg overflow-hidden bg-primary-600 cta-gradient"
<div class="relative rounded-lg overflow-hidden bg-primary-400 cta-gradient"
style="--gradient-angle: {{ $angle }}; --gradient-from: {{ $from }}; --gradient-to: {{ $to }}">
<div class="relative text-center max-w-3xl mx-auto px-6 py-10">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">{{ .Site.Params.cta.title }}</h2>
@@ -0,0 +1,86 @@
<div class="docs-sidebar bg-white shadow-sm rounded-lg p-4 sticky top-20 mt-2">
<h3 class="text-lg font-semibold text-gray-900 mb-3 mt-1">{{ i18n "documentation" }}</h3>
<nav class="docs-nav">
<ul class="space-y-1">
{{/* Get all docs pages */}}
{{ $docsPages := where .Site.Pages "Section" "docs" }}
{{ $docsPages = where $docsPages ".IsHome" false }}
{{/* Build list of all section directories to check against */}}
{{ $sectionDirs := slice }}
{{ range $docsPages }}
{{ if eq .Kind "section" }}
{{ $sectionDirs = $sectionDirs | append .File.Dir }}
{{ end }}
{{ end }}
{{/* Build top-level items: pages directly in docs/ AND first-level sections */}}
{{ $topLevel := slice }}
{{ range $docsPages }}
{{ $dir := .File.Dir }}
{{/* For sections: include if NOT the root "docs/" section */}}
{{ if eq .Kind "section" }}
{{ if ne $dir "docs/" }}
{{/* This is a first-level section like "concepts/", "react/", "backend/" */}}
{{ $topLevel = $topLevel | append . }}
{{ end }}
{{ else if eq .Kind "page" }}
{{/* For pages: only include if Dir is exactly "docs/" (top-level pages) */}}
{{ if eq $dir "docs/" }}
{{ $topLevel = $topLevel | append . }}
{{ end }}
{{ end }}
{{ end }}
{{/* Display top-level items sorted by weight */}}
{{ range sort $topLevel "Weight" }}
{{ if .Title }}
<li>
<a href="{{ .RelPermalink }}"
class="block px-4 py-2 rounded-md transition-colors duration-200
{{ if eq .RelPermalink $.RelPermalink }}
bg-indigo-50 text-indigo-600 font-medium
{{ else }}
text-gray-700 hover:bg-gray-50 hover:text-gray-900
{{ end }}">
{{ .Title }}
</a>
{{/* If this is a section, show its children */}}
{{ if eq .Kind "section" }}
{{ $sectionDir := .File.Dir }}
{{ $children := slice }}
{{/* Find child pages in this section (same directory, but .Kind is "page" not "section") */}}
{{ range $docsPages }}
{{ if and (eq .Kind "page") (eq .File.Dir $sectionDir) }}
{{ $children = $children | append . }}
{{ end }}
{{ end }}
{{/* Display children if any exist */}}
{{ if $children }}
<ul class="ml-4 mt-1 space-y-1">
{{ range sort $children "Weight" }}
<li>
<a href="{{ .RelPermalink }}"
class="block px-3 py-1.5 text-sm rounded-md transition-colors duration-200
{{ if eq .RelPermalink $.RelPermalink }}
bg-indigo-50 text-indigo-600 font-medium
{{ else }}
text-gray-600 hover:bg-gray-50 hover:text-gray-900
{{ end }}">
{{ .Title }}
</a>
</li>
{{ end }}
</ul>
{{ end }}
{{ end }}
</li>
{{ end }}
{{ end }}
</ul>
</nav>
</div>
@@ -34,7 +34,7 @@
<button
type="submit"
class="w-full px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200"
class="w-full px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200"
>
{{ if .buttonText }}{{ .buttonText }}{{ else }}{{ if eq $lang "zh-cn" }}订阅{{ else }}Subscribe{{ end }}{{ end }}
</button>
@@ -0,0 +1,62 @@
<article class="bg-transparent rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 badge-{{ .Params.badgeColor }} flex flex-col h-full">
<!-- Badge couleur -->
{{ with .Params.badge }}
<style>
.badge {
background-color: color-mix(in srgb, var(--badge-color) 30%, transparent);
color: #222;
}
.badge-icon {
color: var(--badge-color);
}
</style>
<div class="px-6 pt-6">
<div class="badge inline-block px-4 py-2 rounded-full font-medium">{{ . }}</div>
</div>
{{ end }}
{{ with .Params.featured_image }}
<a href="{{ $.RelPermalink }}" class="block aspect-w-16 aspect-h-9 overflow-hidden">
<img
src="{{ . }}"
alt="{{ $.Title }}"
class="object-cover w-full h-full transform hover:scale-105 transition-transform duration-300"
loading="lazy"
>
</a>
{{ end }}
<div class="p-6 pt-2 flex flex-col h-full">
<!-- Title -->
<h2 class="text-2xl font-bold mb-3 hover:text-primary-600 transition-colors duration-200">
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</h2>
<!-- Description -->
<p class="text-gray-600 mb-4 line-clamp-2">
{{ with .Description }}
{{ . }}
{{ else }}
{{ .Summary | truncate 160 }}
{{ end }}
</p>
<!-- Read More link and Reading Time -->
<div class="flex justify-between items-center mt-auto">
<!-- Reading Time -->
<span class="text-sm text-gray-500 flex items-center">
</span>
<a href="{{ .RelPermalink }}"
class="inline-flex items-center text-primary-600 hover:text-primary-700 font-medium">
{{ i18n "discoverFeature" }}
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</a>
</div>
</div>
</article>
@@ -1,14 +1,14 @@
<div class="docs-sidebar bg-white shadow-sm rounded-lg p-4 sticky top-20 mt-2">
<h3 class="text-lg font-semibold text-gray-900 mb-3 mt-1">{{ i18n "documentation" }}</h3>
<div class="docs-sidebar bg-transparent shadow-sm rounded-lg p-4 sticky top-20 mt-2">
<h3 class="text-lg font-semibold mb-3 mt-1">{{ i18n "features" }}</h3>
<nav class="docs-nav">
<ul class="space-y-1">
{{ range (where .Site.Pages "Section" "docs").ByWeight }}
{{ range (where .Site.Pages "Section" .Section).ByWeight }}
{{ if and .Title (not .IsHome) (ne .Kind "section") }}
<li>
<a href="{{ .RelPermalink }}"
class="block px-4 py-2 rounded-md transition-colors duration-200
{{ if eq .RelPermalink $.RelPermalink }}
bg-indigo-50 text-indigo-600 font-medium
bg-primary-100 text-primary-500 font-medium
{{ else }}
text-gray-700 hover:bg-gray-50 hover:text-gray-900
{{ end }}">
@@ -55,7 +55,7 @@
{{ end }}
{{ with $headerConfig.buttons.getStarted }}
<a href="{{ .url | default "#" }}" class="{{ with .class }}{{ . }}{{ else }}inline-flex items-center justify-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out bg-primary-600 text-white hover:bg-primary-700 hover:scale-105{{ end }}">
<a href="{{ .url | default "#" }}" class="{{ with .class }}{{ . }}{{ else }}inline-flex items-center justify-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out bg-primary-400 text-white hover:bg-primary-700 hover:scale-105{{ end }}">
{{ .text | default "Get Started" }}
</a>
{{ end }}
@@ -117,7 +117,7 @@
{{ end }}
{{ with $headerConfig.buttons.getStarted }}
<a href="{{ .url | default "#" }}" class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out bg-primary-600 text-white hover:bg-primary-700 hover:scale-105{{ end }}">
<a href="{{ .url | default "#" }}" class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out bg-primary-400 text-white hover:bg-primary-700 hover:scale-105{{ end }}">
{{ .text | default "Get Started" }}
</a>
{{ end }}
@@ -12,7 +12,7 @@
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
{{ range $index, $plan := $data.plans }}
<div class="relative flex flex-col p-6 {{ if $plan.featured }}bg-primary-600 text-white{{ else }}bg-white{{ end }} rounded-2xl shadow-xl transform hover:-translate-y-1 transition duration-300">
<div class="relative flex flex-col p-6 {{ if $plan.featured }}bg-primary-400 text-white{{ else }}bg-white{{ end }} rounded-2xl shadow-xl transform hover:-translate-y-1 transition duration-300">
{{ if $plan.featured }}
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
<span class="bg-yellow-400 text-gray-900 text-xs font-semibold px-4 py-1 rounded-full">{{ i18n "mostPopular" }}</span>
@@ -50,7 +50,7 @@
{{ with .additional_description }}
<div class="text-sm text-gray-500">{{ . }}</div>
{{ end }}
<a href="{{ $plan.button.url }}" class="mt-4 text-center w-full px-5 py-3 rounded-lg {{ if $plan.featured }}bg-white text-primary-600 hover:bg-gray-100{{ else }}bg-primary-600 text-white hover:bg-primary-700{{ end }} font-medium transition duration-300">
<a href="{{ $plan.button.url }}" class="mt-4 text-center w-full px-5 py-3 rounded-lg {{ if $plan.featured }}bg-white text-primary-600 hover:bg-gray-100{{ else }}bg-primary-400 text-white hover:bg-primary-700{{ end }} font-medium transition duration-300">
{{ $plan.button.text }}
</a>
</div>
@@ -27,7 +27,7 @@
<nav class="mt-12 flex justify-between items-center">
{{ if $paginator.HasPrev }}
<a href="{{ $paginator.Prev.URL }}"
class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
</svg>
@@ -40,7 +40,7 @@
<div class="flex space-x-2">
{{ range $paginator.Pagers }}
{{ if eq . $paginator }}
<span class="px-4 py-2 bg-primary-600 text-white rounded-lg">
<span class="px-4 py-2 bg-primary-400 text-white rounded-lg">
{{ .PageNumber }}
</span>
{{ else }}
@@ -54,7 +54,7 @@
{{ if $paginator.HasNext }}
<a href="{{ $paginator.Next.URL }}"
class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
Next
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>