openship 0.1.0 → 0.1.1

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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,282 @@
+"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

@@ -0,0 +1,96 @@
+"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

@@ -0,0 +1,106 @@
+"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

@@ -0,0 +1,107 @@
+'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;