make announcements bigger on desktop

blockworks-foundation · Mar 5, 2024 · f7c07e9 · f7c07e9
1 parent a9a53c4
commit f7c07e9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/app/components/home/Announcement.tsx b/app/components/home/Announcement.tsx
@@ -4,9 +4,10 @@ import { HomePageAnnouncement } from '../../../contentful/homePageAnnouncement'
 import { ReactNode } from 'react'
 import Link from 'next/link'
 import { usePlausible } from 'next-plausible'
+import { useViewport } from '../../hooks/useViewport'
 
 const classNames =
-  'border border-th-bkg-4 py-3 px-4 rounded-lg flex items-center justify-between md:hover:bg-th-bkg-3'
+  'border border-th-bkg-4 p-4 rounded-lg lg:h-32 lg:py-0 flex items-center justify-between md:hover:bg-th-bkg-3 lg:py-4'
 
 const AnnouncementWrapper = ({
   children,
@@ -48,6 +49,7 @@ const Announcement = ({ data }: { data: HomePageAnnouncement }) => {
   const imageSrc = image?.src
   const imageAlt = image?.alt || 'CTA Image'
   const isExtenalLink = linkPath.includes('http')
+  const { isDesktop } = useViewport()
   return (
     <AnnouncementWrapper isExternal={isExtenalLink} path={linkPath}>
       <span className="flex items-center space-x-3">
@@ -56,13 +58,13 @@ const Announcement = ({ data }: { data: HomePageAnnouncement }) => {
             className="flex-shrink-0 rounded-full"
             src={`https:${imageSrc}`}
             alt={imageAlt}
-            height={48}
-            width={48}
+            height={isDesktop ? 64 : 48}
+            width={isDesktop ? 64 : 48}
           />
         ) : null}
         <div>
           <p className="mb-1 text-xs text-th-active leading-none">{category}</p>
-          <p className="text-th-fgd-2 text-sm block font-display">{title}</p>
+          <p className="text-th-fgd-2 text-lg block font-display">{title}</p>
           <p className="text-sm block text-th-fgd-3">{description}</p>
         </div>
       </span>

diff --git a/app/components/home/HomePage.tsx b/app/components/home/HomePage.tsx
@@ -367,7 +367,7 @@ const HomePage = ({
       </SectionWrapper>
       {announcements?.length ? (
         <SectionWrapper
-          className="mt-0 lg:mt-6 py-6 bg-th-bkg-2 xl:rounded-xl px-6"
+          className="mt-0 lg:mt-6 py-6 lg:py-12 bg-th-bkg-2 xl:rounded-xl px-6"
           noPaddingY
           noPaddingX={showArrows}
         >
@@ -376,10 +376,10 @@ const HomePage = ({
               showArrows ? 'md:px-6 lg:px-14' : ''
             }`}
           >
-            <div className="mr-3 flex items-center justify-center w-7 h-7 bg-th-active rounded-full">
-              <MegaphoneIcon className="w-4 h-4 text-th-bkg-1 -rotate-[30deg]" />
+            <div className="mr-3 flex items-center justify-center w-10 h-10 bg-th-active rounded-full">
+              <MegaphoneIcon className="w-6 h-6 text-th-bkg-1 -rotate-[30deg]" />
             </div>
-            <h2 className="text-xl">Latest news</h2>
+            <h2 className="text-3xl">Latest news</h2>
           </div>
           <div className="flex items-center">
             {showArrows ? (
@@ -419,6 +419,9 @@ const HomePage = ({
       ) : null}
       <SectionWrapper className="mt-10 md:mt-0">
         <div className="grid grid-cols-6 gap-4 lg:gap-6" ref={callouts}>
+          <div className="-mt-10 mb-12 lg:mb-16 col-span-6">
+            <h2 className="text-center">DeFi maxed</h2>
+          </div>
           <IconWithText
             desc="Low fees for taker trades and rebates for maker trades. Plus, Solana's extremely low transaction costs."
             icon={