added custom login screen

app/login/page.tsx

@@ -0,0 +1,63 @@
+import { FC } from 'react';
+import { Main } from '@/app/ui/Main';
+
+import { authConfig } from "@/app/lib/auth";
+import { SignInButton } from '../ui/SignInButton';
+
+export type Provider = {
+  id: string;
+  name: string;
+  type: string;
+  style: {
+    logo: string;
+    bg: string;
+    text: string;
+  };
+};
+
+export function getProviders(): Provider[] {
+  const providerKeys: (keyof Provider)[] = ["id", "name", "type", "style"];
+  return authConfig.providers.map((provider) =>
+    getKeyValuesFromObject<Provider>(provider, providerKeys)
+  );
+}
+
+function getKeyValuesFromObject<T>(obj: any, keys: (keyof T)[]): T {
+  return keys.reduce((acc, key) => {
+    if (obj[key]) {
+      acc[key] = obj[key];
+    }
+    return acc;
+  }, {} as T);
+}
+
+const Page:FC = async () => {
+
+  const providers = await getProviders()
+
+ return (
+    <Main>
+      <h1 className="text-3xl font-bold">
+        <span className="text-neutral-50 mr-3">Što je pristiglo?</span>
+        <span className="text-indigo-400">Što je plaćeno?</span>
+        <span className="text-neutral-50 ml-3">Koliki su mi troškovi?</span>
+      </h1>
+      <p className="p mt-[1em] text-center">To su pitanja na koje ova jednostavna i besplatna aplikacija daje odgovore ...</p>
+      <p className="p mb-[1em] text-center">... isprobajte je i koristite potpuno besplatno!</p>
+      <span className="text-center">
+      {
+        Object.values(providers).map((provider) => (
+          <div key={provider.name}>
+            <SignInButton provider={provider} />
+          </div>
+        ))
+      }
+      </span>
+      <video className="m-auto h-[524px] w=[440px]" title="Team discussing work in the Slack app" role="img" data-js-id="hero" loop muted playsInline autoPlay poster="hero.png">
+        <source src="/screencast.webm" type="video/webm" />
+      </video>
+    </Main>
+  );
+}
+
+export default Page;