create-ej-app 26.0.0 → 27.0.0

package/template/saas-starter/src/app/(marketing)/legal.tsx

@@ -0,0 +1,66 @@
+import Link from 'next/link'
+import type { ReactNode } from 'react'
+import { siteConfig } from '~/lib/siteConfig'
+
+/** Page shell shared by the privacy policy and the terms of service. */
+export function LegalPage({
+  title,
+  children
+}: {
+  title: string
+  children: ReactNode
+}) {
+  return (
+    <article className="container mx-auto max-w-4xl px-4 py-12 md:px-0">
+      <h1 className="mb-8 text-4xl font-bold">{title}</h1>
+      <div className="text-muted-foreground space-y-6 leading-relaxed">
+        <p className="text-foreground font-medium">
+          Last updated: {siteConfig.legal.lastUpdated}
+        </p>
+        {children}
+      </div>
+    </article>
+  )
+}
+
+/** One numbered section of a legal page. Number the title yourself. */
+export function LegalSection({
+  title,
+  children
+}: {
+  title: string
+  children: ReactNode
+}) {
+  return (
+    <section className="space-y-4">
+      <h2 className="text-foreground mt-8 text-2xl font-semibold">{title}</h2>
+      {children}
+    </section>
+  )
+}
+
+/** Bulleted list styled for legal page body copy. */
+export function LegalList({ children }: { children: ReactNode }) {
+  return <ul className="list-disc space-y-2 pl-6">{children}</ul>
+}
+
+const linkClassName =
+  'text-primary focus-visible:ring-ring/50 rounded-sm underline underline-offset-4 focus-visible:ring-3 focus-visible:outline-none'
+
+/** Inline link to the contact page. */
+export function ContactLink() {
+  return (
+    <Link href="/contact-us" className={linkClassName}>
+      contact us
+    </Link>
+  )
+}
+
+/** Inline mailto link to the support address. */
+export function ContactEmailLink() {
+  return (
+    <a href={`mailto:${siteConfig.contact.email}`} className={linkClassName}>
+      {siteConfig.contact.email}
+    </a>
+  )
+}

package/template/saas-starter/src/app/(marketing)/page.tsx

@@ -1,3 +1,24 @@
-export default async function HomePage() {
-  return <div>Hello, World!</div>
+import Link from 'next/link'
+import { Button } from '~/components/ui/button'
+import { siteConfig } from '~/lib/siteConfig'
+
+export default function HomePage() {
+  return (
+    <section className="container flex flex-col items-center gap-6 py-24 text-center">
+      <h1 className="max-w-2xl text-4xl font-bold tracking-tight sm:text-5xl">
+        {siteConfig.name}
+      </h1>
+      <p className="text-muted-foreground max-w-xl text-lg">
+        {siteConfig.description}
+      </p>
+      <div className="flex flex-wrap justify-center gap-3">
+        <Button asChild size="lg">
+          <Link href="/login">Get Started</Link>
+        </Button>
+        <Button asChild size="lg" variant="outline">
+          <Link href="/contact-us">Contact Us</Link>
+        </Button>
+      </div>
+    </section>
+  )
 }

package/template/saas-starter/src/app/(marketing)/privacy/page.tsx

@@ -1,3 +1,63 @@
-export default async function PrivacyPage() {
-  return <div>Hello, World!</div>
+import type { Metadata } from 'next'
+import { siteConfig } from '~/lib/siteConfig'
+import {
+  ContactEmailLink,
+  ContactLink,
+  LegalList,
+  LegalPage,
+  LegalSection
+} from '../legal'
+
+export const metadata: Metadata = {
+  title: 'Privacy Policy',
+  description: `How ${siteConfig.name} collects, uses, and protects your data.`
+}
+
+// Starting point only. Have this reviewed before you launch, and update it
+// with `siteConfig.legal.lastUpdated` whenever the product's data use changes.
+export default function PrivacyPage() {
+  return (
+    <LegalPage title="Privacy Policy">
+      <p>
+        This policy explains what {siteConfig.name} collects, why, and what you
+        can do about it.
+      </p>
+
+      <LegalSection title="1. Information You Give Us">
+        <LegalList>
+          <li>
+            <strong>Account details</strong>: your name and email address. When
+            you sign in with Google or GitHub, that provider also shares your
+            profile picture.
+          </li>
+          <li>
+            <strong>Organization details</strong>: organization names, logos,
+            members, and invitations.
+          </li>
+          <li>
+            <strong>Messages</strong>: support tickets, feedback, and contact
+            form submissions.
+          </li>
+          <li>
+            <strong>Billing</strong>: a billing email. Stripe processes card
+            details; we never store them.
+          </li>
+        </LegalList>
+      </LegalSection>
+
+      <LegalSection title="2. How We Use It">
+        <p>
+          We use this information to run your account, send the emails you ask
+          for, answer support requests, and bill paid plans.
+        </p>
+      </LegalSection>
+
+      <LegalSection title="3. Contact">
+        <p>
+          Email <ContactEmailLink /> or <ContactLink /> with questions about
+          your data.
+        </p>
+      </LegalSection>
+    </LegalPage>
+  )
 }

package/template/saas-starter/src/app/(marketing)/terms/page.tsx

@@ -1,3 +1,41 @@
-export default async function TermsPage() {
-  return <div>Hello, World!</div>
+import type { Metadata } from 'next'
+import { siteConfig } from '~/lib/siteConfig'
+import { ContactEmailLink, LegalPage, LegalSection } from '../legal'
+
+export const metadata: Metadata = {
+  title: 'Terms of Service',
+  description: `The terms that apply when you use ${siteConfig.name}.`
+}
+
+// Starting point only. Have this reviewed before you launch, and update it
+// with `siteConfig.legal.lastUpdated` whenever the product's behavior changes.
+export default function TermsPage() {
+  return (
+    <LegalPage title="Terms of Service">
+      <p>
+        These terms apply when you use {siteConfig.name}. By creating an
+        account, you agree to them.
+      </p>
+
+      <LegalSection title="1. Your Account">
+        <p>
+          Keep access to your email inbox secure: anyone who can read it can
+          sign in as you.
+        </p>
+      </LegalSection>
+
+      <LegalSection title="2. Paid Plans">
+        <p>
+          Paid plans renew each billing period until you cancel from the billing
+          page. Cancelling keeps your plan until the period ends.
+        </p>
+      </LegalSection>
+
+      <LegalSection title="3. Contact">
+        <p>
+          Email <ContactEmailLink /> with questions about these terms.
+        </p>
+      </LegalSection>
+    </LegalPage>
+  )
 }