Medical Aesthetics Biotech Corporate Website
2025
UNISON BIO is a Taiwan-based distributor in the medical aesthetics and biotech industry, representing multiple internationally renowned device and consumable brands, serving thousands of partner clinics and medical institutions. To support international branding and digital transformation, the corporate website was rebuilt to integrate brand identity, product catalog, partner clinics, news, and DEMO reservation.
The frontend uses Astro 5 SSR with Vue 3 interactive components to implement bilingual routing, hero carousel, featured products, partner clinic network, animated counters, and other motion effects — delivering the visual quality of an enterprise-grade brand site.
The backend is built on Laravel + GraphQL, with a Filament admin panel. The brand team can maintain products, news, partner clinics, banners, SEO settings, and multilingual translations themselves — fully supporting daily business operations.
A large Hero Banner Carousel showcases brand visuals and flagship products. Supports multilingual images and dynamic headlines to strengthen first-screen brand recall.
Dynamically loads product data from the backend via card layout. The homepage highlights flagship devices and consumables, with click-through to product category pages.
Multiple product lines including Dermapen, DeMD, Soleo, Carbon Wave, CryoPen, Celluma, and Cytoderma — with category switching and rich content introduction.
Lists thousands of partner clinics by region, making it easy for consumers to find the nearest location. Batch import and maintenance supported in the admin panel.
Categorized news and announcements with Markdown editing, cover images, and scheduled publishing. The frontend filters and displays by category.
Built with Filament, the comprehensive admin panel manages products, brands, news, partner clinics, homepage banners, SEO settings, and multilingual translations.
Astro server-side rendering with i18n routing (/ for Chinese, /en for English). All translation fields are fully mapped across frontend and backend, meeting international SEO requirements.
A floating reservation button on the homepage lets users fill out a DEMO reservation form. Data is written to the backend and triggers email notifications to sales, shortening the conversion path.
The frontend is built with Astro 5 in server-side rendering (SSR) mode, deployed on Netlify. First-screen content is fetched in real time from the backend GraphQL API and pre-assembled, ensuring SEO crawlers and social share previews receive complete content. Interactive components use Vue 3 Islands architecture and only hydrate when needed, maintaining excellent loading performance.
Multilingual support is implemented via URL prefix routing: Chinese at /, English at /en. Every page has corresponding translations, combined with hreflang tags and multilingual Open Graph metadata, meeting international SEO standards. Translation fields are dynamically loaded from the admin panel for real-time brand maintenance.
All frontend-backend data exchange happens via GraphQL, covering homepage banners, featured products, product categories, partner clinics, news, about us, and SEO settings. Type-safe schema design streamlines frontend-backend collaboration and allows precise field retrieval, reducing mobile bandwidth consumption.
The admin panel is built with Filament, covering product management (categories, brands, specs, image gallery), partner clinic batch import, news scheduling, hero banner management, SEO field settings, multilingual translation switching, and activity logs — enabling the brand team to operate independently without engineering involvement.
The homepage features a large hero carousel, ribbon decoration animations, partner clinic marquee, animated number counters for about-us stats (IntersectionObserver + easeOutExpo), and a fixed side navigation bar — elevating overall brand quality and user engagement time.
A persistent DEMO reservation button in the bottom-right opens a reservation form where users can submit their needs. Data is written via a GraphQL mutation to the backend and triggers an email notification, shortening sales response time.
CONTACT US
Whether it's a brand corporate site, multilingual SSR, or product catalog with admin panel, we can craft a tailored solution for you.
Contact Us
