kofi-stack-template-generator 2.1.56 → 2.1.57
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/.turbo/turbo-build.log +4 -4
- package/dist/index.js +3 -3
- package/package.json +2 -2
- package/src/templates.generated.ts +4 -4
- package/templates/marketing/astro/src/components/heros/ProductShowcaseHero.astro +4 -4
- package/templates/marketing/astro/src/styles/globals.css.hbs +14 -15
- package/templates/marketing/nextjs/src/app/globals.css.hbs +4 -4
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
|
|
2
|
-
> kofi-stack-template-generator@2.1.
|
|
2
|
+
> kofi-stack-template-generator@2.1.57 build /Users/theodenanyoh/Documents/Krumalabs/create-kofi-stack-v2/packages/template-generator
|
|
3
3
|
> pnpm run prebuild && tsup src/index.ts --format esm --dts
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
> kofi-stack-template-generator@2.1.
|
|
6
|
+
> kofi-stack-template-generator@2.1.57 prebuild /Users/theodenanyoh/Documents/Krumalabs/create-kofi-stack-v2/packages/template-generator
|
|
7
7
|
> node scripts/generate-templates.js
|
|
8
8
|
|
|
9
9
|
Generating templates.generated.ts...
|
|
@@ -14,7 +14,7 @@ CLI tsup v8.5.1
|
|
|
14
14
|
CLI Target: es2022
|
|
15
15
|
ESM Build start
|
|
16
16
|
ESM dist/index.js 2.51 MB
|
|
17
|
-
ESM ⚡️ Build success in
|
|
17
|
+
ESM ⚡️ Build success in 63ms
|
|
18
18
|
DTS Build start
|
|
19
|
-
DTS ⚡️ Build success in
|
|
19
|
+
DTS ⚡️ Build success in 507ms
|
|
20
20
|
DTS dist/index.d.ts 2.96 KB
|
package/dist/index.js
CHANGED
|
@@ -2308,7 +2308,7 @@ const initialState = mockupStates[0]
|
|
|
2308
2308
|
}
|
|
2309
2309
|
</style>
|
|
2310
2310
|
`,
|
|
2311
|
-
"marketing/astro/src/components/heros/ProductShowcaseHero.astro": '---\nimport AnimatedMockup from "./AnimatedMockup.astro"\n\ninterface HeroLink {\n label: string\n href: string\n variant: "default" | "outline"\n}\n\ninterface Props {\n headline?: string\n description?: string\n links?: HeroLink[]\n}\n\nconst {\n headline = "The modern platform for growing teams",\n description = "Streamline workflows, boost productivity, and scale your business with one powerful platform.",\n links = [\n { label: "Start free trial", href: "/sign-up", variant: "default" },\n { label: "Watch demo", href: "/demo", variant: "outline" },\n ],\n} = Astro.props\n---\n\n<div class="relative overflow-hidden">\n <!-- Hero Content - Left Aligned -->\n <div class="container mx-auto px-4 pt-8 pb-16 md:pt-16 md:pb-24">\n <div class="max-w-2xl">\n <h1 class="text-4xl font-bold tracking-tight text-foreground sm:text-5xl md:text-6xl">\n {headline}\n </h1>\n <p class="mt-6 text-lg text-muted-foreground md:text-xl">\n {description}\n </p>\n {links && links.length > 0 && (\n <div class="mt-8 flex flex-wrap gap-4">\n {links.map((link) => (\n <a\n href={link.href}\n class:list={[\n "inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md transition-colors",\n link.variant === "default"\n ? "bg-primary text-primary-foreground hover:bg-primary/90"\n : "border border-border bg-background hover:bg-muted"\n ]}\n >\n {link.label}\n </a>\n ))}\n </div>\n )}\n </div>\n </div>\n\n <!-- Product Mockup Section -->\n <div class="container mx-auto px-4">\n <div class="hero-showcase">\n <!-- Background Image -->\n <div class="hero-bg-image">\n <img\n src="/media/hero-bg.png"\n alt=""\n class="w-full h-full object-cover"\n />\n </div>\n\n <!-- Mockup - centered within background -->\n <div class="hero-mockup-centered">\n <AnimatedMockup />\n </div>\n </div>\n </div>\n</div>\n\n<style>\n .hero-showcase {\n position: relative;\n width: 100%;\n max-width:
|
|
2311
|
+
"marketing/astro/src/components/heros/ProductShowcaseHero.astro": '---\nimport AnimatedMockup from "./AnimatedMockup.astro"\n\ninterface HeroLink {\n label: string\n href: string\n variant: "default" | "outline"\n}\n\ninterface Props {\n headline?: string\n description?: string\n links?: HeroLink[]\n}\n\nconst {\n headline = "The modern platform for growing teams",\n description = "Streamline workflows, boost productivity, and scale your business with one powerful platform.",\n links = [\n { label: "Start free trial", href: "/sign-up", variant: "default" },\n { label: "Watch demo", href: "/demo", variant: "outline" },\n ],\n} = Astro.props\n---\n\n<div class="relative overflow-hidden">\n <!-- Hero Content - Left Aligned -->\n <div class="container mx-auto px-4 pt-8 pb-16 md:pt-16 md:pb-24">\n <div class="max-w-2xl">\n <h1 class="text-4xl font-bold tracking-tight text-foreground sm:text-5xl md:text-6xl">\n {headline}\n </h1>\n <p class="mt-6 text-lg text-muted-foreground md:text-xl">\n {description}\n </p>\n {links && links.length > 0 && (\n <div class="mt-8 flex flex-wrap gap-4">\n {links.map((link) => (\n <a\n href={link.href}\n class:list={[\n "inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md transition-colors",\n link.variant === "default"\n ? "bg-primary text-primary-foreground hover:bg-primary/90"\n : "border border-border bg-background hover:bg-muted"\n ]}\n >\n {link.label}\n </a>\n ))}\n </div>\n )}\n </div>\n </div>\n\n <!-- Product Mockup Section -->\n <div class="container mx-auto px-4">\n <div class="hero-showcase">\n <!-- Background Image -->\n <div class="hero-bg-image">\n <img\n src="/media/hero-bg.png"\n alt=""\n class="w-full h-full object-cover"\n />\n </div>\n\n <!-- Mockup - centered within background -->\n <div class="hero-mockup-centered">\n <AnimatedMockup />\n </div>\n </div>\n </div>\n</div>\n\n<style>\n .hero-showcase {\n position: relative;\n width: 100%;\n max-width: 75rem;\n margin: 0 auto;\n border-radius: 1rem;\n overflow: hidden;\n background: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, black) 100%);\n height: 25rem;\n }\n\n .hero-bg-image {\n position: absolute;\n inset: 0;\n opacity: 0.1;\n }\n\n .hero-mockup-centered {\n position: relative;\n z-index: 10;\n padding: 2rem;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n }\n\n @media (min-width: 768px) {\n .hero-showcase {\n height: 31.25rem;\n }\n .hero-mockup-centered {\n padding: 3rem;\n }\n }\n\n @media (min-width: 1024px) {\n .hero-showcase {\n height: 37.5rem;\n }\n }\n</style>\n',
|
|
2312
2312
|
"marketing/astro/src/layouts/Layout.astro": `---
|
|
2313
2313
|
import "../styles/globals.css"
|
|
2314
2314
|
|
|
@@ -2619,7 +2619,7 @@ import FinalCTA from "../components/blocks/FinalCTA.astro"
|
|
|
2619
2619
|
"marketing/astro/src/pages/pricing.astro": '---\nimport Layout from "../layouts/Layout.astro"\nimport Header from "../components/Header.astro"\nimport Footer from "../components/Footer.astro"\nimport PricingTable from "../components/blocks/PricingTable.astro"\nimport FinalCTA from "../components/blocks/FinalCTA.astro"\nimport LogoBanner from "../components/blocks/LogoBanner.astro"\n---\n\n<Layout title="Pricing - SaaSify" description="Simple, transparent pricing for teams of all sizes.">\n <div class="min-h-screen flex flex-col">\n <Header />\n\n <main class="flex-1">\n <!-- Hero -->\n <section class="py-16 md:py-24">\n <div class="container mx-auto px-4 text-center">\n <h1 class="text-4xl md:text-5xl font-bold tracking-tight mb-6">\n Simple, transparent pricing\n </h1>\n <p class="text-xl text-muted-foreground max-w-2xl mx-auto">\n Start free, upgrade as your team grows. No hidden fees, no surprises.\n </p>\n </div>\n </section>\n\n <!-- Pricing Table -->\n <PricingTable />\n\n <!-- Logo Banner -->\n <LogoBanner\n heading="Trusted by fast-growing companies everywhere"\n style="scroll"\n />\n\n <!-- Final CTA -->\n <FinalCTA\n headline="Ready to get started?"\n subheading="Join thousands of teams who chose the smarter way to work."\n style="dark"\n links={[\n { label: "Start free trial", href: "/sign-up", variant: "outline" },\n { label: "Contact sales", href: "/contact", variant: "default" },\n ]}\n />\n </main>\n\n <Footer />\n </div>\n</Layout>\n',
|
|
2620
2620
|
"marketing/astro/src/pages/privacy.astro": '---\nimport Layout from "../layouts/Layout.astro"\nimport Header from "../components/Header.astro"\nimport Footer from "../components/Footer.astro"\n---\n\n<Layout title="Privacy Policy - SaaSify" description="How we collect, use, and protect your information.">\n <div class="min-h-screen flex flex-col">\n <Header />\n\n <main class="flex-1">\n <article class="py-16 md:py-24">\n <div class="container mx-auto px-4 max-w-3xl">\n <h1 class="text-4xl md:text-5xl font-bold tracking-tight mb-6">\n Privacy Policy\n </h1>\n <p class="text-muted-foreground mb-8">\n Last updated: January 1, 2025\n </p>\n\n <div class="prose prose-neutral dark:prose-invert max-w-none">\n <h2 class="text-2xl font-semibold mt-8 mb-4">Introduction</h2>\n <p class="text-muted-foreground mb-4">\n At SaaSify, we take your privacy seriously. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our service.\n </p>\n\n <h2 class="text-2xl font-semibold mt-8 mb-4">Information We Collect</h2>\n <p class="text-muted-foreground mb-4">\n We collect information you provide directly to us, such as when you create an account, make a purchase, or contact us for support.\n </p>\n <ul class="list-disc pl-6 text-muted-foreground mb-4 space-y-2">\n <li>Account information (name, email, password)</li>\n <li>Payment information (processed securely by our payment providers)</li>\n <li>Usage data and analytics</li>\n <li>Communications with our support team</li>\n </ul>\n\n <h2 class="text-2xl font-semibold mt-8 mb-4">How We Use Your Information</h2>\n <p class="text-muted-foreground mb-4">\n We use the information we collect to:\n </p>\n <ul class="list-disc pl-6 text-muted-foreground mb-4 space-y-2">\n <li>Provide, maintain, and improve our services</li>\n <li>Process transactions and send related information</li>\n <li>Send you technical notices, updates, and support messages</li>\n <li>Respond to your comments, questions, and requests</li>\n </ul>\n\n <h2 class="text-2xl font-semibold mt-8 mb-4">Data Security</h2>\n <p class="text-muted-foreground mb-4">\n We implement appropriate technical and organizational measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction.\n </p>\n\n <h2 class="text-2xl font-semibold mt-8 mb-4">Contact Us</h2>\n <p class="text-muted-foreground mb-4">\n If you have any questions about this Privacy Policy, please contact us at privacy@saasify.com.\n </p>\n </div>\n </div>\n </article>\n </main>\n\n <Footer />\n </div>\n</Layout>\n',
|
|
2621
2621
|
"marketing/astro/src/pages/terms.astro": '---\nimport Layout from "../layouts/Layout.astro"\nimport Header from "../components/Header.astro"\nimport Footer from "../components/Footer.astro"\n---\n\n<Layout title="Terms of Service - SaaSify" description="Terms and conditions for using SaaSify.">\n <div class="min-h-screen flex flex-col">\n <Header />\n\n <main class="flex-1">\n <article class="py-16 md:py-24">\n <div class="container mx-auto px-4 max-w-3xl">\n <h1 class="text-4xl md:text-5xl font-bold tracking-tight mb-6">\n Terms of Service\n </h1>\n <p class="text-muted-foreground mb-8">\n Last updated: January 1, 2025\n </p>\n\n <div class="prose prose-neutral dark:prose-invert max-w-none">\n <h2 class="text-2xl font-semibold mt-8 mb-4">Agreement to Terms</h2>\n <p class="text-muted-foreground mb-4">\n By accessing or using SaaSify, you agree to be bound by these Terms of Service. If you disagree with any part of the terms, you may not access the service.\n </p>\n\n <h2 class="text-2xl font-semibold mt-8 mb-4">Use License</h2>\n <p class="text-muted-foreground mb-4">\n Subject to your compliance with these Terms, we grant you a limited, non-exclusive, non-transferable license to access and use our service for your internal business purposes.\n </p>\n\n <h2 class="text-2xl font-semibold mt-8 mb-4">User Accounts</h2>\n <p class="text-muted-foreground mb-4">\n When you create an account with us, you must provide accurate, complete, and current information. You are responsible for safeguarding your account credentials and for all activities that occur under your account.\n </p>\n\n <h2 class="text-2xl font-semibold mt-8 mb-4">Prohibited Uses</h2>\n <p class="text-muted-foreground mb-4">\n You may not use our service:\n </p>\n <ul class="list-disc pl-6 text-muted-foreground mb-4 space-y-2">\n <li>For any unlawful purpose or to promote illegal activities</li>\n <li>To violate any applicable laws or regulations</li>\n <li>To infringe upon the rights of others</li>\n <li>To interfere with or disrupt the service or servers</li>\n </ul>\n\n <h2 class="text-2xl font-semibold mt-8 mb-4">Payment Terms</h2>\n <p class="text-muted-foreground mb-4">\n Paid subscriptions are billed in advance on a monthly or annual basis. You agree to pay all fees associated with your subscription plan.\n </p>\n\n <h2 class="text-2xl font-semibold mt-8 mb-4">Limitation of Liability</h2>\n <p class="text-muted-foreground mb-4">\n In no event shall SaaSify be liable for any indirect, incidental, special, consequential, or punitive damages arising out of or related to your use of the service.\n </p>\n\n <h2 class="text-2xl font-semibold mt-8 mb-4">Contact Us</h2>\n <p class="text-muted-foreground mb-4">\n If you have any questions about these Terms, please contact us at legal@saasify.com.\n </p>\n </div>\n </div>\n </article>\n </main>\n\n <Footer />\n </div>\n</Layout>\n',
|
|
2622
|
-
"marketing/astro/src/styles/globals.css.hbs": '@import "tailwindcss";\n\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --color-card: var(--card);\n --color-card-foreground: var(--card-foreground);\n --color-popover: var(--popover);\n --color-popover-foreground: var(--popover-foreground);\n --color-primary: var(--primary);\n --color-primary-foreground: var(--primary-foreground);\n --color-secondary: var(--secondary);\n --color-secondary-foreground: var(--secondary-foreground);\n --color-muted: var(--muted);\n --color-muted-foreground: var(--muted-foreground);\n --color-accent: var(--accent);\n --color-accent-foreground: var(--accent-foreground);\n --color-destructive: var(--destructive);\n --color-border: var(--border);\n --color-input: var(--input);\n --color-ring: var(--ring);\n --color-chart-1: var(--chart-1);\n --color-chart-2: var(--chart-2);\n --color-chart-3: var(--chart-3);\n --color-chart-4: var(--chart-4);\n --color-chart-5: var(--chart-5);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-md: calc(var(--radius) - 2px);\n --radius-lg: var(--radius);\n --radius-xl: calc(var(--radius) + 4px);\n --font-sans: system-ui, sans-serif;\n --font-mono: monospace;\n}\n\n:root {\n --radius: 0.625rem;\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.577 0.245 27.325);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n\n{{#if (eq shadcn.themeColor "neutral")}}\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "blue")}}\n --primary: oklch(0.546 0.245 262.881);\n --primary-foreground: oklch(0.985 0.002 247.858);\n --ring: oklch(0.546 0.245 262.881);\n --chart-1: oklch(0.546 0.245 262.881);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "green")}}\n --primary: oklch(0.596 0.145 163.225);\n --primary-foreground: oklch(0.982 0.018 155.826);\n --ring: oklch(0.596 0.145 163.225);\n --chart-1: oklch(0.596 0.145 163.225);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "purple")}}\n --primary: oklch(0.627 0.265 303.9);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.627 0.265 303.9);\n --chart-1: oklch(0.627 0.265 303.9);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "red")}}\n --primary: oklch(0.637 0.237 25.331);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.637 0.237 25.331);\n --chart-1: oklch(0.637 0.237 25.331);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "orange")}}\n --primary: oklch(0.705 0.191 47.604);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.705 0.191 47.604);\n --chart-1: oklch(0.705 0.191 47.604);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "amber")}}\n --primary: oklch(0.769 0.188 70.08);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.769 0.188 70.08);\n --chart-1: oklch(0.769 0.188 70.08);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.646 0.222 41.116);\n{{else if (eq shadcn.themeColor "cyan")}}\n --primary: oklch(0.715 0.143 215.221);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.715 0.143 215.221);\n --chart-1: oklch(0.715 0.143 215.221);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "emerald")}}\n --primary: oklch(0.696 0.17 162.48);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.696 0.17 162.48);\n --chart-1: oklch(0.696 0.17 162.48);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "fuchsia")}}\n --primary: oklch(0.667 0.295 322.15);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.667 0.295 322.15);\n --chart-1: oklch(0.667 0.295 322.15);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "indigo")}}\n --primary: oklch(0.585 0.233 277.117);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.585 0.233 277.117);\n --chart-1: oklch(0.585 0.233 277.117);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "lime")}}\n --primary: oklch(0.768 0.233 130.85);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.768 0.233 130.85);\n --chart-1: oklch(0.768 0.233 130.85);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "pink")}}\n --primary: oklch(0.718 0.202 349.761);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.718 0.202 349.761);\n --chart-1: oklch(0.718 0.202 349.761);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "rose")}}\n --primary: oklch(0.645 0.246 16.439);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.645 0.246 16.439);\n --chart-1: oklch(0.645 0.246 16.439);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "sky")}}\n --primary: oklch(0.685 0.169 237.323);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.685 0.169 237.323);\n --chart-1: oklch(0.685 0.169 237.323);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "teal")}}\n --primary: oklch(0.704 0.14 182.503);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.704 0.14 182.503);\n --chart-1: oklch(0.704 0.14 182.503);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "violet")}}\n --primary: oklch(0.606 0.25 292.717);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.606 0.25 292.717);\n --chart-1: oklch(0.606 0.25 292.717);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "yellow")}}\n --primary: oklch(0.795 0.184 86.047);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.795 0.184 86.047);\n --chart-1: oklch(0.795 0.184 86.047);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.646 0.222 41.116);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else}}\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{/if}}\n}\n\n[data-theme="dark"] {\n --background: oklch(0.145 0 0);\n --foreground: oklch(0.985 0 0);\n --card: oklch(0.205 0 0);\n --card-foreground: oklch(0.985 0 0);\n --popover: oklch(0.269 0 0);\n --popover-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.269 0 0);\n --secondary-foreground: oklch(0.985 0 0);\n --muted: oklch(0.269 0 0);\n --muted-foreground: oklch(0.708 0 0);\n --accent: oklch(0.371 0 0);\n --accent-foreground: oklch(0.985 0 0);\n --destructive: oklch(0.704 0.191 22.216);\n --border: oklch(1 0 0 / 10%);\n --input: oklch(1 0 0 / 15%);\n\n{{#if (eq shadcn.themeColor "neutral")}}\n --primary: oklch(0.922 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --ring: oklch(0.556 0 0);\n{{else if (eq shadcn.themeColor "blue")}}\n --primary: oklch(0.623 0.214 262.881);\n --primary-foreground: oklch(0.273 0.033 256.848);\n --ring: oklch(0.623 0.214 262.881);\n{{else if (eq shadcn.themeColor "green")}}\n --primary: oklch(0.696 0.17 162.48);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.696 0.17 162.48);\n{{else if (eq shadcn.themeColor "purple")}}\n --primary: oklch(0.714 0.203 305.504);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.714 0.203 305.504);\n{{else if (eq shadcn.themeColor "red")}}\n --primary: oklch(0.704 0.191 22.216);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.704 0.191 22.216);\n{{else if (eq shadcn.themeColor "orange")}}\n --primary: oklch(0.792 0.17 52.615);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.792 0.17 52.615);\n{{else if (eq shadcn.themeColor "amber")}}\n --primary: oklch(0.828 0.189 84.429);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.828 0.189 84.429);\n{{else if (eq shadcn.themeColor "cyan")}}\n --primary: oklch(0.789 0.154 211.53);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.789 0.154 211.53);\n{{else if (eq shadcn.themeColor "emerald")}}\n --primary: oklch(0.765 0.166 160.391);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.765 0.166 160.391);\n{{else if (eq shadcn.themeColor "fuchsia")}}\n --primary: oklch(0.74 0.238 322.16);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.74 0.238 322.16);\n{{else if (eq shadcn.themeColor "indigo")}}\n --primary: oklch(0.673 0.182 276.935);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.673 0.182 276.935);\n{{else if (eq shadcn.themeColor "lime")}}\n --primary: oklch(0.841 0.238 128.85);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.841 0.238 128.85);\n{{else if (eq shadcn.themeColor "pink")}}\n --primary: oklch(0.775 0.181 349.761);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.775 0.181 349.761);\n{{else if (eq shadcn.themeColor "rose")}}\n --primary: oklch(0.712 0.194 13.428);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.712 0.194 13.428);\n{{else if (eq shadcn.themeColor "sky")}}\n --primary: oklch(0.756 0.143 232.661);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.756 0.143 232.661);\n{{else if (eq shadcn.themeColor "teal")}}\n --primary: oklch(0.777 0.152 181.912);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.777 0.152 181.912);\n{{else if (eq shadcn.themeColor "violet")}}\n --primary: oklch(0.702 0.183 293.541);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.702 0.183 293.541);\n{{else if (eq shadcn.themeColor "yellow")}}\n --primary: oklch(0.852 0.199 91.936);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.852 0.199 91.936);\n{{else}}\n --primary: oklch(0.922 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --ring: oklch(0.556 0 0);\n{{/if}}\n}\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n body {\n @apply bg-background text-foreground;\n }\n}\n\n.container {\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: 1rem;\n padding-right: 1rem;\n max-width: 96rem;\n}\n\n@media (min-width: 640px) {\n .container {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n}\n\n@media (min-width: 1024px) {\n .container {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n\n/* ========================================\n HERO TYPOGRAPHY\n ======================================== */\n\n.hero-content h1 {\n font-size: 2.25rem !important;\n line-height: 2.5rem !important;\n font-weight: 700 !important;\n letter-spacing: -0.025em !important;\n margin-bottom: 1.5rem !important;\n color: var(--color-foreground) !important;\n}\n\n.hero-content p {\n font-size: 1.25rem !important;\n line-height: 1.75rem !important;\n color: var(--color-muted-foreground) !important;\n max-width: 42rem;\n margin-left: auto;\n margin-right: auto;\n margin-bottom: 2rem !important;\n}\n\n.hero-content--dark h1 {\n color: white !important;\n}\n\n.hero-content--dark p {\n color: rgba(255, 255, 255, 0.8) !important;\n}\n\n@media (min-width: 768px) {\n .hero-content h1 {\n font-size: 3.75rem !important;\n line-height: 1 !important;\n }\n}\n\n/* Left-aligned hero content */\n.hero-content--left h1 {\n text-align: left !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n.hero-content--left p {\n text-align: left !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n/* ========================================\n PRODUCT SHOWCASE HERO STYLES\n ======================================== */\n\n.hero-showcase {\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n padding: 3rem;\n height: 500px;\n width: 100%;\n}\n\n@media (min-width: 768px) {\n .hero-showcase {\n height: 600px;\n }\n}\n\n@media (min-width: 1024px) {\n .hero-showcase {\n height: 700px;\n }\n}\n\n.hero-bg-image {\n position: absolute;\n inset: 0;\n z-index: 0;\n}\n\n.hero-bg-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n.hero-mockup-centered {\n position: relative;\n z-index: 10;\n max-width: 800px;\n margin: 0 auto;\n width: 100%;\n}\n\n@media (min-width: 768px) {\n .hero-mockup-centered {\n max-width: 900px;\n }\n}\n\n@media (min-width: 1024px) {\n .hero-mockup-centered {\n max-width: 1000px;\n }\n}\n\n.mockup-wrapper {\n background: var(--color-background);\n border-radius: 12px;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);\n overflow: hidden;\n animation: mockup-entrance 0.8s ease-out;\n width: 100%;\n}\n\n.mockup-wrapper img {\n width: 100%;\n height: auto;\n display: block;\n}\n\n@keyframes mockup-entrance {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Browser chrome */\n.mockup-chrome {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n background: var(--color-muted);\n border-bottom: 1px solid var(--color-border);\n}\n\n.mockup-chrome-dots {\n display: flex;\n gap: 6px;\n}\n\n.mockup-chrome-dots .dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n}\n\n.mockup-chrome-dots .dot-red {\n background: #ff5f56;\n}\n.mockup-chrome-dots .dot-yellow {\n background: #ffbd2e;\n}\n.mockup-chrome-dots .dot-green {\n background: #27ca40;\n}\n\n.mockup-chrome-title {\n flex: 1;\n text-align: center;\n font-size: 13px;\n font-weight: 500;\n color: var(--color-muted-foreground);\n}\n\n.mockup-chrome-actions {\n width: 60px;\n}\n\n/* App content layout */\n.mockup-content {\n display: flex;\n min-height: 400px;\n}\n\n.mockup-sidebar {\n width: 220px;\n background: var(--color-card);\n border-right: 1px solid var(--color-border);\n flex-shrink: 0;\n}\n\n.sidebar-header {\n padding: 16px;\n border-bottom: 1px solid var(--color-border);\n}\n\n.sidebar-logo {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.logo-icon {\n width: 28px;\n height: 28px;\n background: var(--color-primary);\n color: white;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-size: 14px;\n}\n\n.logo-text {\n font-weight: 600;\n font-size: 14px;\n color: var(--color-foreground);\n}\n\n.sidebar-nav {\n padding: 8px;\n}\n\n.sidebar-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n border-radius: 6px;\n font-size: 13px;\n color: var(--color-muted-foreground);\n transition: all 0.15s ease;\n cursor: pointer;\n}\n\n.sidebar-item:hover {\n background: var(--color-accent);\n color: var(--color-accent-foreground);\n}\n\n.sidebar-item--active {\n background: oklch(from var(--color-primary) l c h / 0.12);\n color: var(--color-primary);\n}\n\n.sidebar-icon {\n font-size: 16px;\n}\n\n.sidebar-label {\n flex: 1;\n}\n\n.sidebar-badge {\n background: var(--color-primary);\n color: var(--color-primary-foreground);\n font-size: 11px;\n padding: 2px 6px;\n border-radius: 10px;\n font-weight: 500;\n}\n\n/* Main content area */\n.mockup-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: var(--color-background);\n}\n\n.main-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--color-border);\n}\n\n.header-title {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.header-title h2 {\n font-size: 16px;\n font-weight: 600;\n margin: 0;\n color: var(--color-foreground);\n}\n\n.header-breadcrumb {\n font-size: 12px;\n color: var(--color-muted-foreground);\n}\n\n.header-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.action-btn {\n padding: 8px 16px;\n background: var(--color-primary);\n color: var(--color-primary-foreground);\n border: none;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.action-btn--success {\n background: #27ca40;\n}\n\n.action-btn--featured {\n background: var(--color-primary);\n}\n\n/* Split view */\n.main-split {\n display: flex;\n flex: 1;\n}\n\n.editor-panel {\n flex: 1;\n padding: 20px;\n border-right: 1px solid var(--color-border);\n}\n\n.editor-section {\n margin-bottom: 20px;\n}\n\n.editor-label {\n display: block;\n font-size: 12px;\n font-weight: 500;\n color: var(--color-muted-foreground);\n margin-bottom: 6px;\n}\n\n.editor-input {\n background: var(--color-muted);\n border: 1px solid var(--color-border);\n border-radius: 6px;\n padding: 10px 12px;\n font-size: 14px;\n color: var(--color-foreground);\n display: flex;\n align-items: center;\n}\n\n.input-text {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.input-cursor {\n width: 2px;\n height: 18px;\n background: var(--color-primary);\n animation: blink 1s infinite;\n margin-left: 2px;\n}\n\n@keyframes blink {\n 0%,\n 50% {\n opacity: 1;\n }\n 51%,\n 100% {\n opacity: 0;\n }\n}\n\n.editor-select {\n background: var(--color-muted);\n border: 1px solid var(--color-border);\n border-radius: 6px;\n padding: 10px 12px;\n font-size: 14px;\n color: var(--color-foreground);\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.select-arrow {\n font-size: 10px;\n color: var(--color-muted-foreground);\n}\n\n.editor-textarea {\n background: var(--color-muted);\n border: 1px solid var(--color-border);\n border-radius: 6px;\n padding: 10px 12px;\n font-size: 14px;\n color: var(--color-foreground);\n min-height: 80px;\n}\n\n.textarea-text {\n transition: all 0.5s ease;\n}\n\n.textarea-text--complete {\n color: var(--color-foreground);\n}\n\n/* Preview panel */\n.preview-panel {\n width: 320px;\n padding: 20px;\n background: oklch(from var(--color-muted) l c h / 0.5);\n}\n\n.preview-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.preview-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--color-muted-foreground);\n}\n\n.preview-url {\n font-size: 11px;\n color: var(--color-muted-foreground);\n font-family: monospace;\n}\n\n.preview-card {\n background: var(--color-card);\n border: 1px solid var(--color-border);\n border-radius: 10px;\n overflow: hidden;\n position: relative;\n transition: all 0.3s ease;\n}\n\n.preview-badge {\n position: absolute;\n top: 10px;\n right: 10px;\n background: var(--color-primary);\n color: white;\n font-size: 11px;\n padding: 4px 8px;\n border-radius: 4px;\n font-weight: 500;\n animation: badge-pop 0.3s ease;\n}\n\n@keyframes badge-pop {\n from {\n transform: scale(0);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n.preview-image {\n height: 120px;\n background: linear-gradient(135deg, var(--color-muted) 0%, var(--color-accent) 100%);\n}\n\n.preview-image-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 40px;\n}\n\n.preview-content {\n padding: 16px;\n}\n\n.preview-category-tag {\n display: inline-block;\n font-size: 11px;\n color: var(--color-primary);\n font-weight: 500;\n margin-bottom: 8px;\n}\n\n.preview-title {\n font-size: 16px;\n font-weight: 600;\n margin: 0 0 8px;\n color: var(--color-foreground);\n}\n\n.preview-description {\n font-size: 13px;\n color: var(--color-muted-foreground);\n line-height: 1.5;\n margin: 0 0 12px;\n}\n\n.preview-meta {\n display: flex;\n gap: 8px;\n font-size: 12px;\n}\n\n.meta-rating {\n color: #ffc24a;\n}\n\n.meta-reviews {\n color: var(--color-muted-foreground);\n}\n\n/* State indicators */\n.mockup-indicators {\n display: flex;\n justify-content: center;\n gap: 24px;\n padding: 16px;\n border-top: 1px solid var(--color-border);\n}\n\n.indicator {\n display: flex;\n align-items: center;\n gap: 8px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 6px 12px;\n border-radius: 20px;\n transition: all 0.2s ease;\n}\n\n.indicator:hover {\n background: var(--color-accent);\n}\n\n.indicator--active {\n background: oklch(from var(--color-primary) l c h / 0.12);\n}\n\n.indicator-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--color-muted-foreground);\n transition: all 0.2s ease;\n}\n\n.indicator--active .indicator-dot {\n background: var(--color-primary);\n box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.2);\n}\n\n.indicator-label {\n font-size: 12px;\n color: var(--color-muted-foreground);\n}\n\n.indicator--active .indicator-label {\n color: var(--color-foreground);\n font-weight: 500;\n}\n\n/* ========================================\n LOGO BANNER STYLES\n ======================================== */\n\n.logo-scroll-container {\n overflow: hidden;\n mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\n}\n\n.logo-scroll-track {\n display: flex;\n animation: logo-scroll 30s linear infinite;\n}\n\n.logo-scroll-track:hover {\n animation-play-state: paused;\n}\n\n@keyframes logo-scroll {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n\n.logo-item {\n flex-shrink: 0;\n min-width: 150px;\n}\n\n/* ========================================\n RESPONSIVE ADJUSTMENTS\n ======================================== */\n\n@media (max-width: 768px) {\n .mockup-content {\n flex-direction: column;\n }\n\n .mockup-sidebar {\n width: 100%;\n border-right: none;\n border-bottom: 1px solid var(--color-border);\n }\n\n .sidebar-nav {\n display: flex;\n overflow-x: auto;\n padding: 8px;\n gap: 4px;\n }\n\n .sidebar-item {\n white-space: nowrap;\n }\n\n .main-split {\n flex-direction: column;\n }\n\n .editor-panel {\n border-right: none;\n border-bottom: 1px solid var(--color-border);\n }\n\n .preview-panel {\n width: 100%;\n }\n\n .mockup-indicators {\n flex-wrap: wrap;\n gap: 12px;\n }\n\n .indicator-label {\n display: none;\n }\n}\n\n/* ========================================\n ANIMATION STYLES\n ======================================== */\n\n/* Industry Tabs Animation */\n.industry-tab-content {\n animation: tab-fade-in 0.3s ease-out;\n}\n\n@keyframes tab-fade-in {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Feature Showcase Entrance Animation */\n@keyframes feature-slide-in {\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n.feature-showcase-content {\n animation: feature-slide-in 0.5s ease-out;\n}\n\n/* Testimonial Card Hover Effects */\n.testimonial-card {\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.testimonial-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);\n}\n\n/* Stat Number Animation */\n@keyframes stat-count-up {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.stat-number {\n animation: stat-count-up 0.6s ease-out;\n}\n\n/* Trust Column Icon Animation */\n.trust-icon {\n transition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.trust-icon:hover {\n transform: scale(1.1);\n}\n\n/* Final CTA Background Animation */\n@keyframes subtle-float {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-10px);\n }\n}\n\n.cta-decorative {\n animation: subtle-float 6s ease-in-out infinite;\n}\n\n/* Feature Grid Card Entrance */\n@keyframes card-entrance {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.feature-card {\n animation: card-entrance 0.4s ease-out;\n animation-fill-mode: both;\n}\n\n.feature-card:nth-child(1) {\n animation-delay: 0.1s;\n}\n.feature-card:nth-child(2) {\n animation-delay: 0.2s;\n}\n.feature-card:nth-child(3) {\n animation-delay: 0.3s;\n}\n.feature-card:nth-child(4) {\n animation-delay: 0.4s;\n}\n.feature-card:nth-child(5) {\n animation-delay: 0.5s;\n}\n.feature-card:nth-child(6) {\n animation-delay: 0.6s;\n}\n\n/* Smooth Section Transitions */\nsection {\n scroll-margin-top: 80px;\n}\n\n/* Button Hover Enhancement */\n.cta-button {\n position: relative;\n overflow: hidden;\n}\n\n.cta-button::after {\n content: "";\n position: absolute;\n inset: 0;\n background: linear-gradient(rgba(255, 255, 255, 0.1), transparent);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.cta-button:hover::after {\n opacity: 1;\n}\n\n/* Responsive Image Container */\n.feature-image-container {\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.feature-image-container:hover {\n transform: translateY(-4px);\n box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);\n}\n',
|
|
2622
|
+
"marketing/astro/src/styles/globals.css.hbs": '@import "tailwindcss";\n\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --color-card: var(--card);\n --color-card-foreground: var(--card-foreground);\n --color-popover: var(--popover);\n --color-popover-foreground: var(--popover-foreground);\n --color-primary: var(--primary);\n --color-primary-foreground: var(--primary-foreground);\n --color-secondary: var(--secondary);\n --color-secondary-foreground: var(--secondary-foreground);\n --color-muted: var(--muted);\n --color-muted-foreground: var(--muted-foreground);\n --color-accent: var(--accent);\n --color-accent-foreground: var(--accent-foreground);\n --color-destructive: var(--destructive);\n --color-border: var(--border);\n --color-input: var(--input);\n --color-ring: var(--ring);\n --color-chart-1: var(--chart-1);\n --color-chart-2: var(--chart-2);\n --color-chart-3: var(--chart-3);\n --color-chart-4: var(--chart-4);\n --color-chart-5: var(--chart-5);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-md: calc(var(--radius) - 2px);\n --radius-lg: var(--radius);\n --radius-xl: calc(var(--radius) + 4px);\n --font-sans: system-ui, sans-serif;\n --font-mono: monospace;\n}\n\n:root {\n --radius: 0.625rem;\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.577 0.245 27.325);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n\n{{#if (eq shadcn.themeColor "neutral")}}\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "blue")}}\n --primary: oklch(0.546 0.245 262.881);\n --primary-foreground: oklch(0.985 0.002 247.858);\n --ring: oklch(0.546 0.245 262.881);\n --chart-1: oklch(0.546 0.245 262.881);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "green")}}\n --primary: oklch(0.596 0.145 163.225);\n --primary-foreground: oklch(0.982 0.018 155.826);\n --ring: oklch(0.596 0.145 163.225);\n --chart-1: oklch(0.596 0.145 163.225);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "purple")}}\n --primary: oklch(0.627 0.265 303.9);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.627 0.265 303.9);\n --chart-1: oklch(0.627 0.265 303.9);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "red")}}\n --primary: oklch(0.637 0.237 25.331);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.637 0.237 25.331);\n --chart-1: oklch(0.637 0.237 25.331);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "orange")}}\n --primary: oklch(0.705 0.191 47.604);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.705 0.191 47.604);\n --chart-1: oklch(0.705 0.191 47.604);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "amber")}}\n --primary: oklch(0.769 0.188 70.08);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.769 0.188 70.08);\n --chart-1: oklch(0.769 0.188 70.08);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.646 0.222 41.116);\n{{else if (eq shadcn.themeColor "cyan")}}\n --primary: oklch(0.715 0.143 215.221);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.715 0.143 215.221);\n --chart-1: oklch(0.715 0.143 215.221);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "emerald")}}\n --primary: oklch(0.696 0.17 162.48);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.696 0.17 162.48);\n --chart-1: oklch(0.696 0.17 162.48);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "fuchsia")}}\n --primary: oklch(0.667 0.295 322.15);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.667 0.295 322.15);\n --chart-1: oklch(0.667 0.295 322.15);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "indigo")}}\n --primary: oklch(0.585 0.233 277.117);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.585 0.233 277.117);\n --chart-1: oklch(0.585 0.233 277.117);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "lime")}}\n --primary: oklch(0.768 0.233 130.85);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.768 0.233 130.85);\n --chart-1: oklch(0.768 0.233 130.85);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "pink")}}\n --primary: oklch(0.718 0.202 349.761);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.718 0.202 349.761);\n --chart-1: oklch(0.718 0.202 349.761);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "rose")}}\n --primary: oklch(0.645 0.246 16.439);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.645 0.246 16.439);\n --chart-1: oklch(0.645 0.246 16.439);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "sky")}}\n --primary: oklch(0.685 0.169 237.323);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.685 0.169 237.323);\n --chart-1: oklch(0.685 0.169 237.323);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "teal")}}\n --primary: oklch(0.704 0.14 182.503);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.704 0.14 182.503);\n --chart-1: oklch(0.704 0.14 182.503);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "violet")}}\n --primary: oklch(0.606 0.25 292.717);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.606 0.25 292.717);\n --chart-1: oklch(0.606 0.25 292.717);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "yellow")}}\n --primary: oklch(0.795 0.184 86.047);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.795 0.184 86.047);\n --chart-1: oklch(0.795 0.184 86.047);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.646 0.222 41.116);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else}}\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{/if}}\n}\n\n[data-theme="dark"] {\n --background: oklch(0.145 0 0);\n --foreground: oklch(0.985 0 0);\n --card: oklch(0.205 0 0);\n --card-foreground: oklch(0.985 0 0);\n --popover: oklch(0.269 0 0);\n --popover-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.269 0 0);\n --secondary-foreground: oklch(0.985 0 0);\n --muted: oklch(0.269 0 0);\n --muted-foreground: oklch(0.708 0 0);\n --accent: oklch(0.371 0 0);\n --accent-foreground: oklch(0.985 0 0);\n --destructive: oklch(0.704 0.191 22.216);\n --border: oklch(1 0 0 / 10%);\n --input: oklch(1 0 0 / 15%);\n\n{{#if (eq shadcn.themeColor "neutral")}}\n --primary: oklch(0.922 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --ring: oklch(0.556 0 0);\n{{else if (eq shadcn.themeColor "blue")}}\n --primary: oklch(0.623 0.214 262.881);\n --primary-foreground: oklch(0.273 0.033 256.848);\n --ring: oklch(0.623 0.214 262.881);\n{{else if (eq shadcn.themeColor "green")}}\n --primary: oklch(0.696 0.17 162.48);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.696 0.17 162.48);\n{{else if (eq shadcn.themeColor "purple")}}\n --primary: oklch(0.714 0.203 305.504);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.714 0.203 305.504);\n{{else if (eq shadcn.themeColor "red")}}\n --primary: oklch(0.704 0.191 22.216);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.704 0.191 22.216);\n{{else if (eq shadcn.themeColor "orange")}}\n --primary: oklch(0.792 0.17 52.615);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.792 0.17 52.615);\n{{else if (eq shadcn.themeColor "amber")}}\n --primary: oklch(0.828 0.189 84.429);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.828 0.189 84.429);\n{{else if (eq shadcn.themeColor "cyan")}}\n --primary: oklch(0.789 0.154 211.53);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.789 0.154 211.53);\n{{else if (eq shadcn.themeColor "emerald")}}\n --primary: oklch(0.765 0.166 160.391);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.765 0.166 160.391);\n{{else if (eq shadcn.themeColor "fuchsia")}}\n --primary: oklch(0.74 0.238 322.16);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.74 0.238 322.16);\n{{else if (eq shadcn.themeColor "indigo")}}\n --primary: oklch(0.673 0.182 276.935);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.673 0.182 276.935);\n{{else if (eq shadcn.themeColor "lime")}}\n --primary: oklch(0.841 0.238 128.85);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.841 0.238 128.85);\n{{else if (eq shadcn.themeColor "pink")}}\n --primary: oklch(0.775 0.181 349.761);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.775 0.181 349.761);\n{{else if (eq shadcn.themeColor "rose")}}\n --primary: oklch(0.712 0.194 13.428);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.712 0.194 13.428);\n{{else if (eq shadcn.themeColor "sky")}}\n --primary: oklch(0.756 0.143 232.661);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.756 0.143 232.661);\n{{else if (eq shadcn.themeColor "teal")}}\n --primary: oklch(0.777 0.152 181.912);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.777 0.152 181.912);\n{{else if (eq shadcn.themeColor "violet")}}\n --primary: oklch(0.702 0.183 293.541);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.702 0.183 293.541);\n{{else if (eq shadcn.themeColor "yellow")}}\n --primary: oklch(0.852 0.199 91.936);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.852 0.199 91.936);\n{{else}}\n --primary: oklch(0.922 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --ring: oklch(0.556 0 0);\n{{/if}}\n}\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n body {\n @apply bg-background text-foreground;\n }\n}\n\n.container {\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: 1rem;\n padding-right: 1rem;\n max-width: 96rem;\n}\n\n@media (min-width: 640px) {\n .container {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n}\n\n@media (min-width: 1024px) {\n .container {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n\n/* ========================================\n HERO TYPOGRAPHY\n ======================================== */\n\n.hero-content h1 {\n font-size: 2.25rem !important;\n line-height: 2.5rem !important;\n font-weight: 700 !important;\n letter-spacing: -0.025em !important;\n margin-bottom: 1.5rem !important;\n color: var(--color-foreground) !important;\n}\n\n.hero-content p {\n font-size: 1.25rem !important;\n line-height: 1.75rem !important;\n color: var(--color-muted-foreground) !important;\n max-width: 42rem;\n margin-left: auto;\n margin-right: auto;\n margin-bottom: 2rem !important;\n}\n\n.hero-content--dark h1 {\n color: white !important;\n}\n\n.hero-content--dark p {\n color: rgba(255, 255, 255, 0.8) !important;\n}\n\n@media (min-width: 768px) {\n .hero-content h1 {\n font-size: 3.75rem !important;\n line-height: 1 !important;\n }\n}\n\n/* Left-aligned hero content */\n.hero-content--left h1 {\n text-align: left !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n.hero-content--left p {\n text-align: left !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n/* ========================================\n PRODUCT SHOWCASE HERO STYLES\n ======================================== */\n\n.hero-showcase {\n position: relative;\n border-radius: 1rem;\n overflow: hidden;\n height: 25rem;\n width: 100%;\n max-width: 75rem;\n margin: 0 auto;\n background: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, black) 100%);\n}\n\n@media (min-width: 768px) {\n .hero-showcase {\n height: 31.25rem;\n }\n}\n\n@media (min-width: 1024px) {\n .hero-showcase {\n height: 37.5rem;\n }\n}\n\n.hero-bg-image {\n position: absolute;\n inset: 0;\n z-index: 0;\n opacity: 0.1;\n}\n\n.hero-bg-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n.hero-mockup-centered {\n position: relative;\n z-index: 10;\n padding: 2rem;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n}\n\n@media (min-width: 768px) {\n .hero-mockup-centered {\n padding: 3rem;\n }\n}\n\n.mockup-wrapper {\n background: var(--color-background);\n border-radius: 12px;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);\n overflow: hidden;\n animation: mockup-entrance 0.8s ease-out;\n width: 100%;\n}\n\n.mockup-wrapper img {\n width: 100%;\n height: auto;\n display: block;\n}\n\n@keyframes mockup-entrance {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Browser chrome */\n.mockup-chrome {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n background: var(--color-muted);\n border-bottom: 1px solid var(--color-border);\n}\n\n.mockup-chrome-dots {\n display: flex;\n gap: 6px;\n}\n\n.mockup-chrome-dots .dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n}\n\n.mockup-chrome-dots .dot-red {\n background: #ff5f56;\n}\n.mockup-chrome-dots .dot-yellow {\n background: #ffbd2e;\n}\n.mockup-chrome-dots .dot-green {\n background: #27ca40;\n}\n\n.mockup-chrome-title {\n flex: 1;\n text-align: center;\n font-size: 13px;\n font-weight: 500;\n color: var(--color-muted-foreground);\n}\n\n.mockup-chrome-actions {\n width: 60px;\n}\n\n/* App content layout */\n.mockup-content {\n display: flex;\n min-height: 400px;\n}\n\n.mockup-sidebar {\n width: 220px;\n background: var(--color-card);\n border-right: 1px solid var(--color-border);\n flex-shrink: 0;\n}\n\n.sidebar-header {\n padding: 16px;\n border-bottom: 1px solid var(--color-border);\n}\n\n.sidebar-logo {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.logo-icon {\n width: 28px;\n height: 28px;\n background: var(--color-primary);\n color: white;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-size: 14px;\n}\n\n.logo-text {\n font-weight: 600;\n font-size: 14px;\n color: var(--color-foreground);\n}\n\n.sidebar-nav {\n padding: 8px;\n}\n\n.sidebar-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n border-radius: 6px;\n font-size: 13px;\n color: var(--color-muted-foreground);\n transition: all 0.15s ease;\n cursor: pointer;\n}\n\n.sidebar-item:hover {\n background: var(--color-accent);\n color: var(--color-accent-foreground);\n}\n\n.sidebar-item--active {\n background: oklch(from var(--color-primary) l c h / 0.12);\n color: var(--color-primary);\n}\n\n.sidebar-icon {\n font-size: 16px;\n}\n\n.sidebar-label {\n flex: 1;\n}\n\n.sidebar-badge {\n background: var(--color-primary);\n color: var(--color-primary-foreground);\n font-size: 11px;\n padding: 2px 6px;\n border-radius: 10px;\n font-weight: 500;\n}\n\n/* Main content area */\n.mockup-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: var(--color-background);\n}\n\n.main-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--color-border);\n}\n\n.header-title {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.header-title h2 {\n font-size: 16px;\n font-weight: 600;\n margin: 0;\n color: var(--color-foreground);\n}\n\n.header-breadcrumb {\n font-size: 12px;\n color: var(--color-muted-foreground);\n}\n\n.header-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.action-btn {\n padding: 8px 16px;\n background: var(--color-primary);\n color: var(--color-primary-foreground);\n border: none;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.action-btn--success {\n background: #27ca40;\n}\n\n.action-btn--featured {\n background: var(--color-primary);\n}\n\n/* Split view */\n.main-split {\n display: flex;\n flex: 1;\n}\n\n.editor-panel {\n flex: 1;\n padding: 20px;\n border-right: 1px solid var(--color-border);\n}\n\n.editor-section {\n margin-bottom: 20px;\n}\n\n.editor-label {\n display: block;\n font-size: 12px;\n font-weight: 500;\n color: var(--color-muted-foreground);\n margin-bottom: 6px;\n}\n\n.editor-input {\n background: var(--color-muted);\n border: 1px solid var(--color-border);\n border-radius: 6px;\n padding: 10px 12px;\n font-size: 14px;\n color: var(--color-foreground);\n display: flex;\n align-items: center;\n}\n\n.input-text {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.input-cursor {\n width: 2px;\n height: 18px;\n background: var(--color-primary);\n animation: blink 1s infinite;\n margin-left: 2px;\n}\n\n@keyframes blink {\n 0%,\n 50% {\n opacity: 1;\n }\n 51%,\n 100% {\n opacity: 0;\n }\n}\n\n.editor-select {\n background: var(--color-muted);\n border: 1px solid var(--color-border);\n border-radius: 6px;\n padding: 10px 12px;\n font-size: 14px;\n color: var(--color-foreground);\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.select-arrow {\n font-size: 10px;\n color: var(--color-muted-foreground);\n}\n\n.editor-textarea {\n background: var(--color-muted);\n border: 1px solid var(--color-border);\n border-radius: 6px;\n padding: 10px 12px;\n font-size: 14px;\n color: var(--color-foreground);\n min-height: 80px;\n}\n\n.textarea-text {\n transition: all 0.5s ease;\n}\n\n.textarea-text--complete {\n color: var(--color-foreground);\n}\n\n/* Preview panel */\n.preview-panel {\n width: 320px;\n padding: 20px;\n background: oklch(from var(--color-muted) l c h / 0.5);\n}\n\n.preview-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.preview-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--color-muted-foreground);\n}\n\n.preview-url {\n font-size: 11px;\n color: var(--color-muted-foreground);\n font-family: monospace;\n}\n\n.preview-card {\n background: var(--color-card);\n border: 1px solid var(--color-border);\n border-radius: 10px;\n overflow: hidden;\n position: relative;\n transition: all 0.3s ease;\n}\n\n.preview-badge {\n position: absolute;\n top: 10px;\n right: 10px;\n background: var(--color-primary);\n color: white;\n font-size: 11px;\n padding: 4px 8px;\n border-radius: 4px;\n font-weight: 500;\n animation: badge-pop 0.3s ease;\n}\n\n@keyframes badge-pop {\n from {\n transform: scale(0);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n.preview-image {\n height: 120px;\n background: linear-gradient(135deg, var(--color-muted) 0%, var(--color-accent) 100%);\n}\n\n.preview-image-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 40px;\n}\n\n.preview-content {\n padding: 16px;\n}\n\n.preview-category-tag {\n display: inline-block;\n font-size: 11px;\n color: var(--color-primary);\n font-weight: 500;\n margin-bottom: 8px;\n}\n\n.preview-title {\n font-size: 16px;\n font-weight: 600;\n margin: 0 0 8px;\n color: var(--color-foreground);\n}\n\n.preview-description {\n font-size: 13px;\n color: var(--color-muted-foreground);\n line-height: 1.5;\n margin: 0 0 12px;\n}\n\n.preview-meta {\n display: flex;\n gap: 8px;\n font-size: 12px;\n}\n\n.meta-rating {\n color: #ffc24a;\n}\n\n.meta-reviews {\n color: var(--color-muted-foreground);\n}\n\n/* State indicators */\n.mockup-indicators {\n display: flex;\n justify-content: center;\n gap: 24px;\n padding: 16px;\n border-top: 1px solid var(--color-border);\n}\n\n.indicator {\n display: flex;\n align-items: center;\n gap: 8px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 6px 12px;\n border-radius: 20px;\n transition: all 0.2s ease;\n}\n\n.indicator:hover {\n background: var(--color-accent);\n}\n\n.indicator--active {\n background: oklch(from var(--color-primary) l c h / 0.12);\n}\n\n.indicator-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--color-muted-foreground);\n transition: all 0.2s ease;\n}\n\n.indicator--active .indicator-dot {\n background: var(--color-primary);\n box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.2);\n}\n\n.indicator-label {\n font-size: 12px;\n color: var(--color-muted-foreground);\n}\n\n.indicator--active .indicator-label {\n color: var(--color-foreground);\n font-weight: 500;\n}\n\n/* ========================================\n LOGO BANNER STYLES\n ======================================== */\n\n.logo-scroll-container {\n overflow: hidden;\n mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\n}\n\n.logo-scroll-track {\n display: flex;\n animation: logo-scroll 30s linear infinite;\n}\n\n.logo-scroll-track:hover {\n animation-play-state: paused;\n}\n\n@keyframes logo-scroll {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n\n.logo-item {\n flex-shrink: 0;\n min-width: 150px;\n}\n\n/* ========================================\n RESPONSIVE ADJUSTMENTS\n ======================================== */\n\n@media (max-width: 768px) {\n .mockup-content {\n flex-direction: column;\n }\n\n .mockup-sidebar {\n width: 100%;\n border-right: none;\n border-bottom: 1px solid var(--color-border);\n }\n\n .sidebar-nav {\n display: flex;\n overflow-x: auto;\n padding: 8px;\n gap: 4px;\n }\n\n .sidebar-item {\n white-space: nowrap;\n }\n\n .main-split {\n flex-direction: column;\n }\n\n .editor-panel {\n border-right: none;\n border-bottom: 1px solid var(--color-border);\n }\n\n .preview-panel {\n width: 100%;\n }\n\n .mockup-indicators {\n flex-wrap: wrap;\n gap: 12px;\n }\n\n .indicator-label {\n display: none;\n }\n}\n\n/* ========================================\n ANIMATION STYLES\n ======================================== */\n\n/* Industry Tabs Animation */\n.industry-tab-content {\n animation: tab-fade-in 0.3s ease-out;\n}\n\n@keyframes tab-fade-in {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Feature Showcase Entrance Animation */\n@keyframes feature-slide-in {\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n.feature-showcase-content {\n animation: feature-slide-in 0.5s ease-out;\n}\n\n/* Testimonial Card Hover Effects */\n.testimonial-card {\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.testimonial-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);\n}\n\n/* Stat Number Animation */\n@keyframes stat-count-up {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.stat-number {\n animation: stat-count-up 0.6s ease-out;\n}\n\n/* Trust Column Icon Animation */\n.trust-icon {\n transition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.trust-icon:hover {\n transform: scale(1.1);\n}\n\n/* Final CTA Background Animation */\n@keyframes subtle-float {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-10px);\n }\n}\n\n.cta-decorative {\n animation: subtle-float 6s ease-in-out infinite;\n}\n\n/* Feature Grid Card Entrance */\n@keyframes card-entrance {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.feature-card {\n animation: card-entrance 0.4s ease-out;\n animation-fill-mode: both;\n}\n\n.feature-card:nth-child(1) {\n animation-delay: 0.1s;\n}\n.feature-card:nth-child(2) {\n animation-delay: 0.2s;\n}\n.feature-card:nth-child(3) {\n animation-delay: 0.3s;\n}\n.feature-card:nth-child(4) {\n animation-delay: 0.4s;\n}\n.feature-card:nth-child(5) {\n animation-delay: 0.5s;\n}\n.feature-card:nth-child(6) {\n animation-delay: 0.6s;\n}\n\n/* Smooth Section Transitions */\nsection {\n scroll-margin-top: 80px;\n}\n\n/* Button Hover Enhancement */\n.cta-button {\n position: relative;\n overflow: hidden;\n}\n\n.cta-button::after {\n content: "";\n position: absolute;\n inset: 0;\n background: linear-gradient(rgba(255, 255, 255, 0.1), transparent);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.cta-button:hover::after {\n opacity: 1;\n}\n\n/* Responsive Image Container */\n.feature-image-container {\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.feature-image-container:hover {\n transform: translateY(-4px);\n box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);\n}\n',
|
|
2623
2623
|
"marketing/astro/tsconfig.json.hbs": '{\n "extends": "astro/tsconfigs/strict",\n "compilerOptions": {\n "baseUrl": ".",\n "paths": {\n "@/*": ["./src/*"]\n }\n },\n "include": ["src/**/*", ".astro/types.d.ts"],\n "exclude": ["node_modules", "dist"]\n}\n',
|
|
2624
2624
|
"marketing/nextjs/next.config.ts.hbs": "import type { NextConfig } from 'next'\n\nconst nextConfig: NextConfig = {\n transpilePackages: ['@repo/ui'],\n}\n\nexport default nextConfig\n",
|
|
2625
2625
|
"marketing/nextjs/package.json.hbs": '{\n "name": "@repo/marketing",\n "version": "0.1.0",\n "private": true,\n "scripts": {\n "dev": "next dev --turbopack --port 3000",\n "build": "next build",\n "start": "next start",\n "lint": "biome check .",\n "lint:fix": "biome check --write .",\n "typecheck": "tsc --noEmit"\n },\n "dependencies": {\n "next": "^16.0.0",\n "react": "^19.0.0",\n "react-dom": "^19.0.0",\n "@repo/ui": "workspace:*",\n "lucide-react": "^0.468.0",\n "next-themes": "^0.4.4",\n "clsx": "^2.1.1",\n "tailwind-merge": "^2.6.0",\n "class-variance-authority": "^0.7.1"\n },\n "devDependencies": {\n "@repo/config-typescript": "workspace:*",\n "@types/node": "^20.0.0",\n "@types/react": "^19.0.0",\n "@types/react-dom": "^19.0.0",\n "tailwindcss": "^4.0.0",\n "@tailwindcss/postcss": "^4.0.0",\n "postcss": "^8.4.0",\n "typescript": "^5.0.0"\n }\n}\n',
|
|
@@ -2723,7 +2723,7 @@ export default function BlogPage() {
|
|
|
2723
2723
|
}
|
|
2724
2724
|
`,
|
|
2725
2725
|
"marketing/nextjs/src/app/features/page.tsx": 'import { Header } from "@/components/Header"\nimport { Footer } from "@/components/Footer"\nimport {\n BentoFeatures,\n FeatureShowcase,\n LogoBanner,\n FinalCTA,\n} from "@/components/blocks"\n\nexport default function FeaturesPage() {\n return (\n <div className="min-h-screen flex flex-col">\n <Header />\n\n <main className="flex-1">\n {/* Hero */}\n <section className="py-16 md:py-24">\n <div className="container mx-auto px-4 text-center">\n <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">\n Powerful features for modern teams\n </h1>\n <p className="text-xl text-muted-foreground max-w-2xl mx-auto">\n Everything you need to streamline workflows, boost productivity, and scale your business.\n </p>\n </div>\n </section>\n\n {/* Bento Features */}\n <BentoFeatures\n heading="Discover what SaaSify can do"\n subheading="Everything you need to work smarter and scale faster"\n />\n\n {/* Feature Showcase: Integrations */}\n <FeatureShowcase\n label="Seamless Integrations"\n headline="Connect everything your team uses in one place"\n description="Integrate with 100+ popular tools including Slack, Salesforce, HubSpot, and more. Two-way sync keeps everything up to date automatically."\n features={[\n { text: "100+ native integrations" },\n { text: "Two-way data sync" },\n { text: "Custom webhooks" },\n { text: "API access included" },\n ]}\n link={{ label: "Learn more", href: "#" }}\n imagePosition="right"\n />\n\n {/* Feature Showcase: Analytics */}\n <FeatureShowcase\n label="Actionable Analytics"\n headline="Make decisions backed by real-time data"\n description="Track every metric that matters. From team performance to customer insights, get the visibility you need to drive growth."\n features={[\n { text: "Real-time dashboards" },\n { text: "Custom reports" },\n { text: "Team performance metrics" },\n { text: "Automated insights" },\n ]}\n link={{ label: "Learn more", href: "#" }}\n imagePosition="left"\n />\n\n {/* Feature Showcase: Automation */}\n <FeatureShowcase\n label="Workflow Automation"\n headline="Eliminate busywork with smart automation"\n description="Build powerful workflows without code. Automate approvals, notifications, data entry, and more to focus on what matters."\n features={[\n { text: "Visual workflow builder" },\n { text: "Conditional logic" },\n { text: "Scheduled triggers" },\n { text: "Cross-app automation" },\n ]}\n link={{ label: "Learn more", href: "#" }}\n imagePosition="right"\n />\n\n {/* Logo Banner */}\n <LogoBanner\n heading="Integrates with your favorite tools"\n style="grid"\n logos={[\n { name: "Slack", initials: "SL" },\n { name: "Salesforce", initials: "SF" },\n { name: "HubSpot", initials: "HS" },\n { name: "Google Workspace", initials: "GW" },\n { name: "Zapier", initials: "ZP" },\n { name: "Jira", initials: "JI" },\n ]}\n />\n\n {/* Final CTA */}\n <FinalCTA\n headline="Ready to transform how your team works?"\n subheading="Start your free trial today. No credit card required."\n style="dark"\n links={[\n { label: "Start free trial", href: "/sign-up", variant: "outline" },\n { label: "View pricing", href: "/pricing", variant: "default" },\n ]}\n />\n </main>\n\n <Footer />\n </div>\n )\n}\n',
|
|
2726
|
-
"marketing/nextjs/src/app/globals.css.hbs": '@import "tailwindcss";\n@import "tw-animate-css";\n\n@custom-variant dark (&:is(.dark *));\n\n@theme inline {\n /* Colors */\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n\n --color-card: var(--card);\n --color-card-foreground: var(--card-foreground);\n\n --color-popover: var(--popover);\n --color-popover-foreground: var(--popover-foreground);\n\n --color-primary: var(--primary);\n --color-primary-foreground: var(--primary-foreground);\n\n --color-secondary: var(--secondary);\n --color-secondary-foreground: var(--secondary-foreground);\n\n --color-muted: var(--muted);\n --color-muted-foreground: var(--muted-foreground);\n\n --color-accent: var(--accent);\n --color-accent-foreground: var(--accent-foreground);\n\n --color-destructive: var(--destructive);\n\n --color-border: var(--border);\n --color-input: var(--input);\n --color-ring: var(--ring);\n\n --color-chart-1: var(--chart-1);\n --color-chart-2: var(--chart-2);\n --color-chart-3: var(--chart-3);\n --color-chart-4: var(--chart-4);\n --color-chart-5: var(--chart-5);\n\n /* Border radius */\n --radius-sm: calc(var(--radius) - 4px);\n --radius-md: calc(var(--radius) - 2px);\n --radius-lg: var(--radius);\n --radius-xl: calc(var(--radius) + 4px);\n\n /* Fonts */\n --font-sans: var(--font-geist-sans), system-ui, sans-serif;\n --font-mono: var(--font-geist-mono), monospace;\n\n /* Container */\n --container-sm: 40rem;\n --container-md: 48rem;\n --container-lg: 64rem;\n --container-xl: 80rem;\n --container-2xl: 96rem;\n\n /* Animations */\n --animate-accordion-down: accordion-down 0.2s ease-out;\n --animate-accordion-up: accordion-up 0.2s ease-out;\n}\n\n@keyframes accordion-down {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n}\n\n@keyframes accordion-up {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n}\n\n/* ========================================\n THEME COLOR VARIABLES\n ======================================== */\n\n:root {\n --radius: 0.625rem;\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.577 0.245 27.325);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n\n{{#if (eq shadcn.themeColor "neutral")}}\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "blue")}}\n --primary: oklch(0.546 0.245 262.881);\n --primary-foreground: oklch(0.985 0.002 247.858);\n --ring: oklch(0.546 0.245 262.881);\n --chart-1: oklch(0.546 0.245 262.881);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "green")}}\n --primary: oklch(0.596 0.145 163.225);\n --primary-foreground: oklch(0.982 0.018 155.826);\n --ring: oklch(0.596 0.145 163.225);\n --chart-1: oklch(0.596 0.145 163.225);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "purple")}}\n --primary: oklch(0.627 0.265 303.9);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.627 0.265 303.9);\n --chart-1: oklch(0.627 0.265 303.9);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "red")}}\n --primary: oklch(0.637 0.237 25.331);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.637 0.237 25.331);\n --chart-1: oklch(0.637 0.237 25.331);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "orange")}}\n --primary: oklch(0.705 0.191 47.604);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.705 0.191 47.604);\n --chart-1: oklch(0.705 0.191 47.604);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "amber")}}\n --primary: oklch(0.769 0.188 70.08);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.769 0.188 70.08);\n --chart-1: oklch(0.769 0.188 70.08);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.646 0.222 41.116);\n{{else if (eq shadcn.themeColor "cyan")}}\n --primary: oklch(0.715 0.143 215.221);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.715 0.143 215.221);\n --chart-1: oklch(0.715 0.143 215.221);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "emerald")}}\n --primary: oklch(0.696 0.17 162.48);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.696 0.17 162.48);\n --chart-1: oklch(0.696 0.17 162.48);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "fuchsia")}}\n --primary: oklch(0.667 0.295 322.15);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.667 0.295 322.15);\n --chart-1: oklch(0.667 0.295 322.15);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "indigo")}}\n --primary: oklch(0.585 0.233 277.117);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.585 0.233 277.117);\n --chart-1: oklch(0.585 0.233 277.117);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "lime")}}\n --primary: oklch(0.768 0.233 130.85);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.768 0.233 130.85);\n --chart-1: oklch(0.768 0.233 130.85);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "pink")}}\n --primary: oklch(0.718 0.202 349.761);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.718 0.202 349.761);\n --chart-1: oklch(0.718 0.202 349.761);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "rose")}}\n --primary: oklch(0.645 0.246 16.439);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.645 0.246 16.439);\n --chart-1: oklch(0.645 0.246 16.439);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "sky")}}\n --primary: oklch(0.685 0.169 237.323);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.685 0.169 237.323);\n --chart-1: oklch(0.685 0.169 237.323);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "teal")}}\n --primary: oklch(0.704 0.14 182.503);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.704 0.14 182.503);\n --chart-1: oklch(0.704 0.14 182.503);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "violet")}}\n --primary: oklch(0.606 0.25 292.717);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.606 0.25 292.717);\n --chart-1: oklch(0.606 0.25 292.717);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "yellow")}}\n --primary: oklch(0.795 0.184 86.047);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.795 0.184 86.047);\n --chart-1: oklch(0.795 0.184 86.047);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.646 0.222 41.116);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else}}\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{/if}}\n}\n\n.dark {\n --background: oklch(0.145 0 0);\n --foreground: oklch(0.985 0 0);\n --card: oklch(0.205 0 0);\n --card-foreground: oklch(0.985 0 0);\n --popover: oklch(0.269 0 0);\n --popover-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.269 0 0);\n --secondary-foreground: oklch(0.985 0 0);\n --muted: oklch(0.269 0 0);\n --muted-foreground: oklch(0.708 0 0);\n --accent: oklch(0.371 0 0);\n --accent-foreground: oklch(0.985 0 0);\n --destructive: oklch(0.704 0.191 22.216);\n --border: oklch(1 0 0 / 10%);\n --input: oklch(1 0 0 / 15%);\n\n{{#if (eq shadcn.themeColor "neutral")}}\n --primary: oklch(0.922 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --ring: oklch(0.556 0 0);\n --chart-1: oklch(0.488 0.243 264.376);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "blue")}}\n --primary: oklch(0.623 0.214 262.881);\n --primary-foreground: oklch(0.273 0.033 256.848);\n --ring: oklch(0.623 0.214 262.881);\n --chart-1: oklch(0.623 0.214 262.881);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "green")}}\n --primary: oklch(0.696 0.17 162.48);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.696 0.17 162.48);\n --chart-1: oklch(0.696 0.17 162.48);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "purple")}}\n --primary: oklch(0.714 0.203 305.504);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.714 0.203 305.504);\n --chart-1: oklch(0.714 0.203 305.504);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.488 0.243 264.376);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "red")}}\n --primary: oklch(0.704 0.191 22.216);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.704 0.191 22.216);\n --chart-1: oklch(0.704 0.191 22.216);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor "orange")}}\n --primary: oklch(0.792 0.17 52.615);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.792 0.17 52.615);\n --chart-1: oklch(0.792 0.17 52.615);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "amber")}}\n --primary: oklch(0.828 0.189 84.429);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.828 0.189 84.429);\n --chart-1: oklch(0.828 0.189 84.429);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.488 0.243 264.376);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "cyan")}}\n --primary: oklch(0.789 0.154 211.53);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.789 0.154 211.53);\n --chart-1: oklch(0.789 0.154 211.53);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "emerald")}}\n --primary: oklch(0.765 0.166 160.391);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.765 0.166 160.391);\n --chart-1: oklch(0.765 0.166 160.391);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "fuchsia")}}\n --primary: oklch(0.74 0.238 322.16);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.74 0.238 322.16);\n --chart-1: oklch(0.74 0.238 322.16);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.488 0.243 264.376);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "indigo")}}\n --primary: oklch(0.673 0.182 276.935);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.673 0.182 276.935);\n --chart-1: oklch(0.673 0.182 276.935);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "lime")}}\n --primary: oklch(0.841 0.238 128.85);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.841 0.238 128.85);\n --chart-1: oklch(0.841 0.238 128.85);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "pink")}}\n --primary: oklch(0.775 0.181 349.761);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.775 0.181 349.761);\n --chart-1: oklch(0.775 0.181 349.761);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor "rose")}}\n --primary: oklch(0.712 0.194 13.428);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.712 0.194 13.428);\n --chart-1: oklch(0.712 0.194 13.428);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor "sky")}}\n --primary: oklch(0.756 0.143 232.661);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.756 0.143 232.661);\n --chart-1: oklch(0.756 0.143 232.661);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "teal")}}\n --primary: oklch(0.777 0.152 181.912);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.777 0.152 181.912);\n --chart-1: oklch(0.777 0.152 181.912);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "violet")}}\n --primary: oklch(0.702 0.183 293.541);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.702 0.183 293.541);\n --chart-1: oklch(0.702 0.183 293.541);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.488 0.243 264.376);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "yellow")}}\n --primary: oklch(0.852 0.199 91.936);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.852 0.199 91.936);\n --chart-1: oklch(0.852 0.199 91.936);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.488 0.243 264.376);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else}}\n --primary: oklch(0.922 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --ring: oklch(0.556 0 0);\n --chart-1: oklch(0.488 0.243 264.376);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{/if}}\n}\n\n/* ========================================\n BASE STYLES\n ======================================== */\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n body {\n @apply bg-background text-foreground;\n }\n}\n\n/* Container utility */\n.container {\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: 1rem;\n padding-right: 1rem;\n max-width: 96rem;\n}\n\n@media (min-width: 640px) {\n .container {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n}\n\n@media (min-width: 1024px) {\n .container {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n\n/* ========================================\n HERO TYPOGRAPHY\n ======================================== */\n\n.hero-content h1 {\n font-size: 2.25rem !important;\n line-height: 2.5rem !important;\n font-weight: 700 !important;\n letter-spacing: -0.025em !important;\n margin-bottom: 1.5rem !important;\n color: var(--color-foreground) !important;\n}\n\n.hero-content p {\n font-size: 1.25rem !important;\n line-height: 1.75rem !important;\n color: var(--color-muted-foreground) !important;\n max-width: 42rem;\n margin-left: auto;\n margin-right: auto;\n margin-bottom: 2rem !important;\n}\n\n.hero-content--dark h1 {\n color: white !important;\n}\n\n.hero-content--dark p {\n color: rgba(255, 255, 255, 0.8) !important;\n}\n\n@media (min-width: 768px) {\n .hero-content h1 {\n font-size: 3.75rem !important;\n line-height: 1 !important;\n }\n}\n\n/* Left-aligned hero content */\n.hero-content--left h1 {\n text-align: left !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n.hero-content--left p {\n text-align: left !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n/* ========================================\n PRODUCT SHOWCASE HERO STYLES\n ======================================== */\n\n.hero-showcase {\n position: relative;\n border-radius: 1rem;\n overflow: hidden;\n height: 400px;\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n background: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, black) 100%);\n}\n\n@media (min-width: 768px) {\n .hero-showcase {\n height: 500px;\n }\n}\n\n@media (min-width: 1024px) {\n .hero-showcase {\n height: 600px;\n }\n}\n\n.hero-bg-image {\n position: absolute;\n inset: 0;\n z-index: 0;\n opacity: 0.1;\n}\n\n.hero-bg-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n.hero-mockup-centered {\n position: relative;\n z-index: 10;\n padding: 2rem;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n}\n\n@media (min-width: 768px) {\n .hero-mockup-centered {\n padding: 3rem;\n }\n}\n\n.mockup-wrapper {\n background: var(--color-background);\n border-radius: 12px;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);\n overflow: hidden;\n animation: mockup-entrance 0.8s ease-out;\n width: 100%;\n}\n\n.mockup-wrapper img {\n width: 100%;\n height: auto;\n display: block;\n}\n\n@keyframes mockup-entrance {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Browser chrome */\n.mockup-chrome {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n background: var(--color-muted);\n border-bottom: 1px solid var(--color-border);\n}\n\n.mockup-chrome-dots {\n display: flex;\n gap: 6px;\n}\n\n.mockup-chrome-dots .dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n}\n\n.mockup-chrome-dots .dot-red {\n background: #ff5f56;\n}\n.mockup-chrome-dots .dot-yellow {\n background: #ffbd2e;\n}\n.mockup-chrome-dots .dot-green {\n background: #27ca40;\n}\n\n.mockup-chrome-title {\n flex: 1;\n text-align: center;\n font-size: 13px;\n font-weight: 500;\n color: var(--color-muted-foreground);\n}\n\n.mockup-chrome-actions {\n width: 60px;\n}\n\n/* App content layout */\n.mockup-content {\n display: flex;\n min-height: 400px;\n}\n\n.mockup-sidebar {\n width: 220px;\n background: var(--color-card);\n border-right: 1px solid var(--color-border);\n flex-shrink: 0;\n}\n\n.sidebar-header {\n padding: 16px;\n border-bottom: 1px solid var(--color-border);\n}\n\n.sidebar-logo {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.logo-icon {\n width: 28px;\n height: 28px;\n background: var(--color-primary);\n color: white;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-size: 14px;\n}\n\n.logo-text {\n font-weight: 600;\n font-size: 14px;\n color: var(--color-foreground);\n}\n\n.sidebar-nav {\n padding: 8px;\n}\n\n.sidebar-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n border-radius: 6px;\n font-size: 13px;\n color: var(--color-muted-foreground);\n transition: all 0.15s ease;\n cursor: pointer;\n}\n\n.sidebar-item:hover {\n background: var(--color-accent);\n color: var(--color-accent-foreground);\n}\n\n.sidebar-item--active {\n background: oklch(from var(--color-primary) l c h / 0.12);\n color: var(--color-primary);\n}\n\n.sidebar-icon {\n font-size: 16px;\n}\n\n.sidebar-label {\n flex: 1;\n}\n\n.sidebar-badge {\n background: var(--color-primary);\n color: var(--color-primary-foreground);\n font-size: 11px;\n padding: 2px 6px;\n border-radius: 10px;\n font-weight: 500;\n}\n\n/* Main content area */\n.mockup-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: var(--color-background);\n}\n\n.main-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--color-border);\n}\n\n.header-title {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.header-title h2 {\n font-size: 16px;\n font-weight: 600;\n margin: 0;\n color: var(--color-foreground);\n}\n\n.header-breadcrumb {\n font-size: 12px;\n color: var(--color-muted-foreground);\n}\n\n.header-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.action-btn {\n padding: 8px 16px;\n background: var(--color-primary);\n color: var(--color-primary-foreground);\n border: none;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.action-btn--success {\n background: #27ca40;\n}\n\n.action-btn--featured {\n background: var(--color-primary);\n}\n\n/* Split view */\n.main-split {\n display: flex;\n flex: 1;\n}\n\n.editor-panel {\n flex: 1;\n padding: 20px;\n border-right: 1px solid var(--color-border);\n}\n\n.editor-section {\n margin-bottom: 20px;\n}\n\n.editor-label {\n display: block;\n font-size: 12px;\n font-weight: 500;\n color: var(--color-muted-foreground);\n margin-bottom: 6px;\n}\n\n.editor-input {\n background: var(--color-muted);\n border: 1px solid var(--color-border);\n border-radius: 6px;\n padding: 10px 12px;\n font-size: 14px;\n color: var(--color-foreground);\n display: flex;\n align-items: center;\n}\n\n.input-text {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.input-cursor {\n width: 2px;\n height: 18px;\n background: var(--color-primary);\n animation: blink 1s infinite;\n margin-left: 2px;\n}\n\n@keyframes blink {\n 0%,\n 50% {\n opacity: 1;\n }\n 51%,\n 100% {\n opacity: 0;\n }\n}\n\n.editor-select {\n background: var(--color-muted);\n border: 1px solid var(--color-border);\n border-radius: 6px;\n padding: 10px 12px;\n font-size: 14px;\n color: var(--color-foreground);\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.select-arrow {\n font-size: 10px;\n color: var(--color-muted-foreground);\n}\n\n.editor-textarea {\n background: var(--color-muted);\n border: 1px solid var(--color-border);\n border-radius: 6px;\n padding: 10px 12px;\n font-size: 14px;\n color: var(--color-foreground);\n min-height: 80px;\n}\n\n.textarea-text {\n transition: all 0.5s ease;\n}\n\n.textarea-text--complete {\n color: var(--color-foreground);\n}\n\n/* Preview panel */\n.preview-panel {\n width: 320px;\n padding: 20px;\n background: oklch(from var(--color-muted) l c h / 0.5);\n}\n\n.preview-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.preview-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--color-muted-foreground);\n}\n\n.preview-url {\n font-size: 11px;\n color: var(--color-muted-foreground);\n font-family: monospace;\n}\n\n.preview-card {\n background: var(--color-card);\n border: 1px solid var(--color-border);\n border-radius: 10px;\n overflow: hidden;\n position: relative;\n transition: all 0.3s ease;\n}\n\n.preview-badge {\n position: absolute;\n top: 10px;\n right: 10px;\n background: var(--color-primary);\n color: white;\n font-size: 11px;\n padding: 4px 8px;\n border-radius: 4px;\n font-weight: 500;\n animation: badge-pop 0.3s ease;\n}\n\n@keyframes badge-pop {\n from {\n transform: scale(0);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n.preview-image {\n height: 120px;\n background: linear-gradient(135deg, var(--color-muted) 0%, var(--color-accent) 100%);\n}\n\n.preview-image-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 40px;\n}\n\n.preview-content {\n padding: 16px;\n}\n\n.preview-category-tag {\n display: inline-block;\n font-size: 11px;\n color: var(--color-primary);\n font-weight: 500;\n margin-bottom: 8px;\n}\n\n.preview-title {\n font-size: 16px;\n font-weight: 600;\n margin: 0 0 8px;\n color: var(--color-foreground);\n}\n\n.preview-description {\n font-size: 13px;\n color: var(--color-muted-foreground);\n line-height: 1.5;\n margin: 0 0 12px;\n}\n\n.preview-meta {\n display: flex;\n gap: 8px;\n font-size: 12px;\n}\n\n.meta-rating {\n color: #ffc24a;\n}\n\n.meta-reviews {\n color: var(--color-muted-foreground);\n}\n\n/* State indicators */\n.mockup-indicators {\n display: flex;\n justify-content: center;\n gap: 24px;\n padding: 16px;\n border-top: 1px solid var(--color-border);\n}\n\n.indicator {\n display: flex;\n align-items: center;\n gap: 8px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 6px 12px;\n border-radius: 20px;\n transition: all 0.2s ease;\n}\n\n.indicator:hover {\n background: var(--color-accent);\n}\n\n.indicator--active {\n background: oklch(from var(--color-primary) l c h / 0.12);\n}\n\n.indicator-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--color-muted-foreground);\n transition: all 0.2s ease;\n}\n\n.indicator--active .indicator-dot {\n background: var(--color-primary);\n box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.2);\n}\n\n.indicator-label {\n font-size: 12px;\n color: var(--color-muted-foreground);\n}\n\n.indicator--active .indicator-label {\n color: var(--color-foreground);\n font-weight: 500;\n}\n\n/* ========================================\n LOGO BANNER STYLES\n ======================================== */\n\n.logo-scroll-container {\n overflow: hidden;\n mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\n}\n\n.logo-scroll-track {\n display: flex;\n animation: logo-scroll 30s linear infinite;\n}\n\n.logo-scroll-track:hover {\n animation-play-state: paused;\n}\n\n@keyframes logo-scroll {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n\n.logo-item {\n flex-shrink: 0;\n min-width: 150px;\n}\n\n/* ========================================\n RESPONSIVE ADJUSTMENTS\n ======================================== */\n\n@media (max-width: 768px) {\n .mockup-content {\n flex-direction: column;\n }\n\n .mockup-sidebar {\n width: 100%;\n border-right: none;\n border-bottom: 1px solid var(--color-border);\n }\n\n .sidebar-nav {\n display: flex;\n overflow-x: auto;\n padding: 8px;\n gap: 4px;\n }\n\n .sidebar-item {\n white-space: nowrap;\n }\n\n .main-split {\n flex-direction: column;\n }\n\n .editor-panel {\n border-right: none;\n border-bottom: 1px solid var(--color-border);\n }\n\n .preview-panel {\n width: 100%;\n }\n\n .mockup-indicators {\n flex-wrap: wrap;\n gap: 12px;\n }\n\n .indicator-label {\n display: none;\n }\n}\n\n/* ========================================\n ANIMATION STYLES\n ======================================== */\n\n/* Industry Tabs Animation */\n.industry-tab-content {\n animation: tab-fade-in 0.3s ease-out;\n}\n\n@keyframes tab-fade-in {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Feature Showcase Entrance Animation */\n@keyframes feature-slide-in {\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n.feature-showcase-content {\n animation: feature-slide-in 0.5s ease-out;\n}\n\n/* Testimonial Card Hover Effects */\n.testimonial-card {\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.testimonial-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);\n}\n\n/* Stat Number Animation */\n@keyframes stat-count-up {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.stat-number {\n animation: stat-count-up 0.6s ease-out;\n}\n\n/* Trust Column Icon Animation */\n.trust-icon {\n transition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.trust-icon:hover {\n transform: scale(1.1);\n}\n\n/* Final CTA Background Animation */\n@keyframes subtle-float {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-10px);\n }\n}\n\n.cta-decorative {\n animation: subtle-float 6s ease-in-out infinite;\n}\n\n/* Feature Grid Card Entrance */\n@keyframes card-entrance {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.feature-card {\n animation: card-entrance 0.4s ease-out;\n animation-fill-mode: both;\n}\n\n.feature-card:nth-child(1) {\n animation-delay: 0.1s;\n}\n.feature-card:nth-child(2) {\n animation-delay: 0.2s;\n}\n.feature-card:nth-child(3) {\n animation-delay: 0.3s;\n}\n.feature-card:nth-child(4) {\n animation-delay: 0.4s;\n}\n.feature-card:nth-child(5) {\n animation-delay: 0.5s;\n}\n.feature-card:nth-child(6) {\n animation-delay: 0.6s;\n}\n\n/* Smooth Section Transitions */\nsection {\n scroll-margin-top: 80px;\n}\n\n/* Button Hover Enhancement */\n.cta-button {\n position: relative;\n overflow: hidden;\n}\n\n.cta-button::after {\n content: "";\n position: absolute;\n inset: 0;\n background: linear-gradient(rgba(255, 255, 255, 0.1), transparent);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.cta-button:hover::after {\n opacity: 1;\n}\n\n/* Responsive Image Container */\n.feature-image-container {\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.feature-image-container:hover {\n transform: translateY(-4px);\n box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);\n}\n',
|
|
2726
|
+
"marketing/nextjs/src/app/globals.css.hbs": '@import "tailwindcss";\n@import "tw-animate-css";\n\n@custom-variant dark (&:is(.dark *));\n\n@theme inline {\n /* Colors */\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n\n --color-card: var(--card);\n --color-card-foreground: var(--card-foreground);\n\n --color-popover: var(--popover);\n --color-popover-foreground: var(--popover-foreground);\n\n --color-primary: var(--primary);\n --color-primary-foreground: var(--primary-foreground);\n\n --color-secondary: var(--secondary);\n --color-secondary-foreground: var(--secondary-foreground);\n\n --color-muted: var(--muted);\n --color-muted-foreground: var(--muted-foreground);\n\n --color-accent: var(--accent);\n --color-accent-foreground: var(--accent-foreground);\n\n --color-destructive: var(--destructive);\n\n --color-border: var(--border);\n --color-input: var(--input);\n --color-ring: var(--ring);\n\n --color-chart-1: var(--chart-1);\n --color-chart-2: var(--chart-2);\n --color-chart-3: var(--chart-3);\n --color-chart-4: var(--chart-4);\n --color-chart-5: var(--chart-5);\n\n /* Border radius */\n --radius-sm: calc(var(--radius) - 4px);\n --radius-md: calc(var(--radius) - 2px);\n --radius-lg: var(--radius);\n --radius-xl: calc(var(--radius) + 4px);\n\n /* Fonts */\n --font-sans: var(--font-geist-sans), system-ui, sans-serif;\n --font-mono: var(--font-geist-mono), monospace;\n\n /* Container */\n --container-sm: 40rem;\n --container-md: 48rem;\n --container-lg: 64rem;\n --container-xl: 80rem;\n --container-2xl: 96rem;\n\n /* Animations */\n --animate-accordion-down: accordion-down 0.2s ease-out;\n --animate-accordion-up: accordion-up 0.2s ease-out;\n}\n\n@keyframes accordion-down {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n}\n\n@keyframes accordion-up {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n}\n\n/* ========================================\n THEME COLOR VARIABLES\n ======================================== */\n\n:root {\n --radius: 0.625rem;\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.577 0.245 27.325);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n\n{{#if (eq shadcn.themeColor "neutral")}}\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "blue")}}\n --primary: oklch(0.546 0.245 262.881);\n --primary-foreground: oklch(0.985 0.002 247.858);\n --ring: oklch(0.546 0.245 262.881);\n --chart-1: oklch(0.546 0.245 262.881);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "green")}}\n --primary: oklch(0.596 0.145 163.225);\n --primary-foreground: oklch(0.982 0.018 155.826);\n --ring: oklch(0.596 0.145 163.225);\n --chart-1: oklch(0.596 0.145 163.225);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "purple")}}\n --primary: oklch(0.627 0.265 303.9);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.627 0.265 303.9);\n --chart-1: oklch(0.627 0.265 303.9);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "red")}}\n --primary: oklch(0.637 0.237 25.331);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.637 0.237 25.331);\n --chart-1: oklch(0.637 0.237 25.331);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "orange")}}\n --primary: oklch(0.705 0.191 47.604);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.705 0.191 47.604);\n --chart-1: oklch(0.705 0.191 47.604);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "amber")}}\n --primary: oklch(0.769 0.188 70.08);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.769 0.188 70.08);\n --chart-1: oklch(0.769 0.188 70.08);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.646 0.222 41.116);\n{{else if (eq shadcn.themeColor "cyan")}}\n --primary: oklch(0.715 0.143 215.221);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.715 0.143 215.221);\n --chart-1: oklch(0.715 0.143 215.221);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "emerald")}}\n --primary: oklch(0.696 0.17 162.48);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.696 0.17 162.48);\n --chart-1: oklch(0.696 0.17 162.48);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "fuchsia")}}\n --primary: oklch(0.667 0.295 322.15);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.667 0.295 322.15);\n --chart-1: oklch(0.667 0.295 322.15);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "indigo")}}\n --primary: oklch(0.585 0.233 277.117);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.585 0.233 277.117);\n --chart-1: oklch(0.585 0.233 277.117);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "lime")}}\n --primary: oklch(0.768 0.233 130.85);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.768 0.233 130.85);\n --chart-1: oklch(0.768 0.233 130.85);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "pink")}}\n --primary: oklch(0.718 0.202 349.761);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.718 0.202 349.761);\n --chart-1: oklch(0.718 0.202 349.761);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "rose")}}\n --primary: oklch(0.645 0.246 16.439);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.645 0.246 16.439);\n --chart-1: oklch(0.645 0.246 16.439);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "sky")}}\n --primary: oklch(0.685 0.169 237.323);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.685 0.169 237.323);\n --chart-1: oklch(0.685 0.169 237.323);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "teal")}}\n --primary: oklch(0.704 0.14 182.503);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.704 0.14 182.503);\n --chart-1: oklch(0.704 0.14 182.503);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "violet")}}\n --primary: oklch(0.606 0.25 292.717);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.606 0.25 292.717);\n --chart-1: oklch(0.606 0.25 292.717);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor "yellow")}}\n --primary: oklch(0.795 0.184 86.047);\n --primary-foreground: oklch(0.216 0.006 56.043);\n --ring: oklch(0.795 0.184 86.047);\n --chart-1: oklch(0.795 0.184 86.047);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.646 0.222 41.116);\n --chart-5: oklch(0.769 0.188 70.08);\n{{else}}\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n{{/if}}\n}\n\n.dark {\n --background: oklch(0.145 0 0);\n --foreground: oklch(0.985 0 0);\n --card: oklch(0.205 0 0);\n --card-foreground: oklch(0.985 0 0);\n --popover: oklch(0.269 0 0);\n --popover-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.269 0 0);\n --secondary-foreground: oklch(0.985 0 0);\n --muted: oklch(0.269 0 0);\n --muted-foreground: oklch(0.708 0 0);\n --accent: oklch(0.371 0 0);\n --accent-foreground: oklch(0.985 0 0);\n --destructive: oklch(0.704 0.191 22.216);\n --border: oklch(1 0 0 / 10%);\n --input: oklch(1 0 0 / 15%);\n\n{{#if (eq shadcn.themeColor "neutral")}}\n --primary: oklch(0.922 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --ring: oklch(0.556 0 0);\n --chart-1: oklch(0.488 0.243 264.376);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "blue")}}\n --primary: oklch(0.623 0.214 262.881);\n --primary-foreground: oklch(0.273 0.033 256.848);\n --ring: oklch(0.623 0.214 262.881);\n --chart-1: oklch(0.623 0.214 262.881);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "green")}}\n --primary: oklch(0.696 0.17 162.48);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.696 0.17 162.48);\n --chart-1: oklch(0.696 0.17 162.48);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "purple")}}\n --primary: oklch(0.714 0.203 305.504);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.714 0.203 305.504);\n --chart-1: oklch(0.714 0.203 305.504);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.488 0.243 264.376);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "red")}}\n --primary: oklch(0.704 0.191 22.216);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.704 0.191 22.216);\n --chart-1: oklch(0.704 0.191 22.216);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor "orange")}}\n --primary: oklch(0.792 0.17 52.615);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.792 0.17 52.615);\n --chart-1: oklch(0.792 0.17 52.615);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "amber")}}\n --primary: oklch(0.828 0.189 84.429);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.828 0.189 84.429);\n --chart-1: oklch(0.828 0.189 84.429);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.488 0.243 264.376);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "cyan")}}\n --primary: oklch(0.789 0.154 211.53);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.789 0.154 211.53);\n --chart-1: oklch(0.789 0.154 211.53);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "emerald")}}\n --primary: oklch(0.765 0.166 160.391);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.765 0.166 160.391);\n --chart-1: oklch(0.765 0.166 160.391);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "fuchsia")}}\n --primary: oklch(0.74 0.238 322.16);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.74 0.238 322.16);\n --chart-1: oklch(0.74 0.238 322.16);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.488 0.243 264.376);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "indigo")}}\n --primary: oklch(0.673 0.182 276.935);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.673 0.182 276.935);\n --chart-1: oklch(0.673 0.182 276.935);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "lime")}}\n --primary: oklch(0.841 0.238 128.85);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.841 0.238 128.85);\n --chart-1: oklch(0.841 0.238 128.85);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "pink")}}\n --primary: oklch(0.775 0.181 349.761);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.775 0.181 349.761);\n --chart-1: oklch(0.775 0.181 349.761);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor "rose")}}\n --primary: oklch(0.712 0.194 13.428);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.712 0.194 13.428);\n --chart-1: oklch(0.712 0.194 13.428);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor "sky")}}\n --primary: oklch(0.756 0.143 232.661);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.756 0.143 232.661);\n --chart-1: oklch(0.756 0.143 232.661);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "teal")}}\n --primary: oklch(0.777 0.152 181.912);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.777 0.152 181.912);\n --chart-1: oklch(0.777 0.152 181.912);\n --chart-2: oklch(0.488 0.243 264.376);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "violet")}}\n --primary: oklch(0.702 0.183 293.541);\n --primary-foreground: oklch(0.985 0 0);\n --ring: oklch(0.702 0.183 293.541);\n --chart-1: oklch(0.702 0.183 293.541);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.488 0.243 264.376);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor "yellow")}}\n --primary: oklch(0.852 0.199 91.936);\n --primary-foreground: oklch(0.15 0 0);\n --ring: oklch(0.852 0.199 91.936);\n --chart-1: oklch(0.852 0.199 91.936);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.488 0.243 264.376);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{else}}\n --primary: oklch(0.922 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --ring: oklch(0.556 0 0);\n --chart-1: oklch(0.488 0.243 264.376);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n{{/if}}\n}\n\n/* ========================================\n BASE STYLES\n ======================================== */\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n body {\n @apply bg-background text-foreground;\n }\n}\n\n/* Container utility */\n.container {\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: 1rem;\n padding-right: 1rem;\n max-width: 96rem;\n}\n\n@media (min-width: 640px) {\n .container {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n}\n\n@media (min-width: 1024px) {\n .container {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n\n/* ========================================\n HERO TYPOGRAPHY\n ======================================== */\n\n.hero-content h1 {\n font-size: 2.25rem !important;\n line-height: 2.5rem !important;\n font-weight: 700 !important;\n letter-spacing: -0.025em !important;\n margin-bottom: 1.5rem !important;\n color: var(--color-foreground) !important;\n}\n\n.hero-content p {\n font-size: 1.25rem !important;\n line-height: 1.75rem !important;\n color: var(--color-muted-foreground) !important;\n max-width: 42rem;\n margin-left: auto;\n margin-right: auto;\n margin-bottom: 2rem !important;\n}\n\n.hero-content--dark h1 {\n color: white !important;\n}\n\n.hero-content--dark p {\n color: rgba(255, 255, 255, 0.8) !important;\n}\n\n@media (min-width: 768px) {\n .hero-content h1 {\n font-size: 3.75rem !important;\n line-height: 1 !important;\n }\n}\n\n/* Left-aligned hero content */\n.hero-content--left h1 {\n text-align: left !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n.hero-content--left p {\n text-align: left !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n/* ========================================\n PRODUCT SHOWCASE HERO STYLES\n ======================================== */\n\n.hero-showcase {\n position: relative;\n border-radius: 1rem;\n overflow: hidden;\n height: 25rem;\n width: 100%;\n max-width: 75rem;\n margin: 0 auto;\n background: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, black) 100%);\n}\n\n@media (min-width: 768px) {\n .hero-showcase {\n height: 31.25rem;\n }\n}\n\n@media (min-width: 1024px) {\n .hero-showcase {\n height: 37.5rem;\n }\n}\n\n.hero-bg-image {\n position: absolute;\n inset: 0;\n z-index: 0;\n opacity: 0.1;\n}\n\n.hero-bg-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n.hero-mockup-centered {\n position: relative;\n z-index: 10;\n padding: 2rem;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n}\n\n@media (min-width: 768px) {\n .hero-mockup-centered {\n padding: 3rem;\n }\n}\n\n.mockup-wrapper {\n background: var(--color-background);\n border-radius: 12px;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);\n overflow: hidden;\n animation: mockup-entrance 0.8s ease-out;\n width: 100%;\n}\n\n.mockup-wrapper img {\n width: 100%;\n height: auto;\n display: block;\n}\n\n@keyframes mockup-entrance {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Browser chrome */\n.mockup-chrome {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n background: var(--color-muted);\n border-bottom: 1px solid var(--color-border);\n}\n\n.mockup-chrome-dots {\n display: flex;\n gap: 6px;\n}\n\n.mockup-chrome-dots .dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n}\n\n.mockup-chrome-dots .dot-red {\n background: #ff5f56;\n}\n.mockup-chrome-dots .dot-yellow {\n background: #ffbd2e;\n}\n.mockup-chrome-dots .dot-green {\n background: #27ca40;\n}\n\n.mockup-chrome-title {\n flex: 1;\n text-align: center;\n font-size: 13px;\n font-weight: 500;\n color: var(--color-muted-foreground);\n}\n\n.mockup-chrome-actions {\n width: 60px;\n}\n\n/* App content layout */\n.mockup-content {\n display: flex;\n min-height: 400px;\n}\n\n.mockup-sidebar {\n width: 220px;\n background: var(--color-card);\n border-right: 1px solid var(--color-border);\n flex-shrink: 0;\n}\n\n.sidebar-header {\n padding: 16px;\n border-bottom: 1px solid var(--color-border);\n}\n\n.sidebar-logo {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.logo-icon {\n width: 28px;\n height: 28px;\n background: var(--color-primary);\n color: white;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-size: 14px;\n}\n\n.logo-text {\n font-weight: 600;\n font-size: 14px;\n color: var(--color-foreground);\n}\n\n.sidebar-nav {\n padding: 8px;\n}\n\n.sidebar-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n border-radius: 6px;\n font-size: 13px;\n color: var(--color-muted-foreground);\n transition: all 0.15s ease;\n cursor: pointer;\n}\n\n.sidebar-item:hover {\n background: var(--color-accent);\n color: var(--color-accent-foreground);\n}\n\n.sidebar-item--active {\n background: oklch(from var(--color-primary) l c h / 0.12);\n color: var(--color-primary);\n}\n\n.sidebar-icon {\n font-size: 16px;\n}\n\n.sidebar-label {\n flex: 1;\n}\n\n.sidebar-badge {\n background: var(--color-primary);\n color: var(--color-primary-foreground);\n font-size: 11px;\n padding: 2px 6px;\n border-radius: 10px;\n font-weight: 500;\n}\n\n/* Main content area */\n.mockup-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: var(--color-background);\n}\n\n.main-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--color-border);\n}\n\n.header-title {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.header-title h2 {\n font-size: 16px;\n font-weight: 600;\n margin: 0;\n color: var(--color-foreground);\n}\n\n.header-breadcrumb {\n font-size: 12px;\n color: var(--color-muted-foreground);\n}\n\n.header-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.action-btn {\n padding: 8px 16px;\n background: var(--color-primary);\n color: var(--color-primary-foreground);\n border: none;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.action-btn--success {\n background: #27ca40;\n}\n\n.action-btn--featured {\n background: var(--color-primary);\n}\n\n/* Split view */\n.main-split {\n display: flex;\n flex: 1;\n}\n\n.editor-panel {\n flex: 1;\n padding: 20px;\n border-right: 1px solid var(--color-border);\n}\n\n.editor-section {\n margin-bottom: 20px;\n}\n\n.editor-label {\n display: block;\n font-size: 12px;\n font-weight: 500;\n color: var(--color-muted-foreground);\n margin-bottom: 6px;\n}\n\n.editor-input {\n background: var(--color-muted);\n border: 1px solid var(--color-border);\n border-radius: 6px;\n padding: 10px 12px;\n font-size: 14px;\n color: var(--color-foreground);\n display: flex;\n align-items: center;\n}\n\n.input-text {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.input-cursor {\n width: 2px;\n height: 18px;\n background: var(--color-primary);\n animation: blink 1s infinite;\n margin-left: 2px;\n}\n\n@keyframes blink {\n 0%,\n 50% {\n opacity: 1;\n }\n 51%,\n 100% {\n opacity: 0;\n }\n}\n\n.editor-select {\n background: var(--color-muted);\n border: 1px solid var(--color-border);\n border-radius: 6px;\n padding: 10px 12px;\n font-size: 14px;\n color: var(--color-foreground);\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.select-arrow {\n font-size: 10px;\n color: var(--color-muted-foreground);\n}\n\n.editor-textarea {\n background: var(--color-muted);\n border: 1px solid var(--color-border);\n border-radius: 6px;\n padding: 10px 12px;\n font-size: 14px;\n color: var(--color-foreground);\n min-height: 80px;\n}\n\n.textarea-text {\n transition: all 0.5s ease;\n}\n\n.textarea-text--complete {\n color: var(--color-foreground);\n}\n\n/* Preview panel */\n.preview-panel {\n width: 320px;\n padding: 20px;\n background: oklch(from var(--color-muted) l c h / 0.5);\n}\n\n.preview-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.preview-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--color-muted-foreground);\n}\n\n.preview-url {\n font-size: 11px;\n color: var(--color-muted-foreground);\n font-family: monospace;\n}\n\n.preview-card {\n background: var(--color-card);\n border: 1px solid var(--color-border);\n border-radius: 10px;\n overflow: hidden;\n position: relative;\n transition: all 0.3s ease;\n}\n\n.preview-badge {\n position: absolute;\n top: 10px;\n right: 10px;\n background: var(--color-primary);\n color: white;\n font-size: 11px;\n padding: 4px 8px;\n border-radius: 4px;\n font-weight: 500;\n animation: badge-pop 0.3s ease;\n}\n\n@keyframes badge-pop {\n from {\n transform: scale(0);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n.preview-image {\n height: 120px;\n background: linear-gradient(135deg, var(--color-muted) 0%, var(--color-accent) 100%);\n}\n\n.preview-image-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 40px;\n}\n\n.preview-content {\n padding: 16px;\n}\n\n.preview-category-tag {\n display: inline-block;\n font-size: 11px;\n color: var(--color-primary);\n font-weight: 500;\n margin-bottom: 8px;\n}\n\n.preview-title {\n font-size: 16px;\n font-weight: 600;\n margin: 0 0 8px;\n color: var(--color-foreground);\n}\n\n.preview-description {\n font-size: 13px;\n color: var(--color-muted-foreground);\n line-height: 1.5;\n margin: 0 0 12px;\n}\n\n.preview-meta {\n display: flex;\n gap: 8px;\n font-size: 12px;\n}\n\n.meta-rating {\n color: #ffc24a;\n}\n\n.meta-reviews {\n color: var(--color-muted-foreground);\n}\n\n/* State indicators */\n.mockup-indicators {\n display: flex;\n justify-content: center;\n gap: 24px;\n padding: 16px;\n border-top: 1px solid var(--color-border);\n}\n\n.indicator {\n display: flex;\n align-items: center;\n gap: 8px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 6px 12px;\n border-radius: 20px;\n transition: all 0.2s ease;\n}\n\n.indicator:hover {\n background: var(--color-accent);\n}\n\n.indicator--active {\n background: oklch(from var(--color-primary) l c h / 0.12);\n}\n\n.indicator-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--color-muted-foreground);\n transition: all 0.2s ease;\n}\n\n.indicator--active .indicator-dot {\n background: var(--color-primary);\n box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.2);\n}\n\n.indicator-label {\n font-size: 12px;\n color: var(--color-muted-foreground);\n}\n\n.indicator--active .indicator-label {\n color: var(--color-foreground);\n font-weight: 500;\n}\n\n/* ========================================\n LOGO BANNER STYLES\n ======================================== */\n\n.logo-scroll-container {\n overflow: hidden;\n mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\n}\n\n.logo-scroll-track {\n display: flex;\n animation: logo-scroll 30s linear infinite;\n}\n\n.logo-scroll-track:hover {\n animation-play-state: paused;\n}\n\n@keyframes logo-scroll {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n\n.logo-item {\n flex-shrink: 0;\n min-width: 150px;\n}\n\n/* ========================================\n RESPONSIVE ADJUSTMENTS\n ======================================== */\n\n@media (max-width: 768px) {\n .mockup-content {\n flex-direction: column;\n }\n\n .mockup-sidebar {\n width: 100%;\n border-right: none;\n border-bottom: 1px solid var(--color-border);\n }\n\n .sidebar-nav {\n display: flex;\n overflow-x: auto;\n padding: 8px;\n gap: 4px;\n }\n\n .sidebar-item {\n white-space: nowrap;\n }\n\n .main-split {\n flex-direction: column;\n }\n\n .editor-panel {\n border-right: none;\n border-bottom: 1px solid var(--color-border);\n }\n\n .preview-panel {\n width: 100%;\n }\n\n .mockup-indicators {\n flex-wrap: wrap;\n gap: 12px;\n }\n\n .indicator-label {\n display: none;\n }\n}\n\n/* ========================================\n ANIMATION STYLES\n ======================================== */\n\n/* Industry Tabs Animation */\n.industry-tab-content {\n animation: tab-fade-in 0.3s ease-out;\n}\n\n@keyframes tab-fade-in {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Feature Showcase Entrance Animation */\n@keyframes feature-slide-in {\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n.feature-showcase-content {\n animation: feature-slide-in 0.5s ease-out;\n}\n\n/* Testimonial Card Hover Effects */\n.testimonial-card {\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.testimonial-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);\n}\n\n/* Stat Number Animation */\n@keyframes stat-count-up {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.stat-number {\n animation: stat-count-up 0.6s ease-out;\n}\n\n/* Trust Column Icon Animation */\n.trust-icon {\n transition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.trust-icon:hover {\n transform: scale(1.1);\n}\n\n/* Final CTA Background Animation */\n@keyframes subtle-float {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-10px);\n }\n}\n\n.cta-decorative {\n animation: subtle-float 6s ease-in-out infinite;\n}\n\n/* Feature Grid Card Entrance */\n@keyframes card-entrance {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.feature-card {\n animation: card-entrance 0.4s ease-out;\n animation-fill-mode: both;\n}\n\n.feature-card:nth-child(1) {\n animation-delay: 0.1s;\n}\n.feature-card:nth-child(2) {\n animation-delay: 0.2s;\n}\n.feature-card:nth-child(3) {\n animation-delay: 0.3s;\n}\n.feature-card:nth-child(4) {\n animation-delay: 0.4s;\n}\n.feature-card:nth-child(5) {\n animation-delay: 0.5s;\n}\n.feature-card:nth-child(6) {\n animation-delay: 0.6s;\n}\n\n/* Smooth Section Transitions */\nsection {\n scroll-margin-top: 80px;\n}\n\n/* Button Hover Enhancement */\n.cta-button {\n position: relative;\n overflow: hidden;\n}\n\n.cta-button::after {\n content: "";\n position: absolute;\n inset: 0;\n background: linear-gradient(rgba(255, 255, 255, 0.1), transparent);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.cta-button:hover::after {\n opacity: 1;\n}\n\n/* Responsive Image Container */\n.feature-image-container {\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.feature-image-container:hover {\n transform: translateY(-4px);\n box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);\n}\n',
|
|
2727
2727
|
"marketing/nextjs/src/app/layout.tsx.hbs": `import type { Metadata } from 'next'
|
|
2728
2728
|
import { Geist, Geist_Mono } from 'next/font/google'
|
|
2729
2729
|
import { ThemeProvider } from '@/components/ThemeProvider'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "kofi-stack-template-generator",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.57",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"typecheck": "tsc --noEmit"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"kofi-stack-types": "^2.1.
|
|
20
|
+
"kofi-stack-types": "^2.1.57",
|
|
21
21
|
"handlebars": "^4.7.8",
|
|
22
22
|
"memfs": "^4.9.0"
|
|
23
23
|
},
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// Auto-generated file. Do not edit manually.
|
|
2
2
|
// Run 'pnpm prebuild' to regenerate.
|
|
3
|
-
// Generated: 2026-01-19T16:
|
|
3
|
+
// Generated: 2026-01-19T16:57:06.341Z
|
|
4
4
|
// Template count: 399
|
|
5
5
|
|
|
6
6
|
export const EMBEDDED_TEMPLATES: Record<string, string> = {
|
|
@@ -60,7 +60,7 @@ export const EMBEDDED_TEMPLATES: Record<string, string> = {
|
|
|
60
60
|
"marketing/astro/src/components/blocks/TestimonialsGrid.astro": "---\ninterface Testimonial {\n stat: string\n statLabel: string\n quote: string\n author: string\n company: string\n}\n\ninterface Props {\n heading?: string\n subheading?: string\n testimonials?: Testimonial[]\n}\n\nconst defaultTestimonials: Testimonial[] = [\n {\n stat: \"94%\",\n statLabel: \"Faster onboarding\",\n quote: \"We got our entire team onboarded in under a day. The intuitive interface and powerful integrations saved us weeks of setup time.\",\n author: \"Sarah Chen\",\n company: \"TechFlow Inc\",\n },\n {\n stat: \"3x\",\n statLabel: \"Productivity\",\n quote: \"Our team is shipping features faster than ever. The automation tools eliminated hours of manual work every week.\",\n author: \"Marcus Rivera\",\n company: \"Beacon Digital\",\n },\n {\n stat: \"40%\",\n statLabel: \"Cost reduction\",\n quote: \"We consolidated five different tools into SaaSify. The ROI was immediate and our team loves having everything in one place.\",\n author: \"David Kim\",\n company: \"Cascade Systems\",\n },\n]\n\nconst {\n heading = \"Loved by teams at companies of all sizes\",\n subheading = \"See how leading teams use SaaSify to drive growth and productivity.\",\n testimonials = defaultTestimonials,\n} = Astro.props\n\nconst displayTestimonials = testimonials.length > 0 ? testimonials : defaultTestimonials\n---\n\n<section class=\"py-16 md:py-24\">\n <div class=\"container mx-auto px-4\">\n <!-- Header -->\n {(heading || subheading) && (\n <div class=\"text-center mb-12 md:mb-16 max-w-3xl mx-auto\">\n {heading && (\n <h2 class=\"text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-4\">\n {heading}\n </h2>\n )}\n {subheading && (\n <p class=\"text-lg md:text-xl text-muted-foreground\">\n {subheading}\n </p>\n )}\n </div>\n )}\n\n <!-- Testimonials Grid -->\n <div class=\"grid md:grid-cols-3 gap-6 lg:gap-8\">\n {displayTestimonials.map((testimonial) => (\n <div class=\"relative bg-card border border-border rounded-2xl p-6 md:p-8\">\n <!-- Stat -->\n <div class=\"mb-6\">\n <div class=\"text-4xl md:text-5xl font-bold text-primary mb-1\">\n {testimonial.stat}\n </div>\n <p class=\"text-sm font-medium text-muted-foreground\">\n {testimonial.statLabel}\n </p>\n </div>\n\n <!-- Quote -->\n <blockquote class=\"text-foreground mb-6\">\n \"{testimonial.quote}\"\n </blockquote>\n\n <!-- Author -->\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-full bg-muted flex items-center justify-center\">\n <span class=\"text-sm font-medium\">\n {testimonial.author.split(\" \").map((n) => n[0]).join(\"\")}\n </span>\n </div>\n <div>\n <p class=\"text-sm font-medium text-foreground\">\n {testimonial.author}\n </p>\n <p class=\"text-sm text-muted-foreground\">\n {testimonial.company}\n </p>\n </div>\n </div>\n </div>\n ))}\n </div>\n </div>\n</section>\n",
|
|
61
61
|
"marketing/astro/src/components/blocks/TrustColumns.astro": "---\nimport { Zap, Plug, Database, Cloud, Shield, Lock, Award, Globe } from \"lucide-astro\"\n\ninterface TrustItem {\n icon: string\n text: string\n}\n\ninterface TrustColumn {\n label: string\n heading: string\n description: string\n items: TrustItem[]\n}\n\ninterface Props {\n columns?: TrustColumn[]\n}\n\nconst defaultColumns: TrustColumn[] = [\n {\n label: \"Integrations\",\n heading: \"Connect anywhere\",\n description: \"Plug in and get started immediately with pre-built connectors for every major platform.\",\n items: [\n { icon: \"zap\", text: \"Go live in minutes\" },\n { icon: \"plug\", text: \"Pre-built connectors\" },\n { icon: \"database\", text: \"Complete data sync\" },\n { icon: \"cloud\", text: \"Cloud-native infrastructure\" },\n ],\n },\n {\n label: \"Security & Compliance\",\n heading: \"Enterprise-level security\",\n description: \"Keep your data safe with encryption, granular access control, and compliance-ready infrastructure.\",\n items: [\n { icon: \"shield\", text: \"SOC 2 Type II certified\" },\n { icon: \"lock\", text: \"End-to-end encryption\" },\n { icon: \"award\", text: \"Complete audit trails\" },\n { icon: \"globe\", text: \"GDPR compliant\" },\n ],\n },\n]\n\nconst { columns = defaultColumns } = Astro.props\n\nconst displayColumns = columns.length > 0 ? columns : defaultColumns\n---\n\n<section class=\"py-16 md:py-24\">\n <div class=\"container mx-auto px-4\">\n <div class=\"grid md:grid-cols-2 gap-12 lg:gap-16\">\n {displayColumns.map((column) => (\n <div>\n <span class=\"inline-block text-sm font-medium text-primary mb-4\">\n {column.label}\n </span>\n <h2 class=\"text-2xl md:text-3xl font-bold tracking-tight mb-4\">\n {column.heading}\n </h2>\n <p class=\"text-muted-foreground mb-8\">\n {column.description}\n </p>\n\n <ul class=\"space-y-4\">\n {column.items.map((item) => (\n <li class=\"flex items-center gap-3\">\n <div class=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10\">\n {item.icon === \"zap\" && <Zap class=\"h-4 w-4 text-primary\" />}\n {item.icon === \"plug\" && <Plug class=\"h-4 w-4 text-primary\" />}\n {item.icon === \"database\" && <Database class=\"h-4 w-4 text-primary\" />}\n {item.icon === \"cloud\" && <Cloud class=\"h-4 w-4 text-primary\" />}\n {item.icon === \"shield\" && <Shield class=\"h-4 w-4 text-primary\" />}\n {item.icon === \"lock\" && <Lock class=\"h-4 w-4 text-primary\" />}\n {item.icon === \"award\" && <Award class=\"h-4 w-4 text-primary\" />}\n {item.icon === \"globe\" && <Globe class=\"h-4 w-4 text-primary\" />}\n </div>\n <span class=\"text-sm font-medium\">\n {item.text}\n </span>\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n </div>\n</section>\n",
|
|
62
62
|
"marketing/astro/src/components/heros/AnimatedMockup.astro": "---\ninterface MockupState {\n id: number\n label: string\n sidebarActive: string\n previewTitle: string\n previewDescription: string\n previewCategory: string\n previewStatus: \"draft\" | \"published\" | \"featured\"\n previewUrl?: string\n}\n\nconst mockupStates: MockupState[] = [\n {\n id: 1,\n label: \"Setup & styling\",\n sidebarActive: \"templates\",\n previewTitle: \"Atlas Directory\",\n previewDescription: \"Apply your brand, typography, and layout in minutes.\",\n previewCategory: \"Design systems\",\n previewStatus: \"draft\",\n previewUrl: \"atlas.directory/home\",\n },\n {\n id: 2,\n label: \"Plans & pricing\",\n sidebarActive: \"billing\",\n previewTitle: \"Pro Listing Plan\",\n previewDescription: \"Recurring billing, featured placements, and add-ons configured.\",\n previewCategory: \"Monetization\",\n previewStatus: \"draft\",\n previewUrl: \"atlas.directory/billing\",\n },\n {\n id: 3,\n label: \"SEO & publishing\",\n sidebarActive: \"seo\",\n previewTitle: \"Atlas Directory\",\n previewDescription: \"Schema, sitemap, and custom domain are ready to publish.\",\n previewCategory: \"SEO & domains\",\n previewStatus: \"published\",\n previewUrl: \"atlas.directory/launch\",\n },\n {\n id: 4,\n label: \"Payouts live\",\n sidebarActive: \"overview\",\n previewTitle: \"Atlas Directory\",\n previewDescription: \"Subscribers active, payouts scheduled to Stripe, featured slots sold.\",\n previewCategory: \"Revenue\",\n previewStatus: \"featured\",\n previewUrl: \"atlas.directory/analytics\",\n },\n]\n\nconst initialState = mockupStates[0]\n---\n\n<div class=\"mockup-wrapper\" id=\"animated-mockup\">\n <!-- Browser Chrome -->\n <div class=\"mockup-chrome\">\n <div class=\"mockup-chrome-dots\">\n <span class=\"dot dot-red\"></span>\n <span class=\"dot dot-yellow\"></span>\n <span class=\"dot dot-green\"></span>\n </div>\n <div class=\"mockup-chrome-title\">SaaSify</div>\n <div class=\"mockup-chrome-actions\"></div>\n </div>\n\n <!-- App Content -->\n <div class=\"mockup-content\">\n <!-- Sidebar -->\n <div class=\"mockup-sidebar\">\n <div class=\"sidebar-header\">\n <div class=\"sidebar-logo\">\n <span class=\"logo-icon\">D</span>\n <span class=\"logo-text\">My Directory</span>\n </div>\n </div>\n <nav class=\"sidebar-nav\">\n <div class=\"sidebar-item\" data-nav=\"overview\">\n <span class=\"sidebar-icon\">📊</span>\n <span class=\"sidebar-label\">Overview</span>\n </div>\n <div class=\"sidebar-item sidebar-item--active\" data-nav=\"templates\">\n <span class=\"sidebar-icon\">🖼️</span>\n <span class=\"sidebar-label\">Templates</span>\n </div>\n <div class=\"sidebar-item\" data-nav=\"listings\">\n <span class=\"sidebar-icon\">📋</span>\n <span class=\"sidebar-label\">Listings</span>\n <span class=\"sidebar-badge\">24</span>\n </div>\n <div class=\"sidebar-item\" data-nav=\"billing\">\n <span class=\"sidebar-icon\">💳</span>\n <span class=\"sidebar-label\">Plans & Billing</span>\n </div>\n <div class=\"sidebar-item\" data-nav=\"automations\">\n <span class=\"sidebar-icon\">⚡</span>\n <span class=\"sidebar-label\">Automations</span>\n </div>\n <div class=\"sidebar-item\" data-nav=\"seo\">\n <span class=\"sidebar-icon\">🔎</span>\n <span class=\"sidebar-label\">SEO</span>\n </div>\n <div class=\"sidebar-item\" data-nav=\"settings\">\n <span class=\"sidebar-icon\">⚙️</span>\n <span class=\"sidebar-label\">Settings</span>\n </div>\n </nav>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"mockup-main\">\n <!-- Header -->\n <div class=\"main-header\">\n <div class=\"header-title\">\n <h2 id=\"mockup-label\">{initialState.label}</h2>\n <span class=\"header-breadcrumb\">SaaSify / <span id=\"mockup-breadcrumb\">{initialState.previewTitle}</span></span>\n </div>\n <div class=\"header-actions\">\n <button type=\"button\" class=\"action-btn\" id=\"mockup-action-btn\">\n Save Draft\n </button>\n </div>\n </div>\n\n <!-- Split View: Editor + Preview -->\n <div class=\"main-split\">\n <!-- Editor Panel -->\n <div class=\"editor-panel\">\n <div class=\"editor-section\">\n <span class=\"editor-label\">Listing Name</span>\n <div class=\"editor-input\">\n <span class=\"input-text\" id=\"mockup-title\">{initialState.previewTitle}</span>\n <span class=\"input-cursor\"></span>\n </div>\n </div>\n <div class=\"editor-section\">\n <span class=\"editor-label\">Category</span>\n <div class=\"editor-select\">\n <span id=\"mockup-category\">{initialState.previewCategory}</span>\n <span class=\"select-arrow\">▼</span>\n </div>\n </div>\n <div class=\"editor-section\">\n <span class=\"editor-label\">Description</span>\n <div class=\"editor-textarea\">\n <span class=\"textarea-text\" id=\"mockup-description\">{initialState.previewDescription}</span>\n </div>\n </div>\n </div>\n\n <!-- Preview Panel -->\n <div class=\"preview-panel\">\n <div class=\"preview-header\">\n <span class=\"preview-label\">Live Preview</span>\n <span class=\"preview-url\" id=\"mockup-url\">{initialState.previewUrl}</span>\n </div>\n <div class=\"preview-card\">\n <div class=\"preview-badge hidden\" id=\"mockup-badge\">⭐ Featured</div>\n <div class=\"preview-image\">\n <div class=\"preview-image-placeholder\">\n <span>🏢</span>\n </div>\n </div>\n <div class=\"preview-content\">\n <span class=\"preview-category-tag\" id=\"mockup-preview-category\">{initialState.previewCategory}</span>\n <h3 class=\"preview-title\" id=\"mockup-preview-title\">{initialState.previewTitle}</h3>\n <p class=\"preview-description\" id=\"mockup-preview-description\">{initialState.previewDescription}</p>\n <div class=\"preview-meta\">\n <span class=\"meta-rating\">★★★★★</span>\n <span class=\"meta-reviews\">24 reviews</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- State Indicator -->\n <div class=\"mockup-indicators\">\n {mockupStates.map((s, i) => (\n <button\n type=\"button\"\n data-state-index={i}\n class:list={[\"indicator\", i === 0 && \"indicator--active\"]}\n >\n <span class=\"indicator-dot\"></span>\n <span class=\"indicator-label\">{s.label}</span>\n </button>\n ))}\n </div>\n</div>\n\n<script define:vars={{ mockupStates }}>\n function initMockup() {\n const mockup = document.getElementById('animated-mockup')\n if (!mockup) return\n\n let currentState = 0\n let isPaused = false\n let interval\n\n const elements = {\n label: document.getElementById('mockup-label'),\n breadcrumb: document.getElementById('mockup-breadcrumb'),\n title: document.getElementById('mockup-title'),\n category: document.getElementById('mockup-category'),\n description: document.getElementById('mockup-description'),\n url: document.getElementById('mockup-url'),\n badge: document.getElementById('mockup-badge'),\n previewCategory: document.getElementById('mockup-preview-category'),\n previewTitle: document.getElementById('mockup-preview-title'),\n previewDescription: document.getElementById('mockup-preview-description'),\n actionBtn: document.getElementById('mockup-action-btn'),\n }\n\n function updateMockup(stateIndex) {\n const state = mockupStates[stateIndex]\n if (!state) return\n\n // Update content\n if (elements.label) elements.label.textContent = state.label\n if (elements.breadcrumb) elements.breadcrumb.textContent = state.previewTitle\n if (elements.title) elements.title.textContent = state.previewTitle\n if (elements.category) elements.category.textContent = state.previewCategory\n if (elements.description) elements.description.textContent = state.previewDescription\n if (elements.url) elements.url.textContent = state.previewUrl || 'saasify.app/live'\n if (elements.previewCategory) elements.previewCategory.textContent = state.previewCategory\n if (elements.previewTitle) elements.previewTitle.textContent = state.previewTitle\n if (elements.previewDescription) elements.previewDescription.textContent = state.previewDescription\n\n // Update badge\n if (elements.badge) {\n if (state.previewStatus === 'featured') {\n elements.badge.classList.remove('hidden')\n } else {\n elements.badge.classList.add('hidden')\n }\n }\n\n // Update action button\n if (elements.actionBtn) {\n elements.actionBtn.classList.remove('action-btn--success', 'action-btn--featured')\n if (state.previewStatus === 'draft') {\n elements.actionBtn.textContent = 'Save Draft'\n } else if (state.previewStatus === 'published') {\n elements.actionBtn.textContent = '✓ Published'\n elements.actionBtn.classList.add('action-btn--success')\n } else if (state.previewStatus === 'featured') {\n elements.actionBtn.textContent = '⭐ Featured'\n elements.actionBtn.classList.add('action-btn--featured')\n }\n }\n\n // Update sidebar active state\n const sidebarItems = mockup.querySelectorAll('.sidebar-item')\n sidebarItems.forEach(item => {\n item.classList.remove('sidebar-item--active')\n if (item.getAttribute('data-nav') === state.sidebarActive) {\n item.classList.add('sidebar-item--active')\n }\n })\n\n // Update indicators\n const indicators = mockup.querySelectorAll('.indicator')\n indicators.forEach((ind, i) => {\n ind.classList.toggle('indicator--active', i === stateIndex)\n })\n }\n\n function nextState() {\n if (isPaused) return\n currentState = (currentState + 1) % mockupStates.length\n updateMockup(currentState)\n }\n\n // Auto-advance\n interval = setInterval(nextState, 3000)\n\n // Pause on hover\n mockup.addEventListener('mouseenter', () => {\n isPaused = true\n })\n mockup.addEventListener('mouseleave', () => {\n isPaused = false\n })\n\n // Manual state selection\n const indicators = mockup.querySelectorAll('.indicator')\n indicators.forEach((indicator) => {\n indicator.addEventListener('click', () => {\n const index = parseInt(indicator.getAttribute('data-state-index') || '0', 10)\n currentState = index\n updateMockup(currentState)\n })\n })\n }\n\n initMockup()\n document.addEventListener('astro:after-swap', initMockup)\n</script>\n\n<style>\n .mockup-wrapper {\n width: 100%;\n max-width: 900px;\n margin: 0 auto;\n background: var(--background);\n border-radius: 0.75rem;\n overflow: hidden;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n }\n\n .mockup-chrome {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1rem;\n background: var(--muted);\n border-bottom: 1px solid var(--border);\n }\n\n .mockup-chrome-dots {\n display: flex;\n gap: 0.375rem;\n }\n\n .dot {\n width: 0.75rem;\n height: 0.75rem;\n border-radius: 50%;\n }\n\n .dot-red { background: #ff5f56; }\n .dot-yellow { background: #ffbd2e; }\n .dot-green { background: #27ca40; }\n\n .mockup-chrome-title {\n flex: 1;\n text-align: center;\n font-size: 0.75rem;\n color: var(--muted-foreground);\n }\n\n .mockup-chrome-actions {\n width: 3rem;\n }\n\n .mockup-content {\n display: flex;\n min-height: 300px;\n }\n\n .mockup-sidebar {\n width: 180px;\n background: var(--card);\n border-right: 1px solid var(--border);\n padding: 1rem 0;\n display: none;\n }\n\n @media (min-width: 768px) {\n .mockup-sidebar {\n display: block;\n }\n .mockup-content {\n min-height: 350px;\n }\n }\n\n .sidebar-header {\n padding: 0 1rem 1rem;\n border-bottom: 1px solid var(--border);\n margin-bottom: 0.5rem;\n }\n\n .sidebar-logo {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .logo-icon {\n width: 1.5rem;\n height: 1.5rem;\n background: var(--primary);\n color: var(--primary-foreground);\n border-radius: 0.25rem;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.75rem;\n font-weight: 600;\n }\n\n .logo-text {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--foreground);\n }\n\n .sidebar-nav {\n padding: 0 0.5rem;\n }\n\n .sidebar-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem;\n border-radius: 0.375rem;\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .sidebar-item:hover {\n background: var(--muted);\n }\n\n .sidebar-item--active {\n background: var(--primary);\n color: var(--primary-foreground);\n }\n\n .sidebar-icon {\n font-size: 0.875rem;\n }\n\n .sidebar-label {\n font-size: 0.75rem;\n flex: 1;\n }\n\n .sidebar-badge {\n font-size: 0.625rem;\n background: var(--muted);\n padding: 0.125rem 0.375rem;\n border-radius: 9999px;\n }\n\n .sidebar-item--active .sidebar-badge {\n background: rgba(255, 255, 255, 0.2);\n }\n\n .mockup-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n }\n\n .main-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0.75rem 1rem;\n border-bottom: 1px solid var(--border);\n }\n\n .header-title h2 {\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--foreground);\n margin: 0;\n }\n\n .header-breadcrumb {\n font-size: 0.625rem;\n color: var(--muted-foreground);\n }\n\n .action-btn {\n font-size: 0.625rem;\n padding: 0.375rem 0.75rem;\n background: var(--primary);\n color: var(--primary-foreground);\n border: none;\n border-radius: 0.25rem;\n cursor: pointer;\n }\n\n .action-btn--success {\n background: #22c55e;\n }\n\n .action-btn--featured {\n background: #f59e0b;\n }\n\n .main-split {\n display: flex;\n flex: 1;\n min-height: 0;\n }\n\n .editor-panel {\n flex: 1;\n padding: 1rem;\n border-right: 1px solid var(--border);\n display: none;\n }\n\n @media (min-width: 640px) {\n .editor-panel {\n display: block;\n }\n }\n\n .editor-section {\n margin-bottom: 0.75rem;\n }\n\n .editor-label {\n display: block;\n font-size: 0.625rem;\n color: var(--muted-foreground);\n margin-bottom: 0.25rem;\n }\n\n .editor-input,\n .editor-select,\n .editor-textarea {\n background: var(--muted);\n border: 1px solid var(--border);\n border-radius: 0.25rem;\n padding: 0.5rem;\n font-size: 0.75rem;\n color: var(--foreground);\n }\n\n .editor-input {\n display: flex;\n align-items: center;\n }\n\n .input-cursor {\n width: 1px;\n height: 1em;\n background: var(--primary);\n animation: blink 1s infinite;\n }\n\n @keyframes blink {\n 50% { opacity: 0; }\n }\n\n .editor-select {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .select-arrow {\n font-size: 0.5rem;\n color: var(--muted-foreground);\n }\n\n .editor-textarea {\n min-height: 60px;\n }\n\n .preview-panel {\n flex: 1;\n padding: 1rem;\n background: var(--muted);\n }\n\n .preview-header {\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.75rem;\n }\n\n .preview-label {\n font-size: 0.625rem;\n font-weight: 500;\n color: var(--muted-foreground);\n }\n\n .preview-url {\n font-size: 0.625rem;\n color: var(--primary);\n }\n\n .preview-card {\n background: var(--background);\n border-radius: 0.5rem;\n overflow: hidden;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n position: relative;\n }\n\n .preview-badge {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n background: #f59e0b;\n color: white;\n font-size: 0.5rem;\n padding: 0.25rem 0.5rem;\n border-radius: 9999px;\n font-weight: 500;\n }\n\n .preview-image {\n aspect-ratio: 16/9;\n background: var(--muted);\n }\n\n .preview-image-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 2rem;\n }\n\n .preview-content {\n padding: 0.75rem;\n }\n\n .preview-category-tag {\n display: inline-block;\n font-size: 0.5rem;\n color: var(--primary);\n background: color-mix(in oklch, var(--primary) 10%, transparent);\n padding: 0.125rem 0.375rem;\n border-radius: 9999px;\n margin-bottom: 0.25rem;\n }\n\n .preview-title {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--foreground);\n margin: 0 0 0.25rem;\n }\n\n .preview-description {\n font-size: 0.625rem;\n color: var(--muted-foreground);\n margin: 0 0 0.5rem;\n line-height: 1.4;\n }\n\n .preview-meta {\n display: flex;\n gap: 0.5rem;\n font-size: 0.5rem;\n color: var(--muted-foreground);\n }\n\n .meta-rating {\n color: #f59e0b;\n }\n\n .mockup-indicators {\n display: flex;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.75rem;\n background: var(--card);\n border-top: 1px solid var(--border);\n }\n\n .indicator {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.375rem 0.75rem;\n background: transparent;\n border: 1px solid var(--border);\n border-radius: 9999px;\n cursor: pointer;\n transition: all 0.15s;\n }\n\n .indicator:hover {\n border-color: var(--primary);\n }\n\n .indicator--active {\n background: var(--primary);\n border-color: var(--primary);\n color: var(--primary-foreground);\n }\n\n .indicator-dot {\n width: 0.375rem;\n height: 0.375rem;\n border-radius: 50%;\n background: currentColor;\n }\n\n .indicator-label {\n font-size: 0.625rem;\n font-weight: 500;\n display: none;\n }\n\n @media (min-width: 640px) {\n .indicator-label {\n display: inline;\n }\n }\n</style>\n",
|
|
63
|
-
"marketing/astro/src/components/heros/ProductShowcaseHero.astro": "---\nimport AnimatedMockup from \"./AnimatedMockup.astro\"\n\ninterface HeroLink {\n label: string\n href: string\n variant: \"default\" | \"outline\"\n}\n\ninterface Props {\n headline?: string\n description?: string\n links?: HeroLink[]\n}\n\nconst {\n headline = \"The modern platform for growing teams\",\n description = \"Streamline workflows, boost productivity, and scale your business with one powerful platform.\",\n links = [\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"default\" },\n { label: \"Watch demo\", href: \"/demo\", variant: \"outline\" },\n ],\n} = Astro.props\n---\n\n<div class=\"relative overflow-hidden\">\n <!-- Hero Content - Left Aligned -->\n <div class=\"container mx-auto px-4 pt-8 pb-16 md:pt-16 md:pb-24\">\n <div class=\"max-w-2xl\">\n <h1 class=\"text-4xl font-bold tracking-tight text-foreground sm:text-5xl md:text-6xl\">\n {headline}\n </h1>\n <p class=\"mt-6 text-lg text-muted-foreground md:text-xl\">\n {description}\n </p>\n {links && links.length > 0 && (\n <div class=\"mt-8 flex flex-wrap gap-4\">\n {links.map((link) => (\n <a\n href={link.href}\n class:list={[\n \"inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md transition-colors\",\n link.variant === \"default\"\n ? \"bg-primary text-primary-foreground hover:bg-primary/90\"\n : \"border border-border bg-background hover:bg-muted\"\n ]}\n >\n {link.label}\n </a>\n ))}\n </div>\n )}\n </div>\n </div>\n\n <!-- Product Mockup Section -->\n <div class=\"container mx-auto px-4\">\n <div class=\"hero-showcase\">\n <!-- Background Image -->\n <div class=\"hero-bg-image\">\n <img\n src=\"/media/hero-bg.png\"\n alt=\"\"\n class=\"w-full h-full object-cover\"\n />\n </div>\n\n <!-- Mockup - centered within background -->\n <div class=\"hero-mockup-centered\">\n <AnimatedMockup />\n </div>\n </div>\n </div>\n</div>\n\n<style>\n .hero-showcase {\n position: relative;\n width: 100%;\n max-width:
|
|
63
|
+
"marketing/astro/src/components/heros/ProductShowcaseHero.astro": "---\nimport AnimatedMockup from \"./AnimatedMockup.astro\"\n\ninterface HeroLink {\n label: string\n href: string\n variant: \"default\" | \"outline\"\n}\n\ninterface Props {\n headline?: string\n description?: string\n links?: HeroLink[]\n}\n\nconst {\n headline = \"The modern platform for growing teams\",\n description = \"Streamline workflows, boost productivity, and scale your business with one powerful platform.\",\n links = [\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"default\" },\n { label: \"Watch demo\", href: \"/demo\", variant: \"outline\" },\n ],\n} = Astro.props\n---\n\n<div class=\"relative overflow-hidden\">\n <!-- Hero Content - Left Aligned -->\n <div class=\"container mx-auto px-4 pt-8 pb-16 md:pt-16 md:pb-24\">\n <div class=\"max-w-2xl\">\n <h1 class=\"text-4xl font-bold tracking-tight text-foreground sm:text-5xl md:text-6xl\">\n {headline}\n </h1>\n <p class=\"mt-6 text-lg text-muted-foreground md:text-xl\">\n {description}\n </p>\n {links && links.length > 0 && (\n <div class=\"mt-8 flex flex-wrap gap-4\">\n {links.map((link) => (\n <a\n href={link.href}\n class:list={[\n \"inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md transition-colors\",\n link.variant === \"default\"\n ? \"bg-primary text-primary-foreground hover:bg-primary/90\"\n : \"border border-border bg-background hover:bg-muted\"\n ]}\n >\n {link.label}\n </a>\n ))}\n </div>\n )}\n </div>\n </div>\n\n <!-- Product Mockup Section -->\n <div class=\"container mx-auto px-4\">\n <div class=\"hero-showcase\">\n <!-- Background Image -->\n <div class=\"hero-bg-image\">\n <img\n src=\"/media/hero-bg.png\"\n alt=\"\"\n class=\"w-full h-full object-cover\"\n />\n </div>\n\n <!-- Mockup - centered within background -->\n <div class=\"hero-mockup-centered\">\n <AnimatedMockup />\n </div>\n </div>\n </div>\n</div>\n\n<style>\n .hero-showcase {\n position: relative;\n width: 100%;\n max-width: 75rem;\n margin: 0 auto;\n border-radius: 1rem;\n overflow: hidden;\n background: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, black) 100%);\n height: 25rem;\n }\n\n .hero-bg-image {\n position: absolute;\n inset: 0;\n opacity: 0.1;\n }\n\n .hero-mockup-centered {\n position: relative;\n z-index: 10;\n padding: 2rem;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n }\n\n @media (min-width: 768px) {\n .hero-showcase {\n height: 31.25rem;\n }\n .hero-mockup-centered {\n padding: 3rem;\n }\n }\n\n @media (min-width: 1024px) {\n .hero-showcase {\n height: 37.5rem;\n }\n }\n</style>\n",
|
|
64
64
|
"marketing/astro/src/layouts/Layout.astro": "---\nimport \"../styles/globals.css\"\n\ninterface Props {\n title?: string\n description?: string\n}\n\nconst {\n title = \"SaaSify - The modern platform for growing teams\",\n 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.\",\n} = Astro.props\n---\n\n<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <meta name=\"description\" content={description} />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\" />\n <title>{title}</title>\n <!-- Prevent flash of wrong theme -->\n <script is:inline>\n (function() {\n const theme = localStorage.getItem('theme') ||\n (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')\n if (theme === 'dark') {\n document.documentElement.setAttribute('data-theme', 'dark')\n }\n })()\n </script>\n </head>\n <body class=\"min-h-screen bg-background text-foreground antialiased\">\n <slot />\n </body>\n</html>\n",
|
|
65
65
|
"marketing/astro/src/lib/utils.ts": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n",
|
|
66
66
|
"marketing/astro/src/pages/blog.astro": "---\nimport Layout from \"../layouts/Layout.astro\"\nimport Header from \"../components/Header.astro\"\nimport Footer from \"../components/Footer.astro\"\n\nconst blogPosts = [\n {\n title: \"10 Ways to Boost Your Team's Productivity\",\n description: \"Discover proven strategies to help your team work smarter, not harder.\",\n date: \"Jan 15, 2025\",\n category: \"Productivity\",\n slug: \"#\",\n },\n {\n title: \"The Future of Remote Work: Trends for 2025\",\n description: \"What's next for distributed teams? We explore the biggest trends shaping remote work.\",\n date: \"Jan 12, 2025\",\n category: \"Remote Work\",\n slug: \"#\",\n },\n {\n title: \"How to Build a Culture of Collaboration\",\n description: \"Learn how leading companies foster collaboration and teamwork at scale.\",\n date: \"Jan 8, 2025\",\n category: \"Culture\",\n slug: \"#\",\n },\n {\n title: \"Automation Best Practices for Growing Teams\",\n description: \"Stop doing repetitive tasks manually. Here's how to automate the right way.\",\n date: \"Jan 5, 2025\",\n category: \"Automation\",\n slug: \"#\",\n },\n {\n title: \"Getting Started with SaaSify: A Complete Guide\",\n description: \"Everything you need to know to get your team up and running with SaaSify.\",\n date: \"Jan 2, 2025\",\n category: \"Getting Started\",\n slug: \"#\",\n },\n {\n title: \"Customer Success Stories: How Acme Corp Scaled 10x\",\n description: \"Learn how Acme Corp used SaaSify to scale their operations while keeping their team lean.\",\n date: \"Dec 28, 2024\",\n category: \"Case Study\",\n slug: \"#\",\n },\n]\n---\n\n<Layout title=\"Blog - SaaSify\" description=\"Insights, tips, and stories to help your team work better together.\">\n <div class=\"min-h-screen flex flex-col\">\n <Header />\n\n <main class=\"flex-1\">\n <!-- Hero -->\n <section class=\"py-16 md:py-24\">\n <div class=\"container mx-auto px-4 text-center\">\n <h1 class=\"text-4xl md:text-5xl font-bold tracking-tight mb-6\">\n Blog\n </h1>\n <p class=\"text-xl text-muted-foreground max-w-2xl mx-auto\">\n Insights, tips, and stories to help your team work better together.\n </p>\n </div>\n </section>\n\n <!-- Blog Grid -->\n <section class=\"pb-24\">\n <div class=\"container mx-auto px-4\">\n <div class=\"grid gap-8 md:grid-cols-2 lg:grid-cols-3\">\n {blogPosts.map((post) => (\n <article\n class=\"group rounded-lg border border-border bg-card p-6 transition-all hover:shadow-lg\"\n >\n <div class=\"mb-4\">\n <span class=\"inline-block px-3 py-1 text-xs font-medium rounded-full bg-primary/10 text-primary\">\n {post.category}\n </span>\n </div>\n <h2 class=\"text-xl font-semibold mb-2 group-hover:text-primary transition-colors\">\n <a href={post.slug}>{post.title}</a>\n </h2>\n <p class=\"text-muted-foreground mb-4\">{post.description}</p>\n <time class=\"text-sm text-muted-foreground\">{post.date}</time>\n </article>\n ))}\n </div>\n </div>\n </section>\n </main>\n\n <Footer />\n </div>\n</Layout>\n",
|
|
@@ -69,14 +69,14 @@ export const EMBEDDED_TEMPLATES: Record<string, string> = {
|
|
|
69
69
|
"marketing/astro/src/pages/pricing.astro": "---\nimport Layout from \"../layouts/Layout.astro\"\nimport Header from \"../components/Header.astro\"\nimport Footer from \"../components/Footer.astro\"\nimport PricingTable from \"../components/blocks/PricingTable.astro\"\nimport FinalCTA from \"../components/blocks/FinalCTA.astro\"\nimport LogoBanner from \"../components/blocks/LogoBanner.astro\"\n---\n\n<Layout title=\"Pricing - SaaSify\" description=\"Simple, transparent pricing for teams of all sizes.\">\n <div class=\"min-h-screen flex flex-col\">\n <Header />\n\n <main class=\"flex-1\">\n <!-- Hero -->\n <section class=\"py-16 md:py-24\">\n <div class=\"container mx-auto px-4 text-center\">\n <h1 class=\"text-4xl md:text-5xl font-bold tracking-tight mb-6\">\n Simple, transparent pricing\n </h1>\n <p class=\"text-xl text-muted-foreground max-w-2xl mx-auto\">\n Start free, upgrade as your team grows. No hidden fees, no surprises.\n </p>\n </div>\n </section>\n\n <!-- Pricing Table -->\n <PricingTable />\n\n <!-- Logo Banner -->\n <LogoBanner\n heading=\"Trusted by fast-growing companies everywhere\"\n style=\"scroll\"\n />\n\n <!-- Final CTA -->\n <FinalCTA\n headline=\"Ready to get started?\"\n subheading=\"Join thousands of teams who chose the smarter way to work.\"\n style=\"dark\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"outline\" },\n { label: \"Contact sales\", href: \"/contact\", variant: \"default\" },\n ]}\n />\n </main>\n\n <Footer />\n </div>\n</Layout>\n",
|
|
70
70
|
"marketing/astro/src/pages/privacy.astro": "---\nimport Layout from \"../layouts/Layout.astro\"\nimport Header from \"../components/Header.astro\"\nimport Footer from \"../components/Footer.astro\"\n---\n\n<Layout title=\"Privacy Policy - SaaSify\" description=\"How we collect, use, and protect your information.\">\n <div class=\"min-h-screen flex flex-col\">\n <Header />\n\n <main class=\"flex-1\">\n <article class=\"py-16 md:py-24\">\n <div class=\"container mx-auto px-4 max-w-3xl\">\n <h1 class=\"text-4xl md:text-5xl font-bold tracking-tight mb-6\">\n Privacy Policy\n </h1>\n <p class=\"text-muted-foreground mb-8\">\n Last updated: January 1, 2025\n </p>\n\n <div class=\"prose prose-neutral dark:prose-invert max-w-none\">\n <h2 class=\"text-2xl font-semibold mt-8 mb-4\">Introduction</h2>\n <p class=\"text-muted-foreground mb-4\">\n At SaaSify, we take your privacy seriously. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our service.\n </p>\n\n <h2 class=\"text-2xl font-semibold mt-8 mb-4\">Information We Collect</h2>\n <p class=\"text-muted-foreground mb-4\">\n We collect information you provide directly to us, such as when you create an account, make a purchase, or contact us for support.\n </p>\n <ul class=\"list-disc pl-6 text-muted-foreground mb-4 space-y-2\">\n <li>Account information (name, email, password)</li>\n <li>Payment information (processed securely by our payment providers)</li>\n <li>Usage data and analytics</li>\n <li>Communications with our support team</li>\n </ul>\n\n <h2 class=\"text-2xl font-semibold mt-8 mb-4\">How We Use Your Information</h2>\n <p class=\"text-muted-foreground mb-4\">\n We use the information we collect to:\n </p>\n <ul class=\"list-disc pl-6 text-muted-foreground mb-4 space-y-2\">\n <li>Provide, maintain, and improve our services</li>\n <li>Process transactions and send related information</li>\n <li>Send you technical notices, updates, and support messages</li>\n <li>Respond to your comments, questions, and requests</li>\n </ul>\n\n <h2 class=\"text-2xl font-semibold mt-8 mb-4\">Data Security</h2>\n <p class=\"text-muted-foreground mb-4\">\n We implement appropriate technical and organizational measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction.\n </p>\n\n <h2 class=\"text-2xl font-semibold mt-8 mb-4\">Contact Us</h2>\n <p class=\"text-muted-foreground mb-4\">\n If you have any questions about this Privacy Policy, please contact us at privacy@saasify.com.\n </p>\n </div>\n </div>\n </article>\n </main>\n\n <Footer />\n </div>\n</Layout>\n",
|
|
71
71
|
"marketing/astro/src/pages/terms.astro": "---\nimport Layout from \"../layouts/Layout.astro\"\nimport Header from \"../components/Header.astro\"\nimport Footer from \"../components/Footer.astro\"\n---\n\n<Layout title=\"Terms of Service - SaaSify\" description=\"Terms and conditions for using SaaSify.\">\n <div class=\"min-h-screen flex flex-col\">\n <Header />\n\n <main class=\"flex-1\">\n <article class=\"py-16 md:py-24\">\n <div class=\"container mx-auto px-4 max-w-3xl\">\n <h1 class=\"text-4xl md:text-5xl font-bold tracking-tight mb-6\">\n Terms of Service\n </h1>\n <p class=\"text-muted-foreground mb-8\">\n Last updated: January 1, 2025\n </p>\n\n <div class=\"prose prose-neutral dark:prose-invert max-w-none\">\n <h2 class=\"text-2xl font-semibold mt-8 mb-4\">Agreement to Terms</h2>\n <p class=\"text-muted-foreground mb-4\">\n By accessing or using SaaSify, you agree to be bound by these Terms of Service. If you disagree with any part of the terms, you may not access the service.\n </p>\n\n <h2 class=\"text-2xl font-semibold mt-8 mb-4\">Use License</h2>\n <p class=\"text-muted-foreground mb-4\">\n Subject to your compliance with these Terms, we grant you a limited, non-exclusive, non-transferable license to access and use our service for your internal business purposes.\n </p>\n\n <h2 class=\"text-2xl font-semibold mt-8 mb-4\">User Accounts</h2>\n <p class=\"text-muted-foreground mb-4\">\n When you create an account with us, you must provide accurate, complete, and current information. You are responsible for safeguarding your account credentials and for all activities that occur under your account.\n </p>\n\n <h2 class=\"text-2xl font-semibold mt-8 mb-4\">Prohibited Uses</h2>\n <p class=\"text-muted-foreground mb-4\">\n You may not use our service:\n </p>\n <ul class=\"list-disc pl-6 text-muted-foreground mb-4 space-y-2\">\n <li>For any unlawful purpose or to promote illegal activities</li>\n <li>To violate any applicable laws or regulations</li>\n <li>To infringe upon the rights of others</li>\n <li>To interfere with or disrupt the service or servers</li>\n </ul>\n\n <h2 class=\"text-2xl font-semibold mt-8 mb-4\">Payment Terms</h2>\n <p class=\"text-muted-foreground mb-4\">\n Paid subscriptions are billed in advance on a monthly or annual basis. You agree to pay all fees associated with your subscription plan.\n </p>\n\n <h2 class=\"text-2xl font-semibold mt-8 mb-4\">Limitation of Liability</h2>\n <p class=\"text-muted-foreground mb-4\">\n In no event shall SaaSify be liable for any indirect, incidental, special, consequential, or punitive damages arising out of or related to your use of the service.\n </p>\n\n <h2 class=\"text-2xl font-semibold mt-8 mb-4\">Contact Us</h2>\n <p class=\"text-muted-foreground mb-4\">\n If you have any questions about these Terms, please contact us at legal@saasify.com.\n </p>\n </div>\n </div>\n </article>\n </main>\n\n <Footer />\n </div>\n</Layout>\n",
|
|
72
|
-
"marketing/astro/src/styles/globals.css.hbs": "@import \"tailwindcss\";\n\n@theme inline {\n\t--color-background: var(--background);\n\t--color-foreground: var(--foreground);\n\t--color-card: var(--card);\n\t--color-card-foreground: var(--card-foreground);\n\t--color-popover: var(--popover);\n\t--color-popover-foreground: var(--popover-foreground);\n\t--color-primary: var(--primary);\n\t--color-primary-foreground: var(--primary-foreground);\n\t--color-secondary: var(--secondary);\n\t--color-secondary-foreground: var(--secondary-foreground);\n\t--color-muted: var(--muted);\n\t--color-muted-foreground: var(--muted-foreground);\n\t--color-accent: var(--accent);\n\t--color-accent-foreground: var(--accent-foreground);\n\t--color-destructive: var(--destructive);\n\t--color-border: var(--border);\n\t--color-input: var(--input);\n\t--color-ring: var(--ring);\n\t--color-chart-1: var(--chart-1);\n\t--color-chart-2: var(--chart-2);\n\t--color-chart-3: var(--chart-3);\n\t--color-chart-4: var(--chart-4);\n\t--color-chart-5: var(--chart-5);\n\t--radius-sm: calc(var(--radius) - 4px);\n\t--radius-md: calc(var(--radius) - 2px);\n\t--radius-lg: var(--radius);\n\t--radius-xl: calc(var(--radius) + 4px);\n\t--font-sans: system-ui, sans-serif;\n\t--font-mono: monospace;\n}\n\n:root {\n\t--radius: 0.625rem;\n\t--background: oklch(1 0 0);\n\t--foreground: oklch(0.145 0 0);\n\t--card: oklch(1 0 0);\n\t--card-foreground: oklch(0.145 0 0);\n\t--popover: oklch(1 0 0);\n\t--popover-foreground: oklch(0.145 0 0);\n\t--secondary: oklch(0.97 0 0);\n\t--secondary-foreground: oklch(0.205 0 0);\n\t--muted: oklch(0.97 0 0);\n\t--muted-foreground: oklch(0.556 0 0);\n\t--accent: oklch(0.97 0 0);\n\t--accent-foreground: oklch(0.205 0 0);\n\t--destructive: oklch(0.577 0.245 27.325);\n\t--border: oklch(0.922 0 0);\n\t--input: oklch(0.922 0 0);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n\t--primary: oklch(0.205 0 0);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.708 0 0);\n\t--chart-1: oklch(0.646 0.222 41.116);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"blue\")}}\n\t--primary: oklch(0.546 0.245 262.881);\n\t--primary-foreground: oklch(0.985 0.002 247.858);\n\t--ring: oklch(0.546 0.245 262.881);\n\t--chart-1: oklch(0.546 0.245 262.881);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"green\")}}\n\t--primary: oklch(0.596 0.145 163.225);\n\t--primary-foreground: oklch(0.982 0.018 155.826);\n\t--ring: oklch(0.596 0.145 163.225);\n\t--chart-1: oklch(0.596 0.145 163.225);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"purple\")}}\n\t--primary: oklch(0.627 0.265 303.9);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.627 0.265 303.9);\n\t--chart-1: oklch(0.627 0.265 303.9);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"red\")}}\n\t--primary: oklch(0.637 0.237 25.331);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.637 0.237 25.331);\n\t--chart-1: oklch(0.637 0.237 25.331);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"orange\")}}\n\t--primary: oklch(0.705 0.191 47.604);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.705 0.191 47.604);\n\t--chart-1: oklch(0.705 0.191 47.604);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"amber\")}}\n\t--primary: oklch(0.769 0.188 70.08);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.769 0.188 70.08);\n\t--chart-1: oklch(0.769 0.188 70.08);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.646 0.222 41.116);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n\t--primary: oklch(0.715 0.143 215.221);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.715 0.143 215.221);\n\t--chart-1: oklch(0.715 0.143 215.221);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n\t--primary: oklch(0.696 0.17 162.48);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.696 0.17 162.48);\n\t--chart-1: oklch(0.696 0.17 162.48);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n\t--primary: oklch(0.667 0.295 322.15);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.667 0.295 322.15);\n\t--chart-1: oklch(0.667 0.295 322.15);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n\t--primary: oklch(0.585 0.233 277.117);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.585 0.233 277.117);\n\t--chart-1: oklch(0.585 0.233 277.117);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"lime\")}}\n\t--primary: oklch(0.768 0.233 130.85);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.768 0.233 130.85);\n\t--chart-1: oklch(0.768 0.233 130.85);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"pink\")}}\n\t--primary: oklch(0.718 0.202 349.761);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.718 0.202 349.761);\n\t--chart-1: oklch(0.718 0.202 349.761);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"rose\")}}\n\t--primary: oklch(0.645 0.246 16.439);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.645 0.246 16.439);\n\t--chart-1: oklch(0.645 0.246 16.439);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"sky\")}}\n\t--primary: oklch(0.685 0.169 237.323);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.685 0.169 237.323);\n\t--chart-1: oklch(0.685 0.169 237.323);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"teal\")}}\n\t--primary: oklch(0.704 0.14 182.503);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.704 0.14 182.503);\n\t--chart-1: oklch(0.704 0.14 182.503);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"violet\")}}\n\t--primary: oklch(0.606 0.25 292.717);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.606 0.25 292.717);\n\t--chart-1: oklch(0.606 0.25 292.717);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n\t--primary: oklch(0.795 0.184 86.047);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.795 0.184 86.047);\n\t--chart-1: oklch(0.795 0.184 86.047);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.646 0.222 41.116);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else}}\n\t--primary: oklch(0.205 0 0);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.708 0 0);\n\t--chart-1: oklch(0.646 0.222 41.116);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{/if}}\n}\n\n[data-theme=\"dark\"] {\n\t--background: oklch(0.145 0 0);\n\t--foreground: oklch(0.985 0 0);\n\t--card: oklch(0.205 0 0);\n\t--card-foreground: oklch(0.985 0 0);\n\t--popover: oklch(0.269 0 0);\n\t--popover-foreground: oklch(0.985 0 0);\n\t--secondary: oklch(0.269 0 0);\n\t--secondary-foreground: oklch(0.985 0 0);\n\t--muted: oklch(0.269 0 0);\n\t--muted-foreground: oklch(0.708 0 0);\n\t--accent: oklch(0.371 0 0);\n\t--accent-foreground: oklch(0.985 0 0);\n\t--destructive: oklch(0.704 0.191 22.216);\n\t--border: oklch(1 0 0 / 10%);\n\t--input: oklch(1 0 0 / 15%);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n\t--primary: oklch(0.922 0 0);\n\t--primary-foreground: oklch(0.205 0 0);\n\t--ring: oklch(0.556 0 0);\n{{else if (eq shadcn.themeColor \"blue\")}}\n\t--primary: oklch(0.623 0.214 262.881);\n\t--primary-foreground: oklch(0.273 0.033 256.848);\n\t--ring: oklch(0.623 0.214 262.881);\n{{else if (eq shadcn.themeColor \"green\")}}\n\t--primary: oklch(0.696 0.17 162.48);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.696 0.17 162.48);\n{{else if (eq shadcn.themeColor \"purple\")}}\n\t--primary: oklch(0.714 0.203 305.504);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.714 0.203 305.504);\n{{else if (eq shadcn.themeColor \"red\")}}\n\t--primary: oklch(0.704 0.191 22.216);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.704 0.191 22.216);\n{{else if (eq shadcn.themeColor \"orange\")}}\n\t--primary: oklch(0.792 0.17 52.615);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.792 0.17 52.615);\n{{else if (eq shadcn.themeColor \"amber\")}}\n\t--primary: oklch(0.828 0.189 84.429);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.828 0.189 84.429);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n\t--primary: oklch(0.789 0.154 211.53);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.789 0.154 211.53);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n\t--primary: oklch(0.765 0.166 160.391);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.765 0.166 160.391);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n\t--primary: oklch(0.74 0.238 322.16);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.74 0.238 322.16);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n\t--primary: oklch(0.673 0.182 276.935);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.673 0.182 276.935);\n{{else if (eq shadcn.themeColor \"lime\")}}\n\t--primary: oklch(0.841 0.238 128.85);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.841 0.238 128.85);\n{{else if (eq shadcn.themeColor \"pink\")}}\n\t--primary: oklch(0.775 0.181 349.761);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.775 0.181 349.761);\n{{else if (eq shadcn.themeColor \"rose\")}}\n\t--primary: oklch(0.712 0.194 13.428);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.712 0.194 13.428);\n{{else if (eq shadcn.themeColor \"sky\")}}\n\t--primary: oklch(0.756 0.143 232.661);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.756 0.143 232.661);\n{{else if (eq shadcn.themeColor \"teal\")}}\n\t--primary: oklch(0.777 0.152 181.912);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.777 0.152 181.912);\n{{else if (eq shadcn.themeColor \"violet\")}}\n\t--primary: oklch(0.702 0.183 293.541);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.702 0.183 293.541);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n\t--primary: oklch(0.852 0.199 91.936);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.852 0.199 91.936);\n{{else}}\n\t--primary: oklch(0.922 0 0);\n\t--primary-foreground: oklch(0.205 0 0);\n\t--ring: oklch(0.556 0 0);\n{{/if}}\n}\n\n@layer base {\n\t* {\n\t\t@apply border-border outline-ring/50;\n\t}\n\tbody {\n\t\t@apply bg-background text-foreground;\n\t}\n}\n\n.container {\n\twidth: 100%;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tpadding-left: 1rem;\n\tpadding-right: 1rem;\n\tmax-width: 96rem;\n}\n\n@media (min-width: 640px) {\n\t.container {\n\t\tpadding-left: 1.5rem;\n\t\tpadding-right: 1.5rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.container {\n\t\tpadding-left: 2rem;\n\t\tpadding-right: 2rem;\n\t}\n}\n\n/* ========================================\n HERO TYPOGRAPHY\n ======================================== */\n\n.hero-content h1 {\n\tfont-size: 2.25rem !important;\n\tline-height: 2.5rem !important;\n\tfont-weight: 700 !important;\n\tletter-spacing: -0.025em !important;\n\tmargin-bottom: 1.5rem !important;\n\tcolor: var(--color-foreground) !important;\n}\n\n.hero-content p {\n\tfont-size: 1.25rem !important;\n\tline-height: 1.75rem !important;\n\tcolor: var(--color-muted-foreground) !important;\n\tmax-width: 42rem;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tmargin-bottom: 2rem !important;\n}\n\n.hero-content--dark h1 {\n\tcolor: white !important;\n}\n\n.hero-content--dark p {\n\tcolor: rgba(255, 255, 255, 0.8) !important;\n}\n\n@media (min-width: 768px) {\n\t.hero-content h1 {\n\t\tfont-size: 3.75rem !important;\n\t\tline-height: 1 !important;\n\t}\n}\n\n/* Left-aligned hero content */\n.hero-content--left h1 {\n\ttext-align: left !important;\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n}\n\n.hero-content--left p {\n\ttext-align: left !important;\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n}\n\n/* ========================================\n PRODUCT SHOWCASE HERO STYLES\n ======================================== */\n\n.hero-showcase {\n\tposition: relative;\n\tborder-radius: 12px;\n\toverflow: hidden;\n\tpadding: 3rem;\n\theight: 500px;\n\twidth: 100%;\n}\n\n@media (min-width: 768px) {\n\t.hero-showcase {\n\t\theight: 600px;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.hero-showcase {\n\t\theight: 700px;\n\t}\n}\n\n.hero-bg-image {\n\tposition: absolute;\n\tinset: 0;\n\tz-index: 0;\n}\n\n.hero-bg-image img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tobject-position: center;\n}\n\n.hero-mockup-centered {\n\tposition: relative;\n\tz-index: 10;\n\tmax-width: 800px;\n\tmargin: 0 auto;\n\twidth: 100%;\n}\n\n@media (min-width: 768px) {\n\t.hero-mockup-centered {\n\t\tmax-width: 900px;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.hero-mockup-centered {\n\t\tmax-width: 1000px;\n\t}\n}\n\n.mockup-wrapper {\n\tbackground: var(--color-background);\n\tborder-radius: 12px;\n\tbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);\n\toverflow: hidden;\n\tanimation: mockup-entrance 0.8s ease-out;\n\twidth: 100%;\n}\n\n.mockup-wrapper img {\n\twidth: 100%;\n\theight: auto;\n\tdisplay: block;\n}\n\n@keyframes mockup-entrance {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(30px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n/* Browser chrome */\n.mockup-chrome {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 12px 16px;\n\tbackground: var(--color-muted);\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.mockup-chrome-dots {\n\tdisplay: flex;\n\tgap: 6px;\n}\n\n.mockup-chrome-dots .dot {\n\twidth: 12px;\n\theight: 12px;\n\tborder-radius: 50%;\n}\n\n.mockup-chrome-dots .dot-red {\n\tbackground: #ff5f56;\n}\n.mockup-chrome-dots .dot-yellow {\n\tbackground: #ffbd2e;\n}\n.mockup-chrome-dots .dot-green {\n\tbackground: #27ca40;\n}\n\n.mockup-chrome-title {\n\tflex: 1;\n\ttext-align: center;\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n}\n\n.mockup-chrome-actions {\n\twidth: 60px;\n}\n\n/* App content layout */\n.mockup-content {\n\tdisplay: flex;\n\tmin-height: 400px;\n}\n\n.mockup-sidebar {\n\twidth: 220px;\n\tbackground: var(--color-card);\n\tborder-right: 1px solid var(--color-border);\n\tflex-shrink: 0;\n}\n\n.sidebar-header {\n\tpadding: 16px;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.sidebar-logo {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n}\n\n.logo-icon {\n\twidth: 28px;\n\theight: 28px;\n\tbackground: var(--color-primary);\n\tcolor: white;\n\tborder-radius: 6px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 700;\n\tfont-size: 14px;\n}\n\n.logo-text {\n\tfont-weight: 600;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n}\n\n.sidebar-nav {\n\tpadding: 8px;\n}\n\n.sidebar-item {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tpadding: 10px 12px;\n\tborder-radius: 6px;\n\tfont-size: 13px;\n\tcolor: var(--color-muted-foreground);\n\ttransition: all 0.15s ease;\n\tcursor: pointer;\n}\n\n.sidebar-item:hover {\n\tbackground: var(--color-accent);\n\tcolor: var(--color-accent-foreground);\n}\n\n.sidebar-item--active {\n\tbackground: oklch(from var(--color-primary) l c h / 0.12);\n\tcolor: var(--color-primary);\n}\n\n.sidebar-icon {\n\tfont-size: 16px;\n}\n\n.sidebar-label {\n\tflex: 1;\n}\n\n.sidebar-badge {\n\tbackground: var(--color-primary);\n\tcolor: var(--color-primary-foreground);\n\tfont-size: 11px;\n\tpadding: 2px 6px;\n\tborder-radius: 10px;\n\tfont-weight: 500;\n}\n\n/* Main content area */\n.mockup-main {\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbackground: var(--color-background);\n}\n\n.main-header {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 16px 20px;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.header-title {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n}\n\n.header-title h2 {\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tmargin: 0;\n\tcolor: var(--color-foreground);\n}\n\n.header-breadcrumb {\n\tfont-size: 12px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.header-actions {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n}\n\n.action-btn {\n\tpadding: 8px 16px;\n\tbackground: var(--color-primary);\n\tcolor: var(--color-primary-foreground);\n\tborder: none;\n\tborder-radius: 6px;\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.3s ease;\n}\n\n.action-btn--success {\n\tbackground: #27ca40;\n}\n\n.action-btn--featured {\n\tbackground: var(--color-primary);\n}\n\n/* Split view */\n.main-split {\n\tdisplay: flex;\n\tflex: 1;\n}\n\n.editor-panel {\n\tflex: 1;\n\tpadding: 20px;\n\tborder-right: 1px solid var(--color-border);\n}\n\n.editor-section {\n\tmargin-bottom: 20px;\n}\n\n.editor-label {\n\tdisplay: block;\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n\tmargin-bottom: 6px;\n}\n\n.editor-input {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.input-text {\n\tflex: 1;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.input-cursor {\n\twidth: 2px;\n\theight: 18px;\n\tbackground: var(--color-primary);\n\tanimation: blink 1s infinite;\n\tmargin-left: 2px;\n}\n\n@keyframes blink {\n\t0%,\n\t50% {\n\t\topacity: 1;\n\t}\n\t51%,\n\t100% {\n\t\topacity: 0;\n\t}\n}\n\n.editor-select {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n}\n\n.select-arrow {\n\tfont-size: 10px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.editor-textarea {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tmin-height: 80px;\n}\n\n.textarea-text {\n\ttransition: all 0.5s ease;\n}\n\n.textarea-text--complete {\n\tcolor: var(--color-foreground);\n}\n\n/* Preview panel */\n.preview-panel {\n\twidth: 320px;\n\tpadding: 20px;\n\tbackground: oklch(from var(--color-muted) l c h / 0.5);\n}\n\n.preview-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin-bottom: 16px;\n}\n\n.preview-label {\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n}\n\n.preview-url {\n\tfont-size: 11px;\n\tcolor: var(--color-muted-foreground);\n\tfont-family: monospace;\n}\n\n.preview-card {\n\tbackground: var(--color-card);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 10px;\n\toverflow: hidden;\n\tposition: relative;\n\ttransition: all 0.3s ease;\n}\n\n.preview-badge {\n\tposition: absolute;\n\ttop: 10px;\n\tright: 10px;\n\tbackground: var(--color-primary);\n\tcolor: white;\n\tfont-size: 11px;\n\tpadding: 4px 8px;\n\tborder-radius: 4px;\n\tfont-weight: 500;\n\tanimation: badge-pop 0.3s ease;\n}\n\n@keyframes badge-pop {\n\tfrom {\n\t\ttransform: scale(0);\n\t\topacity: 0;\n\t}\n\tto {\n\t\ttransform: scale(1);\n\t\topacity: 1;\n\t}\n}\n\n.preview-image {\n\theight: 120px;\n\tbackground: linear-gradient(135deg, var(--color-muted) 0%, var(--color-accent) 100%);\n}\n\n.preview-image-placeholder {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: 40px;\n}\n\n.preview-content {\n\tpadding: 16px;\n}\n\n.preview-category-tag {\n\tdisplay: inline-block;\n\tfont-size: 11px;\n\tcolor: var(--color-primary);\n\tfont-weight: 500;\n\tmargin-bottom: 8px;\n}\n\n.preview-title {\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tmargin: 0 0 8px;\n\tcolor: var(--color-foreground);\n}\n\n.preview-description {\n\tfont-size: 13px;\n\tcolor: var(--color-muted-foreground);\n\tline-height: 1.5;\n\tmargin: 0 0 12px;\n}\n\n.preview-meta {\n\tdisplay: flex;\n\tgap: 8px;\n\tfont-size: 12px;\n}\n\n.meta-rating {\n\tcolor: #ffc24a;\n}\n\n.meta-reviews {\n\tcolor: var(--color-muted-foreground);\n}\n\n/* State indicators */\n.mockup-indicators {\n\tdisplay: flex;\n\tjustify-content: center;\n\tgap: 24px;\n\tpadding: 16px;\n\tborder-top: 1px solid var(--color-border);\n}\n\n.indicator {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tbackground: none;\n\tborder: none;\n\tcursor: pointer;\n\tpadding: 6px 12px;\n\tborder-radius: 20px;\n\ttransition: all 0.2s ease;\n}\n\n.indicator:hover {\n\tbackground: var(--color-accent);\n}\n\n.indicator--active {\n\tbackground: oklch(from var(--color-primary) l c h / 0.12);\n}\n\n.indicator-dot {\n\twidth: 8px;\n\theight: 8px;\n\tborder-radius: 50%;\n\tbackground: var(--color-muted-foreground);\n\ttransition: all 0.2s ease;\n}\n\n.indicator--active .indicator-dot {\n\tbackground: var(--color-primary);\n\tbox-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.2);\n}\n\n.indicator-label {\n\tfont-size: 12px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.indicator--active .indicator-label {\n\tcolor: var(--color-foreground);\n\tfont-weight: 500;\n}\n\n/* ========================================\n LOGO BANNER STYLES\n ======================================== */\n\n.logo-scroll-container {\n\toverflow: hidden;\n\tmask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\n}\n\n.logo-scroll-track {\n\tdisplay: flex;\n\tanimation: logo-scroll 30s linear infinite;\n}\n\n.logo-scroll-track:hover {\n\tanimation-play-state: paused;\n}\n\n@keyframes logo-scroll {\n\t0% {\n\t\ttransform: translateX(0);\n\t}\n\t100% {\n\t\ttransform: translateX(-50%);\n\t}\n}\n\n.logo-item {\n\tflex-shrink: 0;\n\tmin-width: 150px;\n}\n\n/* ========================================\n RESPONSIVE ADJUSTMENTS\n ======================================== */\n\n@media (max-width: 768px) {\n\t.mockup-content {\n\t\tflex-direction: column;\n\t}\n\n\t.mockup-sidebar {\n\t\twidth: 100%;\n\t\tborder-right: none;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t.sidebar-nav {\n\t\tdisplay: flex;\n\t\toverflow-x: auto;\n\t\tpadding: 8px;\n\t\tgap: 4px;\n\t}\n\n\t.sidebar-item {\n\t\twhite-space: nowrap;\n\t}\n\n\t.main-split {\n\t\tflex-direction: column;\n\t}\n\n\t.editor-panel {\n\t\tborder-right: none;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t.preview-panel {\n\t\twidth: 100%;\n\t}\n\n\t.mockup-indicators {\n\t\tflex-wrap: wrap;\n\t\tgap: 12px;\n\t}\n\n\t.indicator-label {\n\t\tdisplay: none;\n\t}\n}\n\n/* ========================================\n ANIMATION STYLES\n ======================================== */\n\n/* Industry Tabs Animation */\n.industry-tab-content {\n\tanimation: tab-fade-in 0.3s ease-out;\n}\n\n@keyframes tab-fade-in {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(10px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n/* Feature Showcase Entrance Animation */\n@keyframes feature-slide-in {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateX(-20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n}\n\n.feature-showcase-content {\n\tanimation: feature-slide-in 0.5s ease-out;\n}\n\n/* Testimonial Card Hover Effects */\n.testimonial-card {\n\ttransition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.testimonial-card:hover {\n\ttransform: translateY(-4px);\n\tbox-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);\n}\n\n/* Stat Number Animation */\n@keyframes stat-count-up {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.stat-number {\n\tanimation: stat-count-up 0.6s ease-out;\n}\n\n/* Trust Column Icon Animation */\n.trust-icon {\n\ttransition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.trust-icon:hover {\n\ttransform: scale(1.1);\n}\n\n/* Final CTA Background Animation */\n@keyframes subtle-float {\n\t0%,\n\t100% {\n\t\ttransform: translateY(0);\n\t}\n\t50% {\n\t\ttransform: translateY(-10px);\n\t}\n}\n\n.cta-decorative {\n\tanimation: subtle-float 6s ease-in-out infinite;\n}\n\n/* Feature Grid Card Entrance */\n@keyframes card-entrance {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.feature-card {\n\tanimation: card-entrance 0.4s ease-out;\n\tanimation-fill-mode: both;\n}\n\n.feature-card:nth-child(1) {\n\tanimation-delay: 0.1s;\n}\n.feature-card:nth-child(2) {\n\tanimation-delay: 0.2s;\n}\n.feature-card:nth-child(3) {\n\tanimation-delay: 0.3s;\n}\n.feature-card:nth-child(4) {\n\tanimation-delay: 0.4s;\n}\n.feature-card:nth-child(5) {\n\tanimation-delay: 0.5s;\n}\n.feature-card:nth-child(6) {\n\tanimation-delay: 0.6s;\n}\n\n/* Smooth Section Transitions */\nsection {\n\tscroll-margin-top: 80px;\n}\n\n/* Button Hover Enhancement */\n.cta-button {\n\tposition: relative;\n\toverflow: hidden;\n}\n\n.cta-button::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tinset: 0;\n\tbackground: linear-gradient(rgba(255, 255, 255, 0.1), transparent);\n\topacity: 0;\n\ttransition: opacity 0.3s ease;\n}\n\n.cta-button:hover::after {\n\topacity: 1;\n}\n\n/* Responsive Image Container */\n.feature-image-container {\n\tposition: relative;\n\tborder-radius: 12px;\n\toverflow: hidden;\n\tbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\n\ttransition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.feature-image-container:hover {\n\ttransform: translateY(-4px);\n\tbox-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);\n}\n",
|
|
72
|
+
"marketing/astro/src/styles/globals.css.hbs": "@import \"tailwindcss\";\n\n@theme inline {\n\t--color-background: var(--background);\n\t--color-foreground: var(--foreground);\n\t--color-card: var(--card);\n\t--color-card-foreground: var(--card-foreground);\n\t--color-popover: var(--popover);\n\t--color-popover-foreground: var(--popover-foreground);\n\t--color-primary: var(--primary);\n\t--color-primary-foreground: var(--primary-foreground);\n\t--color-secondary: var(--secondary);\n\t--color-secondary-foreground: var(--secondary-foreground);\n\t--color-muted: var(--muted);\n\t--color-muted-foreground: var(--muted-foreground);\n\t--color-accent: var(--accent);\n\t--color-accent-foreground: var(--accent-foreground);\n\t--color-destructive: var(--destructive);\n\t--color-border: var(--border);\n\t--color-input: var(--input);\n\t--color-ring: var(--ring);\n\t--color-chart-1: var(--chart-1);\n\t--color-chart-2: var(--chart-2);\n\t--color-chart-3: var(--chart-3);\n\t--color-chart-4: var(--chart-4);\n\t--color-chart-5: var(--chart-5);\n\t--radius-sm: calc(var(--radius) - 4px);\n\t--radius-md: calc(var(--radius) - 2px);\n\t--radius-lg: var(--radius);\n\t--radius-xl: calc(var(--radius) + 4px);\n\t--font-sans: system-ui, sans-serif;\n\t--font-mono: monospace;\n}\n\n:root {\n\t--radius: 0.625rem;\n\t--background: oklch(1 0 0);\n\t--foreground: oklch(0.145 0 0);\n\t--card: oklch(1 0 0);\n\t--card-foreground: oklch(0.145 0 0);\n\t--popover: oklch(1 0 0);\n\t--popover-foreground: oklch(0.145 0 0);\n\t--secondary: oklch(0.97 0 0);\n\t--secondary-foreground: oklch(0.205 0 0);\n\t--muted: oklch(0.97 0 0);\n\t--muted-foreground: oklch(0.556 0 0);\n\t--accent: oklch(0.97 0 0);\n\t--accent-foreground: oklch(0.205 0 0);\n\t--destructive: oklch(0.577 0.245 27.325);\n\t--border: oklch(0.922 0 0);\n\t--input: oklch(0.922 0 0);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n\t--primary: oklch(0.205 0 0);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.708 0 0);\n\t--chart-1: oklch(0.646 0.222 41.116);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"blue\")}}\n\t--primary: oklch(0.546 0.245 262.881);\n\t--primary-foreground: oklch(0.985 0.002 247.858);\n\t--ring: oklch(0.546 0.245 262.881);\n\t--chart-1: oklch(0.546 0.245 262.881);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"green\")}}\n\t--primary: oklch(0.596 0.145 163.225);\n\t--primary-foreground: oklch(0.982 0.018 155.826);\n\t--ring: oklch(0.596 0.145 163.225);\n\t--chart-1: oklch(0.596 0.145 163.225);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"purple\")}}\n\t--primary: oklch(0.627 0.265 303.9);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.627 0.265 303.9);\n\t--chart-1: oklch(0.627 0.265 303.9);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"red\")}}\n\t--primary: oklch(0.637 0.237 25.331);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.637 0.237 25.331);\n\t--chart-1: oklch(0.637 0.237 25.331);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"orange\")}}\n\t--primary: oklch(0.705 0.191 47.604);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.705 0.191 47.604);\n\t--chart-1: oklch(0.705 0.191 47.604);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"amber\")}}\n\t--primary: oklch(0.769 0.188 70.08);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.769 0.188 70.08);\n\t--chart-1: oklch(0.769 0.188 70.08);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.646 0.222 41.116);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n\t--primary: oklch(0.715 0.143 215.221);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.715 0.143 215.221);\n\t--chart-1: oklch(0.715 0.143 215.221);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n\t--primary: oklch(0.696 0.17 162.48);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.696 0.17 162.48);\n\t--chart-1: oklch(0.696 0.17 162.48);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n\t--primary: oklch(0.667 0.295 322.15);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.667 0.295 322.15);\n\t--chart-1: oklch(0.667 0.295 322.15);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n\t--primary: oklch(0.585 0.233 277.117);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.585 0.233 277.117);\n\t--chart-1: oklch(0.585 0.233 277.117);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"lime\")}}\n\t--primary: oklch(0.768 0.233 130.85);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.768 0.233 130.85);\n\t--chart-1: oklch(0.768 0.233 130.85);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"pink\")}}\n\t--primary: oklch(0.718 0.202 349.761);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.718 0.202 349.761);\n\t--chart-1: oklch(0.718 0.202 349.761);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"rose\")}}\n\t--primary: oklch(0.645 0.246 16.439);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.645 0.246 16.439);\n\t--chart-1: oklch(0.645 0.246 16.439);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"sky\")}}\n\t--primary: oklch(0.685 0.169 237.323);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.685 0.169 237.323);\n\t--chart-1: oklch(0.685 0.169 237.323);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"teal\")}}\n\t--primary: oklch(0.704 0.14 182.503);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.704 0.14 182.503);\n\t--chart-1: oklch(0.704 0.14 182.503);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"violet\")}}\n\t--primary: oklch(0.606 0.25 292.717);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.606 0.25 292.717);\n\t--chart-1: oklch(0.606 0.25 292.717);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n\t--primary: oklch(0.795 0.184 86.047);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.795 0.184 86.047);\n\t--chart-1: oklch(0.795 0.184 86.047);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.646 0.222 41.116);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else}}\n\t--primary: oklch(0.205 0 0);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.708 0 0);\n\t--chart-1: oklch(0.646 0.222 41.116);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{/if}}\n}\n\n[data-theme=\"dark\"] {\n\t--background: oklch(0.145 0 0);\n\t--foreground: oklch(0.985 0 0);\n\t--card: oklch(0.205 0 0);\n\t--card-foreground: oklch(0.985 0 0);\n\t--popover: oklch(0.269 0 0);\n\t--popover-foreground: oklch(0.985 0 0);\n\t--secondary: oklch(0.269 0 0);\n\t--secondary-foreground: oklch(0.985 0 0);\n\t--muted: oklch(0.269 0 0);\n\t--muted-foreground: oklch(0.708 0 0);\n\t--accent: oklch(0.371 0 0);\n\t--accent-foreground: oklch(0.985 0 0);\n\t--destructive: oklch(0.704 0.191 22.216);\n\t--border: oklch(1 0 0 / 10%);\n\t--input: oklch(1 0 0 / 15%);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n\t--primary: oklch(0.922 0 0);\n\t--primary-foreground: oklch(0.205 0 0);\n\t--ring: oklch(0.556 0 0);\n{{else if (eq shadcn.themeColor \"blue\")}}\n\t--primary: oklch(0.623 0.214 262.881);\n\t--primary-foreground: oklch(0.273 0.033 256.848);\n\t--ring: oklch(0.623 0.214 262.881);\n{{else if (eq shadcn.themeColor \"green\")}}\n\t--primary: oklch(0.696 0.17 162.48);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.696 0.17 162.48);\n{{else if (eq shadcn.themeColor \"purple\")}}\n\t--primary: oklch(0.714 0.203 305.504);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.714 0.203 305.504);\n{{else if (eq shadcn.themeColor \"red\")}}\n\t--primary: oklch(0.704 0.191 22.216);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.704 0.191 22.216);\n{{else if (eq shadcn.themeColor \"orange\")}}\n\t--primary: oklch(0.792 0.17 52.615);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.792 0.17 52.615);\n{{else if (eq shadcn.themeColor \"amber\")}}\n\t--primary: oklch(0.828 0.189 84.429);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.828 0.189 84.429);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n\t--primary: oklch(0.789 0.154 211.53);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.789 0.154 211.53);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n\t--primary: oklch(0.765 0.166 160.391);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.765 0.166 160.391);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n\t--primary: oklch(0.74 0.238 322.16);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.74 0.238 322.16);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n\t--primary: oklch(0.673 0.182 276.935);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.673 0.182 276.935);\n{{else if (eq shadcn.themeColor \"lime\")}}\n\t--primary: oklch(0.841 0.238 128.85);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.841 0.238 128.85);\n{{else if (eq shadcn.themeColor \"pink\")}}\n\t--primary: oklch(0.775 0.181 349.761);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.775 0.181 349.761);\n{{else if (eq shadcn.themeColor \"rose\")}}\n\t--primary: oklch(0.712 0.194 13.428);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.712 0.194 13.428);\n{{else if (eq shadcn.themeColor \"sky\")}}\n\t--primary: oklch(0.756 0.143 232.661);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.756 0.143 232.661);\n{{else if (eq shadcn.themeColor \"teal\")}}\n\t--primary: oklch(0.777 0.152 181.912);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.777 0.152 181.912);\n{{else if (eq shadcn.themeColor \"violet\")}}\n\t--primary: oklch(0.702 0.183 293.541);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.702 0.183 293.541);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n\t--primary: oklch(0.852 0.199 91.936);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.852 0.199 91.936);\n{{else}}\n\t--primary: oklch(0.922 0 0);\n\t--primary-foreground: oklch(0.205 0 0);\n\t--ring: oklch(0.556 0 0);\n{{/if}}\n}\n\n@layer base {\n\t* {\n\t\t@apply border-border outline-ring/50;\n\t}\n\tbody {\n\t\t@apply bg-background text-foreground;\n\t}\n}\n\n.container {\n\twidth: 100%;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tpadding-left: 1rem;\n\tpadding-right: 1rem;\n\tmax-width: 96rem;\n}\n\n@media (min-width: 640px) {\n\t.container {\n\t\tpadding-left: 1.5rem;\n\t\tpadding-right: 1.5rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.container {\n\t\tpadding-left: 2rem;\n\t\tpadding-right: 2rem;\n\t}\n}\n\n/* ========================================\n HERO TYPOGRAPHY\n ======================================== */\n\n.hero-content h1 {\n\tfont-size: 2.25rem !important;\n\tline-height: 2.5rem !important;\n\tfont-weight: 700 !important;\n\tletter-spacing: -0.025em !important;\n\tmargin-bottom: 1.5rem !important;\n\tcolor: var(--color-foreground) !important;\n}\n\n.hero-content p {\n\tfont-size: 1.25rem !important;\n\tline-height: 1.75rem !important;\n\tcolor: var(--color-muted-foreground) !important;\n\tmax-width: 42rem;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tmargin-bottom: 2rem !important;\n}\n\n.hero-content--dark h1 {\n\tcolor: white !important;\n}\n\n.hero-content--dark p {\n\tcolor: rgba(255, 255, 255, 0.8) !important;\n}\n\n@media (min-width: 768px) {\n\t.hero-content h1 {\n\t\tfont-size: 3.75rem !important;\n\t\tline-height: 1 !important;\n\t}\n}\n\n/* Left-aligned hero content */\n.hero-content--left h1 {\n\ttext-align: left !important;\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n}\n\n.hero-content--left p {\n\ttext-align: left !important;\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n}\n\n/* ========================================\n PRODUCT SHOWCASE HERO STYLES\n ======================================== */\n\n.hero-showcase {\n\tposition: relative;\n\tborder-radius: 1rem;\n\toverflow: hidden;\n\theight: 25rem;\n\twidth: 100%;\n\tmax-width: 75rem;\n\tmargin: 0 auto;\n\tbackground: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, black) 100%);\n}\n\n@media (min-width: 768px) {\n\t.hero-showcase {\n\t\theight: 31.25rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.hero-showcase {\n\t\theight: 37.5rem;\n\t}\n}\n\n.hero-bg-image {\n\tposition: absolute;\n\tinset: 0;\n\tz-index: 0;\n\topacity: 0.1;\n}\n\n.hero-bg-image img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tobject-position: center;\n}\n\n.hero-mockup-centered {\n\tposition: relative;\n\tz-index: 10;\n\tpadding: 2rem;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\theight: 100%;\n}\n\n@media (min-width: 768px) {\n\t.hero-mockup-centered {\n\t\tpadding: 3rem;\n\t}\n}\n\n.mockup-wrapper {\n\tbackground: var(--color-background);\n\tborder-radius: 12px;\n\tbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);\n\toverflow: hidden;\n\tanimation: mockup-entrance 0.8s ease-out;\n\twidth: 100%;\n}\n\n.mockup-wrapper img {\n\twidth: 100%;\n\theight: auto;\n\tdisplay: block;\n}\n\n@keyframes mockup-entrance {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(30px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n/* Browser chrome */\n.mockup-chrome {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 12px 16px;\n\tbackground: var(--color-muted);\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.mockup-chrome-dots {\n\tdisplay: flex;\n\tgap: 6px;\n}\n\n.mockup-chrome-dots .dot {\n\twidth: 12px;\n\theight: 12px;\n\tborder-radius: 50%;\n}\n\n.mockup-chrome-dots .dot-red {\n\tbackground: #ff5f56;\n}\n.mockup-chrome-dots .dot-yellow {\n\tbackground: #ffbd2e;\n}\n.mockup-chrome-dots .dot-green {\n\tbackground: #27ca40;\n}\n\n.mockup-chrome-title {\n\tflex: 1;\n\ttext-align: center;\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n}\n\n.mockup-chrome-actions {\n\twidth: 60px;\n}\n\n/* App content layout */\n.mockup-content {\n\tdisplay: flex;\n\tmin-height: 400px;\n}\n\n.mockup-sidebar {\n\twidth: 220px;\n\tbackground: var(--color-card);\n\tborder-right: 1px solid var(--color-border);\n\tflex-shrink: 0;\n}\n\n.sidebar-header {\n\tpadding: 16px;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.sidebar-logo {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n}\n\n.logo-icon {\n\twidth: 28px;\n\theight: 28px;\n\tbackground: var(--color-primary);\n\tcolor: white;\n\tborder-radius: 6px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 700;\n\tfont-size: 14px;\n}\n\n.logo-text {\n\tfont-weight: 600;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n}\n\n.sidebar-nav {\n\tpadding: 8px;\n}\n\n.sidebar-item {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tpadding: 10px 12px;\n\tborder-radius: 6px;\n\tfont-size: 13px;\n\tcolor: var(--color-muted-foreground);\n\ttransition: all 0.15s ease;\n\tcursor: pointer;\n}\n\n.sidebar-item:hover {\n\tbackground: var(--color-accent);\n\tcolor: var(--color-accent-foreground);\n}\n\n.sidebar-item--active {\n\tbackground: oklch(from var(--color-primary) l c h / 0.12);\n\tcolor: var(--color-primary);\n}\n\n.sidebar-icon {\n\tfont-size: 16px;\n}\n\n.sidebar-label {\n\tflex: 1;\n}\n\n.sidebar-badge {\n\tbackground: var(--color-primary);\n\tcolor: var(--color-primary-foreground);\n\tfont-size: 11px;\n\tpadding: 2px 6px;\n\tborder-radius: 10px;\n\tfont-weight: 500;\n}\n\n/* Main content area */\n.mockup-main {\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbackground: var(--color-background);\n}\n\n.main-header {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 16px 20px;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.header-title {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n}\n\n.header-title h2 {\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tmargin: 0;\n\tcolor: var(--color-foreground);\n}\n\n.header-breadcrumb {\n\tfont-size: 12px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.header-actions {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n}\n\n.action-btn {\n\tpadding: 8px 16px;\n\tbackground: var(--color-primary);\n\tcolor: var(--color-primary-foreground);\n\tborder: none;\n\tborder-radius: 6px;\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.3s ease;\n}\n\n.action-btn--success {\n\tbackground: #27ca40;\n}\n\n.action-btn--featured {\n\tbackground: var(--color-primary);\n}\n\n/* Split view */\n.main-split {\n\tdisplay: flex;\n\tflex: 1;\n}\n\n.editor-panel {\n\tflex: 1;\n\tpadding: 20px;\n\tborder-right: 1px solid var(--color-border);\n}\n\n.editor-section {\n\tmargin-bottom: 20px;\n}\n\n.editor-label {\n\tdisplay: block;\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n\tmargin-bottom: 6px;\n}\n\n.editor-input {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.input-text {\n\tflex: 1;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.input-cursor {\n\twidth: 2px;\n\theight: 18px;\n\tbackground: var(--color-primary);\n\tanimation: blink 1s infinite;\n\tmargin-left: 2px;\n}\n\n@keyframes blink {\n\t0%,\n\t50% {\n\t\topacity: 1;\n\t}\n\t51%,\n\t100% {\n\t\topacity: 0;\n\t}\n}\n\n.editor-select {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n}\n\n.select-arrow {\n\tfont-size: 10px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.editor-textarea {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tmin-height: 80px;\n}\n\n.textarea-text {\n\ttransition: all 0.5s ease;\n}\n\n.textarea-text--complete {\n\tcolor: var(--color-foreground);\n}\n\n/* Preview panel */\n.preview-panel {\n\twidth: 320px;\n\tpadding: 20px;\n\tbackground: oklch(from var(--color-muted) l c h / 0.5);\n}\n\n.preview-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin-bottom: 16px;\n}\n\n.preview-label {\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n}\n\n.preview-url {\n\tfont-size: 11px;\n\tcolor: var(--color-muted-foreground);\n\tfont-family: monospace;\n}\n\n.preview-card {\n\tbackground: var(--color-card);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 10px;\n\toverflow: hidden;\n\tposition: relative;\n\ttransition: all 0.3s ease;\n}\n\n.preview-badge {\n\tposition: absolute;\n\ttop: 10px;\n\tright: 10px;\n\tbackground: var(--color-primary);\n\tcolor: white;\n\tfont-size: 11px;\n\tpadding: 4px 8px;\n\tborder-radius: 4px;\n\tfont-weight: 500;\n\tanimation: badge-pop 0.3s ease;\n}\n\n@keyframes badge-pop {\n\tfrom {\n\t\ttransform: scale(0);\n\t\topacity: 0;\n\t}\n\tto {\n\t\ttransform: scale(1);\n\t\topacity: 1;\n\t}\n}\n\n.preview-image {\n\theight: 120px;\n\tbackground: linear-gradient(135deg, var(--color-muted) 0%, var(--color-accent) 100%);\n}\n\n.preview-image-placeholder {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: 40px;\n}\n\n.preview-content {\n\tpadding: 16px;\n}\n\n.preview-category-tag {\n\tdisplay: inline-block;\n\tfont-size: 11px;\n\tcolor: var(--color-primary);\n\tfont-weight: 500;\n\tmargin-bottom: 8px;\n}\n\n.preview-title {\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tmargin: 0 0 8px;\n\tcolor: var(--color-foreground);\n}\n\n.preview-description {\n\tfont-size: 13px;\n\tcolor: var(--color-muted-foreground);\n\tline-height: 1.5;\n\tmargin: 0 0 12px;\n}\n\n.preview-meta {\n\tdisplay: flex;\n\tgap: 8px;\n\tfont-size: 12px;\n}\n\n.meta-rating {\n\tcolor: #ffc24a;\n}\n\n.meta-reviews {\n\tcolor: var(--color-muted-foreground);\n}\n\n/* State indicators */\n.mockup-indicators {\n\tdisplay: flex;\n\tjustify-content: center;\n\tgap: 24px;\n\tpadding: 16px;\n\tborder-top: 1px solid var(--color-border);\n}\n\n.indicator {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tbackground: none;\n\tborder: none;\n\tcursor: pointer;\n\tpadding: 6px 12px;\n\tborder-radius: 20px;\n\ttransition: all 0.2s ease;\n}\n\n.indicator:hover {\n\tbackground: var(--color-accent);\n}\n\n.indicator--active {\n\tbackground: oklch(from var(--color-primary) l c h / 0.12);\n}\n\n.indicator-dot {\n\twidth: 8px;\n\theight: 8px;\n\tborder-radius: 50%;\n\tbackground: var(--color-muted-foreground);\n\ttransition: all 0.2s ease;\n}\n\n.indicator--active .indicator-dot {\n\tbackground: var(--color-primary);\n\tbox-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.2);\n}\n\n.indicator-label {\n\tfont-size: 12px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.indicator--active .indicator-label {\n\tcolor: var(--color-foreground);\n\tfont-weight: 500;\n}\n\n/* ========================================\n LOGO BANNER STYLES\n ======================================== */\n\n.logo-scroll-container {\n\toverflow: hidden;\n\tmask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\n}\n\n.logo-scroll-track {\n\tdisplay: flex;\n\tanimation: logo-scroll 30s linear infinite;\n}\n\n.logo-scroll-track:hover {\n\tanimation-play-state: paused;\n}\n\n@keyframes logo-scroll {\n\t0% {\n\t\ttransform: translateX(0);\n\t}\n\t100% {\n\t\ttransform: translateX(-50%);\n\t}\n}\n\n.logo-item {\n\tflex-shrink: 0;\n\tmin-width: 150px;\n}\n\n/* ========================================\n RESPONSIVE ADJUSTMENTS\n ======================================== */\n\n@media (max-width: 768px) {\n\t.mockup-content {\n\t\tflex-direction: column;\n\t}\n\n\t.mockup-sidebar {\n\t\twidth: 100%;\n\t\tborder-right: none;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t.sidebar-nav {\n\t\tdisplay: flex;\n\t\toverflow-x: auto;\n\t\tpadding: 8px;\n\t\tgap: 4px;\n\t}\n\n\t.sidebar-item {\n\t\twhite-space: nowrap;\n\t}\n\n\t.main-split {\n\t\tflex-direction: column;\n\t}\n\n\t.editor-panel {\n\t\tborder-right: none;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t.preview-panel {\n\t\twidth: 100%;\n\t}\n\n\t.mockup-indicators {\n\t\tflex-wrap: wrap;\n\t\tgap: 12px;\n\t}\n\n\t.indicator-label {\n\t\tdisplay: none;\n\t}\n}\n\n/* ========================================\n ANIMATION STYLES\n ======================================== */\n\n/* Industry Tabs Animation */\n.industry-tab-content {\n\tanimation: tab-fade-in 0.3s ease-out;\n}\n\n@keyframes tab-fade-in {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(10px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n/* Feature Showcase Entrance Animation */\n@keyframes feature-slide-in {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateX(-20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n}\n\n.feature-showcase-content {\n\tanimation: feature-slide-in 0.5s ease-out;\n}\n\n/* Testimonial Card Hover Effects */\n.testimonial-card {\n\ttransition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.testimonial-card:hover {\n\ttransform: translateY(-4px);\n\tbox-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);\n}\n\n/* Stat Number Animation */\n@keyframes stat-count-up {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.stat-number {\n\tanimation: stat-count-up 0.6s ease-out;\n}\n\n/* Trust Column Icon Animation */\n.trust-icon {\n\ttransition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.trust-icon:hover {\n\ttransform: scale(1.1);\n}\n\n/* Final CTA Background Animation */\n@keyframes subtle-float {\n\t0%,\n\t100% {\n\t\ttransform: translateY(0);\n\t}\n\t50% {\n\t\ttransform: translateY(-10px);\n\t}\n}\n\n.cta-decorative {\n\tanimation: subtle-float 6s ease-in-out infinite;\n}\n\n/* Feature Grid Card Entrance */\n@keyframes card-entrance {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.feature-card {\n\tanimation: card-entrance 0.4s ease-out;\n\tanimation-fill-mode: both;\n}\n\n.feature-card:nth-child(1) {\n\tanimation-delay: 0.1s;\n}\n.feature-card:nth-child(2) {\n\tanimation-delay: 0.2s;\n}\n.feature-card:nth-child(3) {\n\tanimation-delay: 0.3s;\n}\n.feature-card:nth-child(4) {\n\tanimation-delay: 0.4s;\n}\n.feature-card:nth-child(5) {\n\tanimation-delay: 0.5s;\n}\n.feature-card:nth-child(6) {\n\tanimation-delay: 0.6s;\n}\n\n/* Smooth Section Transitions */\nsection {\n\tscroll-margin-top: 80px;\n}\n\n/* Button Hover Enhancement */\n.cta-button {\n\tposition: relative;\n\toverflow: hidden;\n}\n\n.cta-button::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tinset: 0;\n\tbackground: linear-gradient(rgba(255, 255, 255, 0.1), transparent);\n\topacity: 0;\n\ttransition: opacity 0.3s ease;\n}\n\n.cta-button:hover::after {\n\topacity: 1;\n}\n\n/* Responsive Image Container */\n.feature-image-container {\n\tposition: relative;\n\tborder-radius: 12px;\n\toverflow: hidden;\n\tbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\n\ttransition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.feature-image-container:hover {\n\ttransform: translateY(-4px);\n\tbox-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);\n}\n",
|
|
73
73
|
"marketing/astro/tsconfig.json.hbs": "{\n \"extends\": \"astro/tsconfigs/strict\",\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"./src/*\"]\n }\n },\n \"include\": [\"src/**/*\", \".astro/types.d.ts\"],\n \"exclude\": [\"node_modules\", \"dist\"]\n}\n",
|
|
74
74
|
"marketing/nextjs/next.config.ts.hbs": "import type { NextConfig } from 'next'\n\nconst nextConfig: NextConfig = {\n transpilePackages: ['@repo/ui'],\n}\n\nexport default nextConfig\n",
|
|
75
75
|
"marketing/nextjs/package.json.hbs": "{\n \"name\": \"@repo/marketing\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev --turbopack --port 3000\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"biome check .\",\n \"lint:fix\": \"biome check --write .\",\n \"typecheck\": \"tsc --noEmit\"\n },\n \"dependencies\": {\n \"next\": \"^16.0.0\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"@repo/ui\": \"workspace:*\",\n \"lucide-react\": \"^0.468.0\",\n \"next-themes\": \"^0.4.4\",\n \"clsx\": \"^2.1.1\",\n \"tailwind-merge\": \"^2.6.0\",\n \"class-variance-authority\": \"^0.7.1\"\n },\n \"devDependencies\": {\n \"@repo/config-typescript\": \"workspace:*\",\n \"@types/node\": \"^20.0.0\",\n \"@types/react\": \"^19.0.0\",\n \"@types/react-dom\": \"^19.0.0\",\n \"tailwindcss\": \"^4.0.0\",\n \"@tailwindcss/postcss\": \"^4.0.0\",\n \"postcss\": \"^8.4.0\",\n \"typescript\": \"^5.0.0\"\n }\n}\n",
|
|
76
76
|
"marketing/nextjs/postcss.config.mjs.hbs": "export default {\n plugins: {\n '@tailwindcss/postcss': {},\n },\n}\n",
|
|
77
77
|
"marketing/nextjs/src/app/blog/page.tsx": "import { Header } from \"@/components/Header\"\nimport { Footer } from \"@/components/Footer\"\nimport Link from \"next/link\"\n\nconst blogPosts = [\n {\n title: \"10 Ways to Boost Your Team's Productivity\",\n description: \"Discover proven strategies to help your team work smarter, not harder.\",\n date: \"Jan 15, 2025\",\n category: \"Productivity\",\n slug: \"#\",\n },\n {\n title: \"The Future of Remote Work: Trends for 2025\",\n description: \"What's next for distributed teams? We explore the biggest trends shaping remote work.\",\n date: \"Jan 12, 2025\",\n category: \"Remote Work\",\n slug: \"#\",\n },\n {\n title: \"How to Build a Culture of Collaboration\",\n description: \"Learn how leading companies foster collaboration and teamwork at scale.\",\n date: \"Jan 8, 2025\",\n category: \"Culture\",\n slug: \"#\",\n },\n {\n title: \"Automation Best Practices for Growing Teams\",\n description: \"Stop doing repetitive tasks manually. Here's how to automate the right way.\",\n date: \"Jan 5, 2025\",\n category: \"Automation\",\n slug: \"#\",\n },\n {\n title: \"Getting Started with SaaSify: A Complete Guide\",\n description: \"Everything you need to know to get your team up and running with SaaSify.\",\n date: \"Jan 2, 2025\",\n category: \"Getting Started\",\n slug: \"#\",\n },\n {\n title: \"Customer Success Stories: How Acme Corp Scaled 10x\",\n description: \"Learn how Acme Corp used SaaSify to scale their operations while keeping their team lean.\",\n date: \"Dec 28, 2024\",\n category: \"Case Study\",\n slug: \"#\",\n },\n]\n\nexport default function BlogPage() {\n return (\n <div className=\"min-h-screen flex flex-col\">\n <Header />\n\n <main className=\"flex-1\">\n {/* Hero */}\n <section className=\"py-16 md:py-24\">\n <div className=\"container mx-auto px-4 text-center\">\n <h1 className=\"text-4xl md:text-5xl font-bold tracking-tight mb-6\">\n Blog\n </h1>\n <p className=\"text-xl text-muted-foreground max-w-2xl mx-auto\">\n Insights, tips, and stories to help your team work better together.\n </p>\n </div>\n </section>\n\n {/* Blog Grid */}\n <section className=\"pb-24\">\n <div className=\"container mx-auto px-4\">\n <div className=\"grid gap-8 md:grid-cols-2 lg:grid-cols-3\">\n {blogPosts.map((post) => (\n <article\n key={post.title}\n className=\"group rounded-lg border border-border bg-card p-6 transition-all hover:shadow-lg\"\n >\n <div className=\"mb-4\">\n <span className=\"inline-block px-3 py-1 text-xs font-medium rounded-full bg-primary/10 text-primary\">\n {post.category}\n </span>\n </div>\n <h2 className=\"text-xl font-semibold mb-2 group-hover:text-primary transition-colors\">\n <Link href={post.slug}>{post.title}</Link>\n </h2>\n <p className=\"text-muted-foreground mb-4\">{post.description}</p>\n <time className=\"text-sm text-muted-foreground\">{post.date}</time>\n </article>\n ))}\n </div>\n </div>\n </section>\n </main>\n\n <Footer />\n </div>\n )\n}\n",
|
|
78
78
|
"marketing/nextjs/src/app/features/page.tsx": "import { Header } from \"@/components/Header\"\nimport { Footer } from \"@/components/Footer\"\nimport {\n BentoFeatures,\n FeatureShowcase,\n LogoBanner,\n FinalCTA,\n} from \"@/components/blocks\"\n\nexport default function FeaturesPage() {\n return (\n <div className=\"min-h-screen flex flex-col\">\n <Header />\n\n <main className=\"flex-1\">\n {/* Hero */}\n <section className=\"py-16 md:py-24\">\n <div className=\"container mx-auto px-4 text-center\">\n <h1 className=\"text-4xl md:text-5xl font-bold tracking-tight mb-6\">\n Powerful features for modern teams\n </h1>\n <p className=\"text-xl text-muted-foreground max-w-2xl mx-auto\">\n Everything you need to streamline workflows, boost productivity, and scale your business.\n </p>\n </div>\n </section>\n\n {/* Bento Features */}\n <BentoFeatures\n heading=\"Discover what SaaSify can do\"\n subheading=\"Everything you need to work smarter and scale faster\"\n />\n\n {/* Feature Showcase: Integrations */}\n <FeatureShowcase\n label=\"Seamless Integrations\"\n headline=\"Connect everything your team uses in one place\"\n description=\"Integrate with 100+ popular tools including Slack, Salesforce, HubSpot, and more. Two-way sync keeps everything up to date automatically.\"\n features={[\n { text: \"100+ native integrations\" },\n { text: \"Two-way data sync\" },\n { text: \"Custom webhooks\" },\n { text: \"API access included\" },\n ]}\n link={{ label: \"Learn more\", href: \"#\" }}\n imagePosition=\"right\"\n />\n\n {/* Feature Showcase: Analytics */}\n <FeatureShowcase\n label=\"Actionable Analytics\"\n headline=\"Make decisions backed by real-time data\"\n description=\"Track every metric that matters. From team performance to customer insights, get the visibility you need to drive growth.\"\n features={[\n { text: \"Real-time dashboards\" },\n { text: \"Custom reports\" },\n { text: \"Team performance metrics\" },\n { text: \"Automated insights\" },\n ]}\n link={{ label: \"Learn more\", href: \"#\" }}\n imagePosition=\"left\"\n />\n\n {/* Feature Showcase: Automation */}\n <FeatureShowcase\n label=\"Workflow Automation\"\n headline=\"Eliminate busywork with smart automation\"\n description=\"Build powerful workflows without code. Automate approvals, notifications, data entry, and more to focus on what matters.\"\n features={[\n { text: \"Visual workflow builder\" },\n { text: \"Conditional logic\" },\n { text: \"Scheduled triggers\" },\n { text: \"Cross-app automation\" },\n ]}\n link={{ label: \"Learn more\", href: \"#\" }}\n imagePosition=\"right\"\n />\n\n {/* Logo Banner */}\n <LogoBanner\n heading=\"Integrates with your favorite tools\"\n style=\"grid\"\n logos={[\n { name: \"Slack\", initials: \"SL\" },\n { name: \"Salesforce\", initials: \"SF\" },\n { name: \"HubSpot\", initials: \"HS\" },\n { name: \"Google Workspace\", initials: \"GW\" },\n { name: \"Zapier\", initials: \"ZP\" },\n { name: \"Jira\", initials: \"JI\" },\n ]}\n />\n\n {/* Final CTA */}\n <FinalCTA\n headline=\"Ready to transform how your team works?\"\n subheading=\"Start your free trial today. No credit card required.\"\n style=\"dark\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"outline\" },\n { label: \"View pricing\", href: \"/pricing\", variant: \"default\" },\n ]}\n />\n </main>\n\n <Footer />\n </div>\n )\n}\n",
|
|
79
|
-
"marketing/nextjs/src/app/globals.css.hbs": "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n\n@custom-variant dark (&:is(.dark *));\n\n@theme inline {\n\t/* Colors */\n\t--color-background: var(--background);\n\t--color-foreground: var(--foreground);\n\n\t--color-card: var(--card);\n\t--color-card-foreground: var(--card-foreground);\n\n\t--color-popover: var(--popover);\n\t--color-popover-foreground: var(--popover-foreground);\n\n\t--color-primary: var(--primary);\n\t--color-primary-foreground: var(--primary-foreground);\n\n\t--color-secondary: var(--secondary);\n\t--color-secondary-foreground: var(--secondary-foreground);\n\n\t--color-muted: var(--muted);\n\t--color-muted-foreground: var(--muted-foreground);\n\n\t--color-accent: var(--accent);\n\t--color-accent-foreground: var(--accent-foreground);\n\n\t--color-destructive: var(--destructive);\n\n\t--color-border: var(--border);\n\t--color-input: var(--input);\n\t--color-ring: var(--ring);\n\n\t--color-chart-1: var(--chart-1);\n\t--color-chart-2: var(--chart-2);\n\t--color-chart-3: var(--chart-3);\n\t--color-chart-4: var(--chart-4);\n\t--color-chart-5: var(--chart-5);\n\n\t/* Border radius */\n\t--radius-sm: calc(var(--radius) - 4px);\n\t--radius-md: calc(var(--radius) - 2px);\n\t--radius-lg: var(--radius);\n\t--radius-xl: calc(var(--radius) + 4px);\n\n\t/* Fonts */\n\t--font-sans: var(--font-geist-sans), system-ui, sans-serif;\n\t--font-mono: var(--font-geist-mono), monospace;\n\n\t/* Container */\n\t--container-sm: 40rem;\n\t--container-md: 48rem;\n\t--container-lg: 64rem;\n\t--container-xl: 80rem;\n\t--container-2xl: 96rem;\n\n\t/* Animations */\n\t--animate-accordion-down: accordion-down 0.2s ease-out;\n\t--animate-accordion-up: accordion-up 0.2s ease-out;\n}\n\n@keyframes accordion-down {\n\tfrom {\n\t\theight: 0;\n\t}\n\tto {\n\t\theight: var(--radix-accordion-content-height);\n\t}\n}\n\n@keyframes accordion-up {\n\tfrom {\n\t\theight: var(--radix-accordion-content-height);\n\t}\n\tto {\n\t\theight: 0;\n\t}\n}\n\n/* ========================================\n THEME COLOR VARIABLES\n ======================================== */\n\n:root {\n\t--radius: 0.625rem;\n\t--background: oklch(1 0 0);\n\t--foreground: oklch(0.145 0 0);\n\t--card: oklch(1 0 0);\n\t--card-foreground: oklch(0.145 0 0);\n\t--popover: oklch(1 0 0);\n\t--popover-foreground: oklch(0.145 0 0);\n\t--secondary: oklch(0.97 0 0);\n\t--secondary-foreground: oklch(0.205 0 0);\n\t--muted: oklch(0.97 0 0);\n\t--muted-foreground: oklch(0.556 0 0);\n\t--accent: oklch(0.97 0 0);\n\t--accent-foreground: oklch(0.205 0 0);\n\t--destructive: oklch(0.577 0.245 27.325);\n\t--border: oklch(0.922 0 0);\n\t--input: oklch(0.922 0 0);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n\t--primary: oklch(0.205 0 0);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.708 0 0);\n\t--chart-1: oklch(0.646 0.222 41.116);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"blue\")}}\n\t--primary: oklch(0.546 0.245 262.881);\n\t--primary-foreground: oklch(0.985 0.002 247.858);\n\t--ring: oklch(0.546 0.245 262.881);\n\t--chart-1: oklch(0.546 0.245 262.881);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"green\")}}\n\t--primary: oklch(0.596 0.145 163.225);\n\t--primary-foreground: oklch(0.982 0.018 155.826);\n\t--ring: oklch(0.596 0.145 163.225);\n\t--chart-1: oklch(0.596 0.145 163.225);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"purple\")}}\n\t--primary: oklch(0.627 0.265 303.9);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.627 0.265 303.9);\n\t--chart-1: oklch(0.627 0.265 303.9);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"red\")}}\n\t--primary: oklch(0.637 0.237 25.331);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.637 0.237 25.331);\n\t--chart-1: oklch(0.637 0.237 25.331);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"orange\")}}\n\t--primary: oklch(0.705 0.191 47.604);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.705 0.191 47.604);\n\t--chart-1: oklch(0.705 0.191 47.604);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"amber\")}}\n\t--primary: oklch(0.769 0.188 70.08);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.769 0.188 70.08);\n\t--chart-1: oklch(0.769 0.188 70.08);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.646 0.222 41.116);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n\t--primary: oklch(0.715 0.143 215.221);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.715 0.143 215.221);\n\t--chart-1: oklch(0.715 0.143 215.221);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n\t--primary: oklch(0.696 0.17 162.48);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.696 0.17 162.48);\n\t--chart-1: oklch(0.696 0.17 162.48);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n\t--primary: oklch(0.667 0.295 322.15);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.667 0.295 322.15);\n\t--chart-1: oklch(0.667 0.295 322.15);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n\t--primary: oklch(0.585 0.233 277.117);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.585 0.233 277.117);\n\t--chart-1: oklch(0.585 0.233 277.117);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"lime\")}}\n\t--primary: oklch(0.768 0.233 130.85);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.768 0.233 130.85);\n\t--chart-1: oklch(0.768 0.233 130.85);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"pink\")}}\n\t--primary: oklch(0.718 0.202 349.761);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.718 0.202 349.761);\n\t--chart-1: oklch(0.718 0.202 349.761);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"rose\")}}\n\t--primary: oklch(0.645 0.246 16.439);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.645 0.246 16.439);\n\t--chart-1: oklch(0.645 0.246 16.439);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"sky\")}}\n\t--primary: oklch(0.685 0.169 237.323);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.685 0.169 237.323);\n\t--chart-1: oklch(0.685 0.169 237.323);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"teal\")}}\n\t--primary: oklch(0.704 0.14 182.503);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.704 0.14 182.503);\n\t--chart-1: oklch(0.704 0.14 182.503);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"violet\")}}\n\t--primary: oklch(0.606 0.25 292.717);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.606 0.25 292.717);\n\t--chart-1: oklch(0.606 0.25 292.717);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n\t--primary: oklch(0.795 0.184 86.047);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.795 0.184 86.047);\n\t--chart-1: oklch(0.795 0.184 86.047);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.646 0.222 41.116);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else}}\n\t--primary: oklch(0.205 0 0);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.708 0 0);\n\t--chart-1: oklch(0.646 0.222 41.116);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{/if}}\n}\n\n.dark {\n\t--background: oklch(0.145 0 0);\n\t--foreground: oklch(0.985 0 0);\n\t--card: oklch(0.205 0 0);\n\t--card-foreground: oklch(0.985 0 0);\n\t--popover: oklch(0.269 0 0);\n\t--popover-foreground: oklch(0.985 0 0);\n\t--secondary: oklch(0.269 0 0);\n\t--secondary-foreground: oklch(0.985 0 0);\n\t--muted: oklch(0.269 0 0);\n\t--muted-foreground: oklch(0.708 0 0);\n\t--accent: oklch(0.371 0 0);\n\t--accent-foreground: oklch(0.985 0 0);\n\t--destructive: oklch(0.704 0.191 22.216);\n\t--border: oklch(1 0 0 / 10%);\n\t--input: oklch(1 0 0 / 15%);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n\t--primary: oklch(0.922 0 0);\n\t--primary-foreground: oklch(0.205 0 0);\n\t--ring: oklch(0.556 0 0);\n\t--chart-1: oklch(0.488 0.243 264.376);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"blue\")}}\n\t--primary: oklch(0.623 0.214 262.881);\n\t--primary-foreground: oklch(0.273 0.033 256.848);\n\t--ring: oklch(0.623 0.214 262.881);\n\t--chart-1: oklch(0.623 0.214 262.881);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"green\")}}\n\t--primary: oklch(0.696 0.17 162.48);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.696 0.17 162.48);\n\t--chart-1: oklch(0.696 0.17 162.48);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"purple\")}}\n\t--primary: oklch(0.714 0.203 305.504);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.714 0.203 305.504);\n\t--chart-1: oklch(0.714 0.203 305.504);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.488 0.243 264.376);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"red\")}}\n\t--primary: oklch(0.704 0.191 22.216);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.704 0.191 22.216);\n\t--chart-1: oklch(0.704 0.191 22.216);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"orange\")}}\n\t--primary: oklch(0.792 0.17 52.615);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.792 0.17 52.615);\n\t--chart-1: oklch(0.792 0.17 52.615);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"amber\")}}\n\t--primary: oklch(0.828 0.189 84.429);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.828 0.189 84.429);\n\t--chart-1: oklch(0.828 0.189 84.429);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.488 0.243 264.376);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n\t--primary: oklch(0.789 0.154 211.53);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.789 0.154 211.53);\n\t--chart-1: oklch(0.789 0.154 211.53);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n\t--primary: oklch(0.765 0.166 160.391);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.765 0.166 160.391);\n\t--chart-1: oklch(0.765 0.166 160.391);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n\t--primary: oklch(0.74 0.238 322.16);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.74 0.238 322.16);\n\t--chart-1: oklch(0.74 0.238 322.16);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.488 0.243 264.376);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n\t--primary: oklch(0.673 0.182 276.935);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.673 0.182 276.935);\n\t--chart-1: oklch(0.673 0.182 276.935);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"lime\")}}\n\t--primary: oklch(0.841 0.238 128.85);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.841 0.238 128.85);\n\t--chart-1: oklch(0.841 0.238 128.85);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"pink\")}}\n\t--primary: oklch(0.775 0.181 349.761);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.775 0.181 349.761);\n\t--chart-1: oklch(0.775 0.181 349.761);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"rose\")}}\n\t--primary: oklch(0.712 0.194 13.428);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.712 0.194 13.428);\n\t--chart-1: oklch(0.712 0.194 13.428);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"sky\")}}\n\t--primary: oklch(0.756 0.143 232.661);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.756 0.143 232.661);\n\t--chart-1: oklch(0.756 0.143 232.661);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"teal\")}}\n\t--primary: oklch(0.777 0.152 181.912);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.777 0.152 181.912);\n\t--chart-1: oklch(0.777 0.152 181.912);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"violet\")}}\n\t--primary: oklch(0.702 0.183 293.541);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.702 0.183 293.541);\n\t--chart-1: oklch(0.702 0.183 293.541);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.488 0.243 264.376);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n\t--primary: oklch(0.852 0.199 91.936);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.852 0.199 91.936);\n\t--chart-1: oklch(0.852 0.199 91.936);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.488 0.243 264.376);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else}}\n\t--primary: oklch(0.922 0 0);\n\t--primary-foreground: oklch(0.205 0 0);\n\t--ring: oklch(0.556 0 0);\n\t--chart-1: oklch(0.488 0.243 264.376);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{/if}}\n}\n\n/* ========================================\n BASE STYLES\n ======================================== */\n\n@layer base {\n\t* {\n\t\t@apply border-border outline-ring/50;\n\t}\n\tbody {\n\t\t@apply bg-background text-foreground;\n\t}\n}\n\n/* Container utility */\n.container {\n\twidth: 100%;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tpadding-left: 1rem;\n\tpadding-right: 1rem;\n\tmax-width: 96rem;\n}\n\n@media (min-width: 640px) {\n\t.container {\n\t\tpadding-left: 1.5rem;\n\t\tpadding-right: 1.5rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.container {\n\t\tpadding-left: 2rem;\n\t\tpadding-right: 2rem;\n\t}\n}\n\n/* ========================================\n HERO TYPOGRAPHY\n ======================================== */\n\n.hero-content h1 {\n\tfont-size: 2.25rem !important;\n\tline-height: 2.5rem !important;\n\tfont-weight: 700 !important;\n\tletter-spacing: -0.025em !important;\n\tmargin-bottom: 1.5rem !important;\n\tcolor: var(--color-foreground) !important;\n}\n\n.hero-content p {\n\tfont-size: 1.25rem !important;\n\tline-height: 1.75rem !important;\n\tcolor: var(--color-muted-foreground) !important;\n\tmax-width: 42rem;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tmargin-bottom: 2rem !important;\n}\n\n.hero-content--dark h1 {\n\tcolor: white !important;\n}\n\n.hero-content--dark p {\n\tcolor: rgba(255, 255, 255, 0.8) !important;\n}\n\n@media (min-width: 768px) {\n\t.hero-content h1 {\n\t\tfont-size: 3.75rem !important;\n\t\tline-height: 1 !important;\n\t}\n}\n\n/* Left-aligned hero content */\n.hero-content--left h1 {\n\ttext-align: left !important;\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n}\n\n.hero-content--left p {\n\ttext-align: left !important;\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n}\n\n/* ========================================\n PRODUCT SHOWCASE HERO STYLES\n ======================================== */\n\n.hero-showcase {\n\tposition: relative;\n\tborder-radius: 1rem;\n\toverflow: hidden;\n\theight: 400px;\n\twidth: 100%;\n\tmax-width: 1200px;\n\tmargin: 0 auto;\n\tbackground: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, black) 100%);\n}\n\n@media (min-width: 768px) {\n\t.hero-showcase {\n\t\theight: 500px;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.hero-showcase {\n\t\theight: 600px;\n\t}\n}\n\n.hero-bg-image {\n\tposition: absolute;\n\tinset: 0;\n\tz-index: 0;\n\topacity: 0.1;\n}\n\n.hero-bg-image img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tobject-position: center;\n}\n\n.hero-mockup-centered {\n\tposition: relative;\n\tz-index: 10;\n\tpadding: 2rem;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\theight: 100%;\n}\n\n@media (min-width: 768px) {\n\t.hero-mockup-centered {\n\t\tpadding: 3rem;\n\t}\n}\n\n.mockup-wrapper {\n\tbackground: var(--color-background);\n\tborder-radius: 12px;\n\tbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);\n\toverflow: hidden;\n\tanimation: mockup-entrance 0.8s ease-out;\n\twidth: 100%;\n}\n\n.mockup-wrapper img {\n\twidth: 100%;\n\theight: auto;\n\tdisplay: block;\n}\n\n@keyframes mockup-entrance {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(30px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n/* Browser chrome */\n.mockup-chrome {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 12px 16px;\n\tbackground: var(--color-muted);\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.mockup-chrome-dots {\n\tdisplay: flex;\n\tgap: 6px;\n}\n\n.mockup-chrome-dots .dot {\n\twidth: 12px;\n\theight: 12px;\n\tborder-radius: 50%;\n}\n\n.mockup-chrome-dots .dot-red {\n\tbackground: #ff5f56;\n}\n.mockup-chrome-dots .dot-yellow {\n\tbackground: #ffbd2e;\n}\n.mockup-chrome-dots .dot-green {\n\tbackground: #27ca40;\n}\n\n.mockup-chrome-title {\n\tflex: 1;\n\ttext-align: center;\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n}\n\n.mockup-chrome-actions {\n\twidth: 60px;\n}\n\n/* App content layout */\n.mockup-content {\n\tdisplay: flex;\n\tmin-height: 400px;\n}\n\n.mockup-sidebar {\n\twidth: 220px;\n\tbackground: var(--color-card);\n\tborder-right: 1px solid var(--color-border);\n\tflex-shrink: 0;\n}\n\n.sidebar-header {\n\tpadding: 16px;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.sidebar-logo {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n}\n\n.logo-icon {\n\twidth: 28px;\n\theight: 28px;\n\tbackground: var(--color-primary);\n\tcolor: white;\n\tborder-radius: 6px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 700;\n\tfont-size: 14px;\n}\n\n.logo-text {\n\tfont-weight: 600;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n}\n\n.sidebar-nav {\n\tpadding: 8px;\n}\n\n.sidebar-item {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tpadding: 10px 12px;\n\tborder-radius: 6px;\n\tfont-size: 13px;\n\tcolor: var(--color-muted-foreground);\n\ttransition: all 0.15s ease;\n\tcursor: pointer;\n}\n\n.sidebar-item:hover {\n\tbackground: var(--color-accent);\n\tcolor: var(--color-accent-foreground);\n}\n\n.sidebar-item--active {\n\tbackground: oklch(from var(--color-primary) l c h / 0.12);\n\tcolor: var(--color-primary);\n}\n\n.sidebar-icon {\n\tfont-size: 16px;\n}\n\n.sidebar-label {\n\tflex: 1;\n}\n\n.sidebar-badge {\n\tbackground: var(--color-primary);\n\tcolor: var(--color-primary-foreground);\n\tfont-size: 11px;\n\tpadding: 2px 6px;\n\tborder-radius: 10px;\n\tfont-weight: 500;\n}\n\n/* Main content area */\n.mockup-main {\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbackground: var(--color-background);\n}\n\n.main-header {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 16px 20px;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.header-title {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n}\n\n.header-title h2 {\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tmargin: 0;\n\tcolor: var(--color-foreground);\n}\n\n.header-breadcrumb {\n\tfont-size: 12px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.header-actions {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n}\n\n.action-btn {\n\tpadding: 8px 16px;\n\tbackground: var(--color-primary);\n\tcolor: var(--color-primary-foreground);\n\tborder: none;\n\tborder-radius: 6px;\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.3s ease;\n}\n\n.action-btn--success {\n\tbackground: #27ca40;\n}\n\n.action-btn--featured {\n\tbackground: var(--color-primary);\n}\n\n/* Split view */\n.main-split {\n\tdisplay: flex;\n\tflex: 1;\n}\n\n.editor-panel {\n\tflex: 1;\n\tpadding: 20px;\n\tborder-right: 1px solid var(--color-border);\n}\n\n.editor-section {\n\tmargin-bottom: 20px;\n}\n\n.editor-label {\n\tdisplay: block;\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n\tmargin-bottom: 6px;\n}\n\n.editor-input {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.input-text {\n\tflex: 1;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.input-cursor {\n\twidth: 2px;\n\theight: 18px;\n\tbackground: var(--color-primary);\n\tanimation: blink 1s infinite;\n\tmargin-left: 2px;\n}\n\n@keyframes blink {\n\t0%,\n\t50% {\n\t\topacity: 1;\n\t}\n\t51%,\n\t100% {\n\t\topacity: 0;\n\t}\n}\n\n.editor-select {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n}\n\n.select-arrow {\n\tfont-size: 10px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.editor-textarea {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tmin-height: 80px;\n}\n\n.textarea-text {\n\ttransition: all 0.5s ease;\n}\n\n.textarea-text--complete {\n\tcolor: var(--color-foreground);\n}\n\n/* Preview panel */\n.preview-panel {\n\twidth: 320px;\n\tpadding: 20px;\n\tbackground: oklch(from var(--color-muted) l c h / 0.5);\n}\n\n.preview-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin-bottom: 16px;\n}\n\n.preview-label {\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n}\n\n.preview-url {\n\tfont-size: 11px;\n\tcolor: var(--color-muted-foreground);\n\tfont-family: monospace;\n}\n\n.preview-card {\n\tbackground: var(--color-card);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 10px;\n\toverflow: hidden;\n\tposition: relative;\n\ttransition: all 0.3s ease;\n}\n\n.preview-badge {\n\tposition: absolute;\n\ttop: 10px;\n\tright: 10px;\n\tbackground: var(--color-primary);\n\tcolor: white;\n\tfont-size: 11px;\n\tpadding: 4px 8px;\n\tborder-radius: 4px;\n\tfont-weight: 500;\n\tanimation: badge-pop 0.3s ease;\n}\n\n@keyframes badge-pop {\n\tfrom {\n\t\ttransform: scale(0);\n\t\topacity: 0;\n\t}\n\tto {\n\t\ttransform: scale(1);\n\t\topacity: 1;\n\t}\n}\n\n.preview-image {\n\theight: 120px;\n\tbackground: linear-gradient(135deg, var(--color-muted) 0%, var(--color-accent) 100%);\n}\n\n.preview-image-placeholder {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: 40px;\n}\n\n.preview-content {\n\tpadding: 16px;\n}\n\n.preview-category-tag {\n\tdisplay: inline-block;\n\tfont-size: 11px;\n\tcolor: var(--color-primary);\n\tfont-weight: 500;\n\tmargin-bottom: 8px;\n}\n\n.preview-title {\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tmargin: 0 0 8px;\n\tcolor: var(--color-foreground);\n}\n\n.preview-description {\n\tfont-size: 13px;\n\tcolor: var(--color-muted-foreground);\n\tline-height: 1.5;\n\tmargin: 0 0 12px;\n}\n\n.preview-meta {\n\tdisplay: flex;\n\tgap: 8px;\n\tfont-size: 12px;\n}\n\n.meta-rating {\n\tcolor: #ffc24a;\n}\n\n.meta-reviews {\n\tcolor: var(--color-muted-foreground);\n}\n\n/* State indicators */\n.mockup-indicators {\n\tdisplay: flex;\n\tjustify-content: center;\n\tgap: 24px;\n\tpadding: 16px;\n\tborder-top: 1px solid var(--color-border);\n}\n\n.indicator {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tbackground: none;\n\tborder: none;\n\tcursor: pointer;\n\tpadding: 6px 12px;\n\tborder-radius: 20px;\n\ttransition: all 0.2s ease;\n}\n\n.indicator:hover {\n\tbackground: var(--color-accent);\n}\n\n.indicator--active {\n\tbackground: oklch(from var(--color-primary) l c h / 0.12);\n}\n\n.indicator-dot {\n\twidth: 8px;\n\theight: 8px;\n\tborder-radius: 50%;\n\tbackground: var(--color-muted-foreground);\n\ttransition: all 0.2s ease;\n}\n\n.indicator--active .indicator-dot {\n\tbackground: var(--color-primary);\n\tbox-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.2);\n}\n\n.indicator-label {\n\tfont-size: 12px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.indicator--active .indicator-label {\n\tcolor: var(--color-foreground);\n\tfont-weight: 500;\n}\n\n/* ========================================\n LOGO BANNER STYLES\n ======================================== */\n\n.logo-scroll-container {\n\toverflow: hidden;\n\tmask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\n}\n\n.logo-scroll-track {\n\tdisplay: flex;\n\tanimation: logo-scroll 30s linear infinite;\n}\n\n.logo-scroll-track:hover {\n\tanimation-play-state: paused;\n}\n\n@keyframes logo-scroll {\n\t0% {\n\t\ttransform: translateX(0);\n\t}\n\t100% {\n\t\ttransform: translateX(-50%);\n\t}\n}\n\n.logo-item {\n\tflex-shrink: 0;\n\tmin-width: 150px;\n}\n\n/* ========================================\n RESPONSIVE ADJUSTMENTS\n ======================================== */\n\n@media (max-width: 768px) {\n\t.mockup-content {\n\t\tflex-direction: column;\n\t}\n\n\t.mockup-sidebar {\n\t\twidth: 100%;\n\t\tborder-right: none;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t.sidebar-nav {\n\t\tdisplay: flex;\n\t\toverflow-x: auto;\n\t\tpadding: 8px;\n\t\tgap: 4px;\n\t}\n\n\t.sidebar-item {\n\t\twhite-space: nowrap;\n\t}\n\n\t.main-split {\n\t\tflex-direction: column;\n\t}\n\n\t.editor-panel {\n\t\tborder-right: none;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t.preview-panel {\n\t\twidth: 100%;\n\t}\n\n\t.mockup-indicators {\n\t\tflex-wrap: wrap;\n\t\tgap: 12px;\n\t}\n\n\t.indicator-label {\n\t\tdisplay: none;\n\t}\n}\n\n/* ========================================\n ANIMATION STYLES\n ======================================== */\n\n/* Industry Tabs Animation */\n.industry-tab-content {\n\tanimation: tab-fade-in 0.3s ease-out;\n}\n\n@keyframes tab-fade-in {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(10px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n/* Feature Showcase Entrance Animation */\n@keyframes feature-slide-in {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateX(-20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n}\n\n.feature-showcase-content {\n\tanimation: feature-slide-in 0.5s ease-out;\n}\n\n/* Testimonial Card Hover Effects */\n.testimonial-card {\n\ttransition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.testimonial-card:hover {\n\ttransform: translateY(-4px);\n\tbox-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);\n}\n\n/* Stat Number Animation */\n@keyframes stat-count-up {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.stat-number {\n\tanimation: stat-count-up 0.6s ease-out;\n}\n\n/* Trust Column Icon Animation */\n.trust-icon {\n\ttransition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.trust-icon:hover {\n\ttransform: scale(1.1);\n}\n\n/* Final CTA Background Animation */\n@keyframes subtle-float {\n\t0%,\n\t100% {\n\t\ttransform: translateY(0);\n\t}\n\t50% {\n\t\ttransform: translateY(-10px);\n\t}\n}\n\n.cta-decorative {\n\tanimation: subtle-float 6s ease-in-out infinite;\n}\n\n/* Feature Grid Card Entrance */\n@keyframes card-entrance {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.feature-card {\n\tanimation: card-entrance 0.4s ease-out;\n\tanimation-fill-mode: both;\n}\n\n.feature-card:nth-child(1) {\n\tanimation-delay: 0.1s;\n}\n.feature-card:nth-child(2) {\n\tanimation-delay: 0.2s;\n}\n.feature-card:nth-child(3) {\n\tanimation-delay: 0.3s;\n}\n.feature-card:nth-child(4) {\n\tanimation-delay: 0.4s;\n}\n.feature-card:nth-child(5) {\n\tanimation-delay: 0.5s;\n}\n.feature-card:nth-child(6) {\n\tanimation-delay: 0.6s;\n}\n\n/* Smooth Section Transitions */\nsection {\n\tscroll-margin-top: 80px;\n}\n\n/* Button Hover Enhancement */\n.cta-button {\n\tposition: relative;\n\toverflow: hidden;\n}\n\n.cta-button::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tinset: 0;\n\tbackground: linear-gradient(rgba(255, 255, 255, 0.1), transparent);\n\topacity: 0;\n\ttransition: opacity 0.3s ease;\n}\n\n.cta-button:hover::after {\n\topacity: 1;\n}\n\n/* Responsive Image Container */\n.feature-image-container {\n\tposition: relative;\n\tborder-radius: 12px;\n\toverflow: hidden;\n\tbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\n\ttransition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.feature-image-container:hover {\n\ttransform: translateY(-4px);\n\tbox-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);\n}\n",
|
|
79
|
+
"marketing/nextjs/src/app/globals.css.hbs": "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n\n@custom-variant dark (&:is(.dark *));\n\n@theme inline {\n\t/* Colors */\n\t--color-background: var(--background);\n\t--color-foreground: var(--foreground);\n\n\t--color-card: var(--card);\n\t--color-card-foreground: var(--card-foreground);\n\n\t--color-popover: var(--popover);\n\t--color-popover-foreground: var(--popover-foreground);\n\n\t--color-primary: var(--primary);\n\t--color-primary-foreground: var(--primary-foreground);\n\n\t--color-secondary: var(--secondary);\n\t--color-secondary-foreground: var(--secondary-foreground);\n\n\t--color-muted: var(--muted);\n\t--color-muted-foreground: var(--muted-foreground);\n\n\t--color-accent: var(--accent);\n\t--color-accent-foreground: var(--accent-foreground);\n\n\t--color-destructive: var(--destructive);\n\n\t--color-border: var(--border);\n\t--color-input: var(--input);\n\t--color-ring: var(--ring);\n\n\t--color-chart-1: var(--chart-1);\n\t--color-chart-2: var(--chart-2);\n\t--color-chart-3: var(--chart-3);\n\t--color-chart-4: var(--chart-4);\n\t--color-chart-5: var(--chart-5);\n\n\t/* Border radius */\n\t--radius-sm: calc(var(--radius) - 4px);\n\t--radius-md: calc(var(--radius) - 2px);\n\t--radius-lg: var(--radius);\n\t--radius-xl: calc(var(--radius) + 4px);\n\n\t/* Fonts */\n\t--font-sans: var(--font-geist-sans), system-ui, sans-serif;\n\t--font-mono: var(--font-geist-mono), monospace;\n\n\t/* Container */\n\t--container-sm: 40rem;\n\t--container-md: 48rem;\n\t--container-lg: 64rem;\n\t--container-xl: 80rem;\n\t--container-2xl: 96rem;\n\n\t/* Animations */\n\t--animate-accordion-down: accordion-down 0.2s ease-out;\n\t--animate-accordion-up: accordion-up 0.2s ease-out;\n}\n\n@keyframes accordion-down {\n\tfrom {\n\t\theight: 0;\n\t}\n\tto {\n\t\theight: var(--radix-accordion-content-height);\n\t}\n}\n\n@keyframes accordion-up {\n\tfrom {\n\t\theight: var(--radix-accordion-content-height);\n\t}\n\tto {\n\t\theight: 0;\n\t}\n}\n\n/* ========================================\n THEME COLOR VARIABLES\n ======================================== */\n\n:root {\n\t--radius: 0.625rem;\n\t--background: oklch(1 0 0);\n\t--foreground: oklch(0.145 0 0);\n\t--card: oklch(1 0 0);\n\t--card-foreground: oklch(0.145 0 0);\n\t--popover: oklch(1 0 0);\n\t--popover-foreground: oklch(0.145 0 0);\n\t--secondary: oklch(0.97 0 0);\n\t--secondary-foreground: oklch(0.205 0 0);\n\t--muted: oklch(0.97 0 0);\n\t--muted-foreground: oklch(0.556 0 0);\n\t--accent: oklch(0.97 0 0);\n\t--accent-foreground: oklch(0.205 0 0);\n\t--destructive: oklch(0.577 0.245 27.325);\n\t--border: oklch(0.922 0 0);\n\t--input: oklch(0.922 0 0);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n\t--primary: oklch(0.205 0 0);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.708 0 0);\n\t--chart-1: oklch(0.646 0.222 41.116);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"blue\")}}\n\t--primary: oklch(0.546 0.245 262.881);\n\t--primary-foreground: oklch(0.985 0.002 247.858);\n\t--ring: oklch(0.546 0.245 262.881);\n\t--chart-1: oklch(0.546 0.245 262.881);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"green\")}}\n\t--primary: oklch(0.596 0.145 163.225);\n\t--primary-foreground: oklch(0.982 0.018 155.826);\n\t--ring: oklch(0.596 0.145 163.225);\n\t--chart-1: oklch(0.596 0.145 163.225);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"purple\")}}\n\t--primary: oklch(0.627 0.265 303.9);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.627 0.265 303.9);\n\t--chart-1: oklch(0.627 0.265 303.9);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"red\")}}\n\t--primary: oklch(0.637 0.237 25.331);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.637 0.237 25.331);\n\t--chart-1: oklch(0.637 0.237 25.331);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"orange\")}}\n\t--primary: oklch(0.705 0.191 47.604);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.705 0.191 47.604);\n\t--chart-1: oklch(0.705 0.191 47.604);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"amber\")}}\n\t--primary: oklch(0.769 0.188 70.08);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.769 0.188 70.08);\n\t--chart-1: oklch(0.769 0.188 70.08);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.646 0.222 41.116);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n\t--primary: oklch(0.715 0.143 215.221);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.715 0.143 215.221);\n\t--chart-1: oklch(0.715 0.143 215.221);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n\t--primary: oklch(0.696 0.17 162.48);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.696 0.17 162.48);\n\t--chart-1: oklch(0.696 0.17 162.48);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n\t--primary: oklch(0.667 0.295 322.15);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.667 0.295 322.15);\n\t--chart-1: oklch(0.667 0.295 322.15);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n\t--primary: oklch(0.585 0.233 277.117);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.585 0.233 277.117);\n\t--chart-1: oklch(0.585 0.233 277.117);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"lime\")}}\n\t--primary: oklch(0.768 0.233 130.85);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.768 0.233 130.85);\n\t--chart-1: oklch(0.768 0.233 130.85);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"pink\")}}\n\t--primary: oklch(0.718 0.202 349.761);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.718 0.202 349.761);\n\t--chart-1: oklch(0.718 0.202 349.761);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"rose\")}}\n\t--primary: oklch(0.645 0.246 16.439);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.645 0.246 16.439);\n\t--chart-1: oklch(0.645 0.246 16.439);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"sky\")}}\n\t--primary: oklch(0.685 0.169 237.323);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.685 0.169 237.323);\n\t--chart-1: oklch(0.685 0.169 237.323);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"teal\")}}\n\t--primary: oklch(0.704 0.14 182.503);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.704 0.14 182.503);\n\t--chart-1: oklch(0.704 0.14 182.503);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"violet\")}}\n\t--primary: oklch(0.606 0.25 292.717);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.606 0.25 292.717);\n\t--chart-1: oklch(0.606 0.25 292.717);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n\t--primary: oklch(0.795 0.184 86.047);\n\t--primary-foreground: oklch(0.216 0.006 56.043);\n\t--ring: oklch(0.795 0.184 86.047);\n\t--chart-1: oklch(0.795 0.184 86.047);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.646 0.222 41.116);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{else}}\n\t--primary: oklch(0.205 0 0);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.708 0 0);\n\t--chart-1: oklch(0.646 0.222 41.116);\n\t--chart-2: oklch(0.6 0.118 184.704);\n\t--chart-3: oklch(0.398 0.07 227.392);\n\t--chart-4: oklch(0.828 0.189 84.429);\n\t--chart-5: oklch(0.769 0.188 70.08);\n{{/if}}\n}\n\n.dark {\n\t--background: oklch(0.145 0 0);\n\t--foreground: oklch(0.985 0 0);\n\t--card: oklch(0.205 0 0);\n\t--card-foreground: oklch(0.985 0 0);\n\t--popover: oklch(0.269 0 0);\n\t--popover-foreground: oklch(0.985 0 0);\n\t--secondary: oklch(0.269 0 0);\n\t--secondary-foreground: oklch(0.985 0 0);\n\t--muted: oklch(0.269 0 0);\n\t--muted-foreground: oklch(0.708 0 0);\n\t--accent: oklch(0.371 0 0);\n\t--accent-foreground: oklch(0.985 0 0);\n\t--destructive: oklch(0.704 0.191 22.216);\n\t--border: oklch(1 0 0 / 10%);\n\t--input: oklch(1 0 0 / 15%);\n\n{{#if (eq shadcn.themeColor \"neutral\")}}\n\t--primary: oklch(0.922 0 0);\n\t--primary-foreground: oklch(0.205 0 0);\n\t--ring: oklch(0.556 0 0);\n\t--chart-1: oklch(0.488 0.243 264.376);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"blue\")}}\n\t--primary: oklch(0.623 0.214 262.881);\n\t--primary-foreground: oklch(0.273 0.033 256.848);\n\t--ring: oklch(0.623 0.214 262.881);\n\t--chart-1: oklch(0.623 0.214 262.881);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"green\")}}\n\t--primary: oklch(0.696 0.17 162.48);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.696 0.17 162.48);\n\t--chart-1: oklch(0.696 0.17 162.48);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"purple\")}}\n\t--primary: oklch(0.714 0.203 305.504);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.714 0.203 305.504);\n\t--chart-1: oklch(0.714 0.203 305.504);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.488 0.243 264.376);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"red\")}}\n\t--primary: oklch(0.704 0.191 22.216);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.704 0.191 22.216);\n\t--chart-1: oklch(0.704 0.191 22.216);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"orange\")}}\n\t--primary: oklch(0.792 0.17 52.615);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.792 0.17 52.615);\n\t--chart-1: oklch(0.792 0.17 52.615);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"amber\")}}\n\t--primary: oklch(0.828 0.189 84.429);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.828 0.189 84.429);\n\t--chart-1: oklch(0.828 0.189 84.429);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.488 0.243 264.376);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"cyan\")}}\n\t--primary: oklch(0.789 0.154 211.53);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.789 0.154 211.53);\n\t--chart-1: oklch(0.789 0.154 211.53);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"emerald\")}}\n\t--primary: oklch(0.765 0.166 160.391);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.765 0.166 160.391);\n\t--chart-1: oklch(0.765 0.166 160.391);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"fuchsia\")}}\n\t--primary: oklch(0.74 0.238 322.16);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.74 0.238 322.16);\n\t--chart-1: oklch(0.74 0.238 322.16);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.488 0.243 264.376);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"indigo\")}}\n\t--primary: oklch(0.673 0.182 276.935);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.673 0.182 276.935);\n\t--chart-1: oklch(0.673 0.182 276.935);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"lime\")}}\n\t--primary: oklch(0.841 0.238 128.85);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.841 0.238 128.85);\n\t--chart-1: oklch(0.841 0.238 128.85);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"pink\")}}\n\t--primary: oklch(0.775 0.181 349.761);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.775 0.181 349.761);\n\t--chart-1: oklch(0.775 0.181 349.761);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"rose\")}}\n\t--primary: oklch(0.712 0.194 13.428);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.712 0.194 13.428);\n\t--chart-1: oklch(0.712 0.194 13.428);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.488 0.243 264.376);\n{{else if (eq shadcn.themeColor \"sky\")}}\n\t--primary: oklch(0.756 0.143 232.661);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.756 0.143 232.661);\n\t--chart-1: oklch(0.756 0.143 232.661);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"teal\")}}\n\t--primary: oklch(0.777 0.152 181.912);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.777 0.152 181.912);\n\t--chart-1: oklch(0.777 0.152 181.912);\n\t--chart-2: oklch(0.488 0.243 264.376);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"violet\")}}\n\t--primary: oklch(0.702 0.183 293.541);\n\t--primary-foreground: oklch(0.985 0 0);\n\t--ring: oklch(0.702 0.183 293.541);\n\t--chart-1: oklch(0.702 0.183 293.541);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.488 0.243 264.376);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else if (eq shadcn.themeColor \"yellow\")}}\n\t--primary: oklch(0.852 0.199 91.936);\n\t--primary-foreground: oklch(0.15 0 0);\n\t--ring: oklch(0.852 0.199 91.936);\n\t--chart-1: oklch(0.852 0.199 91.936);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.488 0.243 264.376);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{else}}\n\t--primary: oklch(0.922 0 0);\n\t--primary-foreground: oklch(0.205 0 0);\n\t--ring: oklch(0.556 0 0);\n\t--chart-1: oklch(0.488 0.243 264.376);\n\t--chart-2: oklch(0.696 0.17 162.48);\n\t--chart-3: oklch(0.769 0.188 70.08);\n\t--chart-4: oklch(0.627 0.265 303.9);\n\t--chart-5: oklch(0.645 0.246 16.439);\n{{/if}}\n}\n\n/* ========================================\n BASE STYLES\n ======================================== */\n\n@layer base {\n\t* {\n\t\t@apply border-border outline-ring/50;\n\t}\n\tbody {\n\t\t@apply bg-background text-foreground;\n\t}\n}\n\n/* Container utility */\n.container {\n\twidth: 100%;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tpadding-left: 1rem;\n\tpadding-right: 1rem;\n\tmax-width: 96rem;\n}\n\n@media (min-width: 640px) {\n\t.container {\n\t\tpadding-left: 1.5rem;\n\t\tpadding-right: 1.5rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.container {\n\t\tpadding-left: 2rem;\n\t\tpadding-right: 2rem;\n\t}\n}\n\n/* ========================================\n HERO TYPOGRAPHY\n ======================================== */\n\n.hero-content h1 {\n\tfont-size: 2.25rem !important;\n\tline-height: 2.5rem !important;\n\tfont-weight: 700 !important;\n\tletter-spacing: -0.025em !important;\n\tmargin-bottom: 1.5rem !important;\n\tcolor: var(--color-foreground) !important;\n}\n\n.hero-content p {\n\tfont-size: 1.25rem !important;\n\tline-height: 1.75rem !important;\n\tcolor: var(--color-muted-foreground) !important;\n\tmax-width: 42rem;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tmargin-bottom: 2rem !important;\n}\n\n.hero-content--dark h1 {\n\tcolor: white !important;\n}\n\n.hero-content--dark p {\n\tcolor: rgba(255, 255, 255, 0.8) !important;\n}\n\n@media (min-width: 768px) {\n\t.hero-content h1 {\n\t\tfont-size: 3.75rem !important;\n\t\tline-height: 1 !important;\n\t}\n}\n\n/* Left-aligned hero content */\n.hero-content--left h1 {\n\ttext-align: left !important;\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n}\n\n.hero-content--left p {\n\ttext-align: left !important;\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n}\n\n/* ========================================\n PRODUCT SHOWCASE HERO STYLES\n ======================================== */\n\n.hero-showcase {\n\tposition: relative;\n\tborder-radius: 1rem;\n\toverflow: hidden;\n\theight: 25rem;\n\twidth: 100%;\n\tmax-width: 75rem;\n\tmargin: 0 auto;\n\tbackground: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, black) 100%);\n}\n\n@media (min-width: 768px) {\n\t.hero-showcase {\n\t\theight: 31.25rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.hero-showcase {\n\t\theight: 37.5rem;\n\t}\n}\n\n.hero-bg-image {\n\tposition: absolute;\n\tinset: 0;\n\tz-index: 0;\n\topacity: 0.1;\n}\n\n.hero-bg-image img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tobject-position: center;\n}\n\n.hero-mockup-centered {\n\tposition: relative;\n\tz-index: 10;\n\tpadding: 2rem;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\theight: 100%;\n}\n\n@media (min-width: 768px) {\n\t.hero-mockup-centered {\n\t\tpadding: 3rem;\n\t}\n}\n\n.mockup-wrapper {\n\tbackground: var(--color-background);\n\tborder-radius: 12px;\n\tbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);\n\toverflow: hidden;\n\tanimation: mockup-entrance 0.8s ease-out;\n\twidth: 100%;\n}\n\n.mockup-wrapper img {\n\twidth: 100%;\n\theight: auto;\n\tdisplay: block;\n}\n\n@keyframes mockup-entrance {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(30px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n/* Browser chrome */\n.mockup-chrome {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 12px 16px;\n\tbackground: var(--color-muted);\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.mockup-chrome-dots {\n\tdisplay: flex;\n\tgap: 6px;\n}\n\n.mockup-chrome-dots .dot {\n\twidth: 12px;\n\theight: 12px;\n\tborder-radius: 50%;\n}\n\n.mockup-chrome-dots .dot-red {\n\tbackground: #ff5f56;\n}\n.mockup-chrome-dots .dot-yellow {\n\tbackground: #ffbd2e;\n}\n.mockup-chrome-dots .dot-green {\n\tbackground: #27ca40;\n}\n\n.mockup-chrome-title {\n\tflex: 1;\n\ttext-align: center;\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n}\n\n.mockup-chrome-actions {\n\twidth: 60px;\n}\n\n/* App content layout */\n.mockup-content {\n\tdisplay: flex;\n\tmin-height: 400px;\n}\n\n.mockup-sidebar {\n\twidth: 220px;\n\tbackground: var(--color-card);\n\tborder-right: 1px solid var(--color-border);\n\tflex-shrink: 0;\n}\n\n.sidebar-header {\n\tpadding: 16px;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.sidebar-logo {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n}\n\n.logo-icon {\n\twidth: 28px;\n\theight: 28px;\n\tbackground: var(--color-primary);\n\tcolor: white;\n\tborder-radius: 6px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 700;\n\tfont-size: 14px;\n}\n\n.logo-text {\n\tfont-weight: 600;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n}\n\n.sidebar-nav {\n\tpadding: 8px;\n}\n\n.sidebar-item {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tpadding: 10px 12px;\n\tborder-radius: 6px;\n\tfont-size: 13px;\n\tcolor: var(--color-muted-foreground);\n\ttransition: all 0.15s ease;\n\tcursor: pointer;\n}\n\n.sidebar-item:hover {\n\tbackground: var(--color-accent);\n\tcolor: var(--color-accent-foreground);\n}\n\n.sidebar-item--active {\n\tbackground: oklch(from var(--color-primary) l c h / 0.12);\n\tcolor: var(--color-primary);\n}\n\n.sidebar-icon {\n\tfont-size: 16px;\n}\n\n.sidebar-label {\n\tflex: 1;\n}\n\n.sidebar-badge {\n\tbackground: var(--color-primary);\n\tcolor: var(--color-primary-foreground);\n\tfont-size: 11px;\n\tpadding: 2px 6px;\n\tborder-radius: 10px;\n\tfont-weight: 500;\n}\n\n/* Main content area */\n.mockup-main {\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbackground: var(--color-background);\n}\n\n.main-header {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 16px 20px;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.header-title {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n}\n\n.header-title h2 {\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tmargin: 0;\n\tcolor: var(--color-foreground);\n}\n\n.header-breadcrumb {\n\tfont-size: 12px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.header-actions {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n}\n\n.action-btn {\n\tpadding: 8px 16px;\n\tbackground: var(--color-primary);\n\tcolor: var(--color-primary-foreground);\n\tborder: none;\n\tborder-radius: 6px;\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.3s ease;\n}\n\n.action-btn--success {\n\tbackground: #27ca40;\n}\n\n.action-btn--featured {\n\tbackground: var(--color-primary);\n}\n\n/* Split view */\n.main-split {\n\tdisplay: flex;\n\tflex: 1;\n}\n\n.editor-panel {\n\tflex: 1;\n\tpadding: 20px;\n\tborder-right: 1px solid var(--color-border);\n}\n\n.editor-section {\n\tmargin-bottom: 20px;\n}\n\n.editor-label {\n\tdisplay: block;\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n\tmargin-bottom: 6px;\n}\n\n.editor-input {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.input-text {\n\tflex: 1;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.input-cursor {\n\twidth: 2px;\n\theight: 18px;\n\tbackground: var(--color-primary);\n\tanimation: blink 1s infinite;\n\tmargin-left: 2px;\n}\n\n@keyframes blink {\n\t0%,\n\t50% {\n\t\topacity: 1;\n\t}\n\t51%,\n\t100% {\n\t\topacity: 0;\n\t}\n}\n\n.editor-select {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n}\n\n.select-arrow {\n\tfont-size: 10px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.editor-textarea {\n\tbackground: var(--color-muted);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 6px;\n\tpadding: 10px 12px;\n\tfont-size: 14px;\n\tcolor: var(--color-foreground);\n\tmin-height: 80px;\n}\n\n.textarea-text {\n\ttransition: all 0.5s ease;\n}\n\n.textarea-text--complete {\n\tcolor: var(--color-foreground);\n}\n\n/* Preview panel */\n.preview-panel {\n\twidth: 320px;\n\tpadding: 20px;\n\tbackground: oklch(from var(--color-muted) l c h / 0.5);\n}\n\n.preview-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin-bottom: 16px;\n}\n\n.preview-label {\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tcolor: var(--color-muted-foreground);\n}\n\n.preview-url {\n\tfont-size: 11px;\n\tcolor: var(--color-muted-foreground);\n\tfont-family: monospace;\n}\n\n.preview-card {\n\tbackground: var(--color-card);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 10px;\n\toverflow: hidden;\n\tposition: relative;\n\ttransition: all 0.3s ease;\n}\n\n.preview-badge {\n\tposition: absolute;\n\ttop: 10px;\n\tright: 10px;\n\tbackground: var(--color-primary);\n\tcolor: white;\n\tfont-size: 11px;\n\tpadding: 4px 8px;\n\tborder-radius: 4px;\n\tfont-weight: 500;\n\tanimation: badge-pop 0.3s ease;\n}\n\n@keyframes badge-pop {\n\tfrom {\n\t\ttransform: scale(0);\n\t\topacity: 0;\n\t}\n\tto {\n\t\ttransform: scale(1);\n\t\topacity: 1;\n\t}\n}\n\n.preview-image {\n\theight: 120px;\n\tbackground: linear-gradient(135deg, var(--color-muted) 0%, var(--color-accent) 100%);\n}\n\n.preview-image-placeholder {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: 40px;\n}\n\n.preview-content {\n\tpadding: 16px;\n}\n\n.preview-category-tag {\n\tdisplay: inline-block;\n\tfont-size: 11px;\n\tcolor: var(--color-primary);\n\tfont-weight: 500;\n\tmargin-bottom: 8px;\n}\n\n.preview-title {\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tmargin: 0 0 8px;\n\tcolor: var(--color-foreground);\n}\n\n.preview-description {\n\tfont-size: 13px;\n\tcolor: var(--color-muted-foreground);\n\tline-height: 1.5;\n\tmargin: 0 0 12px;\n}\n\n.preview-meta {\n\tdisplay: flex;\n\tgap: 8px;\n\tfont-size: 12px;\n}\n\n.meta-rating {\n\tcolor: #ffc24a;\n}\n\n.meta-reviews {\n\tcolor: var(--color-muted-foreground);\n}\n\n/* State indicators */\n.mockup-indicators {\n\tdisplay: flex;\n\tjustify-content: center;\n\tgap: 24px;\n\tpadding: 16px;\n\tborder-top: 1px solid var(--color-border);\n}\n\n.indicator {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tbackground: none;\n\tborder: none;\n\tcursor: pointer;\n\tpadding: 6px 12px;\n\tborder-radius: 20px;\n\ttransition: all 0.2s ease;\n}\n\n.indicator:hover {\n\tbackground: var(--color-accent);\n}\n\n.indicator--active {\n\tbackground: oklch(from var(--color-primary) l c h / 0.12);\n}\n\n.indicator-dot {\n\twidth: 8px;\n\theight: 8px;\n\tborder-radius: 50%;\n\tbackground: var(--color-muted-foreground);\n\ttransition: all 0.2s ease;\n}\n\n.indicator--active .indicator-dot {\n\tbackground: var(--color-primary);\n\tbox-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.2);\n}\n\n.indicator-label {\n\tfont-size: 12px;\n\tcolor: var(--color-muted-foreground);\n}\n\n.indicator--active .indicator-label {\n\tcolor: var(--color-foreground);\n\tfont-weight: 500;\n}\n\n/* ========================================\n LOGO BANNER STYLES\n ======================================== */\n\n.logo-scroll-container {\n\toverflow: hidden;\n\tmask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\n}\n\n.logo-scroll-track {\n\tdisplay: flex;\n\tanimation: logo-scroll 30s linear infinite;\n}\n\n.logo-scroll-track:hover {\n\tanimation-play-state: paused;\n}\n\n@keyframes logo-scroll {\n\t0% {\n\t\ttransform: translateX(0);\n\t}\n\t100% {\n\t\ttransform: translateX(-50%);\n\t}\n}\n\n.logo-item {\n\tflex-shrink: 0;\n\tmin-width: 150px;\n}\n\n/* ========================================\n RESPONSIVE ADJUSTMENTS\n ======================================== */\n\n@media (max-width: 768px) {\n\t.mockup-content {\n\t\tflex-direction: column;\n\t}\n\n\t.mockup-sidebar {\n\t\twidth: 100%;\n\t\tborder-right: none;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t.sidebar-nav {\n\t\tdisplay: flex;\n\t\toverflow-x: auto;\n\t\tpadding: 8px;\n\t\tgap: 4px;\n\t}\n\n\t.sidebar-item {\n\t\twhite-space: nowrap;\n\t}\n\n\t.main-split {\n\t\tflex-direction: column;\n\t}\n\n\t.editor-panel {\n\t\tborder-right: none;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t.preview-panel {\n\t\twidth: 100%;\n\t}\n\n\t.mockup-indicators {\n\t\tflex-wrap: wrap;\n\t\tgap: 12px;\n\t}\n\n\t.indicator-label {\n\t\tdisplay: none;\n\t}\n}\n\n/* ========================================\n ANIMATION STYLES\n ======================================== */\n\n/* Industry Tabs Animation */\n.industry-tab-content {\n\tanimation: tab-fade-in 0.3s ease-out;\n}\n\n@keyframes tab-fade-in {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(10px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n/* Feature Showcase Entrance Animation */\n@keyframes feature-slide-in {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateX(-20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n}\n\n.feature-showcase-content {\n\tanimation: feature-slide-in 0.5s ease-out;\n}\n\n/* Testimonial Card Hover Effects */\n.testimonial-card {\n\ttransition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.testimonial-card:hover {\n\ttransform: translateY(-4px);\n\tbox-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);\n}\n\n/* Stat Number Animation */\n@keyframes stat-count-up {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.stat-number {\n\tanimation: stat-count-up 0.6s ease-out;\n}\n\n/* Trust Column Icon Animation */\n.trust-icon {\n\ttransition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.trust-icon:hover {\n\ttransform: scale(1.1);\n}\n\n/* Final CTA Background Animation */\n@keyframes subtle-float {\n\t0%,\n\t100% {\n\t\ttransform: translateY(0);\n\t}\n\t50% {\n\t\ttransform: translateY(-10px);\n\t}\n}\n\n.cta-decorative {\n\tanimation: subtle-float 6s ease-in-out infinite;\n}\n\n/* Feature Grid Card Entrance */\n@keyframes card-entrance {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.feature-card {\n\tanimation: card-entrance 0.4s ease-out;\n\tanimation-fill-mode: both;\n}\n\n.feature-card:nth-child(1) {\n\tanimation-delay: 0.1s;\n}\n.feature-card:nth-child(2) {\n\tanimation-delay: 0.2s;\n}\n.feature-card:nth-child(3) {\n\tanimation-delay: 0.3s;\n}\n.feature-card:nth-child(4) {\n\tanimation-delay: 0.4s;\n}\n.feature-card:nth-child(5) {\n\tanimation-delay: 0.5s;\n}\n.feature-card:nth-child(6) {\n\tanimation-delay: 0.6s;\n}\n\n/* Smooth Section Transitions */\nsection {\n\tscroll-margin-top: 80px;\n}\n\n/* Button Hover Enhancement */\n.cta-button {\n\tposition: relative;\n\toverflow: hidden;\n}\n\n.cta-button::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tinset: 0;\n\tbackground: linear-gradient(rgba(255, 255, 255, 0.1), transparent);\n\topacity: 0;\n\ttransition: opacity 0.3s ease;\n}\n\n.cta-button:hover::after {\n\topacity: 1;\n}\n\n/* Responsive Image Container */\n.feature-image-container {\n\tposition: relative;\n\tborder-radius: 12px;\n\toverflow: hidden;\n\tbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\n\ttransition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.feature-image-container:hover {\n\ttransform: translateY(-4px);\n\tbox-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);\n}\n",
|
|
80
80
|
"marketing/nextjs/src/app/layout.tsx.hbs": "import type { Metadata } from 'next'\nimport { Geist, Geist_Mono } from 'next/font/google'\nimport { ThemeProvider } from '@/components/ThemeProvider'\nimport './globals.css'\n\nconst geistSans = Geist({\n variable: '--font-geist-sans',\n subsets: ['latin'],\n})\n\nconst geistMono = Geist_Mono({\n variable: '--font-geist-mono',\n subsets: ['latin'],\n})\n\nexport const metadata: Metadata = {\n title: 'SaaSify - The modern platform for growing teams',\n 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.',\n keywords: ['SaaS', 'productivity', 'workflow', 'automation', 'team collaboration'],\n openGraph: {\n title: 'SaaSify - The modern platform for growing teams',\n description: 'Transform your workflow with our all-in-one platform.',\n type: 'website',\n },\n}\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n <html lang=\"en\" suppressHydrationWarning>\n <body className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}>\n <ThemeProvider\n attribute=\"class\"\n defaultTheme=\"system\"\n enableSystem\n disableTransitionOnChange\n >\n {children}\n </ThemeProvider>\n </body>\n </html>\n )\n}\n",
|
|
81
81
|
"marketing/nextjs/src/app/page.tsx": "import { Header } from \"@/components/Header\"\nimport { Footer } from \"@/components/Footer\"\nimport { ProductShowcaseHero } from \"@/components/heros\"\nimport {\n LogoBanner,\n ProofBanner,\n BentoFeatures,\n FeatureShowcase,\n IndustryTabs,\n TestimonialsGrid,\n TrustColumns,\n PricingTable,\n FinalCTA,\n} from \"@/components/blocks\"\n\nexport default function HomePage() {\n return (\n <div className=\"min-h-screen flex flex-col\">\n <Header />\n\n <main className=\"flex-1\">\n {/* Hero Section */}\n <ProductShowcaseHero\n headline=\"The modern platform for growing teams\"\n description=\"Streamline workflows, boost productivity, and scale your business with one powerful platform.\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"default\" },\n { label: \"Watch demo\", href: \"/demo\", variant: \"outline\" },\n ]}\n />\n\n {/* Logo Banner - Social proof */}\n <LogoBanner\n heading=\"Trusted by fast-growing companies everywhere\"\n style=\"scroll\"\n />\n\n {/* Value Proposition */}\n <ProofBanner\n headline=\"Transform how your team works, collaborates, and grows\"\n subtext=\"Every interaction feeds into a powerful platform that powers personalized experiences, seamless collaboration, and intelligent automation across every touchpoint.\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"default\" },\n { label: \"Book a demo\", href: \"/contact\", variant: \"outline\" },\n ]}\n />\n\n {/* Bento Features */}\n <BentoFeatures\n heading=\"Discover what SaaSify can do\"\n subheading=\"Everything you need to work smarter and scale faster\"\n />\n\n {/* Feature Showcase: Integrations */}\n <FeatureShowcase\n label=\"Seamless Integrations\"\n headline=\"Connect everything your team uses in one place\"\n description=\"Integrate with 100+ popular tools including Slack, Salesforce, HubSpot, and more. Two-way sync keeps everything up to date automatically.\"\n features={[\n { text: \"100+ native integrations\" },\n { text: \"Two-way data sync\" },\n { text: \"Custom webhooks\" },\n { text: \"API access included\" },\n ]}\n link={{ label: \"Explore integrations\", href: \"/features\" }}\n imagePosition=\"right\"\n />\n\n {/* Feature Showcase: Analytics */}\n <FeatureShowcase\n label=\"Actionable Analytics\"\n headline=\"Make decisions backed by real-time data\"\n description=\"Track every metric that matters. From team performance to customer insights, get the visibility you need to drive growth.\"\n features={[\n { text: \"Real-time dashboards\" },\n { text: \"Custom reports\" },\n { text: \"Team performance metrics\" },\n { text: \"Automated insights\" },\n ]}\n link={{ label: \"Learn about analytics\", href: \"/features\" }}\n imagePosition=\"left\"\n />\n\n {/* Feature Showcase: Automation */}\n <FeatureShowcase\n label=\"Workflow Automation\"\n headline=\"Eliminate busywork with smart automation\"\n description=\"Build powerful workflows without code. Automate approvals, notifications, data entry, and more to focus on what matters.\"\n features={[\n { text: \"Visual workflow builder\" },\n { text: \"Conditional logic\" },\n { text: \"Scheduled triggers\" },\n { text: \"Cross-app automation\" },\n ]}\n link={{ label: \"See automation features\", href: \"/features\" }}\n imagePosition=\"right\"\n />\n\n {/* Feature Showcase: Collaboration */}\n <FeatureShowcase\n label=\"Team Collaboration\"\n headline=\"Work together seamlessly, from anywhere\"\n description=\"Real-time collaboration features keep everyone aligned. Share workspaces, leave comments, and track activity across your entire team.\"\n features={[\n { text: \"Real-time collaboration\" },\n { text: \"Shared workspaces\" },\n { text: \"Comments and mentions\" },\n { text: \"Activity tracking\" },\n ]}\n link={{ label: \"Explore collaboration\", href: \"/features\" }}\n imagePosition=\"left\"\n />\n\n {/* Industry Tabs */}\n <IndustryTabs\n heading=\"Solutions that deliver real results\"\n subheading=\"Whether you're in sales, marketing, or product, SaaSify adapts to how your team works.\"\n />\n\n {/* Testimonials */}\n <TestimonialsGrid\n heading=\"Loved by teams at companies of all sizes\"\n subheading=\"See how leading teams use SaaSify to drive growth and productivity.\"\n />\n\n {/* Trust Columns */}\n <TrustColumns />\n\n {/* Second Logo Banner - Integrations */}\n <LogoBanner\n heading=\"Integrates with your favorite tools\"\n style=\"grid\"\n logos={[\n { name: \"Slack\", initials: \"SL\" },\n { name: \"Salesforce\", initials: \"SF\" },\n { name: \"HubSpot\", initials: \"HS\" },\n { name: \"Google Workspace\", initials: \"GW\" },\n { name: \"Zapier\", initials: \"ZP\" },\n { name: \"Jira\", initials: \"JI\" },\n ]}\n />\n\n {/* Pricing */}\n <PricingTable\n heading=\"Simple, transparent pricing\"\n subheading=\"Start free, upgrade as your team grows. No hidden fees.\"\n />\n\n {/* Final CTA */}\n <FinalCTA\n headline=\"Ready to transform how your team works?\"\n subheading=\"Join thousands of teams who chose the smarter way to work. Start free, upgrade as you grow.\"\n style=\"dark\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"outline\" },\n { label: \"Book a demo\", href: \"/contact\", variant: \"default\" },\n ]}\n />\n </main>\n\n <Footer />\n </div>\n )\n}\n",
|
|
82
82
|
"marketing/nextjs/src/app/pricing/page.tsx": "import { Header } from \"@/components/Header\"\nimport { Footer } from \"@/components/Footer\"\nimport { PricingTable, FinalCTA } from \"@/components/blocks\"\n\nexport default function PricingPage() {\n return (\n <div className=\"min-h-screen flex flex-col\">\n <Header />\n\n <main className=\"flex-1\">\n {/* Hero */}\n <section className=\"py-16 md:py-24\">\n <div className=\"container mx-auto px-4 text-center\">\n <h1 className=\"text-4xl md:text-5xl font-bold tracking-tight mb-6\">\n Simple, transparent pricing\n </h1>\n <p className=\"text-xl text-muted-foreground max-w-2xl mx-auto\">\n Start free, upgrade as your team grows. No hidden fees, no surprises.\n </p>\n </div>\n </section>\n\n {/* Pricing Table */}\n <PricingTable\n heading=\"\"\n subheading=\"\"\n />\n\n {/* Final CTA */}\n <FinalCTA\n headline=\"Ready to get started?\"\n subheading=\"Join thousands of teams who chose the smarter way to work.\"\n style=\"dark\"\n links={[\n { label: \"Start free trial\", href: \"/sign-up\", variant: \"outline\" },\n { label: \"Contact sales\", href: \"/contact\", variant: \"default\" },\n ]}\n />\n </main>\n\n <Footer />\n </div>\n )\n}\n",
|
|
@@ -77,12 +77,12 @@ const {
|
|
|
77
77
|
.hero-showcase {
|
|
78
78
|
position: relative;
|
|
79
79
|
width: 100%;
|
|
80
|
-
max-width:
|
|
80
|
+
max-width: 75rem;
|
|
81
81
|
margin: 0 auto;
|
|
82
82
|
border-radius: 1rem;
|
|
83
83
|
overflow: hidden;
|
|
84
84
|
background: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, black) 100%);
|
|
85
|
-
height:
|
|
85
|
+
height: 25rem;
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
.hero-bg-image {
|
|
@@ -103,7 +103,7 @@ const {
|
|
|
103
103
|
|
|
104
104
|
@media (min-width: 768px) {
|
|
105
105
|
.hero-showcase {
|
|
106
|
-
height:
|
|
106
|
+
height: 31.25rem;
|
|
107
107
|
}
|
|
108
108
|
.hero-mockup-centered {
|
|
109
109
|
padding: 3rem;
|
|
@@ -112,7 +112,7 @@ const {
|
|
|
112
112
|
|
|
113
113
|
@media (min-width: 1024px) {
|
|
114
114
|
.hero-showcase {
|
|
115
|
-
height:
|
|
115
|
+
height: 37.5rem;
|
|
116
116
|
}
|
|
117
117
|
}
|
|
118
118
|
</style>
|
|
@@ -409,22 +409,24 @@
|
|
|
409
409
|
|
|
410
410
|
.hero-showcase {
|
|
411
411
|
position: relative;
|
|
412
|
-
border-radius:
|
|
412
|
+
border-radius: 1rem;
|
|
413
413
|
overflow: hidden;
|
|
414
|
-
|
|
415
|
-
height: 500px;
|
|
414
|
+
height: 25rem;
|
|
416
415
|
width: 100%;
|
|
416
|
+
max-width: 75rem;
|
|
417
|
+
margin: 0 auto;
|
|
418
|
+
background: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, black) 100%);
|
|
417
419
|
}
|
|
418
420
|
|
|
419
421
|
@media (min-width: 768px) {
|
|
420
422
|
.hero-showcase {
|
|
421
|
-
height:
|
|
423
|
+
height: 31.25rem;
|
|
422
424
|
}
|
|
423
425
|
}
|
|
424
426
|
|
|
425
427
|
@media (min-width: 1024px) {
|
|
426
428
|
.hero-showcase {
|
|
427
|
-
height:
|
|
429
|
+
height: 37.5rem;
|
|
428
430
|
}
|
|
429
431
|
}
|
|
430
432
|
|
|
@@ -432,6 +434,7 @@
|
|
|
432
434
|
position: absolute;
|
|
433
435
|
inset: 0;
|
|
434
436
|
z-index: 0;
|
|
437
|
+
opacity: 0.1;
|
|
435
438
|
}
|
|
436
439
|
|
|
437
440
|
.hero-bg-image img {
|
|
@@ -444,20 +447,16 @@
|
|
|
444
447
|
.hero-mockup-centered {
|
|
445
448
|
position: relative;
|
|
446
449
|
z-index: 10;
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
+
padding: 2rem;
|
|
451
|
+
display: flex;
|
|
452
|
+
justify-content: center;
|
|
453
|
+
align-items: center;
|
|
454
|
+
height: 100%;
|
|
450
455
|
}
|
|
451
456
|
|
|
452
457
|
@media (min-width: 768px) {
|
|
453
458
|
.hero-mockup-centered {
|
|
454
|
-
|
|
455
|
-
}
|
|
456
|
-
}
|
|
457
|
-
|
|
458
|
-
@media (min-width: 1024px) {
|
|
459
|
-
.hero-mockup-centered {
|
|
460
|
-
max-width: 1000px;
|
|
459
|
+
padding: 3rem;
|
|
461
460
|
}
|
|
462
461
|
}
|
|
463
462
|
|
|
@@ -561,22 +561,22 @@
|
|
|
561
561
|
position: relative;
|
|
562
562
|
border-radius: 1rem;
|
|
563
563
|
overflow: hidden;
|
|
564
|
-
height:
|
|
564
|
+
height: 25rem;
|
|
565
565
|
width: 100%;
|
|
566
|
-
max-width:
|
|
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:
|
|
573
|
+
height: 31.25rem;
|
|
574
574
|
}
|
|
575
575
|
}
|
|
576
576
|
|
|
577
577
|
@media (min-width: 1024px) {
|
|
578
578
|
.hero-showcase {
|
|
579
|
-
height:
|
|
579
|
+
height: 37.5rem;
|
|
580
580
|
}
|
|
581
581
|
}
|
|
582
582
|
|