Improve home page with separate data and resource pack cards

src/app/components/Header.tsx

@@ -28,7 +28,7 @@ export function Header({ lang, title, version, theme, changeTheme, language, cha
 	return <header>
 		<div class="title">
 			<Link class="home-link" href="/" aria-label={loc('home')}>{Icons.home}</Link>
-			<h2>{title}</h2>
+			<h1>{title}</h1>
 			{gen && <BtnMenu icon="chevron_down" tooltip={loc('switch_generator')}>
 				{config.generators
 					.filter(g => g.category === gen?.category && checkVersion(version, g.minVersion))

src/app/components/ToolCard.tsx

@@ -3,16 +3,25 @@ import { Icons } from './Icons'
 
 type ToolCardProps = {
 	title: string,
-	link: string,
+	desc?: string,
+	link?: string,
 	icon?: keyof typeof Icons,
 	children?: ComponentChildren,
 }
-export function ToolCard({ title, link, icon, children }: ToolCardProps) {
-	return <a class="tool-card" href={link}>
-		{icon && Icons[icon]}
-		<div>
-			<h3>{title}</h3>
-			{children}
+export function ToolCard({ title, desc, link, icon, children }: ToolCardProps) {
+	const content = <>
+		<div class="tool-head">
+			{icon && Icons[icon]}
+			<div>
+				<h3>{title}</h3>
+				<p>{desc}</p>
+			</div>
 		</div>
-	</a>
+		{children && <div class="tool-body">
+			{children}
+		</div>}
+	</>
+	return link
+		? <a class="tool-card" href={link}>{content}</a>
+		: <div class="tool-card">{content}</div>
 }