"use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence, type Variants } from "framer-motion"; import { LayoutGrid, X, ArrowUpRight, Sparkles, Layers, Mail, Zap, Github } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } // ============================================================================ // 1. REUSABLE COMPONENT // ============================================================================ export function BentoGridNavbar() { const [isBentoOpen, setIsBentoOpen] = useState(false); const [hasScrolled, setHasScrolled] = useState(false); // Apply subtle shadow/blur on scroll useEffect(() => { const handleScroll = () => setHasScrolled(window.scrollY > 20); window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); // Lock body scroll when Bento menu is open useEffect(() => { if (isBentoOpen) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "unset"; } return () => { document.body.style.overflow = "unset"; }; }, [isBentoOpen]); // Framer Motion variants typed correctly to prevent TS errors const containerVariants: Variants = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.05, delayChildren: 0.1 } }, exit: { opacity: 0, transition: { staggerChildren: 0.05, staggerDirection: -1 } } }; const itemVariants: Variants = { hidden: { opacity: 0, y: 20, scale: 0.95 }, show: { opacity: 1, y: 0, scale: 1, transition: { type: "spring", stiffness: 300, damping: 24 } }, exit: { opacity: 0, y: 10, scale: 0.95 } }; return ( <> {/* --- IDLE HEADER BAR --- */}

{/* Brand Logo */}

Bento {/* Toggle Button */}

{/* --- FULLSCREEN BENTO GRID DROPDOWN --- */} {isBentoOpen && ( {/* Card 1: Featured / Primary (Spans 2 cols, 2 rows) */} {/* Decorative mesh gradient background */}

Discover
UIXTRA Pro.

The ultimate component library.

{/* Card 2: Secondary Link (1x1) */}

Templates

Ready-to-use layouts.

{/* Card 3: Secondary Link (1x1) */}

Components

Building blocks.

{/* Card 4: Action/Wide (Spans 2 cols, 1 row) */}

Get in touch

Let's build something great.

{/* Card 5: Social / Info (1x1) */} Github {/* Card 6: Small Stat/Info (1x1) */} v3.0 Current Version )} ); } // ============================================================================ // 2. DEMO / VISUALIZER WRAPPER // ============================================================================ export default function BentoGridNavbarDemo() { return (

{/* Decorative Background grid */}

{/* Mock Content */}

Think inside
the box.

Click the "Menu" button to reveal the Bento Box architecture. Instead of boring lists, navigation is treated as a highly visual, fully responsive dashboard of distinct, clickable cards.

); }

Discover UIXTRA Pro.

Templates

Components

Get in touch

Think inside the box.

Discover
UIXTRA Pro.

Think inside
the box.