kofi-stack-template-generator 2.1.54 → 2.1.55

package/templates/marketing/astro/src/components/Footer.astro

@@ -2,33 +2,27 @@
 import Logo from "./Logo.astro"
 import ThemeSelector from "./ThemeSelector.astro"
 
+// 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: "#" },
     ],
   },
 ]
@@ -39,17 +33,13 @@ const socialLinks = {
   github: "https://github.com/saasify",
 }
 
-const bottomLinks = [
-  { label: "Contact Support", href: "/support" },
-]
-
 const currentYear = new Date().getFullYear()
 ---
 
 <footer class="mt-auto border-t border-border bg-background">
   <!-- Main Footer Content -->
   <div class="container mx-auto px-4 py-12 lg:py-16">
-    <div class="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-6">
+    <div class="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-5">
       <!-- Link Columns -->
       {footerColumns.map((column) => (
         <div class="col-span-1">
@@ -72,7 +62,7 @@ const currentYear = new Date().getFullYear()
       ))}
 
       <!-- Newsletter Column -->
-      <div class="col-span-2 md:col-span-3 lg:col-span-2">
+      <div class="col-span-2">
         <h3 class="mb-4 text-sm font-medium text-foreground">
           Newsletter
         </h3>
@@ -150,16 +140,8 @@ const currentYear = new Date().getFullYear()
         </p>
       </div>
 
-      <!-- Bottom Links and Theme Selector -->
+      <!-- Theme Selector -->
       <div class="flex items-center gap-6">
-        {bottomLinks.map((link) => (
-          <a
-            href={link.href}
-            class="text-sm text-muted-foreground transition-colors hover:text-foreground"
-          >
-            {link.label}
-          </a>
-        ))}
         <ThemeSelector />
       </div>
     </div>

package/templates/marketing/astro/src/components/Header.astro

@@ -1,53 +1,17 @@
 ---
 import Logo from "./Logo.astro"
-import { ChevronDown, Menu, X, Layout, BarChart3, Shield, Zap, Layers, Target, Rocket, Settings } from "lucide-astro"
-
-// 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" },
-      ],
-    },
-  ],
-}
+import { Menu, X } from "lucide-astro"
 
+// 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" },
-  { label: "Get Started", href: "/sign-up", variant: "default" },
+  { label: "Sign In", href: "#", variant: "ghost" },
+  { label: "Get Started", href: "#pricing", variant: "default" },
 ]
 ---
 
@@ -62,97 +26,6 @@ const ctaLinks = [
 
       <!-- Desktop navigation -->
       <nav class="hidden lg:flex items-center gap-1">
-        <!-- Product Menu -->
-        <div class="mega-menu-trigger relative" data-menu="product">
-          <button
-            type="button"
-            class="flex items-center gap-1 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
-          >
-            {productMenu.label}
-            <ChevronDown class="h-4 w-4 transition-transform mega-chevron" />
-          </button>
-          <div class="mega-menu-dropdown absolute left-0 top-full pt-2 opacity-0 -translate-y-2 pointer-events-none transition-all">
-            <div class="bg-background border border-border rounded-lg shadow-lg p-6 min-w-[480px]">
-              <div class="grid gap-8 grid-cols-2">
-                {productMenu.columns.map((column) => (
-                  <div>
-                    <h3 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-4">
-                      {column.title}
-                    </h3>
-                    <ul class="space-y-1">
-                      {column.items.map((item) => (
-                        <li>
-                          <a
-                            href={item.href}
-                            class="flex items-start gap-3 p-3 rounded-lg hover:bg-muted transition-colors group"
-                          >
-                            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted group-hover:bg-background">
-                              {item.icon === "layout" && <Layout class="h-5 w-5 text-primary" />}
-                              {item.icon === "barChart" && <BarChart3 class="h-5 w-5 text-primary" />}
-                              {item.icon === "shield" && <Shield class="h-5 w-5 text-primary" />}
-                              {item.icon === "zap" && <Zap class="h-5 w-5 text-primary" />}
-                              {item.icon === "layers" && <Layers class="h-5 w-5 text-primary" />}
-                            </div>
-                            <div>
-                              <div class="text-sm font-medium text-foreground">{item.label}</div>
-                              <div class="text-xs text-muted-foreground mt-0.5">{item.description}</div>
-                            </div>
-                          </a>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Solutions Menu -->
-        <div class="mega-menu-trigger relative" data-menu="solutions">
-          <button
-            type="button"
-            class="flex items-center gap-1 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
-          >
-            {solutionsMenu.label}
-            <ChevronDown class="h-4 w-4 transition-transform mega-chevron" />
-          </button>
-          <div class="mega-menu-dropdown absolute left-0 top-full pt-2 opacity-0 -translate-y-2 pointer-events-none transition-all">
-            <div class="bg-background border border-border rounded-lg shadow-lg p-6 min-w-[320px]">
-              <div class="grid gap-8 grid-cols-1">
-                {solutionsMenu.columns.map((column) => (
-                  <div>
-                    <h3 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-4">
-                      {column.title}
-                    </h3>
-                    <ul class="space-y-1">
-                      {column.items.map((item) => (
-                        <li>
-                          <a
-                            href={item.href}
-                            class="flex items-start gap-3 p-3 rounded-lg hover:bg-muted transition-colors group"
-                          >
-                            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted group-hover:bg-background">
-                              {item.icon === "target" && <Target class="h-5 w-5 text-primary" />}
-                              {item.icon === "rocket" && <Rocket class="h-5 w-5 text-primary" />}
-                              {item.icon === "layers" && <Layers class="h-5 w-5 text-primary" />}
-                              {item.icon === "settings" && <Settings class="h-5 w-5 text-primary" />}
-                            </div>
-                            <div>
-                              <div class="text-sm font-medium text-foreground">{item.label}</div>
-                              <div class="text-xs text-muted-foreground mt-0.5">{item.description}</div>
-                            </div>
-                          </a>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-
         {navLinks.map((link) => (
           <a
             href={link.href}
@@ -185,7 +58,7 @@ const ctaLinks = [
 
       <!-- Mobile: Primary CTA + Hamburger -->
       <a
-        href="/sign-up"
+        href="#pricing"
         class="lg:hidden px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90"
       >
         Get Started
@@ -207,74 +80,7 @@ const ctaLinks = [
 <!-- Mobile Menu Overlay -->
 <div id="mobile-menu" class="fixed inset-0 top-16 z-50 bg-background hidden lg:hidden">
   <nav class="overflow-y-auto max-h-[calc(100vh-4rem)]">
-    <!-- Product Section -->
-    <div class="mobile-section border-b border-border" data-section="product">
-      <button
-        type="button"
-        class="flex items-center justify-between w-full px-4 py-3 text-sm font-medium"
-      >
-        Product
-        <ChevronDown class="h-4 w-4 transition-transform section-chevron" />
-      </button>
-      <div class="mobile-section-content hidden px-4 pb-4 space-y-4">
-        {productMenu.columns.map((column) => (
-          <div>
-            <h4 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-              {column.title}
-            </h4>
-            <ul class="space-y-1">
-              {column.items.map((item) => (
-                <li>
-                  <a href={item.href} class="flex items-center gap-3 p-2 rounded-lg hover:bg-muted">
-                    {item.icon === "layout" && <Layout class="h-4 w-4 text-primary" />}
-                    {item.icon === "barChart" && <BarChart3 class="h-4 w-4 text-primary" />}
-                    {item.icon === "shield" && <Shield class="h-4 w-4 text-primary" />}
-                    {item.icon === "zap" && <Zap class="h-4 w-4 text-primary" />}
-                    {item.icon === "layers" && <Layers class="h-4 w-4 text-primary" />}
-                    <span class="text-sm">{item.label}</span>
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </div>
-    </div>
-
-    <!-- Solutions Section -->
-    <div class="mobile-section border-b border-border" data-section="solutions">
-      <button
-        type="button"
-        class="flex items-center justify-between w-full px-4 py-3 text-sm font-medium"
-      >
-        Solutions
-        <ChevronDown class="h-4 w-4 transition-transform section-chevron" />
-      </button>
-      <div class="mobile-section-content hidden px-4 pb-4 space-y-4">
-        {solutionsMenu.columns.map((column) => (
-          <div>
-            <h4 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-              {column.title}
-            </h4>
-            <ul class="space-y-1">
-              {column.items.map((item) => (
-                <li>
-                  <a href={item.href} class="flex items-center gap-3 p-2 rounded-lg hover:bg-muted">
-                    {item.icon === "target" && <Target class="h-4 w-4 text-primary" />}
-                    {item.icon === "rocket" && <Rocket class="h-4 w-4 text-primary" />}
-                    {item.icon === "layers" && <Layers class="h-4 w-4 text-primary" />}
-                    {item.icon === "settings" && <Settings class="h-4 w-4 text-primary" />}
-                    <span class="text-sm">{item.label}</span>
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </div>
-    </div>
-
-    <!-- Simple nav links -->
+    <!-- Navigation links -->
     {navLinks.map((link) => (
       <a
         href={link.href}
@@ -305,25 +111,6 @@ const ctaLinks = [
 
 <script>
   function initHeader() {
-    // Desktop mega menu
-    const megaMenuTriggers = document.querySelectorAll('.mega-menu-trigger')
-    megaMenuTriggers.forEach((trigger) => {
-      const dropdown = trigger.querySelector('.mega-menu-dropdown')
-      const chevron = trigger.querySelector('.mega-chevron')
-
-      trigger.addEventListener('mouseenter', () => {
-        dropdown?.classList.remove('opacity-0', '-translate-y-2', 'pointer-events-none')
-        dropdown?.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto')
-        chevron?.classList.add('rotate-180')
-      })
-
-      trigger.addEventListener('mouseleave', () => {
-        dropdown?.classList.add('opacity-0', '-translate-y-2', 'pointer-events-none')
-        dropdown?.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto')
-        chevron?.classList.remove('rotate-180')
-      })
-    })
-
     // Mobile menu toggle
     const mobileToggle = document.getElementById('mobile-menu-toggle')
     const mobileMenu = document.getElementById('mobile-menu')
@@ -343,25 +130,6 @@ const ctaLinks = [
       }
     })
 
-    // Mobile sections toggle
-    const mobileSections = document.querySelectorAll('.mobile-section')
-    mobileSections.forEach((section) => {
-      const button = section.querySelector('button')
-      const content = section.querySelector('.mobile-section-content')
-      const chevron = section.querySelector('.section-chevron')
-
-      button?.addEventListener('click', () => {
-        const isOpen = !content?.classList.contains('hidden')
-        if (isOpen) {
-          content?.classList.add('hidden')
-          chevron?.classList.remove('rotate-180')
-        } else {
-          content?.classList.remove('hidden')
-          chevron?.classList.add('rotate-180')
-        }
-      })
-    })
-
     // Close mobile menu on link click
     const mobileLinks = mobileMenu?.querySelectorAll('a')
     mobileLinks?.forEach((link) => {

package/templates/marketing/astro/src/pages/index.astro

@@ -46,10 +46,12 @@ import FinalCTA from "../components/blocks/FinalCTA.astro"
       />
 
       <!-- 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 @@ import FinalCTA from "../components/blocks/FinalCTA.astro"
       />
 
       <!-- 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 @@ import FinalCTA from "../components/blocks/FinalCTA.astro"
       />
 
       <!-- 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