This is an automated email from the ASF dual-hosted git repository.
juzhiyuan 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 e86adde feat: add dashboard playground link card (#947)
e86adde is described below
commit e86addeb311f13f6a57f8ac9debd002004fc0fbb
Author: SkyeYoung <[email protected]>
AuthorDate: Wed Mar 23 09:42:41 2022 +0800
feat: add dashboard playground link card (#947)
---
website/src/css/customTheme.css | 482 ++++++++++++++++++++++++--------
website/src/pages/sections/features.jsx | 297 +++++++++++++-------
2 files changed, 575 insertions(+), 204 deletions(-)
diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
index c27cb02..e72d8d8 100644
--- a/website/src/css/customTheme.css
+++ b/website/src/css/customTheme.css
@@ -53,45 +53,60 @@ html[data-theme="dark"] {
}
@font-face {
- font-family: 'MaisonNeue-Medium';
- src: local('MaisonNeue-Medium'),
url(https://raw.githubusercontent.com/apache/apisix-website/master/website/src/fonts/MaisonNeue-Medium.otf)
format('opentype');
+ font-family: "MaisonNeue-Medium";
+ src: local("MaisonNeue-Medium"),
+
url(https://cdn.jsdelivr.net/gh/apache/apisix-website@master/website/src/fonts/MaisonNeue-Medium.otf)
format("opentype");
font-display: swap;
}
+
@font-face {
- font-family: 'MaisonNeue-Bold';
- src: local('MaisonNeue-Bold'),
url(https://raw.githubusercontent.com/apache/apisix-website/master/website/src/fonts/MaisonNeue-Bold.otf)
format('opentype');
+ font-family: "MaisonNeue-Bold";
+ src: local("MaisonNeue-Bold"),
+
url(https://cdn.jsdelivr.net/gh/apache/apisix-website@master/website/src/fonts/MaisonNeue-Bold.otf)
format("opentype");
font-display: swap;
}
+
@font-face {
- font-family: 'MaisonNeue-Light';
- src: local('MaisonNeue-Light'),
url(https://raw.githubusercontent.com/apache/apisix-website/master/website/src/fonts/MaisonNeue-Light.otf)
format('opentype');
+ font-family: "MaisonNeue-Light";
+ src: local("MaisonNeue-Light"),
+
url(https://cdn.jsdelivr.net/gh/apache/apisix-website@master/website/src/fonts/MaisonNeue-Light.otf)
format("opentype");
font-display: swap;
}
+
@font-face {
- font-family: 'MaisonNeue-Demi';
- src: local('MaisonNeue-Demi'),
url(https://raw.githubusercontent.com/apache/apisix-website/master/website/src/fonts/MaisonNeue-Demi.otf)
format('opentype');
+ font-family: "MaisonNeue-Demi";
+ src: local("MaisonNeue-Demi"),
+
url(https://cdn.jsdelivr.net/gh/apache/apisix-website@master/website/src/fonts/MaisonNeue-Demi.otf)
format("opentype");
font-display: swap;
}
+
@font-face {
- font-family: 'MaisonNeue-ExtraBold';
- src: local('MaisonNeue-ExtraBold'),
url(https://raw.githubusercontent.com/apache/apisix-website/master/website/src/fonts/MaisonNeue-ExtraBold.otf)
format('opentype');
+ font-family: "MaisonNeue-ExtraBold";
+ src: local("MaisonNeue-ExtraBold"),
+
url(https://cdn.jsdelivr.net/gh/apache/apisix-website@master/website/src/fonts/MaisonNeue-ExtraBold.otf)
format("opentype");
font-display: swap;
}
::-webkit-scrollbar {
width: 5px;
}
+
::-webkit-scrollbar-track {
background: #f1f1f1;
}
+
::-webkit-scrollbar-thumb {
background: #888;
}
+
::-webkit-scrollbar-thumb:hover {
background: #555;
}
-body, h1, h2, h3 {
+body,
+h1,
+h2,
+h3 {
font-family: MaisonNeue-Medium, sans-serif;
}
@@ -110,6 +125,7 @@ div.inner {
.post-header {
padding-top: 50px;
}
+
.header {
padding-top: 50px;
}
@@ -120,7 +136,6 @@ div.inner {
header h2 {
color: var(--color-primary);
-
}
@media only screen and (max-width: 414px) {
@@ -135,7 +150,7 @@ header h2 {
color: var(--color-primary);
}
-.navbar__title{
+.navbar__title {
font-size: 18px;
height: 30px;
}
@@ -144,6 +159,7 @@ header h2 {
padding-left: 0;
padding-right: 0;
}
+
.showcase .container {
padding-left: 0;
padding-right: 0;
@@ -220,10 +236,12 @@ header h2 {
color: #ef4444;
transition: all 0.3s;
}
+
.button:hover {
background: #fecaca;
color: #ef4444;
}
+
.button.github {
background: var(--color-github-button);
color: white;
@@ -231,16 +249,20 @@ header h2 {
align-items: center;
margin-bottom: 15px;
}
+
.button.github .github-logo {
height: 24px;
margin: 0 12px 1px 0px;
}
+
.button.github:hover {
background: var(--color-github-button-hover);
}
+
.button-wrapper {
margin: 0 -10px;
}
+
.button.secondary {
background: #f3f4f6;
color: #1f2937;
@@ -248,17 +270,21 @@ header h2 {
box-sizing: border-box;
margin-bottom: 15px;
}
+
.button.secondary:hover {
background: #e5e7eb;
}
+
@media only screen and (max-width: 414px) {
.button {
margin: 0;
}
+
.button.secondary,
.button.github {
width: 100%;
}
+
.button-wrapper {
margin: 0;
}
@@ -273,6 +299,7 @@ a:hover {
color: var(--color-primary);
text-decoration: none;
}
+
.markdown a {
color: var(--color-primary);
}
@@ -285,22 +312,24 @@ a:hover {
/*Blogs section*/
.blogPostTitle_node_modules-\@docusaurus-theme-classic-lib-next-theme-BlogPostItem-styles-module
{
- font-size: 2rem !important;
+ font-size: 2rem !important;
}
.sidebar_node_modules-\@docusaurus-theme-classic-lib-next-theme-BlogSidebar-styles-module
{
- margin-left: -3px;
- text-align: left;
- margin-right: 10px;
- padding-right: 20px;
+ margin-left: -3px;
+ text-align: left;
+ margin-right: 10px;
+ padding-right: 20px;
}
/*Hero section*/
-.hide-title, .hide-subtitle, .hide-ctas {
+.hide-title,
+.hide-subtitle,
+.hide-ctas {
opacity: 0;
}
-.hero-sec-wrap{
+.hero-sec-wrap {
display: flex;
background: #f4f4f4ad;
height: 100vh;
@@ -310,12 +339,12 @@ a:hover {
position: absolute;
width: 50vw;
height: 100vh;
- background: #FFFFFF;
+ background: #ffffff;
top: -1px;
right: 0px;
}
-.homeCanvas{
+.homeCanvas {
width: 50vw;
height: 100vh;
}
@@ -343,7 +372,7 @@ a:hover {
font-size: 1.1rem;
font-family: MaisonNeue-Light;
position: relative;
- color: #615D5D;
+ color: #615d5d;
line-height: 30px;
letter-spacing: 0.2px;
margin: 25px 0;
@@ -368,28 +397,30 @@ a:hover {
margin: 0 10px 0px 0;
transition: all 0.3s;
}
+
.btn:hover {
background: #9b9b9b;
color: white;
text-decoration: none;
}
-.btn-docs{
+.btn-docs {
display: flex;
}
-.btn-docs:hover{
+
+.btn-docs:hover {
text-decoration: none;
color: #9b9b9b;
}
/*Architecture section*/
-.hldesign{
+.hldesign {
height: 100%;
display: flex;
justify-content: center;
}
-.hldesign-graphic{
+.hldesign-graphic {
width: 60%;
height: auto;
}
@@ -399,18 +430,18 @@ a:hover {
}
.arch {
- background: linear-gradient(180deg, #E2ECFF 15%, #FFF 90%);
+ background: linear-gradient(180deg, #e2ecff 15%, #fff 90%);
position: relative;
z-index: 1;
padding: 50px 0;
overflow: hidden;
}
-.arch-card-caption{
+.arch-card-caption {
height: 100%;
display: flex;
justify-content: center;
- color: #615D5D;
+ color: #615d5d;
}
.arch-card-border {
@@ -423,38 +454,46 @@ a:hover {
left: 17%;
border-color: white;
background: white;
- filter: drop-shadow(0px 4px 10px rgb(0,0,0,0.25));
+ filter: drop-shadow(0px 4px 10px rgb(0, 0, 0, 0.25));
}
-.arch-head, .compare-head, .testimonials-head, .docs-promo-head,
.oss-promo-head {
+.arch-head,
+.compare-head,
+.testimonials-head,
+.docs-promo-head,
+.oss-promo-head {
font-size: 2.4rem;
position: relative;
left: 16.8%;
width: 83.2%;
}
-.arch-subtitle, .compare-subtitle, .testimonials-subtitle,
.docs-promo-subtitle, .oss-promo-subtitle {
+.arch-subtitle,
+.compare-subtitle,
+.testimonials-subtitle,
+.docs-promo-subtitle,
+.oss-promo-subtitle {
font-size: 1.13rem;
position: relative;
left: 16.8%;
width: 70%;
- color: #615D5D;
+ color: #615d5d;
letter-spacing: 0.2px;
font-family: MaisonNeue-Light;
font-weight: 700;
}
-.arch-card-caption > p{
+.arch-card-caption > p {
letter-spacing: 0.2px;
font-family: MaisonNeue-Light;
font-weight: 700;
text-align: center;
position: relative;
- bottom: -15px;
+ bottom: -15px;
font-size: 1rem;
}
-.add-left-margin{
+.add-left-margin {
position: relative;
left: 16.8%;
}
@@ -476,7 +515,7 @@ a:hover {
display: none;
}
-.feat-head-desc{
+.feat-head-desc {
font-size: 1.4rem;
color: #363130;
opacity: 0.5;
@@ -487,37 +526,37 @@ a:hover {
width: fit-content;
}
-.feat-desc{
+.feat-desc {
margin: 10px 0;
font-size: 1.13rem;
- color: #615D5D;
+ color: #615d5d;
font-weight: 700;
font-family: MaisonNeue-Light;
width: 65%;
left: 17%;
}
-.add-left-margin-feat{
+.add-left-margin-feat {
position: absolute;
left: 34%;
}
-.i-text{
+.i-text {
font-family: MaisonNeue-Demi;
font-size: 2rem;
padding: 0 0 200px 0;
}
-.text-div{
+.text-div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
-.i-text-desc{
+.i-text-desc {
font-size: 1.13rem;
- color: #615D5D;
+ color: #615d5d;
font-weight: 700;
font-family: MaisonNeue-Light;
}
@@ -532,27 +571,27 @@ a:hover {
filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.25));
}
-.n-image{
+.n-image {
opacity: 0;
width: auto;
height: 90%;
border-radius: 10px;
max-height: 100%;
max-width: 200%;
- filter: drop-shadow(0px 4px 10px rgb(0,0,0,0.25));
+ filter: drop-shadow(0px 4px 10px rgb(0, 0, 0, 0.25));
}
-.i-image-col{
+.i-image-col {
opacity: 1;
width: 100%;
height: auto;
max-height: 100%;
max-width: 100%;
margin: 0 0 20px 0;
- filter: drop-shadow(0px 4px 10px rgb(0,0,0,0.25));
+ filter: drop-shadow(0px 4px 10px rgb(0, 0, 0, 0.25));
}
-.imagePosition{
+.imagePosition {
position: absolute;
bottom: 10px;
left: 30px;
@@ -566,18 +605,215 @@ a:hover {
.i-text-desc-col {
font-size: 0.95rem;
- color: #615D5D;
+ color: #615d5d;
font-weight: 700;
font-family: MaisonNeue-Light;
width: 80%;
}
-.hiddenDiv-col{
+.hiddenDiv-col {
opacity: 0;
}
+.dashboard-playground-link {
+ bottom: 14%;
+ color: hsl(0, 0%, 80%);
+}
+
+.dashboard-playground-link:hover {
+ color: hsl(0, 0%, 80%);
+}
+
+@media (min-width: 1600px) and (max-width: 2080px) {
+ .dashboard-playground-link {
+ bottom: 18%;
+ }
+}
+
+.dashboard-playground {
+ background-color: hsl(0, 100%, 0%);
+ font-family: "MaisonNeue-Bold", sans-serif;
+
+ --height: 130px;
+ --width: calc(var(--height) * 2.048);
+ --radius: calc(var(--height) * 0.168);
+ height: var(--height);
+ width: var(--width);
+ border-radius: var(--radius);
+ padding: calc(var(--radius) - 6px);
+
+ display: flex;
+ flex-direction: column;
+
+ position: relative;
+ left: calc(var(--width) * -0.05);
+ overflow: hidden;
+
+ transform: scale3d(0.95, 0.95, 1);
+ transition: all 200ms cubic-bezier(0.65, 0.05, 0.36, 1);
+}
+
+.dashboard-playground::before {
+ content: "";
+ width: calc(100% - 6px);
+ height: calc(100% - 6px);
+ border-radius: inherit;
+ position: absolute;
+ top: 3px;
+ left: 3px;
+ backdrop-filter: blur(2px);
+ opacity: 0;
+ transition: opacity 300ms ease-in-out;
+}
+
+.dashboard-playground::after {
+ content: "APISIX";
+
+ position: absolute;
+ top: 5px;
+ left: -35%;
+
+ font-size: 8.5rem;
+ font-weight: bolder;
+ line-height: 1;
+ color: #ffffff;
+ opacity: 0.06;
+}
+
+.dashboard-playground:hover {
+ transform: scale3d(1, 1, 1);
+ box-shadow: 0 0 0 1px hsla(213, 26%, 28%, 0.2),
+ 0 3px 2px hsla(0, 0%, 0%, 0.14),
+ 0 7px 5px hsla(0, 0%, 0%, 0.12),
+ 0 13px 10px hsla(0, 0%, 0%, 0.05),
+ 0 22px 17px hsla(0, 0%, 0%, 0.08);
+}
+
+.dashboard-playground:active {
+ transform: scale3d(0.95, 0.95, 1);
+}
+
+.dashboard-title {
+ font-size: 1.35rem;
+ font-family: "MaisonNeue-ExtraBold", sans-serif;
+ white-space: nowrap;
+
+ flex-grow: 1;
+
+ background-image: linear-gradient(135deg, hsl(0, 73%, 50%), hsl(227, 90%,
65%));
+ background-clip: text;
+ text-fill-color: transparent;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+
+ width: fit-content;
+
+ position: relative;
+}
+
+.dashboard-playground:hover .dashboard-title {
+ animation: pulse 3s linear infinite;
+}
+
+@keyframes pulse {
+ from {
+ filter: hue-rotate(0);
+ }
+ to {
+ filter: hue-rotate(360deg);
+ }
+}
+
+.dashboard-account {
+ font-variant: small-caps;
+ line-height: normal;
+ letter-spacing: 1px;
+ position: relative;
+ opacity: 0.8;
+}
+
+.dashboard-account::after {
+ content: "↑";
+
+ font-family: "MaisonNeue-Light", sans-serif;
+ font-size: 2.5rem;
+ line-height: 2rem;
+
+ position: absolute;
+ top: 2px;
+ right: 8px;
+ opacity: 0;
+ color: hsl(0, 0%, 70%);
+
+ transform: rotate(90deg);
+ transition: opacity 300ms ease-in-out;
+}
+
+.dashboard-playground:hover .dashboard-account {
+ opacity: 0.9;
+}
+
+.dashboard-playground:hover .dashboard-account::after {
+ opacity: 0.6;
+ animation: bounce 1.8s ease-in-out infinite;
+}
+
+@keyframes bounce {
+ from,
+ 20%,
+ 53%,
+ to {
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ transform: rotate(90deg) translate3d(0, 0, 0);
+ }
+
+ 40%,
+ 43% {
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ transform: rotate(90deg) translate3d(0, 30px, 0) scaleY(1.1);
+ }
+
+ 70% {
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ transform: rotate(90deg) translate3d(0, 15px, 0) scaleY(1.05);
+ }
+
+ 80% {
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ transform: rotate(90deg) translate3d(0, 0, 0) scaleY(0.95);
+ }
+
+ 90% {
+ transform: rotate(90deg) translate3d(0, 4px, 0) scaleY(1.02);
+ }
+}
+
+
+.dashboard-account span {
+ font-family: "MaisonNeue-Medium", sans-serif;
+ font-variant: normal;
+ letter-spacing: normal;
+ font-size: 0.9rem;
+}
+
+
+.btn-try-demo {
+ text-align: center;
+ display: block;
+ width: 100%;
+ border-radius: 6px;
+ background-color: #ebedf0;
+ color: #615d5d;
+ transition: all 300ms;
+}
+
+.btn-try-demo:hover {
+ color: currentColor;
+ background-color: rgba(0, 0, 0, 0.3);
+}
+
/*benefits section*/
-.row-benefit{
+.row-benefit {
margin: 100px 5px;
display: flex;
justify-content: center;
@@ -585,12 +821,12 @@ a:hover {
height: fit-content;
}
-.benefit{
+.benefit {
background: #fff8f6;
padding: 50px 0;
}
-.benefit-infograph{
+.benefit-infograph {
width: 50%;
display: flex;
justify-content: center;
@@ -603,11 +839,11 @@ a:hover {
}
.table tbody td:nth-child(even) {
- background: rgba(14,30,37,.02);
+ background: rgba(14, 30, 37, 0.02);
}
.table tbody tr:nth-child(odd) {
- background: rgba(14,30,37,.02);
+ background: rgba(14, 30, 37, 0.02);
}
.table thead {
@@ -617,8 +853,9 @@ a:hover {
.table {
background: #fff;
border-radius: 8px;
- box-shadow: 0 0 0 1px rgba(255,255,255,.1),0 2px 4px 0 rgba(14,30,37,.12);
- color: rgba(14,30,37,.87);
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1),
+ 0 2px 4px 0 rgba(14, 30, 37, 0.12);
+ color: rgba(14, 30, 37, 0.87);
font-size: 1.13rem;
margin: 1em auto;
border-collapse: collapse;
@@ -630,10 +867,11 @@ a:hover {
display: table;
}
-.table td, .table th {
+.table td,
+.table th {
font-weight: 700;
min-width: 11.089em;
- padding: .85rem 1rem;
+ padding: 0.85rem 1rem;
text-align: center;
}
@@ -647,12 +885,13 @@ a:hover {
font-weight: 700;
}
-.table td:first-child, .table th:first-child {
+.table td:first-child,
+.table th:first-child {
text-align: left;
}
/*opensource and docs promotion*/
-.docs-promo{
+.docs-promo {
display: flex;
padding: 100px 0;
background: #fff8f6;
@@ -672,7 +911,7 @@ a:hover {
width: 50%;
}
-.docs-promo-video>iframe {
+.docs-promo-video > iframe {
width: 500px;
height: 288px;
}
@@ -721,7 +960,8 @@ a:hover {
color: #080808;
border-style: solid;
}
-.oss-promo-cta>a:hover {
+
+.oss-promo-cta > a:hover {
color: #080808;
}
@@ -736,11 +976,11 @@ a:hover {
.event-card {
border-style: solid;
border-color: #fff;
- box-shadow: 0px 4px 23px rgba(0, 0, 0, 0.10);
+ box-shadow: 0px 4px 23px rgba(0, 0, 0, 0.1);
font-size: 0.95rem;
font-family: MaisonNeue-Light;
font-weight: 700;
- padding: 20px ;
+ padding: 20px;
width: 230px;
height: 200px;
margin: 0 20px;
@@ -752,11 +992,13 @@ a:hover {
position: absolute;
top: 25px;
}
+
.event-card-time {
position: absolute;
top: 55%;
color: #6a6a6a;
}
+
.event-card-read {
position: absolute;
bottom: 25px;
@@ -767,7 +1009,7 @@ a:hover {
font-weight: 700;
font-family: MaisonNeue-Light;
font-size: 0.95rem;
- color: #615D5D;
+ color: #615d5d;
letter-spacing: 0.2px;
align-items: center;
justify-content: center;
@@ -786,6 +1028,7 @@ a:hover {
text-decoration: none;
transition: all 0.3s;
}
+
.news-button:hover {
background: #9b9b9b;
color: white;
@@ -794,7 +1037,7 @@ a:hover {
.endcta-text {
text-align: center;
- font-size: 3.5rem;
+ font-size: 3.5rem;
font-family: MaisonNeue-ExtraBold;
}
@@ -815,13 +1058,16 @@ a:hover {
/* margin-top: 2rem; */
font-family: MaisonNeue-Medium !important;
}
+
.footer__links .footer__title {
font-weight: 700;
font-size: 1.1rem;
}
+
.footer__links .footer__item a {
opacity: 0.94;
}
+
.footer__links a:hover {
opacity: 1;
text-decoration: none;
@@ -830,21 +1076,22 @@ a:hover {
.footer__bottom {
margin-top: 36px;
}
-.footer__bottom a[href^="https://www.apache.org/";]
-{
+
+.footer__bottom a[href^="https://www.apache.org/";] {
opacity: 1;
}
-.footer__bottom a[href^="https://www.apache.org/"]:hover
-{
+
+.footer__bottom a[href^="https://www.apache.org/"]:hover {
transform: scale(0.5);
}
-.footer__bottom a[href^="https://www.apache.org/";] img
-{
+
+.footer__bottom a[href^="https://www.apache.org/";] img {
margin-top: 0;
background: white;
padding: 8px 20px 6px 19px;
border-radius: 24px;
}
+
.footer__copyright {
font-size: 12px;
max-width: 680px;
@@ -860,6 +1107,7 @@ a:hover {
grid-template-columns: 1fr 1fr;
grid-gap: 36px;
}
+
.help-page .card {
padding: 24px 28px 18px 28px;
border: 1px solid #eee;
@@ -1031,8 +1279,8 @@ a:hover {
opacity: 0.2;
}
-.overflow{
- overflow: hidden;
+.overflow {
+ overflow: hidden;
}
.plugin-logo:hover {
@@ -1047,13 +1295,14 @@ a:hover {
padding-bottom: 2px;
display: flex;
}
+
.read-more-link:hover {
color: var(--color-primary);
text-decoration: var(--ifm-link-hover-decoration);
}
/*Sidebar Section*/
-.sidebar-link{
+.sidebar-link {
color: #d0312d;
}
@@ -1067,7 +1316,7 @@ a:hover {
overflow-x: hidden !important;
}
- .hero-sec-wrap{
+ .hero-sec-wrap {
display: block;
height: fit-content;
}
@@ -1076,11 +1325,11 @@ a:hover {
position: absolute;
width: 100vw;
height: 50vh;
- background: #EBE6DC;
+ background: #ebe6dc;
top: -1px;
right: 0px;
}
-
+
.hero-text {
height: 50%;
width: 100%;
@@ -1091,24 +1340,24 @@ a:hover {
width: 100vw;
font-size: 3.4rem;
}
-
+
.hero-subtitle {
font-size: 1.05rem;
line-height: 28px;
margin: 25px 0 24px 0;
padding-right: 20px;
}
-
+
.add-margin {
margin: 30px 0 0 0;
}
- .homeCanvas{
+ .homeCanvas {
width: 100vw;
height: 50vh;
}
- .hldesign-graphic{
+ .hldesign-graphic {
width: 100%;
}
@@ -1122,26 +1371,34 @@ a:hover {
top: 10px;
}
- .arch-head, .compare-head, .testimonials-head, .docs-promo-head,
.oss-promo-head {
+ .arch-head,
+ .compare-head,
+ .testimonials-head,
+ .docs-promo-head,
+ .oss-promo-head {
left: 7%;
width: 83%;
}
-
- .arch-subtitle, .compare-subtitle, .testimonials-subtitle,
.docs-promo-subtitle, .oss-promo-subtitle {
+
+ .arch-subtitle,
+ .compare-subtitle,
+ .testimonials-subtitle,
+ .docs-promo-subtitle,
+ .oss-promo-subtitle {
left: 7%;
width: 85%;
}
- .add-left-margin{
+ .add-left-margin {
position: relative;
left: 7%;
}
- .add-left-margin-feat{
+ .add-left-margin-feat {
position: absolute;
left: 7%;
}
-
+
.bottom-pos {
bottom: 34%;
}
@@ -1150,12 +1407,12 @@ a:hover {
font-size: 2.13rem;
width: 84%;
}
-
- .feat-head-desc{
+
+ .feat-head-desc {
left: 7%;
}
-
- .feat-desc{
+
+ .feat-desc {
width: 83%;
left: 7%;
}
@@ -1163,11 +1420,12 @@ a:hover {
.feat-container-d {
display: none;
}
+
.feat-container-m {
display: block;
}
- .benefit{
+ .benefit {
background: #fff8f6;
padding: 50px 0;
height: 100vh;
@@ -1184,16 +1442,16 @@ a:hover {
width: 100vw;
}
- .benefit-infograph{
+ .benefit-infograph {
width: 100%;
padding: 0 0 60px 0;
}
- .row-reverse{
+ .row-reverse {
flex-flow: column;
}
- .row-hidden{
+ .row-hidden {
opacity: 0;
}
@@ -1201,7 +1459,7 @@ a:hover {
width: 100%;
display: block;
}
-
+
.docs-promo {
flex-flow: column-reverse;
padding: 50px 0;
@@ -1211,7 +1469,7 @@ a:hover {
width: 100%;
}
- .docs-promo-video>video {
+ .docs-promo-video > video {
padding: 0 26px 35px 26px;
width: 100%;
height: auto;
@@ -1221,7 +1479,6 @@ a:hover {
flex-flow: column;
background: #121010;
padding: 50px 0 0 0;
-
}
.oss-promo-text {
@@ -1241,7 +1498,7 @@ a:hover {
flex-flow: column;
}
- .newsletter>p {
+ .newsletter > p {
text-align: center;
}
@@ -1274,13 +1531,14 @@ a:hover {
}
.bottom-pos {
- bottom: 34%;
+ bottom: 34%;
}
@media only screen and (min-device-width: 768px) and (max-device-width:
1100px) {
.feat-container-d {
display: none;
}
+
.feat-container-m {
display: block;
}
@@ -1294,16 +1552,20 @@ a:hover {
.hero-infograph {
overflow: hidden;
}
-
+
.endcta-text {
- font-size: 2.0rem;
+ font-size: 2rem;
}
-
- .arch-head, .compare-head, .testimonials-head, .docs-promo-head,
.oss-promo-head {
+
+ .arch-head,
+ .compare-head,
+ .testimonials-head,
+ .docs-promo-head,
+ .oss-promo-head {
left: 7%;
width: 93%;
}
-
+
.benefit .feat-desc {
font-size: 0.85rem;
}
@@ -1318,7 +1580,7 @@ a:hover {
width: 40vw;
font-size: 5.2rem;
}
-
+
.hero-subtitle {
width: 40vw;
}
diff --git a/website/src/pages/sections/features.jsx
b/website/src/pages/sections/features.jsx
index d2e9c43..855e875 100644
--- a/website/src/pages/sections/features.jsx
+++ b/website/src/pages/sections/features.jsx
@@ -1,7 +1,7 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
import Link from "@docusaurus/Link";
import useBaseUrl from "@docusaurus/useBaseUrl";
-import gsap from "gsap"
+import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import "../../css/customTheme.css";
@@ -10,6 +10,28 @@ import Snippet from "../../assets/images/code-sample.png";
import Plugin from "../../assets/images/pluginised.png";
import ArrowAnim from "./components/arrowAnim";
+const DashboardPlayground = () => {
+ return (
+ <Link
+ className={"dashboard-playground-link add-left-margin-feat"}
+ to={"http://106.55.144.26/user/login"}
+ >
+ <div className="dashboard-playground">
+ <h2 className={"dashboard-title"}>Dashboard Playground</h2>
+
+ <div className={"dashboard-account"}>
+ <div>
+ username <span>admin</span>
+ </div>
+ <div>
+ passwd <span>admin</span>
+ </div>
+ </div>
+ </div>
+ </Link>
+ );
+};
+
const Features = () => {
const dashboardDiv = useRef(null);
const userfDiv = useRef(null);
@@ -27,13 +49,17 @@ const Features = () => {
gsap.registerPlugin(ScrollTrigger);
- const [screenWidth, setScreenWidth] = useState(typeof window !== 'undefined'
&& window.innerWidth);
- const [screenHeight, setScreenHeight] = useState(typeof window !==
'undefined' && window.innerWidth);
+ const [screenWidth, setScreenWidth] = useState(
+ typeof window !== "undefined" && window.innerWidth
+ );
+ const [screenHeight, setScreenHeight] = useState(
+ typeof window !== "undefined" && window.innerWidth
+ );
- useEffect(()=>{
+ useEffect(() => {
setScreenHeight(window.innerHeight);
setScreenWidth(window.innerWidth);
- window.addEventListener('resize', resizeEvent, false);
+ window.addEventListener("resize", resizeEvent, false);
function resizeEvent(event) {
setScreenHeight(window.innerHeight);
@@ -41,20 +67,20 @@ const Features = () => {
}
return () => {
- window.removeEventListener('resize', resizeEvent);
- }
- }, [])
+ window.removeEventListener("resize", resizeEvent);
+ };
+ }, []);
useEffect(() => {
- const value = window.innerHeight*2;
-
+ const value = window.innerHeight * 2;
+
let tl;
let observers = [];
- if(screenWidth > 1100) {
+ if (screenWidth > 1100) {
tl = gsap.timeline({
defaults: {
- ease: "linear"
+ ease: "linear",
},
scrollTrigger: {
id: "feat",
@@ -62,52 +88,60 @@ const Features = () => {
start: "top top",
pin: pinDiv.current,
scrub: 1.5,
- end: value+"px"
- }
+ end: value + "px",
+ },
});
-
- tl.to(img1.current,{
- opacity: 0,
- })
- .to(img2.current,{
- opacity: 1,
- })
- .to(img2.current,{
+
+ tl.to(img1.current, {
opacity: 0,
})
- .to(img3.current,{
- opacity: 1,
- });
+ .to(img2.current, {
+ opacity: 1,
+ })
+ .to(img2.current, {
+ opacity: 0,
+ })
+ .to(img3.current, {
+ opacity: 1,
+ });
} else {
// Mobile
-
- const elems = [img1col.current, img2col.current, img3col.current]
- for (let i=1; i<4; i++) {
- observers.push(new IntersectionObserver((entries, opts)=>{
- entries.forEach(entry => {
- if (entry.isIntersecting) {
- observers[i-1].disconnect();
- gsap.fromTo(elems[i-1],{
- opacity: 0,
- y: 90,
- }, {
- opacity: 1,
- y: 0,
- duration: 0.5,
- ease: "power3.out",
- yoyo: true,
- yoyoEase: "power3.inOut",
+
+ const elems = [img1col.current, img2col.current, img3col.current];
+ for (let i = 1; i < 4; i++) {
+ observers.push(
+ new IntersectionObserver(
+ (entries, opts) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ observers[i - 1].disconnect();
+ gsap.fromTo(
+ elems[i - 1],
+ {
+ opacity: 0,
+ y: 90,
+ },
+ {
+ opacity: 1,
+ y: 0,
+ duration: 0.5,
+ ease: "power3.out",
+ yoyo: true,
+ yoyoEase: "power3.inOut",
+ }
+ );
+ }
});
+ },
+ {
+ root: null,
+ threshold: 0.2,
}
- }
- );
- }, {
- root: null,
- threshold: .2
- }));
+ )
+ );
}
- observers.forEach((it, index)=>{
+ observers.forEach((it, index) => {
it.observe(elems[index]);
});
}
@@ -115,71 +149,130 @@ const Features = () => {
return (
<>
- <div ref={featPin} className="feat-top" style={{padding: "50px 0"}}>
+ <div ref={featPin} className="feat-top" style={{ padding: "50px 0" }}>
<h3 className="feat-head-desc">Why APISIX ?</h3>
- <h1 className="feat-head add-left-margin">Reduce time fighting bugs,
focus on designing world-class systems</h1>
+ <h1 className="feat-head add-left-margin">
+ Reduce time fighting bugs, focus on designing world-class systems
+ </h1>
<p className="feat-desc add-left-margin">
- Apache APISIX is the first Open source API gateway, with a built-in
low-code Dashboard offering a powerful and flexible interface for developers to
use
+ Apache APISIX is the first Open source API gateway, with a built-in
+ low-code Dashboard offering a powerful and flexible interface for
+ developers to use
</p>
</div>
<div className="feat-container-d" ref={triggerDiv}>
- {/* Desktop */}
- <div className="left-pane" style={{width: "50%", height: "100%"}}>
- <div ref={dashboardDiv} style={{position: "relative"}}>
- <div className="text-div" style={{height: "100vh"}}>
- <h2 className="i-text add-left-margin-feat">Easy-to-use
dashboard</h2>
+ {/* Desktop */}
+ <div className="left-pane" style={{ width: "50%", height: "100%" }}>
+ <div ref={dashboardDiv} style={{ position: "relative" }}>
+ <div className="text-div" style={{ height: "100vh" }}>
+ <h2 className="i-text add-left-margin-feat">
+ Easy-to-use dashboard
+ </h2>
<p className="i-text-desc add-left-margin-feat">
- The Apache APISIX Dashboard is designed to make it as easy as
possible for users to operate Apache APISIX through a frontend interface. It’s
opensource and ever evolving, feel free to contribute.
+ The Apache APISIX Dashboard is designed to make it as easy as
+ possible for users to operate Apache APISIX through a frontend
+ interface. It’s opensource and ever evolving, feel free to
+ contribute.
</p>
<div className="hero-ctas add-left-margin-feat bottom-pos">
- <Link
- to={useBaseUrl("downloads")}
- className="btn btn-download">
+ <Link to={useBaseUrl("downloads")} className="btn
btn-download">
Downloads
</Link>
<ArrowAnim />
</div>
+ <DashboardPlayground />
</div>
</div>
- <div ref={userfDiv} style={{position: "relative"}}>
- <div className="text-div" style={{height: "100vh"}}>
+ <div ref={userfDiv} style={{ position: "relative" }}>
+ <div className="text-div" style={{ height: "100vh" }}>
<h2 className="i-text add-left-margin-feat">User flexible</h2>
<p className="i-text-desc add-left-margin-feat">
- The Apache APISIX dashboard is flexible to User demand,
providing option to create custom modules through code matching your
requirements, alongside the existing no-code toolchain.
+ The Apache APISIX dashboard is flexible to User demand,
+ providing option to create custom modules through code matching
+ your requirements, alongside the existing no-code toolchain.
</p>
</div>
</div>
- <div ref={pluginDiv} style={{position: "relative"}}>
- <div className="text-div" style={{height: "100vh"}}>
- <h2 className="i-text add-left-margin-feat">Pluginised
workflow</h2>
+ <div ref={pluginDiv} style={{ position: "relative" }}>
+ <div className="text-div" style={{ height: "100vh" }}>
+ <h2 className="i-text add-left-margin-feat">
+ Pluginised workflow
+ </h2>
<p className="i-text-desc add-left-margin-feat">
- No need to reinvent the wheel again and again. Use inbuilt
plugins to create high performance systems in tight deadlines. For something
custom, there is option of building custom plugins.
+ No need to reinvent the wheel again and again. Use inbuilt
+ plugins to create high performance systems in tight deadlines.
+ For something custom, there is option of building custom
+ plugins.
</p>
</div>
</div>
</div>
- <div ref={pinDiv} className="right-pane" style={{width: "50%", height:
"100vh", position: "relative", overflow: "hidden", display: "flex", alignItems:
"center", justifyContent: "center"}}>
- <img ref={img1} className="i-image imagePosition" src={Dashboard}
loading="lazy" alt="apisix-dashboard"/>
- <img ref={img2} className="n-image imagePosition" src={Snippet}
loading="lazy" alt="code-snippet"/>
- <img ref={img3} className="n-image imagePosition" src={Plugin}
loading="lazy" alt="plugin-workflow"/>
+ <div
+ ref={pinDiv}
+ className="right-pane"
+ style={{
+ width: "50%",
+ height: "100vh",
+ position: "relative",
+ overflow: "hidden",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ }}
+ >
+ <img
+ ref={img1}
+ className="i-image imagePosition"
+ src={Dashboard}
+ loading="lazy"
+ alt="apisix-dashboard"
+ />
+ <img
+ ref={img2}
+ className="n-image imagePosition"
+ src={Snippet}
+ loading="lazy"
+ alt="code-snippet"
+ />
+ <img
+ ref={img3}
+ className="n-image imagePosition"
+ src={Plugin}
+ loading="lazy"
+ alt="plugin-workflow"
+ />
</div>
</div>
- <div className="feat-container-m" ref={triggerDivCol} style={{width:
"100%"}}>
- {/* Mobile */}
- <div ref={img1col} className="hiddenDiv-col" style={{height:
"fit-content", padding: "0 0 40px 0"}}>
- <div style={{position: "relative", height: "100%"}}>
- <h2 className="add-left-margin" style={{width:
"fit-content"}}>Easy-to-use dashboard</h2>
- <img className="i-image-col" src={Dashboard} alt=""/>
+ <div
+ className="feat-container-m"
+ ref={triggerDivCol}
+ style={{ width: "100%" }}
+ >
+ {/* Mobile */}
+ <div
+ ref={img1col}
+ className="hiddenDiv-col"
+ style={{ height: "fit-content", padding: "0 0 40px 0" }}
+ >
+ <div style={{ position: "relative", height: "100%" }}>
+ <h2 className="add-left-margin" style={{ width: "fit-content" }}>
+ Easy-to-use dashboard
+ </h2>
+ <img className="i-image-col" src={Dashboard} alt="" />
<p className="i-text-desc-col add-left-margin">
- The Apache APISIX Dashboard is designed to make it as easy as
possible for users to operate Apache APISIX through a frontend interface. It’s
opensource and ever evolving, feel free to contribute.
+ The Apache APISIX Dashboard is designed to make it as easy as
+ possible for users to operate Apache APISIX through a frontend
+ interface. It’s opensource and ever evolving, feel free to
+ contribute.
</p>
- <div className="hero-ctas add-left-margin" style={{width:
"fit-content"}}>
- <Link
- to={useBaseUrl("downloads")}
- className="btn btn-download">
+ <div
+ className="hero-ctas add-left-margin"
+ style={{ width: "fit-content" }}
+ >
+ <Link to={useBaseUrl("downloads")} className="btn btn-download">
Downloads
</Link>
<ArrowAnim />
@@ -187,24 +280,40 @@ const Features = () => {
</div>
</div>
- <div ref={img2col} className="hiddenDiv-col" style={{height:
"fit-content", padding: "20px 0"}}>
- <h2 className="add-left-margin" style={{width: "fit-content"}}>User
flexible</h2>
- <img className="i-image-col" src={Snippet} alt=""/>
+ <div
+ ref={img2col}
+ className="hiddenDiv-col"
+ style={{ height: "fit-content", padding: "20px 0" }}
+ >
+ <h2 className="add-left-margin" style={{ width: "fit-content" }}>
+ User flexible
+ </h2>
+ <img className="i-image-col" src={Snippet} alt="" />
<p className="i-text-desc-col add-left-margin">
- The Apache APISIX dashboard is flexible to User demand, providing
option to create custom modules through code matching your requirements,
alongside the existing no-code toolchain.
+ The Apache APISIX dashboard is flexible to User demand, providing
+ option to create custom modules through code matching your
+ requirements, alongside the existing no-code toolchain.
</p>
</div>
- <div ref={img3col} className="hiddenDiv-col" style={{height:
"fit-content", padding: "20px 0"}}>
- <h2 className="add-left-margin" style={{width:
"fit-content"}}>Pluginised workflow</h2>
- <img className="i-image-col" src={Plugin} alt=""/>
+ <div
+ ref={img3col}
+ className="hiddenDiv-col"
+ style={{ height: "fit-content", padding: "20px 0" }}
+ >
+ <h2 className="add-left-margin" style={{ width: "fit-content" }}>
+ Pluginised workflow
+ </h2>
+ <img className="i-image-col" src={Plugin} alt="" />
<p className="i-text-desc-col add-left-margin">
- No need to reinvent the wheel again and again. Use inbuilt plugins
to create high performance systems in tight deadlines. For something custom,
there is option of building custom plugins.
+ No need to reinvent the wheel again and again. Use inbuilt plugins
+ to create high performance systems in tight deadlines. For
something
+ custom, there is option of building custom plugins.
</p>
</div>
</div>
</>
);
-}
-
+};
+
export default Features;
