new landing — data colocation

src/app/conf/2025/components/testimonials/index.tsx

@@ -85,7 +85,7 @@ export function TestimonialsList({
           className="flex shrink-0 snap-start flex-row-reverse items-center gap-6 max-md:flex-col md:px-10"
         >
           <div>
-            <p className="typography-body-lg max-w-[calc(100vw-32px)] !leading-[1.1] max-md:text-center md:max-w-[544px]">
+            <p className="typography-body-lg max-w-[100vw] !leading-[1.1] max-md:text-center sm:max-w-[calc(100vw-32px)] md:max-w-[544px]">
               {testimonial.quote}
             </p>
             <AuthorNameAndRole

src/app/conf/_design-system/utils/useOnClickOutside.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react"
+
+export function useOnClickOutside(
+  ref: React.RefObject<HTMLElement | null>,
+  handler: (event: MouseEvent) => void,
+) {
+  useEffect(() => {
+    const listener = (event: MouseEvent) => {
+      if (ref.current && event.composedPath().includes(ref.current)) {
+        return
+      }
+      handler(event)
+    }
+
+    document.addEventListener("click", listener)
+    return () => document.removeEventListener("click", listener)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+}

src/app/env.d.ts

@@ -12,7 +12,7 @@ declare module "*.svg?svgr" {
   export default content
 }
 
-declare module "*.mdx?raw" {
+declare module "*?raw" {
   const content: string
   export default content
 }

src/components/footer/conference-footer-box.tsx

@@ -16,7 +16,7 @@ export function ConferenceFooterBox({
     <Anchor
       href={href}
       className={clsx(
-        "dark group relative inline-flex flex-col bg-pri-base text-neu-900 after:absolute after:inset-0 hover:after:bg-white/[.025] dark:bg-pri-dark",
+        "dark gql-focus-visible group relative inline-flex flex-col bg-pri-base text-neu-900 after:absolute after:inset-0 hover:after:bg-white/[.025] dark:bg-pri-dark",
         className,
       )}
     >

src/components/footer/index.tsx

@@ -51,7 +51,7 @@ export function Footer({ extraLinks }: { extraLinks: FooterLink[] }) {
                 <h3 className="font-bold lg:mb-4 3xl:mb-10">
                   {section.route ? (
                     <Anchor
-                      className="gql-focus-visible block p-4 underline-offset-4 hover:underline md:px-6 2xl:px-10"
+                      className="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10"
                       href={section.route}
                     >
                       {section.title}
@@ -61,11 +61,11 @@ export function Footer({ extraLinks }: { extraLinks: FooterLink[] }) {
                   )}
                 </h3>
               )}
-              {section.links.map(link => (
+              {section.links.map((link, i) => (
                 <Anchor
-                  key={link.route}
+                  key={i}
                   href={link.route}
-                  className="gql-focus-visible block p-4 underline-offset-4 hover:underline md:px-6 2xl:px-10"
+                  className="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10"
                 >
                   {link.title}
                 </Anchor>
@@ -81,7 +81,7 @@ export function Footer({ extraLinks }: { extraLinks: FooterLink[] }) {
             )}
             <SocialIcons
               count={4}
-              className="col-span-full gap-px text-pri-base *:flex *:flex-1 *:items-center *:justify-center *:bg-neu-100 *:dark:bg-neu-0 max-sm:*:aspect-square lg:*:aspect-square [&>a:focus]:text-current [&>a:focus]:ring-transparent [&>a:hover]:bg-neu-0/90 [&>a:hover]:text-current [&_svg]:!h-8"
+              className="gql-all-anchors-focusable col-span-full gap-px text-pri-base *:flex *:flex-1 *:items-center *:justify-center *:bg-neu-100 *:dark:bg-neu-0 max-sm:*:aspect-square lg:*:aspect-square [&>a:focus]:text-current [&>a:focus]:!-outline-offset-[6px] [&>a:focus]:ring-transparent [&>a:hover]:bg-neu-0/90 [&>a:hover]:text-current [&_svg]:!h-8"
             />
           </div>
         </div>

src/components/index-page/data-colocation/component-tree.tsx

@@ -0,0 +1,183 @@
+import ModemIcon from "@/app/conf/_design-system/pixelarticons/modem.svg?svgr"
+import clsx from "clsx"
+
+const INNER_BOX_SIZE = 16
+
+interface ComponentTreeProps extends React.HTMLAttributes<HTMLDivElement> {
+  names: [string, string, string, string]
+}
+
+export function ComponentTree({
+  names,
+  className,
+  ...rest
+}: ComponentTreeProps) {
+  return (
+    <div
+      className={clsx(
+        "sector-opacity mx-auto flex max-w-[500px] justify-between [--gap-x:20px] md:gap-x-10 md:[--gap-x:32px] 3xl:gap-x-20",
+        className,
+      )}
+      {...rest}
+    >
+      <div className="flex flex-col">
+        <div className="flex h-12 items-center" data-sector="1">
+          <ComponentLabel className="border-neu-300 bg-neu-0 dark:border-neu-200">
+            {names[0]}
+          </ComponentLabel>
+        </div>
+
+        <div className="h-4" />
+
+        <div className="flex h-12 items-center" data-sector="2">
+          <ComponentLabel className="border-neu-600 bg-neu-400 dark:border-neu-200 dark:bg-neu-50">
+            {names[1]}
+          </ComponentLabel>
+        </div>
+
+        <div className="h-4" />
+
+        <div className="flex h-12 items-center" data-sector="3">
+          <ComponentLabel className="border-sec-base bg-sec-lighter dark:border-sec-dark dark:bg-sec-darker/50">
+            {names[2]}
+          </ComponentLabel>
+        </div>
+
+        <div className="h-4" />
+
+        <div className="flex h-12 items-center" data-sector="4">
+          <ComponentLabel className="border-pri-base bg-pri-lighter/40 dark:border-pri-dark dark:bg-pri-darker/50">
+            {names[3]}
+          </ComponentLabel>
+        </div>
+      </div>
+
+      <div className="flex flex-col items-center">
+        <div
+          className="flex size-12 items-center justify-center bg-neu-100 dark:bg-neu-50"
+          data-sector="1"
+        >
+          <ModemIcon className="size-6 text-neu-600" />
+        </div>
+
+        <div className="h-4 w-px bg-neu-300 dark:bg-neu-100" />
+
+        <NestedBox
+          bgColor="bg-neu-600 dark:bg-neu-200"
+          middleColor="bg-sec-base"
+          innerColor="bg-pri-base"
+          data-sector="2"
+        />
+
+        <Fork
+          className="text-neu-300 dark:text-neu-100"
+          style={{
+            width: `calc(100% - var(--gap-x) - ${INNER_BOX_SIZE * 5.75}px)`,
+          }}
+        />
+
+        <div className="flex gap-[--gap-x]">
+          <div className="flex flex-col items-center">
+            <NestedBox
+              bgColor="bg-neu-100 dark:bg-neu-50"
+              middleColor="bg-sec-base"
+              innerColor="bg-pri-base"
+              data-sector="3"
+            />
+            <Fork className="text-neu-300 dark:text-neu-100" />
+            <div className="flex gap-[--gap-x]" data-sector="4">
+              <LeafBox />
+              <LeafBox />
+            </div>
+          </div>
+          <div className="flex flex-col items-center">
+            <NestedBox
+              bgColor="bg-neu-100 dark:bg-neu-50"
+              middleColor="bg-sec-base"
+              innerColor="bg-pri-base"
+              data-sector="3"
+            />
+            <Fork className="text-neu-300 dark:text-neu-100" />
+            <div className="flex gap-[--gap-x]" data-sector="4">
+              <LeafBox />
+              <LeafBox />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface NestedBoxProps extends React.HTMLAttributes<HTMLDivElement> {
+  bgColor: string
+  middleColor?: string
+  innerColor: string
+}
+
+function NestedBox({
+  bgColor,
+  middleColor,
+  innerColor,
+  ...rest
+}: NestedBoxProps) {
+  const padding = INNER_BOX_SIZE / 2
+
+  return (
+    <div className={bgColor} style={{ padding }} {...rest}>
+      <div className={middleColor || bgColor} style={{ padding }}>
+        <div className={innerColor} style={{ padding }} />
+      </div>
+    </div>
+  )
+}
+
+interface ComponentLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode
+  className: string
+}
+
+function ComponentLabel({ children, className, ...rest }: ComponentLabelProps) {
+  return (
+    <div
+      className={clsx(
+        "rounded border px-1 py-0.5 font-mono text-[10px] text-neu-800 dark:font-medium",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  )
+}
+
+function LeafBox(props: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <NestedBox
+      bgColor="bg-neu-100 dark:bg-neu-50"
+      innerColor="bg-pri-base"
+      {...props}
+    />
+  )
+}
+
+function Fork(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="81"
+      height="16"
+      viewBox="0 0 81 16"
+      stroke="currentColor"
+      fill="none"
+      preserveAspectRatio="none"
+      {...props}
+    >
+      <path d="M40.5 8V0M1 16V8m79 8V8" vectorEffect="non-scaling-stroke" />
+      <path
+        d="m1 8 79-.00001"
+        stroke-linecap="square"
+        vectorEffect="non-scaling-stroke"
+      />
+    </svg>
+  )
+}

src/components/index-page/data-colocation/data-colocation.css

@@ -0,0 +1,32 @@
+.sector-opacity {
+  & [data-sector] {
+    transition: opacity 0.2s ease-in;
+    transition-delay: 0.1s;
+  }
+
+  [data-active-sector] & [data-sector] {
+    opacity: 0.4;
+    transition-delay: 0s;
+    transition-timing-function: ease-out;
+  }
+
+  [data-active-sector="1"] & [data-sector="1"],
+  [data-active-sector="2"] & [data-sector="2"],
+  [data-active-sector="3"] & [data-sector="3"],
+  [data-active-sector="4"] & [data-sector="4"] {
+    opacity: 1;
+  }
+}
+
+.sector-ring {
+  & [data-sector] {
+    @apply ring-2 ring-transparent ring-offset-2 ring-offset-transparent transition-shadow duration-200 ease-in;
+  }
+
+  [data-active-sector="1"] & [data-sector="1"],
+  [data-active-sector="2"] & [data-sector="2"],
+  [data-active-sector="3"] & [data-sector="3"],
+  [data-active-sector="4"] & [data-sector="4"] {
+    @apply ring-2 ring-neu-500 duration-200 ease-out dark:ring-neu-400 dark:ring-offset-neu-0;
+  }
+}

src/components/index-page/data-colocation/data-colocation.json

@@ -0,0 +1,31 @@
+{
+  "friends": [
+    {
+      "name": "Trudie",
+      "profilePic": "trudie.webp",
+      "mutualFriendsCount": 120,
+      "isSubscribed": true,
+      "username": "funkytrudster89",
+      "email": "[email protected]",
+      "location": "New York, USA"
+    },
+    {
+      "name": "Frances",
+      "profilePic": "frances.webp",
+      "mutualFriendsCount": 42,
+      "isSubscribed": false,
+      "username": "frannyfran12",
+      "email": "[email protected]",
+      "location": "Madrid, Spain"
+    },
+    {
+      "name": "Fernando",
+      "profilePic": "fernando.webp",
+      "mutualFriendsCount": 114,
+      "isSubscribed": true,
+      "username": "fern_whirlwind",
+      "email": "[email protected]",
+      "location": "Amsterdam, Netherlands"
+    }
+  ]
+}

src/components/index-page/data-colocation/data-colocation.mdx

@@ -0,0 +1,25 @@
+```graphql
+query GetFriendList {
+  ...FriendList
+}
+
+fragment FriendList on Query {
+  friends {
+    ...FriendListItem
+  }
+}
+
+fragment FriendListItem on Friend {
+  name
+  profilePic
+  mutualFriendsCount
+  isSubscribed
+  ...FriendInfo
+}
+
+fragment FriendInfo on Friend {
+  username
+  email
+  location
+}
+```

src/components/index-page/data-colocation/friend-avatars/index.tsx

@@ -0,0 +1,9 @@
+import trudie from "./trudie.webp"
+import frances from "./frances.webp"
+import fernando from "./fernando.webp"
+
+export const friendAvatars = {
+  trudie,
+  frances,
+  fernando,
+}