feat(root page): redesign the hero element, add dividers between sections

Co-authored-by: ckie <git-525ff67@ckie.dev>

.husky/pre-commit

@@ -0,0 +1 @@
+bunx lint-staged

package.json

@@ -9,13 +9,17 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
 		"lint": "prettier --check .",
-		"format": "prettier --write ."
+		"format": "prettier --write .",
+		"prepare": "husky"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/enhanced-img": "^0.3.9",
 		"@sveltejs/kit": "^2.5.27",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"autoprefixer": "^10.4.20",
+		"husky": "^9.1.6",
+		"lint-staged": "^15.2.10",
 		"postcss": "^8.4.47",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.2.6",
@@ -23,12 +27,15 @@
 		"svelte-check": "^4.0.0",
 		"tailwindcss": "^3.4.11",
 		"typescript": "^5.5.0",
-		"vite": "^5.4.4",
+		"vite": "^5.4.4"
-		"@sveltejs/enhanced-img": "^0.3.9"
 	},
 	"type": "module",
 	"dependencies": {
 		"clsx": "^2.1.1",
+		"moderndash": "^3.12.0",
 		"svelte-highlight": "^7.7.0"
+	},
+	"lint-staged": {
+		"{package.json,*.js,src/**.{svelte,ts,js,css}}": "prettier --write --ignore-unknown"
 	}
 }

src/lib/components/FlowerDivider.svelte

@@ -1,15 +1,13 @@
-<script>
+<script lang="ts">
-	import flower from "$lib/assets/flower-gray.svg";
+	import { range } from "moderndash"
 </script>
 
 <div class="flex w-full justify-center gap-x-12">
-	<!--
+	{#snippet flower()}
-		NOTE: enhanced:img seems to break when trying to have more than one element, so we are
+		<enhanced:img src="$lib/assets/flower-gray.svg" width="24" height="24" alt="flower" />
-		using the normal img element instead...
+	{/snippet}
-	-->
+
-	<img src={flower} width="24" height="24" alt="flower" />
+	{#each range(1, 5) as i}
-	<img src={flower} width="24" height="24" alt="flower" />
+		{@render flower()}
-	<img src={flower} width="24" height="24" alt="flower" />
+	{/each}
-	<img src={flower} width="24" height="24" alt="flower" />
-	<img src={flower} width="24" height="24" alt="flower" />
 </div>

src/routes/+page.svelte

@@ -146,7 +146,8 @@
 
 <!-- https://pad.lix.systems/v0Bew569R_2IB0abRSy4kA?view=#Pretty-much-final-draft-About-us -->
 
-<div class="grid lg:grid-cols-3 gap-6 justify-center my-8 w-full xl:w-[115%] xl:-ms-[7.5%] opacity-[0.4] hidden">
+{#if false}
+<div class="grid lg:grid-cols-3 gap-6 justify-center my-8 w-full xl:w-[115%] xl:-ms-[7.5%] opacity-[0.4]">
 	<div class="bg-blue-50 p-4 rounded-lg drop-shadow-lg">
 		<h3 class="text-2xl font-bold text-coral-600">Community Focused</h3>
 		Floral is a non-profit organization ran by volunteer developers.<br>
@@ -165,5 +166,6 @@
 		you should have an easy time compared to traditional *nix distributions.
 	</div>
 </div>
+{/if}
 
 <!-- show nixos tests -->