new landing — vertical diagram (#43)

* Extract edges and boxes out from the components.

* Make diagram boxes and edges responsive

* Make the diagram less tall

* Animate client edge on small screens

* Animate server edges on small screens

* Remove next step on background click per Uri's request

* Rotate query sideways on small screens

Author: hasparus

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

@@ -11,15 +11,15 @@ import {
 import { Pre } from "@/components/pre"
 import { SectionLabel } from "@/app/conf/_design-system/section-label"
 import InfoIcon from "@/app/conf/_design-system/pixelarticons/info.svg?svgr"
+import { useOnClickOutside } from "@/app/conf/_design-system/utils/useOnClickOutside"
+import { isSpanElement } from "@/app/conf/_design-system/utils/isSpanElement"
 
 import { ComponentTree } from "./component-tree"
 import { FriendList } from "./friend-list"
 
 import json from "./data-colocation.json"
 import Query from "./data-colocation.mdx"
 import "./data-colocation.css"
-import { useOnClickOutside } from "@/app/conf/_design-system/utils/useOnClickOutside"
-import { isSpanElement } from "@/app/conf/_design-system/utils/isSpanElement"
 
 const highlightedFragments = {
   GetFriendList: 1,

src/components/index-page/what-is-graphql/wires.module.css

@@ -85,3 +85,12 @@
     transform: rotateX(-90deg) translateY(60px) translateZ(150px);
   }
 }
+
+@keyframes query-exit-sm {
+  from {
+    transform: rotateY(0deg) translateX(0px) translateZ(150px);
+  }
+  to {
+    transform: rotateY(90deg) translateX(60px) translateZ(150px);
+  }
+}