Add new font for about and news pages

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;
+}

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
+      <Box
-      position={'relative'}
+        position={'relative'}
-      height={'600px'}
+        height={'600px'}
-      width={'full'}
+        width={'full'}
-      overflow={'auto'}
+        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()}
       >
-        <BiLeftArrowAlt size="40px" />
+        {/* CSS files for react-slick */}
-      </IconButton>
+        <link
-      {/* Right Icon */}
+          rel="stylesheet"
-      <IconButton
+          type="text/css"
-        aria-label="right-arrow"
+          charSet="UTF-8"
-        variant="ghost"
+          href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
-        position="absolute"
+        />
-        right={side}
+        <link
-        top={top}
+          rel="stylesheet"
-        transform={'translate(0%, -50%)'}
+          type="text/css"
-        zIndex={2}
+          href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
-        onClick={() => slider?.slickNext()}
+        />
-      >
+        {/* Left Icon */}
-        <BiRightArrowAlt size="40px" />
+        <IconButton
-      </IconButton>
+          aria-label="left-arrow"
-      {/* Slider */}
+          variant="ghost"
-      <Slider {...settings} ref={(slider: any) => setSlider(slider)}>
+          position="absolute"
-        {cards.map((card, index) => (
+          left={side}
-          <Box
+          top={top}
-            key={index}
+          transform={'translate(0%, -50%)'}
-            height={'-webkit-fit-content'}
+          zIndex={2}
-            position="relative"
+          onClick={() => slider?.slickPrev()}
-            backgroundPosition="center"
+        >
-            backgroundRepeat="no-repeat"
+          <BiLeftArrowAlt size="40px" />
-            backgroundSize="cover"
+        </IconButton>
-          >
+        {/* Right Icon */}
-            {/* This is the block you need to change, to customize the caption */}
+        <IconButton
-            <Container
+          aria-label="right-arrow"
-              maxWidth={'100em'}
+          variant="ghost"
-              height="-webkit-fit-content"
+          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'}>
+              {/* This is the block you need to change, to customize the caption */}
-                <Heading fontSize={{ base: '3xl', md: '4xl', lg: '5xl' }}>
+              <Container
-                  {card.title}
+                maxWidth={'100em'}
-                </Heading>
+                height="-webkit-fit-content"
-                <Text
+                position="relative"
-                  as={'i'}
+              >
-                  fontSize={{ base: 'md', lg: 'lg' }}
+                <Stack spacing={6} w={'full'} maxW={'-webkit-max-content'}>
-                  color="GrayText"
+                  <Heading fontSize={{ base: '3xl', md: '4xl', lg: '5xl' }}>
-                >
+                    {card.title}
-                  {card.text.split('<br/>').map((str, index) => (
+                  </Heading>
-                    <p key={index}>{str}</p>
+                  <Text
-                  ))}
+                    as={"span"}
-                </Text>
+                    fontSize={{ base: 'lg', lg: 'xl' }}
-              </Stack>
+                    color="GrayText"
-            </Container>
+                    className={style.aboutSliderText}
-          </Box>
+                  >
-        ))}
+                    {card.text.split('<br/>').map((str, index) => (
-      </Slider>
+                      <p key={index}>{str}</p>
-    </Box>
+                    ))}
+                  </Text>
+                </Stack>
+              </Container>
+            </Box>
+          ))}
+        </Slider>
+      </Box>
   )
 }

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;
+}

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'}
+                  as={'span'}
-                  fontSize={{ base: 'md', lg: 'lg' }}
+                  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>

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>
     </>

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>
   )