feat: visual redesign

.phase.json

@@ -0,0 +1,8 @@
+{
+  "version": "2",
+  "phaseApp": "Satcom",
+  "appId": "b9fb7a0d-534f-4e46-aa0f-c619a651477e",
+  "defaultEnv": "Development",
+  "envId": "88e733de-3126-4602-8089-5fd019a2b798",
+  "monorepoSupport": false
+}

package.json

@@ -32,6 +32,7 @@
     "next": "14.2.1",
     "next-seo": "^6.0.0",
     "next-sitemap": "^4.2.3",
+    "ogl": "^1.0.11",
     "postcss": "^8.4.31",
     "postcss-focus-visible": "^6.0.4",
     "posthog-js": "^1.392.0",

src/components/AboutPhase.jsx

@@ -36,10 +36,10 @@ export function About() {
       <Heading level={2} id="guides">
         About Phase
       </Heading>
-      <div className="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-zinc-900/10 pt-10 dark:border-white/5 sm:grid-cols-2 xl:grid-cols-4">
+      <div className="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-zinc-200 pt-10 dark:border-zinc-800 sm:grid-cols-2 xl:grid-cols-4">
         {resources.map((resource) => (
           <div key={resource.href}>
-            <h3 className="text-sm font-semibold text-zinc-900 dark:text-white">
+            <h3 className="text-sm font-medium tracking-[-0.01em] text-zinc-900 dark:text-zinc-100">
               {resource.name}
             </h3>
             <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">

src/components/Button.jsx

@@ -14,16 +14,21 @@ function ArrowIcon(props) {
   )
 }
 
+// The emerald CTA pill is identical in both modes (no dark: variants needed).
+// h-8 pins every pill to 32px — matching the header Sign in / Launch Console
+// and the search trigger, so there is one button height across the site. All
+// pills are mono uppercase; the emerald fill is the primary's emphasis.
+const emeraldPill =
+  'h-8 gap-2 whitespace-nowrap rounded-full bg-emerald-500 px-4 font-mono text-xs font-medium uppercase tracking-[0.08em] text-zinc-950 hover:bg-emerald-400 hover:text-zinc-950 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-400'
+
 const variantStyles = {
-  primary:
-    'rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-1 dark:ring-inset dark:ring-emerald-400/20 dark:hover:bg-emerald-400/10 dark:hover:text-emerald-300 dark:hover:ring-emerald-300',
+  primary: emeraldPill,
+  filled: emeraldPill,
   secondary:
-    'rounded-full bg-zinc-100 py-1 px-3 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800/40 dark:text-zinc-400 dark:ring-1 dark:ring-inset dark:ring-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300',
-  filled:
-    'rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-emerald-500 dark:text-white dark:hover:bg-emerald-400',
+    'h-8 gap-2 whitespace-nowrap rounded-full bg-zinc-100 px-4 font-mono text-xs font-medium uppercase tracking-[0.08em] text-zinc-700 ring-1 ring-inset ring-zinc-200 hover:bg-zinc-200 hover:text-zinc-900 focus-visible:outline focus-visible:outline-1 focus-visible:outline-zinc-400 dark:bg-zinc-900 dark:text-zinc-300 dark:ring-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-100',
   outline:
-    'rounded-full py-1 px-3 text-zinc-700 ring-1 ring-inset ring-zinc-900/10 hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:ring-white/10 dark:hover:bg-white/5 dark:hover:text-white',
-  text: 'text-emerald-500 hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-500',
+    'h-8 gap-2 whitespace-nowrap rounded-full px-4 font-mono text-xs font-medium uppercase tracking-[0.08em] text-zinc-600 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-100 hover:text-zinc-900 hover:ring-zinc-400 focus-visible:outline focus-visible:outline-1 focus-visible:outline-zinc-400 dark:text-zinc-300 dark:ring-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-100 dark:hover:ring-zinc-500',
+  text: 'gap-2 font-mono text-[11px] font-medium uppercase tracking-[0.12em] text-emerald-600 hover:text-emerald-700 focus-visible:outline focus-visible:outline-1 focus-visible:outline-zinc-400 dark:text-emerald-400 dark:hover:text-emerald-300',
 }
 
 export function Button({
@@ -36,18 +41,19 @@ export function Button({
   let Component = props.href ? Link : 'button'
 
   className = clsx(
-    'inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition',
+    'group inline-flex w-fit items-center justify-center transition-colors duration-150',
     variantStyles[variant],
     className
   )
 
   let arrowIcon = (
     <ArrowIcon
       className={clsx(
-        'mt-0.5 h-5 w-5',
-        variant === 'text' && 'relative top-px',
-        arrow === 'left' && '-ml-1 rotate-180',
-        arrow === 'right' && '-mr-1'
+        'shrink-0 transition-transform duration-150',
+        variant === 'text' ? 'size-2.5' : 'size-3',
+        arrow === 'left'
+          ? 'rotate-180 group-hover:-translate-x-1'
+          : 'group-hover:translate-x-1'
       )}
     />
   )

src/components/Card.jsx

@@ -1,70 +1,14 @@
-import { motion, useMotionTemplate, useMotionValue } from 'framer-motion'
-import { GridPattern } from '@/components/GridPattern'
-
-function CardPattern({ mouseX, mouseY, ...gridProps }) {
-    let maskImage = useMotionTemplate`radial-gradient(180px at ${mouseX}px ${mouseY}px, white, transparent)`
-    let style = { maskImage, WebkitMaskImage: maskImage }
-
-    return (
-      <div className="pointer-events-none">
-        <div className="absolute inset-0 rounded-2xl transition duration-300 [mask-image:linear-gradient(white,transparent)] group-hover:opacity-50">
-          <GridPattern
-            width={72}
-            height={56}
-            x="50%"
-            className="absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/[0.02] stroke-black/5 dark:fill-white/1 dark:stroke-white/2.5"
-            {...gridProps}
-          />
+// Flat swiss hairline cell. `pattern` is accepted-and-ignored so legacy
+// consumers (which passed spotlight grid coordinates) compile untouched.
+export function Card({ index, pattern, children }) {
+  return (
+    <div className="group relative flex flex-col border border-zinc-200 bg-white p-5 transition-colors duration-150 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-925 dark:hover:bg-zinc-900/40">
+      {index && (
+        <div className="mb-3 font-mono text-[11px] uppercase tracking-[0.12em] text-zinc-500">
+          {index}
         </div>
-        <motion.div
-          className="absolute inset-0 rounded-2xl bg-gradient-to-r from-[#D7EDEA] to-[#F4FBDF] opacity-0 transition duration-300 group-hover:opacity-100 dark:from-[#202D2E] dark:to-[#303428]"
-          style={style}
-        />
-        <motion.div
-          className="absolute inset-0 rounded-2xl opacity-0 mix-blend-overlay transition duration-300 group-hover:opacity-100"
-          style={style}
-        >
-          <GridPattern
-            width={72}
-            height={56}
-            x="50%"
-            className="absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/50 stroke-black/70 dark:fill-white/2.5 dark:stroke-white/10"
-            {...gridProps}
-          />
-        </motion.div>
-      </div>
-    )
-  }
-
-  export function Card({ pattern, children }) {
-    let mouseX = useMotionValue(0)
-    let mouseY = useMotionValue(0)
-
-    function onMouseMove({ currentTarget, clientX, clientY }) {
-      let { left, top } = currentTarget.getBoundingClientRect()
-      mouseX.set(clientX - left)
-      mouseY.set(clientY - top)
-    }
-
-    const defaultPattern = {
-      y: -6,
-      squares: [
-        [-1, 2],
-        [1, 3],
-      ],
-    }
-
-    return (
-      <div 
-        onMouseMove={onMouseMove}
-        className="group relative flex rounded-2xl bg-zinc-50 transition-shadow hover:shadow-md hover:shadow-zinc-900/5 dark:bg-white/2.5 dark:hover:shadow-black/5"
-      >
-        <CardPattern {...pattern || defaultPattern} mouseX={mouseX} mouseY={mouseY} />
-        <div className="absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-900/7.5 group-hover:ring-zinc-900/10 dark:ring-white/10 dark:group-hover:ring-white/20" />
-        <div className="p-4 relative rounded-2xl">
-        {children}
-        </div>
-      </div>
-    )
-  }
-
+      )}
+      {children}
+    </div>
+  )
+}

src/components/Code.jsx

@@ -51,17 +51,15 @@ function CodePanelHeader({ tag, label }) {
   }
 
   return (
-    <div className="flex h-9 items-center gap-2 border-y border-b-white/7.5 border-t-transparent bg-white/2.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1">
+    <div className="flex h-8 items-center gap-2 border-b border-zinc-200 bg-zinc-100 px-4 dark:border-zinc-800 dark:bg-zinc-800/40">
       {tag && (
-        <div className="dark flex">
+        <div className="flex">
           <Tag variant="small">{tag}</Tag>
         </div>
       )}
-      {tag && label && (
-        <span className="h-0.5 w-0.5 rounded-full bg-zinc-500" />
-      )}
+      {tag && label && <span className="h-0.5 w-0.5 bg-zinc-600" />}
       {label && (
-        <span className="font-mono text-xs text-zinc-400">{label}</span>
+        <span className="font-mono text-xs text-zinc-500 dark:text-zinc-400">{label}</span>
       )}
     </div>
   )
@@ -71,17 +69,19 @@ function CodePanel({ tag, label, code, children }) {
   let child = Children.only(children)
 
   return (
-    <div className="group dark:bg-white/2.5">
+    <div className="group">
       <CodePanelHeader
         tag={child.props.tag ?? tag}
         label={child.props.label ?? label}
       />
       <div className="relative">
-        <pre className="overflow-x-auto p-4 text-xs text-white">{children}</pre>
-        <div className="group/button absolute right-4 top-3.5 opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100">
-          <CopyButton value={child.props.code ?? code}>
+        <pre className="overflow-x-auto p-4 text-xs text-zinc-800 dark:text-white">
+          {children}
+        </pre>
+        <div className="group/button absolute right-4 top-3.5 opacity-0 transition focus-within:opacity-100 group-hover:opacity-100">
+          <CopyButton value={child.props.code ?? code} className="!px-3 !py-1">
             <div className="flex items-center gap-1 text-xs">
-              <ClipboardIcon className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
+              <ClipboardIcon className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-700 dark:group-hover/button:stroke-zinc-300" />
               Copy
             </div>
           </CopyButton>
@@ -99,21 +99,24 @@ function CodeGroupHeader({ title, children, selectedIndex }) {
   }
 
   return (
-    <div className="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent">
+    <div className="flex min-h-8 flex-wrap items-stretch gap-x-4 border-b border-zinc-200 bg-zinc-100 px-4 dark:border-zinc-800 dark:bg-zinc-800/40">
       {title && (
-        <h3 className="mr-auto pt-3 text-xs font-semibold text-white">
+        <div className="mr-auto flex items-center font-mono text-[11px] uppercase leading-none tracking-[0.12em] text-zinc-500">
           {title}
-        </h3>
+        </div>
       )}
+      {/* Underline tabs matching TabGroup: the active tab's emerald rule
+          sits on the strip's bottom hairline via -mb-px. Sans labels,
+          leading-none keeps the strip compact. */}
       {hasTabs && (
-        <Tab.List className="-mb-px flex gap-4 text-xs font-medium">
+        <Tab.List className="-mb-px flex flex-wrap items-stretch gap-4">
           {Children.map(children, (child, childIndex) => (
             <Tab
               className={clsx(
-                'border-b py-3 transition focus:[&:not(:focus-visible)]:outline-none',
+                'flex shrink-0 items-center whitespace-nowrap border-b py-2 text-2xs leading-none transition-colors duration-150 focus:[&:not(:focus-visible)]:outline-none focus-visible:outline focus-visible:outline-1 focus-visible:outline-zinc-400',
                 childIndex === selectedIndex
-                  ? 'border-emerald-500 text-emerald-400'
-                  : 'border-transparent text-zinc-400 hover:text-zinc-300'
+                  ? 'border-emerald-500 text-emerald-600 dark:text-emerald-400'
+                  : 'border-transparent text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
               )}
             >
               {getPanelTitle(child.props)}
@@ -223,7 +226,8 @@ export function CodeGroup({ children, title, ...props }) {
     <CodeGroupContext.Provider value={true}>
       <Container
         {...containerProps}
-        className="not-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10"
+        translate="no"
+        className="not-prose my-6 overflow-hidden bg-zinc-50 ring-1 ring-zinc-200 dark:bg-zinc-900 dark:ring-zinc-800"
       >
         <CodeGroupHeader title={title} {...headerProps}>
           {children}