Skip to content

style: update hero and features section #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TobiasGleiter merged 1 commit into from
Aug 16, 2026
Merged

style: update hero and features section #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified internal/assets/dist/gearberg-1024.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified internal/assets/dist/gearberg-1440.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified internal/assets/dist/gearberg-680.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 13 additions & 25 deletions internal/assets/dist/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--container-5xl: 64rem;
Expand Down Expand Up @@ -6514,10 +6515,6 @@
width: calc(var(--spacing) * 6);
height: calc(var(--spacing) * 6);
}
.size-8 {
width: calc(var(--spacing) * 8);
height: calc(var(--spacing) * 8);
}
.status-lg {
@layer daisyui.l1.l2 {
width: calc(0.25rem * 3);
Expand Down Expand Up @@ -6784,6 +6781,9 @@
.w-xs {
width: var(--container-xs);
}
.max-w-2xl {
max-width: var(--container-2xl);
}
.max-w-3xl {
max-width: var(--container-3xl);
}
Expand Down Expand Up @@ -7107,12 +7107,6 @@
.gap-8 {
gap: calc(var(--spacing) * 8);
}
.gap-10 {
gap: calc(var(--spacing) * 10);
}
.gap-12 {
gap: calc(var(--spacing) * 12);
}
.space-y-0\.5 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
Expand Down Expand Up @@ -9177,6 +9171,10 @@
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.outline {
outline-style: var(--tw-outline-style);
outline-width: 1px;
Expand Down Expand Up @@ -10048,6 +10046,11 @@
line-height: var(--tw-leading, var(--text-3xl--line-height));
}
}
.sm\:hidden {
@media (width >= 40rem) {
display: none;
}
}
.sm\:inline {
@media (width >= 40rem) {
display: inline;
Expand Down Expand Up @@ -10307,21 +10310,6 @@
display: none;
}
}
.lg\:flex-row-reverse {
@media (width >= 64rem) {
flex-direction: row-reverse;
}
}
.lg\:justify-start {
@media (width >= 64rem) {
justify-content: flex-start;
}
}
.lg\:text-left {
@media (width >= 64rem) {
text-align: left;
}
}
.is-drawer-close\:tooltip {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
@layer daisyui.l1.l2.l3 {
Expand Down
6 changes: 5 additions & 1 deletion internal/templates/components/icons.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,5 +174,9 @@
{{ end }}

{{ define "docs-icon" }}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open-text-icon lucide-book-open-text"><path d="M12 5v16"/><path d="M16 13h2"/><path d="M16 9h2"/><path d="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"/><path d="M6 13h2"/><path d="M6 9h2"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open-icon lucide-book-open"><path d="M12 5v16"/><path d="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"/></svg>
{{ end }}

{{ define "check-icon" }}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>
{{ end }}
114 changes: 54 additions & 60 deletions internal/templates/pages/landing.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,82 +28,76 @@
<main>
{{/* Hero Section */}}
<section class="hero min-h-[calc(100vh-65px)]" aria-labelledby="hero-heading">
<div class="hero-content flex-col lg:flex-row-reverse gap-12">
<div class="hover-3d">
<figure class="w-full max-w-lg rounded-2xl">
<img
src="/dist/gearberg-1440.webp"
srcset="/dist/gearberg-680.webp 680w, /dist/gearberg-1440.webp 1440w"
sizes="(max-width: 768px) 680px, 1440px"
alt="Gearberg equipment management interface"
class="w-full rounded-xl"
width="1440"
height="822"
fetchpriority="high"
/>
</figure>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="max-w-md text-center lg:text-left">
<h1 id="hero-heading" class="text-3xl sm:text-5xl font-bold">Track your <span class="text-primary">gear.</span> </br> Run your <span class="text-primary">rentals.</span></h1>
<div class="py-6 text-base-content/80">
<span class="badge badge-dash">Open Source</span>
<span class="badge badge-dash">No Lock-in</span>
<span class="badge badge-dash">Easy Installation</span>
</div>
<nav aria-label="Page sections" class="mt-2">
<div class="flex flex-wrap gap-2 justify-center lg:justify-start">
<div class="hero-content flex-col gap-8 py-12 w-full max-w-5xl">
<div class="max-w-2xl text-center">
<h1 id="hero-heading" class="text-3xl sm:text-5xl font-bold leading-tight">
Easy to use and<br class="sm:hidden"> affordable <span class="text-primary">Rentman alternative</span>
</h1>
<p class="mt-6 text-lg text-base-content/70 max-w-lg mx-auto">
Simple equipment tracking and rentals.
No lock-in.
Self-host with a single Docker command.
</p>
<nav aria-label="Page sections" class="mt-8">
<div class="flex flex-wrap gap-3 justify-center">
<a href="#quickstart" class="btn btn-primary">Quickstart</a>
<a href="#pricing" class="btn btn-outline">See Plans</a>
<a href="#pricing" class="btn btn-outline">Pricing</a>
</div>
</nav>
</div>
</div>
<figure class="w-full">
<img
src="/dist/gearberg-1440.webp"
srcset="/dist/gearberg-680.webp 680w, /dist/gearberg-1440.webp 1440w"
sizes="(max-width: 768px) 680px, 1440px"
alt="Gearberg equipment management interface"
class="w-full rounded-xl shadow-xl border border-base-300"
width="1440"
height="755"
fetchpriority="high"
/>
</figure>
</div>
</section>

{{/* Features */}}
<section id="features" class="py-24 bg-base-100" aria-labelledby="features-heading">
{{/* Why use Gearberg? */}}
<section id="why" class="py-24 bg-base-100" aria-labelledby="why-heading">
<div class="container mx-auto px-6 max-w-5xl">
<h2 id="features-heading" class="text-4xl font-bold text-center mb-16">Features</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">

<div class="card bg-base-200 shadow">
<div class="card-body">
<h3 class="card-title text-xl text-primary font-bold">
<span class="size-8">{{ template "equipment-icon" . }}</span>
Equipment
</h3>
<p>Bulk quantities or serialized items, with categories and photos.</p>
<div class="text-center mb-16">
<h2 id="why-heading" class="text-4xl font-bold">Why use Gearberg?</h2>
<p class="mt-4 text-base-content/70 max-w-xl mx-auto">Rentman is overkill for most shops. Gearberg gives you clear, useful tracking without complexity, training or prior experience.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">

<div class="flex items-start gap-4 p-6 rounded-xl bg-base-200">
<span class="text-success">{{ template "check-icon" . }}</span>
<div>
<h3 class="font-semibold text-lg">Equipment</h3>
<p class="text-base-content/70 mt-1">Bulk quantities or serialized items, with categories and photos.</p>
</div>
</div>

<div class="card bg-base-200 shadow">
<div class="card-body">
<h3 class="card-title text-xl text-primary font-bold">
<span class="size-8">{{ template "rentals-icon" . }}</span>
Rentals
</h3>
<p>Check out gear to people, set due dates, track returns.</p>
<div class="flex items-start gap-4 p-6 rounded-xl bg-base-200">
<span class="text-success">{{ template "check-icon" . }}</span>
<div>
<h3 class="font-semibold text-lg">Rentals</h3>
<p class="text-base-content/70 mt-1">Check out gear to people, set due dates, track returns.</p>
</div>
</div>

<div class="card bg-base-200 shadow">
<div class="card-body">
<h3 class="card-title text-xl text-primary font-bold">
<span class="size-8">{{ template "import-export-icon" . }}</span>
Import &amp; Export
</h3>
<p>CSV in, CSV out. Your data is never locked in.</p>
<div class="flex items-start gap-4 p-6 rounded-xl bg-base-200">
<span class="text-success">{{ template "check-icon" . }}</span>
<div>
<h3 class="font-semibold text-lg">Import &amp; Export</h3>
<p class="text-base-content/70 mt-1">CSV in, CSV out. Your data is never locked in.</p>
</div>
</div>

<div class="card bg-base-200 shadow" id="open-source">
<div class="card-body">
<h3 class="card-title text-xl text-primary font-bold">
<span class="size-8">{{ template "open-source-icon" . }}</span>
Open Source
</h3>
<p>AGPL v3. Self-host it, audit it, contribute to it. <a href="https://github.com/bit8bytes/gearberg" class="link link-hover" target="_blank" rel="noopener noreferrer">View on GitHub.</a></p>
<div class="flex items-start gap-4 p-6 rounded-xl bg-base-200" id="open-source">
<span class="text-success">{{ template "check-icon" . }}</span>
<div>
<h3 class="font-semibold text-lg">Open Source</h3>
<p class="text-base-content/70 mt-1">AGPL v3. Self-host it, audit it, contribute to it. <a href="https://github.com/bit8bytes/gearberg" class="link link-hover" target="_blank" rel="noopener noreferrer">View on GitHub.</a></p>
</div>
</div>

Expand Down
8 changes: 5 additions & 3 deletions internal/templates/partials/landing-header.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
{{ define "landing-header" }}
<div class="navbar bg-gray-950 shadow-sm">
<div class="navbar">
<div class="flex-1">
<span class="wordmark text-2xl text-white"><a href="/" class="text-base-100">Gear<span class="text-primary">berg</span></a></span>
<div class="wordmark text-2xl">
<a href="/">Gear<span class="text-primary">berg</span></a>
</div>
</div>
<div class="flex-none text-secondary-content">
<ul class="menu menu-horizontal px-1 gap-2">
<li>
<a href="https://docs.gearberg.org" class="btn btn-secondary btn-sm sm:btn-md" aria-label="Documentation" target="_blank" rel="noopener noreferrer">
<a href="https://docs.gearberg.org" class="btn btn-sm sm:btn-md" aria-label="Documentation" target="_blank" rel="noopener noreferrer">
{{ template "docs-icon" . }}Docs
</a>
</li>
Expand Down