shipd 0.1.2 → 0.1.4

package/features/marketing-landing/components/homepage/features-section.tsx

@@ -0,0 +1,152 @@
+const features = [
+  {
+    category: "Authentication",
+    options: [
+      { name: "Better Auth", implemented: true },
+      { name: "NextAuth", implemented: false },
+      { name: "Supabase Auth", implemented: false },
+    ],
+  },
+  {
+    category: "Database",
+    options: [
+      { name: "Neon PostgreSQL", implemented: true },
+      { name: "Supabase Postgres", implemented: true },
+      { name: "MongoDB", implemented: false },
+    ],
+  },
+  {
+    category: "Payments",
+    options: [
+      { name: "Polar.sh", implemented: true },
+      { name: "Stripe", implemented: false },
+      { name: "Lemon Squeezy", implemented: false },
+    ],
+  },
+  {
+    category: "Email",
+    options: [
+      { name: "Resend", implemented: true },
+      { name: "Mailgun", implemented: false },
+    ],
+  },
+  {
+    category: "AI Integration",
+    options: [
+      { name: "OpenAI Chat", implemented: true },
+    ],
+  },
+  {
+    category: "File Storage",
+    options: [
+      { name: "Cloudflare R2", implemented: true },
+    ],
+  },
+  {
+    category: "Analytics",
+    options: [
+      { name: "PostHog", implemented: true },
+    ],
+  },
+  {
+    category: "Landing Page",
+    options: [
+      { name: "Hero Section", implemented: true },
+      { name: "Features Section", implemented: true },
+      { name: "Testimonials", implemented: true },
+      { name: "News/Blog", implemented: true },
+      { name: "Footer", implemented: true },
+    ],
+  },
+  {
+    category: "Dashboard",
+    options: [
+      { name: "User Dashboard", implemented: true },
+      { name: "Settings Page", implemented: true },
+      { name: "Billing Portal", implemented: true },
+    ],
+  },
+  {
+    category: "SEO",
+    options: [
+      { name: "Blog Structure", implemented: true },
+      { name: "Meta Tags", implemented: true },
+      { name: "Sitemap Generation", implemented: false },
+      { name: "OpenGraph Tags", implemented: false },
+      { name: "Structured Data", implemented: false },
+    ],
+  },
+];
+
+export default function FeaturesSection() {
+  return (
+    <section id="features" className="py-20 px-6 lg:px-0 bg-black">
+      <div className="mx-auto max-w-6xl">
+        <div className="mb-16">
+          <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
+            <div className="text-center md:text-left mb-4 md:mb-0">
+              <h2 className="text-4xl font-bold mb-4 bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+                Everything We Build
+              </h2>
+              <p className="text-gray-400 text-xl max-w-2xl">
+                Get the complete foundation with all the essential SaaS components pre-built and ready to customize.
+                <br />
+                <span className="text-white font-medium">Start fresh or add features to your existing Next.js project.</span>
+              </p>
+            </div>
+            <div className="text-right">
+              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#1a1a1a] border border-[#2a2a2a]">
+                <div className="w-3 h-3 rounded-full bg-green-500 border-2 border-green-400"></div>
+                <span className="text-sm text-gray-300">
+                  <span className="text-white font-medium">Green border</span> = Implemented
+                </span>
+              </div>
+              <p className="text-xs text-gray-500 mt-2">No border = Coming soon</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="border border-[#2a2a2a] bg-[#0a0a0a] rounded-lg overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-[#2a2a2a]">
+                  <th className="px-6 py-4 text-left text-sm font-semibold text-white">Category</th>
+                  <th className="px-6 py-4 text-left text-sm font-semibold text-white">Options</th>
+                </tr>
+              </thead>
+              <tbody>
+                {features.map((feature, idx) => (
+                  <tr
+                    key={feature.category}
+                    className={`border-b border-[#2a2a2a] hover:bg-[#0a0a0a]/80 transition-colors ${
+                      idx === features.length - 1 ? "border-b-0" : ""
+                    }`}
+                  >
+                    <td className="px-6 py-4 text-white font-medium">{feature.category}</td>
+                    <td className="px-6 py-4">
+                      <div className="flex flex-wrap gap-2">
+                        {feature.options.map((option) => (
+                          <span
+                            key={option.name}
+                            className={`inline-flex items-center px-3 py-1 rounded-full text-sm bg-[#1a1a1a] text-gray-300 ${
+                              option.implemented
+                                ? "border-2 border-green-500"
+                                : "border border-[#2a2a2a]"
+                            }`}
+                          >
+                            {option.name}
+                          </span>
+                        ))}
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/features/marketing-landing/components/homepage/footer.tsx

@@ -0,0 +1,53 @@
+import Link from "next/link";
+
+const links = [
+  {
+    title: "GitHub",
+    href: "https://github.com/kedbrant/Saas-scaffold",
+  },
+  {
+    title: "Documentation",
+    href: "https://github.com/kedbrant/Saas-scaffold#readme",
+  },
+  {
+    title: "Issues",
+    href: "https://github.com/kedbrant/Saas-scaffold/issues",
+  },
+  {
+    title: "Releases",
+    href: "https://github.com/kedbrant/Saas-scaffold/releases",
+  },
+];
+
+export default function FooterSection() {
+  return (
+    <footer className="bg-black border-t border-[#2a2a2a] py-12">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="flex flex-wrap justify-between gap-12">
+          <div className="order-last flex items-center gap-3 md:order-first">
+            <span className="text-gray-400 block text-center text-sm">
+              © {new Date().getFullYear()} saas-scaffold. Built with{" "}
+              <Link href="https://github.com/kedbrant/Saas-scaffold" className="hover:text-[#ff5722] transition-colors">
+                saas-scaffold
+              </Link>
+            </span>
+          </div>
+
+          <div className="order-first flex flex-wrap gap-x-6 gap-y-4 md:order-last">
+            {links.map((link, index) => (
+              <Link
+                key={index}
+                href={link.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-gray-400 hover:text-[#ff5722] block duration-150"
+              >
+                <span>{link.title}</span>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/features/marketing-landing/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">
+                Your SaaS Foundation,
+              </span>
+              <br />
+              <span className="bg-gradient-to-r from-[#ff5722] via-[#ff7043] to-[#d84315] bg-clip-text text-transparent">
+                Already Built
+              </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'
+              }`}
+            >
+              Start fresh or add features to your existing project. 
+              <span className="text-white font-medium"> Create new apps</span> or <span className="text-white font-medium">upgrade existing ones</span>—all in minutes.
+            </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/features/marketing-landing/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/features/marketing-landing/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/features/marketing-landing/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>
+  );
+}