chore: update front page website (#3317)

* chore: update front page website

* Update UsedBy.tsx

* update links

pnpm-lock.yaml

@@ -1325,11 +1325,13 @@ importers:
       prism-react-renderer: ^1.2.1
       react: 17.0.2
       react-dom: 17.0.2
+      react-player: 2.10.1
       react-twitter-widgets: ^1.10.0
       sass: 1.54.5
       sass-loader: ^12.1.0
       url-loader: 4.1.1
       use-is-in-viewport: ^1.0.9
+      usehooks-ts: 2.6.0
     dependencies:
       '@docusaurus/core': 2.0.1_e882fdbf719a0972e5bcda6db71cd6b8
       '@docusaurus/plugin-content-docs': 2.0.1_e882fdbf719a0972e5bcda6db71cd6b8
@@ -1348,8 +1350,10 @@ importers:
       docusaurus-plugin-sentry: 1.0.0_e882fdbf719a0972e5bcda6db71cd6b8
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
+      react-player: 2.10.1_react@17.0.2
       react-twitter-widgets: 1.10.0_react@17.0.2
       use-is-in-viewport: 1.0.9_react@17.0.2
+      usehooks-ts: 2.6.0_react@17.0.2
     devDependencies:
       '@docusaurus/module-type-aliases': 2.0.1_e04bad828ac717e6587f05c972df8358
       '@tsconfig/docusaurus': 1.0.2
@@ -14590,6 +14594,10 @@ packages:
       strip-bom: 3.0.0
     dev: true
 
+  /load-script/1.0.0:
+    resolution: {integrity: sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==}
+    dev: false
+
   /load-yaml-file/0.2.0:
     resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==}
     engines: {node: '>=6'}
@@ -15076,6 +15084,10 @@ packages:
     dependencies:
       fs-monkey: 1.0.3
 
+  /memoize-one/5.2.1:
+    resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
+    dev: false
+
   /memory-fs/0.4.1:
     resolution: {integrity: sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=}
     dependencies:
@@ -18265,6 +18277,19 @@ packages:
       - supports-color
     dev: true
 
+  /react-player/2.10.1_react@17.0.2:
+    resolution: {integrity: sha512-ova0jY1Y1lqLYxOehkzbNEju4rFXYVkr5rdGD71nsiG4UKPzRXQPTd3xjoDssheoMNjZ51mjT5ysTrdQ2tEvsg==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      deepmerge: 4.2.2
+      load-script: 1.0.0
+      memoize-one: 5.2.1
+      prop-types: 15.8.1
+      react: 17.0.2
+      react-fast-compare: 3.2.0
+    dev: false
+
   /react-redux/7.2.8_react-dom@17.0.2+react@17.0.2:
     resolution: {integrity: sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw==}
     peerDependencies:
@@ -21176,6 +21201,14 @@ packages:
     resolution: {integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==}
     engines: {node: '>=0.10.0'}
 
+  /usehooks-ts/2.6.0_react@17.0.2:
+    resolution: {integrity: sha512-Kj/4oc2nOxRDGTDb2v1ZulF7+tpeXFuqI6cUesM0Vic7TPPDlFORxKh4ivsYg+NTvX/YbM+lhqqkfFTiIt23eg==}
+    peerDependencies:
+      react: '>=16.9.0'
+    dependencies:
+      react: 17.0.2
+    dev: false
+
   /utf8-byte-length/1.0.4:
     resolution: {integrity: sha1-9F8VDExm7uloGGUFq5P8u4rWv2E=}
     dev: false

website/docusaurus.config.js

@@ -59,7 +59,7 @@ module.exports = {
     announcementBar: {
       id: 'announcementBar',
       content:
-        '<a target="_blank" rel="noopener noreferrer" href="https://donate.redcrossredcrescent.org/ua/donate/~my-donation?_cv=1">Help provide humanitarian support to Ukraine refugees</a>!',
+        '<a target="_blank" rel="noopener noreferrer" href="https://www.wfp.org/support-us/stories/ukraine-appeal">Help provide humanitarian support to Ukraine refugees</a>!',
         isCloseable: false,
         backgroundColor: '#1595de',
         textColor: '#ffffff',

website/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@verdaccio/website",
-  "version": "5.13.0",
+  "version": "5.14.0",
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
@@ -37,7 +37,9 @@
     "docusaurus-plugin-contributors": "workspace:1.0.0",
     "docusaurus-plugin-sentry": "1.0.0",
     "react": "17.0.2",
+    "react-player": "2.10.1",
     "react-dom": "17.0.2",
+    "usehooks-ts": "2.6.0",
     "react-twitter-widgets": "^1.10.0",
     "use-is-in-viewport": "^1.0.9"
   },

website/src/components/Header.tsx

@@ -3,14 +3,17 @@ import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import React from 'react';
+import ReactPlayer from 'react-player/youtube'
 import { Follow } from 'react-twitter-widgets';
 import cx from 'classnames';
+import { useMediaQuery } from 'usehooks-ts'
 
 import Command from './Command';
 import styles from './Header.module.scss';
 
 const Header = (): React.ReactElement => {
   const { i18n } = useDocusaurusContext();
+  const matches = useMediaQuery('(min-width: 768px)')
   return (
     <div className={styles.header}>
       <div className={styles['header--wrap']}>
@@ -32,7 +35,7 @@ const Header = (): React.ReactElement => {
               <Translate>GET STARTED</Translate>
             </Link>
             <a
-              href="https://donate.redcrossredcrescent.org/ua/donate/~my-donation?_cv=1"
+              href="https://www.wfp.org/support-us/stories/ukraine-appeal"
               className={cx('link-secondary', 'specialButton')}
             >
               <Translate>DONATE</Translate>
@@ -43,8 +46,11 @@ const Header = (): React.ReactElement => {
           <Command
             command="npm install --global verdaccio"
             alt={translate({ message: 'NPM command to install Verdaccio' })}
-          />
-        </div>       
+          />          
+        </div>      
+        {matches && <div className={styles['header--m-2']}>
+          <ReactPlayer url='https://www.youtube.com/watch?v=qRMucS3i3kQ' controls />
+        </div>}
       </div>
       <div className={styles['header--absolute-links']}>
         <div>
@@ -54,6 +60,7 @@ const Header = (): React.ReactElement => {
           />
         </div>
       </div>
+
     </div>
   );
 };

website/src/components/Testimonials.tsx

@@ -24,6 +24,8 @@ const Testimonials = (): React.ReactElement => (
           ['1286258971456811010', '1285676039323160584', '1261263709143543809'],
           ['1175273963036917760', '1171473043077550082', '1172204609508499456'],
           ['1164950797064515584', '1113478980169011201', '1111941723297644545'],
+          ['1557651045085593600', '1550730341240819714', '1546494545600204800'],
+          ['1480362520477147143', '1479187636451516416', '1423034969123958793'],
         ]}
       />
     </div>

website/src/components/UsedBy.tsx

@@ -8,9 +8,9 @@ import styles from './UsedBy.module.scss';
 
 const UsedBy = (): React.ReactElement => (
   <section className={styles.usedBy}>
-    <div className={styles['usedBy--main']}>
+    <div className={styles['usedBy--main']}>    
       <b>
-        <Translate>SPONSORED BY</Translate>
+        <Translate>USED BY</Translate>
       </b>
       {[
         {
@@ -23,33 +23,20 @@ const UsedBy = (): React.ReactElement => (
           image: useBaseUrl('/img/sponsors/gatsbysvg.svg'),
           url: 'https://www.gatsbyjs.com/',
         },
-      ].map((sponsor) => (
-        <SponsorImage
-          key={sponsor.name}
-          name={sponsor.name}
-          image={sponsor.image}
-          url={sponsor.url}
-        />
-      ))}
-      <Divider vertical />
-      <b>
-        <Translate>USED BY</Translate>
-      </b>
-      {[
         {
           name: 'pnpm',
           image: useBaseUrl('/img/sponsors/pnpm.svg'),
           url: 'https://pnpm.io',
         },
         {
-          name: 'React',
+          name: 'create-react-app',
           image: useBaseUrl('/img/sponsors/react.svg'),
-          url: ' https://reactjs.org',
+          url: ' https://create-react-app.dev/',
         },
         {
-          name: 'Angular',
+          name: 'Angular CLI',
           image: useBaseUrl('/img/sponsors/angular.svg'),
-          url: 'https://angular.io',
+          url: 'https://angular.io/cli',
         },
         {
           name: 'vendure',

website/src/pages/index.tsx

@@ -1,6 +1,7 @@
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import React from 'react';
+import ReactPlayer from 'react-player/youtube'
 
 import Feature from '../components/Features';
 import Header from '../components/Header';
@@ -18,9 +19,10 @@ const Home = (): React.ReactElement => {
       <header className={styles.header}>
         <Wave />
         <Header />
+        
       </header>
       <main className={styles.main}>
-        <UsedBy />
+        <UsedBy />        
         <WhatIsVerdaccio />
         <Feature />
         <PackageManagers />