diff --git a/src/css/customTheme.css b/src/css/customTheme.css
index e09f8aa11833..0a589864b28b 100644
--- a/src/css/customTheme.css
+++ b/src/css/customTheme.css
@@ -18,6 +18,9 @@
}
+
+
+
@media only screen and (min-width: 1040px) {
.header-long-screen {
display: block;
diff --git a/src/pages/index.js b/src/pages/index.js
index 885ab866189c..1145f0bd3b6c 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -44,6 +44,15 @@ const features = [
),
},
+ {
+ title: Secure,
+ imageUrl: 'img/features/secure.svg',
+ description: (
+
+ pnpm ensures the integrity of your packages with strict verification
+
+ ),
+ },
];
function addUTM(urlAddress) {
@@ -54,9 +63,10 @@ function addUTM(urlAddress) {
return url.toString();
}
-function Feature({imageUrl, title, description}) {
+function Feature({ imageUrl, title, description }) {
return (
+
{title}
{description}
@@ -65,7 +75,7 @@ function Feature({imageUrl, title, description}) {
const Showcase = props => {
const context = useDocusaurusContext();
- const {siteConfig = {}} = context;
+ const { siteConfig = {} } = context;
const showcase = siteConfig.customFields.users.filter(({ pinned }) => pinned).map((user, i) => {
return (
@@ -77,10 +87,10 @@ const Showcase = props => {
});
return (
-
-
+
+
-
+
@@ -161,7 +171,7 @@ const Showcase = props => {
function Home() {
const context = useDocusaurusContext();
- const {siteConfig = {}} = context;
+ const { siteConfig = {} } = context;
return (
Fast, disk space efficient package manager
-
+
@@ -211,4 +221,4 @@ function Home() {
);
}
-export default Home;
+export default Home;
\ No newline at end of file
diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css
index de2ae515ed79..7706dacd6ef3 100644
--- a/src/pages/styles.module.css
+++ b/src/pages/styles.module.css
@@ -2,7 +2,7 @@
/**
* CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
+ * and scoped locally
*/
.heroBanner {
@@ -26,6 +26,7 @@
}
.features {
+ margin-top: 57px;
display: flex;
align-items: center;
padding: 2rem 0;
@@ -33,11 +34,12 @@
}
.featureImage {
- height: 200px;
- width: 200px;
+ height: 100px;
+ width: 100px;
}
.youtubeVideo {
+margin-top: 20px;
width: 560px;
height: 315px;
}
@@ -98,4 +100,4 @@ div[class^="announcementBarContent"] a:hover {
width: calc(560px / 2.2);
height: calc(315px / 2.2);
}
-}
\ No newline at end of file
+}
diff --git a/static/img/features/secure.svg b/static/img/features/secure.svg
new file mode 100644
index 000000000000..2a5591e84304
--- /dev/null
+++ b/static/img/features/secure.svg
@@ -0,0 +1,22 @@
+
+