[{"data":1,"prerenderedAt":816},["ShallowReactive",2],{"navigation":3,"\u002Fdocumentation\u002Fcustomization":90,"\u002Fdocumentation\u002Fcustomization-surround":811},[4,73],{"title":5,"path":6,"stem":7,"children":8,"icon":72},"Documentation","\u002Fdocumentation","1.documentation\u002F01.index",[9,12,17,22,27,32,37,42,47,52,57,62,67],{"title":10,"path":6,"stem":7,"icon":11},"Welcome","i-lucide-info",{"title":13,"path":14,"stem":15,"icon":16},"Requirements","\u002Fdocumentation\u002Frequirements","1.documentation\u002F02.requirements","i-lucide-alert-triangle",{"title":18,"path":19,"stem":20,"icon":21},"Getting Started","\u002Fdocumentation\u002Fgetting-started","1.documentation\u002F03.getting-started","i-lucide-package",{"title":23,"path":24,"stem":25,"icon":26},"Folder Structure","\u002Fdocumentation\u002Ffolder-structure","1.documentation\u002F04.folder-structure","i-lucide-folder-tree",{"title":28,"path":29,"stem":30,"icon":31},"Customization","\u002Fdocumentation\u002Fcustomization","1.documentation\u002F05.customization","i-lucide-palette",{"title":33,"path":34,"stem":35,"icon":36},"Deployment","\u002Fdocumentation\u002Fdeployment","1.documentation\u002F06.deployment","i-lucide-cloud-upload",{"title":38,"path":39,"stem":40,"icon":41},"API Usage","\u002Fdocumentation\u002Fapi-usage","1.documentation\u002F07.api-usage","i-lucide-plug",{"title":43,"path":44,"stem":45,"icon":46},"Backend Integration","\u002Fdocumentation\u002Fbackend-integration","1.documentation\u002F08.backend-integration","i-lucide-server",{"title":48,"path":49,"stem":50,"icon":51},"Install PWA","\u002Fdocumentation\u002Finstall-pwa","1.documentation\u002F09.install-pwa","i-lucide-smartphone",{"title":53,"path":54,"stem":55,"icon":56},"Configuration","\u002Fdocumentation\u002Fconfiguration","1.documentation\u002F10.configuration","i-lucide-settings",{"title":58,"path":59,"stem":60,"icon":61},"Screens Overview","\u002Fdocumentation\u002Fscreens-overview","1.documentation\u002F11.screens-overview","i-lucide-layout-dashboard",{"title":63,"path":64,"stem":65,"icon":66},"FAQ & Troubleshooting","\u002Fdocumentation\u002Ffaq","1.documentation\u002F12.faq","i-lucide-circle-help",{"title":68,"path":69,"stem":70,"icon":71},"Authentication","\u002Fdocumentation\u002Fauthentication","1.documentation\u002F13.authentication","i-lucide-lock",false,{"title":74,"path":75,"stem":76,"children":77,"icon":72},"Support","\u002Fsupport","2.support\u002F1.index",[78,80,85],{"title":74,"path":75,"stem":76,"icon":79},"i-lucide-life-buoy",{"title":81,"path":82,"stem":83,"icon":84},"Changelog","\u002Fsupport\u002Fchangelog","2.support\u002F2.changelog","i-lucide-scroll-text",{"title":86,"path":87,"stem":88,"icon":89},"Source & Credits","\u002Fsupport\u002Fsource-and-credits","2.support\u002F3.source-&-credits","i-lucide-award",{"id":91,"title":28,"body":92,"description":804,"extension":805,"links":806,"meta":807,"navigation":808,"path":29,"seo":809,"stem":30,"__hash__":810},"docs\u002F1.documentation\u002F05.customization.md",{"type":93,"value":94,"toc":796},"minimark",[95,99,104,112,119,189,194,201,470,474,481,596,606,610,616,631,635,650,793],[96,97,98],"p",{},"The project supports full customization including styling via SCSS variables and asset management.",[100,101,103],"h2",{"id":102},"global-styles","Global Styles",[96,105,106,107,111],{},"Global styles and SCSS files are located in the ",[108,109,110],"code",{},"app\u002Fassets\u002Fscss\u002F"," folder. This is where you control the overall look and feel of the application.",[96,113,114],{},[115,116],"img",{"alt":117,"src":118},"SCSS Folder","\u002Fimages\u002F03.png",[120,121,122,135],"table",{},[123,124,125],"thead",{},[126,127,128,132],"tr",{},[129,130,131],"th",{},"File",[129,133,134],{},"Purpose",[136,137,138,149,159,169,179],"tbody",{},[126,139,140,146],{},[141,142,143],"td",{},[108,144,145],{},"_variables.scss",[141,147,148],{},"Design tokens: colors, spacing, sizes",[126,150,151,156],{},[141,152,153],{},[108,154,155],{},"_reset.scss",[141,157,158],{},"Resets default browser styles",[126,160,161,166],{},[141,162,163],{},[108,164,165],{},"_typography.scss",[141,167,168],{},"Font families, sizes, and text styles",[126,170,171,176],{},[141,172,173],{},[108,174,175],{},"_global.scss",[141,177,178],{},"Global element and utility styles",[126,180,181,186],{},[141,182,183],{},[108,184,185],{},"main.scss",[141,187,188],{},"Entry point — imports all partials above",[190,191,193],"h3",{"id":192},"edit-scss-variables","Edit SCSS Variables",[96,195,196,197,200],{},"Customize the appearance of the entire application by editing variables in ",[108,198,199],{},"app\u002Fassets\u002Fscss\u002F_variables.scss",":",[202,203,208],"pre",{"className":204,"code":205,"filename":199,"language":206,"meta":207,"style":207},"language-scss shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Colors\n$white-color: #fff;\n$main-yellow: #f5c102;\n$tomato-color: #fe724e;\n$border-color: #efe4ca;\n$main-color: #0f1620;\n$gainsboro-color: #dadfe2;\n$text-color: #6c757d;\n$accent-color: #ff4343;\n$alabaster-color: #efede6;\n$background-color: #efede6;\n$error-color: #e74c3c;\n$platinum-color: #e2e2e2;\n$cerulean-frost-color: #60a2d5;\n\n\u002F\u002F Layout\n$screen-width: 600px;\n$header-height: 42px;\n$border-radius: 10px;\n","scss","",[108,209,210,219,238,253,268,283,298,313,328,343,358,372,387,402,417,424,430,444,457],{"__ignoreMap":207},[211,212,215],"span",{"class":213,"line":214},"line",1,[211,216,218],{"class":217},"sHwdD","\u002F\u002F Colors\n",[211,220,222,226,229,232,235],{"class":213,"line":221},2,[211,223,225],{"class":224},"sTEyZ","$white-color",[211,227,200],{"class":228},"sMK4o",[211,230,231],{"class":228}," #",[211,233,234],{"class":224},"fff",[211,236,237],{"class":228},";\n",[211,239,241,244,246,248,251],{"class":213,"line":240},3,[211,242,243],{"class":224},"$main-yellow",[211,245,200],{"class":228},[211,247,231],{"class":228},[211,249,250],{"class":224},"f5c102",[211,252,237],{"class":228},[211,254,256,259,261,263,266],{"class":213,"line":255},4,[211,257,258],{"class":224},"$tomato-color",[211,260,200],{"class":228},[211,262,231],{"class":228},[211,264,265],{"class":224},"fe724e",[211,267,237],{"class":228},[211,269,271,274,276,278,281],{"class":213,"line":270},5,[211,272,273],{"class":224},"$border-color",[211,275,200],{"class":228},[211,277,231],{"class":228},[211,279,280],{"class":224},"efe4ca",[211,282,237],{"class":228},[211,284,286,289,291,293,296],{"class":213,"line":285},6,[211,287,288],{"class":224},"$main-color",[211,290,200],{"class":228},[211,292,231],{"class":228},[211,294,295],{"class":224},"0f1620",[211,297,237],{"class":228},[211,299,301,304,306,308,311],{"class":213,"line":300},7,[211,302,303],{"class":224},"$gainsboro-color",[211,305,200],{"class":228},[211,307,231],{"class":228},[211,309,310],{"class":224},"dadfe2",[211,312,237],{"class":228},[211,314,316,319,321,323,326],{"class":213,"line":315},8,[211,317,318],{"class":224},"$text-color",[211,320,200],{"class":228},[211,322,231],{"class":228},[211,324,325],{"class":224},"6c757d",[211,327,237],{"class":228},[211,329,331,334,336,338,341],{"class":213,"line":330},9,[211,332,333],{"class":224},"$accent-color",[211,335,200],{"class":228},[211,337,231],{"class":228},[211,339,340],{"class":224},"ff4343",[211,342,237],{"class":228},[211,344,346,349,351,353,356],{"class":213,"line":345},10,[211,347,348],{"class":224},"$alabaster-color",[211,350,200],{"class":228},[211,352,231],{"class":228},[211,354,355],{"class":224},"efede6",[211,357,237],{"class":228},[211,359,361,364,366,368,370],{"class":213,"line":360},11,[211,362,363],{"class":224},"$background-color",[211,365,200],{"class":228},[211,367,231],{"class":228},[211,369,355],{"class":224},[211,371,237],{"class":228},[211,373,375,378,380,382,385],{"class":213,"line":374},12,[211,376,377],{"class":224},"$error-color",[211,379,200],{"class":228},[211,381,231],{"class":228},[211,383,384],{"class":224},"e74c3c",[211,386,237],{"class":228},[211,388,390,393,395,397,400],{"class":213,"line":389},13,[211,391,392],{"class":224},"$platinum-color",[211,394,200],{"class":228},[211,396,231],{"class":228},[211,398,399],{"class":224},"e2e2e2",[211,401,237],{"class":228},[211,403,405,408,410,412,415],{"class":213,"line":404},14,[211,406,407],{"class":224},"$cerulean-frost-color",[211,409,200],{"class":228},[211,411,231],{"class":228},[211,413,414],{"class":224},"60a2d5",[211,416,237],{"class":228},[211,418,420],{"class":213,"line":419},15,[211,421,423],{"emptyLinePlaceholder":422},true,"\n",[211,425,427],{"class":213,"line":426},16,[211,428,429],{"class":217},"\u002F\u002F Layout\n",[211,431,433,436,438,442],{"class":213,"line":432},17,[211,434,435],{"class":224},"$screen-width",[211,437,200],{"class":228},[211,439,441],{"class":440},"sbssI"," 600px",[211,443,237],{"class":228},[211,445,447,450,452,455],{"class":213,"line":446},18,[211,448,449],{"class":224},"$header-height",[211,451,200],{"class":228},[211,453,454],{"class":440}," 42px",[211,456,237],{"class":228},[211,458,460,463,465,468],{"class":213,"line":459},19,[211,461,462],{"class":224},"$border-radius",[211,464,200],{"class":228},[211,466,467],{"class":440}," 10px",[211,469,237],{"class":228},[100,471,473],{"id":472},"scoped-styles","Scoped Styles",[96,475,476,477,480],{},"Each component can have its own local styles inside a ",[108,478,479],{},"\u003Cstyle scoped>"," block. Scoped styles apply only to the current component and do not affect other parts of the application.",[202,482,487],{"className":483,"code":484,"filename":485,"language":486,"meta":207,"style":207},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cstyle scoped lang=\"scss\">\n@use \"@\u002Fassets\u002Fscss\u002Fvariables\" as *;\n\n.container {\n  padding: 16px;\n  background-color: $background-color;\n}\n\u003C\u002Fstyle>\n","app\u002Fpages\u002Fhome.vue","vue",[108,488,489,519,541,545,557,570,582,587],{"__ignoreMap":207},[211,490,491,494,498,502,505,508,511,514,516],{"class":213,"line":214},[211,492,493],{"class":228},"\u003C",[211,495,497],{"class":496},"swJcz","style",[211,499,501],{"class":500},"spNyl"," scoped",[211,503,504],{"class":500}," lang",[211,506,507],{"class":228},"=",[211,509,510],{"class":228},"\"",[211,512,206],{"class":513},"sfazB",[211,515,510],{"class":228},[211,517,518],{"class":228},">\n",[211,520,521,525,528,531,533,536,539],{"class":213,"line":221},[211,522,524],{"class":523},"s7zQu","@use",[211,526,527],{"class":228}," \"",[211,529,530],{"class":513},"@\u002Fassets\u002Fscss\u002Fvariables",[211,532,510],{"class":228},[211,534,535],{"class":523}," as",[211,537,538],{"class":224}," *",[211,540,237],{"class":228},[211,542,543],{"class":213,"line":240},[211,544,423],{"emptyLinePlaceholder":422},[211,546,547,550,554],{"class":213,"line":255},[211,548,549],{"class":228},".",[211,551,553],{"class":552},"sBMFI","container",[211,555,556],{"class":228}," {\n",[211,558,559,563,565,568],{"class":213,"line":270},[211,560,562],{"class":561},"sqsOY","  padding",[211,564,200],{"class":228},[211,566,567],{"class":440}," 16px",[211,569,237],{"class":228},[211,571,572,575,577,580],{"class":213,"line":285},[211,573,574],{"class":561},"  background-color",[211,576,200],{"class":228},[211,578,579],{"class":224}," $background-color",[211,581,237],{"class":228},[211,583,584],{"class":213,"line":300},[211,585,586],{"class":228},"}\n",[211,588,589,592,594],{"class":213,"line":315},[211,590,591],{"class":228},"\u003C\u002F",[211,593,497],{"class":496},[211,595,518],{"class":228},[597,598,600],"callout",{"color":599,"icon":11},"info",[96,601,602,603,605],{},"Use global SCSS variables for shared design tokens and ",[108,604,479],{}," for layout or element-level adjustments unique to a specific page or component.",[100,607,609],{"id":608},"local-assets","Local Assets",[96,611,612,613,200],{},"Static assets are organized inside ",[108,614,615],{},"app\u002Fassets\u002F",[617,618,619,626],"ul",{},[620,621,622,625],"li",{},[108,623,624],{},"app\u002Fassets\u002Fimages\u002F"," — reserved for local image files (currently empty — the template ships without any)",[620,627,628,630],{},[108,629,110],{}," — global stylesheets",[100,632,634],{"id":633},"how-to-change-images","How to Change Images",[96,636,637,638,641,642,645,646,649],{},"All images in the template render through the ",[108,639,640],{},"\u003CNuxtImg>"," component from ",[108,643,644],{},"@nuxt\u002Fimage",", and product\u002Favatar images currently point to external URLs (e.g. ",[108,647,648],{},"app\u002Fmocks\u002Fproducts.json",") rather than local files.",[651,652,653,657,667,749,753,759],"steps",{},[190,654,656],{"id":655},"replace-an-image-url","Replace an Image URL",[96,658,659,660,662,663,666],{},"Find the ",[108,661,640],{}," tag in the relevant ",[108,664,665],{},".vue"," file, or the URL in the relevant mock JSON file, and swap it with your own:",[202,668,670],{"className":483,"code":669,"language":486,"meta":207,"style":207},"\u003C!-- Before -->\n\u003CNuxtImg src=\"https:\u002F\u002Fold-image-url.com\u002Fphoto.jpg\" alt=\"description\" \u002F>\n\n\u003C!-- After -->\n\u003CNuxtImg src=\"https:\u002F\u002Fyour-new-url.com\u002Fphoto.jpg\" alt=\"description\" \u002F>\n",[108,671,672,677,711,715,720],{"__ignoreMap":207},[211,673,674],{"class":213,"line":214},[211,675,676],{"class":217},"\u003C!-- Before -->\n",[211,678,679,681,684,687,689,691,694,696,699,701,703,706,708],{"class":213,"line":221},[211,680,493],{"class":228},[211,682,683],{"class":496},"NuxtImg",[211,685,686],{"class":500}," src",[211,688,507],{"class":228},[211,690,510],{"class":228},[211,692,693],{"class":513},"https:\u002F\u002Fold-image-url.com\u002Fphoto.jpg",[211,695,510],{"class":228},[211,697,698],{"class":500}," alt",[211,700,507],{"class":228},[211,702,510],{"class":228},[211,704,705],{"class":513},"description",[211,707,510],{"class":228},[211,709,710],{"class":228}," \u002F>\n",[211,712,713],{"class":213,"line":240},[211,714,423],{"emptyLinePlaceholder":422},[211,716,717],{"class":213,"line":255},[211,718,719],{"class":217},"\u003C!-- After -->\n",[211,721,722,724,726,728,730,732,735,737,739,741,743,745,747],{"class":213,"line":270},[211,723,493],{"class":228},[211,725,683],{"class":496},[211,727,686],{"class":500},[211,729,507],{"class":228},[211,731,510],{"class":228},[211,733,734],{"class":513},"https:\u002F\u002Fyour-new-url.com\u002Fphoto.jpg",[211,736,510],{"class":228},[211,738,698],{"class":500},[211,740,507],{"class":228},[211,742,510],{"class":228},[211,744,705],{"class":513},[211,746,510],{"class":228},[211,748,710],{"class":228},[190,750,752],{"id":751},"use-a-local-image-instead","Use a Local Image Instead",[96,754,755,756,758],{},"To serve an image from ",[108,757,624],{}," instead of an external URL, place the file there and reference it the same way:",[202,760,762],{"className":483,"code":761,"language":486,"meta":207,"style":207},"\u003CNuxtImg src=\"~\u002Fassets\u002Fimages\u002Fyour-image.png\" alt=\"description\" \u002F>\n",[108,763,764],{"__ignoreMap":207},[211,765,766,768,770,772,774,776,779,781,783,785,787,789,791],{"class":213,"line":214},[211,767,493],{"class":228},[211,769,683],{"class":496},[211,771,686],{"class":500},[211,773,507],{"class":228},[211,775,510],{"class":228},[211,777,778],{"class":513},"~\u002Fassets\u002Fimages\u002Fyour-image.png",[211,780,510],{"class":228},[211,782,698],{"class":500},[211,784,507],{"class":228},[211,786,510],{"class":228},[211,788,705],{"class":513},[211,790,510],{"class":228},[211,792,710],{"class":228},[497,794,795],{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":207,"searchDepth":214,"depth":221,"links":797},[798,801,802,803],{"id":102,"depth":221,"text":103,"children":799},[800],{"id":192,"depth":240,"text":193},{"id":472,"depth":221,"text":473},{"id":608,"depth":221,"text":609},{"id":633,"depth":221,"text":634},"Customize the project's appearance, assets, colors, and global styles.","md",null,{},{"icon":31},{"title":28,"description":804},"3EvQTSWpYuM8fzAIZccNCovk6to_HpwKwzRqzCsm8X4",[812,814],{"title":23,"path":24,"stem":25,"description":813,"icon":26,"children":-1},"Overview of the project directory structure and file organization.",{"title":33,"path":34,"stem":35,"description":815,"icon":36,"children":-1},"Build and deploy the project for production using recommended methods.",1784271367331]