npm - kofi-stack-template-generator - Versions diffs - 2.1.51 → 2.1.53 - Mend

kofi-stack-template-generator 2.1.51 → 2.1.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

package/templates/marketing/nextjs/src/app/layout.tsx.hbs CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next'
 import { Geist, Geist_Mono } from 'next/font/google'
+import { ThemeProvider } from '@/components/ThemeProvider'
 import './globals.css'
 const geistSans = Geist({
@@ -13,8 +14,14 @@ const geistMono = Geist_Mono({
 })
 export const metadata: Metadata = {
-  title: '{{projectName}} - Marketing',
-  description: 'Marketing site for {{projectName}}',
+  title: 'SaaSify - The modern platform for growing teams',
+  description: 'Transform your workflow with our all-in-one platform. Streamline operations, boost productivity, and scale your business with powerful tools designed for modern teams.',
+  keywords: ['SaaS', 'productivity', 'workflow', 'automation', 'team collaboration'],
+  openGraph: {
+    title: 'SaaSify - The modern platform for growing teams',
+    description: 'Transform your workflow with our all-in-one platform.',
+    type: 'website',
+  },
 }
 export default function RootLayout({
@@ -23,9 +30,16 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        {children}
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   )

package/templates/marketing/nextjs/src/app/page.tsx.hbs CHANGED Viewed

@@ -1,168 +1,164 @@
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { ProductShowcaseHero } from "@/components/heros"
+import {
+  LogoBanner,
+  ProofBanner,
+  BentoFeatures,
+  FeatureShowcase,
+  IndustryTabs,
+  TestimonialsGrid,
+  TrustColumns,
+  PricingTable,
+  FinalCTA,
+} from "@/components/blocks"
 export default function HomePage() {
   return (
-    <main className="min-h-screen">
-      {/* Navigation */}
-      <nav className="sticky top-0 z-50 w-full border-b border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm">
-        <div className="container mx-auto px-4">
-          <div className="flex h-16 items-center justify-between">
-            <div className="flex items-center gap-2">
-              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gray-900 dark:bg-white">
-                <svg className="h-4 w-4 text-white dark:text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-                </svg>
-              </div>
-              <span className="font-semibold text-gray-900 dark:text-white">{{projectName}}</span>
-            </div>
-            <div className="hidden md:flex items-center gap-6">
-              <a href="#features" className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors">
-                Features
-              </a>
-              <a href="#" className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors">
-                Pricing
-              </a>
-              <a href="#" className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors">
-                Docs
-              </a>
-            </div>
-            <div className="flex items-center gap-4">
-              <a
-                href="/sign-in"
-                className="text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors"
-              >
-                Sign in
-              </a>
-              <a
-                href="/sign-up"
-                className="rounded-lg bg-gray-900 dark:bg-white px-4 py-2 text-sm font-medium text-white dark:text-gray-900 hover:opacity-90 transition-opacity"
-              >
-                Get Started
-              </a>
-            </div>
-          </div>
-        </div>
-      </nav>
-      {/* Hero Section */}
-      <section className="relative overflow-hidden bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800">
-        <div className="container mx-auto px-4 py-24 sm:py-32">
-          <div className="text-center">
-            <h1 className="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl">
-              Welcome to {{projectName}}
-            </h1>
-            <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
-              A modern full-stack application built with Next.js, Convex, and Better-Auth.
-            </p>
-            <div className="mt-10 flex items-center justify-center gap-x-6">
-              <a
-                href="/app"
-                className="rounded-lg bg-gray-900 dark:bg-white px-6 py-3 text-sm font-semibold text-white dark:text-gray-900 shadow-sm hover:opacity-90 transition-opacity"
-              >
-                Get Started
-              </a>
-              <a
-                href="#features"
-                className="text-sm font-semibold leading-6 text-gray-900 dark:text-white"
-              >
-                Learn more <span aria-hidden="true">→</span>
-              </a>
-            </div>
-          </div>
-        </div>
-      </section>
-      {/* Features Section */}
-      <section id="features" className="py-24 sm:py-32">
-        <div className="container mx-auto px-4">
-          <div className="text-center mb-16">
-            <h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
-              Everything you need
-            </h2>
-            <p className="mt-4 text-lg text-gray-600 dark:text-gray-300">
-              Built with the best tools for modern web development
-            </p>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            <div className="p-6 rounded-xl border border-gray-200 dark:border-gray-700">
-              <div className="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center mb-4">
-                <svg className="w-6 h-6 text-gray-900 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-                </svg>
-              </div>
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
-                Lightning Fast
-              </h3>
-              <p className="text-gray-600 dark:text-gray-300">
-                Built on Next.js with Turbopack for instant hot reload and optimized production builds.
-              </p>
-            </div>
-            <div className="p-6 rounded-xl border border-gray-200 dark:border-gray-700">
-              <div className="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center mb-4">
-                <svg className="w-6 h-6 text-gray-900 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
-                </svg>
-              </div>
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
-                Real-time Database
-              </h3>
-              <p className="text-gray-600 dark:text-gray-300">
-                Powered by Convex for automatic real-time sync and type-safe queries.
-              </p>
-            </div>
-            <div className="p-6 rounded-xl border border-gray-200 dark:border-gray-700">
-              <div className="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center mb-4">
-                <svg className="w-6 h-6 text-gray-900 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                </svg>
-              </div>
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
-                Secure Auth
-              </h3>
-              <p className="text-gray-600 dark:text-gray-300">
-                Better-Auth provides secure, flexible authentication with social login support.
-              </p>
-            </div>
-          </div>
-        </div>
-      </section>
-      {/* CTA Section */}
-      <section className="py-24 sm:py-32 bg-gray-900 dark:bg-gray-800">
-        <div className="container mx-auto px-4 text-center">
-          <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
-            Ready to get started?
-          </h2>
-          <p className="mt-4 text-lg text-gray-300 max-w-2xl mx-auto">
-            Start building your next project with our full-stack template.
-          </p>
-          <div className="mt-10">
-            <a
-              href="/app"
-              className="rounded-lg bg-white px-6 py-3 text-sm font-semibold text-gray-900 shadow-sm hover:opacity-90 transition-opacity"
-            >
-              Launch App
-            </a>
-          </div>
-        </div>
-      </section>
-      {/* Footer */}
-      <footer className="border-t border-gray-200 dark:border-gray-700">
-        <div className="container mx-auto px-4 py-12">
-          <div className="text-center text-gray-600 dark:text-gray-300">
-            <p>
-              Built with{' '}
-              <a
-                href="https://github.com/theodenanyoh11/create-kofi-stack"
-                className="text-gray-900 dark:text-white hover:underline"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                create-kofi-stack
-              </a>
-            </p>
-          </div>
-        </div>
-      </footer>
-    </main>
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <main className="flex-1">
+        {/* Hero Section */}
+        <ProductShowcaseHero
+          headline="The modern platform for growing teams"
+          description="Streamline workflows, boost productivity, and scale your business with one powerful platform."
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "default" },
+            { label: "Watch demo", href: "/demo", variant: "outline" },
+          ]}
+        />
+        {/* Logo Banner - Social proof */}
+        <LogoBanner
+          heading="Trusted by fast-growing companies everywhere"
+          style="scroll"
+        />
+        {/* Value Proposition */}
+        <ProofBanner
+          headline="Transform how your team works, collaborates, and grows"
+          subtext="Every interaction feeds into a powerful platform that powers personalized experiences, seamless collaboration, and intelligent automation across every touchpoint."
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "default" },
+            { label: "Book a demo", href: "/contact", variant: "outline" },
+          ]}
+        />
+        {/* Bento Features */}
+        <BentoFeatures
+          heading="Discover what SaaSify can do"
+          subheading="Everything you need to work smarter and scale faster"
+        />
+        {/* Feature Showcase: Integrations */}
+        <FeatureShowcase
+          label="Seamless Integrations"
+          headline="Connect everything your team uses in one place"
+          description="Integrate with 100+ popular tools including Slack, Salesforce, HubSpot, and more. Two-way sync keeps everything up to date automatically."
+          features={[
+            { text: "100+ native integrations" },
+            { text: "Two-way data sync" },
+            { text: "Custom webhooks" },
+            { text: "API access included" },
+          ]}
+          link={{ label: "Explore integrations", href: "/features/integrations" }}
+          imagePosition="right"
+        />
+        {/* Feature Showcase: Analytics */}
+        <FeatureShowcase
+          label="Actionable Analytics"
+          headline="Make decisions backed by real-time data"
+          description="Track every metric that matters. From team performance to customer insights, get the visibility you need to drive growth."
+          features={[
+            { text: "Real-time dashboards" },
+            { text: "Custom reports" },
+            { text: "Team performance metrics" },
+            { text: "Automated insights" },
+          ]}
+          link={{ label: "Learn about analytics", href: "/features/analytics" }}
+          imagePosition="left"
+        />
+        {/* Feature Showcase: Automation */}
+        <FeatureShowcase
+          label="Workflow Automation"
+          headline="Eliminate busywork with smart automation"
+          description="Build powerful workflows without code. Automate approvals, notifications, data entry, and more to focus on what matters."
+          features={[
+            { text: "Visual workflow builder" },
+            { text: "Conditional logic" },
+            { text: "Scheduled triggers" },
+            { text: "Cross-app automation" },
+          ]}
+          link={{ label: "See automation features", href: "/features/automation" }}
+          imagePosition="right"
+        />
+        {/* Feature Showcase: Collaboration */}
+        <FeatureShowcase
+          label="Team Collaboration"
+          headline="Work together seamlessly, from anywhere"
+          description="Real-time collaboration features keep everyone aligned. Share workspaces, leave comments, and track activity across your entire team."
+          features={[
+            { text: "Real-time collaboration" },
+            { text: "Shared workspaces" },
+            { text: "Comments and mentions" },
+            { text: "Activity tracking" },
+          ]}
+          link={{ label: "Explore collaboration", href: "/features" }}
+          imagePosition="left"
+        />
+        {/* Industry Tabs */}
+        <IndustryTabs
+          heading="Solutions that deliver real results"
+          subheading="Whether you're in sales, marketing, or product, SaaSify adapts to how your team works."
+        />
+        {/* Testimonials */}
+        <TestimonialsGrid
+          heading="Loved by teams at companies of all sizes"
+          subheading="See how leading teams use SaaSify to drive growth and productivity."
+        />
+        {/* Trust Columns */}
+        <TrustColumns />
+        {/* Second Logo Banner - Integrations */}
+        <LogoBanner
+          heading="Integrates with your favorite tools"
+          style="grid"
+          logos={[
+            { name: "Slack", initials: "SL" },
+            { name: "Salesforce", initials: "SF" },
+            { name: "HubSpot", initials: "HS" },
+            { name: "Google Workspace", initials: "GW" },
+            { name: "Zapier", initials: "ZP" },
+            { name: "Jira", initials: "JI" },
+          ]}
+        />
+        {/* Pricing */}
+        <PricingTable
+          heading="Simple, transparent pricing"
+          subheading="Start free, upgrade as your team grows. No hidden fees."
+        />
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Ready to transform how your team works?"
+          subheading="Join thousands of teams who chose the smarter way to work. Start free, upgrade as you grow."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "Book a demo", href: "/contact", variant: "default" },
+          ]}
+        />
+      </main>
+      <Footer />
+    </div>
   )
 }

package/templates/marketing/nextjs/src/components/Footer/index.tsx ADDED Viewed

@@ -0,0 +1,188 @@
+"use client"
+import Link from "next/link"
+import { Logo } from "@/components/Logo"
+import { ThemeSelector } from "@/components/ThemeSelector"
+import { cn } from "@/lib/utils"
+// Footer navigation structure matching SaaSify
+const footerColumns = [
+  {
+    title: "Product",
+    links: [
+      { label: "Home", href: "/" },
+      { label: "Pricing", href: "/pricing" },
+      { label: "Integrations", href: "/features/integrations" },
+    ],
+  },
+  {
+    title: "Resources",
+    links: [
+      { label: "Blog", href: "/blog" },
+      { label: "Documentation", href: "/docs" },
+    ],
+  },
+  {
+    title: "Company",
+    links: [
+      { label: "About", href: "/about" },
+    ],
+  },
+  {
+    title: "Legal",
+    links: [
+      { label: "Privacy", href: "/privacy" },
+      { label: "Terms", href: "/terms" },
+    ],
+  },
+]
+const socialLinks = {
+  twitter: "https://x.com/saasify",
+  linkedin: "https://linkedin.com/company/saasify",
+  github: "https://github.com/saasify",
+}
+const bottomLinks = [
+  { label: "Contact Support", href: "/support" },
+]
+// Social icons as inline SVGs
+const SocialIcons = {
+  twitter: (
+    <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+      <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" />
+    </svg>
+  ),
+  linkedin: (
+    <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+      <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" />
+    </svg>
+  ),
+  github: (
+    <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+      <path
+        fillRule="evenodd"
+        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"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+}
+export function Footer() {
+  const currentYear = new Date().getFullYear()
+  return (
+    <footer className="mt-auto border-t border-border bg-background">
+      {/* Main Footer Content */}
+      <div className="container mx-auto px-4 py-12 lg:py-16">
+        <div className="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-6">
+          {/* Link Columns */}
+          {footerColumns.map((column) => (
+            <div key={column.title} className="col-span-1">
+              <h3 className="mb-4 text-sm font-medium text-foreground">
+                {column.title}
+              </h3>
+              <ul className="space-y-3">
+                {column.links.map((link) => (
+                  <li key={link.href}>
+                    <Link
+                      href={link.href}
+                      className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+                    >
+                      {link.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+          {/* Newsletter Column */}
+          <div className="col-span-2 md:col-span-3 lg:col-span-2">
+            <h3 className="mb-4 text-sm font-medium text-foreground">
+              Newsletter
+            </h3>
+            <p className="mb-4 text-sm text-muted-foreground">
+              Get product updates, tips, and insights delivered weekly.
+            </p>
+            <form className="flex gap-2">
+              <input
+                type="email"
+                placeholder="Enter your email"
+                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"
+              />
+              <button
+                type="submit"
+                className="px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90"
+              >
+                Subscribe
+              </button>
+            </form>
+          </div>
+        </div>
+        {/* Social Links */}
+        <div className="mt-10 flex items-center gap-4 border-t border-border pt-8">
+          <a
+            href={socialLinks.twitter}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-muted-foreground transition-colors hover:text-foreground"
+            aria-label="X (Twitter)"
+          >
+            {SocialIcons.twitter}
+          </a>
+          <a
+            href={socialLinks.linkedin}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-muted-foreground transition-colors hover:text-foreground"
+            aria-label="LinkedIn"
+          >
+            {SocialIcons.linkedin}
+          </a>
+          <a
+            href={socialLinks.github}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-muted-foreground transition-colors hover:text-foreground"
+            aria-label="GitHub"
+          >
+            {SocialIcons.github}
+          </a>
+        </div>
+      </div>
+      {/* Bottom Bar */}
+      <div className="border-t border-border">
+        <div className="container mx-auto flex flex-col items-center justify-between gap-4 px-4 py-6 sm:flex-row">
+          {/* Logo and Copyright */}
+          <div className="flex items-center gap-4">
+            <Link href="/" className="flex items-center">
+              <Logo className="h-6 w-6" />
+            </Link>
+            <p className="text-sm text-muted-foreground">
+              © {currentYear} SaaSify
+            </p>
+          </div>
+          {/* Bottom Links and Theme Selector */}
+          <div className="flex items-center gap-6">
+            {bottomLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+              >
+                {link.label}
+              </Link>
+            ))}
+            <ThemeSelector />
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}