openship 0.1.1 → 0.1.7

package/apps/dashboard/src/components/shared/PlatformFeatureCard.tsx

@@ -1,27 +0,0 @@
-import generateIcon from '@/utils/icons';
-
-interface PlatformFeatureCardProps {
-  icon: string;
-  title: string;
-  description: string;
-}
-
-export default function PlatformFeatureCard({ icon, title, description }: PlatformFeatureCardProps) {
-  return (
-    <div className="relative overflow-hidden bg-white/5 backdrop-blur-[25px] rounded-[20px] p-6 border border-white/10 group hover:border-white/20 transition-all duration-300">
-      <div className="absolute inset-0 overflow-hidden">
-        <div className="absolute bg-transparent rounded-full border-white/10 -right-10 -top-10 w-40 h-40 border-[20px] blur-2xl group-hover:border-white/20 transition-all duration-300"></div>
-        <div className="absolute bg-transparent rounded-full border-white/5 -left-10 -bottom-10 w-32 h-32 border-[15px] blur-xl group-hover:border-white/10 transition-all duration-300"></div>
-      </div>
-      
-      <div className="relative z-10">
-        <div className="mb-4">
-          {generateIcon(icon, 40, 'rgba(255,255,255,0.5)')}
-        </div>
-        <h3 className="text-xl font-bold text-white mb-3">{title}</h3>
-        <p className="text-white/60 leading-relaxed">{description}</p>
-      </div>
-    </div>
-  );
-}
-

package/apps/dashboard/src/components/shared/StatCard.tsx

@@ -1,14 +0,0 @@
-interface StatCardProps {
-  number: string;
-  label: string;
-}
-
-export default function StatCard({ number, label }: StatCardProps) {
-  return (
-    <div className="bg-white/5 backdrop-blur-[25px] rounded-[20px] p-6 text-center border border-white/10">
-      <div className="text-3xl lg:text-4xl font-bold text-white mb-2">{number}</div>
-      <div className="text-sm lg:text-base text-white/60">{label}</div>
-    </div>
-  );
-}
-

package/apps/dashboard/src/components/shared/ValueCard.tsx

@@ -1,20 +0,0 @@
-import generateIcon from '@/utils/icons';
-
-interface ValueCardProps {
-  icon: string;
-  title: string;
-  description: string;
-}
-
-export default function ValueCard({ icon, title, description }: ValueCardProps) {
-  return (
-    <div className="bg-white/5 backdrop-blur-[25px] rounded-[25px] p-8 border border-white/10">
-      <div className="mb-4">
-        {generateIcon(icon, 48, 'rgba(255,255,255,0.5)')}
-      </div>
-      <h3 className="text-2xl font-bold text-white mb-4">{title}</h3>
-      <p className="text-white/70 leading-relaxed">{description}</p>
-    </div>
-  );
-}
-

package/apps/dashboard/src/components/shared/index.ts

@@ -1,8 +0,0 @@
-export { default as PageHero } from './PageHero';
-export { default as StatCard } from './StatCard';
-export { default as ValueCard } from './ValueCard';
-export { default as FeatureCard } from './FeatureCard';
-export { default as CTASection } from './CTASection';
-export { default as PlatformFeatureCard } from './PlatformFeatureCard';
-export { default as MachineSettingsModal } from './MachineSettingsModal';
-

package/apps/dashboard/src/components/sidebar.tsx

@@ -1,282 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname, useRouter } from "next/navigation";
-import { useState } from "react";
-import {
-  LayoutDashboard,
-  FolderKanban,
-  Rocket,
-  Globe,
-  Activity,
-  Settings,
-  CreditCard,
-  LogOut,
-  Loader2,
-  Moon,
-  Sun,
-  PanelLeftClose,
-  PanelLeftOpen,
-  Plus,
-  Server,
-} from "lucide-react";
-import { signOut } from "@/lib/auth-client";
-import { useTheme } from "@/components/theme-provider";
-import { useI18n } from "@/components/i18n-provider";
-import { Logo } from "@/components/logo";
-import { useAuth } from "@/context/AuthContext";
-import { useGitHub } from "@/context/GitHubContext";
-import { useCloud } from "@/context/CloudContext";
-
-interface NavItem {
-  key: string;
-  href: string;
-  icon: React.ComponentType<{ className?: string; strokeWidth?: number }>;
-}
-
-interface NavSection {
-  section?: string;   // i18n key under t.dashboard.nav.sections
-  items: NavItem[];
-}
-
-const MAIN_ITEMS: NavItem[] = [
-  { key: "home",         href: "/",             icon: LayoutDashboard },
-  { key: "projects",     href: "/projects",     icon: FolderKanban },
-  { key: "deployments",  href: "/deployments",  icon: Rocket },
-];
-
-/** Build nav sections dynamically */
-function getNavSections(isSaaS: boolean, selfHosted: boolean): NavSection[] {
-  const settingsItems: NavItem[] = [
-    { key: "settings",   href: "/settings",   icon: Settings },
-  ];
-  if (isSaaS) {
-    settingsItems.push({ key: "billing", href: "/billing", icon: CreditCard });
-  }
-
-  const infraItems: NavItem[] = [];
-  if (selfHosted) {
-    infraItems.push({ key: "servers", href: "/servers", icon: Server });
-  }
-  infraItems.push(
-    { key: "monitoring", href: "/monitoring", icon: Activity },
-    { key: "domains",    href: "/domains",    icon: Globe },
-  );
-
-  return [
-    { section: "main", items: MAIN_ITEMS },
-    { section: "settings", items: settingsItems },
-    { section: "infrastructure", items: infraItems },
-  ];
-}
-
-export function Sidebar() {
-  const { user } = useAuth();
-  const { selfHosted, deployMode, authMode, machineName } = useGitHub();
-  const { connected: cloudConnected, cloudUser } = useCloud();
-  const isDesktop = deployMode === "desktop";
-
-  // On desktop, show cloud identity when connected, machine name when local
-  const displayName = isDesktop
-    ? (cloudConnected && cloudUser?.name ? cloudUser.name : (machineName || "Local User"))
-    : (user?.name || user?.email?.split("@")[0] || "");
-  const displayEmail = isDesktop
-    ? (cloudConnected && cloudUser?.email ? cloudUser.email : "Desktop")
-    : user?.email;
-  const displayInitial = displayName?.[0] ?? displayEmail?.[0] ?? "?";
-  const isSaaS = !selfHosted || cloudConnected;
-  const navSections = getNavSections(isSaaS, selfHosted);
-  const pathname = usePathname();
-  const router = useRouter();
-  const { resolvedTheme, toggle } = useTheme();
-  const { t } = useI18n();
-  const [collapsed, setCollapsed] = useState(false);
-  const [loggingOut, setLoggingOut] = useState(false);
-
-  async function handleLogout() {
-    setLoggingOut(true);
-    try {
-      if (isDesktop && (window as any).desktop?.reset) {
-        // Desktop: reset config and return to Electron onboarding
-        await (window as any).desktop.reset();
-        return;
-      }
-      await signOut();
-      router.push("/login");
-    } catch {
-      setLoggingOut(false);
-    }
-  }
-
-  const isActive = (href: string) =>
-    href === "/"
-      ? pathname === "/"
-      : pathname === href || pathname.startsWith(href + "/");
-
-  const label = (key: string) =>
-    (t.dashboard.nav as unknown as Record<string, string>)[key] ?? key;
-
-  const sectionLabel = (key: string) =>
-    (t.dashboard.nav.sections as unknown as Record<string, string>)[key] ?? key;
-
-  return (
-    <aside
-      className={`my-3 ml-3 flex shrink-0 flex-col rounded-2xl border border-border/50 bg-card transition-[width] duration-200 overflow-hidden ${
-        collapsed ? "w-[72px]" : "w-[260px]"
-      }`}
-    >
-      {/* ── Header ───────────────────────────────────────────── */}
-      <div className={`flex items-center px-5 py-6 ${collapsed ? "flex-col gap-3 pb-3" : "justify-between"}`}>
-        <div className="flex items-center gap-2.5 min-w-0">
-          <Logo size={26} className="shrink-0" />
-          {!collapsed && (
-            <span className="text-base font-semibold tracking-tight text-foreground truncate">
-              {t.brand}
-            </span>
-          )}
-        </div>
-        
-        {/* Controls */}
-        <div className={`flex items-center ${collapsed ? "flex-col gap-1" : "gap-1"}`}>
-          <button
-            onClick={toggle}
-            className="flex size-8 items-center justify-center rounded-xl text-muted-foreground transition-colors hover:bg-foreground/[0.06] hover:text-foreground"
-            aria-label={t.auth.toggleTheme}
-          >
-            {resolvedTheme === "dark" ? (
-              <Sun className="size-4" />
-            ) : (
-              <Moon className="size-4" />
-            )}
-          </button>
-          <button
-            onClick={() => setCollapsed((c) => !c)}
-            className="flex size-8 items-center justify-center rounded-xl text-muted-foreground transition-colors hover:bg-foreground/[0.06] hover:text-foreground"
-            aria-label={collapsed ? t.dashboard.sidebar.expand : t.dashboard.sidebar.collapse}
-          >
-            {collapsed ? (
-              <PanelLeftOpen className="size-4" />
-            ) : (
-              <PanelLeftClose className="size-4" />
-            )}
-          </button>
-        </div>
-      </div>
-
-      <div className="mx-3 h-px bg-border/60" />
-
-      {/* ── Nav sections ────────────────────────────────────────── */}
-      <nav className="flex-1 overflow-y-auto px-3 pt-3 pb-1">
-        {navSections.map(({ section, items }, si) => (
-          <div key={section ?? si} className={si > 0 ? "mt-5" : undefined}>
-            {!collapsed && section && (
-              <p className="mb-2 px-2 text-[11px] font-semibold uppercase tracking-widest text-muted-foreground/60">
-                {sectionLabel(section)}
-              </p>
-            )}
-            {collapsed && si > 0 && <div className="my-3 mx-2 h-px bg-border/60" />}
-            <div className="space-y-1">
-              {items.map(({ key, href, icon: Icon }) => {
-                const active = isActive(href);
-                return (
-                  <Link
-                    key={key}
-                    href={href}
-                    title={collapsed ? label(key) : undefined}
-                    className={`flex items-center rounded-xl px-3 py-2.5 text-[15px] font-medium transition-colors ${
-                      collapsed ? "justify-center" : "gap-3"
-                    } ${
-                      active
-                        ? "bg-foreground/[0.07] text-foreground"
-                        : "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground"
-                    }`}
-                  >
-                    <Icon className="size-[18px] shrink-0" strokeWidth={1.7} />
-                    {!collapsed && label(key)}
-                  </Link>
-                );
-              })}
-            </div>
-          </div>
-        ))}
-      </nav>
-
-      {/* ── New Project ─────────────────────────────────────── */}
-      <div className="px-3 pb-2">
-        <Link
-          href="/library"
-          title={collapsed ? label("new-project") : undefined}
-          className={`relative flex items-center justify-center gap-2.5 rounded-xl px-3 py-2.5 text-sm font-semibold transition-all overflow-hidden ${"bg-gradient-to-r from-violet-500/90 via-primary/90 to-blue-500/90 text-white shadow-sm shadow-primary/20 hover:shadow-md hover:shadow-primary/30 hover:brightness-110 dark:from-amber-400/90 dark:via-orange-500/90 dark:to-rose-500/90 dark:shadow-orange-500/20 dark:hover:shadow-orange-500/30"
-          }`}
-        >
-          <span className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.15),transparent_70%)]" />
-          <Plus className="relative size-4" strokeWidth={2.5} />
-          {!collapsed && <span className="relative">New Project</span>}
-        </Link>
-      </div>
-
-      {/* ── Account ──────────────────────────────────────────── */}
-      <div className="px-3 pb-4 pt-1">
-        <div className="mx-2 mb-3 h-px bg-border/60" />
-        {!collapsed && (
-          <p className="mb-2 px-2 text-[11px] font-semibold uppercase tracking-widest text-muted-foreground/60">
-            {t.dashboard.nav.sections.account}
-          </p>
-        )}
-        <div
-          className={`flex items-center rounded-xl px-2 py-2 ${
-            collapsed ? "justify-center" : "gap-3"
-          }`}
-        >
-          {/* Avatar */}
-          <div className="flex size-9 shrink-0 items-center justify-center rounded-full bg-foreground/[0.08] text-sm font-semibold uppercase text-foreground">
-            {displayInitial}
-          </div>
-
-          {!collapsed && (
-            <>
-              <div className="min-w-0 flex-1">
-                <p className="truncate text-[14px] font-medium leading-tight text-foreground">
-                  {displayName}
-                </p>
-                <p className="truncate text-[12px] leading-tight text-muted-foreground">
-                  {displayEmail}
-                </p>
-              </div>
-              <button
-                onClick={handleLogout}
-                disabled={loggingOut}
-                className="flex size-8 shrink-0 items-center justify-center rounded-xl text-muted-foreground transition-colors hover:bg-foreground/[0.06] hover:text-foreground disabled:opacity-50"
-                aria-label={isDesktop ? "Back to setup" : t.dashboard.user.logout}
-                title={isDesktop ? "Back to setup" : t.dashboard.user.logout}
-              >
-                {loggingOut ? (
-                  <Loader2 className="size-4 animate-spin" />
-                ) : (
-                  <LogOut className="size-4" />
-                )}
-              </button>
-            </>
-          )}
-        </div>
-
-        {/* Collapsed: logout button below avatar */}
-        {collapsed && (
-          <button
-            onClick={handleLogout}
-            disabled={loggingOut}
-            className="mt-2 flex w-full items-center justify-center rounded-xl py-2.5 text-muted-foreground transition-colors hover:bg-foreground/[0.06] hover:text-foreground disabled:opacity-50"
-            title={isDesktop ? "Back to setup" : t.dashboard.user.logout}
-          >
-            {loggingOut ? (
-              <Loader2 className="size-4 animate-spin" />
-            ) : (
-              <LogOut className="size-4" />
-            )}
-          </button>
-        )}
-      </div>
-    </aside>
-  );
-}
-

package/apps/dashboard/src/components/theme-provider.tsx

@@ -1,96 +0,0 @@
-"use client";
-
-import { createContext, useContext, useEffect, useState, useCallback } from "react";
-
-type Theme = "light" | "dark" | "system";
-type ResolvedTheme = "light" | "dark";
-
-interface ThemeContextValue {
-  theme: Theme;
-  resolvedTheme: ResolvedTheme;
-  setTheme: (t: Theme) => void;
-  toggle: () => void;
-}
-
-const ThemeContext = createContext<ThemeContextValue>({
-  theme: "system",
-  resolvedTheme: "dark",
-  setTheme: () => {},
-  toggle: () => {},
-});
-
-export function useTheme() {
-  return useContext(ThemeContext);
-}
-
-function resolveTheme(t: Theme): ResolvedTheme {
-  if (t === "light" || t === "dark") return t;
-  if (typeof window === "undefined") return "dark";
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-
-function applyTheme(resolved: ResolvedTheme) {
-  document.documentElement.setAttribute("data-theme", resolved);
-}
-
-export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [theme, setThemeState] = useState<Theme>("system");
-  const [resolvedTheme, setResolved] = useState<ResolvedTheme>("dark");
-
-  // Initialize from localStorage
-  useEffect(() => {
-    const stored = localStorage.getItem("theme") as Theme | null;
-    const t: Theme = stored === "light" || stored === "dark" ? stored : "system";
-    const resolved = resolveTheme(t);
-    setThemeState(t);
-    setResolved(resolved);
-    applyTheme(resolved);
-  }, []);
-
-  // Listen for OS preference changes when in system mode
-  useEffect(() => {
-    if (theme !== "system") return;
-    const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    function onChange() {
-      const r = resolveTheme("system");
-      setResolved(r);
-      applyTheme(r);
-    }
-    mq.addEventListener("change", onChange);
-    return () => mq.removeEventListener("change", onChange);
-  }, [theme]);
-
-  const setTheme = useCallback((t: Theme) => {
-    const resolved = resolveTheme(t);
-    setThemeState(t);
-    setResolved(resolved);
-    localStorage.setItem("theme", t);
-    applyTheme(resolved);
-  }, []);
-
-  const toggle = useCallback(() => {
-    setTheme(resolvedTheme === "dark" ? "light" : "dark");
-  }, [resolvedTheme, setTheme]);
-
-  return (
-    <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme, toggle }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-/** Inline script injected in <head> to set data-theme before hydration — prevents flash */
-export function ThemeScript() {
-  const script = `
-    (function(){
-      var t = localStorage.getItem('theme');
-      if (t === 'light' || t === 'dark') {
-        document.documentElement.setAttribute('data-theme', t);
-      } else {
-        document.documentElement.setAttribute('data-theme',
-          window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-      }
-    })();
-  `;
-  return <script dangerouslySetInnerHTML={{ __html: script }} />;
-}

package/apps/dashboard/src/components/toast.tsx

@@ -1,106 +0,0 @@
-"use client";
-
-import { createContext, useCallback, useContext, useState } from "react";
-
-/* ── Types ────────────────────────────────────────────────────── */
-
-type ToastType = "error" | "success" | "info";
-
-interface Toast {
-  id: string;
-  type: ToastType;
-  message: string;
-}
-
-interface ToastContextValue {
-  toast: (type: ToastType, message: string) => void;
-}
-
-const ToastContext = createContext<ToastContextValue>({
-  toast: () => {},
-});
-
-export function useToast() {
-  return useContext(ToastContext);
-}
-
-/* ── Provider ─────────────────────────────────────────────────── */
-
-const DURATION = 4500;
-
-export function ToastProvider({ children }: { children: React.ReactNode }) {
-  const [toasts, setToasts] = useState<Toast[]>([]);
-
-  const toast = useCallback((type: ToastType, message: string) => {
-    const id = crypto.randomUUID();
-    setToasts((prev) => [...prev, { id, type, message }]);
-    setTimeout(() => {
-      setToasts((prev) => prev.filter((t) => t.id !== id));
-    }, DURATION);
-  }, []);
-
-  const dismiss = useCallback((id: string) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
-
-  return (
-    <ToastContext.Provider value={{ toast }}>
-      {children}
-
-      {/* Toast container — bottom-right */}
-      {toasts.length > 0 && (
-        <div className="fixed bottom-5 right-5 z-[9999] flex flex-col gap-2">
-          {toasts.map((t) => (
-            <div
-              key={t.id}
-              role="alert"
-              onClick={() => dismiss(t.id)}
-              className={`
-                flex min-w-[280px] max-w-[380px] cursor-pointer items-start gap-3
-                rounded-lg border px-4 py-3 text-sm shadow-lg backdrop-blur-sm
-                animate-in slide-in-from-bottom-2 fade-in duration-200
-                ${typeStyles[t.type]}
-              `}
-            >
-              <span className="mt-px shrink-0">{typeIcons[t.type]}</span>
-              <span className="flex-1 leading-relaxed">{t.message}</span>
-            </div>
-          ))}
-        </div>
-      )}
-    </ToastContext.Provider>
-  );
-}
-
-/* ── Styles per type ──────────────────────────────────────────── */
-
-const typeStyles: Record<ToastType, string> = {
-  error:
-    "bg-rose-500/10 border-rose-500/20 text-rose-400",
-  success:
-    "bg-emerald-500/10 border-emerald-500/20 text-emerald-400",
-  info:
-    "th-card text-[var(--th-text-body)]",
-};
-
-const typeIcons: Record<ToastType, React.ReactNode> = {
-  error: (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <circle cx="12" cy="12" r="10" />
-      <line x1="15" y1="9" x2="9" y2="15" />
-      <line x1="9" y1="9" x2="15" y2="15" />
-    </svg>
-  ),
-  success: (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <circle cx="12" cy="12" r="10" />
-      <path d="m9 12 2 2 4-4" />
-    </svg>
-  ),
-  info: (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 16v-4M12 8h.01" />
-    </svg>
-  ),
-};

package/apps/dashboard/src/components/ui/CustomCursor.tsx

@@ -1,107 +0,0 @@
-'use client';
-
-import { useEffect, useRef, memo } from 'react';
-
-const CustomCursor = memo(() => {
-  const cursorRef = useRef<HTMLDivElement>(null);
-  const mousePosition = useRef({ x: 0, y: 0 });
-  const cursorPosition = useRef({ x: 0, y: 0 });
-  const scale = useRef(1);
-  const targetScale = useRef(1);
-  const animationFrame = useRef<number>(0);
-  const idleTimeout = useRef<NodeJS.Timeout | null>(null);
-  const isVisible = useRef(false);
-
-  useEffect(() => {
-    if(window.innerWidth < 768) return;
-    const handleMouseMove = (e: MouseEvent) => {
-      mousePosition.current = { x: e.clientX, y: e.clientY };
-
-      // Fade in if hidden
-      if (!isVisible.current) {
-        isVisible.current = true;
-        if (cursorRef.current) cursorRef.current.style.opacity = '1';
-      }
-
-      // Reset idle timer
-      if (idleTimeout.current) clearTimeout(idleTimeout.current);
-      idleTimeout.current = setTimeout(() => {
-        isVisible.current = false;
-        if (cursorRef.current) cursorRef.current.style.opacity = '0';
-      }, 2000); // hide after 2s of inactivity
-    };
-
-    const handleMouseLeave = () => {
-      // Hide immediately
-      isVisible.current = false;
-      if (cursorRef.current) cursorRef.current.style.opacity = '0';
-    };
-
-    const handleMouseEnter = () => {
-      // Fade in on re-enter
-      isVisible.current = true;
-      if (cursorRef.current) cursorRef.current.style.opacity = '1';
-    };
-
-    // Throttled hover detection
-    const checkHover = () => {
-      const element = document.elementFromPoint(
-        mousePosition.current.x,
-        mousePosition.current.y
-      ) as HTMLElement | null;
-
-      targetScale.current = element?.tagName === 'BUTTON' || element?.tagName === 'A' ? 1 : 0.5;
-
-      setTimeout(checkHover, 100);
-    };
-
-    const animate = () => {
-      // Smooth position
-      const dx = mousePosition.current.x - cursorPosition.current.x;
-      const dy = mousePosition.current.y - cursorPosition.current.y;
-      cursorPosition.current.x += dx * 0.2;
-      cursorPosition.current.y += dy * 0.2;
-
-      // Smooth scale
-      scale.current += (targetScale.current - scale.current) * 0.2;
-
-      if (cursorRef.current) {
-        cursorRef.current.style.transform = `translate(${cursorPosition.current.x - 16}px, ${cursorPosition.current.y - 16}px) scale(${scale.current})`;
-      }
-
-      animationFrame.current = requestAnimationFrame(animate);
-    };
-
-    window.addEventListener('mousemove', handleMouseMove, { passive: true });
-    window.addEventListener('mouseleave', handleMouseLeave);
-    window.addEventListener('mouseenter', handleMouseEnter);
-
-    checkHover();
-    animationFrame.current = requestAnimationFrame(animate);
-
-    return () => {
-      window.removeEventListener('mousemove', handleMouseMove);
-      window.removeEventListener('mouseleave', handleMouseLeave);
-      window.removeEventListener('mouseenter', handleMouseEnter);
-      if (animationFrame.current) cancelAnimationFrame(animationFrame.current);
-      if (idleTimeout.current) clearTimeout(idleTimeout.current);
-    };
-  }, []);
-
-  return (
-    <div
-      ref={cursorRef}
-      className="fixed w-8 h-8 bg-white rounded-full pointer-events-none z-[9999] mix-blend-difference will-change-transform transition-opacity duration-200"
-      style={{ opacity: 0 }} // start hidden
-    />
-  );
-});
-
-// CustomCursor.displayName = 'CustomCursor';
-
-const CustomCursorTwo = () => {
-  return (<></>)
-}
-
-export default CustomCursorTwo;
-// export default CustomCursor;