{"version":3,"sources":["webpack:///./src/components/BlocksDemo.vue","webpack:///./src/components/BlocksDemo.vue?1014"],"names":["class","src","alt","style","href","height","for","header","code","block1","label","type","block2","block3","block4","icon","block5","containerClass","block6","block7","block8","id","binary","checked","block9","block10","name","data","__exports__","render"],"mappings":"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","file":"js/chunk-2d214458.861905b2.js","sourcesContent":["<template>\n    <div>\n        <BlockViewer header=\"Hero\" :code=\"block1\">\n            <div class=\"grid grid-nogutter surface-section text-800\">\n                <div class=\"col-12 md:col-6 p-6 text-center md:text-left flex align-items-center \">\n                    <section>\n                        <span class=\"block text-6xl font-bold mb-1\">Create the screens your</span>\n                        <div class=\"text-6xl text-primary font-bold mb-3\">your visitors deserve to see</div>\n                        <p class=\"mt-0 mb-4 text-700 line-height-3\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n                        \n                        <Button label=\"Learn More\" type=\"button\" class=\"mr-3 p-button-raised\"></Button>\n                        <Button label=\"Live Demo\" type=\"button\" class=\"p-button-outlined\"></Button>\n                    </section>\n                </div>\n                <div class=\"col-12 md:col-6 overflow-hidden\">\n                    <img src=\"images/blocks/hero/hero-1.png\" alt=\"Image\" class=\"md:ml-auto block md:h-full\" style=\"clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)\">\n                </div>\n            </div>\n        </BlockViewer>\n\n        <BlockViewer header=\"Feature\" :code=\"block2\">\n            <div class=\"surface-section px-4 py-8 md:px-6 lg:px-8 text-center\">\n                <div class=\"mb-3 font-bold text-2xl\">\n                    <span class=\"text-900\">One Product, </span>\n                    <span class=\"text-blue-600\">Many Solutions</span>\n                </div>\n                <div class=\"text-700 text-sm mb-6\">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>\n                <div class=\"grid\">\n                    <div class=\"col-12 md:col-4 mb-4 px-5\">\n                        <span class=\"p-3 shadow-2 mb-3 inline-block surface-card\" style=\"border-radius: 10px\">\n                            <i class=\"pi pi-desktop text-4xl text-blue-500\"></i>\n                        </span>\n                        <div class=\"text-900 mb-3 font-medium\">Built for Developers</div>\n                        <span class=\"text-700 text-sm line-height-3\">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>\n                    </div>\n                    <div class=\"col-12 md:col-4 mb-4 px-5\">\n                        <span class=\"p-3 shadow-2 mb-3 inline-block surface-card\" style=\"border-radius: 10px\">\n                            <i class=\"pi pi-lock text-4xl text-blue-500\"></i>\n                        </span>\n                        <div class=\"text-900 mb-3 font-medium\">End-to-End Encryption</div>\n                        <span class=\"text-700 text-sm line-height-3\">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>\n                    </div>\n                    <div class=\"col-12 md:col-4 mb-4 px-5\">\n                        <span class=\"p-3 shadow-2 mb-3 inline-block surface-card\" style=\"border-radius: 10px\">\n                            <i class=\"pi pi-check-circle text-4xl text-blue-500\"></i>\n                        </span>\n                        <div class=\"text-900 mb-3 font-medium\">Easy to Use</div>\n                        <span class=\"text-700 text-sm line-height-3\">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>\n                    </div>\n                    <div class=\"col-12 md:col-4 mb-4 px-5\">\n                        <span class=\"p-3 shadow-2 mb-3 inline-block surface-card\" style=\"border-radius: 10px\">\n                            <i class=\"pi pi-globe text-4xl text-blue-500\"></i>\n                        </span>\n                        <div class=\"text-900 mb-3 font-medium\">Fast & Global Support</div>\n                        <span class=\"text-700 text-sm line-height-3\">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>\n                    </div>\n                    <div class=\"col-12 md:col-4 mb-4 px-5\">\n                        <span class=\"p-3 shadow-2 mb-3 inline-block surface-card\" style=\"border-radius: 10px\">\n                            <i class=\"pi pi-github text-4xl text-blue-500\"></i>\n                        </span>\n                        <div class=\"text-900 mb-3 font-medium\">Open Source</div>\n                        <span class=\"text-700 text-sm line-height-3\">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>\n                    </div>\n                    <div class=\"col-12 md:col-4 md:mb-4 mb-0 px-3\">\n                        <span class=\"p-3 shadow-2 mb-3 inline-block surface-card\" style=\"border-radius: 10px\">\n                            <i class=\"pi pi-shield text-4xl text-blue-500\"></i>\n                        </span>\n                        <div class=\"text-900 mb-3 font-medium\">Trusted Securitty</div>\n                        <span class=\"text-700 text-sm line-height-3\">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>\n                    </div>\n                </div>\n            </div>\n        </BlockViewer>\n\n        <BlockViewer header=\"Pricing\" :code=\"block3\">\n            <div class=\"surface-ground px-4 py-8 md:px-6 lg:px-8\">\n                <div class=\"text-900 font-bold text-6xl mb-4 text-center\">Pricing Plans</div>\n                <div class=\"text-700 text-xl mb-6 text-center line-height-3\">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>\n\n                <div class=\"grid\">\n                    <div class=\"col-12 lg:col-4\">\n                        <div class=\"p-3 h-full\">\n                            <div class=\"shadow-2 p-3 h-full flex flex-column surface-card\" style=\"border-radius: 6px\">\n                                <div class=\"text-900 font-medium text-xl mb-2\">Basic</div>\n                                <div class=\"text-600\">Plan description</div>\n                                <hr class=\"my-3 mx-0 border-top-1 border-none surface-border\" />\n                                <div class=\"flex align-items-center\">\n                                    <span class=\"font-bold text-2xl text-900\">$9</span>\n                                    <span class=\"ml-2 font-medium text-600\">per month</span>\n                                </div>\n                                <hr class=\"my-3 mx-0 border-top-1 border-none surface-border\" />\n                                <ul class=\"list-none p-0 m-0 flex-grow-1\">\n                                    <li class=\"flex align-items-center mb-3\">\n                                        <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                                        <span>Arcu vitae elementum</span>\n                                    </li>\n                                    <li class=\"flex align-items-center mb-3\">\n                                        <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                                        <span>Dui faucibus in ornare</span>\n                                    </li>\n                                    <li class=\"flex align-items-center mb-3\">\n                                        <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                                        <span>Morbi tincidunt augue</span>\n                                    </li>\n                                </ul>\n                                <hr class=\"mb-3 mx-0 border-top-1 border-none surface-border mt-auto\" />\n                                <Button label=\"Buy Now\" class=\"p-3 w-full mt-auto\"></Button>\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"col-12 lg:col-4\">\n                        <div class=\"p-3 h-full\">\n                            <div class=\"shadow-2 p-3 h-full flex flex-column surface-card\" style=\"border-radius: 6px\">\n                                <div class=\"text-900 font-medium text-xl mb-2\">Premium</div>\n                                <div class=\"text-600\">Plan description</div>\n                                <hr class=\"my-3 mx-0 border-top-1 border-none surface-border\" />\n                                <div class=\"flex align-items-center\">\n                                    <span class=\"font-bold text-2xl text-900\">$29</span>\n                                    <span class=\"ml-2 font-medium text-600\">per month</span>\n                                </div>\n                                <hr class=\"my-3 mx-0 border-top-1 border-none surface-border\" />\n                                <ul class=\"list-none p-0 m-0 flex-grow-1\">\n                                    <li class=\"flex align-items-center mb-3\">\n                                        <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                                        <span>Arcu vitae elementum</span>\n                                    </li>\n                                    <li class=\"flex align-items-center mb-3\">\n                                        <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                                        <span>Dui faucibus in ornare</span>\n                                    </li>\n                                    <li class=\"flex align-items-center mb-3\">\n                                        <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                                        <span>Morbi tincidunt augue</span>\n                                    </li>\n                                    <li class=\"flex align-items-center mb-3\">\n                                        <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                                        <span>Duis ultricies lacus sed</span>\n                                    </li>\n                                </ul>\n                                <hr class=\"mb-3 mx-0 border-top-1 border-none surface-border\" />\n                                <Button label=\"Buy Now\" class=\"p-3 w-full\"></Button>\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"col-12 lg:col-4\">\n                        <div class=\"p-3 h-full\">\n                            <div class=\"shadow-2 p-3 flex flex-column surface-card\" style=\"border-radius: 6px\">\n                                <div class=\"text-900 font-medium text-xl mb-2\">Enterprise</div>\n                                <div class=\"text-600\">Plan description</div>\n                                <hr class=\"my-3 mx-0 border-top-1 border-none surface-border\" />\n                                <div class=\"flex align-items-center\">\n                                    <span class=\"font-bold text-2xl text-900\">$49</span>\n                                    <span class=\"ml-2 font-medium text-600\">per month</span>\n                                </div>\n                                <hr class=\"my-3 mx-0 border-top-1 border-none surface-border\" />\n                                <ul class=\"list-none p-0 m-0 flex-grow-1\">\n                                    <li class=\"flex align-items-center mb-3\">\n                                        <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                                        <span>Arcu vitae elementum</span>\n                                    </li>\n                                    <li class=\"flex align-items-center mb-3\">\n                                        <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                                        <span>Dui faucibus in ornare</span>\n                                    </li>\n                                    <li class=\"flex align-items-center mb-3\">\n                                        <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                                        <span>Morbi tincidunt augue</span>\n                                    </li>\n                                    <li class=\"flex align-items-center mb-3\">\n                                        <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                                        <span>Duis ultricies lacus sed</span>\n                                    </li>\n                                    <li class=\"flex align-items-center mb-3\">\n                                        <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                                        <span>Imperdiet proin</span>\n                                    </li>\n                                    <li class=\"flex align-items-center mb-3\">\n                                        <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                                        <span>Nisi scelerisque</span>\n                                    </li>\n                                </ul>\n                                <hr class=\"mb-3 mx-0 border-top-1 border-none surface-border\" />\n                                <Button label=\"Buy Now\" class=\"p-3 w-full p-button-outlined\"></Button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </BlockViewer>\n\n        <BlockViewer header=\"Call to Action\" :code=\"block4\">\n            <div class=\"surface-section px-4 py-8 md:px-6 lg:px-8\">\n                <div class=\"text-700 text-center\">\n                    <div class=\"text-blue-600 font-bold mb-3\"><i class=\"pi pi-discord\"></i>&nbsp;POWERED BY DISCORD</div>\n                    <div class=\"text-900 font-bold text-5xl mb-3\">Join Our Design Community</div>\n                    <div class=\"text-700 text-2xl mb-5\">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>\n                    <Button label=\"Join Now\" icon=\"pi pi-discord\" class=\"font-bold px-5 py-3 p-button-raised p-button-rounded white-space-nowrap\"></Button>\n                </div>\n            </div>\n        </BlockViewer>\n\n        <BlockViewer header=\"Banner\" :code=\"block5\" containerClass=\"surface-section py-8\">\n            <div class=\"bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap\">\n                <div class=\"font-bold mr-8\">🔥 Hot Deals!</div>\n                <div class=\"align-items-center hidden lg:flex\">\n                    <span class=\"line-height-3\">Libero voluptatum atque exercitationem praesentium provident odit.</span>\n                </div>\n                <a class=\"flex align-items-center ml-2 mr-8\">\n                    <a class=\"text-white\" href=\"#\"><span class=\"underline font-bold\">Learn More</span></a>\n                </a>\n                <a v-ripple class=\"flex align-items-center no-underline justify-content-center border-circle text-gray-50 hover:bg-bluegray-700 cursor-pointer transition-colors transition-duration-150 p-ripple\" style=\"width:2rem; height: 2rem\">\n                    <i class=\"pi pi-times\"></i>\n                </a>\n            </div>\n        </BlockViewer>\n\n        <BlockViewer header=\"Page Heading\" :code=\"block6\">\n            <div class=\"surface-section px-4 py-5 md:px-6 lg:px-8\">\n                <ul class=\"list-none p-0 m-0 flex align-items-center font-medium mb-3\">\n                    <li>\n                        <a class=\"text-500 no-underline line-height-3 cursor-pointer\">Application</a>\n                    </li>\n                    <li class=\"px-2\">\n                        <i class=\"pi pi-angle-right text-500 line-height-3\"></i>\n                    </li>\n                    <li>\n                        <span class=\"text-900 line-height-3\">Analytics</span>\n                    </li>\n                </ul>\n                <div class=\"flex align-items-start flex-column lg:justify-content-between lg:flex-row\">\n                    <div>\n                        <div class=\"font-medium text-3xl text-900\">Customers</div>\n                        <div class=\"flex align-items-center text-700 flex-wrap\">\n                            <div class=\"mr-5 flex align-items-center mt-3\">\n                                <i class=\"pi pi-users mr-2\"></i>\n                                <span>332 Active Users</span>\n                            </div>\n                            <div class=\"mr-5 flex align-items-center mt-3\">\n                                <i class=\"pi pi-globe mr-2\"></i>\n                                <span>9402 Sessions</span>\n                            </div>\n                            <div class=\"flex align-items-center mt-3\">\n                                <i class=\"pi pi-clock mr-2\"></i>\n                                <span>2.32m Avg. Duration</span>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"mt-3 lg:mt-0\">\n                        <Button label=\"Add\" class=\"p-button-outlined mr-2\" icon=\"pi pi-user-plus\"></Button>\n                        <Button label=\"Save\" icon=\"pi pi-check\"></Button>\n                    </div>\n                </div>\n            </div>\n        </BlockViewer>\n\n        <BlockViewer header=\"Stats\" :code=\"block7\">\n            <div class=\"surface-ground px-4 py-5 md:px-6 lg:px-8\">\n                <div class=\"grid\">\n                    <div class=\"col-12 md:col-6 lg:col-3\">\n                        <div class=\"surface-card shadow-2 p-3 border-round\">\n                            <div class=\"flex justify-content-between mb-3\">\n                                <div>\n                                    <span class=\"block text-500 font-medium mb-3\">Orders</span>\n                                    <div class=\"text-900 font-medium text-xl\">152</div>\n                                </div>\n                                <div class=\"flex align-items-center justify-content-center bg-blue-100 border-round\" style=\"width:2.5rem;height:2.5rem\">\n                                    <i class=\"pi pi-shopping-cart text-blue-500 text-xl\"></i>\n                                </div>\n                            </div>\n                            <span class=\"text-green-500 font-medium\">24 new </span>\n                            <span class=\"text-500\">since last visit</span>\n                        </div>\n                    </div>\n                    <div class=\"col-12 md:col-6 lg:col-3\">\n                        <div class=\"surface-card shadow-2 p-3 border-round\">\n                            <div class=\"flex justify-content-between mb-3\">\n                                <div>\n                                    <span class=\"block text-500 font-medium mb-3\">Revenue</span>\n                                    <div class=\"text-900 font-medium text-xl\">$2.100</div>\n                                </div>\n                                <div class=\"flex align-items-center justify-content-center bg-orange-100 border-round\" style=\"width:2.5rem;height:2.5rem\">\n                                    <i class=\"pi pi-map-marker text-orange-500 text-xl\"></i>\n                                </div>\n                            </div>\n                            <span class=\"text-green-500 font-medium\">%52+ </span>\n                            <span class=\"text-500\">since last week</span>\n                        </div>\n                    </div>\n                    <div class=\"col-12 md:col-6 lg:col-3\">\n                        <div class=\"surface-card shadow-2 p-3 border-round\">\n                            <div class=\"flex justify-content-between mb-3\">\n                                <div>\n                                    <span class=\"block text-500 font-medium mb-3\">Customers</span>\n                                    <div class=\"text-900 font-medium text-xl\">28441</div>\n                                </div>\n                                <div class=\"flex align-items-center justify-content-center bg-cyan-100 border-round\" style=\"width:2.5rem;height:2.5rem\">\n                                    <i class=\"pi pi-inbox text-cyan-500 text-xl\"></i>\n                                </div>\n                            </div>\n                            <span class=\"text-green-500 font-medium\">520  </span>\n                            <span class=\"text-500\">newly registered</span>\n                        </div>\n                    </div>\n                    <div class=\"col-12 md:col-6 lg:col-3\">\n                        <div class=\"surface-card shadow-2 p-3 border-round\">\n                            <div class=\"flex justify-content-between mb-3\">\n                                <div>\n                                    <span class=\"block text-500 font-medium mb-3\">Comments</span>\n                                    <div class=\"text-900 font-medium text-xl\">152 Unread</div>\n                                </div>\n                                <div class=\"flex align-items-center justify-content-center bg-purple-100 border-round\" style=\"width:2.5rem;height:2.5rem\">\n                                    <i class=\"pi pi-comment text-purple-500 text-xl\"></i>\n                                </div>\n                            </div>\n                            <span class=\"text-green-500 font-medium\">85 </span>\n                            <span class=\"text-500\">responded</span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </BlockViewer>\n\n        <BlockViewer header=\"Sign-In\" :code=\"block8\" containerClass=\"surface-ground px-4 py-8 md:px-6 lg:px-8 flex align-items-center justify-content-center\">      \n        <div class=\"surface-card p-4 shadow-2 border-round w-full lg:w-6\">\n            <div class=\"text-center mb-5\">\n                <img src=\"images/blocks/logos/hyper.svg\" alt=\"Image\" height=\"50\" class=\"mb-3\">\n                <div class=\"text-900 text-3xl font-medium mb-3\">Welcome Back</div>\n                <span class=\"text-600 font-medium line-height-3\">Don't have an account?</span>\n                <a class=\"font-medium no-underline ml-2 text-blue-500 cursor-pointer\">Create today!</a>\n            </div>\n\n            <div>\n                <label for=\"email1\" class=\"block text-900 font-medium mb-2\">Email</label>\n                <InputText id=\"email1\" type=\"text\" class=\"w-full mb-3\" />\n\n                <label for=\"password1\" class=\"block text-900 font-medium mb-2\">Password</label>\n                <InputText id=\"password1\" type=\"password\" class=\"w-full mb-3\" />\n\n                <div class=\"flex align-items-center justify-content-between mb-6\">\n                    <div class=\"flex align-items-center\">\n                        <Checkbox id=\"rememberme1\" :binary=\"true\" v-model=\"checked\" class=\"mr-2\"></Checkbox>\n                        <label for=\"rememberme1\">Remember me</label>\n                    </div>\n                    <a class=\"font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer\">Forgot password?</a>\n                </div>\n\n                <Button label=\"Sign In\" icon=\"pi pi-user\" class=\"w-full\"></Button>\n            </div>\n        </div>\n        </BlockViewer>\n\n        <BlockViewer header=\"Description List\" :code=\"block9\" containerClass=\"surface-section px-4 py-8 md:px-6 lg:px-8\">\n        <div class=\"surface-section\">\n            <div class=\"font-medium text-3xl text-900 mb-3\">Movie Information</div>\n            <div class=\"text-500 mb-5\">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>\n            <ul class=\"list-none p-0 m-0\">\n                <li class=\"flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap\">\n                    <div class=\"text-500 w-6 md:w-2 font-medium\">Title</div>\n                    <div class=\"text-900 w-full md:w-8 md:flex-order-0 flex-order-1\">Heat</div>\n                    <div class=\"w-6 md:w-2 flex justify-content-end\">\n                        <Button label=\"Edit\" icon=\"pi pi-pencil\" class=\"p-button-text\"></Button>\n                    </div>\n                </li>\n                <li class=\"flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap\">\n                    <div class=\"text-500 w-6 md:w-2 font-medium\">Genre</div>\n                    <div class=\"text-900 w-full md:w-8 md:flex-order-0 flex-order-1\">\n                        <Chip label=\"Crime\" class=\"mr-2\"></Chip>\n                        <Chip label=\"Drama\" class=\"mr-2\"></Chip>\n                        <Chip label=\"Thriller\"></Chip>\n                    </div>\n                    <div class=\"w-6 md:w-2 flex justify-content-end\">\n                        <Button label=\"Edit\" icon=\"pi pi-pencil\" class=\"p-button-text\"></Button>\n                    </div>\n                </li>\n                <li class=\"flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap\">\n                    <div class=\"text-500 w-6 md:w-2 font-medium\">Director</div>\n                    <div class=\"text-900 w-full md:w-8 md:flex-order-0 flex-order-1\">Michael Mann</div>\n                    <div class=\"w-6 md:w-2 flex justify-content-end\">\n                        <Button label=\"Edit\" icon=\"pi pi-pencil\" class=\"p-button-text\"></Button>\n                    </div>\n                </li>\n                <li class=\"flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap\">\n                    <div class=\"text-500 w-6 md:w-2 font-medium\">Actors</div>\n                    <div class=\"text-900 w-full md:w-8 md:flex-order-0 flex-order-1\">Robert De Niro, Al Pacino</div>\n                    <div class=\"w-6 md:w-2 flex justify-content-end\">\n                        <Button label=\"Edit\" icon=\"pi pi-pencil\" class=\"p-button-text\"></Button>\n                    </div>\n                </li>\n                <li class=\"flex align-items-center py-3 px-2 border-top-1 border-bottom-1 surface-border flex-wrap\">\n                    <div class=\"text-500 w-6 md:w-2 font-medium\">Plot</div>\n                    <div class=\"text-900 w-full md:w-8 md:flex-order-0 flex-order-1 line-height-3\">\n                        A group of professional bank robbers start to feel the heat from police\n                        when they unknowingly leave a clue at their latest heist.</div>\n                    <div class=\"w-6 md:w-2 flex justify-content-end\">\n                        <Button label=\"Edit\" icon=\"pi pi-pencil\" class=\"p-button-text\"></Button>\n                    </div>\n                </li>\n            </ul>\n        </div>\n        </BlockViewer>\n\n        <BlockViewer header=\"Card\" :code=\"block10\" containerClass=\"px-4 py-8 md:px-6 lg:px-8\">        \n        <div class=\"surface-card p-4 shadow-2 border-round\">\n            <div class=\"text-3xl font-medium text-900 mb-3\">Card Title</div>\n            <div class=\"font-medium text-500 mb-3\">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>\n            <div style=\"height: 150px\" class=\"border-2 border-dashed surface-border\"></div>\n        </div>\n        </BlockViewer>\n    </div>\n</template>\n\n<script>\nexport default {\n    name: 'Free',\n    data() {\n        return {\n            block1: `\n<div class=\"grid grid-nogutter surface-section text-800\">\n    <div class=\"col-12 md:col-6 p-6 text-center md:text-left flex align-items-center \">\n        <section>\n            <span class=\"block text-6xl font-bold mb-1\">Create the screens your</span>\n            <div class=\"text-6xl text-primary font-bold mb-3\">your visitors deserve to see</div>\n            <p class=\"mt-0 mb-4 text-700 line-height-3\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n            \n            <Button label=\"Learn More\" type=\"button\" class=\"mr-3 p-button-raised\"></Button>\n            <Button label=\"Live Demo\" type=\"button\" class=\"p-button-outlined\"></Button>\n        </section>\n    </div>\n    <div class=\"col-12 md:col-6 overflow-hidden\">\n        <img src=\"images/blocks/hero/hero-1.png\" alt=\"Image\" class=\"md:ml-auto block md:h-full\" style=\"clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)\">\n    </div>\n</div>`,\n            block2: `\n<div class=\"surface-section px-4 py-8 md:px-6 lg:px-8 text-center\">\n    <div class=\"mb-3 font-bold text-2xl\">\n        <span class=\"text-900\">One Product, </span>\n        <span class=\"text-blue-600\">Many Solutions</span>\n    </div>\n    <div class=\"text-700 text-sm mb-6\">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>\n    <div class=\"grid\">\n        <div class=\"col-12 md:col-4 mb-4 px-5\">\n            <span class=\"p-3 shadow-2 mb-3 inline-block surface-card\" style=\"border-radius: 10px\">\n                <i class=\"pi pi-desktop text-4xl text-blue-500\"></i>\n            </span>\n            <div class=\"text-900 mb-3 font-medium\">Built for Developers</div>\n            <span class=\"text-700 text-sm line-height-3\">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>\n        </div>\n        <div class=\"col-12 md:col-4 mb-4 px-5\">\n            <span class=\"p-3 shadow-2 mb-3 inline-block surface-card\" style=\"border-radius: 10px\">\n                <i class=\"pi pi-lock text-4xl text-blue-500\"></i>\n            </span>\n            <div class=\"text-900 mb-3 font-medium\">End-to-End Encryption</div>\n            <span class=\"text-700 text-sm line-height-3\">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>\n        </div>\n        <div class=\"col-12 md:col-4 mb-4 px-5\">\n            <span class=\"p-3 shadow-2 mb-3 inline-block surface-card\" style=\"border-radius: 10px\">\n                <i class=\"pi pi-check-circle text-4xl text-blue-500\"></i>\n            </span>\n            <div class=\"text-900 mb-3 font-medium\">Easy to Use</div>\n            <span class=\"text-700 text-sm line-height-3\">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>\n        </div>\n        <div class=\"col-12 md:col-4 mb-4 px-5\">\n            <span class=\"p-3 shadow-2 mb-3 inline-block surface-card\" style=\"border-radius: 10px\">\n                <i class=\"pi pi-globe text-4xl text-blue-500\"></i>\n            </span>\n            <div class=\"text-900 mb-3 font-medium\">Fast & Global Support</div>\n            <span class=\"text-700 text-sm line-height-3\">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>\n        </div>\n        <div class=\"col-12 md:col-4 mb-4 px-5\">\n            <span class=\"p-3 shadow-2 mb-3 inline-block surface-card\" style=\"border-radius: 10px\">\n                <i class=\"pi pi-github text-4xl text-blue-500\"></i>\n            </span>\n            <div class=\"text-900 mb-3 font-medium\">Open Source</div>\n            <span class=\"text-700 text-sm line-height-3\">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>\n        </div>\n        <div class=\"col-12 md:col-4 md:mb-4 mb-0 px-3\">\n            <span class=\"p-3 shadow-2 mb-3 inline-block surface-card\" style=\"border-radius: 10px\">\n                <i class=\"pi pi-shield text-4xl text-blue-500\"></i>\n            </span>\n            <div class=\"text-900 mb-3 font-medium\">Trusted Securitty</div>\n            <span class=\"text-700 text-sm line-height-3\">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>\n        </div>\n    </div>\n</div>`,\n            block3: `\n<div class=\"surface-ground px-4 py-8 md:px-6 lg:px-8\">\n    <div class=\"text-900 font-bold text-6xl mb-4 text-center\">Pricing Plans</div>\n    <div class=\"text-700 text-xl mb-6 text-center line-height-3\">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>\n\n    <div class=\"grid\">\n        <div class=\"col-12 lg:col-4\">\n            <div class=\"p-3 h-full\">\n                <div class=\"shadow-2 p-3 h-full flex flex-column surface-card\" style=\"border-radius: 6px\">\n                    <div class=\"text-900 font-medium text-xl mb-2\">Basic</div>\n                    <div class=\"text-600\">Plan description</div>\n                    <hr class=\"my-3 mx-0 border-top-1 border-none surface-border\" />\n                    <div class=\"flex align-items-center\">\n                        <span class=\"font-bold text-2xl text-900\">$9</span>\n                        <span class=\"ml-2 font-medium text-600\">per month</span>\n                    </div>\n                    <hr class=\"my-3 mx-0 border-top-1 border-none surface-border\" />\n                    <ul class=\"list-none p-0 m-0 flex-grow-1\">\n                        <li class=\"flex align-items-center mb-3\">\n                            <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                            <span>Arcu vitae elementum</span>\n                        </li>\n                        <li class=\"flex align-items-center mb-3\">\n                            <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                            <span>Dui faucibus in ornare</span>\n                        </li>\n                        <li class=\"flex align-items-center mb-3\">\n                            <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                            <span>Morbi tincidunt augue</span>\n                        </li>\n                    </ul>\n                    <hr class=\"mb-3 mx-0 border-top-1 border-none surface-border mt-auto\" />\n                    <Button label=\"Buy Now\" class=\"p-3 w-full mt-auto\"></Button>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"col-12 lg:col-4\">\n            <div class=\"p-3 h-full\">\n                <div class=\"shadow-2 p-3 h-full flex flex-column surface-card\" style=\"border-radius: 6px\">\n                    <div class=\"text-900 font-medium text-xl mb-2\">Premium</div>\n                    <div class=\"text-600\">Plan description</div>\n                    <hr class=\"my-3 mx-0 border-top-1 border-none surface-border\" />\n                    <div class=\"flex align-items-center\">\n                        <span class=\"font-bold text-2xl text-900\">$29</span>\n                        <span class=\"ml-2 font-medium text-600\">per month</span>\n                    </div>\n                    <hr class=\"my-3 mx-0 border-top-1 border-none surface-border\" />\n                    <ul class=\"list-none p-0 m-0 flex-grow-1\">\n                        <li class=\"flex align-items-center mb-3\">\n                            <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                            <span>Arcu vitae elementum</span>\n                        </li>\n                        <li class=\"flex align-items-center mb-3\">\n                            <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                            <span>Dui faucibus in ornare</span>\n                        </li>\n                        <li class=\"flex align-items-center mb-3\">\n                            <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                            <span>Morbi tincidunt augue</span>\n                        </li>\n                        <li class=\"flex align-items-center mb-3\">\n                            <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                            <span>Duis ultricies lacus sed</span>\n                        </li>\n                    </ul>\n                    <hr class=\"mb-3 mx-0 border-top-1 border-none surface-border\" />\n                    <Button label=\"Buy Now\" class=\"p-3 w-full\"></Button>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"col-12 lg:col-4\">\n            <div class=\"p-3 h-full\">\n                <div class=\"shadow-2 p-3 flex flex-column surface-card\" style=\"border-radius: 6px\">\n                    <div class=\"text-900 font-medium text-xl mb-2\">Enterprise</div>\n                    <div class=\"text-600\">Plan description</div>\n                    <hr class=\"my-3 mx-0 border-top-1 border-none surface-border\" />\n                    <div class=\"flex align-items-center\">\n                        <span class=\"font-bold text-2xl text-900\">$49</span>\n                        <span class=\"ml-2 font-medium text-600\">per month</span>\n                    </div>\n                    <hr class=\"my-3 mx-0 border-top-1 border-none surface-border\" />\n                    <ul class=\"list-none p-0 m-0 flex-grow-1\">\n                        <li class=\"flex align-items-center mb-3\">\n                            <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                            <span>Arcu vitae elementum</span>\n                        </li>\n                        <li class=\"flex align-items-center mb-3\">\n                            <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                            <span>Dui faucibus in ornare</span>\n                        </li>\n                        <li class=\"flex align-items-center mb-3\">\n                            <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                            <span>Morbi tincidunt augue</span>\n                        </li>\n                        <li class=\"flex align-items-center mb-3\">\n                            <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                            <span>Duis ultricies lacus sed</span>\n                        </li>\n                        <li class=\"flex align-items-center mb-3\">\n                            <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                            <span>Imperdiet proin</span>\n                        </li>\n                        <li class=\"flex align-items-center mb-3\">\n                            <i class=\"pi pi-check-circle text-green-500 mr-2\"></i>\n                            <span>Nisi scelerisque</span>\n                        </li>\n                    </ul>\n                    <hr class=\"mb-3 mx-0 border-top-1 border-none surface-border\" />\n                    <Button label=\"Buy Now\" class=\"p-3 w-full p-button-outlined\"></Button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>`,\n            block4: `\n<div class=\"surface-section px-4 py-8 md:px-6 lg:px-8\">\n    <div class=\"text-700 text-center\">\n        <div class=\"text-blue-600 font-bold mb-3\"><i class=\"pi pi-discord\"></i>&nbsp;POWERED BY DISCORD</div>\n        <div class=\"text-900 font-bold text-5xl mb-3\">Join Our Design Community</div>\n        <div class=\"text-700 text-2xl mb-5\">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>\n        <Button label=\"Join Now\" icon=\"pi pi-discord\" class=\"font-bold px-5 py-3 p-button-raised p-button-rounded white-space-nowrap\"></Button>\n    </div>\n</div>`,\n            block5: `\n<div class=\"bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap\">\n    <div class=\"font-bold mr-8\">🔥 Hot Deals!</div>\n    <div class=\"align-items-center hidden lg:flex\">\n        <span class=\"line-height-3\">Libero voluptatum atque exercitationem praesentium provident odit.</span>\n    </div>\n    <a class=\"flex align-items-center ml-2 mr-8\">\n        <a class=\"text-white\" href=\"#\"><span class=\"underline font-bold\">Learn More</span></a>\n    </a>\n    <a v-ripple class=\"flex align-items-center no-underline justify-content-center border-circle text-gray-50 hover:bg-bluegray-700 cursor-pointer transition-colors transition-duration-150 p-ripple\" style=\"width:2rem; height: 2rem\">\n        <i class=\"pi pi-times\"></i>\n    </a>\n</div>`,\n            block6: `\n<div class=\"surface-section px-4 py-5 md:px-6 lg:px-8\">\n    <ul class=\"list-none p-0 m-0 flex align-items-center font-medium mb-3\">\n        <li>\n            <a class=\"text-500 no-underline line-height-3 cursor-pointer\">Application</a>\n        </li>\n        <li class=\"px-2\">\n            <i class=\"pi pi-angle-right text-500 line-height-3\"></i>\n        </li>\n        <li>\n            <span class=\"text-900 line-height-3\">Analytics</span>\n        </li>\n    </ul>\n    <div class=\"flex align-items-start flex-column lg:justify-content-between lg:flex-row\">\n        <div>\n            <div class=\"font-medium text-3xl text-900\">Customers</div>\n            <div class=\"flex align-items-center text-700 flex-wrap\">\n                <div class=\"mr-5 flex align-items-center mt-3\">\n                    <i class=\"pi pi-users mr-2\"></i>\n                    <span>332 Active Users</span>\n                </div>\n                <div class=\"mr-5 flex align-items-center mt-3\">\n                    <i class=\"pi pi-globe mr-2\"></i>\n                    <span>9402 Sessions</span>\n                </div>\n                <div class=\"flex align-items-center mt-3\">\n                    <i class=\"pi pi-clock mr-2\"></i>\n                    <span>2.32m Avg. Duration</span>\n                </div>\n            </div>\n        </div>\n        <div class=\"mt-3 lg:mt-0\">\n            <Button label=\"Add\" class=\"p-button-outlined mr-2\" icon=\"pi pi-user-plus\"></Button>\n            <Button label=\"Save\" icon=\"pi pi-check\"></Button>\n        </div>\n    </div>\n</div>`,\n            block7: `\n<div class=\"surface-ground px-4 py-5 md:px-6 lg:px-8\">\n    <div class=\"grid\">\n        <div class=\"col-12 md:col-6 lg:col-3\">\n            <div class=\"surface-card shadow-2 p-3 border-round\">\n                <div class=\"flex justify-content-between mb-3\">\n                    <div>\n                        <span class=\"block text-500 font-medium mb-3\">Orders</span>\n                        <div class=\"text-900 font-medium text-xl\">152</div>\n                    </div>\n                    <div class=\"flex align-items-center justify-content-center bg-blue-100 border-round\" style=\"width:2.5rem;height:2.5rem\">\n                        <i class=\"pi pi-shopping-cart text-blue-500 text-xl\"></i>\n                    </div>\n                </div>\n                <span class=\"text-green-500 font-medium\">24 new </span>\n                <span class=\"text-500\">since last visit</span>\n            </div>\n        </div>\n        <div class=\"col-12 md:col-6 lg:col-3\">\n            <div class=\"surface-card shadow-2 p-3 border-round\">\n                <div class=\"flex justify-content-between mb-3\">\n                    <div>\n                        <span class=\"block text-500 font-medium mb-3\">Revenue</span>\n                        <div class=\"text-900 font-medium text-xl\">$2.100</div>\n                    </div>\n                    <div class=\"flex align-items-center justify-content-center bg-orange-100 border-round\" style=\"width:2.5rem;height:2.5rem\">\n                        <i class=\"pi pi-map-marker text-orange-500 text-xl\"></i>\n                    </div>\n                </div>\n                <span class=\"text-green-500 font-medium\">%52+ </span>\n                <span class=\"text-500\">since last week</span>\n            </div>\n        </div>\n        <div class=\"col-12 md:col-6 lg:col-3\">\n            <div class=\"surface-card shadow-2 p-3 border-round\">\n                <div class=\"flex justify-content-between mb-3\">\n                    <div>\n                        <span class=\"block text-500 font-medium mb-3\">Customers</span>\n                        <div class=\"text-900 font-medium text-xl\">28441</div>\n                    </div>\n                    <div class=\"flex align-items-center justify-content-center bg-cyan-100 border-round\" style=\"width:2.5rem;height:2.5rem\">\n                        <i class=\"pi pi-inbox text-cyan-500 text-xl\"></i>\n                    </div>\n                </div>\n                <span class=\"text-green-500 font-medium\">520  </span>\n                <span class=\"text-500\">newly registered</span>\n            </div>\n        </div>\n        <div class=\"col-12 md:col-6 lg:col-3\">\n            <div class=\"surface-card shadow-2 p-3 border-round\">\n                <div class=\"flex justify-content-between mb-3\">\n                    <div>\n                        <span class=\"block text-500 font-medium mb-3\">Comments</span>\n                        <div class=\"text-900 font-medium text-xl\">152 Unread</div>\n                    </div>\n                    <div class=\"flex align-items-center justify-content-center bg-purple-100 border-round\" style=\"width:2.5rem;height:2.5rem\">\n                        <i class=\"pi pi-comment text-purple-500 text-xl\"></i>\n                    </div>\n                </div>\n                <span class=\"text-green-500 font-medium\">85 </span>\n                <span class=\"text-500\">responded</span>\n            </div>\n        </div>\n    </div>\n</div>`,\n            block8: `\n<div class=\"surface-card p-4 shadow-2 border-round w-full lg:w-6\">\n    <div class=\"text-center mb-5\">\n        <img src=\"images/blocks/logos/hyper.svg\" alt=\"Image\" height=\"50\" class=\"mb-3\">\n        <div class=\"text-900 text-3xl font-medium mb-3\">Welcome Back</div>\n        <span class=\"text-600 font-medium line-height-3\">Don't have an account?</span>\n        <a class=\"font-medium no-underline ml-2 text-blue-500 cursor-pointer\">Create today!</a>\n    </div>\n\n    <div>\n        <label for=\"email1\" class=\"block text-900 font-medium mb-2\">Email</label>\n        <InputText id=\"email1\" type=\"text\" class=\"w-full mb-3\" />\n\n        <label for=\"password1\" class=\"block text-900 font-medium mb-2\">Password</label>\n        <InputText id=\"password1\" type=\"password\" class=\"w-full mb-3\" />\n\n        <div class=\"flex align-items-center justify-content-between mb-6\">\n            <div class=\"flex align-items-center\">\n                <Checkbox id=\"rememberme1\" :binary=\"true\" v-model=\"checked\" class=\"mr-2\"></Checkbox>\n                <label for=\"rememberme1\">Remember me</label>\n            </div>\n            <a class=\"font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer\">Forgot password?</a>\n        </div>\n\n        <Button label=\"Sign In\" icon=\"pi pi-user\" class=\"w-full\"></Button>\n    </div>\n</div>`,\n            block9: `\n<div class=\"surface-section\">\n    <div class=\"font-medium text-3xl text-900 mb-3\">Movie Information</div>\n    <div class=\"text-500 mb-5\">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>\n    <ul class=\"list-none p-0 m-0\">\n        <li class=\"flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap\">\n            <div class=\"text-500 w-6 md:w-2 font-medium\">Title</div>\n            <div class=\"text-900 w-full md:w-8 md:flex-order-0 flex-order-1\">Heat</div>\n            <div class=\"w-6 md:w-2 flex justify-content-end\">\n                <Button label=\"Edit\" icon=\"pi pi-pencil\" class=\"p-button-text\"></Button>\n            </div>\n        </li>\n        <li class=\"flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap\">\n            <div class=\"text-500 w-6 md:w-2 font-medium\">Genre</div>\n            <div class=\"text-900 w-full md:w-8 md:flex-order-0 flex-order-1\">\n                <Chip label=\"Crime\" class=\"mr-2\"></Chip>\n                <Chip label=\"Drama\" class=\"mr-2\"></Chip>\n                <Chip label=\"Thriller\"></Chip>\n            </div>\n            <div class=\"w-6 md:w-2 flex justify-content-end\">\n                <Button label=\"Edit\" icon=\"pi pi-pencil\" class=\"p-button-text\"></Button>\n            </div>\n        </li>\n        <li class=\"flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap\">\n            <div class=\"text-500 w-6 md:w-2 font-medium\">Director</div>\n            <div class=\"text-900 w-full md:w-8 md:flex-order-0 flex-order-1\">Michael Mann</div>\n            <div class=\"w-6 md:w-2 flex justify-content-end\">\n                <Button label=\"Edit\" icon=\"pi pi-pencil\" class=\"p-button-text\"></Button>\n            </div>\n        </li>\n        <li class=\"flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap\">\n            <div class=\"text-500 w-6 md:w-2 font-medium\">Actors</div>\n            <div class=\"text-900 w-full md:w-8 md:flex-order-0 flex-order-1\">Robert De Niro, Al Pacino</div>\n            <div class=\"w-6 md:w-2 flex justify-content-end\">\n                <Button label=\"Edit\" icon=\"pi pi-pencil\" class=\"p-button-text\"></Button>\n            </div>\n        </li>\n        <li class=\"flex align-items-center py-3 px-2 border-top-1 border-bottom-1 surface-border flex-wrap\">\n            <div class=\"text-500 w-6 md:w-2 font-medium\">Plot</div>\n            <div class=\"text-900 w-full md:w-8 md:flex-order-0 flex-order-1 line-height-3\">\n                A group of professional bank robbers start to feel the heat from police\n                when they unknowingly leave a clue at their latest heist.</div>\n            <div class=\"w-6 md:w-2 flex justify-content-end\">\n                <Button label=\"Edit\" icon=\"pi pi-pencil\" class=\"p-button-text\"></Button>\n            </div>\n        </li>\n    </ul>\n</div>`,\n            block10: `\n<div class=\"surface-card p-4 shadow-2 border-round\">\n    <div class=\"text-3xl font-medium text-900 mb-3\">Card Title</div>\n    <div class=\"font-medium text-500 mb-3\">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>\n    <div style=\"height: 150px\" class=\"border-2 border-dashed surface-border\"></div>\n</div>`,\n            checked: false\n        }\n    }\n}\n</script>","import { render } from \"./BlocksDemo.vue?vue&type=template&id=0551c644\"\nimport script from \"./BlocksDemo.vue?vue&type=script&lang=js\"\nexport * from \"./BlocksDemo.vue?vue&type=script&lang=js\"\n\nimport exportComponent from \"/opt/buildhome/repo/node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__"],"sourceRoot":""}