Add black friday banner

Author: pimterry

src/components/layout/index.tsx

@@ -4,6 +4,7 @@ import type { FooterProps } from './footer';
 import { Footer } from './footer';
 import { SimpleFooter } from './footer/simple-footer';
 import { Header } from './header';
+import { TopBanner } from './top-banner';
 
 interface LayoutProps extends Pick<FooterProps, 'withoutNewsletter'> {
   isNavigationEnabled?: boolean;
@@ -16,8 +17,16 @@ export const Layout = ({
   children,
   withoutNewsletter,
 }: Component<LayoutProps>) => {
+  // Define banner content here - set to null to hide the banner
+  const bannerContent = (
+    <p>
+      <strong>50% off annual Pro accounts until Cyber Monday</strong>, with coupon BLACKFRIDAY25
+    </p>
+  );
+
   return (
     <>
+      {bannerContent && <TopBanner>{bannerContent}</TopBanner>}
       <Header isNavigationEnabled={isNavigationEnabled} />
       <Suspense>
         <main id="main-content">{children}</main>

src/components/layout/top-banner/index.tsx

@@ -0,0 +1,10 @@
+import { StyledTopBanner, StyledTopBannerContainer } from './top-banner.styles';
+import type { TopBannerProps } from './top-banner.types';
+
+export const TopBanner = ({ children }: TopBannerProps) => {
+  return (
+    <StyledTopBanner>
+      <StyledTopBannerContainer>{children}</StyledTopBannerContainer>
+    </StyledTopBanner>
+  );
+};

src/components/layout/top-banner/top-banner.styles.ts

@@ -0,0 +1,21 @@
+'use client';
+
+import { Container } from '@/components/elements/container';
+import { styled } from '@/styles';
+
+export const StyledTopBanner = styled.div`
+  background-color: #000;
+  color: ${({ theme }) => theme.colors.text.alwayWhite};
+  width: 100%;
+`;
+
+export const StyledTopBannerContainer = styled(Container)`
+  &&& {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 12px;
+    padding-bottom: 12px;
+    text-align: center;
+  }
+`;

src/components/layout/top-banner/top-banner.types.ts

@@ -0,0 +1 @@
+export interface TopBannerProps extends Component {}