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 5c80b36cd8e refactor: HomeEventsSection (#1186)
5c80b36cd8e is described below
commit 5c80b36cd8eae7f433eed7ae32b34d42df0b1396
Author: Young <[email protected]>
AuthorDate: Mon Jul 4 18:03:07 2022 +0800
refactor: HomeEventsSection (#1186)
---
website/i18n/zh/code.json | 4 +-
website/src/components/sections/Features.tsx | 511 +++++++++++----------
.../src/components/sections/HomeEventsSection.tsx | 98 ++--
website/src/css/home-events.module.scss | 120 +++++
4 files changed, 430 insertions(+), 303 deletions(-)
diff --git a/website/i18n/zh/code.json b/website/i18n/zh/code.json
index 335a37e42e8..8f36fa2380c 100644
--- a/website/i18n/zh/code.json
+++ b/website/i18n/zh/code.json
@@ -309,11 +309,11 @@
"message": "最近的一些活动"
},
"homeEventsSection.component.message.news": {
- "message": "了解 Apache APISIX™ 的最新情况，请订阅我们的",
+ "message": "了解 Apache APISIX™ 的最新情况，",
"description": "Stay up to date about all Apache APISIX™ News, subscribe
to our"
},
"homeEventsSection.component.link.newsletter": {
- "message": "邮件列表",
+ "message": "请订阅我们的邮件列表",
"description": "newsletter."
},
"homeEventsSection.component.link.Subscribe": {
diff --git a/website/src/components/sections/Features.tsx
b/website/src/components/sections/Features.tsx
index b4c76fe7c4b..479511a89f3 100644
--- a/website/src/components/sections/Features.tsx
+++ b/website/src/components/sections/Features.tsx
@@ -1,13 +1,11 @@
import type { FC } from 'react';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import Translate from '@docusaurus/Translate';
-import useWindowType from '@theme/hooks/useWindowSize';
-import BrowserOnly from '@docusaurus/BrowserOnly';
import ArrowAnim from '../ArrowAnim';
const DashboardPlayground = () => (
@@ -34,57 +32,253 @@ const DashboardPlayground = () => (
</Link>
);
-const FeatDesktop: FC = () => {
+const Features: FC = () => {
const dashboardDiv = useRef(null);
const userfDiv = useRef(null);
const pluginDiv = useRef(null);
const triggerDiv = useRef(null);
+ const triggerDivCol = useRef(null);
const pinDiv = useRef(null);
const img1 = useRef(null);
+ const img1col = useRef(null);
const img2 = useRef(null);
+ const img2col = useRef(null);
const img3 = useRef(null);
+ const img3col = useRef(null);
+ const featPin = useRef(null);
+
+ gsap.registerPlugin(ScrollTrigger);
+
+ const [screenWidth, setScreenWidth] = useState(
+ typeof window !== 'undefined' && window.innerWidth,
+ );
+ const [, setScreenHeight] = useState(
+ typeof window !== 'undefined' && window.innerWidth,
+ );
+
+ useEffect(() => {
+ setScreenHeight(window.innerHeight);
+ setScreenWidth(window.innerWidth);
+ window.addEventListener('resize', resizeEvent, false);
+
+ function resizeEvent() {
+ setScreenHeight(window.innerHeight);
+ setScreenWidth(window.innerWidth);
+ }
+
+ return () => {
+ window.removeEventListener('resize', resizeEvent);
+ };
+ }, []);
useEffect(() => {
const value = window.innerHeight * 2;
- const tl = gsap.timeline({
- defaults: {
- ease: 'linear',
- },
- scrollTrigger: {
- id: 'feat',
- trigger: triggerDiv.current,
- start: 'top top',
- pin: pinDiv.current,
- scrub: 1.5,
- end: `${value}px`,
- },
- });
+ let tl;
+ const observers = [];
- tl.to(img1.current, {
- opacity: 0,
- })
- .to(img2.current, {
- opacity: 1,
- })
- .to(img2.current, {
+ if (screenWidth > 1100) {
+ tl = gsap.timeline({
+ defaults: {
+ ease: 'linear',
+ },
+ scrollTrigger: {
+ id: 'feat',
+ trigger: triggerDiv.current,
+ start: 'top top',
+ pin: pinDiv.current,
+ scrub: 1.5,
+ end: `${value}px`,
+ },
+ });
+
+ 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 += 1) {
+ observers.push(
+ new IntersectionObserver(
+ (entries) => {
+ 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,
+ },
+ ),
+ );
+ }
+
+ observers.forEach((it, index) => {
+ it.observe(elems[index]);
});
- }, [triggerDiv.current, pinDiv.current, img1.current, img2.current,
img3.current]);
+ }
+ });
+
return (
- <div className="feat-container-d" ref={triggerDiv}>
- <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">
+ <>
+ <div ref={featPin} className="feat-top" style={{ padding: '50px 0' }}>
+ <h3 className="feat-head-desc"><Translate
id="features.component.why.title">Why APISIX Gateway?</Translate></h3>
+ <h2 className="feat-head add-left-margin">
+ <Translate id="features.component.why.subtitle">
+ Reduce time fighting bugs, focus on designing world-class systems
with API Gateway
+ </Translate>
+ </h2>
+ <p className="feat-desc add-left-margin">
+ <Translate id="features.component.why.message">
+ Apache APISIX is the first open-source API Gateway
+ that includes a built-in low-code Dashboard,
+ which offers a powerful and flexible UI for developers to use.
+ </Translate>
+ </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">
+ <Translate id="features.component.easyDashboard.title">
+ Easy-to-use Dashboard
+ </Translate>
+ </h2>
+ <p className="i-text-desc add-left-margin-feat">
+ <Translate id="features.component.easyDashboard.message">
+ 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.
+ </Translate>
+ </p>
+ <div className="hero-ctas add-left-margin-feat bottom-pos">
+ <Link to={useBaseUrl('downloads')} className="btn
btn-download">
+ <Translate
id="features.component.easyDashboard.downloadBtn">Downloads</Translate>
+ </Link>
+ <ArrowAnim />
+ </div>
+ <DashboardPlayground />
+ </div>
+ </div>
+
+ <div ref={userfDiv} style={{ position: 'relative' }}>
+ <div className="text-div" style={{ height: '100vh' }}>
+ <h2 className="i-text add-left-margin-feat">
+ <Translate id="features.component.userFlexible.title">User
Flexible</Translate>
+ </h2>
+ <p className="i-text-desc add-left-margin-feat">
+ <Translate id="features.component.userFlexible.message">
+ 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.
+ </Translate>
+ </p>
+ </div>
+ </div>
+
+ <div ref={pluginDiv} style={{ position: 'relative' }}>
+ <div className="text-div" style={{ height: '100vh' }}>
+ <h2 className="i-text add-left-margin-feat">
+ <Translate id="features.component.pluginised.title">Pluginised
Workflow</Translate>
+ </h2>
+ <p className="i-text-desc add-left-margin-feat">
+ <Translate id="features.component.pluginised.message">
+ 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.
+ </Translate>
+ </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="https://static.apiseven.com/202202/apisix-dashboard.png";
+ loading="lazy"
+ alt="apisix-dashboard"
+ />
+ <img
+ ref={img2}
+ className="n-image imagePosition"
+ src="https://static.apiseven.com/202202/code-sample.png";
+ loading="lazy"
+ alt="code-snippet"
+ />
+ <img
+ ref={img3}
+ className="n-image imagePosition"
+ src="https://static.apiseven.com/202202/pluginised.png";
+ 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' }}>
<Translate id="features.component.easyDashboard.title">
- Easy-to-use Dashboard
+ Easy-to-use dashboard
</Translate>
</h2>
- <p className="i-text-desc add-left-margin-feat">
+ <img className="i-image-col"
src="https://static.apiseven.com/202202/apisix-dashboard.png"; alt="Dashboard" />
+ <p className="i-text-desc-col add-left-margin">
<Translate id="features.component.easyDashboard.message">
The Apache APISIX Dashboard is designed to make it as easy as
possible for users to operate Apache APISIX through a frontend
@@ -92,241 +286,56 @@ const FeatDesktop: FC = () => {
contribute.
</Translate>
</p>
- <div className="hero-ctas add-left-margin-feat bottom-pos">
+ <div
+ className="hero-ctas add-left-margin"
+ style={{ width: 'fit-content' }}
+ >
<Link to={useBaseUrl('downloads')} className="btn btn-download">
<Translate
id="features.component.easyDashboard.downloadBtn">Downloads</Translate>
</Link>
<ArrowAnim />
</div>
- <DashboardPlayground />
- </div>
- </div>
-
- <div ref={userfDiv} style={{ position: 'relative' }}>
- <div className="text-div" style={{ height: '100vh' }}>
- <h2 className="i-text add-left-margin-feat">
- <Translate id="features.component.userFlexible.title">User
Flexible</Translate>
- </h2>
- <p className="i-text-desc add-left-margin-feat">
- <Translate id="features.component.userFlexible.message">
- 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.
- </Translate>
- </p>
</div>
</div>
- <div ref={pluginDiv} style={{ position: 'relative' }}>
- <div className="text-div" style={{ height: '100vh' }}>
- <h2 className="i-text add-left-margin-feat">
- <Translate id="features.component.pluginised.title">Pluginised
Workflow</Translate>
- </h2>
- <p className="i-text-desc add-left-margin-feat">
- <Translate id="features.component.pluginised.message">
- 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.
- </Translate>
- </p>
- </div>
+ <div
+ ref={img2col}
+ className="hiddenDiv-col"
+ style={{ height: 'fit-content', padding: '20px 0' }}
+ >
+ <h2 className="add-left-margin" style={{ width: 'fit-content' }}>
+ <Translate id="features.component.userFlexible.title">User
Flexible</Translate>
+ </h2>
+ <img className="i-image-col"
src="https://static.apiseven.com/202202/code-sample.png"; alt="code-sample" />
+ <p className="i-text-desc-col add-left-margin">
+ <Translate id="features.component.userFlexible.message">
+ 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.
+ </Translate>
+ </p>
</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="https://static.apiseven.com/202202/apisix-dashboard.png";
- loading="lazy"
- alt="apisix-dashboard"
- />
- <img
- ref={img2}
- className="n-image imagePosition"
- src="https://static.apiseven.com/202202/code-sample.png";
- loading="lazy"
- alt="code-snippet"
- />
- <img
- ref={img3}
- className="n-image imagePosition"
- src="https://static.apiseven.com/202202/pluginised.png";
- loading="lazy"
- alt="plugin-workflow"
- />
- </div>
- </div>
- );
-};
-
-const FeatMobile: FC = () => {
- const observers = [];
- const img1col = useRef(null);
- const img2col = useRef(null);
- const img3col = useRef(null);
-
- useEffect(() => {
- const elems = [img1col.current, img2col.current, img3col.current];
- for (let i = 1; i < 4; i += 1) {
- observers.push(
- new IntersectionObserver(
- (entries) => {
- 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,
- },
- ),
- );
- }
-
- observers.forEach((it, index) => {
- it.observe(elems[index]);
- });
- }, [img1col.current, img2col.current, img3col.current]);
-
- return (
- <div
- className="feat-container-m"
- style={{ width: '100%' }}
- >
- <div
- ref={img1col}
- className="hiddenDiv-col"
- style={{ height: 'fit-content', padding: '0 0 40px 0' }}
- >
- <div style={{ position: 'relative', height: '100%' }}>
+ <div
+ ref={img3col}
+ className="hiddenDiv-col"
+ style={{ height: 'fit-content', padding: '20px 0' }}
+ >
<h2 className="add-left-margin" style={{ width: 'fit-content' }}>
- <Translate id="features.component.easyDashboard.title">
- Easy-to-use dashboard
- </Translate>
+ <Translate id="features.component.pluginised.title">Pluginised
Workflow</Translate>
</h2>
- <img className="i-image-col"
src="https://static.apiseven.com/202202/apisix-dashboard.png"; alt="Dashboard" />
+ <img className="i-image-col"
src="https://static.apiseven.com/202202/pluginised.png"; alt="Plugin" />
<p className="i-text-desc-col add-left-margin">
- <Translate id="features.component.easyDashboard.message">
- 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.
+ <Translate id="features.component.pluginised.message">
+ 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.
</Translate>
</p>
- <div
- className="hero-ctas add-left-margin"
- style={{ width: 'fit-content' }}
- >
- <Link to={useBaseUrl('downloads')} className="btn btn-download">
- <Translate
id="features.component.easyDashboard.downloadBtn">Downloads</Translate>
- </Link>
- <ArrowAnim />
- </div>
</div>
</div>
-
- <div
- ref={img2col}
- className="hiddenDiv-col"
- style={{ height: 'fit-content', padding: '20px 0' }}
- >
- <h2 className="add-left-margin" style={{ width: 'fit-content' }}>
- <Translate id="features.component.userFlexible.title">User
Flexible</Translate>
- </h2>
- <img className="i-image-col"
src="https://static.apiseven.com/202202/code-sample.png"; alt="code-sample" />
- <p className="i-text-desc-col add-left-margin">
- <Translate id="features.component.userFlexible.message">
- 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.
- </Translate>
- </p>
- </div>
-
- <div
- ref={img3col}
- className="hiddenDiv-col"
- style={{ height: 'fit-content', padding: '20px 0' }}
- >
- <h2 className="add-left-margin" style={{ width: 'fit-content' }}>
- <Translate id="features.component.pluginised.title">Pluginised
Workflow</Translate>
- </h2>
- <img className="i-image-col"
src="https://static.apiseven.com/202202/pluginised.png"; alt="Plugin" />
- <p className="i-text-desc-col add-left-margin">
- <Translate id="features.component.pluginised.message">
- 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.
- </Translate>
- </p>
- </div>
- </div>
- );
-};
-
-const FeatContainer: FC = () => {
- gsap.registerPlugin(ScrollTrigger);
- const windowType = useWindowType();
-
- return (
- <BrowserOnly>
- {() => (windowType === 'desktop'
- ? <FeatDesktop />
- : <FeatMobile />)}
- </BrowserOnly>
+ </>
);
};
-const Features: FC = () => (
- <>
- <div className="feat-top" style={{ padding: '50px 0' }}>
- <h3 className="feat-head-desc"><Translate
id="features.component.why.title">Why APISIX Gateway?</Translate></h3>
- <h2 className="feat-head add-left-margin">
- <Translate id="features.component.why.subtitle">
- Reduce time fighting bugs, focus on designing world-class systems
with API Gateway
- </Translate>
- </h2>
- <p className="feat-desc add-left-margin">
- <Translate id="features.component.why.message">
- Apache APISIX is the first open-source API Gateway
- that includes a built-in low-code Dashboard,
- which offers a powerful and flexible UI for developers to use.
- </Translate>
- </p>
- </div>
- <FeatContainer />
- </>
-);
-
export default Features;
diff --git a/website/src/components/sections/HomeEventsSection.tsx
b/website/src/components/sections/HomeEventsSection.tsx
index d793114dad3..d3b3ec09026 100644
--- a/website/src/components/sections/HomeEventsSection.tsx
+++ b/website/src/components/sections/HomeEventsSection.tsx
@@ -4,75 +4,73 @@ import useDocusaurusContext from
'@docusaurus/useDocusaurusContext';
import Translate from '@docusaurus/Translate';
-import ChevronRight from '../../assets/icons/chevron-right.svg';
+import style from '../../css/home-events.module.scss';
interface EventInfo {
title: string;
fileName: string;
}
-const HomeEventsSection: FC = () => {
+const Events:FC = () => {
const { siteConfig } = useDocusaurusContext();
const events = (siteConfig.customFields.events as EventInfo[])
.slice(0, 4)
.map((event) => {
const publishTime = event.fileName.slice(0, 10);
- const splittedFileName = event.fileName.split('-');
- const url = `/blog/${splittedFileName
- .slice(0, 3)
- .join('/')}/${splittedFileName.slice(3).join('-')}`;
+ const fileNameArr = event.fileName.split('-');
+ const url = `/blog/${fileNameArr.slice(0,
3).join('/')}/${fileNameArr.slice(3).join('-')}`;
return (
- <div className="event-card" key={event.title}>
- <a className="event-item" href={url} target="_blank"
rel="noreferrer">
- <div className="event-card-title">{event.title}</div>
- <div className="event-card-time">{publishTime}</div>
- <div className="event-card-read">
- Read
- {' '}
- <ChevronRight style={{ width: '6px' }} />
+ <a className={style.eventCard} key={event.title} href={url}
target="_blank" rel="noreferrer">
+ <time dateTime={publishTime}>{publishTime}</time>
+ <h4>{event.title}</h4>
+ <div>
+ Read More
+ <div className={style.arrow}>
+ <svg width="50%" height="100%" viewBox="0 0 256 256">
+ <polygon fill="currentcolor" points="208,128 80,0 52.8,27.2
140.3,128 53,228.9 80,256" />
+ <rect fill="currentcolor" x="-256" y="115" width="256"
height="30" />
+ </svg>
</div>
- </a>
- </div>
+ </div>
+ </a>
);
});
return (
- <div className="news" style={{ padding: '50px 0' }}>
- <div>
- <h3
- className="docs-promo-head"
- style={{ width: '100%', textAlign: 'center', left: '0' }}
- >
- <Translate id="homeEventsSection.component.title">Stay updated about
APISIX</Translate>
- </h3>
- <p
- className="docs-promo-subtitle"
- style={{ width: '100%', textAlign: 'center', left: '0' }}
- >
- <Translate id="homeEventsSection.component.subtitle">Some Recent
events</Translate>
- </p>
- <div className="event-card-container">{events}</div>
- </div>
- <div className="newsletter">
- <p>
- <Translate id="homeEventsSection.component.message.news">
- Stay up to date about all Apache APISIX® News, subscribe to our
- </Translate>
- {' '}
- <a href="/docs/general/join/">
- <Translate id="homeEventsSection.component.link.newsletter">
- newsletter.
- </Translate>
- </a>
- </p>
- <a className="news-button" href="/docs/general/join">
- <Translate id="homeEventsSection.component.link.Subscribe">
- Subscribe
- </Translate>
- </a>
- </div>
+ <div className={style.events}>
+ {events}
</div>
);
};
+const HomeEventsSection: FC = () => (
+ <div className={style.homeEvents}>
+ <h3>
+ <Translate id="homeEventsSection.component.title">Stay updated about
APISIX</Translate>
+ </h3>
+ <p>
+ <Translate id="homeEventsSection.component.subtitle">Some Recent
events</Translate>
+ </p>
+ <Events />
+ <div className={style.newsletter}>
+ <p>
+ <Translate id="homeEventsSection.component.message.news">
+ Stay up to date about all Apache APISIX® News,
+ </Translate>
+ {' '}
+ <a href="/docs/general/join/">
+ <Translate id="homeEventsSection.component.link.newsletter">
+ subscribe to our newsletter.
+ </Translate>
+ </a>
+ </p>
+ <a className="news-button" href="/docs/general/join">
+ <Translate id="homeEventsSection.component.link.Subscribe">
+ Subscribe Now
+ </Translate>
+ </a>
+ </div>
+ </div>
+);
+
export default HomeEventsSection;
diff --git a/website/src/css/home-events.module.scss
b/website/src/css/home-events.module.scss
new file mode 100644
index 00000000000..400c7bcd158
--- /dev/null
+++ b/website/src/css/home-events.module.scss
@@ -0,0 +1,120 @@
+@import "./util";
+
+.arrow {
+ $size: 25px;
+
+ width: $size;
+ height: $size;
+ position: relative;
+ margin-bottom: 1px;
+
+ svg {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ overflow: visible;
+ }
+
+ polygon,
+ rect {
+ transition: all 250ms;
+ }
+
+ rect {
+ opacity: 0;
+ }
+}
+
+.homeEvents {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 8em 10%;
+
+ h3 {
+ font-size: 2.4rem;
+ }
+
+ p {
+ color: #615d5d;
+ font-size: 1.13rem;
+ letter-spacing: 0.2px;
+ font-family: MaisonNeue-Light, sans-serif;
+ font-weight: 700;
+ }
+
+ & .events {
+ display: flex;
+ justify-content: center;
+
+ & .eventCard {
+ display: flex;
+ flex-direction: column;
+ font-size: 0.9rem;
+ height: 200px;
+ width: 282px;
+ transition: all 0.2s ease-in-out;
+ margin: 0 1rem;
+ border-radius: 1rem;
+ border: 1px solid hsl(210deg 26% 28% / 14%);
+ padding: 1rem;
+
+ & > time {
+ color: hsl(0deg 0% 78%);
+ }
+
+ & > h4 {
+ flex-shrink: 0;
+ flex-grow: 1;
+ color: hsl(0deg 0% 30%);
+ }
+
+ & > div {
+ color: hsl(0deg 0% 60%);
+ display: flex;
+ align-items: center;
+ }
+
+ &:hover {
+ transform: scale3d(1.03, 1.03, 1);
+
+ polygon {
+ transform: translateX(100px) !important;
+ }
+
+ rect {
+ transform: translateX(240px) !important;
+ opacity: 1 !important;
+ }
+ }
+ }
+ }
+
+ .newsletter {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+
+ p {
+ margin: 2rem 0 1rem;
+ }
+ }
+
+ @include respond-below(sm) {
+ margin: 4rem 1rem;
+ align-items: flex-start;
+
+ & .events {
+ overflow-x: scroll;
+ width: 100%;
+ display: flex;
+ justify-content: flex-start;
+ padding-bottom: 1rem;
+
+ & .eventCard {
+ flex-shrink: 0;
+ }
+ }
+ }
+}
![https://static.apiseven.com/202202/apisix-dashboard.png"](https://static.apiseven.com/202202/apisix-dashboard.png"){kind=link}
![https://static.apiseven.com/202202/code-sample.png"](https://static.apiseven.com/202202/code-sample.png"){kind=link}
![https://static.apiseven.com/202202/pluginised.png"](https://static.apiseven.com/202202/pluginised.png"){kind=link}