Authors Tranquility Press
Website Documentation

1. Project Overview

Authors Tranquility Press (ATP) is a full-service self-publishing company. This website is the primary marketing and conversion platform for the business, enabling authors to:

• Discover and compare publishing service packages
• Take a guided quiz to find the right publishing package
• Browse a curated bookstore of published ATP titles
• Access free author resources and interactive tools
• Submit leads and book free consultations
• Download a free Publishing Guide (email-gated)

The site is built as a modern, SEO-optimized Next.js application with server-side rendering, static generation, and a headless CMS (Sanity) for bookstore content.

2. Tech Stack

3. Project Structure

D:\ATP\Revamp\
├── public/
│   ├── ATP-logo-light-1.png          # Full logo — light (used in emails)
│   ├── ATP-logo-dark.png             # Full logo — dark
│   ├── ATP_Authors_Publishing_Guide.pdf
│   └── ATP_Authors_Publishing_Guide_Page_1.jpg
│
├── src/
│   ├── app/                          # Next.js App Router pages
│   │   ├── page.tsx                  # Homepage
│   │   ├── about/                    # About Us
│   │   ├── faq/                      # FAQ page
│   │   ├── contact/                  # Contact form
│   │   ├── quiz/                     # Package quiz
│   │   ├── bookstore/                # Bookstore + [slug] detail
│   │   ├── marketing/                # Marketing Services hub
│   │   ├── resources/                # Author tools
│   │   ├── blog/                     # Blog (placeholder)
│   │   ├── docs/                     # This documentation page
│   │   ├── services/
│   │   │   ├── [slug]/               # Dynamic service detail
│   │   │   └── publishing-packages/  # Flagship packages page
│   │   ├── api/
│   │   │   ├── contact/
│   │   │   ├── ebook-lead/
│   │   │   ├── quiz-lead/
│   │   │   └── download-guide/
│   │   └── studio/                   # Sanity Studio (embedded)
│   │
│   ├── components/
│   │   ├── layout/     Header, Footer, Container, SiteShell
│   │   ├── home/       Homepage section components
│   │   ├── services/   ServiceDetail, PricingTable, service-specific content
│   │   ├── pricing/    PricingTable (compare + grid views)
│   │   ├── books/      Bookstore components
│   │   ├── forms/      ContactForm, InlineLeadForm
│   │   ├── quiz/       PublishingQuiz, QuizResult, QuizLeadCapture
│   │   ├── tools/      RoyaltyCalc, CostCalc, BlurbBuilder, etc.
│   │   ├── shared/     FloatingCTA, EbookPopup, PageCTA, TrustBar
│   │   └── ui/         Button, Badge, SectionHeader, RevealItem
│   │
│   ├── data/
│   │   ├── services.ts    All services, packages, FAQs
│   │   ├── nav.ts         Navigation structure
│   │   ├── faqData.ts     Standalone FAQ categories
│   │   ├── quizData.ts    Quiz questions + recommendation logic
│   │   ├── books.ts       Bookstore seed data
│   │   └── testimonials.ts
│   │
│   └── lib/
│       ├── email/template.ts   HTML email template
│       ├── email/sheets.ts     Google Sheets lead logging
│       └── formatPhone.ts
│
├── next.config.ts
└── DOCUMENTATION.md

4. Pages & Routes

Public Pages

API Routes

5. Services Catalog

All services are defined in src/data/services.ts as a typed Service[] array.

Publishing Services

Marketing & Distribution Services

6. Key Components

Layout

Shared / Global

UI Primitives

PricingTable.tsx

Dual-view pricing component used on publishing package service pages:

• Grid View — Scrollable card carousel, one card per package with feature list
• Compare Features (default) — Full HTML table with category section rows, feature rows, and package columns. Highlighted columns: Execution (gold tint), Expansion (green tint), Integrative (navy tint). Show Full Comparison / Show Less toggle.
• Helper text dynamically lists the recommended packages from the data
• Print type toggle (B&W / Color) for services with color pricing variants

7. Data Layer

8. Forms & Integrations

9. Environment Variables

Set in Vercel dashboard (Production) and .env.local (local development).

10. Deployment

Platform: Vercel — connected to nicekajul/atp-website on GitHub. Every push to master triggers an automatic production deployment.

Build Configuration

• Framework: Next.js (auto-detected by Vercel)
• Build command: next build
• ESLint bypassed during build — eslint: { ignoreDuringBuilds: true } in next.config.ts
• React aliased to project node_modules on client bundles only (prevents Sanity React conflict)
• serverExternalPackages: ['sanity', '@sanity/vision', 'next-sanity'] prevents SSR bundling issues

Pending Tasks

• Connect domain authorstranquilitypress.com to Vercel
• Update NEXT_PUBLIC_SITE_URL in Vercel dashboard to the live domain
• Add domain to Resend for branded email sending
• Rotate Resend API key

11. Brand Assets

Official logos and icons for Author’s Tranquility Press. Click Download on any asset to save the file.

Horizontal Logo — Dark

Primary logo. Use on light/white backgrounds. Main logo variant.

ATP-Logo-Horizontal-Dark.png↓ Download

Horizontal Logo — Light

Reversed primary logo. Use on dark/navy backgrounds and in emails.

ATP-Logo-Horizontal-Light.png↓ Download

Vertical Logo — Dark

Vertical variant. Use for email signatures and narrow-space contexts on light backgrounds.

ATP-Logo-Vertical-Dark.png↓ Download

Vertical Logo — Light

Vertical variant reversed. Use for email signatures and narrow-space contexts on dark/navy backgrounds.

ATP-Logo-Vertical-Light.png↓ Download

App Icon

Square icon mark with gold background. Use for favicons, social profiles, and app icons.

atp-logo-alt.png↓ Download

Icon Mark — Gold

Standalone gold icon on transparent background. Use on light or navy surfaces.

ATP-logo-dark.png↓ Download

12. Branding Guidelines

These guidelines ensure consistent brand presentation across all digital and print materials.

Color Palette

Typography

Logo Usage

• Primary variant: Horizontal logo — always the default. Vertical is for narrow/email contexts only.
• Minimum size: 120px wide for horizontal logo; 80px wide for vertical logo; 32px for icon mark
• Clear space: Maintain padding equal to the height of the icon mark on all sides
• Never: stretch, skew, rotate, recolor, or place on a busy background without a backing shape
• Never: use a rasterized logo below minimum size — use the icon mark instead

Logo Proportion System

Vertical Logo

• Step 1 — Anchor point: Measure the exact pixel width of the word “Tranquility” (the widest word in the lockup).
• Step 2 — Golden Ratio: Multiply that width by 0.62. Set the total width of the bird mark to that value. The 60–65% range is optimal for organic, flowing marks — 0.62 sits precisely at the Golden Ratio.
• Step 3 — Breathing room: The bird’s tail is a sharp downward point that draws the eye directly into “Author’s.” Use the physical cap-height of the letter “A” in “Author’s” as the exact vertical gap between the tail tip and the top of the text below.

Horizontal Logo

• Mark sizing: The bird mark height should be 1.5× to 2.5× the cap-height of the wordmark. Matching it 1:1 makes the mark look too small.
• Vertical alignment: Align the horizontal centerline of the bird mark exactly with the horizontal centerline of the wordmark text.
• Gap: Use the pixel width of the lowercase “o” in “Author’s” as the exact gap between the rightmost edge of the bird and the first letter of the wordmark. Wider logo = less breathing room needed.

Brand Voice & Tone

Copy Rules

• Brand name is Author’s Tranquility Press — always with the apostrophe. Never "Authors Tranquility Press".
• Short form: ATP — acceptable after first full mention on a page.
• Email sender: support@authorstranquilitypress.com
• Primary CTA: Start Publishing (header) · Book a Free Consultation (body)
• Avoid em-dash overuse — use it for strong breaks only, not as a comma substitute.
• Prices should always be preceded by "From" when showing a starting price (e.g., "From $899").

13. Brand Templates

Ready-to-use templates built with Author’s Tranquility Press branding. Replace all [bracketed] placeholders before use. For the email signature, replace [YOUR_GOOGLE_REVIEW_LINK] with your Google Business review URL.