kofi-stack-template-generator 2.1.55 → 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 +6 -6
- package/dist/index.js +235 -38
- package/package.json +2 -2
- package/src/templates.generated.ts +23 -13
- package/templates/marketing/astro/src/components/Footer.astro +6 -6
- package/templates/marketing/astro/src/components/Header.astro +7 -7
- package/templates/marketing/astro/src/components/blocks/FinalCTA.astro +4 -4
- package/templates/marketing/astro/src/components/heros/ProductShowcaseHero.astro +10 -3
- package/templates/marketing/astro/src/pages/blog.astro +96 -0
- package/templates/marketing/astro/src/pages/features.astro +107 -0
- package/templates/marketing/astro/src/pages/pricing.astro +50 -0
- package/templates/marketing/astro/src/pages/privacy.astro +65 -0
- package/templates/marketing/astro/src/pages/terms.astro +69 -0
- package/templates/marketing/astro/src/styles/globals.css.hbs +16 -16
- package/templates/marketing/nextjs/src/app/blog/page.tsx +97 -0
- package/templates/marketing/nextjs/src/app/features/page.tsx +108 -0
- package/templates/marketing/nextjs/src/app/globals.css.hbs +15 -15
- package/templates/marketing/nextjs/src/app/{page.tsx.hbs → page.tsx} +15 -21
- package/templates/marketing/nextjs/src/app/pricing/page.tsx +44 -0
- package/templates/marketing/nextjs/src/app/privacy/page.tsx +64 -0
- package/templates/marketing/nextjs/src/app/terms/page.tsx +68 -0
- package/templates/marketing/nextjs/src/components/Footer/index.tsx +8 -8
- package/templates/marketing/nextjs/src/components/Header/MobileMenu.tsx +5 -4
- package/templates/marketing/nextjs/src/components/Header/index.tsx +14 -14
- package/templates/marketing/nextjs/src/components/blocks/FinalCTA.tsx +4 -4
package/dist/index.js
CHANGED
|
@@ -1196,21 +1196,21 @@ export function ColorPalette() {
|
|
|
1196
1196
|
"marketing/astro/postcss.config.mjs.hbs": "export default {\n plugins: {\n '@tailwindcss/postcss': {},\n },\n}\n",
|
|
1197
1197
|
"marketing/astro/public/favicon.svg": "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHJ4PSI2IiBmaWxsPSIjMGEwYTBhIi8+CiAgPHBhdGggZD0iTTE3LjMzIDVMOSAxOC42N2g4TDE2IDI3bDktMTJoLThsMS0xMHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZhZmFmYSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==",
|
|
1198
1198
|
"marketing/astro/public/media/hero-bg.png": "cGxhY2Vob2xkZXI=",
|
|
1199
|
-
"marketing/astro/src/components/Footer.astro": '---\nimport Logo from "./Logo.astro"\nimport ThemeSelector from "./ThemeSelector.astro"\n\n// Footer navigation structure
|
|
1199
|
+
"marketing/astro/src/components/Footer.astro": '---\nimport Logo from "./Logo.astro"\nimport ThemeSelector from "./ThemeSelector.astro"\n\n// Footer navigation structure\nconst footerColumns = [\n {\n title: "Product",\n links: [\n { label: "Home", href: "/" },\n { label: "Features", href: "/features" },\n { label: "Pricing", href: "/pricing" },\n ],\n },\n {\n title: "Resources",\n links: [\n { label: "Blog", href: "/blog" },\n ],\n },\n {\n title: "Legal",\n links: [\n { label: "Privacy", href: "/privacy" },\n { label: "Terms", href: "/terms" },\n ],\n },\n]\n\nconst socialLinks = {\n twitter: "https://x.com/saasify",\n linkedin: "https://linkedin.com/company/saasify",\n github: "https://github.com/saasify",\n}\n\nconst currentYear = new Date().getFullYear()\n---\n\n<footer class="mt-auto border-t border-border bg-background">\n <!-- Main Footer Content -->\n <div class="container mx-auto px-4 py-12 lg:py-16">\n <div class="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-5">\n <!-- Link Columns -->\n {footerColumns.map((column) => (\n <div class="col-span-1">\n <h3 class="mb-4 text-sm font-medium text-foreground">\n {column.title}\n </h3>\n <ul class="space-y-3">\n {column.links.map((link) => (\n <li>\n <a\n href={link.href}\n class="text-sm text-muted-foreground transition-colors hover:text-foreground"\n >\n {link.label}\n </a>\n </li>\n ))}\n </ul>\n </div>\n ))}\n\n <!-- Newsletter Column -->\n <div class="col-span-2">\n <h3 class="mb-4 text-sm font-medium text-foreground">\n Newsletter\n </h3>\n <p class="mb-4 text-sm text-muted-foreground">\n Get product updates, tips, and insights delivered weekly.\n </p>\n <form class="flex gap-2">\n <input\n type="email"\n placeholder="Enter your email"\n class="flex-1 px-3 py-2 text-sm rounded-md border border-input bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"\n />\n <button\n type="submit"\n class="px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90"\n >\n Subscribe\n </button>\n </form>\n </div>\n </div>\n\n <!-- Social Links -->\n <div class="mt-10 flex items-center gap-4 border-t border-border pt-8">\n <a\n href={socialLinks.twitter}\n target="_blank"\n rel="noopener noreferrer"\n class="text-muted-foreground transition-colors hover:text-foreground"\n aria-label="X (Twitter)"\n >\n <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">\n <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />\n </svg>\n </a>\n <a\n href={socialLinks.linkedin}\n target="_blank"\n rel="noopener noreferrer"\n class="text-muted-foreground transition-colors hover:text-foreground"\n aria-label="LinkedIn"\n >\n <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">\n <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />\n </svg>\n </a>\n <a\n href={socialLinks.github}\n target="_blank"\n rel="noopener noreferrer"\n class="text-muted-foreground transition-colors hover:text-foreground"\n aria-label="GitHub"\n >\n <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">\n <path\n fill-rule="evenodd"\n d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"\n clip-rule="evenodd"\n />\n </svg>\n </a>\n </div>\n </div>\n\n <!-- Bottom Bar -->\n <div class="border-t border-border">\n <div class="container mx-auto flex flex-col items-center justify-between gap-4 px-4 py-6 sm:flex-row">\n <!-- Logo and Copyright -->\n <div class="flex items-center gap-4">\n <a href="/" class="flex items-center">\n <Logo class="h-6 w-6" />\n </a>\n <p class="text-sm text-muted-foreground">\n © {currentYear} SaaSify\n </p>\n </div>\n\n <!-- Theme Selector -->\n <div class="flex items-center gap-6">\n <ThemeSelector />\n </div>\n </div>\n </div>\n</footer>\n',
|
|
1200
1200
|
"marketing/astro/src/components/Header.astro": `---
|
|
1201
1201
|
import Logo from "./Logo.astro"
|
|
1202
1202
|
import { Menu, X } from "lucide-astro"
|
|
1203
1203
|
|
|
1204
|
-
//
|
|
1204
|
+
// Navigation for landing page
|
|
1205
1205
|
const navLinks = [
|
|
1206
|
-
{ label: "Features", href: "
|
|
1207
|
-
{ label: "
|
|
1208
|
-
{ label: "
|
|
1206
|
+
{ label: "Features", href: "/features" },
|
|
1207
|
+
{ label: "Pricing", href: "/pricing" },
|
|
1208
|
+
{ label: "Blog", href: "/blog" },
|
|
1209
1209
|
]
|
|
1210
1210
|
|
|
1211
1211
|
const ctaLinks = [
|
|
1212
|
-
{ label: "Sign In", href: "
|
|
1213
|
-
{ label: "Get Started", href: "
|
|
1212
|
+
{ label: "Sign In", href: "/sign-in", variant: "ghost" },
|
|
1213
|
+
{ label: "Get Started", href: "/pricing", variant: "default" },
|
|
1214
1214
|
]
|
|
1215
1215
|
---
|
|
1216
1216
|
|
|
@@ -1257,7 +1257,7 @@ const ctaLinks = [
|
|
|
1257
1257
|
|
|
1258
1258
|
<!-- Mobile: Primary CTA + Hamburger -->
|
|
1259
1259
|
<a
|
|
1260
|
-
href="
|
|
1260
|
+
href="/pricing"
|
|
1261
1261
|
class="lg:hidden px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90"
|
|
1262
1262
|
>
|
|
1263
1263
|
Get Started
|
|
@@ -1412,7 +1412,7 @@ const ctaLinks = [
|
|
|
1412
1412
|
`,
|
|
1413
1413
|
"marketing/astro/src/components/blocks/BentoFeatures.astro": '---\nimport { Rocket, Zap, Layers, Shield, Globe, Settings, BarChart3 } from "lucide-astro"\n\ninterface Feature {\n size?: "small" | "tall"\n style?: "default" | "primary" | "accent" | "gradient"\n icon?: string\n stat?: string\n title: string\n description: string\n}\n\ninterface Props {\n heading?: string\n subheading?: string\n features?: Feature[]\n}\n\nconst defaultFeatures: Feature[] = [\n {\n size: "small",\n style: "gradient",\n icon: "zap",\n stat: "5x",\n title: "Faster onboarding",\n description: "Get your team up and running in hours, not weeks.",\n },\n {\n size: "small",\n style: "accent",\n icon: "rocket",\n title: "Quick setup",\n description: "Configure your workspace, invite your team, and start collaborating.",\n },\n {\n size: "small",\n style: "default",\n icon: "layers",\n title: "Powerful integrations",\n description: "Connect with 100+ tools you already use.",\n },\n {\n size: "tall",\n style: "primary",\n icon: "shield",\n title: "Enterprise security",\n description: "SOC 2 compliant with end-to-end encryption and complete audit trails for peace of mind.",\n },\n {\n size: "small",\n style: "default",\n icon: "globe",\n stat: "99.9%",\n title: "Uptime",\n description: "Reliable infrastructure you can count on.",\n },\n {\n size: "small",\n style: "default",\n icon: "globe",\n title: "Global scale",\n description: "Multi-region with custom domains.",\n },\n {\n size: "small",\n style: "default",\n icon: "settings",\n title: "Smart automation",\n description: "Automate repetitive tasks and workflows.",\n },\n {\n size: "small",\n style: "default",\n icon: "layers",\n title: "Flexible workflows",\n description: "Build custom processes for any use case.",\n },\n]\n\nconst {\n heading = "Discover what SaaSify can do",\n subheading = "Everything you need to work smarter and scale faster",\n features = defaultFeatures,\n} = Astro.props\n\nconst displayFeatures = features.length > 0 ? features : defaultFeatures\n\nconst gridPositions = [\n "md:col-span-1 md:row-span-1",\n "md:col-span-1 md:row-span-1",\n "md:col-span-1 md:row-span-1",\n "md:col-span-1 md:row-span-2",\n "md:col-span-1 md:row-span-1",\n "md:col-span-1 md:row-span-1",\n "md:col-span-1 md:row-span-1",\n "md:col-span-1 md:row-span-1",\n]\n\nconst styleClasses = {\n default: {\n bg: "bg-card border border-border/50 hover:border-border",\n text: "text-foreground",\n icon: "bg-primary/10 text-primary",\n statText: "text-primary",\n descText: "text-muted-foreground",\n },\n primary: {\n bg: "bg-primary hover:bg-primary/95",\n text: "text-primary-foreground",\n icon: "bg-white/20 text-white",\n statText: "text-white",\n descText: "text-white/80",\n },\n accent: {\n bg: "bg-gradient-to-br from-teal-500 to-teal-600 hover:from-teal-500/95 hover:to-teal-600/95",\n text: "text-white",\n icon: "bg-white/20 text-white",\n statText: "text-white",\n descText: "text-white/80",\n },\n gradient: {\n bg: "bg-gradient-to-br from-primary via-primary/90 to-secondary hover:from-primary/95",\n text: "text-white",\n icon: "bg-white/20 text-white",\n statText: "text-white",\n descText: "text-white/80",\n },\n}\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-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-6">\n {heading}\n </h2>\n )}\n {subheading && (\n <p class="text-xl md:text-2xl text-muted-foreground">{subheading}</p>\n )}\n </div>\n )}\n\n <!-- Bento Grid -->\n <div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-5 md:grid-rows-[repeat(3,minmax(140px,160px))]">\n {displayFeatures.map((feature, index) => {\n const style = feature.style || "default"\n const styleConfig = styleClasses[style] || styleClasses.default\n const gridPosition = gridPositions[index] || "md:col-span-1 md:row-span-1"\n\n return (\n <div\n class:list={[\n "relative rounded-2xl overflow-hidden p-5 md:p-6 flex flex-col transition-all duration-300 group",\n "hover:shadow-lg hover:-translate-y-0.5",\n "col-span-1 row-span-1",\n gridPosition,\n styleConfig.bg,\n ]}\n >\n {/* Decorative elements */}\n {feature.size === "tall" && (\n <div class="absolute -right-6 -bottom-6 w-24 h-24 md:w-32 md:h-32 rounded-full bg-white/10 blur-xl" />\n )}\n\n {/* Content */}\n <div class="relative z-10 flex flex-col h-full">\n {/* Icon */}\n {feature.icon && (\n <div class:list={["w-10 h-10 md:w-11 md:h-11 rounded-xl flex items-center justify-center mb-auto", styleConfig.icon]}>\n {feature.icon === "rocket" && <Rocket class="w-5 h-5" />}\n {feature.icon === "zap" && <Zap class="w-5 h-5" />}\n {feature.icon === "layers" && <Layers class="w-5 h-5" />}\n {feature.icon === "shield" && <Shield class="w-5 h-5" />}\n {feature.icon === "globe" && <Globe class="w-5 h-5" />}\n {feature.icon === "settings" && <Settings class="w-5 h-5" />}\n {feature.icon === "barChart" && <BarChart3 class="w-5 h-5" />}\n </div>\n )}\n\n {/* Spacer */}\n <div class="flex-1 min-h-2" />\n\n {/* Stat */}\n {feature.stat && (\n <div class:list={["font-bold mb-0.5 leading-none text-3xl md:text-4xl", styleConfig.statText]}>\n {feature.stat}\n </div>\n )}\n\n {/* Title */}\n <h3 class:list={["font-semibold mb-1 text-base md:text-lg", styleConfig.text]}>\n {feature.title}\n </h3>\n\n {/* Description */}\n <p class:list={["leading-snug text-xs md:text-sm", styleConfig.descText]}>\n {feature.description}\n </p>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n</section>\n',
|
|
1414
1414
|
"marketing/astro/src/components/blocks/FeatureShowcase.astro": '---\nimport { Check } from "lucide-astro"\n\ninterface Props {\n label?: string\n headline: string\n description: string\n features?: { text: string }[]\n link?: {\n label: string\n href: string\n }\n imagePosition?: "left" | "right"\n}\n\nconst {\n label,\n headline,\n description,\n features = [],\n link,\n imagePosition = "right",\n} = Astro.props\n---\n\n<section class="py-16 md:py-24">\n <div class="container mx-auto px-4">\n <div class:list={[\n "grid md:grid-cols-2 gap-12 lg:gap-16 items-center",\n imagePosition === "left" && "md:grid-flow-dense"\n ]}>\n <!-- Content -->\n <div class:list={[imagePosition === "left" && "md:col-start-2"]}>\n {label && (\n <span class="inline-block text-sm font-medium text-primary mb-4">\n {label}\n </span>\n )}\n <h2 class="text-3xl md:text-4xl font-bold tracking-tight mb-4">\n {headline}\n </h2>\n <p class="text-lg text-muted-foreground mb-6">\n {description}\n </p>\n\n {features.length > 0 && (\n <ul class="space-y-3 mb-8">\n {features.map((feature) => (\n <li class="flex items-center gap-3">\n <div class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10">\n <Check class="h-3 w-3 text-primary" />\n </div>\n <span class="text-sm text-muted-foreground">\n {feature.text}\n </span>\n </li>\n ))}\n </ul>\n )}\n\n {link && (\n <a\n href={link.href}\n class="inline-flex items-center gap-2 text-sm font-medium text-primary hover:underline"\n >\n {link.label}\n <span aria-hidden="true">→</span>\n </a>\n )}\n </div>\n\n <!-- Image Placeholder -->\n <div class:list={[\n "relative aspect-[4/3] rounded-2xl bg-muted overflow-hidden",\n imagePosition === "left" && "md:col-start-1 md:row-start-1"\n ]}>\n <div class="absolute inset-0 flex items-center justify-center">\n <div class="text-center">\n <div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-primary/10 flex items-center justify-center">\n <svg\n class="w-8 h-8 text-primary"\n fill="none"\n stroke="currentColor"\n viewBox="0 0 24 24"\n >\n <path\n stroke-linecap="round"\n stroke-linejoin="round"\n stroke-width="1.5"\n d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"\n />\n </svg>\n </div>\n <p class="text-sm text-muted-foreground">\n Feature illustration\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n',
|
|
1415
|
-
"marketing/astro/src/components/blocks/FinalCTA.astro": '---\ninterface FinalCTALink {\n label: string\n href: string\n variant: "default" | "outline"\n}\n\ninterface Props {\n headline?: string\n subheading?: string\n links?: FinalCTALink[]\n style?: "dark" | "light" | "gradient"\n}\n\nconst {\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 links = [\n { label: "Start free trial", href: "/sign-up", variant: "outline" },\n { label: "Book a demo", href: "/contact", variant: "default" },\n ],\n style = "dark",\n} = Astro.props\n\nconst bgClasses = {\n dark: "bg-
|
|
1415
|
+
"marketing/astro/src/components/blocks/FinalCTA.astro": '---\ninterface FinalCTALink {\n label: string\n href: string\n variant: "default" | "outline"\n}\n\ninterface Props {\n headline?: string\n subheading?: string\n links?: FinalCTALink[]\n style?: "dark" | "light" | "gradient"\n}\n\nconst {\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 links = [\n { label: "Start free trial", href: "/sign-up", variant: "outline" },\n { label: "Book a demo", href: "/contact", variant: "default" },\n ],\n style = "dark",\n} = Astro.props\n\nconst bgClasses = {\n dark: "bg-primary text-primary-foreground",\n light: "bg-muted text-foreground",\n gradient: "bg-gradient-to-br from-primary to-primary/80 text-primary-foreground",\n}\n\nconst buttonClasses = {\n dark: {\n default: "bg-primary-foreground text-primary hover:bg-primary-foreground/90",\n outline: "border border-primary-foreground/30 text-primary-foreground hover:bg-primary-foreground/10",\n },\n light: {\n default: "bg-primary text-primary-foreground hover:bg-primary/90",\n outline: "border border-border hover:bg-background",\n },\n gradient: {\n default: "bg-background text-foreground hover:bg-background/90",\n outline: "border border-primary-foreground/30 text-primary-foreground hover:bg-primary-foreground/10",\n },\n}\n\nconst subtextClasses = {\n dark: "text-primary-foreground/80",\n light: "text-muted-foreground",\n gradient: "text-primary-foreground/80",\n}\n---\n\n<section class:list={["py-16 md:py-24", bgClasses[style]]}>\n <div class="container mx-auto px-4">\n <div class="max-w-3xl mx-auto text-center">\n <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-6">\n {headline}\n </h2>\n {subheading && (\n <p class:list={["text-lg md:text-xl mb-8", subtextClasses[style]]}>\n {subheading}\n </p>\n )}\n\n {links && links.length > 0 && (\n <div class="flex flex-wrap gap-4 justify-center">\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 buttonClasses[style][link.variant]\n ]}\n >\n {link.label}\n </a>\n ))}\n </div>\n )}\n </div>\n </div>\n</section>\n',
|
|
1416
1416
|
"marketing/astro/src/components/blocks/IndustryTabs.astro": `---
|
|
1417
1417
|
interface Tab {
|
|
1418
1418
|
name: string
|
|
@@ -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
|
|
|
@@ -2348,6 +2348,104 @@ const {
|
|
|
2348
2348
|
</html>
|
|
2349
2349
|
`,
|
|
2350
2350
|
"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',
|
|
2351
|
+
"marketing/astro/src/pages/blog.astro": `---
|
|
2352
|
+
import Layout from "../layouts/Layout.astro"
|
|
2353
|
+
import Header from "../components/Header.astro"
|
|
2354
|
+
import Footer from "../components/Footer.astro"
|
|
2355
|
+
|
|
2356
|
+
const blogPosts = [
|
|
2357
|
+
{
|
|
2358
|
+
title: "10 Ways to Boost Your Team's Productivity",
|
|
2359
|
+
description: "Discover proven strategies to help your team work smarter, not harder.",
|
|
2360
|
+
date: "Jan 15, 2025",
|
|
2361
|
+
category: "Productivity",
|
|
2362
|
+
slug: "#",
|
|
2363
|
+
},
|
|
2364
|
+
{
|
|
2365
|
+
title: "The Future of Remote Work: Trends for 2025",
|
|
2366
|
+
description: "What's next for distributed teams? We explore the biggest trends shaping remote work.",
|
|
2367
|
+
date: "Jan 12, 2025",
|
|
2368
|
+
category: "Remote Work",
|
|
2369
|
+
slug: "#",
|
|
2370
|
+
},
|
|
2371
|
+
{
|
|
2372
|
+
title: "How to Build a Culture of Collaboration",
|
|
2373
|
+
description: "Learn how leading companies foster collaboration and teamwork at scale.",
|
|
2374
|
+
date: "Jan 8, 2025",
|
|
2375
|
+
category: "Culture",
|
|
2376
|
+
slug: "#",
|
|
2377
|
+
},
|
|
2378
|
+
{
|
|
2379
|
+
title: "Automation Best Practices for Growing Teams",
|
|
2380
|
+
description: "Stop doing repetitive tasks manually. Here's how to automate the right way.",
|
|
2381
|
+
date: "Jan 5, 2025",
|
|
2382
|
+
category: "Automation",
|
|
2383
|
+
slug: "#",
|
|
2384
|
+
},
|
|
2385
|
+
{
|
|
2386
|
+
title: "Getting Started with SaaSify: A Complete Guide",
|
|
2387
|
+
description: "Everything you need to know to get your team up and running with SaaSify.",
|
|
2388
|
+
date: "Jan 2, 2025",
|
|
2389
|
+
category: "Getting Started",
|
|
2390
|
+
slug: "#",
|
|
2391
|
+
},
|
|
2392
|
+
{
|
|
2393
|
+
title: "Customer Success Stories: How Acme Corp Scaled 10x",
|
|
2394
|
+
description: "Learn how Acme Corp used SaaSify to scale their operations while keeping their team lean.",
|
|
2395
|
+
date: "Dec 28, 2024",
|
|
2396
|
+
category: "Case Study",
|
|
2397
|
+
slug: "#",
|
|
2398
|
+
},
|
|
2399
|
+
]
|
|
2400
|
+
---
|
|
2401
|
+
|
|
2402
|
+
<Layout title="Blog - SaaSify" description="Insights, tips, and stories to help your team work better together.">
|
|
2403
|
+
<div class="min-h-screen flex flex-col">
|
|
2404
|
+
<Header />
|
|
2405
|
+
|
|
2406
|
+
<main class="flex-1">
|
|
2407
|
+
<!-- Hero -->
|
|
2408
|
+
<section class="py-16 md:py-24">
|
|
2409
|
+
<div class="container mx-auto px-4 text-center">
|
|
2410
|
+
<h1 class="text-4xl md:text-5xl font-bold tracking-tight mb-6">
|
|
2411
|
+
Blog
|
|
2412
|
+
</h1>
|
|
2413
|
+
<p class="text-xl text-muted-foreground max-w-2xl mx-auto">
|
|
2414
|
+
Insights, tips, and stories to help your team work better together.
|
|
2415
|
+
</p>
|
|
2416
|
+
</div>
|
|
2417
|
+
</section>
|
|
2418
|
+
|
|
2419
|
+
<!-- Blog Grid -->
|
|
2420
|
+
<section class="pb-24">
|
|
2421
|
+
<div class="container mx-auto px-4">
|
|
2422
|
+
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
|
2423
|
+
{blogPosts.map((post) => (
|
|
2424
|
+
<article
|
|
2425
|
+
class="group rounded-lg border border-border bg-card p-6 transition-all hover:shadow-lg"
|
|
2426
|
+
>
|
|
2427
|
+
<div class="mb-4">
|
|
2428
|
+
<span class="inline-block px-3 py-1 text-xs font-medium rounded-full bg-primary/10 text-primary">
|
|
2429
|
+
{post.category}
|
|
2430
|
+
</span>
|
|
2431
|
+
</div>
|
|
2432
|
+
<h2 class="text-xl font-semibold mb-2 group-hover:text-primary transition-colors">
|
|
2433
|
+
<a href={post.slug}>{post.title}</a>
|
|
2434
|
+
</h2>
|
|
2435
|
+
<p class="text-muted-foreground mb-4">{post.description}</p>
|
|
2436
|
+
<time class="text-sm text-muted-foreground">{post.date}</time>
|
|
2437
|
+
</article>
|
|
2438
|
+
))}
|
|
2439
|
+
</div>
|
|
2440
|
+
</div>
|
|
2441
|
+
</section>
|
|
2442
|
+
</main>
|
|
2443
|
+
|
|
2444
|
+
<Footer />
|
|
2445
|
+
</div>
|
|
2446
|
+
</Layout>
|
|
2447
|
+
`,
|
|
2448
|
+
"marketing/astro/src/pages/features.astro": '---\nimport Layout from "../layouts/Layout.astro"\nimport Header from "../components/Header.astro"\nimport Footer from "../components/Footer.astro"\nimport BentoFeatures from "../components/blocks/BentoFeatures.astro"\nimport FeatureShowcase from "../components/blocks/FeatureShowcase.astro"\nimport LogoBanner from "../components/blocks/LogoBanner.astro"\nimport FinalCTA from "../components/blocks/FinalCTA.astro"\n---\n\n<Layout title="Features - SaaSify" description="Powerful features for modern teams.">\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 Powerful features for modern teams\n </h1>\n <p class="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</Layout>\n',
|
|
2351
2449
|
"marketing/astro/src/pages/index.astro": `---
|
|
2352
2450
|
import Layout from "../layouts/Layout.astro"
|
|
2353
2451
|
import Header from "../components/Header.astro"
|
|
@@ -2518,12 +2616,114 @@ import FinalCTA from "../components/blocks/FinalCTA.astro"
|
|
|
2518
2616
|
</div>
|
|
2519
2617
|
</Layout>
|
|
2520
2618
|
`,
|
|
2521
|
-
"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.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 min-height: 500px;\n}\n\n@media (min-width: 768px) {\n .hero-showcase {\n min-height: 600px;\n }\n}\n\n@media (min-width: 1024px) {\n .hero-showcase {\n min-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',
|
|
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
|
+
"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
|
+
"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: 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',
|
|
2522
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',
|
|
2523
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",
|
|
2524
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',
|
|
2525
2626
|
"marketing/nextjs/postcss.config.mjs.hbs": "export default {\n plugins: {\n '@tailwindcss/postcss': {},\n },\n}\n",
|
|
2526
|
-
"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: 12px;\n overflow: hidden;\n padding: 3rem;\n min-height: 500px;\n}\n\n@media (min-width: 768px) {\n .hero-showcase {\n min-height: 600px;\n }\n}\n\n@media (min-width: 1024px) {\n .hero-showcase {\n min-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',
|
|
2627
|
+
"marketing/nextjs/src/app/blog/page.tsx": `import { Header } from "@/components/Header"
|
|
2628
|
+
import { Footer } from "@/components/Footer"
|
|
2629
|
+
import Link from "next/link"
|
|
2630
|
+
|
|
2631
|
+
const blogPosts = [
|
|
2632
|
+
{
|
|
2633
|
+
title: "10 Ways to Boost Your Team's Productivity",
|
|
2634
|
+
description: "Discover proven strategies to help your team work smarter, not harder.",
|
|
2635
|
+
date: "Jan 15, 2025",
|
|
2636
|
+
category: "Productivity",
|
|
2637
|
+
slug: "#",
|
|
2638
|
+
},
|
|
2639
|
+
{
|
|
2640
|
+
title: "The Future of Remote Work: Trends for 2025",
|
|
2641
|
+
description: "What's next for distributed teams? We explore the biggest trends shaping remote work.",
|
|
2642
|
+
date: "Jan 12, 2025",
|
|
2643
|
+
category: "Remote Work",
|
|
2644
|
+
slug: "#",
|
|
2645
|
+
},
|
|
2646
|
+
{
|
|
2647
|
+
title: "How to Build a Culture of Collaboration",
|
|
2648
|
+
description: "Learn how leading companies foster collaboration and teamwork at scale.",
|
|
2649
|
+
date: "Jan 8, 2025",
|
|
2650
|
+
category: "Culture",
|
|
2651
|
+
slug: "#",
|
|
2652
|
+
},
|
|
2653
|
+
{
|
|
2654
|
+
title: "Automation Best Practices for Growing Teams",
|
|
2655
|
+
description: "Stop doing repetitive tasks manually. Here's how to automate the right way.",
|
|
2656
|
+
date: "Jan 5, 2025",
|
|
2657
|
+
category: "Automation",
|
|
2658
|
+
slug: "#",
|
|
2659
|
+
},
|
|
2660
|
+
{
|
|
2661
|
+
title: "Getting Started with SaaSify: A Complete Guide",
|
|
2662
|
+
description: "Everything you need to know to get your team up and running with SaaSify.",
|
|
2663
|
+
date: "Jan 2, 2025",
|
|
2664
|
+
category: "Getting Started",
|
|
2665
|
+
slug: "#",
|
|
2666
|
+
},
|
|
2667
|
+
{
|
|
2668
|
+
title: "Customer Success Stories: How Acme Corp Scaled 10x",
|
|
2669
|
+
description: "Learn how Acme Corp used SaaSify to scale their operations while keeping their team lean.",
|
|
2670
|
+
date: "Dec 28, 2024",
|
|
2671
|
+
category: "Case Study",
|
|
2672
|
+
slug: "#",
|
|
2673
|
+
},
|
|
2674
|
+
]
|
|
2675
|
+
|
|
2676
|
+
export default function BlogPage() {
|
|
2677
|
+
return (
|
|
2678
|
+
<div className="min-h-screen flex flex-col">
|
|
2679
|
+
<Header />
|
|
2680
|
+
|
|
2681
|
+
<main className="flex-1">
|
|
2682
|
+
{/* Hero */}
|
|
2683
|
+
<section className="py-16 md:py-24">
|
|
2684
|
+
<div className="container mx-auto px-4 text-center">
|
|
2685
|
+
<h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
|
|
2686
|
+
Blog
|
|
2687
|
+
</h1>
|
|
2688
|
+
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
|
2689
|
+
Insights, tips, and stories to help your team work better together.
|
|
2690
|
+
</p>
|
|
2691
|
+
</div>
|
|
2692
|
+
</section>
|
|
2693
|
+
|
|
2694
|
+
{/* Blog Grid */}
|
|
2695
|
+
<section className="pb-24">
|
|
2696
|
+
<div className="container mx-auto px-4">
|
|
2697
|
+
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
|
2698
|
+
{blogPosts.map((post) => (
|
|
2699
|
+
<article
|
|
2700
|
+
key={post.title}
|
|
2701
|
+
className="group rounded-lg border border-border bg-card p-6 transition-all hover:shadow-lg"
|
|
2702
|
+
>
|
|
2703
|
+
<div className="mb-4">
|
|
2704
|
+
<span className="inline-block px-3 py-1 text-xs font-medium rounded-full bg-primary/10 text-primary">
|
|
2705
|
+
{post.category}
|
|
2706
|
+
</span>
|
|
2707
|
+
</div>
|
|
2708
|
+
<h2 className="text-xl font-semibold mb-2 group-hover:text-primary transition-colors">
|
|
2709
|
+
<Link href={post.slug}>{post.title}</Link>
|
|
2710
|
+
</h2>
|
|
2711
|
+
<p className="text-muted-foreground mb-4">{post.description}</p>
|
|
2712
|
+
<time className="text-sm text-muted-foreground">{post.date}</time>
|
|
2713
|
+
</article>
|
|
2714
|
+
))}
|
|
2715
|
+
</div>
|
|
2716
|
+
</div>
|
|
2717
|
+
</section>
|
|
2718
|
+
</main>
|
|
2719
|
+
|
|
2720
|
+
<Footer />
|
|
2721
|
+
</div>
|
|
2722
|
+
)
|
|
2723
|
+
}
|
|
2724
|
+
`,
|
|
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: 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',
|
|
2527
2727
|
"marketing/nextjs/src/app/layout.tsx.hbs": `import type { Metadata } from 'next'
|
|
2528
2728
|
import { Geist, Geist_Mono } from 'next/font/google'
|
|
2529
2729
|
import { ThemeProvider } from '@/components/ThemeProvider'
|
|
@@ -2571,7 +2771,7 @@ export default function RootLayout({
|
|
|
2571
2771
|
)
|
|
2572
2772
|
}
|
|
2573
2773
|
`,
|
|
2574
|
-
"marketing/nextjs/src/app/page.tsx
|
|
2774
|
+
"marketing/nextjs/src/app/page.tsx": `import { Header } from "@/components/Header"
|
|
2575
2775
|
import { Footer } from "@/components/Footer"
|
|
2576
2776
|
import { ProductShowcaseHero } from "@/components/heros"
|
|
2577
2777
|
import {
|
|
@@ -2619,12 +2819,10 @@ export default function HomePage() {
|
|
|
2619
2819
|
/>
|
|
2620
2820
|
|
|
2621
2821
|
{/* Bento Features */}
|
|
2622
|
-
<
|
|
2623
|
-
|
|
2624
|
-
|
|
2625
|
-
|
|
2626
|
-
/>
|
|
2627
|
-
</section>
|
|
2822
|
+
<BentoFeatures
|
|
2823
|
+
heading="Discover what SaaSify can do"
|
|
2824
|
+
subheading="Everything you need to work smarter and scale faster"
|
|
2825
|
+
/>
|
|
2628
2826
|
|
|
2629
2827
|
{/* Feature Showcase: Integrations */}
|
|
2630
2828
|
<FeatureShowcase
|
|
@@ -2637,7 +2835,7 @@ export default function HomePage() {
|
|
|
2637
2835
|
{ text: "Custom webhooks" },
|
|
2638
2836
|
{ text: "API access included" },
|
|
2639
2837
|
]}
|
|
2640
|
-
link={{ label: "Explore integrations", href: "/features
|
|
2838
|
+
link={{ label: "Explore integrations", href: "/features" }}
|
|
2641
2839
|
imagePosition="right"
|
|
2642
2840
|
/>
|
|
2643
2841
|
|
|
@@ -2652,7 +2850,7 @@ export default function HomePage() {
|
|
|
2652
2850
|
{ text: "Team performance metrics" },
|
|
2653
2851
|
{ text: "Automated insights" },
|
|
2654
2852
|
]}
|
|
2655
|
-
link={{ label: "Learn about analytics", href: "/features
|
|
2853
|
+
link={{ label: "Learn about analytics", href: "/features" }}
|
|
2656
2854
|
imagePosition="left"
|
|
2657
2855
|
/>
|
|
2658
2856
|
|
|
@@ -2667,7 +2865,7 @@ export default function HomePage() {
|
|
|
2667
2865
|
{ text: "Scheduled triggers" },
|
|
2668
2866
|
{ text: "Cross-app automation" },
|
|
2669
2867
|
]}
|
|
2670
|
-
link={{ label: "See automation features", href: "/features
|
|
2868
|
+
link={{ label: "See automation features", href: "/features" }}
|
|
2671
2869
|
imagePosition="right"
|
|
2672
2870
|
/>
|
|
2673
2871
|
|
|
@@ -2693,12 +2891,10 @@ export default function HomePage() {
|
|
|
2693
2891
|
/>
|
|
2694
2892
|
|
|
2695
2893
|
{/* Testimonials */}
|
|
2696
|
-
<
|
|
2697
|
-
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
/>
|
|
2701
|
-
</section>
|
|
2894
|
+
<TestimonialsGrid
|
|
2895
|
+
heading="Loved by teams at companies of all sizes"
|
|
2896
|
+
subheading="See how leading teams use SaaSify to drive growth and productivity."
|
|
2897
|
+
/>
|
|
2702
2898
|
|
|
2703
2899
|
{/* Trust Columns */}
|
|
2704
2900
|
<TrustColumns />
|
|
@@ -2718,12 +2914,10 @@ export default function HomePage() {
|
|
|
2718
2914
|
/>
|
|
2719
2915
|
|
|
2720
2916
|
{/* Pricing */}
|
|
2721
|
-
<
|
|
2722
|
-
|
|
2723
|
-
|
|
2724
|
-
|
|
2725
|
-
/>
|
|
2726
|
-
</section>
|
|
2917
|
+
<PricingTable
|
|
2918
|
+
heading="Simple, transparent pricing"
|
|
2919
|
+
subheading="Start free, upgrade as your team grows. No hidden fees."
|
|
2920
|
+
/>
|
|
2727
2921
|
|
|
2728
2922
|
{/* Final CTA */}
|
|
2729
2923
|
<FinalCTA
|
|
@@ -2742,16 +2936,19 @@ export default function HomePage() {
|
|
|
2742
2936
|
)
|
|
2743
2937
|
}
|
|
2744
2938
|
`,
|
|
2745
|
-
"marketing/nextjs/src/
|
|
2939
|
+
"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',
|
|
2940
|
+
"marketing/nextjs/src/app/privacy/page.tsx": 'import { Header } from "@/components/Header"\nimport { Footer } from "@/components/Footer"\n\nexport default function PrivacyPage() {\n return (\n <div className="min-h-screen flex flex-col">\n <Header />\n\n <main className="flex-1">\n <article className="py-16 md:py-24">\n <div className="container mx-auto px-4 max-w-3xl">\n <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">\n Privacy Policy\n </h1>\n <p className="text-muted-foreground mb-8">\n Last updated: January 1, 2025\n </p>\n\n <div className="prose prose-neutral dark:prose-invert max-w-none">\n <h2 className="text-2xl font-semibold mt-8 mb-4">Introduction</h2>\n <p className="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 className="text-2xl font-semibold mt-8 mb-4">Information We Collect</h2>\n <p className="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 className="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 className="text-2xl font-semibold mt-8 mb-4">How We Use Your Information</h2>\n <p className="text-muted-foreground mb-4">\n We use the information we collect to:\n </p>\n <ul className="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 className="text-2xl font-semibold mt-8 mb-4">Data Security</h2>\n <p className="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 className="text-2xl font-semibold mt-8 mb-4">Contact Us</h2>\n <p className="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 )\n}\n',
|
|
2941
|
+
"marketing/nextjs/src/app/terms/page.tsx": 'import { Header } from "@/components/Header"\nimport { Footer } from "@/components/Footer"\n\nexport default function TermsPage() {\n return (\n <div className="min-h-screen flex flex-col">\n <Header />\n\n <main className="flex-1">\n <article className="py-16 md:py-24">\n <div className="container mx-auto px-4 max-w-3xl">\n <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">\n Terms of Service\n </h1>\n <p className="text-muted-foreground mb-8">\n Last updated: January 1, 2025\n </p>\n\n <div className="prose prose-neutral dark:prose-invert max-w-none">\n <h2 className="text-2xl font-semibold mt-8 mb-4">Agreement to Terms</h2>\n <p className="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 className="text-2xl font-semibold mt-8 mb-4">Use License</h2>\n <p className="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 className="text-2xl font-semibold mt-8 mb-4">User Accounts</h2>\n <p className="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 className="text-2xl font-semibold mt-8 mb-4">Prohibited Uses</h2>\n <p className="text-muted-foreground mb-4">\n You may not use our service:\n </p>\n <ul className="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 className="text-2xl font-semibold mt-8 mb-4">Payment Terms</h2>\n <p className="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 className="text-2xl font-semibold mt-8 mb-4">Limitation of Liability</h2>\n <p className="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 className="text-2xl font-semibold mt-8 mb-4">Contact Us</h2>\n <p className="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 )\n}\n',
|
|
2942
|
+
"marketing/nextjs/src/components/Footer/index.tsx": '"use client"\n\nimport Link from "next/link"\nimport { Logo } from "@/components/Logo"\nimport { ThemeSelector } from "@/components/ThemeSelector"\n\n// Footer navigation structure\nconst footerColumns = [\n {\n title: "Product",\n links: [\n { label: "Home", href: "/" },\n { label: "Features", href: "/features" },\n { label: "Pricing", href: "/pricing" },\n ],\n },\n {\n title: "Resources",\n links: [\n { label: "Blog", href: "/blog" },\n ],\n },\n {\n title: "Legal",\n links: [\n { label: "Privacy", href: "/privacy" },\n { label: "Terms", href: "/terms" },\n ],\n },\n]\n\nconst socialLinks = {\n twitter: "https://x.com/saasify",\n linkedin: "https://linkedin.com/company/saasify",\n github: "https://github.com/saasify",\n}\n\n// Social icons as inline SVGs\nconst SocialIcons = {\n twitter: (\n <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">\n <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />\n </svg>\n ),\n linkedin: (\n <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">\n <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />\n </svg>\n ),\n github: (\n <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">\n <path\n fillRule="evenodd"\n d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"\n clipRule="evenodd"\n />\n </svg>\n ),\n}\n\nexport function Footer() {\n const currentYear = new Date().getFullYear()\n\n return (\n <footer className="mt-auto border-t border-border bg-background">\n {/* Main Footer Content */}\n <div className="container mx-auto px-4 py-12 lg:py-16">\n <div className="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-5">\n {/* Link Columns */}\n {footerColumns.map((column) => (\n <div key={column.title} className="col-span-1">\n <h3 className="mb-4 text-sm font-medium text-foreground">\n {column.title}\n </h3>\n <ul className="space-y-3">\n {column.links.map((link) => (\n <li key={link.label}>\n <Link\n href={link.href}\n className="text-sm text-muted-foreground transition-colors hover:text-foreground"\n >\n {link.label}\n </Link>\n </li>\n ))}\n </ul>\n </div>\n ))}\n\n {/* Newsletter Column */}\n <div className="col-span-2">\n <h3 className="mb-4 text-sm font-medium text-foreground">\n Newsletter\n </h3>\n <p className="mb-4 text-sm text-muted-foreground">\n Get product updates, tips, and insights delivered weekly.\n </p>\n <form className="flex gap-2">\n <input\n type="email"\n placeholder="Enter your email"\n className="flex-1 px-3 py-2 text-sm rounded-md border border-input bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"\n />\n <button\n type="submit"\n className="px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90"\n >\n Subscribe\n </button>\n </form>\n </div>\n </div>\n\n {/* Social Links */}\n <div className="mt-10 flex items-center gap-4 border-t border-border pt-8">\n <a\n href={socialLinks.twitter}\n target="_blank"\n rel="noopener noreferrer"\n className="text-muted-foreground transition-colors hover:text-foreground"\n aria-label="X (Twitter)"\n >\n {SocialIcons.twitter}\n </a>\n <a\n href={socialLinks.linkedin}\n target="_blank"\n rel="noopener noreferrer"\n className="text-muted-foreground transition-colors hover:text-foreground"\n aria-label="LinkedIn"\n >\n {SocialIcons.linkedin}\n </a>\n <a\n href={socialLinks.github}\n target="_blank"\n rel="noopener noreferrer"\n className="text-muted-foreground transition-colors hover:text-foreground"\n aria-label="GitHub"\n >\n {SocialIcons.github}\n </a>\n </div>\n </div>\n\n {/* Bottom Bar */}\n <div className="border-t border-border">\n <div className="container mx-auto flex flex-col items-center justify-between gap-4 px-4 py-6 sm:flex-row">\n {/* Logo and Copyright */}\n <div className="flex items-center gap-4">\n <Link href="/" className="flex items-center">\n <Logo className="h-6 w-6" />\n </Link>\n <p className="text-sm text-muted-foreground">\n \xA9 {currentYear} SaaSify\n </p>\n </div>\n\n {/* Theme Selector */}\n <div className="flex items-center gap-6">\n <ThemeSelector />\n </div>\n </div>\n </div>\n </footer>\n )\n}\n',
|
|
2746
2943
|
"marketing/nextjs/src/components/Header/MegaMenu.tsx": '"use client"\n\nimport { useState } from "react"\nimport Link from "next/link"\nimport { ChevronDown, Layout, BarChart3, Shield, Zap, Layers, Target, Rocket, Settings } from "lucide-react"\nimport { cn } from "@/lib/utils"\n\ninterface MenuItem {\n label: string\n description: string\n href: string\n icon: string\n}\n\ninterface MenuColumn {\n title: string\n items: MenuItem[]\n}\n\ninterface MegaMenuProps {\n menu: {\n label: string\n columns: MenuColumn[]\n }\n}\n\nconst iconMap: Record<string, React.ComponentType<{ className?: string }>> = {\n layout: Layout,\n barChart: BarChart3,\n shield: Shield,\n zap: Zap,\n layers: Layers,\n target: Target,\n rocket: Rocket,\n settings: Settings,\n}\n\nexport function MegaMenu({ menu }: MegaMenuProps) {\n const [isOpen, setIsOpen] = useState(false)\n\n return (\n <div\n className="relative"\n onMouseEnter={() => setIsOpen(true)}\n onMouseLeave={() => setIsOpen(false)}\n >\n <button\n type="button"\n className={cn(\n "flex items-center gap-1 px-4 py-2 text-sm font-medium transition-colors",\n isOpen ? "text-foreground" : "text-muted-foreground hover:text-foreground"\n )}\n onClick={() => setIsOpen(!isOpen)}\n aria-expanded={isOpen}\n >\n {menu.label}\n <ChevronDown\n className={cn(\n "h-4 w-4 transition-transform",\n isOpen && "rotate-180"\n )}\n />\n </button>\n\n {/* Dropdown */}\n <div\n className={cn(\n "absolute left-0 top-full pt-2 transition-all",\n isOpen\n ? "opacity-100 translate-y-0 pointer-events-auto"\n : "opacity-0 -translate-y-2 pointer-events-none"\n )}\n >\n <div className="bg-background border border-border rounded-lg shadow-lg p-6 min-w-[480px]">\n <div className={cn(\n "grid gap-8",\n menu.columns.length === 1 ? "grid-cols-1" : "grid-cols-2"\n )}>\n {menu.columns.map((column) => (\n <div key={column.title}>\n <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-4">\n {column.title}\n </h3>\n <ul className="space-y-1">\n {column.items.map((item) => {\n const Icon = iconMap[item.icon] || Layout\n return (\n <li key={item.href}>\n <Link\n href={item.href}\n className="flex items-start gap-3 p-3 rounded-lg hover:bg-muted transition-colors group"\n onClick={() => setIsOpen(false)}\n >\n <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted group-hover:bg-background">\n <Icon className="h-5 w-5 text-primary" />\n </div>\n <div>\n <div className="text-sm font-medium text-foreground">\n {item.label}\n </div>\n <div className="text-xs text-muted-foreground mt-0.5">\n {item.description}\n </div>\n </div>\n </Link>\n </li>\n )\n })}\n </ul>\n </div>\n ))}\n </div>\n </div>\n </div>\n </div>\n )\n}\n',
|
|
2747
|
-
"marketing/nextjs/src/components/Header/MobileMenu.tsx": '"use client"\n\nimport { useState } from "react"\nimport { Menu, X } from "lucide-react"\nimport { cn } from "@/lib/utils"\n\ninterface MobileMenuProps {\n navLinks: { label: string; href: string }[]\n ctaLinks: { label: string; href: string; variant: "default" | "ghost" }[]\n}\n\nexport function MobileMenu({ navLinks, ctaLinks }: MobileMenuProps) {\n const [isOpen, setIsOpen] = useState(false)\n\n const handleClose = () => {\n setIsOpen(false)\n }\n\n return (\n <div className="lg:hidden">\n <button\n type="button"\n className="p-2 text-muted-foreground hover:text-foreground"\n onClick={() => setIsOpen(!isOpen)}\n aria-label={isOpen ? "Close menu" : "Open menu"}\n >\n {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}\n </button>\n\n {/* Mobile menu overlay */}\n {isOpen && (\n <div className="fixed inset-0 top-16 z-50 bg-background">\n <nav className="overflow-y-auto max-h-[calc(100vh-4rem)]">\n {/* Navigation links */}\n {navLinks.map((link) => (\n <
|
|
2748
|
-
"marketing/nextjs/src/components/Header/index.tsx": '"use client"\n\nimport Link from "next/link"\nimport { Logo } from "@/components/Logo"\nimport { MobileMenu } from "./MobileMenu"\nimport { cn } from "@/lib/utils"\n\n//
|
|
2944
|
+
"marketing/nextjs/src/components/Header/MobileMenu.tsx": '"use client"\n\nimport { useState } from "react"\nimport Link from "next/link"\nimport { Menu, X } from "lucide-react"\nimport { cn } from "@/lib/utils"\n\ninterface MobileMenuProps {\n navLinks: { label: string; href: string }[]\n ctaLinks: { label: string; href: string; variant: "default" | "ghost" }[]\n}\n\nexport function MobileMenu({ navLinks, ctaLinks }: MobileMenuProps) {\n const [isOpen, setIsOpen] = useState(false)\n\n const handleClose = () => {\n setIsOpen(false)\n }\n\n return (\n <div className="lg:hidden">\n <button\n type="button"\n className="p-2 text-muted-foreground hover:text-foreground"\n onClick={() => setIsOpen(!isOpen)}\n aria-label={isOpen ? "Close menu" : "Open menu"}\n >\n {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}\n </button>\n\n {/* Mobile menu overlay */}\n {isOpen && (\n <div className="fixed inset-0 top-16 z-50 bg-background">\n <nav className="overflow-y-auto max-h-[calc(100vh-4rem)]">\n {/* Navigation links */}\n {navLinks.map((link) => (\n <Link\n key={link.href}\n href={link.href}\n className="flex items-center px-4 py-3 text-sm font-medium border-b border-border hover:bg-muted"\n onClick={handleClose}\n >\n {link.label}\n </Link>\n ))}\n\n {/* CTA links */}\n <div className="p-4 space-y-2">\n {ctaLinks.map((link) => (\n <Link\n key={link.label}\n href={link.href}\n className={cn(\n "flex items-center justify-center w-full px-4 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 hover:bg-muted"\n )}\n onClick={handleClose}\n >\n {link.label}\n </Link>\n ))}\n </div>\n </nav>\n </div>\n )}\n </div>\n )\n}\n',
|
|
2945
|
+
"marketing/nextjs/src/components/Header/index.tsx": '"use client"\n\nimport Link from "next/link"\nimport { Logo } from "@/components/Logo"\nimport { MobileMenu } from "./MobileMenu"\nimport { cn } from "@/lib/utils"\n\n// Navigation for landing page\nconst navLinks = [\n { label: "Features", href: "/features" },\n { label: "Pricing", href: "/pricing" },\n { label: "Blog", href: "/blog" },\n]\n\nconst ctaLinks = [\n { label: "Sign In", href: "/sign-in", variant: "ghost" as const },\n { label: "Get Started", href: "/pricing", variant: "default" as const },\n]\n\nexport function Header() {\n return (\n <header className="sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">\n <div className="container mx-auto px-4 h-16 flex justify-between items-center">\n {/* Left section: Logo + Nav */}\n <div className="flex items-center gap-8">\n <Link href="/" className="flex items-center gap-2">\n <Logo />\n <span className="text-xl font-semibold hidden sm:inline">SaaSify</span>\n </Link>\n\n {/* Desktop navigation */}\n <nav className="hidden lg:flex items-center gap-1">\n {navLinks.map((link) => (\n <Link\n key={link.href}\n href={link.href}\n className="px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"\n >\n {link.label}\n </Link>\n ))}\n </nav>\n </div>\n\n {/* Right section: CTAs */}\n <div className="flex items-center gap-3">\n {/* Desktop CTAs */}\n <div className="hidden lg:flex items-center gap-3">\n {ctaLinks.map((link) => (\n <Link\n key={link.href}\n href={link.href}\n className={cn(\n "px-4 py-2 text-sm font-medium rounded-md transition-colors",\n link.variant === "default"\n ? "bg-primary text-primary-foreground hover:bg-primary/90"\n : "text-muted-foreground hover:text-foreground"\n )}\n >\n {link.label}\n </Link>\n ))}\n </div>\n\n {/* Mobile: Primary CTA + Hamburger */}\n <Link\n href="/pricing"\n className="lg:hidden px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90"\n >\n Get Started\n </Link>\n\n <MobileMenu\n navLinks={navLinks}\n ctaLinks={ctaLinks}\n />\n </div>\n </div>\n </header>\n )\n}\n',
|
|
2749
2946
|
"marketing/nextjs/src/components/Logo.tsx": '"use client"\n\nimport { useTheme } from "next-themes"\nimport { useEffect, useState } from "react"\nimport { cn } from "@/lib/utils"\n\ninterface LogoProps {\n className?: string\n variant?: "light" | "dark" | "auto"\n}\n\nexport function Logo({ className, variant = "auto" }: LogoProps) {\n const { resolvedTheme } = useTheme()\n const [mounted, setMounted] = useState(false)\n\n useEffect(() => {\n setMounted(true)\n }, [])\n\n // Determine which variant to show\n const showDark =\n variant === "dark" ||\n (variant === "auto" && mounted && resolvedTheme === "dark")\n\n return (\n <div\n className={cn(\n "flex h-8 w-8 items-center justify-center rounded-lg",\n showDark ? "bg-white" : "bg-foreground",\n className\n )}\n >\n <svg\n className={cn("h-5 w-5", showDark ? "text-gray-900" : "text-background")}\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n strokeWidth={2}\n strokeLinecap="round"\n strokeLinejoin="round"\n >\n <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />\n </svg>\n </div>\n )\n}\n',
|
|
2750
2947
|
"marketing/nextjs/src/components/ThemeProvider.tsx": '"use client"\n\nimport { ThemeProvider as NextThemesProvider } from "next-themes"\nimport type { ThemeProviderProps } from "next-themes"\n\nexport function ThemeProvider({ children, ...props }: ThemeProviderProps) {\n return <NextThemesProvider {...props}>{children}</NextThemesProvider>\n}\n',
|
|
2751
2948
|
"marketing/nextjs/src/components/ThemeSelector.tsx": '"use client"\n\nimport { Moon, Sun, Monitor } from "lucide-react"\nimport { useTheme } from "next-themes"\nimport { useEffect, useState } from "react"\nimport { cn } from "@/lib/utils"\n\nexport function ThemeSelector() {\n const { theme, setTheme } = useTheme()\n const [mounted, setMounted] = useState(false)\n\n useEffect(() => {\n setMounted(true)\n }, [])\n\n if (!mounted) {\n return (\n <div className="flex items-center gap-1 rounded-full border border-border bg-background/50 p-1">\n <div className="h-7 w-7 rounded-full" />\n <div className="h-7 w-7 rounded-full" />\n <div className="h-7 w-7 rounded-full" />\n </div>\n )\n }\n\n return (\n <div className="flex items-center gap-1 rounded-full border border-border bg-background/50 p-1">\n <button\n type="button"\n onClick={() => setTheme("light")}\n className={cn(\n "flex h-7 w-7 items-center justify-center rounded-full transition-colors",\n theme === "light"\n ? "bg-foreground text-background"\n : "text-muted-foreground hover:text-foreground"\n )}\n aria-label="Light mode"\n >\n <Sun className="h-4 w-4" />\n </button>\n <button\n type="button"\n onClick={() => setTheme("dark")}\n className={cn(\n "flex h-7 w-7 items-center justify-center rounded-full transition-colors",\n theme === "dark"\n ? "bg-foreground text-background"\n : "text-muted-foreground hover:text-foreground"\n )}\n aria-label="Dark mode"\n >\n <Moon className="h-4 w-4" />\n </button>\n <button\n type="button"\n onClick={() => setTheme("system")}\n className={cn(\n "flex h-7 w-7 items-center justify-center rounded-full transition-colors",\n theme === "system"\n ? "bg-foreground text-background"\n : "text-muted-foreground hover:text-foreground"\n )}\n aria-label="System theme"\n >\n <Monitor className="h-4 w-4" />\n </button>\n </div>\n )\n}\n',
|
|
2752
2949
|
"marketing/nextjs/src/components/blocks/BentoFeatures.tsx": '"use client"\n\nimport {\n BarChart3,\n Globe,\n Layers,\n type LucideIcon,\n Rocket,\n Settings,\n Shield,\n Zap,\n} from "lucide-react"\nimport { cn } from "@/lib/utils"\n\ninterface Feature {\n size?: "small" | "tall"\n style?: "default" | "primary" | "accent" | "gradient"\n icon?: string\n stat?: string\n title: string\n description: string\n}\n\ninterface BentoFeaturesProps {\n heading?: string\n subheading?: string\n features?: Feature[]\n}\n\nconst iconMap: Record<string, LucideIcon> = {\n rocket: Rocket,\n zap: Zap,\n layers: Layers,\n shield: Shield,\n globe: Globe,\n settings: Settings,\n barChart: BarChart3,\n}\n\nconst gridPositions = [\n "md:col-span-1 md:row-span-1",\n "md:col-span-1 md:row-span-1",\n "md:col-span-1 md:row-span-1",\n "md:col-span-1 md:row-span-2",\n "md:col-span-1 md:row-span-1",\n "md:col-span-1 md:row-span-1",\n "md:col-span-1 md:row-span-1",\n "md:col-span-1 md:row-span-1",\n]\n\nconst styleClasses: Record<string, { bg: string; text: string; icon: string; statText: string }> = {\n default: {\n bg: "bg-card border border-border/50 hover:border-border",\n text: "text-foreground",\n icon: "bg-primary/10 text-primary",\n statText: "text-primary",\n },\n primary: {\n bg: "bg-primary hover:bg-primary/95",\n text: "text-primary-foreground",\n icon: "bg-white/20 text-white",\n statText: "text-white",\n },\n accent: {\n bg: "bg-gradient-to-br from-teal-500 to-teal-600 hover:from-teal-500/95 hover:to-teal-600/95",\n text: "text-white",\n icon: "bg-white/20 text-white",\n statText: "text-white",\n },\n gradient: {\n bg: "bg-gradient-to-br from-primary via-primary/90 to-secondary hover:from-primary/95",\n text: "text-white",\n icon: "bg-white/20 text-white",\n statText: "text-white",\n },\n}\n\nconst defaultFeatures: Feature[] = [\n {\n size: "small",\n style: "gradient",\n icon: "zap",\n stat: "5x",\n title: "Faster onboarding",\n description: "Get your team up and running in hours, not weeks.",\n },\n {\n size: "small",\n style: "accent",\n icon: "rocket",\n title: "Quick setup",\n description: "Configure your workspace, invite your team, and start collaborating.",\n },\n {\n size: "small",\n style: "default",\n icon: "layers",\n title: "Powerful integrations",\n description: "Connect with 100+ tools you already use.",\n },\n {\n size: "tall",\n style: "primary",\n icon: "shield",\n title: "Enterprise security",\n description: "SOC 2 compliant with end-to-end encryption and complete audit trails for peace of mind.",\n },\n {\n size: "small",\n style: "default",\n icon: "globe",\n stat: "99.9%",\n title: "Uptime",\n description: "Reliable infrastructure you can count on.",\n },\n {\n size: "small",\n style: "default",\n icon: "globe",\n title: "Global scale",\n description: "Multi-region with custom domains.",\n },\n {\n size: "small",\n style: "default",\n icon: "settings",\n title: "Smart automation",\n description: "Automate repetitive tasks and workflows.",\n },\n {\n size: "small",\n style: "default",\n icon: "layers",\n title: "Flexible workflows",\n description: "Build custom processes for any use case.",\n },\n]\n\nexport function BentoFeatures({\n heading = "Discover what SaaSify can do",\n subheading = "Everything you need to work smarter and scale faster",\n features = defaultFeatures,\n}: BentoFeaturesProps) {\n const displayFeatures = features.length > 0 ? features : defaultFeatures\n\n return (\n <section className="py-16 md:py-24">\n <div className="container mx-auto px-4">\n {/* Header */}\n {(heading || subheading) && (\n <div className="text-center mb-12 md:mb-16 max-w-3xl mx-auto">\n {heading && (\n <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-6">\n {heading}\n </h2>\n )}\n {subheading && (\n <p className="text-xl md:text-2xl text-muted-foreground">{subheading}</p>\n )}\n </div>\n )}\n\n {/* Bento Grid */}\n <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-5 md:grid-rows-[repeat(3,minmax(140px,160px))]">\n {displayFeatures.map((feature, index) => {\n const style = feature.style || "default"\n const iconKey = feature.icon\n const Icon = iconKey && iconKey in iconMap ? iconMap[iconKey] : null\n const styleConfig = styleClasses[style] || styleClasses.default\n const gridPosition = gridPositions[index] || "md:col-span-1 md:row-span-1"\n const isLarge =\n gridPosition.includes("col-span-2") && gridPosition.includes("row-span-2")\n\n return (\n <div\n key={feature.title}\n className={cn(\n "relative rounded-2xl overflow-hidden p-5 md:p-6 flex flex-col transition-all duration-300 group",\n "hover:shadow-lg hover:-translate-y-0.5",\n "col-span-1 row-span-1",\n gridPosition,\n styleConfig.bg\n )}\n >\n {/* Decorative elements */}\n {!isLarge && feature.size === "tall" && (\n <div className="absolute -right-6 -bottom-6 w-24 h-24 md:w-32 md:h-32 rounded-full bg-white/10 blur-xl" />\n )}\n\n {/* Content */}\n <div className="relative z-10 flex flex-col h-full">\n {/* Icon */}\n {Icon && (\n <div\n className={cn(\n "w-10 h-10 md:w-11 md:h-11 rounded-xl flex items-center justify-center mb-auto",\n styleConfig.icon\n )}\n >\n <Icon className="w-5 h-5 md:w-5 md:h-5" />\n </div>\n )}\n\n {/* Spacer */}\n <div className="flex-1 min-h-2" />\n\n {/* Stat */}\n {feature.stat && (\n <div\n className={cn(\n "font-bold mb-0.5 leading-none",\n isLarge ? "text-5xl md:text-6xl" : "text-3xl md:text-4xl",\n styleConfig.statText\n )}\n >\n {feature.stat}\n </div>\n )}\n\n {/* Title */}\n <h3\n className={cn(\n "font-semibold mb-1",\n isLarge ? "text-lg md:text-xl" : "text-base md:text-lg",\n styleConfig.text\n )}\n >\n {feature.title}\n </h3>\n\n {/* Description */}\n <p\n className={cn(\n "leading-snug",\n isLarge ? "text-sm md:text-base" : "text-xs md:text-sm",\n style === "default" ? "text-muted-foreground" : "text-white/80"\n )}\n >\n {feature.description}\n </p>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n </section>\n )\n}\n',
|
|
2753
2950
|
"marketing/nextjs/src/components/blocks/FeatureShowcase.tsx": '"use client"\n\nimport Link from "next/link"\nimport { Check } from "lucide-react"\nimport { cn } from "@/lib/utils"\n\ninterface FeatureShowcaseProps {\n label?: string\n headline: string\n description: string\n features?: { text: string }[]\n link?: {\n label: string\n href: string\n }\n imagePosition?: "left" | "right"\n}\n\nexport function FeatureShowcase({\n label,\n headline,\n description,\n features = [],\n link,\n imagePosition = "right",\n}: FeatureShowcaseProps) {\n return (\n <section className="py-16 md:py-24">\n <div className="container mx-auto px-4">\n <div\n className={cn(\n "grid md:grid-cols-2 gap-12 lg:gap-16 items-center",\n imagePosition === "left" && "md:grid-flow-dense"\n )}\n >\n {/* Content */}\n <div className={cn(imagePosition === "left" && "md:col-start-2")}>\n {label && (\n <span className="inline-block text-sm font-medium text-primary mb-4">\n {label}\n </span>\n )}\n <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">\n {headline}\n </h2>\n <p className="text-lg text-muted-foreground mb-6">\n {description}\n </p>\n\n {features.length > 0 && (\n <ul className="space-y-3 mb-8">\n {features.map((feature) => (\n <li key={feature.text} className="flex items-center gap-3">\n <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10">\n <Check className="h-3 w-3 text-primary" />\n </div>\n <span className="text-sm text-muted-foreground">\n {feature.text}\n </span>\n </li>\n ))}\n </ul>\n )}\n\n {link && (\n <Link\n href={link.href}\n className="inline-flex items-center gap-2 text-sm font-medium text-primary hover:underline"\n >\n {link.label}\n <span aria-hidden="true">\u2192</span>\n </Link>\n )}\n </div>\n\n {/* Image Placeholder */}\n <div\n className={cn(\n "relative aspect-[4/3] rounded-2xl bg-muted overflow-hidden",\n imagePosition === "left" && "md:col-start-1 md:row-start-1"\n )}\n >\n <div className="absolute inset-0 flex items-center justify-center">\n <div className="text-center">\n <div className="w-16 h-16 mx-auto mb-4 rounded-xl bg-primary/10 flex items-center justify-center">\n <svg\n className="w-8 h-8 text-primary"\n fill="none"\n stroke="currentColor"\n viewBox="0 0 24 24"\n >\n <path\n strokeLinecap="round"\n strokeLinejoin="round"\n strokeWidth={1.5}\n d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"\n />\n </svg>\n </div>\n <p className="text-sm text-muted-foreground">\n Feature illustration\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n )\n}\n',
|
|
2754
|
-
"marketing/nextjs/src/components/blocks/FinalCTA.tsx": '"use client"\n\nimport Link from "next/link"\nimport { cn } from "@/lib/utils"\n\ninterface FinalCTALink {\n label: string\n href: string\n variant: "default" | "outline"\n}\n\ninterface FinalCTAProps {\n headline?: string\n subheading?: string\n links?: FinalCTALink[]\n style?: "dark" | "light" | "gradient"\n}\n\nexport function 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 links = [\n { label: "Start free trial", href: "/sign-up", variant: "outline" },\n { label: "Book a demo", href: "/contact", variant: "default" },\n ],\n style = "dark",\n}: FinalCTAProps) {\n const bgClasses = {\n dark: "bg-
|
|
2951
|
+
"marketing/nextjs/src/components/blocks/FinalCTA.tsx": '"use client"\n\nimport Link from "next/link"\nimport { cn } from "@/lib/utils"\n\ninterface FinalCTALink {\n label: string\n href: string\n variant: "default" | "outline"\n}\n\ninterface FinalCTAProps {\n headline?: string\n subheading?: string\n links?: FinalCTALink[]\n style?: "dark" | "light" | "gradient"\n}\n\nexport function 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 links = [\n { label: "Start free trial", href: "/sign-up", variant: "outline" },\n { label: "Book a demo", href: "/contact", variant: "default" },\n ],\n style = "dark",\n}: FinalCTAProps) {\n const bgClasses = {\n dark: "bg-primary text-primary-foreground",\n light: "bg-muted text-foreground",\n gradient: "bg-gradient-to-br from-primary to-primary/80 text-primary-foreground",\n }\n\n const buttonClasses = {\n dark: {\n default: "bg-primary-foreground text-primary hover:bg-primary-foreground/90",\n outline: "border border-primary-foreground/30 text-primary-foreground hover:bg-primary-foreground/10",\n },\n light: {\n default: "bg-primary text-primary-foreground hover:bg-primary/90",\n outline: "border border-border hover:bg-background",\n },\n gradient: {\n default: "bg-background text-foreground hover:bg-background/90",\n outline: "border border-primary-foreground/30 text-primary-foreground hover:bg-primary-foreground/10",\n },\n }\n\n return (\n <section className={cn("py-16 md:py-24", bgClasses[style])}>\n <div className="container mx-auto px-4">\n <div className="max-w-3xl mx-auto text-center">\n <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-6">\n {headline}\n </h2>\n {subheading && (\n <p\n className={cn(\n "text-lg md:text-xl mb-8",\n style === "dark"\n ? "text-primary-foreground/80"\n : style === "gradient"\n ? "text-primary-foreground/80"\n : "text-muted-foreground"\n )}\n >\n {subheading}\n </p>\n )}\n\n {links && links.length > 0 && (\n <div className="flex flex-wrap gap-4 justify-center">\n {links.map((link) => (\n <Link\n key={link.href}\n href={link.href}\n className={cn(\n "inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md transition-colors",\n buttonClasses[style][link.variant]\n )}\n >\n {link.label}\n </Link>\n ))}\n </div>\n )}\n </div>\n </div>\n </section>\n )\n}\n',
|
|
2755
2952
|
"marketing/nextjs/src/components/blocks/IndustryTabs.tsx": `"use client"
|
|
2756
2953
|
|
|
2757
2954
|
import { useState } from "react"
|