added next.js font module, updated fonts, updated login page

This commit is contained in:
rsandb
2022-12-23 16:10:59 -06:00
parent 55c79b98f1
commit 5f12baa440
11 changed files with 137 additions and 673 deletions
+6 -25
View File
@@ -1,33 +1,14 @@
import Link from "next/link";
import Image from "next/image";
function BackgroundIllustration(props) {
export function AuthLayout({ children }) {
return (
<svg viewBox="0 0 1090 1090" aria-hidden="true" fill="none" preserveAspectRatio="none" {...props}>
<circle cx={545} cy={545} r="544.5" />
<circle cx={545} cy={545} r="480.5" />
<circle cx={545} cy={545} r="416.5" />
<circle cx={545} cy={545} r="352.5" />
</svg>
);
}
export function AuthLayout({ title, subtitle, children }) {
return (
<main className="flex min-h-full overflow-hidden pt-16 sm:py-28">
<div className="mx-auto flex w-full max-w-2xl flex-col px-4 sm:px-6">
<main className="flex bg-white items-center justify-center min-h-full overflow-hidden pt-16 sm:py-28">
<div className="flex items-center w-full max-w-2xl flex-col px-4 sm:px-6">
<Link href="/" aria-label="Home">
{/* logo */}
<Image src="/images/logos/oa-logo-2.svg" width="300" height="42" alt="Open Assistant Logo" />
</Link>
<div className="relative mt-12 sm:mt-16">
<BackgroundIllustration
width="1090"
height="1090"
className="absolute -top-7 left-1/2 -z-10 h-[788px] -translate-x-1/2 stroke-gray-300/30 [mask-image:linear-gradient(to_bottom,white_20%,transparent_75%)] sm:-top-9 sm:h-auto"
/>
<h1 className="text-center text-2xl font-medium tracking-tight text-gray-900">{title}</h1>
{subtitle && <p className="mt-3 text-center text-lg text-gray-600">{subtitle}</p>}
</div>
<div className="-mx-4 mt-10 flex-auto bg-white py-10 px-4 shadow-2xl shadow-gray-900/10 sm:mx-0 sm:flex-none sm:rounded-2xl sm:p-24">
<div className="flex-auto items-center justify-center w-full py-10 px-4 sm:mx-0 sm:flex-none sm:rounded-2xl sm:p-24">
{children}
</div>
</div>
+2 -2
View File
@@ -47,7 +47,7 @@ function AccountButton() {
);
}
return (
<Link href="/auth/signin" aria-label="Home" className="flex items-center">
<Link href="/auth/signup" aria-label="Home" className="flex items-center">
<Button variant="outline">Log in</Button>
</Link>
);
@@ -61,7 +61,7 @@ export function Header() {
<div className="relative z-10 flex items-center gap-16">
<Link href="/" aria-label="Home" className="flex items-center">
<Image
src="/images/logos/CHAT-THOUGHT-LOGO.svg"
src="/images/logos/oa-logo-1.svg"
className="mx-auto object-fill"
width="50"
height="50"
+1 -1
View File
@@ -71,7 +71,7 @@ export function Hero() {
<BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/3 stroke-gray-300/70 [mask-image:linear-gradient(to_bottom,white_20%,transparent_75%)] sm:top-16 sm:-translate-x-1/2 lg:-top-16 lg:ml-12 xl:-top-14 xl:ml-0" />
<div className="-mx-4 h-[448px] px-9 [mask-image:linear-gradient(to_bottom,white_60%,transparent)] sm:mx-0 lg:absolute lg:-inset-x-10 lg:-top-10 lg:-bottom-20 lg:h-auto lg:px-0 lg:pt-10 xl:-bottom-32">
<Image
src="/images/logos/CHAT-THOUGHT-CONVO.svg"
src="/images/logos/oa-logo-1.svg"
className="mx-auto mr-6 object-fill"
width="450"
height="450"