styling

app/layout.tsx

@@ -1,4 +1,5 @@
 import "styles/tailwind.css"
+import "styles/global.css"
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (

app/page.tsx

@@ -1,29 +1,21 @@
-import { faXmark } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { Metadata } from "next"
 import Form from "components/Form"
+import Head from "next/head"
 
 export const metadata: Metadata = {
   title: "Form Components",
 }
 
 export default function Web() {
+  
   return (
     <>
+      <Head>
+        <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet" />
+      </Head>
       <section className="flex min-h-full grow items-center justify-center bg-slate-200 p-4">
         <div className="max-w-screen-lg grow rounded-3xl bg-white p-8">
-          {/* Close button */}
-          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-950	text-white">
-            <FontAwesomeIcon icon={faXmark} className="h-6 w-6" />
-          </div>
-          {/* Title */}
-          <div className="flex justify-center mb-12">
-            <h1 className="border-grey-300 w-fit border-b pb-4 text-3xl text-indigo-900">Document Upload</h1>
-          </div>
-          {/* Form layout */}
-          <div className="flex gap-14">
             <Form />
-          </div>
         </div>
       </section>
     </>