kofi-stack-template-generator 2.1.51 → 2.1.53

package/templates/marketing/astro/astro.config.ts.hbs

@@ -0,0 +1,12 @@
+import { defineConfig } from 'astro/config'
+import tailwindcss from '@tailwindcss/postcss'
+
+export default defineConfig({
+  vite: {
+    css: {
+      postcss: {
+        plugins: [tailwindcss()],
+      },
+    },
+  },
+})

package/templates/marketing/astro/package.json.hbs

@@ -0,0 +1,31 @@
+{
+  "name": "@repo/marketing",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev --port 3000",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "typecheck": "astro check && tsc --noEmit"
+  },
+  "dependencies": {
+    "astro": "^5.1.6",
+    "lucide-astro": "^0.468.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.6.0"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/tailwind": "^6.0.2",
+    "@repo/config-typescript": "workspace:*",
+    "@types/node": "^20.0.0",
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "postcss": "^8.4.0",
+    "typescript": "^5.0.0"
+  }
+}

package/templates/marketing/astro/postcss.config.mjs.hbs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

package/templates/marketing/astro/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="6" fill="#0a0a0a"/>
+  <path d="M17.33 5L9 18.67h8L16 27l9-12h-8l1-10z" fill="none" stroke="#fafafa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/templates/marketing/astro/public/media/hero-bg.png

@@ -0,0 +1 @@
+placeholder

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

@@ -0,0 +1,167 @@
+---
+import Logo from "./Logo.astro"
+import ThemeSelector from "./ThemeSelector.astro"
+
+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" },
+]
+
+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">
+      <!-- Link Columns -->
+      {footerColumns.map((column) => (
+        <div class="col-span-1">
+          <h3 class="mb-4 text-sm font-medium text-foreground">
+            {column.title}
+          </h3>
+          <ul class="space-y-3">
+            {column.links.map((link) => (
+              <li>
+                <a
+                  href={link.href}
+                  class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  {link.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+
+      <!-- Newsletter Column -->
+      <div class="col-span-2 md:col-span-3 lg:col-span-2">
+        <h3 class="mb-4 text-sm font-medium text-foreground">
+          Newsletter
+        </h3>
+        <p class="mb-4 text-sm text-muted-foreground">
+          Get product updates, tips, and insights delivered weekly.
+        </p>
+        <form class="flex gap-2">
+          <input
+            type="email"
+            placeholder="Enter your email"
+            class="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"
+            class="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 class="mt-10 flex items-center gap-4 border-t border-border pt-8">
+      <a
+        href={socialLinks.twitter}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-muted-foreground transition-colors hover:text-foreground"
+        aria-label="X (Twitter)"
+      >
+        <svg class="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>
+      </a>
+      <a
+        href={socialLinks.linkedin}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-muted-foreground transition-colors hover:text-foreground"
+        aria-label="LinkedIn"
+      >
+        <svg class="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>
+      </a>
+      <a
+        href={socialLinks.github}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-muted-foreground transition-colors hover:text-foreground"
+        aria-label="GitHub"
+      >
+        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path
+            fill-rule="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"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </a>
+    </div>
+  </div>
+
+  <!-- Bottom Bar -->
+  <div class="border-t border-border">
+    <div class="container mx-auto flex flex-col items-center justify-between gap-4 px-4 py-6 sm:flex-row">
+      <!-- Logo and Copyright -->
+      <div class="flex items-center gap-4">
+        <a href="/" class="flex items-center">
+          <Logo class="h-6 w-6" />
+        </a>
+        <p class="text-sm text-muted-foreground">
+          &copy; {currentYear} SaaSify
+        </p>
+      </div>
+
+      <!-- Bottom Links and 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>
+  </div>
+</footer>

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

@@ -0,0 +1,378 @@
+---
+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" },
+      ],
+    },
+  ],
+}
+
+const navLinks = [
+  { label: "Pricing", href: "/pricing" },
+  { label: "Blog", href: "/blog" },
+]
+
+const ctaLinks = [
+  { label: "Sign In", href: "/sign-in", variant: "ghost" },
+  { label: "Get Started", href: "/sign-up", variant: "default" },
+]
+---
+
+<header class="sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+  <div class="container mx-auto px-4 h-16 flex justify-between items-center">
+    <!-- Left section: Logo + Nav -->
+    <div class="flex items-center gap-8">
+      <a href="/" class="flex items-center gap-2">
+        <Logo />
+        <span class="text-xl font-semibold hidden sm:inline">SaaSify</span>
+      </a>
+
+      <!-- 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}
+            class="px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {link.label}
+          </a>
+        ))}
+      </nav>
+    </div>
+
+    <!-- Right section: CTAs -->
+    <div class="flex items-center gap-3">
+      <!-- Desktop CTAs -->
+      <div class="hidden lg:flex items-center gap-3">
+        {ctaLinks.map((link) => (
+          <a
+            href={link.href}
+            class:list={[
+              "px-4 py-2 text-sm font-medium rounded-md transition-colors",
+              link.variant === "default"
+                ? "bg-primary text-primary-foreground hover:bg-primary/90"
+                : "text-muted-foreground hover:text-foreground"
+            ]}
+          >
+            {link.label}
+          </a>
+        ))}
+      </div>
+
+      <!-- Mobile: Primary CTA + Hamburger -->
+      <a
+        href="/sign-up"
+        class="lg:hidden px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90"
+      >
+        Get Started
+      </a>
+
+      <button
+        type="button"
+        id="mobile-menu-toggle"
+        class="lg:hidden p-2 text-muted-foreground hover:text-foreground"
+        aria-label="Toggle menu"
+      >
+        <Menu class="h-6 w-6 menu-open-icon" />
+        <X class="h-6 w-6 menu-close-icon hidden" />
+      </button>
+    </div>
+  </div>
+</header>
+
+<!-- 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 -->
+    {navLinks.map((link) => (
+      <a
+        href={link.href}
+        class="flex items-center px-4 py-3 text-sm font-medium border-b border-border hover:bg-muted"
+      >
+        {link.label}
+      </a>
+    ))}
+
+    <!-- CTA links -->
+    <div class="p-4 space-y-2">
+      {ctaLinks.map((link) => (
+        <a
+          href={link.href}
+          class:list={[
+            "flex items-center justify-center w-full px-4 py-3 text-sm font-medium rounded-md transition-colors",
+            link.variant === "default"
+              ? "bg-primary text-primary-foreground hover:bg-primary/90"
+              : "border border-border hover:bg-muted"
+          ]}
+        >
+          {link.label}
+        </a>
+      ))}
+    </div>
+  </nav>
+</div>
+
+<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')
+    const openIcon = mobileToggle?.querySelector('.menu-open-icon')
+    const closeIcon = mobileToggle?.querySelector('.menu-close-icon')
+
+    mobileToggle?.addEventListener('click', () => {
+      const isOpen = !mobileMenu?.classList.contains('hidden')
+      if (isOpen) {
+        mobileMenu?.classList.add('hidden')
+        openIcon?.classList.remove('hidden')
+        closeIcon?.classList.add('hidden')
+      } else {
+        mobileMenu?.classList.remove('hidden')
+        openIcon?.classList.add('hidden')
+        closeIcon?.classList.remove('hidden')
+      }
+    })
+
+    // 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) => {
+      link.addEventListener('click', () => {
+        mobileMenu?.classList.add('hidden')
+        openIcon?.classList.remove('hidden')
+        closeIcon?.classList.add('hidden')
+      })
+    })
+  }
+
+  initHeader()
+  document.addEventListener('astro:after-swap', initHeader)
+</script>

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

@@ -0,0 +1,30 @@
+---
+interface Props {
+  class?: string
+}
+
+const { class: className } = Astro.props
+---
+
+<div class:list={["flex h-8 w-8 items-center justify-center rounded-lg bg-foreground logo-container", className]}>
+  <svg
+    class="h-5 w-5 text-background"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
+  </svg>
+</div>
+
+<style>
+  :global([data-theme="dark"]) .logo-container {
+    background-color: white;
+  }
+  :global([data-theme="dark"]) .logo-container svg {
+    color: #0a0a0a;
+  }
+</style>