Customization

Customizing Your Application

Once ProShot is deployed, you will likely want to update branding, text, images, and other visual elements to match your business. This page covers everything you can safely change and where to find it.

Open your preferred code editor (VS Code, Cursor, or Sublime Text), select File then Open Folder, and choose the folder where your ProShot codebase lives.

Logo

File: app/components/logo.tsx

The logo component supports two variants: black (used on light backgrounds like the navbar) and white (used on dark backgrounds like the footer).

Asset Paths:

• public/assets/logo-black.svg — Black variant
• public/assets/logo-white.svg — White variant

To replace the logo, swap these SVG files with your own while keeping the same file names. The component renders the logo at 160x160px by default with an animated sparkle icon beside it.

Brand Colors

File: app/globals.css

All theme colors are defined as HSL CSS variables in the :root block at the top of the file. The primary brand color is #0025cc (a deep blue) defined as:

--primary: 229 100% 40%;
--ring: 229 100% 40%;
--color-fd-primary: hsl(229, 100%, 40%);

To change the brand color, update these three values to your desired HSL color. Other key variables you may want to adjust:

Font

File: app/layout.tsx

The application uses Plus Jakarta Sans loaded via next/font/google with weights 400, 500, 600, and 700. To change it, replace the import and configuration:

import { Plus_Jakarta_Sans } from "next/font/google";

const jakarta = Plus_Jakarta_Sans({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  display: "swap",
});

Replace Plus_Jakarta_Sans with any Google Font such as Inter, Poppins, or Manrope.

Text and Translations

Directory: messages/

All user facing text is stored in JSON translation files, one per language:

Each file is organized by section:

To change any text on the site, find the matching key in the JSON file and update the value. If you support multiple languages, update all five files. Components reference these keys via useTranslations() on the client and getTranslations() on the server.

Landing Page Sections

Directory: app/components/

Each landing page section is a separate component. Here is what each file controls:

Static Assets

Directory: public/

Dashboard Components

Directory: app/dashboard/components/

These components control the authenticated dashboard experience. Commonly customized areas include:

• train-model.tsx — Model training form and photo upload UI
• packs-gallery.tsx — Headshot style packs display
• models-table.tsx — User models list
• stripe-table.tsx — Stripe pricing table embed

Navigation Links

File: app/components/navbar.tsx

The navbar includes these default links: Documentation, Reviews, Pricing, and Refunds. To add, remove, or rename links, edit the NavLink components in the file. The link labels are pulled from the Navbar section of the translation files.

The footer (app/components/footer.tsx) has two link groups: Product (How It Works, Examples, Pricing) and Resources (Photo Requirements, FAQs, Reviews, Blog). Edit these in the footer component directly.

What Not to Modify

Deploying Changes

After making your changes locally, save the files and push to Git:

git add .

git commit -m "Update branding and content"

git push

If you are using Vercel, changes deploy automatically within a few minutes. If you are on a custom server, SSH in and pull the latest changes, rebuild, and restart:

cd /var/www/framecast-ai && git pull && pnpm build && pm2 restart framecast-ai