diff --git a/apps/web/public/images/floating-cake.png b/apps/web/public/images/floating-cake.png new file mode 100644 index 0000000000000..c529590c1ed39 Binary files /dev/null and b/apps/web/public/images/floating-cake.png differ diff --git a/apps/web/public/images/nigeria-meetup-bunny.png b/apps/web/public/images/nigeria-meetup-bunny.png new file mode 100644 index 0000000000000..6a365de11fa17 Binary files /dev/null and b/apps/web/public/images/nigeria-meetup-bunny.png differ diff --git a/apps/web/src/views/Home/components/Banners/NigeriaMeetupBanner.tsx b/apps/web/src/views/Home/components/Banners/NigeriaMeetupBanner.tsx new file mode 100644 index 0000000000000..7c636fded1ef4 --- /dev/null +++ b/apps/web/src/views/Home/components/Banners/NigeriaMeetupBanner.tsx @@ -0,0 +1,168 @@ +import { useCountdown } from '@pancakeswap/hooks' +import { useTranslation } from '@pancakeswap/localization' +import { Box, Flex, FlexGap, Text, useMatchBreakpoints } from '@pancakeswap/uikit' +import { memo, useMemo } from 'react' +import styled from 'styled-components' + +import { + BackgroundGraphic, + BannerActionContainer, + BannerContainer, + BannerGraphics, + BannerMain, + BannerTitle, + FloatingGraphic, + LinkExternalAction, + PancakeSwapBadge, +} from '@pancakeswap/widgets-internal' + +const NumberDisplayContainer = styled(FlexGap)` + border-radius: 1.5rem; + background: #190b36; + border: 2px solid #ffffff; + padding: 0 0.625rem; + width: 6rem; + height: 8.3rem; +` +const CountDownWrapper = styled.div` + display: flex; + background-color: white; + font-family: Kanit; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: 90%; + color: #08060b; + padding: 8px; + border-radius: 8px; + margin-top: 5px; + gap: 0px; + flex-direction: column; + width: max-content; + ${({ theme }) => theme.mediaQueries.sm} { + flex-direction: row; + gap: 8px; + font-size: 20px; + line-height: 110%; /* 22px */ + } +` + +type NumberDisplayProps = { + label: string + value?: number +} + +export function NumberDisplay({ label, value }: NumberDisplayProps) { + const valueDisplay = useMemo(() => (value === undefined ? '-' : String(value).padStart(2, '0')), [value]) + + return ( + + + {valueDisplay} + + + {label} + + + ) +} + +export function Countdown() { + const { t } = useTranslation() + const { isMobile } = useMatchBreakpoints() + const countdown = useCountdown(1728723600) + if (!countdown) { + return null + } + const hours = countdown?.hours < 10 ? `0${countdown?.hours}` : countdown?.hours + const minutes = countdown?.minutes < 10 ? `0${countdown?.minutes}` : countdown?.minutes + const days = countdown?.days < 10 ? `0${countdown?.days}` : countdown?.days + return ( + + {t('Starts in')} + + {days} + {t('d')} : {hours} + {t('h')} : {minutes} + {t('m')} + + + ) +} + +const VerticalDivider = styled.span` + background: #999999; + width: 1.5px; + height: 1.5rem; + margin: 2px; +` + +type ActionsType = { href: string; text: string; icon?: 'arrowForward' | 'openNew' } +type IActions = ActionsType & Partial + +export const NigeriaMeetupBanner = memo(function NigeriaMeetupBanner() { + const { t } = useTranslation() + const { isMobile, isTablet, isMd } = useMatchBreakpoints() + + const Action = ({ href, icon, text, ...props }: IActions) => ( + + + {t(text)} + + + ) + + return ( + + + + + + {t('Nigeria')} + + + } + title={ + + {t('PancakeSwap Meetup')} + + } + desc={} + actions={ + + + + } + /> + + + + + + + + + ) +}) diff --git a/apps/web/src/views/Home/components/Banners/hooks/useMultipleBannerConfig.tsx b/apps/web/src/views/Home/components/Banners/hooks/useMultipleBannerConfig.tsx index c3d02bbca0a63..63ade5b07a180 100644 --- a/apps/web/src/views/Home/components/Banners/hooks/useMultipleBannerConfig.tsx +++ b/apps/web/src/views/Home/components/Banners/hooks/useMultipleBannerConfig.tsx @@ -19,6 +19,7 @@ import useIsRenderCompetitionBanner from './useIsRenderCompetitionBanner' import { useIsRenderIfoBannerFromConfig } from './useIsRenderIFOBanner' import { useIsRenderTgPredictionBotBanner } from './useIsRenderTgPredictionBotBanner' import useIsRenderUserBanner from './useIsRenderUserBanner' +import { NigeriaMeetupBanner } from '../NigeriaMeetupBanner' interface IBannerConfig { shouldRender: boolean @@ -46,6 +47,10 @@ export const useMultipleBannerConfig = () => { return useMemo(() => { const NO_SHUFFLE_BANNERS: IBannerConfig[] = [ + { + shouldRender: true, + banner: , + }, { shouldRender: isRenderIFOBannerFromConfig, banner: , diff --git a/packages/localization/src/config/translations.json b/packages/localization/src/config/translations.json index 17091fe6f0ba7..52a4e446ff69f 100644 --- a/packages/localization/src/config/translations.json +++ b/packages/localization/src/config/translations.json @@ -3547,5 +3547,6 @@ "Wormhole": "Wormhole", "Aptos": "Aptos", "Play": "Play", - "Legacy products": "Legacy products" + "Legacy products": "Legacy products", + "Nigeria": "Nigeria" } diff --git a/packages/widgets-internal/components/Banner/BannerTitle.tsx b/packages/widgets-internal/components/Banner/BannerTitle.tsx index 80996e1250533..3d3f59f2fc14c 100644 --- a/packages/widgets-internal/components/Banner/BannerTitle.tsx +++ b/packages/widgets-internal/components/Banner/BannerTitle.tsx @@ -2,7 +2,7 @@ import { Text, TextProps, breakpoints } from "@pancakeswap/uikit"; import { PropsWithChildren } from "react"; import styled from "styled-components"; -type VariantTypes = "purple" | "orange" | "yellow" | "listaBlue" | "green"; +type VariantTypes = "white" | "gold" | "purple" | "orange" | "yellow" | "listaBlue" | "green"; type Props = { variant: VariantTypes | Variant; @@ -22,6 +22,22 @@ type Variant = { }; const variants: { [key in VariantTypes]: Variant } = { + white: { + color: "#ffffff", + strokeColor: "#000000", + strokeSize: 2, + fontSize: 28, + lineHeight: 30, + fontWeight: 800, + }, + gold: { + color: "#FFF500", + strokeColor: "#081910", + strokeSize: 2, + fontSize: 28, + lineHeight: 30, + fontWeight: 800, + }, purple: { color: "#7645D9", strokeColor: "#ffffff", @@ -127,24 +143,34 @@ const FancyText = styled(Text)<{ } `; +const defaultStrokeSize = 2; +const defaultStrokeColor = "#ffffff"; + export function BannerTitle({ children, variant, - strokeSize: defaultStrokeSize = 2, - strokeColor: defaultStrokeColor = "#ffffff", + strokeSize, + strokeColor, color: defaultColor, ...props }: PropsWithChildren & Props>) { const variantData = typeof variant === "string" ? variants[variant] : variant; - const { color, fontSize, fontWeight, strokeSize, strokeColor, lineHeight } = variantData; + const { + color, + fontSize, + fontWeight, + strokeSize: variantStrokeSize, + strokeColor: variantStrokeColor, + lineHeight, + } = variantData; return ( {children}