hover footer added

[afsar-dev]

Summary by CodeRabbit

• New Features

  • Introduced an interactive Hover Footer with responsive 4-column layout (Brand, About, Links, Contact), hover-driven text effect, radial gradient background, and social icons.
  • Includes a “Live Chat” callout and improved large-screen visual effects.
  • Added to the components preview and site navigation under Footer for easy discovery.

• Documentation

  • New Hover Footer guide with live preview, CLI/manual installation steps, and usage instructions.
  • Included props reference (text, duration, className, automatic) and copy-ready code snippets.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
nurui	Building	Preview	Comment	Aug 25, 2025 3:52pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Introduces a new interactive footer feature. Adds three React components (HoverFooter, TextHoverEffect, FooterBackgroundGradient), registers them in multiple registries, wires a preview entry, updates public registry files, adds documentation and site navigation, and integrates code samples into the components registry.

Changes

Cohort / File(s)	Summary
Public registry entries public/r/hover-footer.json, registry.json, registry-cli.json	Adds a new registry component entry hover-footer with dependencies and file listings; includes CLI and package registry metadata.
Nurui components src/components/nurui/hover-footer.tsx, src/components/nurui/text-hover-effect.tsx, src/components/nurui/footer-background-gradient.tsx	Implements a responsive footer, an SVG-based interactive text hover effect, and a radial gradient background component. Exports: default HoverFooter, named TextHoverEffect, default FooterBackgroundGradient.
Preview wiring src/app/preview/[component]/components-preview-registry.tsx	Adds "hover-footer" dynamic import to componentsPreviewRegistry.
Documentation src/content/docs/hover-footer.mdx	New docs page with live preview, CLI/manual install steps, and props table; references code files.
Site navigation src/registry/component-navigation.tsx	Adds “Footer” section with a “hover” submenu linking to /docs/hover-footer; imports MdLegendToggle icon.
Components registry (showcase) src/registry/components-registry.tsx	Registers hoverFooter preview and associated raw code blocks; groups under a new footer section.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Page
  participant HoverFooter
  participant TextHoverEffect
  participant FooterBackgroundGradient as BgGradient
  participant Icons

  User->>Page: Open preview/docs
  Page->>HoverFooter: Render component
  HoverFooter->>BgGradient: Render background layer
  HoverFooter->>Icons: Render lucide-react icons
  HoverFooter->>TextHoverEffect: Render "Nurui" hover text (lg screens)
  Note over HoverFooter,BgGradient: Static layout + radial background

Loading

sequenceDiagram
  autonumber
  actor User
  participant TextHoverEffect as TextHoverEffect (SVG)
  participant Motion as motion (animation)

  User->>TextHoverEffect: mouseenter
  TextHoverEffect->>TextHoverEffect: set hovered=true (increase base text opacity)
  User->>TextHoverEffect: mousemove (x,y)
  TextHoverEffect->>Motion: update radial mask center (cx, cy)
  Motion-->>TextHoverEffect: animate mask + stroke drawing
  User->>TextHoverEffect: mouseleave
  TextHoverEffect->>TextHoverEffect: set hovered=false

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

I nudge the footer, ears aglow,
Gradients hum and letters flow.
With gentle hops, the links take flight,
A shimmer trails the cursor’s light.
New tails of code beneath the moon—
Tap tap, I ship this joy too soon. 🐇✨

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between c8fea86 and adf20d2.

📒 Files selected for processing (10)

• public/r/hover-footer.json (1 hunks)
• registry-cli.json (1 hunks)
• registry.json (1 hunks)
• src/app/preview/[component]/components-preview-registry.tsx (1 hunks)
• src/components/nurui/footer-background-gradient.tsx (1 hunks)
• src/components/nurui/hover-footer.tsx (1 hunks)
• src/components/nurui/text-hover-effect.tsx (1 hunks)
• src/content/docs/hover-footer.mdx (1 hunks)
• src/registry/component-navigation.tsx (2 hunks)
• src/registry/components-registry.tsx (3 hunks)

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch dev

---

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.
  • 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.
• 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 the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

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

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

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

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• 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.