{"version":3,"file":"Slider_Component.BfMxa_oo.mjs","names":["useState","_Fragment"],"sources":["https:/framerusercontent.com/modules/1Ps64oefZIYhELpWy8NS/SHXusZyC0352CIugUUKa/Slider_Component.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useState}from\"react\";export default function Slider_Component(props){const[wordsPerDay,setWordsPerDay]=useState(3e3);const[hourlyRate,setHourlyRate]=useState(50);// Calculate ROI values\nconst hoursSpentTyping=wordsPerDay/1e3*30;const hoursSavedMonthly=hoursSpentTyping*.25;const timeValueSaved=hoursSavedMonthly*hourlyRate;const monthlySubscription=13;const totalMonthlyROI=timeValueSaved-monthlySubscription;return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"style\",{children:`\n                    /* Base styles (mobile first) */\n                    *{\n                    margin: 0;\n                    }\n                    \n                    .calculator {\n                        display: flex;\n                        gap: 32px;\n                        padding: 12px;\n                        width: 100%;\n                        background: white;\n                        border-radius: 24px;\n                        font-family: Geist;\n                        letter-spacing: -0.02em;\n                        flex-direction: column;\n                    }\n\n                    .container {\n                        height: 100%;\n                        display: flex;\n                        justify-content: center;\n                        align-items: center;\n                        overflow: hidden;\n                    }\n\n                    .left-column {\n                        display: flex;\n                        flex-direction: column;\n                        justify-content: flex-start;\n                        align-items: flex-start;\n                        width: 100%;\n                        gap: 24px;\n                    }\n\n                    .heading {\n                        font-weight: 500;\n                        font-size: 18px;\n                        line-height: 120%;\n                    }\n\n                    .average-text {\n                        font-size: 12px;\n                        color: #666;\n                    }\n\n                    .slider-container {\n                        width: 100%;\n                    }\n\n                    .slider {\n                        width: 100%;\n                    }\n\n                    .slider-value {\n                        font-size: 16px;\n                        font-weight: 500;\n                        text-align: center;\n                    }\n\n                    .slider-labels {\n                        display: flex;\n                        justify-content: space-between;\n                        color: #666;\n                        font-size: 12px;\n                    }\n\n                    .right-column {\n                        display: flex;\n                        flex-direction: column;\n                        align-items: center;\n                        background: linear-gradient(180deg, #F5F9FF 0%, #00C7C3 100%);\n                        padding: 12px;\n                        border-radius: 16px;\n                        width: 100%;\n                        gap: 24px;\n                    }\n\n                    .hourly-rate-container {\n                        display: flex;\n                        flex-direction: column;\n                        gap: 16px;\n                    }\n\n                    .input-container {\n                        display: flex;\n                        justify-content: start;\n                        align-items: center;\n                        background: #F5F5F5;\n                        border-radius: 8px;\n                        padding: 0px 12px;\n                        width: fit-content;\n                    }\n\n                    .hourly-rate-input {\n                        width: 64px;\n                        height: 40px;\n                        padding: 0px 8px;\n                        border: none;\n                        background: transparent;\n                        outline: none;\n                    }\n\n                    .dollar-sign, .per-hour {\n                        font-size: 14px;\n                        color: #666;\n                    }\n\n                    .top-roi-container {\n                        display: flex;\n                        flex-direction: column;\n                        align-items: center;\n                    }\n\n                    .roi-heading {\n                        color: #000;\n                        text-align: center;\n                        font-family: Geist;\n                        font-size: 20px;\n                        font-weight: 500;\n                        line-height: 140%;\n                    }\n\n                    .roi-container {\n                        display: flex;\n                        align-items: flex-end;\n                        gap: 10px;\n                    }\n\n                    .total-roi {\n                        color: #000;\n                        font-family: Geist;\n                        font-size: 48px;\n                        font-weight: 500;\n                        margin: 0;\n                    }\n\n                    .dollar-large {\n                        font-size: 32px;\n                        margin-right: 8px;\n                    }\n\n                    // .subheading {\n                    //     color: rgba(0, 0, 0, 0.70);\n                    //     text-align: center;\n                    //     font-family: Geist;\n                    //     font-size: 14px;\n                    //     font-weight: 500;\n                    //     line-height: 140%;\n                    //     margin-bottom: 32px;\n                    // }\n\n                    .download-button {\n                        display: flex;\n                        height: 48px;\n                        padding: 16px 24px 16px 18px;\n                        justify-content: center;\n                        align-items: center;\n                        gap: 4px;\n                        align-self: stretch;\n                        border-radius: 8px;\n                        border: 1px solid rgba(255, 255, 255, 0.30);\n                        background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%), #06F;\n                        box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.11) inset;\n                        color: #FFF;\n                        text-align: center;\n                        font-family: Geist;\n                        font-size: 14px;\n                        font-weight: 500;\n                        line-height: 120%;\n                        cursor: pointer;\n                    }\n\n                    .apple-logo {\n                        padding-top: 2px;\n                    }\n\n                    .stats-box {\n                        display: flex;\n                        padding: 16px;\n                        flex-direction: column;\n                        align-items: flex-start;\n                        gap: 16px;\n                        align-self: stretch;\n                        border-radius: 12px;\n                        background: #FFF;\n                        font-size: 12px;\n                    }\n\n                    .stat-row {\n                        display: flex;\n                        justify-content: space-between;\n                        align-items: center;\n                        align-self: stretch;\n                        width: 100%;\n                    }\n\n                    .divider {\n                        background-color: #00000020;\n                        width: 100%;\n                        height: 1px;\n                    }\n\n                    /* 390px breakpoint */\n                    @media (min-width: 390px) {\n                        .average-text,\n                        .hourly-rate-input,\n                        .stats-box,\n                        .download-button,\n                        .dollar-sign,\n                        .per-hour {\n                            font-size: 14px;\n                        }\n                        .slider-value {\n                            font-size: 16px;\n                        }\n                    }\n\n                    /* 640px breakpoint */\n                    @media (min-width: 640px) {\n                        .average-text,\n                        .hourly-rate-input,\n                        .download-button,\n                        .dollar-sign,\n                        .per-hour {\n                            font-size: 16px;\n                        }\n                        .stats-box {\n                            font-size: 16px;\n                            padding: 20px;\n                        }\n                        .slider-value {\n                            font-size: 20px;\n                        }\n                        .calculator {\n                            border: 1px solid #00000010;\n                            padding: 24px;\n                        } \n                        .right-column {\n                            padding: 24px;\n                        }                               \n\n                    /* 990px breakpoint */\n                    @media (min-width: 990px) {\n                        .calculator {\n                            gap: 64px;\n                            padding: 32px;\n                            border-radius: 32px;\n                            flex-direction: row;\n                        }\n                        .heading,\n                        .roi-heading {\n                            font-size: 32px; /* Updated to match heading size */\n                        }\n                        .average-text,\n                        .hourly-rate-input,\n                        .dollar-sign,\n                        .per-hour,\n                        .download-button,\n                        .stats-box {\n                            font-size: 18px;\n                        }\n                        .slider-value {\n                            font-size: 24px;\n                        }\n                        .total-roi {\n                            font-size: 80px;\n                        }\n                        .dollar-large {\n                            font-size: 48px;\n                        }\n                        .right-column {\n                            padding: 32px;\n                        }\n                        .left-column, .right-column {\n                            gap: 32px;\n                        }             \n                        .slider-labels {\n                            font-size: 14px;    \n                        }            \n                    }\n\n                    /* 1440px breakpoint */\n                    @media (min-width: 1440px) {\n                        .average-text,\n                        .stats-box,\n                        .dollar-sign,\n                        .per-hour {\n                            font-size: 20px;\n                        }                            \n                    }\n                `}),/*#__PURE__*/_jsx(\"div\",{className:\"container\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"calculator\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"left-column\",children:[/*#__PURE__*/_jsxs(\"h2\",{className:\"heading\",children:[\"How many words do you\",/*#__PURE__*/_jsx(\"br\",{}),\"type each day?\"]}),/*#__PURE__*/_jsxs(\"div\",{className:\"average-text\",children:[/*#__PURE__*/_jsx(\"p\",{style:{margin:0},children:\"The average person:\"}),/*#__PURE__*/_jsx(\"p\",{style:{margin:0},children:\"- Types 2k words per day\"}),/*#__PURE__*/_jsx(\"p\",{style:{margin:0},children:\"- Spends 2 hours typing per day\"})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"slider-container\",children:[/*#__PURE__*/_jsxs(\"p\",{className:\"slider-value\",children:[wordsPerDay,\" words / \",wordsPerDay/1e3,\" hours\"]}),/*#__PURE__*/_jsx(\"input\",{type:\"range\",min:\"1000\",max:\"20000\",step:\"1000\",value:wordsPerDay,onChange:e=>setWordsPerDay(Number(e.target.value)),className:\"slider\"}),/*#__PURE__*/_jsxs(\"div\",{className:\"slider-labels\",children:[/*#__PURE__*/_jsx(\"span\",{children:\"1k\"}),/*#__PURE__*/_jsx(\"span\",{children:\"10k\"}),/*#__PURE__*/_jsx(\"span\",{children:\"20k\"})]})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"hourly-rate-container\",children:[/*#__PURE__*/_jsx(\"p\",{className:\"average-text\",children:\"How much is one hour of your time worth to you?\"}),/*#__PURE__*/_jsxs(\"div\",{className:\"input-container\",children:[/*#__PURE__*/_jsx(\"span\",{className:\"dollar-sign\",children:\"$\"}),/*#__PURE__*/_jsx(\"input\",{type:\"number\",value:hourlyRate,onChange:e=>setHourlyRate(Number(e.target.value)),className:\"hourly-rate-input\"}),/*#__PURE__*/_jsx(\"span\",{className:\"per-hour\",children:\"/hr\"})]})]})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"right-column\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"top-roi-container\",children:[/*#__PURE__*/_jsx(\"h2\",{className:\"roi-heading\",children:\"Return on Invest Calculator\"}),/*#__PURE__*/_jsx(\"div\",{className:\"roi-container\",children:/*#__PURE__*/_jsxs(\"h1\",{className:\"total-roi\",children:[/*#__PURE__*/_jsx(\"span\",{className:\"dollar-large\",children:\"$\"}),totalMonthlyROI.toLocaleString()]})}),/*#__PURE__*/_jsx(\"p\",{className:\"average-text\",children:\"is your monthly return on investment with RiverVoice AI\"})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"stats-box\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"stat-row\",children:[/*#__PURE__*/_jsx(\"span\",{children:\"Hours spent typing\"}),/*#__PURE__*/_jsx(\"span\",{children:hoursSpentTyping})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"stat-row\",children:[/*#__PURE__*/_jsx(\"span\",{children:\"Hours saved monthly (25%)\"}),/*#__PURE__*/_jsx(\"span\",{children:hoursSavedMonthly})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"stat-row\",children:[/*#__PURE__*/_jsx(\"span\",{children:\"Time value saved with RiverVoice AI\"}),/*#__PURE__*/_jsxs(\"span\",{children:[\"$\",timeValueSaved.toLocaleString()]})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"stat-row\",children:[/*#__PURE__*/_jsx(\"span\",{children:\"RiverVoice AI monthly cost (yearly plan)\"}),/*#__PURE__*/_jsxs(\"span\",{children:[\"$\",monthlySubscription]})]}),/*#__PURE__*/_jsx(\"div\",{className:\"divider\"}),/*#__PURE__*/_jsxs(\"div\",{className:\"stat-row\",children:[/*#__PURE__*/_jsx(\"span\",{children:\"Total Monthly ROI\"}),/*#__PURE__*/_jsxs(\"span\",{children:[\"$\",totalMonthlyROI.toLocaleString()]})]})]})]})]})})]});}\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Slider_Component\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Slider_Component.map"],"mappings":"yKAA2G,SAAwB,EAAiB,EAAM,CAAC,GAAK,CAAC,EAAY,GAAgBA,EAAS,IAAI,CAAM,CAAC,EAAW,GAAeA,EAAS,GAAG,CACjP,EAAiB,EAAY,IAAI,GAAS,EAAkB,EAAiB,IAAU,EAAe,EAAkB,EAA8C,EAAgB,EAAe,GAAoB,OAAoB,EAAMC,EAAU,CAAC,SAAS,CAAc,EAAK,QAAQ,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAmShS,CAAC,CAAc,EAAK,MAAM,CAAC,UAAU,YAAY,SAAsB,EAAM,MAAM,CAAC,UAAU,aAAa,SAAS,CAAc,EAAM,MAAM,CAAC,UAAU,cAAc,SAAS,CAAc,EAAM,KAAK,CAAC,UAAU,UAAU,SAAS,CAAC,wBAAqC,EAAK,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAc,EAAM,MAAM,CAAC,UAAU,eAAe,SAAS,CAAc,EAAK,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,SAAS,sBAAsB,CAAC,CAAc,EAAK,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,SAAS,2BAA2B,CAAC,CAAc,EAAK,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,SAAS,kCAAkC,CAAC,CAAC,CAAC,CAAC,CAAc,EAAM,MAAM,CAAC,UAAU,mBAAmB,SAAS,CAAc,EAAM,IAAI,CAAC,UAAU,eAAe,SAAS,CAAC,EAAY,YAAY,EAAY,IAAI,SAAS,CAAC,CAAC,CAAc,EAAK,QAAQ,CAAC,KAAK,QAAQ,IAAI,OAAO,IAAI,QAAQ,KAAK,OAAO,MAAM,EAAY,SAAS,GAAG,EAAe,OAAO,EAAE,OAAO,MAAM,CAAC,CAAC,UAAU,SAAS,CAAC,CAAc,EAAM,MAAM,CAAC,UAAU,gBAAgB,SAAS,CAAc,EAAK,OAAO,CAAC,SAAS,KAAK,CAAC,CAAc,EAAK,OAAO,CAAC,SAAS,MAAM,CAAC,CAAc,EAAK,OAAO,CAAC,SAAS,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAc,EAAM,MAAM,CAAC,UAAU,wBAAwB,SAAS,CAAc,EAAK,IAAI,CAAC,UAAU,eAAe,SAAS,kDAAkD,CAAC,CAAc,EAAM,MAAM,CAAC,UAAU,kBAAkB,SAAS,CAAc,EAAK,OAAO,CAAC,UAAU,cAAc,SAAS,IAAI,CAAC,CAAc,EAAK,QAAQ,CAAC,KAAK,SAAS,MAAM,EAAW,SAAS,GAAG,EAAc,OAAO,EAAE,OAAO,MAAM,CAAC,CAAC,UAAU,oBAAoB,CAAC,CAAc,EAAK,OAAO,CAAC,UAAU,WAAW,SAAS,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAc,EAAM,MAAM,CAAC,UAAU,eAAe,SAAS,CAAc,EAAM,MAAM,CAAC,UAAU,oBAAoB,SAAS,CAAc,EAAK,KAAK,CAAC,UAAU,cAAc,SAAS,8BAA8B,CAAC,CAAc,EAAK,MAAM,CAAC,UAAU,gBAAgB,SAAsB,EAAM,KAAK,CAAC,UAAU,YAAY,SAAS,CAAc,EAAK,OAAO,CAAC,UAAU,eAAe,SAAS,IAAI,CAAC,CAAC,EAAgB,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAc,EAAK,IAAI,CAAC,UAAU,eAAe,SAAS,0DAA0D,CAAC,CAAC,CAAC,CAAC,CAAc,EAAM,MAAM,CAAC,UAAU,YAAY,SAAS,CAAc,EAAM,MAAM,CAAC,UAAU,WAAW,SAAS,CAAc,EAAK,OAAO,CAAC,SAAS,qBAAqB,CAAC,CAAc,EAAK,OAAO,CAAC,SAAS,EAAiB,CAAC,CAAC,CAAC,CAAC,CAAc,EAAM,MAAM,CAAC,UAAU,WAAW,SAAS,CAAc,EAAK,OAAO,CAAC,SAAS,4BAA4B,CAAC,CAAc,EAAK,OAAO,CAAC,SAAS,EAAkB,CAAC,CAAC,CAAC,CAAC,CAAc,EAAM,MAAM,CAAC,UAAU,WAAW,SAAS,CAAc,EAAK,OAAO,CAAC,SAAS,sCAAsC,CAAC,CAAc,EAAM,OAAO,CAAC,SAAS,CAAC,IAAI,EAAe,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAc,EAAM,MAAM,CAAC,UAAU,WAAW,SAAS,CAAc,EAAK,OAAO,CAAC,SAAS,2CAA2C,CAAC,CAAc,EAAM,OAAO,CAAC,SAAS,CAAC,IAAI,GAAoB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAc,EAAK,MAAM,CAAC,UAAU,UAAU,CAAC,CAAc,EAAM,MAAM,CAAC,UAAU,WAAW,SAAS,CAAc,EAAK,OAAO,CAAC,SAAS,oBAAoB,CAAC,CAAc,EAAM,OAAO,CAAC,SAAS,CAAC,IAAI,EAAgB,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,kBApSpqG,IAA4B"}