website: update landing page (react-native-elements#3706)

arpitBhalla · web-flow · commit 6044b284079c · 2022-12-10T23:00:08.000+05:30
diff --git a/.github/workflows/bump-version.yml b/.github/workflows/bump-version.yml
@@ -2,8 +2,8 @@ name: (manual PR) Bump release version
 
 on:
   workflow_dispatch:
-    name:
-      version:
+    inputs:
+      name:
         type: string
         description: Release name
         required: true
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -60,35 +60,6 @@ const config = {
   ],
   themeConfig: {
     image: '/img/website/seo.png',
-    metadata: [
-      // {
-      //   name: 'description',
-      //   content: 'Cross-Platform React Native UI Toolkit | backed by community',
-      // },
-      // { name: 'og:type', content: 'website' },
-      // { name: 'og:url', content: 'https://reactnativeelements.com' },
-      // { name: 'og:title', content: 'React Native Elements' },
-      // {
-      //   name: 'og:description',
-      //   content: 'Cross-Platform React Native UI Toolkit | backed by community',
-      // },
-      // {
-      //   name: 'og:image',
-      //   content: 'https://reactnativeelements.com/img/website/seo.png',
-      // },
-      // { name: 'twitter:card', content: 'summary_large_image' },
-      // { name: 'twitter:url', content: 'https://reactnativeelements.com' },
-      // { name: 'twitter:title', content: 'React Native Elements' },
-      // {
-      //   name: 'twitter:description',
-      //   content: 'Cross-Platform React Native UI Toolkit | backed by community',
-      // },
-      // {
-      //   name: 'twitter:image',
-      //   content: 'https://reactnativeelements.com/img/website/seo.png',
-      // },
-    ],
-
     liveCodeBlock: {
       playgroundPosition: 'top',
     },
@@ -111,11 +82,11 @@ const config = {
         alt: 'React Native Elements Logo',
         src: '/img/website/logo.png',
       },
-      hideOnScroll: true,
+      // hideOnScroll: true,
       items: [
         {
           type: 'docsVersionDropdown',
-          position: 'left',
+          position: 'right',
           dropdownItemsAfter: [{ to: 'versions', label: 'All versions' }],
           // Do not add the link active class when browsing docs.
           dropdownActiveClassDisabled: true,
@@ -124,7 +95,7 @@ const config = {
         // { to: 'docs/', label: 'Docs', position: 'right' },
         // { to: 'help', label: 'Help', position: 'right' },
         // { to: 'blog', label: 'Blog', position: 'right' },
-        { type: 'search', position: 'right' },
+        { type: 'search', position: 'left' },
         {
           href: 'https://github.com/sponsors/react-native-elements',
           // label: 'Sponsor',
@@ -139,6 +110,13 @@ const config = {
           className: 'header-twitter-link',
           'aria-label': 'Twitter',
         },
+        {
+          href: 'https://discord.gg/e9RBHjkKHa',
+          // label: 'Discord',
+          position: 'right',
+          className: 'header-discord-link',
+          'aria-label': 'Discord server',
+        },
         {
           href: 'https://github.com/react-native-elements/react-native-elements',
           // label: 'GitHub',
diff --git a/website/src/components/Features.tsx b/website/src/components/Features.tsx
@@ -49,7 +49,7 @@ const features: FeatureTypes[] = [
 
 const Home: React.FunctionComponent<{}> = () => {
   return (
-    <section className="margin-vert--sm" id="why">
+    <section className="" id="why">
       <div className="container text--center">
         <h1 className="hero__title gradient clip-text">
           Why React Native Elements?
diff --git a/website/src/components/Hero.tsx b/website/src/components/Hero.tsx
@@ -16,14 +16,11 @@ const Home: React.FunctionComponent<{}> = () => {
   const { siteConfig = {} } = context;
   return (
     <section>
-      <header className="hero">
+      <header className="hero margin-vert--xl">
         <div className="container ">
           <div className="row" style={{ alignItems: 'center' }}>
             <div className="col col--3 col--offset-1">
-              <img
-                className="rne-hero-logo"
-                src="/img/website/app-preview2.png"
-              />
+              <img className="rne-hero-logo" src="/img/website/logo.png" />
             </div>
             <div className="col col--6 col--offset-1">
               <h1 className="hero__title">
@@ -76,7 +73,7 @@ const Home: React.FunctionComponent<{}> = () => {
           </div>
         </div>
       </header>
-      <svg
+      {/* <svg
         className="hero-wave"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 1440 220"
@@ -85,7 +82,7 @@ const Home: React.FunctionComponent<{}> = () => {
           fill-opacity="1"
           d="M0,96L48,106.7C96,117,192,139,288,138.7C384,139,480,117,576,90.7C672,64,768,32,864,32C960,32,1056,64,1152,69.3C1248,75,1344,53,1392,42.7L1440,32L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"
         />
-      </svg>
+      </svg> */}
       {/* <div className="bubble bubble-left gradient" /> */}
     </section>
   );
diff --git a/website/src/components/StartNow.tsx b/website/src/components/StartNow.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import CodeBlock from '@theme/CodeBlock';
+
 import Link from '@docusaurus/Link';
 import '../../static/css/components.css';
 
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -26,7 +26,7 @@ const Home: React.FunctionComponent<{}> = () => {
       <Sponsor />
       {/* <OpenCollective /> */}
       <Community />
-      <StartNow />
+      {/* <StartNow /> */}
     </Layout>
   );
 };
diff --git a/website/static/css/components.css b/website/static/css/components.css
@@ -116,13 +116,22 @@
     display: none;
   }
   .rne-hero-logo {
-    display: none;
+    /* display: none; */
+    width: 50%;
+  }
+  .hero .row {
+    flex-direction: column;
+    text-align: center;
   }
   .ball {
     display: none;
   }
 }
 
+.hero img.rne-hero-logo {
+  box-shadow: 0px 0px 40px var(--ifm-color-primary);
+}
+
 /* background-color: #ffffff;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='1' y2='0'%3E%3Cstop offset='0' stop-color='%230FF'/%3E%3Cstop offset='1' stop-color='%23CF6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F00'/%3E%3Cstop offset='1' stop-color='%23FC0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23FFF' fill-opacity='0' stroke-miterlimit='10'%3E%3Cg stroke='url(%23a)' stroke-width='2'%3E%3Cpath transform='translate(0 0)' d='M1409 581 1450.35 511 1490 581z'/%3E%3Ccircle stroke-width='4' transform='rotate(0 800 450)' cx='500' cy='100' r='40'/%3E%3Cpath transform='translate(0 0)' d='M400.86 735.5h-83.73c0-23.12 18.74-41.87 41.87-41.87S400.86 712.38 400.86 735.5z'/%3E%3C/g%3E%3Cg stroke='url(%23b)' stroke-width='4'%3E%3Cpath transform='translate(0 0)' d='M149.8 345.2 118.4 389.8 149.8 434.4 181.2 389.8z'/%3E%3Crect stroke-width='8' transform='rotate(0 1089 759)' x='1039' y='709' width='100' height='100'/%3E%3Cpath transform='rotate(0 1400 132)' d='M1426.8 132.4 1405.7 168.8 1363.7 168.8 1342.7 132.4 1363.7 96 1405.7 96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 background-attachment: fixed;
diff --git a/website/static/css/custom.css b/website/static/css/custom.css
@@ -14,12 +14,17 @@
   --ifm-color-primary-light: #3495e1;
   --ifm-color-primary-lighter: #3f9be3;
   --ifm-color-primary-lightest: #60ace8;
-  /* --ifm-hero-background-color: #dbdddf; */
+  /* --ifm-hero-background-color: #c9c9c940; */
+  --docsearch-searchbox-background: #f2f2f277 !important;
 
   --ifm-navbar-background-color: var(--ifm-hero-background-color);
 
   --ifm-tabs-padding-vertical: 0.2rem;
   --ifm-tabs-padding-horizontal: 0.8rem;
+
+  --doc-sidebar-width: 260px !important;
+
+  --navbar-background-color: rgba(255, 255, 255, 0.615);
 }
 
 :root[data-theme='dark'] {
@@ -31,6 +36,7 @@
   --ifm-color-primary-lighter: #8bc2ee;
   --ifm-color-primary-lightest: #b6d9f4;
   --ifm-hero-background-color: #27292b;
+  --navbar-background-color: rgba(0, 0, 0, 0.615);
 }
 
 .table-responsive {
@@ -351,6 +357,22 @@ html[data-theme='dark'] .header-github-link:after {
 .header-github-link:hover:after {
   opacity: 0.8;
 }
+.header-discord-link:after {
+  transition: opacity 0.2s;
+  content: '';
+  width: 20px;
+  height: 20px;
+  display: flex;
+  background-image: url("data:image/svg+xml,%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%235865F2' d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+}
+html[data-theme='dark'] .header-discord-link:after {
+  background-image: url("data:image/svg+xml,%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z'/%3E%3C/svg%3E");
+}
+.header-discord-link:hover:after {
+  opacity: 0.8;
+}
 
 .header-github-sponsor-link:after {
   transition: opacity 0.2s;
@@ -388,6 +410,13 @@ html[data-theme='dark'] .header-github-link:after {
 sidebar
 */
 
+.navbar {
+  background: var(--navbar-background-color);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
 .navbar__logo {
   max-width: 200px;
 }
@@ -433,6 +462,15 @@ nav.menu {
   display: none;
 }
 
+.dropdown > .navbar__link:after {
+  border: none !important;
+  top: 14px;
+  width: 20px;
+  height: 20px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' viewBox='0 0 24 24' class='text-icon' data-v-fe4c30c3=''%3E%3Cpath d='M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z'%3E%3C/path%3E%3C/svg%3E");
+  color: #e3e3e3;
+}
+
 /*
  * Docs
  */
@@ -623,7 +661,7 @@ div[class^='sidebar_']
 }
 @media (min-width: 997px) {
   div[class^='sidebar_'] {
-    padding-right: var(--ifm-spacing-horizontal);
+    /* padding-right: var(--ifm-spacing-horizontal); */
     padding-left: var(--ifm-spacing-horizontal);
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -116,13 +116,22 @@`
`116`	`116`	`display: none;`
`117`	`117`	`}`
`118`	`118`	`.rne-hero-logo {`
`119`		`- display: none;`
	`119`	`+ /* display: none; */`
	`120`	`+ width: 50%;`
	`121`	`+ }`
	`122`	`+ .hero .row {`
	`123`	`+ flex-direction: column;`
	`124`	`+ text-align: center;`
`120`	`125`	`}`
`121`	`126`	`.ball {`
`122`	`127`	`display: none;`
`123`	`128`	`}`
`124`	`129`	`}`
`125`	`130`
	`131`	`+.hero img.rne-hero-logo {`
	`132`	`+ box-shadow: 0px 0px 40px var(--ifm-color-primary);`
	`133`	`+}`
	`134`	`+`
`126`	`135`	`/* background-color: #ffffff;`
`127`	`136`	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='1' y2='0'%3E%3Cstop offset='0' stop-color='%230FF'/%3E%3Cstop offset='1' stop-color='%23CF6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F00'/%3E%3Cstop offset='1' stop-color='%23FC0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23FFF' fill-opacity='0' stroke-miterlimit='10'%3E%3Cg stroke='url(%23a)' stroke-width='2'%3E%3Cpath transform='translate(0 0)' d='M1409 581 1450.35 511 1490 581z'/%3E%3Ccircle stroke-width='4' transform='rotate(0 800 450)' cx='500' cy='100' r='40'/%3E%3Cpath transform='translate(0 0)' d='M400.86 735.5h-83.73c0-23.12 18.74-41.87 41.87-41.87S400.86 712.38 400.86 735.5z'/%3E%3C/g%3E%3Cg stroke='url(%23b)' stroke-width='4'%3E%3Cpath transform='translate(0 0)' d='M149.8 345.2 118.4 389.8 149.8 434.4 181.2 389.8z'/%3E%3Crect stroke-width='8' transform='rotate(0 1089 759)' x='1039' y='709' width='100' height='100'/%3E%3Cpath transform='rotate(0 1400 132)' d='M1426.8 132.4 1405.7 168.8 1363.7 168.8 1342.7 132.4 1363.7 96 1405.7 96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
`128`	`137`	`background-attachment: fixed;`