Play video
Pause video

AviviD

MarTech Corporate Website

2024

AviviD website screenshot
Scroll
Project TypeCorporate Website
Timeline2024
Core TechFilament, Laravel
Visit Website

Project Overview

AviviD is one of Taiwan's leading first-party data companies, integrating diverse data sources from media, telecom, invoices, and retail to provide AI-driven precision marketing solutions. The client already had a mature product line and brand identity in the industry.

In this collaboration, the client provided complete UI design mockups, and we were responsible for precisely converting those designs into web pages. The website needed to support Traditional Chinese, English, Indonesian, Vietnamese, and Japanese — five languages in total — covering solutions, product services, resource articles, company information, and more.

On the backend, we built a multilingual content management admin panel with Filament, enabling the client's marketing team to independently maintain website content across all languages without relying on engineers for real-time updates.

Core Features

01

Dark / Light Mode

The frontend supports dual Dark / Light theme switching. Users can automatically adapt based on preference or system settings. All page elements are color-tuned for both modes to ensure reading comfort.

02

Filament Admin Panel

Built a multilingual content management admin panel with Filament, enabling the client's marketing team to independently maintain page content, news, solutions, and other data across all supported languages.

03

Responsive Layout

Based on the client's desktop and mobile design mockups, we precisely replicated the layout at each breakpoint, ensuring an excellent browsing experience from large screens to mobile devices.

04

Interactive Effects

Implemented scroll animations, dynamic number counters, multiple carousels, and other interactive effects as specified in the design mockups, faithfully delivering the visual experience the client envisioned.

Technical Details

Design-to-Code Implementation

The client provided complete UI design mockups, and we were responsible for precisely converting them into web pages. This included the homepage, solutions, product services, resource articles, company information, and more — each page faithfully rendered according to the design specifications.

Filament Admin Panel

The backend was built with Filament to create a multilingual content management admin panel, enabling the client's marketing team to edit page content, news, solutions, and other data across five languages without engineering assistance for real-time updates.

Dark / Light Mode

The frontend supports Dark / Light dual theme switching, with automatic adaptation based on user preference or system settings. All page elements are color-tuned for both modes to ensure reading comfort across different environments.

Interactive Effects

Various frontend interactive effects were implemented according to the design specifications, including scroll-triggered animations, dynamic number counters, and multiple carousel components. The entire site uses responsive layout, precisely matching the design breakpoints from desktop to mobile.

Tech Stack

Backend

Frontend

  • TailwindCSS Styling
  • Dark / Light Mode
  • Responsive Layout

Interactions

  • Scroll-triggered Animations
  • Dynamic Number Counters
  • Carousel Components

Division of Work

  • Client provided UI mockups
  • We handled coding & backend

FAQ

Why does this project split responsibilities as "client provides the design, we handle the build and backend"?

AviviD already has a mature brand identity and an in-house design team, so the mockups were finalized and what they needed was a development team that could faithfully reproduce the visuals and connect them to a maintainable admin backend. This split lets the client's design language stay fully intact while we focus on pixel-accurate implementation, interactive effects, and the Filament backend architecture — a common collaboration model for enterprise clients whose design is already locked in.

For a site supporting five languages, how does the marketing team maintain content from the backend?

The backend is built with Filament as a multilingual content management panel. Page content, news, and solution data across Traditional Chinese, English, Indonesian, Vietnamese, and Japanese can all be edited and published directly by the marketing team, without needing an engineer to touch code or redeploy every time copy changes.

How long does a "design handoff + multilingual CMS" project like this typically take?

This project was completed in 2024, covering five-language layouts across solutions, products, resources, and company pages, plus a Filament multilingual admin panel and interactive effects like Dark/Light mode. For an enterprise site with a finalized design and a moderate number of pages like this, development typically takes 6–10 weeks, depending on the number of languages and the complexity of the interactive effects.

CONTACT US

Have a similar need? Let's talk

Whether it's a corporate website, multilingual site, or data showcase page, we can build a tailored solution for you.

Contact Us