https://responsively.app/_next/static/chunks/pages/index-273c2463d6b044a9.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{8312:function(e,s,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return t(8645)}])},6571:function(e,s){"use strict";s.Z={src:"/_next/static/media/all-devices-side-by-side.20d4a22f.png",height:2e3,width:2970,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAAFVBMVEUbJDcTFyBBMkQmKDsYIjA2LD8yNUq+UPyLAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAJ0lEQVR4nBXJwQ0AAAjCwALi/iMb+7qk2E5LcK1Gw26kxzfS4P/AAQlzAFtGnpNiAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:5}},6879:function(e,s,t){"use strict";t.d(s,{_:function(){return l}});var i=t(5893),a=t(7294);let l=a.memo(()=>{let e=(0,a.useRef)();return(0,a.useEffect)(()=>{let s=e.current,t=setTimeout(()=>{let e=document.createElement("script");e.src="https://cdn.carbonads.com/carbon.js?serve=CESD553L&placement=responsivelyapp",e.async=!0,e.id="_carbonads_js",s.appendChild(e)},100);return()=>clearTimeout(t)},[e]),(0,a.useEffect)(()=>{let s=setInterval(()=>{[...e.current.children].forEach(s=>{s.id.startsWith("carbonads_")&&e.current.removeChild(s)})},100);return()=>clearInterval(s)}),(0,i.jsx)("div",{ref:e,className:"my-4 flex h-[100px] justify-center"})})},8645:function(e,s,t){"use strict";t.r(s),t.d(s,{default:function(){return J}});var i=t(5893),a=t(9008),l=t.n(a),n=t(5675),r=t.n(n),o={src:"/_next/static/media/background-hero.f7320010.svg",height:800,width:800,blurWidth:0,blurHeight:0},c=t(5825),d=t(5649),m=t(5794);function h(){return(0,i.jsxs)("section",{id:"get-started-today",className:"relative overflow-hidden py-32",children:[(0,i.jsx)(m.S,{}),(0,i.jsx)(d.W,{className:"relative",children:(0,i.jsxs)("div",{className:"mx-auto max-w-lg text-center",children:[(0,i.jsx)("h2",{className:"font-display text-3xl tracking-tight text-white sm:text-4xl",children:"Get started today"}),(0,i.jsx)("p",{className:"mt-4 text-lg tracking-tight text-white",children:"Time to kick off your journey towards Web Development Mastery."}),(0,i.jsx)(c.z,{href:"/download",color:"white",className:"mt-10",children:"Download Now"})]})})]})}var x={src:"/_next/static/media/background-faqs.55d2e36a.jpg",height:1892,width:3116,blurDataURL:"data:image/jpeg;base64,/9j/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAFAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAaEAACAgMAAAAAAAAAAAAAAAAAAQIDE0Fx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAf/EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oADAMBAAIRAxEAPwCvY27FNzfNAAaH/9k=",blurWidth:8,blurHeight:5},p=t(1664),u=t.n(p),g=t(7294),v=t(4979),A=t(8971);let f=[[{question:"Does Responsively App render the page with the same engine as the browser?",answer:"No, Responsively App is built on top of Electron and uses Chromium as its rendering engine."},{question:"Does Responsively App accurately render as real devices?",answer:"Responsively App tries to render pages as close as possible to real devices but it may not be 100% accurate."},{question:"Is Responsively App a good replacement for real devices?",answer:"No, Responsively App is not a replacement for real devices. It is a tool that renders pages in viewport sizes of various devices, but it does not emulate their behavior."}],[{question:"Is Responsively App free?",answer:"Yes, Responsively App is free to use and open source. You can find the source code on GitHub."},{question:"How do I report a bug?",answer:(0,i.jsxs)(i.Fragment,{children:["Please open an issue on our"," ",(0,i.jsx)("a",{href:"https://github.com/responsively-org/responsively-app/issues",className:"underline",children:"GitHub repo"})," ","and we'll look into it."]})},{question:"How do I request a feature?",answer:(0,i.jsxs)(i.Fragment,{children:["Please open an issue on our"," ",(0,i.jsx)("a",{href:"https://github.com/responsively-org/responsively-app/issues",className:"underline",children:"GitHub repo"})," ","explainng your need and we'll look into it."]})}],[{question:"How can I support Responsively App?",answer:(0,i.jsxs)(i.Fragment,{children:["You can support in a lot of ways and we have details of in our"," ",(0,i.jsx)(u(),{href:"/sponsor",className:"underline",children:"Sponsorship"})," ","page."]})}

1,{question:"How can I contribute to Responsively App?",answer:(0,i.jsxs)(i.Fragment,{children:["Please checkout our"," ",(0,i.jsx)("a",{href:"https://github.com/responsively-org/responsively-app/issues",className:"underline",children:"GitHub repo"})," ","for issues that needs help and give them a try."]})}]];function w(){let[e,s]=(0,g.useState)(null),t=t=>{s(e===t?null:t)},a=f.flat();return(0,i.jsxs)("section",{id:"faq","aria-labelledby":"faq-title",className:"relative overflow-hidden bg-slate-50 py-20 sm:py-32",children:[(0,i.jsx)(r(),{className:"absolute left-1/2 top-0 max-w-none -translate-y-1/4 translate-x-[-30%]",src:x,alt:"",width:1558,height:946,unoptimized:!0}),(0,i.jsx)(d.W,{className:"relative",children:(0,i.jsxs)("div",{className:"mx-auto max-w-3xl",children:[(0,i.jsx)("h2",{id:"faq-title",className:"mb-6 text-center font-display text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl",children:"Frequently Asked Questions"}),(0,i.jsxs)("p",{className:"mb-12 text-center text-xl tracking-tight text-slate-700",children:["If you can’t find what you’re looking for, please open an issue on our"," ",(0,i.jsx)("a",{href:"https://github.com/responsively-org/responsively-app",target:"_blank",className:"underline",children:"GitHub"}),"."]}),(0,i.jsx)("div",{className:"space-y-6",children:a.map((s,a)=>(0,i.jsxs)("div",{className:"rounded-2xl bg-white shadow-sm transition-shadow duration-300 hover:shadow-md",children:[(0,i.jsxs)("button",{className:"flex w-full items-center justify-between px-6 py-4 text-left",onClick:()=>t(a),children:[(0,i.jsx)("span",{className:"font-semibold text-slate-900",children:s.question}),e===a?(0,i.jsx)(v.Z,{className:"h-5 w-5 text-slate-500"}):(0,i.jsx)(A.Z,{className:"h-5 w-5 text-slate-500"})]}),e===a&&(0,i.jsx)("div",{className:"px-6 pb-4",children:(0,i.jsx)("p",{className:"text-slate-700",children:s.answer})})]},a))})]})})]})}var j=t(7623),y=t(8436),b=t(6879),N=t(1954),k=t(4556);let C=[[{name:"TestMu AI",logo:{src:"/_next/static/media/testmu.a5a8be46.svg",height:61,width:392,blurWidth:0,blurHeight:0},url:"https://www.testmuai.com/?utm_medium=sponsor&utm_source=responsively-app",width:224}],[{name:"Fun88",logo:{src:"/_next/static/media/fun88.86f90931.png",height:180,width:512,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAADCAMAAACZFr56AAAAElBMVEUApuAAq+cAp+EApeAAo9sAquXHeH08AAAABnRSTlNFuVEzFY8zyr2AAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAHklEQVR4nGNgYmZmZmBgYGFgZWUEARCTgZmJiYkFAAKeADCS+JxAAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:3},url:"https://global.fun88.com/?utm_medium=sponsor&utm_source=responsively-app",width:160}]],E=()=>(0,i.jsxs)("div",{children:[(0,i.jsx)("p",{className:"font-display text-base text-slate-900",children:"Supported by these amazing sponsors"}),(0,i.jsxs)("ul",{role:"list",className:"mt-8 flex flex-col items-center justify-center gap-8 sm:gap-x-0 sm:gap-y-10 lg:flex-row xl:flex-row xl:gap-x-12 xl:gap-y-0",children:[C.map((e,s)=>(0,i.jsx)("li",{children:(0,i.jsx)("ul",{role:"list",className:"flex flex-col items-center gap-y-8 sm:gap-x-12 sm:gap-y-0 md:flex-row",children:e.map(e=>(0,i.jsx)("li",{className:"flex rounded",children:(0,i.jsx)(u(),{href:e.url,target:"_blank","aria-label":`Visit ${e.name}`,children:(0,i.jsx)(r(),{src:e.logo,alt:e.name,unoptimized:!0,width:e.width})})},e.name))})},s)),(0,i.jsx)("li",{children:(0,i.jsx)(k.O,{href:"/sponsor",children:(0,i.jsxs)("div",{className:"flex h-16 items-center gap-2 rounded-md font-medium text-gray-500 hover:text-gray-800",children:[(0,i.jsx)(N.JO,{icon:"ion:shapes",className:"",fontSize:36,"aria-label":"Sponsor Us"}),"See your logo here"]})})})]})]});function z(){return(0,i.jsxs)(d.W,{className:"pb-16 pt-20 text-center lg:pt-32",children:[(0,i.jsxs)("h1",{className:"mx-auto font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl",children:["Master the Art of Crafting Responsive Web Apps like"," ",(0,i.jsxs)("span",{className:"relative whitespace-nowrap text-emerald-600",children:[(0,i.jsxs)("svg",{"aria-hidden":"true",width:"159",height:"11",viewBox:"0 0 159 11",xmlns:"http://www.w3.org/2000/svg",className:"absolute -bottom-7 left-0 h-[0.58em] w-full fill-emerald-300/70",preserveAspectRatio:"none",children:[(0,i.jsx)("g",{clipPath:"url(#clip0_6_2645)",children:(0,i.jsx)("path",{d:"M34.6052 2.23986C49.7085 1.91769 64.8201 1.71057 79.9316 1.61852C95.0431 1.52647 110.015 1.55716 125.052 1.7029C133.595 1.78728 142.145 1.90234 150.688 2.05576L151.847 0.483237C132.345 0.797741 112.851 1.18895 93.3577 1.65688C73.864 2.1248 54.3702 2.66943 34.8765 3.29844C23.9334 3.6513 12.9985 4.0195 2.05538 4.41838C1.41409 4.4414 0.452148 4.59481 0.0903915 5.1778C-0.246699 5.72243 0.378152 6.00625 0.896121 5.99091C21.212 5.50764 41.5443 5.46162 61.8685 5.8605C82.1926 6.25939 102.5 7.11085 122.783 8.39955C134.179 9.12062 145.566 9.98742 156.936 10.9923C157.553 11.046 158.572 10.7622 158.901 10.2329C159.263 9.65757 158.589 9.45813 158.096 9.41978C137.862 7.63247 117.579 6.2824 97.2794 5.37724C76.98 4.47208 56.6477 4.0195 36.3235 4.01183C24.9036 4.01183 13.4836 4.14223 2.06361 4.41838L0.904343 5.99091C20.3898 5.27752 39.8836 4.64851 59.3773 4.08854C78.871 3.53623 98.3647 3.05297 117.858 2.65409C128.802 2.43163 139.753 2.22452 150.696 2.04809C151.337 2.04042 152.307 1.86399 152.661 1.28868C153.015 0.713362 152.365 0.483237 151.855 0.475566C136.736 0.214757 121.632 0.0536689 106.521 0.0153147C91.4091 -0.0230396 76.4374 0.0459981 61.3998 0.237769C52.8574 0.345161 44.3068 0.490907 35.7645 0.675008C35.1232 0.69035 34.153 0.859108 33.7995 1.43442C33.4624 1.97905 34.0872 2.26287 34.6052 2.24753V2.23986Z"})}),(0,i.jsx)("defs",{children:(0,i.jsx)("clipPath",{id:"clip0_6_2645",children:(0,i.jsx)("rect",{width:"159",height:"11"})})})]}),(0,i.jsx)("span",{className:"relative",children:"a Pro!"})]})," "]}),(0,i.jsxs)("p",{className:"mx-auto mt-6 max-w-2xl text-lg tracking-tight text-slate-700",children:["A must-have DevTool for all web developers that will make your job easier. ",(0,i.jsx)("br",{}),"And it's free and"," ",(0,i.jsx)(u(),{href:"https://github.com/responsively-org/responsively-app",className:"inline-block rounded-lg font-medium text-slate-900 hover:text-slate-950",target:"_blank",children:"open source"})," ","too! \uD83C\uDF89"]}),(0,i.jsxs)("div",{className:"mt-10 flex flex-wrap justify-center gap-4",children:[(0,i.jsx)(c.z,{href:"/download",children:"Download Now"}),(0,i.jsx)(c.z,{href:"/download#beta",variant:"outline",children:"Try the beta"})]}),(0,i.jsx)("div",{className:"mt-24 md:mt-36 lg:mt-24",children:(0,i.jsx)(b._,{})}),(0,i.jsx)("div",{className:"mt-20",children:(0,i.jsx)(E,{})})]})}var O=t(9665),S=t(9965),D=t(6010),F=t(6571);let I=[{title:"All Devices at once",description:"See all devices at once, side-by-side. No more fiddling around with the devtools resizer. It's all there, at a glance.",image:F.Z},{title:"Mirrored Interactions",description:"Any click, scroll or navigation that you perform in one device will be replicated to all devices in real-time.",video:"https://responsively-org.github.io/responsively-app/assets/video/interactions-mirrored.mp4"},{title:"Quick Context Switching",description:"Save your favorite device combinations as Preview Suits and quickly switch between them when you're testing.",video:"https://responsively-org.github.io/responsively-app/assets/video/preview-suites.mp4"},{title:"Extensive Device Profiles",description:"Responsively comes with a large collection of device profiles out of the box. You can also add your own custom devices.",video:"https://responsively-org.github.io/responsively-app/assets/video/device-manager.mp4"}];function R(){let[e,s]=(0,g.useState)("horizontal");return(0,g.useEffect)(()=>{let e=window.matchMedia("(min-width: 1024px)");function t(e){let{matches:t}=e;s(t?"vertical":"horizontal")}return t(e),e.addEventListener("change",t),()=>{e.removeEventListener("change",t)}},[]),(0,i.jsxs)("section",{id:"features","aria-label":"Features for running your books",className:"relative overflow-hidden pb-28 pt-20 sm:py-32",children:[(0,i.jsx)(m.S,{}),(0,i.jsxs)(d.W,{className:"relative",children:[(0,i.jsxs)("div",{className:"max-w-2xl md:mx-auto md:text-center xl:max-w-none",children:[(0,i.jsx)("h2",{className:"font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl",children:"Elevate your web development experience with the comprehensive toolset!"}),(0,i.jsx)("p",{className:"mt-6 text-lg tracking-tight text-emerald-100",children:"Everything you need to create pixel-perfect, responsive websites with ease."})]}),(0,i.jsx)(S.O.Group,{as:"div",className:"mt-16 grid grid-cols-1 items-center gap-y-2 pt-10 sm:gap-y-6 md:mt-20 lg:grid-cols-12 lg:pt-0 padding-adjust",vertical:"vertical"===e,children:e=>{let{selectedIndex:s}=e;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("div",{className:"-mx-4 flex overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 md:overflow-x-auto md:px-2 lg:col-span-5",children:(0,i.jsx)(S.O.List,{className:"relative z-10 flex gap-x-4 whitespace-nowrap px-4 sm:mx-auto sm:px-0 lg:mx-0 lg:block lg:gap-x-0 lg:gap-y-1 lg:whitespace-normal whitespace-adjust ",children:I.map((e,t)=>(0,i.jsxs)("div",{className:(0,D.Z)("group relative rounded-full px-4 py-1 lg:rounded-l-xl lg:rou

1nded-r-none lg:p-6",s===t?"bg-white lg:bg-white/10 lg:ring-1 lg:ring-inset lg:ring-white/10":"hover:bg-white/10 lg:hover:bg-white/5"),children:[(0,i.jsx)("h3",{children:(0,i.jsxs)(S.O,{className:(0,D.Z)("font-display text-lg [&:not(:focus-visible)]:focus:outline-none font-adjust",s===t?"text-emerald-600 lg:text-white":"text-emerald-300 hover:text-white lg:text-white"),children:[(0,i.jsx)("span",{className:"absolute inset-0 rounded-full lg:rounded-l-xl lg:rounded-r-none"}),e.title]})}),(0,i.jsx)("p",{className:(0,D.Z)("mt-2 hidden text-sm lg:block",s===t?"text-white":"text-emerald-100 group-hover:text-white"),children:e.description})]},e.title))})}),(0,i.jsx)(S.O.Panels,{className:"lg:col-span-7",children:I.map(e=>(0,i.jsxs)(S.O.Panel,{unmount:!1,children:[(0,i.jsxs)("div",{className:"relative sm:px-6 lg:hidden",children:[(0,i.jsx)("div",{className:"absolute -inset-x-4 bottom-[-4.25rem] top-[-6.5rem] bg-white/10 ring-1 ring-inset ring-white/10 sm:inset-x-0 sm:rounded-t-xl"}),(0,i.jsx)("p",{className:"relative mx-auto max-w-2xl text-base text-white sm:text-center",children:e.description})]}),(0,i.jsx)(_,{feature:e})]},e.title))})]})}})]})]})}let _=(0,g.memo)(function(e){let{feature:s}=e,t=(0,g.useRef)(),a=(0,g.useRef)(!1),[l,n]=(0,g.useState)(!0),{isIntersecting:o}=(0,O.Z)(t);o&&(a.current=!0),(0,g.useEffect)(()=>{a.current&&n(!1)},[o]);let c=()=>{n(!1)};return(0,i.jsx)("div",{className:"3xl:w-[67.8125rem] mt-10 w-[45rem] overflow-hidden rounded-xl bg-slate-50 shadow-xl shadow-emerald-900/20 sm:w-auto lg:mt-0 lg:w-[63.8125rem]",ref:t,children:a.current&&(l?(0,i.jsx)("div",{className:"video-skeleton h-[45rem]",children:(0,i.jsxs)("div",{className:"loadingContent flex h-full flex-col items-center justify-center",children:[(0,i.jsx)("div",{className:"loadingSpinner",children:(0,i.jsxs)("svg",{className:"h-16 w-16 animate-spin text-black",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[(0,i.jsx)("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),(0,i.jsx)("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V2.83a1 1 0 012 0V4a8 8 0 018 8h2.83a1 1 0 010 2H20a8 8 0 01-8 8v2.83a1 1 0 01-2 0V20a8 8 0 01-8-8H4a1 1 0 010-2H2.83a1 1 0 010-2H4z"})]})}

1),(0,i.jsx)("div",{className:"loadingMessage my-2 w-1/2 rounded-lg p-5 text-center",children:(0,i.jsx)("p",{className:"animate-pulse text-3xl font-bold uppercase text-emerald-500",children:"Loading"})})]})}):s.video?(0,i.jsxs)("video",{autoPlay:!0,loop:!0,muted:!0,playsInline:!0,onLoadedData:c,name:"media",sizes:"(min-width: 1024px) 67.8125rem, (min-width: 640px) 100vw, 45rem",children:[(0,i.jsx)("source",{src:s.video,type:"video/mp4"})," // Assuming MP4 type"]}):(0,i.jsx)(r(),{className:"w-full",src:s.image,alt:"Feature visual",priority:!0,sizes:"(min-width: 1024px) 67.8125rem, (min-width: 640px) 100vw, 45rem"}))})}),B=e=>{let{children:s}=e;return(0,i.jsx)("span",{className:"rounded-md bg-gray-200 px-2 py-1",children:s})},P=[{name:"One inspector for all devices",summary:"Stay on top of your design with the Unified Inspector.",description:(0,i.jsxs)(i.Fragment,{children:["The Unified Inspector allows you to inspect elements across all devices at once. Just press"," ",(0,i.jsx)(B,{children:"Cmd/Ctrl"})," + ",(0,i.jsx)(B,{children:"I"})," to activate it and hover over any element to see its details."]}),video:"https://responsively-org.github.io/responsively-app/assets/video/unified-inspector.mp4",icon:(0,i.jsx)(N.JO,{icon:"ph:binoculars",fontSize:30})},{name:"One Click Screenshots",summary:"Take full page screenshots of all devices at once with a single click.",description:"You can also take screenshots of individual devices by clicking on the camera icon in the device toolbar. And a quick screenshot of the viewport too.",video:"https://responsively-org.github.io/responsively-app/assets/video/screenshot.mp4",icon:(0,i.jsx)(N.JO,{icon:"ph:camera",fontSize:30})},{name:"Basic Browser features",summary:"In addition to the above, you get all the basic browser features.",description:"You get all the basic browser features like cookie management, local storage, session storage, bookmarks, etc. You can also use the devtools as in any browser.",video:"https://responsively-org.github.io/responsively-app/assets/video/other-features.mp4",icon:(0,i.jsx)(N.JO,{icon:"ph:browser",fontSize:30})}];function H(e){let{feature:s,isActive:t,className:a,...l}=e;return(0,i.jsxs)("article",{className:(0,D.Z)(a,!t&&"opacity-75 hover:opacity-100"),...l,children:[(0,i.jsx)("div",{className:(0,D.Z)("w-9 rounded-lg",t?"text-emerald-600":""),children:s.icon}),(0,i.jsx)("h3",{className:(0,D.Z)("mt-6 text-sm font-medium",t?"text-emerald-600":"text-slate-600"),children:s.name}),(0,i.jsx)("p",{className:"mt-2 font-display text-xl text-slate-900",children:s.summary}),(0,i.jsx)("p",{className:"mt-4 text-sm text-slate-600",children:s.description})]})}function L(){return(0,i.jsx)("div",{className:"-mx-4 mt-20 flex flex-col gap-y-10 overflow-hidden px-4 sm:-mx-6 sm:px-6 lg:hidden",children:P.map(e=>(0,i.jsxs)("div",{children:[(0,i.jsx)(H,{feature:e,className:"mx-auto max-w-2xl",isActive:!0}),(0,i.jsxs)("div",{className:"relative mt-10 pb-10",children:[(0,i.jsx)("div",{className:"absolute -inset-x-4 bottom-0 top-8 bg-slate-200 sm:-inset-x-6"}),(0,i.jsx)("div",{className:"relative mx-auto w-[52.75rem] overflow-hidden rounded-xl bg-white shadow-lg shadow-slate-900/5 ring-1 ring-slate-500/10",children:(0,i.jsxs)("figure",{children:[(0,i.jsx)("video",{autoPlay:!0,loop:!0,muted:!0,playsInline:!0,name:"media",sizes:"52.75rem",className:"w-full",children:(0,i.jsx)("source",{src:e.video})}),(0,i.jsx)("figcaption",{className:"sr-only",children:e.name})]})})]})]},e.name))})}function M(){return(0,i.jsx)(S.O.Group,{as:"div",className:"hidden lg:mt-20 lg:block",children:e=>{let{selectedIndex:s}=e;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(S.O.List,{className:"grid grid-cols-3 gap-x-8",children:P.map((e,t)=>(0,i.jsx)(H,{feature:{...e,name:(0,i.jsxs)(S.O,{className:"[&:not(:focus-visible)]:focus:outline-none",children:[(0,i.jsx)("span",{className:"absolute inset-0"}),e.name]})},isActive:t===s,className:"relative"},e.name))}),(0,i.jsxs)(S.O.Panels,{className:"relative mt-20 overflow-hidden rounded-4xl bg-slate-200 px-14 py-16 xl:px-16",children:[(0,i.jsx)("div",{className:"-mx-5 flex",children:P.map((e,t)=>(0,i.jsx)(S.O.Panel,{static:!0,className:(0,D.Z)("px-5 transition duration-500 ease-in-out [&:not(:focus-visible)]:focus:outline-none",t!==s&&"opacity-60"),style:{transform:`translateX(-${100*s}%)`}

1,"aria-hidden":t!==s,children:(0,i.jsx)(W,{feature:e})},e.name))}),(0,i.jsx)("div",{className:"pointer-events-none absolute inset-0 rounded-4xl ring-1 ring-inset ring-slate-900/10"})]})]})}})}let W=(0,g.memo)(function(e){let{feature:s}=e,t=(0,g.useRef)(),a=(0,g.useRef)(!1),{isIntersecting:l}=(0,O.Z)(t);return l&&(a.current=!0),(0,i.jsx)("div",{className:"w-[52.75rem] overflow-hidden rounded-xl bg-white shadow-lg shadow-slate-900/5 ring-1 ring-slate-500/10",ref:t,children:a.current&&(0,i.jsx)("video",{autoPlay:!0,loop:!0,muted:!0,playsInline:!0,name:"media",sizes:"52.75rem",children:(0,i.jsx)("source",{src:s.video})})})});function q(){return(0,i.jsx)("section",{id:"secondary-features","aria-label":"Features for simplifying everyday business tasks",className:"pb-14 pt-20 sm:pb-20 sm:pt-32 lg:pb-32",children:(0,i.jsxs)(d.W,{children:[(0,i.jsxs)("header",{className:"mx-auto max-w-2xl md:text-center",children:[(0,i.jsx)("h2",{className:"font-display text-3xl tracking-tight text-slate-900 sm:text-4xl",children:"Not to miss the Nifty Utilities"}),(0,i.jsx)("p",{className:"mt-4 text-lg tracking-tight text-slate-700",children:"Embrace the power of our Versatile Utility Collection to make your life easier."})]}),(0,i.jsxs)("div",{children:[(0,i.jsx)(L,{}),(0,i.jsx)(M,{})]})]})})}var U=t(2405);class Q extends g.Component{static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){console.error(`[Testimonials] Tweet ${this.props.tweetId} failed to render:`,e)}render(){return this.state.hasError?null:this.props.children}constructor(...e){super(...e),this.state={hasError:!1}}}let T=["1278606838070534149","1264805970649194502","1264935778557341696","1299048282069467136","1298704840718196738","1351174243086708746","1618231342411698177","1288448878291935232","1316766116841103364","1265940953338130432","1273854712677314561","1681099100366708736","1299887174838517763","1361705139283898374","1306880524766638083","1264291435173629958","1394871939605348352","1588130688452157440","1660872526434652162","1645844479390384132","1696537206347952248"];function Z(){let[e,s]=(0,g.useState)(null),[t,a]=(0,g.useState)(!1);(0,g.useEffect)(()=>{let e=()=>{s(window.innerWidth<768),window.innerWidth<768&&a(!1)};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);let l=e?t?T.length:8:T.length,n=()=>{a(e=>!e)};return(0,i.jsxs)("section",{id:"testimonials","aria-label":"What our customers are saying",className:"bg-slate-50 py-20 sm:py-32",children:[(0,i.jsx)(d.W,{children:(0,i.jsxs)("div",{className:"mx-auto max-w-2xl md:text-center",children:[(0,i.jsx)("h2",{className:"font-display text-3xl tracking-tight text-slate-900 sm:text-4xl",children:"Loved by developers worldwide."}),(0,i.jsx)("p",{className:"mt-4 text-lg tracking-tight text-slate-700",children:"Here’s what some of our users have to say about Responsively."})]})}),(0,i.jsxs)("div",{className:"mx-auto mt-16 max-w-2xl px-8 sm:px-8 lg:mt-20 lg:max-w-none",children:[(0,i.jsx)("div",{className:"masonry sm:columns-1 md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 column-gap-6",children:T.slice(0,l).map(e=>(0,i.jsx)("div",{className:"break-inside-avoid",children:(0,i.jsx)(Q,{tweetId:e,children:(0,i.jsx)(U.t,{id:e})})},e))}),e&&(0,i.jsx)("div",{className:"mt-8 text-center",children:(0,i.jsx)(c.z,{variant:"solid",color:"green",onClick:n,children:t?"Show Less":"Show More"})})]})]})}function J(){return(0,i.jsxs)("div",{className:"relative",children:[(0,i.jsx)(r(),{className:"absolute top-0 w-full",src:o,alt:"",style:{objectFit:"cover",objectPosition:"center"},unoptimized:!0,priority:!0}),(0,i.jsxs)(l(),{children:[(0,i.jsx)("title",{children:"Responsively App - A web developer's browser"}),(0,i.jsx)("meta",{name:"description",content:"A dev-tool that aids faster and precise responsive web development."}),(0,i.jsx)("link",{rel:"canonical",href:"https://responsively.app/"})]}),(0,i.jsxs)("main",{className:"relative",children:[(0,i.jsx)("div",{className:"relative",children:(0,i.jsxs)("div",{className:"relative z-10",children:[(0,i.jsx)(y.h,{}),(0,i.jsx)(z,{})]})}),(0,i.jsx)(R,{}),(0,i.jsx)(q,{}),(0,i.jsx)(h,{}),(0,i.jsx)(Z,{}),(0,i.jsx)(w,{})]}),(0,i.jsx)(j.$,{})]})}}},function(e){e.O(0,[693,675,578,557,774,888,179],function(){return e(e.s=8312)}),_N_E=e.O()}]);