shipd 0.1.0

package/template/app/sign-in/page.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { authClient } from "@/lib/auth-client";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Suspense, useState } from "react";
+import { toast } from "sonner";
+
+function SignInContent() {
+  const [loading, setLoading] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const searchParams = useSearchParams();
+  const returnTo = searchParams.get("returnTo");
+  const router = useRouter();
+
+  const handleEmailSignIn = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      const { error } = await authClient.signIn.email({
+        email,
+        password,
+        callbackURL: returnTo || "/dashboard",
+      });
+
+      if (error) {
+        console.error("Sign-in error:", error);
+
+        // Provide helpful error messages
+        if (error.message?.includes("database") || error.message?.includes("connect")) {
+          toast.error("Database connection failed. Please configure DATABASE_URL in your .env.local file.", {
+            duration: 7000,
+          });
+        } else if (error.message?.includes("Invalid") || error.message?.includes("credentials")) {
+          toast.error("Invalid email or password. Please try again.");
+        } else {
+          toast.error(error.message || "Sign-in failed. Check your environment configuration.", {
+            duration: 5000,
+          });
+        }
+      } else {
+        toast.success("Signed in successfully!");
+        router.push(returnTo || "/dashboard");
+      }
+    } catch (err) {
+      console.error("Authentication error:", err);
+      toast.error("An unexpected error occurred. Check console for details.", {
+        duration: 5000,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col justify-center items-center w-full h-screen bg-black">
+      <Card className="max-w-md w-full bg-[#0a0a0a] border-[#2a2a2a]">
+        <CardHeader>
+          <CardTitle className="text-lg md:text-xl text-white">
+            Welcome Back to {{PROJECT_NAME}}
+          </CardTitle>
+          <CardDescription className="text-xs md:text-sm text-gray-400">
+            Sign in to your account to continue
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleEmailSignIn} className="grid gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="email" className="text-gray-300">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="you@example.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                disabled={loading}
+                className="bg-[#1a1a1a] border-[#2a2a2a] text-white placeholder:text-gray-500"
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="password" className="text-gray-300">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="Enter your password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                disabled={loading}
+                className="bg-[#1a1a1a] border-[#2a2a2a] text-white placeholder:text-gray-500"
+              />
+            </div>
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading ? "Signing in..." : "Sign In"}
+            </Button>
+          </form>
+
+          <div className="relative my-4">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t border-[#2a2a2a]" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-[#0a0a0a] px-2 text-gray-500">Or continue with</span>
+            </div>
+          </div>
+
+          <Button
+            variant="outline"
+            className={cn("w-full gap-2 bg-[#1a1a1a] border-[#2a2a2a] text-white hover:bg-[#2a2a2a]")}
+            disabled={loading}
+            onClick={async () => {
+              try {
+                setLoading(true);
+                await authClient.signIn.social(
+                  {
+                    provider: "google",
+                    callbackURL: returnTo || "/dashboard",
+                  },
+                  {
+                    onResponse: () => {
+                      setLoading(false);
+                    },
+                    onError: (ctx) => {
+                      setLoading(false);
+                      console.error("Sign-in failed:", ctx.error);
+
+                      if (ctx.error?.message?.includes("database") || ctx.error?.message?.includes("connect")) {
+                        toast.error("Database connection failed. Please configure DATABASE_URL in your .env.local file.", {
+                          duration: 7000,
+                        });
+                      } else {
+                        toast.error("Google sign-in failed. Check your Google OAuth configuration.", {
+                          duration: 5000,
+                        });
+                      }
+                    },
+                  },
+                );
+              } catch (error) {
+                setLoading(false);
+                console.error("Authentication error:", error);
+                toast.error("Authentication error. Check console for details.", {
+                  duration: 5000,
+                });
+              }
+            }}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="0.98em"
+              height="1em"
+              viewBox="0 0 256 262"
+            >
+              <path
+                fill="#4285F4"
+                d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
+              ></path>
+              <path
+                fill="#34A853"
+                d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
+              ></path>
+              <path
+                fill="#FBBC05"
+                d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"
+              ></path>
+              <path
+                fill="#EB4335"
+                d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
+              ></path>
+            </svg>
+            Continue with Google
+          </Button>
+
+          <p className="mt-4 text-center text-sm text-gray-500">
+            Don&apos;t have an account?{" "}
+            <Link href="/sign-up" className="text-[#ff5722] hover:underline">
+              Sign up
+            </Link>
+          </p>
+        </CardContent>
+      </Card>
+      <p className="mt-6 text-xs text-center text-gray-500 dark:text-gray-400 max-w-md">
+        By signing in, you agree to our{" "}
+        <Link
+          href="/terms-of-service"
+          className="underline hover:text-gray-700 dark:hover:text-gray-300"
+        >
+          Terms of Service
+        </Link>{" "}
+        and{" "}
+        <Link
+          href="/privacy-policy"
+          className="underline hover:text-gray-700 dark:hover:text-gray-300"
+        >
+          Privacy Policy
+        </Link>
+      </p>
+    </div>
+  );
+}
+
+export default function SignIn() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex flex-col justify-center items-center w-full h-screen">
+          <div className="max-w-md w-full bg-gray-200 dark:bg-gray-800 animate-pulse rounded-lg h-96"></div>
+        </div>
+      }
+    >
+      <SignInContent />
+    </Suspense>
+  );
+}

package/template/app/sign-up/page.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { authClient } from "@/lib/auth-client";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Suspense, useState } from "react";
+import { toast } from "sonner";
+
+function SignUpContent() {
+  const [loading, setLoading] = useState(false);
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const searchParams = useSearchParams();
+  const returnTo = searchParams.get("returnTo");
+  const router = useRouter();
+
+  const handleEmailSignUp = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      const { error } = await authClient.signUp.email({
+        email,
+        password,
+        name,
+        callbackURL: returnTo || "/dashboard",
+      });
+
+      if (error) {
+        console.error("Sign-up error:", error);
+
+        if (error.message?.includes("database") || error.message?.includes("connect")) {
+          toast.error("Database connection failed. Please configure DATABASE_URL in your .env.local file.", {
+            duration: 7000,
+          });
+        } else if (error.message?.includes("already exists") || error.message?.includes("duplicate")) {
+          toast.error("An account with this email already exists. Please sign in instead.");
+        } else {
+          toast.error(error.message || "Sign-up failed. Check your environment configuration.", {
+            duration: 5000,
+          });
+        }
+      } else {
+        toast.success("Account created successfully!");
+        router.push(returnTo || "/dashboard");
+      }
+    } catch (err) {
+      console.error("Authentication error:", err);
+      toast.error("An unexpected error occurred. Check console for details.", {
+        duration: 5000,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col justify-center items-center w-full h-screen bg-black">
+      <Card className="max-w-md w-full bg-[#0a0a0a] border-[#2a2a2a]">
+        <CardHeader>
+          <CardTitle className="text-lg md:text-xl text-white">
+            Create Your {{PROJECT_NAME}} Account
+          </CardTitle>
+          <CardDescription className="text-xs md:text-sm text-gray-400">
+            Get started in seconds
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleEmailSignUp} className="grid gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="name" className="text-gray-300">Name</Label>
+              <Input
+                id="name"
+                type="text"
+                placeholder="John Doe"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                required
+                disabled={loading}
+                className="bg-[#1a1a1a] border-[#2a2a2a] text-white placeholder:text-gray-500"
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="email" className="text-gray-300">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="you@example.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                disabled={loading}
+                className="bg-[#1a1a1a] border-[#2a2a2a] text-white placeholder:text-gray-500"
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="password" className="text-gray-300">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="Create a strong password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                disabled={loading}
+                minLength={8}
+                className="bg-[#1a1a1a] border-[#2a2a2a] text-white placeholder:text-gray-500"
+              />
+            </div>
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading ? "Creating account..." : "Create Account"}
+            </Button>
+          </form>
+
+          <div className="relative my-4">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t border-[#2a2a2a]" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-[#0a0a0a] px-2 text-gray-500">Or continue with</span>
+            </div>
+          </div>
+
+          <Button
+            variant="outline"
+            className={cn("w-full gap-2 bg-[#1a1a1a] border-[#2a2a2a] text-white hover:bg-[#2a2a2a]")}
+            disabled={loading}
+            onClick={async () => {
+              try {
+                setLoading(true);
+                await authClient.signIn.social(
+                  {
+                    provider: "google",
+                    callbackURL: returnTo || "/dashboard",
+                  },
+                  {
+                    onResponse: () => {
+                      setLoading(false);
+                    },
+                    onError: (ctx) => {
+                      setLoading(false);
+                      console.error("Sign-up failed:", ctx.error);
+
+                      if (ctx.error?.message?.includes("database") || ctx.error?.message?.includes("connect")) {
+                        toast.error("Database connection failed. Please configure DATABASE_URL in your .env.local file.", {
+                          duration: 7000,
+                        });
+                      } else {
+                        toast.error("Google sign-up failed. Check your Google OAuth configuration.", {
+                          duration: 5000,
+                        });
+                      }
+                    },
+                  },
+                );
+              } catch (error) {
+                setLoading(false);
+                console.error("Authentication error:", error);
+                toast.error("Authentication error. Check console for details.", {
+                  duration: 5000,
+                });
+              }
+            }}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="0.98em"
+              height="1em"
+              viewBox="0 0 256 262"
+            >
+              <path
+                fill="#4285F4"
+                d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
+              ></path>
+              <path
+                fill="#34A853"
+                d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
+              ></path>
+              <path
+                fill="#FBBC05"
+                d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"
+              ></path>
+              <path
+                fill="#EB4335"
+                d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
+              ></path>
+            </svg>
+            Continue with Google
+          </Button>
+
+          <p className="mt-4 text-center text-sm text-gray-500">
+            Already have an account?{" "}
+            <Link href="/sign-in" className="text-[#ff5722] hover:underline">
+              Sign in
+            </Link>
+          </p>
+        </CardContent>
+      </Card>
+      <p className="mt-6 text-xs text-center text-gray-500 max-w-md">
+        By signing up, you agree to our{" "}
+        <Link
+          href="/terms-of-service"
+          className="underline hover:text-gray-400"
+        >
+          Terms of Service
+        </Link>{" "}
+        and{" "}
+        <Link
+          href="/privacy-policy"
+          className="underline hover:text-gray-400"
+        >
+          Privacy Policy
+        </Link>
+      </p>
+    </div>
+  );
+}
+
+export default function SignUp() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex flex-col justify-center items-center w-full h-screen bg-black">
+          <div className="max-w-md w-full bg-[#0a0a0a] animate-pulse rounded-lg h-96"></div>
+        </div>
+      }
+    >
+      <SignUpContent />
+    </Suspense>
+  );
+}

package/template/app/sitemap.ts

@@ -0,0 +1,62 @@
+import { MetadataRoute } from 'next'
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'
+
+  // Blog posts
+  const blogPosts = [
+    {
+      slug: 'getting-started-with-saas',
+      date: '2024-12-15',
+    },
+    {
+      slug: 'optimizing-conversion-rates',
+      date: '2024-12-10',
+    },
+    {
+      slug: 'scaling-your-saas',
+      date: '2024-12-05',
+    },
+  ]
+
+  const blogRoutes = blogPosts.map((post) => ({
+    url: `${baseUrl}/blog/${post.slug}`,
+    lastModified: new Date(post.date),
+    changeFrequency: 'monthly' as const,
+    priority: 0.7,
+  }))
+
+  return [
+    {
+      url: baseUrl,
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 1,
+    },
+    {
+      url: `${baseUrl}/blog`,
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 0.9,
+    },
+    ...blogRoutes,
+    {
+      url: `${baseUrl}/pricing`,
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 0.8,
+    },
+    {
+      url: `${baseUrl}/terms-of-service`,
+      lastModified: new Date(),
+      changeFrequency: 'yearly',
+      priority: 0.3,
+    },
+    {
+      url: `${baseUrl}/privacy-policy`,
+      lastModified: new Date(),
+      changeFrequency: 'yearly',
+      priority: 0.3,
+    },
+  ]
+}

package/template/app/success/page.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { CheckCircle2, Terminal, BookOpen, Zap } from "lucide-react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+
+export default function SuccessPage() {
+  const router = useRouter();
+
+  return (
+    <div className="min-h-screen bg-black flex items-center justify-center p-6">
+      <Card className="bg-[#0a0a0a] border-[#2a2a2a] max-w-2xl w-full">
+        <CardContent className="p-12">
+          {/* Success Icon */}
+          <div className="w-20 h-20 bg-green-500/10 rounded-full flex items-center justify-center mx-auto mb-6">
+            <CheckCircle2 className="w-12 h-12 text-green-400" />
+          </div>
+
+          {/* Success Message */}
+          <div className="text-center mb-8">
+            <h1 className="text-3xl font-bold text-white mb-3">
+              Welcome! 🎉
+            </h1>
+            <p className="text-gray-400 text-lg">
+              Your subscription is now active. Let&apos;s get you started building your SaaS.
+            </p>
+          </div>
+
+          {/* Next Steps */}
+          <div className="space-y-6 mb-8">
+            <h2 className="text-xl font-semibold text-white">Next Steps</h2>
+
+            {/* Step 1 */}
+            <div className="flex gap-4">
+              <div className="w-8 h-8 rounded-full bg-[#ff5722] flex items-center justify-center text-white text-sm font-semibold flex-shrink-0">
+                1
+              </div>
+              <div className="flex-1">
+                <h3 className="text-white font-semibold mb-1">Authenticate the CLI</h3>
+                <p className="text-gray-400 text-sm mb-2">
+                  Run this command in your terminal to authenticate:
+                </p>
+                <div className="bg-black/70 p-3 rounded-lg border border-[#2a2a2a]">
+                  <code className="text-[#ff5722] font-mono text-sm">
+                    npx your-cli login
+                  </code>
+                </div>
+              </div>
+            </div>
+
+            {/* Step 2 */}
+            <div className="flex gap-4">
+              <div className="w-8 h-8 rounded-full bg-[#ff5722] flex items-center justify-center text-white text-sm font-semibold flex-shrink-0">
+                2
+              </div>
+              <div className="flex-1">
+                <h3 className="text-white font-semibold mb-1">Create your first project</h3>
+                <p className="text-gray-400 text-sm mb-2">
+                  Generate a complete SaaS application:
+                </p>
+                <div className="bg-black/70 p-3 rounded-lg border border-[#2a2a2a]">
+                  <code className="text-[#ff5722] font-mono text-sm">
+                    npx your-cli init my-app
+                  </code>
+                </div>
+              </div>
+            </div>
+
+            {/* Step 3 */}
+            <div className="flex gap-4">
+              <div className="w-8 h-8 rounded-full bg-[#ff5722] flex items-center justify-center text-white text-sm font-semibold flex-shrink-0">
+                3
+              </div>
+              <div className="flex-1">
+                <h3 className="text-white font-semibold mb-1">Start building</h3>
+                <p className="text-gray-400 text-sm">
+                  Your project includes authentication, billing, dashboard, and more - all ready to customize and deploy.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+            <Button
+              onClick={() => router.push("/dashboard")}
+              className="w-full bg-[#ff5722] hover:bg-[#d84315]"
+            >
+              <Zap className="w-4 h-4 mr-2" />
+              Go to Dashboard
+            </Button>
+            <Link href="/dashboard/cli" className="w-full">
+              <Button variant="outline" className="w-full border-[#2a2a2a] hover:bg-[#1a1a1a]">
+                <Terminal className="w-4 h-4 mr-2" />
+                CLI Guide
+              </Button>
+            </Link>
+            <Link href="/docs" className="w-full">
+              <Button variant="outline" className="w-full border-[#2a2a2a] hover:bg-[#1a1a1a]">
+                <BookOpen className="w-4 h-4 mr-2" />
+                Documentation
+              </Button>
+            </Link>
+          </div>
+
+          {/* Help Section */}
+          <div className="mt-8 pt-8 border-t border-[#2a2a2a] text-center">
+            <p className="text-gray-400 text-sm mb-2">
+              Need help getting started?
+            </p>
+            <Link href="mailto:support@yourdomain.com">
+              <Button variant="link" className="text-[#ff5722] hover:text-[#d84315]">
+                Contact Support
+              </Button>
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}