diff --git a/bun.lock b/bun.lock index 93abde6c..9e44e9ef 100644 --- a/bun.lock +++ b/bun.lock @@ -37,6 +37,7 @@ "@widlarzgroup/docusaurus-ui": "^0.0.3", "clsx": "^2.0.0", "docusaurus-lunr-search": "^3.6.0", + "motion": "^12.23.26", "prism-react-renderer": "^2.3.0", "react": "^19.0.0", "react-dom": "^19.0.0", @@ -1923,6 +1924,8 @@ "fraction.js": ["fraction.js@4.3.7", "", {}, "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="], + "framer-motion": ["framer-motion@12.23.26", "", { "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=="], + "fresh": ["fresh@0.5.2", "", {}, "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="], "fs-extra": ["fs-extra@10.1.0", "", { "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 @@ "mkdirp": ["mkdirp@0.3.0", "", {}, "sha512-OHsdUcVAQ6pOtg5JYWpCBo9W/GySVuwvP9hueRMW7UqshC0tbfzLv8wjySTPm3tfUZ/21CE9E1pJagOA91Pxew=="], + "motion": ["motion@12.23.26", "", { "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=="], + + "motion-dom": ["motion-dom@12.23.23", "", { "dependencies": { "motion-utils": "^12.23.6" } }, "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA=="], + + "motion-utils": ["motion-utils@12.23.6", "", {}, "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ=="], + "mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="], "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="], diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts index 75e2cc9b..f827de31 100644 --- a/docs/docusaurus.config.ts +++ b/docs/docusaurus.config.ts @@ -86,7 +86,7 @@ const config: Config = { navbar: { title: 'React Native Video', logo: { - alt: 'React Native Video Logo', + alt: 'TheWidlarzGroup Logo', style: { width: '60px', height: '40px', diff --git a/docs/package.json b/docs/package.json index fb513048..a0cf6547 100644 --- a/docs/package.json +++ b/docs/package.json @@ -23,6 +23,7 @@ "@widlarzgroup/docusaurus-ui": "^0.0.3", "clsx": "^2.0.0", "docusaurus-lunr-search": "^3.6.0", + "motion": "^12.23.26", "prism-react-renderer": "^2.3.0", "react": "^19.0.0", "react-dom": "^19.0.0" diff --git a/docs/src/components/Homepage/Enterprise/Enterprise.module.css b/docs/src/components/Homepage/Enterprise/Enterprise.module.css new file mode 100644 index 00000000..520d20d5 --- /dev/null +++ b/docs/src/components/Homepage/Enterprise/Enterprise.module.css @@ -0,0 +1,115 @@ +.enterprise { + padding: 6rem 2rem; +} + +.container { + max-width: 1200px; + margin: 0 auto; +} + +.content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; +} + +.textContent { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.label { + display: inline-block; + padding: 0.5rem 1rem; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--color-accent); + background: var(--color-accent-subtle); + border-radius: 100px; + width: fit-content; +} + +.title { + margin: 0; + font-size: 2.5rem; + font-weight: 700; + line-height: 1.2; + color: var(--color-text-primary); +} + +.description { + margin: 0; + font-size: 1.125rem; + line-height: 1.6; + color: var(--color-text-secondary); +} + +.ctaButton { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.875rem 1.5rem; + font-size: 1rem; + font-weight: 600; + color: var(--color-text-primary); + background: var(--color-accent-bright); + border-radius: 8px; + text-decoration: none; + transition: all 0.2s ease; + width: fit-content; +} + +[data-theme='dark'] .ctaButton { + color: var(--color-bg-primary); +} + +.ctaButton:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +.arrowIcon { + width: 20px; + height: 20px; + transition: transform 0.2s ease; +} + +.ctaButton:hover .arrowIcon { + transform: translateX(4px); +} + +.featuresList { + display: flex; + flex-direction: column; + gap: 1rem; +} + +@media (max-width: 968px) { + .content { + grid-template-columns: 1fr; + gap: 3rem; + } + + .title { + font-size: 2rem; + } +} + +@media (max-width: 640px) { + .enterprise { + padding: 4rem 1.5rem; + } + + .title { + font-size: 1.75rem; + } + + .description { + font-size: 1rem; + } +} + diff --git a/docs/src/components/Homepage/Enterprise/Enterprise.tsx b/docs/src/components/Homepage/Enterprise/Enterprise.tsx new file mode 100644 index 00000000..39a1632d --- /dev/null +++ b/docs/src/components/Homepage/Enterprise/Enterprise.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import Link from '@docusaurus/Link'; +import { FeatureCard, type FeatureCardItem } from './FeatureCard/FeatureCard'; +import styles from './Enterprise.module.css'; + +const ArrowIcon = require('@site/static/img/arrow-icon.svg').default; +const LayersIcon = + require('@site/static/img/homepage/enterprise/layers-icon.svg').default; +const ShieldIcon = + require('@site/static/img/homepage/enterprise/shield-icon.svg').default; +const LightningIcon = + require('@site/static/img/homepage/enterprise/lightning-icon.svg').default; + +const CONTACT_URL = + 'https://www.thewidlarzgroup.com/?utm_source=rnv&utm_medium=docs&utm_campaign=landing-enterprise-solutions&utm_id=enterprise#Contact'; + +const FEATURE_LIST: FeatureCardItem[] = [ + { + title: 'Custom Integration', + description: 'Custom solutions for your specific requirements', + Icon: LayersIcon, + }, + { + title: 'Dedicated Support', + description: 'Priority support with direct access to our team', + Icon: ShieldIcon, + }, + { + title: 'Expert Consultation', + description: 'Architecture guidance and best practices', + Icon: LightningIcon, + }, +]; + +export function Enterprise() { + return ( +
+
+
+
+ Enterprise Solutions +

+ Need custom integration or support? +

+

+ Our team provides enterprise-grade integration services, custom + development, and dedicated support to help you build the perfect + video solution for your business. +

+ + Get in touch + + +
+
+ {FEATURE_LIST.map((feature) => ( + + ))} +
+
+
+
+ ); +} diff --git a/docs/src/components/Homepage/Enterprise/FeatureCard/FeatureCard.module.css b/docs/src/components/Homepage/Enterprise/FeatureCard/FeatureCard.module.css new file mode 100644 index 00000000..3d7319ce --- /dev/null +++ b/docs/src/components/Homepage/Enterprise/FeatureCard/FeatureCard.module.css @@ -0,0 +1,52 @@ +.card { + display: flex; + gap: 1rem; + padding: 1.25rem; + background: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: 12px; + transition: all 0.2s ease; +} + +.card:hover { + border-color: var(--color-border-hover); +} + +.iconWrapper { + flex-shrink: 0; + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-bg-tertiary); + border: 1px solid var(--color-border); + border-radius: 10px; +} + +.icon { + width: 24px; + height: 24px; + stroke: var(--color-accent); +} + +.content { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.title { + margin: 0; + font-size: 1rem; + font-weight: 600; + color: var(--color-text-primary); +} + +.description { + margin: 0; + font-size: 0.875rem; + color: var(--color-text-secondary); + line-height: 1.5; +} + diff --git a/docs/src/components/Homepage/Enterprise/FeatureCard/FeatureCard.tsx b/docs/src/components/Homepage/Enterprise/FeatureCard/FeatureCard.tsx new file mode 100644 index 00000000..d16df1a6 --- /dev/null +++ b/docs/src/components/Homepage/Enterprise/FeatureCard/FeatureCard.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import styles from './FeatureCard.module.css'; + +export interface FeatureCardItem { + title: string; + description: string; + Icon: React.ComponentType>; +} + +export function FeatureCard({ title, description, Icon }: FeatureCardItem) { + return ( +
+
+ +
+
+

{title}

+

{description}

+
+
+ ); +} diff --git a/docs/src/components/Homepage/Features/Feature/Feature.module.css b/docs/src/components/Homepage/Features/Feature/Feature.module.css new file mode 100644 index 00000000..e16822a2 --- /dev/null +++ b/docs/src/components/Homepage/Features/Feature/Feature.module.css @@ -0,0 +1,70 @@ +.card { + position: relative; + padding: 2rem; + border-radius: 16px; + background: var(--glass-bg); + border: 1px solid var(--color-border); + transition: all 0.3s ease; + backdrop-filter: blur(10px); + display: flex; + flex-direction: column; +} + +.card:hover { + border-color: rgba(150, 201, 235, 0.4); + background: var(--color-bg-elevated); + box-shadow: 0 4px 20px rgba(150, 201, 235, 0.15); + transform: translateY(-2px); +} + +[data-theme='dark'] .card:hover { + box-shadow: none; +} + +.iconWrapper { + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + margin-bottom: 1.5rem; + border-radius: 12px; + background: var(--color-accent-subtle); + border: 1px solid rgba(150, 201, 235, 0.2); +} + +[data-theme='dark'] .iconWrapper { + background: var(--color-bg-tertiary); + border: 1px solid var(--color-border); +} + +.icon { + width: 24px; + height: 24px; + stroke: var(--color-accent); +} + +.title { + font-size: 1.15rem; + font-weight: 600; + color: var(--color-text-primary); + margin-bottom: 0.75rem; + letter-spacing: -0.01em; +} + +.description { + font-size: 0.95rem; + color: var(--color-text-secondary); + line-height: 1.7; + margin: 0; +} + +.card:hover .iconWrapper { + background: rgba(150, 201, 235, 0.15); + border-color: rgba(150, 201, 235, 0.3); +} + +[data-theme='dark'] .card:hover .iconWrapper { + background: rgba(150, 201, 235, 0.1); + border-color: rgba(150, 201, 235, 0.2); +} diff --git a/docs/src/components/Homepage/Features/Feature/Feature.tsx b/docs/src/components/Homepage/Features/Feature/Feature.tsx new file mode 100644 index 00000000..ac3847bb --- /dev/null +++ b/docs/src/components/Homepage/Features/Feature/Feature.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import styles from './Feature.module.css'; + +export interface FeatureItem { + title: string; + Icon: React.ComponentType>; + description: string; +} + +export function Feature({ title, Icon, description }: FeatureItem) { + return ( +
+
+ +
+

{title}

+

{description}

+
+ ); +} diff --git a/docs/src/components/Homepage/Features/Features.module.css b/docs/src/components/Homepage/Features/Features.module.css new file mode 100644 index 00000000..577f6191 --- /dev/null +++ b/docs/src/components/Homepage/Features/Features.module.css @@ -0,0 +1,69 @@ +.features { + padding: 6rem 2rem 8rem; + position: relative; + background: linear-gradient(180deg, transparent 0%, var(--color-bg-primary) 15%, var(--color-bg-primary) 100%); + margin-top: -1px; +} + +.container { + max-width: 1200px; + margin: 0 auto; +} + +.header { + text-align: center; + margin-bottom: 4rem; +} + +.label { + display: inline-block; + padding: 0.4rem 1rem; + background: var(--color-accent-subtle); + border: 1px solid rgba(150, 201, 235, 0.2); + border-radius: 100px; + font-size: 0.8rem; + font-weight: 600; + color: var(--color-accent); + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 1.5rem; +} + +.title { + font-size: clamp(1.75rem, 4vw, 2.5rem); + font-weight: 700; + color: var(--color-text-primary); + letter-spacing: -0.03em; + margin-bottom: 1rem; + line-height: 1.2; +} + +.subtitle { + font-size: 1.1rem; + color: var(--color-text-muted); + max-width: 500px; + margin: 0 auto; + line-height: 1.7; +} + +.grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; +} + +@media (max-width: 1024px) { + .grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 640px) { + .grid { + grid-template-columns: 1fr; + } + + .features { + padding: 4rem 1.5rem 6rem; + } +} diff --git a/docs/src/components/Homepage/Features/Features.tsx b/docs/src/components/Homepage/Features/Features.tsx new file mode 100644 index 00000000..9bed2083 --- /dev/null +++ b/docs/src/components/Homepage/Features/Features.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import { Feature, type FeatureItem } from './Feature/Feature'; +import styles from './Features.module.css'; + +const FEATURE_LIST: FeatureItem[] = [ + { + title: 'React Native First', + Icon: require('@site/static/img/homepage/features/reactjs-icon.svg') + .default, + description: + 'Built specifically for React Native with a native-first approach. Seamless integration with your existing React Native projects.', + }, + { + title: 'Multi-Platform', + Icon: require('@site/static/img/homepage/features/platforms-icon.svg') + .default, + description: + 'iOS, Android, tvOS, visionOS, Vega OS, Web, and Windows. One API across all platforms with platform-specific optimizations.', + }, + { + title: 'Subtitles & Audio', + Icon: require('@site/static/img/homepage/features/subtitles-icon.svg') + .default, + description: + 'Full support for multiple subtitle formats and audio tracks. Switch between languages on the fly.', + }, + { + title: 'DRM Protected', + Icon: require('@site/static/img/homepage/features/shield-icon.svg').default, + description: + 'Industry-standard DRM support including Widevine, FairPlay, and PlayReady for secure content delivery.', + }, + { + title: 'High Performance', + Icon: require('@site/static/img/homepage/features/performance-icon.svg') + .default, + description: + 'Optimized native players under the hood. Smooth playback with minimal memory footprint.', + }, + { + title: 'Plugin System', + Icon: require('@site/static/img/homepage/features/plugins-icon.svg') + .default, + description: + 'Extensible architecture with a powerful plugin system. Add custom functionality without forking.', + }, +]; + +export function Features() { + return ( +
+
+
+ Features +

+ Everything you need for video playback +

+

+ A comprehensive video solution trusted by thousands of developers + worldwide +

+
+ +
+ {FEATURE_LIST.map((props, idx) => ( + + ))} +
+
+
+ ); +} diff --git a/docs/src/components/Homepage/Hero/Badge/Badge.module.css b/docs/src/components/Homepage/Hero/Badge/Badge.module.css new file mode 100644 index 00000000..9b37c321 --- /dev/null +++ b/docs/src/components/Homepage/Hero/Badge/Badge.module.css @@ -0,0 +1,27 @@ +.badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + margin-bottom: 1.5rem; + background: var(--color-secondary-subtle); + border: 1px solid rgba(250, 216, 91, 0.25); + border-radius: 100px; + font-size: 0.85rem; + font-weight: 500; + color: var(--color-secondary); +} + +.dot { + width: 8px; + height: 8px; + background: var(--color-secondary-dim); + border-radius: 50%; +} + +@media screen and (max-width: 480px) { + .badge { + font-size: 0.75rem; + padding: 0.4rem 0.8rem; + } +} diff --git a/docs/src/components/Homepage/Hero/Badge/Badge.tsx b/docs/src/components/Homepage/Hero/Badge/Badge.tsx new file mode 100644 index 00000000..0dfc6a6c --- /dev/null +++ b/docs/src/components/Homepage/Hero/Badge/Badge.tsx @@ -0,0 +1,21 @@ +import React, { type ReactNode } from 'react'; +import { motion } from 'motion/react'; +import { itemVariants } from '../Hero'; +import styles from './Badge.module.css'; + +interface BadgeProps { + children: ReactNode; +} + +export function Badge({ children }: BadgeProps) { + return ( + + + {children} + + ); +} diff --git a/docs/src/components/Homepage/Hero/Buttons/Buttons.module.css b/docs/src/components/Homepage/Hero/Buttons/Buttons.module.css new file mode 100644 index 00000000..7571d530 --- /dev/null +++ b/docs/src/components/Homepage/Hero/Buttons/Buttons.module.css @@ -0,0 +1,68 @@ +.buttons { + display: flex; + flex-wrap: wrap; + gap: 1rem; + justify-content: center; +} + +.primary, +.secondary { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 1rem 2rem; + font-size: 1rem; + font-weight: 600; + border-radius: 12px; + text-decoration: none; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.primary:hover, +.secondary:hover { + transform: translateY(-2px); +} + +.primary { + background: var(--color-accent-bright); + color: var(--color-dark); + box-shadow: 0 0 0 0 rgba(150, 201, 235, 0); +} + +.primary:hover { + background: var(--color-accent-bright-dim); +} + +.secondary { + background: transparent; + color: var(--color-text-primary); + border: 1px solid var(--color-border); +} + +.secondary:hover { + background: var(--color-accent-subtle); + border-color: var(--color-border-hover); +} + +.icon { + width: 20px; + height: 20px; + transition: transform 0.3s ease; +} + +.primary:hover .icon { + transform: translateX(4px); +} + +@media screen and (max-width: 768px) { + .buttons { + flex-direction: column; + width: 100%; + } + + .primary, + .secondary { + width: 100%; + justify-content: center; + } +} diff --git a/docs/src/components/Homepage/Hero/Buttons/Buttons.tsx b/docs/src/components/Homepage/Hero/Buttons/Buttons.tsx new file mode 100644 index 00000000..92d4a390 --- /dev/null +++ b/docs/src/components/Homepage/Hero/Buttons/Buttons.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import Link from '@docusaurus/Link'; +import { motion } from 'motion/react'; +import { itemVariants } from '../Hero'; +import styles from './Buttons.module.css'; + +const ArrowIcon = require('@site/static/img/arrow-icon.svg').default; +const GitHubIcon = require('@site/static/img/github-icon.svg').default; + +interface ButtonsProps { + docsLink: string; + githubLink: string; +} + +export function Buttons({ docsLink, githubLink }: ButtonsProps) { + return ( + + + Get Started + + + + + View on GitHub + + + ); +} diff --git a/docs/src/components/Homepage/Hero/Hero.module.css b/docs/src/components/Homepage/Hero/Hero.module.css new file mode 100644 index 00000000..35fa47a2 --- /dev/null +++ b/docs/src/components/Homepage/Hero/Hero.module.css @@ -0,0 +1,118 @@ +.hero { + position: relative; + min-height: calc(100vh - var(--ifm-navbar-height)); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 4rem 2rem 8rem; + overflow: visible; + background: var(--color-bg-primary); +} + +.hero::before { + content: ''; + position: absolute; + top: -50%; + right: -20%; + width: 80vw; + height: 80vw; + max-width: 1200px; + max-height: 1200px; + background: rgba(250, 216, 91, 0.05); + border-radius: 50%; + z-index: 0; + pointer-events: none; + display: none; +} + +.hero::after { + content: ''; + position: absolute; + bottom: -40%; + left: -20%; + width: 70vw; + height: 70vw; + max-width: 1000px; + max-height: 1000px; + background: rgba(150, 201, 235, 0.05); + border-radius: 50%; + z-index: 0; + pointer-events: none; + display: none; +} + +[data-theme='dark'] .hero::before { + background: rgba(250, 216, 91, 0.008); +} + +[data-theme='dark'] .hero::after { + background: rgba(150, 201, 235, 0.004); +} + +.content { + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + max-width: 900px; +} + +.logo { + width: 120px; + height: 80px; + margin-bottom: 2rem; +} + +.title { + font-size: clamp(2.5rem, 8vw, 5rem); + font-weight: 800; + letter-spacing: -0.04em; + line-height: 1.1; + margin-bottom: 1.5rem; + color: var(--color-text-primary); +} + +.titleAccent { + background: linear-gradient(135deg, var(--color-accent-bright) 0%, var(--color-accent-bright-dim) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + padding-right: 0.05em; +} + +.subtitle { + font-size: clamp(1.1rem, 2.5vw, 1.4rem); + font-weight: 400; + color: var(--color-text-secondary); + max-width: 600px; + line-height: 1.7; + margin-bottom: 3rem; +} + +@media screen and (min-width: 769px) { + .hero::before, + .hero::after { + display: block; + } +} + +@media screen and (max-width: 768px) { + .hero { + padding: 3rem 1.5rem; + min-height: auto; + } + + .logo { + width: 100px; + height: 66px; + } +} + +@media screen and (max-width: 480px) { + .hero { + padding: 2rem 1rem; + } +} diff --git a/docs/src/components/Homepage/Hero/Hero.tsx b/docs/src/components/Homepage/Hero/Hero.tsx new file mode 100644 index 00000000..173821ed --- /dev/null +++ b/docs/src/components/Homepage/Hero/Hero.tsx @@ -0,0 +1,98 @@ +import React, { useMemo } from 'react'; +import { useDocsPreferredVersion } from '@docusaurus/theme-common'; +import { motion, type Variants } from 'motion/react'; +import { Badge } from './Badge/Badge'; +import { Buttons } from './Buttons/Buttons'; +import { Stats } from './Stats/Stats'; +import { ScrollIndicator } from './ScrollIndicator/ScrollIndicator'; +import styles from './Hero.module.css'; + +const GITHUB_URL = 'https://github.com/TheWidlarzGroup/react-native-video'; +const DEFAULT_DOCS_PATH = '/docs/v6/intro'; + +const STATS = [ + { value: '7k+', label: 'GitHub Stars' }, + { value: '350k+', label: 'Weekly Downloads' }, + { value: 'TWG', label: 'Company Backed' }, +]; + +const containerVariants: Variants = { + hidden: {}, + visible: { + transition: { + staggerChildren: 0.1, + delayChildren: 0.1, + }, + }, +}; + +export const itemVariants: Variants = { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.5, ease: 'easeOut' }, + }, +}; + +const logoVariants: Variants = { + hidden: { opacity: 0, scale: 0.8 }, + visible: { + opacity: 1, + scale: 1, + transition: { duration: 0.5, ease: 'easeOut' }, + }, +}; + +interface PreferredVersion { + preferredVersion: { label: string; mainDocId: string; path: string } | null; +} + +function useDocsLink() { + const version = useDocsPreferredVersion() as PreferredVersion; + + return useMemo(() => { + if (!version.preferredVersion) { + return DEFAULT_DOCS_PATH; + } + return `${version.preferredVersion.path}/${version.preferredVersion.mainDocId}`; + }, [version]); +} + +export function Hero() { + const docsLink = useDocsLink(); + + return ( +
+ + v7 Beta Available + + + + + Video for React Native + + + + The most feature-rich video player for React Native. Multi-platform + support with DRM, subtitles, and audio tracks. + + + + + + + +
+ ); +} diff --git a/docs/src/components/Homepage/Hero/ScrollIndicator/ScrollIndicator.module.css b/docs/src/components/Homepage/Hero/ScrollIndicator/ScrollIndicator.module.css new file mode 100644 index 00000000..0659716e --- /dev/null +++ b/docs/src/components/Homepage/Hero/ScrollIndicator/ScrollIndicator.module.css @@ -0,0 +1,27 @@ +.indicator { + position: absolute; + bottom: 0; + left: 0; + right: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.5rem; + color: var(--color-text-muted); + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.1em; +} + +.line { + width: 1px; + height: 40px; + background: linear-gradient(to bottom, var(--color-text-muted), transparent); +} + +@media screen and (max-width: 768px) { + .indicator { + display: none; + } +} diff --git a/docs/src/components/Homepage/Hero/ScrollIndicator/ScrollIndicator.tsx b/docs/src/components/Homepage/Hero/ScrollIndicator/ScrollIndicator.tsx new file mode 100644 index 00000000..30bb9390 --- /dev/null +++ b/docs/src/components/Homepage/Hero/ScrollIndicator/ScrollIndicator.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { motion } from 'motion/react'; +import styles from './ScrollIndicator.module.css'; + +interface ScrollIndicatorProps { + label?: string; +} + +export function ScrollIndicator({ label = 'Explore' }: ScrollIndicatorProps) { + return ( + + {label} +
+ + ); +} diff --git a/docs/src/components/Homepage/Hero/Stats/Stats.module.css b/docs/src/components/Homepage/Hero/Stats/Stats.module.css new file mode 100644 index 00000000..e7a3e86b --- /dev/null +++ b/docs/src/components/Homepage/Hero/Stats/Stats.module.css @@ -0,0 +1,35 @@ +.stats { + display: flex; + gap: 4rem; + margin-top: 5rem; + padding-top: 3rem; + border-top: 1px solid var(--color-border); +} + +.stat { + text-align: center; +} + +.value { + display: block; + font-size: 2.5rem; + font-weight: 700; + color: var(--color-accent-bright); + letter-spacing: -0.02em; +} + +.label { + font-size: 0.9rem; + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +@media screen and (max-width: 768px) { + .stats { + flex-direction: column; + gap: 2rem; + margin-top: 3rem; + padding-top: 2rem; + } +} diff --git a/docs/src/components/Homepage/Hero/Stats/Stats.tsx b/docs/src/components/Homepage/Hero/Stats/Stats.tsx new file mode 100644 index 00000000..6b14e9ab --- /dev/null +++ b/docs/src/components/Homepage/Hero/Stats/Stats.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { motion } from 'motion/react'; +import { itemVariants } from '../Hero'; +import styles from './Stats.module.css'; + +interface StatItem { + value: string; + label: string; +} + +interface StatsProps { + stats: StatItem[]; +} + +export function Stats({ stats }: StatsProps) { + return ( + + {stats.map((stat) => ( +
+ {stat.value} + {stat.label} +
+ ))} + + ); +} diff --git a/docs/src/components/HomepageFeatures/index.tsx b/docs/src/components/HomepageFeatures/index.tsx deleted file mode 100644 index 8bed550d..00000000 --- a/docs/src/components/HomepageFeatures/index.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import Heading from '@theme/Heading'; -import clsx from 'clsx'; -import type { ReactNode } from 'react'; -import styles from './styles.module.css'; - -type FeatureItem = { - title: string; - Svg: React.ComponentType>; - description: ReactNode; -}; - -const FeatureList: FeatureItem[] = [ - { - title: 'React Native First', - Svg: require('@site/static/img/reactjs-icon.svg').default, - description: ( - <>React Native Video is a video player created for React Native. - ), - }, - { - title: 'Multi Subtitles & Audio Tracks', - Svg: require('@site/static/img/download-icon.svg').default, - description: ( - <>React Native Video supports multiple subtitles and audio tracks. - ), - }, - { - title: 'DRM Protected Content', - Svg: require('@site/static/img/drm-content-icon.svg').default, - description: <>React Native Video supports DRM protected content., - }, -]; - -function Feature({ title, Svg, description }: FeatureItem) { - return ( -
-
- -
-
- {title} -

{description}

-
-
- ); -} - -export default function HomepageFeatures(): ReactNode { - return ( -
-
-
- {FeatureList.map((props, idx) => ( - - ))} -
-
-
- ); -} diff --git a/docs/src/components/HomepageFeatures/styles.module.css b/docs/src/components/HomepageFeatures/styles.module.css deleted file mode 100644 index b248eb2e..00000000 --- a/docs/src/components/HomepageFeatures/styles.module.css +++ /dev/null @@ -1,11 +0,0 @@ -.features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; -} - -.featureSvg { - height: 200px; - width: 200px; -} diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 15775321..5511ca74 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -11,4 +11,8 @@ */ @import '@widlarzgroup/docusaurus-ui/css/custom.css'; -/* Add your custom overrides below */ \ No newline at end of file +/* Add your custom overrides below */ + +:root { + --color-dark: #0f0f0f; +} \ No newline at end of file diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index 3653f387..2f51a9e5 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -1,62 +1,21 @@ -import Link from '@docusaurus/Link'; -import { useDocsPreferredVersion } from '@docusaurus/theme-common'; +import React from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import HomepageFeatures from '@site/src/components/HomepageFeatures'; -import Heading from '@theme/Heading'; +import { Enterprise } from '@site/src/components/Homepage/Enterprise/Enterprise'; +import { Features } from '@site/src/components/Homepage/Features/Features'; import Layout from '@theme/Layout'; -import clsx from 'clsx'; -import { useMemo, type ReactNode } from 'react'; -import styles from './index.module.css'; +import { Hero } from '../components/Homepage/Hero/Hero'; -interface PreferredVersion { - preferredVersion: { label: string; mainDocId: string; path: string } | null; -} - -function HomepageHeader() { - const { siteConfig } = useDocusaurusContext(); - - const version = useDocsPreferredVersion() as PreferredVersion; - - const link = useMemo(() => { - if (!version.preferredVersion) { - return '/docs/v6/intro'; // Default to v6 if no version is selected - } - - return `${version.preferredVersion.path}/${version.preferredVersion.mainDocId}`; - }, [version]); - - return ( -
-
- TheWidlarzGroup Logo - - {siteConfig.title} - -

{siteConfig.tagline}

-
- - Get Started - -
-
-
- ); -} - -export default function Home(): ReactNode { +export default function Home() { const { siteConfig } = useDocusaurusContext(); return ( - +
- + +
); diff --git a/docs/static/img/arrow-icon.svg b/docs/static/img/arrow-icon.svg new file mode 100644 index 00000000..155b4cd8 --- /dev/null +++ b/docs/static/img/arrow-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/static/img/download-icon.svg b/docs/static/img/download-icon.svg deleted file mode 100644 index d854cb27..00000000 --- a/docs/static/img/download-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/docs/static/img/drm-content-icon.svg b/docs/static/img/drm-content-icon.svg deleted file mode 100644 index 75515333..00000000 --- a/docs/static/img/drm-content-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/docs/static/img/github-icon.svg b/docs/static/img/github-icon.svg new file mode 100644 index 00000000..b4510f02 --- /dev/null +++ b/docs/static/img/github-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/static/img/homepage/enterprise/layers-icon.svg b/docs/static/img/homepage/enterprise/layers-icon.svg new file mode 100644 index 00000000..5500e0e3 --- /dev/null +++ b/docs/static/img/homepage/enterprise/layers-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/docs/static/img/homepage/enterprise/lightning-icon.svg b/docs/static/img/homepage/enterprise/lightning-icon.svg new file mode 100644 index 00000000..26bb29ab --- /dev/null +++ b/docs/static/img/homepage/enterprise/lightning-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/static/img/homepage/enterprise/shield-icon.svg b/docs/static/img/homepage/enterprise/shield-icon.svg new file mode 100644 index 00000000..45d69ff2 --- /dev/null +++ b/docs/static/img/homepage/enterprise/shield-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/static/img/homepage/features/performance-icon.svg b/docs/static/img/homepage/features/performance-icon.svg new file mode 100644 index 00000000..1d482a15 --- /dev/null +++ b/docs/static/img/homepage/features/performance-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/static/img/homepage/features/platforms-icon.svg b/docs/static/img/homepage/features/platforms-icon.svg new file mode 100644 index 00000000..a7268ce6 --- /dev/null +++ b/docs/static/img/homepage/features/platforms-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/docs/static/img/homepage/features/plugins-icon.svg b/docs/static/img/homepage/features/plugins-icon.svg new file mode 100644 index 00000000..455e3f34 --- /dev/null +++ b/docs/static/img/homepage/features/plugins-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/static/img/homepage/features/reactjs-icon.svg b/docs/static/img/homepage/features/reactjs-icon.svg new file mode 100644 index 00000000..f2c22839 --- /dev/null +++ b/docs/static/img/homepage/features/reactjs-icon.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/docs/static/img/homepage/features/shield-icon.svg b/docs/static/img/homepage/features/shield-icon.svg new file mode 100644 index 00000000..2d6bf2f1 --- /dev/null +++ b/docs/static/img/homepage/features/shield-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/docs/static/img/homepage/features/subtitles-icon.svg b/docs/static/img/homepage/features/subtitles-icon.svg new file mode 100644 index 00000000..37ac8397 --- /dev/null +++ b/docs/static/img/homepage/features/subtitles-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/static/img/reactjs-icon.svg b/docs/static/img/reactjs-icon.svg deleted file mode 100644 index f4af982c..00000000 --- a/docs/static/img/reactjs-icon.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - -