refactor: enhance component structure and styling for better usability

- Updated the 'Row' component to simplify class usage.
- Added an optional 'id' prop to the 'Section' component for improved accessibility.
- Changed the 'Logo' component to use a 'div' wrapper and updated link structure for better navigation.
- Incorporated an 'id' for the version section in the about page for improved linking.

Author: githyperplexed

src/lib/components/about/row.svelte

@@ -19,7 +19,7 @@
     {/if}
   </div>
   <div class="flex items-center justify-start px-3 py-2 bg-neutral-950/30 border-t border-neutral-800">
-    <span class="text-neutral-400 font-mono text-xs">
+    <span class="text-neutral-400 text-xs">
       {#if value}
         {value}
       {/if}

src/lib/components/about/section.svelte

@@ -7,13 +7,14 @@
     title: string;
     description?: string;
     children?: Snippet;
+    id?: string;
     class?: string;
   };
 
-  let { title, description, children, class: className }: Props = $props();
+  let { title, description, children, id, class: className }: Props = $props();
 </script>
 
-<div class="flex flex-col gap-4">
+<div class="flex flex-col gap-4" {id}>
   <div class="flex flex-col gap-4">
     <h3 class="text-neutral-400 text-xs uppercase tracking-wider">
       {title}

src/lib/components/ui/logo.svelte

@@ -21,14 +21,16 @@
   };
 </script>
 
-<a href="/" class={cn(
+<div class={cn(
   "font-medium text-neutral-100 flex items-center gap-2",
   sizeClasses[size],
   className
 )}>
-  <span>{"{"} 🍯 Data Viewer {"}"}</span>
+  <a href="/">
+    <span>{"{"} 🍯 Data Viewer {"}"}</span>
+  </a>
   {#if version}
-    <span class="text-yellow-400/50 text-xs">v{version}</span>
+    <a href="/about#version" class="text-yellow-400/70 hover:text-yellow-400 text-xs">v{version}</a>
   {/if}
-</a>
+</div>
 

src/routes/(content)/about/+page.svelte

@@ -84,6 +84,7 @@
 
 		<Section
 			title="VERSION INFO"
+			id="version"
 			class="grid grid-cols-1 gap-4 text-xs w-full"
 		>
 			<Row