kofi-stack-template-generator 2.1.59 → 2.1.61

package/templates/marketing/nextjs/components.json.hbs

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+{{#if (eq shadcn.style "nova")}}
+  "style": "new-york",
+{{else if (eq shadcn.style "vega")}}
+  "style": "default",
+{{else if (eq shadcn.style "maia")}}
+  "style": "new-york",
+{{else if (eq shadcn.style "lyra")}}
+  "style": "new-york",
+{{else if (eq shadcn.style "mira")}}
+  "style": "default",
+{{else}}
+  "style": "new-york",
+{{/if}}
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "{{shadcn.baseColor}}",
+    "cssVariables": true,
+    "prefix": ""
+  },
+{{#if (eq shadcn.iconLibrary "lucide")}}
+  "iconLibrary": "lucide",
+{{else if (eq shadcn.iconLibrary "hugeicons")}}
+  "iconLibrary": "lucide",
+{{else if (eq shadcn.iconLibrary "tabler")}}
+  "iconLibrary": "lucide",
+{{else if (eq shadcn.iconLibrary "phosphor")}}
+  "iconLibrary": "lucide",
+{{else}}
+  "iconLibrary": "lucide",
+{{/if}}
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

package/templates/marketing/nextjs/package.json.hbs

@@ -19,7 +19,8 @@
     "next-themes": "^0.4.4",
     "clsx": "^2.1.1",
     "tailwind-merge": "^2.6.0",
-    "class-variance-authority": "^0.7.1"
+    "class-variance-authority": "^0.7.1",
+    "tw-animate-css": "^1.3.0"
   },
   "devDependencies": {
     "@repo/config-typescript": "workspace:*",

package/templates/marketing/nextjs/src/app/about/page.tsx

@@ -0,0 +1,155 @@
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { LogoBanner, FinalCTA } from "@/components/blocks"
+import { Users, Target, Heart, Zap } from "lucide-react"
+
+const values = [
+  {
+    icon: <Users className="h-6 w-6" />,
+    title: "Customer First",
+    description:
+      "Every decision we make starts with our customers. Their success is our success.",
+  },
+  {
+    icon: <Target className="h-6 w-6" />,
+    title: "Simplicity Wins",
+    description:
+      "We believe powerful software doesn't have to be complicated. We obsess over making things simple.",
+  },
+  {
+    icon: <Heart className="h-6 w-6" />,
+    title: "Built with Care",
+    description:
+      "We sweat the details because we know they matter. Quality is never an accident.",
+  },
+  {
+    icon: <Zap className="h-6 w-6" />,
+    title: "Move Fast",
+    description:
+      "We ship early and often. Progress beats perfection when you're learning from real users.",
+  },
+]
+
+const stats = [
+  { value: "50K+", label: "Teams worldwide" },
+  { value: "180+", label: "Countries" },
+  { value: "99.9%", label: "Uptime" },
+  { value: "4.8/5", label: "Customer rating" },
+]
+
+export default function AboutPage() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+
+      <main className="flex-1">
+        {/* Hero */}
+        <section className="py-16 md:py-24">
+          <div className="container mx-auto px-4">
+            <div className="max-w-3xl mx-auto text-center">
+              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+                We're on a mission to help teams work better together
+              </h1>
+              <p className="text-xl text-muted-foreground">
+                SaaSify was founded in 2020 with a simple belief: work doesn't have to be
+                complicated. We're building the tools that help teams focus on what matters.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Stats */}
+        <section className="py-12 bg-muted/30">
+          <div className="container mx-auto px-4">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+              {stats.map((stat) => (
+                <div key={stat.label} className="text-center">
+                  <div className="text-4xl md:text-5xl font-bold text-primary mb-2">
+                    {stat.value}
+                  </div>
+                  <div className="text-muted-foreground">{stat.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Story */}
+        <section className="py-16 md:py-24">
+          <div className="container mx-auto px-4">
+            <div className="max-w-3xl mx-auto">
+              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-8 text-center">
+                Our story
+              </h2>
+              <div className="prose prose-lg max-w-none text-muted-foreground">
+                <p className="mb-6">
+                  It all started with a frustration we've all felt: too many tools, too many
+                  tabs, too much time wasted switching between them. We knew there had to be
+                  a better way.
+                </p>
+                <p className="mb-6">
+                  So we set out to build a platform that brings everything together—tasks,
+                  documents, communication, and automation—in one seamless experience. No more
+                  context switching. No more lost information. Just focused, productive work.
+                </p>
+                <p>
+                  Today, SaaSify is used by over 50,000 teams worldwide, from two-person
+                  startups to Fortune 500 companies. And we're just getting started.
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Values */}
+        <section className="py-16 md:py-24 bg-muted/30">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12 md:mb-16">
+              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+                Our values
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                These principles guide everything we do, from product decisions to how we
+                treat each other.
+              </p>
+            </div>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto">
+              {values.map((value) => (
+                <div
+                  key={value.title}
+                  className="bg-card rounded-lg border border-border p-6"
+                >
+                  <div className="w-12 h-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center mb-4">
+                    {value.icon}
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">{value.title}</h3>
+                  <p className="text-muted-foreground text-sm">{value.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Trusted By */}
+        <LogoBanner
+          heading="Trusted by teams at companies of all sizes"
+          style="scroll"
+        />
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Join us on our mission"
+          subheading="Start your free trial today and see why thousands of teams trust SaaSify."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "Contact us", href: "/contact", variant: "default" },
+          ]}
+        />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}

package/templates/marketing/nextjs/src/app/blog/[slug]/page.tsx

@@ -0,0 +1,181 @@
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { FinalCTA } from "@/components/blocks"
+import Link from "next/link"
+import { ArrowLeft, Calendar, Clock, User } from "lucide-react"
+
+// This is sample data - in a real app, you would fetch this from a CMS or MDX files
+const blogPosts: Record<string, {
+  title: string
+  description: string
+  content: string
+  date: string
+  author: string
+  readTime: string
+  category: string
+}> = {
+  "boost-team-productivity": {
+    title: "10 Ways to Boost Your Team's Productivity",
+    description: "Discover proven strategies to help your team work smarter, not harder.",
+    date: "January 15, 2025",
+    author: "Sarah Johnson",
+    readTime: "8 min read",
+    category: "Productivity",
+    content: `
+      <p>In today's fast-paced business environment, productivity isn't just about working harder—it's about working smarter. Here are 10 proven strategies to help your team achieve more while maintaining a healthy work-life balance.</p>
+
+      <h2>1. Set Clear Goals and Priorities</h2>
+      <p>Without clear direction, teams can easily get lost in busywork. Start each week by defining the top 3-5 priorities that will move the needle for your organization.</p>
+
+      <h2>2. Embrace Asynchronous Communication</h2>
+      <p>Not every message needs an immediate response. By embracing async communication, you give your team members uninterrupted blocks of time to focus on deep work.</p>
+
+      <h2>3. Automate Repetitive Tasks</h2>
+      <p>If your team is doing the same task more than twice, it's time to automate it. Modern tools make it easy to create workflows that handle routine work automatically.</p>
+
+      <h2>4. Hold Fewer, Better Meetings</h2>
+      <p>Before scheduling a meeting, ask yourself: "Could this be an email?" When meetings are necessary, have a clear agenda and stick to the allotted time.</p>
+
+      <h2>5. Invest in the Right Tools</h2>
+      <p>The right tools can multiply your team's effectiveness. Look for platforms that integrate well with each other to reduce context switching.</p>
+
+      <h2>6. Create a Culture of Documentation</h2>
+      <p>When knowledge lives only in people's heads, it creates bottlenecks. Document processes, decisions, and learnings so everyone can move faster independently.</p>
+
+      <h2>7. Encourage Regular Breaks</h2>
+      <p>Counterintuitive as it may seem, taking breaks actually improves productivity. The human brain needs rest to perform at its best.</p>
+
+      <h2>8. Provide Feedback Continuously</h2>
+      <p>Don't wait for annual reviews to give feedback. Regular, constructive feedback helps team members course-correct and grow continuously.</p>
+
+      <h2>9. Eliminate Unnecessary Approvals</h2>
+      <p>Too many approval steps slow teams down. Trust your people to make good decisions and only require sign-off when truly necessary.</p>
+
+      <h2>10. Celebrate Wins (Big and Small)</h2>
+      <p>Recognition fuels motivation. Take time to acknowledge achievements, whether it's closing a big deal or simply shipping a feature on time.</p>
+
+      <h2>Conclusion</h2>
+      <p>Improving productivity is an ongoing journey, not a destination. Start with one or two of these strategies, measure the impact, and keep iterating. Your team will thank you for it.</p>
+    `,
+  },
+}
+
+// Generate static params for static generation
+export function generateStaticParams() {
+  return Object.keys(blogPosts).map((slug) => ({
+    slug,
+  }))
+}
+
+export default async function BlogPostPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>
+}) {
+  const { slug } = await params
+  const post = blogPosts[slug]
+
+  // If post doesn't exist, show a placeholder
+  if (!post) {
+    return (
+      <div className="min-h-screen flex flex-col">
+        <Header />
+        <main className="flex-1">
+          <section className="py-16 md:py-24">
+            <div className="container mx-auto px-4 text-center">
+              <h1 className="text-4xl font-bold mb-4">Post Not Found</h1>
+              <p className="text-muted-foreground mb-8">
+                This blog post doesn&apos;t exist or has been removed.
+              </p>
+              <Link
+                href="/blog"
+                className="inline-flex items-center text-primary hover:underline"
+              >
+                <ArrowLeft className="h-4 w-4 mr-2" />
+                Back to blog
+              </Link>
+            </div>
+          </section>
+        </main>
+        <Footer />
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+
+      <main className="flex-1">
+        {/* Back Link */}
+        <section className="pt-8">
+          <div className="container mx-auto px-4">
+            <Link
+              href="/blog"
+              className="inline-flex items-center text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back to blog
+            </Link>
+          </div>
+        </section>
+
+        {/* Header */}
+        <section className="py-12 md:py-16">
+          <div className="container mx-auto px-4">
+            <div className="max-w-3xl mx-auto">
+              <div className="mb-6">
+                <span className="inline-block px-3 py-1 text-xs font-medium rounded-full bg-primary/10 text-primary">
+                  {post.category}
+                </span>
+              </div>
+              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+                {post.title}
+              </h1>
+              <p className="text-xl text-muted-foreground mb-8">
+                {post.description}
+              </p>
+              <div className="flex flex-wrap items-center gap-6 text-sm text-muted-foreground">
+                <div className="flex items-center gap-2">
+                  <User className="h-4 w-4" />
+                  {post.author}
+                </div>
+                <div className="flex items-center gap-2">
+                  <Calendar className="h-4 w-4" />
+                  {post.date}
+                </div>
+                <div className="flex items-center gap-2">
+                  <Clock className="h-4 w-4" />
+                  {post.readTime}
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Content */}
+        <section className="pb-16 md:pb-24">
+          <div className="container mx-auto px-4">
+            <div
+              className="max-w-3xl mx-auto prose prose-lg prose-gray dark:prose-invert"
+              dangerouslySetInnerHTML={{ __html: post.content }}
+            />
+          </div>
+        </section>
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Ready to transform how your team works?"
+          subheading="Start your free trial and see the difference SaaSify can make."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "View pricing", href: "/pricing", variant: "default" },
+          ]}
+        />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}

package/templates/marketing/nextjs/src/app/features/analytics/page.tsx

@@ -0,0 +1,140 @@
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { FinalCTA } from "@/components/blocks"
+import { BarChart3, TrendingUp, LineChart, PieChart, Target, Bell } from "lucide-react"
+
+const features = [
+  {
+    icon: <BarChart3 className="h-6 w-6" />,
+    title: "Real-Time Dashboards",
+    description:
+      "See your metrics update live. No more waiting for reports to refresh.",
+  },
+  {
+    icon: <TrendingUp className="h-6 w-6" />,
+    title: "Trend Analysis",
+    description:
+      "Spot patterns and trends before they become obvious. Make proactive decisions.",
+  },
+  {
+    icon: <LineChart className="h-6 w-6" />,
+    title: "Custom Reports",
+    description:
+      "Build reports that matter to your business. Export to PDF, Excel, or share live links.",
+  },
+  {
+    icon: <PieChart className="h-6 w-6" />,
+    title: "Team Performance",
+    description:
+      "Track productivity metrics across your team. Identify bottlenecks and opportunities.",
+  },
+  {
+    icon: <Target className="h-6 w-6" />,
+    title: "Goal Tracking",
+    description:
+      "Set targets and track progress in real-time. Keep your team focused on what matters.",
+  },
+  {
+    icon: <Bell className="h-6 w-6" />,
+    title: "Smart Alerts",
+    description:
+      "Get notified when metrics cross thresholds. Never miss an important change.",
+  },
+]
+
+export default function AnalyticsPage() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+
+      <main className="flex-1">
+        {/* Hero */}
+        <section className="py-16 md:py-24">
+          <div className="container mx-auto px-4">
+            <div className="max-w-3xl mx-auto text-center">
+              <div className="inline-block px-4 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6">
+                Analytics
+              </div>
+              <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+                Make decisions backed by real-time data
+              </h1>
+              <p className="text-xl text-muted-foreground mb-8">
+                Track every metric that matters. From team performance to customer insights, get the visibility you need to drive growth.
+              </p>
+              <div className="flex flex-wrap gap-4 justify-center">
+                <a
+                  href="/sign-up"
+                  className="inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+                >
+                  Start free trial
+                </a>
+                <a
+                  href="/demo"
+                  className="inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-md border border-border bg-background hover:bg-muted transition-colors"
+                >
+                  Watch demo
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Dashboard Preview */}
+        <section className="pb-16 md:pb-24">
+          <div className="container mx-auto px-4">
+            <div className="max-w-5xl mx-auto">
+              <div className="aspect-video bg-gradient-to-br from-primary/20 to-primary/5 rounded-lg border border-border flex items-center justify-center">
+                <div className="text-center text-muted-foreground">
+                  <BarChart3 className="h-16 w-16 mx-auto mb-4 opacity-50" />
+                  <p>Dashboard Preview</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Features Grid */}
+        <section className="py-16 md:py-24 bg-muted/30">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12 md:mb-16">
+              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+                Analytics that drive action
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                Everything you need to understand your data and make better decisions.
+              </p>
+            </div>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
+              {features.map((feature) => (
+                <div
+                  key={feature.title}
+                  className="bg-card rounded-lg border border-border p-6"
+                >
+                  <div className="w-12 h-12 rounded-lg bg-primary/10 text-primary flex items-center justify-center mb-4">
+                    {feature.icon}
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
+                  <p className="text-muted-foreground text-sm">{feature.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Ready to unlock insights?"
+          subheading="Start your free trial and see your data come to life."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "Book a demo", href: "/demo", variant: "default" },
+          ]}
+        />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}