@remotion/promo-pages 4.0.460 → 4.0.462

package/dist/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/components/3DEngine/ButtonDemo.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Button3D: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>>;

package/dist/components/3DEngine/ButtonDemo.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { cn } from '../../cn';
+import { useHoverTransforms } from './hover-transforms';
+import { Outer } from './Outer';
+export const Button3D = ({ children, className, disabled, ...buttonProps }) => {
+    const [dimensions, setDimensions] = useState(null);
+    const ref = useRef(null);
+    const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled));
+    const onPointerEnter = useCallback((e) => {
+        if (e.pointerType !== 'mouse') {
+            return;
+        }
+        setDimensions((prevDim) => {
+            if (prevDim) {
+                return prevDim;
+            }
+            if (!ref.current) {
+                throw new Error('Ref is not set');
+            }
+            const { childNodes } = ref.current;
+            if (childNodes.length === 0) {
+                throw new Error('No child nodes');
+            }
+            const childNode = childNodes[0];
+            if (!childNode) {
+                throw new Error('No child node');
+            }
+            const rect = childNode.getBoundingClientRect();
+            const { borderRadius } = getComputedStyle(childNode);
+            const cornerRadius = borderRadius.includes('e+0')
+                ? Infinity
+                : parseInt(borderRadius !== null && borderRadius !== void 0 ? borderRadius : '0', 10);
+            return {
+                width: rect.width,
+                height: rect.height,
+                borderRadius: Math.min(cornerRadius, rect.width / 2, rect.height / 2),
+            };
+        });
+    }, []);
+    const content = (_jsx("button", { type: "button", disabled: disabled, className: cn('text-black', 'flex', 'justify-center', 'bg-white', 'items-center', 'font-brand', 'border-solid', 'text-[1em]', 'rounded-md', 'border-black', 'border-2', 'border-b-4', 'cursor-pointer', 'px-4', 'py-3', 'disabled:cursor-default', 'disabled:border-gray-500', 'disabled:text-gray-500', 'transition-colors', className), ...buttonProps, children: children }));
+    return (_jsx("div", { ref: ref, className: "contents", onPointerEnter: onPointerEnter, children: dimensions && (isActive || progress > 0) ? (_jsx(Outer, { parentRef: ref, width: dimensions.width, height: dimensions.height, cornerRadius: dimensions.borderRadius, hoverTransform: progress, children: content })) : (content) }));
+};

package/dist/components/3DEngine/Faces.d.ts

@@ -0,0 +1,5 @@
+import type { FaceType } from '@remotion/svg-3d-engine';
+import React from 'react';
+export declare const Faces: React.FC<{
+    readonly elements: FaceType[];
+}>;

package/dist/components/3DEngine/Faces.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { threeDIntoSvgPath } from '@remotion/svg-3d-engine';
+export const Faces = ({ elements, ...svgProps }) => {
+    return (_jsx(_Fragment, { children: elements.map(({ points, color, crispEdges }, idx) => {
+            return (_jsx("path", { d: threeDIntoSvgPath(points), fill: color, shapeRendering: crispEdges ? 'crispEdges' : undefined, ...svgProps }, idx));
+        }) }));
+};

package/dist/components/3DEngine/Outer.d.ts

@@ -0,0 +1,8 @@
+export declare const Outer: React.FC<{
+    children: React.ReactNode;
+    width: number;
+    height: number;
+    cornerRadius: number;
+    hoverTransform: number;
+    parentRef: React.RefObject<HTMLDivElement | null>;
+}>;

package/dist/components/3DEngine/Outer.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { parsePath, PathInternals, reduceInstructions } from '@remotion/paths';
+import { makeRect } from '@remotion/shapes';
+import { extrudeAndTransformElement, interpolateMatrix4d, makeMatrix3dTransform, reduceMatrices, rotateX, rotateY, scaled, translateX, translateY, translateZ, } from '@remotion/svg-3d-engine';
+import { interpolate } from 'remotion';
+import { Faces } from './Faces';
+import { useClickTransforms, useMousePosition } from './hover-transforms';
+export const Outer = ({ children, width, height, cornerRadius, hoverTransform, parentRef }) => {
+    const clickTransform = useClickTransforms(parentRef);
+    const angle = useMousePosition(parentRef);
+    const appropriateScale = Math.min(1.1, (20 + width) / width);
+    const transformationUnhovered = reduceMatrices([
+        rotateX(-Math.PI / 20),
+    ]);
+    const transformationHovered = reduceMatrices([
+        scaled(appropriateScale),
+        rotateX(-Math.PI / 16),
+        rotateX(Math.sin(angle) / 4),
+        rotateY(-Math.cos(angle) / 4),
+    ]);
+    const transformation = interpolateMatrix4d(hoverTransform, transformationUnhovered, transformationHovered);
+    const depthFromClick = clickTransform * 15;
+    const depthFromHover = interpolate(hoverTransform, [0, 1], [10, 20]);
+    const depth = depthFromHover;
+    const frontFace = reduceMatrices([
+        translateZ(-depth / 2 + depthFromClick),
+        transformation,
+    ]);
+    const centerOriented = reduceMatrices([
+        translateX(-width / 2),
+        translateY(-height / 2),
+        transformation,
+        translateX(width / 2),
+        translateY(height / 2),
+    ]);
+    const { path, instructions } = makeRect({ height, width, cornerRadius });
+    const { viewBox } = PathInternals.getBoundingBoxFromInstructions(reduceInstructions(instructions));
+    const inbetween = extrudeAndTransformElement({
+        sideColor: 'black',
+        crispEdges: false,
+        depth,
+        pressInDepth: depthFromClick,
+        points: parsePath(path),
+        description: 'rect',
+        transformations: centerOriented,
+    });
+    return (_jsxs("div", { className: "relative", style: { width, height }, children: [_jsx("svg", { viewBox: viewBox, style: {
+                    overflow: 'visible',
+                    height,
+                    width,
+                    position: 'absolute',
+                    top: 0,
+                }, pointerEvents: "none", children: _jsx(Faces, { elements: inbetween }) }), _jsx("div", { style: {
+                    transform: makeMatrix3dTransform(frontFace),
+                }, children: children })] }));
+};

package/dist/components/3DEngine/Switch.d.ts

@@ -0,0 +1,4 @@
+export declare const Switch: React.FC<{
+    readonly active: boolean;
+    readonly onToggle: () => void;
+}>;

package/dist/components/3DEngine/Switch.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Switch = ({ active, onToggle }) => {
+    return (_jsx("div", { "data-active": active, className: "h-6 transition-all rounded-full w-12 border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative", onClick: onToggle, children: _jsx("div", { "data-active": active, className: "h-4 w-4 left-[4px] top-[4px] transition-all rounded-full bg-white border-2  border-black absolute data-[active=true]:left-[calc(100%-24px)]" }) }));
+};

package/dist/components/3DEngine/get-child-node-from.d.ts

@@ -0,0 +1 @@
+export declare const getChildNodeFrom: (htmlElement: HTMLDivElement | null) => HTMLElement | null;

package/dist/components/3DEngine/get-child-node-from.js

@@ -0,0 +1,14 @@
+export const getChildNodeFrom = (htmlElement) => {
+    if (!htmlElement) {
+        return null;
+    }
+    const { childNodes } = htmlElement;
+    if (childNodes.length === 0) {
+        return null;
+    }
+    const childNode = childNodes[0];
+    if (!childNode) {
+        return null;
+    }
+    return childNode;
+};

package/dist/components/3DEngine/hover-transforms.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type State = {
+    progress: number;
+    isActive: boolean;
+};
+export declare const useHoverTransforms: (ref: React.RefObject<HTMLDivElement | null>, disabled: boolean) => State;
+export declare const useClickTransforms: (ref: React.RefObject<HTMLDivElement | null>) => number;
+export declare const useMousePosition: (ref: React.RefObject<HTMLDivElement | null>) => number;
+export {};

package/dist/components/3DEngine/hover-transforms.js

@@ -0,0 +1,177 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { getChildNodeFrom } from './get-child-node-from';
+export const useHoverTransforms = (ref, disabled) => {
+    const [state, setState] = React.useState({
+        progress: 0,
+        isActive: false,
+    });
+    const eventTarget = useMemo(() => new EventTarget(), []);
+    useEffect(() => {
+        if (disabled) {
+            eventTarget.dispatchEvent(new Event('disabled'));
+        }
+        else {
+            eventTarget.dispatchEvent(new Event('enabled'));
+        }
+    }, [disabled, eventTarget]);
+    React.useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        let animationFrame;
+        let start = null;
+        let isHovered = false;
+        let internalDisabled = disabled;
+        const getIsActive = () => {
+            return isHovered && !internalDisabled;
+        };
+        const animate = (timestamp) => {
+            if (start === null)
+                start = timestamp;
+            const progress = Math.min((timestamp - start) / 150, 1);
+            setState(() => ({
+                isActive: getIsActive(),
+                progress: getIsActive() ? progress : 1 - progress,
+            }));
+            if (progress < 1) {
+                animationFrame = requestAnimationFrame(animate);
+            }
+        };
+        const animateIn = () => {
+            start = null;
+            cancelAnimationFrame(animationFrame);
+            animationFrame = requestAnimationFrame(animate);
+        };
+        const handleMouseEnter = () => {
+            const prevIsActive = getIsActive();
+            isHovered = true;
+            if (prevIsActive === getIsActive()) {
+                return;
+            }
+            animateIn();
+        };
+        const handleMouseLeave = () => {
+            const prevIsActive = getIsActive();
+            isHovered = false;
+            if (prevIsActive === getIsActive()) {
+                return;
+            }
+            animateIn();
+        };
+        const handleDisabled = () => {
+            const prevIsActive = getIsActive();
+            internalDisabled = true;
+            if (prevIsActive === getIsActive()) {
+                return;
+            }
+            animateIn();
+        };
+        const handleEnabled = () => {
+            const prevIsActive = getIsActive();
+            internalDisabled = false;
+            if (prevIsActive === getIsActive()) {
+                return;
+            }
+            animateIn();
+        };
+        element.addEventListener('mouseenter', handleMouseEnter);
+        element.addEventListener('mouseleave', handleMouseLeave);
+        eventTarget.addEventListener('disabled', handleDisabled);
+        eventTarget.addEventListener('enabled', handleEnabled);
+        return () => {
+            element.removeEventListener('mouseenter', handleMouseEnter);
+            element.removeEventListener('mouseleave', handleMouseLeave);
+            eventTarget.removeEventListener('disabled', handleDisabled);
+            eventTarget.removeEventListener('enabled', handleEnabled);
+            cancelAnimationFrame(animationFrame);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ref, eventTarget]);
+    return state;
+};
+export const useClickTransforms = (ref) => {
+    const [hoverProgress, setHoverProgress] = React.useState(0);
+    React.useEffect(() => {
+        const element = getChildNodeFrom(ref.current);
+        if (!element) {
+            return;
+        }
+        let animationFrame;
+        let start = null;
+        let isHovered = false;
+        const animate = (timestamp) => {
+            if (start === null)
+                start = timestamp;
+            const progress = Math.min((timestamp - start) / 150, 1);
+            setHoverProgress(isHovered ? progress : 1 - progress);
+            if (progress < 1) {
+                animationFrame = requestAnimationFrame(animate);
+            }
+        };
+        const handleMouseEnter = () => {
+            isHovered = true;
+            start = null;
+            cancelAnimationFrame(animationFrame);
+            animationFrame = requestAnimationFrame(animate);
+        };
+        const handleMouseLeave = () => {
+            isHovered = false;
+            start = null;
+            cancelAnimationFrame(animationFrame);
+            animationFrame = requestAnimationFrame(animate);
+        };
+        element.addEventListener('pointerdown', handleMouseEnter);
+        element.addEventListener('pointerup', handleMouseLeave);
+        return () => {
+            element.removeEventListener('pointerdown', handleMouseEnter);
+            element.removeEventListener('pointerup', handleMouseLeave);
+            cancelAnimationFrame(animationFrame);
+        };
+    }, [ref]);
+    return hoverProgress;
+};
+const getAngle = (ref, coordinates) => {
+    const element = getChildNodeFrom(ref);
+    if (!element) {
+        return 0;
+    }
+    if (coordinates === null) {
+        return 0;
+    }
+    const clientRect = element.getClientRects();
+    if (!clientRect) {
+        return 0;
+    }
+    if (clientRect.length === 0) {
+        return 0;
+    }
+    const center = {
+        x: clientRect[0].x + clientRect[0].width / 2,
+        y: clientRect[0].y + clientRect[0].height / 2,
+    };
+    const angle = Math.atan2(coordinates.y - center.y, coordinates.x - center.x);
+    return angle;
+};
+let lastCoordinates = null;
+export const useMousePosition = (ref) => {
+    const [angle, setAngle] = useState(getAngle(ref.current, lastCoordinates));
+    useEffect(() => {
+        const element = ref.current;
+        if (!element) {
+            return;
+        }
+        const onMouseMove = (e) => {
+            const clientRect = element.getClientRects();
+            if (!clientRect) {
+                return;
+            }
+            lastCoordinates = { y: e.clientY, x: e.clientX };
+            setAngle(getAngle(element, { y: e.clientY, x: e.clientX }));
+        };
+        window.addEventListener('mousemove', onMouseMove);
+        return () => {
+            window.removeEventListener('mousemove', onMouseMove);
+        };
+    }, [ref]);
+    return angle;
+};

package/dist/components/BackButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const BackButton: React.FC<{
+    readonly color: string;
+    readonly text: string;
+    readonly link: string;
+}>;

package/dist/components/BackButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@remotion/design';
+export const BackButton = ({ color, text, link }) => {
+    return (_jsx("div", { className: "justify-center items-center font-medium mb-4 block", style: {
+            fontFamily: 'GTPlanar',
+            fontWeight: 500,
+            color,
+        }, children: _jsx(Button, { href: link, className: "px-4 rounded-full text-sm h-10", children: _jsxs("div", { className: "flex row items-center justify-center px-4", children: [_jsx("svg", { className: "h-4 mr-[15px] inline-block", style: { color }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("path", { fill: "currentcolor", d: "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z" }) }), text] }) }) }));
+};

package/dist/components/CommandCopyButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const CommandCopyButton: React.FC<{
+    readonly copied: boolean;
+    readonly customSvg: React.ReactNode | null;
+}>;

package/dist/components/CommandCopyButton.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CommandCopyButton = ({ copied, customSvg }) => {
+    return copied ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", className: "h-5", children: _jsx("path", { fill: "currentColor", d: "M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z" }) })) : customSvg ? (customSvg) : (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", className: "h-5", children: _jsx("path", { fill: "currentColor", d: "M320 64h-49.61C262.1 27.48 230.7 0 192 0S121 27.48 113.6 64H64C28.65 64 0 92.66 0 128v320c0 35.34 28.65 64 64 64h256c35.35 0 64-28.66 64-64V128C384 92.66 355.3 64 320 64zM192 48c13.23 0 24 10.77 24 24S205.2 96 192 96S168 85.23 168 72S178.8 48 192 48zM336 448c0 8.82-7.178 16-16 16H64c-8.822 0-16-7.18-16-16V128c0-8.82 7.178-16 16-16h18.26C80.93 117.1 80 122.4 80 128v16C80 152.8 87.16 160 96 160h192c8.836 0 16-7.164 16-16V128c0-5.559-.9316-10.86-2.264-16H320c8.822 0 16 7.18 16 16V448z" }) }));
+};

package/dist/components/Homepage.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ColorMode } from './homepage/layout/use-color-mode';
+export declare const NewLanding: React.FC<{
+    readonly colorMode: ColorMode;
+    readonly setColorMode: (colorMode: ColorMode) => void;
+}>;

package/dist/components/Homepage.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BackgroundAnimation } from './homepage/BackgroundAnimation';
+import CommunityStats from './homepage/CommunityStats';
+import { Demo } from './homepage/Demo';
+import EditorStarterSection from './homepage/EditorStarterSection';
+import EvaluateRemotionSection from './homepage/EvaluateRemotion';
+import { IfYouKnowReact } from './homepage/IfYouKnowReact';
+import { ColorModeProvider } from './homepage/layout/use-color-mode';
+import { NewsletterButton } from './homepage/NewsletterButton';
+import { ParameterizeAndEdit } from './homepage/ParameterizeAndEdit';
+import { Pricing } from './homepage/Pricing';
+import { RealMP4Videos } from './homepage/RealMp4Videos';
+import TrustedByBanner from './homepage/TrustedByBanner';
+import VideoAppsShowcase from './homepage/VideoAppsShowcase';
+import { SectionTitle } from './homepage/VideoAppsTitle';
+import { WriteInReact } from './homepage/WriteInReact';
+export const NewLanding = ({ colorMode, setColorMode }) => {
+    return (_jsx(ColorModeProvider, { colorMode: colorMode, setColorMode: setColorMode, children: _jsx("div", { className: "w-full relative", children: _jsxs("div", { style: { overflow: 'hidden' }, children: [_jsx("div", { children: _jsx(BackgroundAnimation, {}) }), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsxs("div", { className: "max-w-[500px] lg:max-w-[1000px] m-auto pl-5 pr-5 overflow-x-clip md:overflow-x-visible relative", children: [_jsx(WriteInReact, {}), _jsx("br", {}), _jsx(IfYouKnowReact, {}), _jsx(ParameterizeAndEdit, {}), _jsx(RealMP4Videos, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(VideoAppsShowcase, {}), _jsx("br", {}), _jsx("br", {}), _jsx(Demo, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(SectionTitle, { children: "Pricing" }), _jsx(Pricing, {}), _jsx(TrustedByBanner, {}), _jsx("br", {}), _jsx(EvaluateRemotionSection, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(CommunityStats, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(EditorStarterSection, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(NewsletterButton, {}), _jsx("br", {}), _jsx("br", {}), _jsx("br", {})] })] }) }) }));
+};

package/dist/components/ManageTeamMembers.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ManageTeamMembers: React.FC;

package/dist/components/ManageTeamMembers.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Input } from '@remotion/design';
+import React, { useCallback, useState } from 'react';
+function generateId() {
+    return Math.random().toString(36).substr(2, 9);
+}
+const initialMembers = [
+    { id: generateId(), name: 'alice' },
+    { id: generateId(), name: 'bob' },
+];
+const Row = ({ value, onChange, onDelete, disableDelete }) => {
+    return (_jsxs("div", { className: "flex flex-row gap-2 items-center", children: [_jsx(Input, { placeholder: "Enter username", className: "w-full block flex-1", value: value, onChange: (e) => onChange(e.target.value) }), _jsx(Button, { className: "hover:text-white hover:bg-warn transition-colors w-10 h-10 p-0 rounded-full", onClick: onDelete, type: "button", disabled: disableDelete, "aria-label": "Delete member", depth: 0.5, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1 1L9 9M1 9L9 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })] }));
+};
+export const ManageTeamMembers = () => {
+    const [members, setMembers] = useState(initialMembers);
+    // One extra row for adding new member
+    const displayedMembers = [...members, { id: 'NEW', name: '' }];
+    const updateMember = useCallback((idx, value) => {
+        // If it's last "NEW" row, add as new member if not empty
+        if (idx === members.length) {
+            if (value.trim() !== '') {
+                setMembers((prev) => [...prev, { id: generateId(), name: value }]);
+            }
+        }
+        else {
+            setMembers((prev) => prev.map((m, i) => (i === idx ? { ...m, name: value } : m)));
+        }
+    }, [members.length]);
+    const deleteMember = useCallback((idx) => {
+        setMembers((prev) => prev.filter((_, i) => i !== idx));
+    }, []);
+    const [loading, setLoading] = useState(false);
+    const save = useCallback(() => {
+        setLoading(true);
+        setTimeout(() => {
+            setLoading(false);
+        }, 1000);
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("h2", { children: "Manage team members" }), _jsx("p", { className: "font-brand", children: "Add a new team member to your team." }), displayedMembers.map((member, idx) => (
+            // eslint-disable-next-line react/no-array-index-key
+            _jsxs(React.Fragment, { children: [_jsx(Row, { value: member.name, onChange: (val) => updateMember(idx, val), onDelete: idx < members.length ? () => deleteMember(idx) : undefined, disableDelete: idx >= members.length }), _jsx("div", { className: "h-2" })] }, idx))), _jsx("div", { className: "h-4" }), _jsx("div", { className: "flex flex-row justify-end", children: _jsx(Button, { className: "bg-brand text-white", loading: loading, onClick: save, children: "Save" }) })] }));
+};

package/dist/components/Spinner.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const Spinner: React.FC<SVGProps<SVGSVGElement>>;

package/dist/components/Spinner.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Spinner = (props) => {
+    return (_jsxs("svg", { id: "loading", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: "32", height: "32", fill: "currentColor", ...props, children: [_jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(0 16 16)", children: _jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0" }) }), _jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(45 16 16)", children: _jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.125s" }) }), _jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(90 16 16)", children: _jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.25s" }) }), _jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(135 16 16)", children: _jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.375s" }) }), _jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(180 16 16)", children: _jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.5s" }) }), _jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(225 16 16)", children: _jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.675s" }) }), _jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(270 16 16)", children: _jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.75s" }) }), _jsx("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(315 16 16)", children: _jsx("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.875s" }) })] }));
+};

package/dist/components/TeamPicture.d.ts

@@ -0,0 +1 @@
+export declare const TeamPicture: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/TeamPicture.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TeamPicture = () => {
+    return (_jsx("div", { className: "border-effect overflow-hidden mb-10 lg:mb-4", children: _jsx("img", { src: "/img/team/team.jpeg", style: { aspectRatio: '1500 / 1038' }, className: "w-full mb-0 float-left " }) }));
+};

package/dist/components/design.d.ts

@@ -0,0 +1 @@
+export declare const DesignPage: React.FC;

package/dist/components/design.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, Counter, InlineCode, Input, Link, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, } from '@remotion/design';
+import { useCallback, useState } from 'react';
+import { ManageTeamMembers } from './ManageTeamMembers';
+const Explainer = ({ children }) => {
+    return (_jsx("div", { children: _jsx("div", { className: "text-gray-500 font-brand text-sm mb-2", children: children }) }));
+};
+export const DesignPage = () => {
+    const [count, setCount] = useState(10);
+    const [active, setActive] = useState(false);
+    const [submitButtonActive, setSubmitButtonActive] = useState(true);
+    const [submitButtonPrimaryActive, setSubmitButtonPrimaryActive] = useState(true);
+    const onClick = useCallback(() => {
+        setSubmitButtonActive(false);
+        setTimeout(() => {
+            setSubmitButtonActive(true);
+        }, 1000);
+    }, []);
+    const onClickPrimary = useCallback(() => {
+        setSubmitButtonPrimaryActive(false);
+        setTimeout(() => {
+            setSubmitButtonPrimaryActive(true);
+        }, 1000);
+    }, []);
+    const [saving, setSaving] = useState(false);
+    const save = useCallback(() => {
+        setSaving(true);
+        setTimeout(() => {
+            setSaving(false);
+        }, 1000);
+    }, []);
+    return (_jsx("div", { className: "bg-[var(--background)] relative", children: _jsxs("div", { className: "max-w-[800px] mx-auto pt-10 pb-10 px-4", children: [_jsx("h1", { children: "@remotion/design" }), _jsx("a", { href: "https://github.com/remotion-dev/remotion/blob/main/packages/promo-pages/src/components/design.tsx", className: "font-brand text-brand", target: "_blank", children: "View source" }), _jsx("br", {}), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<Button />" }), _jsx(Explainer, { children: "Button with label" }), _jsx(Button, { children: "Click me" }), _jsx("br", {}), _jsx(Explainer, { children: "Disabled" }), _jsxs(Button, { disabled: true, children: ["Don't", " click me"] }), _jsx("br", {}), _jsx(Explainer, { children: "Primary" }), _jsx(Button, { className: "bg-brand text-white", children: "Primary" }), _jsx("br", {}), _jsx(Explainer, { children: "Click to disable" }), _jsx(Button, { onClick: onClick, loading: !submitButtonActive, children: "Submit" }), _jsx("br", {}), _jsx(Explainer, { children: "Click to disable (primary)" }), _jsx(Button, { onClick: onClickPrimary, className: "bg-brand text-white", loading: !submitButtonPrimaryActive, children: "Submit" }), _jsx("br", {}), _jsx(Explainer, { children: "Loading state" }), _jsx(Button, { onClick: onClick, loading: true, children: "Loading" }), _jsx("br", {}), _jsx(Explainer, { children: "Loading state (primary)" }), _jsx(Button, { onClick: onClick, className: "bg-brand text-white", loading: true, children: "Loading" }), _jsx("br", {}), _jsx(Explainer, { children: "Rounded" }), _jsx(Button, { className: "rounded-full", children: "Rounded" }), _jsx("br", {}), _jsx(Explainer, { children: "Full width" }), _jsx(Button, { className: "w-full", children: "Choose a template" }), _jsx("br", {}), _jsx(Explainer, { children: "Full width rounded" }), _jsx(Button, { className: "w-full rounded-full", children: "Fully rounded" }), _jsx("div", { className: "h-8" }), _jsx(Explainer, { children: "Circular" }), _jsx(Button, { className: "rounded-full bg-brand w-12 h-12" }), _jsx("div", { className: "h-8" }), _jsx(Explainer, { children: "Remove" }), _jsx(Button, { className: "hover:text-white hover:bg-warn transition-colors w-10 h-10 p-0 rounded-full", depth: 0.5, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1 1L9 9M1 9L9 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }), _jsx("div", { className: "h-8" }), _jsx(Explainer, { children: "Link button" }), _jsx(Button, { href: "/design", children: "Link button" }), _jsx("br", {}), _jsxs(Explainer, { children: ["Link button with ", _jsx("code", { children: "<span>" })] }), _jsx(Button, { href: "/design", children: _jsx("span", { children: "Link button with span child" }) }), _jsx("br", {}), _jsx(Explainer, { children: "External link button" }), _jsx(Button, { href: "https://github.com/remotion-dev/remotion", target: "_blank", children: "GitHub" }), _jsx("div", { className: "h-8" }), _jsx(Explainer, { children: "Remove (small)" }), _jsx(Button, { className: "hover:text-white hover:bg-warn transition-colors w-6 h-6 p-0 rounded-full", depth: 0.5, children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1 1L9 9M1 9L9 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }), _jsx("div", { className: "h-8" }), _jsx("h2", { className: "text-brand", children: "<Counter />" }), _jsx(Counter, { count: count, setCount: setCount, minCount: 1, step: 1, incrementStep: 1 }), _jsx("br", {}), " ", _jsx("h2", { className: "text-brand", children: "<Switch />" }), _jsx(Switch, { active: active, onToggle: () => setActive((e) => !e) }), _jsx("br", {}), " ", _jsx("h2", { className: "text-brand", children: "<Card />" }), _jsxs(Card, { className: "px-4 py-4", children: [_jsx("h3", { className: "text-text", children: "Card" }), _jsx("div", { className: "text-gray-500", children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." })] }), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<Select />" }), _jsxs(Select, { defaultValue: "option1", children: [_jsx(SelectTrigger, { style: { width: '200px' }, children: _jsx(SelectValue, { placeholder: "Select an option" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "option1", children: "Option 1" }), _jsx(SelectItem, { value: "option2", children: "Option 2" }), _jsx(SelectItem, { value: "option3", children: "Option 3" })] })] }), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<Tabs />" }), _jsxs(Tabs, { defaultValue: "tab1", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "tab1", children: "Tab 1" }), _jsx(TabsTrigger, { value: "tab2", children: "Tab 2" }), _jsx(TabsTrigger, { value: "tab3", children: "Tab 3" })] }), _jsx(TabsContent, { value: "tab1", children: _jsx("div", { className: "font-brand", children: "Content for Tab 1" }) }), _jsx(TabsContent, { value: "tab2", children: _jsx("div", { className: "font-brand", children: "Content for Tab 2" }) }), _jsx(TabsContent, { value: "tab3", children: _jsx("div", { className: "font-brand", children: "Content for Tab 3" }) })] }), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<Input />" }), _jsx(Input, { placeholder: "Enter your email" }), _jsx("br", {}), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<Textarea />" }), _jsx(Textarea, { placeholder: "Enter your message" }), _jsx("br", {}), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<InlineCode />" }), _jsxs("p", { className: "font-brand", children: ["Use ", _jsx(InlineCode, { children: "useCurrentFrame()" }), " to get the current frame and ", _jsx(InlineCode, { children: "useVideoConfig()" }), " to get the video configuration."] }), _jsx("br", {}), _jsx("h2", { className: "text-brand", children: "<Link />" }), _jsxs("p", { className: "font-brand", children: ["See the", ' ', _jsx(Link, { href: "https://www.remotion.dev/docs", target: "_blank", rel: "noopener noreferrer", children: "Remotion documentation" }), ' ', "for more information."] }), _jsx("br", {}), _jsx("br", {}), _jsx("h1", { children: "Example form set" }), _jsx("br", {}), _jsx("h2", { children: "Change email" }), _jsx("p", { className: "font-brand", children: "A email will be sent to the new email address. You will need to click on the link in the email to confirm the change." }), _jsx(Input, { placeholder: "Enter your email", className: "w-full block" }), _jsx("div", { className: "h-2" }), _jsx("div", { className: "flex flex-row justify-end", children: _jsx(Button, { className: "bg-brand text-white", loading: saving, onClick: save, children: "Change" }) }), _jsx("br", {}), _jsx("br", {}), _jsx(ManageTeamMembers, {})] }) }));
+};

package/dist/components/experts/ExpertsPage.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type ExpertsPageProps = {
+    readonly Link: React.ComponentType<{
+        style?: React.CSSProperties;
+        className?: string;
+        href: string;
+        children: React.ReactNode;
+    }>;
+};
+export declare const ExpertsPageContent: React.FC<ExpertsPageProps>;
+export {};

package/dist/components/experts/ExpertsPage.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { random } from 'remotion';
+import { EmailLogo, GitHubLogo, LinkedInLogo, TwitterLogo, } from '../team/TeamCards';
+import { experts } from './experts-data';
+import { DiscordLogo, PersonalWebsite } from './experts-icons';
+const arrowIcon = {
+    height: 16,
+    marginLeft: 10,
+};
+const dateString = (date) => date.getDate() + '-' + date.getMonth() + '-' + date.getFullYear();
+const todayHash = dateString(new Date());
+const infoCard = {
+    backgroundColor: 'var(--footer-background)',
+    padding: 20,
+    flex: 1,
+    flexDirection: 'row',
+    display: 'flex',
+    fontSize: 13,
+    border: '1px solid var(--ifm-color-emphasis-300)',
+    borderRadius: 8,
+};
+const cardIcon = {
+    width: 30,
+    marginRight: 20,
+    color: 'var(--text-color)',
+};
+const wrapperStyle = {
+    maxWidth: 1000,
+    margin: 'auto',
+    paddingTop: 60,
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingBottom: 100,
+};
+const ExpertCard = ({ expert, Link }) => {
+    return (_jsxs("div", { className: "flex-1 rounded-[15px] flex flex-col md:flex-row gap-2 md:gap-4", children: [_jsx(Link, { href: `/experts/${expert.slug}`, className: "no-underline text-inherit", children: _jsx("img", { src: expert.image, alt: `Profile picture of ${expert.name}`, className: "w-[250px] h-[250px] rounded-xl border-effect object-cover" }) }), _jsxs("div", { className: "flex flex-col border-effect px-4 py-3 bg-pane flex-1", children: [_jsx(Link, { href: `/experts/${expert.slug}`, className: "no-underline text-inherit", children: _jsx("h2", { className: "text-[1.6em] mb-1 mt-3 text-[var(--ifm-color-primary)] font-brand", children: expert.name }) }), _jsx("div", { className: "mt-2 mb-3 leading-normal font-brand", children: expert.description }), _jsxs("div", { className: "leading-6 mb-4", children: [_jsxs(Link, { className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center", href: `/experts/${expert.slug}`, children: ["View profile", ' ', _jsx("svg", { style: arrowIcon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("path", { fill: "currentColor", d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z" }) })] }), expert.videocall ? (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsxs("a", { className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center", target: "_blank", href: expert.videocall, children: ["Book a call", ' ', _jsx("svg", { style: arrowIcon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("path", { fill: "currentColor", d: "M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z" }) })] })] })) : null] }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: "gap-3 flex flex-row flex-wrap", children: [expert.website ? (_jsx("a", { className: "no-underline text-inherit", target: "_blank", href: expert.website, children: _jsx(PersonalWebsite, {}) })) : null, expert.x ? (_jsx("a", { className: "no-underline text-inherit", target: "_blank", href: `https://x.com/${expert.x}`, children: _jsx(TwitterLogo, {}) })) : null, expert.github ? (_jsx("a", { className: "no-underline text-inherit", target: "_blank", href: `https://github.com/${expert.github}`, children: _jsx(GitHubLogo, {}) })) : null, expert.linkedin ? (_jsx("a", { className: "no-underline text-inherit", target: "_blank", href: `https://www.linkedin.com/${expert.linkedin}`, children: _jsx(LinkedInLogo, {}) })) : null, expert.email ? (_jsx("a", { className: "no-underline text-inherit", target: "_blank", href: `mailto:${expert.email}`, children: _jsx(EmailLogo, {}) })) : null, expert.discord ? (_jsx("a", { className: "no-underline text-inherit", target: "_blank", href: `https://discord.com/users/${expert.discord.userId}`, title: `@${expert.discord.username} on Discord`, children: _jsx(DiscordLogo, {}) })) : null] })] })] }));
+};
+export const ExpertsPageContent = ({ Link }) => {
+    const expertsInRandomOrder = useMemo(() => {
+        if (typeof window === 'undefined') {
+            return [];
+        }
+        // Have a different order every day.
+        return experts.sort((a, b) => random(a.name + todayHash) - random(b.name + todayHash));
+    }, []);
+    return (_jsx("div", { className: "relative bg-[var(--background)]", children: _jsxs("div", { style: wrapperStyle, children: [_jsx("h1", { className: "experts-pagetitle", children: "Find a Remotion Expert" }), _jsxs("p", { className: "experts-tagline", children: ["Get help by booking a call or hiring these freelancers to work on your Remotion project.", _jsx("br", {}), "They appear in random order.", ' '] }), _jsx("p", { className: "experts-tagline", children: _jsx("a", { href: "mailto:hi@remotion.dev?subject=Remotion+Experts+directory", children: _jsx("strong", { children: "Are you available for hire? Let us know!" }) }) }), _jsxs("div", { style: infoCard, children: [_jsxs("svg", { viewBox: "0 0 661 512", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: cardIcon, children: [_jsxs("g", { clipPath: "url(#clip0_1_2)", children: [_jsx("path", { d: "M511.5 213C532.991 213 551.678 225.088 561.08 242.842C580.293 236.943 602.018 241.615 617.201 256.799C632.385 271.982 637.057 293.765 631.158 312.92C648.912 322.322 661 341.009 661 362.5C661 383.991 648.912 402.678 631.158 412.08C637.057 431.293 632.385 453.018 617.201 468.201C602.018 483.385 580.235 488.057 561.08 482.158C551.678 499.912 532.991 512 511.5 512C490.009 512 471.322 499.912 461.92 482.158C442.707 488.057 420.982 483.385 405.799 468.201C390.615 453.018 385.943 431.235 391.842 412.08C374.088 402.678 362 383.991 362 362.5C362 341.009 374.088 322.322 391.842 312.92C385.943 293.707 390.615 271.982 405.799 256.799C420.982 241.615 442.765 236.943 461.92 242.842C471.322 225.088 490.009 213 511.5 213ZM568.146 344.396L578.074 334.469L558.219 314.672L548.291 324.599L492.812 380.078L470.037 357.303L460.109 347.375L440.312 367.172L450.24 377.1L482.943 409.803L492.871 419.73L502.799 409.803L568.146 344.396Z", fill: "currentcolor" }), _jsx("path", { d: "M184 48H328C332.4 48 336 51.6 336 56V96H176V56C176 51.6 179.6 48 184 48ZM128 56V96H64C28.7 96 0 124.7 0 160V256H192H352H360.2C392.5 216.9 441.3 192 496 192C501.4 192 506.7 192.2 512 192.7V160C512 124.7 483.3 96 448 96H384V56C384 25.1 358.9 0 328 0H184C153.1 0 128 25.1 128 56ZM320 352H224C206.3 352 192 337.7 192 320V288H0V416C0 451.3 28.7 480 64 480H360.2C335.1 449.6 320 410.5 320 368C320 362.6 320.2 357.3 320.7 352H320Z", fill: "currentcolor" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_1_2", children: _jsx("rect", { width: "661", height: "512", fill: "white" }) }) })] }), _jsxs("div", { style: { flex: 1 }, children: ["Remotion Experts are independent freelancers with proven Remotion expertise and portfolios. However,", ' ', _jsx("strong", { children: " perform due diligence " }), " before hiring. ", _jsx("br", {}), ' ', "Remotion does not arbitrate disputes between experts and clients."] })] }), _jsx("br", {}), _jsx("div", { className: "flex flex-col gap-12 md:gap-4", children: expertsInRandomOrder.map((e) => {
+                        return _jsx(ExpertCard, { expert: e, Link: Link }, e.name);
+                    }) })] }) }));
+};