openship 0.1.1 → 0.1.7

package/apps/web/src/components/landing/coming-soon.tsx

@@ -1,180 +0,0 @@
-/* ── Coming soon — advanced infra from the dashboard ── */
-
-const ROADMAP = [
-  {
-    icon: (
-      <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0012 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 01-2.031.352 5.988 5.988 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 01-2.031.352 5.989 5.989 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971z" />
-      </svg>
-    ),
-    title: "Load balancer setup",
-    desc: "Visual load balancer configuration right from the app. Route traffic across containers with weighted rules, health checks, and sticky sessions — no HAProxy or NGINX configs.",
-    tag: "Infrastructure",
-    color: "var(--th-clr-plum)",
-    bg: "var(--th-clr-plum-bg)",
-    blob: "var(--th-clr-plum-blob)",
-  },
-  {
-    icon: (
-      <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25" />
-      </svg>
-    ),
-    title: "Cluster management",
-    desc: "Create and manage multi-node clusters from one screen. Add worker nodes, distribute services, view cluster health — all through the app. Scale horizontally in seconds.",
-    tag: "Scaling",
-    color: "var(--th-clr-sea)",
-    bg: "var(--th-clr-sea-bg)",
-    blob: "var(--th-clr-sea-blob)",
-  },
-  {
-    icon: (
-      <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-3.811a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
-      </svg>
-    ),
-    title: "Private networking",
-    desc: "Encrypted service-to-service communication with visual network topology. Define VLANs, private subnets, and firewall rules between containers — all from a drag-and-drop interface.",
-    tag: "Networking",
-    color: "var(--th-clr-terra)",
-    bg: "var(--th-clr-terra-bg)",
-    blob: "var(--th-clr-terra-blob)",
-  },
-  {
-    icon: (
-      <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6" />
-      </svg>
-    ),
-    title: "Advanced monitoring",
-    desc: "Custom metric dashboards, alerting rules, anomaly detection powered by AI. Set thresholds, get notified on Slack/Discord/email before problems become outages.",
-    tag: "Observability",
-    color: "var(--th-clr-plum)",
-    bg: "var(--th-clr-plum-bg)",
-    blob: "var(--th-clr-plum-blob)",
-  },
-  {
-    icon: (
-      <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
-      </svg>
-    ),
-    title: "CI/CD pipelines",
-    desc: "Visual pipeline builder inside the app. Drag-and-drop build stages, run tests, deploy to staging then production — with automatic rollback on failure.",
-    tag: "DevOps",
-    color: "var(--th-clr-sea)",
-    bg: "var(--th-clr-sea-bg)",
-    blob: "var(--th-clr-sea-blob)",
-  },
-  {
-    icon: (
-      <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
-      </svg>
-    ),
-    title: "Secrets & vault",
-    desc: "Encrypted secrets manager with team-scoped access controls, audit logs, and automatic rotation. Environment variables, API keys, and certificates — all in one secure vault.",
-    tag: "Security",
-    color: "var(--th-clr-terra)",
-    bg: "var(--th-clr-terra-bg)",
-    blob: "var(--th-clr-terra-blob)",
-  },
-];
-
-export function ComingSoon() {
-  return (
-    <section className="relative py-28 sm:py-36">
-      <div className="section-divider mx-auto mb-28 max-w-4xl sm:mb-36" />
-
-      <div className="mx-auto max-w-7xl px-6">
-        {/* ── Header ── */}
-        <div className="mx-auto max-w-3xl text-center">
-          <div className="mb-7 inline-flex items-center gap-2 rounded-full border border-[var(--th-on-06)] bg-white/60 px-4 py-1.5 shadow-[0_1px_3px_rgba(0,0,0,.04)] backdrop-blur-sm">
-            <span className="relative flex h-2 w-2">
-              <span className="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75" style={{ background: "var(--th-clr-plum-soft)" }} />
-              <span className="relative inline-flex h-2 w-2 rounded-full" style={{ background: "var(--th-clr-plum)" }} />
-            </span>
-            <span className="text-[12px] font-medium tracking-[0.02em] th-text-secondary">
-              Coming Soon
-            </span>
-          </div>
-          <h2>
-            <span className="block text-[clamp(2.75rem,6vw,4.75rem)] font-semibold leading-[1.06] tracking-[-0.035em] th-text-heading">
-              Enterprise-grade infra.
-            </span>
-            <span
-              className="block text-[clamp(2.75rem,6vw,4.75rem)] font-semibold leading-[1.06] tracking-[-0.035em]"
-              style={{ color: "var(--th-on-40)" }}
-            >
-              All from the app.
-            </span>
-          </h2>
-          <p className="mx-auto mt-6 max-w-xl text-[17px] leading-[1.65] th-text-body">
-            We&apos;re building the tools teams actually need for real scale —
-            load balancers, clusters, private networking, and advanced monitoring.
-            All managed visually in the app, no infrastructure degree required.
-          </p>
-        </div>
-
-        {/* ── Feature cards ── */}
-        <div className="mx-auto mt-16 grid max-w-6xl gap-5 sm:grid-cols-2 lg:grid-cols-3">
-          {ROADMAP.map((item) => (
-            <div
-              key={item.title}
-              className="group relative overflow-hidden rounded-2xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] p-7 shadow-[var(--th-card-shadow)] transition-colors hover:border-[var(--th-card-bd-hover)]"
-            >
-              {/* Ambient blob */}
-              <div
-                className="pointer-events-none absolute -right-12 -top-12 h-[160px] w-[160px] rounded-full blur-[60px] transition-opacity duration-300 group-hover:opacity-100 opacity-60"
-                style={{ background: item.blob }}
-              />
-
-              <div className="relative">
-                {/* Icon + tag */}
-                <div className="mb-5 flex items-center justify-between">
-                  <div
-                    className="flex h-12 w-12 items-center justify-center rounded-xl"
-                    style={{ background: item.bg, color: item.color }}
-                  >
-                    {item.icon}
-                  </div>
-                  <span
-                    className="rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-[0.08em]"
-                    style={{ background: item.bg, color: item.color }}
-                  >
-                    {item.tag}
-                  </span>
-                </div>
-
-                <h3 className="text-[18px] font-bold leading-tight tracking-tight th-text-heading">
-                  {item.title}
-                </h3>
-                <p className="mt-2.5 text-[13px] leading-[1.65] th-text-body">
-                  {item.desc}
-                </p>
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* ── Bottom ribbon ── */}
-        <div className="mx-auto mt-12 max-w-3xl text-center">
-          <div className="inline-flex items-center gap-3 rounded-2xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] px-6 py-4 shadow-[var(--th-card-shadow)]">
-            <div className="flex h-9 w-9 items-center justify-center rounded-lg" style={{ background: "var(--th-clr-sea-bg)", color: "var(--th-clr-sea)" }}>
-              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
-              </svg>
-            </div>
-            <div className="text-left">
-              <p className="text-[14px] font-semibold th-text-heading">Want early access?</p>
-              <p className="text-[12px] th-text-muted">Join the waitlist — these ship quarterly.</p>
-            </div>
-            <a href="https://app.openship.io" className="ml-3 th-btn rounded-full px-5 py-2 text-[13px] font-medium">
-              Notify me
-            </a>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}

package/apps/web/src/components/landing/dark-section.tsx

@@ -1,166 +0,0 @@
-"use client";
-
-import { useEffect, useRef } from "react";
-import gsap from "gsap";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
-
-gsap.registerPlugin(ScrollTrigger);
-
-/**
- * Full-width dark container with scroll-linked scale animation.
- * Faithful GSAP port of the dashboard's framer-motion DarkSection.
- *
- * Behavior (desktop only — mobile is flat, no animation):
- *  - Enter: scale 0.88→1, opacity 0.7→1, y 50→0
- *    Scale uses [0, 0.7] mapping — finishes early = fast zoom at end
- *    Opacity uses [0, 0.3] mapping — fades in quickly at start
- *  - Exit: scale 1→0.88, opacity 1→0.7
- *    Scale over full range, opacity in last 30%
- *  - Math.min(enter, exit) combines both — identical to framer MotionValue
- *  - marginBottom compensates for scale shrinkage (via ResizeObserver)
- *
- * Performance:
- *  - Zero React re-renders — all values are DOM mutations in onUpdate
- *  - Single apply() function for all properties — no tween fighting
- *  - willChange conditional (auto on mobile, transform/opacity on desktop)
- *  - ResizeObserver tracks height via ref, not state
- */
-export function DarkSection({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const outerRef = useRef<HTMLDivElement>(null);
-  const innerRef = useRef<HTMLDivElement>(null);
-  const heightRef = useRef(0);
-
-  useEffect(() => {
-    const outer = outerRef.current;
-    const inner = innerRef.current;
-    if (!outer || !inner) return;
-
-    /* ── Track height for margin compensation (no re-renders) ── */
-    const ro = new ResizeObserver(([e]) => {
-      heightRef.current = e.contentRect.height;
-    });
-    ro.observe(inner);
-
-    /* ── Mobile: skip scale animation entirely ── */
-    const mq = window.matchMedia("(max-width: 768px)");
-    if (mq.matches) {
-      inner.style.borderRadius = "0";
-      outer.style.willChange = "auto";
-      inner.style.willChange = "auto";
-      ro.disconnect();
-      return;
-    }
-
-    /* ── Desktop: set initial state (prevents flash) ── */
-    inner.style.transform = "scale(0.88)";
-    inner.style.transformOrigin = "top center";
-    outer.style.opacity = "0.7";
-    outer.style.marginTop = "-1rem";
-    outer.style.willChange = "transform, opacity";
-    inner.style.willChange = "transform";
-
-    /* ── Mutable animation values (closure, no state) ── */
-    let scaleIn = 0.88;
-    let scaleOut = 1;
-    let opacityIn = 0.7;
-    let opacityOut = 1;
-    let yIn = 50;
-
-    /** Single apply function — mirrors framer's combined MotionValues.
-     *  Math.min picks the smaller of enter/exit at any scroll position. */
-    const apply = () => {
-      const s = Math.min(scaleIn, scaleOut);
-      const o = Math.min(opacityIn, opacityOut);
-      inner.style.transform = `scale(${s})`;
-      outer.style.opacity = String(o);
-      outer.style.transform = `translateY(${yIn}px)`;
-      outer.style.marginBottom = `${-(heightRef.current * (1 - s))}px`;
-    };
-
-    let ctx: gsap.Context | undefined;
-
-    try {
-      ctx = gsap.context(() => {
-        /* ── Enter phase: element top from viewport bottom → top ── */
-        ScrollTrigger.create({
-          trigger: outer,
-          start: "top bottom",
-          end: "top top",
-          onUpdate: (self) => {
-            const p = self.progress; // 0 → 1
-
-            // Scale: [0, 0.7] → [0.88, 1]  (fast — finishes at 70%)
-            scaleIn = p < 0.7 ? 0.88 + (p / 0.7) * 0.12 : 1;
-
-            // Opacity: [0, 0.3] → [0.7, 1]  (fast — finishes at 30%)
-            opacityIn = p < 0.3 ? 0.7 + (p / 0.3) * 0.3 : 1;
-
-            // Y: [0, 1] → [50, 0]  (full range parallax)
-            yIn = 50 * (1 - p);
-
-            apply();
-          },
-        });
-
-        /* ── Exit phase: element bottom from viewport bottom → top ── */
-        ScrollTrigger.create({
-          trigger: outer,
-          start: "bottom bottom",
-          end: "bottom top",
-          onUpdate: (self) => {
-            const p = self.progress; // 0 → 1
-
-            // Scale: [0, 1] → [1, 0.88]  (full range)
-            scaleOut = 1 - p * 0.12;
-
-            // Opacity: [0.7, 1] → [1, 0.7]  (last 30% only)
-            opacityOut = p < 0.7 ? 1 : 1 - ((p - 0.7) / 0.3) * 0.3;
-
-            apply();
-          },
-        });
-      }, outer);
-
-      ScrollTrigger.refresh();
-    } catch {
-      /* Fallback: show at full scale */
-      inner.style.transform = "scale(1)";
-      outer.style.opacity = "1";
-      outer.style.transform = "translateY(0)";
-      outer.style.marginBottom = "0";
-    }
-
-    return () => {
-      ro.disconnect();
-      ctx?.revert();
-      outer.style.marginBottom = "0";
-      outer.style.transform = "";
-      outer.style.opacity = "";
-      outer.style.willChange = "";
-      inner.style.transform = "";
-      inner.style.willChange = "";
-    };
-  }, []);
-
-  return (
-    <div
-      ref={outerRef}
-      className="dark-section"
-    >
-      <div
-        ref={innerRef}
-        className="dark-section__inner"
-        data-section="dark"
-      >
-        {/* Top edge glow line */}
-        <div className="dark-section__edge-glow" aria-hidden="true" />
-
-        {children}
-      </div>
-    </div>
-  );
-}