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}