609 lines
28 KiB
Plaintext
609 lines
28 KiB
Plaintext
component PublicFooter {
|
|
props {
|
|
class: string = ""
|
|
}
|
|
state email = ""
|
|
state newsletterSubmitted = false
|
|
|
|
view {
|
|
<footer
|
|
class="relative overflow-hidden border-t border-slate-200 bg-slate-50 dark:border-white/10 dark:bg-slate-950 {class}"
|
|
>
|
|
|
|
<!-- Decorative background -->
|
|
<div
|
|
aria-hidden="true"
|
|
class="pointer-events-none absolute inset-x-0 top-0 h-96 overflow-hidden"
|
|
>
|
|
<div class="absolute -left-32 -top-48 h-96 w-96 rounded-full bg-indigo-300/20 blur-3xl dark:bg-indigo-500/10"></div>
|
|
|
|
<div class="absolute -right-32 -top-48 h-96 w-96 rounded-full bg-violet-300/20 blur-3xl dark:bg-violet-500/10"></div>
|
|
</div>
|
|
|
|
<div class="relative w-full px-5 py-12 sm:px-8 lg:px-10 lg:py-16 xl:px-12">
|
|
|
|
<!-- Newsletter and CTA -->
|
|
<section
|
|
aria-labelledby="footer-newsletter-title"
|
|
class="relative overflow-hidden rounded-3xl border border-indigo-200 bg-linear-to-br from-indigo-50 via-white to-violet-50 p-6 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 sm:p-8 lg:p-10"
|
|
>
|
|
<div aria-hidden="true" class="absolute -right-24 -top-24 h-64 w-64 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10" ></div>
|
|
|
|
<div aria-hidden="true" class="absolute -bottom-24 -left-24 h-64 w-64 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" ></div>
|
|
|
|
<div class="relative grid items-center gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,0.75fr)]">
|
|
<div>
|
|
<span
|
|
class="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/70 px-3 py-1.5 text-xs font-semibold text-indigo-700 backdrop-blur-sm dark:border-indigo-500/20 dark:bg-white/5 dark:text-indigo-300"
|
|
>
|
|
<span class="icon-[lucide--mail-plus] h-3.5 w-3.5" aria-hidden="true" ></span>
|
|
|
|
WrNexus updates
|
|
</span>
|
|
|
|
<h2
|
|
id="footer-newsletter-title"
|
|
class="mt-5 max-w-2xl text-2xl font-bold tracking-tight text-slate-950 dark:text-white sm:text-3xl"
|
|
>
|
|
Identity insights delivered to your inbox
|
|
</h2>
|
|
|
|
<p class="mt-3 max-w-2xl text-sm leading-6 text-slate-600 dark:text-slate-400 sm:text-base">
|
|
Get product updates, security guidance, implementation
|
|
strategies, and practical identity architecture resources.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<form
|
|
method="post"
|
|
action="/api/newsletter/subscribe"
|
|
@submit="newsletterSubmitted = true"
|
|
class="rounded-2xl border border-slate-200 bg-white/80 p-2 shadow-lg shadow-slate-950/5 backdrop-blur-sm dark:border-white/10 dark:bg-white/5"
|
|
>
|
|
<div class="flex flex-col gap-2 sm:flex-row">
|
|
<label
|
|
class="sr-only"
|
|
for="footer-newsletter-email"
|
|
>
|
|
Work email address
|
|
</label>
|
|
|
|
<div class="relative min-w-0 flex-1">
|
|
<span class="icon-[lucide--mail] pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" aria-hidden="true" ></span>
|
|
|
|
<input
|
|
id="footer-newsletter-email"
|
|
name="email"
|
|
type="email"
|
|
autocomplete="email"
|
|
required
|
|
bind:value="email"
|
|
placeholder="Enter your work email"
|
|
class="h-12 w-full rounded-xl border border-transparent bg-transparent pl-11 pr-4 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-indigo-300 focus:bg-white focus:ring-4 focus:ring-indigo-500/10 dark:text-white dark:focus:border-indigo-500/30 dark:focus:bg-slate-900"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="group inline-flex h-12 shrink-0 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
|
|
>
|
|
Subscribe
|
|
|
|
<span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" ></span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<p class="mt-3 flex items-start gap-2 text-xs leading-5 text-slate-500 dark:text-slate-400">
|
|
<span class="icon-[lucide--shield-check] mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden="true" ></span>
|
|
|
|
No spam. Unsubscribe at any time. Read our
|
|
<a
|
|
href="/privacy"
|
|
class="font-semibold text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
|
|
>
|
|
privacy policy
|
|
</a>.
|
|
</p>
|
|
|
|
<div
|
|
data-show="newsletterSubmitted"
|
|
role="status"
|
|
class="mt-3 flex items-center gap-2 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2.5 text-sm font-medium text-emerald-800 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300"
|
|
>
|
|
<span class="icon-[lucide--circle-check] h-4 w-4 shrink-0" aria-hidden="true" ></span>
|
|
|
|
Thanks. Please check your inbox to confirm your subscription.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Main footer -->
|
|
<div class="mt-12 grid gap-10 lg:grid-cols-[minmax(16rem,1.25fr)_minmax(0,3fr)] lg:gap-16">
|
|
|
|
<!-- Brand -->
|
|
<div>
|
|
<a
|
|
href="/"
|
|
aria-label="WrNexus home"
|
|
class="group inline-flex items-center gap-3 rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
|
|
>
|
|
<span
|
|
class="grid h-11 w-11 place-items-center rounded-2xl bg-indigo-600 text-white shadow-lg shadow-indigo-600/20 transition group-hover:-translate-y-0.5 group-hover:bg-indigo-500"
|
|
>
|
|
<span class="icon-[lucide--blocks] h-5 w-5" aria-hidden="true" ></span>
|
|
</span>
|
|
|
|
<span>
|
|
<span class="block text-lg font-bold tracking-tight text-slate-950 dark:text-white">
|
|
WrNexus
|
|
</span>
|
|
|
|
<span
|
|
class="block text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400"
|
|
>
|
|
Identity Cloud
|
|
</span>
|
|
</span>
|
|
</a>
|
|
|
|
<p class="mt-5 max-w-sm text-sm leading-6 text-slate-600 dark:text-slate-400">
|
|
Secure authentication, user management, organizations,
|
|
authorization, and enterprise identity for modern applications.
|
|
</p>
|
|
|
|
<div class="mt-6 flex flex-wrap items-center gap-2">
|
|
<a
|
|
href="/status"
|
|
class="inline-flex items-center gap-2 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-semibold text-emerald-800 transition hover:border-emerald-300 hover:bg-emerald-100 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300 dark:hover:border-emerald-500/30"
|
|
>
|
|
<span class="relative flex h-2 w-2">
|
|
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60"></span>
|
|
<span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>
|
|
</span>
|
|
|
|
All systems operational
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Social links -->
|
|
<div class="mt-6 flex items-center gap-2">
|
|
<a
|
|
href="https://github.com/wrnexus"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="WrNexus on GitHub"
|
|
class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
|
|
>
|
|
<span class="icon-[lucide--github] h-4.5 w-4.5" aria-hidden="true" ></span>
|
|
</a>
|
|
|
|
<a
|
|
href="https://www.linkedin.com/company/wrnexus"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="WrNexus on LinkedIn"
|
|
class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
|
|
>
|
|
<span class="icon-[lucide--linkedin] h-4.5 w-4.5" aria-hidden="true" ></span>
|
|
</a>
|
|
|
|
<a
|
|
href="https://x.com/wrnexus"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="WrNexus on X"
|
|
class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
|
|
>
|
|
<span class="icon-[lucide--twitter] h-4.5 w-4.5" aria-hidden="true" ></span>
|
|
</a>
|
|
|
|
<a
|
|
href="https://www.youtube.com/@wrnexus"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="WrNexus on YouTube"
|
|
class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
|
|
>
|
|
<span class="icon-[lucide--youtube] h-4.5 w-4.5" aria-hidden="true" ></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation columns -->
|
|
<nav
|
|
aria-label="Footer navigation"
|
|
class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-3 xl:grid-cols-5"
|
|
>
|
|
<!-- Product -->
|
|
<div>
|
|
<h3 class="text-sm font-bold text-slate-950 dark:text-white">
|
|
Product
|
|
</h3>
|
|
|
|
<ul class="mt-4 space-y-3">
|
|
<li>
|
|
<a
|
|
href="/platform"
|
|
class="footer-link"
|
|
>
|
|
Platform
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/authentication"
|
|
class="footer-link"
|
|
>
|
|
Authentication
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/user-management"
|
|
class="footer-link"
|
|
>
|
|
User management
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/organizations"
|
|
class="footer-link"
|
|
>
|
|
Organizations
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/authorization"
|
|
class="footer-link"
|
|
>
|
|
Authorization
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/enterprise-sso"
|
|
class="footer-link"
|
|
>
|
|
Enterprise SSO
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Solutions -->
|
|
<div>
|
|
<h3 class="text-sm font-bold text-slate-950 dark:text-white">
|
|
Solutions
|
|
</h3>
|
|
|
|
<ul class="mt-4 space-y-3">
|
|
<li>
|
|
<a
|
|
href="/solutions/startups"
|
|
class="footer-link"
|
|
>
|
|
Startups
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/solutions/saas"
|
|
class="footer-link"
|
|
>
|
|
SaaS
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/solutions/enterprise"
|
|
class="footer-link"
|
|
>
|
|
Enterprise
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/solutions/developers"
|
|
class="footer-link"
|
|
>
|
|
Developers
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/solutions/agencies"
|
|
class="footer-link"
|
|
>
|
|
Agencies
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/solutions/b2b"
|
|
class="footer-link"
|
|
>
|
|
B2B
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Developers -->
|
|
<div>
|
|
<h3 class="text-sm font-bold text-slate-950 dark:text-white">
|
|
Developers
|
|
</h3>
|
|
|
|
<ul class="mt-4 space-y-3">
|
|
<li>
|
|
<a
|
|
href="/docs"
|
|
class="footer-link"
|
|
>
|
|
Documentation
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/docs/api"
|
|
class="footer-link"
|
|
>
|
|
API reference
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/sdks"
|
|
class="footer-link"
|
|
>
|
|
SDKs
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/examples"
|
|
class="footer-link"
|
|
>
|
|
Examples
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/docs/webhooks"
|
|
class="footer-link"
|
|
>
|
|
Webhooks
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/changelog"
|
|
class="footer-link"
|
|
>
|
|
Changelog
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Resources -->
|
|
<div>
|
|
<h3 class="text-sm font-bold text-slate-950 dark:text-white">
|
|
Resources
|
|
</h3>
|
|
|
|
<ul class="mt-4 space-y-3">
|
|
<li>
|
|
<a
|
|
href="/blog"
|
|
class="footer-link"
|
|
>
|
|
Blog
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/guides"
|
|
class="footer-link"
|
|
>
|
|
Guides
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/customers"
|
|
class="footer-link"
|
|
>
|
|
Customers
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/help"
|
|
class="footer-link"
|
|
>
|
|
Help center
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/security"
|
|
class="footer-link"
|
|
>
|
|
Security
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/trust"
|
|
class="footer-link"
|
|
>
|
|
Trust center
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Company -->
|
|
<div>
|
|
<h3 class="text-sm font-bold text-slate-950 dark:text-white">
|
|
Company
|
|
</h3>
|
|
|
|
<ul class="mt-4 space-y-3">
|
|
<li>
|
|
<a
|
|
href="/about"
|
|
class="footer-link"
|
|
>
|
|
About
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/careers"
|
|
class="footer-link"
|
|
>
|
|
Careers
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/partners"
|
|
class="footer-link"
|
|
>
|
|
Partners
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/contact"
|
|
class="footer-link"
|
|
>
|
|
Contact
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/pricing"
|
|
class="footer-link"
|
|
>
|
|
Pricing
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
href="/status"
|
|
class="footer-link"
|
|
>
|
|
Status
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Bottom bar -->
|
|
<div
|
|
class="mt-12 flex flex-col gap-5 border-t border-slate-200 pt-6 dark:border-white/10 lg:flex-row lg:items-center lg:justify-between"
|
|
>
|
|
<div
|
|
class="flex flex-col gap-2 text-xs text-slate-500 dark:text-slate-400 sm:flex-row sm:items-center sm:gap-4"
|
|
>
|
|
<p>
|
|
© 2026 WrNexus. All rights reserved.
|
|
</p>
|
|
|
|
<span class="hidden h-1 w-1 rounded-full bg-slate-300 dark:bg-slate-700 sm:block"></span>
|
|
|
|
<p>
|
|
Built by WorkRoot Workspace.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center gap-x-5 gap-y-3">
|
|
<a
|
|
href="/privacy"
|
|
class="footer-bottom-link"
|
|
>
|
|
Privacy
|
|
</a>
|
|
|
|
<a
|
|
href="/terms"
|
|
class="footer-bottom-link"
|
|
>
|
|
Terms
|
|
</a>
|
|
|
|
<a
|
|
href="/cookies"
|
|
class="footer-bottom-link"
|
|
>
|
|
Cookies
|
|
</a>
|
|
|
|
<a
|
|
href="/legal"
|
|
class="footer-bottom-link"
|
|
>
|
|
Legal
|
|
</a>
|
|
|
|
<button
|
|
type="button"
|
|
data-open-cookie-preferences
|
|
class="footer-bottom-link"
|
|
>
|
|
Cookie preferences
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
data-wire-theme-toggle
|
|
class="inline-flex items-center gap-2 rounded-lg text-xs font-semibold text-slate-500 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
|
|
>
|
|
<span class="icon-[lucide--moon] h-3.5 w-3.5 dark:hidden" aria-hidden="true" ></span>
|
|
|
|
<span class="icon-[lucide--sun] hidden h-3.5 w-3.5 dark:block" aria-hidden="true" ></span>
|
|
|
|
Theme
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
}
|
|
}
|