Skip to content

Commit 6044b28

Browse files
authored
website: update landing page (react-native-elements#3706)
1 parent f4c1315 commit 6044b28

File tree

8 files changed

+69
-46
lines changed

8 files changed

+69
-46
lines changed

.github/workflows/bump-version.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ name: (manual PR) Bump release version
22

33
on:
44
workflow_dispatch:
5-
name:
6-
version:
5+
inputs:
6+
name:
77
type: string
88
description: Release name
99
required: true

website/docusaurus.config.js

+10-32
Original file line numberDiff line numberDiff line change
@@ -60,35 +60,6 @@ const config = {
6060
],
6161
themeConfig: {
6262
image: '/img/website/seo.png',
63-
metadata: [
64-
// {
65-
// name: 'description',
66-
// content: 'Cross-Platform React Native UI Toolkit | backed by community',
67-
// },
68-
// { name: 'og:type', content: 'website' },
69-
// { name: 'og:url', content: 'https://reactnativeelements.com' },
70-
// { name: 'og:title', content: 'React Native Elements' },
71-
// {
72-
// name: 'og:description',
73-
// content: 'Cross-Platform React Native UI Toolkit | backed by community',
74-
// },
75-
// {
76-
// name: 'og:image',
77-
// content: 'https://reactnativeelements.com/img/website/seo.png',
78-
// },
79-
// { name: 'twitter:card', content: 'summary_large_image' },
80-
// { name: 'twitter:url', content: 'https://reactnativeelements.com' },
81-
// { name: 'twitter:title', content: 'React Native Elements' },
82-
// {
83-
// name: 'twitter:description',
84-
// content: 'Cross-Platform React Native UI Toolkit | backed by community',
85-
// },
86-
// {
87-
// name: 'twitter:image',
88-
// content: 'https://reactnativeelements.com/img/website/seo.png',
89-
// },
90-
],
91-
9263
liveCodeBlock: {
9364
playgroundPosition: 'top',
9465
},
@@ -111,11 +82,11 @@ const config = {
11182
alt: 'React Native Elements Logo',
11283
src: '/img/website/logo.png',
11384
},
114-
hideOnScroll: true,
85+
// hideOnScroll: true,
11586
items: [
11687
{
11788
type: 'docsVersionDropdown',
118-
position: 'left',
89+
position: 'right',
11990
dropdownItemsAfter: [{ to: 'versions', label: 'All versions' }],
12091
// Do not add the link active class when browsing docs.
12192
dropdownActiveClassDisabled: true,
@@ -124,7 +95,7 @@ const config = {
12495
// { to: 'docs/', label: 'Docs', position: 'right' },
12596
// { to: 'help', label: 'Help', position: 'right' },
12697
// { to: 'blog', label: 'Blog', position: 'right' },
127-
{ type: 'search', position: 'right' },
98+
{ type: 'search', position: 'left' },
12899
{
129100
href: 'https://github.com/sponsors/react-native-elements',
130101
// label: 'Sponsor',
@@ -139,6 +110,13 @@ const config = {
139110
className: 'header-twitter-link',
140111
'aria-label': 'Twitter',
141112
},
113+
{
114+
href: 'https://discord.gg/e9RBHjkKHa',
115+
// label: 'Discord',
116+
position: 'right',
117+
className: 'header-discord-link',
118+
'aria-label': 'Discord server',
119+
},
142120
{
143121
href: 'https://github.com/react-native-elements/react-native-elements',
144122
// label: 'GitHub',

website/src/components/Features.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const features: FeatureTypes[] = [
4949

5050
const Home: React.FunctionComponent<{}> = () => {
5151
return (
52-
<section className="margin-vert--sm" id="why">
52+
<section className="" id="why">
5353
<div className="container text--center">
5454
<h1 className="hero__title gradient clip-text">
5555
Why React Native Elements?

website/src/components/Hero.tsx

+4-7
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,11 @@ const Home: React.FunctionComponent<{}> = () => {
1616
const { siteConfig = {} } = context;
1717
return (
1818
<section>
19-
<header className="hero">
19+
<header className="hero margin-vert--xl">
2020
<div className="container ">
2121
<div className="row" style={{ alignItems: 'center' }}>
2222
<div className="col col--3 col--offset-1">
23-
<img
24-
className="rne-hero-logo"
25-
src="/img/website/app-preview2.png"
26-
/>
23+
<img className="rne-hero-logo" src="/img/website/logo.png" />
2724
</div>
2825
<div className="col col--6 col--offset-1">
2926
<h1 className="hero__title">
@@ -76,7 +73,7 @@ const Home: React.FunctionComponent<{}> = () => {
7673
</div>
7774
</div>
7875
</header>
79-
<svg
76+
{/* <svg
8077
className="hero-wave"
8178
xmlns="http://www.w3.org/2000/svg"
8279
viewBox="0 0 1440 220"
@@ -85,7 +82,7 @@ const Home: React.FunctionComponent<{}> = () => {
8582
fill-opacity="1"
8683
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"
8784
/>
88-
</svg>
85+
</svg> */}
8986
{/* <div className="bubble bubble-left gradient" /> */}
9087
</section>
9188
);

website/src/components/StartNow.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import CodeBlock from '@theme/CodeBlock';
3+
34
import Link from '@docusaurus/Link';
45
import '../../static/css/components.css';
56

website/src/pages/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const Home: React.FunctionComponent<{}> = () => {
2626
<Sponsor />
2727
{/* <OpenCollective /> */}
2828
<Community />
29-
<StartNow />
29+
{/* <StartNow /> */}
3030
</Layout>
3131
);
3232
};

website/static/css/components.css

+10-1
Original file line numberDiff line numberDiff line change
@@ -116,13 +116,22 @@
116116
display: none;
117117
}
118118
.rne-hero-logo {
119-
display: none;
119+
/* display: none; */
120+
width: 50%;
121+
}
122+
.hero .row {
123+
flex-direction: column;
124+
text-align: center;
120125
}
121126
.ball {
122127
display: none;
123128
}
124129
}
125130

131+
.hero img.rne-hero-logo {
132+
box-shadow: 0px 0px 40px var(--ifm-color-primary);
133+
}
134+
126135
/* background-color: #ffffff;
127136
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");
128137
background-attachment: fixed;

website/static/css/custom.css

+40-2
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,17 @@
1414
--ifm-color-primary-light: #3495e1;
1515
--ifm-color-primary-lighter: #3f9be3;
1616
--ifm-color-primary-lightest: #60ace8;
17-
/* --ifm-hero-background-color: #dbdddf; */
17+
/* --ifm-hero-background-color: #c9c9c940; */
18+
--docsearch-searchbox-background: #f2f2f277 !important;
1819

1920
--ifm-navbar-background-color: var(--ifm-hero-background-color);
2021

2122
--ifm-tabs-padding-vertical: 0.2rem;
2223
--ifm-tabs-padding-horizontal: 0.8rem;
24+
25+
--doc-sidebar-width: 260px !important;
26+
27+
--navbar-background-color: rgba(255, 255, 255, 0.615);
2328
}
2429

2530
:root[data-theme='dark'] {
@@ -31,6 +36,7 @@
3136
--ifm-color-primary-lighter: #8bc2ee;
3237
--ifm-color-primary-lightest: #b6d9f4;
3338
--ifm-hero-background-color: #27292b;
39+
--navbar-background-color: rgba(0, 0, 0, 0.615);
3440
}
3541

3642
.table-responsive {
@@ -351,6 +357,22 @@ html[data-theme='dark'] .header-github-link:after {
351357
.header-github-link:hover:after {
352358
opacity: 0.8;
353359
}
360+
.header-discord-link:after {
361+
transition: opacity 0.2s;
362+
content: '';
363+
width: 20px;
364+
height: 20px;
365+
display: flex;
366+
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");
367+
background-repeat: no-repeat;
368+
background-position: center;
369+
}
370+
html[data-theme='dark'] .header-discord-link:after {
371+
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");
372+
}
373+
.header-discord-link:hover:after {
374+
opacity: 0.8;
375+
}
354376

355377
.header-github-sponsor-link:after {
356378
transition: opacity 0.2s;
@@ -388,6 +410,13 @@ html[data-theme='dark'] .header-github-link:after {
388410
sidebar
389411
*/
390412

413+
.navbar {
414+
background: var(--navbar-background-color);
415+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
416+
backdrop-filter: blur(4px);
417+
-webkit-backdrop-filter: blur(4px);
418+
}
419+
391420
.navbar__logo {
392421
max-width: 200px;
393422
}
@@ -433,6 +462,15 @@ nav.menu {
433462
display: none;
434463
}
435464

465+
.dropdown > .navbar__link:after {
466+
border: none !important;
467+
top: 14px;
468+
width: 20px;
469+
height: 20px;
470+
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");
471+
color: #e3e3e3;
472+
}
473+
436474
/*
437475
* Docs
438476
*/
@@ -623,7 +661,7 @@ div[class^='sidebar_']
623661
}
624662
@media (min-width: 997px) {
625663
div[class^='sidebar_'] {
626-
padding-right: var(--ifm-spacing-horizontal);
664+
/* padding-right: var(--ifm-spacing-horizontal); */
627665
padding-left: var(--ifm-spacing-horizontal);
628666
}
629667
}

0 commit comments

Comments
 (0)