shipd 0.1.0

package/template/components/homepage/hero-section.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { ArrowRight, Sparkles, Code2, Rocket, Clock } from "lucide-react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+export default function HeroSection() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return (
+    <section className="relative h-[90vh] flex items-center justify-center overflow-hidden bg-black">
+      {/* Animated Background Gradient - Sunset Orange to Black */}
+      <div className="absolute inset-0 bg-gradient-to-br from-[#ff5722]/10 via-black to-[#d84315]/5" />
+
+      {/* Animated Orbs - Sunset Orange Glow */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-1/4 -left-48 w-96 h-96 bg-[#ff5722]/20 rounded-full blur-3xl animate-pulse" />
+        <div className="absolute bottom-1/4 -right-48 w-96 h-96 bg-[#d84315]/20 rounded-full blur-3xl animate-pulse delay-1000" />
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-[#ff5722]/5 rounded-full blur-3xl" />
+      </div>
+
+      {/* Grid Pattern - Subtle on dark background */}
+      <div className="absolute inset-0 bg-[linear-gradient(rgba(255,87,34,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,87,34,0.03)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]" />
+
+      {/* Content */}
+      <div className="relative z-10 mx-auto max-w-7xl px-6 lg:px-8 py-32">
+        <div className="text-center space-y-8">
+          {/* Badge */}
+          <div
+            className={`inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[#ff5722]/30 bg-[#ff5722]/10 backdrop-blur-sm transition-all duration-700 ${
+              mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'
+            }`}
+          >
+            <Sparkles className="w-4 h-4 text-[#ff5722]" />
+            <span className="text-sm font-medium text-white">Production-ready SaaS template</span>
+          </div>
+
+          {/* Main Heading */}
+          <div className="space-y-6">
+            <h1
+              className={`text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight transition-all duration-700 delay-100 ${
+                mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'
+              }`}
+            >
+              <span className="bg-gradient-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-transparent">
+                Build SaaS Apps
+              </span>
+              <br />
+              <span className="bg-gradient-to-r from-[#ff5722] via-[#ff7043] to-[#d84315] bg-clip-text text-transparent">
+                in Minutes
+              </span>
+            </h1>
+
+            <p
+              className={`text-xl md:text-2xl text-gray-400 max-w-3xl mx-auto transition-all duration-700 delay-200 ${
+                mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'
+              }`}
+            >
+              Skip the boilerplate. Get a production-ready SaaS foundation in minutes.
+              Choose your stack. Build your vision.
+            </p>
+          </div>
+
+          {/* CTA Buttons */}
+          <div
+            className={`flex flex-col sm:flex-row items-center justify-center gap-4 transition-all duration-700 delay-300 ${
+              mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'
+            }`}
+          >
+            <Button asChild size="lg" className="text-lg px-8 h-14 group">
+              <Link href="/sign-up">
+                Get Started Free
+                <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
+              </Link>
+            </Button>
+            <Button asChild variant="outline" size="lg" className="text-lg px-8 h-14">
+              <Link href="#features">
+                See Features
+              </Link>
+            </Button>
+          </div>
+
+          {/* Feature Pills */}
+          <div
+            className={`flex flex-wrap items-center justify-center gap-3 transition-all duration-700 delay-500 ${
+              mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'
+            }`}
+          >
+            {[
+              { icon: Rocket, text: "Production Ready" },
+              { icon: Code2, text: "Full Stack" },
+              { icon: Clock, text: "5 Min Setup" },
+            ].map((feature, idx) => (
+              <div
+                key={idx}
+                className="flex items-center gap-2 px-4 py-2 rounded-full bg-[#1a1a1a]/80 backdrop-blur-sm border border-[#ff5722]/20 text-sm"
+              >
+                <feature.icon className="w-4 h-4 text-[#ff5722]" />
+                <span className="font-medium text-white">{feature.text}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/template/components/homepage/integrations.tsx

@@ -0,0 +1,124 @@
+import {
+  Shadcnui,
+  TailwindCSS,
+  BetterAuth,
+  Polar,
+  NeonPostgres,
+  Nextjs,
+} from "@/components/logos";
+import { Card } from "@/components/ui/card";
+import * as React from "react";
+
+export default function Integrations() {
+  return (
+    <section className="bg-black">
+      <div className="pt-12 pb-32">
+        <div className="mx-auto max-w-5xl px-6">
+          <div>
+            <h2 className="text-balance text-3xl font-semibold md:text-4xl bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+              Built with the best tools
+            </h2>
+            <p className="text-gray-400 mt-3 text-lg">
+              Launch your project with confidence, knowing that you&apos;re
+              using the best tools available.
+            </p>
+          </div>
+
+          <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            <IntegrationCard
+              title="Next.js"
+              description="The React framework for production with App Router, Server Components, and built-in optimizations."
+              link="https://nextjs.org"
+            >
+              <Nextjs />
+            </IntegrationCard>
+
+            <IntegrationCard
+              title="Better Auth"
+              description="Modern authentication library with session management, OAuth providers, and security features."
+              link="https://better-auth.com"
+            >
+              <BetterAuth />
+            </IntegrationCard>
+
+            <IntegrationCard
+              title="Neon Postgres"
+              description="Serverless PostgreSQL database with branching, autoscaling, and modern developer experience."
+              link="https://neon.tech"
+            >
+              <NeonPostgres />
+            </IntegrationCard>
+
+            <IntegrationCard
+              title="Polar.sh"
+              description="Developer-first subscription platform with webhooks, customer portal, and usage-based billing."
+              link="https://polar.sh"
+            >
+              <Polar />
+            </IntegrationCard>
+
+            <IntegrationCard
+              title="Tailwind CSS"
+              description="Utility-first CSS framework for rapid UI development with consistent design tokens."
+              link="https://tailwindcss.com"
+            >
+              <TailwindCSS />
+            </IntegrationCard>
+
+            <IntegrationCard
+              title="shadcn/ui"
+              description="Beautiful, accessible components built with Radix UI primitives and styled with Tailwind CSS."
+              link="https://ui.shadcn.com"
+            >
+              <Shadcnui />
+            </IntegrationCard>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const IntegrationCard = ({
+  title,
+  description,
+  children,
+  link,
+}: {
+  title: string;
+  description: string;
+  children: React.ReactNode;
+  link?: string;
+}) => {
+  const CardContent = () => (
+    <div className="relative">
+      <div className="*:size-10">{children}</div>
+
+      <div className="mt-6 space-y-1.5">
+        <h3 className="text-lg font-semibold text-white">{title}</h3>
+        <p className="text-gray-400 line-clamp-2">{description}</p>
+      </div>
+    </div>
+  );
+
+  if (link) {
+    return (
+      <a
+        href={link}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="block transition-transform hover:scale-105"
+      >
+        <Card className="p-6 h-full cursor-pointer bg-[#0a0a0a] border-[#2a2a2a] hover:border-[#ff5722]/30 hover:shadow-lg hover:shadow-[#ff5722]/10 transition-all duration-300 rounded-md">
+          <CardContent />
+        </Card>
+      </a>
+    );
+  }
+
+  return (
+    <Card className="p-6 bg-[#0a0a0a] border-[#2a2a2a]">
+      <CardContent />
+    </Card>
+  );
+};

package/template/components/homepage/navigation.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Menu, X, Twitter } from "lucide-react";
+import { useState } from "react";
+
+export default function Navigation() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const navLinks = [
+    { name: "Features", href: "#features" },
+    { name: "Pricing", href: "#pricing" },
+  ];
+
+  return (
+    <header className="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-lg border-b border-[#ff5722]/20">
+      <nav className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="flex h-16 items-center justify-between">
+          {/* Logo */}
+          <div className="flex items-center">
+            <Link href="/" className="flex items-center space-x-2">
+              <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-[#ff5722] to-[#d84315] flex items-center justify-center shadow-lg shadow-[#ff5722]/20">
+                <span className="text-white font-bold text-lg">S</span>
+              </div>
+              <span className="font-semibold text-lg hidden sm:block text-white">saas-scaffold</span>
+            </Link>
+          </div>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex md:items-center md:space-x-8">
+            {navLinks.map((link) => (
+              <Link
+                key={link.name}
+                href={link.href}
+                target={link.external ? "_blank" : undefined}
+                rel={link.external ? "noopener noreferrer" : undefined}
+                className="text-sm font-medium text-gray-400 hover:text-[#ff5722] transition-colors"
+              >
+                {link.name}
+              </Link>
+            ))}
+            <Link
+              href="https://x.com/Kedbranten"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-gray-400 hover:text-[#ff5722] transition-colors"
+              aria-label="Follow on X (Twitter)"
+            >
+              <Twitter className="h-5 w-5" />
+            </Link>
+          </div>
+
+          {/* Auth Buttons */}
+          <div className="hidden md:flex md:items-center md:space-x-3">
+            <Button asChild variant="ghost" size="sm">
+              <Link href="/sign-in">Sign In</Link>
+            </Button>
+            <Button asChild size="sm">
+              <Link href="/sign-up">Get Started</Link>
+            </Button>
+          </div>
+
+          {/* Mobile Menu Button */}
+          <button
+            type="button"
+            className="md:hidden rounded-md p-2 text-gray-400 hover:text-[#ff5722]"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          >
+            {mobileMenuOpen ? (
+              <X className="h-6 w-6" />
+            ) : (
+              <Menu className="h-6 w-6" />
+            )}
+          </button>
+        </div>
+
+        {/* Mobile Menu */}
+        {mobileMenuOpen && (
+          <div className="md:hidden pb-4 space-y-2 bg-black/95 backdrop-blur-lg border-t border-[#ff5722]/20">
+            {navLinks.map((link) => (
+              <Link
+                key={link.name}
+                href={link.href}
+                target={link.external ? "_blank" : undefined}
+                rel={link.external ? "noopener noreferrer" : undefined}
+                className="block px-3 py-2 text-base font-medium text-gray-400 hover:text-[#ff5722] transition-colors"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                {link.name}
+              </Link>
+            ))}
+            <Link
+              href="https://x.com/Kedbranten"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 px-3 py-2 text-base font-medium text-gray-400 hover:text-[#ff5722] transition-colors"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              <Twitter className="h-5 w-5" />
+              <span>Follow on X</span>
+            </Link>
+            <div className="pt-4 space-y-2">
+              <Button asChild variant="ghost" size="sm" className="w-full text-white hover:text-[#ff5722]">
+                <Link href="/sign-in">Sign In</Link>
+              </Button>
+              <Button asChild size="sm" className="w-full">
+                <Link href="/sign-up">Get Started</Link>
+              </Button>
+            </div>
+          </div>
+        )}
+      </nav>
+    </header>
+  );
+}

package/template/components/homepage/news-section.tsx

@@ -0,0 +1,82 @@
+import { Calendar, ArrowRight } from "lucide-react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+const updates = [
+  {
+    date: "Dec 18, 2025",
+    title: "Resend Email Integration",
+    description:
+      "Added Resend email support for transactional emails. Send welcome emails, password resets, and notifications with React Email templates.",
+    tag: "Feature",
+  },
+  {
+    date: "Dec 18, 2025",
+    title: "Supabase Database Support",
+    description:
+      "Now supporting Supabase Postgres alongside Neon. Choose your preferred database provider during project setup.",
+    tag: "Feature",
+  },
+  {
+    date: "Dec 18, 2025",
+    title: "Enhanced Documentation",
+    description:
+      "Comprehensive docs section with setup guides for all integrations. Step-by-step instructions for every service.",
+    tag: "Enhancement",
+  },
+];
+
+export default function NewsSection() {
+  return (
+    <section className="py-20 px-6 lg:px-0 bg-gradient-to-b from-black via-[#0a0a0a] to-black">
+      <div className="mx-auto max-w-6xl">
+        <div className="flex items-center justify-between mb-12">
+          <div>
+            <h2 className="text-4xl font-bold mb-2 bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">Latest Updates</h2>
+            <p className="text-gray-400 text-lg">
+              Stay up to date with new features and improvements
+            </p>
+          </div>
+          <Button asChild variant="ghost" size="sm" className="hidden sm:flex text-white hover:text-[#ff5722]">
+            <Link href="/blog">
+              View All Updates
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </Link>
+          </Button>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {updates.map((update, index) => (
+            <div
+              key={index}
+              className="bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg p-6 hover:border-[#ff5722]/30 hover:shadow-lg hover:shadow-[#ff5722]/10 transition-all duration-300"
+            >
+              <div className="flex items-center gap-2 mb-3">
+                <span className="bg-[#ff5722]/10 text-[#ff5722] text-xs font-medium px-2.5 py-1 rounded">
+                  {update.tag}
+                </span>
+                <div className="flex items-center text-gray-400 text-sm">
+                  <Calendar className="w-4 h-4 mr-1" />
+                  {update.date}
+                </div>
+              </div>
+              <h3 className="text-lg font-semibold mb-2 text-white">{update.title}</h3>
+              <p className="text-gray-400 text-sm">
+                {update.description}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-8 sm:hidden">
+          <Button asChild variant="ghost" size="sm" className="w-full text-white hover:text-[#ff5722]">
+            <Link href="/blog">
+              View All Updates
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}

package/template/components/homepage/testimonials-section.tsx

@@ -0,0 +1,34 @@
+export default function TestimonialsSection() {
+  return (
+    <section className="py-20 px-6 lg:px-0 bg-gradient-to-b from-black via-[#0a0a0a] to-black">
+      <div className="mx-auto max-w-6xl">
+        <div className="text-center mb-16">
+          <h2 className="text-4xl font-bold mb-4 bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+            Built for Speed
+          </h2>
+          <p className="text-gray-400 text-xl max-w-2xl mx-auto">
+            Everything you need to launch your SaaS in minutes, not weeks
+          </p>
+        </div>
+
+        {/* Stats */}
+        <div className="flex flex-wrap items-center justify-center gap-8 text-center">
+          <div>
+            <p className="text-4xl font-bold bg-gradient-to-r from-[#ff5722] to-[#ff7043] bg-clip-text text-transparent">10+</p>
+            <p className="text-gray-400 mt-1">Pre-built Integrations</p>
+          </div>
+          <div className="h-12 w-px bg-[#2a2a2a] hidden sm:block" />
+          <div>
+            <p className="text-4xl font-bold bg-gradient-to-r from-[#ff5722] to-[#ff7043] bg-clip-text text-transparent">24+</p>
+            <p className="text-gray-400 mt-1">UI Components</p>
+          </div>
+          <div className="h-12 w-px bg-[#2a2a2a] hidden sm:block" />
+          <div>
+            <p className="text-4xl font-bold bg-gradient-to-r from-[#ff5722] to-[#ff7043] bg-clip-text text-transparent">5 Min</p>
+            <p className="text-gray-400 mt-1">Setup Time</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/template/components/logos/BetterAuth.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const BetterAuth = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 500 500"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path fill="#fff" d="M0 0h500v500H0z" />
+    <path fill="#000" d="M69 121h86.988v259H69zM337.575 121H430v259h-92.425z" />
+    <path
+      fill="#000"
+      d="M427.282 121v83.456h-174.52V121zM430 296.544V380H252.762v-83.456z"
+    />
+    <path fill="#000" d="M252.762 204.455v92.089h-96.774v-92.089z" />
+  </svg>
+);
+export default BetterAuth;

package/template/components/logos/NeonPostgres.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const Neon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 256 256"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    preserveAspectRatio="xMidYMid"
+    {...props}
+  >
+    <defs>
+      <linearGradient id="a" x1="100%" x2="12.069%" y1="100%" y2="0%">
+        <stop offset="0%" stopColor="#62F755" />
+        <stop offset="100%" stopColor="#8FF986" stopOpacity={0} />
+      </linearGradient>
+      <linearGradient id="b" x1="100%" x2="40.603%" y1="100%" y2="76.897%">
+        <stop offset="0%" stopOpacity={0.9} />
+        <stop offset="100%" stopColor="#1A1A1A" stopOpacity={0} />
+      </linearGradient>
+    </defs>
+    <path
+      fill="#00E0D9"
+      d="M0 44.139C0 19.762 19.762 0 44.139 0H211.86C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723h-76.36C19.763 256 0 236.238 0 211.861V44.14Zm44.139-8.825c-4.879 0-8.825 3.946-8.825 8.818v167.73c0 4.878 3.946 8.831 8.818 8.831h77.688c2.44 0 3.087-1.977 3.087-4.416v-101.22c0-25.222 31.914-36.166 47.395-16.255l48.391 62.243V44.14c0-4.879.455-8.825-4.416-8.825H44.14Z"
+    />
+    <path
+      fill="url(#a)"
+      d="M0 44.139C0 19.762 19.762 0 44.139 0H211.86C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723h-76.36C19.763 256 0 236.238 0 211.861V44.14Zm44.139-8.825c-4.879 0-8.825 3.946-8.825 8.818v167.73c0 4.878 3.946 8.831 8.818 8.831h77.688c2.44 0 3.087-1.977 3.087-4.416v-101.22c0-25.222 31.914-36.166 47.395-16.255l48.391 62.243V44.14c0-4.879.455-8.825-4.416-8.825H44.14Z"
+    />
+    <path
+      fill="url(#b)"
+      fillOpacity={0.4}
+      d="M0 44.139C0 19.762 19.762 0 44.139 0H211.86C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723h-76.36C19.763 256 0 236.238 0 211.861V44.14Zm44.139-8.825c-4.879 0-8.825 3.946-8.825 8.818v167.73c0 4.878 3.946 8.831 8.818 8.831h77.688c2.44 0 3.087-1.977 3.087-4.416v-101.22c0-25.222 31.914-36.166 47.395-16.255l48.391 62.243V44.14c0-4.879.455-8.825-4.416-8.825H44.14Z"
+    />
+    <path
+      fill="#63F655"
+      d="M211.861 0C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723a4.409 4.409 0 0 0 4.409-4.409V115.058c0-25.223 31.914-36.167 47.395-16.256l48.391 62.243V8.825c0-4.871-3.953-8.825-8.832-8.825Z"
+    />
+  </svg>
+);
+export default Neon;

package/template/components/logos/Nextjs.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const Nextjs = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 180 180"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <mask
+      id="mask0_408_139"
+      style={{
+        maskType: "alpha",
+      }}
+      maskUnits="userSpaceOnUse"
+      x={0}
+      y={0}
+      width={180}
+      height={180}
+    >
+      <circle cx={90} cy={90} r={90} fill="black" />
+    </mask>
+    <g mask="url(#mask0_408_139)">
+      <circle
+        cx={90}
+        cy={90}
+        r={87}
+        fill="black"
+        stroke="white"
+        strokeWidth={6}
+      />
+      <path
+        d="M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z"
+        fill="url(#paint0_linear_408_139)"
+      />
+      <rect
+        x={115}
+        y={54}
+        width={12}
+        height={72}
+        fill="url(#paint1_linear_408_139)"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="paint0_linear_408_139"
+        x1={109}
+        y1={116.5}
+        x2={144.5}
+        y2={160.5}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" />
+        <stop offset={1} stopColor="white" stopOpacity={0} />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_408_139"
+        x1={121}
+        y1={54}
+        x2={120.799}
+        y2={106.875}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" />
+        <stop offset={1} stopColor="white" stopOpacity={0} />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+export default Nextjs;

package/template/components/logos/Polar.tsx

@@ -0,0 +1,7 @@
+import Image from "next/image";
+
+export default function Polar() {
+  return (
+    <Image src="/polar-sh.svg" alt="Polar Logo" width={100} height={100} />
+  );
+}

package/template/components/logos/TailwindCSS.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const TailwindCSS = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 54 33"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <g clipPath="url(#a)">
+      <path
+        fill="#38bdf8"
+        fillRule="evenodd"
+        d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M0 0h54v32.4H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default TailwindCSS;

package/template/components/logos/index.ts

@@ -0,0 +1,6 @@
+export { default as Nextjs } from "./Nextjs";
+export { default as Polar } from "./Polar";
+export { default as BetterAuth } from "./BetterAuth";
+export { default as NeonPostgres } from "./NeonPostgres";
+export { default as TailwindCSS } from "./TailwindCSS";
+export { default as Shadcnui } from "./shadcnui";

package/template/components/logos/shadcnui.tsx

@@ -0,0 +1,8 @@
+import Image from "next/image";
+
+const Shadcnui = () => {
+  return (
+    <Image src="/shadcn-ui.svg" alt="Shadcnui Logo" width={100} height={100} />
+  );
+};
+export default Shadcnui;

package/template/components/provider.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+type ThemeProviderProps = React.ComponentProps<typeof NextThemesProvider>;
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+    return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}