Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev-nexus/llms.txt

Use this file to discover all available pages before exploring further.

The Footer component anchors the bottom of every page in Dev Nexus. It is laid out as a responsive flex bar — on mobile the elements stack vertically; on medium screens and above they spread across three columns. The left side displays a monospace status tag (// STATUS: SYSTEM ONLINE), the center holds four social icon links (GitHub, Twitter, LinkedIn, and Mail), and the right shows a copyright notice. Each social icon uses a distinct neon hover color from the site palette, and all four links currently point to placeholder # hrefs that you replace with real profile URLs.

​
Props

Footer accepts no props — social link targets and display text are configured directly inside the component source.

​
Usage

Render <Footer /> once inside your application shell, below the main content area: 
import NavBar from './components/NavBar';
import Footer from './components/Footer';
import { Outlet } from 'react-router-dom';

export default function AppShell() {
  return (
    <>
      <NavBar />
      <main className="pt-16 min-h-screen">
        <Outlet />
      </main>
      <Footer />
    </>
  );
}

​
Social Link Structure

Each social link is an anchor element wrapping a Lucide React icon. The four links follow this pattern: 
<a
  href="#"               // replace with your real profile URL
  target="_blank"
  rel="noopener noreferrer"
  className="..."        // icon + hover glow classes
>
  <IconComponent className="w-5 h-5" />
</a>
IconPlatformHover ColorReplace href With
GithubGitHubneon-limehttps://github.com/your-handle
TwitterTwitter / Xelectric-violethttps://twitter.com/your-handle
LinkedinLinkedInghost-minthttps://linkedin.com/in/your-handle
MailEmailhot-magentamailto:you@example.com

​
Visual Behavior

ElementAppearance
Layoutflex-col on mobile, flex-row justify-between on md+; constrained to max-w-7xl with responsive horizontal padding
Top borderborder-t border-electric-violet/20 separates footer from page content
Backgroundbg-void/80 backdrop-blur-sm — frosted-glass dark panel
Status labelLeft-aligned monospace tag: // STATUS: SYSTEM ONLINE in moonlight/50
Social iconsCentered flex row with space-x-6 gap; each icon w-5 h-5
Idle statemoonlight/50 tint on all icons
Hover — GitHubTransitions to neon-lime with lime text-glow
Hover — TwitterTransitions to electric-violet with violet text-glow
Hover — LinkedInTransitions to ghost-mint with mint text-glow
Hover — MailTransitions to hot-magenta with magenta text-glow
Copyright lineRight-aligned; © {year} INITIATE. ALL RIGHTS RESERVED. in moonlight/30

​
Customization Tips

Set real social URLs: Open components/Footer.js and replace each href="#" with your actual profile URL. Set target="_blank" and rel="noopener noreferrer" on each link to open profiles in a new tab safely. Add more social links: Import an additional Lucide icon and duplicate an existing <a> block with the new href and icon. The space-x-6 flex container will accommodate new items naturally. Change the status label: Replace the // STATUS: SYSTEM ONLINE string in Footer.js with any short monospace message that fits the site’s arcane aesthetic. Update the copyright name: Change INITIATE in the copyright line to your chosen display name or handle.
Wrap Footer in a <footer> semantic HTML element if it isn’t already, and add role="contentinfo" for improved screen-reader accessibility.

Build docs developers (and LLMs) love

Get started for freeTalk to us