mirror of
https://github.com/felipegcoutinho/openmonetis.git
synced 2026-06-10 07:16:01 +00:00
style(ui): update auth pages layout and navigation capitalization
This commit improves the visual design of the auth pages by adding a new layout wrapper with an animated blob background effect and updating the auth card shell with a glassmorphism style. It also updates the navigation items to use capitalized labels instead of lowercase for better readability.
This commit is contained in:
@@ -5,8 +5,9 @@ import AuthSidebar from "./auth-sidebar";
|
||||
|
||||
export function AuthCardShell({ children }: PropsWithChildren) {
|
||||
return (
|
||||
<Card className="relative overflow-hidden p-0">
|
||||
<Card className="relative overflow-hidden rounded-2xl md:rounded-[2rem] p-0 shadow-lg border-primary/10">
|
||||
<div className="pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--color-primary)_0%,transparent_70%)] opacity-10 blur-3xl animate-blob mix-blend-multiply" />
|
||||
<DotPattern
|
||||
width={17}
|
||||
height={17}
|
||||
@@ -15,11 +16,13 @@ export function AuthCardShell({ children }: PropsWithChildren) {
|
||||
cr={1.3}
|
||||
className="text-primary/8 mask-[linear-gradient(to_bottom,black,transparent_84%)]"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-linear-to-br from-primary/6 via-transparent to-transparent" />
|
||||
<div className="absolute inset-0 bg-linear-to-br from-primary/6 via-transparent to-transparent opacity-80" />
|
||||
</div>
|
||||
|
||||
<CardContent className="relative z-10 grid gap-0 p-0 md:min-h-[640px] md:grid-cols-[1.05fr_0.95fr]">
|
||||
<div className="flex bg-card/92 backdrop-blur-[1px]">{children}</div>
|
||||
<CardContent className="relative z-10 grid gap-0 p-0 md:min-h-[640px] md:grid-cols-[1.05fr_0.95fr] overflow-hidden rounded-[inherit]">
|
||||
<div className="flex bg-card/60 backdrop-blur-xl md:rounded-l-[2rem]">
|
||||
{children}
|
||||
</div>
|
||||
<AuthSidebar />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -36,12 +36,12 @@ export type FeatureItem = {
|
||||
};
|
||||
|
||||
export const navLinks = [
|
||||
{ href: "#telas", label: "conheça as telas" },
|
||||
{ href: "#funcionalidades", label: "funcionalidades" },
|
||||
{ href: "#mobile", label: "mobile" },
|
||||
{ href: "#stack", label: "stack" },
|
||||
{ href: "#como-usar", label: "como usar" },
|
||||
{ href: "#para-quem-e", label: "para quem é" },
|
||||
{ href: "#telas", label: "Conheça as telas" },
|
||||
{ href: "#funcionalidades", label: "Funcionalidades" },
|
||||
{ href: "#mobile", label: "Mobile" },
|
||||
{ href: "#stack", label: "Stack" },
|
||||
{ href: "#como-usar", label: "Como usar" },
|
||||
{ href: "#para-quem-e", label: "Para quem é" },
|
||||
] as const;
|
||||
|
||||
export const mainFeatures: FeatureItem[] = [
|
||||
|
||||
Reference in New Issue
Block a user