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

.husky/pre-commit

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

package.json

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

src/routes/+page.svelte

@@ -146,8 +146,7 @@
 
 <!-- https://pad.lix.systems/v0Bew569R_2IB0abRSy4kA?view=#Pretty-much-final-draft-About-us -->
 
-{#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="grid lg:grid-cols-3 gap-6 justify-center my-8 w-full xl:w-[115%] xl:-ms-[7.5%] opacity-[0.4] hidden">
 	<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>
@@ -166,6 +165,5 @@
 		you should have an easy time compared to traditional *nix distributions.
 	</div>
 </div>
-{/if}
 
 <!-- show nixos tests -->