kofi-stack-template-generator 2.1.51 → 2.1.53

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 (54) hide show
  1. package/.turbo/turbo-build.log +6 -6
  2. package/dist/index.js +1906 -146
  3. package/package.json +2 -2
  4. package/src/generator.ts +9 -0
  5. package/src/templates.generated.ts +51 -5
  6. package/templates/marketing/astro/astro.config.ts.hbs +12 -0
  7. package/templates/marketing/astro/package.json.hbs +31 -0
  8. package/templates/marketing/astro/postcss.config.mjs.hbs +5 -0
  9. package/templates/marketing/astro/public/favicon.svg +4 -0
  10. package/templates/marketing/astro/public/media/hero-bg.png +1 -0
  11. package/templates/marketing/astro/src/components/Footer.astro +167 -0
  12. package/templates/marketing/astro/src/components/Header.astro +378 -0
  13. package/templates/marketing/astro/src/components/Logo.astro +30 -0
  14. package/templates/marketing/astro/src/components/ThemeSelector.astro +64 -0
  15. package/templates/marketing/astro/src/components/blocks/BentoFeatures.astro +209 -0
  16. package/templates/marketing/astro/src/components/blocks/FeatureShowcase.astro +102 -0
  17. package/templates/marketing/astro/src/components/blocks/FinalCTA.astro +82 -0
  18. package/templates/marketing/astro/src/components/blocks/IndustryTabs.astro +177 -0
  19. package/templates/marketing/astro/src/components/blocks/LogoBanner.astro +95 -0
  20. package/templates/marketing/astro/src/components/blocks/PricingTable.astro +176 -0
  21. package/templates/marketing/astro/src/components/blocks/ProofBanner.astro +56 -0
  22. package/templates/marketing/astro/src/components/blocks/TestimonialsGrid.astro +106 -0
  23. package/templates/marketing/astro/src/components/blocks/TrustColumns.astro +88 -0
  24. package/templates/marketing/astro/src/components/heros/AnimatedMockup.astro +711 -0
  25. package/templates/marketing/astro/src/components/heros/ProductShowcaseHero.astro +111 -0
  26. package/templates/marketing/astro/src/layouts/Layout.astro +37 -0
  27. package/templates/marketing/astro/src/lib/utils.ts +6 -0
  28. package/templates/marketing/astro/src/pages/index.astro +163 -0
  29. package/templates/marketing/astro/src/styles/globals.css.hbs +353 -0
  30. package/templates/marketing/astro/tsconfig.json.hbs +11 -0
  31. package/templates/marketing/nextjs/package.json.hbs +6 -1
  32. package/templates/marketing/nextjs/src/app/layout.tsx.hbs +19 -5
  33. package/templates/marketing/nextjs/src/app/page.tsx.hbs +160 -164
  34. package/templates/marketing/nextjs/src/components/Footer/index.tsx +188 -0
  35. package/templates/marketing/nextjs/src/components/Header/MegaMenu.tsx +117 -0
  36. package/templates/marketing/nextjs/src/components/Header/MobileMenu.tsx +178 -0
  37. package/templates/marketing/nextjs/src/components/Header/index.tsx +172 -0
  38. package/templates/marketing/nextjs/src/components/Logo.tsx +46 -0
  39. package/templates/marketing/nextjs/src/components/ThemeProvider.tsx +8 -0
  40. package/templates/marketing/nextjs/src/components/ThemeSelector.tsx +69 -0
  41. package/templates/marketing/nextjs/src/components/blocks/BentoFeatures.tsx +249 -0
  42. package/templates/marketing/nextjs/src/components/blocks/FeatureShowcase.tsx +110 -0
  43. package/templates/marketing/nextjs/src/components/blocks/FinalCTA.tsx +91 -0
  44. package/templates/marketing/nextjs/src/components/blocks/IndustryTabs.tsx +137 -0
  45. package/templates/marketing/nextjs/src/components/blocks/LogoBanner.tsx +80 -0
  46. package/templates/marketing/nextjs/src/components/blocks/PricingTable.tsx +210 -0
  47. package/templates/marketing/nextjs/src/components/blocks/ProofBanner.tsx +72 -0
  48. package/templates/marketing/nextjs/src/components/blocks/TestimonialsGrid.tsx +119 -0
  49. package/templates/marketing/nextjs/src/components/blocks/TrustColumns.tsx +110 -0
  50. package/templates/marketing/nextjs/src/components/blocks/index.ts +9 -0
  51. package/templates/marketing/nextjs/src/components/heros/AnimatedMockup.tsx +242 -0
  52. package/templates/marketing/nextjs/src/components/heros/ProductShowcaseHero.tsx +84 -0
  53. package/templates/marketing/nextjs/src/components/heros/index.ts +2 -0
  54. package/templates/marketing/nextjs/src/lib/utils.ts +6 -0
@@ -0,0 +1,111 @@
1
+ ---
2
+ import AnimatedMockup from "./AnimatedMockup.astro"
3
+
4
+ interface HeroLink {
5
+ label: string
6
+ href: string
7
+ variant: "default" | "outline"
8
+ }
9
+
10
+ interface Props {
11
+ headline?: string
12
+ description?: string
13
+ links?: HeroLink[]
14
+ }
15
+
16
+ const {
17
+ headline = "The modern platform for growing teams",
18
+ description = "Streamline workflows, boost productivity, and scale your business with one powerful platform.",
19
+ links = [
20
+ { label: "Start free trial", href: "/sign-up", variant: "default" },
21
+ { label: "Watch demo", href: "/demo", variant: "outline" },
22
+ ],
23
+ } = Astro.props
24
+ ---
25
+
26
+ <div class="relative overflow-hidden">
27
+ <!-- Hero Content - Left Aligned -->
28
+ <div class="container mx-auto px-4 pt-8 pb-16 md:pt-16 md:pb-24">
29
+ <div class="max-w-2xl">
30
+ <h1 class="text-4xl font-bold tracking-tight text-foreground sm:text-5xl md:text-6xl">
31
+ {headline}
32
+ </h1>
33
+ <p class="mt-6 text-lg text-muted-foreground md:text-xl">
34
+ {description}
35
+ </p>
36
+ {links && links.length > 0 && (
37
+ <div class="mt-8 flex flex-wrap gap-4">
38
+ {links.map((link) => (
39
+ <a
40
+ href={link.href}
41
+ class:list={[
42
+ "inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md transition-colors",
43
+ link.variant === "default"
44
+ ? "bg-primary text-primary-foreground hover:bg-primary/90"
45
+ : "border border-border bg-background hover:bg-muted"
46
+ ]}
47
+ >
48
+ {link.label}
49
+ </a>
50
+ ))}
51
+ </div>
52
+ )}
53
+ </div>
54
+ </div>
55
+
56
+ <!-- Product Mockup Section -->
57
+ <div class="container mx-auto px-4">
58
+ <div class="hero-showcase">
59
+ <!-- Background Image -->
60
+ <div class="hero-bg-image">
61
+ <img
62
+ src="/media/hero-bg.png"
63
+ alt=""
64
+ class="w-full h-full object-cover"
65
+ />
66
+ </div>
67
+
68
+ <!-- Mockup - centered within background -->
69
+ <div class="hero-mockup-centered">
70
+ <AnimatedMockup />
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </div>
75
+
76
+ <style>
77
+ .hero-showcase {
78
+ position: relative;
79
+ width: 100%;
80
+ max-width: 1200px;
81
+ margin: 0 auto;
82
+ border-radius: 1rem;
83
+ overflow: hidden;
84
+ background: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, black) 100%);
85
+ min-height: 400px;
86
+ }
87
+
88
+ .hero-bg-image {
89
+ position: absolute;
90
+ inset: 0;
91
+ opacity: 0.1;
92
+ }
93
+
94
+ .hero-mockup-centered {
95
+ position: relative;
96
+ z-index: 10;
97
+ padding: 2rem;
98
+ display: flex;
99
+ justify-content: center;
100
+ align-items: center;
101
+ }
102
+
103
+ @media (min-width: 768px) {
104
+ .hero-showcase {
105
+ min-height: 500px;
106
+ }
107
+ .hero-mockup-centered {
108
+ padding: 3rem;
109
+ }
110
+ }
111
+ </style>
@@ -0,0 +1,37 @@
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>
@@ -0,0 +1,6 @@
1
+ import { type ClassValue, clsx } from "clsx"
2
+ import { twMerge } from "tailwind-merge"
3
+
4
+ export function cn(...inputs: ClassValue[]) {
5
+ return twMerge(clsx(inputs))
6
+ }
@@ -0,0 +1,163 @@
1
+ ---
2
+ import Layout from "../layouts/Layout.astro"
3
+ import Header from "../components/Header.astro"
4
+ import Footer from "../components/Footer.astro"
5
+ import ProductShowcaseHero from "../components/heros/ProductShowcaseHero.astro"
6
+ import LogoBanner from "../components/blocks/LogoBanner.astro"
7
+ import ProofBanner from "../components/blocks/ProofBanner.astro"
8
+ import BentoFeatures from "../components/blocks/BentoFeatures.astro"
9
+ import FeatureShowcase from "../components/blocks/FeatureShowcase.astro"
10
+ import IndustryTabs from "../components/blocks/IndustryTabs.astro"
11
+ import TestimonialsGrid from "../components/blocks/TestimonialsGrid.astro"
12
+ import TrustColumns from "../components/blocks/TrustColumns.astro"
13
+ import PricingTable from "../components/blocks/PricingTable.astro"
14
+ import FinalCTA from "../components/blocks/FinalCTA.astro"
15
+ ---
16
+
17
+ <Layout>
18
+ <div class="min-h-screen flex flex-col">
19
+ <Header />
20
+
21
+ <main class="flex-1">
22
+ <!-- Hero Section -->
23
+ <ProductShowcaseHero
24
+ headline="The modern platform for growing teams"
25
+ description="Streamline workflows, boost productivity, and scale your business with one powerful platform."
26
+ links={[
27
+ { label: "Start free trial", href: "/sign-up", variant: "default" },
28
+ { label: "Watch demo", href: "/demo", variant: "outline" },
29
+ ]}
30
+ />
31
+
32
+ <!-- Logo Banner - Social proof -->
33
+ <LogoBanner
34
+ heading="Trusted by fast-growing companies everywhere"
35
+ style="scroll"
36
+ />
37
+
38
+ <!-- Value Proposition -->
39
+ <ProofBanner
40
+ headline="Transform how your team works, collaborates, and grows"
41
+ subtext="Every interaction feeds into a powerful platform that powers personalized experiences, seamless collaboration, and intelligent automation across every touchpoint."
42
+ links={[
43
+ { label: "Start free trial", href: "/sign-up", variant: "default" },
44
+ { label: "Book a demo", href: "/contact", variant: "outline" },
45
+ ]}
46
+ />
47
+
48
+ <!-- Bento Features -->
49
+ <BentoFeatures
50
+ heading="Discover what SaaSify can do"
51
+ subheading="Everything you need to work smarter and scale faster"
52
+ />
53
+
54
+ <!-- Feature Showcase: Integrations -->
55
+ <FeatureShowcase
56
+ label="Seamless Integrations"
57
+ headline="Connect everything your team uses in one place"
58
+ description="Integrate with 100+ popular tools including Slack, Salesforce, HubSpot, and more. Two-way sync keeps everything up to date automatically."
59
+ features={[
60
+ { text: "100+ native integrations" },
61
+ { text: "Two-way data sync" },
62
+ { text: "Custom webhooks" },
63
+ { text: "API access included" },
64
+ ]}
65
+ link={{ label: "Explore integrations", href: "/features/integrations" }}
66
+ imagePosition="right"
67
+ />
68
+
69
+ <!-- Feature Showcase: Analytics -->
70
+ <FeatureShowcase
71
+ label="Actionable Analytics"
72
+ headline="Make decisions backed by real-time data"
73
+ description="Track every metric that matters. From team performance to customer insights, get the visibility you need to drive growth."
74
+ features={[
75
+ { text: "Real-time dashboards" },
76
+ { text: "Custom reports" },
77
+ { text: "Team performance metrics" },
78
+ { text: "Automated insights" },
79
+ ]}
80
+ link={{ label: "Learn about analytics", href: "/features/analytics" }}
81
+ imagePosition="left"
82
+ />
83
+
84
+ <!-- Feature Showcase: Automation -->
85
+ <FeatureShowcase
86
+ label="Workflow Automation"
87
+ headline="Eliminate busywork with smart automation"
88
+ description="Build powerful workflows without code. Automate approvals, notifications, data entry, and more to focus on what matters."
89
+ features={[
90
+ { text: "Visual workflow builder" },
91
+ { text: "Conditional logic" },
92
+ { text: "Scheduled triggers" },
93
+ { text: "Cross-app automation" },
94
+ ]}
95
+ link={{ label: "See automation features", href: "/features/automation" }}
96
+ imagePosition="right"
97
+ />
98
+
99
+ <!-- Feature Showcase: Collaboration -->
100
+ <FeatureShowcase
101
+ label="Team Collaboration"
102
+ headline="Work together seamlessly, from anywhere"
103
+ description="Real-time collaboration features keep everyone aligned. Share workspaces, leave comments, and track activity across your entire team."
104
+ features={[
105
+ { text: "Real-time collaboration" },
106
+ { text: "Shared workspaces" },
107
+ { text: "Comments and mentions" },
108
+ { text: "Activity tracking" },
109
+ ]}
110
+ link={{ label: "Explore collaboration", href: "/features" }}
111
+ imagePosition="left"
112
+ />
113
+
114
+ <!-- Industry Tabs -->
115
+ <IndustryTabs
116
+ heading="Solutions that deliver real results"
117
+ subheading="Whether you're in sales, marketing, or product, SaaSify adapts to how your team works."
118
+ />
119
+
120
+ <!-- Testimonials -->
121
+ <TestimonialsGrid
122
+ heading="Loved by teams at companies of all sizes"
123
+ subheading="See how leading teams use SaaSify to drive growth and productivity."
124
+ />
125
+
126
+ <!-- Trust Columns -->
127
+ <TrustColumns />
128
+
129
+ <!-- Second Logo Banner - Integrations -->
130
+ <LogoBanner
131
+ heading="Integrates with your favorite tools"
132
+ style="grid"
133
+ logos={[
134
+ { name: "Slack", initials: "SL" },
135
+ { name: "Salesforce", initials: "SF" },
136
+ { name: "HubSpot", initials: "HS" },
137
+ { name: "Google Workspace", initials: "GW" },
138
+ { name: "Zapier", initials: "ZP" },
139
+ { name: "Jira", initials: "JI" },
140
+ ]}
141
+ />
142
+
143
+ <!-- Pricing -->
144
+ <PricingTable
145
+ heading="Simple, transparent pricing"
146
+ subheading="Start free, upgrade as your team grows. No hidden fees."
147
+ />
148
+
149
+ <!-- Final CTA -->
150
+ <FinalCTA
151
+ headline="Ready to transform how your team works?"
152
+ subheading="Join thousands of teams who chose the smarter way to work. Start free, upgrade as you grow."
153
+ style="dark"
154
+ links={[
155
+ { label: "Start free trial", href: "/sign-up", variant: "outline" },
156
+ { label: "Book a demo", href: "/contact", variant: "default" },
157
+ ]}
158
+ />
159
+ </main>
160
+
161
+ <Footer />
162
+ </div>
163
+ </Layout>
@@ -0,0 +1,353 @@
1
+ @import "tailwindcss";
2
+
3
+ @theme inline {
4
+ --color-background: var(--background);
5
+ --color-foreground: var(--foreground);
6
+ --color-card: var(--card);
7
+ --color-card-foreground: var(--card-foreground);
8
+ --color-popover: var(--popover);
9
+ --color-popover-foreground: var(--popover-foreground);
10
+ --color-primary: var(--primary);
11
+ --color-primary-foreground: var(--primary-foreground);
12
+ --color-secondary: var(--secondary);
13
+ --color-secondary-foreground: var(--secondary-foreground);
14
+ --color-muted: var(--muted);
15
+ --color-muted-foreground: var(--muted-foreground);
16
+ --color-accent: var(--accent);
17
+ --color-accent-foreground: var(--accent-foreground);
18
+ --color-destructive: var(--destructive);
19
+ --color-border: var(--border);
20
+ --color-input: var(--input);
21
+ --color-ring: var(--ring);
22
+ --color-chart-1: var(--chart-1);
23
+ --color-chart-2: var(--chart-2);
24
+ --color-chart-3: var(--chart-3);
25
+ --color-chart-4: var(--chart-4);
26
+ --color-chart-5: var(--chart-5);
27
+ --radius-sm: calc(var(--radius) - 4px);
28
+ --radius-md: calc(var(--radius) - 2px);
29
+ --radius-lg: var(--radius);
30
+ --radius-xl: calc(var(--radius) + 4px);
31
+ --font-sans: system-ui, sans-serif;
32
+ --font-mono: monospace;
33
+ }
34
+
35
+ :root {
36
+ --radius: 0.625rem;
37
+ --background: oklch(1 0 0);
38
+ --foreground: oklch(0.145 0 0);
39
+ --card: oklch(1 0 0);
40
+ --card-foreground: oklch(0.145 0 0);
41
+ --popover: oklch(1 0 0);
42
+ --popover-foreground: oklch(0.145 0 0);
43
+ --secondary: oklch(0.97 0 0);
44
+ --secondary-foreground: oklch(0.205 0 0);
45
+ --muted: oklch(0.97 0 0);
46
+ --muted-foreground: oklch(0.556 0 0);
47
+ --accent: oklch(0.97 0 0);
48
+ --accent-foreground: oklch(0.205 0 0);
49
+ --destructive: oklch(0.577 0.245 27.325);
50
+ --border: oklch(0.922 0 0);
51
+ --input: oklch(0.922 0 0);
52
+
53
+ {{#if (eq shadcn.themeColor "neutral")}}
54
+ --primary: oklch(0.205 0 0);
55
+ --primary-foreground: oklch(0.985 0 0);
56
+ --ring: oklch(0.708 0 0);
57
+ --chart-1: oklch(0.646 0.222 41.116);
58
+ --chart-2: oklch(0.6 0.118 184.704);
59
+ --chart-3: oklch(0.398 0.07 227.392);
60
+ --chart-4: oklch(0.828 0.189 84.429);
61
+ --chart-5: oklch(0.769 0.188 70.08);
62
+ {{else if (eq shadcn.themeColor "blue")}}
63
+ --primary: oklch(0.546 0.245 262.881);
64
+ --primary-foreground: oklch(0.985 0.002 247.858);
65
+ --ring: oklch(0.546 0.245 262.881);
66
+ --chart-1: oklch(0.546 0.245 262.881);
67
+ --chart-2: oklch(0.6 0.118 184.704);
68
+ --chart-3: oklch(0.398 0.07 227.392);
69
+ --chart-4: oklch(0.828 0.189 84.429);
70
+ --chart-5: oklch(0.769 0.188 70.08);
71
+ {{else if (eq shadcn.themeColor "green")}}
72
+ --primary: oklch(0.596 0.145 163.225);
73
+ --primary-foreground: oklch(0.982 0.018 155.826);
74
+ --ring: oklch(0.596 0.145 163.225);
75
+ --chart-1: oklch(0.596 0.145 163.225);
76
+ --chart-2: oklch(0.6 0.118 184.704);
77
+ --chart-3: oklch(0.398 0.07 227.392);
78
+ --chart-4: oklch(0.828 0.189 84.429);
79
+ --chart-5: oklch(0.769 0.188 70.08);
80
+ {{else if (eq shadcn.themeColor "purple")}}
81
+ --primary: oklch(0.627 0.265 303.9);
82
+ --primary-foreground: oklch(0.985 0 0);
83
+ --ring: oklch(0.627 0.265 303.9);
84
+ --chart-1: oklch(0.627 0.265 303.9);
85
+ --chart-2: oklch(0.6 0.118 184.704);
86
+ --chart-3: oklch(0.398 0.07 227.392);
87
+ --chart-4: oklch(0.828 0.189 84.429);
88
+ --chart-5: oklch(0.769 0.188 70.08);
89
+ {{else if (eq shadcn.themeColor "red")}}
90
+ --primary: oklch(0.637 0.237 25.331);
91
+ --primary-foreground: oklch(0.985 0 0);
92
+ --ring: oklch(0.637 0.237 25.331);
93
+ --chart-1: oklch(0.637 0.237 25.331);
94
+ --chart-2: oklch(0.6 0.118 184.704);
95
+ --chart-3: oklch(0.398 0.07 227.392);
96
+ --chart-4: oklch(0.828 0.189 84.429);
97
+ --chart-5: oklch(0.769 0.188 70.08);
98
+ {{else if (eq shadcn.themeColor "orange")}}
99
+ --primary: oklch(0.705 0.191 47.604);
100
+ --primary-foreground: oklch(0.216 0.006 56.043);
101
+ --ring: oklch(0.705 0.191 47.604);
102
+ --chart-1: oklch(0.705 0.191 47.604);
103
+ --chart-2: oklch(0.6 0.118 184.704);
104
+ --chart-3: oklch(0.398 0.07 227.392);
105
+ --chart-4: oklch(0.828 0.189 84.429);
106
+ --chart-5: oklch(0.769 0.188 70.08);
107
+ {{else if (eq shadcn.themeColor "amber")}}
108
+ --primary: oklch(0.769 0.188 70.08);
109
+ --primary-foreground: oklch(0.216 0.006 56.043);
110
+ --ring: oklch(0.769 0.188 70.08);
111
+ --chart-1: oklch(0.769 0.188 70.08);
112
+ --chart-2: oklch(0.6 0.118 184.704);
113
+ --chart-3: oklch(0.398 0.07 227.392);
114
+ --chart-4: oklch(0.828 0.189 84.429);
115
+ --chart-5: oklch(0.646 0.222 41.116);
116
+ {{else if (eq shadcn.themeColor "cyan")}}
117
+ --primary: oklch(0.715 0.143 215.221);
118
+ --primary-foreground: oklch(0.216 0.006 56.043);
119
+ --ring: oklch(0.715 0.143 215.221);
120
+ --chart-1: oklch(0.715 0.143 215.221);
121
+ --chart-2: oklch(0.6 0.118 184.704);
122
+ --chart-3: oklch(0.398 0.07 227.392);
123
+ --chart-4: oklch(0.828 0.189 84.429);
124
+ --chart-5: oklch(0.769 0.188 70.08);
125
+ {{else if (eq shadcn.themeColor "emerald")}}
126
+ --primary: oklch(0.696 0.17 162.48);
127
+ --primary-foreground: oklch(0.985 0 0);
128
+ --ring: oklch(0.696 0.17 162.48);
129
+ --chart-1: oklch(0.696 0.17 162.48);
130
+ --chart-2: oklch(0.6 0.118 184.704);
131
+ --chart-3: oklch(0.398 0.07 227.392);
132
+ --chart-4: oklch(0.828 0.189 84.429);
133
+ --chart-5: oklch(0.769 0.188 70.08);
134
+ {{else if (eq shadcn.themeColor "fuchsia")}}
135
+ --primary: oklch(0.667 0.295 322.15);
136
+ --primary-foreground: oklch(0.985 0 0);
137
+ --ring: oklch(0.667 0.295 322.15);
138
+ --chart-1: oklch(0.667 0.295 322.15);
139
+ --chart-2: oklch(0.6 0.118 184.704);
140
+ --chart-3: oklch(0.398 0.07 227.392);
141
+ --chart-4: oklch(0.828 0.189 84.429);
142
+ --chart-5: oklch(0.769 0.188 70.08);
143
+ {{else if (eq shadcn.themeColor "indigo")}}
144
+ --primary: oklch(0.585 0.233 277.117);
145
+ --primary-foreground: oklch(0.985 0 0);
146
+ --ring: oklch(0.585 0.233 277.117);
147
+ --chart-1: oklch(0.585 0.233 277.117);
148
+ --chart-2: oklch(0.6 0.118 184.704);
149
+ --chart-3: oklch(0.398 0.07 227.392);
150
+ --chart-4: oklch(0.828 0.189 84.429);
151
+ --chart-5: oklch(0.769 0.188 70.08);
152
+ {{else if (eq shadcn.themeColor "lime")}}
153
+ --primary: oklch(0.768 0.233 130.85);
154
+ --primary-foreground: oklch(0.216 0.006 56.043);
155
+ --ring: oklch(0.768 0.233 130.85);
156
+ --chart-1: oklch(0.768 0.233 130.85);
157
+ --chart-2: oklch(0.6 0.118 184.704);
158
+ --chart-3: oklch(0.398 0.07 227.392);
159
+ --chart-4: oklch(0.828 0.189 84.429);
160
+ --chart-5: oklch(0.769 0.188 70.08);
161
+ {{else if (eq shadcn.themeColor "pink")}}
162
+ --primary: oklch(0.718 0.202 349.761);
163
+ --primary-foreground: oklch(0.985 0 0);
164
+ --ring: oklch(0.718 0.202 349.761);
165
+ --chart-1: oklch(0.718 0.202 349.761);
166
+ --chart-2: oklch(0.6 0.118 184.704);
167
+ --chart-3: oklch(0.398 0.07 227.392);
168
+ --chart-4: oklch(0.828 0.189 84.429);
169
+ --chart-5: oklch(0.769 0.188 70.08);
170
+ {{else if (eq shadcn.themeColor "rose")}}
171
+ --primary: oklch(0.645 0.246 16.439);
172
+ --primary-foreground: oklch(0.985 0 0);
173
+ --ring: oklch(0.645 0.246 16.439);
174
+ --chart-1: oklch(0.645 0.246 16.439);
175
+ --chart-2: oklch(0.6 0.118 184.704);
176
+ --chart-3: oklch(0.398 0.07 227.392);
177
+ --chart-4: oklch(0.828 0.189 84.429);
178
+ --chart-5: oklch(0.769 0.188 70.08);
179
+ {{else if (eq shadcn.themeColor "sky")}}
180
+ --primary: oklch(0.685 0.169 237.323);
181
+ --primary-foreground: oklch(0.985 0 0);
182
+ --ring: oklch(0.685 0.169 237.323);
183
+ --chart-1: oklch(0.685 0.169 237.323);
184
+ --chart-2: oklch(0.6 0.118 184.704);
185
+ --chart-3: oklch(0.398 0.07 227.392);
186
+ --chart-4: oklch(0.828 0.189 84.429);
187
+ --chart-5: oklch(0.769 0.188 70.08);
188
+ {{else if (eq shadcn.themeColor "teal")}}
189
+ --primary: oklch(0.704 0.14 182.503);
190
+ --primary-foreground: oklch(0.985 0 0);
191
+ --ring: oklch(0.704 0.14 182.503);
192
+ --chart-1: oklch(0.704 0.14 182.503);
193
+ --chart-2: oklch(0.6 0.118 184.704);
194
+ --chart-3: oklch(0.398 0.07 227.392);
195
+ --chart-4: oklch(0.828 0.189 84.429);
196
+ --chart-5: oklch(0.769 0.188 70.08);
197
+ {{else if (eq shadcn.themeColor "violet")}}
198
+ --primary: oklch(0.606 0.25 292.717);
199
+ --primary-foreground: oklch(0.985 0 0);
200
+ --ring: oklch(0.606 0.25 292.717);
201
+ --chart-1: oklch(0.606 0.25 292.717);
202
+ --chart-2: oklch(0.6 0.118 184.704);
203
+ --chart-3: oklch(0.398 0.07 227.392);
204
+ --chart-4: oklch(0.828 0.189 84.429);
205
+ --chart-5: oklch(0.769 0.188 70.08);
206
+ {{else if (eq shadcn.themeColor "yellow")}}
207
+ --primary: oklch(0.795 0.184 86.047);
208
+ --primary-foreground: oklch(0.216 0.006 56.043);
209
+ --ring: oklch(0.795 0.184 86.047);
210
+ --chart-1: oklch(0.795 0.184 86.047);
211
+ --chart-2: oklch(0.6 0.118 184.704);
212
+ --chart-3: oklch(0.398 0.07 227.392);
213
+ --chart-4: oklch(0.646 0.222 41.116);
214
+ --chart-5: oklch(0.769 0.188 70.08);
215
+ {{else}}
216
+ --primary: oklch(0.205 0 0);
217
+ --primary-foreground: oklch(0.985 0 0);
218
+ --ring: oklch(0.708 0 0);
219
+ --chart-1: oklch(0.646 0.222 41.116);
220
+ --chart-2: oklch(0.6 0.118 184.704);
221
+ --chart-3: oklch(0.398 0.07 227.392);
222
+ --chart-4: oklch(0.828 0.189 84.429);
223
+ --chart-5: oklch(0.769 0.188 70.08);
224
+ {{/if}}
225
+ }
226
+
227
+ .dark {
228
+ --background: oklch(0.145 0 0);
229
+ --foreground: oklch(0.985 0 0);
230
+ --card: oklch(0.205 0 0);
231
+ --card-foreground: oklch(0.985 0 0);
232
+ --popover: oklch(0.269 0 0);
233
+ --popover-foreground: oklch(0.985 0 0);
234
+ --secondary: oklch(0.269 0 0);
235
+ --secondary-foreground: oklch(0.985 0 0);
236
+ --muted: oklch(0.269 0 0);
237
+ --muted-foreground: oklch(0.708 0 0);
238
+ --accent: oklch(0.371 0 0);
239
+ --accent-foreground: oklch(0.985 0 0);
240
+ --destructive: oklch(0.704 0.191 22.216);
241
+ --border: oklch(1 0 0 / 10%);
242
+ --input: oklch(1 0 0 / 15%);
243
+
244
+ {{#if (eq shadcn.themeColor "neutral")}}
245
+ --primary: oklch(0.922 0 0);
246
+ --primary-foreground: oklch(0.205 0 0);
247
+ --ring: oklch(0.556 0 0);
248
+ {{else if (eq shadcn.themeColor "blue")}}
249
+ --primary: oklch(0.623 0.214 262.881);
250
+ --primary-foreground: oklch(0.273 0.033 256.848);
251
+ --ring: oklch(0.623 0.214 262.881);
252
+ {{else if (eq shadcn.themeColor "green")}}
253
+ --primary: oklch(0.696 0.17 162.48);
254
+ --primary-foreground: oklch(0.15 0 0);
255
+ --ring: oklch(0.696 0.17 162.48);
256
+ {{else if (eq shadcn.themeColor "purple")}}
257
+ --primary: oklch(0.714 0.203 305.504);
258
+ --primary-foreground: oklch(0.15 0 0);
259
+ --ring: oklch(0.714 0.203 305.504);
260
+ {{else if (eq shadcn.themeColor "red")}}
261
+ --primary: oklch(0.704 0.191 22.216);
262
+ --primary-foreground: oklch(0.15 0 0);
263
+ --ring: oklch(0.704 0.191 22.216);
264
+ {{else if (eq shadcn.themeColor "orange")}}
265
+ --primary: oklch(0.792 0.17 52.615);
266
+ --primary-foreground: oklch(0.15 0 0);
267
+ --ring: oklch(0.792 0.17 52.615);
268
+ {{else if (eq shadcn.themeColor "amber")}}
269
+ --primary: oklch(0.828 0.189 84.429);
270
+ --primary-foreground: oklch(0.15 0 0);
271
+ --ring: oklch(0.828 0.189 84.429);
272
+ {{else if (eq shadcn.themeColor "cyan")}}
273
+ --primary: oklch(0.789 0.154 211.53);
274
+ --primary-foreground: oklch(0.15 0 0);
275
+ --ring: oklch(0.789 0.154 211.53);
276
+ {{else if (eq shadcn.themeColor "emerald")}}
277
+ --primary: oklch(0.765 0.166 160.391);
278
+ --primary-foreground: oklch(0.15 0 0);
279
+ --ring: oklch(0.765 0.166 160.391);
280
+ {{else if (eq shadcn.themeColor "fuchsia")}}
281
+ --primary: oklch(0.74 0.238 322.16);
282
+ --primary-foreground: oklch(0.15 0 0);
283
+ --ring: oklch(0.74 0.238 322.16);
284
+ {{else if (eq shadcn.themeColor "indigo")}}
285
+ --primary: oklch(0.673 0.182 276.935);
286
+ --primary-foreground: oklch(0.985 0 0);
287
+ --ring: oklch(0.673 0.182 276.935);
288
+ {{else if (eq shadcn.themeColor "lime")}}
289
+ --primary: oklch(0.841 0.238 128.85);
290
+ --primary-foreground: oklch(0.15 0 0);
291
+ --ring: oklch(0.841 0.238 128.85);
292
+ {{else if (eq shadcn.themeColor "pink")}}
293
+ --primary: oklch(0.775 0.181 349.761);
294
+ --primary-foreground: oklch(0.15 0 0);
295
+ --ring: oklch(0.775 0.181 349.761);
296
+ {{else if (eq shadcn.themeColor "rose")}}
297
+ --primary: oklch(0.712 0.194 13.428);
298
+ --primary-foreground: oklch(0.15 0 0);
299
+ --ring: oklch(0.712 0.194 13.428);
300
+ {{else if (eq shadcn.themeColor "sky")}}
301
+ --primary: oklch(0.756 0.143 232.661);
302
+ --primary-foreground: oklch(0.15 0 0);
303
+ --ring: oklch(0.756 0.143 232.661);
304
+ {{else if (eq shadcn.themeColor "teal")}}
305
+ --primary: oklch(0.777 0.152 181.912);
306
+ --primary-foreground: oklch(0.15 0 0);
307
+ --ring: oklch(0.777 0.152 181.912);
308
+ {{else if (eq shadcn.themeColor "violet")}}
309
+ --primary: oklch(0.702 0.183 293.541);
310
+ --primary-foreground: oklch(0.985 0 0);
311
+ --ring: oklch(0.702 0.183 293.541);
312
+ {{else if (eq shadcn.themeColor "yellow")}}
313
+ --primary: oklch(0.852 0.199 91.936);
314
+ --primary-foreground: oklch(0.15 0 0);
315
+ --ring: oklch(0.852 0.199 91.936);
316
+ {{else}}
317
+ --primary: oklch(0.922 0 0);
318
+ --primary-foreground: oklch(0.205 0 0);
319
+ --ring: oklch(0.556 0 0);
320
+ {{/if}}
321
+ }
322
+
323
+ @layer base {
324
+ * {
325
+ @apply border-border outline-ring/50;
326
+ }
327
+ body {
328
+ @apply bg-background text-foreground;
329
+ }
330
+ }
331
+
332
+ .container {
333
+ width: 100%;
334
+ margin-left: auto;
335
+ margin-right: auto;
336
+ padding-left: 1rem;
337
+ padding-right: 1rem;
338
+ max-width: 96rem;
339
+ }
340
+
341
+ @media (min-width: 640px) {
342
+ .container {
343
+ padding-left: 1.5rem;
344
+ padding-right: 1.5rem;
345
+ }
346
+ }
347
+
348
+ @media (min-width: 1024px) {
349
+ .container {
350
+ padding-left: 2rem;
351
+ padding-right: 2rem;
352
+ }
353
+ }
@@ -0,0 +1,11 @@
1
+ {
2
+ "extends": "astro/tsconfigs/strict",
3
+ "compilerOptions": {
4
+ "baseUrl": ".",
5
+ "paths": {
6
+ "@/*": ["./src/*"]
7
+ }
8
+ },
9
+ "include": ["src/**/*", ".astro/types.d.ts"],
10
+ "exclude": ["node_modules", "dist"]
11
+ }
@@ -14,7 +14,12 @@
14
14
  "next": "^16.0.0",
15
15
  "react": "^19.0.0",
16
16
  "react-dom": "^19.0.0",
17
- "@repo/ui": "workspace:*"
17
+ "@repo/ui": "workspace:*",
18
+ "lucide-react": "^0.468.0",
19
+ "next-themes": "^0.4.4",
20
+ "clsx": "^2.1.1",
21
+ "tailwind-merge": "^2.6.0",
22
+ "class-variance-authority": "^0.7.1"
18
23
  },
19
24
  "devDependencies": {
20
25
  "@repo/config-typescript": "workspace:*",