@ghatak/slash-ui 1.0.0

package/components/ui/featuredComponents.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import React, { useRef } from 'react';
+import Link from 'next/link';
+import { ChevronRight } from 'lucide-react';
+import { Index } from "@/__registry__"; 
+
+interface ComponentCardProps {
+  title: string;
+  videoSrc?: string;
+  children?: React.ReactNode;
+  span?: string;
+  bg?: string;
+}
+
+const ComponentCard = ({
+  title,
+  videoSrc,
+  children,
+  span = '',
+  bg = 'bg-[#161616]',
+}: ComponentCardProps) => {
+  return (
+    <div
+      className={`group relative flex flex-col justify-between rounded-3xl ${bg} border border-white/5 p-1 hover:border-white/20 transition-all duration-500 h-full cursor-pointer ${span}`}
+    >
+      <div className='relative flex-grow overflow-hidden rounded-[22px] bg-[#0A0A0A] flex items-center justify-center min-h-[140px] border border-white/[0.03]'>
+        {videoSrc ? (
+          <video
+            src={videoSrc}
+            autoPlay
+            loop
+            muted
+            playsInline
+            className="absolute inset-0 w-full h-full object-cover opacity-100 scale-100"
+          />
+        ) : (
+          <div className="relative z-10 w-full h-full flex items-center justify-center">
+            {children}
+          </div>
+        )}
+      </div>
+
+      <div className='px-4 py-3 flex justify-between items-center bg-transparent relative z-10'>
+        <h3 className='text-[13px] font-medium text-zinc-400 group-hover:text-white transition-colors'>
+          {title}
+        </h3>
+      </div>
+    </div>
+  );
+};
+
+const FeaturedComponents = () => {
+  const getComp = (name: string) => (Index as any)["default"]?.[name];
+
+  return (
+    <div className='min-h-screen w-full p-8 text-white mt-10'>
+      <div className='max-w-7xl mx-auto'>
+        <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 auto-rows-[220px]'>
+          
+         
+          <Link href={`/component/`}>
+            <ComponentCard title="" videoSrc={getComp("reveal")?.video} />
+          </Link>
+
+          {/* 2. Navbar */}
+          <Link href={`/component/floating-navbar`} className="lg:col-span-2">
+            <ComponentCard title="Floating Navbar" videoSrc={getComp("navbar")?.video} />
+          </Link>
+
+          {/* 3. Custom ScrollBar */}
+          <Link href={`/component/minimal-scrollbar`} className="lg:row-span-3">
+            <ComponentCard title="Minimal Scrollbar" videoSrc={getComp("minimal-scrollbar")?.video} />
+          </Link>
+
+          {/* 4. Custom Cursor */}
+          <Link href={`/component/dot-cursor`} className="lg:col-span-2 lg:row-span-2">
+            <ComponentCard title="Custom Cursor">
+                
+            </ComponentCard>
+          </Link>
+
+          {/* 5. Devouring Details */}
+          <Link href={`/component/`}>
+            <ComponentCard title="" videoSrc={getComp("details")?.video} />
+          </Link>
+
+          {/* 6. Neubrutal Button */}
+          <Link href={`/component/neubrutal-button`}>
+            <ComponentCard 
+                title="Neubrutal Button" 
+                videoSrc={getComp("neubrutal-button")?.video || "/compVideos/neubrutal-button.mp4"} 
+            />
+          </Link>
+
+          {/* 7. Creative Layouts */}
+          <Link href={`/component/`} className="lg:col-span-3">
+            <ComponentCard title="" videoSrc={getComp("creative-grid")?.video} />
+          </Link>
+
+          {/* 8. User Feedback */}
+          <Link href={`/component/`}>
+            <ComponentCard title="" videoSrc={getComp("feedback")?.video}>
+                <div className="text-2xl font-bold opacity-50 transition-opacity">?</div>
+            </ComponentCard>
+          </Link>
+        </div>
+
+        {/* Explore Button */}
+        <div className='mt-8 flex justify-center'>
+          <Link
+            href='/component'
+            className='relative z-30 h-12 px-6 rounded-lg text-sm text-white transition-all flex items-center gap-2 group'
+          >
+            Explore All Components
+            <div className='flex items-center justify-center transition-transform group-hover:translate-x-1'>
+              <ChevronRight size={18} />
+            </div>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FeaturedComponents;

package/components/ui/footer.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <footer className=' text-white border-neutral-800 overflow-hidden relative'>
+      {/* Top Full-Width Logo */}
+      <div className='w-full'>
+        <img
+          src='/images/slash_1.svg'
+          alt='Slash Logo'
+          className='w-full h-auto object-cover block '
+        />
+      </div>
+
+      {/* Main CTA Section with Background Glow */}
+      <div className='relative max-w-7xl mx-auto pt-20 pb-40 px-4 sm:px-6 lg:px-8 overflow-hidden'>
+        {/* Subtle Background Radial Glow */}
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[300px] bg-zinc-800/20 blur-[120px] rounded-full -z-10 pointer-events-none" />
+
+        <div className="relative z-10 overflow-hidden text-center">
+          <h1 className='text-center text-4xl md:text-6xl font-switzer capitalize font-bold tracking-tighter leading-tight text-neutral-100 overflow-hidden'>
+            Start slashing your UI <br />
+            development with <span className='italic font-hoshiko text-red-500 tracking-wider px-5'>Slash/Ui</span> today!
+          </h1>
+          
+          <div className="flex justify-center mt-10 overflow-x-hidden">
+            <button className='group relative px-15 py-4 tracking-widest overflow-hidden  border text-white hover:text-black font-hoshiko rounded-full font-semibold transition-all duration-300 hover:bg-red-500 hover:scale-105 active:scale-95 cursor-pointer flex items-center gap-2'>
+              Slash Now
+              <span className="transition-transform duration-300 group-hover:translate-x-1"></span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom Credit Section */}
+      <div className='py-8 border-t border-neutral-900'>
+        <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4">
+          <p className='text-sm font-cartographCF text-neutral-500 capitalize'>
+            © 2026 Slash/Ui. All Rights Reserved.
+          </p>
+          
+          <h1 className='text-sm font-cartographCF text-neutral-500'>
+            Designed and Developed by{' '}
+            <a
+              className='italic text-neutral-300 hover:text-white transition-colors duration-300 border-b border-neutral-700 hover:border-white'
+              href='https://x.com/rahulll_parihar'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              @Rahul
+            </a>
+          </h1>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

package/components/ui/hero.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import React, { JSX, useState } from 'react';
+import Link from 'next/link';
+import { ChevronRight, Terminal, Copy, Check } from 'lucide-react';
+
+const Hero = (): JSX.Element => {
+  const [copied, setCopied] = useState<boolean>(false);
+  const installCommand: string = 'npx slash-ui@latest init';
+
+  const handleCopy = async (): Promise<void> => {
+    try {
+      await navigator.clipboard.writeText(installCommand);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy text: ', err);
+    }
+  };
+
+  return (
+    <section className='relative min-h-screen w-full flex flex-col items-center justify-center overflow-hidden '>
+      {/* --- VIDEO BACKGROUND --- */}
+      <video
+        autoPlay
+        muted
+        loop
+        playsInline
+        className='absolute inset-0 z-0 h-full w-full object-cover mix-blend-screen grayscale-100'
+      >
+        <source src='/video/hero_video.mp4' type='video/mp4' />
+        Your browser does not support the video tag.
+      </video>
+
+      <div className='relative z-10 container mx-auto px-6 flex mt-40 flex-col items-center'>
+        <h1 className='max-w-4xl text-center text-3xl font-beVietnamPro tracking-tight md:text-5xl lg:text-8xl text-white'>
+          SLASH/UI <br />
+          <span className='font-sans italic text-6xl md:text-8xl text-zinc-200'>
+            components
+          </span>
+        </h1>
+
+        <p className='mt-8 max-w-2xl text-center font-cartographCF text-zinc-400 leading-relaxed md:text-sm'>
+          A collection of accessible, high-performance components built with
+          React and Tailwind. Stop styling from scratch and start building.
+        </p>
+
+        <div className='mt-10 flex flex-col items-center gap-4 sm:flex-row font-cartographCF'>
+          <Link
+            href='/component'
+            className='h-14 px-8 rounded-xl text-sm bg-white text-black font-bold hover:bg-zinc-200 transition-all flex items-center gap-4 group'
+          >
+            Explore Components
+            <ChevronRight
+              size={18}
+              className='transition-transform group-hover:translate-x-1'
+            />
+          </Link>
+
+          <div
+            onClick={handleCopy}
+            className='group flex h-14 items-center gap-3 rounded-xl border border-white/10 bg-black/50 backdrop-blur-md px-5 hover:bg-white/10 transition-all cursor-pointer'
+          >
+            <Terminal size={16} className='text-zinc-500' />
+            <code className='text-sm text-zinc-300 font-mono'>
+              {installCommand}
+            </code>
+            <div className='ml-2 border-l border-white/10 pl-4'>
+              {copied ? (
+                <Check size={16} className='text-green-400' />
+              ) : (
+                <Copy
+                  size={16}
+                  className='text-zinc-600 group-hover:text-white'
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Hero;

package/components/ui/navbar.tsx

@@ -0,0 +1,337 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { Command } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useSearch } from '@/hooks/use-component-search';
+import { Slant as Hamburger } from 'hamburger-react';
+import { logout } from '@/lib/actions/auth.action';
+
+const Navbar: React.FC = () => {
+  const { searchQuery, setSearchQuery, filteredItems, staticPages } = useSearch();
+
+  const [mounted, setMounted] = useState(false);
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [userEmail, setUserEmail] = useState<string | null>(null);
+  const [authLoaded, setAuthLoaded] = useState(false);
+
+  useEffect(() => {
+    async function getUser() {
+      const res = await fetch('/api/me', {
+        credentials: 'include',
+        cache: 'no-store',
+      });
+      const data = await res.json();
+      setUserEmail(data.user?.email || null);
+      setAuthLoaded(true);
+    }
+    getUser();
+  }, []);
+
+  useEffect(() => {
+    setMounted(true);
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        setIsSearchOpen((prev) => !prev);
+        setIsMenuOpen(false);
+      }
+      if (!isSearchOpen) return;
+      if (e.key === 'Escape') {
+        setIsSearchOpen(false);
+        setSearchQuery('');
+      }
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev + 1) % filteredItems.length);
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev - 1 + filteredItems.length) % filteredItems.length);
+      } else if (e.key === 'Enter') {
+        const selected = filteredItems[selectedIndex];
+        if (selected) {
+          window.location.href = selected.path;
+          setIsSearchOpen(false);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isSearchOpen, filteredItems, selectedIndex, setSearchQuery]);
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [searchQuery]);
+
+  useEffect(() => {
+    document.body.style.overflow = isMenuOpen ? 'hidden' : '';
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isMenuOpen]);
+
+  const menuLinks = React.useMemo(() => {
+    return [
+      { label: 'Quick Start', path: '/docs', tag: 'Guide' },
+      { label: 'Pricing', path: '/pricing', tag: 'Free' },
+      { label: 'Components', path: '/component', tag: '105+' },
+      { label: 'Get Support', path: '/support', tag: null },
+      ...(authLoaded
+        ? userEmail
+        ? [
+            { label: 'Account', path: '/account', tag: userEmail },
+            { label: 'Logout', path: '#logout', tag: null },
+          ]
+        : [{ label: 'Login', path: '/login', tag: null }]
+      : []
+      ),
+    ];
+  }, [userEmail, authLoaded]);
+
+  return (
+    <>
+      {/* ── NAVBAR ── */}
+      <nav className='fixed top-0 left-0 w-full z-[100] flex justify-center pt-4 px-6 pointer-events-none'>
+        <div className='flex items-center justify-between px-6 h-14 w-full max-w-[860px] bg-zinc-900/80 backdrop-blur-3xl border border-zinc-800 rounded-2xl pointer-events-auto'>
+          {/* Left */}
+          <div className='flex items-center gap-8'>
+            <Link href='/' className='font-bold text-white text-lg'>
+              Slash/Ui
+            </Link>
+            <div className='hidden md:flex items-center gap-6 text-sm font-medium text-zinc-400'>
+              <Link href='/docs' className='hover:text-white transition-colors'>
+                Docs
+              </Link>
+              <Link href='/component' className='hover:text-white transition-colors'>
+                Components
+              </Link>
+            </div>
+          </div>
+
+          {/* Right */}
+          <div className='flex items-center gap-2'>
+            <button
+              onClick={() => {
+                setIsSearchOpen(true);
+                setIsMenuOpen(false);
+              }}
+              className='flex items-center justify-center w-9 h-9 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-400 hover:text-white transition-all cursor-pointer'
+              aria-label='Open search'
+            >
+              <Command size={16} />
+            </button>
+
+            <button
+              onClick={() => {
+                setIsMenuOpen((v) => !v);
+                setIsSearchOpen(false);
+              }}
+              className='flex items-center justify-center w-9 h-9 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-400 hover:text-white transition-all cursor-pointer'
+              aria-label='Open menu'
+            >
+              <AnimatePresence mode='wait' initial={false}>
+                {isMenuOpen ? (
+                  <motion.span key='close'>
+                    <Hamburger size={16} toggled={isMenuOpen} />
+                  </motion.span>
+                ) : (
+                  <motion.span key='open'>
+                    <Hamburger size={16} toggled={isMenuOpen} toggle={() => {}} />
+                  </motion.span>
+                )}
+              </AnimatePresence>
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      {/* ── SLIDE-IN MENU PANEL ── */}
+      <AnimatePresence>
+        {isMenuOpen && (
+          <>
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.3 }}
+              onClick={() => setIsMenuOpen(false)}
+              className='fixed inset-0 z-[150] backdrop-blur-md'
+            />
+
+            <motion.div
+              initial={{ opacity: 0, scale: 1.1 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 1.1 }}
+              transition={{ type: 'spring', damping: 25, stiffness: 200 }}
+              className='fixed inset-0 z-[160] flex flex-col justify-center items-center bg-transparent pointer-events-none'
+            >
+              <nav className='flex flex-col items-center justify-center w-full max-w-4xl pointer-events-auto'>
+                {menuLinks.map((link, i) => (
+                  <motion.div
+                    key={link.label}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: i * 0.05, duration: 0.4 }}
+                    className='w-full'
+                  >
+                    {link.label === 'Logout' ? (
+                      <form action={logout} className='w-full'>
+                        <button
+                          type='submit'
+                          onClick={() => setIsMenuOpen(false)}
+                          className='group flex flex-col items-center py-2 w-full cursor-pointer'
+                        >
+                          <span className='text-6xl md:text-7xl font-black uppercase tracking-tighter leading-[0.85] text-white transition-transform duration-300 group-hover:scale-105'>
+                            Logout
+                          </span>
+                          {link.tag && (
+                            <span className='text-[10px] mt-2 opacity-50 tracking-widest'>
+                              {link.tag}
+                            </span>
+                          )}
+                        </button>
+                      </form>
+                    ) : (
+                      <Link
+                        href={link.path}
+                        onClick={() => setIsMenuOpen(false)}
+                        className='group flex flex-col items-center py-2'
+                      >
+                        <span className='text-6xl md:text-7xl font-black uppercase tracking-tighter leading-[0.85] text-white transition-transform duration-300 group-hover:scale-105'>
+                          {link.label}
+                        </span>
+                        {link.tag && (
+                          <span className='text-[10px] mt-2 opacity-50 tracking-widest'>
+                            {link.tag}
+                          </span>
+                        )}
+                      </Link>
+                    )}
+                  </motion.div>
+                ))}
+              </nav>
+
+              <div className='absolute bottom-10 w-full flex justify-between px-10 text-md font-bold text-zinc-500 uppercase pointer-events-auto'>
+                <Link href='/privacy-policy' className='hover:text-white transition-all duration-500'>
+                  Privacy Policy
+                </Link>
+                <Link href='/terms-of-service' className='hover:text-white transition-all duration-500'>
+                  Terms of Service
+                </Link>
+              </div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+
+      {/* ── SEARCH MODAL ── */}
+      <AnimatePresence>
+        {isSearchOpen && (
+          <div className='fixed inset-0 z-[200] flex items-start justify-center pt-[18vh] px-4'>
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              onClick={() => setIsSearchOpen(false)}
+              className='absolute inset-0 bg-black/60 backdrop-blur-sm'
+            />
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95, y: -20 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.95, y: -20 }}
+              className='relative w-full max-w-[600px] bg-zinc-950 border border-zinc-800 rounded-xl shadow-2xl overflow-hidden'
+            >
+              <div className='flex items-center px-4 border-b border-zinc-800'>
+                <Command className='text-zinc-500' size={18} />
+                <input
+                  autoFocus
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  placeholder='Search components or pages...'
+                  className='w-full h-14 bg-transparent border-none outline-none px-4 text-white text-sm placeholder:text-zinc-600'
+                />
+              </div>
+
+              <div className='max-h-[400px] overflow-y-auto p-2 custom-scrollbar'>
+                {searchQuery.length > 0 ? (
+                  <div className='p-2'>
+                    <p className='px-3 py-2 text-[10px] font-semibold text-zinc-500 uppercase tracking-wider'>
+                      Results
+                    </p>
+                    {filteredItems.length > 0 ? (
+                      filteredItems.map((item) => (
+                        <Link
+                          key={item.path}
+                          href={item.path}
+                          onClick={() => {
+                            setIsSearchOpen(false);
+                            setSearchQuery('');
+                          }}
+                          className='flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-white/5 transition-all group'
+                        >
+                          <div className='flex items-center gap-3'>
+                            <item.icon size={16} className='text-zinc-500 group-hover:text-white' />
+                            <span className='text-sm text-zinc-300 group-hover:text-white'>
+                              {item.label}
+                            </span>
+                          </div>
+                          <span className='text-[10px] opacity-50 uppercase tracking-widest'>
+                            {item.category}
+                          </span>
+                        </Link>
+                      ))
+                    ) : (
+                      <p className='px-3 py-4 text-sm text-zinc-600'>No results found...</p>
+                    )}
+                  </div>
+                ) : (
+                  ['Pages', 'Get Started'].map((cat) => (
+                    <div key={cat} className='mb-2'>
+                      <p className='px-3 py-2 text-[10px] font-semibold text-zinc-500 uppercase tracking-wider'>
+                        {cat}
+                      </p>
+                      {staticPages
+                        .filter((p) => p.category === cat)
+                        .map((p) => (
+                          <Link
+                            key={p.label}
+                            href={p.path}
+                            onClick={() => setIsSearchOpen(false)}
+                            className='flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-white/5 transition-all group'
+                          >
+                            <div className='text-zinc-500 group-hover:text-white'>
+                              <p.icon size={16} />
+                            </div>
+                            <span className='text-sm text-zinc-300 group-hover:text-white'>
+                              {p.label}
+                            </span>
+                          </Link>
+                        ))}
+                    </div>
+                  ))
+                )}
+              </div>
+
+              <div className='px-4 py-3 border-t border-zinc-800 bg-zinc-900/30 flex justify-between items-center text-[10px] text-zinc-500 font-medium'>
+                <div className='flex gap-3'>
+                  <span className='flex items-center gap-1'>
+                    <Command size={10} /> to select
+                  </span>
+                  <span className='flex items-center gap-1'>Enter to open</span>
+                </div>
+                <span>ESC to close</span>
+              </div>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+};
+
+export default Navbar;