-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path404.html
More file actions
67 lines (60 loc) · 3.48 KB
/
Copy path404.html
File metadata and controls
67 lines (60 loc) · 3.48 KB
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
---
title: "Page not found — Icalia Labs"
description: "The page you are looking for doesn't exist. Head back home or explore our work."
canonicalPath: "/404.html"
permalink: /404.html
eleventyExcludeFromCollections: true
---
<!DOCTYPE html>
<html lang="en">
<head>
{% include "head.html" %}
<style>
.reveal { transform: translateY(16px); transition: opacity 0.8s ease, transform 0.8s ease; }
</style>
</head>
<body class="font-body text-icalia-dark antialiased bg-icalia-warm">
{% include "nav.html" %}
<main>
<section class="min-h-[80vh] flex items-center justify-center px-6 lg:px-10 py-24 md:py-32 relative overflow-hidden">
<!-- Decorative background -->
<div class="absolute top-0 right-0 w-96 h-96 bg-icalia-red/5 rounded-full -translate-y-1/3 translate-x-1/3 pointer-events-none"></div>
<div class="absolute bottom-0 left-0 w-80 h-80 bg-icalia-red/5 rounded-full translate-y-1/3 -translate-x-1/3 pointer-events-none"></div>
<div class="max-w-3xl mx-auto text-center relative">
<span class="inline-block text-xs font-semibold tracking-widest uppercase text-icalia-red bg-icalia-blush px-3 py-1.5 rounded-full mb-8">Error 404</span>
<h1 class="font-display italic text-7xl md:text-9xl text-icalia-dark leading-none mb-6">
Lost in <span class="text-icalia-red">transit</span>.
</h1>
<p class="text-lg md:text-xl text-icalia-navy/60 leading-relaxed max-w-xl mx-auto mb-12">
The page you’re looking for took a detour. Let’s get you back to something useful — our work, our story, or a conversation.
</p>
<div class="flex flex-wrap items-center justify-center gap-4">
<a href="/" class="inline-flex items-center gap-2 bg-icalia-dark hover:bg-icalia-red text-white text-sm font-semibold px-6 py-3.5 rounded-full transition-colors">
Back to home
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
<a href="/case-studies.html" class="inline-flex items-center gap-2 border border-icalia-dark/15 hover:border-icalia-red hover:text-icalia-red text-icalia-dark text-sm font-semibold px-6 py-3.5 rounded-full transition-colors">
See our work
</a>
<a href="/contact.html" class="inline-flex items-center gap-2 text-icalia-dark/70 hover:text-icalia-red text-sm font-semibold px-2 py-3.5 transition-colors">
Or get in touch →
</a>
</div>
<div class="mt-20 pt-10 border-t border-icalia-dark/5">
<p class="text-xs text-icalia-navy/40 uppercase tracking-widest mb-4">Popular destinations</p>
<div class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm">
<a href="/" class="text-icalia-dark/70 hover:text-icalia-red transition-colors">Home</a>
<span class="text-icalia-navy/20">·</span>
<a href="/case-studies.html" class="text-icalia-dark/70 hover:text-icalia-red transition-colors">Case studies</a>
<span class="text-icalia-navy/20">·</span>
<a href="/manifesto.html" class="text-icalia-dark/70 hover:text-icalia-red transition-colors">Manifesto</a>
<span class="text-icalia-navy/20">·</span>
<a href="/contact.html" class="text-icalia-dark/70 hover:text-icalia-red transition-colors">Contact</a>
</div>
</div>
</div>
</section>
</main>
{% include "footer.html" %}
</body>
</html>