# Fruxinfo — Next.js Website

Restructured copy of the Fruxinfo marketing site (Next.js 15, App Router, Tailwind v4).
All public URLs are identical to the live site — only the internal structure was cleaned up.

## Getting started

```bash
npm install
npm run dev      # http://localhost:3000
npm run build    # production build + sitemap (postbuild)
```

## Configuration

API base URL comes from the environment (see `.env.example`):

```
NEXT_PUBLIC_API_BASE_URL=https://admin.fruxinfo.com/api
```

Copy `.env.example` to `.env.local` for local development.

## Project structure

```
src/
├── app/                          # App Router — route groups don't affect URLs
│   ├── layout.tsx                # root layout (GTM/GA, metadata, fonts)
│   ├── page.tsx                  # home
│   ├── globals.css               # Tailwind v4 import + @font-face
│   ├── blog/                     # /blog + /blog/detail/[slug] (dynamic, SSR)
│   ├── (company)/                # about, team, contact
│   ├── (services)/               # services, web-development, web-design,
│   │                             #   app-development, graphic-design, digital-marketing, seo
│   ├── (portfolio)/              # application-portfolio, website-portfolio, case-study (index)
│   ├── (case-studies)/           # 18× case-study-<brand>/page.tsx (thin, data-driven)
│   ├── (careers)/                # career + 3 job-detail + 3 career-form pages
│   └── (policies)/               # privacy, refund, terms, payment policy
├── components/                   # shared components (Navbar, Footer, OurTeam, popups, …)
│   ├── case-study/               # CaseStudyBanner, ProjectOverview, ThankYou (shared template)
│   ├── career/                   # JobDetail (shared template)
│   └── career-form/              # ContactFrom, ContactLocation + style.css (shared)
├── data/
│   ├── case-studies/             # types.ts + one data file per brand (18)
│   └── countryData.js            # country codes for phone inputs
├── lib/
│   └── api.ts                    # single API layer (forms via axios, blog via fetch)
└── middleware.ts                 # 410 Gone for retired legacy URLs
public/
├── images/                       # site images
├── fonts/, Manrope/, tiemposfont/
└── robots.txt, sitemap*.xml, favicon…
```

## Conventions

- **URLs are frozen for SEO** — route groups `(...)` organize folders without changing URLs. Never rename a route folder.
- **New case study** — add `src/data/case-studies/<brand>.ts` (copy an existing one) + a thin `src/app/(case-studies)/case-study-<brand>/page.tsx` (copy an existing one, change the data import). No new components needed.
- **New career opening** — same pattern: pass role data to the shared `JobDetail` / career-form components from a thin page.
- **API calls** — always go through `src/lib/api.ts`; never hardcode the backend URL.
- **Shared components** — live in `src/components/`, imported as `@/components/...`.
- **Page-local components** — stay in that route folder's `components/` subfolder.
- **Redirects / SEO** — 301s live in `next.config.js`; dead legacy URLs return 410 via `src/middleware.ts`. Sitemap is generated by `next-sitemap` on `postbuild`.
- Retired career pages/forms were deleted; their URLs still 301 to `/career` via `next.config.js`.
