Refactor TopNav component to use a div for RetroUI logo

[MeherabHossain007]

Update global.css to add dark mode custom variant
Update global.css to add background image for dark mode
Add new images: remix_white.png, astro_white.png, next_white.png

Summary by CodeRabbit

• New Features

  • Added dark mode support for images and backgrounds throughout the site.
  • Integrated responsive images using Next.js’s Image component for improved performance and adaptability.

• Style

  • Refined color and border styling for headings, buttons, cards, and contributor avatars.
  • Redesigned the Pro Blocks promotional section with a new layout and adaptive background.
  • Updated logo and text elements for consistent foreground color styling.
  • Improved background theming with dynamic images for light and dark modes.

[coderabbitai]

Walkthrough

The updates introduce enhanced dark mode support and refined styling across the marketing page, global CSS, and the top navigation component. The marketing page now uses CSS classes for background images, color, and border styling, and replaces static images with responsive Next.js <Image> components. Logos and promotional sections are refactored for dark mode compatibility, with dual images toggled by theme. The global CSS adds custom properties and utility classes for adaptive background images and updates dark mode color schemes. In the navigation, the logo text is now wrapped in a styled <div> for consistent foreground coloring.

Changes

File(s)	Change Summary
app/(marketing)/page.tsx	Refactored background images to use a CSS class; updated text and button color/border classes; replaced static <img> with Next.js <Image> components; added dark mode support for logos and section backgrounds; restructured and restyled the Pro Blocks promotional section; improved layout and responsive design.
app/global.css	Introduced CSS custom properties for adaptive background images; added .bg-image utility class; updated dark mode background color to pure black; implemented custom variant for dark mode; set different background images for light and dark modes via CSS variables.
components/TopNav.tsx	Wrapped logo text in a <div> with text-foreground class for consistent styling; replaced plain text node with styled block-level element.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant HomePage
  participant CSS
  participant NextImage
  participant Theme

  User->>HomePage: Loads marketing page
  HomePage->>CSS: Applies .bg-image class, color, border, and theme classes
  HomePage->>NextImage: Renders responsive images (logos, promo, avatars)
  HomePage->>Theme: Checks for dark/light mode
  Theme-->>CSS: Sets --background-image variable
  CSS-->>HomePage: Applies correct background and image assets
  HomePage-->>User: Displays themed, responsive content

Loading

Poem

In CSS fields where backgrounds play,
Dark and light now lead the way.
Images swap as themes take flight,
Buttons and borders, styled just right.
The logo shines with color bold,
While rabbits cheer, both young and old.
🐇✨ Hoppily themed for day and night!

---

📜 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 330884f and 6ec3268.

⛔ Files ignored due to path filters (11)

• bun.lockb is excluded by !**/bun.lockb
• public/images/bg_void_3.png is excluded by !**/*.png
• public/images/logos/astro_white.png is excluded by !**/*.png
• public/images/logos/gatsby_white.png is excluded by !**/*.png
• public/images/logos/next_white.png is excluded by !**/*.png
• public/images/logos/remix_white.png is excluded by !**/*.png
• public/images/logos/vite_white.png is excluded by !**/*.png
• public/images/retro_pro_bg.jpeg is excluded by !**/*.jpeg
• public/images/retro_pro_bg_w.jpeg is excluded by !**/*.jpeg
• public/images/retro_pro_blocks.png is excluded by !**/*.png
• public/images/retro_pro_blocks_w.png is excluded by !**/*.png

📒 Files selected for processing (3)

• app/(marketing)/page.tsx (9 hunks)
• app/global.css (4 hunks)
• components/TopNav.tsx (1 hunks)

🔇 Additional comments (12)

app/global.css (5)

3-4: Good addition of TailwindCSS v4 custom variant for dark mode

This implementation correctly uses the new custom variant syntax for TailwindCSS v4, which will help with dark mode targeting throughout the application.

---

34-34: Well structured theming variable addition

Adding the background image to the theme block ensures consistent variable naming and organization.

---

54-54: Good implementation of theme-specific background images

The approach of defining different background image URLs for light and dark modes is consistent with the theming system and enables seamless theme switching.

Also applies to: 73-73

---

57-57: Enhanced dark mode contrast

Changing from #121212 to pure black #000000 for dark mode background increases contrast, which may improve readability and visual impact.

---

76-80: Well-designed utility class for background images

The new .bg-image utility class effectively encapsulates the common background image properties while leveraging the theme variable for mode-specific images.

components/TopNav.tsx (1)

71-71: Good addition of semantic text coloring

Wrapping the "RetroUI" text in a div with the text-foreground class ensures the logo text properly adapts to the current theme's foreground color. This aligns with the broader theming approach in this PR.

app/(marketing)/page.tsx (6)

60-60: Excellent use of the new bg-image utility class

The banner now properly uses the new .bg-image utility class, enabling dynamic background switching between light and dark modes without duplicating background properties.

---

70-70: Good application of foreground color classes

Adding explicit text and border coloring with text-foreground and related classes ensures consistent text adaptation across themes.

Also applies to: 93-93

---

103-109: Improved image handling with Next.js Image component

The update from static img tags to Next.js Image components with proper attributes improves performance through automatic optimization and responsive handling.

---

118-118: Consistent card styling improvements

Adding bg-background and shadow-none to all cards ensures they adapt to theme changes and maintain visual consistency.

Also applies to: 129-129, 137-137, 145-145, 154-154, 164-164

---

253-343: Well-implemented dark mode image toggling for logos

The refactoring of the logos section with paired images for light/dark modes is an elegant solution. Each logo now has light and dark variants that toggle visibility based on the current theme using Tailwind's dark mode classes.

---

398-449: Excellent promotional section redesign

The "Ship Faster" section has been thoughtfully redesigned with:

• Theme-adaptive background images
• Well-structured content layout
• Paired images for light/dark mode toggling
• Consistent styling with the rest of the page

This implementation maintains the original design intent while significantly improving theme adaptability.

✨ Finishing Touches

• 📝 Generate Docstrings

---

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.