# Customization guide — make it yours

Everything on the site can be changed: the company name, logo, colours, text, and prices. Nothing is locked. Here is where each thing lives.

Tip: use a code editor like **VS Code** (free, https://code.visualstudio.com). Its "Search across files" (press Ctrl/Cmd + Shift + F) is the fastest way to find and replace text everywhere at once.

## 1. Company name and brand text

The original name is **"AI Packaging"** (and "AI Packaging Pvt Ltd"). To rename:

1. In VS Code, open this folder and use **Search & Replace across files**:
   - Replace `AI Packaging Pvt Ltd` → `Your Company Pvt Ltd`
   - Replace `AI Packaging` → `Your Company`
2. Replace the web address `aipackaging.company` → `yourdomain.com` (and `aipackaging.co` → your domain).
3. The main files this touches are the header, footer, and metadata:
   - `src/components/Navbar.tsx`, `src/components/Sidebar.tsx`, `src/components/Footer.tsx`
   - `src/app/layout.tsx` — the browser tab title and SEO description (search for `title:` and `description:`)
   - `src/lib/invoice.ts` — the company name on printed invoices
   - `src/app/products/page.tsx` and the about/testimonial text

## 2. Contact details

Search and replace these:

- Phone / WhatsApp: `919289113977` and `+912027654321` → your numbers
- Email: `info@aipackaging.co`, `admin@aipackaging.co` → your emails
- Address / city: search for `Pune` and the address text in `src/components/Footer.tsx`
- GST number and factory details: log in as Admin → **Settings** page (editable in the app, no code needed)

## 3. Logo and images

- Logo and favicon: replace the files in `public/` (and `assets/`). Keep the same file names, or update the paths referenced in `src/components/Navbar.tsx` and `src/app/layout.tsx`.
- Product photos: `public/products/` and `public/images/`.
- Customer-uploaded artwork lands in `public/uploads/` (leave empty to start).

## 4. Colours and design

- **Colours / theme:** `tailwind.config.js` — the `colors` section defines the brand palette. Change the hex values there and they apply site-wide.
- **Global styles:** `src/app/globals.css`.
- **Page layouts and components:** everything visual is in `src/components/` and `src/app/**/page.tsx`. Each page is a normal React component you can edit.

## 5. Prices — three places you can edit

**a) Catalog / listed prices** (the food-packaging product catalog):
`src/data/foodPackaging.ts`. Each product has a `quantityOptions` list with `price` and `perUnit`. Important: prices are stored in **paisa** (1 rupee = 100 paisa), so ₹18.50 is written as `1850`. Edit the numbers and save.

**b) Costing rates — material and machine rates** (used by the instant-quote and costing engine):
Log in as **Admin → Settings**, or the **Costing** section. You can add and edit materials (each has a `rate`) and machines directly in the app — no code. You can also bulk-import them from a CSV on the Settings page (columns: `name,type,unit,stock,min_stock,rate`).

**c) Quote formula multipliers** (how material/finish/colour affect the auto-quote):
`src/lib/` — the pricing/quote logic (search for `MATERIAL_MULT` and `computePrice`). Advanced; change only if you want to alter the quote formula itself.

## 6. Products and categories

Add, remove, or rename products and categories in `src/data/foodPackaging.ts`. Each product has a `slug` (its web address), `name`, `description`, `dimensions`, `quantityOptions`, `features`, and an `image`. Copy an existing entry and change the values to add a new product.

## 7. After any change

- While editing, run `npm run dev` and refresh the browser to see changes instantly.
- When you're happy, run `npm run build` then restart the live app (`pm2 restart packaging-web`) so the production site picks up the changes.
