kofi-stack-template-generator 2.1.55 → 2.1.57

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

@@ -0,0 +1,97 @@
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import Link from "next/link"
+
+const blogPosts = [
+  {
+    title: "10 Ways to Boost Your Team's Productivity",
+    description: "Discover proven strategies to help your team work smarter, not harder.",
+    date: "Jan 15, 2025",
+    category: "Productivity",
+    slug: "#",
+  },
+  {
+    title: "The Future of Remote Work: Trends for 2025",
+    description: "What's next for distributed teams? We explore the biggest trends shaping remote work.",
+    date: "Jan 12, 2025",
+    category: "Remote Work",
+    slug: "#",
+  },
+  {
+    title: "How to Build a Culture of Collaboration",
+    description: "Learn how leading companies foster collaboration and teamwork at scale.",
+    date: "Jan 8, 2025",
+    category: "Culture",
+    slug: "#",
+  },
+  {
+    title: "Automation Best Practices for Growing Teams",
+    description: "Stop doing repetitive tasks manually. Here's how to automate the right way.",
+    date: "Jan 5, 2025",
+    category: "Automation",
+    slug: "#",
+  },
+  {
+    title: "Getting Started with SaaSify: A Complete Guide",
+    description: "Everything you need to know to get your team up and running with SaaSify.",
+    date: "Jan 2, 2025",
+    category: "Getting Started",
+    slug: "#",
+  },
+  {
+    title: "Customer Success Stories: How Acme Corp Scaled 10x",
+    description: "Learn how Acme Corp used SaaSify to scale their operations while keeping their team lean.",
+    date: "Dec 28, 2024",
+    category: "Case Study",
+    slug: "#",
+  },
+]
+
+export default function BlogPage() {
+  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 text-center">
+            <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+              Blog
+            </h1>
+            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+              Insights, tips, and stories to help your team work better together.
+            </p>
+          </div>
+        </section>
+
+        {/* Blog Grid */}
+        <section className="pb-24">
+          <div className="container mx-auto px-4">
+            <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+              {blogPosts.map((post) => (
+                <article
+                  key={post.title}
+                  className="group rounded-lg border border-border bg-card p-6 transition-all hover:shadow-lg"
+                >
+                  <div className="mb-4">
+                    <span className="inline-block px-3 py-1 text-xs font-medium rounded-full bg-primary/10 text-primary">
+                      {post.category}
+                    </span>
+                  </div>
+                  <h2 className="text-xl font-semibold mb-2 group-hover:text-primary transition-colors">
+                    <Link href={post.slug}>{post.title}</Link>
+                  </h2>
+                  <p className="text-muted-foreground mb-4">{post.description}</p>
+                  <time className="text-sm text-muted-foreground">{post.date}</time>
+                </article>
+              ))}
+            </div>
+          </div>
+        </section>
+      </main>
+
+      <Footer />
+    </div>
+  )
+}

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

@@ -0,0 +1,108 @@
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import {
+  BentoFeatures,
+  FeatureShowcase,
+  LogoBanner,
+  FinalCTA,
+} from "@/components/blocks"
+
+export default function FeaturesPage() {
+  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 text-center">
+            <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+              Powerful features for modern teams
+            </h1>
+            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+              Everything you need to streamline workflows, boost productivity, and scale your business.
+            </p>
+          </div>
+        </section>
+
+        {/* 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: "Learn more", href: "#" }}
+          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 more", href: "#" }}
+          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: "Learn more", href: "#" }}
+          imagePosition="right"
+        />
+
+        {/* Logo Banner */}
+        <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" },
+          ]}
+        />
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Ready to transform how your team works?"
+          subheading="Start your free trial today. No credit card required."
+          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/globals.css.hbs

@@ -559,21 +559,24 @@
 
 .hero-showcase {
 	position: relative;
-	border-radius: 12px;
+	border-radius: 1rem;
 	overflow: hidden;
-	padding: 3rem;
-	min-height: 500px;
+	height: 25rem;
+	width: 100%;
+	max-width: 75rem;
+	margin: 0 auto;
+	background: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 70%, black) 100%);
 }
 
 @media (min-width: 768px) {
 	.hero-showcase {
-		min-height: 600px;
+		height: 31.25rem;
 	}
 }
 
 @media (min-width: 1024px) {
 	.hero-showcase {
-		min-height: 700px;
+		height: 37.5rem;
 	}
 }
 
@@ -581,6 +584,7 @@
 	position: absolute;
 	inset: 0;
 	z-index: 0;
+	opacity: 0.1;
 }
 
 .hero-bg-image img {
@@ -593,20 +597,16 @@
 .hero-mockup-centered {
 	position: relative;
 	z-index: 10;
-	max-width: 800px;
-	margin: 0 auto;
-	width: 100%;
+	padding: 2rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
 }
 
 @media (min-width: 768px) {
 	.hero-mockup-centered {
-		max-width: 900px;
-	}
-}
-
-@media (min-width: 1024px) {
-	.hero-mockup-centered {
-		max-width: 1000px;
+		padding: 3rem;
 	}
 }
 

package/templates/marketing/nextjs/src/app/{page.tsx.hbs → page.tsx}

@@ -46,12 +46,10 @@ export default function HomePage() {
         />
 
         {/* Bento Features */}
-        <section id="features">
-          <BentoFeatures
-            heading="Discover what SaaSify can do"
-            subheading="Everything you need to work smarter and scale faster"
-          />
-        </section>
+        <BentoFeatures
+          heading="Discover what SaaSify can do"
+          subheading="Everything you need to work smarter and scale faster"
+        />
 
         {/* Feature Showcase: Integrations */}
         <FeatureShowcase
@@ -64,7 +62,7 @@ export default function HomePage() {
             { text: "Custom webhooks" },
             { text: "API access included" },
           ]}
-          link={{ label: "Explore integrations", href: "/features/integrations" }}
+          link={{ label: "Explore integrations", href: "/features" }}
           imagePosition="right"
         />
 
@@ -79,7 +77,7 @@ export default function HomePage() {
             { text: "Team performance metrics" },
             { text: "Automated insights" },
           ]}
-          link={{ label: "Learn about analytics", href: "/features/analytics" }}
+          link={{ label: "Learn about analytics", href: "/features" }}
           imagePosition="left"
         />
 
@@ -94,7 +92,7 @@ export default function HomePage() {
             { text: "Scheduled triggers" },
             { text: "Cross-app automation" },
           ]}
-          link={{ label: "See automation features", href: "/features/automation" }}
+          link={{ label: "See automation features", href: "/features" }}
           imagePosition="right"
         />
 
@@ -120,12 +118,10 @@ export default function HomePage() {
         />
 
         {/* Testimonials */}
-        <section id="testimonials">
-          <TestimonialsGrid
-            heading="Loved by teams at companies of all sizes"
-            subheading="See how leading teams use SaaSify to drive growth and productivity."
-          />
-        </section>
+        <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 />
@@ -145,12 +141,10 @@ export default function HomePage() {
         />
 
         {/* Pricing */}
-        <section id="pricing">
-          <PricingTable
-            heading="Simple, transparent pricing"
-            subheading="Start free, upgrade as your team grows. No hidden fees."
-          />
-        </section>
+        <PricingTable
+          heading="Simple, transparent pricing"
+          subheading="Start free, upgrade as your team grows. No hidden fees."
+        />
 
         {/* Final CTA */}
         <FinalCTA

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

@@ -0,0 +1,44 @@
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { PricingTable, FinalCTA } from "@/components/blocks"
+
+export default function PricingPage() {
+  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 text-center">
+            <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+              Simple, transparent pricing
+            </h1>
+            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+              Start free, upgrade as your team grows. No hidden fees, no surprises.
+            </p>
+          </div>
+        </section>
+
+        {/* Pricing Table */}
+        <PricingTable
+          heading=""
+          subheading=""
+        />
+
+        {/* Final CTA */}
+        <FinalCTA
+          headline="Ready to get started?"
+          subheading="Join thousands of teams who chose the smarter way to work."
+          style="dark"
+          links={[
+            { label: "Start free trial", href: "/sign-up", variant: "outline" },
+            { label: "Contact sales", href: "/contact", variant: "default" },
+          ]}
+        />
+      </main>
+
+      <Footer />
+    </div>
+  )
+}

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

@@ -0,0 +1,64 @@
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+
+export default function PrivacyPage() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+
+      <main className="flex-1">
+        <article className="py-16 md:py-24">
+          <div className="container mx-auto px-4 max-w-3xl">
+            <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+              Privacy Policy
+            </h1>
+            <p className="text-muted-foreground mb-8">
+              Last updated: January 1, 2025
+            </p>
+
+            <div className="prose prose-neutral dark:prose-invert max-w-none">
+              <h2 className="text-2xl font-semibold mt-8 mb-4">Introduction</h2>
+              <p className="text-muted-foreground mb-4">
+                At SaaSify, we take your privacy seriously. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our service.
+              </p>
+
+              <h2 className="text-2xl font-semibold mt-8 mb-4">Information We Collect</h2>
+              <p className="text-muted-foreground mb-4">
+                We collect information you provide directly to us, such as when you create an account, make a purchase, or contact us for support.
+              </p>
+              <ul className="list-disc pl-6 text-muted-foreground mb-4 space-y-2">
+                <li>Account information (name, email, password)</li>
+                <li>Payment information (processed securely by our payment providers)</li>
+                <li>Usage data and analytics</li>
+                <li>Communications with our support team</li>
+              </ul>
+
+              <h2 className="text-2xl font-semibold mt-8 mb-4">How We Use Your Information</h2>
+              <p className="text-muted-foreground mb-4">
+                We use the information we collect to:
+              </p>
+              <ul className="list-disc pl-6 text-muted-foreground mb-4 space-y-2">
+                <li>Provide, maintain, and improve our services</li>
+                <li>Process transactions and send related information</li>
+                <li>Send you technical notices, updates, and support messages</li>
+                <li>Respond to your comments, questions, and requests</li>
+              </ul>
+
+              <h2 className="text-2xl font-semibold mt-8 mb-4">Data Security</h2>
+              <p className="text-muted-foreground mb-4">
+                We implement appropriate technical and organizational measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction.
+              </p>
+
+              <h2 className="text-2xl font-semibold mt-8 mb-4">Contact Us</h2>
+              <p className="text-muted-foreground mb-4">
+                If you have any questions about this Privacy Policy, please contact us at privacy@saasify.com.
+              </p>
+            </div>
+          </div>
+        </article>
+      </main>
+
+      <Footer />
+    </div>
+  )
+}

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

@@ -0,0 +1,68 @@
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+
+export default function TermsPage() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+
+      <main className="flex-1">
+        <article className="py-16 md:py-24">
+          <div className="container mx-auto px-4 max-w-3xl">
+            <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+              Terms of Service
+            </h1>
+            <p className="text-muted-foreground mb-8">
+              Last updated: January 1, 2025
+            </p>
+
+            <div className="prose prose-neutral dark:prose-invert max-w-none">
+              <h2 className="text-2xl font-semibold mt-8 mb-4">Agreement to Terms</h2>
+              <p className="text-muted-foreground mb-4">
+                By accessing or using SaaSify, you agree to be bound by these Terms of Service. If you disagree with any part of the terms, you may not access the service.
+              </p>
+
+              <h2 className="text-2xl font-semibold mt-8 mb-4">Use License</h2>
+              <p className="text-muted-foreground mb-4">
+                Subject to your compliance with these Terms, we grant you a limited, non-exclusive, non-transferable license to access and use our service for your internal business purposes.
+              </p>
+
+              <h2 className="text-2xl font-semibold mt-8 mb-4">User Accounts</h2>
+              <p className="text-muted-foreground mb-4">
+                When you create an account with us, you must provide accurate, complete, and current information. You are responsible for safeguarding your account credentials and for all activities that occur under your account.
+              </p>
+
+              <h2 className="text-2xl font-semibold mt-8 mb-4">Prohibited Uses</h2>
+              <p className="text-muted-foreground mb-4">
+                You may not use our service:
+              </p>
+              <ul className="list-disc pl-6 text-muted-foreground mb-4 space-y-2">
+                <li>For any unlawful purpose or to promote illegal activities</li>
+                <li>To violate any applicable laws or regulations</li>
+                <li>To infringe upon the rights of others</li>
+                <li>To interfere with or disrupt the service or servers</li>
+              </ul>
+
+              <h2 className="text-2xl font-semibold mt-8 mb-4">Payment Terms</h2>
+              <p className="text-muted-foreground mb-4">
+                Paid subscriptions are billed in advance on a monthly or annual basis. You agree to pay all fees associated with your subscription plan.
+              </p>
+
+              <h2 className="text-2xl font-semibold mt-8 mb-4">Limitation of Liability</h2>
+              <p className="text-muted-foreground mb-4">
+                In no event shall SaaSify be liable for any indirect, incidental, special, consequential, or punitive damages arising out of or related to your use of the service.
+              </p>
+
+              <h2 className="text-2xl font-semibold mt-8 mb-4">Contact Us</h2>
+              <p className="text-muted-foreground mb-4">
+                If you have any questions about these Terms, please contact us at legal@saasify.com.
+              </p>
+            </div>
+          </div>
+        </article>
+      </main>
+
+      <Footer />
+    </div>
+  )
+}

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

@@ -4,27 +4,27 @@ import Link from "next/link"
 import { Logo } from "@/components/Logo"
 import { ThemeSelector } from "@/components/ThemeSelector"
 
-// Footer navigation structure - using anchor links for landing page
+// Footer navigation structure
 const footerColumns = [
   {
     title: "Product",
     links: [
       { label: "Home", href: "/" },
-      { label: "Features", href: "#features" },
-      { label: "Pricing", href: "#pricing" },
+      { label: "Features", href: "/features" },
+      { label: "Pricing", href: "/pricing" },
     ],
   },
   {
     title: "Resources",
     links: [
-      { label: "Testimonials", href: "#testimonials" },
+      { label: "Blog", href: "/blog" },
     ],
   },
   {
     title: "Legal",
     links: [
-      { label: "Privacy", href: "#" },
-      { label: "Terms", href: "#" },
+      { label: "Privacy", href: "/privacy" },
+      { label: "Terms", href: "/terms" },
     ],
   },
 ]
@@ -75,12 +75,12 @@ export function Footer() {
               <ul className="space-y-3">
                 {column.links.map((link) => (
                   <li key={link.label}>
-                    <a
+                    <Link
                       href={link.href}
                       className="text-sm text-muted-foreground transition-colors hover:text-foreground"
                     >
                       {link.label}
-                    </a>
+                    </Link>
                   </li>
                 ))}
               </ul>

package/templates/marketing/nextjs/src/components/Header/MobileMenu.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useState } from "react"
+import Link from "next/link"
 import { Menu, X } from "lucide-react"
 import { cn } from "@/lib/utils"
 
@@ -33,20 +34,20 @@ export function MobileMenu({ navLinks, ctaLinks }: MobileMenuProps) {
           <nav className="overflow-y-auto max-h-[calc(100vh-4rem)]">
             {/* Navigation links */}
             {navLinks.map((link) => (
-              <a
+              <Link
                 key={link.href}
                 href={link.href}
                 className="flex items-center px-4 py-3 text-sm font-medium border-b border-border hover:bg-muted"
                 onClick={handleClose}
               >
                 {link.label}
-              </a>
+              </Link>
             ))}
 
             {/* CTA links */}
             <div className="p-4 space-y-2">
               {ctaLinks.map((link) => (
-                <a
+                <Link
                   key={link.label}
                   href={link.href}
                   className={cn(
@@ -58,7 +59,7 @@ export function MobileMenu({ navLinks, ctaLinks }: MobileMenuProps) {
                   onClick={handleClose}
                 >
                   {link.label}
-                </a>
+                </Link>
               ))}
             </div>
           </nav>