Header Announcement for Landing Page

[ashutoshamazix]

Description

• Added an announcement bar to header section of landing page.

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Summary by CodeRabbit

• New Features

  • Added a header announcement that can be toggled on/off and displays a plain, interactive message with a link.

• Style

  • Updated announcement background to a fixed purple and increased text size.
  • Improved responsive rules so the announcement and its link are visible and behave consistently across screen sizes.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Adds a header announcement rendered conditionally in the Header component and updates global styles for the announcement (fixed purple color, larger text, and responsive link visibility adjustments).

Changes

Cohort / File(s)	Summary
Header: announcement rendering src/components/LandingPage/Header/index.jsx	Adds an announcement object with show flag and conditionally renders a plain JSX announcement block (paragraph + link) above the main header container; no dangerouslySetInnerHTML used.
GlobalStyles: announcement styling src/components/LandingPage/GlobalStyles/index.jsx	Replaces CSS variable background with fixed #8a77ff, increases announcement text size from 1.4rem to 1.6rem, and changes anchor visibility from hidden to visible (inline-block/inline) with responsive breakpoint adjustments.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Attention points:
  • Verify announcement content is rendered safely and any external content is sanitized before insertion.
  • Check responsive CSS rules for the anchor across breakpoints and ensure visual/accessibility expectations (contrast, font-size) are met.

Suggested reviewers

• IAmKio

Poem

🐇 I bounced into code with a cheerful shout,
A purple banner now hops proudly about,
From hidden to visible, it beams in the breeze,
Links snug and responsive, atop pages with ease,
Hooray — a small change that made the header proud!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description includes a brief summary of changes but lacks critical details: testing procedures are completely empty, no screenshots provided, and no change type is selected despite this being a new feature.	Complete the testing section with details on how the announcement bar was tested, check the 'New feature' box under Types of changes, and add screenshots if visually appropriate for the announcement bar.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Header Announcement for Landing Page' clearly and concisely describes the main change: adding an announcement feature to the header of the landing page, which aligns with the modifications to GlobalStyles and Header components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch chore/header-notification-landing-page

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 65ed0c7 and 37cef4b.

⛔ Files ignored due to path filters (1)

• src/containers/__snapshots__/Main.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (1)

• src/components/LandingPage/Header/index.jsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/LandingPage/Header/index.jsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: lint
• GitHub Check: unit-tests
• GitHub Check: build
• GitHub Check: Cloudflare Pages: pillarx-debug

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (3)

src/components/LandingPage/Header/index.jsx (1)

12-15: Hardcoded announcement config (always on) should be externalized

Right now show: true + the full copy/URL are baked into the component, which makes toggling/rotating announcements a code deploy. Consider moving this to config/env/CMS (or at least a module-level constant).

src/components/LandingPage/GlobalStyles/index.jsx (2)

280-290: Prefer var(--violet) over repeating #8a77ff

This keeps the announcement color consistent with the theme variables and avoids future drift.

 .header__announcement {
   position: relative;
-  background: #8a77ff;
+  background: var(--violet);
   z-index: 101;
 }

 @media only screen and (max-width: 1024px) {
   .header__announcement {
-    background: #8a77ff;
+    background: var(--violet);
   }
 }

---

300-318: Align link selectors (p a vs .wrapper a) to avoid unintended styling

You currently underline via .header__announcement__wrapper p a but set display via .header__announcement__wrapper a at the breakpoint—worth making consistent so a future extra link doesn’t get unexpected layout rules.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b5c1627 and 65ed0c7.

⛔ Files ignored due to path filters (1)

• src/containers/__snapshots__/Main.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (2)

• src/components/LandingPage/GlobalStyles/index.jsx (2 hunks)
• src/components/LandingPage/Header/index.jsx (2 hunks)

🧰 Additional context used

🪛 Biome (2.1.2)

src/components/LandingPage/Header/index.jsx

[error] 52-52: Avoid passing content using the dangerouslySetInnerHTML prop.

Setting content using code can expose users to cross-site scripting (XSS) attacks

(lint/security/noDangerouslySetInnerHtml)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: lint
• GitHub Check: unit-tests
• GitHub Check: Cloudflare Pages: pillarx-debug

[cloudflare-workers-and-pages]

Deploying pillarx-debug with    Cloudflare Pages

Latest commit:	37cef4b
Status:	✅  Deploy successful!
Preview URL:	https://4821f169.pillarx-debug.pages.dev
Branch Preview URL:	https://chore-header-notification-la.pillarx-debug.pages.dev

View logs

[cloudflare-workers-and-pages]

Deploying x with    Cloudflare Pages

Latest commit:	37cef4b
Status:	✅  Deploy successful!
Preview URL:	https://cecf954c.x-e62.pages.dev
Branch Preview URL:	https://chore-header-notification-la.x-e62.pages.dev

View logs

[vignesha22]

LGTM