4.7 (81)
Serre Chevalier, France
Croisière, Catamaran, voilier, adulte côte espa ...
- 6 - 11 ans
- Tous les niveaux
- 7 jours/ 6 nuits
665 €/ pers
Tarif “à partir de”, hors transport
Transports disponible à partir de X villes
Component showcase
Every composition built from the Trek à Madère frames. Local page, no Figma source.
Components are mobile-first with md: overrides at 768px. This page shows whichever breakpoint your viewport is currently at — resize the window to see the other. Photos are placeholders: the hero frames in Figma are empty and the sub-brand logo is a Figma-only asset.
Type scale
Semantic tags, node-backed sizes. h1 40→56, h2 24→36, h3 18→20, h4 16→18. All headings use line-height: normal and no letter-spacing, matching every Figma node. h5 and h6 have no Figma counterpart and are unverified.
The page title above is the h1 sample — this page keeps a singleh1, per the UCPA semantic constraint.
h2 — Pourquoi choisir l'UCPA ?
h3 — Tout inclus esprit léger
h4 — Sous-titre
h5 — unverified
h6 — unverified
p — corps de texte par défaut, 16px.
Breadcrumb
Desktop 28033:17922 · mobile 28087:6968. Figma draws flat text with no links (Improvements #3a); here, per request, every crumb except the current page is a real link built from our ui/button atlink/default, rendered as an <a>. That is why the trail now shows underlines and the button's focus/default shadow on tab. Still a flat row of anchors, not a semantic @shadcn/breadcrumb — the source is a detached frame. Items accept either a bare label (links to #) or a{ label, href } pair.
Desktop trail — no home icon, first chevron grey at md:. Crumbs carry hrefs.
Mobile trail — leads with a home icon. Bare labels fall back to href="#".
HeroGallery
Two components and a composition, because desktop and mobile are not one design.HeroMosaic 28067:15603 is three rounded tiles with a scrim and a "Voir plus de photos" CTA. HeroCarousel 28256:14289 isone square-cornered image with a scrim, dots and a "1/6" counter — no CTA. They share only the image-over-basic/popover treatment and the scrim gradient.
Both are shown below regardless of your viewport, since the point of this page is to see every component. Both are fully wired: click any photo to open the lightbox — 28250:11532 landscape, 28235:8618 portrait. Its scrim isrgba(15,31,40,0.95) with a 5px backdrop blur, so the page stays faintly visible behind it; 24px close inset 24 from top and right; 50px arrows; the photo keeps the mosaic's radius/lg over basic/popover. The six placeholders alternate landscape and portrait, so paging through the lightbox shows both designed shapes — a 3:2 box (Figma 933×622,paysage) and a 2:3 one (480×720).
Bento — the desktop hero. Click a tile for the lightbox. Click"Voir plus de photos" and the grid expands to reveal photos 4–6; it does not open the lightbox. That expanded layout isinvented — Figma has no expanded state at all (Improvements #72).
Carousel — the mobile hero, constrained to its designed 390px width. Drag or use the dots, click a photo for the lightbox. Square corners, unlike every bento tile. No CTA — Figma gives mobile none.
1/6
Two things here are still not in Figma. The swipe behaviour does not exist, so it comes from @shadcn/carousel per Decision #35 (Improvements #63). And the dot indicator is a flat 70×5 SVG, rebuilt as markup from the render plus arithmetic — 6×5px + 5×8px gaps = exactly 70px — so dot size, gap and colour are inferred (Improvements #64).
The desktop CTA overrides its Figma master on four properties — gap 6→2, px 10→12, py token, and justify-end→center — so it cannot be used as a plainlink/lg button (Correction #15). Its text is hardcoded#f8fdff because text/primary resolves dark there via a per-node override and would be near-invisible on the scrim (Improvements #40).
Lightbox arrows are at a symmetric 24px inset, matching the close button. Figma has left 66 and right 24, which reads as a mistake on screen — a deliberate deviation, one line to revert (Improvements #67).
Avis
The notation frame appears four times — desktop hero28033:17971, desktop review 28145:19121, mobile hero28087:6993, mobile review 28217:28411 — and isbyte-identical in all four. Same gap, sizes, text styles and star asset. No md: overrides. A plain frame, not a component instance, so it is reproduced as drawn with no added semantics.
default — 18px outline star, score in Body/Strong 16 Semibold, count underlined. The dot between them is a reallist-disc marker: Figma draws the count as a one-item bulleted list and uses the bullet as a separator. Reproduced as-is (Improvements #48).
4.5
default + trustpilot slot — the review-section placement. Not a separate design: the wrapper is just the row above plus the logo atspacing/sm. The logo is a Figma-only SVG at a fractional 79.539×18.072 and is not shipped, so the box below is a placeholder.
4.5
compact — the product-card pill: 12px star, 12px medium score,(89) in light. White on text/on-brand, so it is shown on a dark block here because it is illegible anywhere else. Its values are copied from our CardProduit build, not re-read from Figma — provenance is one step removed.CardProduit is not refactored to use it; the cards are frozen.
The two renderings share the pattern and almost nothing else — star 18px vs 12px, type 16 semibold vs 12 medium, count 84 avis underlined vs (89)light. Only the 4px gap coincides, and it is raw in one and tokenised in the other (Improvements #47). Also note the star here is outline while ReviewCard's five stars are filled.
Button — shadcn, with UCPA values
The plain shadcn button from @/components/ui/button — there is no UCPA wrapper. Its cva carries UCPA's values, so variant and size are shadcn's own API and icons are just children, in order. Set 37:931 holds ~264 symbols; the two pages place well over fifty instances — the desktop header alone holds nine, the mobile footer around twenty — resolving to eight combinations, seven of which the cva maps. Sizes are not interchangeable across variants: Outline never appears atdefault, Link never at sm, Ghost never at default, Secondary only at sm. Widths come from the labels; Figma fixes only the heights. The eighth combination, a Ghost pinned to State=Focus, cannot be built — see Improvements #45.
default, secondary, destructive and the threeicon-* sizes are left exactly as shadcn ships them — not UCPA, because no instance on either page places them. Not shown below: their colour classes emit no CSS in this project (Improvements #42).
outline/sm · 32px · radius 8 · 28064:56545 — and outline/lg · 48px · radius 12 · 28235:10730. Outline is the only variant whose radius tracks size, and the only one with no vertical padding.
link/default · 32px · Medium 14 · 28104:20790 — and link/lg · 36px · Semibold 16 with a leading chevron · 28033:20792. Both underlined at rest and justified to the end, not centred. Hover them: the underline is now removed on hover — that behaviour lives in the linkvariant itself (hover:no-underline), not on these instances. It replaces the old no-op hover:underline (Improvements #43).
ghost/sm · 32px · gap 4 · Medium 14 · 28342:11949 — and ghost/lg · 36px · gap 6 · Bold 16 with a trailing chevron · 28217:27280. Same nominal lg step as the two above, three different type treatments across them (Improvements #33).
secondary/sm · 40px · solid basic/secondary ontext/on-brand · 28342:11959, the desktop header CTA. Note Secondary's sm is 40px where Outline's and Ghost's are 32px — the library scale differs per variant (Improvements #34). This variant was missed on the first collection pass; see Correction #14.
Tab to any button to see the focus treatment: Figma's focus/default drop shadow (#D12D004D, spread 3), replacing shadcn's ring. No instance on either page uses the Focus state, so the token is designed but never placed (Improvements #39).
Hover comes from shadcn, not Figma — a design file can show the end state but not the transition, and the Hover masters are placed on neither page (Decision #35). Outline and Ghost lighten to accent #f5f5f5 withaccent-foreground #171717 text. Link removes its underline on hover: shadcn's original hover:underline was a no-op because UCPA's Link is underlined already, so the variant now uses hover:no-underlineinstead (Improvements #43). There is no pressed state — shadcn defines none.
FeatureCard
Desktop 28104:19801 · mobile 28217:28386. Body colour is#100D08 from the wireframe palette, not a UCPA token — reproduced verbatim (Improvements #16). The first card passes its title as an array to reproduce the desktop hard line break; it collapses to one line at mobile.
PhotoCard
Desktop 28067:15467 · mobile 28237:10776. One component for both the destinations and activities rows. Captions verified withget_design_context — the layer names are stale (Improvements #21).
Destinations row
Suisse
Népal
Pérou
Activities row — same component
Course d’orientation
Trail
Canirando
CardProduit — 8 states
Desktop set 28357:22106 · mobile 28362:25187. The overlay pill is translucent dark at mobile and opaque white at desktop — the two frames genuinely disagree and both are reproduced (Improvements #25). The brand slot is empty here because the sub-brand logo is a Figma-only asset.
par-defaut
depart-garanti
Départ garanti
4.7 (81)
Serre Chevalier, France
Croisière, Catamaran, voilier, adulte côte espa ...
- 6 - 11 ans
- Tous les niveaux
- 7 jours/ 6 nuits
665 €/ pers
Tarif “à partir de”, hors transport
Transports disponible à partir de X villes
depart-garanti-ext
Départ garanti à partir de 5 inscrit(s)
4.7 (81)
Serre Chevalier, France
Croisière, Catamaran, voilier, adulte côte espa ...
- 6 - 11 ans
- Tous les niveaux
- 7 jours/ 6 nuits
665 €/ pers
Tarif “à partir de”, hors transport
Transports disponible à partir de X villes
dernieres-places-dispos
Dernières places disponibles
4.7 (81)
Serre Chevalier, France
Croisière, Catamaran, voilier, adulte côte espa ...
- 6 - 11 ans
- Tous les niveaux
- 7 jours/ 6 nuits
665 €/ pers
Tarif “à partir de”, hors transport
Transports disponible à partir de X villes
indisponible
Indisponible
4.7 (81)
Serre Chevalier, France
Croisière, Catamaran, voilier, adulte côte espa ...
- 6 - 11 ans
- Tous les niveaux
- 7 jours/ 6 nuits
Dates et tarifs à venir
complet
Complet
4.7 (81)
Serre Chevalier, France
Croisière, Catamaran, voilier, adulte côte espa ...
- 6 - 11 ans
- Tous les niveaux
- 7 jours/ 6 nuits
Séjour complet
promo
Promo -10%
4.7 (81)
Serre Chevalier, France
Croisière, Catamaran, voilier, adulte côte espa ...
- 6 - 11 ans
- Tous les niveaux
- 7 jours/ 6 nuits
4 665 €4 338,25 €/ pers
Tarif “à partir de”, hors transport
Transports disponible à partir de X villes
deux-badges
Départ garanti Promo -10%
4.7 (81)
Serre Chevalier, France
Croisière, Catamaran, voilier, adulte côte espa ...
- 6 - 11 ans
- Tous les niveaux
- 7 jours/ 6 nuits
4 665 €4 338,25 €/ pers
Tarif “à partir de”, hors transport
Transports disponible à partir de X villes
CardArticle
Desktop 28104:20775 · mobile 28268:30576, from the "Ces articles pourraient te plaire" section. Three per breakpoint. The card frame is unnamed and not a component instance, so it is hand-built with no added semantics — the title is a<p> in Figma and stays one. Its two badges and its CTA are real instances, so they map to @shadcn/badge (variant outline) and ourui/button at link/default.
Both badges read literally Badge and the body is lorem — that is the design's own placeholder content, reproduced rather than substituted (Improvements #27). No scrim on the image, unlike CardProduit. Resize past 768px to see the four differences: root gap 12 → 16, image 202 → 261, title 18 → 20, body 14 → 16.
Bien préparer son séjour à Madère, tous les conseils
Torem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora
Badge
Badge
Bien préparer son séjour à Madère, tous les conseils
Torem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.
Badge
Badge
Un titre court
Sans badges, pour montrer que la rangée du bas garde le CTA à mi-largeur.
The CTA is flex-1 in Figma, so it always occupies half the bottom row whatever the label says — that is why it measures exactly 171px on desktop and 122.5px on mobile (Improvements #54). The third card drops the badges to show the CTA holding its half regardless.
ReviewCard
Desktop 28023:16920 · mobile 28217:28419. Its padding, radius and two internal gaps are bound to shadcn design-kit tokens rather than UCPA ones — reproduced as raw values so the leakage stays visible (Improvements #15). 4.5 renders as four filled stars plus one empty; there is no half-star asset in the design.
FaqAccordion
Desktop 28063:55845 · mobile 28218:28584. The two frames areidentical — this is the only component with no responsive overrides. It is a real shadcn Accordion instance in Figma, so it maps to @shadcn/accordion rather than being hand-reproduced. Interactive: click a question.
The copy below is verbatim from Figma — shadcn's unreplaced English demo FAQ, sitting on a French page under "Besoin d'aide ?" (Improvements #27). Padding binds to UCPA'snumeric spacing scale while line-height binds to the semantic one (Improvements #30).
Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.
Footer
Desktop 28064:57619 (from the "Copy" file) · mobile 28218:28729. Dark surface (basic/secondary #0f1f28), full width. Same content both breakpoints, two arrangements — chip blocks side-by-side → stacked, 3 chips/row → 2, and the bottom brand/links split → stacked. Rendered full-bleed below the gridline frame, as it sits on a real page. Resize past 768px to switch layouts.
Two deviations, both flagged in the component: the "Voir nos…" ghost CTAs are forcedwhite because their Figma token resolves dark-on-dark (invisible as drawn); and the mobile frame's missing bottom padding is reproduced (pb-0on mobile, md:pb-[44px] on desktop). Chips reuse ui/buttonoutline/sm with dark-surface colours; all links are placeholders (#).