kofi-stack-template-generator 2.1.56 → 2.1.58

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.
Files changed (9) hide show
  1. package/.turbo/turbo-build.log +4 -4
  2. package/dist/index.js +50 -4
  3. package/package.json +2 -2
  4. package/src/templates.generated.ts +5 -5
  5. package/templates/marketing/astro/src/components/heros/ProductShowcaseHero.astro +4 -4
  6. package/templates/marketing/astro/src/layouts/Layout.astro.hbs +83 -0
  7. package/templates/marketing/astro/src/styles/globals.css.hbs +151 -16
  8. package/templates/marketing/nextjs/src/app/globals.css.hbs +4 -4
  9. package/templates/marketing/astro/src/layouts/Layout.astro +0 -37
package/templates/marketing/astro/src/layouts/Layout.astro.hbs ADDED
@@ -0,0 +1,83 @@
1
+ ---
2
+ import "../styles/globals.css"
3
+
4
+ interface Props {
5
+ title?: string
6
+ description?: string
7
+ }
8
+
9
+ const {
10
+ title = "SaaSify - The modern platform for growing teams",
11
+ description = "Transform your workflow with our all-in-one platform. Streamline operations, boost productivity, and scale your business with powerful tools designed for modern teams.",
12
+ } = Astro.props
13
+ ---
14
+
15
+ <!doctype html>
16
+ <html lang="en">
17
+ <head>
18
+ <meta charset="UTF-8" />
19
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
20
+ <meta name="description" content={description} />
21
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
22
+ <title>{title}</title>
23
+ <!-- Google Fonts -->
24
+ {{#if (eq shadcn.font "inter")}}
25
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
26
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
27
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
28
+ {{else if (eq shadcn.font "noto-sans")}}
29
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
30
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
31
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
32
+ {{else if (eq shadcn.font "nunito-sans")}}
33
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
34
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
35
+ <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
36
+ {{else if (eq shadcn.font "figtree")}}
37
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
38
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
39
+ <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap" rel="stylesheet" />
40
+ {{else if (eq shadcn.font "roboto")}}
41
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
42
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
43
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
44
+ {{else if (eq shadcn.font "raleway")}}
45
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
46
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
47
+ <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap" rel="stylesheet" />
48
+ {{else if (eq shadcn.font "dm-sans")}}
49
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
50
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
51
+ <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
52
+ {{else if (eq shadcn.font "public-sans")}}
53
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
54
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
55
+ <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
56
+ {{else if (eq shadcn.font "outfit")}}
57
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
58
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
59
+ <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet" />
60
+ {{else if (eq shadcn.font "jetbrains-mono")}}
61
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
62
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
63
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
64
+ {{else}}
65
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
66
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
67
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
68
+ {{/if}}
69
+ <!-- Prevent flash of wrong theme -->
70
+ <script is:inline>
71
+ (function() {
72
+ const theme = localStorage.getItem('theme') ||
73
+ (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
74
+ if (theme === 'dark') {
75
+ document.documentElement.setAttribute('data-theme', 'dark')
76
+ }
77
+ })()
78
+ </script>
79
+ </head>
80
+ <body class="min-h-screen bg-background text-foreground antialiased">
81
+ <slot />
82
+ </body>
83
+ </html>
package/templates/marketing/astro/src/styles/globals.css.hbs CHANGED
@@ -28,12 +28,96 @@
28
28
  --radius-md: calc(var(--radius) - 2px);
29
29
  --radius-lg: var(--radius);
30
30
  --radius-xl: calc(var(--radius) + 4px);
31
- --font-sans: system-ui, sans-serif;
31
+ {{#if (eq shadcn.font "inter")}}
32
+ --font-sans: "Inter", system-ui, sans-serif;
33
+ {{else if (eq shadcn.font "noto-sans")}}
34
+ --font-sans: "Noto Sans", system-ui, sans-serif;
35
+ {{else if (eq shadcn.font "nunito-sans")}}
36
+ --font-sans: "Nunito Sans", system-ui, sans-serif;
37
+ {{else if (eq shadcn.font "figtree")}}
38
+ --font-sans: "Figtree", system-ui, sans-serif;
39
+ {{else if (eq shadcn.font "roboto")}}
40
+ --font-sans: "Roboto", system-ui, sans-serif;
41
+ {{else if (eq shadcn.font "raleway")}}
42
+ --font-sans: "Raleway", system-ui, sans-serif;
43
+ {{else if (eq shadcn.font "dm-sans")}}
44
+ --font-sans: "DM Sans", system-ui, sans-serif;
45
+ {{else if (eq shadcn.font "public-sans")}}
46
+ --font-sans: "Public Sans", system-ui, sans-serif;
47
+ {{else if (eq shadcn.font "outfit")}}
48
+ --font-sans: "Outfit", system-ui, sans-serif;
49
+ {{else if (eq shadcn.font "jetbrains-mono")}}
50
+ --font-sans: "JetBrains Mono", monospace;
51
+ {{else}}
52
+ --font-sans: "Inter", system-ui, sans-serif;
53
+ {{/if}}
32
54
  --font-mono: monospace;
33
55
  }
34
56
 
35
57
  :root {
58
+ /* Border Radius */
59
+ {{#if (eq shadcn.radius "none")}}
60
+ --radius: 0;
61
+ {{else if (eq shadcn.radius "small")}}
62
+ --radius: 0.25rem;
63
+ {{else if (eq shadcn.radius "medium")}}
64
+ --radius: 0.5rem;
65
+ {{else if (eq shadcn.radius "large")}}
66
+ --radius: 1rem;
67
+ {{else}}
36
68
  --radius: 0.625rem;
69
+ {{/if}}
70
+
71
+ /* Base Colors - Light Mode */
72
+ {{#if (eq shadcn.baseColor "stone")}}
73
+ --background: oklch(1 0 60);
74
+ --foreground: oklch(0.147 0.004 49.25);
75
+ --card: oklch(1 0 60);
76
+ --card-foreground: oklch(0.147 0.004 49.25);
77
+ --popover: oklch(1 0 60);
78
+ --popover-foreground: oklch(0.147 0.004 49.25);
79
+ --secondary: oklch(0.97 0.001 67.54);
80
+ --secondary-foreground: oklch(0.216 0.006 56.04);
81
+ --muted: oklch(0.97 0.001 67.54);
82
+ --muted-foreground: oklch(0.553 0.013 58.07);
83
+ --accent: oklch(0.97 0.001 67.54);
84
+ --accent-foreground: oklch(0.216 0.006 56.04);
85
+ --destructive: oklch(0.577 0.245 27.325);
86
+ --border: oklch(0.923 0.003 73.14);
87
+ --input: oklch(0.923 0.003 73.14);
88
+ {{else if (eq shadcn.baseColor "zinc")}}
89
+ --background: oklch(1 0 0);
90
+ --foreground: oklch(0.141 0.005 285.82);
91
+ --card: oklch(1 0 0);
92
+ --card-foreground: oklch(0.141 0.005 285.82);
93
+ --popover: oklch(1 0 0);
94
+ --popover-foreground: oklch(0.141 0.005 285.82);
95
+ --secondary: oklch(0.967 0.001 286.38);
96
+ --secondary-foreground: oklch(0.21 0.006 285.89);
97
+ --muted: oklch(0.967 0.001 286.38);
98
+ --muted-foreground: oklch(0.553 0.016 286.07);
99
+ --accent: oklch(0.967 0.001 286.38);
100
+ --accent-foreground: oklch(0.21 0.006 285.89);
101
+ --destructive: oklch(0.577 0.245 27.325);
102
+ --border: oklch(0.92 0.004 286.32);
103
+ --input: oklch(0.92 0.004 286.32);
104
+ {{else if (eq shadcn.baseColor "gray")}}
105
+ --background: oklch(1 0 0);
106
+ --foreground: oklch(0.13 0.028 261.69);
107
+ --card: oklch(1 0 0);
108
+ --card-foreground: oklch(0.13 0.028 261.69);
109
+ --popover: oklch(1 0 0);
110
+ --popover-foreground: oklch(0.13 0.028 261.69);
111
+ --secondary: oklch(0.968 0.007 247.86);
112
+ --secondary-foreground: oklch(0.21 0.034 264.53);
113
+ --muted: oklch(0.968 0.007 247.86);
114
+ --muted-foreground: oklch(0.551 0.027 264.36);
115
+ --accent: oklch(0.968 0.007 247.86);
116
+ --accent-foreground: oklch(0.21 0.034 264.53);
117
+ --destructive: oklch(0.577 0.245 27.325);
118
+ --border: oklch(0.918 0.011 249.42);
119
+ --input: oklch(0.918 0.011 249.42);
120
+ {{else}}
37
121
  --background: oklch(1 0 0);
38
122
  --foreground: oklch(0.145 0 0);
39
123
  --card: oklch(1 0 0);
@@ -49,6 +133,7 @@
49
133
  --destructive: oklch(0.577 0.245 27.325);
50
134
  --border: oklch(0.922 0 0);
51
135
  --input: oklch(0.922 0 0);
136
+ {{/if}}
52
137
 
53
138
  {{#if (eq shadcn.themeColor "neutral")}}
54
139
  --primary: oklch(0.205 0 0);
@@ -225,6 +310,56 @@
225
310
  }
226
311
 
227
312
  [data-theme="dark"] {
313
+ /* Base Colors - Dark Mode */
314
+ {{#if (eq shadcn.baseColor "stone")}}
315
+ --background: oklch(0.147 0.004 49.25);
316
+ --foreground: oklch(0.97 0.001 67.54);
317
+ --card: oklch(0.216 0.006 56.04);
318
+ --card-foreground: oklch(0.97 0.001 67.54);
319
+ --popover: oklch(0.269 0.007 34.26);
320
+ --popover-foreground: oklch(0.97 0.001 67.54);
321
+ --secondary: oklch(0.269 0.007 34.26);
322
+ --secondary-foreground: oklch(0.97 0.001 67.54);
323
+ --muted: oklch(0.269 0.007 34.26);
324
+ --muted-foreground: oklch(0.709 0.01 56.26);
325
+ --accent: oklch(0.371 0.01 50.64);
326
+ --accent-foreground: oklch(0.97 0.001 67.54);
327
+ --destructive: oklch(0.704 0.191 22.216);
328
+ --border: oklch(1 0 0 / 10%);
329
+ --input: oklch(1 0 0 / 15%);
330
+ {{else if (eq shadcn.baseColor "zinc")}}
331
+ --background: oklch(0.141 0.005 285.82);
332
+ --foreground: oklch(0.985 0.002 247.86);
333
+ --card: oklch(0.21 0.006 285.89);
334
+ --card-foreground: oklch(0.985 0.002 247.86);
335
+ --popover: oklch(0.274 0.006 286.03);
336
+ --popover-foreground: oklch(0.985 0.002 247.86);
337
+ --secondary: oklch(0.274 0.006 286.03);
338
+ --secondary-foreground: oklch(0.985 0.002 247.86);
339
+ --muted: oklch(0.274 0.006 286.03);
340
+ --muted-foreground: oklch(0.705 0.015 286.07);
341
+ --accent: oklch(0.37 0.013 285.81);
342
+ --accent-foreground: oklch(0.985 0.002 247.86);
343
+ --destructive: oklch(0.704 0.191 22.216);
344
+ --border: oklch(1 0 0 / 10%);
345
+ --input: oklch(1 0 0 / 15%);
346
+ {{else if (eq shadcn.baseColor "gray")}}
347
+ --background: oklch(0.13 0.028 261.69);
348
+ --foreground: oklch(0.985 0.002 247.86);
349
+ --card: oklch(0.21 0.034 264.53);
350
+ --card-foreground: oklch(0.985 0.002 247.86);
351
+ --popover: oklch(0.274 0.029 256.85);
352
+ --popover-foreground: oklch(0.985 0.002 247.86);
353
+ --secondary: oklch(0.274 0.029 256.85);
354
+ --secondary-foreground: oklch(0.985 0.002 247.86);
355
+ --muted: oklch(0.274 0.029 256.85);
356
+ --muted-foreground: oklch(0.704 0.022 261.32);
357
+ --accent: oklch(0.37 0.033 259.73);
358
+ --accent-foreground: oklch(0.985 0.002 247.86);
359
+ --destructive: oklch(0.704 0.191 22.216);
360
+ --border: oklch(1 0 0 / 10%);
361
+ --input: oklch(1 0 0 / 15%);
362
+ {{else}}
228
363
  --background: oklch(0.145 0 0);
229
364
  --foreground: oklch(0.985 0 0);
230
365
  --card: oklch(0.205 0 0);
@@ -240,6 +375,7 @@
240
375
  --destructive: oklch(0.704 0.191 22.216);
241
376
  --border: oklch(1 0 0 / 10%);
242
377
  --input: oklch(1 0 0 / 15%);
378
+ {{/if}}
243
379
 
244
380
  {{#if (eq shadcn.themeColor "neutral")}}
245
381
  --primary: oklch(0.922 0 0);
@@ -409,22 +545,24 @@
409
545
 
410
546
  .hero-showcase {
411
547
  position: relative;
412
- border-radius: 12px;
548
+ border-radius: 1rem;
413
549
  overflow: hidden;
414
- padding: 3rem;
415
- height: 500px;
550
+ height: 25rem;
416
551
  width: 100%;
552
+ max-width: 75rem;
553
+ margin: 0 auto;
554
+ background: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, black) 100%);
417
555
  }
418
556
 
419
557
  @media (min-width: 768px) {
420
558
  .hero-showcase {
421
- height: 600px;
559
+ height: 31.25rem;
422
560
  }
423
561
  }
424
562
 
425
563
  @media (min-width: 1024px) {
426
564
  .hero-showcase {
427
- height: 700px;
565
+ height: 37.5rem;
428
566
  }
429
567
  }
430
568
 
@@ -432,6 +570,7 @@
432
570
  position: absolute;
433
571
  inset: 0;
434
572
  z-index: 0;
573
+ opacity: 0.1;
435
574
  }
436
575
 
437
576
  .hero-bg-image img {
@@ -444,20 +583,16 @@
444
583
  .hero-mockup-centered {
445
584
  position: relative;
446
585
  z-index: 10;
447
- max-width: 800px;
448
- margin: 0 auto;
449
- width: 100%;
586
+ padding: 2rem;
587
+ display: flex;
588
+ justify-content: center;
589
+ align-items: center;
590
+ height: 100%;
450
591
  }
451
592
 
452
593
  @media (min-width: 768px) {
453
594
  .hero-mockup-centered {
454
- max-width: 900px;
455
- }
456
- }
457
-
458
- @media (min-width: 1024px) {
459
- .hero-mockup-centered {
460
- max-width: 1000px;
595
+ padding: 3rem;
461
596
  }
462
597
  }
463
598
 
package/templates/marketing/nextjs/src/app/globals.css.hbs CHANGED
@@ -561,22 +561,22 @@
561
561
  position: relative;
562
562
  border-radius: 1rem;
563
563
  overflow: hidden;
564
- height: 400px;
564
+ height: 25rem;
565
565
  width: 100%;
566
- max-width: 1200px;
566
+ max-width: 75rem;
567
567
  margin: 0 auto;
568
568
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, black) 100%);
569
569
  }
570
570
 
571
571
  @media (min-width: 768px) {
572
572
  .hero-showcase {
573
- height: 500px;
573
+ height: 31.25rem;
574
574
  }
575
575
  }
576
576
 
577
577
  @media (min-width: 1024px) {
578
578
  .hero-showcase {
579
- height: 600px;
579
+ height: 37.5rem;
580
580
  }
581
581
  }
582
582
 
package/templates/marketing/astro/src/layouts/Layout.astro DELETED
@@ -1,37 +0,0 @@
1
- ---
2
- import "../styles/globals.css"
3
-
4
- interface Props {
5
- title?: string
6
- description?: string
7
- }
8
-
9
- const {
10
- title = "SaaSify - The modern platform for growing teams",
11
- description = "Transform your workflow with our all-in-one platform. Streamline operations, boost productivity, and scale your business with powerful tools designed for modern teams.",
12
- } = Astro.props
13
- ---
14
-
15
- <!doctype html>
16
- <html lang="en">
17
- <head>
18
- <meta charset="UTF-8" />
19
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
20
- <meta name="description" content={description} />
21
- <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
22
- <title>{title}</title>
23
- <!-- Prevent flash of wrong theme -->
24
- <script is:inline>
25
- (function() {
26
- const theme = localStorage.getItem('theme') ||
27
- (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
28
- if (theme === 'dark') {
29
- document.documentElement.setAttribute('data-theme', 'dark')
30
- }
31
- })()
32
- </script>
33
- </head>
34
- <body class="min-h-screen bg-background text-foreground antialiased">
35
- <slot />
36
- </body>
37
- </html>