kofi-stack-template-generator 2.1.54 → 2.1.55

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

@@ -46,10 +46,12 @@ export default function HomePage() {
         />
 
         {/* Bento Features */}
-        <BentoFeatures
-          heading="Discover what SaaSify can do"
-          subheading="Everything you need to work smarter and scale faster"
-        />
+        <section id="features">
+          <BentoFeatures
+            heading="Discover what SaaSify can do"
+            subheading="Everything you need to work smarter and scale faster"
+          />
+        </section>
 
         {/* Feature Showcase: Integrations */}
         <FeatureShowcase
@@ -118,10 +120,12 @@ export default function HomePage() {
         />
 
         {/* Testimonials */}
-        <TestimonialsGrid
-          heading="Loved by teams at companies of all sizes"
-          subheading="See how leading teams use SaaSify to drive growth and productivity."
-        />
+        <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>
 
         {/* Trust Columns */}
         <TrustColumns />
@@ -141,10 +145,12 @@ export default function HomePage() {
         />
 
         {/* Pricing */}
-        <PricingTable
-          heading="Simple, transparent pricing"
-          subheading="Start free, upgrade as your team grows. No hidden fees."
-        />
+        <section id="pricing">
+          <PricingTable
+            heading="Simple, transparent pricing"
+            subheading="Start free, upgrade as your team grows. No hidden fees."
+          />
+        </section>
 
         {/* Final CTA */}
         <FinalCTA

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

@@ -3,36 +3,28 @@
 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
+// Footer navigation structure - using anchor links for landing page
 const footerColumns = [
   {
     title: "Product",
     links: [
       { label: "Home", href: "/" },
-      { label: "Pricing", href: "/pricing" },
-      { label: "Integrations", href: "/features/integrations" },
+      { label: "Features", href: "#features" },
+      { label: "Pricing", href: "#pricing" },
     ],
   },
   {
     title: "Resources",
     links: [
-      { label: "Blog", href: "/blog" },
-      { label: "Documentation", href: "/docs" },
-    ],
-  },
-  {
-    title: "Company",
-    links: [
-      { label: "About", href: "/about" },
+      { label: "Testimonials", href: "#testimonials" },
     ],
   },
   {
     title: "Legal",
     links: [
-      { label: "Privacy", href: "/privacy" },
-      { label: "Terms", href: "/terms" },
+      { label: "Privacy", href: "#" },
+      { label: "Terms", href: "#" },
     ],
   },
 ]
@@ -43,10 +35,6 @@ const socialLinks = {
   github: "https://github.com/saasify",
 }
 
-const bottomLinks = [
-  { label: "Contact Support", href: "/support" },
-]
-
 // Social icons as inline SVGs
 const SocialIcons = {
   twitter: (
@@ -77,7 +65,7 @@ export function Footer() {
     <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">
+        <div className="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-5">
           {/* Link Columns */}
           {footerColumns.map((column) => (
             <div key={column.title} className="col-span-1">
@@ -86,13 +74,13 @@ export function Footer() {
               </h3>
               <ul className="space-y-3">
                 {column.links.map((link) => (
-                  <li key={link.href}>
-                    <Link
+                  <li key={link.label}>
+                    <a
                       href={link.href}
                       className="text-sm text-muted-foreground transition-colors hover:text-foreground"
                     >
                       {link.label}
-                    </Link>
+                    </a>
                   </li>
                 ))}
               </ul>
@@ -100,7 +88,7 @@ export function Footer() {
           ))}
 
           {/* Newsletter Column */}
-          <div className="col-span-2 md:col-span-3 lg:col-span-2">
+          <div className="col-span-2">
             <h3 className="mb-4 text-sm font-medium text-foreground">
               Newsletter
             </h3>
@@ -168,17 +156,8 @@ export function Footer() {
             </p>
           </div>
 
-          {/* Bottom Links and Theme Selector */}
+          {/* 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>

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

@@ -1,111 +1,19 @@
 "use client"
 
 import { useState } from "react"
-import Link from "next/link"
-import { Menu, X, ChevronDown, Layout, BarChart3, Shield, Zap, Layers, Target, Rocket, Settings } from "lucide-react"
+import { Menu, X } from "lucide-react"
 import { cn } from "@/lib/utils"
 
-interface MenuItem {
-  label: string
-  description: string
-  href: string
-  icon: string
-}
-
-interface MenuColumn {
-  title: string
-  items: MenuItem[]
-}
-
 interface MobileMenuProps {
-  productMenu: {
-    label: string
-    columns: MenuColumn[]
-  }
-  solutionsMenu: {
-    label: string
-    columns: MenuColumn[]
-  }
   navLinks: { label: string; href: string }[]
   ctaLinks: { label: string; href: string; variant: "default" | "ghost" }[]
 }
 
-const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
-  layout: Layout,
-  barChart: BarChart3,
-  shield: Shield,
-  zap: Zap,
-  layers: Layers,
-  target: Target,
-  rocket: Rocket,
-  settings: Settings,
-}
-
-function MobileMenuSection({
-  menu,
-  isOpen,
-  onToggle,
-  onClose,
-}: {
-  menu: { label: string; columns: MenuColumn[] }
-  isOpen: boolean
-  onToggle: () => void
-  onClose: () => void
-}) {
-  return (
-    <div className="border-b border-border">
-      <button
-        type="button"
-        className="flex items-center justify-between w-full px-4 py-3 text-sm font-medium"
-        onClick={onToggle}
-      >
-        {menu.label}
-        <ChevronDown
-          className={cn(
-            "h-4 w-4 transition-transform",
-            isOpen && "rotate-180"
-          )}
-        />
-      </button>
-      {isOpen && (
-        <div className="px-4 pb-4 space-y-4">
-          {menu.columns.map((column) => (
-            <div key={column.title}>
-              <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-                {column.title}
-              </h4>
-              <ul className="space-y-1">
-                {column.items.map((item) => {
-                  const Icon = iconMap[item.icon] || Layout
-                  return (
-                    <li key={item.href}>
-                      <Link
-                        href={item.href}
-                        className="flex items-center gap-3 p-2 rounded-lg hover:bg-muted"
-                        onClick={onClose}
-                      >
-                        <Icon className="h-4 w-4 text-primary" />
-                        <span className="text-sm">{item.label}</span>
-                      </Link>
-                    </li>
-                  )
-                })}
-              </ul>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export function MobileMenu({ productMenu, solutionsMenu, navLinks, ctaLinks }: MobileMenuProps) {
+export function MobileMenu({ navLinks, ctaLinks }: MobileMenuProps) {
   const [isOpen, setIsOpen] = useState(false)
-  const [openSection, setOpenSection] = useState<string | null>(null)
 
   const handleClose = () => {
     setIsOpen(false)
-    setOpenSection(null)
   }
 
   return (
@@ -123,40 +31,23 @@ export function MobileMenu({ productMenu, solutionsMenu, navLinks, ctaLinks }: M
       {isOpen && (
         <div className="fixed inset-0 top-16 z-50 bg-background">
           <nav className="overflow-y-auto max-h-[calc(100vh-4rem)]">
-            <MobileMenuSection
-              menu={productMenu}
-              isOpen={openSection === "product"}
-              onToggle={() =>
-                setOpenSection(openSection === "product" ? null : "product")
-              }
-              onClose={handleClose}
-            />
-            <MobileMenuSection
-              menu={solutionsMenu}
-              isOpen={openSection === "solutions"}
-              onToggle={() =>
-                setOpenSection(openSection === "solutions" ? null : "solutions")
-              }
-              onClose={handleClose}
-            />
-
-            {/* Simple nav links */}
+            {/* Navigation links */}
             {navLinks.map((link) => (
-              <Link
+              <a
                 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}
-              </Link>
+              </a>
             ))}
 
             {/* CTA links */}
             <div className="p-4 space-y-2">
               {ctaLinks.map((link) => (
-                <Link
-                  key={link.href}
+                <a
+                  key={link.label}
                   href={link.href}
                   className={cn(
                     "flex items-center justify-center w-full px-4 py-3 text-sm font-medium rounded-md transition-colors",
@@ -167,7 +58,7 @@ export function MobileMenu({ productMenu, solutionsMenu, navLinks, ctaLinks }: M
                   onClick={handleClose}
                 >
                   {link.label}
-                </Link>
+                </a>
               ))}
             </div>
           </nav>

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

@@ -2,106 +2,19 @@
 
 import Link from "next/link"
 import { Logo } from "@/components/Logo"
-import { MegaMenu } from "./MegaMenu"
 import { MobileMenu } from "./MobileMenu"
 import { cn } from "@/lib/utils"
 
-// Navigation data structure matching SaaSify
-const productMenu = {
-  label: "Product",
-  columns: [
-    {
-      title: "Core Features",
-      items: [
-        {
-          label: "Integrations",
-          description: "Connect with 100+ tools you already use",
-          href: "/features/integrations",
-          icon: "layout",
-        },
-        {
-          label: "Analytics",
-          description: "Real-time insights and reporting dashboards",
-          href: "/features/analytics",
-          icon: "barChart",
-        },
-        {
-          label: "Security",
-          description: "Enterprise-grade protection and compliance",
-          href: "/features/security",
-          icon: "shield",
-        },
-      ],
-    },
-    {
-      title: "Productivity",
-      items: [
-        {
-          label: "Dashboard",
-          description: "Unified command center for your team",
-          href: "/features/dashboard",
-          icon: "layout",
-        },
-        {
-          label: "Automation",
-          description: "Streamline repetitive tasks instantly",
-          href: "/features/automation",
-          icon: "zap",
-        },
-        {
-          label: "Workflows",
-          description: "Build custom processes without code",
-          href: "/features/workflows",
-          icon: "layers",
-        },
-      ],
-    },
-  ],
-}
-
-const solutionsMenu = {
-  label: "Solutions",
-  columns: [
-    {
-      title: "By Team",
-      items: [
-        {
-          label: "Sales Teams",
-          description: "Close deals faster with smart tools",
-          href: "/use-cases/sales",
-          icon: "target",
-        },
-        {
-          label: "Marketing Teams",
-          description: "Launch campaigns that convert",
-          href: "/use-cases/marketing",
-          icon: "rocket",
-        },
-        {
-          label: "Product Teams",
-          description: "Ship features users love",
-          href: "/use-cases/product",
-          icon: "layers",
-        },
-        {
-          label: "Operations",
-          description: "Scale without the growing pains",
-          href: "/use-cases/operations",
-          icon: "settings",
-        },
-      ],
-    },
-  ],
-}
-
+// Simplified navigation for landing page
 const navLinks = [
-  { label: "Pricing", href: "/pricing" },
-  { label: "Blog", href: "/blog" },
+  { label: "Features", href: "#features" },
+  { label: "Testimonials", href: "#testimonials" },
+  { label: "Pricing", href: "#pricing" },
 ]
 
 const ctaLinks = [
-  { label: "Sign In", href: "/sign-in", variant: "ghost" as const },
-  { label: "Get Started", href: "/sign-up", variant: "default" as const },
+  { label: "Sign In", href: "#", variant: "ghost" as const },
+  { label: "Get Started", href: "#pricing", variant: "default" as const },
 ]
 
 export function Header() {
@@ -117,16 +30,14 @@ export function Header() {
 
           {/* Desktop navigation */}
           <nav className="hidden lg:flex items-center gap-1">
-            <MegaMenu menu={productMenu} />
-            <MegaMenu menu={solutionsMenu} />
             {navLinks.map((link) => (
-              <Link
+              <a
                 key={link.href}
                 href={link.href}
                 className="px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
               >
                 {link.label}
-              </Link>
+              </a>
             ))}
           </nav>
         </div>
@@ -136,8 +47,8 @@ export function Header() {
           {/* Desktop CTAs */}
           <div className="hidden lg:flex items-center gap-3">
             {ctaLinks.map((link) => (
-              <Link
-                key={link.href}
+              <a
+                key={link.label}
                 href={link.href}
                 className={cn(
                   "px-4 py-2 text-sm font-medium rounded-md transition-colors",
@@ -147,21 +58,19 @@ export function Header() {
                 )}
               >
                 {link.label}
-              </Link>
+              </a>
             ))}
           </div>
 
           {/* Mobile: Primary CTA + Hamburger */}
-          <Link
-            href="/sign-up"
+          <a
+            href="#pricing"
             className="lg:hidden px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90"
           >
             Get Started
-          </Link>
+          </a>
 
           <MobileMenu
-            productMenu={productMenu}
-            solutionsMenu={solutionsMenu}
             navLinks={navLinks}
             ctaLinks={ctaLinks}
           />