← back to Designer Wallcoverings
mailers/assets/pj-fall-2026/probe.html
125 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - Page Not Found | Phillip Jeffries</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom styles for hover effects */
.nav-link {
position: relative;
overflow: hidden;
}
.nav-link-bg {
position: absolute;
inset: 0;
background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s;
}
.nav-link:hover .nav-link-bg {
background-color: white;
border-color: white;
}
.nav-link-text {
position: relative;
color: white;
letter-spacing: 0.05em;
transition: color 0.3s;
}
.nav-link:hover .nav-link-text {
color: black;
}
.nav-link-icon {
position: relative;
color: white;
transition: color 0.3s;
}
.nav-link:hover .nav-link-icon {
color: black;
}
</style>
</head>
<body>
<div class="relative min-h-screen w-full overflow-hidden">
<!-- Background Image with Overlay -->
<div class="absolute inset-0 z-0">
<img
src="https://cms.phillipjeffries.com/files/general/error_page_background.jpg"
alt="Luxury wallpaper background"
class="w-full h-full object-cover"
/>
<div class="absolute inset-0 bg-black/70"></div>
</div>
<!-- Content -->
<div class="relative z-10 flex flex-col items-center justify-center min-h-screen px-4 py-12">
<div class="max-w-3xl w-full text-center space-y-12">
<!-- 404 Message -->
<div class="space-y-8">
<div class="space-y-3">
<h2 class="text-white text-7xl md:text-8xl tracking-tight">404</h2>
<div class="h-px w-24 bg-white/40 mx-auto"></div>
<p class="text-white/95 text-2xl md:text-3xl tracking-wide">Page Not Found</p>
</div>
<p class="text-white/80 text-lg md:text-xl max-w-xl mx-auto leading-relaxed">
You've reached a blank wall.<br>
Not our usual look. Let's find something more your style.
</p>
</div>
<!-- Navigation Links -->
<div class="space-y-6">
<p class="text-white/60 tracking-widest uppercase text-sm">Explore Our Collections</p>
<div class="flex flex-col sm:flex-row gap-3 justify-center items-center">
<a
href="https://www.phillipjeffries.com/shop/wallcoverings"
class="nav-link px-8 py-3 w-full sm:w-56"
>
<div class="nav-link-bg"></div>
<span class="nav-link-text whitespace-nowrap">Shop All</span>
</a>
<a
href="https://www.phillipjeffries.com/shop/whats-new"
class="nav-link px-8 py-3 w-full sm:w-56"
>
<div class="nav-link-bg"></div>
<span class="nav-link-text whitespace-nowrap">What's New</span>
</a>
<a
href="https://www.phillipjeffries.com/shop/collections"
class="nav-link px-8 py-3 w-full sm:w-56"
>
<div class="nav-link-bg"></div>
<span class="nav-link-text whitespace-nowrap">Shop by Category</span>
</a>
</div>
</div>
<!-- Home Button -->
<div class="pt-4">
<a
href="https://www.phillipjeffries.com/"
class="nav-link inline-flex items-center justify-center px-8 py-3 w-full sm:w-56"
>
<div class="nav-link-bg"></div>
<svg class="nav-link-icon mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
</svg>
<span class="nav-link-text whitespace-nowrap">Return to Home</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>