@sarimarcus/content-sites-tourism 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.11.0 (2026-10-01)
+
+- First release with components: `./cards` exports MonumentCard (also as MuseumCard), WalkCard, DishCard, RestaurantCard, BarCard, NeighborhoodCard, HotelCard and ActivityCard. Every visible string, image, href and data-key label arrives from the site adapter; the cards carry layout and theme roles only (SLA-2739).
+
 ## 0.10.0 (2026-09-30)
 
 - No changes; lockstep release with ui (SLA-2732).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-tourism",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "City-tourism vertical: city-entity components, pages templates and utilities for the tourism sites.",
   "type": "module",
   "license": "MIT",
@@ -35,7 +35,7 @@
   "peerDependencies": {
     "astro": "^7.0.6",
     "tailwindcss": "^4.1.18",
-    "@sarimarcus/content-sites-core": "0.10.0",
-    "@sarimarcus/content-sites-ui": "0.10.0"
+    "@sarimarcus/content-sites-core": "0.11.0",
+    "@sarimarcus/content-sites-ui": "0.11.0"
   }
 }

package/src/cards/ActivityCard.astro

@@ -0,0 +1,138 @@
+---
+/**
+ * ActivityCard — activity teaser on the ui EntityCard frame (poster variant). The category key picks the badge colour;
+ * its label, the location label (a neighbourhood name, or the site's out-of-town wording), the price line and every
+ * other visible string come from the site adapter, which also resolves the image, href and placeholder.
+ */
+import type { ImageMetadata } from 'astro';
+import { ArrowLabel, Badge } from '@sarimarcus/content-sites-ui/primitives';
+import { EntityCard } from '@sarimarcus/content-sites-ui/composed';
+
+export interface ActivityCardStrings {
+  /** Screen-reader labels before each meta value. */
+  duration: string;
+  price: string;
+  location: string;
+}
+
+interface Props {
+  href: string;
+  name: string;
+  description: string;
+  image?: ImageMetadata;
+  /** Shown when `image` is absent. */
+  fallbackSrc: string;
+  imageAlt: string;
+  category: string;
+  categoryLabel: string;
+  /** Badge beside the category; omitted hides it. */
+  freeLabel?: string | null;
+  duration?: string;
+  /** e.g. "From €25"; omitted hides the price line. */
+  priceLabel?: string | null;
+  tagLabels?: string[];
+  locationLabel: string;
+  strings: ActivityCardStrings;
+  ctaLabel: string;
+  index?: number;
+  class?: string;
+}
+
+const {
+  href,
+  name,
+  description,
+  image,
+  fallbackSrc,
+  imageAlt,
+  category,
+  categoryLabel,
+  freeLabel,
+  duration,
+  priceLabel,
+  tagLabels = [],
+  locationLabel,
+  strings,
+  ctaLabel,
+  index,
+  class: className,
+} = Astro.props;
+
+const categoryColors: Record<string, string> = {
+  'guided-tour': 'bg-overlay text-overlay-foreground',
+  experience: 'bg-overlay text-overlay-foreground',
+  show: 'bg-overlay text-overlay-foreground',
+  gastronomy: 'bg-overlay text-overlay-foreground',
+  wellness: 'bg-overlay text-overlay-foreground',
+  tour: 'bg-overlay text-overlay-foreground',
+};
+const categoryColor = categoryColors[category] || 'bg-accent text-foreground';
+---
+
+<EntityCard variant="poster" href={href} image={image} fallbackSrc={fallbackSrc} imageAlt={imageAlt} index={index} class={className}>
+  <Fragment slot="overlay">
+    <div class="absolute inset-0 bg-gradient-to-t from-overlay/95 via-overlay/20 to-transparent"></div>
+
+    <div class="absolute top-3 right-3 flex flex-wrap gap-2">
+      <Badge tone="custom" toneClass={categoryColor} size="sm" lines={0} class="!py-1">
+        {categoryLabel}
+      </Badge>
+      {freeLabel && (
+        <Badge tone="secondary" size="md" lines={1} class="!px-2">{freeLabel}</Badge>
+      )}
+    </div>
+
+    <div class="absolute bottom-0 left-0 right-0 p-4">
+      <h3
+        class="text-xl sm:text-2xl font-semibold text-overlay-foreground leading-tight font-display"
+      >
+        {name}
+      </h3>
+    </div>
+  </Fragment>
+
+  <p class="text-base text-muted-foreground line-clamp-2 mb-4">
+    {description}
+  </p>
+
+  <div class="flex flex-wrap gap-3 text-sm text-muted-foreground mb-4">
+    {duration && (
+      <span class="inline-flex items-center gap-1.5">
+        <svg class="w-3.5 h-3.5 text-accent-strong" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
+        </svg>
+        <span class="sr-only">{strings.duration}</span>
+        <span>{duration}</span>
+      </span>
+    )}
+    {priceLabel && (
+      <span class="inline-flex items-center gap-1.5">
+        <svg class="w-3.5 h-3.5 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M4 10h12"/><path d="M4 14h9"/><path d="M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2"/>
+        </svg>
+        <span class="sr-only">{strings.price}</span>
+        <span>{priceLabel}</span>
+      </span>
+    )}
+  </div>
+
+  {tagLabels.length > 0 && (
+    <div class="flex flex-wrap gap-1.5 mb-3">
+      {tagLabels.map((label) => (
+        <Badge tone="primary" size="sm">{label}</Badge>
+      ))}
+    </div>
+  )}
+
+  <span slot="footer-meta" class="inline-flex items-center gap-1.5 text-sm text-muted-foreground">
+    <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z" /><circle cx="12" cy="10" r="3" />
+    </svg>
+    <span class="sr-only">{strings.location}</span>
+    {locationLabel}
+  </span>
+
+  <ArrowLabel slot="footer-cta" class="text-sm font-medium text-accent-strong group-hover:text-accent transition-colors">
+    {ctaLabel}
+  </ArrowLabel>
+</EntityCard>

package/src/cards/BarCard.astro

@@ -0,0 +1,223 @@
+---
+/**
+ * BarCard — bar teaser. The category key picks the badge colour; its label, the feature labels and icons (sites store
+ * different feature keys), the closing line and every other visible string come from the site adapter, which also
+ * resolves the image, href and placeholder. The price pill renders only when the value is label-length.
+ */
+import { Picture } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
+import { Badge, isBadgeLength, PRICE_LABEL_MAX } from '@sarimarcus/content-sites-ui/primitives';
+import type { CardRating } from './RestaurantCard.astro';
+
+export interface BarFeature {
+  /** Raw data key, rendered as the chip's title. */
+  key: string;
+  label: string;
+  /** SVG path data for a 24×24 stroke icon. */
+  iconPath?: string;
+}
+
+interface Props {
+  href: string;
+  name: string;
+  description: string;
+  image?: ImageMetadata;
+  /** Shown when `image` is absent. */
+  fallbackSrc: string;
+  imageAlt: string;
+  category: string;
+  categoryLabel: string;
+  priceLabel: string;
+  atmosphere?: string;
+  /** First three shown. */
+  features?: BarFeature[];
+  /** Shown after the features when more than three exist, e.g. "+2 more". */
+  featuresMoreLabel?: string | null;
+  rating?: CardRating;
+  tagLabels?: string[];
+  neighborhood: string;
+  /** e.g. "Open until 02:00 (Fri–Sat)". */
+  closingLabel?: string | null;
+  ctaLabel: string;
+  index?: number;
+  class?: string;
+}
+
+const {
+  href,
+  name,
+  description,
+  image,
+  fallbackSrc,
+  imageAlt,
+  category,
+  categoryLabel,
+  priceLabel,
+  atmosphere,
+  features = [],
+  featuresMoreLabel,
+  rating,
+  tagLabels = [],
+  neighborhood,
+  closingLabel,
+  ctaLabel,
+  index = 999,
+  class: className,
+} = Astro.props;
+
+const categoryColors: Record<string, { bg: string; text: string }> = {
+  tapas: { bg: 'bg-primary', text: 'text-overlay-foreground' },
+  cocktails: { bg: 'bg-overlay', text: 'text-overlay-foreground' },
+  wine: { bg: 'bg-accent-strong', text: 'text-overlay-foreground' },
+  beer: { bg: 'bg-secondary', text: 'text-overlay-foreground' },
+  lgbt: { bg: 'bg-primary', text: 'text-overlay-foreground' },
+  rooftop: { bg: 'bg-secondary', text: 'text-overlay-foreground' },
+  nightlife: { bg: 'bg-overlay', text: 'text-overlay-foreground' },
+  flamenco: { bg: 'bg-primary', text: 'text-overlay-foreground' },
+  traditional: { bg: 'bg-accent-strong', text: 'text-overlay-foreground' },
+};
+const categoryStyle = categoryColors[category] || { bg: 'bg-muted', text: 'text-muted-foreground' };
+---
+
+<article class:list={['group relative bg-card rounded-xl overflow-hidden card-lift border border-border flex flex-col h-full', className]}>
+  <a href={href} class="flex flex-col flex-1 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 rounded-xl">
+    <div class="relative h-56 overflow-hidden img-placeholder shrink-0">
+      {image ? (
+        <Picture
+          src={image}
+          alt={imageAlt}
+          widths={[240, 320, 400, 480, 640]}
+          sizes="(max-width: 1023px) 100vw, 50vw"
+          formats={['avif', 'webp']}
+          fallbackFormat="webp"
+          pictureAttributes={{ class: 'block w-full h-full' }}
+          class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+          loading={index < 3 ? "eager" : "lazy"}
+          fetchpriority={index === 0 ? "high" : undefined}
+          decoding="async"
+        />
+      ) : (
+        <img
+          src={fallbackSrc}
+          alt={imageAlt}
+          width="320"
+          height="192"
+          class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+          loading={index < 3 ? "eager" : "lazy"}
+          fetchpriority={index === 0 ? "high" : undefined}
+          decoding="async"
+        />
+      )}
+
+      <div class="absolute top-3 left-3">
+        <Badge tone="custom" toneClass={`${categoryStyle.bg} ${categoryStyle.text}`} size="lg" lines={0} class="shadow-md backdrop-blur-sm">
+          {categoryLabel}
+        </Badge>
+      </div>
+
+      {isBadgeLength(priceLabel, PRICE_LABEL_MAX) && (
+        <div class="absolute bottom-3 left-3 max-w-[calc(100%-1.5rem)]">
+          <Badge tone="onImage" size="lg" lines={0} class="!px-2 !py-1">
+            <svg class="w-3 h-3 text-accent shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M4 10h12"/><path d="M4 14h9"/><path d="M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2"/>
+          </svg>{priceLabel}
+          </Badge>
+        </div>
+      )}
+    </div>
+
+    <div class="flex-1 p-4 sm:p-5 flex flex-col">
+      <div class="flex-1">
+        <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-1 sm:gap-2 mb-2">
+          <h3
+            class="text-lg sm:text-xl font-semibold text-card-foreground leading-tight font-display"
+          >
+            {name}
+          </h3>
+          {rating && (
+            <div class="flex items-center gap-1.5">
+              <div class="flex items-center gap-0.5" role="img" aria-label={rating.ariaLabel}>
+                {[1, 2, 3, 4, 5].map((star) => (
+                  <svg
+                    class={`w-4 h-4 ${star <= Math.round(rating.value) ? 'text-accent fill-current' : 'text-muted fill-current'}`}
+                    aria-hidden="true"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
+                  </svg>
+                ))}
+              </div>
+              <span class="text-sm text-muted-foreground">{rating.text}</span>
+            </div>
+          )}
+        </div>
+
+        <p class="text-sm sm:text-base text-muted-foreground line-clamp-2 mb-3">
+          {description}
+        </p>
+
+        {atmosphere && (
+          <div class="mb-3">
+            <span class="inline-flex items-center gap-1 px-2 py-1 text-xs bg-muted/90 text-muted-foreground rounded">
+              <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M9 18V5l12-2v13M6 18c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm12 0c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3z" />
+              </svg>
+              {atmosphere}
+            </span>
+          </div>
+        )}
+
+        {features.length > 0 && (
+          <div class="flex flex-wrap gap-1.5 mb-4">
+            {features.slice(0, 3).map((feature) => (
+              <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-muted/90 text-muted-foreground rounded" title={feature.key}>
+                {feature.iconPath && (
+                  <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d={feature.iconPath} />
+                  </svg>
+                )}
+                {feature.label}
+              </span>
+            ))}
+            {featuresMoreLabel && (
+              <span class="inline-flex items-center px-2 py-0.5 text-xs bg-muted/60 text-muted-foreground rounded">
+                {featuresMoreLabel}
+              </span>
+            )}
+          </div>
+        )}
+
+      {tagLabels.length > 0 && (
+        <div class="flex flex-wrap gap-1.5 mb-3">
+          {tagLabels.map((label) => (
+            <Badge tone="primary" size="sm">{label}</Badge>
+          ))}
+        </div>
+      )}
+      </div>
+
+      <div class="flex items-center justify-between pt-3 border-t border-border">
+        <div class="flex flex-col gap-1">
+          <span class="inline-flex items-center gap-1.5 text-sm text-muted-foreground">
+            <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" /><circle cx="12" cy="10" r="3" />
+            </svg>
+            {neighborhood}
+          </span>
+          {closingLabel && (
+            <span class="text-sm text-muted-foreground">
+              {closingLabel}
+            </span>
+          )}
+        </div>
+
+        <span class="inline-flex items-center gap-2 text-sm font-medium text-primary group-hover:text-primary-strong transition-colors">
+          {ctaLabel}
+          <svg class="w-4 h-4 transition-transform group-hover:translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M5 12h14" /><path d="m12 5 7 7-7 7" />
+          </svg>
+        </span>
+      </div>
+    </div>
+  </a>
+</article>

package/src/cards/DishCard.astro

@@ -0,0 +1,138 @@
+---
+/**
+ * DishCard — dish teaser. The category key picks the badge colour; the label, tags and every other visible string
+ * come from the site adapter, which also resolves the image, href and placeholder.
+ */
+import { Picture } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
+import { Badge } from '@sarimarcus/content-sites-ui/primitives';
+
+interface Props {
+  href: string;
+  name: string;
+  description: string;
+  image?: ImageMetadata;
+  /** Shown when `image` is absent. */
+  fallbackSrc: string;
+  imageAlt: string;
+  category: string;
+  categoryLabel: string;
+  /** Plain keyword chips (first three shown). */
+  tags?: string[];
+  /** Audience badges (first three shown). */
+  tagLabels?: string[];
+  ctaLabel: string;
+  index?: number;
+  eager?: number;
+  priority?: boolean;
+  class?: string;
+}
+
+const {
+  href,
+  name,
+  description,
+  image,
+  fallbackSrc,
+  imageAlt,
+  category,
+  categoryLabel,
+  tags = [],
+  tagLabels = [],
+  ctaLabel,
+  index = 999,
+  eager = 1,
+  priority = false,
+  class: className,
+} = Astro.props;
+
+const fetchPriority = priority || index === 0 ? "high" : "auto";
+const loadingStrategy = index < eager ? "eager" : "lazy";
+
+// Contrast is AA for 12px text on every pairing.
+const categoryColors: Record<string, string> = {
+  'starter': 'bg-primary text-overlay-foreground',
+  'main-course': 'bg-secondary text-overlay-foreground',
+  'dessert': 'bg-secondary text-overlay-foreground',
+  'tapa': 'bg-overlay text-overlay-foreground',
+  'drink': 'bg-accent-strong text-overlay-foreground',
+};
+const categoryColor = categoryColors[category] || 'bg-accent text-foreground';
+const audienceLabels = tagLabels.slice(0, 3);
+---
+
+<article class:list={['group relative bg-card rounded-xl overflow-hidden card-lift border border-border flex flex-col h-full', className]}>
+  <a href={href} class="flex flex-col h-full focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 rounded-xl">
+    <div class="relative h-56 overflow-hidden img-placeholder shrink-0">
+      {image ? (
+        <Picture
+          src={image}
+          alt={imageAlt}
+          widths={[240, 320, 400, 480, 640]}
+          sizes="(max-width: 639px) 100vw, (max-width: 1023px) 50vw, 33vw"
+          formats={['avif', 'webp']}
+          fallbackFormat="webp"
+          pictureAttributes={{ class: 'block w-full h-full' }}
+          class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+          loading={loadingStrategy}
+          fetchpriority={fetchPriority}
+          decoding="async"
+        />
+      ) : (
+        <img
+          src={fallbackSrc}
+          alt={imageAlt}
+          width="640"
+          height="384"
+          class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+          loading={loadingStrategy}
+          fetchpriority={fetchPriority}
+          decoding="async"
+        />
+      )}
+
+      <div class="absolute top-3 left-3">
+        <Badge tone="custom" toneClass={categoryColor} size="lg" lines={0}>
+          {categoryLabel}
+        </Badge>
+      </div>
+    </div>
+
+    <div class="p-4 sm:p-5 flex flex-col flex-1">
+      <h3
+        class="text-xl font-semibold text-card-foreground mb-2 group-hover:text-primary transition-colors font-display"
+      >
+        {name}
+      </h3>
+
+      <p class="text-base text-muted-foreground line-clamp-3 mb-4">
+        {description}
+      </p>
+
+      {tags.length > 0 && (
+        <div class="flex flex-wrap gap-1.5 mb-4">
+          {tags.slice(0, 3).map((tag) => (
+            <span class="px-2 py-0.5 text-xs bg-muted text-muted-foreground rounded">
+              {tag}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {audienceLabels.length > 0 && (
+        <div class="flex flex-wrap gap-1.5 mb-3">
+          {audienceLabels.map((label) => (
+            <Badge tone="primary" size="sm">{label}</Badge>
+          ))}
+        </div>
+      )}
+
+      <div class="flex items-center gap-2 text-sm font-medium text-primary group-hover:text-primary-strong transition-colors mt-auto">
+        <span>{ctaLabel}</span>
+        <svg class="w-4 h-4 transition-transform group-hover:translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M5 12h14" /><path d="m12 5 7 7-7 7" />
+        </svg>
+      </div>
+    </div>
+  </a>
+</article>