From 7f246ae2eb2cdea464dcf434d9e6c300a5a74f0e Mon Sep 17 00:00:00 2001
From: "Gustavo L de Mello (Guz)" <contact@guz.one>
Date: Tue, 17 Dec 2024 10:38:23 -0300
Subject: [PATCH] feat: snap scroll position

---
 handlers/pages/home.templ    | 10 ++++++----
 templates/layouts/page.templ |  6 +++++-
 2 files changed, 11 insertions(+), 5 deletions(-)
diff --git a/handlers/pages/home.templ b/handlers/pages/home.templ
index 9e22b8d..a1b0dda 100644
--- a/handlers/pages/home.templ
+++ b/handlers/pages/home.templ
@@ -21,7 +21,9 @@ func (p *Home) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 }
 
 templ (p *Home) page() {
-	@layouts.Page() {
+	@layouts.Page(layouts.PageInfo{
+		BodyClasses: "scroll-smooth snap-normal snap-y snap-mandatory",
+	}) {
 		<header class="fixed w-100% h-screen md:flex justify-center items-center overflow-x-hidden">
 			<h1
 				class={ "absolute z-3 top-0 left-0 text-stroke-1px text-stroke-white text-transparent text-9xl m-0 mt-4 vertical-lr",
@@ -42,10 +44,10 @@ templ (p *Home) page() {
 			</div>
 		</header>
 		<div
-			class="relative w-100% h-screen bg-gradient-to-t from-black to-transparent to-50% pointer-events-none"
+			class="relative w-100% h-screen bg-gradient-to-t from-black to-transparent to-50% pointer-events-none snap-center"
 			aria-hidden="true"
 		></div>
-		<main class="relative bg-black w-full h-screen md:flex justify-center items-center overflow-x-hidden">
+		<main class="relative bg-black w-full h-screen md:flex justify-center items-center overflow-x-hidden snap-center">
 			<div class="relative w-full h-full flex flex-col justify-between md:w-fit md:h-fit">
 				<h2
 					class={ "relative z-4 m-0 pt-4 text-9xl vertical-lr text-stroke-1px text-stroke-white text-transparent",
@@ -140,7 +142,7 @@ templ (p *Home) page() {
 			></span>
 		</main>
 		<footer
-			class={ "relative w-full h-screen bg-heropattern bg-black bg-top overflow-x-hidden",
+			class={ "relative w-full h-screen bg-heropattern bg-black bg-top overflow-x-hidden snap-center",
 					"md:flex justify-center items-center" }
 		>
 			<div class={ "relative z-3 md:flex flex-col items-end" }>
diff --git a/templates/layouts/page.templ b/templates/layouts/page.templ
index ebf82a5..8e192d9 100644
--- a/templates/layouts/page.templ
+++ b/templates/layouts/page.templ
@@ -15,6 +15,7 @@ type PageInfo struct {
 	Keywords    string
 	ThemeColor  string
 	Heading     templ.Component
+	BodyClasses string
 }
 
 func pageInfo(info []PageInfo) PageInfo {
@@ -85,7 +86,10 @@ templ Page(i ...PageInfo) {
 				@pageInfo(i).Heading
 			}
 		</head>
-		<body class="bg-black font-serif w-screen min-h-screen overflow-x-hidden m-0 absolute top-0 left-0">
+		<body
+			class={ "bg-black font-serif w-screen min-h-screen overflow-x-hidden m-0 absolute top-0 left-0", 
+					templ.Classes(pageInfo(i).BodyClasses) }
+		>
 			{ children... }
 		</body>
 	</html>
