whatsflitchpay2 other card done

Solana-Hyperdrive · Nov 8, 2023 · 16aaaaf · 16aaaaf
1 parent c16a37b
commit 16aaaaf
Show file tree

Hide file tree

Showing 4 changed files with 185 additions and 19 deletions.
diff --git a/public/svgs/InboundRelay.tsx b/public/svgs/InboundRelay.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+
+export function InboundRelay() {
+  return (
+    <svg
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="SVG" clip-path="url(#clip0_283_15795)">
+        <path
+          id="Vector"
+          d="M19.8353 12.5888V16.8662C19.8249 16.1123 19.3461 15.4484 18.6435 15.2137L10.3673 12.4489C9.1756 12.0508 7.87553 12.1725 6.77485 12.7854L2.39918 15.2217C1.97213 15.4594 1.70222 15.9118 1.69141 16.4079L1.69141 12.1305C1.70222 11.6344 1.97213 11.1821 2.39918 10.9443L5.18263 9.39452C7.29935 8.21601 9.79945 7.98183 12.0912 8.74744L18.6435 10.9363C19.3461 11.171 19.8249 11.8349 19.8353 12.5888Z"
+          fill="#5229BE"
+        />
+        <path
+          id="Vector_2"
+          d="M1.69141 16.0107L1.69141 11.7333C1.70186 12.4872 2.18069 13.1511 2.88325 13.3858L9.43554 15.5747C11.7273 16.3403 14.2274 16.1061 16.3441 14.9276L19.1275 13.3778C19.5546 13.1401 19.8245 12.6877 19.8353 12.1916V16.469C19.8245 16.9651 19.5546 17.4175 19.1275 17.6552L16.3441 19.2049C14.2274 20.3835 11.7273 20.6177 9.43554 19.8521L2.88325 17.6632C2.18069 17.4285 1.70186 16.7646 1.69141 16.0107Z"
+          fill="#6633EE"
+        />
+        <path
+          id="Vector_3"
+          d="M19.8353 4.92332V9.20071C19.8249 8.44683 19.3461 7.78288 18.6435 7.54822L10.3673 4.78342C9.1756 4.38528 7.87553 4.50707 6.77485 5.11992L2.39918 7.5562C1.97213 7.79395 1.70222 8.24634 1.69141 8.74239L1.69141 4.46503C1.70222 3.96895 1.97213 3.51658 2.39918 3.27882L5.18263 1.72905C7.29935 0.55051 9.79945 0.316331 12.0912 1.08195L18.6435 3.27085C19.3461 3.50556 19.8249 4.16943 19.8353 4.92332Z"
+          fill="#5229BE"
+        />
+        <path
+          id="Vector_4"
+          d="M1.69141 8.34524L1.69141 4.06784C1.70186 4.82173 2.18069 5.48564 2.88325 5.72034L9.43554 7.90924C11.7273 8.67486 14.2274 8.44068 16.3441 7.26211L19.1275 5.71236C19.5546 5.47458 19.8245 5.02221 19.8353 4.52613V8.8035C19.8245 9.29961 19.5546 9.75194 19.1275 9.98975L16.3441 11.5395C14.2274 12.7181 11.7273 12.9522 9.43554 12.1866L2.88325 9.99767C2.18069 9.76301 1.70186 9.09912 1.69141 8.34524Z"
+          fill="#6633EE"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_283_15795">
+          <rect
+            width="19.9583"
+            height="19.9583"
+            fill="white"
+            transform="translate(0.787109 0.639069)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/public/svgs/Send.tsx b/public/svgs/Send.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+export function Send() {
+  return (
+    <svg
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="SVG">
+        <path
+          id="Vector"
+          d="M3.52051 3.75558L9.3999 17.8927L11.4872 11.7472L17.6577 9.63498L3.52051 3.75558Z"
+          stroke="#2A2B3A"
+          stroke-width="1.66319"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/public/svgs/Terminal.tsx b/public/svgs/Terminal.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+export function Terminal() {
+  return (
+    <svg
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="SVG">
+        <path
+          id="Vector"
+          d="M3.6543 14.5663L8.64388 9.57674L3.6543 4.58716"
+          stroke="#2A2B3A"
+          stroke-width="1.66319"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          id="Vector_2"
+          d="M10.3086 16.2295H16.9614"
+          stroke="#2A2B3A"
+          stroke-width="1.66319"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/src/components/WhatsFlitchPay2.tsx b/src/components/WhatsFlitchPay2.tsx
@@ -6,6 +6,9 @@ import inboundRelay from "@/public/images/inbound-relay.png";
 import Image from "next/image";
 import { Book } from "@/public/svgs/Book";
 import { Rocket } from "@/public/svgs/Rocket";
+import { InboundRelay } from "@/public/svgs/InboundRelay";
+import { Send } from "@/public/svgs/Send";
+import { Terminal } from "@/public/svgs/Terminal";
 
 export function WhatsFlitchPay2() {
   return (
@@ -65,10 +68,10 @@ export function WhatsFlitchPay2() {
                 </div>
                 <Image className="md:w-1/2" src={inboundRelay} alt="" />
               </div>
-              <div className="flex flex-wrap md:flex-nowrap gap-2 md:gap-4">
+              <div className="flex flex-wrap gap-2 md:flex-nowrap md:gap-4">
                 <Link
                   href="/"
-                  className="flex w-full md:w-1/2 items-center justify-between rounded-full px-2.5 py-0.5 md:text-[0.775rem] text-[0.7rem] hover:bg-gray-200"
+                  className="flex w-full items-center justify-between rounded-full px-2.5 py-0.5 text-[0.7rem] hover:bg-gray-200 md:w-1/2 md:text-[0.775rem]"
                   style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
                 >
                   <div className="flex items-center gap-2 ">
@@ -77,11 +80,16 @@ export function WhatsFlitchPay2() {
                     </span>
                     Get Started
                   </div>
-                  <div className="font-semibold" style={{color:"hsla(236, 16%, 20%, 1)"}}>{">"}</div>
+                  <div
+                    className="font-semibold"
+                    style={{ color: "hsla(236, 16%, 20%, 1)" }}
+                  >
+                    {">"}
+                  </div>
                 </Link>
                 <Link
                   href="/"
-                  className="flex w-full md:w-1/2 items-center justify-between rounded-full px-2.5 py-0.5 md:text-[0.775rem] text-[0.7rem] hover:bg-gray-200"
+                  className="flex w-full items-center justify-between rounded-full px-2.5 py-0.5 text-[0.7rem] hover:bg-gray-200 md:w-1/2 md:text-[0.775rem]"
                   style={{ border: "1px solid hsla(234, 49%, 92%, 1)" }}
                 >
                   <div className="flex items-center gap-2 ">
@@ -90,31 +98,87 @@ export function WhatsFlitchPay2() {
                     </span>
                     Follow a Quickstart
                   </div>
-                  <div className="font-semibold" style={{color:"hsla(236, 16%, 20%, 1)"}}>{">"}</div>
+                  <div
+                    className="font-semibold"
+                    style={{ color: "hsla(236, 16%, 20%, 1)" }}
+                  >
+                    {">"}
+                  </div>
                 </Link>
               </div>
             </div>
             {/* card2 */}
             <div
-              className="flex  flex-col gap-4 p-6 md:w-1/2 md:p-10"
+              className="flex w-full text-xs justify-between flex-col flex-wrap items-center gap-4 p-6 md:w-1/2 md:flex-row md:flex-nowrap md:p-10"
               style={{
                 border: "1px solid hsla(234, 49%, 92%, 1)",
                 backgroundColor: "hsla(234, 49%, 92%, 1)",
               }}
             >
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
-              blanditiis cupiditate, quidem culpa id, officiis earum aperiam
-              quae dolor pariatur iusto. Dignissimos illo repellat vitae? Nisi
-              necessitatibus sunt vero unde quia! Nulla molestias esse deleniti
-              necessitatibus, quasi est nihil id omnis fugit aspernatur? Placeat
-              pariatur facere quibusdam hic aliquam eaque, iusto eum libero
-              consequatur? Velit laborum quidem earum consectetur! Itaque amet
-              nobis neque accusamus nulla ut provident consectetur cum et
-              explicabo incidunt dolores eos aperiam doloremque odit
-              perspiciatis tempore asperiores obcaecati, laudantium quos
-              aspernatur modi quod optio. Sunt, pariatur praesentium. Non
-              cupiditate incidunt nisi, cum consequatur blanditiis eius officia
-              ut?
+              {/* card1 */}
+              <div className=" flex flex-wrap items-center md:flex-nowrap">
+                <div className=" flex-wrap items-center rounded-xl bg-white leading-none md:flex ">
+                  <div className="flex items-center">
+                    <div
+                      className="p-1.5"
+                      style={{
+                        borderRight: "2px solid hsla(234, 49%, 92%, 1)",
+                      }}
+                    >
+                      <Send />
+                    </div>
+                    <div className="p-1.5">Client</div>
+                  </div>
+
+                  <div
+                    className="p-1.5 text-xs"
+                    style={{ borderTop: "2px solid hsla(234, 49%, 92%, 1)" }}
+                  >
+                    &nbsp;{'"name":"Claude"'}&nbsp;
+                  </div>
+                </div>
+              </div>
+              <div className="rotate-90 md:rotate-0">{">"}</div>
+              {/* card2 */}
+              <div>
+                <div className=" flex-wrap items-center rounded-xl bg-white leading-none md:flex">
+                  <div className="flex items-center">
+                    <div
+                      className="p-2"
+                      style={{
+                        borderRight: "2px solid hsla(234, 49%, 92%, 1)",
+                      }}
+                    >
+                      <InboundRelay />
+                    </div>
+                    <div className="p-2">Inbound Relay</div>
+                  </div>
+                </div>
+              </div>
+              <div className="rotate-90 md:rotate-0 ">{">"}</div>
+              {/* card3 */}
+              <div>
+                <div className=" flex-wrap items-center rounded-xl bg-white leading-none md:flex ">
+                  <div className="flex items-center">
+                    <div
+                      className="p-1.5"
+                      style={{
+                        borderRight: "2px solid hsla(234, 49%, 92%, 1)",
+                      }}
+                    >
+                      <Terminal />
+                    </div>
+                    <div className="p-1.5">Server</div>
+                  </div>
+
+                  <div
+                    className="p-1.5 text-xs"
+                    style={{ borderTop: "2px solid hsla(234, 49%, 92%, 1)" }}
+                  >
+                    {'"name":"ev:Tk9D"'}
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>