From ad3857d4dee1eb42bdedaa8e3b7b1ddd9a1e65c1 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Mon, 22 Jun 2026 12:42:00 +0200 Subject: [PATCH 1/5] refresh Community hompage section, remove legacy styles --- website/showcase.json | 5 +- .../src/components/Home/Community/index.tsx | 184 +++-- .../Home/Community/styles.module.css | 88 ++- .../components/Home/Hero/styles.module.css | 24 +- .../components/Home/SectionTitle/index.tsx | 13 +- website/src/css/customTheme.scss | 6 +- website/src/css/index.scss | 690 +----------------- website/src/css/showcase.scss | 23 +- 8 files changed, 232 insertions(+), 801 deletions(-) diff --git a/website/showcase.json b/website/showcase.json index 3b943e88724..e7ee550a6f7 100644 --- a/website/showcase.json +++ b/website/showcase.json @@ -82,7 +82,8 @@ "name": "Amazon Alexa", "icon": "amazon-alexa.webp", "linkAppStore": "https://apps.apple.com/us/app/amazon-alexa/id944011620", - "linkPlayStore": "https://play.google.com/store/apps/details?id=com.amazon.dee.app&hl=en_US&gl=US" + "linkPlayStore": "https://play.google.com/store/apps/details?id=com.amazon.dee.app&hl=en_US&gl=US", + "pinned": true }, { "name": "Amazon Photos", @@ -351,4 +352,4 @@ "linkPlayStore": "https://play.google.com/store/apps/details?id=com.brex.mobile&hl=en_US&gl=US" } ] -} \ No newline at end of file +} diff --git a/website/src/components/Home/Community/index.tsx b/website/src/components/Home/Community/index.tsx index 05e5db13dec..d28f2a6ca5b 100644 --- a/website/src/components/Home/Community/index.tsx +++ b/website/src/components/Home/Community/index.tsx @@ -5,8 +5,6 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; - import useBaseUrl from '@docusaurus/useBaseUrl'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; @@ -23,78 +21,120 @@ function Community() { return (
- -
-
-

- Meta released React Native in 2015 and has been maintaining it ever - since. -

-

- In 2018, React Native had the{' '} - - 2nd highest - {' '} - number of contributors for any repository in GitHub. Today, React - Native is supported by contributions from individuals and companies - around the world including{' '} - - Callstack - - ,{' '} - - Expo - - , Infinite Red,{' '} - Microsoft and{' '} - Software Mansion. -

-

- Our community is always shipping exciting new projects and exploring - platforms beyond Android and iOS with repos like{' '} - - - React Native Windows - - - ,{' '} - - React Native macOS - {' '} - and{' '} - - React Native Web - - . -

-
-
-

+ React Native is being used in thousands of apps, but it's likely - you've already used it in one of these apps: -

-
    - {apps.map((app, i) => { - const imgSource = !app.icon.startsWith('http') - ? useBaseUrl('img/showcase/' + app.icon) - : app.icon; - return ( -
  • - {app.infoLink ? ( - - {app.name} - - ) : ( +
    + you've already used it in one of these apps. + + } + /> +
    +
      + {apps.map((app, i) => { + const imgSource = !app.icon.startsWith('http') + ? useBaseUrl('img/showcase/' + app.icon) + : app.icon; + return ( +
    • + {app.infoLink ? ( + {app.name} - )} -
      • - ); - })} -
    -

    - and many more. -

    -
    + + ) : ( + {app.name} + )} +
    • + ); + })} +
+
+ + See all featured apps + +
+

+ Meta released React Native in 2015 and has been maintaining it ever + since. In 2018, React Native had the{' '} + + 2nd highest + {' '} + number of contributors for any repository in GitHub. Today, React + Native is supported by contributions from individuals and companies + around the world including{' '} + + + Callstack + + + ,{' '} + + + Expo + + + ,{' '} + + Infinite Red + + ,{' '} + + Microsoft + {' '} + and{' '} + + Software Mansion + + . +

+

+ Our community is always shipping exciting new projects and exploring + platforms beyond Android and iOS with initiatives like{' '} + + React Native Windows + + ,{' '} + + React Native macOS + {' '} + and{' '} + + React Native Web + + . +

); diff --git a/website/src/components/Home/Community/styles.module.css b/website/src/components/Home/Community/styles.module.css index 05624adea3c..5fd3dc881af 100644 --- a/website/src/components/Home/Community/styles.module.css +++ b/website/src/components/Home/Community/styles.module.css @@ -6,26 +6,86 @@ */ .featureContainer { + margin: 32px auto 16px; +} + +.appList { display: flex; - justify-content: space-between; - gap: 2rem; - margin: 1rem auto; + flex-wrap: wrap; + justify-content: center; + gap: 16px; + padding: 0; + + li { + list-style: none; + width: calc((100% - 9 * 16px) / 10); + + a { + border-bottom: 0 !important; + transition: transform 0.3s ease !important; + + &:hover { + transform: scale(1.025); + } + } + + img { + display: block; + width: 100%; + border-radius: 16px; + overflow: hidden; + box-shadow: 0 6px 14px rgb(20 20 20 / 0.08); + } + } +} + +@media only screen and (max-width: 800px) { + .appList li { + width: calc((100% - 6 * 16px) / 7); + } } -.featureContainer > :first-child { - border-right: 1px solid var(--home-border); - padding-right: 2rem; +@media only screen and (max-width: 450px) { + .appList li { + width: calc((100% - 3 * 16px) / 4); + } } -@media only screen and (max-width: 900px) { - .featureContainer { - flex-direction: column; - gap: 0; - max-width: 600px; +.communityNote { + margin-top: 48px; + text-align: center; + color: var(--home-secondary-text); + padding: 0 12px; +} + +.secondaryButton { + padding: 10px 24px; + border-radius: 99rem; + font-weight: bold; + font-size: 1rem; + display: flex; + align-items: center; + justify-content: center; + gap: 0.35rem; + color: var(--home-button-secondary-text); + border: 1px solid var(--home-button-secondary-border); + background-color: var(--home-button-secondary); + transition: background-color 200ms ease-in-out; + + &:hover { + background-color: var(--home-button-secondary-hover); + color: var(--home-button-secondary-text); } - .featureContainer > :first-child { - border-right: none; - padding-right: 0; + &.small { + font-size: 0.85rem; + padding: 8px 20 px; } } + +.buttonGroup { + display: flex; + justify-content: center; + gap: 16px; + margin-top: 16px; +} diff --git a/website/src/components/Home/Hero/styles.module.css b/website/src/components/Home/Hero/styles.module.css index 9769588337c..742382ddd4d 100644 --- a/website/src/components/Home/Hero/styles.module.css +++ b/website/src/components/Home/Hero/styles.module.css @@ -108,35 +108,35 @@ padding: 10px 24px; border-radius: 99rem; font-weight: bold; - font-size: 17px; + font-size: 1rem; display: flex; align-items: center; justify-content: center; - gap: 0.35rem; -} + transition: background-color 200ms ease-in-out; -.primaryButton:hover { - color: var(--home-button-primary-text); - background-color: var(--home-button-primary-hover); + &:hover { + color: var(--home-button-primary-text); + background-color: var(--home-button-primary-hover); + } } .secondaryButton { padding: 10px 24px; border-radius: 99rem; font-weight: bold; - font-size: 17px; + font-size: 1rem; display: flex; align-items: center; justify-content: center; - gap: 0.35rem; color: var(--home-button-secondary-text); border: 1px solid var(--home-button-secondary-border); background-color: var(--home-button-secondary); -} + transition: background-color 200ms ease-in-out; -.secondaryButton:hover { - background-color: var(--home-button-secondary-hover); - color: var(--home-button-secondary-text); + &:hover { + background-color: var(--home-button-secondary-hover); + color: var(--home-button-secondary-text); + } } @media (max-width: 600px) { diff --git a/website/src/components/Home/SectionTitle/index.tsx b/website/src/components/Home/SectionTitle/index.tsx index e0f3c96d7e6..d639e1f59e4 100644 --- a/website/src/components/Home/SectionTitle/index.tsx +++ b/website/src/components/Home/SectionTitle/index.tsx @@ -5,17 +5,16 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import {ReactNode} from 'react'; import styles from './styles.module.css'; -function SectionTitle({ - title, - description, -}: { +type Props = { title: string; - description?: React.ReactNode; -}) { + description?: ReactNode; +}; + +function SectionTitle({title, description}: Props) { return (

{title}

diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss index a0530ac18f3..ce9ec58f59a 100644 --- a/website/src/css/customTheme.scss +++ b/website/src/css/customTheme.scss @@ -157,6 +157,7 @@ html[data-theme="dark"] { --docsearch-key-pressed-shadow: inset 0 2px 5px rgb(12 13 20 / 0.4); --docsearch-modal-shadow: 0 3px 8px 0 #000309; --docsearch-hit-highlight-color: var(--ifm-color-primary); + --logo: #58c4dc; --home-hero-floor-background: #151517; --home-hero-floor-background-bottom: #1b1b1d; @@ -166,7 +167,7 @@ html[data-theme="dark"] { --home-button-secondary: #1b1b1d; --home-button-secondary-text: #f6f7f9; --home-button-secondary-border: #4e5668; - --home-button-secondary-hover: #2b2b2d; + --home-button-secondary-hover: #1f1f21; --home-hero-devices-border: #404756; --home-hero-devices-stop: #4a5160; --home-hero-devices-skeleton-element: #404756; @@ -703,6 +704,9 @@ html[data-theme="light"] { /* Home page */ .homepage { + width: 100%; + max-width: 100%; + div[class*="codeBlockContainer"] { margin-bottom: 0; overflow: visible; diff --git a/website/src/css/index.scss b/website/src/css/index.scss index 7328ef5cb90..b2e132ffddb 100644 --- a/website/src/css/index.scss +++ b/website/src/css/index.scss @@ -7,639 +7,6 @@ @use "shared"; -.homepage { - width: 100%; - max-width: 100%; -} - -/* ActionButton */ - -.ActionButton { - padding: 0.75rem 1.5rem; - text-align: center; - font-size: 1.25rem; - font-weight: 400; - text-decoration: none !important; - border-bottom: none; - transition: all 0.2s ease-out; - max-width: 50%; - - &.primary { - color: var(--dark); - background-color: var(--brand); - - &:hover { - color: black; - background-color: white; - } - } - - &.secondary { - background: none; - color: var(--brand); - - &:after { - content: "›"; - font-size: 24px; - margin-left: 5px; - } - - &:hover { - color: white; - } - } -} - -@media only screen and (max-width: 480px) { - .ActionButton { - max-width: 100%; - width: 100%; - display: block; - white-space: nowrap; - } -} - -/* AppList */ - -.AppList { - display: grid; - padding: 0; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr; - gap: 16px; - - .item { - list-style: none; - - img { - border-radius: 16px; - overflow: hidden; - box-shadow: 0 6px 14px rgb(20 20 20 / 0.08); - } - } -} - -/* Community */ - -.Community .content { - max-width: 900px; - margin: 0 auto; - display: flex; - flex-direction: column; - - .firstP img { - float: left; - width: 56px; - height: 56px; - margin-right: 20px; - } -} - -@media only screen and (max-width: 480px) { - .Community .Heading { - width: 100%; - padding: 0 1rem; - margin-bottom: 1.5rem; - } -} - -@media only screen and (min-width: 481px) and (max-width: 960px) { - .Community .Heading { - width: 100%; - padding: 0 4rem; - margin-bottom: 1.5rem; - } - - .Community .AppList { - width: 100%; - max-width: 500px; - margin: 2rem auto; - } -} - -@media only screen and (min-width: 961px) { - .Community .column.first { - border-right: 1px solid var(--ifm-table-border-color); - } -} - -/* Cross Platform */ - -.CrossPlatform { - svg { - max-width: 400px; - margin: -20px 0; - - text { - fill: var(--ifm-color-content-secondary); - } - } -} - -@media only screen and (max-width: 960px) { - .CrossPlatform .TwoColumns { - gap: 2rem; - } - - .CrossPlatform svg { - max-width: 100%; - margin: 0 auto; - } -} - -@media only screen and (min-width: 481px) and (max-width: 960px) { - .CrossPlatform .column.last { - width: 86%; - margin: 0 auto; - text-align: center; - } -} - -/* Fast Refresh */ - -/* Make video flush with the bottom */ -.FastRefresh { - margin-bottom: -50px; -} - -/* Get rid of extra padding at the bottom of the video */ -.FastRefresh .column.last { - margin-bottom: -6px; -} - -@media only screen and (max-width: 480px) { - .FastRefresh .column.last { - padding: 0; - } - - .FastRefresh video { - width: 100%; - } -} - -@media only screen and (min-width: 481px) and (max-width: 960px) { - .FastRefresh .TwoColumns { - gap: 2rem; - } - - .FastRefresh .column.last { - width: 100%; - padding: 0; - } - - .FastRefresh video { - width: 100%; - } -} - -@media only screen and (min-width: 961px) { - /* Give video more space than text */ - .FastRefresh .TwoColumns { - grid-template-columns: 2fr 1fr; - } - - /* Make video flush with top of section */ - .FastRefresh .last { - margin-top: -50px; - } - - /* Need to set video height so it'll fit */ - .FastRefresh video { - height: 340px; - - /* width: 100%; */ - } -} - -/* Get Started */ - -.GetStarted, -.GetStarted p { - color: white; -} - -.GetStarted .Heading { - color: var(--brand); - text-align: center; -} - -.GetStarted .content { - max-width: 900px; - margin: 0 auto; - display: flex; - flex-direction: column; -} - -.GetStarted .steps { - align-self: center; -} - -.GetStarted .steps li { - font-size: 28px; - margin-bottom: 8px; -} - -.GetStarted .steps li p { - font-size: 17px; -} - -.GetStarted .terminal { - display: flex; - flex-direction: column; - border-left: 1px solid gray; - border-right: 1px solid gray; - border-top: 1px solid gray; - border-top-left-radius: 10px; - border-top-right-radius: 10px; - padding: 30px 30px 0; - width: 600px; - position: relative; -} - -.GetStarted .terminal:before { - content: "○ ○ ○"; - color: gray; - font-size: 16px; - position: absolute; - left: 15px; - top: 5px; -} - -.GetStarted code { - color: white; - font-size: 18px; - position: relative; - background: none; - border: 0; -} - -.GetStarted code:first-child:before { - content: ">"; - position: absolute; - left: -13px; - color: gray; -} - -@media screen and (max-width: 760px) { - .GetStarted .content { - width: 80%; - } - - .GetStarted .steps li { - margin-left: -1rem; - } - - .GetStarted .terminal { - width: 100%; - } -} - -/* Header Hero */ - -.HeaderHero { - padding-top: 20px; -} - -.HeaderHero .TwoColumns .column { - max-width: initial; -} - -.HeaderHero .socialLinks { - display: flex; - justify-content: flex-end; - max-width: 1200px; - margin: 0 auto; - min-height: 36px; - - .github-button { - margin-right: 1rem; - margin-left: 1rem; - } -} - -.HeaderHero .TwoColumns { - align-items: center; -} - -.HeaderHero .title { - font-size: 84px; - color: var(--brand); - line-height: 1; - margin-top: 0; - margin-bottom: 20px; - font-weight: 500; -} - -.HeaderHero .tagline { - font-size: 36px; - line-height: 1.3; - color: white; - font-weight: 500; -} - -.HeaderHero .buttons { - margin-top: 40px; -} - -.HeaderHero .image { - display: flex; - align-items: center; - justify-content: center; -} - -@media only screen and (min-width: 961px) { - .HeaderHero .TwoColumns { - grid-template-columns: 3fr 1fr; - } - - .HeaderHero .TwoColumns .column.left { - padding-right: 0; - } - - .HeaderHero .TwoColumns .column.right { - padding-left: 0; - } -} - -@media only screen and (min-width: 481px) and (max-width: 960px) { - .HeaderHero .column.first { - display: flex; - justify-content: center; - } - - .HeaderHero .column.last { - text-align: center; - } -} - -@media only screen and (max-width: 760px) { - .HeaderHero .title { - font-size: 60px; - } - - .HeaderHero .tagline { - font-size: 30px; - } - - .HeaderHero .socialLinks { - margin-top: -2rem; - } -} - -/* Heading */ - -.Heading { - font-size: 25px; - color: var(--ifm-font-color-base); - line-height: 1.2; - margin-top: 0; - margin-bottom: 20px; - font-weight: 700; -} - -/* Home page */ - -.HomePage { - width: 100%; - overflow-x: hidden; -} - -/* Logo Animation */ - -.LogoAnimation { - width: 350px; -} - -@media only screen and (max-width: 760px) { - .LogoAnimation { - width: 100%; - } -} - -.LogoAnimation .screen { - transition: all 850ms ease-in-out; - stroke-opacity: 0; - transform: scale(2.25, 1.33) rotate(0); - stroke-width: 5px; -} - -.LogoAnimation .background { - fill: var(--dark); -} - -.LogoAnimation .logoInner { - transform: scale(1); - transition: all 850ms ease-in-out; - transition-delay: 50ms; -} - -.LogoAnimation.mobile .logoInner, -.LogoAnimation.mobile2 .logoInner { - transform: scale(0.4); -} - -.LogoAnimation.desktop .logoInner { - transform: scale(0.5); -} - -.LogoAnimation.laptop .logoInner { - transform: scale(0.35); -} - -.LogoAnimation.full .screen { - stroke-opacity: 0; - transform: scale(2.25, 1.33) rotate(0); - opacity: 1; -} - -.LogoAnimation.mobile .screen { - stroke-opacity: 1; - transform: scale(1) rotate(0); - opacity: 1; - stroke-width: 5px; -} - -.LogoAnimation.desktop .screen { - stroke-opacity: 1; - transform: scale(1.125, 1.1) rotate(-90deg); - opacity: 1; - stroke-width: 8px; -} - -.LogoAnimation.laptop .screen { - stroke-opacity: 1; - transform: scale(0.83) rotate(-90deg); - opacity: 1; - stroke-width: 5px; -} - -.LogoAnimation.mobile2 .screen { - stroke-opacity: 1; - opacity: 1; - stroke-width: 5px; - transform: scale(1) rotate(-180deg); -} - -.LogoAnimation.full2 .screen { - stroke-opacity: 0; - transform: scale(2.25, 1.33) rotate(-180deg); -} - -.LogoAnimation:not(.mobile, .mobile2) .speaker { - opacity: 0; - transform: scaleX(0); -} - -.LogoAnimation:not(.desktop) .stand { - transform: scaleX(0); -} - -.LogoAnimation:not(.laptop) .base { - transform: scaleX(0); -} - -.LogoAnimation .speaker, -.LogoAnimation .stand, -.LogoAnimation .base { - transition: all 850ms ease-in-out; -} - -/* Native Apps */ - -.NativeApps { - overflow: hidden; -} - -@media only screen and (max-width: 960px) { - .NativeApps .column.last { - max-height: 300px; - } -} - -@media only screen and (min-width: 481px) and (max-width: 960px) { - .NativeApps .column.last { - width: 66.7%; - margin: 0 auto; - } -} - -@media only screen and (min-width: 961px) { - .NativeApps { - max-height: 400px; - } - - /* Correct for whitespace in the image of phones */ - .NativeApps .column.left { - margin-top: -25px; - } -} - -/* Native Code */ - -.NativeCode .column.last { - margin-bottom: -50px; -} - -.NativeCode pre { - margin: 0; -} - -.NativeCode .prism-code { - border-radius: 0; - font-size: 80%; - background-color: #282c34; -} - -@media only screen and (max-width: 480px) { - .NativeCode .column.last { - width: 100%; - padding: 0; - overflow-x: hidden; - } - - .NativeCode .prism-code { - font-size: 10px; - padding: 1.25rem; - } -} - -@media screen and (min-width: 481px) and (max-width: 960px) { - .NativeCode .TwoColumns { - gap: 2rem; - } - - .NativeCode .column.last { - width: 100%; - padding: 0; - background-color: var(--dark); - height: 28rem; - overflow-y: scroll; - } - - .NativeCode .prism-code { - width: 30rem; - margin: 0 auto; - padding: 1.25rem 0; - } -} - -@media only screen and (min-width: 961px) { - .NativeCode .TwoColumns .column.right { - /* Make flush with top and bottom */ - margin-top: -50px; - - /* Get rid of default left padding */ - padding-left: 0; - } - - .NativeCode .column.right .prism-code { - /* Bleed background into the right */ - margin-right: -9999px; - padding: 16px 1.5rem; - height: 460px; - } -} - -/* Native Development */ - -.NativeDevelopment { - overflow-y: hidden; -} - -.NativeDevelopment .dissection { - position: relative; - margin-top: -50px; -} - -.NativeDevelopment .dissection img { - position: absolute; - left: 0; - top: 0; -} - -@media only screen and (max-width: 960px) { - .NativeDevelopment .TwoColumns { - gap: 2rem; - } -} - -@media only screen and (max-width: 480px) { - .NativeDevelopment .dissection { - height: 350px; - } -} - -@media only screen and (min-width: 481px) and (max-width: 960px) { - .NativeDevelopment .dissection { - height: 450px; - } -} - -@media only screen and (min-width: 961px) { - .NativeDevelopment .dissection { - height: 300px; - } -} - /* Section */ .Section { @@ -658,7 +25,12 @@ } .Section.dark { - background-color: var(--dark); + background-image: conic-gradient( + from -90deg at 110% 100%, + #252a33 0deg, + #16181d 90deg, + #16181d 1turn + ); } .Section p a { @@ -669,56 +41,6 @@ html[data-theme="dark"] .Section p a { @extend %link-style-dark; } -/* VideoContent */ - -.VideoContent { - .twitter-follow-button { - margin-top: 1.5rem; - } -} - -@media only screen and (max-width: 960px) { - .VideoContent .TwoColumns { - gap: 2rem; - } - - .VideoContent .column.last { - width: 100%; - display: flex; - justify-content: center; - } - - /* - * If the full-width video won't fit, make it full-width. - * https://jameshfisher.com/2017/08/30/how-do-i-make-a-full-width-iframe/ - */ - .VideoContent .vidWrapper { - position: relative; - width: 100%; - padding-top: 56.25%; - } - - .VideoContent iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } -} - -@media only screen and (min-width: 961px) { - /* Give more width for the video */ - .VideoContent .TwoColumns { - grid-template-columns: 1fr 2fr; - } - - .VideoContent iframe { - width: 560px; - height: 315px; - } -} - /* Two columns */ .TwoColumns { diff --git a/website/src/css/showcase.scss b/website/src/css/showcase.scss index e63c89f8742..a11e2d532ce 100644 --- a/website/src/css/showcase.scss +++ b/website/src/css/showcase.scss @@ -210,17 +210,22 @@ html[data-theme="dark"] { } .formButton { - @extend %button-link-style; - - color: #fff; - border-color: var(--ifm-color-primary); - margin-top: 20px; - margin-bottom: 36px; - border-width: 2px; - font-weight: 500; + background-color: var(--home-button-primary); + color: var(--home-button-primary-text); + border: none; + padding: 10px 24px; + border-radius: 99rem; + font-weight: bold; + font-size: 1rem; + display: inline-flex; + align-items: center; + justify-content: center; + margin: 20px auto 36px; + transition: background-color 200ms ease-in-out; &:hover { - color: var(--ifm-color-primary); + color: var(--home-button-primary-text); + background-color: var(--home-button-primary-hover); } } } From e8d128814b10d2aa2d8f07ec82e7ef74017cddf0 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Mon, 22 Jun 2026 12:54:08 +0200 Subject: [PATCH 2/5] fix style lint --- website/src/css/customTheme.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss index ce9ec58f59a..b08da1ee456 100644 --- a/website/src/css/customTheme.scss +++ b/website/src/css/customTheme.scss @@ -157,7 +157,6 @@ html[data-theme="dark"] { --docsearch-key-pressed-shadow: inset 0 2px 5px rgb(12 13 20 / 0.4); --docsearch-modal-shadow: 0 3px 8px 0 #000309; --docsearch-hit-highlight-color: var(--ifm-color-primary); - --logo: #58c4dc; --home-hero-floor-background: #151517; --home-hero-floor-background-bottom: #1b1b1d; From b1e5be95ff076ff200069ee2811448ee7b91c5dc Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Mon, 22 Jun 2026 13:17:48 +0200 Subject: [PATCH 3/5] remove unused class --- website/src/components/Home/Community/styles.module.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/website/src/components/Home/Community/styles.module.css b/website/src/components/Home/Community/styles.module.css index 5fd3dc881af..f05075cad7d 100644 --- a/website/src/components/Home/Community/styles.module.css +++ b/website/src/components/Home/Community/styles.module.css @@ -76,11 +76,6 @@ background-color: var(--home-button-secondary-hover); color: var(--home-button-secondary-text); } - - &.small { - font-size: 0.85rem; - padding: 8px 20 px; - } } .buttonGroup { From 7bc65daba7300ad58ad9c9e49e5d58824a2f92fb Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Mon, 22 Jun 2026 13:21:04 +0200 Subject: [PATCH 4/5] fix app icons hover animation --- website/src/components/Home/Community/styles.module.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/website/src/components/Home/Community/styles.module.css b/website/src/components/Home/Community/styles.module.css index f05075cad7d..4935464b005 100644 --- a/website/src/components/Home/Community/styles.module.css +++ b/website/src/components/Home/Community/styles.module.css @@ -22,10 +22,11 @@ a { border-bottom: 0 !important; - transition: transform 0.3s ease !important; &:hover { - transform: scale(1.025); + img { + transform: scale(1.05); + } } } @@ -35,6 +36,7 @@ border-radius: 16px; overflow: hidden; box-shadow: 0 6px 14px rgb(20 20 20 / 0.08); + transition: transform 0.2s ease-in-out; } } } From 21edbeccd997cc2e295eb7cb80f20d116831c043 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Mon, 22 Jun 2026 17:20:56 +0200 Subject: [PATCH 5/5] wording and content tweaks --- .../src/components/Home/Community/index.tsx | 23 +++++++++---------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/website/src/components/Home/Community/index.tsx b/website/src/components/Home/Community/index.tsx index d28f2a6ca5b..ce0079a3e4c 100644 --- a/website/src/components/Home/Community/index.tsx +++ b/website/src/components/Home/Community/index.tsx @@ -60,16 +60,8 @@ function Community() {

Meta released React Native in 2015 and has been maintaining it ever - since. In 2018, React Native had the{' '} - - 2nd highest - {' '} - number of contributors for any repository in GitHub. Today, React - Native is supported by contributions from individuals and companies - around the world including{' '} + since. Today, React Native is supported by contributions from + individuals and companies around the world including{' '} Software Mansion + . If you're interested in learning more, check out{' '} + + how we have structured the ecosystem + .

- Our community is always shipping exciting new projects and exploring - platforms beyond Android and iOS with initiatives like{' '} + Our community is always shipping exciting new projects and expanding + beyond Android and iOS with initiatives like{' '}