PublicFooter
Reusable public footer component.
Usage
Components are auto-discovered. Use the component directly in any .wrn view:
<PublicFooter />Legacy mount name: data-component="PublicFooter".
Props and attributes
| Prop | Type | Requirement | Default |
|---|---|---|---|
class | string | Optional | "" |
Slots
This component does not declare a slot.
Events
submit
Source contract
Installed source: components/PublicFooter.wrn
component PublicFooter {
props {
class: string = ""
homeHref: string = "/"
brandName: string = "WRNexusJS"
brandTagline: string = "Identity Cloud"
brandAriaLabel: string = "WRNexusJS home"
newsletterEyebrow: string = "WRNexusJS updates"
newsletterTitle: string = "Identity insights delivered to your inbox"
newsletterDescription: string = "Get product updates, security guidance, implementation strategies, and practical identity architecture resources."
newsletterAction: string = "/api/newsletter/subscribe"
newsletterButtonLabel: string = "Subscribe"
newsletterPlaceholder: string = "Enter your work email"
newsletterSuccessMessage: string = "Thanks. Please check your inbox to confirm your subscription."
copyrightText: string = "© 2026 WRNexusJS. All rights reserved."
attributionText: string = "Built by WorkRoot Workspace."
showNewsletter: boolean = true
showSocialLinks: boolean = true
showThemeToggle: boolean = true
}
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 data-show="showNewsletter"
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>
{newsletterEyebrow}
</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"
>
{newsletterTitle}
</h2>
<p class="mt-3 max-w-2xl text-sm leading-6 text-slate-600 dark:text-slate-400 sm:text-base">
{newsletterDescription}
</p>
</div>
<div>
<form
method="post"
action="{newsletterAction}"
@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="{newsletterPlaceholder}"
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"
>
{newsletterButtonLabel}
<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>
{newsletterSuccessMessage}
</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="{homeHref}"
aria-label="{brandAriaLabel}"
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">
{brandName}
</span>
<span
class="block text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400"
>
{brandTagline}
</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 data-show="showSocialLinks" class="mt-6 flex items-center gap-2">
<a
href="https://github.com/wrnexus"
target="_blank"
rel="noopener noreferrer"
aria-label="WRNexusJS 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="WRNexusJS 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="WRNexusJS 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="WRNexusJS 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"
>
<slot name="navigation">
<!-- 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>
</slot>
</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>
{copyrightText}
</p>
<span class="hidden h-1 w-1 rounded-full bg-slate-300 dark:bg-slate-700 sm:block">
</span>
<p>
{attributionText}
</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 data-show="showThemeToggle"
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>
}
}