This is an automated email from the ASF dual-hosted git repository.
wanggenhua pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler-website.git
The following commit(s) were added to refs/heads/master by this push:
new 48dbf37cdc [Improvement] Some improvements. (#854)
48dbf37cdc is described below
commit 48dbf37cdcded32589f86671dccf98bda85a685e
Author: Amy0104 <[email protected]>
AuthorDate: Tue Dec 13 15:44:58 2022 +0800
[Improvement] Some improvements. (#854)
---
public/highlight.min.css | 9 +++
public/images/home/home-1-1.png | Bin 65033 -> 58283 bytes
public/images/home/home-1-2.png | Bin 58532 -> 75449 bytes
public/images/home/home-1-3.png | Bin 163230 -> 189422 bytes
public/images/home/home-1-4.png | Bin 98395 -> 165431 bytes
public/images/home/home-3-1.png | Bin 93133 -> 93322 bytes
public/images/home/home-3-2.png | Bin 103580 -> 69974 bytes
public/images/home/home-3-3.png | Bin 93322 -> 103580 bytes
public/images/home/home-3-4.png | Bin 69974 -> 93133 bytes
public/index.html | 1 +
public/worker/db.js | 3 +
scripts/generate_blog.js | 3 +
src/components/NavBar/index.jsx | 12 ++++
src/components/NavBar/index.scss | 8 +++
src/components/NavBar/{useMenu.js => useMenu.jsx} | 31 +++++----
src/utils/formatDate.js | 5 ++
src/views/Documentation/detail.scss | 15 +++++
src/views/Home/Events.jsx | 2 +-
src/views/Home/Main.jsx | 44 ++++++-------
src/views/Home/Why.jsx | 76 ++++++++++------------
src/views/Home/index.scss | 3 +-
src/views/Search/index.jsx | 70 +++++++++++++++++++-
src/views/Search/index.scss | 19 ++++++
src/views/UseCase/index.jsx | 6 +-
src/views/UseCase/index.scss | 5 ++
25 files changed, 229 insertions(+), 83 deletions(-)
diff --git a/public/highlight.min.css b/public/highlight.min.css
new file mode 100644
index 0000000000..a75ea91162
--- /dev/null
+++ b/public/highlight.min.css
@@ -0,0 +1,9 @@
+/*!
+ Theme: Default
+ Description: Original highlight.js style
+ Author: (c) Ivan Sagalaev <[email protected]>
+ Maintainer: @highlightjs/core-team
+ Website: https://highlightjs.org/
+ License: see project LICENSE
+ Touched: 2021
+*/pre
code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px
5px}.hljs{background:#f3f3f3;color:#444}.hljs-comment{color:#697070}.hljs-punctuation,.hljs-tag{color:#444a}.hljs-tag
.hljs-attr,.hljs-tag
.hljs-name{color:#444}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta
.hljs-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}.hlj
[...]
\ No newline at end of file
diff --git a/public/images/home/home-1-1.png b/public/images/home/home-1-1.png
index 9b4bf3ec47..dda926ba0b 100644
Binary files a/public/images/home/home-1-1.png and
b/public/images/home/home-1-1.png differ
diff --git a/public/images/home/home-1-2.png b/public/images/home/home-1-2.png
index a03cd36448..1de832f6a6 100644
Binary files a/public/images/home/home-1-2.png and
b/public/images/home/home-1-2.png differ
diff --git a/public/images/home/home-1-3.png b/public/images/home/home-1-3.png
index 918372b6a1..c6b4b1187a 100644
Binary files a/public/images/home/home-1-3.png and
b/public/images/home/home-1-3.png differ
diff --git a/public/images/home/home-1-4.png b/public/images/home/home-1-4.png
index 57a5c55480..9d7333e56e 100644
Binary files a/public/images/home/home-1-4.png and
b/public/images/home/home-1-4.png differ
diff --git a/public/images/home/home-3-1.png b/public/images/home/home-3-1.png
index 323106fc3f..565d4f871f 100644
Binary files a/public/images/home/home-3-1.png and
b/public/images/home/home-3-1.png differ
diff --git a/public/images/home/home-3-2.png b/public/images/home/home-3-2.png
index 8d69207d97..023244ca7d 100644
Binary files a/public/images/home/home-3-2.png and
b/public/images/home/home-3-2.png differ
diff --git a/public/images/home/home-3-3.png b/public/images/home/home-3-3.png
index 565d4f871f..8d69207d97 100644
Binary files a/public/images/home/home-3-3.png and
b/public/images/home/home-3-3.png differ
diff --git a/public/images/home/home-3-4.png b/public/images/home/home-3-4.png
index 023244ca7d..323106fc3f 100644
Binary files a/public/images/home/home-3-4.png and
b/public/images/home/home-3-4.png differ
diff --git a/public/index.html b/public/index.html
index 4e16f28339..9e1f5da12c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,6 +15,7 @@
user's mobile device or desktop. See
https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+ <link rel="stylesheet" href="%PUBLIC_URL%/highlight.min.css" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
diff --git a/public/worker/db.js b/public/worker/db.js
index 00b61c8ad6..ae8132e0de 100644
--- a/public/worker/db.js
+++ b/public/worker/db.js
@@ -94,6 +94,9 @@ const searchEvent = async (value) => {
i: index,
title: replaceStr(item.title, value, 100, index),
time: new Date(item.time).getTime(),
+ post: item.post,
+ video_url: item.video_url,
+ more: item.more,
});
}
}
diff --git a/scripts/generate_blog.js b/scripts/generate_blog.js
index ee8b5e8d47..f43081582a 100644
--- a/scripts/generate_blog.js
+++ b/scripts/generate_blog.js
@@ -76,6 +76,9 @@ const formatEventsData = (lang) => {
title: event.title,
desc: event.title,
time: event.startTime,
+ post: event.post?.name,
+ more: event.more,
+ vedio_url: event.vedio_url,
});
if (event.post) {
events.push(event.post);
diff --git a/src/components/NavBar/index.jsx b/src/components/NavBar/index.jsx
index 7234183e39..63818b43ad 100644
--- a/src/components/NavBar/index.jsx
+++ b/src/components/NavBar/index.jsx
@@ -41,6 +41,18 @@ const NavBar = () => {
<div className="navbar-menu">
<Menu
onSelect={({ key }) => {
+ if (
+ [
+ "apache",
+ "foundation",
+ "license",
+ "apache-events",
+ "security",
+ "sponsorship",
+ "thanks",
+ ].includes(key)
+ )
+ return;
navigate(
key !== "docs"
? `/${locale}/${key}`
diff --git a/src/components/NavBar/index.scss b/src/components/NavBar/index.scss
index b0090deaf1..e935758d52 100644
--- a/src/components/NavBar/index.scss
+++ b/src/components/NavBar/index.scss
@@ -48,6 +48,10 @@
border: none;
font-size: 16px;
+ .ant-space-item {
+ font-size: 16px;
+ }
+
@media screen and (max-width: 640px) {
font-size: 14px;
flex-grow: initial;
@@ -55,6 +59,10 @@
.ant-menu-overflow-item {
padding-inline: 8px;
}
+
+ .ant-space-item {
+ font-size: 14px;
+ }
}
}
diff --git a/src/components/NavBar/useMenu.js
b/src/components/NavBar/useMenu.jsx
similarity index 77%
rename from src/components/NavBar/useMenu.js
rename to src/components/NavBar/useMenu.jsx
index e754834057..c5997ef4ca 100644
--- a/src/components/NavBar/useMenu.js
+++ b/src/components/NavBar/useMenu.jsx
@@ -1,3 +1,6 @@
+import { Space } from "antd";
+import { CaretDownOutlined } from "@ant-design/icons";
+
export const useMenu = (t) => {
return [
{
@@ -5,7 +8,12 @@ export const useMenu = (t) => {
key: "docs",
},
{
- label: t("community"),
+ label: (
+ <Space size="small" align="center">
+ <span>{t("community")}</span>
+ <CaretDownOutlined />
+ </Space>
+ ),
key: "community-menu",
children: [
{
@@ -31,16 +39,17 @@ export const useMenu = (t) => {
key: "support",
},
{
- label: "Apache",
+ label: (
+ <Space size="small" align="center">
+ <span>Apache</span>
+ <CaretDownOutlined />
+ </Space>
+ ),
key: "apache",
children: [
{
label: (
- <a
- href="https://www.apache.org/";
- target="_blank"
- rel="noopener noreferrer"
- >
+ <a href="https://www.apache.org/"; target="_blank">
Foundation
</a>
),
@@ -48,11 +57,7 @@ export const useMenu = (t) => {
},
{
label: (
- <a
- href="https://www.apache.org/licenses/";
- target="_blank"
- rel="noopener noreferrer"
- >
+ <a href="https://www.apache.org/licenses/"; target="_blank">
License
</a>
),
@@ -65,7 +70,7 @@ export const useMenu = (t) => {
target="_blank"
rel="noopener noreferrer"
>
- Events
+ Apache Events
</a>
),
key: "apache-events",
diff --git a/src/utils/formatDate.js b/src/utils/formatDate.js
index 12f8e1ad9a..6f7d6d0f1a 100644
--- a/src/utils/formatDate.js
+++ b/src/utils/formatDate.js
@@ -16,3 +16,8 @@ export const isAfter = (date) => {
? dayjs.utc(date).local().isAfter(dayjs())
: false;
};
+
+export const formatTimestamp = (date, locale) => {
+ let format = locale !== "zh-cn" ? "MMM DD YYYY" : "YYYY-MM-DD";
+ return dayjs(date).isValid() ? dayjs.utc(date).local().format(format) : date;
+};
diff --git a/src/views/Documentation/detail.scss
b/src/views/Documentation/detail.scss
index a80111f57f..1b0b4bc425 100644
--- a/src/views/Documentation/detail.scss
+++ b/src/views/Documentation/detail.scss
@@ -16,6 +16,21 @@
word-break: break-all;
white-space: break-spaces;
}
+ pre {
+ font-size: 14px;
+ background-color: rgba(0, 0, 0, 0.1);
+ padding: 10px;
+ border-radius: 10px;
+ }
+ table {
+ width: 100%;
+ border-collapse: collapse;
+
+ th,
+ td {
+ border: 1px solid gray;
+ }
+ }
}
&-title {
font-weight: 700;
diff --git a/src/views/Home/Events.jsx b/src/views/Home/Events.jsx
index 7f4af9a198..cfd6ad3692 100644
--- a/src/views/Home/Events.jsx
+++ b/src/views/Home/Events.jsx
@@ -38,7 +38,7 @@ export const Events = () => {
{i === 0 ? "Events" : "Post"}
</div>
</div>
- {event.startTime && (
+ {event.startTime && i === 0 && (
<div className="home-events-item-time">
{formatDate(event.startTime, locale)}
</div>
diff --git a/src/views/Home/Main.jsx b/src/views/Home/Main.jsx
index f8cbaaf5b9..b036c3929c 100644
--- a/src/views/Home/Main.jsx
+++ b/src/views/Home/Main.jsx
@@ -1,14 +1,12 @@
-import { useState, useEffect, useRef } from 'react';
-import { Button, Divider, Space, Carousel, Image } from 'antd';
-import { PlayCircleOutlined, GithubOutlined } from '@ant-design/icons';
-import { useNavigate } from 'react-router-dom';
-import { useTranslation } from '../../hooks';
-import VideoModal from '../../components/VideoModal';
-import { GITHUB_LINK } from '../../config';
+import { useState, useEffect, useRef } from "react";
+import { Button, Divider, Space, Carousel, Image } from "antd";
+import { PlayCircleOutlined, GithubOutlined } from "@ant-design/icons";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "../../hooks";
+import { GITHUB_LINK } from "../../config";
export const Main = ({ star, fork }) => {
const { t, locale } = useTranslation();
- const [showModal, setShowModal] = useState(false);
const [time, setTime] = useState(7000);
const navigate = useNavigate();
const timerRef = useRef();
@@ -29,11 +27,11 @@ export const Main = ({ star, fork }) => {
<div className="home-desc">
<div className="home-desc-text">
<h1 className="home-desc-title">
- <div className="">Agile to Create</div>
- <div className="gradient-text">High-Performance BigData</div>
- <div className="">Workflow With Low-Code</div>
+ <div>Agile to Create</div>
+ <div className="gradient-text">High-Performance Workflow</div>
+ <div>With Low-Code</div>
</h1>
- <div className="home-desc-subtitle">{t('desc')}</div>
+ <div className="home-desc-subtitle">{t("desc")}</div>
<div>
<Space>
<Button
@@ -44,17 +42,20 @@ export const Main = ({ star, fork }) => {
navigate(`/${locale}/download`);
}}
>
- {t('download')}
+ {t("download")}
</Button>
<Button
icon={<PlayCircleOutlined />}
shape="round"
size="large"
onClick={() => {
- setShowModal(true);
+ window.open(
+ "https://www.youtube.com/watch?v=RV62U2mMEx4";,
+ "_blank"
+ );
}}
>
- {t('what')}
+ {t("what")}
</Button>
</Space>
</div>
@@ -65,16 +66,16 @@ export const Main = ({ star, fork }) => {
shape="round"
size="medium"
onClick={() => {
- window.open(GITHUB_LINK, '_blank');
+ window.open(GITHUB_LINK, "_blank");
}}
>
<div className="github-button-left">
<GithubOutlined />
</div>
<div className="github-button-right">
- <span>Star {star ? star.toLocaleString('en-us') : '-'}</span>
+ <span>Star {star ? star.toLocaleString("en-us") : "-"}</span>
<Divider type="vertical" />
- <span>Fork {fork ? fork.toLocaleString('en-us') : '-'}</span>
+ <span>Fork {fork ? fork.toLocaleString("en-us") : "-"}</span>
</div>
</Button>
</Space>
@@ -82,7 +83,7 @@ export const Main = ({ star, fork }) => {
</div>
<Carousel
ref={carouselRef}
- dots={{ className: 'home-why-dots' }}
+ dots={{ className: "home-why-dots" }}
effect="fade"
afterChange={() => {
setTime(30000);
@@ -94,11 +95,6 @@ export const Main = ({ star, fork }) => {
<Image src="/images/home/home-1-3.png" preview={false} />
<Image src="/images/home/home-1-4.png" preview={false} />
</Carousel>
- <VideoModal
- url="https://www.youtube.com/embed/RV62U2mMEx4";
- show={showModal}
- onClose={() => void setShowModal(false)}
- />
</div>
);
};
diff --git a/src/views/Home/Why.jsx b/src/views/Home/Why.jsx
index 3e9d20f6fe..c16d80b425 100644
--- a/src/views/Home/Why.jsx
+++ b/src/views/Home/Why.jsx
@@ -1,14 +1,12 @@
-import { useState, useEffect, useRef } from 'react';
-import { Carousel, Space, Button, Image } from 'antd';
-import { PlayCircleOutlined } from '@ant-design/icons';
-import { useNavigate } from 'react-router-dom';
-import { useTranslation, useVersions } from '../../hooks';
-import VideoModal from '../../components/VideoModal';
-import './why.scss';
+import { useState, useEffect, useRef } from "react";
+import { Carousel, Space, Button, Image } from "antd";
+import { PlayCircleOutlined } from "@ant-design/icons";
+import { useNavigate } from "react-router-dom";
+import { useTranslation, useVersions } from "../../hooks";
+import "./why.scss";
export const Why = () => {
const { locale, t } = useTranslation();
- const [showModal, setShowModal] = useState(false);
const [time, setTime] = useState(7000);
const navigate = useNavigate();
const timerRef = useRef();
@@ -34,7 +32,7 @@ export const Why = () => {
<Carousel
ref={carouselRef}
className="home-why-content"
- dots={{ className: 'home-why-dots' }}
+ dots={{ className: "home-why-dots" }}
afterChange={() => {
setTime(30000);
}}
@@ -54,22 +52,25 @@ export const Why = () => {
<Button
type="primary"
shape="round"
- size={window.innerWidth > 640 ? 'large' : 'medium'}
+ size={window.innerWidth > 640 ? "large" : "medium"}
onClick={() => {
navigate(`/${locale}/docs/${currentVersion}`);
}}
>
- {t('read_the_documentation')}
+ {t("read_the_documentation")}
</Button>
<Button
icon={<PlayCircleOutlined />}
shape="round"
- size={window.innerWidth > 640 ? 'large' : 'medium'}
+ size={window.innerWidth > 640 ? "large" : "medium"}
onClick={() => {
- setShowModal(true);
+ window.open(
+ "https://www.youtube.com/watch?v=0B9qzn3eMGc";,
+ "_blank"
+ );
}}
>
- {t('quick_start')}
+ {t("quick_start")}
</Button>
</Space>
</div>
@@ -77,76 +78,71 @@ export const Why = () => {
</div>
))}
</Carousel>
- <VideoModal
- url="https://www.youtube.com/embed/0B9qzn3eMGc";
- show={showModal}
- onClose={() => void setShowModal(false)}
- />
</div>
);
};
const ITEMS = [
{
- title: 'why_1_title',
- img: '/images/home/home-3-1.png',
+ title: "why_1_title",
+ img: "/images/home/home-3-1.png",
subs: [
{
- text: 'why_1_tips1',
+ text: "why_1_tips1",
},
{
- text: 'why_1_tips2',
+ text: "why_1_tips2",
},
{
- text: 'why_1_tips3',
+ text: "why_1_tips3",
},
],
},
{
- title: 'why_2_title',
- img: '/images/home/home-3-2.png',
+ title: "why_2_title",
+ img: "/images/home/home-3-2.png",
subs: [
{
- text: 'why_2_tips1',
+ text: "why_2_tips1",
},
{
- text: 'why_2_tips2',
+ text: "why_2_tips2",
},
{
- text: 'why_2_tips3',
+ text: "why_2_tips3",
},
],
},
{
- title: 'why_3_title',
- img: '/images/home/home-3-3.png',
+ title: "why_3_title",
+ img: "/images/home/home-3-3.png",
subs: [
{
- text: 'why_3_tips1',
+ text: "why_3_tips1",
},
{
- text: 'why_3_tips2',
+ text: "why_3_tips2",
},
{
- text: 'why_3_tips3',
+ text: "why_3_tips3",
},
],
},
{
- title: 'why_4_title',
- img: '/images/home/home-3-4.png',
+ title: "why_4_title",
+ img: "/images/home/home-3-4.png",
subs: [
{
- text: 'why_4_tips1',
+ text: "why_4_tips1",
},
{
- text: 'why_4_tips2',
+ text: "why_4_tips2",
},
{
- text: 'why_4_tips3',
+ text: "why_4_tips3",
},
{
- text: 'why_4_tips4',
+ text: "why_4_tips4",
},
],
},
diff --git a/src/views/Home/index.scss b/src/views/Home/index.scss
index 8381393d77..5786885bf3 100644
--- a/src/views/Home/index.scss
+++ b/src/views/Home/index.scss
@@ -45,6 +45,7 @@
&-desc {
display: flex;
align-items: center;
+ justify-content: space-between;
&-text {
flex-shrink: 0;
}
@@ -60,7 +61,7 @@
}
}
&-desc-title {
- font-size: 60px;
+ font-size: 50px;
line-height: 1.5;
padding-top: 60px;
margin-top: 0px;
diff --git a/src/views/Search/index.jsx b/src/views/Search/index.jsx
index daddcddf39..50250fefe7 100644
--- a/src/views/Search/index.jsx
+++ b/src/views/Search/index.jsx
@@ -9,10 +9,13 @@ import {
Typography,
Spin,
Collapse,
+ Tag,
} from "antd";
-import { CaretRightOutlined } from "@ant-design/icons";
-import { useSearchParams, useParams } from "react-router-dom";
+import { useTranslation } from "../../hooks";
+import { CaretRightOutlined, ArrowRightOutlined } from "@ant-design/icons";
+import { useSearchParams, useParams, useNavigate } from "react-router-dom";
import { useSearch } from "./useSearch";
+import { formatTimestamp, isAfter } from "../../utils/formatDate";
import "./index.scss";
const Search = () => {
@@ -20,6 +23,8 @@ const Search = () => {
const { tabs, loading, handleSearch, handleSort } = useSearch();
const [searchParams, setSearchParams] = useSearchParams();
const searchRef = useRef(searchParams.get("t"));
+ const navigate = useNavigate();
+ const { t } = useTranslation();
useEffect(() => {
if (searchParams.get("t")) {
@@ -118,11 +123,70 @@ const Search = () => {
}
if (tab.key === "event") {
return (
- <div className="search-item">
+ <div className="events-desc">
<div
dangerouslySetInnerHTML={{ __html: item.title }}
className="search-result-title"
></div>
+ {item.time && (
+ <div className="events-time">
+ {formatTimestamp(item.time, params.locale)}
+ </div>
+ )}
+ {item.time && (
+ <div className="events-tag">
+ {isAfter(item.time) ? (
+ <Tag color="#7d4efc">Coming Soon</Tag>
+ ) : (
+ <Tag color="#8b8b8b">Previous</Tag>
+ )}
+ </div>
+ )}
+
+ <Space className="events-buttons" size={2}>
+ {item.time && isAfter(item.time) && item.more &&
(
+ <Button
+ size="large"
+ shape="round"
+ onClick={() => {
+ navigate(
+ `/${params.locale}/events/${item.more}`
+ );
+ }}
+ >
+ {t("learn_more")}
+ <ArrowRightOutlined />
+ </Button>
+ )}
+ {item.vedio_url && (
+ <Button
+ size="large"
+ shape="round"
+ type="link"
+ onClick={() => {
+ window.open(item.vedio_url, "_blank");
+ }}
+ >
+ {t("watch_now")}
+ <ArrowRightOutlined />
+ </Button>
+ )}
+ {item.post && (
+ <Button
+ size="large"
+ shape="round"
+ type="link"
+ onClick={() => {
+ navigate(
+ `/${params.locale}/blog/${item.post}`
+ );
+ }}
+ >
+ {t("view_post")}
+ <ArrowRightOutlined />
+ </Button>
+ )}
+ </Space>
</div>
);
}
diff --git a/src/views/Search/index.scss b/src/views/Search/index.scss
index fcc391316f..50c9e380ce 100644
--- a/src/views/Search/index.scss
+++ b/src/views/Search/index.scss
@@ -33,10 +33,26 @@
.ant-tabs-ink-bar {
display: none !important;
}
+
+ img {
+ width: 100%;
+ }
}
&-item {
border-bottom: 1px solid #e2e2e2;
}
+ .events-desc {
+ margin-left: 0px;
+ box-shadow: 0px 3px 25px rgb(0 0 0 / 11%);
+ border-radius: 15px;
+ padding: 20px;
+ margin-top: 10px;
+ }
+ .events-buttons {
+ position: static;
+ width: 100%;
+ justify-content: flex-end;
+ }
&-snapshoot {
margin-top: 6px;
padding-bottom: 10px;
@@ -50,4 +66,7 @@
font-weight: bold;
color: #031b3e;
}
+ .ant-list {
+ padding-top: 10px;
+ }
}
diff --git a/src/views/UseCase/index.jsx b/src/views/UseCase/index.jsx
index c76070cc7b..5abf298a2a 100644
--- a/src/views/UseCase/index.jsx
+++ b/src/views/UseCase/index.jsx
@@ -23,7 +23,11 @@ const UseCase = () => {
</div>
<div className="usecase-user">
<div className="usecase-user-title">{t("user_title")}</div>
- <div className="usecase-user-list">
+ <div
+ className={`usecase-user-list ${
+ users.length < 14 ? "usecase-user-list-less" : ""
+ }`}
+ >
{users
.filter((item, i) => (more ? true : i < 21))
.map((item, i) => (
diff --git a/src/views/UseCase/index.scss b/src/views/UseCase/index.scss
index 98b8d42839..cb6c54eb88 100644
--- a/src/views/UseCase/index.scss
+++ b/src/views/UseCase/index.scss
@@ -56,6 +56,11 @@
padding-left: 2vw;
}
}
+ &-list-less {
+ width: 1400px;
+ justify-content: space-around;
+ margin: 0 auto;
+ }
.ant-image {
box-shadow: 4px 6px 22px rgba(0, 0, 0, 0.11);
margin-left: 10px;
