Skip to content

Commit 69f3dd9

Browse files
moskalakamilmoskalakamil
authored
docs: update landing page (#4807)
1 parent 6aaeebc commit 69f3dd9

39 files changed

+1034
-138
lines changed

‎bun.lock‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"@widlarzgroup/docusaurus-ui": "^0.0.3",
3838
"clsx": "^2.0.0",
3939
"docusaurus-lunr-search": "^3.6.0",
40+
"motion": "^12.23.26",
4041
"prism-react-renderer": "^2.3.0",
4142
"react": "^19.0.0",
4243
"react-dom": "^19.0.0",
@@ -1923,6 +1924,8 @@
19231924

19241925
"fraction.js": ["[email protected]", "", {}, "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="],
19251926

1927+
"framer-motion": ["[email protected]", "", { "dependencies": { "motion-dom": "^12.23.23", "motion-utils": "^12.23.6", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-cPcIhgR42xBn1Uj+PzOyheMtZ73H927+uWPDVhUMqxy8UHt6Okavb6xIz9J/phFUHUj0OncR6UvMfJTXoc/LKA=="],
1928+
19261929
"fresh": ["[email protected]", "", {}, "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="],
19271930

19281931
"fs-extra": ["[email protected]", "", { "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ=="],
@@ -2673,6 +2676,12 @@
26732676

26742677
"mkdirp": ["[email protected]", "", {}, "sha512-OHsdUcVAQ6pOtg5JYWpCBo9W/GySVuwvP9hueRMW7UqshC0tbfzLv8wjySTPm3tfUZ/21CE9E1pJagOA91Pxew=="],
26752678

2679+
"motion": ["[email protected]", "", { "dependencies": { "framer-motion": "^12.23.26", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-Ll8XhVxY8LXMVYTCfme27WH2GjBrCIzY4+ndr5QKxsK+YwCtOi2B/oBi5jcIbik5doXuWT/4KKDOVAZJkeY5VQ=="],
2680+
2681+
"motion-dom": ["[email protected]", "", { "dependencies": { "motion-utils": "^12.23.6" } }, "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA=="],
2682+
2683+
"motion-utils": ["[email protected]", "", {}, "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ=="],
2684+
26762685
"mrmime": ["[email protected]", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],
26772686

26782687
"ms": ["[email protected]", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],

‎docs/docusaurus.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const config: Config = {
8686
navbar: {
8787
title: 'React Native Video',
8888
logo: {
89-
alt: 'React Native Video Logo',
89+
alt: 'TheWidlarzGroup Logo',
9090
style: {
9191
width: '60px',
9292
height: '40px',

‎docs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"@widlarzgroup/docusaurus-ui": "^0.0.3",
2424
"clsx": "^2.0.0",
2525
"docusaurus-lunr-search": "^3.6.0",
26+
"motion": "^12.23.26",
2627
"prism-react-renderer": "^2.3.0",
2728
"react": "^19.0.0",
2829
"react-dom": "^19.0.0"

‎docs/src/components/Homepage/Enterprise/Enterprise.module.css‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
.enterprise {
2+
padding: 6rem 2rem;
3+
}
4+
5+
.container {
6+
max-width: 1200px;
7+
margin: 0 auto;
8+
}
9+
10+
.content {
11+
display: grid;
12+
grid-template-columns: 1fr 1fr;
13+
gap: 4rem;
14+
align-items: center;
15+
}
16+
17+
.textContent {
18+
display: flex;
19+
flex-direction: column;
20+
gap: 1.5rem;
21+
}
22+
23+
.label {
24+
display: inline-block;
25+
padding: 0.5rem 1rem;
26+
font-size: 0.75rem;
27+
font-weight: 600;
28+
text-transform: uppercase;
29+
letter-spacing: 0.1em;
30+
color: var(--color-accent);
31+
background: var(--color-accent-subtle);
32+
border-radius: 100px;
33+
width: fit-content;
34+
}
35+
36+
.title {
37+
margin: 0;
38+
font-size: 2.5rem;
39+
font-weight: 700;
40+
line-height: 1.2;
41+
color: var(--color-text-primary);
42+
}
43+
44+
.description {
45+
margin: 0;
46+
font-size: 1.125rem;
47+
line-height: 1.6;
48+
color: var(--color-text-secondary);
49+
}
50+
51+
.ctaButton {
52+
display: inline-flex;
53+
align-items: center;
54+
gap: 0.5rem;
55+
padding: 0.875rem 1.5rem;
56+
font-size: 1rem;
57+
font-weight: 600;
58+
color: var(--color-text-primary);
59+
background: var(--color-accent-bright);
60+
border-radius: 8px;
61+
text-decoration: none;
62+
transition: all 0.2s ease;
63+
width: fit-content;
64+
}
65+
66+
[data-theme='dark'] .ctaButton {
67+
color: var(--color-bg-primary);
68+
}
69+
70+
.ctaButton:hover {
71+
transform: translateY(-2px);
72+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
73+
}
74+
75+
.arrowIcon {
76+
width: 20px;
77+
height: 20px;
78+
transition: transform 0.2s ease;
79+
}
80+
81+
.ctaButton:hover .arrowIcon {
82+
transform: translateX(4px);
83+
}
84+
85+
.featuresList {
86+
display: flex;
87+
flex-direction: column;
88+
gap: 1rem;
89+
}
90+
91+
@media (max-width: 968px) {
92+
.content {
93+
grid-template-columns: 1fr;
94+
gap: 3rem;
95+
}
96+
97+
.title {
98+
font-size: 2rem;
99+
}
100+
}
101+
102+
@media (max-width: 640px) {
103+
.enterprise {
104+
padding: 4rem 1.5rem;
105+
}
106+
107+
.title {
108+
font-size: 1.75rem;
109+
}
110+
111+
.description {
112+
font-size: 1rem;
113+
}
114+
}
115+

‎docs/src/components/Homepage/Enterprise/Enterprise.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react';
2+
import Link from '@docusaurus/Link';
3+
import { FeatureCard, type FeatureCardItem } from './FeatureCard/FeatureCard';
4+
import styles from './Enterprise.module.css';
5+
6+
const ArrowIcon = require('@site/static/img/arrow-icon.svg').default;
7+
const LayersIcon =
8+
require('@site/static/img/homepage/enterprise/layers-icon.svg').default;
9+
const ShieldIcon =
10+
require('@site/static/img/homepage/enterprise/shield-icon.svg').default;
11+
const LightningIcon =
12+
require('@site/static/img/homepage/enterprise/lightning-icon.svg').default;
13+
14+
const CONTACT_URL =
15+
'https://www.thewidlarzgroup.com/?utm_source=rnv&utm_medium=docs&utm_campaign=landing-enterprise-solutions&utm_id=enterprise#Contact';
16+
17+
const FEATURE_LIST: FeatureCardItem[] = [
18+
{
19+
title: 'Custom Integration',
20+
description: 'Custom solutions for your specific requirements',
21+
Icon: LayersIcon,
22+
},
23+
{
24+
title: 'Dedicated Support',
25+
description: 'Priority support with direct access to our team',
26+
Icon: ShieldIcon,
27+
},
28+
{
29+
title: 'Expert Consultation',
30+
description: 'Architecture guidance and best practices',
31+
Icon: LightningIcon,
32+
},
33+
];
34+
35+
export function Enterprise() {
36+
return (
37+
<section className={styles.enterprise}>
38+
<div className={styles.container}>
39+
<div className={styles.content}>
40+
<div className={styles.textContent}>
41+
<span className={styles.label}>Enterprise Solutions</span>
42+
<h2 className={styles.title}>
43+
Need custom integration or support?
44+
</h2>
45+
<p className={styles.description}>
46+
Our team provides enterprise-grade integration services, custom
47+
development, and dedicated support to help you build the perfect
48+
video solution for your business.
49+
</p>
50+
<Link to={CONTACT_URL} className={styles.ctaButton}>
51+
Get in touch
52+
<ArrowIcon className={styles.arrowIcon} />
53+
</Link>
54+
</div>
55+
<div className={styles.featuresList}>
56+
{FEATURE_LIST.map((feature) => (
57+
<FeatureCard key={feature.title} {...feature} />
58+
))}
59+
</div>
60+
</div>
61+
</div>
62+
</section>
63+
);
64+
}

‎docs/src/components/Homepage/Enterprise/FeatureCard/FeatureCard.module.css‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.card {
2+
display: flex;
3+
gap: 1rem;
4+
padding: 1.25rem;
5+
background: var(--color-bg-secondary);
6+
border: 1px solid var(--color-border);
7+
border-radius: 12px;
8+
transition: all 0.2s ease;
9+
}
10+
11+
.card:hover {
12+
border-color: var(--color-border-hover);
13+
}
14+
15+
.iconWrapper {
16+
flex-shrink: 0;
17+
width: 48px;
18+
height: 48px;
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
background: var(--color-bg-tertiary);
23+
border: 1px solid var(--color-border);
24+
border-radius: 10px;
25+
}
26+
27+
.icon {
28+
width: 24px;
29+
height: 24px;
30+
stroke: var(--color-accent);
31+
}
32+
33+
.content {
34+
display: flex;
35+
flex-direction: column;
36+
gap: 0.25rem;
37+
}
38+
39+
.title {
40+
margin: 0;
41+
font-size: 1rem;
42+
font-weight: 600;
43+
color: var(--color-text-primary);
44+
}
45+
46+
.description {
47+
margin: 0;
48+
font-size: 0.875rem;
49+
color: var(--color-text-secondary);
50+
line-height: 1.5;
51+
}
52+

‎docs/src/components/Homepage/Enterprise/FeatureCard/FeatureCard.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import styles from './FeatureCard.module.css';
3+
4+
export interface FeatureCardItem {
5+
title: string;
6+
description: string;
7+
Icon: React.ComponentType<React.ComponentProps<'svg'>>;
8+
}
9+
10+
export function FeatureCard({ title, description, Icon }: FeatureCardItem) {
11+
return (
12+
<div className={styles.card}>
13+
<div className={styles.iconWrapper}>
14+
<Icon role="img" className={styles.icon} />
15+
</div>
16+
<div className={styles.content}>
17+
<h3 className={styles.title}>{title}</h3>
18+
<p className={styles.description}>{description}</p>
19+
</div>
20+
</div>
21+
);
22+
}

‎docs/src/components/Homepage/Features/Feature/Feature.module.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
.card {
2+
position: relative;
3+
padding: 2rem;
4+
border-radius: 16px;
5+
background: var(--glass-bg);
6+
border: 1px solid var(--color-border);
7+
transition: all 0.3s ease;
8+
backdrop-filter: blur(10px);
9+
display: flex;
10+
flex-direction: column;
11+
}
12+
13+
.card:hover {
14+
border-color: rgba(150, 201, 235, 0.4);
15+
background: var(--color-bg-elevated);
16+
box-shadow: 0 4px 20px rgba(150, 201, 235, 0.15);
17+
transform: translateY(-2px);
18+
}
19+
20+
[data-theme='dark'] .card:hover {
21+
box-shadow: none;
22+
}
23+
24+
.iconWrapper {
25+
display: flex;
26+
align-items: center;
27+
justify-content: center;
28+
width: 48px;
29+
height: 48px;
30+
margin-bottom: 1.5rem;
31+
border-radius: 12px;
32+
background: var(--color-accent-subtle);
33+
border: 1px solid rgba(150, 201, 235, 0.2);
34+
}
35+
36+
[data-theme='dark'] .iconWrapper {
37+
background: var(--color-bg-tertiary);
38+
border: 1px solid var(--color-border);
39+
}
40+
41+
.icon {
42+
width: 24px;
43+
height: 24px;
44+
stroke: var(--color-accent);
45+
}
46+
47+
.title {
48+
font-size: 1.15rem;
49+
font-weight: 600;
50+
color: var(--color-text-primary);
51+
margin-bottom: 0.75rem;
52+
letter-spacing: -0.01em;
53+
}
54+
55+
.description {
56+
font-size: 0.95rem;
57+
color: var(--color-text-secondary);
58+
line-height: 1.7;
59+
margin: 0;
60+
}
61+
62+
.card:hover .iconWrapper {
63+
background: rgba(150, 201, 235, 0.15);
64+
border-color: rgba(150, 201, 235, 0.3);
65+
}
66+
67+
[data-theme='dark'] .card:hover .iconWrapper {
68+
background: rgba(150, 201, 235, 0.1);
69+
border-color: rgba(150, 201, 235, 0.2);
70+
}

‎docs/src/components/Homepage/Features/Feature/Feature.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import styles from './Feature.module.css';
3+
4+
export interface FeatureItem {
5+
title: string;
6+
Icon: React.ComponentType<React.ComponentProps<'svg'>>;
7+
description: string;
8+
}
9+
10+
export function Feature({ title, Icon, description }: FeatureItem) {
11+
return (
12+
<div className={styles.card}>
13+
<div className={styles.iconWrapper}>
14+
<Icon role="img" className={styles.icon} />
15+
</div>
16+
<h3 className={styles.title}>{title}</h3>
17+
<p className={styles.description}>{description}</p>
18+
</div>
19+
);
20+
}

0 commit comments

Comments
 (0)