Grading Page WIP & Homepage

website/src/components/AuthLayout.tsx

@@ -0,0 +1,47 @@
+import Link from 'next/link'
+
+
+function BackgroundIllustration(props) {
+  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">
+        <Link href="/" aria-label="Home">
+          {/* 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">
+          {children}
+        </div>
+      </div>
+    </main>
+  )
+}