HS Distributions is a production marketing site for a long-established FMCG distributor serving Islamabad, Rawalpindi, and expanding national coverage. The site positions their logistics network — 120k+ sq ft warehousing, 70+ vehicles, 98.6% on-time delivery — and the major brands they represent (National Foods, CBL Biscuits, Tapal, Hamdard, and more).

Built as a Next.js 15 App Router frontend with no separate backend — contact and careers forms use server actions with Gmail SMTP via Nodemailer.

The homepage is a scroll-driven marketing experience with Framer Motion reveal animations:

• Hero carousel (Embla) featuring partner brands and nationwide distribution messaging
• About split section with company background since 1994
• Operations showcase — metrics grid (warehousing, fleet, on-time rate, daily routes) plus a bento-style facility gallery
• Services overview — inventory management, retail compliance, route optimization, warehousing
• Testimonials, CTA banner, contact coverage map, and leadership team sections

/catalogue — browsable product grid organised by category (Beverages, Grocery, Essentials) with SKUs for CBL Biscuits, National Foods recipe mixes, and other partner lines.

Excel viewer — an in-browser spreadsheet viewer (xlsx) opens the full product catalogue from a public .xlsx file with search, styled cell rendering, and download support — no external viewer needed.

/products — partner brand showcase. /about-us, /faqs, and /returns-exchange round out corporate content.

/contact-us — validated contact form (name, email, phone, company, service, message) submitted via sendContactEmail server action; HTML email delivered to the business inbox.

/careers — job application form with department selection, cover letter, and optional resume attachment (sendJobApplication).

Both flows use Nodemailer + Gmail SMTP with connection verification before send.

UI built on Radix UI primitives (dialogs, sheets, forms) with Tailwind CSS v4. Mobile nav uses a slide-over sheet; homepage navbar switches from transparent overlay to solid on scroll.

Content is largely data-driven in page components (hero slides, product arrays, operations metrics). Legal pages cover privacy, terms, and sitemap. WhatsApp float component is wired but optional in layout.