feat: Show app logo on WelcomePage

Author: koki-develop

bun.lock

@@ -20,6 +20,7 @@
     "@dnd-kit/helpers": "0.4.0",
     "@dnd-kit/react": "0.4.0",
     "@fontsource-variable/inter": "5.2.8",
+    "@fontsource-variable/space-grotesk": "5.2.10",
     "@tailwindcss/vite": "4.3.0",
     "@tauri-apps/api": "2.11.0",
     "@tauri-apps/plugin-fs": "2.5.1",

package.json

@@ -1,25 +1,23 @@
 import type { ReactNode } from "react";
 
-import { Button, Heading, Text } from "@/components/atoms";
+import logoUrl from "@/assets/logo.png";
+import { Button, Heading } from "@/components/atoms";
 
 export type WelcomeHeroProps = {
   title: string;
-  subtitle: string;
   ctaLabel: string;
   ctaIcon?: ReactNode;
   onCta: () => void;
 };
 
-export function WelcomeHero({ title, subtitle, ctaLabel, ctaIcon, onCta }: WelcomeHeroProps) {
+export function WelcomeHero({ title, ctaLabel, ctaIcon, onCta }: WelcomeHeroProps) {
   return (
     <div className="flex flex-col items-center gap-8">
-      <div className="flex flex-col items-center gap-3">
-        <Heading level={1} variant="hero">
+      <div className="flex flex-col items-center gap-4">
+        <Heading level={1} variant="hero" className="font-display">
           {title}
         </Heading>
-        <Text variant="muted" size="sm">
-          {subtitle}
-        </Text>
+        <img src={logoUrl} alt="" className="size-28 drop-shadow-[0_0_2px_rgba(255,255,255,0.5)]" />
       </div>
       <Button variant="primary" size="lg" onClick={onCta} className="gap-2 rounded-xl">
         {ctaIcon}

src/assets/logo.png

@@ -20,7 +20,6 @@ export function WelcomePage({ onDirectorySelected }: WelcomePageProps) {
     <WelcomeLayout>
       <WelcomeHero
         title="Cork"
-        subtitle="Kanban board for local Markdown files"
         ctaLabel="Select Workspace Directory"
         ctaIcon={<FolderOpen className="size-4" />}
         onCta={handleSelect}

src/components/molecules/WelcomeHero.tsx

@@ -1,8 +1,10 @@
 @import "tailwindcss";
 @import "@fontsource-variable/inter";
+@import "@fontsource-variable/space-grotesk";
 
 @theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Space Grotesk Variable", ui-sans-serif, system-ui, sans-serif;
 
   --color-cork-bg: #020617;
   --color-cork-surface: #0f172a;