Skip to main content
  • Corporate website
  • Service catalogue
  • Contact API

LIPACK

Sector
Industry
Delivered as
  • Website
Year
2025
Languages
FR / EN

“Votre Partenaire en Impression et Marquage Industriel Au Maroc”

(The project)

A bilingual site for an industrial printing and marking company, with service pages organised by industry, a Laravel contact API and all content kept separate from the interface.

(Context)

Industrial marking, clearly presented.

LIPACK offers marking and traceability, offset and digital printing, packaging, signage, promotional items and installation, presented against the standards of automotive, food and pharmaceutical, electronics and energy clients.

The site is a React 19 single-page application talking to a Laravel back end with Sanctum for contact handling, with the content of every service centralised as data.

(Key figures)

service pages
7
industry segments
4
bilingual
FR / EN
themes, light and dark
2

The decisions that shaped it

  1. Front end and API kept apart

    A static React front end talks to a Laravel back end secured with Sanctum, which exposes the contact endpoint.

    Clean split

  2. Content as data

    Service content and copy are centralised in data and translation modules, so a new service or language needs no component changes.

    Scalable content

  3. A route per service

    Marking, offset, digital, packaging, signage, promotional items and installation each have their own route, fed by a dedicated data module.

    Structured catalogue

  4. Preferences in context

    Language and theme are handled by context providers wrapping the application, with a matching pair of hooks.

    Cross-cutting UX

(How it works)

Browsing the services

  1. Industry framing

    Marking solutions are segmented by industry (automotive and aerospace, food and pharma, electronics, energy and construction), with an emphasis on standards.

  2. Service pages

    Each service route renders from its data module, with page transitions keyed on the route.

  3. Contact

    A Turnstile-protected form posts to the Laravel endpoint, which emails the request to the company.

Captures of the delivered build, grouped by product. Select one to see it at full size.

Technology

Front end
  • React 19
  • Vite 7
  • React Router 7
  • Tailwind CSS 4
State
  • Language context
  • Theme context
Search
  • react-helmet-async
Motion
  • Framer Motion
Back end
  • Laravel 12
  • Sanctum

(Next project)

Law Firm

Legal, 2025

Your project could be the next system we build.