50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T7f93,"use client"; import * as React from "react"; import { motion, useReducedMotion } from "framer-motion"; import { ArrowUpRight, Building2, Github, Linkedin, Mail, MapPin, MessageCircle, Send, } from "lucide-react"; import { NexusMark } from "@/components/brand/nexus-mark"; import { cn } from "@/lib/utils"; export function ContactPageBlock({ className }: { className?: string }) { return (

); } export default ContactPageBlock; export function GlobalSignalContact({ className }: { className?: string }) { return (

Global studio

Let's shape the next interface.

Send your product brief, launch notes, or messy idea. The Nexus-ui team will turn it into a clean direction for your next build.

hello@nexus-ui.com / +91 98765 43210 / support in 24 hours

); } export function CenteredContactForm({ className }: { className?: string }) { return (

Nexus-ui

contact desk

{[Github, Linkedin, MessageCircle].map((Icon, index) => ( ))}

); } export function GradientProofContact({ className }: { className?: string }) { return (

“

Nexus-ui helped us turn a vague redesign into a launchable system. The contact flow alone doubled qualified demo notes in a week.

Ira Kapoor

Growth Lead, OrbitStack

); } export function ImageStoryContact({ className }: { className?: string }) { return (

“Our launch page finally feels like the product: fast, composed, and unmistakably ours.”

Sana Noor

Founder, Meadow AI

Nexus-ui

contact studio

); } export function ContactPageBlockPreview() { return (

); } function ContactForm({ eyebrow, title, description, buttonLabel, roundedButton = false, dense = false, className, }: { eyebrow: string; title: string; description: string; buttonLabel: string; roundedButton?: boolean; dense?: boolean; className?: string; }) { const [fields, setFields] = React.useState({ name: "", email: "", company: "", message: "" }); const [status, setStatus] = React.useState<"idle" | "loading" | "success" | "error">("idle"); const [errorMsg, setErrorMsg] = React.useState(""); function handleChange(e: React.ChangeEvent) { setFields((prev) => ({ ...prev, [e.target.name]: e.target.value })); } async function handleSubmit(e: React.FormEvent) { e.preventDefault(); setStatus("loading"); setErrorMsg(""); try { const res = await fetch("/api/contact", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(fields), }); const data = await res.json() as { success?: boolean; error?: string }; if (!res.ok) { setErrorMsg(data.error ?? "Something went wrong."); setStatus("error"); } else { setStatus("success"); setFields({ name: "", email: "", company: "", message: "" }); } } catch { setErrorMsg("Network error. Please try again."); setStatus("error"); } } if (status === "success") { return (

Message sent

We'll get back to you within 24 hours.

); } const fieldKeys = [ { key: "name" as const, label: "Name", placeholder: "Maya Srinivasan", type: "text" }, { key: "email" as const, label: "Work email", placeholder: "maya@northstar.dev", type: "email" }, { key: "company" as const, label: "Company", placeholder: "Northstar Labs", type: "text" }, ]; return (

{eyebrow}

{title}

{description}

{fieldKeys.map((field) => ( {field.label} ))} Message

</label>
      </div>

{status === "error" && (
        <p className="mt-3 text-sm font-medium text-red-600 dark:text-red-400">{errorMsg}</p>
      )}

<motion.button
        type="submit"
        disabled={status === "loading"}
        whileHover={status !== "loading" ? { y: -2 } : undefined}
        whileTap={status !== "loading" ? { scale: 0.98 } : undefined}
        className={cn(
          "inline-flex h-12 w-full items-center justify-center gap-2 bg-zinc-950 px-6 text-sm font-semibold text-white shadow-lg shadow-zinc-950/15 transition hover:bg-zinc-800 disabled:cursor-not-allowed disabled:opacity-70 dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200 sm:w-auto",
          dense ? "mt-4" : "mt-7",
          roundedButton ? "sm:w-full rounded-full" : "rounded-xl",
        )}
      >
        {status === "loading" ? (
          <>
            <svg className="size-4 animate-spin" viewBox="0 0 24 24" fill="none">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
            </svg>
            Sending…
          </>
        ) : (
          <>
            {buttonLabel}
            <Send className="size-4" />
          </>
        )}
      </motion.button>
    </form>
  );
}

return (
    <div className={cn("relative w-full", compact ? "h-24" : "mt-10 h-72 sm:mt-12 sm:h-[30rem]")}>
      <WorldAtlasCanvas compact={compact} />
      <svg
        viewBox="0 0 760 280"
        className="absolute inset-0 h-full w-full"
        role="img"
        aria-label="World map marker pointing to India"
      >
        <defs>
          <linearGradient id="contact-line-gradient" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#dbeafe" stopOpacity="0.18" />
            <stop offset="16%" stopColor="#bfdbfe" stopOpacity="0.95" />
            <stop offset="62%" stopColor="#60a5fa" stopOpacity="1" />
            <stop offset="100%" stopColor="#2563eb" stopOpacity="0.92" />
          </linearGradient>
          <linearGradient id="contact-beam-core" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#eff6ff" stopOpacity="0" />
            <stop offset="12%" stopColor="#bfdbfe" stopOpacity="0.72" />
            <stop offset="70%" stopColor="#60a5fa" stopOpacity="0.64" />
            <stop offset="100%" stopColor="#38bdf8" stopOpacity="0.22" />
          </linearGradient>
          <radialGradient id="contact-label-glow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#93c5fd" stopOpacity="0.45" />
            <stop offset="58%" stopColor="#60a5fa" stopOpacity="0.16" />
            <stop offset="100%" stopColor="#60a5fa" stopOpacity="0" />
          </radialGradient>
          <radialGradient id="contact-pulse-gradient">
            <stop offset="0%" stopColor="#7dd3fc" stopOpacity="0.42" />
            <stop offset="56%" stopColor="#60a5fa" stopOpacity="0.16" />
            <stop offset="100%" stopColor="#60a5fa" stopOpacity="0" />
          </radialGradient>
          <filter id="contact-blue-glow" x="-80%" y="-80%" width="260%" height="260%">
            <feGaussianBlur stdDeviation="6" result="blur" />
            <feColorMatrix
              in="blur"
              type="matrix"
              values="0 0 0 0 0.1 0 0 0 0 0.46 0 0 0 0 1 0 0 0 0.75 0"
            />
            <feMerge>
              <feMergeNode />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
        </defs>

{[0, 0.85].map((delay, index) => (
          <motion.circle
            key={index}
            cx={marker.x}
            cy={impactY}
            r={compact ? 2.6 : 4}
            fill="none"
            stroke="url(#contact-pulse-gradient)"
            strokeWidth={compact ? 5 : 10}
            initial={{ scaleX: 0.18, scaleY: 0.08, opacity: 0.9 }}
            animate={{ scaleX: compact ? 9 : 18, scaleY: compact ? 2.8 : 4.8, opacity: 0 }}
            transition={{ duration: 2.15, repeat: Infinity, delay, ease: "easeOut" }}
            style={{ transformOrigin: `${marker.x}px ${impactY}px` }}
          />
        ))}
        <circle cx={marker.x} cy={impactY} r={compact ? 6 : 11} fill="#60a5fa" opacity="0.13" />
        <circle cx={marker.x} cy={impactY} r={compact ? 2 : 3.5} fill="#3b82f6" filter="url(#contact-blue-glow)" />
      </svg>
    </div>
  );
}

type GeoRing = Array<readonly [number, number]>;
type GeoPolygon = GeoRing[];

let atlasCache: GeoPolygon[] | null = null;
let atlasPromise: Promise<GeoPolygon[]> | null = null;

async function loadAtlasPolygons() {
  if (atlasCache) return atlasCache;
  if (atlasPromise) return atlasPromise;

atlasPromise = fetch("https://cdn.jsdelivr.net/npm/world-atlas@2/land-110m.json")
    .then((response) => response.json())
    .then(async (topo) => {
      const topojson = (await import("topojson-client")) as {
        feature: (topology: unknown, object: unknown) => {
          features?: Array<{
            geometry?: {
              type?: string;
              coordinates?: number[][][] | number[][][][];
            };
          }>;
        };
      };
      const land = topojson.feature(topo, topo.objects.land);
      const polygons: GeoPolygon[] = [];

for (const item of land.features ?? []) {
        const geometry = item.geometry;
        if (!geometry?.coordinates) continue;

if (geometry.type === "Polygon") {
          polygons.push(geometry.coordinates as unknown as GeoPolygon);
        }

if (geometry.type === "MultiPolygon") {
          polygons.push(...(geometry.coordinates as unknown as GeoPolygon[]));
        }
      }

atlasCache = polygons;
      return polygons;
    })
    .catch(() => []);

return atlasPromise;
}

function WorldAtlasCanvas({ compact }: { compact: boolean }) {
  const canvasRef = React.useRef<HTMLCanvasElement>(null);
  const wrapperRef = React.useRef<HTMLDivElement>(null);

React.useEffect(() => {
    let cancelled = false;
    let resizeObserver: ResizeObserver | null = null;

async function draw() {
      const canvas = canvasRef.current;
      const wrapper = wrapperRef.current;
      if (!canvas || !wrapper) return;

const polygons = await loadAtlasPolygons();
      if (cancelled) return;

const width = wrapper.clientWidth;
      const height = wrapper.clientHeight;
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      canvas.width = Math.max(1, Math.floor(width * dpr));
      canvas.height = Math.max(1, Math.floor(height * dpr));
      canvas.style.width = `${width}px`;
      canvas.style.height = `${height}px`;

const ctx = canvas.getContext("2d");
      if (!ctx) return;

ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      ctx.clearRect(0, 0, width, height);
      ctx.fillStyle = getComputedStyle(wrapper).getPropertyValue("--contact-map-fill").trim();
      ctx.strokeStyle = getComputedStyle(wrapper).getPropertyValue("--contact-map-edge").trim();

const mapWidth = width * (compact ? 1.1 : 1.04);
      const mapHeight = height * (compact ? 0.84 : 0.76);
      const offsetX = (width - mapWidth) / 2;
      const offsetY = height * (compact ? 0.13 : 0.16);

function project(lon: number, lat: number) {
        return {
          x: offsetX + ((lon + 180) / 360) * mapWidth,
          y: offsetY + ((90 - lat) / 180) * mapHeight,
        };
      }

ctx.save();
      ctx.globalAlpha = compact ? 0.72 : 0.96;
      for (const polygon of polygons) {
        ctx.beginPath();
        polygon.forEach((ring) => {
          let previousPoint: { x: number; y: number } | null = null;

ring.forEach(([lon, lat], index) => {
            const point = project(lon, lat);
            const shouldBreak =
              previousPoint && Math.abs(point.x - previousPoint.x) > mapWidth * 0.45;

if (index === 0 || shouldBreak) ctx.moveTo(point.x, point.y);
            else ctx.lineTo(point.x, point.y);

previousPoint = point;
          });
          ctx.closePath();
        });
        ctx.fill("evenodd");
      }
      ctx.restore();
    }

draw();
    if (wrapperRef.current) {
      resizeObserver = new ResizeObserver(() => {
        void draw();
      });
      resizeObserver.observe(wrapperRef.current);
    }

return () => {
      cancelled = true;
      resizeObserver?.disconnect();
    };
  }, [compact]);

return (
    <div
      ref={wrapperRef}
      className="absolute inset-0 [--contact-map-edge:transparent] [--contact-map-fill:rgba(82,82,91,0.34)] dark:[--contact-map-edge:transparent] dark:[--contact-map-fill:rgba(255,255,255,0.18)]"
    >
      <canvas ref={canvasRef} className="h-full w-full" />
      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-white via-white/40 to-transparent dark:from-zinc-950 dark:via-zinc-950/35" />
    </div>
  );
}

function AnimatedShell({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) {
  const reduce = useReducedMotion() === true;

return (
    <motion.section
      initial={reduce ? false : { opacity: 0, y: 24 }}
      whileInView={reduce ? undefined : { opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-100px" }}
      transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
      className={className}
    >
      {children}
    </motion.section>
  );
}

export function ContactMiniMetric() {
  return (
    <div className="grid gap-3 sm:grid-cols-3">
      {[
        { icon: Building2, value: "4", label: "ready contact layouts" },
        { icon: MapPin, value: "India", label: "animated office marker" },
        { icon: ArrowUpRight, value: "100%", label: "responsive containers" },
      ].map((item) => {
        const Icon = item.icon;

return (
          <div
            key={item.label}
            className="rounded-2xl border border-zinc-200 bg-white p-4 dark:border-white/10 dark:bg-white/5"
          >
            <Icon className="size-4 text-sky-500" />
            <p className="mt-4 text-2xl font-semibold text-zinc-950 dark:text-white">{item.value}</p>
            <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{item.label}</p>
          </div>
        );
      })}
    </div>
  );
}
53:T6bd,import * as React from "react";
import { cn } from "@/lib/utils";

export type NexusMarkProps = {
  /** Pixel size of the SVG. The artwork is drawn on a 64×64 viewBox. */
  size?: number;
  /** Color of nodes + lines. Defaults to `currentColor` so it adapts to dark/light. */
  color?: string;
  /** Color of the converging nexus core. */
  accent?: string;
  /** If true, exposes the mark to assistive tech with the given label. */
  title?: string;
  className?: string;
};

/**
 * Nexus mark — Converge direction.
 *
 * Three outer nodes (top, lower-left, lower-right) meet at a luminous accent
 * core via three converging strokes. The artwork is intentionally pixel-aligned
 * to the 64×64 grid so it stays crisp at 16/24/32/48/64 px.
 */
export function NexusMark({
  size = 28,
  color = "currentColor",
  accent = "oklch(0.72 0.18 250)",
  title,
  className,
}: NexusMarkProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 64 64"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      role={title ? "img" : "presentation"}
      aria-label={title}
      aria-hidden={title ? undefined : true}
      className={cn("block shrink-0", className)}
    >
      <circle cx="32" cy="6" r="3" fill={color} />
      <circle cx="6" cy="50" r="3" fill={color} />
      <circle cx="58" cy="50" r="3" fill={color} />

<circle cx="32" cy="32" r="5" fill={accent} />
      <circle
        cx="32"
        cy="32"
        r="5"
        fill="none"
        stroke={color}
        strokeWidth="1.25"
      />
    </svg>
  );
}
4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react"}]]}]}],["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","topojson-client",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/topojson-client","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"topojson-client"}]]}]}]]}],["$","$L50",null,{"namespace":"@nexus-labs","registryDependencies":["https://www.nexus-ui.com/api/registry/nexus-font","utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"next-ui/blocks/contact-page.tsx","content":"$52","type":"registry:component","target":"components/blocks/contact-page.tsx"},{"path":"next-ui/brand/nexus-mark.tsx","content":"$53","type":"registry:component","target":"components/brand/nexus-mark.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>