heartcentered.ai/404.html at main · TechNickAI/heartcentered.ai · GitHub

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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Not Found · HeartCentered AI</title>

    <!-- Favicons -->
    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="/images/icon-192.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png" />

    <!-- Shared styles -->
    <link rel="stylesheet" href="/styles.css" />

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              "of-bg": "#F4F7F4",
              "of-text": "#2A3A2A",
              "of-accent": "#5D7B6F",
              "of-accent-dark": "#4A6B5D",
              "of-muted": "#7A8B7D",
              "of-secondary": "#D4B896",
              "of-surface": "#FFFFFF",
            },
            fontFamily: {
              display: ["Fraunces", "Georgia", "serif"],
              body: ["DM Sans", "system-ui", "sans-serif"],
            },
          },
        },
      };
    </script>
  </head>

  <body
    class="font-body bg-atmospheric min-h-screen flex items-center justify-center px-6">
    <!-- Background -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <div
        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[60vw] h-[60vw] rounded-full animate-breathe"
        style="
          background: radial-gradient(
            circle,
            rgba(93, 123, 111, 0.1) 0%,
            transparent 50%
          );
        "></div>
      <div
        class="absolute bottom-0 right-0 w-[40vw] h-[40vw] rounded-full animate-float"
        style="
          background: radial-gradient(
            circle,
            rgba(212, 184, 150, 0.08) 0%,
            transparent 50%
          );
          filter: blur(60px);
        "></div>
    </div>

    <!-- Content -->
    <div class="relative z-10 max-w-2xl text-center">
      <h1
        class="font-display text-6xl md:text-7xl lg:text-8xl font-medium text-of-text mb-6 animate-fade-in-up"
        style="letter-spacing: -0.025em">
        404
      </h1>

      <p
        class="text-2xl md:text-3xl font-display text-of-accent mb-8 animate-fade-in-up stagger-1">
        Page not found
      </p>

      <p
        class="text-lg text-of-muted leading-relaxed mb-12 max-w-lg mx-auto animate-fade-in-up stagger-2">
        This page doesn't exist, or it's wandered off somewhere. Let's get you back to
        familiar ground.
      </p>

      <a
        href="/"
        class="inline-block px-10 py-5 text-lg font-medium rounded-full bg-of-accent text-white hover:bg-of-accent-dark hover:shadow-xl hover:-translate-y-1 transition-all duration-300 animate-fade-in-up stagger-3">
        Return Home
      </a>
    </div>
  </body>
</html>