WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): expose app theme contract and public components

Browse Source
This commit is contained in:
Clintchiz
2026-07-19 20:23:20 +05:30
parent c5326f7622
commit a3e21163c1
102 changed files with 12748 additions and 600 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/PublicFooter.wrn
+606 -9
View File
@@ -1,11 +1,608 @@
component PublicFooter {
props {
class = ""
brand = "WRNexusJS"
description = "SSR-first, Bun-native full-stack framework."
copyright = "© 2026 WorkRoot Workspace"
}
view {
<footer class="border-t border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-950 {class}"><div class="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8"><div class="grid gap-10 lg:grid-cols-[1.2fr_2fr]"><div><div class="text-xl font-black">{brand}</div><p class="mt-3 max-w-sm text-sm leading-6 text-slate-500">{description}</p></div><div class="grid grid-cols-2 gap-8 sm:grid-cols-4"><slot /></div></div><div class="mt-12 flex flex-col gap-4 border-t border-slate-200 pt-6 text-sm text-slate-500 sm:flex-row sm:items-center sm:justify-between dark:border-slate-800"><span>{copyright}</span><button data-wire-theme-toggle type="button" class="min-h-10 rounded-xl border border-slate-300 px-3 dark:border-slate-700">Toggle theme</button></div></div></footer>
}
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>
}
}