Play video
Pause video

SY
Autopack

Packaging Machine Manufacturer Corporate Website

2024

SY Autopack website screenshot
Scroll
Project Type Corporate Website
Timeline 2024
Main Tech Filament, Laravel

Project Overview

SY Autopack Co., Ltd. is a professional powder and tablet packaging machine manufacturer in Taiwan. Their product lineup includes multiple automatic packaging machine models (SY-21A, SY-21P, SY-30A, SY-30P, etc.), serving pharmacies, medical institutions, and related industries.

In this collaboration, the client provided complete UI design mockups, and we were responsible for pixel-perfect front-end implementation. The website covers the homepage, company profile, product categories, consumable accessories, maintenance tutorials, location map, contact us, and recruitment pages, all presented in a dark tech-style design to convey the brand's professional image.

The back-end was built with Filament as the content management system, enabling the client to independently manage product information, consumable accessories, tutorial videos, and news updates without relying on developers for real-time content changes.

Core Features

01

Design-to-Code Implementation

Pixel-perfect implementation of the client-provided UI designs, covering the homepage, company profile, product categories, consumable accessories, maintenance tutorials, location map, contact us, and more

02

Filament Admin Panel

Built a back-office management system with Filament, allowing the client to independently manage product information, consumable accessories, tutorial videos, and news updates

03

Product Category Showcase

The homepage features a trending products section showcasing the powder/tablet packaging machine series, with product pages categorized by model, each with detailed specs, image galleries, and related consumables

04

Maintenance & Tutorial Section

A dedicated maintenance tutorial page providing equipment maintenance guides and operation tutorials to help clients extend equipment lifespan and reduce repair costs

Technical Details

Design-to-Code Implementation

The client provided complete UI design mockups, and we delivered pixel-perfect front-end implementation. This includes the homepage product carousel, company profile, product categories (paginated by model), consumable accessories listing, maintenance tutorial section, Google Maps location, contact form, and recruitment pages.

Filament Admin Panel

The back-end uses Filament as the content management system, allowing the client to add/edit product models, specifications, images, as well as manage consumable accessories, tutorial videos, news updates, and more.

Product Showcase System

Product pages are organized by model category, with each packaging machine featuring detailed specification tables, multi-angle product images, and links to related consumables. The homepage includes a "Trending Products" section to quickly guide visitors to popular models.

Maintenance & Tutorial Section

A dedicated maintenance tutorial page provides equipment maintenance guides and operation tutorials through images and videos, enhancing after-sales service quality and helping clients extend equipment lifespan.

Tech Stack

Backend

  • Filament Admin Panel
  • Laravel Framework

Frontend

  • TailwindCSS Styling
  • Responsive Layout
  • Product Carousel Component

Modules

  • Product Category Management
  • Consumable Accessories Management
  • Maintenance Tutorial Management

Workflow

  • Client-provided UI Designs
  • We handled coding & back-end

CONTACT US

Have a similar project? Let's talk

Whether it's a corporate website, product catalog site, or brand landing page, we can tailor a solution for you.

Contact Us
Visit Website