[apisix-website] branch master updated: refactor: endcta (#1177)

[bzp2010]

This is an automated email from the ASF dual-hosted git repository.

bzp2010 pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 7de129e2b62 refactor: endcta (#1177)
7de129e2b62 is described below

commit 7de129e2b620a659cd6510b854e1f4df025a2cdf
Author: Young <isk...@outlook.com>
AuthorDate: Sun Jul 3 10:18:17 2022 +0800

    refactor: endcta (#1177)
---
 website/src/components/sections/Endcta.tsx | 38 +++++++++---------
 website/src/css/endcta.module.scss         | 63 ++++++++++++++++++++++++++++++
 2 files changed, 83 insertions(+), 18 deletions(-)

diff --git a/website/src/components/sections/Endcta.tsx 
b/website/src/components/sections/Endcta.tsx
index 09f047dbd8b..e01a42c66b9 100644
--- a/website/src/components/sections/Endcta.tsx
+++ b/website/src/components/sections/Endcta.tsx
@@ -2,31 +2,33 @@ import type { FC } from 'react';
 import React from 'react';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-
 import Translate from '@docusaurus/Translate';
-
 import { LazyLoadImage } from 'react-lazy-load-image-component';
+import useWindowType from '@theme/hooks/useWindowSize';
 import ArrowAnim from '../ArrowAnim';
+import style from '../../css/endcta.module.scss';
+
+const EndCTA: FC = () => {
+  const windowType = useWindowType();
 
-const EndCTA: FC = () => (
-  <div className="endcta" style={{ padding: '50px 0', background: '#FF90A3' }}>
-    <div className="endcta-text">
-      <p style={{
-        display: 'flex', justifyContent: 'center', alignItems: 'center', 
whiteSpace: 'pre',
-      }}
-      >
-        Try
-        <span style={{ color: '#E8433E' }}>
+  return (
+    <div className={style.endcta}>
+      <p className={style.text}>
+        <span>
+          Try
           {' '}
+        </span>
+        <span className={style.apisix}>
           Apache APISIX
           {' '}
         </span>
-        today
-        <LazyLoadImage className="rocket" 
src="https://static.apiseven.com/202202/rocket.gif"; alt="Rocket" width="6vw" 
height="6vw" />
+        <span>
+          today.
+        </span>
+        {windowType === 'desktop'
+         && (<LazyLoadImage className={style.rocket} 
src="https://static.apiseven.com/202202/rocket.gif"; alt="Rocket" width="6vw" 
height="6vw" />)}
       </p>
-    </div>
-    <div className="endcta-btns">
-      <div className="hero-ctas">
+      <div className={style.links}>
         <Link
           to={useBaseUrl('downloads')}
           className="btn btn-download"
@@ -36,7 +38,7 @@ const EndCTA: FC = () => (
         <ArrowAnim />
       </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default EndCTA;
diff --git a/website/src/css/endcta.module.scss 
b/website/src/css/endcta.module.scss
new file mode 100644
index 00000000000..0c40e159b75
--- /dev/null
+++ b/website/src/css/endcta.module.scss
@@ -0,0 +1,63 @@
+@import "./util";
+
+$apisix-color: #e8433e;
+
+.endcta {
+  padding: max(14vh, 100px) 2rem;
+  margin: 0 10%;
+  background-color: #f8f8f8;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+  border-radius: 1em;
+
+  & .text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    white-space: pre;
+    text-transform: capitalize;
+    font-size: 4.5rem;
+    font-weight: bolder;
+    font-family: MaisonNeue-ExtraBold, sans-serif;
+    position: relative;
+    width: fit-content;
+
+    & .apisix {
+      color: $apisix-color;
+    }
+
+    & .rocket {
+      $size: 10rem;
+
+      position: absolute;
+      right: -#{$size};
+      width: $size;
+      height: $size;
+      bottom: 0.3em;
+      transform: rotate(45deg);
+    }
+  }
+
+  & .links {
+    display: flex;
+  }
+
+  @include respond-below(sm) {
+    min-height: 50vh;
+    margin: 0 1rem;
+    align-items: flex-start;
+    padding: 100px 2rem;
+
+    & .text {
+      flex-direction: column;
+      font-size: 2.5rem;
+      align-items: flex-start;
+
+      & .apisix {
+        margin: -1rem 0;
+      }
+    }
+  }
+}