@naeil/ui 0.1.0

package/src/components/hero-section.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useRef, useState, useEffect } from "react";
+import { HeroScene } from "@/components/hero-scene";
+import { ParagliderCursor } from "@/components/paraglider-cursor";
+
+export function HeroSection() {
+  const heroRef = useRef<HTMLElement>(null);
+  const [inView, setInView] = useState(true);
+
+  useEffect(() => {
+    const el = heroRef.current;
+    if (!el || typeof IntersectionObserver === "undefined") return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => setInView(entry.isIntersecting),
+      { rootMargin: "200px 0px", threshold: 0 },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <section
+      ref={heroRef}
+      className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-6"
+    >
+      {/* 3D Scene — background */}
+      <div className="pointer-events-none absolute inset-0 flex items-center justify-center opacity-60">
+        <HeroScene active={inView} />
+      </div>
+
+      {/* Paraglider follows mouse — desktop only */}
+      <div className="hidden md:block">
+        <ParagliderCursor containerRef={heroRef} />
+      </div>
+
+      {/* Scroll hint */}
+      <div className="absolute bottom-8 left-1/2 z-10 -translate-x-1/2 animate-bounce">
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="text-muted-foreground/50"
+        >
+          <path d="M7 13l5 5 5-5" />
+          <path d="M7 6l5 5 5-5" />
+        </svg>
+      </div>
+    </section>
+  );
+}

package/src/components/locale-switcher.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "./ui/dropdown-menu";
+
+interface LocaleSwitcherProps {
+  /** Available locales */
+  locales: Array<{ code: string; short: string; full: string }>;
+  /** Current locale */
+  currentLocale: string;
+  /** Called when user selects a new locale */
+  onLocaleChange: (locale: string) => void;
+}
+
+export function LocaleSwitcher({
+  locales,
+  currentLocale,
+  onLocaleChange,
+}: LocaleSwitcherProps) {
+  const current = locales.find((l) => l.code === currentLocale);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          className="text-muted-foreground hover:text-foreground flex items-center gap-1.5 text-sm transition-colors focus:outline-none"
+          aria-label={`Change language — current: ${current?.short ?? currentLocale}`}
+        >
+          <GlobeIcon />
+          {current?.short ?? currentLocale.toUpperCase()}
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-[120px]">
+        {locales.map((l) => (
+          <DropdownMenuItem
+            key={l.code}
+            onClick={() => onLocaleChange(l.code)}
+            className={l.code === currentLocale ? "font-medium" : ""}
+          >
+            <span className="text-muted-foreground mr-2 w-5 text-xs">
+              {l.short}
+            </span>
+            {l.full}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function GlobeIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+      <path d="M2 12h20" />
+    </svg>
+  );
+}

package/src/components/logo.tsx

@@ -0,0 +1,51 @@
+export function Logo({
+  size = 20,
+  mono = false,
+  className,
+}: {
+  size?: number;
+  mono?: boolean;
+  className?: string;
+}) {
+  const id = `naeil-logo-${size}`;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-label="naeil"
+      className={className}
+    >
+      <path
+        d="M6 4 L6 16 L20 16"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="square"
+        strokeLinejoin="miter"
+      />
+      {mono ? (
+        <circle cx="15" cy="16" r="3.5" fill="currentColor" mask={`url(#${id})`} />
+      ) : (
+        <circle cx="15" cy="16" r="3.5" fill={`url(#${id}-grad)`} mask={`url(#${id})`} />
+      )}
+      <defs>
+        {!mono && (
+          <linearGradient
+            id={`${id}-grad`}
+            x1="15"
+            y1="12.5"
+            x2="15"
+            y2="16"
+          >
+            <stop stopColor="#eab308" />
+            <stop offset="1" stopColor="#dc2626" />
+          </linearGradient>
+        )}
+        <mask id={id}>
+          <rect x="0" y="0" width="24" height="16" fill="white" />
+        </mask>
+      </defs>
+    </svg>
+  );
+}

package/src/components/nav-server-wrapper.tsx

@@ -0,0 +1,22 @@
+import { createClient } from "@/lib/supabase/server";
+import { NavWrapper } from "./nav-wrapper";
+
+export async function NavServerWrapper() {
+  const supabase = await createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  const authUser = user
+    ? {
+        id: user.id,
+        name:
+          (user.user_metadata?.full_name as string) ||
+          (user.user_metadata?.name as string) ||
+          undefined,
+        email: user.email,
+      }
+    : null;
+
+  return <NavWrapper user={authUser} />;
+}

package/src/components/nav-wrapper.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { Nav } from "./nav";
+import { ThemeToggleIcon } from "./theme-toggle-icon";
+import { LocaleSwitcher } from "./locale-switcher";
+import { AuthSlot } from "./auth-slot";
+import { Link, usePathname, useRouter } from "@/i18n/routing";
+import { useLocale } from "next-intl";
+import { type Locale } from "@/i18n/config";
+
+const LOCALE_LIST = [
+  { code: "en", short: "EN", full: "English" },
+  { code: "ko", short: "KO", full: "한국어" },
+  { code: "ja", short: "JA", full: "日本語" },
+];
+
+interface NavWrapperProps {
+  user: { id: string; name?: string; email?: string } | null;
+}
+
+export function NavWrapper({ user }: NavWrapperProps) {
+  const pathname = usePathname();
+  const locale = useLocale();
+  const router = useRouter();
+
+  return (
+    <Nav
+      Link={Link}
+      usePathname={() => pathname}
+      showBlog={true}
+      toolbarSlot={
+        <>
+          <ThemeToggleIcon />
+          <LocaleSwitcher
+            locales={LOCALE_LIST}
+            currentLocale={locale}
+            onLocaleChange={(l) => router.replace(pathname, { locale: l as Locale })}
+          />
+          <div className="h-4 w-px bg-border/40" />
+          <AuthSlot user={user} />
+        </>
+      }
+    />
+  );
+}