Merge pull request #2415 from oasisprotocol/kaja/footer-socials

Update footer and Socials section

Author: kaja-osojnik

.changelog/2415.trivial.md

@@ -0,0 +1 @@
+Update footer and Socials section

src/app/components/DiscoverMore/images/discord_black.svg

@@ -0,0 +1,50 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
+import { roflApp, roseApp } from '../../utils/externalLinks'
+import { Button } from '@oasisprotocol/ui-library/src/components/button'
+import { ArrowUpRight } from 'lucide-react'
+import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
+
+export const DiscoverMore: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="w-full relative rounded-md flex flex-col lg:flex-row gap-4 md:gap-6 justify-between items-center">
+      <div className="w-full flex flex-row self-stretch p-8 border bg-card rounded-md">
+        <div className="flex flex-col items-start gap-2 lg:max-w-[480px]">
+          <Typography className="font-semibold">{t('social.roflApp')}</Typography>
+          <div className="text-foreground text-xl md:text-2xl font-medium leading-6 md:leading-8">
+            {t('social.offchainPerformanceonchainTrust')}
+          </div>
+          <div className="justify-start text-muted-foreground text-sm font-normal leading-5 mb-3">
+            {t('social.description')}
+          </div>
+          <Button color="secondary" variant="outline" asChild>
+            <Link textColor="primary" href={roflApp.homepage} target="_blank" rel="noopener noreferrer">
+              {t('social.discoverRoflApp')}
+              <ArrowUpRight />
+            </Link>
+          </Button>
+        </div>
+      </div>
+      <div className="w-full flex flex-row self-stretch p-8 border bg-card rounded-md">
+        <div className="flex flex-col items-start gap-2 lg:max-w-[480px]">
+          <Typography className="font-semibold">{t('social.roseApp')}</Typography>
+          <div className="text-foreground text-xl md:text-2xl font-medium leading-6 md:leading-8">
+            {t('social.roseAppTitle')}
+          </div>
+          <div className="justify-start text-muted-foreground text-sm font-normal leading-5 mb-3">
+            {t('social.roseAppDescription')}
+          </div>
+          <Button color="secondary" variant="outline" asChild>
+            <Link textColor="primary" href={roseApp.homepage} target="_blank" rel="noopener noreferrer">
+              {t('social.visitRoseApp')}
+              <ArrowUpRight />
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/components/DiscoverMore/images/linkedin_black.svg

@@ -9,24 +9,45 @@ import { ReopenAnalyticsConsentButton } from 'app/components/AnalyticsConsent'
 import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
 import { Link } from '@oasisprotocol/ui-library/src/components/link'
 import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
+import { socialMedia } from '../../utils/externalLinks'
+import telegram from '../DiscoverMore/images/telegram_black.svg'
+import twitter from '../DiscoverMore/images/twitter_black.svg'
+import discord from '../DiscoverMore/images/discord_black.svg'
+import youtube from '../DiscoverMore/images/youtube_black.svg'
+import reddit from '../DiscoverMore/images/reddit_black.svg'
+import linkedin from '../DiscoverMore/images/linkedin_black.svg'
+import { NotebookText, Home } from 'lucide-react'
 
 interface FooterProps {
   scope?: SearchScope
   mobileSearchAction?: ReactNode
   enableMobileSearch?: boolean
 }
 
+type SocialLinkProps = {
+  label: string
+  href: string
+  imgSrc?: string
+  img?: ReactNode
+}
+
+const SocialLinkFooter: FC<SocialLinkProps> = ({ label, href, imgSrc }) => {
+  return (
+    <Link href={href} rel="noopener noreferrer" target="_blank">
+      {imgSrc && <img src={imgSrc} alt={label} className="h-5 inline-block" />}
+    </Link>
+  )
+}
+
 export const Footer: FC<FooterProps> = ({ scope, mobileSearchAction, enableMobileSearch = true }) => {
   const { t } = useTranslation()
   const { isMobile, isTablet } = useScreenSize()
   const currentYear = useConstant(() => new Date().getFullYear())
   const hasMobileAction = isMobile && mobileSearchAction
 
   return (
-    <footer>
-      <div
-        className={cn('flex justify-between items-center py-6 sm:px-6', enableMobileSearch ? 'px-2' : 'px-4')}
-      >
+    <footer className="flex flex-col py-4 md:pb-4 md:pt-6">
+      <div className={cn('flex justify-between items-center sm:px-0', enableMobileSearch ? 'px-2' : 'px-4')}>
         {isTablet ? (
           <AppendMobileSearch
             scope={scope}
@@ -44,7 +65,7 @@ export const Footer: FC<FooterProps> = ({ scope, mobileSearchAction, enableMobil
           </AppendMobileSearch>
         ) : (
           <>
-            <div className="flex items-center">
+            <div className="flex flex-1 flex-wrap items-center">
               {import.meta.env.REACT_APP_BUILD_SHA && (
                 <Typography variant="xsmall" textColor="muted">
                   <Trans
@@ -107,9 +128,67 @@ export const Footer: FC<FooterProps> = ({ scope, mobileSearchAction, enableMobil
                 </Typography>
               </div>
             </div>
-            <Typography variant="xsmall" textColor="muted">
-              {t('footer.title')} | <ReopenAnalyticsConsentButton /> | {currentYear}
-            </Typography>
+            <div className="flex items-center gap-6 ">
+              <Typography variant="xsmall" textColor="muted">
+                {t('footer.title')} | <ReopenAnalyticsConsentButton /> | {currentYear}
+              </Typography>
+              <div>
+                <div className="h-5 flex items-center gap-4 justify-between">
+                  {socialMedia.telegram && (
+                    <SocialLinkFooter
+                      label={t('social.telegram')}
+                      href={socialMedia.telegram}
+                      imgSrc={telegram}
+                    />
+                  )}
+                  {socialMedia.twitter && (
+                    <SocialLinkFooter
+                      label={t('social.twitter')}
+                      href={socialMedia.twitter}
+                      imgSrc={twitter}
+                    />
+                  )}
+                  {socialMedia.discord && (
+                    <SocialLinkFooter
+                      label={t('social.discord')}
+                      href={socialMedia.discord}
+                      imgSrc={discord}
+                    />
+                  )}
+                  {socialMedia.youtube && (
+                    <SocialLinkFooter
+                      label={t('social.youtube')}
+                      href={socialMedia.youtube}
+                      imgSrc={youtube}
+                    />
+                  )}
+                  {socialMedia.reddit && (
+                    <SocialLinkFooter label={t('social.reddit')} href={socialMedia.reddit} imgSrc={reddit} />
+                  )}
+                  {socialMedia.linkedin && (
+                    <SocialLinkFooter
+                      label={t('social.linkedin')}
+                      href={socialMedia.linkedin}
+                      imgSrc={linkedin}
+                    />
+                  )}
+                  {socialMedia.docs && (
+                    <SocialLinkFooter
+                      label={t('social.docs')}
+                      href={socialMedia.docs}
+                      img={<NotebookText className="size-5 text-foreground" />}
+                    />
+                  )}
+                  {socialMedia.home && (
+                    <SocialLinkFooter
+                      label={t('social.home')}
+                      href={socialMedia.home}
+                      img={<Home className="size-5 text-foreground" />}
+                    />
+                  )}
+                </div>
+              </div>
+            </div>
           </>
         )}
       </div>