125 lines
4.2 KiB
Svelte
125 lines
4.2 KiB
Svelte
<script lang="ts">
|
|
import { href } from '$lib/i18n';
|
|
import * as m from '$lib/paraglide/messages';
|
|
|
|
import LogoMark from './logo-mark.svelte';
|
|
|
|
// A hand-picked set of the prerendered city pages (see
|
|
// routes/weather/locations/city-names100.json) — instant navigation targets
|
|
// that double as SEO entry points.
|
|
const popularCities: { slug: string; label: string }[] = [
|
|
{ slug: 'london', label: 'London' },
|
|
{ slug: 'tokyo', label: 'Tokyo' },
|
|
{ slug: 'berlin', label: 'Berlin' },
|
|
{ slug: 'sydney', label: 'Sydney' },
|
|
{ slug: 'singapore', label: 'Singapore' },
|
|
{ slug: 'dubai', label: 'Dubai' },
|
|
{ slug: 'los-angeles', label: 'Los Angeles' },
|
|
{ slug: 'hong-kong', label: 'Hong Kong' },
|
|
{ slug: 'istanbul', label: 'Istanbul' },
|
|
{ slug: 'seoul', label: 'Seoul' },
|
|
{ slug: 'mexico-city', label: 'Mexico City' },
|
|
{ slug: 'sao-paulo', label: 'São Paulo' }
|
|
];
|
|
|
|
const forecastLinks = [
|
|
{ href: href('/weather/week'), label: m.nav_week() },
|
|
{ href: href('/weather/compare'), label: m.nav_compare() },
|
|
{ href: href('/weather/14-day'), label: m.nav_14day() },
|
|
{ href: href('/weather/seasonal'), label: m.page_seasonal_subtitle() },
|
|
{ href: href('/weather/historical'), label: m.page_historical_subtitle() },
|
|
{ href: href('/weather/maps'), label: m.nav_maps() }
|
|
];
|
|
|
|
const year = new Date().getFullYear();
|
|
</script>
|
|
|
|
<footer class="mt-16 border-t border-border bg-card/60">
|
|
<div class="mx-auto w-full max-w-[1536px] px-4 py-10 lg:px-8">
|
|
<div class="grid gap-10 sm:grid-cols-2 lg:grid-cols-4">
|
|
<!-- Brand -->
|
|
<div class="max-w-xs">
|
|
<div class="flex items-center gap-2">
|
|
<span
|
|
class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground"
|
|
>
|
|
<LogoMark />
|
|
</span>
|
|
<span class="text-lg font-bold tracking-tight">Drizz.li</span>
|
|
</div>
|
|
<p class="mt-3 text-sm leading-relaxed text-muted-foreground">
|
|
{m.footer_tagline()}
|
|
</p>
|
|
<p class="mt-3 text-xs text-muted-foreground">
|
|
{m.footer_data_by()}
|
|
<a
|
|
class="font-medium underline-offset-2 hover:text-foreground hover:underline"
|
|
href="https://open-meteo.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer">Open-Meteo</a
|
|
>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Forecasts -->
|
|
<nav aria-label={m.footer_forecasts()}>
|
|
<h3 class="text-[11px] font-bold tracking-wider text-muted-foreground uppercase">
|
|
{m.footer_forecasts()}
|
|
</h3>
|
|
<ul class="mt-3 flex flex-col gap-2 text-sm">
|
|
{#each forecastLinks as link (link.href)}
|
|
<li>
|
|
<a
|
|
class="text-foreground/80 underline-offset-2 hover:text-foreground hover:underline"
|
|
href={link.href}>{link.label}</a
|
|
>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Popular locations (spans two columns of links) -->
|
|
<nav aria-label={m.footer_popular()} class="lg:col-span-2">
|
|
<h3 class="text-[11px] font-bold tracking-wider text-muted-foreground uppercase">
|
|
{m.footer_popular()}
|
|
</h3>
|
|
<ul class="mt-3 grid grid-cols-2 gap-x-6 gap-y-2 text-sm sm:grid-cols-3">
|
|
{#each popularCities as city (city.slug)}
|
|
<li>
|
|
<a
|
|
class="text-foreground/80 underline-offset-2 hover:text-foreground hover:underline"
|
|
href={href('/weather/week/[location]', { location: city.slug })}
|
|
>{m.city_weather({ city: city.label })}</a
|
|
>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Bottom bar: legal -->
|
|
<div
|
|
class="mt-10 flex flex-col items-start justify-between gap-3 border-t border-border/70 pt-5 text-xs text-muted-foreground sm:flex-row sm:items-center"
|
|
>
|
|
<span>© {year} Drizz.li</span>
|
|
<nav aria-label={m.legal_nav()} class="flex flex-wrap items-center gap-x-5 gap-y-1">
|
|
<a class="underline-offset-2 hover:text-foreground hover:underline" href={href('/about')}
|
|
>{m.legal_about()}</a
|
|
>
|
|
<a
|
|
class="underline-offset-2 hover:text-foreground hover:underline"
|
|
href={href('/legal/imprint')}>{m.legal_imprint()}</a
|
|
>
|
|
<a
|
|
class="underline-offset-2 hover:text-foreground hover:underline"
|
|
href={href('/legal/privacy')}>{m.legal_privacy()}</a
|
|
>
|
|
<a
|
|
class="underline-offset-2 hover:text-foreground hover:underline"
|
|
href={href('/legal/terms')}>{m.legal_terms()}</a
|
|
>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</footer>
|