404 Page

<h2 className="text-4xl sm:text-5xl lg:text-6xl font-semibold text-foreground mb-6 sm:mb-8">
  Page not found
</h2>
<p className="text-base sm:text-lg lg:text-lg mb-8 sm:mb-12 max-w-xs sm:max-w-md mx-auto">
  The page you are looking for doesn’t exist or is currently unavailable.
</p>
<Button asChild variant="secondary" size="lg">
  <Link href="/" className="flex items-center gap-2 group">
    <ArrowLeft className="w-4 h-4 transition-transform duration-300 group-hover:-translate-x-1" />
    Go back to homepage
  </Link>
</Button>

<Particles
  className="absolute inset-0 z-0"
  quantity={200}
  refresh
  color={color}
/>

const { resolvedTheme } = useTheme();
const color = useMemo(
  () => (resolvedTheme === "dark" ? "#ffffff" : "#000000"),
  [resolvedTheme]
);

return (
  <div className="flex flex-col">
    <Header />
    {/* ... page body ... */}
    <Footer />
  </div>
);