@tushar-br/desktop 1.0.280 → 1.0.282

package/staging_area/desktop/rilvox/src/components/ui/RilvoxAnimation.tsx

@@ -1,419 +0,0 @@
-"use client";
-
-import { Zap, Sparkles } from 'lucide-react';
-import { useState, useEffect } from 'react';
-
-export default function RilvoxAnimation() {
-    const [currentTime, setCurrentTime] = useState('');
-
-    useEffect(() => {
-        const updateTime = () => {
-            const now = new Date();
-            setCurrentTime(now.toLocaleTimeString('en-US', {
-                hour: '2-digit',
-                minute: '2-digit',
-                hour12: false
-            }));
-        };
-        updateTime();
-        const interval = setInterval(updateTime, 1000);
-        return () => clearInterval(interval);
-    }, []);
-
-    return (
-        <>
-            <style jsx>{`
-                @keyframes pulse-slow {
-                    0%, 100% { opacity: 1; }
-                    50% { opacity: 0.7; }
-                }
-                @keyframes scan {
-                    0% { transform: translateY(-100%); }
-                    100% { transform: translateY(100%); }
-                }
-                @keyframes float {
-                    0%, 100% { transform: translateY(0px); }
-                    50% { transform: translateY(-10px); }
-                }
-                
-                /* Cursor 1 - Large Purple - Starts TOP-LEFT, Circular Motion */
-                @keyframes bg-cursor-1 {
-                    0% { opacity: 0; transform: translate(50px, 40px) rotate(0deg); }
-                    10% { opacity: 1; transform: translate(100px, 30px) rotate(36deg); }
-                    25% { opacity: 1; transform: translate(140px, 60px) rotate(90deg); }
-                    40% { opacity: 1; transform: translate(120px, 100px) rotate(144deg); }
-                    55% { opacity: 1; transform: translate(70px, 110px) rotate(198deg); }
-                    70% { opacity: 1; transform: translate(30px, 90px) rotate(252deg); }
-                    85% { opacity: 1; transform: translate(40px, 50px) rotate(306deg); }
-                    100% { opacity: 0; transform: translate(80px, 30px) rotate(360deg); }
-                }
-                
-                /* Cursor 2 - Medium Indigo - Starts TOP-RIGHT, Zigzag Pattern */
-                @keyframes bg-cursor-2 {
-                    0% { opacity: 0; transform: translate(400px, 30px) scale(1); }
-                    12% { opacity: 1; transform: translate(380px, 70px) scale(1.1); }
-                    24% { opacity: 1; transform: translate(420px, 100px) scale(0.9); }
-                    36% { opacity: 1; transform: translate(360px, 140px) scale(1.1); }
-                    48% { opacity: 1; transform: translate(400px, 180px) scale(0.9); }
-                    60% { opacity: 1; transform: translate(340px, 210px) scale(1.1); }
-                    75% { opacity: 1; transform: translate(380px, 240px) scale(0.9); }
-                    100% { opacity: 0; transform: translate(320px, 270px) scale(0.8); }
-                }
-                
-                /* Cursor 3 - Small Light Purple - Starts CENTER, Wave Motion */
-                @keyframes bg-cursor-3 {
-                    0% { opacity: 0; transform: translate(200px, 130px) translateY(0px); }
-                    15% { opacity: 1; transform: translate(220px, 130px) translateY(-25px); }
-                    30% { opacity: 1; transform: translate(240px, 130px) translateY(0px); }
-                    45% { opacity: 1; transform: translate(260px, 130px) translateY(25px); }
-                    60% { opacity: 1; transform: translate(280px, 130px) translateY(0px); }
-                    75% { opacity: 1; transform: translate(300px, 130px) translateY(-25px); }
-                    90% { opacity: 1; transform: translate(320px, 130px) translateY(0px); }
-                    100% { opacity: 0; transform: translate(340px, 130px) translateY(15px); }
-                }
-                
-                /* Cursor 4 - Large Pink - Starts BOTTOM-LEFT, Bounce Pattern */
-                @keyframes bg-cursor-4 {
-                    0% { opacity: 0; transform: translate(60px, 200px) scale(1); }
-                    10% { opacity: 1; transform: translate(80px, 160px) scale(1.2); }
-                    20% { opacity: 1; transform: translate(80px, 210px) scale(0.8); }
-                    30% { opacity: 1; transform: translate(110px, 150px) scale(1.2); }
-                    40% { opacity: 1; transform: translate(110px, 220px) scale(0.8); }
-                    50% { opacity: 1; transform: translate(140px, 140px) scale(1.2); }
-                    60% { opacity: 1; transform: translate(140px, 230px) scale(0.8); }
-                    70% { opacity: 1; transform: translate(170px, 130px) scale(1.2); }
-                    85% { opacity: 1; transform: translate(170px, 240px) scale(0.8); }
-                    100% { opacity: 0; transform: translate(200px, 250px) scale(0.6); }
-                }
-                
-                /* Cursor 5 - Tiny White - Starts BOTTOM-RIGHT, Spiral Motion */
-                @keyframes bg-cursor-5 {
-                    0% { opacity: 0; transform: translate(380px, 220px) rotate(0deg) translateX(0px); }
-                    20% { opacity: 1; transform: translate(380px, 220px) rotate(72deg) translateX(35px); }
-                    40% { opacity: 1; transform: translate(380px, 220px) rotate(144deg) translateX(60px); }
-                    60% { opacity: 1; transform: translate(380px, 220px) rotate(216deg) translateX(85px); }
-                    80% { opacity: 1; transform: translate(380px, 220px) rotate(288deg) translateX(110px); }
-                    100% { opacity: 0; transform: translate(380px, 220px) rotate(360deg) translateX(130px); }
-                }
-                
-                @keyframes cursor-move {
-                    0% { opacity: 0; transform: translate(280px, 50px) scale(1) rotate(0deg); }
-                    10% { opacity: 1; transform: translate(200px, 20px) scale(1) rotate(-8deg); }
-                    22% { opacity: 1; transform: translate(80px, -10px) scale(1) rotate(5deg); }
-                    34% { opacity: 1; transform: translate(-30px, -50px) scale(1) rotate(-3deg); }
-                    44% { opacity: 1; transform: translate(-120px, -90px) scale(1) rotate(0deg); }
-                    48% { opacity: 1; transform: translate(-120px, -90px) scale(0.85) rotate(0deg); }
-                    52% { opacity: 1; transform: translate(-120px, -90px) scale(1) rotate(0deg); }
-                    60% { opacity: 1; transform: translate(-170px, -60px) scale(1) rotate(6deg); }
-                    70% { opacity: 1; transform: translate(-220px, -30px) scale(1) rotate(-4deg); }
-                    74% { opacity: 1; transform: translate(-220px, -30px) scale(0.85) rotate(-4deg); }
-                    78% { opacity: 1; transform: translate(-220px, -30px) scale(1) rotate(-4deg); }
-                    88% { opacity: 1; transform: translate(-270px, 0px) scale(1) rotate(2deg); }
-                    96% { opacity: 1; transform: translate(-310px, 20px) scale(1) rotate(0deg); }
-                    100% { opacity: 0; transform: translate(-350px, 40px) scale(0.7) rotate(0deg); }
-                }
-                @keyframes box-appear {
-                    0%, 44% { opacity: 0; transform: scale(0.96); }
-                    48% { opacity: 0.4; transform: scale(0.98); }
-                    52%, 92% { opacity: 1; transform: scale(1); }
-                    100% { opacity: 0; transform: scale(1.02); }
-                }
-                @keyframes text-glow {
-                    0%, 44% { opacity: 0.9; filter: drop-shadow(0 0 0px rgba(139, 92, 246, 0)); }
-                    52%, 92% { opacity: 1; filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.5)); }
-                    100% { opacity: 0.9; filter: drop-shadow(0 0 0px rgba(139, 92, 246, 0)); }
-                }
-                @keyframes icon-pulse {
-                    0%, 44% { opacity: 0.4; transform: scale(0.95); }
-                    52%, 92% { opacity: 1; transform: scale(1); }
-                    100% { opacity: 0.4; transform: scale(0.95); }
-                }
-                @keyframes grid-fade {
-                    0%, 44% { opacity: 0.05; }
-                    52%, 92% { opacity: 0.15; }
-                    100% { opacity: 0.05; }
-                }
-                
-                /* Text Selection Effect */
-                @keyframes text-select {
-                    0%, 30% { 
-                        background-size: 0% 100%;
-                        opacity: 0;
-                    }
-                    40% { 
-                        background-size: 50% 100%;
-                        opacity: 0.6;
-                    }
-                    55% { 
-                        background-size: 100% 100%;
-                        opacity: 0.8;
-                    }
-                    70% { 
-                        background-size: 100% 100%;
-                        opacity: 0.8;
-                    }
-                    85% { 
-                        background-size: 50% 100%;
-                        opacity: 0.4;
-                    }
-                    100% { 
-                        background-size: 0% 100%;
-                        opacity: 0;
-                    }
-                }
-
-                :global(.animate-pulse-slow) { animation: pulse-slow 3s ease-in-out infinite; }
-                :global(.animate-scan) { animation: scan 3s linear infinite; }
-                :global(.mobile-frame) { animation: float 6s ease-in-out infinite; }
-                
-                :global(.bg-cursor-1) { animation: bg-cursor-1 10s ease-in-out infinite; }
-                :global(.bg-cursor-2) { animation: bg-cursor-2 8s linear infinite 1s; }
-                :global(.bg-cursor-3) { animation: bg-cursor-3 9s ease-in-out infinite 2.5s; }
-                :global(.bg-cursor-4) { animation: bg-cursor-4 7s ease-out infinite 0.5s; }
-                :global(.bg-cursor-5) { animation: bg-cursor-5 11s linear infinite 1.8s; }
-                
-                :global(.text-selection-highlight) {
-                    position: relative;
-                    display: inline-block;
-                }
-                
-                :global(.text-selection-highlight::before) {
-                    content: '';
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                    bottom: 0;
-                    background: linear-gradient(90deg, rgba(139, 92, 246, 0.4), rgba(99, 102, 241, 0.4));
-                    background-size: 0% 100%;
-                    background-repeat: no-repeat;
-                    background-position: left center;
-                    border-radius: 4px;
-                    animation: text-select 10s ease-in-out infinite;
-                    pointer-events: none;
-                    z-index: -1;
-                }
-                
-                :global(#cursor) { 
-                    cursor: pointer;
-                    overflow: visible;
-                    animation: cursor-move 7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
-                }
-                :global(#box) { 
-                    cursor: pointer;
-                    opacity: 0;
-                    transform-origin: center;
-                    animation: box-appear 7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
-                }
-                :global(#text-line-1), :global(#text-line-2), :global(#text-line-3) { 
-                    opacity: 0.9;
-                    animation: text-glow 7s ease-in-out infinite;
-                }
-                :global(#icon-code), :global(#icon-users), :global(#icon-sparkles) { 
-                    animation: icon-pulse 7s ease-in-out infinite;
-                }
-                :global(#grid) { 
-                    animation: grid-fade 7s ease-in-out infinite;
-                }
-            `}</style>
-
-            <div className="w-full max-w-6xl mx-auto py-12 px-4">
-                <div className="flex flex-col lg:flex-row items-center lg:items-start gap-8 lg:gap-0">
-                    {/* Left Side - Main Animation with 5 Unique Cursors */}
-                    <div className="w-full lg:flex-1 relative">
-                        {/* Cursor 1 - Large Purple - Circular Motion */}
-                        <div className="absolute top-0 left-0 bg-cursor-1 pointer-events-none z-40">
-                            <div className="relative">
-                                <svg width="26" height="30" viewBox="0 0 16 20">
-                                    <path d="M0 0L0 16L6 10L9 16L11 15L8 9L16 9L0 0Z" fill="#8B5CF6" stroke="#8B5CF6" strokeWidth="2" filter="drop-shadow(0 6px 16px rgba(139, 92, 246, 0.9))" />
-                                </svg>
-                                <div className="absolute -top-2 -left-2 w-10 h-10 bg-purple-500/30 rounded-full blur-lg"></div>
-                            </div>
-                        </div>
-
-                        {/* Cursor 2 - Medium Indigo - Zigzag Pattern */}
-                        <div className="absolute top-0 left-0 bg-cursor-2 pointer-events-none z-40">
-                            <div className="relative">
-                                <svg width="20" height="24" viewBox="0 0 16 20">
-                                    <path d="M0 0L0 16L6 10L9 16L11 15L8 9L16 9L0 0Z" fill="#6366F1" stroke="white" strokeWidth="1.5" filter="drop-shadow(0 4px 10px rgba(99, 102, 241, 0.7))" />
-                                </svg>
-                                <div className="absolute -top-1 -left-1 w-7 h-7 bg-indigo-400/40 rounded-full blur-md"></div>
-                            </div>
-                        </div>
-
-                        {/* Cursor 3 - Small Light Purple - Wave Motion */}
-                        <div className="absolute top-0 left-0 bg-cursor-3 pointer-events-none z-40">
-                            <svg width="15" height="19" viewBox="0 0 16 20">
-                                <path d="M0 0L0 16L6 10L9 16L11 15L8 9L16 9L0 0Z" fill="white" stroke="#A78BFA" strokeWidth="2.5" filter="drop-shadow(0 3px 8px rgba(167, 139, 250, 0.6))" />
-                            </svg>
-                        </div>
-
-                        {/* Cursor 4 - Large Pink - Bouncing */}
-                        <div className="absolute top-0 left-0 bg-cursor-4 pointer-events-none z-40">
-                            <div className="relative">
-                                <svg width="24" height="28" viewBox="0 0 16 20">
-                                    <path d="M0 0L0 16L6 10L9 16L11 15L8 9L16 9L0 0Z" fill="#C084FC" stroke="#C084FC" strokeWidth="2.2" filter="drop-shadow(0 8px 20px rgba(192, 132, 252, 0.8))" />
-                                </svg>
-                                <div className="absolute -top-3 -left-3 w-12 h-12 bg-pink-400/25 rounded-full blur-xl"></div>
-                            </div>
-                        </div>
-
-                        {/* Cursor 5 - Tiny White - Spiral Motion */}
-                        <div className="absolute top-0 left-0 bg-cursor-5 pointer-events-none z-40">
-                            <div className="relative">
-                                <svg width="13" height="17" viewBox="0 0 16 20">
-                                    <path d="M0 0L0 16L6 10L9 16L11 15L8 9L16 9L0 0Z" fill="white" stroke="#E0E7FF" strokeWidth="1.2" filter="drop-shadow(0 2px 10px rgba(255, 255, 255, 0.9))" />
-                                </svg>
-                                <div className="absolute -top-2 -left-2 w-5 h-5 bg-white/50 rounded-full blur-sm animate-pulse"></div>
-                            </div>
-                        </div>
-
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 700 280"
-                            className="w-full h-auto"
-                            style={{ overflow: 'visible' }}
-                        >
-                            <defs>
-                                <linearGradient id="purpleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-                                    <stop offset="0%" style={{ stopColor: '#8B5CF6', stopOpacity: 1 }} />
-                                    <stop offset="100%" style={{ stopColor: '#6366F1', stopOpacity: 1 }} />
-                                </linearGradient>
-                                <filter id="glow">
-                                    <feGaussianBlur stdDeviation="3" result="coloredBlur" />
-                                    <feMerge>
-                                        <feMergeNode in="coloredBlur" />
-                                        <feMergeNode in="SourceGraphic" />
-                                    </feMerge>
-                                </filter>
-                            </defs>
-
-                            <g id="Frame">
-                                <g id="grid" opacity="0.1">
-                                    <line x1="0" y1="70" x2="500" y2="70" stroke="#8B5CF6" strokeWidth="0.5" strokeDasharray="4 4" />
-                                    <line x1="0" y1="140" x2="500" y2="140" stroke="#8B5CF6" strokeWidth="0.5" strokeDasharray="4 4" />
-                                    <line x1="0" y1="210" x2="500" y2="210" stroke="#8B5CF6" strokeWidth="0.5" strokeDasharray="4 4" />
-                                    <line x1="125" y1="0" x2="125" y2="280" stroke="#8B5CF6" strokeWidth="0.5" strokeDasharray="4 4" />
-                                    <line x1="250" y1="0" x2="250" y2="280" stroke="#8B5CF6" strokeWidth="0.5" strokeDasharray="4 4" />
-                                    <line x1="375" y1="0" x2="375" y2="280" stroke="#8B5CF6" strokeWidth="0.5" strokeDasharray="4 4" />
-                                </g>
-
-                                <g id="math-symbols" opacity="0.15">
-                                    <text x="30" y="30" fill="#8B5CF6" fontSize="18" fontWeight="300">∑</text>
-                                    <text x="450" y="40" fill="#8B5CF6" fontSize="16" fontWeight="300">∞</text>
-                                    <text x="420" y="250" fill="#8B5CF6" fontSize="14" fontWeight="300">π</text>
-                                    <text x="50" y="260" fill="#8B5CF6" fontSize="16" fontWeight="300">λ</text>
-                                </g>
-
-                                <g id="deco-boxes" opacity="0.2">
-                                    <rect x="15" y="15" width="8" height="8" fill="none" stroke="#8B5CF6" strokeWidth="1" rx="1" />
-                                    <rect x="470" y="20" width="12" height="12" fill="none" stroke="#6366F1" strokeWidth="1" rx="2" />
-                                    <rect x="460" y="250" width="10" height="10" fill="none" stroke="#8B5CF6" strokeWidth="1" rx="1" />
-                                    <rect x="20" y="255" width="6" height="6" fill="#8B5CF6" rx="1" />
-                                </g>
-
-                                <g id="connect-lines" opacity="0.3">
-                                    <path d="M 40 50 Q 100 80 160 60" stroke="url(#purpleGradient)" strokeWidth="1.5" fill="none" strokeDasharray="3 3" />
-                                    <path d="M 340 200 Q 380 180 420 210" stroke="url(#purpleGradient)" strokeWidth="1.5" fill="none" strokeDasharray="3 3" />
-                                </g>
-
-                                <g id="box-figma">
-                                    <g id="icon-code" opacity="0.8">
-                                        <rect x="35" y="45" width="30" height="30" fill="url(#purpleGradient)" fillOpacity="0.1" rx="6" />
-                                        <path d="M 45 55 L 40 60 L 45 65" stroke="url(#purpleGradient)" strokeWidth="2" fill="none" strokeLinecap="round" />
-                                        <path d="M 55 55 L 60 60 L 55 65" stroke="url(#purpleGradient)" strokeWidth="2" fill="none" strokeLinecap="round" />
-                                    </g>
-
-                                    <text x="80" y="67" fill="#F9F9F9" fontSize="24" fontWeight="800" fontFamily="system-ui, -apple-system, sans-serif" letterSpacing="-0.02em" id="text-line-1">Tools Fast</text>
-
-                                    <g id="icon-users" opacity="0.8">
-                                        <rect x="35" y="115" width="30" height="30" fill="url(#purpleGradient)" fillOpacity="0.1" rx="6" />
-                                        <circle cx="45" cy="127" r="4" stroke="url(#purpleGradient)" strokeWidth="2" fill="none" />
-                                        <circle cx="55" cy="127" r="4" stroke="url(#purpleGradient)" strokeWidth="2" fill="none" />
-                                        <path d="M 42 135 Q 45 132 48 135" stroke="url(#purpleGradient)" strokeWidth="2" fill="none" strokeLinecap="round" />
-                                        <path d="M 52 135 Q 55 132 58 135" stroke="url(#purpleGradient)" strokeWidth="2" fill="none" strokeLinecap="round" />
-                                    </g>
-
-                                    <text x="80" y="137" fill="#F9F9F9" fontSize="24" fontWeight="800" fontFamily="system-ui, -apple-system, sans-serif" letterSpacing="-0.02em" id="text-line-2">All Users</text>
-
-                                    <g id="icon-sparkles" opacity="0.8">
-                                        <rect x="35" y="185" width="30" height="30" fill="url(#purpleGradient)" fillOpacity="0.1" rx="6" />
-                                        <path d="M 50 192 L 50 208" stroke="url(#purpleGradient)" strokeWidth="2" strokeLinecap="round" />
-                                        <path d="M 42 200 L 58 200" stroke="url(#purpleGradient)" strokeWidth="2" strokeLinecap="round" />
-                                        <path d="M 45 195 L 55 205" stroke="url(#purpleGradient)" strokeWidth="1.5" strokeLinecap="round" />
-                                        <path d="M 55 195 L 45 205" stroke="url(#purpleGradient)" strokeWidth="1.5" strokeLinecap="round" />
-                                    </g>
-
-                                    <text x="80" y="207" fill="#F9F9F9" fontSize="24" fontWeight="800" fontFamily="system-ui, -apple-system, sans-serif" letterSpacing="-0.02em" id="text-line-3">For You</text>
-
-                                    <g id="box">
-                                        <rect x="25" y="30" width="450" height="220" strokeWidth="2" stroke="url(#purpleGradient)" fillOpacity="0.02" fill="url(#purpleGradient)" rx="12" />
-                                        <rect x="22" y="27" width="6" height="6" strokeWidth="1.5" stroke="url(#purpleGradient)" fill="white" rx="1" />
-                                        <rect x="22" y="247" width="6" height="6" strokeWidth="1.5" stroke="url(#purpleGradient)" fill="white" rx="1" />
-                                        <rect x="472" y="247" width="6" height="6" strokeWidth="1.5" stroke="url(#purpleGradient)" fill="white" rx="1" />
-                                        <rect x="472" y="27" width="6" height="6" strokeWidth="1.5" stroke="url(#purpleGradient)" fill="white" rx="1" />
-                                    </g>
-
-                                    <g id="cursor">
-                                        <path strokeWidth="1.5" stroke="white" fill="url(#purpleGradient)" d="M 370 265 L 367 248 L 382 257 L 375 259 L 370 265 Z" filter="url(#glow)" />
-                                        <rect x="385" y="255" width="80" height="22" fill="url(#purpleGradient)" rx="6" filter="url(#glow)" />
-                                        <text x="425" y="270" fill="white" fontSize="11" fontWeight="900" fontFamily="system-ui, -apple-system, sans-serif" textAnchor="middle" letterSpacing="0.15em">RILVOX</text>
-                                    </g>
-                                </g>
-                            </g>
-                        </svg>
-                    </div>
-
-                    {/* Right Side - iPhone Frame */}
-                    <div className="w-full lg:w-auto lg:ml-5 mt-8 lg:mt-0 flex justify-center lg:justify-end lg:mr-5">
-                        <div className="relative w-[170px] h-[350px] mobile-frame">
-                            <div className="absolute inset-0 rounded-[2.5rem] bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 border-[3px] border-slate-700 shadow-2xl overflow-hidden">
-                                <div className="absolute inset-[2px] rounded-[2.3rem] bg-black overflow-hidden">
-                                    <div className="absolute top-2 left-1/2 -translate-x-1/2 w-24 h-6 bg-black rounded-full z-20 flex items-center justify-center">
-                                        <div className="w-10 h-1 bg-slate-900 rounded-full"></div>
-                                    </div>
-
-                                    <div className="absolute inset-0 bg-gradient-to-br from-purple-900 to-indigo-900">
-                                        <img src="/rilvox_wallpaper.png" alt="Rilvox" className="w-full h-full object-cover" />
-                                    </div>
-
-                                    <div className="absolute inset-0 bg-gradient-to-b from-transparent via-white/3 to-transparent animate-scan pointer-events-none"></div>
-
-                                    <div className="absolute top-1 left-0 right-0 px-5 flex justify-between items-center text-white text-[7px] font-semibold z-10">
-                                        <span>{currentTime || '9:41'}</span>
-                                        <div className="flex items-center gap-1">
-                                            <svg className="w-3 h-2" fill="currentColor" viewBox="0 0 16 16">
-                                                <path d="M11.5 0h-7A2.5 2.5 0 0 0 2 2.5v11A2.5 2.5 0 0 0 4.5 16h7a2.5 2.5 0 0 0 2.5-2.5v-11A2.5 2.5 0 0 0 11.5 0zM13 13.5a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 3 13.5v-11A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v11z" />
-                                                <path d="M5 2h6v10H5z" />
-                                            </svg>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div className="absolute right-[-1px] top-20 w-[3px] h-16 bg-slate-700 rounded-l"></div>
-                                <div className="absolute left-[-1px] top-16 w-[3px] h-7 bg-slate-700 rounded-r"></div>
-                                <div className="absolute left-[-1px] top-24 w-[3px] h-7 bg-slate-700 rounded-r"></div>
-                            </div>
-
-                            <div className="absolute inset-0 rounded-[2.5rem] bg-gradient-to-br from-purple-500/8 to-indigo-500/8 blur-2xl -z-10 animate-pulse-slow"></div>
-                        </div>
-                    </div>
-                </div>
-
-                <div className="text-center mt-12">
-                    <div className="flex items-center justify-center gap-2 mb-2">
-                        <Zap className="w-4 h-4 text-purple-400" />
-                        <h3 className="text-lg md:text-xl font-black text-white/80 uppercase tracking-wider">
-                            Crafted with Precision
-                        </h3>
-                        <Sparkles className="w-4 h-4 text-purple-400" />
-                    </div>
-                    <p className="text-slate-500 text-xs md:text-sm">
-                        Every tool designed for maximum productivity
-                    </p>
-                </div>
-            </div>
-        </>
-    );
-}

package/staging_area/desktop/rilvox/src/components/ui/ToolCard.tsx

@@ -1,76 +0,0 @@
-import { useRouter } from "next/navigation";
-import { ExternalLink } from "lucide-react";
-import { cn } from "@/lib/utils";
-
-interface ToolCardProps {
-    title: string;
-    desc: string;
-    icon: any;
-    href: string;
-    cat: string;
-    isNew?: boolean;
-}
-
-export default function ToolCard({ title, desc, icon: Icon, href, cat, isNew }: ToolCardProps) {
-    const router = useRouter();
-
-    const handleCardClick = () => {
-        router.push(href);
-    };
-
-    const handleNewTabOpen = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        window.open(href, '_blank');
-    };
-
-    return (
-        <div
-            onClick={handleCardClick}
-            className="group relative h-full rounded-3xl p-5 flex flex-col bg-gradient-to-br from-white/[0.07] to-white/[0.02] backdrop-blur-xl border border-white/10 hover:border-white/20 transition-all duration-500 cursor-pointer hover:shadow-[0_8px_32px_0_rgba(255,255,255,0.1)] hover:scale-[1.02]"
-        >
-            {/* Smooth gradient overlay on hover */}
-            <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/10 via-purple-500/5 to-transparent rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
-
-            {/* Inner glow effect */}
-            <div className="absolute inset-0 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none shadow-[inset_0_0_20px_rgba(99,102,241,0.1)]" />
-
-            {/* Header: Icon + Title */}
-            <div className="flex items-center gap-3 mb-4 relative z-10">
-                <div className="p-3 rounded-full bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-sm border border-white/10 group-hover:from-indigo-500/20 group-hover:to-purple-500/10 group-hover:border-indigo-500/30 transition-all duration-500 shadow-lg shrink-0">
-                    <Icon className="w-5 h-5 text-neutral-300 group-hover:text-white transition-colors duration-300" />
-                </div>
-                <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2 mb-0.5">
-                        <h3 className="text-base font-bold text-white tracking-tight truncate">
-                            {title}
-                        </h3>
-                        {isNew && (
-                            <span className="flex-shrink-0 inline-flex items-center px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider bg-gradient-to-r from-indigo-500/20 to-purple-500/20 text-indigo-300 border border-indigo-500/30 shadow-[0_0_15px_rgba(99,102,241,0.3)]">
-                                New
-                            </span>
-                        )}
-                    </div>
-                </div>
-
-                {/* New Tab Button */}
-                <button
-                    onClick={handleNewTabOpen}
-                    className="p-2 rounded-full text-neutral-500 hover:text-white hover:bg-white/10 transition-all duration-300 z-20 backdrop-blur-sm"
-                    title="Open in new tab"
-                >
-                    <ExternalLink className="w-4 h-4" />
-                </button>
-            </div>
-
-            {/* Content: Description */}
-            <div className="relative z-10 flex-1">
-                <p className="text-sm text-neutral-400 leading-relaxed group-hover:text-neutral-300 transition-colors duration-300 line-clamp-2">
-                    {desc}
-                </p>
-            </div>
-
-            {/* Bottom shine effect */}
-            <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-        </div>
-    );
-}

package/staging_area/desktop/rilvox/src/components/ui/ToolShell.tsx

@@ -1,119 +0,0 @@
-"use client";
-
-import { usePathname } from 'next/navigation';
-import { cn } from '@/lib/utils';
-import { ButtonHTMLAttributes, ReactNode, forwardRef } from 'react';
-import { Loader2 } from 'lucide-react';
-
-/* -------------------------------------------------------------------------- */
-/*                                   BUTTON                                   */
-/* -------------------------------------------------------------------------- */
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger';
-    size?: 'sm' | 'md' | 'lg';
-    isLoading?: boolean;
-}
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
-    className, variant = 'primary', size = 'md', isLoading, children, ...props
-}, ref) => {
-
-    const variants = {
-        primary: "bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white shadow-[0_8px_24px_rgba(99,102,241,0.3)] hover:shadow-[0_12px_32px_rgba(99,102,241,0.4)] border border-indigo-500/20 backdrop-blur-sm",
-        secondary: "bg-white/10 hover:bg-white/15 text-white border border-white/20 hover:border-white/30 backdrop-blur-xl shadow-lg",
-        outline: "bg-transparent hover:bg-white/5 text-neutral-300 hover:text-white border border-white/20 hover:border-white/40 backdrop-blur-sm",
-        ghost: "bg-transparent hover:bg-white/5 text-neutral-400 hover:text-white border-transparent shadow-none",
-        danger: "bg-gradient-to-r from-red-500/20 to-pink-500/20 hover:from-red-500/30 hover:to-pink-500/30 text-red-400 hover:text-red-300 border border-red-500/30 hover:border-red-500/50 backdrop-blur-sm"
-    };
-
-    const sizes = {
-        sm: "px-4 py-2 text-xs rounded-2xl",
-        md: "px-5 py-2.5 text-sm rounded-2xl",
-        lg: "px-7 py-3.5 text-base rounded-3xl font-semibold"
-    };
-
-    return (
-        <button
-            ref={ref}
-            className={cn(
-                "inline-flex items-center justify-center gap-2 font-medium transition-all duration-300 active:scale-95 disabled:opacity-50 disabled:pointer-events-none hover:scale-[1.02]",
-                variants[variant],
-                sizes[size],
-                className
-            )}
-            disabled={isLoading}
-            {...props}
-        >
-            {isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
-            {children}
-        </button>
-    );
-});
-Button.displayName = "Button";
-
-
-/* -------------------------------------------------------------------------- */
-/*                                 TOOL SHELL                                 */
-/* -------------------------------------------------------------------------- */
-import { Star, History, Info } from 'lucide-react';
-
-interface ToolShellProps {
-    title: string;
-    description: string;
-    category: string;
-    isNew?: boolean;
-    children: ReactNode;
-}
-
-export default function ToolShell({ title, description, category, isNew, children }: ToolShellProps) {
-    const pathname = usePathname();
-
-    // In a real implementation, we would check "isFavorite" from API
-    // and record "view" in history on mount.
-
-    return (
-        <div className="max-w-6xl mx-auto px-4 md:px-6 mt-16 py-10 md:py-16 animate-in fade-in slide-in-from-bottom-4 duration-500">
-            {/* Header */}
-            <div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-8">
-                <div>
-                    <div className="flex items-center gap-2 mb-2">
-                        <span className="text-xs font-bold uppercase tracking-wider text-indigo-400">{category}</span>
-                        {isNew && <span className="text-[10px] font-bold bg-indigo-500/20 text-indigo-300 px-2 py-0.5 rounded-full border border-indigo-500/20">NEW</span>}
-                    </div>
-                    <h1 className="text-3xl md:text-4xl font-extrabold text-white mb-2">{title}</h1>
-                    <p className="text-slate-400 max-w-2xl">{description}</p>
-                </div>
-                <div className="flex items-center gap-2">
-                    <Button variant="secondary" size="sm" className="hidden md:flex">
-                        <History className="w-4 h-4" /> Recent
-                    </Button>
-                    <Button variant="outline" size="sm">
-                        <Star className="w-4 h-4" /> Save
-                    </Button>
-                </div>
-            </div>
-
-            {/* Main Workspace */}
-            <div className="min-h-[600px] border border-slate-800 bg-slate-900/40 backdrop-blur-xl rounded-2xl overflow-hidden shadow-2xl shadow-indigo-500/5">
-                {children}
-            </div>
-
-            {/* Footer / Instructions */}
-            <div className="mt-8 p-6 rounded-2xl bg-slate-900/40 border border-slate-800/50">
-                <div className="flex items-start gap-4">
-                    <div className="p-2 rounded-lg bg-indigo-500/10 text-indigo-400">
-                        <Info className="w-5 h-5" />
-                    </div>
-                    <div className="space-y-2">
-                        <h4 className="text-sm font-semibold text-slate-200">How to use this tool</h4>
-                        <p className="text-sm text-slate-400 leading-relaxed">
-                            This tool runs entirely in your browser or via optimized edge functions.
-                            Inputs are processed securely and no data is stored permanently unless you save it.
-                            Check the usage limits for your plan.
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}