docs: add a "Gallery" page (#10968)

* docs: add a gallery page

* Adding image gallery

* linted

* add more screenshots

* a few more screenshots

docs/src/components/layout.tsx

@@ -74,7 +74,7 @@ const sidebarStyle = css`
   border-right: 1px solid #bfbfbf;
 `;
 
-const contentStyle = css`
+const doczLayoutStyle = css`
   margin-top: 3px;
   background-color: white;
   img {
@@ -124,6 +124,20 @@ const contentLayoutDocsStyle = css`
     overflow: auto;
   }
 `;
+const footerHeight = 135;
+const baseLayoutStyle = css`
+  min-height: 100vh;
+  position: relative;
+  .layout-footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: ${footerHeight}px;
+  }
+  .content-wrap {
+    padding-bottom: ${footerHeight}px;
+  }
+`;
 
 interface Props {
   children: React.ReactNode;
@@ -153,7 +167,7 @@ const AppLayout = ({ children }: Props) => {
             <Sider width={leftPaneWidth} css={sidebarStyle}>
               <DoczMenu />
             </Sider>
-            <Layout css={contentStyle}>
+            <Layout css={doczLayoutStyle}>
               <div css={centerLayoutStyle}>
                 <h1 className="doc-hamburger" onClick={() => setDrawer(true)}>
                   <MenuOutlined
@@ -168,9 +182,13 @@ const AppLayout = ({ children }: Props) => {
           </Layout>
         </>
       ) : (
-        <Layout>
-          {children}
-          <Footer />
+        <Layout css={baseLayoutStyle}>
+          <div className="content-wrap">
+            {children}
+          </div>
+          <div className="layout-footer">
+            <Footer />
+          </div>
         </Layout>
       )}
     </Layout>