1import{_ as A}from"./D2uuHzgA.js";import{_ as S,a as w,b as j}from"./C3pTxCIE.js";import{_ as T}from"./CEcizN14.js";import{_ as K}from"./B1B6Z2F6.js";import{_ as q}from"./C7zqJcEO.js";import{_ as Y,a as E,b as $,c as W,d as N,e as O,f as u,g,h as v,i as h,j as b,k as R,l as G,m as f,n as y,o as C,p as x,q as k,r as _,s as X,t as J,u as Q,v as tt,w as et,x as ot,y as st,z as at,A as it,B as lt}from"./4QgqAnLD.js";import{z as nt,u as dt,c as F,b as l,a as t,d as a,A as o,F as rt,m as pt,w as B,h as U,o as H,p as ct,t as mt}from"./Bb4sYsRT.js";import{u as wt}from"./DRRMlKgk.js";import"./CysA9DI-.js";const ut=nt("/media/products/universal-ui-kit-web/ill-examples.webp"),gt={id:"easy-to-start"},vt={class:"container p-container wow fadeInUp","data-wow-delay":"0.2s"},ht={class:"row row-block-padding"},bt={class:"col-lg-5 col-12 wow fadeInUp","data-wow-delay":"0.2s"},ft={class:"vertical-center"},yt=["href"],Ct={class:"row row-block-padding",style:{"padding-bottom":"0 !important"}},xt={class:"col-lg-5 offset-lg-1 col-12 wow fadeInUp","data-wow-delay":"0.2s"},kt={class:"vertical-center"},_t=["href"],Ft={class:"row row-block-padding"},Bt={class:"col-lg-6 offset-lg-1 col-12"},Ut={class:"row",style:{"padding-top":"5px"}},Ht=["data-wow-delay"],Vt={class:"rounded-top d-flex align-items-center justify-content-center",style:{background:"var(--gray-05)",height:"130px",padding:"16px"}},Mt=["src","alt"],It={class:"card-body component-card-body-mini rounded-bottom",style:{"padding-top":"0",background:"var(--gray-05)"}},Lt={class:"row"},Zt={class:"col text-center"},zt={class:"row row-block-padding"},Pt={class:"col-lg-5 offset-lg-1 col-12 wow fadeInUp","data-wow-delay":"0.2s"},Dt={class:"vertical-center"},At=["href"],St={class:"row row-block-padding",style:{"padding-bottom":"0 !important"}},jt={class:"col-lg-5 col-12 wow fadeInUp","data-wow-delay":"0.2s"},Tt={class:"vertical-center"},Kt=["href"],qt={id:"faqs",class:"bg-white"},Yt={class:"container"},Et={class:"row"},$t={class:"col-lg-8 offset-lg-2 col-md-10 offset-md-1 col-12 mb-4",style:{"text-align":"center"}},Wt={class:"bg-white",style:{padding:"80px 0"}},Nt={class:"container"},Ot={class:"row"},Rt={class:"col-lg-12",style:{"text-align":"center"}},p="Universal UI Kit",V="v4.2",c="Powerful Figma UI Kit for creating landing pages, websites and dashboards",le={__name:"index",setup(Gt){dt({script:[{src:"https://cdn.paritydeals.com/banner.js"}]}),wt({title:`${p} | 123done`,description:c,keywords:"ui kit, design system, template, component, figma, 123done",ogTitle:`${p} | 123done`,ogDescription:c,ogImage:"https://123d.one/media/meta/products/universal-ui-kit-web.png",twitterTitle:`${p} | 123done`,twitterDescription:c,twitterImage:"https://123d.one/media/meta/products/universal-ui-kit-web.png"});const i={individual:{oneYearUpdates:"https://123done.lemonsqueezy.com/checkout/buy/9c9b8646-b060-46e9-9bd4-a3e10eec7d1b",lifetimeUpdates:"https://123done.lemonsqueezy.com/checkout/buy/c52b0b04-39f6-40e9-a4c8-1d66deb4541c"},team:{oneYearUpdates:"https://123done.lemonsqueezy.com/checkout/buy/5d485896-1689-4d18-b123-f851464c8fd7",lifetimeUpdates:"https://123done.lemonsqueezy.com/checkout/buy/62f9f6ce-b54b-4492-8356-5dbf428c4d9e"}},s={individual:{oneYearUpdates:{price:79,thenPrice:39},lifetimeUpdates:{price:119},customService:{price:2999}},team:{oneYearUpdates:{price:237,thenPrice:117},lifetimeUpdates:{price:357},customService:{price:2999}}},d={default:"https://www.figma.com/design/35mR4pe1HHX3PYseh7WBn0/Universal-UI-Kit-v4.2-%7C-Preview?node-id=1871-2466&t=H9DsFhUiIDMoR94V-1",sections:"https://www.figma.com/design/35mR4pe1HHX3PYseh7WBn0/Universal-UI-Kit-v4.2-%7C-Preview?node-id=2639-39814&t=H9DsFhUiIDMoR94V-1",templates:"https://www.figma.com/design/35mR4pe1HHX3PYseh7WBn0/Universal-UI-Kit-v4.2-%7C-Preview?node-id=2670-299738&t=H9DsFhUiIDMoR94V-1"},M=[{component_image:"buttons.webp",component_name:"Button",component_link:"buttons/button",component_wow_delay:"0.4s"},{component_image:"text-input.webp",component_name:"Text Input",component_link:"input-and-selection/text-input",component_wow_delay:"0.5s"},{component_image:"checkbox.webp",component_name:"Checkbox",component_link:"input-and-selection/checkbox",component_wow_delay:"0.6s"},{component_image:"dropdown.webp",component_name:"Dropdown",component_link:"input-and-selection/dropdown",component_wow_delay:"0.7s"},{component_image:"toggle-switch.webp",component_name:"Toggle Switch",component_link:"input-and-selection/toggle-switch",component_class:"d-none d-md-block",component_wow_delay:"0.8s"},{component_image:"date-picker.webp",component_name:"Date Picker",component_link:"input-and-selection/date-picker",component_class:"d-none d-md-block",component_wow_delay:"0.9s"},{component_image:"tabs.webp",component_name:"Tabs",component_link:"input-and-selection/tabs",component_class:"d-none d-md-block",component_wow_delay:"1.0s"},{component_image:"notification.webp",component_name:"Notification",component_link:"messaging/notification",component_class:"d-none d-md-block",component_wow_delay:"1.1s"},{component_image:"tag.webp",component_name:"Tag",component_link:"indicators-and-status/tag",component_class:"d-none d-md-block",component_wow_delay:"1.2s"}];return(r,e)=>{const I=A,L=j,m=T,Z=S,z=K,P=q;return H(),F("div",null,[l(I,{product:p,version:V,title:"The most Universal Figma UI Kit",description:"Unlock the potential of a powerful UI Kit for designing landing pages, websites and dashboards in Figma. Save time and kickstart any project with ease.","purchase-link":i.individual.oneYearUpdates,price:s.individual.oneYearUpdates.price,"old-price":s.individual.oneYearUpdates.oldPrice,"preview-link":d.default,"poster-src":"/media/products/universal-ui-kit-web/universal-ui-kit-web-poster.webp","video-preview-src":"/media/products/universal-ui-kit-web/universal-ui-kit-web-teaser.mp4","video-src":"https://www.youtube.com/embed/Ox8C5b89-qI?si=xc1azpXWV8YYa3nL","video-btn-text":"Watch","video-timer":"0:33",features:[{text:"Components",number:"25"},{text:"Sections",number:"100+"},{text:"Templates",number:"50+"}],"nav-items":[{title:"Overview",link:"/ui-kit"},{title:"Components",link:"/ui-kit/components"},{title:"Updates",link:"/ui-kit/updates"}]},null,8,["purchase-link","price","old-price","preview-link"]),l(L,{title:"Universal UI Kit",badge:"v4.1",link:i.individual.oneYearUpdates,menu:[{title:"How to use",href:"#how-to-use"}
1,{title:"How it works",href:"#how-it-work"},{title:"Create",href:"#easy-to-start"},{title:"Customize",href:"#modification"},{title:"Present",href:"#present"},{title:"Pricing",href:"#pricing"}]},null,8,["link"]),e[20]||(e[20]=t("section",{id:"how-to-use",style:{background:"#000000"}},[t("div",{class:"container p-container wow fadeInUp","data-wow-delay":"0.2s"},[t("div",{class:"row"},[t("div",{class:"col-lg-8 offset-lg-2 col-12 mb-4",style:{"text-align":"center"}},[t("span",{class:"badge badge-info"},"How to use"),t("h3",{class:"text-white"}," From creation to presentation ")])]),t("div",{class:"row"},[t("div",{class:"col-12"},[t("ul",{id:"pills-tab",class:"nav nav-pills mb-3 justify-content-center",role:"tablist"},[t("li",null,[t("span",{class:"d-block",style:{"margin-right":"8px",padding:"0.5rem 0","line-height":"30px"}},"Start with")]),t("li",{class:"nav-item",role:"presentation"},[t("a",{id:"pills-01-tab",class:"nav-link active","data-toggle":"pill","data-target":"#pills-01",type:"button",role:"tab","aria-controls":"pills-01","aria-selected":"true"},[t("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[t("path",{d:"M6 2H18V22H6V2Z",fill:"#84E2F9"}),t("path",{d:"M2 4H4V20H2V4Z",fill:"#84E2F9"}),t("path",{d:"M22 4H20V20H22V4Z",fill:"#84E2F9"})]),a(" Templates ")])]),t("li",{class:"nav-item",role:"presentation"},[t("a",{id:"pills-02-tab",class:"nav-link","data-toggle":"pill","data-target":"#pills-02",type:"button",role:"tab","aria-controls":"pills-02","aria-selected":"false"},[t("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M22 2H2V22H22V2ZM4 12H20V20H4V12Z",fill:"#A8EF5B"})]),a(" Sections ")])]),t("li",{class:"nav-item",role:"presentation"},[t("a",{id:"pills-03-tab",class:"nav-link","data-toggle":"pill","data-target":"#pills-03",type:"button",role:"tab","aria-controls":"pills-03","aria-selected":"false"},[t("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[t("path",{d:"M16.4999 5.5L11.9999 1L7.49993 5.5L11.9999 9.99992L16.4999 5.5Z",fill:"#8D4BF6"}),t("path",{d:"M9.99999 12.0001L5.49997 7.50011L1 12.0001L5.49999 16.5001L9.99999 12.0001Z",fill:"#8D4BF6"}),t("path",{d:"M18.5 7.50008L23 12.0001L18.5 16.5001L14 12.0001L18.5 7.50008Z",fill:"#8D4BF6"}),t("path",{d:"M16.5 18.4999L12 13.9999L7.50001 18.4999L12 23.0001L16.5 18.4999Z",fill:"#8D4BF6"})]),a(" Components ")])]),t("li",{class:"nav-item"},[t("span",{class:"d-block",style:{color:"var(--gray-60)",margin:"0 8px",padding:"0.5rem 0","line-height":"30px",opacity:"0.5"}},"|")]),t("li",{class:"nav-item",role:"presentation"},[t("a",{id:"pills-04-tab",class:"nav-link","data-toggle":"pill","data-target":"#pills-04",type:"button",role:"tab","aria-controls":"pills-04","aria-selected":"false"},[t("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[t("path",{d:"M8 8C9.65685 8 11 6.65685 11 5C11 3.34315 9.65685 2 8 2C6.69378 2 5.58254 2.83481 5.17071 4H2V6H5.17071C5.58254 7.16519 6.69378 8 8 8Z",fill:"#F9DC4A"}),t("path",{d:"M18.8293 13C18.4175 14.1652 17.3062 15 16 15C14.3431 15 13 13.6569 13 12C13 10.3431 14.3431 9 16 9C17.3062 9 18.4175 9.83481 18.8293 11H22V13H18.8293Z",fill:"#F9DC4A"}),t("path",{d:"M10 22C11.6569 22 13 20.6569 13 19C13 17.3431 11.6569 16 10 16C8.69378 16 7.58254 16.8348 7.17071 18H2V20H7.17071C7.58254 21.1652 8.69378 22 10 22Z",fill:"#F9DC4A"}),t("path",{d:"M2 11H10V13H2V11Z",fill:"#F9DC4A"}),t("path",{d:"M14 4H22V6H14V4Z",fill:"#F9DC4A"}),t("path",{d:"M16 18H22V20H16V18Z",fill:"#F9DC4A"})]),a(" Customize ")])]),t("li",{class:"nav-item"},[t("span",{class:"d-block",style:{color:"var(--gray-60)",margin:"0 8px",padding:"0.5rem 0","line-height":"30px",opacity:"0.5"}},"|")]),t("li",{class:"nav-item",role:"presentation"},[t("a",{id:"pills-05-tab",class:"nav-link","data-toggle":"pill","data-target":"#pills-05",type:"button",role:"tab","aria-controls":"pills-05","aria-selected":"false"},[t("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[t("path",{d:"M3 1L21 12L3 23V1Z",fill:"#3E67FF"})]),a(" Present ")])])]),t("div",{id:"pills-tabContent",class:"tab-content"},[t("div",{id:"pills-01",class:"tab-pane fade show active",role:"tabpanel","aria-labelledby":"pills-01-tab"},[t("div",{style:{"padding-top":"56.25%",position:"relative",overflow:"hidden"}},[t("iframe",{frameborder:"0",allowfullscreen:"",scrolling:"no",allow:"autoplay;fullscreen",src:"https://onelineplayer.com/player.html?autoplay=true&autopause=false&muted=true&loop=true&url=https%3A%2F%2F123d.one%2Fmedia%2Fproducts%2Funiversal-ui-kit-web%2Fhow-to-use-templates.mp4&poster=https%3A%2F%2F123d.one%2Fmedia%2Fproducts%2Funiversal-ui-kit-web%2Fhow-to-use-templates.webp&time=true&progressBar=true&overlay=true&muteButton=false&fullscreenButton=true&style=light&quality=auto&playButton=true",style:{position:"absolute",height:"100%",width:"100%",left:"0px",top:"0px"}})])]),t("div",{id:"pills-02",class:"tab-pane fade",role:"tabpanel","aria-labelledby":"pills-02-tab"},[t("div",{style:{"padding-top":"56.25%",position:"relative",overflow:"hidden"}},[t("iframe",{frameborder:"0",allowfullscreen:"",scrolling:"no",allow:"autoplay;fullscreen",src:"https://onelineplayer.com/player.html?autoplay=true&autopause=false&muted=true&loop=true&url=https%3A%2F%2F123d.one%2Fmedia%2Fproducts%2Funiversal-ui-kit-web%2Fhow-to-use-sections.mp4&poster=https%3A%2F%2F123d.one%2Fmedia%2Fproducts%2Funiversal-ui-kit-web%2Fhow-to-use-sections.webp&time=true&progressBar=true&overlay=true&muteButton=false&fullscreenButton=true&style=light&quality=auto&playButton=true",style:{position:"absolute",height:"100%",width:"100%",left:"0px",top:"0px"}})])]),t("div",{id:"pills-03",class:"tab-pane fade",role:"tabpanel","aria-labelledby":"pills-03-tab"},[t("div",{style:{"padding-top":"56.25%",position:"relative",overflow:"hidden"}},[t("iframe",{frameborder:"0",allowfullscreen:"",scrolling:"no",allow:"autoplay;fullscreen",src:"https://onelineplayer.com/player.html?autoplay=true&autopause=false&muted=true&loop=true&url=https%3A%2F%2F123d.one%2Fmedia%2Fproducts%2Funiversal-ui-kit-web%2Fhow-to-use-components.mp4&poster=https%3A%2F%2F123d.one%2Fmedia%2Fproducts%2Funiversal-ui-kit-web%2Fhow-to-use-components.webp&time=true&progressBar=true&overlay=true&muteButton=false&fullscreenButton=true&style=light&quality=auto&playButton=true",style:{position:"absolute",height:"100%",width:"100%",left:"0px",top:"0px"}})])]),t("div",{id:"pills-04",class:"tab-pane fade",role:"tabpanel","aria-labelledby":"pills-04-tab"},[t("div",{style:{"padding-top":"56.25%",position:"relative",overflow:"hidden"}},[t("iframe",{frameborder:"0",allowfullscreen:"",scrolling:"no",allow:"autoplay;fullscreen",src:"https://onelineplayer.com/player.html?autoplay=true&autopause=false&muted=true&loop=true&url=https%3A%2F%2F123d.one%2Fmedia%2Fproducts%2Funiversal-ui-kit-web%2Fhow-to-use-customize.mp4&poster=https%3A%2F%2F123d.one%2Fmedia%2Fproducts%2Funiversal-ui-kit-web%2Fhow-to-use-customize.webp&time=true&progressBar=true&overlay=true&muteButton=false&fullscreenButton=true&style=light&quality=auto&playButton=true",style:{position:"absolute",height:"100%",width:"100%",left:"0px",top:"0px"}})])]),t("div",{id:"pills-05",class:"tab-pane fade",role:"tabpanel","aria-labelledby":"pills-05-tab"},[t("div",{style:{"padding-top":"56.25%",position:"relative",overflow:"hidden"}},[t("iframe",{frameborder:"0",allowfullscreen:"",scrolling:"no",allow:"autoplay;fullscreen",src:"https://onelineplayer.com/player.html?autoplay=true&autopause=false&muted=true&loop=true&url=https%3A%2F%2F123d.one%2Fmedia%2Fproducts%2Funiversal-ui-kit-web%2Fhow-to-use-present.mp4&poster=https%3A%2F%2F123d.one%2Fmedia%2Fproducts%2Funiversal-ui-kit-web%2Fhow-to-use-present.webp&time=true&progressBar=true&overlay=true&muteButton=false&fullscreenButton=true&style=light&quality=auto&playButton=true",style:{position:"absolute",height:"100%",width:"100%",left:"0px",top:"0px"}})])])])])])])],-1)),e[21]||(e[21]=o('<section id="how-it-work" class="bg-white"><div class="container p-container wow fadeInUp" data-wow-delay="0.2s"><div class="row"><div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1 col-12" style="text-align:center;"><span class="badge badge-info badge-dark">How it works</span>
1<h3 class="text-dark"> Design like never before. 10x faster </h3><p class="big"> Have a fresh look on the design process and make your work much easier. </p></div></div><div class="row"><div class="col-lg-4 col-12 wow fadeInUp" data-wow-delay="0.2s"><div class="p-3 rounded"><div class="ml-n3 mr-n3"><div class="rounded d-flex align-items-center justify-content-center" style="background:var(--gray-05);height:208px;margin-bottom:16px;"><span class="position-absolute rounded-circle text-white text-center small" style="height:24px;width:24px;top:32px;left:32px;background:var(--gray-110);padding-top:3px;"> 1 </span><img src="'+Y+'" alt="Drag and drop the button component" height="88px"></div><h5 class="text-dark mt-4"> Getting started is easy </h5><p class="mb-4"> Drag and drop the component or section you need from an extensive library, or start with a ready-made template. </p><div class="text-nowrap text-dark roboto-mono small badge-tag-white"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.4999 5.5L11.9999 1L7.49993 5.5L11.9999 9.99992L16.4999 5.5Z" fill="#0B0B0F"></path><path d="M9.99999 12.0001L5.49997 7.50011L1 12.0001L5.49999 16.5001L9.99999 12.0001Z" fill="#0B0B0F"></path><path d="M18.5 7.50008L23 12.0001L18.5 16.5001L14 12.0001L18.5 7.50008Z" fill="#0B0B0F"></path><path d="M16.5 18.4999L12 13.9999L7.50001 18.4999L12 23.0001L16.5 18.4999Z" fill="#0B0B0F"></path></svg> Components </div><div class="text-nowrap text-dark roboto-mono small badge-tag-white"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 2H2V22H22V2ZM4 12H20V20H4V12Z" fill="#0B0B0F"></path></svg> Sections </div><div class="text-nowrap text-dark roboto-mono small badge-tag-white"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 2H18V22H6V2Z" fill="#0B0B0F"></path><path d="M2 4H4V20H2V4Z" fill="#0B0B0F"></path><path d="M22 4H20V20H22V4Z" fill="#0B0B0F"></path></svg> Templates </div></div></div></div><div class="col-lg-4 col-12 wow fadeInUp" data-wow-delay="0.4s"><div class="p-3 rounded"><div class="ml-n3 mr-n3"><div class="rounded d-flex align-items-center justify-content-center" style="background:var(--gray-05);height:208px;margin-bottom:16px;"><span class="position-absolute small text-white rounded-circle text-center" style="height:24px;width:24px;top:32px;left:32px;background:var(--gray-110);padding-top:3px;"> 2 </span><img src="'+E+'" alt="Customization the button component" height="88px"></div><h5 class="text-dark mt-4"> Flexible customization </h5><p class="mb-4"> Customize components or sections to fit your needs. Just a few clicks to resize, change type or switch to a dark theme. </p><div class="text-nowrap text-dark roboto-mono small mr-2 badge-tag-white"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 20V4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z" fill="#12131A"></path></svg> Light and Dark </div><div class="text-nowrap text-dark roboto-mono small mr-2 badge-tag-white"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.14286 5C4.51167 5 4 5.44772 4 6C4 6.55228 4.51168 7 5.14286 7H18.8571C19.4883 7 20 6.55228 20 6C20 5.44772 19.4883 5 18.8571 5H5.14286Z" fill="#12131A"></path><path d="M4 12C4 11.4477 4.51167 11 5.14286 11H18.8571C19.4883 11 20 11.4477 20 12C20 12.5523 19.4883 13 18.8571 13H5.14286C4.51168 13 4 12.5523 4 12Z" fill="#12131A"></path><path d="M5.14286 17C4.51167 17 4 17.4477 4 18C4 18.5523 4.51168 19 5.14286 19H18.8571C19.4883 19 20 18.5523 20 18C20 17.4477 19.4883 17 18.8571 17H5.14286Z" fill="#12131A"></path></svg> Type </div><div class="text-nowrap text-dark roboto-mono small badge-tag-white"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.7071 7.70701C16.3166 8.09754 15.6834 8.09754 15.2929 7.70701L13 5.41412V18.5859L15.2929 16.293C15.6834 15.9025 16.3166 15.9025 16.7071 16.293C17.0976 16.6835 17.0976 17.3167 16.7071 17.7072L12 22.4143L7.29289 17.7072C6.90237 17.3167 6.90237 16.6835 7.29289 16.293C7.68342 15.9025 8.31658 15.9025 8.70711 16.293L11 18.5859V5.41412L8.70711 7.70701C8.31658 8.09754 7.68342 8.09754 7.29289 7.70701C6.90237 7.31649 6.90237 6.68332 7.29289 6.2928L12 1.58569L16.7071 6.2928C17.0976 6.68332 17.0976 7.31649 16.7071 7.70701Z" fill="#12131A"></path></svg> Size </div><div class="text-nowrap text-dark roboto-mono small badge-tag-white"> and many more </div></div></div></div><div class="col-lg-4 col-12 wow fadeInUp" data-wow-delay="0.6s"><div class="p-3 rounded"><div class="ml-n3 mr-n3"><div class="rounded d-flex align-items-center justify-content-center" style="background:var(--gray-05);height:208px;margin-bottom:16px;"><span class="position-absolute rounded-circle text-white small text-center" style="height:24px;width:24px;top:32px;left:32px;background:var(--gray-110);padding-top:3px;"> 3 </span><img src="'+$+'" alt="Present the button component" height="88px"></div><h5 class="text-dark mt-4"> Present like a Pro </h5><p class="mb-4"> All the components are interactive, making your prototype look dynamic and similar to the final product. </p><div class="text-nowrap text-dark roboto-mono small badge-tag-white"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 3C11 2.44772 11.4477 2 12 2C12.5523 2 13 2.44772 13 3V8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8V3Z" fill="#0B0B0F"></path><path d="M9 12C9 11.4477 8.55228 11 8 11H3C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13H8C8.55228 13 9 12.5523 9 12Z" fill="#0B0B0F"></path><path d="M22 12C22 11.4477 21.5523 11 21 11H16C15.4477 11 15 11.4477 15 12C15 12.5523 15.4477 13 16 13H21C21.5523 13 22 12.5523 22 12Z" fill="#0B0B0F"></path><path d="M12 15C11.4477 15 11 15.4477 11 16V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V16C13 15.4477 12.5523 15 12 15Z" fill="#0B0B0F"></path><path d="M19.0712 17.6569C19.4617 18.0474 19.4617 18.6806 19.0712 19.0711C18.6807 19.4616 18.0475 19.4616 17.657 19.0711L14.1215 15.5356C13.7309 15.1451 13.7309 14.5119 14.1215 14.1214C14.512 13.7308 15.1452 13.7308 15.5357 14.1214L19.0712 17.6569Z" fill="#0B0B0F"></path><path d="M9.87883 9.87874C10.2694 9.48821 10.2694 8.85505 9.87883 8.46452L6.3433 4.92899C5.95277 4.53847 5.31961 4.53847 4.92908 4.92899C4.53856 5.31951 4.53856 5.95268 4.92908 6.3432L8.46462 9.87874C8.85514 10.2693 9.48831 10.2693 9.87883 9.87874Z" fill="#0B0B0F"></path><path d="M17.6567 4.92903C18.0472 4.53851 18.6804 4.53851 19.0709 4.92903C19.4614 5.31955 19.4614 5.95272 19.0709 6.34324L15.5353 9.87878C15.1448 10.2693 14.5117 10.2693 14.1211 9.87878C13.7306 9.48825 13.7306 8.85509 14.1211 8.46456L17.6567 4.92903Z" fill="#0B0B0F"></path><path d="M9.87849 14.1214C9.48797 13.7309 8.8548 13.7309 8.46428 14.1214L4.92875 17.6569C4.53822 18.0475 4.53822 18.6806 4.92875 19.0712C5.31927 19.4617 5.95244 19.4617 6.34296 19.0712L9.87849 15.5356C10.269 15.1451 10.269 14.5119 9.87849 14.1214Z" fill="#0B0B0F"></path></svg> Interactions </div><div class="text-nowrap text-dark roboto-mono small badge-tag-white"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 5C3 3.89543 3.89543 3 5 3C6.10457 3 7 3.89543 7 5C7 6.10457 6.10457 7 5 7C3.89543 7 3 6.10457 3 5Z" fill="#0B0B0F"></path><path d="M3 12C3 10.8954 3.89543 10 5 10C6.10457 10 7 10.8954 7 12C7 13.1046 6.10457 14 5 14C3.89543 14 3 13.1046 3 12Z" fill="#0B0B0F"></path><path d="M5 17C3.89543 17 3 17.8954 3 19C3 20.1046 3.89543 21 5 21C6.10457 21 7 20.1046 7 19C7 17.8954 6.10457 17 5 17Z" fill="#0B0B0F"></path><path d="M10 5C10 3.89543 10.8954 3 12 3C13.1046 3 14 3.89543 14 5C14 6.10457 13.1046 7 12 7C10.8954 7 10 6.10457 10 5Z" fill="#0B0B0F"></path><path d="M12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10Z" fill="#0B0B0F"></path><path d="M10 19C10 17.8954 10.8954 17 12 17C13.1046 17 14 17.8954 14 19C14 20.1046 13.1046 21 12 21C10.8954 21 10 20.1046 10 19Z" fill="#0B0B0F"></path><path d="M19 3C17.8954 3 17 3.89543 17 5C17 6.10457 17.8954 7 19 7C20.1046 7 21 6.10457 21 5C21 3.89543 20.1046 3 19 3Z" fill="#0B0B0F"></path><path d="M17 12C17 10.8954 17.8954 10 19 10C20.1046 10 21 10.8954 21 12C21 13.1046 20.1046 14 19 14C17.8954 14 17 13.1046 17 12Z" fill="#0B0B0F"></path><path d="M19 17C17.8954 17 17 17.8954 17 19C17 20.1046 17.8954 21 19 21C20.1046 21 21 20.1046 21 19C21 17.8954 20.1046 17 19 17Z" fill="#0B0B0F"></path></svg> States </div><div class="text-nowrap text-dark roboto-mono small badge-tag-white"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 6C19.3137 6 22 8.68629 22 12C22 15.3137 19.3137 18 16 18H8C4.68629 18 2 15.3137 2 12C2 8.68629 4.68629 6 8 6H16ZM8 15C6.34315 15 5 13.6569 5 12C5 10.3431 6.34315 9 8 9C9.65685 9 11 10.3431 11 12C11 13.6569 9.65685 15 8 15Z" fill="#0B0B0F"></path></svg> Smooth animation </div></div></div></div></div></div></section>',1)),t("section",gt,[t("div",vt,[e[16]||(e[16]=o('<div class="row"><div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1 col-12" style="text-align:center;"><span class="badge badge-info">Create</span>
1<h3 class="text-white"> Everything you need for a quick start </h3><p class="big"> Start your project by choosing from a <span class="text-white">wide range of components, sections, or ready-made templates.</span> Simply drag and drop the selected component into your working area. </p></div></div>',1)),t("div",ht,[t("div",bt,[t("div",ft,[e[1]||(e[1]=o('<h4 class="text-white mb-3"> Get an easy start with our extensive <span style="white-space:nowrap;"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 2H18V22H6V2Z" fill="#84E2F9"></path><path d="M2 4H4V20H2V4Z" fill="#84E2F9"></path><path d="M22 4H20V20H22V4Z" fill="#84E2F9"></path></svg> templates</span> library </h4><p class="mb-4"> Our library offers a wide variety of templates to meet your specific needs. </p>',2)),t("a",{href:d.templates,class:"btn btn-outline-light",style:{"font-size":"0.9rem"},target:"blank"},e[0]||(e[0]=[t("svg",{width:"16",height:"23",viewBox:"0 0 18 26",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M13 0H4.83471C3.55247 0 2.32274 0.50937 1.41605 1.41605C0.50937 2.32274 0 3.55247 0 4.83471C0 6.11696 0.50937 7.34668 1.41605 8.25337C1.66916 8.50647 1.94743 8.72861 2.245 8.91736C1.94743 9.1061 1.66916 9.32824 1.41605 9.58134C0.50937 10.488 0 11.7178 0 13C0 14.2822 0.50937 15.512 1.41605 16.4187C1.66916 16.6718 1.94743 16.8939 2.245 17.0826C1.94743 17.2714 1.66916 17.4935 1.41605 17.7466C0.50937 18.6533 0 19.883 0 21.1653C0 22.4475 0.50937 23.6773 1.41605 24.5839C2.32274 25.4906 3.55247 26 4.83471 26C6.11696 26 7.34668 25.4906 8.25337 24.5839C9.16005 23.6773 9.66942 22.4475 9.66942 21.1653V16.5045C10.5668 17.3574 11.7588 17.8347 13 17.8347C14.2822 17.8347 15.512 17.3253 16.4187 16.4187C17.3253 15.512 17.8347 14.2822 17.8347 13C17.8347 11.7178 17.3253 10.488 16.4187 9.58134C16.1656 9.32824 15.8873 9.1061 15.5897 8.91736C15.8873 8.72861 16.1656 8.50647 16.4187 8.25337C17.3253 7.34668 17.8347 6.11696 17.8347 4.83471C17.8347 3.55247 17.3253 2.32274 16.4187 1.41605C15.512 0.50937 14.2822 0 13 0ZM9.66942 13C9.66942 13.8833 10.02
103 14.7305 10.6449 15.3551C11.2695 15.9797 12.1167 16.3306 13 16.3306C13.8833 16.3306 14.7305 15.9797 15.3551 15.3551C15.9797 14.7305 16.3306 13.8833 16.3306 13C16.3306 12.1167 15.9797 11.2695 15.3551 10.6449C14.7305 10.0203 13.8833 9.66942 13 9.66942C12.1167 9.66942 11.2695 10.0203 10.6449 10.6449C10.0203 11.2695 9.66942 12.1167 9.66942 13ZM8.16529 17.8347H4.83471C3.95139 17.8347 3.10424 18.1856 2.47964 18.8102C1.85503 19.4348 1.50413 20.282 1.50413 21.1653C1.50413 22.0486 1.85503 22.8958 2.47964 23.5204C3.10424 24.145 3.95139 24.4959 4.83471 24.4959C5.71804 24.4959 6.56518 24.145 7.18978 23.5204C7.81439 22.8958 8.16529 22.0486 8.16529 21.1653V17.8347ZM4.83471 8.16529H8.16529V1.50413H4.83471C3.95139 1.50413 3.10424 1.85503 2.47964 2.47964C1.85503 3.10424 1.50413 3.95139 1.50413 4.83471C1.50413 5.71803 1.85503 6.56518 2.47964 7.18978C3.10424 7.81439 3.95139 8.16529 4.83471 8.16529ZM4.83471 9.66942C3.95139 9.66942 3.10424 10.0203 2.47964 10.6449C1.85503 11.2695 1.50413 12.1167 1.50413 13C1.50413 13.8833 1.85503 14.7305 2.47964 15.3551C3.10424 15.9797 3.95139 16.3306 4.83471 16.3306H8.16529V9.66942H4.83471ZM13 8.16529H9.66942V1.50413H13C13.8833 1.50413 14.7305 1.85503 15.3551 2.47964C15.9797 3.10424 16.3306 3.95139 16.3306 4.83471C16.3306 5.71803 15.9797 6.56518 15.3551 7.18978C14.7305 7.81439 13.8833 8.16529 13 8.16529Z"})],-1),a(" View all templates")]),8,yt),e[2]||(e[2]=t("div",{class:"d-lg-none",style:{"margin-bottom":"60px"}},null,-1))])]),e[3]||(e[3]=o('<div class="col-lg-6 offset-lg-1 col-12"><div class="rounded" style="border:1px solid var(--gray-bg);"><img src="'+W+'" alt="Landing page example" class="wow fadeIn" data-wow-delay="0.8s" width="57%" style="position:absolute;bottom:0;left:8%;z-index:2;"><img src="'+N+'" alt="Price page example" class="wow fadeIn" data-wow-delay="0.6s" width="57%" style="position:absolute;bottom:0;left:22%;z-index:1;"><img src="'+O+'" alt="Form page example" class="wow fadeIn" data-wow-delay="0.4s"></div></div>',1))]),t("div",Ct,[e[6]||(e[6]=o('<div class="col-lg-6 d-none d-lg-block"><img src="'+u+'" alt="Header navigation section" width="75%" class="wow fadeInUp" data-wow-delay="0.6s" style="position:absolute;z-index:2;top:40px;left:20px;"><img src="'+g+'" alt="Bank card section" width="30%" class="wow fadeInUp" data-wow-delay="0.8s" style="position:absolute;z-index:3;top:140px;left:30px;"><img src="'+v+'" alt="Price section" width="20%" class="wow fadeInUp" data-wow-delay="1.0s" style="position:absolute;z-index:4;bottom:220px;right:30px;"><img src="'+h+'" alt="Footer navigation section" width="75%" class="wow fadeInUp" data-wow-delay="1.2s" style="position:absolute;z-index:5;bottom:80px;right:20px;"><img src="'+b+'" alt="Webpage with the payment form" class="wow fadeInUp mb-4" data-wow-delay="0.4s"></div>',1)),t("div",xt,[t("div",kt,[e[5]||(e[5]=o('<h4 class="text-white mb-3"> Get started with the ready-made <span style="white-space:nowrap;"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 2H2V22H22V2ZM4 12H20V20H4V12Z" fill="#A8EF5B"></path></svg> sections</span></h4><p class="mb-4"> Speed up your work by using pre-made sections and blocks to build the interface. </p>',2)),t("a",{href:d.sections,class:"btn btn-outline-light",target:"blank"},e[4]||(e[4]=[t("svg",{width:"16",height:"23",viewBox:"0 0 18 26",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M13 0H4.83471C3.55247 0 2.32274 0.50937 1.41605 1.41605C0.50937 2.32274 0 3.55247 0 4.83471C0 6.11696 0.50937 7.34668 1.41605 8.25337C1.66916 8.50647 1.94743 8.72861 2.245 8.91736C1.94743 9.1061 1.66916 9.32824 1.41605 9.58134C0.50937 10.488 0 11.7178 0 13C0 14.2822 0.50937 15.512 1.41605 16.4187C1.66916 16.6718 1.94743 16.8939 2.245 17.0826C1.94743 17.2714 1.66916 17.4935 1.41605 17.7466C0.50937 18.6533 0 19.883 0 21.1653C0 22.4475 0.50937 23.6773 1.41605 24.5839C2.32274 25.4906 3.55247 26 4.83471 26C6.11696 26 7.34668 25.4906 8.25337 24.5839C9.16005 23.6773 9.66942 22.4475 9.66942 21.1653V16.5045C10.5668 17.3574 11.7588 17.8347 13 17.8347C14.2822 17.8347 15.512 17.3253 16.4187 16.4187C17.3253 15.512 17.8347 14.2822 17.8347 13C17.8347 11.7178 17.3253 10.488 16.4187 9.58134C16.1656 9.32824 15.8873 9.1061 15.5897 8.91736C15.8873 8.72861 16.1656 8.50647 16.4187 8.25337C17.3253 7.34668 17.8347 6.11696 17.8347 4.83471C17.8347 3.55247 17.3253 2.32274 16.4187 1.41605C15.512 0.50937 14.2822 0 13 0ZM9.66942 13C9.66942 13.8833 10.02
103 14.7305 10.6449 15.3551C11.2695 15.9797 12.1167 16.3306 13 16.3306C13.8833 16.3306 14.7305 15.9797 15.3551 15.3551C15.9797 14.7305 16.3306 13.8833 16.3306 13C16.3306 12.1167 15.9797 11.2695 15.3551 10.6449C14.7305 10.0203 13.8833 9.66942 13 9.66942C12.1167 9.66942 11.2695 10.0203 10.6449 10.6449C10.0203 11.2695 9.66942 12.1167 9.66942 13ZM8.16529 17.8347H4.83471C3.95139 17.8347 3.10424 18.1856 2.47964 18.8102C1.85503 19.4348 1.50413 20.282 1.50413 21.1653C1.50413 22.0486 1.85503 22.8958 2.47964 23.5204C3.10424 24.145 3.95139 24.4959 4.83471 24.4959C5.71804 24.4959 6.56518 24.145 7.18978 23.5204C7.81439 22.8958 8.16529 22.0486 8.16529 21.1653V17.8347ZM4.83471 8.16529H8.16529V1.50413H4.83471C3.95139 1.50413 3.10424 1.85503 2.47964 2.47964C1.85503 3.10424 1.50413 3.95139 1.50413 4.83471C1.50413 5.71803 1.85503 6.56518 2.47964 7.18978C3.10424 7.81439 3.95139 8.16529 4.83471 8.16529ZM4.83471 9.66942C3.95139 9.66942 3.10424 10.0203 2.47964 10.6449C1.85503 11.2695 1.50413 12.1167 1.50413 13C1.50413 13.8833 1.85503 14.7305 2.47964 15.3551C3.10424 15.9797 3.95139 16.3306 4.83471 16.3306H8.16529V9.66942H4.83471ZM13 8.16529H9.66942V1.50413H13C13.8833 1.50413 14.7305 1.85503 15.3551 2.47964C15.9797 3.10424 16.3306 3.95139 16.3306 4.83471C16.3306 5.71803 15.9797 6.56518 15.3551 7.18978C14.7305 7.81439 13.8833 8.16529 13 8.16529Z"})],-1),a(" Preview in Figma")]),8,_t)])]),e[7]||(e[7]=o('<div class="col-12 d-lg-none"><img src="'+u+'" alt="Header navigation section" width="75%" class="wow fadeInUp" data-wow-delay="0.6s" style="position:absolute;z-index:2;top:40px;left:20px;"><img src="'+g+'" alt="Bank card section" width="30%" class="wow fadeInUp d-none d-md-block" data-wow-delay="0.8s" style="position:absolute;z-index:3;top:140px;left:30px;"><img src="'+v+'" alt="Price section" width="20%" class="wow fadeInUp d-none d-md-block" data-wow-delay="1.0s" style="position:absolute;z-index:4;bottom:220px;right:30px;"><img src="'+h+'" alt="Footer navigation section" width="75%" class="wow fadeInUp" data-wow-delay="1.2s" style="position:absolute;z-index:5;bottom:80px;right:20px;"><img src="'+b+'" alt="Webpage with the payment form" class="wow fadeInUp mb-4" data-wow-delay="0.4s"></div>',1))]),t("div",Ft,[e[9]||(e[9]=o('<div class="col-lg-5 col-12 wow fadeInUp" data-wow-delay="0.2s"><div class="vertical-center"><h4 class="text-white mb-3"> Elevate your projects with our extensive <span style="white-space:nowrap;"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.4999 5.5L11.9999 1L7.49993 5.5L11.9999 9.99992L16.4999 5.5Z" fill="#8D4BF6"></path><path d="M9.99999 12.0001L5.49997 7.50011L1 12.0001L5.49999 16.5001L9.99999 12.0001Z" fill="#8D4BF6"></path><path d="M18.5 7.50008L23 12.0001L18.5 16.5001L14 12.0001L18.5 7.50008Z" fill="#8D4BF6"></path><path d="M16.5 18.4999L12 13.9999L7.50001 18.4999L12 23.0001L16.5 18.4999Z" fill="#8D4BF6"></path></svg> components</span> library </h4><p class="mb-4"> Our UI Kit library offers a wide range of customizable components to suit various needs. </p><div class="row"><div class="col-6 mb-4"><div class="px-3 pt-3 h-100 rounded" style="background:var(--gray-100);"><div class="mx-n3 mb-4"><img src="'+R+'" alt="Detailed description of the text input component"></div><p class="small"> Detailed description </p></div></div><div class="col-6 mb-4"><div class="px-3 pt-3 h-100 rounded" style="background:var(--gray-100);"><div class="mx-n3 mb-4"><img src="'+G+'" alt="Attention to details of the text input component"></div><p class="small"> Attention to details </p></div></div></div><div class="d-lg-none" style="margin-bottom:60px;"></div></div></div>',1)),t("div",Bt,[t("div",Ut,[(H(),F(rt,null,pt(M,(n,D)=>t("div",{key:D,class:ct(`col-md-4 col-6 component-card-margin mb-4 ${n.component_class}`)},[t("div",{class:"card component-card rounded wow fadeInUp","data-wow-delay":n.component_wow_delay},[t("div",Vt,[t("img",{src:`/media/products/universal-ui-kit-web/components/${n.component_image}`,alt:n.component_name},null,8,Mt)]),t("div",It,[l(m,{class:"stretched-link text-dark small",style:{color:"var(--gray-60) !important"},to:`ui-kit/components/${n.component_link}`},{default:B(()=>[a(mt(n.component_name),1)]),_:2},1032,["to"])])],8,Ht)],2)),64))]),t("div",Lt,[t("div",Zt,[l(m,{class:"btn btn-outline-light wow fadeInUp",to:"ui-kit/components","data-wow-delay":"1.3s",style:{"font-size":"0.9rem"}},{default:B(()=>e[8]||(e[8]=[a(" View all components"),t("span",{style:{opacity:"0.5","margin-left":"10px"}},"â",-1)])),_:1})])])])]),t("div",zt,[e[12]||(e[12]=o('<div class="col-lg-6 d-none d-lg-block"><div class="rounded" style="border:1px solid var(--gray-bg);"><img src="'+f+'" alt="Variables documentation" class="wow fadeIn" data-wow-delay="0.8s" width="57%" style="position:absolute;bottom:0;left:34%;z-index:3;"><img src="'+y+'" alt="Present the button component" class="wow fadeIn" data-wow-delay="0.6s" width="57%" style="position:absolute;bottom:0;left:25%;z-index:2;"><img src="'+C+'" alt="Present the button component" class="wow fadeIn" data-wow-delay="0.4s" width="57%" style="position:absolute;bottom:0;left:16%;z-index:1;"><img src="'+x+'" alt="Present the button component" class="wow fadeIn" data-wow-delay="0.2s"></div></div>',1)),t("div",Pt,[t("div",Dt,[e[11]||(e[11]=o('<h4 class="text-white mb-3"> Build your project on a solid <span style="white-space:nowrap;"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.4814 8.78028L9.84501 13.1981H7.13867L8.4814 8.78028Z" fill="#F5C844"></path><path d="M16.0626 15.7867C16.4126 15.7867 16.7066 15.726 16.9446 15.6047C17.1873 15.4787 17.3786 15.3364 17.5186 15.1777C17.6633 15.019 17.7613 14.886 17.8126 14.7787C17.9106 14.5734 17.9666 14.3354 17.9806 14.0647C17.992 13.8969 17.9999 13.7465 18.0043 13.6134C17.6908
113.6669 17.4215 13.7147 17.1966 13.7567C16.8466 13.8174 16.5643 13.8734 16.3496 13.9247C16.1349 13.976 15.9459 14.032 15.7826 14.0927C15.5959 14.1674 15.4443 14.249 15.3276 14.3377C15.2156 14.4217 15.1316 14.515 15.0756 14.6177C15.0243 14.7204 14.9986 14.8347 14.9986 14.9607C14.9986 15.1334 15.0406 15.2827 15.1246 15.4087C15.2133 15.53 15.3369 15.6234 15.4956 15.6887C15.6543 15.754 15.8433 15.7867 16.0626 15.7867Z" fill="#F5C844"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M22 2H2V22H22V2ZM4 17.0761L7.08 6.99609H9.922L13.002 17.0761H11.042L10.3938 14.9761H6.59827L5.96 17.0761H4ZM15.6566 17.2847C15.1153 17.2847 14.6556 17.182 14.2776 16.9767C13.9043 16.7667 13.6196 16.489 13.4236 16.1437C13.2323 15.7937 13.1366 15.4087 13.1366 14.9887C13.1366 14.6387 13.1903 14.319 13.2976 14.0297C13.4049 13.7404 13.5776 13.486 13.8156 13.2667C14.0583 13.0427 14.3826 12.856 14.7886 12.7067C15.0686 12.604 15.4023 12.513 15.7896 12.4337C16.1769 12.3544 16.6156 12.2797 17.1056 12.2097C17.394 12.1657 17.6994 12.1194 18.0217 12.0706C17.9855 11.7589 17.8832 11.5206 17.7146 11.3557C17.4999 11.1457 17.1406 11.0407 16.6366 11.0407C16.3566 11.0407 16.0649 11.1084 15.7616 11.2437C15.4583 11.379 15.2459 11.6194 15.1246 11.9647L13.4026 11.4187C13.5939 10.7934 13.9533 10.2847 14.4806 9.89269C15.0079 9.50069 15.7266 9.30469 16.6366 9.30469C17.3039 9.30469 17.8966 9.40735 18.4146 9.61269C18.9326 9.81802 19.3246 10.1727 19.5906 10.6767C19.7399 10.9567 19.8286 11.2367 19.8566 11.5167C19.8846 11.7967 19.8986 12.1094 19.8986 12.4547V17.0747H18.2326V16.1467C17.9318 16.501 17.6121 16.7684 17.2736 16.9487C16.8489 17.1727 16.3099 17.2847 15.6566 17.2847Z" fill="#F5C844"></path></svg> foundation</span></h4><p>Thanks to a foundation with grids for different screens, colors, and fonts, it's easy to keep a consistent style in all your layouts.</p><div class="mb-3"><div class="text-nowrap roboto-mono small badge-tag"> Variables </div><div class="text-nowrap roboto-mono small badge-tag"> Typography </div><div class="text-nowrap roboto-mono small badge-tag"> Color </div><div class="text-nowrap roboto-mono small badge-tag"> Grid </div><div class="text-nowrap roboto-mono small badge-tag"> Corner radius </div><div class="text-nowrap roboto-mono small mr-2 badge-tag"> Elevation </div></div>',3)),t("a",{href:d.default,class:"btn btn-outline-light",target:"blank"},e[10]||(e[10]=[t("svg",{width:"16",height:"23",viewBox:"0 0 18 26",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[t("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M13 0H4.83471C3.55247 0 2.32274 0.50937 1.41605 1.41605C0.50937 2.32274 0 3.55247 0 4.83471C0 6.11696 0.50937 7.34668 1.41605 8.25337C1.66916 8.50647 1.94743 8.72861 2.245 8.91736C1.94743 9.1061 1.66916 9.32824 1.41605 9.58134C0.50937 10.488 0 11.7178 0 13C0 14.2822 0.50937 15.512 1.41605 16.4187C1.66916 16.6718 1.94743 16.8939 2.245 17.0826C1.94743 17.2714 1.66916 17.4935 1.41605 17.7466C0.50937 18.6533 0 19.883 0 21.1653C0 22.4475 0.50937 23.6773 1.41605 24.5839C2.32274 25.4906 3.55247 26 4.83471 26C6.11696 26 7.34668 25.4906 8.25337 24.5839C9.16005 23.6773 9.66942 22.4475 9.66942 21.1653V16.5045C10.5668 17.3574 11.7588 17.8347 13 17.8347C14.2822 17.8347 15.512 17.3253 16.4187 16.4187C17.3253 15.512 17.8347 14.2822 17.8347 13C17.8347 11.7178 17.3253 10.488 16.4187 9.58134C16.1656 9.32824 15.8873 9.1061 15.5897 8.91736C15.8873 8.72861 16.1656 8.50647 16.4187 8.25337C17.3253 7.34668 17.8347 6.11696 17.8347 4.83471C17.8347 3.55247 17.3253 2.32274 16.4187 1.41605C15.512 0.50937 14.2822 0 13 0ZM9.66942 13C9.66942 13.8833 10.02
103 14.7305 10.6449 15.3551C11.2695 15.9797 12.1167 16.3306 13 16.3306C13.8833 16.3306 14.7305 15.9797 15.3551 15.3551C15.9797 14.7305 16.3306 13.8833 16.3306 13C16.3306 12.1167 15.9797 11.2695 15.3551 10.6449C14.7305 10.0203 13.8833 9.66942 13 9.66942C12.1167 9.66942 11.2695 10.0203 10.6449 10.6449C10.0203 11.2695 9.66942 12.1167 9.66942 13ZM8.16529 17.8347H4.83471C3.95139 17.8347 3.10424 18.1856 2.47964 18.8102C1.85503 19.4348 1.50413 20.282 1.50413 21.1653C1.50413 22.0486 1.85503 22.8958 2.47964 23.5204C3.10424 24.145 3.95139 24.4959 4.83471 24.4959C5.71804 24.4959 6.56518 24.145 7.18978 23.5204C7.81439 22.8958 8.16529 22.0486 8.16529 21.1653V17.8347ZM4.83471 8.16529H8.16529V1.50413H4.83471C3.95139 1.50413 3.10424 1.85503 2.47964 2.47964C1.85503 3.10424 1.50413 3.95139 1.50413 4.83471C1.50413 5.71803 1.85503 6.56518 2.47964 7.18978C3.10424 7.81439 3.95139 8.16529 4.83471 8.16529ZM4.83471 9.66942C3.95139 9.66942 3.10424 10.0203 2.47964 10.6449C1.85503 11.2695 1.50413 12.1167 1.50413 13C1.50413 13.8833 1.85503 14.7305 2.47964 15.3551C3.10424 15.9797 3.95139 16.3306 4.83471 16.3306H8.16529V9.66942H4.83471ZM13 8.16529H9.66942V1.50413H13C13.8833 1.50413 14.7305 1.85503 15.3551 2.47964C15.9797 3.10424 16.3306 3.95139 16.3306 4.83471C16.3306 5.71803 15.9797 6.56518 15.3551 7.18978C14.7305 7.81439 13.8833 8.16529 13 8.16529Z"})],-1),a(" Preview in Figma")]),8,At)])]),e[13]||(e[13]=o('<div class="col-12 d-lg-none wow fadeInUp" data-wow-delay="0.4s" style="margin-top:60px;"><div class="rounded" style="border:1px solid var(--gray-bg);"><img src="'+f+'" alt="Variables documentation" class="wow fadeIn" data-wow-delay="0.8s" width="57%" style="position:absolute;bottom:0;left:34%;z-index:3;"><img src="'+y+'" alt="Present the button component" class="wow fadeIn" data-wow-delay="0.6s" width="57%" style="position:absolute;bottom:0;left:25%;z-index:2;"><img src="'+C+'" alt="Present the button component" class="wow fadeIn" data-wow-delay="0.4s" width="57%" style="position:absolute;bottom:0;left:16%;z-index:1;"><img src="'+x+'" alt="Present the button component" class="wow fadeIn" data-wow-delay="0.2s"></div></div>',1))]),t("div",St,[t("div",jt,[t("div",Tt,[e[14]||(e[14]=o('<h4 class="text-white mb-3"> Begin easily with a "How to Use"<span style="white-space:nowrap;"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 1H3V23H21V6L16 1ZM18 10H6V12H18V10ZM6 14H18V16H6V14ZM13 18H6V20H13V18Z" fill="#F9DC4A"></path></svg> guide</span> and step-by-step tutorials </h4><p class="mb-4"> Get started without any difficulty by using a user-friendly "How to Use" guide that provides clear instructions, and then proceed with step-by-step tutorials to help you learn more effectively. </p>',2)),t("a",{href:i.individual.oneYearUpdates,class:"btn btn-outline-light",target:"blank"},"Start creating",8,Kt)])]),e[15]||(e[15]=o('<div class="col-lg-6 offset-lg-1 d-none d-lg-block rounded" style="border:1px solid var(--gray-bg);"><img src="'+k+'" alt="Tutorails" width="40%" class="wow fadeInUp" data-wow-delay="0.6s" style="position:absolute;z-index:2;bottom:0;right:40px;"><img src="'+_+'" alt="How to use guide" class="wow fadeInUp" data-wow-delay="0.4s"></div><div class="col-12 d-lg-none" style="margin-top:60px;"><div class="rounded" style="border:1px solid var(--gray-bg);"><img src="'+k+'" alt="Tutorails" width="40%" class="wow fadeInUp" data-wow-delay="0.6s" style="position:absolute;z-index:2;bottom:0;right:40px;"><img src="'+_+'" alt="How to use guide" class="wow fadeInUp" data-wow-delay="0.4s"></div></div>',2))])])]),e[22]||(e[22]=o('<section id="modification" style="background:#000000;"><div class="container p-container overflow-hidden wow fadeInUp" data-wow-delay="0.2s"><div class="row"><div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1 col-12 mb-4" style="text-align:center;"><span class="badge badge-info">Customize</span><h3 class="text-white"> Flexible customization </h3><p class="big"> Customizing components and sections has never been easier and more flexible. </p></div></div><div class="row"><div class="col-12 mb-4 wow fadeInUp" data-wow-delay="0.2s"><div class="px-4 pt-4 pb-2 h-100 rounded" style="background:var(--gray-100);"><div class="mx-n4 mb-5"><img src="'+X+'" alt="Description of color variables for the text input"></div><h5 class="text-white mb-3"> Variables </h5><p>Thanks to Figma variables, you can save time and make it easier to manage the design system.</p></div></div><div class="col-lg-8 col-12 mb-4 wow fadeInUp" data-wow-delay="0.2s"><div class="px-4 pt-4 pb-2 h-100 rounded" style="background:var(--gray-100);"><div class="mx-n4 mb-5"><img src="'+J+'" alt="Customization text input component with properties"></div><h5 class="text-white mb-3"> Universal components </h5><p>Our components are easily customizable to fit your needs. With just one click, you can resize, change their type, states, and hide one or more elements.</p></div></div><div class="col-lg-4 col-12 mb-4 wow fadeInUp" data-wow-delay="0.4s"><div class="px-4 pt-4 pb-2 h-100 rounded" style="background:var(--gray-100);"><div class="mx-n4 mb-5"><img src="'+Q+'" alt="Responsive button component"></div><h5 class="text-white mb-3"> Responsive components </h5><p>All the components are based on Auto Layout, so they can be easily adjusted to any interface size.</p></div></div><div class="col-lg-4 col-12 mb-4 wow fadeInUp" data-wow-delay="0.2s"><div class="px-4 pt-4 pb-2 h-100 rounded" style="background:var(--gray-100);"><div class="mx-n4 mb-5"><img src="'+tt+'" alt="Global styles of typography and primary color"></div><h5 class="text-white mb-3"> Global styles </h5><p>
1Thanks to a unified foundation, you can easily change fonts and colors to your own.</p></div></div><div class="col-lg-8 col-12 mb-4 wow fadeInUp" data-wow-delay="0.4s"><div class="px-4 pt-4 pb-2 h-100 rounded" style="background:var(--gray-100);"><h5 class="text-white mb-3"> Dark and light theme </h5><p class="mb-4"> A single click is all you need to switch elements and sections from light to dark themes and vice versa. </p><div class="mx-n4 mb-5 h-100"><img src="'+et+'" alt="Switching between light and dark themes using variable modes"></div></div></div></div></div></section><section id="present" style="background:var(--gray-110);"><div class="container p-container wow fadeInUp" data-wow-delay="0.2s"><div class="row"><div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1 col-12 mb-4" style="text-align:center;"><span class="badge badge-info">Present</span><h3 class="text-white"> Present like a Pro </h3><p class="big"> Make your prototype look dynamic and similar to the final product. </p></div></div><div class="row"><div class="col-lg-8 offset-lg-2 col-12 pt-2 pb-4 wow fadeInUp" data-wow-delay="0.2s"><object type="image/svg+xml" data="/media/products/universal-ui-kit-web/ill-pres-main-01.svg" width="25%" style="position:absolute;top:20%;left:3%;z-index:2;"></object><object type="image/svg+xml" data="/media/products/universal-ui-kit-web/ill-pres-main-02.svg" width="25%" style="position:absolute;top:3%;right:3%;z-index:2;"></object><object type="image/svg+xml" data="/media/products/universal-ui-kit-web/ill-pres-main-03.svg" width="40%" style="position:absolute;bottom:8%;right:3%;z-index:2;"></object><img src="'+ot+'" alt="Screenshot of a webpage for 123done, which offers a tool for creating charts and infographics in Figma."></div></div><div class="row"><div class="col-lg-4 col-12 mb-4 wow fadeInUp" data-wow-delay="0.2s"><div class="px-4 pt-4 pb-2 h-100 rounded" style="background:var(--gray-100);"><div class="mx-n4 mb-5"><img src="'+st+'" alt="Hover and focus states of the button component"></div><h5 class="text-white mb-3"> Interactions </h5><p>All components are interactive, making your prototype look like the final product.</p></div></div><div class="col-lg-4 col-12 mb-4 wow fadeInUp" data-wow-delay="0.4s"><div class="px-4 pt-4 pb-2 h-100 rounded" style="background:var(--gray-100);"><div class="mx-n4 mb-5"><img src="'+at+'" alt="States of the checkbox component"></div><h5 class="text-white mb-3"> Component states </h5><p>All components have various states. Hover or click to see the result.</p></div></div><div class="col-lg-4 col-12 mb-4 wow fadeInUp" data-wow-delay="0.6s"><div class="px-4 pt-4 pb-2 h-100 rounded" style="background:var(--gray-100);"><div class="mx-n3 mb-5"><object type="image/svg+xml" data="/media/products/universal-ui-kit-web/ill-pres-03.svg" width="100%"></object></div><h5 class="text-white mb-3"> Smooth animation </h5><p>We ensured smooth animations during interactions.</p></div></div></div></div></section><section id="file" style="background:var(--gray-100);"><div class="container p-container wow fadeInUp" data-wow-delay="0.2s"><div class="row"><div class="col-lg-8 offset-lg-2 col-12 mb-4" style="text-align:center;"><span class="badge badge-info">File</span><h3 class="text-white"> All in one file </h3><p class="big"> Our goal is to give you an unlimited design power in a compact form. </p></div></div><div class="row mb-4"><div class="col-12 wow fadeInUp" data-wow-delay="0.4s"><div class="row div-table div-table-dark div-table-cmplx"><div class="col-lg-4 col-6 div-column d-none d-lg-block" style="border-bottom:none;"><p class="text-white"> 25 Components </p></div><div class="col-lg-4 col-6 div-column d-lg-none" style="border-right:none;"><p class="text-white"> 25 Components </p></div><div class="col-lg-4 col-6 div-column" style="border-bottom:none;"><p class="text-white"> 500+ Variants </p></div><div class="col-lg-4 col-6 div-column-last d-none d-lg-block" style="border-bottom:none;"><p class="text-white"> 50+ pre-made Templates </p></div><div class="col-lg-4 col-6 div-column d-lg-none" style="border-right:none;"><p class="text-white"> 50+ pre-made Templates </p></div><div class="col-lg-4 col-6 div-column"><p class="text-white"> 100+ pre-made Sections </p></div><div class="col-lg-4 col-6 div-column d-none d-lg-block"><p class="text-white"> Foundation </p></div><div class="col-lg-4 col-6 div-column-last d-lg-none" style="border-right:none;"><p class="text-white"> Foundation </p></div><div class="col-lg-4 col-6 div-column-last"><p class="text-white"> 100+ Icons </p></div></div></div></div><div class="row"><div class="col-lg-6 col-12 mb-4 wow fadeInUp" data-wow-delay="0.2s"><div class="px-4 pt-4 h-100 rounded" style="background:var(--gray-bg);"><h5 class="text-white mb-3"> Compact view </h5><p class="mb-4"> The file structure is simple and easy to start working with it. </p><div class="ml-n4 mr-n4"><img src="'+it+'" alt="Compact view of the Universal UI Kit" class="rounded-bottom"></div></div></div><div class="col-lg-6 col-12 mb-4 wow fadeInUp" data-wow-delay="0.4s"><div class="px-4 pt-4 h-100 rounded" style="background:var(--gray-bg);"><h5 class="text-white mb-3"> Organized by categories </h5><p class="mb-4"> The assets are organized in a structured system, allowing you to quickly find the elements you need. </p><div class="ml-n4 mr-n4"><img src="'+lt+'" alt="Organized assets by categories" class="rounded-bottom"></div></div></div></div></div></section><section style="background:var(--gray-110);"><div class="container p-container wow fadeInUp" data-wow-delay="0.2s" style="padding-bottom:0 !important;"><div class="row"><div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1 col-12 mb-4" style="text-align:center;"><span class="badge badge-info">Examples</span>
1<h3 class="text-white"> Unlimited power </h3><p class="big"> Universal UI Kit is a powerful tool for creating stunning, fully customizable web pages with ease. </p></div></div></div><img src="'+ut+'" alt="Examples of using the Universal UI Kit" class="img-fluid w-100 wow fadeInUp" data-wow-delay="0.4s"></section>',4)),l(Z,{title:"Get Universal UI Kit",description:"Projects require different types of licenses. Choose your one.",prices:[{title:"Individual license",list:[{title:"1 year of updates",description:"Perfect for solo designers, developers, creators and freelancers.",price:s.individual.oneYearUpdates.price,priceDescription:`Then ${("formatCurrency"in r?r.formatCurrency:U(w))(s.individual.oneYearUpdates.thenPrice)}/year ⢠Cancel anytime`,button:{title:"Buy now",link:i.individual.oneYearUpdates},features:["Single user license","1 year of free updates","Personal or commercial projects"]},{title:"Lifetime updates",description:"Perfect for solo designers, developers, creators and freelancers.",price:s.individual.lifetimeUpdates.price,priceDescription:"One-time payment",button:{title:"Buy now",link:i.individual.lifetimeUpdates},features:["Single user license","Lifetime free updates","Personal or commercial projects"]},{isSpecial:!0,title:"Custom service",description:"Custom Figma UI Kit based on the Universal UI Kit.",price:s.individual.customService.price,priceDescription:"3-4 weeks for development",button:{title:"Contact us",link:"mailto:[email protected]"},features:["We'll create a custom Figma UI Kit for your project based on the Universal UI Kit and your instructions","Up to 20 users","Personal or commercial projects"]}]},{title:"Team license",list:[{title:"1 year of updates",description:"Best for startups, teams, business or enterprise organisations.",price:s.team.oneYearUpdates.price,priceDescription:`Then ${("formatCurrency"in r?r.formatCurrency:U(w))(s.team.oneYearUpdates.thenPrice)}/year ⢠Cancel anytime`,button:{title:"Buy now",link:i.team.oneYearUpdates},features:["Up to 20 users","1 year of free updates","Personal or commercial projects"]},{title:"Lifetime updates",description:"Best for startups, teams, business or enterprise organisations.",price:s.team.lifetimeUpdates.price,priceDescription:"One-time payment",button:{title:"Buy now",link:i.team.lifetimeUpdates},features:["Up to 20 users","Lifetime free updates","Personal or commercial projects"]},{isSpecial:!0,title:"Custom service",description:"Custom Figma UI Kit based on the Universal UI Kit.",price:s.individual.customService.price,priceDescription:"3-4 weeks for development",button:{title:"Contact us",link:"mailto:[email protected]"},features:["We'll create a custom Figma UI Kit for your project based on the Universal UI Kit and your instructions","Up to 20 users","Personal or commercial projects"]}]}],"info-list":[{prop:"Version",value:V},{prop:"Format",value:"Figma"},{prop:"Last update",value:"May 12, 2025"}],"feature-list":["All shapes are vector based","Easy to change (Support Figma's Variants)","Easy to change color and font"],"update-list":[{version:"Version 4.2 (May 12, 2025)",description:"Typography Variables and new Templates"},{version:"Version 4.1 (Feb 15, 2024)",description:"New Sections and Templates"}],changelog:{text:"View all updates â",link:"ui-kit/updates"},"is-show-promo-product":"","is-show-product-rating":""},null,8,["prices","info-list"]),t("section",qt,[t("div",Yt,[t("div",Et,[t("div",$t,[e[17]||(e[17]=t("span",{class:"badge badge-info badge-dark"},"FAQs",-1)),e[18]||(e[18]=t("h3",{class:"text-dark"}," Need help? ",-1)),e[19]||(e[19]=t("p",{class:"big"}," Here are answers to our most frequently asked questions. ",-1)),l(z)])])])]),t("section",Wt,[t("div",Nt,[t("div",Ot,[t("div",Rt,[l(P,{link:"https://www.producthunt.com/posts/universal-ui-kit-web-v4-0?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-universal-ui-kit-web-v4-0",img:"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=422920&theme=dark",alt:"Universal UI Kit (Web) v4.0 - The most Universal UI Kit for Figma | Product Hunt"})])])])])])}}};export{le as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.