Added page component for auth

compass/components/Page.tsx

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+
+interface PageInterface {
+    children: ReactNode;
+}
+
+const Page: React.FC<PageInterface> = ({ children }) => {
+    return (
+        <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+            {children}
+        </div>
+    );
+};
+
+export default Page;

compass/pages/index.tsx

@@ -5,10 +5,11 @@ import type { NextPage } from 'next';
 import Head from 'next/head';
 import Input from '@/components/Input'
 import InlineLink from '@/components/InlineLink';
+import Page from '@/components/Page';
 
 const Home: NextPage = () => {
     return (
-        <div className="w-full max-w-xs">
+        <Page>
             <form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
                 <div className="mb-4">
                     <label className="block text-gray-700 text-sm font-bold mb-2" for="username">
@@ -22,19 +23,20 @@ const Home: NextPage = () => {
                     </label>
                     <Input />
                 </div>
-                <div className="flex items-center justify-between">
-                    <Button>
-                        Login
-                    </Button>
+                <div className="flex flex-col items-left space-y-2">
                     <InlineLink>
                         Forgot password?
                     </InlineLink>
+                    <Button>
+                        Login
+                    </Button>
+                    
                 </div>
             </form>
             <p className="text-center text-gray-500 text-xs">
-                &copy;2024 Compass Center
+                &copy; 2024 Compass Center
             </p>
-        </div>
+        </Page>
     );
 };