Files
WRNexusJS/examples/component-showcase/app/pages/new-components-showcase.wrn
T
2026-07-30 18:59:01 +05:30

104 lines
3.5 KiB
Plaintext

page NewComponentsShowcase {
layout = "none"
state features = [
{
title: "Reusable sections",
description: "Keep page spacing and surfaces consistent across applications.",
icon: "icon-[lucide--panels-top-left]",
href: "#sections"
},
{
title: "Controlled cards",
description: "Compose capabilities without duplicating card styles.",
icon: "icon-[lucide--layout-grid]",
href: "#cards"
},
{
title: "Accessible actions",
description: "Shared buttons, links and focus states remain predictable.",
icon: "icon-[lucide--mouse-pointer-click]",
href: "#actions"
}
]
state metrics = [
{ label: "Existing redesigns", value: "15", icon: "icon-[lucide--refresh-cw]" },
{ label: "New composites", value: "18", icon: "icon-[lucide--blocks]" },
{ label: "Total files", value: "33", icon: "icon-[lucide--files]" },
{ label: "Theme support", value: "100", suffix: "%", icon: "icon-[lucide--palette]" }
]
view {
<PublicPageShell fullWidth="true">
<AnnouncementBar
badge="New"
message="WRNexus UI composite component release"
description="The package adds reusable marketing and public-page components."
actionLabel="Review components"
actionHref="#components"
dismissible="true"
/>
<SplitHero
eyebrow="@wrnexus/ui 0.5.12"
title="A complete reusable"
highlight="page-building system"
description="Build PMS, WRNexus and WorkRoot pages from shared, theme-aware components instead of repeated page markup."
primaryLabel="Browse components"
primaryHref="#components"
primaryIcon="icon-[lucide--blocks]"
secondaryLabel="Read migration guide"
secondaryHref="#migration"
>
<Card
data-slot="visual"
title="Component release"
description="15 redesigned primitives and 18 new composites."
variant="soft"
size="lg"
>
<MetricGrid items='{metrics}' columns="2" tabletColumns="2" />
</Card>
</SplitHero>
<Section id="components" variant="soft" spacing="lg" borderTop="true" borderBottom="true">
<MarketingSectionHeader
eyebrow="Component system"
title="Design once and reuse everywhere"
description="The new composites are application-independent and remain controlled by the WRNexus theme tokens."
actionLabel="View all documentation"
actionHref="/components"
/>
<FeatureGrid columns="3" tabletColumns="2" gap="lg" class="mt-10">
{#each features as feature}
<FeatureIconCard
icon='{feature.icon}'
title='{feature.title}'
description='{feature.description}'
href='{feature.href}'
/>
{/each}
</FeatureGrid>
</Section>
<StatsBar items='{metrics}' columns="4" />
<CTASection
eyebrow="Ready for PMS"
title="Publish the UI package, then rebuild the Police Management System"
description="Pages can now focus on police-domain data while the UI package owns shared layout and visual behavior."
primaryLabel="Publish release"
primaryHref="#publish"
primaryIcon="icon-[lucide--package-check]"
secondaryLabel="Open checklist"
secondaryHref="#checklist"
variant="gradient"
/>
<BackToTop threshold="400" showProgress="true" />
</PublicPageShell>
}
}