-
Notifications
You must be signed in to change notification settings - Fork 0
/
404.astro
114 lines (110 loc) · 4.45 KB
/
404.astro
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
---
import Layout from '@layouts/Layout.astro'
import { Picture } from 'astro-imagetools/components'
import Navbar from '@components/Navbar.astro'
const options = {
title: 'Página no encontrada | Estelí Buses',
meta_robots: 'noindex, nofollow'
}
---
<Layout {options}>
<header class="safe-top container mx-auto px-4">
<Navbar />
</header>
<main
class="pb-[6.5rem] pt-[4.5rem] text-center xs:pb-36 lg:pb-[8.5rem] lg:pt-28 xl:pb-44 2xl:pb-[13.5rem]"
>
<div class="container mx-auto space-y-6 px-4">
<h1 class="mx-auto mb-8 max-w-screen-lg">
Ups, la página que estás buscando no existe.
</h1>
<p>
Conoce los horarios de salida de los buses de las terminales de la
ciudad de Estelí, y planea con exactitud la hora de tu próximo viaje.
</p>
<article
class="flex flex-col items-center justify-center gap-y-16 text-center md:flex-row md:gap-x-16 md:gap-y-0"
>
<section>
<div class="mb-4">
<div class="mx-auto h-max w-max rounded-full bg-emerald-100 p-3">
<svg
class="fill-current text-emerald-400"
viewBox="0 0 24 24"
width="40"
height="40"
>
<path
d="M18 11H6V6h12m-1.5 11a1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1-1.5 1.5m-9 0A1.5 1.5 0 0 1 6 15.5 1.5 1.5 0 0 1 7.5 14 1.5 1.5 0 0 1 9 15.5 1.5 1.5 0 0 1 7.5 17M4 16a3 3 0 0 0 1 2.2V20a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1h8v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1.8a3 3 0 0 0 1-2.2V6c0-3.5-3.6-4-8-4s-8 .5-8 4v10Z"
></path>
</svg>
</div>
</div>
<h3 class="mb-2 text-2xl font-bold text-emerald-500">
Terminal norte
</h3>
<p class="mx-auto max-w-sm px-4 !text-base">
La terminal norte cuenta con 22 destinos principales.
</p>
<a
class="mt-4 inline-flex items-center space-x-1 rounded px-5 py-2.5 font-semibold text-emerald-500 transition-colors active:bg-emerald-100 active:text-emerald-700 active:outline-none any-hover:bg-emerald-100 any-hover:text-emerald-700"
href="/terminal-norte-esteli"
>
<span>Conoce los destinos</span>
<span>
<svg class="mt-[0.1625rem] fill-current" width="26" height="26">
<path d="m8.6 16.6 4.6-4.6-4.6-4.6L10 6l6 6-6 6-1.4-1.4Z"
></path>
</svg>
</span>
</a>
</section>
<section>
<div class="mb-4">
<div class="mx-auto h-max w-max rounded-full bg-amber-100 p-3">
<svg
class="fill-current text-amber-400"
viewBox="0 0 24 24"
width="40"
height="40"
>
<path
d="M18 11H6V6h12m-1.5 11a1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1-1.5 1.5m-9 0A1.5 1.5 0 0 1 6 15.5 1.5 1.5 0 0 1 7.5 14 1.5 1.5 0 0 1 9 15.5 1.5 1.5 0 0 1 7.5 17M4 16a3 3 0 0 0 1 2.2V20a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1h8v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1.8a3 3 0 0 0 1-2.2V6c0-3.5-3.6-4-8-4s-8 .5-8 4v10Z"
></path>
</svg>
</div>
</div>
<h3 class="mb-2 text-2xl font-bold text-amber-500">Terminal sur</h3>
<p class="mx-auto max-w-sm px-4 !text-base">
La terminal sur cuenta con 10 destinos principales.
</p>
<a
class="mt-4 inline-flex items-center space-x-1 rounded px-5 py-2.5 font-semibold text-amber-500 transition-colors active:bg-amber-100 active:text-amber-700 active:outline-none any-hover:bg-amber-100 any-hover:text-amber-700"
href="/terminal-sur-esteli"
>
<span>Conoce los destinos</span>
<span>
<svg class="mt-[0.1625rem] fill-current" width="26" height="26">
<path d="m8.6 16.6 4.6-4.6-4.6-4.6L10 6l6 6-6 6-1.4-1.4Z"
></path>
</svg>
</span>
</a>
</section>
</article>
<section class="mx-auto max-w-2xl">
<Picture
src="/src/img/404.png"
alt="Imágen 404"
attributes={{
img: {
fetchpriority: 'high'
}
}}
loading="eager"
width={672}
/>
</section>
</div>
</main>
</Layout>