chore: starter template

apps/app/src/components/Wordmark.tsx

@@ -0,0 +1,39 @@
+import type { FC } from 'react'
+import { Box, Group, Text } from '@pikku/mantine/core'
+import type { I18nString } from '@pikku/react'
+
+// Placeholder brand mark + app name. A gradient tile (brand primary → secondary,
+// both theme-driven so it recolours with the active theme) holding a bold spark
+// glyph — a confident, generic starting point, NOT a flat monochrome square.
+// Reshape the glyph into a real brand mark per project.
+export const Wordmark: FC<{ name: I18nString; size?: number }> = ({ name, size = 30 }) => {
+  return (
+    <Group gap={10} align="center" wrap="nowrap">
+      <Box
+        w={size}
+        h={size}
+        style={{
+          flexShrink: 0,
+          borderRadius: 'var(--mantine-radius-md)',
+          // Gradient falls back to the solid primary fill if the theme defines no
+          // secondary, so it always renders on-brand.
+          backgroundImage:
+            'linear-gradient(135deg, var(--mantine-primary-color-filled), var(--mantine-color-secondary-5, var(--mantine-primary-color-filled)))',
+          color: 'var(--mantine-primary-color-contrast)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          boxShadow: 'var(--mantine-shadow-sm)',
+        }}
+      >
+        <svg width={size * 0.56} height={size * 0.56} viewBox="0 0 24 24" fill="currentColor">
+          {/* Four-point spark — energetic, distinctive, reads at any size. */}
+          <path d="M12 1.5c.9 5.1 4.5 8.7 9.6 9.6v1.8c-5.1.9-8.7 4.5-9.6 9.6h-1.8c-.9-5.1-4.5-8.7-9.6-9.6v-1.8c5.1-.9 8.7-4.5 9.6-9.6Z" />
+        </svg>
+      </Box>
+      <Text fw={700} style={{ fontSize: size * 0.55, letterSpacing: '-0.02em' }}>
+        {name}
+      </Text>
+    </Group>
+  )
+}