Skip to content

Add navbar and footer components #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
VIDYANKSHINI merged 1 commit into from
May 16, 2026
Merged

Add navbar and footer components #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 110 additions & 0 deletions components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
"use client"

import Link from "next/link"
import { Shield, Github, Linkedin, Twitter } from "lucide-react"

export function Footer() {
return (
<footer className="border-t border-border bg-card/50">
<div className="container mx-auto px-4 py-12">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
{/* Brand */}
<div className="md:col-span-1">
<Link href="/" className="flex items-center gap-2 mb-4">
<Shield className="h-8 w-8 text-primary" />
<span className="text-xl font-bold">
Secure<span className="text-primary">Bob</span> AI
</span>
</Link>
<p className="text-muted-foreground text-sm">
AI-powered DevSecOps assistant for detecting vulnerabilities before deployment.
</p>
</div>

{/* Features */}
<div>
<h4 className="font-semibold text-foreground mb-4">Features</h4>
<ul className="space-y-2 text-sm">
<li>
<Link href="/github-scanner" className="text-muted-foreground hover:text-primary transition-colors">
GitHub Scanner
</Link>
</li>
<li>
<Link href="/vulnerability-scanner" className="text-muted-foreground hover:text-primary transition-colors">
Vulnerability Detection
</Link>
</li>
<li>
<Link href="/secret-scanner" className="text-muted-foreground hover:text-primary transition-colors">
Secret Leak Detection
</Link>
</li>
<li>
<Link href="/pr-review" className="text-muted-foreground hover:text-primary transition-colors">
PR Security Review
</Link>
</li>
</ul>
</div>

{/* Resources */}
<div>
<h4 className="font-semibold text-foreground mb-4">Resources</h4>
<ul className="space-y-2 text-sm">
<li>
<Link href="/security-dashboard" className="text-muted-foreground hover:text-primary transition-colors">
Security Dashboard
</Link>
</li>
<li>
<Link href="/ai-assistant" className="text-muted-foreground hover:text-primary transition-colors">
AI Assistant
</Link>
</li>
<li>
<span className="text-muted-foreground">Documentation</span>
</li>
<li>
<span className="text-muted-foreground">API Reference</span>
</li>
</ul>
</div>

{/* Powered By */}
<div>
<h4 className="font-semibold text-foreground mb-4">Powered By</h4>
<div className="space-y-3">
<div className="glass-card rounded-lg p-3">
<p className="text-sm font-medium text-primary">IBM watsonx.ai</p>
<p className="text-xs text-muted-foreground">Enterprise AI Platform</p>
</div>
<div className="glass-card rounded-lg p-3">
<p className="text-sm font-medium text-secondary">IBM Granite</p>
<p className="text-xs text-muted-foreground">Foundation Models</p>
</div>
</div>
</div>
</div>

{/* Bottom Bar */}
<div className="mt-12 pt-8 border-t border-border flex flex-col md:flex-row items-center justify-between gap-4">
<p className="text-sm text-muted-foreground">
2024 SecureBob AI. Built for IBM watsonx Hackathon.
</p>
<div className="flex items-center gap-4">
<a href="#" className="text-muted-foreground hover:text-primary transition-colors">
<Github className="h-5 w-5" />
</a>
<a href="#" className="text-muted-foreground hover:text-primary transition-colors">
<Twitter className="h-5 w-5" />
</a>
<a href="#" className="text-muted-foreground hover:text-primary transition-colors">
<Linkedin className="h-5 w-5" />
</a>
</div>
</div>
</div>
</footer>
)
}
113 changes: 113 additions & 0 deletions components/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { motion } from "framer-motion"
import { Shield, Menu, X } from "lucide-react"
import { useState } from "react"
import { Button } from "@/components/ui/button"

const navLinks = [
{ href: "/", label: "Home" },
{ href: "/features", label: "Features" },
{ href: "/github-scanner", label: "GitHub Scanner" },
{ href: "/security-dashboard", label: "Dashboard" },
{ href: "/ai-assistant", label: "AI Assistant" },
]

export function Navbar() {
const pathname = usePathname()
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

return (
<motion.header
initial={{ y: -100, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.5 }}
className="fixed top-0 left-0 right-0 z-50 glass"
>
<nav className="container mx-auto px-4 py-4">
<div className="flex items-center justify-between">
{/* Logo */}
<Link href="/" className="flex items-center gap-2 group">
<div className="relative">
<Shield className="h-8 w-8 text-primary glow-text-blue" />
<div className="absolute inset-0 bg-primary/20 blur-xl rounded-full" />
</div>
<span className="text-xl font-bold text-foreground">
Secure<span className="text-primary">Bob</span> AI
</span>
</Link>

{/* Desktop Navigation */}
<div className="hidden md:flex items-center gap-6">
{navLinks.map((link) => (
<Link
key={link.href}
href={link.href}
className={`relative text-sm font-medium transition-colors hover:text-primary ${
pathname === link.href ? "text-primary" : "text-muted-foreground"
}`}
>
{link.label}
{pathname === link.href && (
<motion.div
layoutId="navbar-indicator"
className="absolute -bottom-1 left-0 right-0 h-0.5 bg-primary rounded-full"
/>
)}
</Link>
))}
</div>

{/* CTA Button */}
<div className="hidden md:flex items-center gap-4">
<Link href="/features">
<Button className="bg-primary hover:bg-primary/90 text-primary-foreground glow-blue">
Start Scanning
</Button>
</Link>
</div>

{/* Mobile Menu Button */}
<button
className="md:hidden text-foreground"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
>
{mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
</button>
</div>

{/* Mobile Menu */}
{mobileMenuOpen && (
<motion.div
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: "auto" }}
exit={{ opacity: 0, height: 0 }}
className="md:hidden mt-4 pb-4 border-t border-border"
>
<div className="flex flex-col gap-4 pt-4">
{navLinks.map((link) => (
<Link
key={link.href}
href={link.href}
onClick={() => setMobileMenuOpen(false)}
className={`text-sm font-medium transition-colors hover:text-primary ${
pathname === link.href ? "text-primary" : "text-muted-foreground"
}`}
>
{link.label}
</Link>
))}
<Link href="/features" onClick={() => setMobileMenuOpen(false)}>
<Button className="w-full bg-primary hover:bg-primary/90 text-primary-foreground">
Start Scanning
</Button>
</Link>
</div>
</motion.div>
)}
</nav>
</motion.header>
)
}
Loading