@ghatak/slash-ui 1.0.0

package/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

package/__registry__/index.ts

@@ -0,0 +1,493 @@
+// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+import * as React from "react"
+
+export const Index: Record<string, any> = {
+  "default": {
+    "neubrutal-button": {
+      name: "neubrutal-button",
+      type: "ui",
+      component: React.lazy(() => import("../registry/ui/buttons/neubrutal-button")),
+      details: null,
+      files: ["ui/buttons/neubrutal-button.tsx"],
+      category: "buttons",
+      content: `import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface NeubrutalButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+}
+
+// 1. CHANGE THIS TO DEFAULT EXPORT
+export default function NeubrutalButton({
+  children = 'Click Me!',
+  className,
+  ...props
+}: NeubrutalButtonProps) {
+  return (
+    <button
+      {...props}
+      className={cn(
+        'group relative w-[140px] h-[50px] bg-none outline-none border-none p-0 cursor-pointer active:translate-y-[2px] transition-transform',
+        className,
+      )}
+    >
+      <div className='absolute top-[14px] -left-[1px] w-[calc(100%+2px)] h-full bg-[#8c8c8c] rounded-[7mm] outline outline-2 outline-[#242622] -z-10' />
+      <div className='absolute top-[10px] left-0 w-full h-full bg-[#e5e5c7] rounded-[7mm] outline outline-2 outline-[#242622] -z-10'>
+        <div className='absolute bottom-0 left-[15%] w-[2px] h-[9px] bg-[#242622]' />
+        <div className='absolute bottom-0 left-[85%] w-[2px] h-[9px] bg-[#242622]' />
+      </div>
+      <div className='relative w-full h-full flex items-center justify-center bg-[#ffffee] rounded-[7mm] outline outline-2 outline-[#242622] text-[#242622] font-semibold text-base overflow-hidden transition-all duration-200 group-active:translate-y-[10px]'>
+        <div className='absolute top-0 -left-[20px] w-[15px] h-full bg-black/10 skew-x-[30deg] transition-all duration-300 group-active:left-[calc(100%+20px)]' />
+        {children}
+      </div>
+    </button>
+  );
+}
+`,
+      description: ``,
+      install: "npm install framer-motion lucide-react",
+    },
+    "dot-cursor": {
+      name: "dot-cursor",
+      type: "ui",
+      component: React.lazy(() => import("../registry/ui/cursors/dot-cursor")),
+      details: null,
+      files: ["ui/cursors/dot-cursor.tsx"],
+      category: "cursors",
+      content: `'use client';
+
+import React, { useState, useEffect } from 'react';
+
+const CustomCursor = () => {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isHovering, setIsHovering] = useState(false);
+  const [isDarkBackground, setIsDarkBackground] = useState(false);
+
+  useEffect(() => {
+    
+    // document.body.style.cursor = 'none';
+    
+    const updatePosition = (e: MouseEvent) => {
+      setPosition({ x: e.clientX, y: e.clientY });
+      
+      const element = document.elementFromPoint(e.clientX, e.clientY);
+      if (element) {
+        const bgColor = window.getComputedStyle(element).backgroundColor;
+        const brightness = getBrightness(bgColor);
+        setIsDarkBackground(brightness < 128);
+      }
+    };
+
+    const handleMouseOver = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (
+        target.tagName === 'A' || 
+        target.tagName === 'BUTTON' ||
+        target.onclick !== null ||
+        window.getComputedStyle(target).cursor === 'pointer'
+      ) {
+        setIsHovering(true);
+      }
+    };
+
+    const handleMouseOut = () => {
+      setIsHovering(false);
+    };
+
+    window.addEventListener('mousemove', updatePosition);
+    document.addEventListener('mouseover', handleMouseOver);
+    document.addEventListener('mouseout', handleMouseOut);
+
+    return () => {
+      window.removeEventListener('mousemove', updatePosition);
+      document.removeEventListener('mouseover', handleMouseOver);
+      document.removeEventListener('mouseout', handleMouseOut);
+      
+     
+    };
+  }, []);
+
+  const getBrightness = (color: string) => {
+    const rgb = color.match(/\d+/g);
+    if (!rgb) return 255;
+    const r = parseInt(rgb[0]);
+    const g = parseInt(rgb[1]);
+    const b = parseInt(rgb[2]);
+    return (r * 299 + g * 587 + b * 114) / 1000;
+  };
+
+  return (
+    <div 
+    style={{ 
+      cursor: 'none', 
+      width: '100vw', 
+      height: '100vh', 
+      position: 'fixed', 
+      top: 0, 
+      left: 0, 
+      pointerEvents: 'none' 
+    }}>
+    
+    <div 
+      style={{
+        position: 'fixed',
+        left: \`\${position.x}px\`,
+        top: \`\${position.y}px\`,
+        pointerEvents: 'none',
+        transform: \`translate(-50%, -50%) scale(\${isHovering ? 1.5 : 1})\`,
+        transition: 'transform 0.2s ease',
+        zIndex: 9999,
+      }}
+    >
+      <svg 
+        xmlns="http://www.w3.org/2000/svg" 
+        width="24" 
+        height="24" 
+        viewBox="0 0 24 24"
+        style={{
+          display: 'block',
+          transition: 'all 0.2s ease',
+        }}
+      >
+        <path 
+          fill={isDarkBackground ? '#ffffff' : '#000000'}
+          stroke={isDarkBackground ? '#000000' : '#ffffff'}
+          strokeWidth="2"
+          d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z"
+        />
+      </svg>
+    </div>
+    </div>
+  );
+};
+
+export default CustomCursor;`,
+      description: ``,
+      install: "npm install framer-motion",
+    },
+    "flaoting-navbar": {
+      name: "flaoting-navbar",
+      type: "ui",
+      component: React.lazy(() => import("../registry/ui/navbars/floating-navbar")),
+      details: null,
+      files: ["ui/navbars/floating-navbar.tsx"],
+      category: "navbars",
+      content: `'use client';
+
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Sun, Moon } from 'lucide-react';
+
+const Navbar = () => {
+  const [mounted, setMounted] = useState(false);
+  const [isDark, setIsDark] = useState(true);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    const handleScroll = () => setScrolled(window.scrollY > 20);
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const toggleTheme = () => {
+    setIsDark(!isDark);
+    document.documentElement.classList.toggle('dark');
+  };
+
+  const navLinks = [
+    { name: 'Archives', slug: 'work' },
+    { name: 'Capabilities', slug: 'service' },
+    { name: 'Ethos', slug: 'about' },
+  ];
+
+  if (!mounted) return null;
+
+  return (
+    <nav className='fixed top-0 left-0 w-full z-[100] flex justify-center pt-6 px-6 pointer-events-none mt-10'>
+      <motion.div
+        initial={{ y: -100 }}
+        animate={{ y: 0 }}
+        className={\`
+          flex items-center justify-between px-6 transition-all duration-500 pointer-events-auto
+          \${
+            scrolled
+              ? 'w-full md:w-[800px] h-14 bg-white/5 backdrop-blur-md border border-white/10 rounded-full shadow-2xl'
+              : 'w-full h-20 bg-transparent border-transparent'
+          }
+        \`}
+      >
+        <Link href='/' className='group flex items-center'>
+          <span className=' text-3xl uppercase tracking-wide font-bold'>
+            Renoh
+          </span>
+        </Link>
+
+        <div className='hidden md:flex items-center space-x-8'>
+          {navLinks.map((link) => (
+            <Link
+              key={link.slug}
+              href={\`/\${link.slug}\`}
+              className='text-[10px]  font-plex uppercase tracking-[0.2em] text-zinc-400 hover:text-white transition-colors relative group'
+            >
+              {link.name}
+              <span className='absolute -bottom-1 left-0 w-0 h-px bg-white transition-all duration-500 group-hover:w-full' />
+            </Link>
+          ))}
+        </div>
+
+        <div className='flex items-center space-x-4'>
+          <button
+            onClick={toggleTheme}
+            className='p-2 hover:bg-white/10 rounded-full transition-colors text-white'
+          >
+            <AnimatePresence mode='wait'>
+              <motion.div
+                key={isDark ? 'dark' : 'light'}
+                initial={{ opacity: 0, rotate: -90 }}
+                animate={{ opacity: 1, rotate: 0 }}
+                exit={{ opacity: 0, rotate: 90 }}
+                transition={{ duration: 0.2 }}
+              >
+                {isDark ? <Sun size={16} /> : <Moon size={16} />}
+              </motion.div>
+            </AnimatePresence>
+          </button>
+
+          <Link href='/contact'>
+            <motion.div
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              className='px-4 py-2 bg-white text-black text-[10px] font-plex uppercase tracking-widest rounded-full'
+            >
+              Inquire
+            </motion.div>
+          </Link>
+        </div>
+      </motion.div>
+    </nav>
+  );
+};
+
+export default Navbar;
+`,
+      description: ``,
+      install: "npm install lucide-react framer-motion gsap",
+    },
+    "minimal-scrollbar": {
+      name: "minimal-scrollbar",
+      type: "ui",
+      component: React.lazy(() => import("../registry/ui/scrollbars/minimal-scrollbar")),
+      details: null,
+      files: ["ui/scrollbars/minimal-scrollbar.tsx"],
+      category: "scrollbars",
+      content: `'use client';
+
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { usePathname } from 'next/navigation';
+
+const VisualScrollbar = () => {
+  const [thumbTop, setThumbTop] = useState(0);
+  const channelRef = useRef<HTMLDivElement>(null);
+  const thumbRef = useRef<HTMLDivElement>(null);
+  const tickingRef = useRef(false);
+  const measurementsRef = useRef({
+    height: 0,
+    thumbH: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    available: 0,
+  });
+
+  // Hide scrollbar on contact page
+  const pathname = usePathname();
+  const shouldHide = pathname === '/contact';
+
+  const measure = useCallback(() => {
+    if (!channelRef.current || !thumbRef.current) return;
+
+    const chRect = channelRef.current.getBoundingClientRect();
+    const thumbRect = thumbRef.current.getBoundingClientRect();
+    const style = window.getComputedStyle(channelRef.current);
+
+    const height = chRect.height;
+    const thumbH = thumbRect.height;
+    const paddingTop = parseFloat(style.paddingTop) || 0;
+    const paddingBottom = parseFloat(style.paddingBottom) || 0;
+    const available = Math.max(
+      height - thumbH - (paddingTop + paddingBottom),
+      0
+    );
+
+    measurementsRef.current = {
+      height,
+      thumbH,
+      paddingTop,
+      paddingBottom,
+      available,
+    };
+  }, []);
+
+  const updateThumb = useCallback(() => {
+    const scrollTop = window.scrollY;
+    const scrollHeight = document.documentElement.scrollHeight;
+    const clientHeight = document.documentElement.clientHeight;
+    const maxScroll = Math.max(scrollHeight - clientHeight, 1);
+    const scrollPercent = Math.min(Math.max(scrollTop / maxScroll, 0), 1);
+    const topPx =
+      measurementsRef.current.paddingTop +
+      scrollPercent * measurementsRef.current.available;
+
+    setThumbTop(topPx);
+  }, []);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!tickingRef.current) {
+        tickingRef.current = true;
+        requestAnimationFrame(() => {
+          updateThumb();
+          tickingRef.current = false;
+        });
+      }
+    };
+
+    let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+    const handleResize = () => {
+      if (resizeTimeout) clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        measure();
+        updateThumb();
+      }, 150);
+    };
+
+    // Initial setup with small delay to ensure DOM is ready
+    const initTimeout = setTimeout(() => {
+      measure();
+      updateThumb();
+    }, 100);
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    window.addEventListener('resize', handleResize, { passive: true });
+
+    return () => {
+      clearTimeout(initTimeout);
+      if (resizeTimeout) clearTimeout(resizeTimeout);
+      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [measure, updateThumb]);
+
+  // Return null if on contact page
+  if (shouldHide) return null;
+
+  return (
+    <>
+      <style>{\`
+        :root {
+          --left-offset: 20px;
+          --track-h: 50vh;
+          --track-w: 3px;
+          --thumb-w: 2px;
+          --thumb-h: 50px;
+          --track-bg: #212121;
+          --channel-bg: rgba(255,255,255,0.15);
+          --thumb-gradient: linear-gradient(180deg,#ffffff,#d7d7d7);
+          --track-radius: 0px;
+          --thumb-radius: 0px;
+          --transition-speed: 1ms;
+        }
+
+        * {
+          box-sizing: border-box;
+        }
+
+        body {
+          background: #0a0a0a;
+          color: #e6e6e6;
+          margin: 0;
+          padding: 0;
+        }
+
+        .vs {
+          position: fixed;
+          left: var(--left-offset);
+          top: 50%;
+          transform: translateY(-50%);
+          width: var(--track-w);
+          height: var(--track-h);
+          background: var(--track-bg);
+          border-radius: var(--track-radius);
+          overflow: hidden;
+          box-shadow:
+            inset 0 1px 0 rgba(255,255,255,0.08),
+            0 10px 24px rgba(0,0,0,0.6);
+          backdrop-filter: blur(6px);
+          pointer-events: none;
+          z-index: 9999;
+          display: flex;
+          justify-content: center;
+          will-change: transform;
+        }
+
+        .vs__channel {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          background: var(--channel-bg);
+          border-radius: var(--track-radius);
+          overflow: hidden;
+        }
+
+        .vs__thumb {
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%) translateZ(0);
+          width: var(--thumb-w);
+          height: var(--thumb-h);
+          border-radius: var(--thumb-radius);
+          background: var(--thumb-gradient);
+          box-shadow:
+            0 4px 14px rgba(0,0,0,0.6),
+            inset 0 1px 0 rgba(255,255,255,0.4);
+          will-change: top;
+        }
+
+        .vs:hover .vs__thumb {
+          transform: translateX(-50%) translateZ(0) scaleY(1.05);
+          transition: transform 180ms ease;
+        }
+
+        @media (max-width:720px) {
+          :root {
+            --left-offset: 10px;
+            --thumb-h: 30px;
+            --track-w: 3px;
+            --track-h: 30vh;
+          }
+        }
+      \`}</style>
+
+      {/* Visual Scrollbar */}
+      <div className='vs'>
+        <div className='vs__channel' ref={channelRef}>
+          <div
+            className='vs__thumb'
+            ref={thumbRef}
+            style={{ top: \`\${thumbTop}px\` }}
+            aria-hidden='true'
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default VisualScrollbar;`,
+      description: ``,
+      install: "",
+    },
+  }
+};

package/app/(auth)/layout.tsx

@@ -0,0 +1,18 @@
+import { redirect } from 'next/dist/server/api-utils';
+import React from 'react'
+
+const layout = async  ({children}: { children: React.ReactNode }) => {
+
+    const isUserAuthenticated = false; // remove later
+
+    
+    // const isUserAuthenticated = await isAuthenticated(); 
+    // if (!isUserAuthenticated) redirect('/sign-in');
+  return (
+    <div className='auth-layout'>
+      {children}
+    </div>
+  )
+}
+
+export default layout

package/app/(auth)/login/page.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import { ArrowRight } from 'lucide-react';
+import { useState, useCallback } from 'react';
+import { sendOtp, verifyOtp } from '@/lib/actions/auth.action';
+import { Toast } from '@/components/toast';
+
+interface ToastState {
+  id: number;
+  message: string;
+}
+
+function useToast() {
+  const [toasts, setToasts] = useState<ToastState[]>([]);
+
+  const showToast = useCallback((message: string) => {
+    const id = Date.now();
+    setToasts((prev) => [...prev, { id, message }]);
+  }, []);
+
+  const removeToast = useCallback((id: number) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return { toasts, showToast, removeToast };
+}
+
+export default function LoginPage() {
+  const [step, setStep] = useState<'email' | 'otp'>('email');
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { toasts, showToast, removeToast } = useToast();
+
+  return (
+    <div className='min-h-screen flex flex-col items-center justify-center text-white px-4 font-sans selection:bg-zinc-800'>
+      {/* Toast notifications */}
+      {toasts.map((t) => (
+        <Toast
+          key={t.id}
+          message={t.message}
+          onClose={() => removeToast(t.id)}
+        />
+      ))}
+
+      <div className='w-full max-w-2xl'>
+        {/* EMAIL STEP */}
+        {step === 'email' ? (
+          <form
+            onSubmit={async (e) => {
+              e.preventDefault();
+              setLoading(true);
+
+              const formData = new FormData();
+              formData.append('email', email);
+
+              await sendOtp(formData);
+
+              setLoading(false);
+              showToast('OTP sent to your email');
+              setStep('otp');
+            }}
+            className='relative group'
+          >
+            <input
+              type='email'
+              autoFocus
+              required
+              disabled={loading}
+              value={email}
+              placeholder='you@example.com'
+              onChange={(e) => setEmail(e.target.value)}
+              className='w-full bg-transparent text-xl md:text-5xl font-light py-4 outline-none border-b border-zinc-800 focus:border-zinc-400 transition-all duration-500 placeholder:text-zinc-800'
+            />
+
+            {loading ? (
+              <Loader text='Sending' />
+            ) : (
+              <button
+                type='submit'
+                className='absolute right-0 top-1/2 -translate-y-1/2 p-2 text-zinc-500 hover:text-white transition-colors'
+              >
+                <ArrowRight size={32} strokeWidth={1.5} />
+              </button>
+            )}
+          </form>
+        ) : (
+          /* OTP STEP */
+          <form
+            onSubmit={async (e) => {
+              e.preventDefault();
+              setLoading(true);
+
+              const formData = new FormData(e.currentTarget);
+              formData.append('email', email);
+
+              await verifyOtp(formData);
+            }}
+            className='space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700'
+          >
+            <label htmlFor='otp'>
+              Enter the 6-digit code sent to your email
+            </label>
+
+            <div className='relative group'>
+              <input
+                type='text'
+                name='otp'
+                autoFocus
+                maxLength={6}
+                disabled={loading}
+                placeholder='000000'
+                className='w-full bg-transparent text-xl md:text-5xl font-light py-4 outline-none border-b border-zinc-800 focus:border-zinc-400 transition-all text-center tracking-[1em] placeholder:text-zinc-900'
+              />
+
+              {loading ? (
+                <Loader text='Verifying' />
+              ) : (
+                <button
+                  type='submit'
+                  className='absolute right-0 top-1/2 -translate-y-1/2 p-2 text-zinc-500 hover:text-white transition-colors'
+                >
+                  <ArrowRight size={32} strokeWidth={1.5} />
+                </button>
+              )}
+            </div>
+          </form>
+        )}
+      </div>
+
+      {/* Footer Branding */}
+      <footer className='fixed bottom-8 text-md text-zinc-600 uppercase font-hoshiko font-bold'>
+        Slash/ui
+      </footer>
+    </div>
+  );
+}
+
+/* Loader Component */
+
+function Loader({ text }: { text: string }) {
+  return (
+    <div className='absolute right-0 top-1/2 -translate-y-1/2 text-zinc-400 text-sm flex items-center gap-1'>
+      [{text}
+      <span className='flex'>
+        <span className='animate-bounce'>.</span>
+        <span className='animate-bounce delay-150'>.</span>
+        <span className='animate-bounce delay-300'>.</span>
+      </span>
+      ]
+    </div>
+  );
+}