From 06e16e3a4bce924654ebc227b0ca36acd1aeaf56 Mon Sep 17 00:00:00 2001
From: Daniele Pancottini <daniele.pancottini@studio.unibo.it>
Date: Fri, 10 Feb 2023 14:52:14 +0100
Subject: [PATCH] Add new font for about and news pages

---
 .../common/About/AboutSlider.module.css       |   6 +
 site/components/common/About/AboutSlider.tsx  | 156 +++++++++---------
 .../common/News/NewsSlider.module.css         |   6 +
 site/components/common/News/NewsSlider.tsx    |   6 +-
 site/pages/about.tsx                          |   3 +-
 site/pages/news.tsx                           |   2 +-
 6 files changed, 97 insertions(+), 82 deletions(-)
 create mode 100644 site/components/common/About/AboutSlider.module.css
 create mode 100644 site/components/common/News/NewsSlider.module.css

diff --git a/site/components/common/About/AboutSlider.module.css b/site/components/common/About/AboutSlider.module.css
new file mode 100644
index 000000000..29ae27368
--- /dev/null
+++ b/site/components/common/About/AboutSlider.module.css
@@ -0,0 +1,6 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
+
+.aboutSliderText {
+    font-family: 'Dancing Script', cursive;
+}
\ No newline at end of file
diff --git a/site/components/common/About/AboutSlider.tsx b/site/components/common/About/AboutSlider.tsx
index 2489f7051..e51730bb7 100644
--- a/site/components/common/About/AboutSlider.tsx
+++ b/site/components/common/About/AboutSlider.tsx
@@ -8,6 +8,7 @@ import {
   Text,
   Container,
 } from '@chakra-ui/react'
+import style from "./AboutSlider.module.css"
 // Here we have used react-icons package for the icons
 import { BiLeftArrowAlt, BiRightArrowAlt } from 'react-icons/bi'
 // And react-slick as our Carousel Lib
@@ -44,85 +45,86 @@ export default function AboutSlider() {
   const cards = aboutJson[locale as keyof typeof aboutJson]
 
   return (
-    <Box
-      position={'relative'}
-      height={'600px'}
-      width={'full'}
-      overflow={'auto'}
-    >
-      {/* CSS files for react-slick */}
-      <link
-        rel="stylesheet"
-        type="text/css"
-        charSet="UTF-8"
-        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
-      />
-      <link
-        rel="stylesheet"
-        type="text/css"
-        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
-      />
-      {/* Left Icon */}
-      <IconButton
-        aria-label="left-arrow"
-        variant="ghost"
-        position="absolute"
-        left={side}
-        top={top}
-        transform={'translate(0%, -50%)'}
-        zIndex={2}
-        onClick={() => slider?.slickPrev()}
+      <Box
+        position={'relative'}
+        height={'600px'}
+        width={'full'}
+        overflow={'auto'}
       >
-        <BiLeftArrowAlt size="40px" />
-      </IconButton>
-      {/* Right Icon */}
-      <IconButton
-        aria-label="right-arrow"
-        variant="ghost"
-        position="absolute"
-        right={side}
-        top={top}
-        transform={'translate(0%, -50%)'}
-        zIndex={2}
-        onClick={() => slider?.slickNext()}
-      >
-        <BiRightArrowAlt size="40px" />
-      </IconButton>
-      {/* Slider */}
-      <Slider {...settings} ref={(slider: any) => setSlider(slider)}>
-        {cards.map((card, index) => (
-          <Box
-            key={index}
-            height={'-webkit-fit-content'}
-            position="relative"
-            backgroundPosition="center"
-            backgroundRepeat="no-repeat"
-            backgroundSize="cover"
-          >
-            {/* This is the block you need to change, to customize the caption */}
-            <Container
-              maxWidth={'100em'}
-              height="-webkit-fit-content"
+        {/* CSS files for react-slick */}
+        <link
+          rel="stylesheet"
+          type="text/css"
+          charSet="UTF-8"
+          href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
+        />
+        <link
+          rel="stylesheet"
+          type="text/css"
+          href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
+        />
+        {/* Left Icon */}
+        <IconButton
+          aria-label="left-arrow"
+          variant="ghost"
+          position="absolute"
+          left={side}
+          top={top}
+          transform={'translate(0%, -50%)'}
+          zIndex={2}
+          onClick={() => slider?.slickPrev()}
+        >
+          <BiLeftArrowAlt size="40px" />
+        </IconButton>
+        {/* Right Icon */}
+        <IconButton
+          aria-label="right-arrow"
+          variant="ghost"
+          position="absolute"
+          right={side}
+          top={top}
+          transform={'translate(0%, -50%)'}
+          zIndex={2}
+          onClick={() => slider?.slickNext()}
+        >
+          <BiRightArrowAlt size="40px" />
+        </IconButton>
+        {/* Slider */}
+        <Slider {...settings} ref={(slider: any) => setSlider(slider)}>
+          {cards.map((card, index) => (
+            <Box
+              key={index}
+              height={'-webkit-fit-content'}
               position="relative"
+              backgroundPosition="center"
+              backgroundRepeat="no-repeat"
+              backgroundSize="cover"
             >
-              <Stack spacing={6} w={'full'} maxW={'-webkit-max-content'}>
-                <Heading fontSize={{ base: '3xl', md: '4xl', lg: '5xl' }}>
-                  {card.title}
-                </Heading>
-                <Text
-                  as={'i'}
-                  fontSize={{ base: 'md', lg: 'lg' }}
-                  color="GrayText"
-                >
-                  {card.text.split('<br/>').map((str, index) => (
-                    <p key={index}>{str}</p>
-                  ))}
-                </Text>
-              </Stack>
-            </Container>
-          </Box>
-        ))}
-      </Slider>
-    </Box>
+              {/* This is the block you need to change, to customize the caption */}
+              <Container
+                maxWidth={'100em'}
+                height="-webkit-fit-content"
+                position="relative"
+              >
+                <Stack spacing={6} w={'full'} maxW={'-webkit-max-content'}>
+                  <Heading fontSize={{ base: '3xl', md: '4xl', lg: '5xl' }}>
+                    {card.title}
+                  </Heading>
+                  <Text
+                    as={"span"}
+                    fontSize={{ base: 'lg', lg: 'xl' }}
+                    color="GrayText"
+                    className={style.aboutSliderText}
+                  >
+                    {card.text.split('<br/>').map((str, index) => (
+                      <p key={index}>{str}</p>
+                    ))}
+                  </Text>
+                </Stack>
+              </Container>
+            </Box>
+          ))}
+        </Slider>
+      </Box>
   )
 }
diff --git a/site/components/common/News/NewsSlider.module.css b/site/components/common/News/NewsSlider.module.css
new file mode 100644
index 000000000..18f4d4d93
--- /dev/null
+++ b/site/components/common/News/NewsSlider.module.css
@@ -0,0 +1,6 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
+
+.newsSliderText {
+    font-family: 'Dancing Script', cursive;
+}
\ No newline at end of file
diff --git a/site/components/common/News/NewsSlider.tsx b/site/components/common/News/NewsSlider.tsx
index c205ab560..5bc0c4c84 100644
--- a/site/components/common/News/NewsSlider.tsx
+++ b/site/components/common/News/NewsSlider.tsx
@@ -8,6 +8,7 @@ import {
   Text,
   Container,
 } from '@chakra-ui/react'
+import style from "./NewsSlider.module.css"
 // Here we have used react-icons package for the icons
 import { BiLeftArrowAlt, BiRightArrowAlt } from 'react-icons/bi'
 // And react-slick as our Carousel Lib
@@ -110,9 +111,10 @@ export default function NewsSlider() {
                   {card.title}
                 </Heading>
                 <Text
-                  as={'i'}
-                  fontSize={{ base: 'md', lg: 'lg' }}
+                  as={'span'}
+                  fontSize={{ base: 'xl', lg: '2xl' }}
                   color="GrayText"
+                  className={style.newsSliderText}
                 >
                   {card.text.split('<br/>').map((str, index) => (
                     <p className='mb-5' key={index}>{str}</p>
diff --git a/site/pages/about.tsx b/site/pages/about.tsx
index 96dddd5ef..14a7edb5a 100644
--- a/site/pages/about.tsx
+++ b/site/pages/about.tsx
@@ -1,11 +1,10 @@
 import { Layout } from '@components/common'
 import AboutSlider from '@components/common/About/AboutSlider'
-import MessageMap from '@components/common/About/TestimonialCard'
 
 export default function About() {
   return (
     <>
-      <div className="mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit">
+      <div style={{backgroundColor: "rgba(240, 226, 123, 0.9)"}} className={"mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit"}>
         <AboutSlider></AboutSlider>
       </div>
     </>
diff --git a/site/pages/news.tsx b/site/pages/news.tsx
index 79a24cf22..260d28983 100644
--- a/site/pages/news.tsx
+++ b/site/pages/news.tsx
@@ -3,7 +3,7 @@ import NewsSlider from '@components/common/News/NewsSlider'
 
 export default function News() {
   return (
-    <div className="mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit">
+    <div style={{backgroundColor: "rgba(240, 226, 123, 0.9)"}} className="mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit">
       <NewsSlider></NewsSlider>
     </div>
   )