+
{
>
}
@@ -378,25 +308,3 @@ const Contributors: React.FC = () => {
);
};
-
-const DeveloperCommunityStats4: React.FC = () => {
- const {isDarkTheme} = useColorMode();
- const styles = useStyles(isDarkTheme);
-
- return (
-
-
Developer community stats
-
A thriving community of developers.
-
-
- );
-};
-
-export default DeveloperCommunityStats4;
diff --git a/packages/docs/components/LandingPage/CommunityStats.module.css b/packages/docs/components/LandingPage/CommunityStats.module.css
new file mode 100644
index 00000000000..31869ebaaf4
--- /dev/null
+++ b/packages/docs/components/LandingPage/CommunityStats.module.css
@@ -0,0 +1,68 @@
+.container {
+ max-width: 700px;
+ margin: 0 auto;
+ text-align: center;
+ justify-content: center;
+}
+
+.title {
+ font-size: 2.5rem;
+ font-weight: bold;
+ margin-bottom: 0.5rem;
+}
+
+.subtitle {
+ font-size: 1.25rem;
+ margin-bottom: 1.5rem;
+}
+
+.statsGrid {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ gap: 1rem;
+ width: 100%;
+ align-items: center;
+}
+
+.statItemLink {
+ text-decoration: none;
+ color: inherit;
+ display: contents; /* "display: contents" causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */
+}
+
+.statItemLink:hover,
+.statItemLink:focus,
+.statItemLink:active {
+ text-decoration: none;
+ color: inherit;
+}
+
+.statItem {
+ background-color: var(--ifm-background-surface-color);
+ border-radius: 0.5rem;
+ border: 5px solid var(--text-color);
+ padding: 0.3rem;
+ box-shadow:
+ 0 1px 3px rgba(0, 0, 0, 0.12),
+ 0 1px 2px rgba(0, 0, 0, 0.24);
+ line-height: 1;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ flex: 1 1 30%;
+ min-width: 200px;
+ min-height: 80px;
+ max-height: 110px;
+ flex: 1 1 30%; /* Makes the items grow/shrink consistently */
+ transition:
+ transform 0.2s,
+ box-shadow 0.2s;
+}
+
+.statItem:hover {
+ transform: scale(0.95);
+ box-shadow: var(--box-shadow);
+}
diff --git a/packages/docs/components/LandingPage/CommunityStats.tsx b/packages/docs/components/LandingPage/CommunityStats.tsx
new file mode 100644
index 00000000000..4f29e8461dc
--- /dev/null
+++ b/packages/docs/components/LandingPage/CommunityStats.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+ Contributors,
+ DiscordMembers,
+ GitHubStars,
+ InstallsPerMonth,
+ PagesOfDocs,
+ TemplatesAndExamples,
+} from './CommunityStatItems';
+import styles from './CommunityStats.module.css';
+
+const CommunityStats: React.FC = () => (
+
+
Never build alone
+
Join a thriving community of developers.
+
+
+);
+
+export default CommunityStats;
diff --git a/packages/docs/components/LandingPage/DeveloperCommunityStats2-SharedComponent.tsx b/packages/docs/components/LandingPage/DeveloperCommunityStats2-SharedComponent.tsx
deleted file mode 100644
index eb8ad250cdd..00000000000
--- a/packages/docs/components/LandingPage/DeveloperCommunityStats2-SharedComponent.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import {useColorMode} from '@docusaurus/theme-common';
-import React from 'react';
-
-export const StatItemContent: React.FC<{
- content: React.ReactNode;
- width: string;
- height?: string;
- fontSize?: string;
- fontWeight?: React.CSSProperties['fontWeight'];
- className?: string; // Add className prop
-}> = ({content, width, height = 'auto', fontSize, fontWeight, className}) => (
-
- {content}
-
-);
-
-export const useSvgFillColor = () => {
- const {isDarkTheme} = useColorMode();
- return isDarkTheme ? '#E3E3E3' : 'black';
-};
diff --git a/packages/docs/components/LandingPage/DeveloperCommunityStats2-StatComponents.tsx b/packages/docs/components/LandingPage/DeveloperCommunityStats2-StatComponents.tsx
deleted file mode 100644
index 7f7d037cb12..00000000000
--- a/packages/docs/components/LandingPage/DeveloperCommunityStats2-StatComponents.tsx
+++ /dev/null
@@ -1,257 +0,0 @@
-import React from 'react';
-import {
- StatItemContent,
- useSvgFillColor,
-} from './DeveloperCommunityStats2-SharedComponent';
-
-export const InstallsPerMonth: React.FC = () => {
- const svgFillColor = useSvgFillColor();
-
- return (
-
-
-
-
-
- }
- width="25%"
- />
-
-
- );
-};
-
-export const PagesOfDocs: React.FC = () => {
- const svgFillColor = useSvgFillColor();
- return (
-
-
-
-
- }
- width="25%"
- />
-
-
-
- );
-};
-
-export const TemplatesAndExamples: React.FC = () => (
-
-
-
-
-);
-
-export const GitHubStars: React.FC = () => {
- const svgFillColor = useSvgFillColor();
-
- return (
-
-
-
-
- }
- width="25%"
- />
-
-
-
- );
-};
-
-export const DiscordMembers: React.FC = () => {
- const svgFillColor = useSvgFillColor();
-
- return (
-
-
-
-
-
-
-
-
-
-
- }
- width="100%"
- />
-
-
-
- );
-};
-
-export const Contributors: React.FC = () => {
- const svgFillColor = useSvgFillColor();
-
- return (
-
-
-
-
-
-
- }
- width="150%"
- />
-
-
-
-
-
-
-
- );
-};
diff --git a/packages/docs/components/LandingPage/DeveloperCommunityStats2.module.css b/packages/docs/components/LandingPage/DeveloperCommunityStats2.module.css
deleted file mode 100644
index 0f99666480b..00000000000
--- a/packages/docs/components/LandingPage/DeveloperCommunityStats2.module.css
+++ /dev/null
@@ -1,59 +0,0 @@
-.developer-stats-container {
- max-width: 67%;
- width: 67%;
- margin: 0 auto;
- text-align: center;
-}
-
-.developer-stats-title {
- font-size: 2.5rem;
- font-weight: bold;
- margin-bottom: 0.5rem;
-}
-
-.developer-stats-subtitle {
- font-size: 1.25rem;
- margin-bottom: 1.5rem;
-}
-
-.developer-stats-grid {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- gap: 1rem;
- width: 100%;
-}
-
-.stat-item {
- background-color: var(--ifm-background-surface-color);
- border-radius: 0.5rem;
- border: 5px solid #000000;
- padding: 0.3rem;
- box-shadow:
- 0 1px 3px rgba(0, 0, 0, 0.12),
- 0 1px 2px rgba(0, 0, 0, 0.24);
- line-height: 1;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center;
- align-content: center;
-}
-
-.stat-item-content {
- border: 1px solid #000000;
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
-}
-
-.stat-item-large-text {
- font-size: 2.5rem;
- font-weight: bold;
-}
-
-.stat-item-small-text {
- font-size: 1rem;
- font-weight: bold;
-}
diff --git a/packages/docs/components/LandingPage/DeveloperCommunityStats2.tsx b/packages/docs/components/LandingPage/DeveloperCommunityStats2.tsx
deleted file mode 100644
index a2e2f18f458..00000000000
--- a/packages/docs/components/LandingPage/DeveloperCommunityStats2.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import {
- Contributors,
- DiscordMembers,
- GitHubStars,
- InstallsPerMonth,
- PagesOfDocs,
- TemplatesAndExamples,
-} from './DeveloperCommunityStats2-StatComponents';
-import './DeveloperCommunityStats2.module.css';
-
-const DeveloperCommunityStats2: React.FC = () => (
-
-
Developer community stats
-
- A thriving community of developers.
-
-
-
-);
-
-export default DeveloperCommunityStats2;
diff --git a/packages/docs/components/LandingPage/EvaluateRemotionSection.tsx b/packages/docs/components/LandingPage/EvaluateRemotionSection.tsx
index 017e9d18391..4c5bf0f7be1 100644
--- a/packages/docs/components/LandingPage/EvaluateRemotionSection.tsx
+++ b/packages/docs/components/LandingPage/EvaluateRemotionSection.tsx
@@ -52,6 +52,7 @@ const EvaluateRemotionSection: React.FC = () => {
className={styles.aknow}
target="_blank"
href="https://cal.com/remotion/evaluate"
+ style={{textDecoration: 'none'}}
>
Schedule a call
@@ -66,7 +67,11 @@ const EvaluateRemotionSection: React.FC = () => {