diff --git a/docs/src/containers/Testimonial/index.js b/docs/src/containers/Testimonial/index.js
new file mode 100644
index 000000000..e98275a76
--- /dev/null
+++ b/docs/src/containers/Testimonial/index.js
@@ -0,0 +1,175 @@
+import { useColorMode } from '@docusaurus/theme-common'
+import { Tweet } from 'react-tweet'
+
+const firstColumn = [
+ {
+ type: 'tweet',
+ id: '1742843063938994469',
+ },
+ {
+ type: 'youtube',
+ id: 'ZCiEQVOjH5U',
+ },
+ {
+ type: 'youtube',
+ id: '7JpzE-_cKo4',
+ },
+ {
+ type: 'tweet',
+ id: '1744729548074459310',
+ },
+]
+
+const secondColumn = [
+ {
+ type: 'youtube',
+ id: 'QpMQgJL4AZA',
+ },
+ {
+ type: 'tweet',
+ id: '1750801065132384302',
+ },
+ {
+ type: 'youtube',
+ id: '9ta2S425Zu8',
+ },
+ {
+ type: 'tweet',
+ id: '1757504717519749292',
+ },
+]
+
+const thirdColumn = [
+ {
+ type: 'tweet',
+ id: '1745560583548670250',
+ },
+ {
+ type: 'youtube',
+ id: 'zkafOIyQM8s',
+ },
+ {
+ type: 'tweet',
+ id: '1757500111629025788',
+ },
+]
+
+const fourthColumn = [
+ {
+ type: 'tweet',
+ id: '1742993414986068423',
+ },
+ {
+ type: 'youtube',
+ id: '9ta2S425Zu8',
+ },
+ {
+ type: 'youtube',
+ id: 'ES021_sY6WQ',
+ },
+ {
+ type: 'youtube',
+ id: 'CbJGxNmdWws',
+ },
+]
+
+const Testimonial = () => {
+ const { colorMode } = useColorMode()
+
+ return (
+
+
+
+ People say nice things
+
+
+ ...despite our bugs and fast moving releases
+
+
+
+
+
+
+ {firstColumn.map((item, i) => {
+ if (item.type === 'tweet') return
+ if (item.type === 'youtube')
+ return (
+
+
+
+ )
+ })}
+
+
+ {secondColumn.map((item, i) => {
+ if (item.type === 'tweet') return
+ if (item.type === 'youtube')
+ return (
+
+
+
+ )
+ })}
+
+
+ {thirdColumn.map((item, i) => {
+ if (item.type === 'tweet') return
+ if (item.type === 'youtube')
+ return (
+
+
+
+ )
+ })}
+
+
+ {fourthColumn.map((item, i) => {
+ if (item.type === 'tweet') return
+ if (item.type === 'youtube')
+ return (
+
+
+
+ )
+ })}
+
+
+
+
+
+ )
+}
+
+export default Testimonial
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index 2536c8daf..e6ee7317e 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -1,6 +1,5 @@
import React, { useState, useEffect } from 'react'
import DownloadApp from '@site/src/containers/DownloadApp'
-import { Tweet } from 'react-tweet'
import { useForm } from 'react-hook-form'
import useBaseUrl from '@docusaurus/useBaseUrl'
@@ -27,6 +26,8 @@ import Svg from '@site/static/img/homepage/features01dark.svg'
import { twMerge } from 'tailwind-merge'
+import Testimonial from '@site/src/containers/Testimonial'
+
const table = {
labels: [
'Ownership',
@@ -280,16 +281,7 @@ export default function Home() {
{/* Wall of love */}
-
-
-
- People say nice things
-
-
- ...despite our bugs and fast moving releases
-
-
-
+
{/* Feature */}
@@ -729,6 +721,12 @@ export default function Home() {
+
+ {!isBrowserChrome && (
+
+
+
+ )}
>
diff --git a/docs/src/styles/components/base.scss b/docs/src/styles/components/base.scss
index 10d627b83..9eb38e7c6 100644
--- a/docs/src/styles/components/base.scss
+++ b/docs/src/styles/components/base.scss
@@ -27,6 +27,92 @@
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
+ .react-tweet-theme {
+ --tweet-container-margin: 1.5rem 0;
+ --tweet-header-font-size: 0.9375rem;
+ --tweet-header-line-height: 1.25rem;
+ --tweet-body-font-size: 1.25rem;
+ --tweet-body-font-weight: 400;
+ --tweet-body-line-height: 1.5rem;
+ --tweet-body-margin: 0;
+ --tweet-quoted-container-margin: 0.75rem 0;
+ --tweet-quoted-body-font-size: 0.938rem;
+ --tweet-quoted-body-font-weight: 400;
+ --tweet-quoted-body-line-height: 1.25rem;
+ --tweet-quoted-body-margin: 0.25rem 0 0.75rem 0;
+ --tweet-info-font-size: 0.9375rem;
+ --tweet-info-line-height: 1.25rem;
+ --tweet-actions-font-size: 0.875rem;
+ --tweet-actions-line-height: 1rem;
+ --tweet-actions-font-weight: 700;
+ --tweet-actions-icon-size: 1.25em;
+ --tweet-actions-icon-wrapper-size: calc(
+ var(--tweet-actions-icon-size) + 0.75em
+ );
+ --tweet-replies-font-size: 0.875rem;
+ --tweet-replies-line-height: 1rem;
+ --tweet-replies-font-weight: 700;
+ }
+
+ :is([data-theme='light'], .light) :where(.react-tweet-theme),
+ :where(.react-tweet-theme) {
+ --tweet-skeleton-gradient: linear-gradient(
+ 270deg,
+ #fafafa,
+ #eaeaea,
+ #eaeaea,
+ #fafafa
+ );
+ --tweet-border: 1px solid #cfd9de;
+ --tweet-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ Helvetica, Arial, sans-serif;
+ --tweet-font-color: #0f1419;
+ --tweet-font-color-secondary: #536471;
+ --tweet-bg-color: #fff;
+ --tweet-bg-color-hover: #f7f9f9;
+ --tweet-quoted-bg-color-hover: rgba(0, 0, 0, 0.03);
+ --tweet-color-blue-primary: #1d9bf0;
+ --tweet-color-blue-primary-hover: #1a8cd8;
+ --tweet-color-blue-secondary: #006fd6;
+ --tweet-color-blue-secondary-hover: rgba(0, 111, 214, 0.1);
+ --tweet-color-red-primary: #f91880;
+ --tweet-color-red-primary-hover: rgba(249, 24, 128, 0.1);
+ --tweet-color-green-primary: #00ba7c;
+ --tweet-color-green-primary-hover: rgba(0, 186, 124, 0.1);
+ --tweet-twitter-icon-color: var(--tweet-font-color);
+ --tweet-verified-old-color: #829aab;
+ --tweet-verified-blue-color: var(--tweet-color-blue-primary);
+ }
+
+ :is([data-theme='dark'], .dark) :where(.react-tweet-theme) {
+ --tweet-skeleton-gradient: linear-gradient(
+ 270deg,
+ #15202b,
+ #1e2732,
+ #1e2732,
+ #15202b
+ );
+ --tweet-border: 1px solid #425364;
+ --tweet-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ Helvetica, Arial, sans-serif;
+ --tweet-font-color: #f7f9f9;
+ --tweet-font-color-secondary: #8b98a5;
+ --tweet-bg-color: #333333;
+ --tweet-bg-color-hover: #1e2732;
+ --tweet-quoted-bg-color-hover: hsla(0, 0%, 100%, 0.03);
+ --tweet-color-blue-primary: #1d9bf0;
+ --tweet-color-blue-primary-hover: #1a8cd8;
+ --tweet-color-blue-secondary: #6bc9fb;
+ --tweet-color-blue-secondary-hover: rgba(107, 201, 251, 0.1);
+ --tweet-color-red-primary: #f91880;
+ --tweet-color-red-primary-hover: rgba(249, 24, 128, 0.1);
+ --tweet-color-green-primary: #00ba7c;
+ --tweet-color-green-primary-hover: rgba(0, 186, 124, 0.1);
+ --tweet-twitter-icon-color: var(--tweet-font-color);
+ --tweet-verified-old-color: #829aab;
+ --tweet-verified-blue-color: #fff;
+ }
+
pre,
code {
@apply text-sm;
@@ -69,3 +155,12 @@
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
}
+
+.actions_node_modules-react-tweet-dist-twitter-theme-tweet-actions-module,
+.authorFollow_node_modules-react-tweet-dist-twitter-theme-tweet-header-module {
+ display: none !important;
+}
+
+.replies_node_modules-react-tweet-dist-twitter-theme-tweet-replies-module {
+ margin-top: 10px;
+}