83 lines
2.6 KiB
Plaintext
83 lines
2.6 KiB
Plaintext
---
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
---
|
|
|
|
<BaseLayout
|
|
title="You're Offline — Reconnect to Keep Browsing"
|
|
description="You appear to be offline. Check your internet connection and try again — many WorkRoot IT Solutions pages stay available once you have visited them before."
|
|
noIndex={true}
|
|
>
|
|
<section class="min-h-[60vh] flex items-center justify-center px-4">
|
|
<div class="text-center max-w-lg mx-auto">
|
|
<!-- Icon -->
|
|
<div class="mb-8 flex justify-center">
|
|
<div class="w-24 h-24 rounded-full bg-primary/10 flex items-center justify-center">
|
|
<svg
|
|
class="w-12 h-12 text-primary"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="1.5"
|
|
d="M18.364 5.636a9 9 0 010 12.728M15.536 8.464a5 5 0 010 7.072M12 12h.01M6.343 17.657a9 9 0 010-12.728M8.464 15.536a5 5 0 010-7.072"
|
|
/>
|
|
<line x1="3" y1="3" x2="21" y2="21" stroke-width="1.5" stroke-linecap="round" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Heading -->
|
|
<h1 class="text-3xl font-bold text-secondary-900 mb-4">You're Offline</h1>
|
|
|
|
<!-- Message -->
|
|
<p class="text-secondary-600 text-lg mb-8">
|
|
It looks like you've lost your internet connection. Some content may still be available
|
|
from your last visit.
|
|
</p>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<button
|
|
id="retry-btn"
|
|
class="btn-primary px-8 py-3 rounded-lg font-semibold transition-all"
|
|
onclick="window.location.reload()"
|
|
>
|
|
Try Again
|
|
</button>
|
|
<a
|
|
href="/"
|
|
class="btn-secondary px-8 py-3 rounded-lg font-semibold transition-all text-center"
|
|
>
|
|
Go to Home
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Cached pages hint -->
|
|
<p class="mt-8 text-sm text-secondary-400">
|
|
Previously visited pages may still be accessible from your browser cache.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
.btn-primary {
|
|
background-color: theme('colors.primary.DEFAULT');
|
|
color: white;
|
|
}
|
|
.btn-primary:hover {
|
|
background-color: theme('colors.primary.600');
|
|
}
|
|
.btn-secondary {
|
|
border: 2px solid theme('colors.primary.DEFAULT');
|
|
color: theme('colors.primary.DEFAULT');
|
|
}
|
|
.btn-secondary:hover {
|
|
background-color: theme('colors.primary.50');
|
|
}
|
|
</style>
|