From 44e3339c0c7e033cff706fe8b16c541f5d7af552 Mon Sep 17 00:00:00 2001
From: Giuseppe Del Campo <giuseppe.delcampo@outlook.com>
Date: Tue, 24 Oct 2023 19:11:15 +0200
Subject: [PATCH] Initial setup of telegram new page

---
 components/Home/Telegram.tsx   |  3 +-
 locale/en.ts                   |  3 +-
 locale/it.ts                   |  3 +-
 models/ILocalizationStrings.ts |  3 +-
 pages/telegram.tsx             | 75 ++++++++++++++++++++++++++++++----
 5 files changed, 74 insertions(+), 13 deletions(-)

diff --git a/components/Home/Telegram.tsx b/components/Home/Telegram.tsx
index 9d83ae91..327eedb0 100644
--- a/components/Home/Telegram.tsx
+++ b/components/Home/Telegram.tsx
@@ -4,6 +4,7 @@ import { Container } from 'react-bootstrap';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 import LocalizationService from "../../services/LocalizationService";
+import router from 'next/router';
 
 const TelegramSection = () => {
     var theme = useTheme();
@@ -21,7 +22,7 @@ const TelegramSection = () => {
                     </Col>
                 
                     <Col lg={2} className="text-right center-mobile">
-                        <DefaultButton href="https://youtu.be/kgNxRZghkkA?t=133" text={locale?.homepage.telegramButton} iconProps={buttonIconProps} allowDisabledFocus style={buttonStyle} />
+                        <DefaultButton onClick={() => { router.push("/telegram"); }} text={locale?.homepage.telegramButton} iconProps={buttonIconProps} allowDisabledFocus style={buttonStyle} />
                     </Col>
                 </Row>
             </Container>
diff --git a/locale/en.ts b/locale/en.ts
index 36b3691e..0afddfcf 100644
--- a/locale/en.ts
+++ b/locale/en.ts
@@ -395,7 +395,8 @@ const localeEn: ILocalizationStrings = {
         }
     },
     telegram: {
-
+        title: 'Perché non usiamo WhatsApp?',
+        subtitle: 'WhatsApp non è una piattaforma adatta a contenuti universitari, ma soprattutto non è adatta per gli studenti stessi.'
     },
     footer: [
         { text: 'The network and the associated website are not affiliated to the University of Milan.', buttonText: 'Join our main group' },
diff --git a/locale/it.ts b/locale/it.ts
index 257b1aba..0ab5e7ef 100644
--- a/locale/it.ts
+++ b/locale/it.ts
@@ -395,7 +395,8 @@ const localeIt: ILocalizationStrings = {
         }
     },
     telegram: {
-
+        title: 'Perché non usiamo WhatsApp?',
+        subtitle: 'WhatsApp non è una piattaforma adatta a contenuti universitari, ma soprattutto non è adatta per gli studenti stessi.'
     },
     footer: [
         { text: 'Il network e il relativo sito web non sono affiliati all\'Università degli Studi di Milano.', buttonText: 'Entra nel nostro gruppo' },
diff --git a/models/ILocalizationStrings.ts b/models/ILocalizationStrings.ts
index 18c05755..cb545abc 100644
--- a/models/ILocalizationStrings.ts
+++ b/models/ILocalizationStrings.ts
@@ -345,7 +345,8 @@ interface ILocalizationStrings {
         text2: string,
     },
     telegram:  {
-
+        title: string,
+        subtitle: string
     },
     footer: [
         { text: string, buttonText: string },
diff --git a/pages/telegram.tsx b/pages/telegram.tsx
index 74106587..17cc6e22 100644
--- a/pages/telegram.tsx
+++ b/pages/telegram.tsx
@@ -1,8 +1,8 @@
 import { Container } from 'react-bootstrap';
-import { DefaultButton, DirectionalHint, IIconProps, PrimaryButton, Text, TooltipDelay, TooltipHost, useTheme } from '@fluentui/react';
+import { DefaultButton, DirectionalHint, IIconProps, Icon, Text, TooltipDelay, TooltipHost, useTheme } from '@fluentui/react';
 import { NextSeo } from 'next-seo';
-import { semibold } from 'services/Fonts';
-import Image from 'next/image';
+import { bold, semibold } from 'services/Fonts';
+import { CSSProperties } from 'react';
 import LocalizationService from 'services/LocalizationService';
 import router from 'next/router';
 
@@ -12,6 +12,34 @@ const Telegram = () => {
     var language: string | undefined = LocalizationService.getLanguage();
 
     const goBackButtonIconProps: IIconProps = { iconName: 'AiOutlineArrowLeft', styles: { root: { fontSize: 14 } } };
+    const numberStyle: CSSProperties = {
+        display: 'inline-block',
+        backgroundColor: theme.palette.redDark,
+        padding: '10px 20px 10px 20px',
+        borderRadius: '100%'
+    };
+    const elementStyle: CSSProperties = {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 20
+    };
+    const quotesSectionStyle: CSSProperties = {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop: 40,
+        gap: 60
+    };
+    const quotesStyle: CSSProperties = {
+        display: 'flex',
+        flexWrap: 'wrap',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: 20
+    };
 
     return (
         <>
@@ -41,15 +69,15 @@ const Telegram = () => {
             />
 
             <section className="telegram">
-                                <div className="degree-title pt-4 pb-4">
-                    <Container>
-                        <div className="d-flex flex-row courses-title-content" style={{ gap: 20 }}>
+                <div className="telegram-title pt-4 pb-4">
+                    <Container className="mb-5">
+                        <div className="d-flex flex-row courses-title-content" style={{ gap: 20, marginBottom: 30 }}>
 
                             <div className="d-flex flex-column" style={{ gap: 10 }}>
 
                                 <div className="d-flex flex-row degree-buttons-menu" style={{ gap: 8 }}>
                                     <TooltipHost
-                                        content={locale?.courses.degree.goBack}
+                                        content={"Go back homepage traducimi"}
                                         calloutProps={{ gapSpace: 6 }}
                                         delay={TooltipDelay.zero}
                                         id={'0'}
@@ -62,12 +90,41 @@ const Telegram = () => {
                                 
                             <div className="d-flex align-items-center">
                                 <h1>
-                                    <Text variant='xLargePlus' style={{ lineHeight: 1.3 }}>{locale?.courses.degree.title}</Text><br/>
-                                    <Text variant="superLarge" style={{ lineHeight: 1.3, fontWeight: 700, color: theme.palette.themeDarkAlt }}>Dennis</Text>
+                                    <Text variant='xxLargePlus' styles={bold} style={{ lineHeight: 1.3 }}>{locale?.telegram.title}</Text><br/>
                                 </h1>
                             </div>
+                            
                                 
                         </div>
+
+                        <h2>
+                            <Text variant="xLargePlus" styles={semibold} style={{ lineHeight: 1.3 }}>{locale?.telegram.subtitle}</Text>
+                        </h2>
+
+                        <div style={quotesSectionStyle}>
+                            <Icon iconName="RightDoubleQuote" style={{ fontSize: 48, color: theme.palette.redDark }}/>
+                            <div style={quotesStyle}>
+                                <Text variant="xLarge" styles={semibold} style={{ color: theme.palette.neutralSecondary, fontStyle: 'italic' }}>Ma tutti usano WhatsApp..</Text>
+                                <Text variant="xLarge" styles={semibold} style={{ color: theme.palette.neutralSecondary, fontStyle: 'italic' }}>Non ho voglia di cambiare..</Text>
+                                <Text variant="xLarge" styles={semibold} style={{ color: theme.palette.neutralSecondary, fontStyle: 'italic' }}>Telegram non si capisce..</Text>
+                            </div>
+                        </div>
+                    </Container>
+
+                    <div className="py-4 mb-4" style={{ backgroundColor: theme.palette.neutralLighter }}>
+                        <Container>
+                            <Text variant="xLargePlus" styles={bold} style={{ lineHeight: 1.3, color: theme.palette.redDark }}>Ma quali sono gli svantaggi?</Text>
+                        </Container>
+                    </div>
+
+                    <Container>
+                        <div style={elementStyle}>
+                            <div style={numberStyle}>
+                                <Text variant="xxLarge" styles={bold} style={{ color: theme.palette.white }}>1</Text>
+                            </div>
+
+                            <Text variant="xLarge" styles={semibold}>Dennis</Text>
+                        </div>
                     </Container>
                 </div>
             </section>