create-ej-app 25.0.0 → 27.0.0

package/template/saas-starter/src/app/(marketing)/contact-us/validation.ts

@@ -0,0 +1,22 @@
+import { z } from 'zod'
+import { MAX_MESSAGE_LENGTH, MIN_CONTACT_MESSAGE_LENGTH } from '~/lib/constants'
+import {
+  emailValidation,
+  phoneValidation,
+  stringValidation
+} from '~/lib/validations'
+
+export const contactFormSchema = z.object({
+  name: stringValidation,
+  email: emailValidation,
+  phone: phoneValidation.or(z.literal('')).optional(),
+  subject: stringValidation,
+  message: z
+    .string()
+    .trim()
+    .min(
+      MIN_CONTACT_MESSAGE_LENGTH,
+      `Write at least ${MIN_CONTACT_MESSAGE_LENGTH} characters.`
+    )
+    .max(MAX_MESSAGE_LENGTH)
+})

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

@@ -0,0 +1,48 @@
+import Link from 'next/link'
+import { Logo } from '~/components/logo'
+import { SiteFooter } from '~/components/site-footer'
+import { Button } from '~/components/ui/button'
+import { siteConfig } from '~/lib/siteConfig'
+
+export default function Layout({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <div className="bg-background text-foreground flex min-h-screen flex-col">
+      <a
+        href="#main-content"
+        className="bg-background text-foreground focus:ring-ring/50 sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-200 focus:rounded-md focus:px-4 focus:py-2 focus:ring-3"
+      >
+        Skip to content
+      </a>
+      <header className="bg-background/80 sticky top-0 z-50 border-b backdrop-blur">
+        <nav
+          aria-label="Primary"
+          className="container flex h-14 items-center justify-between gap-4"
+        >
+          <Link href="/" className="flex items-center">
+            <Logo size={28} priority className="text-lg" />
+          </Link>
+          <div className="flex items-center gap-2">
+            <Button asChild variant="ghost" size="sm">
+              <Link href="/contact-us">Contact</Link>
+            </Button>
+            <Button asChild size="sm">
+              <Link href="/login">Log In</Link>
+            </Button>
+          </div>
+        </nav>
+      </header>
+      <main
+        id="main-content"
+        tabIndex={-1}
+        className="focus-visible:outline-primary flex-1 focus-visible:outline-2 focus-visible:-outline-offset-2"
+      >
+        {children}
+      </main>
+      <SiteFooter name={siteConfig.name} />
+    </div>
+  )
+}

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,41 @@
+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>
+  )
+}