make announcements bigger on desktop
This commit is contained in:
parent
a9a53c4dd8
commit
f7c07e989d
|
@ -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>
|
||||
|
|
|
@ -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={
|
||||
|
|
Loading…
Reference in New Issue