@remotion/promo-pages 4.0.437 → 4.0.438

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 { 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] })] })] }));
+};
+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);
+                    }) })] }) }));
+};

package/dist/components/experts/experts-data.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export type Expert = {
+    name: string;
+    image: string;
+    website: string | null;
+    description: React.ReactNode;
+    x: string | null;
+    github: string | null;
+    linkedin: string | null;
+    email: string | null;
+    videocall: string | null;
+    slug: string;
+    since: number;
+};
+export declare const experts: Expert[];

package/dist/components/experts/experts-data.js

@@ -0,0 +1,263 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const experts = [
+    {
+        slug: 'stephen-sullivan',
+        name: 'Stephen Sullivan',
+        image: '/img/freelancers/stephen.png',
+        website: null,
+        x: null,
+        github: null,
+        linkedin: 'in/sterv/',
+        email: 'stephen@middy.com',
+        videocall: null,
+        since: new Date('2022-08-15').getTime(),
+        description: (_jsxs("div", { children: ["I made:", ' ', _jsx("a", { target: '_blank', href: "https://middy.com", children: "middy.com" }), "!"] })),
+    },
+    {
+        slug: 'mohit-yadav',
+        name: 'Mohit Yadav',
+        image: '/img/freelancers/mohit.jpeg',
+        website: null,
+        x: 'Just_Moh_it',
+        github: 'Just-Moh-it',
+        linkedin: 'in/just-moh-it/',
+        email: 'yo@mohitya.dev',
+        videocall: null,
+        since: new Date('2022-08-15').getTime(),
+        description: (_jsxs("div", { children: ["I made:", ' ', _jsx("a", { target: '_blank', href: "https://mockoops.mohitya.dev", children: "Mockoops" }), "! ", _jsx("br", {}), "My services: SaaS platform from scratch including SSR, creating individual videos and templates, and creating integrations for Remotion with existing infrastructure."] })),
+    },
+    {
+        slug: 'yehor-misiats',
+        name: 'Yehor Misiats',
+        image: '/img/freelancers/yehor.jpeg',
+        website: null,
+        x: 'isatelllte',
+        github: 'satelllte',
+        linkedin: 'in/satelllte/',
+        email: 'lunaerxs@gmail.com',
+        videocall: null,
+        since: new Date('2022-09-16').getTime(),
+        description: (_jsxs("div", { children: ["I made:", ' ', _jsx("a", { target: '_blank', href: "https://github.com/satelllte/remotion-audio-visualizer", children: "Minimalistic audio visualizations" }), ' and ', _jsx("a", { target: '_blank', href: "https://github.com/satelllte/remotion-template", children: "Template for crafting programmatic videos" }), "."] })),
+    },
+    {
+        slug: 'benjamin-jameson',
+        name: 'Benjamin Jameson',
+        image: '/img/freelancers/benjamin.jpeg',
+        x: null,
+        github: 'BenjaminJameson',
+        linkedin: null,
+        email: 'ben@captok.ai',
+        videocall: null,
+        since: new Date('2022-11-03').getTime(),
+        description: (_jsxs("div", { children: ["Creator of", ' ', _jsx("a", { target: '_blank', href: "https://www.captok.ai", children: "CapTok" }), _jsx("br", {}), "I specialize in creating serverless AI web applications using AWS, Javascript and Python."] })),
+        website: null,
+    },
+    {
+        slug: 'karel-nagel',
+        name: 'Karel Nagel',
+        image: '/img/freelancers/karel.jpeg',
+        website: 'https://asius.ai/',
+        x: 'AsiusAI',
+        github: 'karelnagel',
+        linkedin: 'in/karelnagel/',
+        since: new Date('2022-08-22').getTime(),
+        email: 'karel@asius.ai',
+        videocall: null,
+        description: (_jsxs("div", { children: ["I have created Remotion videos for many companies and helped them with deployment, some examples are visible", ' ', _jsx("a", { target: '_blank', href: "https://asius.ai/#portfolio", children: "here" }), ". Additionally, I am the creator of the", ' ', _jsx("a", { target: '_blank', href: "https://github.com/karelnagel/remotion-sst", children: "remotion-sst" }), ' ', "package, which simplifies the deployment of Remotion Lambda to AWS using SST.", _jsx("br", {}), "I am available for contract opportunities in Remotion projects and web development."] })),
+    },
+    {
+        slug: 'alex-fernandez',
+        name: 'Alex Fernandez',
+        image: '/img/freelancers/alex.jpeg',
+        website: null,
+        x: null,
+        github: 'alexfernandez803',
+        linkedin: 'in/alex-f-17a5bb56/',
+        email: 'alex.frndz@gmail.com',
+        videocall: 'https://cal.com/remotion-expert-alex-fernandez',
+        since: new Date('2022-12-02').getTime(),
+        description: (_jsx("div", { children: "I am an experienced integration developer using Mulesoft, a backend developer and on the side frontend and animation enthusiast." })),
+    },
+    {
+        slug: 'matthew-mcgillivray',
+        name: 'Matt McGillivray',
+        image: '/img/freelancers/umungo.png',
+        website: 'https://mattm9y.com',
+        x: null,
+        github: 'UmungoBungo',
+        linkedin: 'in/matthew-mcgillivray-68295a55',
+        email: 'mm@mattm9y.com',
+        videocall: 'https://cal.com/remotion-expert-matt-mcgillivray',
+        since: new Date('2023-01-30').getTime(),
+        description: (_jsx("div", { children: _jsxs("p", { children: ["Are you kicking off a project or feature that will have Remotion at the core, and you want to get it right from the start? Or perhaps you want to migrate from an expensive After Effects or MoviePy solution, to offer your users a free live preview, with cheap rendering costs while also keeping animation quality high.", _jsx("br", {}), _jsx("br", {}), "I've worked extensively on the Remotion core repository itself, helping Jonny and the team by building the", ' ', _jsx("a", { target: '_blank', href: "https://www.npmjs.com/package/@remotion/cloudrun", children: "@remotion/cloudrun package" }), ' ', "and making many many tiny improvements to the documentation to help other developers move as fast as possible. I've helped many companies ensure they get started with a strong foundation, as well as launch with a buttoned-up solution that can be depended upon;", _jsxs("ul", { children: [_jsx("li", { children: _jsx("a", { target: '_blank', href: "https://www.memento.com/", children: "Memento" }) }), _jsx("li", { children: _jsx("a", { target: '_blank', href: "https://beaconstreetstudios.com/", children: "Beacon Street Studios" }) }), _jsx("li", { children: _jsx("a", { target: '_blank', href: "https://minvo.pro/", children: "Minvo" }) }), _jsx("li", { children: "+ many more." })] }), "95% of my time is spent in the Remotion ecosystem, and I am able to work independently or integrate into existing teams across your full stack. On the front-end, I craft thoughtful, responsive UIs tailored to user goals. For back-end work, I deploy cloud resources in repeatable patterns and shape easy-to-use, transparent APIs.", _jsx("br", {}), _jsx("br", {}), "I", "'", "m available for one-off consulting sessions with your whole team, or for longer engagements working inside your codebase."] }) })),
+    },
+    {
+        slug: 'ray-lotmar',
+        name: 'Ray Lotmar',
+        image: '/img/freelancers/ray.jpeg',
+        website: null,
+        x: 'romrif',
+        github: 'rayBlock',
+        linkedin: 'in/raymond-lotmar/',
+        email: 'ray@blocklab.ch',
+        videocall: 'https://cal.com/remotion-expert-ray-lotmar',
+        since: new Date('2023-01-30').getTime(),
+        description: (_jsxs("div", { children: ["I made", ' ', _jsx("a", { target: '_blank', href: "https://www.romrif.com/", children: "Romrif" }), "!", _jsx("br", {}), "I build Websites & Videos with Remotion. I", "'", "m alway interested in the latest Tech and love building stuff. Feel free to contact me - I", "'", "m available for hire."] })),
+    },
+    {
+        slug: 'lorenzo-bertolini',
+        name: 'Lorenzo Bertolini',
+        image: '/img/freelancers/lorenzo.jpeg',
+        website: 'https://www.lorenzobertolini.com/',
+        x: 'MagoDiSegrate',
+        github: 'encho',
+        linkedin: 'in/lorenzobertolini/',
+        email: 'ciao@lorenzobertolini.com',
+        videocall: null,
+        since: new Date('2023-03-14').getTime(),
+        description: (_jsxs("div", { children: ["I made:", ' ', _jsx("a", { target: '_blank', href: "https://www.dataflics.com/", children: "DataFlics" }), ' ', "and", ' ', _jsx("a", { target: '_blank', href: "https://nerdy.finance/", children: "Nerdy Finance" }), "! This is my personal website:", ' ', _jsx("a", { target: '_blank', href: "https://www.lorenzobertolini.com/", children: "Lorenzo Bertolini" }), _jsx("br", {}), "Reach out to me for data-driven video generation, data visualization, and web app prototyping with React.js and d3.js."] })),
+    },
+    {
+        slug: 'antoine-caron',
+        name: 'Antoine Caron',
+        image: '/img/freelancers/antoine.jpeg',
+        website: 'https://blog.slashgear.dev/',
+        x: 'Slashgear_',
+        github: 'Slashgear',
+        linkedin: 'in/antoine-caron-slash/',
+        email: 'antoine395.caron+remotion@gmail.com',
+        videocall: null,
+        since: new Date('2023-03-17').getTime(),
+        description: (_jsx("div", { children: _jsxs("p", { children: ["I made:", ' ', _jsx("a", { target: '_blank', href: "https://social-video-generator.vercel.app/", children: "Social Video Generator" }), ", with Micka\u00EBl Alves"] }) })),
+    },
+    {
+        slug: 'mickael-alves',
+        name: 'Mickaël Alves',
+        image: '/img/freelancers/mickael.jpeg',
+        website: 'https://mickaelalvs.dev/',
+        x: 'mickaelalvs',
+        github: 'mickaelalvs',
+        linkedin: 'in/mickaelalves/',
+        email: 'alves.mckl@gmail.com',
+        videocall: null,
+        since: new Date('2023-03-17').getTime(),
+        description: (_jsx("div", { children: _jsxs("p", { children: ["I made:", ' ', _jsx("a", { target: '_blank', href: "https://social-video-generator.vercel.app/", children: "Social Video Generator" }), ", with Antoine Caron"] }) })),
+    },
+    {
+        slug: 'pranav-kulkarni',
+        name: 'Pranav Kulkarni',
+        image: '/img/freelancers/pranav.jpg',
+        website: 'https://pranava.dev/',
+        x: 'thecmdrunner',
+        github: 'thecmdrunner',
+        linkedin: 'in/pranavk7/',
+        email: 'hey@pranava.dev',
+        videocall: null,
+        since: new Date('2023-07-03').getTime(),
+        description: (_jsxs("div", { children: ["Launched apps that combine Remotion & AI for generative video -", ' ', _jsx("a", { target: '_blank', href: "https://maxroom.co/", children: "MaxRoom" }), ' ', "and", ' ', _jsx("a", { target: '_blank', href: "https://swiftube.vercel.app/", children: "Swiftube" }), ".", _jsx("br", {}), "Looking at leveraging the power of Remotion for your projects? Let's join forces!"] })),
+    },
+    {
+        slug: 'rahul-bansal',
+        name: 'Rahul Bansal',
+        image: '/img/freelancers/rahul.png',
+        website: 'https://bansalrahul.com/',
+        x: 'BansalRahul14',
+        github: 'rahulbansal16',
+        linkedin: 'in/rahulbansalrb/',
+        email: 'bansalrahul14@gmail.com',
+        videocall: 'https://cal.com/remotion-expert-rahul-bansal',
+        since: new Date('2023-08-04').getTime(),
+        description: (_jsxs("div", { children: ["I can help you with building products using Remotion, Firebase, Antd, and Typescripts. I have made", ' ', _jsx("a", { target: '_blank', href: "https://app.blinkcuts.com/", children: "Blinkcuts" }), ' ', "an AI video editor for short talking head videos. I have worked in companies like Microsoft and early-stage startups like Directi. I can build products super fast from scratch. Looking forward to helping you."] })),
+    },
+    {
+        slug: 'pramod-kumar',
+        name: 'Pramod Kumar',
+        image: '/img/freelancers/pramod.jpg',
+        website: 'https://www.pramod73.in/',
+        x: 'pramodk73',
+        github: 'pskd73',
+        linkedin: 'in/pramod-kumar-1a135b74/',
+        email: 'pramodkumar.damam73@gmail.com',
+        videocall: 'https://cal.com/remotion-expert-pramod-kumar',
+        since: new Date('2024-03-10').getTime(),
+        description: (_jsxs("div", { children: ["I have been building software for the last 10 years across multiple technologies with strong software architecture skills. I have built two products that are based on Remotion.", ' ', _jsx("a", { target: '_blank', href: "https://slickwid.com", children: "SlickWid" }), ' ', "a quick way to make videos for your social media, and", ' ', _jsx("a", { target: '_blank', href: "https://motionshot.app", children: "MotionShot" }), ' ', "through which you can make informative walkthrough guides for your products, tutorials, and how-tos. ", _jsx("br", {}), "I made", ' ', _jsx("a", { target: '_blank', href: "https://github.com/pskd73/remotion-animate-text", children: "remotion-animate-text" }), ' ', "for Remotion to animate text. I build products in public on X. I love helping the community. Feel free to reach out. Looking forward!"] })),
+    },
+    {
+        slug: 'ayush-soni',
+        name: 'Ayush Soni',
+        image: '/img/freelancers/ayush.png',
+        website: 'https://ayushsoni.com/',
+        x: 'ayysoni',
+        github: null,
+        linkedin: 'in/ayushsoni1001/',
+        email: 'hi@ayushsoni.com',
+        videocall: 'https://cal.com/remotion-expert-ayush-soni',
+        since: new Date('2024-03-17').getTime(),
+        description: (_jsxs("div", { children: ["I", "'", "ve been coding and building cool projects since 5th grade (software and hardware both) across multiple technologies. Currently I", "'", "m building", ' ', _jsx("a", { target: '_blank', href: "https://www.typeframes.com/", children: "Typeframes" }), ' ', "using Remotion, it is a tool to create videos. I build products in public on X. I", "'", "d love to hear your story."] })),
+    },
+    {
+        slug: 'andrei-terteci',
+        name: 'Andrei Terteci',
+        image: '/img/freelancers/andrei.png',
+        website: null,
+        x: 'andrei_terteci',
+        github: null,
+        linkedin: 'in/andrei-terteci-935331151/',
+        email: 'hello@andreiterteci.com',
+        videocall: 'https://cal.com/remotion-expert-andrei-terteci',
+        since: new Date('2024-03-17').getTime(),
+        description: (_jsxs("div", { children: ["I made", ' ', _jsx("a", { target: '_blank', href: "https://www.krumzi.com/", children: "Krumzi" }), ' ', "- using Remotion. ", _jsx("br", {}), "I", "'", "m a full-stack developer with 5+ years of experience, specializing in building SaaS products. I mostly work with React and Next.js, and for the past 2 years, I", "'", "ve been using Remotion to build video-based products. I focus on shipping fast, delivering value, and creating things people actually enjoy using."] })),
+    },
+    {
+        slug: 'sam-bowen-hughes',
+        name: 'Sam Bowen Hughes',
+        image: '/img/freelancers/sam-bowen-hughes.jpeg',
+        website: null,
+        x: null,
+        github: 'sambowenhughes',
+        linkedin: 'in/sambowenhughes/',
+        email: 'sam@reactvideoeditor.com',
+        videocall: 'https://calendly.com/reactvideoeditor/30min',
+        since: new Date('2025-06-03').getTime(),
+        description: (_jsxs("div", { children: [_jsxs("p", { children: ["Experienced engineer with 10+ years building advanced software products. Creator of", ' ', _jsx("a", { target: "_blank", href: "https://reactvideoeditor.com", children: "React Video Editor" }), "and", ' ', _jsx("a", { target: "_blank", href: "https://clippkit.com", children: "Clippkit" }), "."] }), _jsxs("p", { children: ["I work with companies building products with", ' ', _jsx("strong", { children: "Remotion at their core" }), ". Custom video editors, automated video generation tools, and scalable rendering pipelines."] }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "Custom video editors" }), " built with Remotion"] }), _jsxs("li", { children: [_jsx("strong", { children: "Automated video generation" }), " systems"] }), _jsxs("li", { children: [_jsx("strong", { children: "Rendering infrastructure" }), " and media pipelines"] }), _jsx("li", { children: _jsx("strong", { children: "UI/UX and full-stack product development" }) })] }), _jsxs("p", { children: ["If you", "'", "re building software around video, or just need a reliable engineering partner who moves fast and builds things right, feel free to reach out."] })] })),
+    },
+    {
+        name: 'Shankhadeep Dey',
+        image: '/img/freelancers/shankhadeep.png',
+        website: 'https://shankhadeep.dev',
+        x: 'iamshankhadeep',
+        github: 'iamshankhadeep',
+        linkedin: 'in/iamshankhadeep/',
+        email: 'shankhadeepdey99@gmail.com',
+        slug: 'iamshankhadeep',
+        videocall: 'https://cal.com/iamshankhadeep',
+        since: new Date('2021-02-13').getTime(),
+        description: (_jsx("div", { children: "I created @remotion/player and @remotion/lambda with Jonny. I have 5+ years of experience in building products using Remotion, React, Next.js, and Typescript. I have worked in companies like Camcorder and early-stage startups like a funnel builder marketplace. I can build products super fast from scratch. Looking forward to helping you." })),
+    },
+    {
+        slug: 'amir-tadrisi',
+        name: 'Amir Tadrisi',
+        image: '/img/freelancers/amir.jpeg',
+        website: 'https://vidbuilder.ai',
+        x: 'amirtds',
+        github: 'amirtds',
+        linkedin: 'in/amirtadrisi/',
+        email: 'amir@cubite.io',
+        videocall: null,
+        since: new Date('2025-01-01').getTime(),
+        description: (_jsxs("div", { children: [_jsxs("p", { children: ["Founder of", ' ', _jsx("a", { target: '_blank', href: "https://vidbuilder.ai", children: "VidBuilder.ai" }), ' ', "and hands-on Remotion expert for companies that need premium, custom-built ", _jsx("strong", { children: "explainer" }), " and", ' ', _jsx("strong", { children: "educational" }), " videos. When a team needs the best partner to own their video pipeline end-to-end, I'm the person they call."] }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "Discovery:" }), " I interview stakeholders, study brand guidelines, and map each storyboard beat to measurable product or education goals."] }), _jsxs("li", { children: [_jsx("strong", { children: "Custom engineering:" }), " I build a dedicated Remotion codebase with component systems tailored to your content, allowing rapid iteration on visuals, motion, and data integrations."] }), _jsxs("li", { children: [_jsx("strong", { children: "Collaborative delivery:" }), " Every client receives a private VidBuilder.ai workspace so their team can tweak scripts, colors, and clips without incurring new engineering costs."] })] }), _jsx("p", { children: "Whether you're launching a new onboarding journey, explainer or demo videos for your SaaS product, or an internal academy, I'm here to help." })] })),
+    },
+    {
+        slug: 'pablito-silva',
+        name: 'Pablito Silva',
+        image: '/img/freelancers/pablito.png',
+        website: 'https://pablituuu.space/',
+        x: null,
+        github: 'pablituuu',
+        linkedin: 'in/pablito-jean-pool-silva-inca-735a03192/',
+        email: 'pablito.silvainca@gmail.com',
+        videocall: null,
+        since: new Date('2026-02-13').getTime(),
+        description: (_jsxs("div", { children: ["Creator of", ' ', _jsx("a", { target: '_blank', href: "https://react-video-editor-mu.vercel.app/", children: "Pablituuu Studio" }), ", a premium AI-powered video editor.", _jsx("br", {}), "I specialize in building complex Remotion applications integrated with AI services like Gemini (for video analysis and highlights) and Deepgram (for automated captions). I also focus on high-performance canvas interactions using Fabric.js and cost-effective AI workflows."] })),
+    },
+];

package/dist/components/experts/experts-icons.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const TwitterLogo: React.FC;
+export declare const LinkedInLogo: React.FC;
+export declare const GitHubLogo: React.FC;
+export declare const EmailLogo: React.FC;
+export declare const VideoCallLogo: React.FC;
+export declare const PersonalWebsite: React.FC;

package/dist/components/experts/experts-icons.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TwitterLogo = () => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", style: {
+            width: 30,
+            marginRight: 10,
+        }, children: _jsx("path", { fill: "white", d: "M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" }) }));
+};
+export const LinkedInLogo = () => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1000 1000", style: {
+            width: 30,
+            marginRight: 10,
+        }, children: _jsx("path", { fill: "white", d: "M195.877 0C88.16 0 0 88.158 0 195.877V803.718C0 911.435 88.158 999.563 195.877 999.563H803.718C911.436 999.563 999.563 911.436 999.563 803.718V195.877C999.563 88.16 911.436 0 803.718 0H195.877ZM245.143 164.948C296.791 164.948 328.604 198.854 329.586 243.423C329.586 287.008 296.789 321.867 244.144 321.867H243.175C192.51 321.867 159.763 287.01 159.763 243.423C159.763 198.855 193.501 164.948 245.142 164.948H245.143ZM690.223 373.258C789.552 373.258 864.013 438.18 864.013 577.694V838.143H713.06V595.156C713.06 534.096 691.213 492.438 636.584 492.438C594.88 492.438 570.022 520.516 559.108 547.64C555.121 557.344 554.141 570.897 554.141 584.472V838.143H403.188C403.188 838.143 405.169 426.53 403.188 383.91H554.172V448.234C574.232 417.284 610.114 373.257 690.223 373.257V373.258ZM168.667 383.943H319.62V838.145H168.667V383.943V383.943Z" }) }));
+};
+export const GitHubLogo = () => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1084 1084", style: {
+            width: 30,
+            marginRight: 10,
+        }, children: _jsx("path", { fill: "white", d: "M542 0C242.545 0 0 242.545 0 542C0 781.835 155.147 984.408 370.592 1056.22C397.692 1060.97 407.855 1044.71 407.855 1030.48C407.855 1017.61 407.178 974.923 407.178 929.53C271 954.598 235.77 896.332 224.93 865.845C218.832 850.262 192.41 802.16 169.375 789.287C150.405 779.125 123.305 754.057 168.698 753.38C211.38 752.702 241.868 792.675 252.03 808.935C300.81 890.912 378.723 867.878 409.888 853.65C414.63 818.42 428.857 794.707 444.44 781.157C323.845 767.607 197.83 720.86 197.83 513.545C197.83 454.602 218.833 405.822 253.385 367.882C247.965 354.332 228.995 298.777 258.805 224.252C258.805 224.252 304.198 210.025 407.855 279.808C451.215 267.613 497.285 261.515 543.355 261.515C589.425 261.515 635.495 267.613 678.855 279.808C782.513 209.348 827.905 224.252 827.905 224.252C857.715 298.777 838.745 354.332 833.325 367.882C867.878 405.822 888.88 453.925 888.88 513.545C888.88 721.537 762.188 767.607 641.593 781.157C661.24 798.095 678.178 830.615 678.178 881.428C678.178 953.92 677.5 1012.19 677.5 1030.48C677.5 1044.71 687.663 1061.64 714.763 1056.22C822.365 1019.91 915.868 950.759 982.106 858.512C1048.34 766.264 1083.98 655.565 1084 542C1084 242.545 841.455 0 542 0Z" }) }));
+};
+export const EmailLogo = () => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1299 1299", style: {
+            width: 30,
+            marginRight: 10,
+        }, children: _jsx("path", { fill: "white", d: "M1177.22 202.969H121.781C99.3278 202.969 81.1875 221.109 81.1875 243.562V1055.44C81.1875 1077.89 99.3278 1096.03 121.781 1096.03H1177.22C1199.67 1096.03 1217.81 1077.89 1217.81 1055.44V243.562C1217.81 221.109 1199.67 202.969 1177.22 202.969ZM1126.48 343.525V1004.7H172.523V343.525L137.511 316.251L187.366 252.189L241.66 294.432H1057.47L1111.76 252.189L1161.62 316.251L1126.48 343.525V343.525ZM1057.47 294.305L649.5 611.443L241.533 294.305L187.239 252.062L137.384 316.124L172.397 343.398L605.735 680.326C618.197 690.008 633.529 695.263 649.31 695.263C665.091 695.263 680.422 690.008 692.885 680.326L1126.48 343.525L1161.49 316.251L1111.63 252.189L1057.47 294.305Z" }) }));
+};
+export const VideoCallLogo = () => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 576", style: {
+            width: 30,
+            marginRight: 10,
+        }, children: _jsx("path", { fill: "white", d: "M64 112c-8.8 0-16 7.2-16 16V384c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V128c0-8.8-7.2-16-16-16H64zM0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64v33V351v33c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128zM528 363.4V148.6L416 199V146.4L520.3 99.5c5.1-2.3 10.6-3.5 16.2-3.5c21.8 0 39.5 17.7 39.5 39.5v241c0 21.8-17.7 39.5-39.5 39.5c-5.6 0-11.1-1.2-16.2-3.5L416 365.6V313l112 50.4z" }) }));
+};
+export const PersonalWebsite = () => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 576", style: {
+            width: 30,
+        }, children: _jsx("path", { fill: "currentcolor", d: "M317.9 422.7C296.4 465.6 272.7 480 256 480c-7.9 0-17.3-3.2-27.3-11l-6.9 18.6c-2.9 7.8-7.7 14.7-13.9 19.9c15.6 3 31.6 4.5 48.1 4.5c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256c0 16.4 1.5 32.5 4.5 48.1c5.3-6.2 12.1-11 19.9-13.9l9.6-3.5c-1.4-10-2.1-20.2-2.1-30.6c0-22.2 3.2-43.7 9.3-64H132c-2.5 19.2-3.9 39.3-4 60l32.2-11.9c.5-16.7 1.9-32.8 4.1-48.1H347.7c2.8 20.2 4.3 41.7 4.3 64s-1.5 43.8-4.3 64H283.6l-11.8 32H342c-5.9 27-14.2 50.9-24.1 70.7zM194.1 89.3C215.6 46.4 239.3 32 256 32s40.4 14.4 61.9 57.3c9.9 19.8 18.2 43.7 24.1 70.7H170c5.9-27 14.2-50.9 24.1-70.7zM384 256c0-22.1-1.4-43.5-4-64h90.8c6 20.3 9.3 41.8 9.3 64s-3.2 43.7-9.3 64H380c2.6-20.5 4-41.9 4-64zm-9.3-96c-9.6-47.6-26.2-88-47.2-116.3c57.8 19.5 105 61.8 130.9 116.3H374.7zM53.6 160c25.9-54.5 73.1-96.9 130.9-116.3c-21 28.3-37.5 68.8-47.2 116.3H53.6zM374.7 352h83.8c-25.9 54.5-73.1 96.9-130.9 116.3c21-28.3 37.6-68.8 47.2-116.3zM271 261.5c2.2-5.9 .7-12.4-3.7-16.8s-11-5.9-16.8-3.7l-215 79.2c-6.2 2.3-10.3 8.1-10.5 14.7s3.8 12.6 9.9 15.1l74 30.5L4.7 484.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L131.5 403.1l30.5 74c2.5 6.1 8.5 10 15.1 9.9s12.4-4.3 14.7-10.5l79.2-215zM143.3 360L85.1 336 229 283 176 426.9l-24-58.2c-1.6-3.9-4.8-7.1-8.7-8.7z" }) }));
+};

package/dist/components/experts.d.ts

@@ -0,0 +1,3 @@
+export { experts } from './experts/experts-data';
+export type { Expert } from './experts/experts-data';
+export { ExpertsPageContent } from './experts/ExpertsPage';

package/dist/components/experts.js

@@ -0,0 +1,2 @@
+export { experts } from './experts/experts-data';
+export { ExpertsPageContent } from './experts/ExpertsPage';

package/dist/components/homepage/BackgroundAnimation.d.ts

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

package/dist/components/homepage/BackgroundAnimation.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getLength } from '@remotion/paths';
+import { useEffect } from 'react';
+const rx = 0.2;
+const ry = 0.45;
+function ellipseToPath(cx, cy) {
+    let output = 'M' + (cx - rx).toString() + ',' + cy.toString();
+    output +=
+        'a' +
+            rx.toString() +
+            ',' +
+            ry.toString() +
+            ' 0 1,0 ' +
+            (2 * rx).toString() +
+            ',0';
+    output +=
+        'a' +
+            rx.toString() +
+            ',' +
+            ry.toString() +
+            ' 0 1,0 ' +
+            (-2 * rx).toString() +
+            ',0';
+    return output;
+}
+const strokeWidth = 0.035;
+export const BackgroundAnimation = () => {
+    const d = ellipseToPath(0.5, 0.5);
+    const length = getLength(d);
+    const css = `
+    @keyframes bganimation {
+      from {
+        stroke-dashoffset: 0
+      }
+    
+      to {
+        stroke-dashoffset: ${length};
+      }
+    }  
+  `;
+    useEffect(() => {
+        const _style = document.createElement('style');
+        _style.innerHTML = css;
+        document.head.appendChild(_style);
+    }, [css]);
+    return (_jsx("div", { className: " w-full h-full min-w-0 m-auto lg:relative lg:min-w-[700px] lg:max-w-[1200px] lg:ml-auto lg:left-auto pointer-events-none", children: _jsxs("svg", { className: "translate-y-[-30%] lg:translate-y-[-50%]", viewBox: "0 0 1 1", style: {
+                width: '100%',
+                position: 'absolute',
+            }, children: [_jsx("path", { d: d, fill: "none", stroke: "var(--ifm-color-primary)", strokeLinecap: "round", className: "stroke-[0.04] lg:stroke-[0.035]", style: {
+                        transformOrigin: 'center center',
+                        transform: `rotate(120deg)`,
+                        animation: `bganimation 20s linear infinite`,
+                        strokeDasharray: `${length * 0.2} ${length * 0.8}`,
+                    } }), _jsx("path", { d: d, fill: "none", stroke: "var(--ifm-color-primary)", strokeLinecap: "round", strokeWidth: strokeWidth, className: "stroke-[0.04] lg:stroke-[0.035]", style: {
+                        transformOrigin: 'center center',
+                        transform: `rotate(0deg)`,
+                        animation: `bganimation 20s linear infinite`,
+                        strokeDasharray: `${length * 0.2} ${length * 0.8}`,
+                    } }), _jsx("path", { d: d, fill: "none", stroke: "var(--ifm-color-primary)", strokeLinecap: "round", strokeWidth: strokeWidth, className: "stroke-[0.04] lg:stroke-[0.035]", style: {
+                        transformOrigin: 'center center',
+                        transform: `rotate(240deg)`,
+                        animation: `bganimation 20s linear infinite`,
+                        strokeDasharray: `${length * 0.2} ${length * 0.8}`,
+                    } })] }) }));
+};

package/dist/components/homepage/ChooseTemplate.d.ts

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

package/dist/components/homepage/ChooseTemplate.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CreateVideoInternals } from 'create-video';
+import { IconForTemplate } from './IconForTemplate';
+import { MoreTemplatesButton } from './MoreTemplatesButton';
+import { TemplateIcon } from './TemplateIcon';
+export const ChooseTemplate = () => {
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: _jsx("div", { style: {
+                position: 'relative',
+                textAlign: 'center',
+            }, children: _jsxs("div", { className: "no-scroll-bar", style: {
+                    display: 'inline-flex',
+                    flexDirection: 'row',
+                    justifyContent: 'space-around',
+                    borderRadius: 50,
+                    alignItems: 'center',
+                    padding: 8,
+                    width: '100%',
+                    maxWidth: '550px',
+                }, children: [CreateVideoInternals.FEATURED_TEMPLATES.filter((f) => f.featuredOnHomePage).map((template) => {
+                        return (_jsx("a", { className: "text-inherit no-underline", href: `/templates/${template.cliId}`, children: _jsx(TemplateIcon, { label: template.featuredOnHomePage, children: _jsx(IconForTemplate, { scale: 0.7, template: template }) }) }, template.cliId));
+                    }), _jsx(MoreTemplatesButton, {})] }) }) }));
+};

package/dist/components/homepage/CommunityStats.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CommunityStats: React.FC;
+export default CommunityStats;

package/dist/components/homepage/CommunityStats.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Contributors, DiscordMembers, GitHubStars, InstallsPerMonth, PagesOfDocs, TemplatesAndExamples, } from './CommunityStatsItems';
+import { SectionTitle } from './VideoAppsTitle';
+const SectionLink = ({ href, children }) => (_jsx("a", { target: "_blank", href: href, className: 'no-underline text-inherit contents', children: children }));
+const CommunityStats = () => (_jsxs("div", { className: 'm-auto max-w-[700px] text-center', children: [_jsx(SectionTitle, { children: "Never build alone" }), _jsx("div", { className: 'fontbrand text-center mb-10 -mt-4', children: "Join a thriving community of developers." }), _jsxs("div", { className: 'flex flex-wrap justify-between gap-4 w-full items-center', children: [_jsx(SectionLink, { href: "https://www.npmjs.com/package/remotion", children: _jsx(InstallsPerMonth, {}) }), _jsx(SectionLink, { href: "https://www.remotion.dev/docs/", children: _jsx(PagesOfDocs, {}) }), _jsx(SectionLink, { href: "https://www.remotion.dev/templates", children: _jsx(TemplatesAndExamples, {}) }), _jsx(SectionLink, { href: "https://github.com/remotion-dev/remotion", children: _jsx(GitHubStars, {}) }), _jsx(SectionLink, { href: "https://remotion.dev/discord", children: _jsx(DiscordMembers, {}) }), _jsx(SectionLink, { href: "https://github.com/remotion-dev/remotion/graphs/contributors", children: _jsx(Contributors, {}) })] })] }));
+export default CommunityStats;

package/dist/components/homepage/CommunityStatsItems.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const InstallsPerMonth: React.FC;
+export declare const PagesOfDocs: React.FC;
+export declare const TemplatesAndExamples: React.FC;
+export declare const GitHubStars: React.FC;
+export declare const DiscordMembers: React.FC;
+export declare const Contributors: React.FC;

package/dist/components/homepage/CommunityStatsItems.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../cn';
+// StatItemContent component
+const StatItemContent = ({ content, width, minWidth, maxWidth, height = 'auto', fontSize, fontWeight, }) => (_jsx("div", { style: {
+        width,
+        minWidth,
+        maxWidth,
+        height,
+        fontSize,
+        fontWeight,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        textAlign: 'center',
+        fontFamily: 'GTPlanar',
+        fontFeatureSettings: "'ss03' on",
+    }, children: content }));
+const Pill = ({ children, className }) => {
+    return (_jsx("div", { className: cn(className, 'card leading-none flex flex-wrap justify-center items-center min-w-[200px] min-h-[80px] max-h-[110px] flex-1 p-0'), children: children }));
+};
+export const InstallsPerMonth = () => {
+    return (_jsxs(Pill, { className: 'w-[30%] flex-col', children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: [_jsx(StatItemContent, { content: "900K", width: "100px", fontSize: "2.5rem", fontWeight: "bold" }), _jsx(StatItemContent, { content: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.6367 2.47534C12.5488 2.44116 12.4512 2.44116 12.3584 2.47534L3.10547 5.98608L12.5 9.67749L21.8945 5.98608L12.6367 2.47534ZM2.34375 18.4519C2.34375 18.613 2.44629 18.7595 2.59766 18.8181L11.3281 22.1287V11.738L2.34375 8.20776V18.4519ZM13.6719 22.1287L22.4023 18.8181C22.5537 18.7595 22.6562 18.613 22.6562 18.4519V8.20776L13.6719 11.738V22.1287ZM11.5283 0.287842C12.1533 0.048584 12.8418 0.048584 13.4668 0.287842L23.2324 3.9939C24.2969 4.39429 25 5.40991 25 6.54761V18.4519C25 19.5896 24.2969 20.6052 23.2373 21.0105L13.4717 24.7166C12.8467 24.9558 12.1582 24.9558 11.5332 24.7166L1.76758 21.0105C0.703125 20.6052 0 19.5896 0 18.4519V6.54761C0 5.40991 0.703125 4.39429 1.7627 3.98901L11.5283 0.282959V0.287842Z", fill: "var(--text-color)" }) }), width: "50px" })] }), _jsx(StatItemContent, { content: "installs per month", width: "75%", fontSize: "1.0rem", fontWeight: "bold" })] }));
+};
+export const PagesOfDocs = () => {
+    return (_jsxs(Pill, { className: "flex-col", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StatItemContent, { content: _jsx("svg", { width: "28", height: "40", viewBox: "0 0 18 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 3.60938C0 1.61602 1.58304 0 3.53571 0H17.0357H18V0.984375V15.4219V16.4062H17.0357H16.7143V19.0312H17.0357H18V21H17.0357H3.21429C1.43839 21 0 19.5316 0 17.7188C0 17.608 0.00401786 17.4973 0.0160714 17.3906H0V3.60938ZM3.21429 16.4062C2.50312 16.4062 1.92857 16.9928 1.92857 17.7188C1.92857 18.4447 2.50312 19.0312 3.21429 19.0312H14.7857V16.4062H3.21429ZM1.92857 14.7123C2.32232 14.5359 2.75625 14.4375 3.21429 14.4375H16.0714V1.96875H3.53571C2.64777 1.96875 1.92857 2.70293 1.92857 3.60938V14.7123ZM6.10714 4.59375H13.1786H14.1429V6.5625H13.1786H6.10714H5.14286V4.59375H6.10714ZM6.10714 7.875H13.1786H14.1429V9.84375H13.1786H6.10714H5.14286V7.875H6.10714Z", fill: "var(--text-color)" }) }), width: "40px" }), _jsx(StatItemContent, { content: "700", width: "85px", maxWidth: "100px", fontSize: "2.5rem", fontWeight: "bold" })] }), _jsx(StatItemContent, { content: "pages of docs", width: "125px", fontSize: "1.0rem", fontWeight: "bold" })] }));
+};
+export const TemplatesAndExamples = () => (_jsxs(Pill, { className: "w-[30%] flex items-center flex-row", children: [_jsx(StatItemContent, { content: "35", width: "60px", fontSize: "2.7rem", fontWeight: "bold" }), _jsx(StatItemContent, { content: "templates & examples", width: "135px", fontSize: "1.35rem", fontWeight: "bold" })] }));
+export const GitHubStars = () => {
+    return (_jsxs(Pill, { className: "w-[30%] flex-col", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StatItemContent, { content: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 26 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.9951 0C13.4424 0 13.8507 0.24375 14.0451 0.632812L17.3799 7.25625L24.8271 8.31562C25.2646 8.37656 25.6292 8.67188 25.7653 9.07969C25.9014 9.4875 25.7896 9.92812 25.4785 10.2281L20.0778 15.3937L21.3514 22.6875C21.4243 23.1094 21.2444 23.5359 20.8799 23.7891C20.5153 24.0422 20.0389 24.0703 19.65 23.8688L12.9903 20.4375L6.34027 23.8641C5.94652 24.0656 5.47014 24.0375 5.11041 23.7844C4.75069 23.5312 4.56597 23.1047 4.63889 22.6828L5.9125 15.3891L0.511803 10.2281C0.195831 9.92812 0.0888863 9.48281 0.224997 9.07969C0.361108 8.67656 0.725692 8.38125 1.16319 8.31562L8.61041 7.25625L11.9451 0.632812C12.1444 0.24375 12.5479 0 12.9951 0ZM12.9951 3.70312L10.4431 8.775C10.2729 9.10781 9.94722 9.34219 9.56319 9.39844L3.8125 10.2141L7.98819 14.2031C8.25555 14.4609 8.38194 14.8266 8.31875 15.1875L7.33194 20.7984L12.4458 18.1641C12.791 17.9859 13.2042 17.9859 13.5444 18.1641L18.6583 20.7984L17.6764 15.1922C17.6132 14.8313 17.7347 14.4656 18.0069 14.2078L22.1826 10.2188L16.4319 9.39844C16.0528 9.34219 15.7222 9.1125 15.5521 8.775L12.9951 3.70312Z", fill: "var(--text-color)" }) }), width: "45px" }), _jsx(StatItemContent, { content: "39k", width: "80px", fontSize: "2.5rem", fontWeight: "bold" })] }), _jsx(StatItemContent, { content: "GitHub stars", width: "125px", fontSize: "1.0rem", fontWeight: "bold" })] }));
+};
+export const DiscordMembers = () => {
+    return (_jsx(Pill, { className: 'w-[30%]', children: _jsxs("div", { style: {
+                width: '80%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }, children: [_jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }, children: [_jsx(StatItemContent, { content: "6000+", width: "142px", fontSize: "2.5rem", fontWeight: "bold" }), _jsx(StatItemContent, { content: "Discord members", width: "142px", fontSize: "1rem", fontWeight: "bold" })] }), _jsx("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                    }, children: _jsx(StatItemContent, { content: _jsx("svg", { width: "61", height: "47", viewBox: "0 0 46 35", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M38.9978 2.95533C38.9843 2.93009 38.962 2.91064 38.9352 2.90065C35.955 1.53492 32.8101 0.560692 29.5791 0.00230404C29.55 -0.00300893 29.5201 0.00092017 29.4934 0.0135365C29.4667 0.0261528 29.4447 0.0468187 29.4304 0.0726144C29.0019 0.84938 28.6129 1.64724 28.2648 2.46316C24.7802 1.93495 21.2356 1.93495 17.7509 2.46316C17.4015 1.64523 17.0072 0.847165 16.5697 0.0726144C16.5546 0.0475873 16.5324 0.0275657 16.506 0.0150584C16.4795 0.00255114 16.45 -0.00188563 16.421 0.00230404C13.1844 0.558177 10.034 1.53248 7.04927 2.90065C7.0231 2.91173 7.00116 2.93089 6.98669 2.95533C1.02568 11.8535 -0.609293 20.5251 0.188637 29.0951C0.190896 29.1167 0.197628 29.1376 0.208402 29.1564C0.219177 29.1752 0.233759 29.1916 0.25122 29.2045C3.7235 31.7693 7.60667 33.7268 11.7352 34.9934C11.7648 35.0025 11.7966 35.0022 11.8261 34.9924C11.8556 34.9826 11.8812 34.9638 11.8994 34.9387C12.7852 33.7344 13.5702 32.4593 14.2463 31.1263C14.2553 31.108 14.2604 31.088 14.2613 31.0676C14.2622 31.0471 14.2589 31.0268 14.2516 31.0077C14.2442 30.9886 14.233 30.9713 14.2186 30.9567C14.2043 30.9422 14.1871 30.9308 14.1681 30.9232C12.9278 30.4486 11.7271 29.8765 10.5774 29.2123C10.5571 29.1999 10.54 29.1828 10.5277 29.1624C10.5154 29.142 10.5082 29.119 10.5067 29.0953C10.5051 29.0715 10.5093 29.0478 10.5189 29.026C10.5285 29.0042 10.5432 28.985 10.5617 28.9701C10.8042 28.7904 11.0468 28.6029 11.2736 28.4155C11.2936 28.3979 11.3182 28.3864 11.3445 28.3822C11.3708 28.3781 11.3978 28.3815 11.4222 28.392C18.9478 31.8216 27.0992 31.8216 34.5388 28.392C34.5625 28.3804 34.589 28.3757 34.6153 28.3785C34.6416 28.3813 34.6666 28.3914 34.6874 28.4076C34.9143 28.5951 35.1568 28.7904 35.3993 28.9701C35.4178 28.985 35.4325 29.0042 35.4421 29.026C35.4517 29.0478 35.4559 29.0715 35.4543 29.0953C35.4528 29.119 35.4456 29.142 35.4333 29.1624C35.421 29.1828 35.4039 29.1999 35.3836 29.2123C34.2369 29.8799 33.0357 30.4496 31.7929 30.9154C31.7739 30.923 31.7567 30.9344 31.7424 30.9489C31.728 30.9635 31.7168 30.9808 31.7095 30.9999C31.7021 31.019 31.6988 31.0393 31.6997 31.0597C31.7006 31.0801 31.7057 31.1001 31.7147 31.1185C32.4026 32.4449 33.187 33.7191 34.0616 34.9309C34.0798 34.956 34.1054 34.9748 34.1349 34.9846C34.1644 34.9944 34.1962 34.9947 34.2258 34.9856C38.3663 33.7246 42.2606 31.7669 45.7411 29.1967C45.7589 29.1841 45.7737 29.1679 45.7846 29.149C45.7954 29.1301 45.8019 29.109 45.8037 29.0873C46.758 19.1892 44.1922 10.5879 38.9978 2.95533ZM15.3728 23.8765C13.1042 23.8765 11.2423 21.7985 11.2423 19.2517C11.2423 16.7049 13.0729 14.619 15.3728 14.619C17.6962 14.619 19.5424 16.7127 19.5032 19.2439C19.5032 21.7985 17.6727 23.8765 15.3728 23.8765ZM30.6586 23.8765C28.39 23.8765 26.5282 21.7985 26.5282 19.2517C26.5282 16.7049 28.3509 14.619 30.6586 14.619C32.982 14.619 34.8282 16.7127 34.7891 19.2439C34.7891 21.7985 32.9742 23.8765 30.6586 23.8765Z", fill: "var(--text-color)" }) }), width: "45px" }) })] }) }));
+};
+export const Contributors = () => {
+    return (_jsx(Pill, { className: "w-[30%]", children: _jsxs("div", { style: { display: 'flex', justifyContent: 'center' }, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsx(StatItemContent, { content: _jsx("svg", { width: "60", height: "50", viewBox: "0 0 63 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M6.975 5.375C6.975 3.94946 7.54656 2.58231 8.56395 1.5743C9.58133 0.566293 10.9612 0 12.4 0C13.8388 0 15.2187 0.566293 16.2361 1.5743C17.2534 2.58231 17.825 3.94946 17.825 5.375C17.825 6.80054 17.2534 8.16769 16.2361 9.1757C15.2187 10.1837 13.8388 10.75 12.4 10.75C10.9612 10.75 9.58133 10.1837 8.56395 9.1757C7.54656 8.16769 6.975 6.80054 6.975 5.375ZM6.2 20.5114C5.23125 21.5864 4.65 23.0165 4.65 24.5714C4.65 26.1263 5.23125 27.5565 6.2 28.6315V20.5114ZM20.1887 15.7795C17.3116 18.3038 15.5 21.9991 15.5 26.1071C15.5 29.3993 16.6625 32.4228 18.6 34.7935V36.8571C18.6 38.556 17.2147 39.9286 15.5 39.9286H9.3C7.58531 39.9286 6.2 38.556 6.2 36.8571V34.2848C2.53813 32.5571 0 28.8618 0 24.5714C0 18.6301 4.85344 13.8214 10.85 13.8214H13.95C16.275 13.8214 18.4256 14.5413 20.1887 15.7699V15.7795ZM43.4 36.8571V34.7935C45.3375 32.4228 46.5 29.3993 46.5 26.1071C46.5 21.9991 44.6884 18.3038 41.8112 15.7699C43.5744 14.5413 45.725 13.8214 48.05 13.8214H51.15C57.1466 13.8214 62 18.6301 62 24.5714C62 28.8618 59.4619 32.5571 55.8 34.2848V36.8571C55.8 38.556 54.4147 39.9286 52.7 39.9286H46.5C44.7853 39.9286 43.4 38.556 43.4 36.8571ZM44.175 5.375C44.175 3.94946 44.7466 2.58231 45.7639 1.5743C46.7813 0.566293 48.1612 0 49.6 0C51.0388 0 52.4187 0.566293 53.4361 1.5743C54.4534 2.58231 55.025 3.94946 55.025 5.375C55.025 6.80054 54.4534 8.16769 53.4361 9.1757C52.4187 10.1837 51.0388 10.75 49.6 10.75C48.1612 10.75 46.7813 10.1837 45.7639 9.1757C44.7466 8.16769 44.175 6.80054 44.175 5.375ZM55.8 20.5114V28.6411C56.7687 27.5565 57.35 26.1359 57.35 24.581C57.35 23.0261 56.7687 21.596 55.8 20.521V20.5114ZM31 0C32.6443 0 34.2213 0.647192 35.3841 1.7992C36.5468 2.95121 37.2 4.51367 37.2 6.14286C37.2 7.77204 36.5468 9.3345 35.3841 10.4865C34.2213 11.6385 32.6443 12.2857 31 12.2857C29.3557 12.2857 27.7787 11.6385 26.6159 10.4865C25.4532 9.3345 24.8 7.77204 24.8 6.14286C24.8 4.51367 25.4532 2.95121 26.6159 1.7992C27.7787 0.647192 29.3557 0 31 0ZM23.25 26.1071C23.25 27.6621 23.8312 29.0826 24.8 30.1672V22.0471C23.8312 23.1317 23.25 24.5522 23.25 26.1071ZM37.2 22.0471V30.1768C38.1687 29.0922 38.75 27.6717 38.75 26.1167C38.75 24.5618 38.1687 23.1317 37.2 22.0567V22.0471ZM43.4 26.1071C43.4 30.3975 40.8619 34.0929 37.2 35.8205V39.9286C37.2 41.6275 35.8147 43 34.1 43H27.9C26.1853 43 24.8 41.6275 24.8 39.9286V35.8205C21.1381 34.0929 18.6 30.3975 18.6 26.1071C18.6 20.1658 23.4534 15.3571 29.45 15.3571H32.55C38.5466 15.3571 43.4 20.1658 43.4 26.1071Z", fill: "var(--text-color)" }) }), width: "65px" }) }), _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }, children: [_jsx(StatItemContent, { content: "300+", width: "100px", fontSize: "2.5rem", fontWeight: "bold" }), _jsx(StatItemContent, { content: "contributors", width: "100px", fontSize: "1.0rem", fontWeight: "bold" })] })] }) }));
+};