Create landing page

components/Intro.tsx

@@ -0,0 +1,31 @@
+import { Trans, useTranslation } from "next-i18next"
+import { LoginContext } from "../contexts/login"
+import { useDefinedContext } from "../hooks/useDefinedContext"
+import { LoginButton } from "./LoginButton"
+import { TelegramUserLink } from "./TelegramUserLink"
+
+
+export function Intro() {
+    const {t} = useTranslation("common")
+    const [login, setLogin] = useDefinedContext(LoginContext)
+
+    const loginMessage = login ? (
+            <Trans i18nKey="introTelegramLoggedIn">
+                Sei connesso come <TelegramUserLink u={login}/>!
+            </Trans>
+        ) : (
+            <Trans i18nKey="introTelegramLogin">
+                Effettua il login con Telegram per iniziare a creare il tuo evento.
+            </Trans>
+        )
+    
+
+    return <>
+        <p>
+            {loginMessage}
+        </p>
+        <LoginButton
+            botName="festaappbot"
+        />
+    </>
+}

components/LoginButton.tsx

@@ -12,11 +12,13 @@ export function LoginButton(props: any) {
                 Log out
             </button>
         :
+            <div className="container-btn-telegram">
                 <OriginalTelegramLoginButton
                     dataOnauth={setLogin}
                     usePic={false}
                     {...props}
                 />
+            </div>
         ),
         [login]
     )

components/TelegramUserLink.tsx

@@ -0,0 +1,24 @@
+import { UserData } from "../utils/telegram";
+
+interface TelegramUserLinkProps {
+    u: UserData
+}
+
+export function TelegramUserLink({u}: TelegramUserLinkProps) {
+
+    if(u.username) return (
+        <a href={`https://t.me/${u.username}`}>
+            {u.username}
+        </a>
+    )
+    else if(u.last_name) return (
+        <span>
+            {u.first_name} {u.last_name}
+        </span>
+    )
+    else return (
+        <span>
+            u.first_name
+        </span>
+    )
+}

pages/index.tsx

@@ -1,10 +1,12 @@
 import type { NextPage, NextPageContext } from 'next'
 import { useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { Intro } from '../components/Intro';
+import { LoginButton } from '../components/LoginButton';
 
 export async function getStaticProps(context: NextPageContext) {
     return {props: {
-        ...(await serverSideTranslations(context.locale, ["common"]))
+        ...(await serverSideTranslations(context.locale ?? "it-IT", ["common"]))
     }}
 }
 
@@ -12,13 +14,18 @@ const Page: NextPage = () => {
     const {t} = useTranslation("common")
 
     return (
-        <div className="index-layout">
-            <h1 class="index-title">
-                {t("title")}
+        <div className="index">
+            <hgroup>
+                <h1>
+                    {t("siteTitle")}
                 </h1>
                 <h2>
-                {t("description")}
+                    {t("siteSubtitle")}
                 </h2>
+            </hgroup>
+            <div>
+                <Intro/>
+            </div>
         </div>
     )
 }

public/locales/it-IT/common.json

@@ -1,4 +1,6 @@
 {
-    "title": "Festa",
-    "description": "Organizziamo un evento insieme!"
+    "siteTitle": "Festa",
+    "siteSubtitle": "Organizza il tuo evento ora!",
+    "introTelegramLogin": "Effettua il login con Telegram per iniziare a creare il tuo evento.",
+    "introTelegramLoggedIn": "Sei connesso come <1/>! Non sei tu?"
 }

styles/globals.css

@@ -8,14 +8,6 @@ html, body {
     box-sizing: border-box;
 }
 
-a {
-    color: #4444ff;
-}
-
-a:visited {
-    color: #aa44ff;
-}
-
 h1, h2, h3, h4, h5, h6 {
     margin: 0;
 }
@@ -24,7 +16,18 @@ h1, h2, h3, h4, h5, h6 {
     body {
         background-color: white;
         color: black;
-        text-shadow: 2px 2px 2px white;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        text-shadow: 1px 1px 1px white;
+    }
+
+    a {
+        color: #4444ff;
+    }
+
+    a:visited {
+        color: #aa44ff;
     }
 }
 
@@ -32,6 +35,18 @@ h1, h2, h3, h4, h5, h6 {
     body {
         background-color: black;
         color: white;
+        text-shadow: 1px 1px 1px black;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
         text-shadow: 2px 2px 2px black;
     }
+
+    a {
+        color: #8888ff;
+    }
+
+    a:visited {
+        color: #aa88ff;
+    }
 }

styles/index.css

@@ -1,19 +1,30 @@
-.index-layout {
+.index {
     display: flex;
     flex-direction: column;
 
-    justify-content: space-around;
+    justify-content: space-evenly;
     align-items: center;
+    text-align: center;
+
+    min-height: 100vh;
 }
 
 @media only screen and (max-width: 639px) {
-    .index-title {
-        font-size: 5em;
+    .index h1 {
+        font-size: 5rem;
+    }
+
+    .index h2 {
+        font-size: 1.5rem;
     }
 }
 
 @media only screen and (min-width: 640px) {
-    .index-title {
-        font-size: 10em;
+    .index h1 {
+        font-size: 10rem;
+    }
+    
+    .index h2 {
+        font-size: 2.5rem;
     }
 }

styles/telegram.css

@@ -1,4 +1,8 @@
 /* Taken from the Telegram widget button */
+.container-btn-telegram > div {
+    height: 40px;
+}
+
 .btn-telegram {
     display: inline-block;
     vertical-align: top;

utils/telegram.ts

@@ -25,6 +25,16 @@ export interface LoginData extends UserData {
 }
 
 
+/**
+ * Get the default Telegram representation of a username.
+ * 
+ * @param u 
+ * @returns 
+ */
+export function getTelegramName(u: UserData) {
+}
+
+
 /**
  * Create a {@link LoginData} object from a {@link ParsedUrlQuery}.
  *