@sarimarcus/content-sites-tourism 0.12.0 → 0.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/package.json +3 -3
- package/src/sections/ItineraryTeaser.astro +60 -34
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
All packages in the platform release in lockstep; entries are per release version.
|
|
4
4
|
|
|
5
|
+
## 0.12.1 (2026-10-01)
|
|
6
|
+
|
|
7
|
+
- `ItineraryTeaser` takes Granada's journey design (owner decision): badge, numbered stops with an optional duration each, large CTA (SLA-2739).
|
|
8
|
+
|
|
5
9
|
## 0.12.0 (2026-10-01)
|
|
6
10
|
|
|
7
11
|
- `./sections`: WalkStops, RankedListingRow, WhoItsFor, NeighborhoodCategory, SituationalNav, NeighborhoodHubHero (bundled controller, once per instance), ItineraryTeaser, HomeMonuments. `./templates`: NeighborhoodFacetPage, ProximityFacetPage, TierFacetPage — the route keeps data, paths, SEO and schema; the template owns the repeated markup (SLA-2739).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sarimarcus/content-sites-tourism",
|
|
3
|
-
"version": "0.12.
|
|
3
|
+
"version": "0.12.1",
|
|
4
4
|
"description": "City-tourism vertical: city-entity components, pages templates and utilities for the tourism sites.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"astro": "^7.0.6",
|
|
37
37
|
"tailwindcss": "^4.1.18",
|
|
38
|
-
"@sarimarcus/content-sites-core": "0.12.
|
|
39
|
-
"@sarimarcus/content-sites-ui": "0.12.
|
|
38
|
+
"@sarimarcus/content-sites-core": "0.12.1",
|
|
39
|
+
"@sarimarcus/content-sites-ui": "0.12.1"
|
|
40
40
|
}
|
|
41
41
|
}
|
|
@@ -1,17 +1,20 @@
|
|
|
1
1
|
---
|
|
2
2
|
/**
|
|
3
|
-
* ItineraryTeaser —
|
|
4
|
-
*
|
|
3
|
+
* ItineraryTeaser — dark gradient panel on the neighbourhoods hub: a numbered multi-stop journey joined by a line on
|
|
4
|
+
* desktop, one card per stop and a large CTA. A stop's duration row renders only when the site has a duration for it.
|
|
5
|
+
* Hrefs and strings come from the site adapter.
|
|
5
6
|
*/
|
|
6
|
-
import { Icon } from '@sarimarcus/content-sites-ui/primitives';
|
|
7
|
+
import { Badge, Icon } from '@sarimarcus/content-sites-ui/primitives';
|
|
7
8
|
|
|
8
9
|
export interface ItineraryTeaserStop {
|
|
9
10
|
name: string;
|
|
10
11
|
href: string;
|
|
11
|
-
|
|
12
|
+
description: string;
|
|
13
|
+
duration?: string;
|
|
12
14
|
}
|
|
13
15
|
|
|
14
16
|
interface Props {
|
|
17
|
+
badgeLabel: string;
|
|
15
18
|
title: string;
|
|
16
19
|
description: string;
|
|
17
20
|
stops: ItineraryTeaserStop[];
|
|
@@ -21,6 +24,7 @@ interface Props {
|
|
|
21
24
|
}
|
|
22
25
|
|
|
23
26
|
const {
|
|
27
|
+
badgeLabel,
|
|
24
28
|
title,
|
|
25
29
|
description,
|
|
26
30
|
stops,
|
|
@@ -30,44 +34,66 @@ const {
|
|
|
30
34
|
} = Astro.props;
|
|
31
35
|
---
|
|
32
36
|
|
|
33
|
-
<section class:list={['relative py-
|
|
34
|
-
<div class="
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
37
|
+
<section class:list={['relative py-12 px-6 sm:px-8 bg-gradient-to-br from-overlay to-muted-foreground rounded-2xl overflow-hidden', className]}>
|
|
38
|
+
<div class="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-3xl" aria-hidden="true"></div>
|
|
39
|
+
<div class="absolute bottom-0 left-0 w-48 h-48 bg-accent/10 rounded-full blur-3xl" aria-hidden="true"></div>
|
|
40
|
+
|
|
41
|
+
<div class="relative">
|
|
42
|
+
<div class="mb-8">
|
|
43
|
+
<Badge tone="custom" toneClass="bg-accent/20 text-accent" size="lg" lines={0} class="mb-4 !gap-2">
|
|
44
|
+
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
38
45
|
<path d="M9 20l-5.447-2.724A1 1 0 0 1 3 16.382V5.618a1 1 0 0 1 1.447-.894L9 7m0 13l6-3m-6 3V7m6 10l5.447 2.724A1 1 0 0 0 21 18.382V7.618a1 1 0 0 0-.553-.894L15 4m0 13V4m0 0L9 7" />
|
|
39
46
|
</svg>
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
47
|
+
{badgeLabel}
|
|
48
|
+
</Badge>
|
|
49
|
+
<h2 class="text-2xl sm:text-3xl font-display font-medium text-overlay-foreground mb-3">
|
|
50
|
+
{title}
|
|
51
|
+
</h2>
|
|
52
|
+
<p class="text-overlay-foreground/70 max-w-deck">
|
|
45
53
|
{description}
|
|
46
54
|
</p>
|
|
47
55
|
</div>
|
|
48
|
-
<a
|
|
49
|
-
href={ctaHref}
|
|
50
|
-
class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary hover:text-primary-strong border border-primary/30 hover:border-primary/50 rounded-lg transition-colors whitespace-nowrap focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
|
|
51
|
-
>
|
|
52
|
-
{ctaLabel}
|
|
53
|
-
<Icon name="arrow-right" class="w-3.5 h-3.5" />
|
|
54
|
-
</a>
|
|
55
|
-
</div>
|
|
56
56
|
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
<div class="relative mt-12">
|
|
58
|
+
<div class="hidden md:block absolute top-8 left-8 right-8 h-0.5 bg-gradient-to-r from-primary via-accent to-secondary" aria-hidden="true"></div>
|
|
59
|
+
|
|
60
|
+
<div class="grid gap-6 md:grid-cols-3 relative">
|
|
61
|
+
{stops.map((stop, index) => (
|
|
62
|
+
<div class="relative">
|
|
63
|
+
<div class="absolute -top-4 left-0 md:left-1/2 md:-translate-x-1/2 w-8 h-8 rounded-full bg-overlay-foreground flex items-center justify-center text-foreground font-display font-medium text-sm z-10">
|
|
64
|
+
{index + 1}
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
<a
|
|
68
|
+
href={stop.href}
|
|
69
|
+
class="block mt-6 p-5 bg-overlay-foreground/5 hover:bg-overlay-foreground/10 border border-overlay-foreground/10 hover:border-overlay-foreground/20 rounded-xl transition-all duration-200 group"
|
|
70
|
+
>
|
|
71
|
+
<h3 class="text-lg font-display font-medium text-overlay-foreground mb-2 group-hover:text-accent transition-colors">
|
|
72
|
+
{stop.name}
|
|
73
|
+
</h3>
|
|
74
|
+
<p class:list={['text-sm text-overlay-foreground/60', stop.duration && 'mb-3']}>
|
|
75
|
+
{stop.description}
|
|
76
|
+
</p>
|
|
77
|
+
{stop.duration && (
|
|
78
|
+
<div class="flex items-center gap-2 text-xs text-overlay-foreground/50">
|
|
79
|
+
<Icon name="clock" class="w-3.5 h-3.5" />
|
|
80
|
+
{stop.duration}
|
|
81
|
+
</div>
|
|
82
|
+
)}
|
|
83
|
+
</a>
|
|
84
|
+
</div>
|
|
85
|
+
))}
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<div class="mt-10 flex justify-center">
|
|
59
90
|
<a
|
|
60
|
-
href={
|
|
61
|
-
class="
|
|
91
|
+
href={ctaHref}
|
|
92
|
+
class="inline-flex items-center gap-3 px-6 py-3 bg-primary hover:bg-primary-strong text-overlay-foreground rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-overlay"
|
|
62
93
|
>
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
</span>
|
|
66
|
-
<div class="min-w-0">
|
|
67
|
-
<p class="text-sm font-medium text-foreground group-hover:text-primary transition-colors">{stop.name}</p>
|
|
68
|
-
<p class="text-xs text-muted-foreground line-clamp-1">{stop.highlight}</p>
|
|
69
|
-
</div>
|
|
94
|
+
{ctaLabel}
|
|
95
|
+
<Icon name="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1" />
|
|
70
96
|
</a>
|
|
71
|
-
|
|
97
|
+
</div>
|
|
72
98
|
</div>
|
|
73
99
|
</section>
|