feat: add reusable public chrome and named environments
This commit is contained in:
@@ -1,6 +1,22 @@
|
||||
component PublicFooter {
|
||||
props {
|
||||
class: string = ""
|
||||
homeHref: string = "/"
|
||||
brandName: string = "WrNexus"
|
||||
brandTagline: string = "Identity Cloud"
|
||||
brandAriaLabel: string = "WrNexus home"
|
||||
newsletterEyebrow: string = "WrNexus 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 WrNexus. All rights reserved."
|
||||
attributionText: string = "Built by WorkRoot Workspace."
|
||||
showNewsletter: boolean = true
|
||||
showSocialLinks: boolean = true
|
||||
showThemeToggle: boolean = true
|
||||
}
|
||||
state email = ""
|
||||
state newsletterSubmitted = false
|
||||
@@ -23,7 +39,7 @@ component PublicFooter {
|
||||
<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
|
||||
<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"
|
||||
>
|
||||
@@ -38,26 +54,25 @@ component PublicFooter {
|
||||
>
|
||||
<span class="icon-[lucide--mail-plus] h-3.5 w-3.5" aria-hidden="true" ></span>
|
||||
|
||||
WrNexus updates
|
||||
{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"
|
||||
>
|
||||
Identity insights delivered to your inbox
|
||||
{newsletterTitle}
|
||||
</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.
|
||||
{newsletterDescription}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<form
|
||||
method="post"
|
||||
action="/api/newsletter/subscribe"
|
||||
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"
|
||||
>
|
||||
@@ -79,7 +94,7 @@ component PublicFooter {
|
||||
autocomplete="email"
|
||||
required
|
||||
bind:value="email"
|
||||
placeholder="Enter your work 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>
|
||||
@@ -88,7 +103,7 @@ component PublicFooter {
|
||||
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
|
||||
{newsletterButtonLabel}
|
||||
|
||||
<span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" ></span>
|
||||
</button>
|
||||
@@ -114,7 +129,7 @@ component PublicFooter {
|
||||
>
|
||||
<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.
|
||||
{newsletterSuccessMessage}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -126,8 +141,8 @@ component PublicFooter {
|
||||
<!-- Brand -->
|
||||
<div>
|
||||
<a
|
||||
href="/"
|
||||
aria-label="WrNexus home"
|
||||
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
|
||||
@@ -138,13 +153,13 @@ component PublicFooter {
|
||||
|
||||
<span>
|
||||
<span class="block text-lg font-bold tracking-tight text-slate-950 dark:text-white">
|
||||
WrNexus
|
||||
{brandName}
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="block text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400"
|
||||
>
|
||||
Identity Cloud
|
||||
{brandTagline}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
@@ -169,7 +184,7 @@ component PublicFooter {
|
||||
</div>
|
||||
|
||||
<!-- Social links -->
|
||||
<div class="mt-6 flex items-center gap-2">
|
||||
<div data-show="showSocialLinks" class="mt-6 flex items-center gap-2">
|
||||
<a
|
||||
href="https://github.com/wrnexus"
|
||||
target="_blank"
|
||||
@@ -217,6 +232,7 @@ component PublicFooter {
|
||||
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">
|
||||
@@ -531,6 +547,7 @@ component PublicFooter {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</slot>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@@ -542,13 +559,13 @@ component PublicFooter {
|
||||
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.
|
||||
{copyrightText}
|
||||
</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.
|
||||
{attributionText}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -581,7 +598,7 @@ component PublicFooter {
|
||||
Legal
|
||||
</a>
|
||||
|
||||
<button
|
||||
<button data-show="showThemeToggle"
|
||||
type="button"
|
||||
data-open-cookie-preferences
|
||||
class="footer-bottom-link"
|
||||
|
||||
Reference in New Issue
Block a user