Back to project
Case Study

SIPA Packaging - Multilingual Client Preview Case Study

Public case study for an unfinished client preview, focused on multilingual frontend architecture, industrial product communication, SEO, and responsive UI.

Overview

SIPA Packaging is a commercial preview for an Algerian offset printing and cardboard packaging company. It is presented as an unfinished client preview, not a production launch, with focus on frontend implementation, localization, SEO, and deployment.

Problem

SIPA needed more than a brochure site: technical packaging capabilities, product categories, regulated-market credibility, company history, policies, and contact information in French and English.

Context

The repository is private, so the portfolio shares only the Vercel preview and sanitized screenshots. The site uses Next.js 16, React 19, next-intl, Tailwind CSS 4, local imagery, production media, and localized pages.

My Role

Freelance frontend implementer. The work covers website structure, responsive UI, localization, media sections, SEO metadata, sitemap/robots, and Vercel preview deployment. The repository stays private.

Goals

  • Present SIPA as an industrial packaging provider rather than a generic landing page
  • Support English and French content without duplicating page implementation
  • Make product capability easy to scan for pharmaceutical, agro-food, labels, and leaflet use cases
  • Create a shareable preview link while the project remains unfinished
  • Include SEO foundations so the site is ready for a production domain later

Technical Decisions

  • Use Next.js App Router with localized dynamic routes so every public page can be served under /en and /fr
  • Use next-intl message files for content-heavy pages instead of hard-coding copy inside every component
  • Split the site into reusable commercial sections: hero, stats, company, portfolio, markets, products, services, policies, footer, and contact
  • Use local media assets for product catalog images and production videos so the visual identity is tied to the actual business domain
  • Add page-level metadata, Open Graph fields, canonical alternates, JSON-LD, robots, and localized sitemap entries
  • Use Framer Motion and small interaction components for polish while keeping the layout readable and business-focused
  • Add cache and security headers in the Next config for preview deployment requirements

Architecture

Visitors land on a locale-aware route. next-intl resolves language, App Router serves the page, and JSON messages feed sections. Pages combine local images, production videos, navigation, SEO helpers, JSON-LD, sitemap, robots, and Vercel deployment.

Architecture Map

Mermaid
flowchart LR
  Visitor["Visitor or client lead"] --> Middleware["next-intl locale middleware"]
  Middleware --> Routes["Next.js App Router localized routes"]
  Routes --> Pages["Company, products, portfolio, markets, services, policies, contact"]
  Messages["EN/FR JSON message files"] --> Pages
  Pages --> Sections["Reusable commercial sections and layouts"]
  Sections --> Media["Local product images and production videos"]
  Sections --> Motion["Framer Motion interactions"]
  Pages --> SEO["Metadata, Open Graph, JSON-LD"]
  SEO --> Discovery["Localized sitemap and robots"]
  Routes --> Vercel["Vercel client preview deployment"]

Case Study Screenshots

5 views
Desktop homepage preview with industrial branding, localized navigation, and production-focused hero media.
Products page for pharmaceutical boxes, agro-food cartons, labels, and leaflets with spec-heavy commercial content.
Portfolio/catalog page with filtered product work for pharmaceutical, agro-food, labels, and leaflets.
French localized homepage proving the EN/FR content system and language-aware routing.
Mobile homepage layout with responsive typography, compact navigation, and preserved brand/media hierarchy.

Key Features

  • Localized EN/FR homepage with language-aware navigation and responsive mobile menu
  • Company, products, portfolio, markets, services, policies, and contact pages
  • Product catalog for pharmaceutical boxes, agro-food cartons, labels, and notices/leaflets
  • Portfolio/catalog page with category filtering for product work
  • Policy pages covering quality, environment, CSR, and logistics
  • SEO helper for metadata, Open Graph, canonical URLs, and locale alternates
  • JSON-LD structured data, robots route, and localized sitemap generation
  • Vercel preview deployment suitable for sharing as a client-preview artifact

Challenges

  • Keeping claims clear because the project is not finished or production-launched
  • Making an industrial website look professional without drifting into a decorative marketing template
  • Handling long bilingual commercial copy while keeping pages scannable
  • Balancing visual media, motion, and performance in a business site with many product assets
  • Keeping the repository private while providing screenshots and deployment links

Results / Outcomes

  • Created a client-preview site with public Vercel access and no public repository exposure
  • Covers client frontend work: content architecture, localization, responsive UI, SEO, and deployment
  • Includes a commercial client project without overstating completion or production status
  • Provides homepage, product, portfolio, French, and mobile screenshots

What I Learned

  • Unfinished client work can be portfolio-worthy when the preview status is clear
  • Industrial sites benefit from dense, specific product information more than generic hero copy
  • Localization is easier to maintain when copy lives in structured message files from the beginning
  • Preview deployments are useful, but wording should not imply a final production launch