feat(root page): break out hero links into chips, add accent colors on hover

src/lib/assets/leaf.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 135.46666 135.46667"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   sodipodi:docname="leaf.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="1.4450552"
+     inkscape:cx="177.15586"
+     inkscape:cy="260.54367"
+     inkscape:window-width="1831"
+     inkscape:window-height="1238"
+     inkscape:window-x="30"
+     inkscape:window-y="26"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg1" /><defs
+     id="defs1" /><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"><g
+       inkscape:label="Layer 1"
+       id="layer1-9"
+       transform="translate(0.39145833,-0.50256824)" /><g
+       id="layer4"
+       inkscape:label="stamen_base"
+       transform="translate(0.39145833,-0.50256824)" /><g
+       id="layer3"
+       inkscape:label="stamen"
+       transform="translate(48.408293,-0.36524651)" /></g><g
+     id="g2"
+     transform="translate(0,4.9535631)"><path
+       style="fill:#49be95;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 5.9447564,86.621179 c 0,0 28.4566516,-26.328381 41.6259236,-33.834967 C 63.137118,43.913224 74.262563,38.776995 129.98604,35.60375 120.5338,64.353283 120.9163,85.225333 87.438519,94.896362 37.828146,109.22776 5.9447564,86.621179 5.9447564,86.621179 Z"
+       id="path1"
+       sodipodi:nodetypes="cscsc" /><path
+       style="fill:#27a27b;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 5.9447564,86.62118 C 85.116628,78.856181 85.974262,63.282749 129.98604,35.603751 c 0,0 -40.446902,-2.684616 -74.20599,12.768723 C 33.239912,58.6903 5.9447564,86.62118 5.9447564,86.62118 Z"
+       id="path2"
+       sodipodi:nodetypes="ccsc" /></g></svg>

src/lib/assets/petal.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 135.46666 135.46667"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   sodipodi:docname="petal.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="0.72252765"
+     inkscape:cx="231.82504"
+     inkscape:cy="226.28892"
+     inkscape:window-width="1482"
+     inkscape:window-height="988"
+     inkscape:window-x="30"
+     inkscape:window-y="26"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg1" /><defs
+     id="defs1" /><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"><g
+       inkscape:label="Layer 1"
+       id="layer1-9"
+       transform="translate(0.39145833,-0.50256824)" /><g
+       id="layer4"
+       inkscape:label="stamen_base"
+       transform="translate(0.39145833,-0.50256824)" /><g
+       id="layer3"
+       inkscape:label="stamen"
+       transform="translate(48.408293,-0.36524651)" /></g><g
+     id="g1"
+     transform="matrix(0.83206019,0.33412272,-0.33412272,0.83206019,38.961186,-9.777432)"><path
+       style="display:inline;opacity:1;fill:#ff6665;fill-opacity:1;stroke:none;stroke-width:1.70806px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 19.039792,124.95005 C 97.553068,126.5082 118.40125,97.230897 124.44237,72.62228 125.89647,66.698993 127.46153,60.966004 124.839,53.988905 120.13159,41.465054 110.15502,32.834282 106.92754,30.242053 103.89655,28.03009 99.255779,32.060252 96.459255,30.41665 94.206806,29.092826 93.317901,17.661166 89.384863,15.814783 71.972911,6.0185455 56.038876,10.210319 38.471929,23.876745 13.475765,43.322827 9.3107292,82.426994 19.039792,124.95005 Z"
+       id="path1-30"
+       sodipodi:nodetypes="csscscsc" /><path
+       style="fill:#ff9e9d;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 19.039792,124.95005 c 0,0 109.231808,-27.438225 87.887748,-94.707998 0,0 19.4742,15.213687 19.31236,32.206385 C 120.28436,135.20955 19.039792,124.95005 19.039792,124.95005 Z"
+       id="path1"
+       sodipodi:nodetypes="cccc" /></g></svg>

src/lib/components/FlowerDivider.svelte

@@ -1,5 +1,6 @@
 <script>
-	import flower from "$lib/assets/flower-gray.svg";
+	import flower from "$lib/assets/flower.svg";
+	import flowerGray from "$lib/assets/flower-gray.svg";
 </script>
 
 <div class="flex w-full justify-center gap-x-12">
@@ -8,8 +9,8 @@
 		using the normal img element instead...
 	-->
 	<img src={flower} width="24" height="24" alt="flower" />
+	<img src={flowerGray} 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={flowerGray} 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/lib/components/LinkChip.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import clsx from "clsx";
+
+	let props = $props();
+</script>
+
+<a {...props} class={clsx(props.class, "no-link-style flex gap-x-2 px-2 pr-4 py-1 rounded-full border-2 border-zinc-200 w-fit transform translate-y-0 transition-all hover:translate-y-[-2px] active:translate-y-[2px] active:bg-zinc-100")}>
+	{@render props.children?.()}
+</a>

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import Highlight from "$lib/Highlight.svelte";
+	import LinkChip from "$lib/components/LinkChip.svelte";
 	import FlowerDivider from "$lib/components/FlowerDivider.svelte";
 
 	import nix from "svelte-highlight/languages/nix";
@@ -16,31 +17,30 @@
 			full end-to-end&nbsp;customizability of <b class="text-teal-500">67,589</b> packages.
 		</p>
 		<div class="flex pt-4 gap-x-2">
-			<a
+			<LinkChip
-				href="https://petalpkgs.org"
+				href="https://fleurixos.org"
 				target="_blank"
-				class="no-link-style flex gap-x-2 px-2 pr-4 py-1 rounded-full border-2 border-zinc-100 w-fit transform translate-y-0 transition-all hover:translate-y-[-2px] active:translate-y-[2px] active:bg-zinc-100"
+				class="hover:border-teal-200"
 			>
-				<enhanced:img src="$lib/assets/flower.svg" width="24" height="24" />
+				<enhanced:img src="$lib/assets/leaf.svg" width="24" height="24" />
-				<span>Petalpkgs</span>
-			</a>
-			<a
-				href="https://petalpkgs.org"
-				target="_blank"
-				class="no-link-style flex gap-x-2 px-2 pr-4 py-1 rounded-full border-2 border-zinc-100 w-fit transform translate-y-0 transition-all hover:translate-y-[-2px] active:translate-y-[2px] active:bg-zinc-100"
-			>
-				<enhanced:img src="$lib/assets/flower-gray.svg" width="24" height="24" />
 				<span>FleurixOS</span>
-			</a>
+			</LinkChip>
-			<a
+			<LinkChip
 				href="https://petalpkgs.org"
 				target="_blank"
-				class="no-link-style flex gap-x-2 px-2 pr-4 py-1 rounded-full border-2 border-zinc-100 w-fit transform translate-y-0 transition-all hover:translate-y-[-2px] active:translate-y-[2px] active:bg-zinc-100"
+				class="hover:border-coral-200"
+			>
+				<enhanced:img src="$lib/assets/petal.svg" width="24" height="24" />
+				<span>Petalpkgs</span>
+			</LinkChip>
+			<LinkChip
+				href="https://lix.systems"
+				target="_blank"
+				class="hover:border-[#df92c0]"
 			>
-				<!-- TODO: Swap to enhanced:img when we have a Lix logo to place here. -->
 				<enhanced:img src="$lib/assets/lix.svg" width="12" height="24" />
 				<span>Lix</span>
-			</a>
+			</LinkChip>
 		</div>
 	</div>