chore: some changes

CHANGELOG.md

@@ -2,7 +2,9 @@
 
 ## 2024-10-06
 
+- Added: Product Hunt badge on landing page
 - Changed: Improve docs UI
+- Changed: Make Product Hunt Badge smaller on footer
 
 ## 2024-10-05
 

internals/ui/components/footer.templ

@@ -21,7 +21,7 @@ templ Footer() {
 					<img
 						src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=494295&theme=light"
 						alt="Goilerplate - Build sleek web apps with Go, Templ, and Alpine.js | Product Hunt"
-						width="250"
+						width="200"
 						height="54"
 					/>
 				</a>

internals/ui/pages/landing.templ

@@ -2,6 +2,7 @@ package pages
 
 import (
 	"github.com/axzilla/goilerplate/internals/ui/layouts"
+	"github.com/axzilla/goilerplate/internals/ui/components"
 )
 
 templ Landing() {
@@ -9,6 +10,20 @@ templ Landing() {
 		<header class="relative flex items-center justify-center w-full min-h-screen bg-gradient-to-br from-gray-900 to-black text-white overflow-hidden">
 			<div class="absolute inset-0 bg-[url('/assets/img/grid.svg')] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
 			<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
+				<div class="flex justify-center mb-8">
+					<a
+						href="https://www.producthunt.com/posts/goilerplate-1?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-goilerplate-1"
+						target="_blank"
+						class="inline-block"
+					>
+						<img
+							src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=494295&theme=light"
+							alt="Goilerplate - Build sleek web apps with Go, Templ, and Alpine.js | Product Hunt"
+							width="200"
+							height="54"
+						/>
+					</a>
+				</div>
 				<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight mb-2 sm:mb-4">
 					<span class="block">Goilerplate</span>
 				</h1>
@@ -16,9 +31,11 @@ templ Landing() {
 				<p class="max-w-3xl mx-auto text-base sm:text-lg text-gray-300 mb-6 sm:mb-10">
 					Build sleek, interactive web applications with Go and Templ. Seamlessly integrate Alpine.js for enhanced client-side functionality. Goilerplate: Where server-side simplicity meets client-side dynamism.
 				</p>
-				<a href="/docs/getting-started" class="inline-block bg-white text-black font-bold py-2 px-6 sm:py-3 sm:px-8 rounded-lg hover:bg-gray-200 transition duration-300">
-					Get Started
-				</a>
+				@components.Button(components.ButtonProps{
+					Text: "Get Started",
+					Href: "/docs/getting-started",
+					Size: "lg",
+				}, nil)
 			</div>
 			<div class="absolute bottom-0 right-0 w-24 h-24 sm:w-32 sm:h-32 md:w-40 md:h-40">
 				<img src="/assets/img/gopher.svg" alt="Gopher" class="absolute bottom-0 right-0 w-full h-full object-contain transform translate-y-1/3 translate-x-1/4"/>