Update Framna announcement popup green color to RGB(27, 200, 102) (#1BC866)

Co-authored-by: Ula <UlaStankiewicz@users.noreply.github.com>

Author: github-actions[bot]

src/components/shared/FramnaAnnouncementPopup.tsx

@@ -0,0 +1,163 @@
+import React, { useEffect, useState } from 'react'
+
+const STORAGE_KEY = 'framna_announcement_shown_at'
+const THIRTY_DAYS_MS = 30 * 24 * 60 * 60 * 1000
+
+function shouldShowPopup(): boolean {
+  try {
+    const shown = localStorage.getItem(STORAGE_KEY)
+    if (!shown) return true
+    return Date.now() - parseInt(shown, 10) > THIRTY_DAYS_MS
+  } catch {
+    return false
+  }
+}
+
+function isAfterLaunchDate(): boolean {
+  const isStaging = process.env.GATSBY_ACTIVE_ENV === 'staging'
+  if (isStaging) return true
+  const launchDate = new Date('2026-03-18T00:00:00')
+  return new Date() >= launchDate
+}
+
+const FramnaAnnouncementPopup: React.FC = () => {
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    if (!isAfterLaunchDate()) return
+    if (!shouldShowPopup()) return
+
+    const show = () => {
+      setTimeout(() => {
+        setVisible(true)
+        try {
+          localStorage.setItem(STORAGE_KEY, String(Date.now()))
+        } catch {
+          // ignore
+        }
+      }, 500)
+    }
+
+    if (document.readyState === 'complete') {
+      show()
+    } else {
+      window.addEventListener('load', show, { once: true })
+      return () => window.removeEventListener('load', show)
+    }
+  }, [])
+
+  if (!visible) return null
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 9999,
+      }}
+      onClick={() => setVisible(false)}
+    >
+      <div
+        style={{
+          display: 'flex',
+          maxWidth: 680,
+          width: '90%',
+          borderRadius: 16,
+          overflow: 'hidden',
+          position: 'relative',
+        }}
+        onClick={e => e.stopPropagation()}
+      >
+        {/* Left green panel */}
+        <div
+          style={{
+            backgroundColor: '#1BC866',
+            flex: '0 0 45%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '40px 32px',
+          }}
+        >
+          <img
+            src='/images/framna.svg'
+            alt='Framna'
+            style={{ maxWidth: 180, width: '100%' }}
+          />
+        </div>
+
+        {/* Right white panel */}
+        <div
+          style={{
+            backgroundColor: '#ffffff',
+            flex: '0 0 55%',
+            padding: '48px 40px 40px',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+          }}
+        >
+          <button
+            onClick={() => setVisible(false)}
+            style={{
+              position: 'absolute',
+              top: 16,
+              right: 16,
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              fontSize: 20,
+              lineHeight: 1,
+              padding: 4,
+            }}
+            aria-label='Close'
+          >
+            ✕
+          </button>
+
+          <h2
+            style={{
+              fontSize: '1.75rem',
+              fontWeight: 700,
+              marginBottom: 16,
+              marginTop: 0,
+              lineHeight: 1.2,
+            }}
+          >
+            Bright Inventions is now Framna
+          </h2>
+
+          <p style={{ marginBottom: 24, marginTop: 0, lineHeight: 1.6, color: '#333' }}>
+            We partner with industry leaders (and those about to be) to create digital products that
+            define markets, reshape industries, and drive meaningful growth.
+          </p>
+
+          <a
+            href='https://framna.com/'
+            target='_blank'
+            rel='noopener noreferrer'
+            style={{
+              display: 'inline-block',
+              backgroundColor: '#0d0d0d',
+              color: '#ffffff',
+              padding: '14px 28px',
+              borderRadius: 999,
+              textDecoration: 'none',
+              fontWeight: 600,
+              fontSize: '0.95rem',
+              alignSelf: 'flex-start',
+            }}
+          >
+            Visit Framna
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default FramnaAnnouncementPopup

src/layout/Page.tsx

@@ -11,6 +11,7 @@ import { useLocation } from '@reach/router'
 import { MDXComponentsWrapper } from '../mdx'
 import CookiesNotice from '../analytics/cookies-notice'
 import { useTranslation } from 'react-i18next'
+import FramnaAnnouncementPopup from '../components/shared/FramnaAnnouncementPopup'
 
 export const Page: React.FC<PropsWithChildren<{ className?: string }>> = ({ children, className }) => {
   const [mobileMenuOpened, setMobileMenuOpened] = useState(false)
@@ -34,6 +35,7 @@ export const Page: React.FC<PropsWithChildren<{ className?: string }>> = ({ chil
       <TopNavigation path={pathname} toggled={setMobileMenuOpened} />
       <MDXComponentsWrapper>{children}</MDXComponentsWrapper>
       <CookiesNotice />
+      <FramnaAnnouncementPopup />
       <Footer />
     </div>
   )