About Page Update 2

src/lib/components/tui/TuiCard.svelte

@@ -92,13 +92,30 @@
 				<Icon icon={line.icon} width="16" class="card-icon" />
 			{/if}
 			<span class="card-title">
-				{#each titleSegments as segment}
-					{#if getSegmentStyle(segment)}
-						<span style={getSegmentStyle(segment)}>{segment.text}</span>
-					{:else}
-						{segment.text}
-					{/if}
-				{/each}
+				{#if line.link}
+					<a
+						href={line.link}
+						target="_blank"
+						rel="noopener noreferrer"
+						class="card-title-link"
+					>
+						{#each titleSegments as segment}
+							{#if getSegmentStyle(segment)}
+								<span style={getSegmentStyle(segment)}>{segment.text}</span>
+							{:else}
+								{segment.text}
+							{/if}
+						{/each}
+					</a>
+				{:else}
+					{#each titleSegments as segment}
+						{#if getSegmentStyle(segment)}
+							<span style={getSegmentStyle(segment)}>{segment.text}</span>
+						{:else}
+							{segment.text}
+						{/if}
+					{/each}
+				{/if}
 			</span>
 		</div>
 	{/if}
@@ -209,6 +226,19 @@
 		font-size: 0.85rem;
 	}
 
+	.card-title-link {
+		color: var(--card-accent);
+		text-decoration: underline;
+		text-decoration-style: dotted;
+		text-underline-offset: 2px;
+		transition: all 0.15s ease;
+	}
+
+	.card-title-link:hover {
+		text-decoration-style: solid;
+		filter: brightness(1.2);
+	}
+
 	.card-body {
 		padding: 0.75rem;
 	}

src/lib/components/tui/types.ts

@@ -106,6 +106,7 @@ export interface CardLine extends BaseTerminalLine {
 	cardWidth?: string | number;
 	cardHeight?: string | number;
 	cardFloat?: 'start' | 'center' | 'end';
+	link?: string;
 }
 
 export interface ProgressLine extends BaseTerminalLine {