change: theme switcher on landing page

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 2024-10-06
 
 - Added: Product Hunt badge on landing page
+- Changed: Theme switcher on landing page
 - Changed: Improve docs UI
 - Changed: Make Product Hunt Badge smaller on footer
 

assets/css/output.css

@@ -682,6 +682,14 @@ body {
   top: 0.5rem;
 }
 
+.bottom-4 {
+  bottom: 1rem;
+}
+
+.right-4 {
+  right: 1rem;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -908,6 +916,11 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-translate-x-1\/4 {
+  --tw-translate-x: -25%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -1030,6 +1043,10 @@ body {
   border-radius: calc(var(--radius) - 2px);
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1118,10 +1135,20 @@ body {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-gray-100 {
+  --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .to-black {
   --tw-gradient-to: #000 var(--tw-gradient-to-position);
 }
 
+.to-white {
+  --tw-gradient-to: #fff var(--tw-gradient-to-position);
+}
+
 .bg-center {
   background-position: center;
 }
@@ -1372,6 +1399,11 @@ body {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -1620,11 +1652,36 @@ body {
   opacity: 0.7;
 }
 
+.dark\:from-gray-900:is(.dark *) {
+  --tw-gradient-from: #111827 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.dark\:to-black:is(.dark *) {
+  --tw-gradient-to: #000 var(--tw-gradient-to-position);
+}
+
 .dark\:text-gray-200:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
 
+.dark\:text-gray-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+.dark\:text-gray-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.dark\:text-white:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .dark\:hover\:bg-gray-700:hover:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));

internals/ui/pages/landing.templ

@@ -7,7 +7,7 @@ import (
 
 templ Landing() {
 	@layouts.BaseLayout() {
-		<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">
+		<header class="relative flex items-center justify-center w-full min-h-screen bg-gradient-to-br from-gray-100 to-white dark:from-gray-900 dark:to-black text-gray-900 dark: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">
@@ -19,16 +19,15 @@ templ Landing() {
 						<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"
+							width="150"
 						/>
 					</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>
-				<p class="text-xl sm:text-2xl lg:text-3xl font-semibold text-gray-400 mb-4 sm:mb-8">Modern UI Components for Go & Templ</p>
-				<p class="max-w-3xl mx-auto text-base sm:text-lg text-gray-300 mb-6 sm:mb-10">
+				<p class="text-xl sm:text-2xl lg:text-3xl font-semibold text-gray-600 dark:text-gray-400 mb-4 sm:mb-8">Modern UI Components for Go & Templ</p>
+				<p class="max-w-3xl mx-auto text-base sm:text-lg text-gray-700 dark: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>
 				@components.Button(components.ButtonProps{
@@ -37,9 +36,12 @@ templ Landing() {
 					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"/>
+			<div class="absolute bottom-0 left-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 left-0 w-full h-full object-contain transform translate-y-1/3 -translate-x-1/4"/>
 			</div>
 		</header>
+		<div class="fixed bottom-4 right-4 z-50">
+			@components.ThemeSwitcher()
+		</div>
 	}
 }