Panacea Paris Mobile Responsive Build & UI Polish
Gregoire Geoffroy
Like this project
Posted Oct 10, 2025
Adapted Panacea’s desktop LP for mobile/tablet, unified the navbar, rebuilt sliders and infinite logo marquee, fixed spacing/alignments, and applied light SEO.
Panacea Paris - Mobile Responsive Build & UI Polish
Client: Panacea Paris
Website: panacea.paris
Role: Webflow Developer (Responsive, UI/UX, Light SEO)
Tools: Webflow, custom JS, Finsweet Attributes, Lighthouse
Overview
Brought in to finalize a desktop landing page and adapt it for tablet and mobile. Scope included responsive layout, navigation UX, slider behavior, visual refinements, and basic SEO hygiene.
Objectives
Translate desktop design to mobile/tablet with a consistent UI.
Unify navigation across breakpoints and improve link behavior.
Fix sliders and marquee animations for smooth, infinite motion.
Address spacing, alignment, and minor desktop polish.
Apply quick SEO checks (headings, images, OG basics).
What I Did
Responsive & Layout
Built mobile and tablet variants, fixing overflowing images (e.g., Équipe), section stacks, and spacing.
Normalized navbar across desktop/tablet/mobile, adjusted logo sizing, and cleaned duplicate classes.
Tuned typographic scaling (e.g.,
clamp() for nav link text) to avoid line breaks on small screens.Adjusted margins and centered/left-aligned hero blocks as requested; reduced button gaps.
Sliders & Animations
Reworked “Nos marques” as a proper slider:
Added arrows on mobile & tablet.
JS enhancement to start with MYU first on mobile.
Prevented page scroll while swiping the slider.
Rebuilt the logo marquee to loop infinitely and fixed gradient mask/visibility in preview.
Design Polish (Desktop)
Minor visual corrections for consistency, plus alignment of header/logo/buttons.
Balanced spacing between marquee and manifesto blocks.
SEO & Hygiene
Corrected heading hierarchy for better semantics.
Optimized hero/section images for size and clarity.
Flagged missing favicon, webclip, Open Graph image, titles & meta descriptions.
Noted invalid legal/FAQ links for future completion.
Results
✅ Seamless mobile & tablet experience with consistent navigation
✅ Smooth, infinite logo marquee and brand slider with proper controls
✅ Cleaner, more maintainable classes and spacing
✅ Better semantic structure and image performance