# SnapSeller React JS Migration — Developer Handoff

## Current Status — Verified 2 September 2026

The standalone React JS conversion is **complete and ready to hand to the developer**. The supplied `react-js-migration/` package is a plain JavaScript/JSX application using React 19 and Vite; it is separate from the Next.js source used by the ChatGPT Site.

| Item | Status |
| --- | --- |
| React JS/JSX migration package | Complete |
| English, Gujarati, and Hindi homepage content | Complete |
| English, Gujarati, and Hindi pricing content | Complete |
| Six route resolver entries | Complete |
| Responsive CSS, mobile menu, and language selector | Included |
| IST launch/pricing phase logic | Included |
| Production React build | Passed on 2 September 2026 |
| Developer handoff and downloadable ZIP | Updated |
| Merge into the real SnapSeller production repository | Developer action required |
| Final auth, dashboard, API, analytics, robots, and sitemap regression check | Required after the merge |

Verified build command:

```bash
cd react-js-migration
npm run build
```

Result: Vite completed successfully and generated the deployable `dist/` output. This confirms that the standalone React package compiles. It does **not** mean the real SnapSeller production repository has already been replaced or deployed; the developer must merge this package into that repository using the instructions below.

## 1. Handoff Goal

Move the approved SnapSeller marketing website into the real React JS frontend quickly, without redesigning it and without affecting the existing backend, authentication, dashboard, APIs, database, extension logic, analytics, robots, sitemap, or deployment secrets.

The download package contains a complete standalone React JS version in `react-js-migration/`. It uses JavaScript and JSX, not TypeScript. The current approved design, multilingual content, responsive behavior, launch offer, pricing schedule, and interactions are already implemented.

The production result must provide these routes:

| Route | Page | Language |
| --- | --- | --- |
| `/` | Homepage | English |
| `/gu/` | Homepage | Gujarati |
| `/hi/` | Homepage | Hindi |
| `/pricing/` | Pricing | English |
| `/gu/pricing/` | Pricing | Gujarati |
| `/hi/pricing/` | Pricing | Hindi |

## 2. Use This Folder

Give the developer the complete `react-js-migration/` folder. It is the migration-ready source of truth.

```text
react-js-migration/
├── index.html
├── package.json
├── package-lock.json
├── vite.config.js
├── README.md
├── public/
│   ├── new_logo.png
│   ├── favicon.svg
│   └── SNAPSELLER-REACT-JS-DEVELOPER-HANDOFF.md
└── src/
    ├── main.jsx
    ├── homepage.jsx
    ├── pricing-page.jsx
    ├── launch-components.jsx
    ├── promotion.js
    ├── styles.css
    └── content/
        ├── en.js
        ├── gu.js
        └── hi.js
```

Technology:

- React 19
- Plain JavaScript and JSX
- Vite
- `lucide-react` icons
- Plain responsive CSS
- No database or API dependency for the marketing pages
- `localStorage` only for the visitor's saved language preference
- Minimum Node.js: `22.13.0`

## 3. Fastest Migration Method

Use this method when the real frontend can be replaced by the supplied marketing frontend.

1. Create a backup branch of the real frontend.
2. Preserve all real `.env` files, API URLs, deployment configuration, analytics IDs, robots, sitemap, authentication routes, dashboard routes, and backend code.
3. Copy the contents of `react-js-migration/` into the frontend project.
4. Do not copy `node_modules/` or `dist/`.
5. Restore the real project's environment and deployment settings.
6. Run:

```bash
npm install
npm run build
```

7. Configure the production host to send all six frontend routes to `index.html`.
8. Connect the placeholder `#` links to the real SnapSeller routes.
9. Verify the checklist in section 14.

The build output is `dist/`.

## 4. Safe Merge into an Existing React JS App

Use this method if the production React app already contains login, signup, dashboard, APIs, extension pages, or other working routes.

Keep the existing repository and copy only:

```text
src/homepage.jsx
src/pricing-page.jsx
src/launch-components.jsx
src/promotion.js
src/styles.css
src/content/en.js
src/content/gu.js
src/content/hi.js
public/new_logo.png
```

Then:

1. Install `lucide-react` if the target does not already use it.
2. Import `styles.css` once from the target app's main entry.
3. Register the six routes with the target project's existing router.
4. Pass `en`, `gu`, or `hi` to the shared homepage/pricing components.
5. Enable first-visit language detection only on the English `/` homepage.
6. Keep the target app's providers, auth wrappers, API clients, dashboard, environment configuration, analytics, and error handling.
7. Build the entire production app, not only the marketing routes.

Equivalent route component mapping:

```jsx
<Homepage content={en} detectOnFirstVisit />
<Homepage content={gu} />
<Homepage content={hi} />

<PricingPage content={en} />
<PricingPage content={gu} />
<PricingPage content={hi} />
```

If the target already uses React Router, connect those components to the existing router. Do not add a second router. The standalone package uses a small pathname resolver in `src/main.jsx` so it can run without another routing dependency.

## 5. Important Hosting Rewrite

The six URLs must work when opened directly or refreshed. Configure the web host with a single-page-app fallback:

```text
/*  /index.html  200
```

Use the equivalent rewrite syntax for the actual hosting platform. Do not redirect every route to `/`; internally serve `index.html` while keeping the original browser URL.

The existing backend/API paths must be excluded from this fallback if they share the same domain.

## 6. Route and Content Architecture

The design is shared; the copy is independent.

| Content file | Used by |
| --- | --- |
| `src/content/en.js` | `/` and `/pricing/` |
| `src/content/gu.js` | `/gu/` and `/gu/pricing/` |
| `src/content/hi.js` | `/hi/` and `/hi/pricing/` |

Changing English copy must not automatically overwrite Gujarati or Hindi copy. Do not use runtime machine translation for these pages.

`src/main.jsx` handles route-to-language mapping, page selection, metadata, canonical URLs, language alternate links, document language, and the 404 fallback.

## 7. Language Behavior

On the first visit to `/`:

1. Read `localStorage["snapseller-language"]`.
2. If a saved Gujarati or Hindi preference exists, open its homepage.
3. Otherwise inspect `navigator.language` once.
4. Gujarati browser language opens `/gu/`.
5. Hindi browser language opens `/hi/`.
6. Other browser languages stay on `/`.
7. Save the chosen locale and `snapseller-language-set = "1"`.

A manual language selection must be saved and respected on future visits. The mobile header remains SnapSeller logo, language globe, and hamburger menu.

## 8. Design Authority

Do not redesign or recreate the site from screenshots.

Authority order:

1. `src/homepage.jsx`, `src/pricing-page.jsx`, and `src/launch-components.jsx` — markup and behavior
2. `src/styles.css` — colors, typography, spacing, layout, shadows, and breakpoints
3. `src/content/en.js`, `gu.js`, and `hi.js` — exact visible copy
4. `src/promotion.js` — launch dates, price phases, and price configuration

Keep the supplied class names and complete CSS together. If the existing app has conflicts with generic selectors such as `.button`, `.section`, `.shell`, `.nav`, or `.pricing`, scope the entire supplied stylesheet under one SnapSeller root class. Do not partially rename selectors.

Brand tokens:

| Token | Value |
| --- | --- |
| Navy text | `#201a3f` |
| Purple/navy section | `#27205f` |
| Orange | `#ff5b2c` |
| Supporting orange | `#ff8a32` |
| Cream | `#fff8ed` |
| Yellow | `#ffc342` |
| Mint | `#9ae3c3` |

Fonts are Space Grotesk for headings, Inter for English body, Noto Sans Gujarati for Gujarati, and Noto Sans Devanagari for Hindi.

## 9. Homepage Section Order

Keep this exact order:

1. Launch announcement bar
2. Sticky header
3. Hero and workflow preview
4. Trust bar
5. Seller problem
6. Six main features
7. Extension offer strip
8. How it works
9. Demo
10. Without vs with SnapSeller
11. Pricing/launch offer
12. Audience when allowed by the active pricing phase
13. Marketplace workflows
14. Free seller tools
15. Privacy strip
16. Final CTA
17. FAQ
18. Footer with React JS ZIP and developer handoff downloads

## 10. 2026 Launch Rules

All timestamps use Indian Standard Time (`+05:30`) and live in `src/promotion.js`.

| Phase | Time | Required UI |
| --- | --- | --- |
| `launch_only` | Before 1 Dec 2026, 12:00 AM IST | Only ₹0 Complete Enterprise Access |
| `launch_with_pricing` | 1–31 Dec 2026 | ₹0 launch access plus plans beginning 1 Jan 2027 |
| `regular` | From 1 Jan 2027 | Regular plans and 7-day Enterprise trial message |

Before 1 December 2026:

- Show `Complete Enterprise Access` at `₹0`.
- Show `Highest Plan Unlocked` with its check icon.
- Do not render the four regular comparison cards.
- Do not show `₹199`, `₹249`, or `₹499` in visible HTML.
- Show no credits, no daily limits, no credit card required, and fair usage applies.

The offer ends on 31 December 2026 at 11:59 PM IST. No automatic payment is taken. Do not hardcode these dates again in components or CSS.

## 11. Production Links to Confirm

Already connected:

| Action | URL |
| --- | --- |
| Signup/launch CTA | `https://snapseller.in/signup` |
| Sign in | `https://snapseller.in/login` |
| Support | `mailto:snapsellerteam@gmail.com` |

Homepage section links use `#features`, `#how`, `#pricing`, `#tools`, and `#faq`.

Some free-tool and footer links still use `href="#"` because their final production URLs were not supplied. Connect these to existing real routes before sign-off. Do not change their visual labels or layout.

## 12. Backend and Product Safety

This package is only the marketing frontend. Do not replace or remove signup/login logic, sessions, dashboard pages, extension APIs, payment services, databases, environment variables, analytics, GTM, robots, sitemap, or extension distribution logic.

Never place secrets in JSX, content files, the ZIP, or public environment variables.

## 13. Responsive Requirements

- Above 1050 px: full desktop navigation, two-column hero, desktop grids
- 761–1050 px: tablet layout and reduced gaps
- 760 px and below: logo + globe + hamburger, stacked menu and one-column content
- 390 px and below: reduced hero type, simplified preview, one-column footer
- No horizontal scrolling at 360 px

Keep the existing mobile menu and language submenu behavior.

## 14. Acceptance Checklist

### Build and routes

- [ ] `npm install` succeeds.
- [ ] `npm run build` succeeds.
- [ ] All six routes open directly and after browser refresh.
- [ ] Logo and fonts load.
- [ ] No TypeScript setup is required for the React JS package.

### Visual and responsive

- [ ] Header, sections, colors, fonts, spacing, shadows, and order match the approved site.
- [ ] Desktop, tablet, 760 px mobile, and 390 px small-mobile layouts work.
- [ ] There is no horizontal scrolling at 360 px.
- [ ] Mobile globe, hamburger, language submenu, and main CTA work.

### Language and SEO

- [ ] English, Gujarati, and Hindi content remains independent.
- [ ] First-visit browser-language detection works only when no preference exists.
- [ ] Manual language selection persists.
- [ ] Page title, description, canonical, and language alternate links match the active route.

### Launch and pricing

- [ ] Before 1 Dec 2026 only the ₹0 Enterprise launch card is visible.
- [ ] `Highest Plan Unlocked` appears above `Complete Enterprise Access`.
- [ ] ₹199, ₹249, and ₹499 are absent from the visible page before 1 Dec 2026.
- [ ] The countdown ends at 31 Dec 2026, 11:59 PM IST.
- [ ] December and January phase changes work without a new deployment.

### Existing application safety

- [ ] Login, signup, dashboard, APIs, database, payments, analytics, robots, and sitemap still work.
- [ ] Placeholder links are connected to real routes.
- [ ] No secret is included in public source.

## 15. Copy/Paste Instruction for the Developer or Coding Agent

> Migrate the SnapSeller marketing homepage and pricing pages from the supplied `react-js-migration` folder into the existing React JS frontend. Use the supplied JSX components, CSS, language content files, promotion configuration, and logo as the source of truth. Do not redesign, simplify, rewrite, or machine-translate the pages. Preserve the existing backend, authentication, dashboard, APIs, database, payment logic, environment configuration, analytics, robots, and sitemap. Implement all six English, Gujarati, and Hindi homepage/pricing routes with direct-refresh support, first-visit browser-language detection, saved language preference, mobile navigation, metadata, and the IST pricing state machine. Before 1 December 2026, render only ₹0 Complete Enterprise Access with the Highest Plan Unlocked badge and do not show the regular plan cards or ₹199/₹249/₹499. Connect placeholder links to existing production routes, build the complete application, and verify every item in this handoff checklist.

## 16. Developer Return Requirements

The developer should return:

1. A pull request or reviewable branch
2. A successful production build
3. Confirmation that all six URLs work on direct refresh
4. Confirmation that backend/dashboard/auth were preserved
5. Screenshots or a review URL for desktop and mobile sign-off