create-frootkit 1.2.3 → 1.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/templates/auth/src/app/dashboard/layout.tsx +2 -2
- package/templates/auth/src/app/dashboard/page.tsx +12 -12
- package/templates/auth/src/app/layout.tsx +7 -1
- package/templates/auth/src/app/page.tsx +8 -7
- package/templates/auth/src/components/AuthForm.tsx +12 -9
- package/templates/auth/src/components/DashboardNav.tsx +32 -23
- package/templates/auth/src/components/MetricCard.tsx +9 -7
- package/templates/auth/src/components/Navbar.tsx +5 -4
- package/templates/auth/src/styles.css +10 -0
- package/templates/blog/src/app/blog/[slug]/page.tsx +3 -3
- package/templates/blog/src/app/layout.tsx +7 -1
- package/templates/blog/src/components/Navbar.tsx +1 -1
- package/templates/blog/src/components/PostCard.tsx +5 -5
- package/templates/blog/src/styles.css +10 -0
- package/templates/ecommerce/src/app/layout.tsx +7 -1
- package/templates/ecommerce/src/app/products/[id]/page.tsx +4 -4
- package/templates/ecommerce/src/components/CartDrawer.tsx +1 -1
- package/templates/ecommerce/src/components/Navbar.tsx +2 -2
- package/templates/ecommerce/src/styles.css +10 -0
- package/templates/empty/src/app/layout.tsx +6 -0
- package/templates/empty/src/styles.css +10 -0
- package/templates/starter/src/app/layout.tsx +7 -1
- package/templates/starter/src/app/page.tsx +9 -9
- package/templates/starter/src/components/Header.tsx +1 -1
- package/templates/starter/src/styles.css +10 -0
package/package.json
CHANGED
|
@@ -8,9 +8,9 @@ export default function DashboardLayout({ children }: { children: ComponentChild
|
|
|
8
8
|
<div class="flex-1 flex flex-col min-w-0">
|
|
9
9
|
<header class="h-16 border-b border-[#1a2333] px-8 flex items-center justify-between bg-[#06090f]">
|
|
10
10
|
<div class="flex items-center gap-3">
|
|
11
|
-
<h1 class="text-sm font-
|
|
11
|
+
<h1 class="text-sm font-semibold text-white">Cluster: US-East Production</h1>
|
|
12
12
|
<span class="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-400 text-[10px] font-mono border border-emerald-500/20 font-semibold">
|
|
13
|
-
Live
|
|
13
|
+
Live • 99.99% Uptime
|
|
14
14
|
</span>
|
|
15
15
|
</div>
|
|
16
16
|
|
|
@@ -22,8 +22,8 @@ export default function DashboardOverviewPage() {
|
|
|
22
22
|
return (
|
|
23
23
|
<div class="space-y-8">
|
|
24
24
|
<div>
|
|
25
|
-
<h2 class="text-2xl font-bold text-white mb-1">Metrics & Telemetry</h2>
|
|
26
|
-
<p class="text-
|
|
25
|
+
<h2 class="text-2xl font-bold text-white mb-1.5 tracking-tight">Metrics & Telemetry</h2>
|
|
26
|
+
<p class="text-sm text-slate-400">Real-time throughput and workspace subscriber analytics.</p>
|
|
27
27
|
</div>
|
|
28
28
|
|
|
29
29
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
@@ -38,29 +38,29 @@ export default function DashboardOverviewPage() {
|
|
|
38
38
|
))}
|
|
39
39
|
</div>
|
|
40
40
|
|
|
41
|
-
<div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-6">
|
|
42
|
-
<h3 class="text-
|
|
41
|
+
<div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-6 shadow-sm">
|
|
42
|
+
<h3 class="text-base font-semibold text-white mb-4">Recent Workspace Activity</h3>
|
|
43
43
|
<div class="overflow-x-auto">
|
|
44
|
-
<table class="w-full text-left text-
|
|
44
|
+
<table class="w-full text-left text-sm">
|
|
45
45
|
<thead>
|
|
46
|
-
<tr class="border-b border-[#1a2333] text-slate-400">
|
|
46
|
+
<tr class="border-b border-[#1a2333] text-slate-400 text-xs uppercase font-mono tracking-wider">
|
|
47
47
|
<th class="pb-3 font-semibold">User</th>
|
|
48
48
|
<th class="pb-3 font-semibold">Email</th>
|
|
49
49
|
<th class="pb-3 font-semibold">Role</th>
|
|
50
|
-
<th class="pb-3 font-semibold">Timestamp</th>
|
|
50
|
+
<th class="pb-3 font-semibold text-right">Timestamp</th>
|
|
51
51
|
</tr>
|
|
52
52
|
</thead>
|
|
53
53
|
<tbody class="divide-y divide-[#1a2333]/70">
|
|
54
54
|
{recentUsers.map((u) => (
|
|
55
55
|
<tr key={u.email} class="hover:bg-[#0f1624]/40 transition-colors">
|
|
56
|
-
<td class="py-3 font-medium text-white">{u.name}</td>
|
|
57
|
-
<td class="py-3 text-slate-400">{u.email}</td>
|
|
58
|
-
<td class="py-3">
|
|
59
|
-
<span class="px-2 py-0.5 rounded bg-[#0f1624] text-slate-300 border border-[#1a2333] text-
|
|
56
|
+
<td class="py-3.5 font-medium text-white">{u.name}</td>
|
|
57
|
+
<td class="py-3.5 text-slate-400 font-mono text-xs">{u.email}</td>
|
|
58
|
+
<td class="py-3.5">
|
|
59
|
+
<span class="px-2 py-0.5 rounded-md bg-[#0f1624] text-slate-300 border border-[#1a2333] text-xs font-mono">
|
|
60
60
|
{u.role}
|
|
61
61
|
</span>
|
|
62
62
|
</td>
|
|
63
|
-
<td class="py-3 text-slate-500">{u.date}</td>
|
|
63
|
+
<td class="py-3.5 text-slate-500 text-xs text-right font-mono">{u.date}</td>
|
|
64
64
|
</tr>
|
|
65
65
|
))}
|
|
66
66
|
</tbody>
|
|
@@ -21,9 +21,15 @@ export default function RootLayout({ children, metadata }: RootLayoutProps) {
|
|
|
21
21
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
22
22
|
<title>{title}</title>
|
|
23
23
|
<meta name="description" content={description} />
|
|
24
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
25
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
|
26
|
+
<link
|
|
27
|
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
|
|
28
|
+
rel="stylesheet"
|
|
29
|
+
/>
|
|
24
30
|
<link rel="stylesheet" href="/styles.css" />
|
|
25
31
|
</head>
|
|
26
|
-
<body class="bg-[#030712] text-slate-100 min-h-screen antialiased selection:bg-emerald-500/20 selection:text-emerald-300">
|
|
32
|
+
<body class="bg-[#030712] text-slate-100 min-h-screen antialiased selection:bg-emerald-500/20 selection:text-emerald-300 font-sans">
|
|
27
33
|
{children}
|
|
28
34
|
</body>
|
|
29
35
|
</html>
|
|
@@ -15,7 +15,7 @@ export default function SaaSMarketingPage() {
|
|
|
15
15
|
{/* Left Column (7 cols) */}
|
|
16
16
|
<div class="lg:col-span-7">
|
|
17
17
|
<div class="text-xs font-mono font-medium text-emerald-400 mb-3 uppercase tracking-wide">
|
|
18
|
-
Security Architecture
|
|
18
|
+
Security Architecture • Pure Web Crypto
|
|
19
19
|
</div>
|
|
20
20
|
|
|
21
21
|
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
|
|
@@ -29,9 +29,10 @@ export default function SaaSMarketingPage() {
|
|
|
29
29
|
<div class="flex flex-wrap items-center gap-4 mb-8">
|
|
30
30
|
<a
|
|
31
31
|
href="/signup"
|
|
32
|
-
class="px-5 py-2.5 rounded-lg bg-emerald-500 text-slate-950 font-semibold hover:bg-emerald-400 transition-colors text-sm"
|
|
32
|
+
class="px-5 py-2.5 rounded-lg bg-emerald-500 text-slate-950 font-semibold hover:bg-emerald-400 transition-colors text-sm flex items-center gap-1.5"
|
|
33
33
|
>
|
|
34
|
-
Create Account
|
|
34
|
+
<span>Create Account</span>
|
|
35
|
+
<span>→</span>
|
|
35
36
|
</a>
|
|
36
37
|
<a
|
|
37
38
|
href="/dashboard"
|
|
@@ -42,7 +43,7 @@ export default function SaaSMarketingPage() {
|
|
|
42
43
|
</div>
|
|
43
44
|
|
|
44
45
|
<div class="text-xs font-mono text-slate-400 flex items-center gap-2">
|
|
45
|
-
<span class="text-emerald-400 font-bold"
|
|
46
|
+
<span class="text-emerald-400 font-bold">✓</span>
|
|
46
47
|
<span>Demo Account ready: admin@frootkit.dev / password123</span>
|
|
47
48
|
</div>
|
|
48
49
|
</div>
|
|
@@ -52,7 +53,7 @@ export default function SaaSMarketingPage() {
|
|
|
52
53
|
<div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-6 shadow-xl space-y-4">
|
|
53
54
|
<div class="flex items-center justify-between pb-3 border-b border-[#1a2333]">
|
|
54
55
|
<span class="text-xs font-mono text-slate-400">Security Telemetry</span>
|
|
55
|
-
<span class="text-[10px] font-mono text-emerald-400 px-2 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20">
|
|
56
|
+
<span class="text-[10px] font-mono text-emerald-400 px-2 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20 font-semibold">
|
|
56
57
|
PBKDF2-SHA256
|
|
57
58
|
</span>
|
|
58
59
|
</div>
|
|
@@ -85,9 +86,9 @@ export default function SaaSMarketingPage() {
|
|
|
85
86
|
</div>
|
|
86
87
|
</main>
|
|
87
88
|
|
|
88
|
-
<footer class="border-t border-[#1a2333] bg-[#06090f] py-8 text-xs text-slate-400
|
|
89
|
+
<footer class="border-t border-[#1a2333] bg-[#06090f] py-8 text-xs text-slate-400">
|
|
89
90
|
<div class="max-w-6xl mx-auto px-6 flex justify-between">
|
|
90
|
-
<div>FrootAuth
|
|
91
|
+
<div>FrootAuth © {new Date().getFullYear()} OrbitNorth LLC</div>
|
|
91
92
|
<div class="flex gap-4">
|
|
92
93
|
<a href="/login" class="hover:text-white transition-colors">Sign In</a>
|
|
93
94
|
<a href="/signup" class="hover:text-white transition-colors">Sign Up</a>
|
|
@@ -12,7 +12,7 @@ export function AuthForm({ mode }: AuthFormProps) {
|
|
|
12
12
|
{isLogin ? 'Sign in to workspace' : 'Create workspace account'}
|
|
13
13
|
</h1>
|
|
14
14
|
<p class="text-slate-400 text-xs">
|
|
15
|
-
{isLogin ?
|
|
15
|
+
{isLogin ? 'Need an account? ' : 'Already registered? '}
|
|
16
16
|
<a href={isLogin ? '/signup' : '/login'} class="text-emerald-400 font-semibold hover:underline">
|
|
17
17
|
{isLogin ? 'Sign up' : 'Sign in'}
|
|
18
18
|
</a>
|
|
@@ -20,16 +20,18 @@ export function AuthForm({ mode }: AuthFormProps) {
|
|
|
20
20
|
</div>
|
|
21
21
|
|
|
22
22
|
{isLogin && (
|
|
23
|
-
<div class="mb-6 p-3 rounded-lg bg-[#06090f] border border-[#1a2333] text-xs text-slate-300
|
|
24
|
-
<span class="text-emerald-400 font-bold block mb-
|
|
25
|
-
<
|
|
23
|
+
<div class="mb-6 p-3.5 rounded-lg bg-[#06090f] border border-[#1a2333] text-xs text-slate-300">
|
|
24
|
+
<span class="text-emerald-400 font-bold block mb-1">Demo Credentials:</span>
|
|
25
|
+
<div class="font-mono text-slate-300 text-[11px]">
|
|
26
|
+
admin@frootkit.dev <span class="text-slate-500 mx-1">•</span> password123
|
|
27
|
+
</div>
|
|
26
28
|
</div>
|
|
27
29
|
)}
|
|
28
30
|
|
|
29
31
|
<form action={`/api/auth?action=${mode}`} method="POST" class="space-y-4">
|
|
30
32
|
{!isLogin && (
|
|
31
33
|
<div>
|
|
32
|
-
<label class="block text-xs font-
|
|
34
|
+
<label class="block text-xs font-medium text-slate-300 mb-1.5" for="name">
|
|
33
35
|
Full Name
|
|
34
36
|
</label>
|
|
35
37
|
<input
|
|
@@ -44,7 +46,7 @@ export function AuthForm({ mode }: AuthFormProps) {
|
|
|
44
46
|
)}
|
|
45
47
|
|
|
46
48
|
<div>
|
|
47
|
-
<label class="block text-xs font-
|
|
49
|
+
<label class="block text-xs font-medium text-slate-300 mb-1.5" for="email">
|
|
48
50
|
Email Address
|
|
49
51
|
</label>
|
|
50
52
|
<input
|
|
@@ -59,7 +61,7 @@ export function AuthForm({ mode }: AuthFormProps) {
|
|
|
59
61
|
</div>
|
|
60
62
|
|
|
61
63
|
<div>
|
|
62
|
-
<label class="block text-xs font-
|
|
64
|
+
<label class="block text-xs font-medium text-slate-300 mb-1.5" for="password">
|
|
63
65
|
Password
|
|
64
66
|
</label>
|
|
65
67
|
<input
|
|
@@ -75,9 +77,10 @@ export function AuthForm({ mode }: AuthFormProps) {
|
|
|
75
77
|
|
|
76
78
|
<button
|
|
77
79
|
type="submit"
|
|
78
|
-
class="w-full py-2.5 rounded-lg bg-emerald-500 text-slate-950 font-semibold text-sm hover:bg-emerald-400 transition-colors mt-2"
|
|
80
|
+
class="w-full py-2.5 rounded-lg bg-emerald-500 text-slate-950 font-semibold text-sm hover:bg-emerald-400 transition-colors mt-2 flex items-center justify-center gap-2"
|
|
79
81
|
>
|
|
80
|
-
{isLogin ? 'Sign In
|
|
82
|
+
<span>{isLogin ? 'Sign In' : 'Create Account'}</span>
|
|
83
|
+
<span>→</span>
|
|
81
84
|
</button>
|
|
82
85
|
</form>
|
|
83
86
|
</div>
|
|
@@ -1,22 +1,24 @@
|
|
|
1
1
|
export function DashboardNav() {
|
|
2
2
|
return (
|
|
3
|
-
<aside class="w-64 border-r border-[#1a2333] bg-[#0a0f18] p-
|
|
3
|
+
<aside class="w-64 border-r border-[#1a2333] bg-[#0a0f18] p-5 flex flex-col justify-between shrink-0 min-h-screen">
|
|
4
4
|
<div>
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
{/* Brand Header */}
|
|
6
|
+
<div class="flex items-center gap-3 font-bold text-white text-base mb-6 px-1">
|
|
7
|
+
<div class="w-8 h-8 rounded-lg bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center text-emerald-400 shrink-0">
|
|
8
|
+
<svg width="18" height="18" class="w-4.5 h-4.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
8
9
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
9
10
|
</svg>
|
|
10
11
|
</div>
|
|
11
|
-
<span>Workspace</span>
|
|
12
|
+
<span class="tracking-tight">Workspace</span>
|
|
12
13
|
</div>
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
{/* Navigation Links */}
|
|
16
|
+
<nav class="space-y-1 text-sm font-medium">
|
|
15
17
|
<a
|
|
16
18
|
href="/dashboard"
|
|
17
|
-
class="flex items-center gap-3 px-3 py-2 rounded-lg bg-
|
|
19
|
+
class="flex items-center gap-3 px-3 py-2 rounded-lg bg-emerald-500/10 text-emerald-400 border border-emerald-500/25 transition-colors"
|
|
18
20
|
>
|
|
19
|
-
<svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
21
|
+
<svg width="18" height="18" class="w-4.5 h-4.5 shrink-0 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
20
22
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
|
21
23
|
</svg>
|
|
22
24
|
<span>Overview</span>
|
|
@@ -24,9 +26,9 @@ export function DashboardNav() {
|
|
|
24
26
|
|
|
25
27
|
<a
|
|
26
28
|
href="/dashboard#analytics"
|
|
27
|
-
class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-[
|
|
29
|
+
class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/[0.04] transition-colors"
|
|
28
30
|
>
|
|
29
|
-
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
31
|
+
<svg width="18" height="18" class="w-4.5 h-4.5 shrink-0 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
30
32
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
|
31
33
|
</svg>
|
|
32
34
|
<span>Telemetry</span>
|
|
@@ -34,9 +36,9 @@ export function DashboardNav() {
|
|
|
34
36
|
|
|
35
37
|
<a
|
|
36
38
|
href="/dashboard#team"
|
|
37
|
-
class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-[
|
|
39
|
+
class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/[0.04] transition-colors"
|
|
38
40
|
>
|
|
39
|
-
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
41
|
+
<svg width="18" height="18" class="w-4.5 h-4.5 shrink-0 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
40
42
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
41
43
|
</svg>
|
|
42
44
|
<span>Members</span>
|
|
@@ -44,9 +46,9 @@ export function DashboardNav() {
|
|
|
44
46
|
|
|
45
47
|
<a
|
|
46
48
|
href="/api/auth"
|
|
47
|
-
class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-[
|
|
49
|
+
class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/[0.04] transition-colors"
|
|
48
50
|
>
|
|
49
|
-
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
51
|
+
<svg width="18" height="18" class="w-4.5 h-4.5 shrink-0 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
50
52
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
|
51
53
|
</svg>
|
|
52
54
|
<span>Session API</span>
|
|
@@ -54,19 +56,26 @@ export function DashboardNav() {
|
|
|
54
56
|
</nav>
|
|
55
57
|
</div>
|
|
56
58
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
59
|
+
{/* User profile & Sign out */}
|
|
60
|
+
<div class="pt-4 border-t border-[#1a2333] flex items-center justify-between">
|
|
61
|
+
<div class="flex items-center gap-2.5 min-w-0">
|
|
62
|
+
<div class="w-8 h-8 rounded-full bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center font-bold text-xs text-emerald-400 font-mono shrink-0">
|
|
60
63
|
AD
|
|
61
64
|
</div>
|
|
62
|
-
<div class="text-xs">
|
|
63
|
-
<div class="font-
|
|
64
|
-
<div class="text-slate-
|
|
65
|
+
<div class="text-xs truncate">
|
|
66
|
+
<div class="font-semibold text-white truncate">admin@frootkit.dev</div>
|
|
67
|
+
<div class="text-slate-400 text-[11px]">Administrator</div>
|
|
65
68
|
</div>
|
|
66
69
|
</div>
|
|
67
|
-
<form action="/api/auth?action=logout" method="POST">
|
|
68
|
-
<button
|
|
69
|
-
|
|
70
|
+
<form action="/api/auth?action=logout" method="POST" class="shrink-0 ml-2">
|
|
71
|
+
<button
|
|
72
|
+
type="submit"
|
|
73
|
+
class="p-1.5 rounded-md text-slate-400 hover:text-rose-400 hover:bg-rose-500/10 transition-colors"
|
|
74
|
+
title="Sign out"
|
|
75
|
+
>
|
|
76
|
+
<svg width="16" height="16" class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
77
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
|
78
|
+
</svg>
|
|
70
79
|
</button>
|
|
71
80
|
</form>
|
|
72
81
|
</div>
|
|
@@ -7,15 +7,17 @@ export interface MetricCardProps {
|
|
|
7
7
|
|
|
8
8
|
export function MetricCard({ label, value, change, isPositive }: MetricCardProps) {
|
|
9
9
|
return (
|
|
10
|
-
<div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-5">
|
|
11
|
-
<div class="text-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
<div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-5 flex flex-col justify-between">
|
|
11
|
+
<div class="text-[11px] font-mono uppercase tracking-wider text-slate-400 mb-3 font-semibold">
|
|
12
|
+
{label}
|
|
13
|
+
</div>
|
|
14
|
+
<div class="flex items-baseline justify-between gap-3">
|
|
15
|
+
<div class="text-2xl sm:text-3xl font-bold text-white font-mono tracking-tight">{value}</div>
|
|
14
16
|
<span
|
|
15
|
-
class={`text-xs font-mono font-semibold px-2 py-0.5 rounded ${
|
|
17
|
+
class={`text-xs font-mono font-semibold px-2 py-0.5 rounded-md border shrink-0 ${
|
|
16
18
|
isPositive
|
|
17
|
-
? 'bg-emerald-500/10 text-emerald-400 border
|
|
18
|
-
: 'bg-rose-500/10 text-rose-400 border
|
|
19
|
+
? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20'
|
|
20
|
+
: 'bg-rose-500/10 text-rose-400 border-rose-500/20'
|
|
19
21
|
}`}
|
|
20
22
|
>
|
|
21
23
|
{change}
|
|
@@ -3,8 +3,8 @@ export function Navbar() {
|
|
|
3
3
|
<header class="border-b border-[#1a2333] bg-[#06090f]/95 sticky top-0 z-50">
|
|
4
4
|
<div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
|
|
5
5
|
<a href="/" class="flex items-center gap-2.5 font-bold text-white text-base tracking-tight hover:text-emerald-400 transition-colors">
|
|
6
|
-
<div class="w-8 h-8 rounded-lg bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
|
|
7
|
-
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
6
|
+
<div class="w-8 h-8 rounded-lg bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center text-emerald-400 shrink-0">
|
|
7
|
+
<svg width="18" height="18" class="w-4.5 h-4.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
8
8
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
9
9
|
</svg>
|
|
10
10
|
</div>
|
|
@@ -20,9 +20,10 @@ export function Navbar() {
|
|
|
20
20
|
</a>
|
|
21
21
|
<a
|
|
22
22
|
href="/signup"
|
|
23
|
-
class="px-4 py-2 rounded-lg bg-emerald-500 text-slate-950 font-semibold hover:bg-emerald-400 transition-colors text-xs"
|
|
23
|
+
class="px-4 py-2 rounded-lg bg-emerald-500 text-slate-950 font-semibold hover:bg-emerald-400 transition-colors text-xs flex items-center gap-1.5"
|
|
24
24
|
>
|
|
25
|
-
Get Started
|
|
25
|
+
<span>Get Started</span>
|
|
26
|
+
<span>→</span>
|
|
26
27
|
</a>
|
|
27
28
|
</nav>
|
|
28
29
|
</div>
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
@import "tailwindcss";
|
|
2
2
|
|
|
3
3
|
@theme {
|
|
4
|
+
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
5
|
+
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
6
|
+
|
|
4
7
|
--color-brand-primary: #10b981;
|
|
5
8
|
--color-brand-hover: #34d399;
|
|
6
9
|
}
|
|
@@ -12,10 +15,17 @@
|
|
|
12
15
|
html {
|
|
13
16
|
background-color: #06090f;
|
|
14
17
|
color: #f8fafc;
|
|
18
|
+
font-family: var(--font-sans);
|
|
15
19
|
scroll-behavior: smooth;
|
|
16
20
|
-webkit-font-smoothing: antialiased;
|
|
17
21
|
}
|
|
18
22
|
|
|
23
|
+
/* SVG safety: prevents flex ballooning across all browsers */
|
|
24
|
+
svg {
|
|
25
|
+
flex-shrink: 0;
|
|
26
|
+
max-width: 100%;
|
|
27
|
+
}
|
|
28
|
+
|
|
19
29
|
/* Accessibility: Mandatory Reduced Motion */
|
|
20
30
|
@media (prefers-reduced-motion: reduce) {
|
|
21
31
|
*, *::before, *::after {
|
|
@@ -19,7 +19,7 @@ export default function BlogPostPage({ params }: { params?: { slug?: string } })
|
|
|
19
19
|
href="/"
|
|
20
20
|
class="inline-flex items-center gap-2 text-xs font-mono text-slate-400 hover:text-emerald-400 mb-8 transition-colors"
|
|
21
21
|
>
|
|
22
|
-
|
|
22
|
+
← Back to articles
|
|
23
23
|
</a>
|
|
24
24
|
|
|
25
25
|
<header class="mb-10">
|
|
@@ -27,9 +27,9 @@ export default function BlogPostPage({ params }: { params?: { slug?: string } })
|
|
|
27
27
|
<span class="px-2.5 py-0.5 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 font-semibold">
|
|
28
28
|
{post.category}
|
|
29
29
|
</span>
|
|
30
|
-
<span class="text-slate-500"
|
|
30
|
+
<span class="text-slate-500">•</span>
|
|
31
31
|
<span class="text-slate-400">{post.readTime}</span>
|
|
32
|
-
<span class="text-slate-500"
|
|
32
|
+
<span class="text-slate-500">•</span>
|
|
33
33
|
<span class="text-slate-400">{post.date}</span>
|
|
34
34
|
</div>
|
|
35
35
|
|
|
@@ -21,9 +21,15 @@ export default function RootLayout({ children, metadata }: RootLayoutProps) {
|
|
|
21
21
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
22
22
|
<title>{title}</title>
|
|
23
23
|
<meta name="description" content={description} />
|
|
24
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
25
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
|
26
|
+
<link
|
|
27
|
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
|
|
28
|
+
rel="stylesheet"
|
|
29
|
+
/>
|
|
24
30
|
<link rel="stylesheet" href="/styles.css" />
|
|
25
31
|
</head>
|
|
26
|
-
<body class="bg-[#030712] text-slate-100 min-h-screen antialiased selection:bg-emerald-500/20 selection:text-emerald-300">
|
|
32
|
+
<body class="bg-[#030712] text-slate-100 min-h-screen antialiased selection:bg-emerald-500/20 selection:text-emerald-300 font-sans">
|
|
27
33
|
{children}
|
|
28
34
|
</body>
|
|
29
35
|
</html>
|
|
@@ -4,7 +4,7 @@ export function Navbar() {
|
|
|
4
4
|
<div class="max-w-5xl mx-auto px-6 h-16 flex items-center justify-between">
|
|
5
5
|
<a href="/" class="flex items-center gap-3 font-bold text-white text-base tracking-tight hover:text-emerald-400 transition-colors">
|
|
6
6
|
<div class="w-8 h-8 rounded-lg bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
|
|
7
|
-
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
7
|
+
<svg width="16" height="16" class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
8
8
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
|
|
9
9
|
</svg>
|
|
10
10
|
</div>
|
|
@@ -6,11 +6,11 @@ export function PostCard({ post, featured = false }: { post: Post; featured?: bo
|
|
|
6
6
|
<article class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-8 hover:border-slate-700 transition-colors mb-10">
|
|
7
7
|
<div class="flex items-center gap-3 mb-4 text-xs font-mono">
|
|
8
8
|
<span class="text-emerald-400 font-semibold px-2.5 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20">
|
|
9
|
-
Featured
|
|
9
|
+
Featured • {post.category}
|
|
10
10
|
</span>
|
|
11
|
-
<span class="text-slate-500"
|
|
11
|
+
<span class="text-slate-500">•</span>
|
|
12
12
|
<span class="text-slate-400">{post.readTime}</span>
|
|
13
|
-
<span class="text-slate-500"
|
|
13
|
+
<span class="text-slate-500">•</span>
|
|
14
14
|
<span class="text-slate-400">{post.date}</span>
|
|
15
15
|
</div>
|
|
16
16
|
|
|
@@ -41,7 +41,7 @@ export function PostCard({ post, featured = false }: { post: Post; featured?: bo
|
|
|
41
41
|
href={`/blog/${post.slug}`}
|
|
42
42
|
class="text-emerald-400 text-xs font-semibold hover:text-emerald-300 transition-colors flex items-center gap-1"
|
|
43
43
|
>
|
|
44
|
-
Read Article
|
|
44
|
+
Read Article →
|
|
45
45
|
</a>
|
|
46
46
|
</div>
|
|
47
47
|
</article>
|
|
@@ -86,7 +86,7 @@ export function PostCard({ post, featured = false }: { post: Post; featured?: bo
|
|
|
86
86
|
href={`/blog/${post.slug}`}
|
|
87
87
|
class="text-emerald-400 text-xs font-semibold hover:text-emerald-300 transition-colors"
|
|
88
88
|
>
|
|
89
|
-
Read
|
|
89
|
+
Read →
|
|
90
90
|
</a>
|
|
91
91
|
</div>
|
|
92
92
|
</article>
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
@import "tailwindcss";
|
|
2
2
|
|
|
3
3
|
@theme {
|
|
4
|
+
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
5
|
+
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
6
|
+
|
|
4
7
|
--color-brand-primary: #10b981;
|
|
5
8
|
--color-brand-hover: #34d399;
|
|
6
9
|
}
|
|
@@ -12,10 +15,17 @@
|
|
|
12
15
|
html {
|
|
13
16
|
background-color: #06090f;
|
|
14
17
|
color: #f8fafc;
|
|
18
|
+
font-family: var(--font-sans);
|
|
15
19
|
scroll-behavior: smooth;
|
|
16
20
|
-webkit-font-smoothing: antialiased;
|
|
17
21
|
}
|
|
18
22
|
|
|
23
|
+
/* SVG safety: prevents flex ballooning across all browsers */
|
|
24
|
+
svg {
|
|
25
|
+
flex-shrink: 0;
|
|
26
|
+
max-width: 100%;
|
|
27
|
+
}
|
|
28
|
+
|
|
19
29
|
/* Accessibility: Mandatory Reduced Motion */
|
|
20
30
|
@media (prefers-reduced-motion: reduce) {
|
|
21
31
|
*, *::before, *::after {
|
|
@@ -21,9 +21,15 @@ export default function RootLayout({ children, metadata }: RootLayoutProps) {
|
|
|
21
21
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
22
22
|
<title>{title}</title>
|
|
23
23
|
<meta name="description" content={description} />
|
|
24
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
25
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
|
26
|
+
<link
|
|
27
|
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
|
|
28
|
+
rel="stylesheet"
|
|
29
|
+
/>
|
|
24
30
|
<link rel="stylesheet" href="/styles.css" />
|
|
25
31
|
</head>
|
|
26
|
-
<body class="bg-[#030712] text-slate-100 min-h-screen antialiased selection:bg-emerald-500/20 selection:text-emerald-300">
|
|
32
|
+
<body class="bg-[#030712] text-slate-100 min-h-screen antialiased selection:bg-emerald-500/20 selection:text-emerald-300 font-sans">
|
|
27
33
|
{children}
|
|
28
34
|
</body>
|
|
29
35
|
</html>
|
|
@@ -19,7 +19,7 @@ export default function ProductDetailPage({ params }: { params?: { id?: string }
|
|
|
19
19
|
href="/"
|
|
20
20
|
class="inline-flex items-center gap-2 text-xs font-mono text-slate-400 hover:text-emerald-400 mb-8 transition-colors"
|
|
21
21
|
>
|
|
22
|
-
|
|
22
|
+
← Back to catalog
|
|
23
23
|
</a>
|
|
24
24
|
|
|
25
25
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
|
|
@@ -36,7 +36,7 @@ export default function ProductDetailPage({ params }: { params?: { id?: string }
|
|
|
36
36
|
<span class="px-2.5 py-0.5 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 font-semibold">
|
|
37
37
|
{product.category}
|
|
38
38
|
</span>
|
|
39
|
-
<span class="text-slate-500"
|
|
39
|
+
<span class="text-slate-500">•</span>
|
|
40
40
|
<span class="text-slate-300 font-semibold">
|
|
41
41
|
{product.rating.toFixed(1)} / 5.0 ({product.reviewsCount} reviews)
|
|
42
42
|
</span>
|
|
@@ -61,7 +61,7 @@ export default function ProductDetailPage({ params }: { params?: { id?: string }
|
|
|
61
61
|
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm text-slate-300 font-mono">
|
|
62
62
|
{product.features.map((f) => (
|
|
63
63
|
<li key={f} class="flex items-center gap-2">
|
|
64
|
-
<span class="text-emerald-400 font-bold"
|
|
64
|
+
<span class="text-emerald-400 font-bold">✓</span>
|
|
65
65
|
<span>{f}</span>
|
|
66
66
|
</li>
|
|
67
67
|
))}
|
|
@@ -73,7 +73,7 @@ export default function ProductDetailPage({ params }: { params?: { id?: string }
|
|
|
73
73
|
href="/cart"
|
|
74
74
|
class="flex-1 py-3 rounded-lg bg-emerald-500 text-slate-950 font-semibold text-center text-sm hover:bg-emerald-400 transition-colors"
|
|
75
75
|
>
|
|
76
|
-
Add to Cart
|
|
76
|
+
Add to Cart • ${product.price.toFixed(2)}
|
|
77
77
|
</a>
|
|
78
78
|
<span class="text-xs text-slate-400 font-mono">
|
|
79
79
|
{product.inStock ? 'In Stock (Ships in 24h)' : 'Backorder'}
|
|
@@ -56,7 +56,7 @@ export function CartDrawer() {
|
|
|
56
56
|
type="submit"
|
|
57
57
|
class="w-full py-3 rounded-lg bg-emerald-500 text-slate-950 font-semibold text-sm hover:bg-emerald-400 transition-colors"
|
|
58
58
|
>
|
|
59
|
-
Proceed to Checkout
|
|
59
|
+
Proceed to Checkout →
|
|
60
60
|
</button>
|
|
61
61
|
</form>
|
|
62
62
|
</div>
|
|
@@ -4,7 +4,7 @@ export function Navbar() {
|
|
|
4
4
|
<div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
|
|
5
5
|
<a href="/" class="flex items-center gap-3 font-bold text-white text-base tracking-tight hover:text-emerald-400 transition-colors">
|
|
6
6
|
<div class="w-8 h-8 rounded-lg bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
|
|
7
|
-
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
7
|
+
<svg width="16" height="16" class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
8
8
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
|
|
9
9
|
</svg>
|
|
10
10
|
</div>
|
|
@@ -22,7 +22,7 @@ export function Navbar() {
|
|
|
22
22
|
href="/cart"
|
|
23
23
|
class="flex items-center gap-2 px-3.5 py-1.5 rounded-lg bg-[#0a0f18] border border-[#1a2333] text-slate-200 hover:border-slate-700 hover:text-white transition-colors text-xs font-semibold"
|
|
24
24
|
>
|
|
25
|
-
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
25
|
+
<svg width="14" height="14" class="w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
26
26
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
|
|
27
27
|
</svg>
|
|
28
28
|
<span>Cart</span>
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
@import "tailwindcss";
|
|
2
2
|
|
|
3
3
|
@theme {
|
|
4
|
+
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
5
|
+
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
6
|
+
|
|
4
7
|
--color-brand-primary: #10b981;
|
|
5
8
|
--color-brand-hover: #34d399;
|
|
6
9
|
}
|
|
@@ -12,10 +15,17 @@
|
|
|
12
15
|
html {
|
|
13
16
|
background-color: #06090f;
|
|
14
17
|
color: #f8fafc;
|
|
18
|
+
font-family: var(--font-sans);
|
|
15
19
|
scroll-behavior: smooth;
|
|
16
20
|
-webkit-font-smoothing: antialiased;
|
|
17
21
|
}
|
|
18
22
|
|
|
23
|
+
/* SVG safety: prevents flex ballooning across all browsers */
|
|
24
|
+
svg {
|
|
25
|
+
flex-shrink: 0;
|
|
26
|
+
max-width: 100%;
|
|
27
|
+
}
|
|
28
|
+
|
|
19
29
|
/* Accessibility: Mandatory Reduced Motion */
|
|
20
30
|
@media (prefers-reduced-motion: reduce) {
|
|
21
31
|
*, *::before, *::after {
|
|
@@ -19,6 +19,12 @@ export default function RootLayout({ children, metadata }: RootLayoutProps) {
|
|
|
19
19
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
20
20
|
<title>{title}</title>
|
|
21
21
|
<meta name="description" content={description} />
|
|
22
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
23
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
|
24
|
+
<link
|
|
25
|
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
|
|
26
|
+
rel="stylesheet"
|
|
27
|
+
/>
|
|
22
28
|
<link rel="stylesheet" href="/styles.css" />
|
|
23
29
|
</head>
|
|
24
30
|
<body class="bg-slate-950 text-slate-100 min-h-screen antialiased">
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
@import "tailwindcss";
|
|
2
2
|
|
|
3
3
|
@theme {
|
|
4
|
+
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
5
|
+
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
6
|
+
|
|
4
7
|
--color-brand-primary: #10b981;
|
|
5
8
|
--color-brand-hover: #34d399;
|
|
6
9
|
}
|
|
@@ -12,10 +15,17 @@
|
|
|
12
15
|
html {
|
|
13
16
|
background-color: #06090f;
|
|
14
17
|
color: #f8fafc;
|
|
18
|
+
font-family: var(--font-sans);
|
|
15
19
|
scroll-behavior: smooth;
|
|
16
20
|
-webkit-font-smoothing: antialiased;
|
|
17
21
|
}
|
|
18
22
|
|
|
23
|
+
/* SVG safety: prevents flex ballooning across all browsers */
|
|
24
|
+
svg {
|
|
25
|
+
flex-shrink: 0;
|
|
26
|
+
max-width: 100%;
|
|
27
|
+
}
|
|
28
|
+
|
|
19
29
|
/* Accessibility: Mandatory Reduced Motion */
|
|
20
30
|
@media (prefers-reduced-motion: reduce) {
|
|
21
31
|
*, *::before, *::after {
|
|
@@ -21,9 +21,15 @@ export default function RootLayout({ children, metadata }: RootLayoutProps) {
|
|
|
21
21
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
22
22
|
<title>{title}</title>
|
|
23
23
|
<meta name="description" content={description} />
|
|
24
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
25
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
|
26
|
+
<link
|
|
27
|
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
|
|
28
|
+
rel="stylesheet"
|
|
29
|
+
/>
|
|
24
30
|
<link rel="stylesheet" href="/styles.css" />
|
|
25
31
|
</head>
|
|
26
|
-
<body class="bg-[#030712] text-slate-100 min-h-screen antialiased selection:bg-emerald-500/20 selection:text-emerald-300">
|
|
32
|
+
<body class="bg-[#030712] text-slate-100 min-h-screen antialiased selection:bg-emerald-500/20 selection:text-emerald-300 font-sans">
|
|
27
33
|
{children}
|
|
28
34
|
</body>
|
|
29
35
|
</html>
|
|
@@ -17,7 +17,7 @@ export default function HomePage() {
|
|
|
17
17
|
{/* Hero Section */}
|
|
18
18
|
<div class="max-w-3xl mb-16">
|
|
19
19
|
<div class="text-xs font-mono font-medium text-emerald-400 mb-3 tracking-wide uppercase">
|
|
20
|
-
Next.js App Router Conventions
|
|
20
|
+
Next.js App Router Conventions • Zero Overhead
|
|
21
21
|
</div>
|
|
22
22
|
|
|
23
23
|
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
|
|
@@ -35,7 +35,7 @@ export default function HomePage() {
|
|
|
35
35
|
rel="noreferrer"
|
|
36
36
|
class="px-5 py-2.5 rounded-lg bg-emerald-500 text-slate-950 font-semibold hover:bg-emerald-400 transition-colors text-sm"
|
|
37
37
|
>
|
|
38
|
-
Explore Documentation
|
|
38
|
+
Explore Documentation →
|
|
39
39
|
</a>
|
|
40
40
|
<a
|
|
41
41
|
href="https://github.com/orbitnorth/frootkit"
|
|
@@ -43,7 +43,7 @@ export default function HomePage() {
|
|
|
43
43
|
rel="noreferrer"
|
|
44
44
|
class="px-5 py-2.5 rounded-lg bg-[#0a0f18] border border-[#1a2333] text-slate-200 font-semibold hover:border-slate-700 hover:text-white transition-colors text-sm flex items-center gap-2"
|
|
45
45
|
>
|
|
46
|
-
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
|
|
46
|
+
<svg width="16" height="16" class="w-4 h-4 fill-current shrink-0" viewBox="0 0 24 24">
|
|
47
47
|
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
|
|
48
48
|
</svg>
|
|
49
49
|
Star on GitHub
|
|
@@ -60,7 +60,7 @@ export default function HomePage() {
|
|
|
60
60
|
title="Sub-Millisecond SSR"
|
|
61
61
|
description="Preact VNode streaming and monomorphic rendering ensure blistering response times with near-zero memory footprint."
|
|
62
62
|
>
|
|
63
|
-
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
63
|
+
<svg width="20" height="20" class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
64
64
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
65
65
|
</svg>
|
|
66
66
|
</FeatureCard>
|
|
@@ -70,7 +70,7 @@ export default function HomePage() {
|
|
|
70
70
|
title="Native CSS Pipeline"
|
|
71
71
|
description="Zero postcss or tailwind config files required. Native Tailwind CSS v4 compiles in single-digit milliseconds."
|
|
72
72
|
>
|
|
73
|
-
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
73
|
+
<svg width="20" height="20" class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
74
74
|
<path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
|
|
75
75
|
</svg>
|
|
76
76
|
</FeatureCard>
|
|
@@ -80,7 +80,7 @@ export default function HomePage() {
|
|
|
80
80
|
title="Nested File Layouts"
|
|
81
81
|
description="Intuitive file-based routing with layout.tsx, page.tsx, and loading.tsx mirroring modern Next.js conventions."
|
|
82
82
|
>
|
|
83
|
-
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
83
|
+
<svg width="20" height="20" class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
84
84
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
|
85
85
|
</svg>
|
|
86
86
|
</FeatureCard>
|
|
@@ -90,7 +90,7 @@ export default function HomePage() {
|
|
|
90
90
|
title="Dynamic Route Handlers"
|
|
91
91
|
description="Build backend endpoints in src/app/api/**/route.ts handling GET, POST, PUT, DELETE with standard Web Fetch APIs."
|
|
92
92
|
>
|
|
93
|
-
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
93
|
+
<svg width="20" height="20" class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
94
94
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
95
95
|
</svg>
|
|
96
96
|
</FeatureCard>
|
|
@@ -100,7 +100,7 @@ export default function HomePage() {
|
|
|
100
100
|
title="SSG & Edge Ready"
|
|
101
101
|
description="Run frootkit build to pre-render static HTML and bundle dynamic endpoints for serverless and edge clouds in seconds."
|
|
102
102
|
>
|
|
103
|
-
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
103
|
+
<svg width="20" height="20" class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
104
104
|
<path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
|
105
105
|
</svg>
|
|
106
106
|
</FeatureCard>
|
|
@@ -110,7 +110,7 @@ export default function HomePage() {
|
|
|
110
110
|
title="Agent Guidelines"
|
|
111
111
|
description="Comes with pre-configured AGENT.md guidelines, strict TypeScript, and biome/eslint support for agentic development."
|
|
112
112
|
>
|
|
113
|
-
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
113
|
+
<svg width="20" height="20" class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
|
114
114
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
115
115
|
</svg>
|
|
116
116
|
</FeatureCard>
|
|
@@ -33,7 +33,7 @@ export function Header() {
|
|
|
33
33
|
rel="noreferrer"
|
|
34
34
|
class="flex items-center gap-2 text-slate-300 hover:text-white transition-colors"
|
|
35
35
|
>
|
|
36
|
-
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
|
|
36
|
+
<svg width="16" height="16" class="w-4 h-4 fill-current shrink-0" viewBox="0 0 24 24">
|
|
37
37
|
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
|
|
38
38
|
</svg>
|
|
39
39
|
GitHub
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
@import "tailwindcss";
|
|
2
2
|
|
|
3
3
|
@theme {
|
|
4
|
+
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
5
|
+
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
6
|
+
|
|
4
7
|
--color-brand-primary: #10b981;
|
|
5
8
|
--color-brand-hover: #34d399;
|
|
6
9
|
}
|
|
@@ -12,10 +15,17 @@
|
|
|
12
15
|
html {
|
|
13
16
|
background-color: #06090f;
|
|
14
17
|
color: #f8fafc;
|
|
18
|
+
font-family: var(--font-sans);
|
|
15
19
|
scroll-behavior: smooth;
|
|
16
20
|
-webkit-font-smoothing: antialiased;
|
|
17
21
|
}
|
|
18
22
|
|
|
23
|
+
/* SVG safety: prevents flex ballooning across all browsers */
|
|
24
|
+
svg {
|
|
25
|
+
flex-shrink: 0;
|
|
26
|
+
max-width: 100%;
|
|
27
|
+
}
|
|
28
|
+
|
|
19
29
|
/* Accessibility: Mandatory Reduced Motion */
|
|
20
30
|
@media (prefers-reduced-motion: reduce) {
|
|
21
31
|
*, *::before, *::after {
|