91 lines
4.6 KiB
Text
91 lines
4.6 KiB
Text
---
|
|
import "../styles/global.css";
|
|
|
|
type Props = {
|
|
title: string;
|
|
description?: string;
|
|
ogImage?: string;
|
|
lang?: string;
|
|
};
|
|
|
|
const { title, description, ogImage, lang = "en" } = Astro.props;
|
|
const canonical = new URL(Astro.url.pathname, Astro.site ?? Astro.url).toString();
|
|
|
|
const og = ogImage ?? "https://infrafabric.io/assets/iftrace-og.svg";
|
|
const langSwitch =
|
|
lang === "fr"
|
|
? { href: "/", label: "EN" }
|
|
: { href: "/fr/", label: "FR" };
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang={lang} class="dark">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="theme-color" content="#0b1020" />
|
|
<link rel="canonical" href={canonical} />
|
|
<title>{title}</title>
|
|
{description && <meta name="description" content={description} />}
|
|
<meta property="og:title" content={title} />
|
|
{description && <meta property="og:description" content={description} />}
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:image" content={og} />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<link rel="icon" href="/assets/if-logo-simple.svg" type="image/svg+xml" />
|
|
</head>
|
|
|
|
<body class="min-h-screen bg-background text-foreground">
|
|
<div aria-hidden="true" class="pointer-events-none fixed inset-0 -z-10">
|
|
<div class="absolute inset-0 bg-[radial-gradient(1200px_circle_at_20%_0%,rgba(16,185,129,0.18),transparent_60%),radial-gradient(1200px_circle_at_90%_10%,rgba(59,130,246,0.14),transparent_55%),radial-gradient(900px_circle_at_30%_100%,rgba(244,63,94,0.10),transparent_55%)]" />
|
|
<div class="absolute inset-0 bg-[linear-gradient(to_bottom,rgba(2,6,23,0.75),rgba(2,6,23,0.95))]" />
|
|
<div class="absolute inset-0 opacity-[0.06] mix-blend-overlay [background-image:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22300%22%20height=%22300%22%3E%3Cfilter%20id=%22n%22%3E%3CfeTurbulence%20type=%22fractalNoise%22%20baseFrequency=%220.8%22%20numOctaves=%224%22%20stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect%20width=%22300%22%20height=%22300%22%20filter=%22url(%23n)%22%20opacity=%220.5%22/%3E%3C/svg%3E')]" />
|
|
</div>
|
|
|
|
<header class="fixed left-0 right-0 top-0 z-50">
|
|
<div class="mx-auto max-w-6xl px-4 py-4 sm:px-6">
|
|
<div class="flex items-center justify-between rounded-2xl border border-white/10 bg-slate-950/40 px-4 py-3 backdrop-blur-md shadow-[0_20px_80px_rgba(0,0,0,0.35)] sm:px-6">
|
|
<a href="/" class="text-sm font-semibold tracking-tight text-white/90 hover:text-white">IF.Trace</a>
|
|
<div class="flex items-center gap-3 sm:gap-4">
|
|
<nav class="flex items-center gap-3 text-xs text-white/70 sm:gap-4" aria-label="Primary">
|
|
<a class="hover:text-white" href="/verticals/">Sector</a>
|
|
<span class="text-white/20" aria-hidden="true">|</span>
|
|
<a class="hover:text-white" href="/pricing/">Pricing</a>
|
|
<span class="text-white/20" aria-hidden="true">|</span>
|
|
<a class="hover:text-white" href="/api/">API</a>
|
|
<span class="text-white/20" aria-hidden="true">|</span>
|
|
<a class="hover:text-white" href="/whitepaper/">Whitepaper</a>
|
|
</nav>
|
|
<a
|
|
class="inline-flex h-7 items-center justify-center rounded-md border border-white/10 bg-white/5 px-2 text-[11px] font-semibold text-white/70 hover:bg-white/10 hover:text-white"
|
|
href={langSwitch.href}
|
|
aria-label={lang === "fr" ? "Switch to English" : "Passer en français"}
|
|
>{langSwitch.label}</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="pt-28 sm:pt-32">
|
|
<slot />
|
|
</main>
|
|
|
|
<footer class="mx-auto max-w-6xl px-4 pb-10 pt-12 text-xs text-white/50 sm:px-6">
|
|
<div class="flex flex-col items-start justify-between gap-4 border-t border-white/10 pt-6 sm:flex-row sm:items-center">
|
|
<div>© {new Date().getFullYear()} InfraFabric</div>
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<a class="hover:text-white/80" href="/privacy/">Privacy</a>
|
|
<span aria-hidden="true" class="text-white/20">|</span>
|
|
<a class="hover:text-white/80" href="/terms/">Terms</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<a
|
|
href="mailto:ds@infrafabric.io?subject=IF.Trace%20contact"
|
|
class="fixed bottom-6 right-6 inline-flex h-10 items-center justify-center rounded-full border border-white/10 bg-slate-950/50 px-4 text-xs font-medium text-white/80 backdrop-blur hover:bg-slate-950/70 hover:text-white"
|
|
>contact</a
|
|
>
|
|
</body>
|
|
</html>
|