fix format of titles and enhance hero of FK page

Signed-off-by: Florent Poinsard <[email protected]>
vitessio · Jan 15, 2024 · b6baf92 · b6baf92
1 parent 59a0351
commit b6baf92
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 31 deletions.
diff --git a/website/src/pages/ForeignKeysPage/components/FK.jsx b/website/src/pages/ForeignKeysPage/components/FK.jsx
@@ -21,9 +21,7 @@ export default function FK({ data }) {
   return (
     <div className="w-full border border-primary rounded-xl relative shadow-lg">
       <div className="p-5 flex flex-col gap-y-3">
-        <h3 className="text-start text-3xl font-medium">FKs benchmark Comparison</h3>
       </div>
-
       <table>
         <thead>
           <tr>

diff --git a/website/src/pages/ForeignKeysPage/components/Hero.jsx b/website/src/pages/ForeignKeysPage/components/Hero.jsx
@@ -21,33 +21,57 @@ export default function Hero(props) {
   const { refs, gitRef, setGitRef } = props;
 
   return (
-    <section className="flex flex-col gap-y-[10vh] pt-[5vh] justify-center items-center h-[30vh]">
-      {refs && refs.length > 0 && (
-        <div className="flex gap-x-24">
-          <Dropdown.Container
-            className="w-[20vw] py-2 border border-primary rounded-md mb-[1px] text-lg shadow-xl"
-            defaultIndex={refs.map((r) => r.Name).indexOf(gitRef.tag)}
-            onChange={(event) => {
-              setGitRef((p) => {
-                return { ...p, tag: event.value };
-              });
-            }}
-          >
-            {refs.map((ref, key) => (
-              <Dropdown.Option
-                key={key}
-                className={twMerge(
-                  "w-[20vw] relative border-front border border-t-transparent border-opacity-60 bg-background py-2 after:duration-150 after:absolute-cover after:bg-foreground after:bg-opacity-0 hover:after:bg-opacity-10 font-medium",
-                  key === 0 && "rounded-t border-t-front",
-                  key === refs.length - 1 && "rounded-b"
-                )}
-              >
-                {ref.Name}
-              </Dropdown.Option>
-            ))}
-          </Dropdown.Container>
+      <section className="flex h-[60vh] pt-[10vh] items-center p-page">
+        <div className="flex basis-1/2 flex-col">
+          <h2 className="text-8xl text-primary">Foreign Keys</h2>
+          <p className="my-6 leading-loose">
+            Support for Foreign Keys have been added to Vitess in v18.0.0.
+            We want to be able to compare the performance of Vitess with and without Foreign Keys.
+            <br/>
+            For this purpose, we propose four benchmarks:
+            <br/>
+            - TPCC, with a sharded keyspace
+            <br/>
+            - TPCC_UNSHARDED, with an unsharded keyspace
+            <br/>
+            - TPCC_FK, with Foreign Keys enabled and set to vitess managed
+            <br/>
+            - TPCC_FK_UNMANAGED, with Foreign Keys enabled and set to vitess unmanaged
+            <br/>
+            Use the dropdown on the right to select which version of Vitess you would like to use to compare the performance of our four TPCC benchmarks.
+          </p>
         </div>
-      )}
-    </section>
+
+        <div className="flex-1 flex flex-col items-center">
+          <div className="flex flex-col gap-y-8">
+            {refs && refs.length > 0 && (
+                <div className="flex gap-x-24">
+                  <Dropdown.Container
+                      className="w-[20vw] py-2 border border-primary rounded-md mb-[1px] text-lg shadow-xl"
+                      defaultIndex={refs.map((r) => r.Name).indexOf(gitRef.tag)}
+                      onChange={(event) => {
+                        setGitRef((p) => {
+                          return { ...p, tag: event.value };
+                        });
+                      }}
+                  >
+                    {refs.map((ref, key) => (
+                        <Dropdown.Option
+                            key={key}
+                            className={twMerge(
+                                "w-[20vw] relative border-front border border-t-transparent border-opacity-60 bg-background py-2 after:duration-150 after:absolute-cover after:bg-foreground after:bg-opacity-0 hover:after:bg-opacity-10 font-medium",
+                                key === 0 && "rounded-t border-t-front",
+                                key === refs.length - 1 && "rounded-b"
+                            )}
+                        >
+                          {ref.Name}
+                        </Dropdown.Option>
+                    ))}
+                  </Dropdown.Container>
+                </div>
+            )}
+          </div>
+        </div>
+      </section>
   );
 }
diff --git a/website/src/pages/PRsPage/components/Hero.jsx b/website/src/pages/PRsPage/components/Hero.jsx
@@ -17,7 +17,7 @@ import React from "react";
 
 export default function Hero() {
   return (
-    <section className="flex pt-[15vh] items-center p-page">
+    <section className="flex h-[60vh] pt-[15vh] items-center p-page">
       <div className="flex basis-1/2 flex-col">
         <h2 className="text-8xl text-primary">Pull Request</h2>
         <p className="my-6 leading-loose">

diff --git a/website/src/pages/StatusPage/components/Hero.jsx b/website/src/pages/StatusPage/components/Hero.jsx
@@ -28,7 +28,7 @@ export default function Hero() {
   );
 
   return (
-    <section className="flex h-[70vh] pt-[10vh] items-center p-page">
+    <section className="flex h-[60vh] pt-[10vh] items-center p-page">
       <div className="flex basis-1/2 flex-col">
         <h2 className="text-8xl text-primary">Status</h2>
         <p className="my-6 leading-loose">