Initial ui

app/components/Hero.tsx

@@ -0,0 +1,24 @@
+interface HeroProps {
+	lastUpdated: string | null;
+}
+
+export default function Hero({ lastUpdated }: HeroProps) {
+	return (
+		<div className="mb-11 animate-fade-up">
+			<p className="text-xs font-medium tracking-widest uppercase text-blue-500 mb-3">
+				dell-xps-nixos-serv
+			</p>
+			<h1
+				className="text-4xl md:text-5xl font-normal leading-tight tracking-tight text-gray-900 mb-2"
+				style={{ fontFamily: "'Playfair Display', serif" }}
+			>
+				Home server
+			</h1>
+			<p className="text-sm text-gray-400 font-light">
+				{lastUpdated
+					? `Last updated ${new Date(lastUpdated).toLocaleTimeString()}`
+					: "Fetching system stats..."}
+			</p>
+		</div>
+	);
+}