kofi-stack-template-generator 2.1.54 → 2.1.55
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 +5 -5
- package/dist/index.js +51 -271
- package/package.json +2 -2
- package/src/templates.generated.ts +10 -10
- package/templates/marketing/astro/src/components/Footer.astro +9 -27
- package/templates/marketing/astro/src/components/Header.astro +9 -241
- package/templates/marketing/astro/src/pages/index.astro +18 -12
- package/templates/marketing/astro/src/styles/globals.css.hbs +824 -0
- package/templates/marketing/nextjs/src/app/globals.css.hbs +824 -0
- package/templates/marketing/nextjs/src/app/page.tsx.hbs +18 -12
- package/templates/marketing/nextjs/src/components/Footer/index.tsx +12 -33
- package/templates/marketing/nextjs/src/components/Header/MobileMenu.tsx +8 -117
- package/templates/marketing/nextjs/src/components/Header/index.tsx +14 -105
package/dist/index.js
CHANGED
|
@@ -1196,57 +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\nconst footerColumns = [\n {\n title: "Product",\n links: [\n { label: "Home", href: "/" },\n { label: "
|
|
1199
|
+
"marketing/astro/src/components/Footer.astro": '---\nimport Logo from "./Logo.astro"\nimport ThemeSelector from "./ThemeSelector.astro"\n\n// Footer navigation structure - using anchor links for landing page\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: "Testimonials", href: "#testimonials" },\n ],\n },\n {\n title: "Legal",\n links: [\n { label: "Privacy", href: "#" },\n { label: "Terms", href: "#" },\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
|
-
import {
|
|
1203
|
-
|
|
1204
|
-
// Navigation data structure matching SaaSify
|
|
1205
|
-
const productMenu = {
|
|
1206
|
-
label: "Product",
|
|
1207
|
-
columns: [
|
|
1208
|
-
{
|
|
1209
|
-
title: "Core Features",
|
|
1210
|
-
items: [
|
|
1211
|
-
{ label: "Integrations", description: "Connect with 100+ tools you already use", href: "/features/integrations", icon: "layout" },
|
|
1212
|
-
{ label: "Analytics", description: "Real-time insights and reporting dashboards", href: "/features/analytics", icon: "barChart" },
|
|
1213
|
-
{ label: "Security", description: "Enterprise-grade protection and compliance", href: "/features/security", icon: "shield" },
|
|
1214
|
-
],
|
|
1215
|
-
},
|
|
1216
|
-
{
|
|
1217
|
-
title: "Productivity",
|
|
1218
|
-
items: [
|
|
1219
|
-
{ label: "Dashboard", description: "Unified command center for your team", href: "/features/dashboard", icon: "layout" },
|
|
1220
|
-
{ label: "Automation", description: "Streamline repetitive tasks instantly", href: "/features/automation", icon: "zap" },
|
|
1221
|
-
{ label: "Workflows", description: "Build custom processes without code", href: "/features/workflows", icon: "layers" },
|
|
1222
|
-
],
|
|
1223
|
-
},
|
|
1224
|
-
],
|
|
1225
|
-
}
|
|
1226
|
-
|
|
1227
|
-
const solutionsMenu = {
|
|
1228
|
-
label: "Solutions",
|
|
1229
|
-
columns: [
|
|
1230
|
-
{
|
|
1231
|
-
title: "By Team",
|
|
1232
|
-
items: [
|
|
1233
|
-
{ label: "Sales Teams", description: "Close deals faster with smart tools", href: "/use-cases/sales", icon: "target" },
|
|
1234
|
-
{ label: "Marketing Teams", description: "Launch campaigns that convert", href: "/use-cases/marketing", icon: "rocket" },
|
|
1235
|
-
{ label: "Product Teams", description: "Ship features users love", href: "/use-cases/product", icon: "layers" },
|
|
1236
|
-
{ label: "Operations", description: "Scale without the growing pains", href: "/use-cases/operations", icon: "settings" },
|
|
1237
|
-
],
|
|
1238
|
-
},
|
|
1239
|
-
],
|
|
1240
|
-
}
|
|
1202
|
+
import { Menu, X } from "lucide-astro"
|
|
1241
1203
|
|
|
1204
|
+
// Simplified navigation for landing page
|
|
1242
1205
|
const navLinks = [
|
|
1243
|
-
{ label: "
|
|
1244
|
-
{ label: "
|
|
1206
|
+
{ label: "Features", href: "#features" },
|
|
1207
|
+
{ label: "Testimonials", href: "#testimonials" },
|
|
1208
|
+
{ label: "Pricing", href: "#pricing" },
|
|
1245
1209
|
]
|
|
1246
1210
|
|
|
1247
1211
|
const ctaLinks = [
|
|
1248
|
-
{ label: "Sign In", href: "
|
|
1249
|
-
{ label: "Get Started", href: "
|
|
1212
|
+
{ label: "Sign In", href: "#", variant: "ghost" },
|
|
1213
|
+
{ label: "Get Started", href: "#pricing", variant: "default" },
|
|
1250
1214
|
]
|
|
1251
1215
|
---
|
|
1252
1216
|
|
|
@@ -1261,97 +1225,6 @@ const ctaLinks = [
|
|
|
1261
1225
|
|
|
1262
1226
|
<!-- Desktop navigation -->
|
|
1263
1227
|
<nav class="hidden lg:flex items-center gap-1">
|
|
1264
|
-
<!-- Product Menu -->
|
|
1265
|
-
<div class="mega-menu-trigger relative" data-menu="product">
|
|
1266
|
-
<button
|
|
1267
|
-
type="button"
|
|
1268
|
-
class="flex items-center gap-1 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
|
|
1269
|
-
>
|
|
1270
|
-
{productMenu.label}
|
|
1271
|
-
<ChevronDown class="h-4 w-4 transition-transform mega-chevron" />
|
|
1272
|
-
</button>
|
|
1273
|
-
<div class="mega-menu-dropdown absolute left-0 top-full pt-2 opacity-0 -translate-y-2 pointer-events-none transition-all">
|
|
1274
|
-
<div class="bg-background border border-border rounded-lg shadow-lg p-6 min-w-[480px]">
|
|
1275
|
-
<div class="grid gap-8 grid-cols-2">
|
|
1276
|
-
{productMenu.columns.map((column) => (
|
|
1277
|
-
<div>
|
|
1278
|
-
<h3 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-4">
|
|
1279
|
-
{column.title}
|
|
1280
|
-
</h3>
|
|
1281
|
-
<ul class="space-y-1">
|
|
1282
|
-
{column.items.map((item) => (
|
|
1283
|
-
<li>
|
|
1284
|
-
<a
|
|
1285
|
-
href={item.href}
|
|
1286
|
-
class="flex items-start gap-3 p-3 rounded-lg hover:bg-muted transition-colors group"
|
|
1287
|
-
>
|
|
1288
|
-
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted group-hover:bg-background">
|
|
1289
|
-
{item.icon === "layout" && <Layout class="h-5 w-5 text-primary" />}
|
|
1290
|
-
{item.icon === "barChart" && <BarChart3 class="h-5 w-5 text-primary" />}
|
|
1291
|
-
{item.icon === "shield" && <Shield class="h-5 w-5 text-primary" />}
|
|
1292
|
-
{item.icon === "zap" && <Zap class="h-5 w-5 text-primary" />}
|
|
1293
|
-
{item.icon === "layers" && <Layers class="h-5 w-5 text-primary" />}
|
|
1294
|
-
</div>
|
|
1295
|
-
<div>
|
|
1296
|
-
<div class="text-sm font-medium text-foreground">{item.label}</div>
|
|
1297
|
-
<div class="text-xs text-muted-foreground mt-0.5">{item.description}</div>
|
|
1298
|
-
</div>
|
|
1299
|
-
</a>
|
|
1300
|
-
</li>
|
|
1301
|
-
))}
|
|
1302
|
-
</ul>
|
|
1303
|
-
</div>
|
|
1304
|
-
))}
|
|
1305
|
-
</div>
|
|
1306
|
-
</div>
|
|
1307
|
-
</div>
|
|
1308
|
-
</div>
|
|
1309
|
-
|
|
1310
|
-
<!-- Solutions Menu -->
|
|
1311
|
-
<div class="mega-menu-trigger relative" data-menu="solutions">
|
|
1312
|
-
<button
|
|
1313
|
-
type="button"
|
|
1314
|
-
class="flex items-center gap-1 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
|
|
1315
|
-
>
|
|
1316
|
-
{solutionsMenu.label}
|
|
1317
|
-
<ChevronDown class="h-4 w-4 transition-transform mega-chevron" />
|
|
1318
|
-
</button>
|
|
1319
|
-
<div class="mega-menu-dropdown absolute left-0 top-full pt-2 opacity-0 -translate-y-2 pointer-events-none transition-all">
|
|
1320
|
-
<div class="bg-background border border-border rounded-lg shadow-lg p-6 min-w-[320px]">
|
|
1321
|
-
<div class="grid gap-8 grid-cols-1">
|
|
1322
|
-
{solutionsMenu.columns.map((column) => (
|
|
1323
|
-
<div>
|
|
1324
|
-
<h3 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-4">
|
|
1325
|
-
{column.title}
|
|
1326
|
-
</h3>
|
|
1327
|
-
<ul class="space-y-1">
|
|
1328
|
-
{column.items.map((item) => (
|
|
1329
|
-
<li>
|
|
1330
|
-
<a
|
|
1331
|
-
href={item.href}
|
|
1332
|
-
class="flex items-start gap-3 p-3 rounded-lg hover:bg-muted transition-colors group"
|
|
1333
|
-
>
|
|
1334
|
-
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted group-hover:bg-background">
|
|
1335
|
-
{item.icon === "target" && <Target class="h-5 w-5 text-primary" />}
|
|
1336
|
-
{item.icon === "rocket" && <Rocket class="h-5 w-5 text-primary" />}
|
|
1337
|
-
{item.icon === "layers" && <Layers class="h-5 w-5 text-primary" />}
|
|
1338
|
-
{item.icon === "settings" && <Settings class="h-5 w-5 text-primary" />}
|
|
1339
|
-
</div>
|
|
1340
|
-
<div>
|
|
1341
|
-
<div class="text-sm font-medium text-foreground">{item.label}</div>
|
|
1342
|
-
<div class="text-xs text-muted-foreground mt-0.5">{item.description}</div>
|
|
1343
|
-
</div>
|
|
1344
|
-
</a>
|
|
1345
|
-
</li>
|
|
1346
|
-
))}
|
|
1347
|
-
</ul>
|
|
1348
|
-
</div>
|
|
1349
|
-
))}
|
|
1350
|
-
</div>
|
|
1351
|
-
</div>
|
|
1352
|
-
</div>
|
|
1353
|
-
</div>
|
|
1354
|
-
|
|
1355
1228
|
{navLinks.map((link) => (
|
|
1356
1229
|
<a
|
|
1357
1230
|
href={link.href}
|
|
@@ -1384,7 +1257,7 @@ const ctaLinks = [
|
|
|
1384
1257
|
|
|
1385
1258
|
<!-- Mobile: Primary CTA + Hamburger -->
|
|
1386
1259
|
<a
|
|
1387
|
-
href="
|
|
1260
|
+
href="#pricing"
|
|
1388
1261
|
class="lg:hidden px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90"
|
|
1389
1262
|
>
|
|
1390
1263
|
Get Started
|
|
@@ -1406,74 +1279,7 @@ const ctaLinks = [
|
|
|
1406
1279
|
<!-- Mobile Menu Overlay -->
|
|
1407
1280
|
<div id="mobile-menu" class="fixed inset-0 top-16 z-50 bg-background hidden lg:hidden">
|
|
1408
1281
|
<nav class="overflow-y-auto max-h-[calc(100vh-4rem)]">
|
|
1409
|
-
<!--
|
|
1410
|
-
<div class="mobile-section border-b border-border" data-section="product">
|
|
1411
|
-
<button
|
|
1412
|
-
type="button"
|
|
1413
|
-
class="flex items-center justify-between w-full px-4 py-3 text-sm font-medium"
|
|
1414
|
-
>
|
|
1415
|
-
Product
|
|
1416
|
-
<ChevronDown class="h-4 w-4 transition-transform section-chevron" />
|
|
1417
|
-
</button>
|
|
1418
|
-
<div class="mobile-section-content hidden px-4 pb-4 space-y-4">
|
|
1419
|
-
{productMenu.columns.map((column) => (
|
|
1420
|
-
<div>
|
|
1421
|
-
<h4 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
|
|
1422
|
-
{column.title}
|
|
1423
|
-
</h4>
|
|
1424
|
-
<ul class="space-y-1">
|
|
1425
|
-
{column.items.map((item) => (
|
|
1426
|
-
<li>
|
|
1427
|
-
<a href={item.href} class="flex items-center gap-3 p-2 rounded-lg hover:bg-muted">
|
|
1428
|
-
{item.icon === "layout" && <Layout class="h-4 w-4 text-primary" />}
|
|
1429
|
-
{item.icon === "barChart" && <BarChart3 class="h-4 w-4 text-primary" />}
|
|
1430
|
-
{item.icon === "shield" && <Shield class="h-4 w-4 text-primary" />}
|
|
1431
|
-
{item.icon === "zap" && <Zap class="h-4 w-4 text-primary" />}
|
|
1432
|
-
{item.icon === "layers" && <Layers class="h-4 w-4 text-primary" />}
|
|
1433
|
-
<span class="text-sm">{item.label}</span>
|
|
1434
|
-
</a>
|
|
1435
|
-
</li>
|
|
1436
|
-
))}
|
|
1437
|
-
</ul>
|
|
1438
|
-
</div>
|
|
1439
|
-
))}
|
|
1440
|
-
</div>
|
|
1441
|
-
</div>
|
|
1442
|
-
|
|
1443
|
-
<!-- Solutions Section -->
|
|
1444
|
-
<div class="mobile-section border-b border-border" data-section="solutions">
|
|
1445
|
-
<button
|
|
1446
|
-
type="button"
|
|
1447
|
-
class="flex items-center justify-between w-full px-4 py-3 text-sm font-medium"
|
|
1448
|
-
>
|
|
1449
|
-
Solutions
|
|
1450
|
-
<ChevronDown class="h-4 w-4 transition-transform section-chevron" />
|
|
1451
|
-
</button>
|
|
1452
|
-
<div class="mobile-section-content hidden px-4 pb-4 space-y-4">
|
|
1453
|
-
{solutionsMenu.columns.map((column) => (
|
|
1454
|
-
<div>
|
|
1455
|
-
<h4 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
|
|
1456
|
-
{column.title}
|
|
1457
|
-
</h4>
|
|
1458
|
-
<ul class="space-y-1">
|
|
1459
|
-
{column.items.map((item) => (
|
|
1460
|
-
<li>
|
|
1461
|
-
<a href={item.href} class="flex items-center gap-3 p-2 rounded-lg hover:bg-muted">
|
|
1462
|
-
{item.icon === "target" && <Target class="h-4 w-4 text-primary" />}
|
|
1463
|
-
{item.icon === "rocket" && <Rocket class="h-4 w-4 text-primary" />}
|
|
1464
|
-
{item.icon === "layers" && <Layers class="h-4 w-4 text-primary" />}
|
|
1465
|
-
{item.icon === "settings" && <Settings class="h-4 w-4 text-primary" />}
|
|
1466
|
-
<span class="text-sm">{item.label}</span>
|
|
1467
|
-
</a>
|
|
1468
|
-
</li>
|
|
1469
|
-
))}
|
|
1470
|
-
</ul>
|
|
1471
|
-
</div>
|
|
1472
|
-
))}
|
|
1473
|
-
</div>
|
|
1474
|
-
</div>
|
|
1475
|
-
|
|
1476
|
-
<!-- Simple nav links -->
|
|
1282
|
+
<!-- Navigation links -->
|
|
1477
1283
|
{navLinks.map((link) => (
|
|
1478
1284
|
<a
|
|
1479
1285
|
href={link.href}
|
|
@@ -1504,25 +1310,6 @@ const ctaLinks = [
|
|
|
1504
1310
|
|
|
1505
1311
|
<script>
|
|
1506
1312
|
function initHeader() {
|
|
1507
|
-
// Desktop mega menu
|
|
1508
|
-
const megaMenuTriggers = document.querySelectorAll('.mega-menu-trigger')
|
|
1509
|
-
megaMenuTriggers.forEach((trigger) => {
|
|
1510
|
-
const dropdown = trigger.querySelector('.mega-menu-dropdown')
|
|
1511
|
-
const chevron = trigger.querySelector('.mega-chevron')
|
|
1512
|
-
|
|
1513
|
-
trigger.addEventListener('mouseenter', () => {
|
|
1514
|
-
dropdown?.classList.remove('opacity-0', '-translate-y-2', 'pointer-events-none')
|
|
1515
|
-
dropdown?.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto')
|
|
1516
|
-
chevron?.classList.add('rotate-180')
|
|
1517
|
-
})
|
|
1518
|
-
|
|
1519
|
-
trigger.addEventListener('mouseleave', () => {
|
|
1520
|
-
dropdown?.classList.add('opacity-0', '-translate-y-2', 'pointer-events-none')
|
|
1521
|
-
dropdown?.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto')
|
|
1522
|
-
chevron?.classList.remove('rotate-180')
|
|
1523
|
-
})
|
|
1524
|
-
})
|
|
1525
|
-
|
|
1526
1313
|
// Mobile menu toggle
|
|
1527
1314
|
const mobileToggle = document.getElementById('mobile-menu-toggle')
|
|
1528
1315
|
const mobileMenu = document.getElementById('mobile-menu')
|
|
@@ -1542,25 +1329,6 @@ const ctaLinks = [
|
|
|
1542
1329
|
}
|
|
1543
1330
|
})
|
|
1544
1331
|
|
|
1545
|
-
// Mobile sections toggle
|
|
1546
|
-
const mobileSections = document.querySelectorAll('.mobile-section')
|
|
1547
|
-
mobileSections.forEach((section) => {
|
|
1548
|
-
const button = section.querySelector('button')
|
|
1549
|
-
const content = section.querySelector('.mobile-section-content')
|
|
1550
|
-
const chevron = section.querySelector('.section-chevron')
|
|
1551
|
-
|
|
1552
|
-
button?.addEventListener('click', () => {
|
|
1553
|
-
const isOpen = !content?.classList.contains('hidden')
|
|
1554
|
-
if (isOpen) {
|
|
1555
|
-
content?.classList.add('hidden')
|
|
1556
|
-
chevron?.classList.remove('rotate-180')
|
|
1557
|
-
} else {
|
|
1558
|
-
content?.classList.remove('hidden')
|
|
1559
|
-
chevron?.classList.add('rotate-180')
|
|
1560
|
-
}
|
|
1561
|
-
})
|
|
1562
|
-
})
|
|
1563
|
-
|
|
1564
1332
|
// Close mobile menu on link click
|
|
1565
1333
|
const mobileLinks = mobileMenu?.querySelectorAll('a')
|
|
1566
1334
|
mobileLinks?.forEach((link) => {
|
|
@@ -2628,10 +2396,12 @@ import FinalCTA from "../components/blocks/FinalCTA.astro"
|
|
|
2628
2396
|
/>
|
|
2629
2397
|
|
|
2630
2398
|
<!-- Bento Features -->
|
|
2631
|
-
<
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2399
|
+
<section id="features">
|
|
2400
|
+
<BentoFeatures
|
|
2401
|
+
heading="Discover what SaaSify can do"
|
|
2402
|
+
subheading="Everything you need to work smarter and scale faster"
|
|
2403
|
+
/>
|
|
2404
|
+
</section>
|
|
2635
2405
|
|
|
2636
2406
|
<!-- Feature Showcase: Integrations -->
|
|
2637
2407
|
<FeatureShowcase
|
|
@@ -2700,10 +2470,12 @@ import FinalCTA from "../components/blocks/FinalCTA.astro"
|
|
|
2700
2470
|
/>
|
|
2701
2471
|
|
|
2702
2472
|
<!-- Testimonials -->
|
|
2703
|
-
<
|
|
2704
|
-
|
|
2705
|
-
|
|
2706
|
-
|
|
2473
|
+
<section id="testimonials">
|
|
2474
|
+
<TestimonialsGrid
|
|
2475
|
+
heading="Loved by teams at companies of all sizes"
|
|
2476
|
+
subheading="See how leading teams use SaaSify to drive growth and productivity."
|
|
2477
|
+
/>
|
|
2478
|
+
</section>
|
|
2707
2479
|
|
|
2708
2480
|
<!-- Trust Columns -->
|
|
2709
2481
|
<TrustColumns />
|
|
@@ -2723,10 +2495,12 @@ import FinalCTA from "../components/blocks/FinalCTA.astro"
|
|
|
2723
2495
|
/>
|
|
2724
2496
|
|
|
2725
2497
|
<!-- Pricing -->
|
|
2726
|
-
<
|
|
2727
|
-
|
|
2728
|
-
|
|
2729
|
-
|
|
2498
|
+
<section id="pricing">
|
|
2499
|
+
<PricingTable
|
|
2500
|
+
heading="Simple, transparent pricing"
|
|
2501
|
+
subheading="Start free, upgrade as your team grows. No hidden fees."
|
|
2502
|
+
/>
|
|
2503
|
+
</section>
|
|
2730
2504
|
|
|
2731
2505
|
<!-- Final CTA -->
|
|
2732
2506
|
<FinalCTA
|
|
@@ -2744,12 +2518,12 @@ import FinalCTA from "../components/blocks/FinalCTA.astro"
|
|
|
2744
2518
|
</div>
|
|
2745
2519
|
</Layout>
|
|
2746
2520
|
`,
|
|
2747
|
-
"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',
|
|
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',
|
|
2748
2522
|
"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',
|
|
2749
2523
|
"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",
|
|
2750
2524
|
"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',
|
|
2751
2525
|
"marketing/nextjs/postcss.config.mjs.hbs": "export default {\n plugins: {\n '@tailwindcss/postcss': {},\n },\n}\n",
|
|
2752
|
-
"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',
|
|
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',
|
|
2753
2527
|
"marketing/nextjs/src/app/layout.tsx.hbs": `import type { Metadata } from 'next'
|
|
2754
2528
|
import { Geist, Geist_Mono } from 'next/font/google'
|
|
2755
2529
|
import { ThemeProvider } from '@/components/ThemeProvider'
|
|
@@ -2845,10 +2619,12 @@ export default function HomePage() {
|
|
|
2845
2619
|
/>
|
|
2846
2620
|
|
|
2847
2621
|
{/* Bento Features */}
|
|
2848
|
-
<
|
|
2849
|
-
|
|
2850
|
-
|
|
2851
|
-
|
|
2622
|
+
<section id="features">
|
|
2623
|
+
<BentoFeatures
|
|
2624
|
+
heading="Discover what SaaSify can do"
|
|
2625
|
+
subheading="Everything you need to work smarter and scale faster"
|
|
2626
|
+
/>
|
|
2627
|
+
</section>
|
|
2852
2628
|
|
|
2853
2629
|
{/* Feature Showcase: Integrations */}
|
|
2854
2630
|
<FeatureShowcase
|
|
@@ -2917,10 +2693,12 @@ export default function HomePage() {
|
|
|
2917
2693
|
/>
|
|
2918
2694
|
|
|
2919
2695
|
{/* Testimonials */}
|
|
2920
|
-
<
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2696
|
+
<section id="testimonials">
|
|
2697
|
+
<TestimonialsGrid
|
|
2698
|
+
heading="Loved by teams at companies of all sizes"
|
|
2699
|
+
subheading="See how leading teams use SaaSify to drive growth and productivity."
|
|
2700
|
+
/>
|
|
2701
|
+
</section>
|
|
2924
2702
|
|
|
2925
2703
|
{/* Trust Columns */}
|
|
2926
2704
|
<TrustColumns />
|
|
@@ -2940,10 +2718,12 @@ export default function HomePage() {
|
|
|
2940
2718
|
/>
|
|
2941
2719
|
|
|
2942
2720
|
{/* Pricing */}
|
|
2943
|
-
<
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2721
|
+
<section id="pricing">
|
|
2722
|
+
<PricingTable
|
|
2723
|
+
heading="Simple, transparent pricing"
|
|
2724
|
+
subheading="Start free, upgrade as your team grows. No hidden fees."
|
|
2725
|
+
/>
|
|
2726
|
+
</section>
|
|
2947
2727
|
|
|
2948
2728
|
{/* Final CTA */}
|
|
2949
2729
|
<FinalCTA
|
|
@@ -2962,10 +2742,10 @@ export default function HomePage() {
|
|
|
2962
2742
|
)
|
|
2963
2743
|
}
|
|
2964
2744
|
`,
|
|
2965
|
-
"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"\
|
|
2745
|
+
"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 - using anchor links for landing page\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: "Testimonials", href: "#testimonials" },\n ],\n },\n {\n title: "Legal",\n links: [\n { label: "Privacy", href: "#" },\n { label: "Terms", href: "#" },\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 <a\n href={link.href}\n className="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 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',
|
|
2966
2746
|
"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',
|
|
2967
|
-
"marketing/nextjs/src/components/Header/MobileMenu.tsx": '"use client"\n\nimport { useState } from "react"\nimport
|
|
2968
|
-
"marketing/nextjs/src/components/Header/index.tsx": '"use client"\n\nimport Link from "next/link"\nimport { Logo } from "@/components/Logo"\nimport {
|
|
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 <a\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 </a>\n ))}\n\n {/* CTA links */}\n <div className="p-4 space-y-2">\n {ctaLinks.map((link) => (\n <a\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 </a>\n ))}\n </div>\n </nav>\n </div>\n )}\n </div>\n )\n}\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// Simplified navigation for landing page\nconst navLinks = [\n { label: "Features", href: "#features" },\n { label: "Testimonials", href: "#testimonials" },\n { label: "Pricing", href: "#pricing" },\n]\n\nconst ctaLinks = [\n { label: "Sign In", href: "#", 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 <a\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 </a>\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 <a\n key={link.label}\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 </a>\n ))}\n </div>\n\n {/* Mobile: Primary CTA + Hamburger */}\n <a\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 </a>\n\n <MobileMenu\n navLinks={navLinks}\n ctaLinks={ctaLinks}\n />\n </div>\n </div>\n </header>\n )\n}\n',
|
|
2969
2749
|
"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',
|
|
2970
2750
|
"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',
|
|
2971
2751
|
"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',
|