Login
Login page for your application.
import Logo from "@/mynaui/Logo";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
export default function Basic() {
return (
<section className="flex flex-col items-center gap-10 bg-primary-foreground py-20 md:min-h-screen">
<Logo />
<div className="flex w-full max-w-sm flex-col gap-6 rounded border bg-background p-6">
<div>
<h1 className="text-xl font-bold tracking-tight">Login</h1>
<p className="mt-1 text-sm text-muted-foreground">
Enter your details below to login
</p>
</div>
<form className="grid gap-4">
<div className="grid gap-2">
<Label htmlFor="email">Email</Label>
<Input
required
id="email"
type="email"
autoComplete="username"
placeholder="team@mynaui.com"
/>
</div>
<div className="grid gap-2">
<Label htmlFor="password">Password</Label>
<Input
required
id="password"
type="password"
placeholder="••••••••••"
autoComplete="current-password"
/>
</div>
<Button type="submit" className="w-full">
Login
</Button>
<Button variant="outline" className="w-full">
Login with Google
</Button>
</form>
<div className="flex flex-col gap-4 text-sm">
<p>
Don't have an account?{" "}
<a href="#" className="underline">
Sign up
</a>
</p>
<a href="#" className="underline">
Forgot your password?
</a>
</div>
</div>
<p className="text-sm text-muted-foreground">© 2025 MynaUI</p>
</section>
);
}
import Logo from "@/mynaui/Logo";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
export default function Split() {
return (
<section className="w-full md:grid md:min-h-screen md:grid-cols-2">
<div className="flex items-center justify-center px-4 py-12">
<div className="mx-auto grid w-full max-w-sm gap-6">
<Logo />
<hr />
<div>
<h1 className="text-xl font-bold tracking-tight">Login</h1>
<p className="text-sm text-muted-foreground">
Enter your details below to login
</p>
</div>
<form className="grid gap-4">
<div className="grid gap-2">
<Label htmlFor="email-3">Email</Label>
<Input
required
id="email-3"
type="email"
autoComplete="username"
placeholder="team@mynaui.com"
/>
</div>
<div className="grid gap-2">
<Label htmlFor="password-3">Password</Label>
<Input
required
id="password-3"
type="password"
placeholder="••••••••••"
autoComplete="current-password"
/>
</div>
<Button type="submit" className="w-full">
Login
</Button>
<Button variant="outline" className="w-full">
Login with Google
</Button>
</form>
<div className="flex flex-col gap-4 text-sm">
<p>
Don't have an account?{" "}
<a href="#" className="underline">
Sign up
</a>
</p>
<a href="#" className="underline">
Forgot your password?
</a>
</div>
<hr />
<p className="text-sm text-muted-foreground">© 2025 MynaUI</p>
</div>
</div>
<div className="hidden p-4 md:block">
<img
width="1920"
height="1080"
alt="Pattern background"
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
className="size-full rounded-lg border bg-muted object-cover object-center"
/>
</div>
</section>
);
}
import Logo from "@/mynaui/Logo";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
export default function CenterBox() {
return (
<section className="flex flex-col items-center gap-10 bg-foreground py-14 dark:bg-background md:min-h-screen">
<div className="text-white">
<Logo />
</div>
<div className="w-full max-w-sm rounded-md bg-background/10 p-3">
<div className="flex w-full flex-col gap-6 rounded bg-primary-foreground p-6 shadow-2xl">
<div className="text-center">
<h1 className="text-xl font-bold tracking-tight">Login</h1>
<p className="text-sm text-muted-foreground">
Nice to see you again!
</p>
</div>
<div>
<Separator />
<Separator className="bg-background" />
</div>
<div className="flex flex-col gap-2">
<Button variant="outline" size="sm" className="w-full">
Login with Google
</Button>
<Button variant="outline" size="sm" className="w-full">
Login with Apple
</Button>
</div>
<div className="flex h-2 w-full items-center gap-4 text-muted-foreground">
<div className="w-full">
<Separator />
<Separator className="bg-background" />
</div>
<p>or</p>
<div className="w-full">
<Separator />
<Separator className="bg-background" />
</div>
</div>
<form className="grid gap-4">
<div className="grid gap-2">
<Label htmlFor="email-1">Email</Label>
<Input
required
id="email-1"
type="email"
autoComplete="username"
placeholder="team@mynaui.com"
/>
</div>
<div className="grid gap-2">
<Label htmlFor="password-1">Password</Label>
<Input
required
id="password-1"
type="password"
placeholder="••••••••••"
autoComplete="current-password"
/>
</div>
<Button type="submit" size="sm" className="w-full">
Login
</Button>
</form>
<div className="flex flex-col gap-4 text-center text-sm">
<a href="#" className="underline">
Forgot your password?
</a>
<p>
New to MynaUI?{" "}
<a href="#" className="underline">
Sign up
</a>
</p>
</div>
<div>
<Separator />
<Separator className="bg-background" />
</div>
<p className="text-center text-sm text-muted-foreground">
© 2025 MynaUI
</p>
</div>
</div>
</section>
);
}
import Logo from "@/mynaui/Logo";
import { Button } from "@/components/ui/button";
export default function ImageCover() {
return (
<section className="relative bg-primary-foreground py-14 md:min-h-screen">
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
className="pointer-events-none absolute inset-0 size-full select-none object-cover object-center dark:brightness-50 md:h-screen"
alt="Wallpaper"
/>
<div className="relative flex h-full flex-col items-center justify-between gap-14">
<div className="text-white">
<Logo />
</div>
<div className="flex w-full max-w-sm flex-col gap-6 rounded bg-background/75 p-6 text-center backdrop-blur-xs">
<div>
<h1 className="text-xl font-bold tracking-tight">Login</h1>
<p className="text-sm text-muted-foreground">
Nice to see you again!
</p>
</div>
<div className="flex flex-col gap-2">
<Button variant="outline" size="sm" className="w-full">
Login with Email
</Button>
<Button variant="outline" size="sm" className="w-full">
Login with Google
</Button>
<Button variant="outline" size="sm" className="w-full">
Login with Apple
</Button>
</div>
<p className="text-sm">
Don't have an account?{" "}
<a href="#" className="underline">
Sign up
</a>
</p>
</div>
<p className="text-sm font-medium text-white">© 2025 MynaUI</p>
</div>
</section>
);
}
import Logo from "@/mynaui/Logo";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { CheckHexagon } from "@mynaui/icons-react";
export default function SplitContent() {
return (
<section className="grid w-full grid-cols-1 md:min-h-screen md:grid-cols-2">
<div className="flex items-center justify-center bg-primary-foreground px-4 py-12 text-base md:border-r">
<div className="mx-auto grid w-full max-w-md gap-8">
<Logo />
<div className="flex flex-col gap-4">
<h1 className="text-4xl font-thin tracking-tight">
You're one step away from your dream.
</h1>
<p>
A beautifully designed interface that is fine-tuned to get out of
your way and make your work as fast as possible.
</p>
</div>
<div className="flex flex-col gap-3">
{[
{ text: "Track and split bills effortlessly" },
{ text: "Simplify group expenses" },
{ text: "Hassle-free expense management" },
{ text: "Insights into spending patterns" },
].map((content, index) => (
<div key={index} className="flex items-center gap-2">
<CheckHexagon className="shrink-0" />
<p>{content.text}</p>
</div>
))}
</div>
<Separator />
<p>
“No hidden fees or charges — the price you see is the price you pay.
This makes my life so much easier!”
</p>
<svg
xmlns="http://www.w3.org/2000/svg"
width="88"
height="43"
fill="#fff"
>
<path d="M85.909 22.3782c-.4994-.0588-.9842-.1323-1.4837-.1763-.2497-.0147-.5142 0-.7639.0734-.808.2791-1.6159.5876-2.4386.8961-.8961.3379-1.7922.6905-2.7177 1.0137-.5436.1763-1.0871.191-1.5572-.1029-.1763-.1028-.3379-.2644-.4408-.426-.1175-.1763-.235-.191-.426-.1028-.3966.1763-.7933.3232-1.1752.5142-1.1899.6023-2.3799 1.2193-3.5992 1.8216-.4848.235-.9695.4848-1.5278.4848-.3672 0-.7051-.0588-.9549-.2939-.2791-.2644-.3085-.7785-.044-1.1311.4848-.6023.9989-1.1899 1.4837-1.7776.0441-.044.0735-.1028.1028-.1616-.0734.0147-.1616.0147-.2203.0441-1.043.6317-2.1007 1.2781-3.1438 1.9392-.8373.5288-1.6453 1.1017-2.468 1.6747-1.3956.9695-2.8058 1.9538-4.2455 2.9381-1.0724.7345-2.1595 1.4984-3.2907 2.2182-.852.5436-1.7334 1.0724-2.6589 1.5425-.8815.4701-1.8217.8227-2.8353.8667-1.1899.0441-1.8804-.3672-2.1007-1.2193-.1323-.4847-.0294-1.0136.1616-1.5278.0587-.1616.1028-.3085.1469-.4701.0147-.0587 0-.1175.0147-.1762-.0735.0293-.1469.0293-.2057.0734-.2938.1763-.5876.3966-.8961.5582-.7492.3673-1.5131.7639-2.3064 1.0578-.6905.2497-1.2487-.1323-1.1459-.6758.0294-.1763.1322-.3085.3379-.4113.7345-.3526 1.4837-.6905 2.1889-1.1018.7639-.4407 1.4837-.9255 2.2035-1.4103.5436-.3526 1.0871-.7198 1.616-1.1018.1469-.1028.2791-.2497.3819-.3966.3379-.4701.6317-.9696.9843-1.425.7345-.9255 1.4837-1.8363 2.2183-2.7324.4994-.6023.9842-1.2046 1.4984-1.7776.5729-.6317 1.1752-1.2487 1.7628-1.8657.4261-.4407.8374-.8961 1.2634-1.3368.5436-.5729 1.0871-1.1458 1.6454-1.6894.9989-.9696 1.9832-1.9391 2.9821-2.8793.3967-.3673.7933-.7345 1.2046-1.0871 1.2487-1.0577 2.468-2.1301 3.7167-3.12909 1.0871-.86673 2.2183-1.66002 3.3201-2.4533 1.0871-.76391 2.1888-1.49843 3.2759-2.21826.4701-.3085.9843-.57293 1.4691-.85205.1028-.05876.2056-.1469.3085-.20566.4995-.27912.9842-.55824 1.469-.80798 1.1165-.58762 2.2183-1.14585 3.3788-1.60126.5436-.20566 1.0871-.41133 1.6307-.572925.235-.058761.4994 0 .7639 0 .0881 0 .1909 0 .2791.029381.3526.117524.5876.470094.6317.852044.044.39664-.1322.73453-.3085 1.07241-.4114.79328-.9843 1.51311-1.6307 2.17418-.8226.85205-1.66 1.7041-2.5414 2.52676-.8521.7786-1.7629 1.52781-2.6884 2.27702-1.1018.88143-2.2329 1.74813-3.3788 2.62963-.7933.6023-1.6159 1.1899-2.4239 1.7922-.7198.5289-1.4397 1.0724-2.1742 1.6013-.4407.3231-.9108.617-1.3515.9401-.4701.3379-.9402.6905-1.425 1.0431-.6464.4701-1.3221.9402-1.9832 1.4249-.5729.4261-1.1458.8668-1.7335 1.3075-.6463.4848-1.3074.9549-1.9685 1.4397-1.0136.7345-2.042 1.4984-3.0703 2.2476-1.1165.8227-2.2476 1.6453-3.4082 2.4827-.8667.6317-1.7628 1.2634-2.6443 1.9097-.1322.1029-.2203.2498-.2938.382-.3819.6758-.7786 1.3368-1.1017 2.0273-.2204.4848-.3673.9842-.4848 1.4837-.0882.3526.0734.4701.4994.4407.5436-.0294 1.0578-.2203 1.5425-.4701.8227-.4113 1.6307-.8373 2.4093-1.3074.7492-.4407 1.4396-.9402 2.1595-1.4103.4701-.3085.9548-.617 1.4249-.9402.6758-.4554 1.3516-.9108 2.0273-1.3809.9402-.6464 1.8657-1.3221 2.8059-1.9538.8667-.5876 1.7482-1.1606 2.6149-1.7188.5729-.3673 1.1459-.7492 1.7335-1.0871 1.1311-.6611 2.2329-1.3221 3.4375-1.7922.382-.1469.7639-.2057 1.1606-.1469.2644.044.3526.2497.4407.4554.0735.1762.0441.3525-.0588.5435-.4407.8374-1.1164 1.5131-1.7922 2.2183-.1469.1469-.2791.2938-.426.4407-.0294.0294-.0441.0881-.0735.1322.0588-.0147.1029-.0147.1616-.0294.5289-.2644 1.0284-.5435 1.5572-.7786 1.043-.4848 2.0714-1.0283 3.1585-1.3515.3819-.1175.7639-.1322 1.1164 0 .2938.1028.4701.3232.5583.6023.044.1616.1322.1616.2791.1322.9549-.1763 1.8069-.6023 2.6883-.9549.8815-.3525 1.7629-.7345 2.659-.9695.6023-.1616 1.1606-.0735 1.7335.044.6023.1176 1.2193.1616 1.8216.2498.1469.0147.3232.0587.3966.1616.1323.191 0 .3672-.2644.5141-.3085.1616-.617.2057-.9402.2057 0 .0588-.0147.0735-.0147.0882ZM84.5134 1.62054c-.0587 0-.1028.01469-.1615.01469-.764.07345-1.4544.33788-2.1302.66107-.8961.42602-1.7922.88143-2.6883 1.36621-.7052.38196-1.4103.7786-2.0861 1.21931-.852.54355-1.7041 1.11648-2.5414 1.6894-.6611.45541-1.3221.91081-1.9685 1.41029-1.19.91081-2.4093 1.851-3.5992 2.82059-.9255.7492-1.851 1.5278-2.7324 2.3504-1.3075 1.2047-2.5855 2.4534-3.8783 3.7314-.9696.9696-1.9098 1.9979-2.8646 3.0263-.8374.9108-1.6747 1.8363-2.4974 2.7911-.6317.7346-1.2487 1.4985-1.8657 2.2624-.0294.044-.0588.1028-.0881.1469.0587-.0294.1322-.0441.1762-.0735.5877-.4113 1.1606-.8226 1.7335-1.234.7639-.5435 1.5131-1.1018 2.2623-1.6306 1.0871-.7786 2.1595-1.5278 3.2173-2.277.7932-.5583 1.5718-1.1165 2.3504-1.6601.5142-.3525 1.0431-.7051 1.5572-1.0577.3379-.2203.6758-.426 1.0137-.6463.4554-.3085.9108-.6317 1.3662-.9549.5288-.3673 1.043-.7346 1.5572-1.1018.661-.4701 1.3221-.9255 1.9685-1.3956.7639-.5582 1.5131-1.1312 2.2623-1.7041.5142-.3819 1.0283-.7786 1.5425-1.1605.4554-.35261.8961-.71988 1.3515-1.07245.3673-.29381.7492-.58761 1.1018-.89611.7052-.63169 1.4103-1.26338 2.0861-1.90976.4847-.45541.9695-.89612 1.4102-1.38091.5583-.617 1.0724-1.27807 1.616-1.90976.3232-.36726.5582-.77859.7051-1.23399.0147-.1616-.044-.19098-.1763-.19098ZM40.0313 5.70448c-2.0126-.01469-4.084.1469-6.1847.51417-1.1165.19097-2.2623.41133-3.3935.69045-1.9538.48478-3.893 1.08709-5.8468 1.76285-1.9685.69045-3.893 1.51315-5.788 2.42395-2.3211 1.1311-4.5688 2.3798-6.6695 3.8195-1.0136.7051-1.9391 1.4544-2.82056 2.2329-.80797.7199-1.55719 1.4691-2.17419 2.2624-.61699.7933-.99895 1.6012-1.13116 2.4092-.05876.3232-.20567.6611-.74921.8667-.55824.2057-1.5425.1616-1.42498-.3672.14691-.6317.32319-1.2781.64638-1.9098.33788-.661.76391-1.3221 1.29276-1.9538.63169-.7345 1.32214-1.4544 2.13012-2.1154 1.01364-.808 1.9979-1.6307 3.18784-2.3211.6317-.3673 1.1752-.7933 1.7922-1.1459 1.0871-.6317 2.1742-1.234 3.2907-1.8069.9842-.4995 2.0273-.9549 3.0409-1.3956.4113-.17628.8667-.3085 1.2781-.47009.3379-.13222.6464-.3085.9695-.44072 2.0861-.86673 4.2162-1.54249 6.3463-2.13011.8668-.23505 1.7335-.44071 2.6002-.66107 1.3222-.33788 2.6443-.57293 3.9518-.73452 1.0283-.13222 2.0419-.24974 3.0556-.3085.8961-.05877 1.7775-.02938 2.6589-.02938 1.6307-.0147 3.1732.19097 4.6129.52885 1.0724.24974 2.0566.60231 2.8793 1.11648.617.38195 1.1311.83735 1.5278 1.36621.3085.42602.6317.86674.852 1.32214.3085.64638.382 1.38091.3673 2.11541-.0147.8521-.2351 1.7041-.5876 2.5562-.617 1.469-1.6454 2.8499-2.9969 4.1427-.6464.617-1.2634 1.2633-1.9685 1.851-.9402.7786-1.9244 1.5425-2.9528 2.2917-1.1311.8226-2.3064 1.6012-3.4963 2.4092-.4848.3232-.999.6317-1.5131.9402-.1763.1028-.2057.1763-.1322.2938.3672.5729.1763 1.234-.1616 1.9244-.0735.147-.0882.3085-.1322.4555.1762-.0441.3672-.0735.5435-.147.7345-.3084 1.469-.6316 2.2036-.9401.9108-.3967 1.8069-.808 2.7177-1.1753.3526-.1469.7639-.235 1.1018-.2497.4848 0 .9108.1175 1.0136.5288.1029.4114.1176.4114.7199.2645.4847-.1176.9695-.2498 1.4543-.3673.191-.0441.382-.0441.5876-.0734.1029-.0147.2351-.0441.3379-.0882.382-.2203.7198-.4407 1.1899-.4701.2204-.0147.4848-.191.7346-.2938.5141-.2057.7639-.2057.9255.1616.0734.1616.0147.3379-.191.4848-.2057.1469-.426.2644-.6464.3966-.0441.0294-.0881.0735-.1322.1029.0441.0147.0881.0147.1322.0293.2057.0147.4113.0294.617.0588.2644.0441.2351.2497.191.426-.0294.2057-.2351.3085-.4407.3967-.1469.0734-.3085.1469-.4407.2497-.3085.2057-.6611.2644-.999.3085-.4701.0588-.9108.0588-1.2193-.2057-.1028-.0881-.3379-.0734-.4848-.1322-.1175-.044-.2203-.0881-.2938-.1616-.0881-.0734-.1616-.0881-.3379-.0293-.4407.1616-.8961.3378-1.3368.426-.8814.1616-1.4544-.0882-1.7188-.6464-.0588-.1469-.1763-.1322-.3526-.0735-.8667.2645-1.6894.6611-2.512 1.0724-.8961.4408-1.807.8815-2.7325 1.3075-.8961.3966-1.9832.2791-2.321-.2057-.2645-.4113-.1323-.8814.1028-1.3662.1616-.3379.2644-.6611.3966-.9989.0147-.0441-.0147-.1029-.0294-.1469-.0734.0293-.1615.044-.235.0881-1.4984.8814-2.9969 1.8069-4.554 2.6884-1.4985.8667-3.041 1.7041-4.5982 2.5561-1.3074.7198-2.6295 1.4544-3.9811 2.1742-1.0871.5876-2.2035 1.1605-3.3347 1.7335-1.5866.8079-3.1878 1.6306-4.8332 2.4092-2.3064 1.0724-4.68621 2.086-7.19828 2.8353-1.17523.3525-2.36516.6757-3.48163.661-.4701-.0147-.99896-.0587-1.29276-.235-.29381-.1763-.4701-.4848-.22036-.9108.19097-.3085.26443-.617.44071-.9108.35257-.617 1.01364-1.1606 1.63064-1.7041 1.16055-1.0137 2.52676-1.9098 3.86359-2.7618 1.13117-.7199 2.35047-1.3516 3.54039-2.0126.8227-.4554 1.6453-.9108 2.4974-1.3075 1.5866-.7492 3.1584-1.4837 4.745-2.1595 1.2487-.5288 2.5268-.9695 3.7754-1.425.999-.3672 1.998-.7051 2.9969-1.0283 1.425-.4701 2.8499-.9108 4.2749-1.2046.7199-.1469 1.4397-.3526 2.1595-.4995 1.1606-.2203 2.2917-.3672 3.3935-.3525.0735 0 .1763-.0441.2351-.0735 1.1311-.7051 2.2623-1.3956 3.3494-2.1007 1.0724-.7052 2.1154-1.4397 3.1291-2.1595.661-.4701 1.3074-.9402 1.9097-1.4397.6464-.5289 1.2928-1.0871 1.8657-1.6453.8961-.8961 1.7922-1.7776 2.4092-2.7618.3526-.5583.6758-1.1312.9255-1.7041.6464-1.5278.7199-2.9822.0588-4.30433-.3673-.74921-.999-1.35152-1.8363-1.82161-1.5278-.85205-3.3935-1.234-5.4502-1.36621-.235-.01469-.4554-.02938-.6904-.04407-.1763-.14691-.3967-.14691-.6317-.1616ZM4.36287 40.2124c.02938 0 .16159-.0147.27912-.0588 1.16054-.3526 2.32109-.617 3.42287-1.0577 1.58657-.617 3.18784-1.1899 4.68624-1.9392.999-.4994 2.0273-.9402 3.0116-1.4102.7639-.3673 1.4837-.7639 2.2329-1.1459.2057-.1028.4113-.2204.617-.3379.7786-.3966 1.5572-.7786 2.3211-1.1752.5142-.2644.9989-.5583 1.4984-.8227.9843-.5288 1.9832-1.0577 2.9528-1.5866.7051-.3819 1.3956-.7785 2.1007-1.1605.1763-.0881.382-.1322.5436-.235.3673-.2204.7051-.4554 1.0577-.6758 1.1165-.6464 2.2329-1.2928 3.32-1.9245.0441-.0293.0735-.0734.1176-.1028-.0588-.0147-.1029-.0294-.1616-.0294-.1763.0147-.3379.0441-.5142.0735-1.5719.2644-3.1438.6904-4.7303 1.1605-2.0861.6023-4.1721 1.3662-6.2728 2.1889-3.2026 1.234-6.3757 2.7031-9.4901 4.4365-1.83628 1.0284-3.64321 2.1448-5.27385 3.4082-.80797.6317-1.60126 1.2781-2.1448 2.0126-.26443.3966-.22036.4407.42602.382Z" />
<path d="M11.4865 21.4086c-.3525.9548-.7051 1.9244-1.043 2.894-.4113 1.1605-.79328 2.3358-1.24869 3.511-.52885 1.3368-1.14585 2.6883-1.70409 4.0546-.19098.4701-.32319.9401-.48478 1.4102-.04408.1176-.05877.2204-.10284.3379-.11752.3232-.38195.4848-.83735.5289-.69046.0734-.91081-.0441-.96957-.4848-.13222-.8814.26442-1.8216.69045-2.7618.19097-.4113.36726-.8227.52885-1.234.41134-.9696.83736-1.9538 1.20462-2.9087.49948-1.3662.94019-2.7324 1.41028-4.084.19098-.5288.33788-1.0577.57293-1.5865.08814-.2204.32319-.4407.52889-.6317.0734-.0735.2938-.1029.4407-.1322.6904-.1029 1.2046.235 1.0724.6904-.0441.1469-.1028.2791-.1616.426.0441-.0293.0734-.0293.1028-.0293Z" />
</svg>
</div>
</div>
<div className="order-first flex items-center justify-center px-4 py-12 md:order-last">
<div className="mx-auto grid w-full max-w-md gap-8">
<div>
<h1 className="text-xl font-bold tracking-tight">Login</h1>
<p className="text-sm text-muted-foreground">
Enter your details below to login
</p>
</div>
<form className="grid gap-4">
<div className="grid gap-2">
<Label htmlFor="email-3">Email</Label>
<Input
required
id="email-3"
type="email"
autoComplete="username"
placeholder="team@mynaui.com"
/>
</div>
<div className="grid gap-2">
<Label htmlFor="password-3">Password</Label>
<Input
required
id="password-3"
type="password"
placeholder="••••••••••"
autoComplete="current-password"
/>
</div>
<Button type="submit" size="sm" className="w-full">
Login
</Button>
<Button variant="outline" size="sm" className="w-full">
Login with Google
</Button>
</form>
<div className="flex flex-col gap-4 text-sm">
<p>
Don't have an account?{" "}
<a href="#" className="underline">
Sign up
</a>
</p>
<a href="#" className="underline">
Forgot your password?
</a>
</div>
</div>
</div>
</section>
);
}