# El Cartel Auto — Website & Digital Presence

**Client:** El Cartel Auto S.R.L., Fălticeni, Romania  
**Type:** Business Website — Auto Repair & Insurance Damage Center  
**Stack:** Next.js 15 · TypeScript · Tailwind CSS · Vercel-style Standalone Deployment · cPanel/Passenger hosting

---

## Overview

El Cartel Auto is an authorized auto repair and insurance damage assessment center in Fălticeni, Romania. The client needed a fast, modern web presence that would convert visitors into phone calls — targeting drivers who've just been in an accident and need immediate, trustworthy help.

The result is a high-performance static-first website built with Next.js App Router, deployed as a standalone Node.js app on shared cPanel hosting — a technically non-trivial setup that required custom build scripting, asset path patching, and Apache/.htaccess configuration to work seamlessly without a dedicated server.

---

## What Was Built

### Pages
- **Homepage** — Hero with real-time business status pill (open/closed based on schedule), animated gallery carousel, service showcase, replacement car banner, location/map section, insurance partner grid, EU project logos bar, and a high-urgency CTA section
- **Despre Noi** — Company profile with service highlights and contact info
- **Informații Utile** — Step-by-step guide for accident victims: what to do, what documents to bring, how amiable constatation works
- **Constatări [Partner]** — 7 dynamic pages (one per insurance company: Asirom, Axeria, Generali, Grawe, Groupama, Hellas, Omniasig) with partner-specific content, benefits, and document checklists
- **Despre Proiect** — EU-funded project disclosure page (FEDR/Regio Nord-Est, cod MySmis 313736) with full grant information, objectives, and results
- **Legal pages** — Cookie policy, privacy policy, terms & conditions

### Key Features
- **Real-time business status** — "Open Now" / "Closed" pill computed server-side from business hours config, no external dependency
- **Drag-to-scroll gallery carousel** — Infinite auto-scrolling image strip with pointer event drag (mouse + touch), momentum on release, auto-resumes after 1.5s idle. Works identically on desktop and mobile
- **EU Logos Bar** — Shared component used on both homepage and project page, displaying the 4 required grant logos (EU, Guvernul României, ADR Nord-Est, Regio Nord-Est) spread full-width in a responsive grid
- **Dynamic insurance pages** — Single `[partner]` route generates 7 SEO-optimized pages from a typed data config, each with unique content, structured document lists, and direct call CTAs
- **WhatsApp & phone CTAs** — Persistent in navbar and throughout the page, driving the primary conversion action
- **HTTPS redirect** — Enforced via `.htaccess` rewrite rules

### Design
Bold, high-contrast automotive branding — black, white, and red (`brand-primary`). Heavy italic uppercase headings (custom `font-heading`), hazard stripe accents, and a dark/light section rhythm that keeps long pages visually engaging. Mobile-first responsive layout throughout.

---

## Technical Challenges

The most interesting engineering work on this project was the **deployment pipeline on shared cPanel hosting** — an environment not designed for Node.js apps.

- **Static asset path conflict** — cPanel's Passenger/Nginx stack blocked `/_next/static/` routes. Solved by post-build scripting that rewrites all asset references from `/_next/` to `/assets/`, renames problematic tilde characters in chunk filenames, and copies assets to a dedicated `assets/` directory served directly by Apache
- **Custom post-build script** — `scripts/post-build.mjs` patches compiled HTML and JS files in-place after every build, making the output work within the hosting constraints without modifying Next.js internals
- **Standalone output + manual asset sync** — Next.js standalone mode bundles `server.js` + minimal `node_modules`. A post-build `cpSync` step copies `public/` and `.next/static/` into the standalone directory so the server has everything it needs in one place
- **Git-based deployment** — The full build output is committed to the repository. Deployment is a single `git pull` on the server followed by a Passenger app restart — no CI/CD infrastructure required

---

## Results

- Sub-second page loads on mobile (fully static HTML, no client-side data fetching)
- All 7 insurance partner pages indexed and ranking for local search terms
- Clean, maintainable codebase — new pages (e.g. Despre Proiect) added in under an hour end-to-end
- EU grant compliance: dedicated disclosure page with all required logos and project information

---

*Built by Razvan Vlad — razvanvladpop@gmail.com*