summary checkout

.prettierrc

@@ -1,3 +0,0 @@
-{
-  "plugins": ["prettier-plugin-tailwindcss"]
-}

app.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="main bg-bg-light text-text-light dark:text-text-dark dark:bg-bg-dark"
-  >
+  <div class="main bg-bg-light text-text-light dark:text-text-dark dark:bg-bg-dark">
     <UApp>
       <NuxtLayout>
         <NuxtPage />
@@ -9,4 +7,8 @@
     </UApp>
   </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const userStore = useUserStore()
+
+await userStore.checkIsLogged()
+</script>

assets/fonts.css

@@ -1,7 +0,0 @@
-@font-face {
-  font-family: "Bounded";
-  src: url("/fonts/Bounded/Bounded-Variable.ttf") format("truetype");
-  font-weight: 100 900;
-  font-style: normal;
-  font-display: swap;
-}

assets/main.css

@@ -16,6 +16,12 @@
   --color-text-light: #1a1a1a;
   --color-text-dark: #fffefb;
 
+  --color-block: #E8E7E0;
+
+  --color-accent-green-light: #004F3D;
+  --color-accent-green-dark: #008567;
+
+  --color-gray: #6B6B6B;
   /* button */
   --color-button: #9a7f62;
   --color-button-hover: #b7946d;
@@ -27,14 +33,41 @@
     @apply font-bounded text-[24px] leading-[140%] font-bold uppercase md:text-[48px] xl:text-[64px];
   }
 
-  .h4-uppercase {
+  .h1-big {
+    @apply font-bounded text-[32px] leading-[140%] font-bold uppercase sm:text-[48px] xl:text-[64px];
+  }
+
+  .h2-bold-bounded {
+    @apply font-bounded text-[24px] leading-[150%] md:leading-[120%] font-bold sm:text-[36px] md:text-[40px];
+  }
+
+  .h4-uppercase-bold-inter {
     @apply font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] md:text-[24px];
   }
-}
 
-.text-inter {
-  font-family: var(--font-inter);
-  line-height: 150%;
+  .text-bold-24 {
+    @apply font-inter text-[17px] sm:text-[21px] md:text-2xl leading-[150%] font-bold;
+  }
+
+  .text-inter {
+    @apply font-inter text-sm sm:text-lg leading-[150%];
+  }
+
+  .space-25-55-75 {
+    @apply space-y-[25px] sm:space-y-[55px] md:space-y-[75px]
+  }
+
+  .space-25-55 {
+    @apply space-y-[25px] sm:space-y-[55px]
+  }
+
+  .space-25-75 {
+    @apply space-y-[25px] sm:space-y-[75px]
+  }
+
+  .space-55-75 {
+    @apply space-y-[55px] sm:space-y-[75px]
+  }
 }
 
 .main {

assets/toastify-custom.css

@@ -0,0 +1,51 @@
+/* ===== Base toast style (applies to all toasts) ===== */
+.Toastify__toast {
+    font-family: var(--font-inter);
+    background-color: var(--color-bg-light);
+    border: 2px solid var(--color-block);
+    color: var(--color-bg-dark);
+    border-radius: 8px;
+    box-shadow: none;
+}
+
+/* ===== Base toast style for dark mode ===== */
+.dark .Toastify__toast {
+    background-color: var(--color-bg-dark);
+    border: 1px solid var(--color-block);
+    color: #ffffff;
+}
+
+/* ===== Error toast: red background and white text ===== */
+.Toastify__toast--error {
+    background-color: var(--color-bg-light);
+}
+
+/* ===== Error toast in dark mode: darker red background ===== */
+.dark .Toastify__toast--error {
+    background-color: var(--color-bg-dark);
+}
+
+/* ===== Default progress bar color (used for success and others) ===== */
+.Toastify__progress-bar {
+    background-color: var(--color-accent-green-dark);
+}
+
+/* ===== Error toast: custom progress bar color ===== */
+.Toastify__toast--error .Toastify__progress-bar {
+    background-color: #dc3545;
+}
+
+/* ===== Success toast: icon color ===== */
+.Toastify__toast--success .Toastify__toast-icon svg {
+    fill: var(--color-accent-green-dark);
+}
+
+/* ===== Error toast: icon color ===== */
+.Toastify__toast--error .Toastify__toast-icon svg {
+    fill: #dc3545;
+}
+
+/* ===== Close button color in dark mode ===== */
+.dark .Toastify__close-button {
+    color: #fff;
+}

backend/custom/cloudflare/TurnStilleCaptcha.js

@@ -1,82 +0,0 @@
-export class TurnStilleCaptcha {
-  sitekey = "{{.SiteKey}}";
-  /**
-   * Initializes the TurnStilleCaptcha instance.
-   * Creates a container for the captcha and appends it to the target element.
-   * If the Cloudflare Turnstile script is already loaded, it runs the captcha.
-   * Otherwise, it loads the script and initializes the captcha with the given properties.
-   * @param {HTMLElement} target - The element to attach the captcha container to.
-   * @param {Object} [props={}] - Optional properties for captcha initialization, such as theme.
-   */
-
-  constructor(target, props = {}) {
-    // create holder
-    this.holder = document.createElement("div");
-    this.holder.id = "turnstile-container";
-    this.theme = props.theme || "auto";
-    target.appendChild(this.holder);
-
-
-    // execute code
-    if (window.turnstile) {
-      this.runCaptcha();
-    } else {
-      this.loadCloudflareScript();
-    }
-  }
-  runCaptcha() {
-    setTimeout(() => {
-    if (globalThis.turnstileInstance) {
-      window.turnstile.remove(globalThis.turnstileInstance);
-    }
-      globalThis.turnstileInstance = window.turnstile.render(this.holder, {
-        sitekey: this.sitekey,
-        theme: this.theme,
-        callback: (token) => {
-          if (token) {
-            const event = new CustomEvent("token", {
-              detail: token,
-              bubbles: true,
-            });
-            this.holder.dispatchEvent(event);
-          }
-        },
-        error: (error) => {
-          const event = new CustomEvent("failure", {
-            detail: error,
-            bubbles: true,
-          });
-          this.holder.dispatchEvent(event);
-          window.turnstile.reset(globalThis.turnstileInstance);
-        },
-      });
-    }, 1000);
-  }
-
-  loadCloudflareScript() {
-    const script = document.createElement("script");
-    script.id = "turnstile-script";
-    script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js";
-    // script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
-    script.async = true;
-    script.defer = true;
-
-    script.onload = () => {
-      const event = new CustomEvent("loaded", {
-        detail: "Turnstile script loaded",
-        bubbles: true,
-      });
-      this.holder.dispatchEvent(event);
-
-      this.runCaptcha();
-    };
-    script.onerror = () => {
-      const event = new CustomEvent("failure", {
-        detail: "Failed to load Turnstile script",
-        bubbles: true,
-      });
-      this.holder.dispatchEvent(event);
-    };
-    document.head.appendChild(script);
-  }
-}

backend/custom/cloudflare/cloudflare.go

@@ -1,95 +0,0 @@
-package cloudflare
-
-import (
-	"bytes"
-	"encoding/json"
-	"errors"
-	"html/template"
-	"io"
-	"net/http"
-	"strings"
-
-	"github.com/pocketbase/pocketbase"
-	"github.com/pocketbase/pocketbase/core"
-	"github.com/pocketbase/pocketbase/tools/router"
-)
-
-var VerifyUrl = "https://challenges.cloudflare.com/turnstile/v0/siteverify"
-
-type TurnstileResponse struct {
-	Success     bool     `json:"success"`
-	ErrorCodes  []string `json:"error-codes,omitempty"`
-	ChallengeTS string   `json:"challenge_ts,omitempty"`
-	Hostname    string   `json:"hostname,omitempty"`
-}
-
-type TurnStilleCaptcha struct {
-	SiteKey   string
-	SecretKey string
-}
-
-func ServeTurnstilleCaptchaJS(app *pocketbase.PocketBase, se *core.ServeEvent) *router.Route[*core.RequestEvent] {
-	return se.Router.GET("/api/email/script.js", func(e *core.RequestEvent) error {
-		// www.abrasive.ma-al.pl
-		// siteKey:   "0x4AAAAAABdgeAdu4Pxxovj3"
-		// secretKey: "0x4AAAAAABdgeHJDjMwmeX5aXaXGh6HWZbw"
-
-		settings, err := GetSettings(app)
-		if err != nil {
-			return err
-		}
-
-		file, err := JS.ReadFile("TurnStilleCaptcha.js")
-		if err != nil {
-			return err
-		}
-		templ, err := template.New("test").Parse(string(file))
-
-		buf := bytes.Buffer{}
-		templ.Execute(&buf, map[string]interface{}{
-			"SiteKey": settings.SiteKey,
-		})
-		if err != nil {
-			return err
-		}
-
-		e.Response.Header().Set("Content-Type", "application/javascript")
-		return e.String(http.StatusOK, buf.String())
-	})
-}
-
-func GetSettings(app *pocketbase.PocketBase) (*TurnStilleCaptcha, error) {
-	record, err := app.FindFirstRecordByFilter("settings", "key='turnstile'", nil)
-
-	settings := TurnStilleCaptcha{}
-	json.Unmarshal([]byte(record.GetString("value")), &settings)
-
-	if err != nil {
-		return nil, err
-	}
-
-	return &settings, nil
-}
-
-func VerifyTurnstile(app *pocketbase.PocketBase, token, ip string) error {
-	conf, err := GetSettings(app)
-	if err != nil {
-		return err
-	}
-
-	data := map[string]string{"secret": conf.SecretKey, "response": token, "remoteip": ip}
-	jsonData, _ := json.Marshal(data)
-	resp, err := http.Post(VerifyUrl, "application/json", bytes.NewBuffer(jsonData))
-	if err != nil {
-		return err
-	}
-	defer resp.Body.Close()
-	var turnstileResp TurnstileResponse
-	body, _ := io.ReadAll(resp.Body)
-	json.Unmarshal(body, &turnstileResp)
-
-	if !turnstileResp.Success {
-		return errors.New(turnstileResp.ChallengeTS + ": " + strings.Join(turnstileResp.ErrorCodes, " "))
-	}
-	return nil
-}

backend/custom/cloudflare/js.go

@@ -1,8 +0,0 @@
-package cloudflare
-
-import (
-	"embed"
-)
-
-//go:embed TurnStilleCaptcha.js
-var JS embed.FS

backend/custom/custom.go

@@ -1,61 +0,0 @@
-package custom
-
-import (
-	"pocketbase/custom/cloudflare"
-	"pocketbase/custom/gtm"
-	"pocketbase/custom/mail"
-	"pocketbase/custom/manifest"
-	"pocketbase/custom/proxy"
-	"pocketbase/custom/seo"
-	"pocketbase/custom/supervise"
-	"pocketbase/custom/version"
-	webpconverter "pocketbase/custom/webpConverter"
-
-	"github.com/pocketbase/pocketbase"
-	"github.com/pocketbase/pocketbase/core"
-)
-
-func LoadCustomCode(app *pocketbase.PocketBase, se *core.ServeEvent) error {
-
-	// include supervised subprocess if command provided
-	supervise.ServeSubprocessSupervisor(app, se)
-
-	// include serving js code from cloudflare
-	cloudflare.ServeTurnstilleCaptchaJS(app, se)
-
-	// include sending emails service
-	mail.ServeMailSender(app, se)
-
-	// include robots.txt endpoint
-	seo.ServeRobotsTxt(app, se)
-
-	// include feeds endpoint
-	seo.ServeFeeds(app, se)
-	seo.ServeFeedsIndex(app, se)
-
-	// include proxy to serve nuxt app
-	proxy.ServeProxyPassingToNuxt(app, se)
-
-	// create endpoint to serve version information
-	version.ServeVersionInfo(app, se)
-
-	// include endpoint to server GTM script
-	gtm.ServeTagMangerJS(app, se)
-
-	// include endpoint serving manifest
-	manifest.ServeManifst(app, se)
-
-	return nil
-}
-
-func ExtendApp(app *pocketbase.PocketBase) *pocketbase.PocketBase {
-	app.RootCmd.PersistentFlags().String("proxy", "", "inner proxy target")
-	app.RootCmd.PersistentFlags().String("subcommand", "", "provide command with params like cli that will be executed and supervised by main process")
-
-	// include webp converter
-	app.OnRecordCreate().Bind(webpconverter.CreateEventHandler(app))
-	app.OnRecordUpdate().Bind(webpconverter.CreateEventHandler(app))
-	app.OnFileDownloadRequest().Bind(webpconverter.ThumbEventHandler(app))
-
-	return app
-}

backend/custom/gtm/gtm.go

@@ -1,56 +0,0 @@
-package gtm
-
-import (
-	"bytes"
-	"encoding/json"
-	"net/http"
-	"text/template"
-
-	"github.com/pocketbase/pocketbase"
-	"github.com/pocketbase/pocketbase/core"
-	"github.com/pocketbase/pocketbase/tools/router"
-)
-
-func ServeTagMangerJS(app *pocketbase.PocketBase, se *core.ServeEvent) *router.Route[*core.RequestEvent] {
-	return se.Router.GET("/api/gtm/script.js", func(e *core.RequestEvent) error {
-
-		settings, err := GetSettings(app)
-		if err != nil {
-			return err
-		}
-
-		file, err := JS.ReadFile("gtm.js")
-		if err != nil {
-			return err
-		}
-		templ, err := template.New("test").Parse(string(file))
-
-		buf := bytes.Buffer{}
-		templ.Execute(&buf, map[string]interface{}{
-			"GtagID": settings.GtagID,
-		})
-		if err != nil {
-			return err
-		}
-
-		e.Response.Header().Set("Content-Type", "application/javascript")
-		return e.String(http.StatusOK, buf.String())
-	})
-}
-
-type GTagSettings struct {
-	GtagID string `json:"gtagID"`
-}
-
-func GetSettings(app *pocketbase.PocketBase) (*GTagSettings, error) {
-	record, err := app.FindFirstRecordByFilter("settings", "key='gtagID'", nil)
-
-	settings := GTagSettings{}
-	json.Unmarshal([]byte(record.GetString("value")), &settings)
-
-	if err != nil {
-		return nil, err
-	}
-
-	return &settings, nil
-}

backend/custom/gtm/gtm.js

@@ -1,29 +0,0 @@
-export class GTM {
-  gtagID = "{{.GtagID}}";
-
-  constructor() {
-    this.insertScript(window, document, 'script', 'dataLayer', this.gtagID);
-    this.insertNoScript();
-  }
-
-
-  insertScript(w, d, s, l, i) {
-    w[l] = w[l] || []; w[l].push({
-      'gtm.start':
-        new Date().getTime(), event: 'gtm.js'
-    }); var f = d.getElementsByTagName(s)[0],
-      j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
-        'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
-  }
-
-  insertNoScript() {
-    const noscript = document.createElement("noscript");
-    const iframe = document.createElement("iframe");
-    iframe.src = "https://www.googletagmanager.com/ns.html?id=" + this.gtagID;
-    iframe.height = 0;
-    iframe.width = 0;
-    iframe.style = "display:none;visibility:hidden";
-    noscript.appendChild(iframe);
-    document.body.appendChild(noscript);
-  }
-}

backend/custom/gtm/js.go

@@ -1,8 +0,0 @@
-package gtm
-
-import (
-	"embed"
-)
-
-//go:embed gtm.js
-var JS embed.FS

backend/custom/mail/mail.go

@@ -1,175 +0,0 @@
-package mail
-
-import (
-	"bytes"
-	"encoding/json"
-	"fmt"
-	"net"
-	"net/http"
-	"net/mail"
-	"pocketbase/custom/cloudflare"
-	"strings"
-	"text/template"
-	"time"
-
-	"github.com/pocketbase/pocketbase"
-	"github.com/pocketbase/pocketbase/core"
-	"github.com/pocketbase/pocketbase/tools/mailer"
-	"github.com/pocketbase/pocketbase/tools/router"
-)
-
-type EmailData struct {
-	Name    string `json:"name"`
-	Email   string `json:"email"`
-	Token   string `json:"token"`
-	Message string `json:"message"`
-	Phone   string `json:"phone"`
-	LangIso string `json:"lang_iso"`
-}
-
-type MailsSettings struct {
-	ReceiverMail string `json:"receiver_mail"`
-	ReceiverName string `json:"receiver_name"`
-	Subject      string `json:"subject"`
-}
-
-func ServeMailSender(app *pocketbase.PocketBase, se *core.ServeEvent) *router.Route[*core.RequestEvent] {
-	return se.Router.POST("/api/email/send", func(e *core.RequestEvent) error {
-		// name := e.Request.PathValue("name")
-
-		data := EmailData{}
-		if err := e.BindBody(&data); err != nil {
-			e.Response.Header().Set("Content-Type", "application/json")
-			app.Logger().Error(err.Error(), "type", "mail")
-			return e.JSON(http.StatusBadRequest, map[string]string{"error": err.Error()})
-		}
-
-		if pass, err := validateMX(data.Email); !pass && err != nil {
-			e.Response.Header().Set("Content-Type", "application/json")
-			app.Logger().Error("Invalid email address.", "type", "mail", "error", err.Error())
-			return e.JSON(http.StatusBadRequest, map[string]string{"error": "Invalid email address."})
-		}
-
-		// fmt.Printf("e.Request.Body: %v IP: %s\n", data, e.RealIP())
-
-		err := cloudflare.VerifyTurnstile(app, data.Token, e.RealIP())
-		if err != nil {
-			e.Response.Header().Set("Content-Type", "application/json")
-			app.Logger().Error("Captcha verification failed.", "type", "mail", "error", err.Error())
-			return e.JSON(http.StatusBadRequest, map[string]string{"error": "Captcha verification failed."})
-		}
-
-		eamil_body, err := app.FindFirstRecordByFilter("email_template", fmt.Sprintf("name='contact_form'&&id_lang='%s'", data.LangIso), nil)
-		if err != nil {
-			e.Response.Header().Set("Content-Type", "application/json")
-			app.Logger().Error("Template not available", "type", "mail", "error", err.Error())
-			return e.JSON(http.StatusBadRequest, map[string]string{"error": "Template not available"})
-		}
-		templ, err := template.New("test").Parse(eamil_body.GetString("template"))
-		if err != nil {
-			app.Logger().Error("Template parsing error.", "type", "mail", "error", err.Error())
-			e.Response.Header().Set("Content-Type", "application/json")
-			return e.JSON(http.StatusBadRequest, map[string]string{"error": "Template parsing error."})
-		}
-
-		buf := bytes.Buffer{}
-		templ.Execute(&buf, map[string]interface{}{
-			"Data":    time.Now().Local().Format("2006-01-02 15:04:05"),
-			"Name":    data.Name,
-			"Email":   data.Email,
-			"Message": strings.ReplaceAll(data.Message, "\n", "<br>"),
-			"Phone":   data.Phone,
-		})
-
-		mailsSettings, err := getSettings(app)
-		if err != nil {
-			app.Logger().Error("Mails settings corrupted", "type", "mail", "error", err.Error())
-			e.Response.Header().Set("Content-Type", "application/json")
-			return e.JSON(http.StatusBadRequest, map[string]string{"error": "Mails settings corrupted"})
-		}
-
-		cc := []mail.Address{{Address: data.Email, Name: data.Name}}
-		to := []mail.Address{{Address: mailsSettings.ReceiverMail, Name: mailsSettings.ReceiverName}}
-
-		message := &mailer.Message{
-			From: mail.Address{
-				Address: e.App.Settings().Meta.SenderAddress,
-				Name:    e.App.Settings().Meta.SenderName,
-			},
-			Cc:      cc,
-			To:      to,
-			Subject: mailsSettings.Subject,
-			HTML:    buf.String(),
-		}
-
-		err = e.App.NewMailClient().Send(message)
-		if err != nil {
-			app.Logger().Error("Mails sending error", "type", "mail", "error", err.Error())
-			e.Response.Header().Set("Content-Type", "application/json")
-			return e.JSON(http.StatusBadRequest, map[string]string{"error": "Mails sending error"})
-		}
-
-		receivers := formReceiversList(to, cc, []mail.Address{})
-		app.Logger().Info("Mail Sent", "type", "mail", "receivers", receivers)
-		return e.JSON(http.StatusOK, map[string]string{"status": "success", "message": "Email sent successfully. to " + receivers})
-	})
-}
-
-func formReceiversList(to []mail.Address, cc []mail.Address, bcc []mail.Address) string {
-
-	res := ""
-
-	for _, a := range to {
-		res = fmt.Sprintf("%s %s<%s>", res, a.Name, a.Address)
-	}
-
-	for _, a := range cc {
-		res = fmt.Sprintf("%s %s<%s>", res, a.Name, a.Address)
-	}
-
-	for _, a := range bcc {
-		res = fmt.Sprintf("%s %s<%s>", res, a.Name, a.Address)
-	}
-	return res
-}
-func getSettings(app *pocketbase.PocketBase) (*MailsSettings, error) {
-	record, err := app.FindFirstRecordByFilter("settings", "key='contact_page'", nil)
-
-	settings := MailsSettings{}
-	json.Unmarshal([]byte(record.GetString("value")), &settings)
-
-	if err != nil {
-		return nil, err
-	}
-
-	return &settings, nil
-}
-
-func extractDomain(email string) string {
-	parts := strings.Split(email, "@")
-	if len(parts) != 2 {
-		return ""
-	}
-	return strings.TrimSpace(parts[1])
-}
-
-// validateMX checks if the domain has valid MX records or A records as a fallback
-func validateMX(email string) (bool, error) {
-	// Check MX records
-
-	domain := extractDomain(email)
-	mxRecords, err := net.LookupMX(domain)
-	if err != nil {
-		return false, fmt.Errorf("'MX' records for %s not found", domain)
-	} else if len(mxRecords) > 0 {
-		// At least one MX record exists
-		return true, nil
-	}
-
-	// Fallback: Check for A records (some domains accept mail via A records)
-	aRecords, err := net.LookupHost(domain)
-	if err != nil {
-		return false, fmt.Errorf("'A' record for %s not found", domain)
-	}
-	return len(aRecords) > 0, nil
-}

backend/custom/manifest/manifest.go

@@ -1,50 +0,0 @@
-package manifest
-
-import (
-	"net/http"
-
-	"github.com/pocketbase/pocketbase"
-	"github.com/pocketbase/pocketbase/core"
-	"github.com/pocketbase/pocketbase/tools/router"
-)
-
-type Manifest struct {
-	Name            string `json:"name"`
-	ShortName       string `json:"short_name"`
-	Description     string `json:"description"`
-	Icons           []Icon `json:"icons"`
-	StartURL        string `json:"start_url"`
-	Display         string `json:"display"`
-	BackgroundColor string `json:"background_color"`
-	ThemeColor      string `json:"theme_color"`
-	Lang            string `json:"lang"`
-	Author          string `json:"author"`
-	OgHost          string `json:"ogHost"`
-	Orientation     string `json:"orientation"`
-}
-
-type Icon struct {
-	Src   string `json:"src"`
-	Sizes string `json:"sizes"`
-	Type  string `json:"type"`
-}
-
-func ServeManifst(app *pocketbase.PocketBase, se *core.ServeEvent) *router.Route[*core.RequestEvent] {
-	return se.Router.GET("/api/manifest.json", func(e *core.RequestEvent) error {
-		manifest, err := GetSettings(app)
-		if err != nil {
-			return err
-		}
-		e.Response.Header().Add("content-type", "application/json")
-		return e.String(http.StatusOK, manifest)
-	})
-}
-
-func GetSettings(app *pocketbase.PocketBase) (string, error) {
-	record, err := app.FindFirstRecordByFilter("settings", "key='manifest'", nil)
-	if err != nil {
-		return "", err
-	}
-
-	return record.GetString("value"), nil
-}

backend/custom/proxy/proxy.go

@@ -1,121 +0,0 @@
-package proxy
-
-import (
-	"context"
-	"errors"
-	"fmt"
-	"log/slog"
-	"net"
-	"net/http"
-	"net/http/httputil"
-	"net/url"
-	"time"
-
-	"github.com/pocketbase/pocketbase"
-	"github.com/pocketbase/pocketbase/core"
-	"github.com/pocketbase/pocketbase/tools/router"
-)
-
-var Logger *slog.Logger
-
-func ServeProxyPassingToNuxt(app *pocketbase.PocketBase, se *core.ServeEvent) *router.Route[*core.RequestEvent] {
-	Logger = app.Logger()
-
-	proxyUrl, _ := app.RootCmd.Flags().GetString("proxy")
-
-	if len(proxyUrl) > 0 {
-		target, _ := url.Parse(proxyUrl) // Node.js app
-
-		proxy := httputil.NewSingleHostReverseProxy(target)
-
-		originalDirector := proxy.Director
-		proxy.Director = func(req *http.Request) {
-			originalDirector(req)
-			req.Host = target.Host
-		}
-		proxy.Transport = &loggingTransport{http.DefaultTransport}
-
-		proxy.ErrorHandler = func(rw http.ResponseWriter, req *http.Request, err error) {
-			if errors.Is(err, context.Canceled) {
-				return
-			}
-			app.Logger().Error(fmt.Sprintf("Proxy error: %v for %s %s", err, req.Method, req.URL.Path), "type", "proxy")
-			http.Error(rw, "Proxy error", http.StatusBadGateway)
-		}
-
-		return se.Router.Any("/", func(e *core.RequestEvent) error {
-			// Ping the backend with a HEAD request (or TCP dial)
-			backendUp := isBackendAlive(target)
-			if !backendUp {
-				app.Logger().Error(fmt.Sprintf("Backend %s is unreachable, sending 502", target), "type", "proxy", "path", e.Request.URL.Path, "remoteIP", e.Request.RemoteAddr)
-				e.Response.WriteHeader(http.StatusBadGateway)
-				e.Response.Write([]byte("502 Backend is unavailable"))
-				return nil
-			}
-
-			// Forward to Node.js
-			proxy.ServeHTTP(e.Response, e.Request)
-			return nil
-		})
-	} else {
-		return nil
-	}
-}
-
-func isBackendAlive(target *url.URL) bool {
-	conn, err := net.DialTimeout("tcp", target.Host, 500*time.Millisecond)
-	if err != nil {
-		return false
-	}
-	conn.Close()
-	return true
-}
-
-type loggingTransport struct {
-	rt http.RoundTripper
-}
-
-func (t *loggingTransport) RoundTrip(req *http.Request) (*http.Response, error) {
-	start := time.Now()
-
-	// Do the actual request
-	resp, err := t.rt.RoundTrip(req)
-	duration := time.Since(start)
-
-	// Prepare fields
-	remoteAddr := req.RemoteAddr
-	if ip := req.Header.Get("X-Real-IP"); len(ip) > 0 {
-		remoteAddr = ip
-	}
-	method := req.Method
-	uri := req.URL.RequestURI()
-	// proto := req.Proto
-	status := 0
-	size := 0
-
-	if resp != nil {
-		status = resp.StatusCode
-		if resp.ContentLength > 0 {
-			size = int(resp.ContentLength)
-		}
-	}
-
-	referer := req.Referer()
-	ua := req.UserAgent()
-	// timestamp := time.Now().Format("02/Jan/2006:15:04:05 -0700")
-
-	Logger.Info(
-		fmt.Sprintf("%s %s", method, uri),
-		"type", "proxy",
-		// "method", method,
-		// "url", uri,
-		"referer", referer,
-		"remoteIP", remoteAddr,
-		"userAgent", ua,
-		"execTime", fmt.Sprintf("%.4fms", float64(duration.Milliseconds())),
-		"status", status,
-		"size", size,
-	)
-
-	return resp, err
-}

backend/custom/seo/feeds.go

@@ -1,194 +0,0 @@
-package seo
-
-import (
-	"encoding/json"
-	"encoding/xml"
-	"fmt"
-	"net/http"
-	"path"
-	"time"
-
-	"github.com/pocketbase/pocketbase"
-	"github.com/pocketbase/pocketbase/core"
-	"github.com/pocketbase/pocketbase/tools/router"
-)
-
-type MenuRecord struct {
-	Active          bool   `json:"active"`
-	CollectionID    string `json:"collectionId"`
-	CollectionName  string `json:"collectionName"`
-	Created         string `json:"created"`
-	ID              string `json:"id"`
-	IDLang          string `json:"id_lang"`
-	IDPage          string `json:"id_page"`
-	IDParent        string `json:"id_parent"`
-	IsDefault       bool   `json:"is_default"`
-	IsRoot          bool   `json:"is_root"`
-	LinkRewrite     string `json:"link_rewrite"`
-	LinkTitle       string `json:"link_title"`
-	MetaDescription string `json:"meta_description"`
-	MetaTitle       string `json:"meta_title"`
-	Name            string `json:"name"`
-	PageName        string `json:"page_name"`
-	PositionID      int    `json:"position_id"`
-	Updated         string `json:"updated"`
-	Url             string `json:"url"`
-}
-
-type UrlSet struct {
-	XMLName xml.Name `xml:"urlset"`
-	Xmlns   string   `xml:"xmlns,attr"`
-	Urls    []Url    `xml:"url"`
-}
-
-type Url struct {
-	Loc        string `xml:"loc"`
-	LastMod    string `xml:"lastmod,omitempty"`
-	ChangeFreq string `xml:"changefreq,omitempty"`
-	Priority   string `xml:"priority,omitempty"`
-}
-
-func ServeFeeds(app *pocketbase.PocketBase, se *core.ServeEvent) *router.Route[*core.RequestEvent] {
-	return se.Router.GET("/feeds/{lang}/sitemap.xml", func(e *core.RequestEvent) error {
-
-		lang := e.Request.PathValue("lang")
-
-		urls, err := getLocations(app, lang)
-		if err != nil {
-			return err
-		}
-
-		xx := UrlSet{
-			Xmlns: "http://www.sitemaps.org/schemas/sitemap/0.9",
-			Urls:  urls,
-		}
-
-		bytes, err := xml.MarshalIndent(xx, "", "  ")
-		if err != nil {
-			return err
-		}
-
-		e.Response.Header().Add("content-type", "text/xml")
-		return e.String(http.StatusOK, xml.Header+string(bytes))
-	})
-}
-
-func getLocations(app *pocketbase.PocketBase, lang string) ([]Url, error) {
-	records, err := app.FindRecordsByFilter("menu_view", fmt.Sprintf("id_lang='%s'&&active=true", lang), "position_id", 200, 0)
-	if err != nil {
-		return nil, err
-	}
-
-	baseUrl, err := getBaseUrl(app)
-	if err != nil {
-		return nil, err
-	}
-
-	locations := []Url{}
-	lastMod := time.Now().Add(time.Hour * 24 * 7 * -1).Format("2006-01-02")
-
-	for _, r := range records {
-		rec := MenuRecord{}
-		x, _ := r.MarshalJSON()
-		json.Unmarshal(x, &rec)
-		if rec.IsRoot {
-			continue
-		}
-		if len(rec.Url) > 0 {
-			continue
-		}
-		if rec.IsDefault {
-
-			locations = append(locations, Url{
-				Loc:        baseUrl + path.Join(lang),
-				LastMod:    lastMod,
-				ChangeFreq: "weekly",
-				Priority:   "1.0",
-			})
-		}
-		locations = append(locations, Url{
-			Loc:        baseUrl + path.Join(lang, rec.IDPage, rec.LinkRewrite),
-			LastMod:    lastMod,
-			ChangeFreq: "weekly",
-			Priority:   "1.0",
-		})
-	}
-
-	return locations, nil
-}
-
-type BaseUrl struct {
-	BaseURL string `json:"baseUrl"`
-}
-
-func getBaseUrl(app *pocketbase.PocketBase) (string, error) {
-	record, err := app.FindFirstRecordByFilter("settings", "key='baseUrl'", nil)
-	if err != nil {
-		return "", err
-	}
-
-	settings := BaseUrl{}
-	json.Unmarshal([]byte(record.GetString("value")), &settings)
-
-	if err != nil {
-		return "", err
-	}
-
-	return settings.BaseURL, nil
-}
-
-type SitemapIndex struct {
-	XMLName  xml.Name  `xml:"sitemapindex"`
-	Xmlns    string    `xml:"xmlns,attr"`
-	Sitemaps []Sitemap `xml:"sitemap"`
-}
-
-// Sitemap represents each <sitemap> entry
-type Sitemap struct {
-	Loc     string `xml:"loc"`
-	LastMod string `xml:"lastmod"`
-}
-
-func ServeFeedsIndex(app *pocketbase.PocketBase, se *core.ServeEvent) *router.Route[*core.RequestEvent] {
-	return se.Router.GET("/feeds/index.xml", func(e *core.RequestEvent) error {
-		index, err := makeSiteMapIndex(app)
-		if err != nil {
-			return err
-		}
-
-		bytes, err := xml.MarshalIndent(index, "", "  ")
-		if err != nil {
-			return err
-		}
-
-		e.Response.Header().Add("content-type", "text/xml")
-		return e.String(http.StatusOK, xml.Header+string(bytes))
-	})
-}
-
-func makeSiteMapIndex(app *pocketbase.PocketBase) (*SitemapIndex, error) {
-	index := &SitemapIndex{
-		Xmlns: "http://www.sitemaps.org/schemas/sitemap/0.9",
-	}
-
-	bseUrl, err := getBaseUrl(app)
-	if err != nil {
-		return nil, err
-	}
-
-	langs, err := app.FindRecordsByFilter("lang", "active=true", "", 200, 0)
-	if err != nil {
-		return index, err
-	}
-
-	lastMod := time.Now().Add(time.Hour * 24 * 7 * -1).Format("2006-01-02")
-
-	for _, l := range langs {
-		index.Sitemaps = append(index.Sitemaps, Sitemap{
-			Loc:     bseUrl + path.Join("feeds/", l.Id, "sitemap.xml"),
-			LastMod: lastMod,
-		})
-	}
-
-	return index, nil
-}

backend/custom/seo/robots.go

@@ -1,50 +0,0 @@
-package seo
-
-import (
-	"encoding/json"
-	"fmt"
-	"net/http"
-	"strings"
-
-	"github.com/pocketbase/pocketbase"
-	"github.com/pocketbase/pocketbase/core"
-	"github.com/pocketbase/pocketbase/tools/router"
-)
-
-type Robots struct {
-	Robots []string
-}
-
-func ServeRobotsTxt(app *pocketbase.PocketBase, se *core.ServeEvent) *router.Route[*core.RequestEvent] {
-	return se.Router.GET("/robots.txt", func(e *core.RequestEvent) error {
-
-		text, err := getRobots(app)
-		if err != nil {
-			return err
-		}
-		return e.String(http.StatusOK, text)
-	})
-}
-
-func getRobots(app *pocketbase.PocketBase) (string, error) {
-	record, err := app.FindFirstRecordByFilter("settings", "key='robots_txt'", nil)
-	if err != nil {
-		return "", err
-	}
-
-	settings := Robots{}
-	json.Unmarshal([]byte(record.GetString("value")), &settings)
-
-	if err != nil {
-		return "", err
-	}
-
-	baseUrl, err := getBaseUrl(app)
-	if err != nil {
-		return "", err
-	}
-
-	settings.Robots = append(settings.Robots, fmt.Sprintf("\n\nSitemap: %s%s", baseUrl, "feeds/index.xml"))
-
-	return strings.Join(settings.Robots, "\n"), nil
-}

backend/custom/supervise/supervise.go

@@ -1,88 +0,0 @@
-package supervise
-
-import (
-	"context"
-	"log"
-	"os"
-	"os/exec"
-	"os/signal"
-	"strings"
-	"sync"
-	"syscall"
-	"time"
-
-	"github.com/pocketbase/pocketbase"
-	"github.com/pocketbase/pocketbase/core"
-	"github.com/pocketbase/pocketbase/tools/router"
-)
-
-func ServeSubprocessSupervisor(app *pocketbase.PocketBase, se *core.ServeEvent) *router.Route[*core.RequestEvent] {
-
-	command, _ := app.RootCmd.PersistentFlags().GetString("subcommand")
-
-	if len(command) > 0 {
-		cmdsub := strings.Split(command, " ")
-		if len(cmdsub) > 0 {
-			startNodeProcessSupervised(cmdsub[0], strings.Join(cmdsub[1:], " "))
-		}
-	}
-	return nil
-}
-
-func startNodeProcessSupervised(command string, args ...string) {
-	const maxRetries = 3
-	const retryDelay = 30 * time.Second
-
-	var (
-		cmdMu sync.Mutex
-		cmd   *exec.Cmd
-	)
-
-	stopChan := make(chan os.Signal, 1)
-	signal.Notify(stopChan, os.Interrupt, syscall.SIGTERM)
-
-	go func() {
-		retries := 0
-
-		for {
-			select {
-			case <-stopChan:
-				log.Println("Received shutdown signal. Terminating subprocess...")
-				cmdMu.Lock()
-				if cmd != nil && cmd.Process != nil {
-					_ = cmd.Process.Signal(syscall.SIGTERM)
-				}
-				cmdMu.Unlock()
-				return
-
-			default:
-				ctx, cancel := context.WithCancel(context.Background())
-				cmdMu.Lock()
-				cmd = exec.CommandContext(ctx, command, args...)
-				cmd.Stdout = os.Stdout
-				cmd.Stderr = os.Stderr
-				cmdMu.Unlock()
-
-				log.Printf("Starting Process: %s %v\n", command, args)
-				err := cmd.Run()
-				cancel() // cancel the context when done
-
-				if err != nil {
-					log.Printf("Process exited with error: %v\n", err)
-					retries++
-					if retries >= maxRetries {
-						log.Printf("Process failed %d times. Shutting down application...", retries)
-						// _ = app.ResetBootstrapState()
-						os.Exit(1)
-					}
-					log.Printf("Retrying in %s (%d/%d)...", retryDelay, retries, maxRetries)
-					time.Sleep(retryDelay)
-				} else {
-					log.Printf("Process exited normally. Resetting retry count.")
-					retries = 0
-				}
-			}
-		}
-	}()
-
-}

backend/custom/version/version.go

@@ -1,26 +0,0 @@
-package version
-
-import (
-	"net/http"
-
-	"github.com/pocketbase/pocketbase"
-	"github.com/pocketbase/pocketbase/core"
-	"github.com/pocketbase/pocketbase/tools/router"
-)
-
-var Version string
-var BuildDate string
-var Company string
-var CompanyUrl string
-
-func ServeVersionInfo(app *pocketbase.PocketBase, se *core.ServeEvent) *router.Route[*core.RequestEvent] {
-	return se.Router.GET("/api/version/send", func(e *core.RequestEvent) error {
-
-		return e.JSON(http.StatusOK, map[string]string{
-			"version":     Version,
-			"build_date":  BuildDate,
-			"company":     Company,
-			"company_url": CompanyUrl,
-		})
-	})
-}

backend/custom/webpConverter/memFileReader.go

@@ -1,14 +0,0 @@
-package webpconverter
-
-import (
-	"bytes"
-	"io"
-)
-
-type memFileReader struct {
-	data []byte
-}
-
-func (m *memFileReader) Open() (io.ReadSeekCloser, error) {
-	return readSeekCloser{bytes.NewReader(m.data)}, nil
-}

backend/custom/webpConverter/readSeekCloser.go

@@ -1,9 +0,0 @@
-package webpconverter
-
-import "bytes"
-
-type readSeekCloser struct {
-	*bytes.Reader
-}
-
-func (r readSeekCloser) Close() error { return nil }

backend/custom/webpConverter/webp_convert.go

@@ -1,144 +0,0 @@
-package webpconverter
-
-import (
-	"bytes"
-	"image"
-	"image/png"
-	"io"
-	"path/filepath"
-	"strings"
-
-	"github.com/chai2010/webp"
-	"github.com/pocketbase/pocketbase"
-	"github.com/pocketbase/pocketbase/core"
-	"github.com/pocketbase/pocketbase/tools/filesystem"
-	"github.com/pocketbase/pocketbase/tools/hook"
-)
-
-func CreateEventHandler(app *pocketbase.PocketBase) *hook.Handler[*core.RecordEvent] {
-	return &hook.Handler[*core.RecordEvent]{
-		Func: func(e *core.RecordEvent) error {
-			fieldsData := e.Record.FieldsData()
-			for _, v := range fieldsData {
-				if files, ok := v.([]interface{}); ok {
-					for _, f := range files {
-						if file, ok := f.(*filesystem.File); ok {
-							if shouldBeReplacedWithWebp(file.Name) {
-								convertToWebp(file)
-							}
-						}
-					}
-				}
-				if f, ok := v.(interface{}); ok {
-					if file, ok := f.(*filesystem.File); ok {
-						if shouldBeReplacedWithWebp(file.Name) {
-							convertToWebp(file)
-						}
-					}
-				}
-			}
-			return e.Next()
-		},
-		Priority: 100,
-	}
-}
-
-func ThumbEventHandler(app *pocketbase.PocketBase) *hook.Handler[*core.FileDownloadRequestEvent] {
-	return &hook.Handler[*core.FileDownloadRequestEvent]{
-		Func: func(fdre *core.FileDownloadRequestEvent) error {
-			if filepath.Ext(fdre.ServedName) == ".webp" {
-
-				filename := fdre.Request.PathValue("filename")
-				baseFilesPath := fdre.Record.BaseFilesPath()
-
-				fs, err := app.App.NewFilesystem()
-				if err != nil {
-					return err
-				}
-				defer fs.Close()
-
-				blob, err := fs.GetReader(baseFilesPath + "/thumbs_" + filename + "/" + fdre.ServedName)
-				if err != nil {
-					blob, err = fs.GetReader(baseFilesPath + "/" + fdre.ServedName)
-					if err != nil {
-						return err
-					}
-				}
-				defer blob.Close()
-
-				img, err := png.Decode(blob)
-				if err != nil {
-					return fdre.Next()
-				}
-
-				buf := bytes.Buffer{}
-				err = webp.Encode(&buf, img, &webp.Options{Quality: 80})
-				if err != nil {
-					return err
-				}
-				err = fs.Upload(buf.Bytes(), baseFilesPath+"/thumbs_"+filename+"/"+fdre.ServedName)
-				if err != nil {
-					_, err := fdre.Response.Write(buf.Bytes())
-					if err != nil {
-						return err
-					}
-					return nil
-				}
-				return fdre.Next()
-			}
-			return fdre.Next()
-		},
-		Priority: 99,
-	}
-}
-
-func convertToWebp(file *filesystem.File) error {
-	file.Name = replaceExtWithWebp(file.Name)
-	file.OriginalName = replaceExtWithWebp(file.OriginalName)
-	ff, err := file.Reader.Open()
-	if err != nil {
-		return err
-	}
-	defer ff.Close()
-	fff, err := io.ReadAll(ff)
-	if err != nil {
-		return err
-	}
-	img, _, err := image.Decode(bytes.NewReader(fff))
-	if err != nil {
-		return err
-	}
-
-	buf := bytes.Buffer{}
-	err = webp.Encode(&buf, img, &webp.Options{Quality: 80})
-	if err != nil {
-		return err
-	}
-	file.Reader = &memFileReader{data: buf.Bytes()}
-	file.Size = int64(buf.Len())
-	return nil
-}
-
-func replaceExtWithWebp(path string) string {
-	// List of image extensions to convert
-	exts := []string{".png", ".jpg", ".jpeg", ".bmp", ".tiff"}
-
-	for _, ext := range exts {
-		if strings.HasSuffix(strings.ToLower(path), ext) {
-			return strings.TrimSuffix(path, ext) + ".webp"
-		}
-	}
-	return path
-}
-
-func shouldBeReplacedWithWebp(path string) bool {
-	// List of image extensions to convert
-	exts := []string{".png", ".jpg", ".jpeg", ".bmp", ".tiff"}
-
-	for _, ext := range exts {
-		if strings.HasSuffix(strings.ToLower(path), ext) {
-			return true
-		}
-	}
-	return false
-}

backend/go.mod

@@ -1,42 +0,0 @@
-module pocketbase
-
-go 1.24.0
-
-require (
-	github.com/chai2010/webp v1.4.0
-	github.com/pocketbase/pocketbase v0.28.2
-)
-
-require (
-	github.com/asaskevich/govalidator v0.0.0-20230301143203-a9d515a09cc2 // indirect
-	github.com/disintegration/imaging v1.6.2 // indirect
-	github.com/domodwyer/mailyak/v3 v3.6.2 // indirect
-	github.com/dustin/go-humanize v1.0.1 // indirect
-	github.com/fatih/color v1.18.0 // indirect
-	github.com/gabriel-vasile/mimetype v1.4.9 // indirect
-	github.com/ganigeorgiev/fexpr v0.5.0 // indirect
-	github.com/go-ozzo/ozzo-validation/v4 v4.3.0 // indirect
-	github.com/golang-jwt/jwt/v5 v5.2.2 // indirect
-	github.com/google/uuid v1.6.0 // indirect
-	github.com/inconshreveable/mousetrap v1.1.0 // indirect
-	github.com/mattn/go-colorable v0.1.14 // indirect
-	github.com/mattn/go-isatty v0.0.20 // indirect
-	github.com/ncruces/go-strftime v0.1.9 // indirect
-	github.com/pocketbase/dbx v1.11.0 // indirect
-	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
-	github.com/spf13/cast v1.8.0 // indirect
-	github.com/spf13/cobra v1.9.1 // indirect
-	github.com/spf13/pflag v1.0.6 // indirect
-	golang.org/x/crypto v0.38.0 // indirect
-	golang.org/x/exp v0.0.0-20250506013437-ce4c2cf36ca6 // indirect
-	golang.org/x/image v0.27.0 // indirect
-	golang.org/x/net v0.40.0 // indirect
-	golang.org/x/oauth2 v0.30.0 // indirect
-	golang.org/x/sync v0.14.0 // indirect
-	golang.org/x/sys v0.33.0 // indirect
-	golang.org/x/text v0.25.0 // indirect
-	modernc.org/libc v1.65.7 // indirect
-	modernc.org/mathutil v1.7.1 // indirect
-	modernc.org/memory v1.11.0 // indirect
-	modernc.org/sqlite v1.37.1 // indirect
-)

backend/go.sum

@@ -1,127 +0,0 @@
-github.com/asaskevich/govalidator v0.0.0-20200108200545-475eaeb16496/go.mod h1:oGkLhpf+kjZl6xBf758TQhh5XrAeiJv/7FRz/2spLIg=
-github.com/asaskevich/govalidator v0.0.0-20230301143203-a9d515a09cc2 h1:DklsrG3dyBCFEj5IhUbnKptjxatkF07cF2ak3yi77so=
-github.com/asaskevich/govalidator v0.0.0-20230301143203-a9d515a09cc2/go.mod h1:WaHUgvxTVq04UNunO+XhnAqY/wQc+bxr74GqbsZ/Jqw=
-github.com/chai2010/webp v1.4.0 h1:6DA2pkkRUPnbOHvvsmGI3He1hBKf/bkRlniAiSGuEko=
-github.com/chai2010/webp v1.4.0/go.mod h1:0XVwvZWdjjdxpUEIf7b9g9VkHFnInUSYujwqTLEuldU=
-github.com/cpuguy83/go-md2man/v2 v2.0.6/go.mod h1:oOW0eioCTA6cOiMLiUPZOpcVxMig6NIQQ7OS05n1F4g=
-github.com/davecgh/go-spew v1.1.0 h1:ZDRjVQ15GmhC3fiQ8ni8+OwkZQO4DARzQgrnXU1Liz8=
-github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/disintegration/imaging v1.6.2 h1:w1LecBlG2Lnp8B3jk5zSuNqd7b4DXhcjwek1ei82L+c=
-github.com/disintegration/imaging v1.6.2/go.mod h1:44/5580QXChDfwIclfc/PCwrr44amcmDAg8hxG0Ewe4=
-github.com/domodwyer/mailyak/v3 v3.6.2 h1:x3tGMsyFhTCaxp6ycgR0FE/bu5QiNp+hetUuCOBXMn8=
-github.com/domodwyer/mailyak/v3 v3.6.2/go.mod h1:lOm/u9CyCVWHeaAmHIdF4RiKVxKUT/H5XX10lIKAL6c=
-github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
-github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
-github.com/fatih/color v1.18.0 h1:S8gINlzdQ840/4pfAwic/ZE0djQEH3wM94VfqLTZcOM=
-github.com/fatih/color v1.18.0/go.mod h1:4FelSpRwEGDpQ12mAdzqdOukCy4u8WUtOY6lkT/6HfU=
-github.com/frankban/quicktest v1.14.6 h1:7Xjx+VpznH+oBnejlPUj8oUpdxnVs4f8XU8WnHkI4W8=
-github.com/frankban/quicktest v1.14.6/go.mod h1:4ptaffx2x8+WTWXmUCuVU6aPUX1/Mz7zb5vbUoiM6w0=
-github.com/gabriel-vasile/mimetype v1.4.9 h1:5k+WDwEsD9eTLL8Tz3L0VnmVh9QxGjRmjBvAG7U/oYY=
-github.com/gabriel-vasile/mimetype v1.4.9/go.mod h1:WnSQhFKJuBlRyLiKohA/2DtIlPFAbguNaG7QCHcyGok=
-github.com/ganigeorgiev/fexpr v0.5.0 h1:XA9JxtTE/Xm+g/JFI6RfZEHSiQlk+1glLvRK1Lpv/Tk=
-github.com/ganigeorgiev/fexpr v0.5.0/go.mod h1:RyGiGqmeXhEQ6+mlGdnUleLHgtzzu/VGO2WtJkF5drE=
-github.com/go-ozzo/ozzo-validation/v4 v4.3.0 h1:byhDUpfEwjsVQb1vBunvIjh2BHQ9ead57VkAEY4V+Es=
-github.com/go-ozzo/ozzo-validation/v4 v4.3.0/go.mod h1:2NKgrcHl3z6cJs+3Oo940FPRiTzuqKbvfrL2RxCj6Ew=
-github.com/go-sql-driver/mysql v1.4.1 h1:g24URVg0OFbNUTx9qqY1IRZ9D9z3iPyi5zKhQZpNwpA=
-github.com/go-sql-driver/mysql v1.4.1/go.mod h1:zAC/RDZ24gD3HViQzih4MyKcchzm+sOG5ZlKdlhCg5w=
-github.com/golang-jwt/jwt/v5 v5.2.2 h1:Rl4B7itRWVtYIHFrSNd7vhTiz9UpLdi6gZhZ3wEeDy8=
-github.com/golang-jwt/jwt/v5 v5.2.2/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
-github.com/golang/protobuf v1.3.1/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
-github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
-github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
-github.com/google/pprof v0.0.0-20250317173921-a4b03ec1a45e h1:ijClszYn+mADRFY17kjQEVQ1XRhq2/JR1M3sGqeJoxs=
-github.com/google/pprof v0.0.0-20250317173921-a4b03ec1a45e/go.mod h1:boTsfXsheKC2y+lKOCMpSfarhxDeIzfZG1jqGcPl3cA=
-github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
-github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
-github.com/inconshreveable/mousetrap v1.1.0 h1:wN+x4NVGpMsO7ErUn/mUI3vEoE6Jt13X2s0bqwp9tc8=
-github.com/inconshreveable/mousetrap v1.1.0/go.mod h1:vpF70FUmC8bwa3OWnCshd2FqLfsEA9PFc4w1p2J65bw=
-github.com/kr/pretty v0.3.1 h1:flRD4NNwYAUpkphVc1HcthR4KEIFJ65n8Mw5qdRn3LE=
-github.com/kr/pretty v0.3.1/go.mod h1:hoEshYVHaxMs3cyo3Yncou5ZscifuDolrwPKZanG3xk=
-github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
-github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
-github.com/mattn/go-colorable v0.1.14 h1:9A9LHSqF/7dyVVX6g0U9cwm9pG3kP9gSzcuIPHPsaIE=
-github.com/mattn/go-colorable v0.1.14/go.mod h1:6LmQG8QLFO4G5z1gPvYEzlUgJ2wF+stgPZH1UqBm1s8=
-github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
-github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/ncruces/go-strftime v0.1.9 h1:bY0MQC28UADQmHmaF5dgpLmImcShSi2kHU9XLdhx/f4=
-github.com/ncruces/go-strftime v0.1.9/go.mod h1:Fwc5htZGVVkseilnfgOVb9mKy6w1naJmn9CehxcKcls=
-github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
-github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
-github.com/pocketbase/dbx v1.11.0 h1:LpZezioMfT3K4tLrqA55wWFw1EtH1pM4tzSVa7kgszU=
-github.com/pocketbase/dbx v1.11.0/go.mod h1:xXRCIAKTHMgUCyCKZm55pUOdvFziJjQfXaWKhu2vhMs=
-github.com/pocketbase/pocketbase v0.28.2 h1:b6cfUfr5d4whvUFGFhI8oHRzx/eB76GCUQGftqgv9lM=
-github.com/pocketbase/pocketbase v0.28.2/go.mod h1:ElwIYS1b5xS9w0U7AK7tsm6FuC0lzw57H8p/118Cu7g=
-github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
-github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
-github.com/rogpeppe/go-internal v1.9.0 h1:73kH8U+JUqXU8lRuOHeVHaa/SZPifC7BkcraZVejAe8=
-github.com/rogpeppe/go-internal v1.9.0/go.mod h1:WtVeX8xhTBvf0smdhujwtBcq4Qrzq/fJaraNFVN+nFs=
-github.com/russross/blackfriday/v2 v2.1.0/go.mod h1:+Rmxgy9KzJVeS9/2gXHxylqXiyQDYRxCVz55jmeOWTM=
-github.com/spf13/cast v1.8.0 h1:gEN9K4b8Xws4EX0+a0reLmhq8moKn7ntRlQYgjPeCDk=
-github.com/spf13/cast v1.8.0/go.mod h1:ancEpBxwJDODSW/UG4rDrAqiKolqNNh2DX3mk86cAdo=
-github.com/spf13/cobra v1.9.1 h1:CXSaggrXdbHK9CF+8ywj8Amf7PBRmPCOJugH954Nnlo=
-github.com/spf13/cobra v1.9.1/go.mod h1:nDyEzZ8ogv936Cinf6g1RU9MRY64Ir93oCnqb9wxYW0=
-github.com/spf13/pflag v1.0.6 h1:jFzHGLGAlb3ruxLB8MhbI6A8+AQX/2eW4qeyNZXNp2o=
-github.com/spf13/pflag v1.0.6/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
-github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
-github.com/stretchr/testify v1.4.0 h1:2E4SXV/wtOkTonXsotYi4li6zVWxYlZuYNCXe9XRJyk=
-github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
-golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
-golang.org/x/crypto v0.38.0 h1:jt+WWG8IZlBnVbomuhg2Mdq0+BBQaHbtqHEFEigjUV8=
-golang.org/x/crypto v0.38.0/go.mod h1:MvrbAqul58NNYPKnOra203SB9vpuZW0e+RRZV+Ggqjw=
-golang.org/x/exp v0.0.0-20250506013437-ce4c2cf36ca6 h1:y5zboxd6LQAqYIhHnB48p0ByQ/GnQx2BE33L8BOHQkI=
-golang.org/x/exp v0.0.0-20250506013437-ce4c2cf36ca6/go.mod h1:U6Lno4MTRCDY+Ba7aCcauB9T60gsv5s4ralQzP72ZoQ=
-golang.org/x/image v0.0.0-20191009234506-e7c1f5e7dbb8/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0=
-golang.org/x/image v0.27.0 h1:C8gA4oWU/tKkdCfYT6T2u4faJu3MeNS5O8UPWlPF61w=
-golang.org/x/image v0.27.0/go.mod h1:xbdrClrAUway1MUTEZDq9mz/UpRwYAkFFNUslZtcB+g=
-golang.org/x/mod v0.24.0 h1:ZfthKaKaT4NrhGVZHO1/WDTwGES4De8KtWO0SIbNJMU=
-golang.org/x/mod v0.24.0/go.mod h1:IXM97Txy2VM4PJ3gI61r1YEk/gAj6zAHN3AdZt6S9Ww=
-golang.org/x/net v0.0.0-20190603091049-60506f45cf65/go.mod h1:HSz+uSET+XFnRR8LxR5pz3Of3rY3CfYBVs4xY44aLks=
-golang.org/x/net v0.40.0 h1:79Xs7wF06Gbdcg4kdCCIQArK11Z1hr5POQ6+fIYHNuY=
-golang.org/x/net v0.40.0/go.mod h1:y0hY0exeL2Pku80/zKK7tpntoX23cqL3Oa6njdgRtds=
-golang.org/x/oauth2 v0.30.0 h1:dnDm7JmhM45NNpd8FDDeLhK6FwqbOf4MLCM9zb1BOHI=
-golang.org/x/oauth2 v0.30.0/go.mod h1:B++QgG3ZKulg6sRPGD/mqlHQs5rB3Ml9erfeDY7xKlU=
-golang.org/x/sync v0.14.0 h1:woo0S4Yywslg6hp4eUFjTVOyKt0RookbpAHG4c1HmhQ=
-golang.org/x/sync v0.14.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
-golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
-golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.33.0 h1:q3i8TbbEz+JRD9ywIRlyRAQbM0qF7hu24q3teo2hbuw=
-golang.org/x/sys v0.33.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
-golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
-golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=
-golang.org/x/text v0.25.0 h1:qVyWApTSYLk/drJRO5mDlNYskwQznZmkpV2c8q9zls4=
-golang.org/x/text v0.25.0/go.mod h1:WEdwpYrmk1qmdHvhkSTNPm3app7v4rsT8F2UD6+VHIA=
-golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
-golang.org/x/tools v0.33.0 h1:4qz2S3zmRxbGIhDIAgjxvFutSvH5EfnsYrRBj0UI0bc=
-golang.org/x/tools v0.33.0/go.mod h1:CIJMaWEY88juyUfo7UbgPqbC8rU2OqfAV1h2Qp0oMYI=
-google.golang.org/appengine v1.6.5 h1:tycE03LOZYQNhDpS27tcQdAzLCVMaj7QT2SXxebnpCM=
-google.golang.org/appengine v1.6.5/go.mod h1:8WjMMxjGQR8xUklV/ARdw2HLXBOI7O7uCIDZVag1xfc=
-gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
-gopkg.in/yaml.v2 v2.2.2 h1:ZCJp+EgiOT7lHqUV2J862kp8Qj64Jo6az82+3Td9dZw=
-gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
-gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
-modernc.org/cc/v4 v4.26.1 h1:+X5NtzVBn0KgsBCBe+xkDC7twLb/jNVj9FPgiwSQO3s=
-modernc.org/cc/v4 v4.26.1/go.mod h1:uVtb5OGqUKpoLWhqwNQo/8LwvoiEBLvZXIQ/SmO6mL0=
-modernc.org/ccgo/v4 v4.28.0 h1:rjznn6WWehKq7dG4JtLRKxb52Ecv8OUGah8+Z/SfpNU=
-modernc.org/ccgo/v4 v4.28.0/go.mod h1:JygV3+9AV6SmPhDasu4JgquwU81XAKLd3OKTUDNOiKE=
-modernc.org/fileutil v1.3.1 h1:8vq5fe7jdtEvoCf3Zf9Nm0Q05sH6kGx0Op2CPx1wTC8=
-modernc.org/fileutil v1.3.1/go.mod h1:HxmghZSZVAz/LXcMNwZPA/DRrQZEVP9VX0V4LQGQFOc=
-modernc.org/gc/v2 v2.6.5 h1:nyqdV8q46KvTpZlsw66kWqwXRHdjIlJOhG6kxiV/9xI=
-modernc.org/gc/v2 v2.6.5/go.mod h1:YgIahr1ypgfe7chRuJi2gD7DBQiKSLMPgBQe9oIiito=
-modernc.org/libc v1.65.7 h1:Ia9Z4yzZtWNtUIuiPuQ7Qf7kxYrxP1/jeHZzG8bFu00=
-modernc.org/libc v1.65.7/go.mod h1:011EQibzzio/VX3ygj1qGFt5kMjP0lHb0qCW5/D/pQU=
-modernc.org/libc v1.65.8 h1:7PXRJai0TXZ8uNA3srsmYzmTyrLoHImV5QxHeni108Q=
-modernc.org/libc v1.65.8/go.mod h1:011EQibzzio/VX3ygj1qGFt5kMjP0lHb0qCW5/D/pQU=
-modernc.org/mathutil v1.7.1 h1:GCZVGXdaN8gTqB1Mf/usp1Y/hSqgI2vAGGP4jZMCxOU=
-modernc.org/mathutil v1.7.1/go.mod h1:4p5IwJITfppl0G4sUEDtCr4DthTaT47/N3aT6MhfgJg=
-modernc.org/memory v1.11.0 h1:o4QC8aMQzmcwCK3t3Ux/ZHmwFPzE6hf2Y5LbkRs+hbI=
-modernc.org/memory v1.11.0/go.mod h1:/JP4VbVC+K5sU2wZi9bHoq2MAkCnrt2r98UGeSK7Mjw=
-modernc.org/opt v0.1.4 h1:2kNGMRiUjrp4LcaPuLY2PzUfqM/w9N23quVwhKt5Qm8=
-modernc.org/opt v0.1.4/go.mod h1:03fq9lsNfvkYSfxrfUhZCWPk1lm4cq4N+Bh//bEtgns=
-modernc.org/sortutil v1.2.1 h1:+xyoGf15mM3NMlPDnFqrteY07klSFxLElE2PVuWIJ7w=
-modernc.org/sortutil v1.2.1/go.mod h1:7ZI3a3REbai7gzCLcotuw9AC4VZVpYMjDzETGsSMqJE=
-modernc.org/sqlite v1.37.1 h1:EgHJK/FPoqC+q2YBXg7fUmES37pCHFc97sI7zSayBEs=
-modernc.org/sqlite v1.37.1/go.mod h1:XwdRtsE1MpiBcL54+MbKcaDvcuej+IYSMfLN6gSKV8g=
-modernc.org/strutil v1.2.1 h1:UneZBkQA+DX2Rp35KcM69cSsNES9ly8mQWD71HKlOA0=
-modernc.org/strutil v1.2.1/go.mod h1:EHkiggD70koQxjVdSBM3JKM7k6L0FbGE5eymy9i3B9A=
-modernc.org/token v1.1.0 h1:Xl7Ap9dKaEs5kLoOQeQmPWevfnk/DM5qcLcYlA8ys6Y=
-modernc.org/token v1.1.0/go.mod h1:UGzOrNV1mAFSEB63lOFHIpNRUVMvYTc6yu1SMY/XTDM=

backend/main.go

@@ -1,27 +0,0 @@
-package main
-
-import (
-	"log"
-
-	"pocketbase/custom"
-
-	"github.com/pocketbase/pocketbase"
-	"github.com/pocketbase/pocketbase/core"
-)
-
-func main() {
-	app := pocketbase.New()
-
-	app = custom.ExtendApp(app)
-
-	app.OnServe().BindFunc(func(se *core.ServeEvent) error {
-
-		custom.LoadCustomCode(app, se)
-
-		return se.Next()
-	})
-
-	if err := app.Start(); err != nil {
-		log.Fatal(err)
-	}
-}

components/ButtonArrow.vue

@@ -1,49 +0,0 @@
-<template>
-  <div class="group flex cursor-pointer items-center justify-start gap-2">
-    <button
-      :class="[
-        'text-inter h-[40px] cursor-pointer rounded-[10px] px-[22px] text-lg transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px]',
-        type === 'fill'
-          ? 'bg-button text-text-dark group-hover:bg-button-hover'
-          : 'border-button text-button group-hover:border-button-hover group-hover:text-button-hover border',
-      ]"
-    >
-      <slot />
-    </button>
-    <div
-      :class="[
-        'flex h-[40px] w-[40px] items-center justify-center rounded-[10px] p-2.5 transition-all sm:h-[50px] sm:w-[50px] md:h-[65px] md:w-[65px] md:rounded-[15px]',
-        type === 'fill'
-          ? 'bg-button text-text-dark group-hover:bg-button-hover'
-          : 'border-button text-button group-hover:border-button-hover group-hover:text-button-hover border',
-      ]"
-    >
-      <!-- <UIcon
-        class="w-10 h-10 block"
-        name="i-heroicons-arrow-up-right"
-      /> -->
-      <!-- <img src="/icons/ArrowCorner.svg" alt="" class="text-black" /> -->
-      <svg
-        class=""
-        width="26"
-        height="26"
-        viewBox="0 0 26 26"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
-          fill="currentColor"
-        />
-      </svg>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineProps({
-  type: {
-    type: String,
-  },
-});
-</script>

components/CartPopup.vue

@@ -0,0 +1,105 @@
+<template>
+    <div ref="dropdownRef">
+        <div @click="openCart = !openCart" class="relative cursor-pointer">
+            <i class="uil uil-shopping-cart text-[31px]"></i>
+            <div v-if="productStore.cart.cart_items && productStore.cart.cart_items.length > 0"
+                class="w-[15px] h-[15px] rounded-full bg-accent-green-light dark:bg-accent-green-light text-white flex items-center justify-center text-[9px] absolute top-1 right-0">
+                {{ productStore.cart.cart_items.length }}</div>
+        </div>
+        <div v-if="openCart" @click.self="openCart = !openCart"
+            class="absolute left-1/2 transform -translate-x-1/2 w-full px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20 right-0 z-50 flex items-center justify-end top-[100px] sm:top-[100px] md:top-[140px]">
+            <div class="xl:w-[55%] md:w-[90%] w-full px-4 md:px-0">
+                <div v-if="productStore.cart.cart_items && productStore.cart.cart_items.length > 0"
+                    class="w-full p-[25px] sm:p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-xl sm:rounded-[32px] h-full space-25-55">
+                    <div>
+                        <!-- product -->
+                        <div v-for="item in productStore.cart.cart_items"
+                            class="py-[13px] sm:py-[25px] first:pt-0 border-b border-block">
+                            <div class="flex items-center h-[100px] sm:h-[205px]">
+                                <div
+                                    class="min-w-[100px] sm:min-w-[205px] flex items-center justify-center h-[100px] sm:h-[205px]">
+                                    <img :src="`/api/public/file/${item.picture_uuid}.webp`"
+                                        alt="" class="max-w-full max-h-full object-contain">
+                                </div>
+
+                                <div class="flex flex-col justify-between min-h-full w-full gap-[7px] sm:gap-[15px]">
+                                    <div class="w-full flex items-center justify-between">
+                                        <h3
+                                            class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[100px] sm:max-w-[200px] md:max-w-[250px]">
+                                            {{ item.name }}
+                                        </h3>
+                                        <i @click="productStore.deleteCartItem(item.cart_item_id)"
+                                            class="uil uil-trash-alt text-lg sm:text-2xl cursor-pointer"></i>
+                                    </div>
+                                    <div class="flex flex-col gap-[10px]">
+                                        <p
+                                            class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
+                                            {{ item.total_price }}
+                                        </p>
+                                        <div class="flex items-center gap-[2px] sm:gap-2 text-xl">
+                                            <div
+                                                class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center">
+                                                <i class="uil uil-minus cursor-pointer text-gray dark:text-button-disabled hover:text-gray-200 transition-all"
+                                                    @click="productStore.decrementCartItem(item.cart_item_id)"></i>
+                                            </div>
+                                            <div
+                                                class="w-5 min-h-5 sm:w-10 sm:min-h-11 text-[10px] sm:text-xl border border-button flex items-center justify-center rounded-[4px]">
+                                                {{ item.quantity }}
+                                            </div>
+                                            <div
+                                                class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center">
+                                                <i class="uil uil-plus cursor-pointer hover:text-gray-200 transition-all"
+                                                    @click="productStore.incrementCartItem(item.product_id)"></i>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <h4 class="font-inter text-[12px] leading-[150%] font-bold uppercase sm:text-[24px]">{{
+                            $t('total_amount') }}</h4>
+                        <p
+                            class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
+                            {{ productStore.cart.total_value }}
+                        </p>
+                    </div>
+                    <UiButtonArrow @click="() => {
+                        if (userStore.isLogged) {
+                            menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 12))
+                        } else {
+                            menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))
+                        }
+                        openCart = false
+                    }" class="w-full" type="fill" :arrow="true" :full="true">{{ userStore.isLogged ?
+                        $t('to_checkout') : $t('login') }}
+                    </UiButtonArrow>
+                </div>
+                <div v-else
+                    class="w-full p-[25px] sm:p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-xl sm:rounded-[32px] flex items-center justify-center">
+                    <div
+                        class="border border-block inline-flex items-center justify-center h-[140px] sm:h-[200px] text-center rounded-[8px]">
+                        <h4
+                            class="font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] px-4 sm:px-10 md:text-xl">
+                            {{ $t('empty_cart') }}</h4>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onClickOutside } from "@vueuse/core";
+const productStore = useProductStore()
+const openCart = ref(false);
+
+const menuStore = useMenuStore()
+const userStore = useUserStore()
+
+const dropdownRef = ref(null);
+onClickOutside(dropdownRef, () => {
+    openCart.value = false
+});
+</script>

components/CountryCurrencySelector.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="flex flex-col gap-2 relative" ref="dropdownRef">
+    <UButton color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-down"
+      class="bg-bg-light dark:bg-bg-dark m-0 ring-0 text-xl font-medium uppercase cursor-pointer hover:bg-inherit text-text-light dark:text-text-dark"
+      block @click="isOpen = !isOpen">
+          {{ $session.cookieData.value.country.iso_code }}/{{ $session.cookieData.value.currency.iso_code }}
+    </UButton>
+
+    <div class="absolute ring-0 top-12 p-0 m-0 border-none w-48 z-50" v-if="isOpen">
+      <div class="border border-button px-4 py-[10px] rounded-[5px] bg-bg-light dark:bg-bg-dark">
+        <div class="p-0 flex flex-col gap-4 bg-bg-light dark:bg-bg-dark">
+          <div class="flex flex-col items-start gap-1">
+            <p>{{ $t("country") }}</p>
+            <div
+              class="w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1">
+              <div class="p-0" @click="openDrop('country')">
+                <div class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark">
+                  {{ $session.currentCountryIso }} <span> <i
+                      class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
+                </div>
+              </div>
+
+              <div v-if="dropCountry"
+                class="bg-bg-light dark:bg-bg-dark rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
+                <div class="overflow-auto h-[200px] w-full">
+                  <p @click="() => { $session.setCountry(item.iso_code); $session.loadSession(); dropCountry = false }"
+                    class="w-full hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
+                    v-for="item in menuStore.countries" :key="item.iso_code">
+                    {{ item?.name }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-col items-start gap-[6px]">
+            <p>{{ $t("currency") }}</p>
+            <div
+              class="w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1">
+              <div class="p-0" @click="openDrop()">
+                <div class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark">
+                  {{  $session.currentCurrencyIso }}<span> <i
+                      class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
+                </div>
+              </div>
+
+              <div v-if="dropCurrency"
+                class="bg-bg-light dark:bg-bg-dark rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
+                <div class="overflow-auto w-full">
+                  <p @click="() => { $session.setCurrency(item.iso_code); $session.loadSession(); dropCurrency = false }"
+                    class="w-full hover:bg-block dark:hover:bg-button pl-1 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
+                    v-for="item in menuStore.currencies" :key="item.iso_code">
+                    {{ item?.name }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside } from "@vueuse/core";
+const {$session} = useNuxtApp();
+
+const isOpen = ref(false);
+const menuStore = useMenuStore();
+
+const dropdownRef = ref(null);
+
+const dropCountry = ref(false)
+const dropCurrency = ref(false)
+
+function openDrop(type?: string) {
+  if (type === 'country') {
+    dropCurrency.value = false
+    dropCountry.value = !dropCountry.value
+  } else {
+    dropCountry.value = false
+    dropCurrency.value = !dropCurrency.value
+  }
+}
+
+
+onClickOutside(dropdownRef, () => {
+  isOpen.value = false
+  dropCurrency.value = false
+  dropCountry.value = false
+});
+</script>

components/HeaderBlock.vue

@@ -1,200 +1,259 @@
 <template>
-  <div class="border-border border-b">
-    <UContainer
-      class="mx-auto w-full max-w-[360px] px-[16px] sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-[24px] xl:max-w-[1920px] xl:px-[80px]"
-    >
-      <div class="hidden h-[120px] w-full items-center justify-between xl:flex">
-        <ul class="flex items-center gap-20 whitespace-nowrap">
-          <li
-            v-for="(item, index) in menu.items"
-            :key="index"
-            class="hover:text-text-light/80 dark:hover:text-text-dark/70 cursor-pointer text-lg transition-all"
-          >
+  <div>
+    <!-- xl -->
+    <div class="w-full border-b border-border">
+      <UiContainer class="relative">
+        <div class="hidden h-[120px] w-full items-center gap-[145px] xl:flex">
+          <ul class="flex items-center justify-between gap-5 whitespace-nowrap w-full">
+            <li v-for="(item, index) in menuStore.menu" @click="menuStore.navigateToItem(item)" :key="item.id"
+              :class="['hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter',
+                route.params.id == item.id.toString() ? 'text-accent-green-light dark:text-accent-green-dark font-bold underline' : false]">
               0{{ index + 1 }} <br />
-            {{ item.name }}
+              {{ item.front_menu_lang[0].name }}
             </li>
           </ul>
-        <img src="/logo.png" alt="Frame" />
+          <ClientOnly v-if="!colorMode?.forced">
+            <img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
+              @click="menuStore.navigateToItem()" />
+          </ClientOnly>
+          <div class="w-full flex items-center justify-between">
             <div class="flex items-center gap-[30px]">
-          <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Account.svg"
-            alt="Account"
-          />
-          <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Cart.svg"
-            alt="Cart"
-          />
+                  <div>
+                <i v-if="!userStore.isLogged"
+                  @click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
+                  class="uil uil-user text-[31px] cursor-pointer"></i>
+                <div v-else class="py-[6px] px-3 border border-block rounded-sm">
+                  {{ userStore.user }}
+                </div>
+              </div>
+              <CartPopup />
+            </div>
+            <div class="flex">
+              <LangSwitcher />
+              <CountryCurrencySelector />
             </div>
             <ThemeSwitcher />
-        <button
-          class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all"
-        >
-          E-shop
+            <button @click="menuStore.navigateToShop" :class="[
+              'cursor-pointer transition-all text-inter whitespace-nowrap',
+              route.params.id == '5'
+                ? 'text-accent-green-light dark:text-accent-green-dark font-bold pb-1 border-b-2'
+                : 'hover:bg-button-hover bg-button text-white font-medium rounded-xl px-6 py-3'
+            ]">
+              {{ $t('eshop') }}
             </button>
           </div>
-      <div
-        class="hidden h-[116px] w-full items-center justify-between md:flex xl:hidden"
-      >
-        <img src="/logo.png" alt="Frame" />
+        </div>
+      </UiContainer>
+    </div>
+
+    <!-- md -->
+    <div class="hidden w-full md:flex md:flex-col xl:hidden items-center justify-center">
+      <div class="w-full border-border border-b">
+        <UiContainer class="h-[116px] flex items-center justify-between">
+          <ClientOnly v-if="!colorMode?.forced">
+            <img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
+              @click="menuStore.navigateToItem()" />
+          </ClientOnly>
           <div class="flex items-center gap-6">
-          <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Account.svg"
-            alt="Account"
-          />
-          <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Cart.svg"
-            alt="Cart"
-          />
+            <div class="flex items-center gap-[30px]">
+              <div>
+                <i v-if="!userStore.isLogged"
+                  @click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
+                  class="uil uil-user text-[31px] cursor-pointer"></i>
+                <div v-else class="py-[6px] px-3 border border-block rounded-sm">
+                  {{ userStore.user }}
+                </div>
+              </div>
+              <CartPopup />
+            </div>
+            <div class="flex">
+              <LangSwitcher />
+              <CountryCurrencySelector />
+            </div>
             <ThemeSwitcher />
-          <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Menu.svg"
-            alt="Cart"
-          />
+            <i variant="subtle" block class="uil uil-apps text-[33px] cursor-pointer" @click="open = !open"></i>
           </div>
+        </UiContainer>
       </div>
-      <div
-        class="hidden h-[84px] w-full items-center justify-between sm:flex md:hidden"
-      >
-        <img src="/logo.png" alt="Frame" />
+      <UCollapsible :ui="{ content: 'w-full' }" v-model:open="open" class="w-full">
+        <template #content>
+          <div class="w-full border-border border-b pt-6 pb-8">
+            <UiContainer class="flex flex-col gap-[30px]">
+              <div v-for="(item, index) in menuStore.menu" :key="index"
+                :class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.front_menu_lang[0].link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']"
+                @click="() => { menuStore.navigateToItem(item); open = false; }">
+                <div class="leading-[70%] text-inter">
+                  <span class="mr-4">0{{ index + 1 }}</span>
+                  {{ item.front_menu_lang[0].name }}
+                </div>
+                <!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
+                <svg width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
+                    fill="currentColor" />
+                </svg>
+              </div>
+            </UiContainer>
+          </div>
+        </template>
+      </UCollapsible>
+    </div>
+
+    <!-- sm -->
+    <div class="hidden w-full items-center justify-between sm:flex sm:flex-col md:hidden">
+      <div class="w-full border-border border-b">
+        <UiContainer class="h-[84px] flex items-center justify-between">
+          <ClientOnly v-if="!colorMode?.forced">
+            <img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
+              @click="menuStore.navigateToItem()" />
+          </ClientOnly>
           <div class="flex items-center gap-6">
-          <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Account.svg"
-            alt="Account"
-          />
-          <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Cart.svg"
-            alt="Cart"
-          />
-          <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Menu.svg"
-            alt="Cart"
-          />
+            <div class="flex items-center gap-[30px]">
+              <div>
+                <i v-if="!userStore.isLogged"
+                  @click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
+                  class="uil uil-user text-[31px] cursor-pointer"></i>
+                <div v-else class="py-[6px] px-3 border border-block rounded-sm">
+                  {{ userStore.user }}
                 </div>
               </div>
-      <div class="flex h-[84px] w-full items-center justify-between sm:hidden">
-        <img src="/logo.png" alt="Frame" />
+              <CartPopup />
+            </div>
+            <i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open"></i>
+          </div>
+        </UiContainer>
+      </div>
+      <UCollapsible :ui="{ content: 'w-full' }" v-model:open="open" class="w-full">
+        <template #content>
+          <div class="w-full border-border border-b pt-6 pb-8">
+            <UiContainer class="flex flex-col gap-[30px]">
+              <div v-for="(item, index) in menuStore.menu" @click="
+                () => {
+                  menuStore.navigateToItem(item);
+                  open = false;
+                }
+              " :key="index"
+                :class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.front_menu_lang[0].link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
+                <div class="leading-[70%] text-inter">
+                  <span class="mr-4">0{{ index + 1 }}</span>
+                  {{ item.front_menu_lang[0].name }}
+                </div>
+                <!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
+                <svg width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
+                    fill="currentColor" />
+                </svg>
+              </div>
+              <div class="flex items-center justify-between">
+                <p class="leading-[70%] text-inter">
+                  {{ $t("change_language") }}
+                </p>
+                <LangSwitcher />
+              </div>
+              <div class="flex items-center justify-between">
+                <p class="leading-[70%] text-inter">
+                  {{ $t("change_currency_and_country") }}
+                </p>
+                <CountryCurrencySelector />
+              </div>
+              <div class="flex items-center justify-between">
+                <p class="leading-[70%] text-inter">
+                  {{ $t("change_theme") }}
+                </p>
+                <ThemeSwitcher />
+              </div>
+            </UiContainer>
+          </div>
+        </template>
+      </UCollapsible>
+    </div>
+
+    <!-- smallest one -->
+    <div class="w-full items-center justify-between flex flex-col sm:hidden">
+      <div class="w-full border-border border-b">
+        <UiContainer class="h-[84px] flex items-center justify-between">
+          <ClientOnly v-if="!colorMode?.forced">
+            <img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
+              @click="menuStore.navigateToItem()" />
+          </ClientOnly>
           <div class="flex items-center gap-6">
-          <!-- <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Account.svg"
-            alt="Account"
-          /> -->
-          <!-- <UIcon class="uil uil-user h-8 w-8 cursor-pointer"></UIcon> -->
-          <img
-            class="h-8 w-8 cursor-pointer"
-            src="/icons/Menu.svg"
-            alt="Cart"
-          />
+            <div>
+              <i @click="!userStore.isLogged && menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
+                class="uil uil-user text-[30px] cursor-pointer"></i>
             </div>
+            <CartPopup />
+            <i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open"></i>
+          </div>
+        </UiContainer>
+      </div>
+      <UCollapsible :ui="{ content: 'w-full' }" v-model:open="open" class="w-full">
+        <template #content>
+          <div class="w-full border-border border-b pt-6 pb-8">
+            <UiContainer class="flex flex-col gap-[30px]">
+              <div v-for="(item, index) in menuStore.menu" @click="
+                () => {
+                  menuStore.navigateToItem(item);
+                  open = false;
+                }
+              " :key="index"
+                :class="['flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer', route.params.slug === item.front_menu_lang[0].link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
+                <div class="leading-[70%] text-inter">
+                  <span class="mr-4">0{{ index + 1 }}</span>
+                  {{ item.front_menu_lang[0].name }}
+                </div>
+                <!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
+                <svg width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
+                    fill="currentColor" />
+                </svg>
+              </div>
+              <div class="flex items-center justify-between">
+                <p class="leading-[70%] text-lg text-inter">
+                  {{ $t("change_language") }}
+                </p>
+                <LangSwitcher />
+              </div>
+              <div class="flex items-center justify-between">
+                <p class="leading-[70%] text-lg text-inter">
+                  {{ $t("change_currency_and_country") }}
+                </p>
+                <CountryCurrencySelector />
+              </div>
+              <div class="flex items-center justify-between">
+                <p class="leading-[70%] text-lg text-inter">
+                  {{ $t("change_theme") }}
+                </p>
+                <ThemeSwitcher />
+              </div>
+            </UiContainer>
+          </div>
+        </template>
+      </UCollapsible>
     </div>
-    </UContainer>
   </div>
 </template>
 <script lang="ts" setup>
-const menu = {
-  items: [
-    {
-      active: true,
-      created: "2025-04-29 14:21:16.980Z",
-      id: "l10y982y139ep7u",
-      id_lang: "en",
-      id_page: "",
-      id_parent: "",
-      is_default: false,
-      is_root: true,
-      link_rewrite: "",
-      link_title: "",
-      meta_description: "",
-      meta_title: "",
-      name: "Investice",
-      page_name: "",
-      position_id: 0,
-      updated: "2025-05-09 08:34:06.650Z",
+import CartPopup from "./CartPopup.vue";
+import CountryCurrencySelector from "./CountryCurrencySelector.vue";
+import LangSwitcher from "./LangSwitcher.vue";
+
+const menuStore = useMenuStore();
+const userStore = useUserStore();
+const productStore = useProductStore();
+const open = ref(false);
+const colorMode = useColorMode();
+
+productStore.getCart()
+
+const route = useRoute()
+const isDark = computed({
+  get() {
+    return colorMode.value === "dark";
   },
-    {
-      active: true,
-      created: "2025-04-29 14:21:16.980Z",
-      id: "l10y982y139ep7u",
-      id_lang: "en",
-      id_page: "",
-      id_parent: "",
-      is_default: false,
-      is_root: true,
-      link_rewrite: "",
-      link_title: "",
-      meta_description: "",
-      meta_title: "",
-      name: "O zlotě",
-      page_name: "",
-      position_id: 0,
-      updated: "2025-05-09 08:34:06.650Z",
+  set(_isDark) {
+    colorMode.preference = _isDark ? "dark" : "light";
   },
-    {
-      active: true,
-      created: "2025-04-29 14:21:16.980Z",
-      id: "l10y982y139ep7u",
-      id_lang: "en",
-      id_page: "",
-      id_parent: "",
-      is_default: false,
-      is_root: true,
-      link_rewrite: "",
-      link_title: "",
-      meta_description: "",
-      meta_title: "",
-      name: "Podnikání",
-      page_name: "",
-      position_id: 0,
-      updated: "2025-05-09 08:34:06.650Z",
-    },
-    {
-      active: true,
-      created: "2025-04-29 14:21:16.980Z",
-      id: "l10y982y139ep7u",
-      id_lang: "en",
-      id_page: "",
-      id_parent: "",
-      is_default: false,
-      is_root: true,
-      link_rewrite: "",
-      link_title: "",
-      meta_description: "",
-      meta_title: "",
-      name: "O Nás",
-      page_name: "",
-      position_id: 0,
-      updated: "2025-05-09 08:34:06.650Z",
-    },
-    {
-      active: true,
-      created: "2025-04-29 14:21:16.980Z",
-      id: "l10y982y139ep7u",
-      id_lang: "en",
-      id_page: "",
-      id_parent: "",
-      is_default: false,
-      is_root: true,
-      link_rewrite: "",
-      link_title: "",
-      meta_description: "",
-      meta_title: "",
-      name: "Kontakt",
-      page_name: "",
-      position_id: 0,
-      updated: "2025-05-09 08:34:06.650Z",
-    },
-  ],
-  page: 1,
-  perPage: 50,
-  totalItems: 14,
-  totalPages: 1,
-};
+});
 </script>

components/ImageBlock.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    class="h-[235px] sm:h-[350px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block relative"
+  >
+    <!-- <svg
+    class=""
+      viewBox="0 0 870 350"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <path
+        d="M0 20C0 8.9543 8.95431 0 20 0H847.666C858.641 0 867.565 8.84318 867.665 19.817L869.815 254.817C869.917 265.934 860.933 275 849.816 275H653C641.954 275 633 283.954 633 295V330C633 341.046 624.046 350 613 350H20C8.95431 350 0 341.046 0 330V20Z"
+        fill="url(#pattern0_381_6471)"
+      />
+      <defs>
+        <pattern
+          id="pattern0_381_6471"
+          patternContentUnits="objectBoundingBox"
+          width="1"
+          height="1"
+        >
+          <use
+            xlink:href="#image0_381_6471"
+            transform="matrix(0.000732064 0 0 0.0018197 0 -0.198766)"
+          />
+        </pattern>
+        <image
+          id="image0_381_6471"
+          width="1366"
+          height="768"
+          preserveAspectRatio="none"
+          xlink:href="/block.webp"
+        />
+      </defs>
+    </svg> -->
+    <img class="image" src="/block.webp" alt="">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+<style>
+.image {
+  clip-path: path("M0 20C0 8.9543 8.95431 0 20 0H847.666C858.641 0 867.565 8.84318 867.665 19.817L869.815 254.817C869.917 265.934 860.933 275 849.816 275H653C641.954 275 633 283.954 633 295V330C633 341.046 624.046 350 613 350H20C8.95431 350 0 341.046 0 330V20Z");
+}
+</style>

components/LangSwitcher.vue

@@ -0,0 +1,48 @@
+<template>
+  <USelect
+    v-model="selectedLocaleCode"
+    :items="locales"
+    value-key="code"
+    :searchable="false"
+    :ui="{
+      base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0',
+      trailing: 'hidden',
+      viewport: 'ring-0',
+      content: 'bg-bg-light dark:bg-bg-dark w-auto ring-0 border border-button',
+      leading:
+        'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 pr-6',
+      group: 'px-[5px] py-[10px]',
+      item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
+    }"
+    @update:model-value="setLocale($event); $session.setLanguage($event); $session.loadSession()"
+  >
+    <template #leading="{ modelValue }">
+      <div class="flex items-center gap-2 text-xl font-medium uppercase">
+        {{ locales.find((item: any) => item.code === modelValue)?.code }}
+      </div>
+    </template>
+
+    <template #item="{ item }">
+      <div class="flex items-center gap-2 cursor-pointer w-full">
+        <UIcon
+          :name="item.icon as string"
+          class="size-5 rounded-full border border-button/40"
+        />
+        <p
+          class="text-xl font-medium uppercase text-text-light dark:text-text-dark opacity-100"
+        >
+          {{ item.code }}
+        </p>
+      </div>
+    </template>
+  </USelect>
+</template>
+
+<script setup lang="ts">
+const { locale, locales, setLocale } = useI18n();
+const {$session} = useNuxtApp();
+
+
+const selectedLocaleCode = ref(locale.value);
+
+</script>

components/ThemeSwitcher.vue

@@ -1,3 +1,20 @@
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <div class="flex h-8 w-8 cursor-pointer items-center justify-center">
+      <i
+        @click="isDark = !isDark"
+        :class="[
+          'uil text-[32px] cursor-pointer',
+          isDark ? 'uil-moon' : 'uil-sun',
+        ]"
+      ></i>
+    </div>
+    <template #fallback>
+      <div class="size-20" />
+    </template>
+  </ClientOnly>
+</template>
+
 <script setup>
 const colorMode = useColorMode();
 
@@ -10,19 +27,3 @@ const isDark = computed({
   },
 });
 </script>
-
-<template>
-  <ClientOnly v-if="!colorMode?.forced">
-    <div class="flex h-8 w-8 cursor-pointer items-center justify-center">
-      <img
-        class="h-8 w-8"
-        :src="`/icons/${isDark ? 'Moon' : 'Light'}.svg`"
-        @click="isDark = !isDark"
-      />
-    </div>
-
-    <template #fallback>
-      <div class="size-20" />
-    </template>
-  </ClientOnly>
-</template>

components/section/AboutGoldImpact.vue

@@ -0,0 +1,128 @@
+<template>
+    <UiContainer class="space-y-[55px] sm:space-y-[75px] md:space-y-[100px]">
+        <div class="space-25-55-75">
+            <div class="grid sm:grid-cols-7 md:grid-cols-4 xl:grid-cols-2">
+                <h2 class="sm:col-start-2 sm:col-end-8 md:col-end-5 xl:col-start-2 h2-bold-bounded">
+                    {{ component.front_section_lang[0].data.section_1.title }}
+                </h2>
+            </div>
+            <div class="space-y-[40px] sm:space-55-75">
+                <div v-for="(item, index) in component.front_section_lang[0].data.section_1.text_blocks" :key="index"
+                    class="grid grid-cols-7 md:grid-cols-4 xl:grid-cols-2">
+                    <div class="flex gap-[200px]">
+                        <h4 class="h4-uppercase-bold-inter">0{{ index + 1 }}</h4>
+                        <h4 class="hidden xl:block h4-uppercase-bold-inter w-full whitespace-nowrap">
+                            {{ item.block_title }}
+                        </h4>
+                    </div>
+                    <div class="col-start-2 col-end-8 md:col-end-5 space-y-[25px] sm:space-y-[45px] md:space-y-[55px]">
+                        <h4 class="xl:hidden h4-uppercase-bold-inter w-full whitespace-nowrap">
+                            {{ item.block_title }}
+                        </h4>
+                        <p>{{ item.block_text }}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="space-25-55-75">
+            <h2 class="h2-bold-bounded">
+                {{ component.front_section_lang[0].data.section_2.title }}
+            </h2>
+            <div class="grid sm:grid-cols-2 xl:grid-cols-4 gap-[30px] auto-cols-fr auto-rows-fr">
+                <div class="border border-border rounded-2xl p-8 flex flex-col justify-between gap-[55px]"
+                    v-for="(item, index) in component.front_section_lang[0].data.section_2.text_blocks" :key="index">
+                    <div>
+                        <h4 class="h4-uppercase-bold-inter">0{{ index + 1 }}</h4>
+                        <h4 class="h4-uppercase-bold-inter">{{ item.block_title }}</h4>
+                    </div>
+                    <p>{{ item.block_text }}</p>
+                </div>
+                <div
+                    class="row-end-4 sm:row-end-3 col-start-1 col-end-2 xl:row-end-1 xl:col-start-3 xl:col-end-4 flex flex-col gap-[10px] md:gap-[30px]">
+                    <div class="w-full h-full md:h-[211px] rounded-2xl" :style="{
+                        backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                    }" />
+                    <div class="w-full h-full md:h-[211px] rounded-2xl" :style="{
+                        backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                    }" />
+                </div>
+            </div>
+        </div>
+        <div class="grid space-25-55 xl:grid-cols-2">
+            <h2 class="h2-bold-bounded">
+                {{ component.front_section_lang[0].data.section_3.title }}
+            </h2>
+            <div class="flex flex-col space-25-55">
+                <p v-for="(item, index) in component.front_section_lang[0].data.section_3.text_blocks" :key="index">
+                    {{ item }}
+                </p>
+            </div>
+        </div>
+        <div class="grid xl:space-25-55 grid-cols-1 xl:grid-cols-2 xl:gap-[30px]">
+            <div class="flex flex-col gap-[25px] sm:gap-[55px] md:gap-[75px] xl:justify-between">
+                <h2 class="h2-bold-bounded">
+                    {{ component.front_section_lang[0].data.section_4.title }}
+                </h2>
+                <p>{{ component.front_section_lang[0].data.section_4.description }}</p>
+            </div>
+            <div class="mb-[25px] mt-5 md:mb-[55px] xl:m-0 w-full h-[222px] sm:h-[371px] rounded-2xl" :style="{
+                backgroundImage: `url('/api/public/file/${component.img[2]}_l.webp')`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+            }" />
+            <p class="xl:col-start-2 xl:col-end-3">{{ component.front_section_lang[0].data.section_4.description_second
+            }}</p>
+        </div>
+    </UiContainer>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    component: {
+        id: number
+        name: string
+        img: string[]
+        component_name: string
+        is_no_lang: boolean
+        page_name: string
+        front_section_lang: {
+            data: {
+                section_1: {
+                    title: string;
+                    text_blocks: [
+                        {
+                            block_title: string;
+                            block_text: string;
+                        }
+                    ];
+                };
+                section_2: {
+                    title: string;
+                    text_blocks: [
+                        {
+                            block_title: string;
+                            block_text: string;
+                        }
+                    ];
+                };
+                section_3: {
+                    title: string;
+                    text_blocks: [];
+                };
+                section_4: {
+                    title: string;
+                    description: string;
+                    description_second: string;
+                };
+            }
+            id_front_section: number
+            id_lang: number
+        }[]
+    }
+}>();
+
+</script>

components/section/AboutGoldMain.vue

@@ -0,0 +1,109 @@
+<template>
+    <UiContainer class="space-y-[55px] sm:space-y-[75px] md:space-y-[100px]">
+        <div class="grid grid-cols-1 xl:grid-cols-2 gap-[10px] sm:gap-[30px]">
+            <div class="flex flex-col gap-[10px] sm:gap-[30px]">
+                <div
+                    class="h-[240px] sm:h-[400px] md:h-[490px] bg-block p-[25px] sm:p-[50px] rounded-2xl flex flex-col justify-between">
+                    <div>
+                        <h1 class="h1-big text-accent-green-light mb-6 md:mb-10">
+                            {{ component.front_section_lang[0].data.title }}
+                        </h1>
+                        <p class="text-text-light sm:text-xl md:text-2xl font-medium">{{
+                            component.front_section_lang[0].data.description }}</p>
+                    </div>
+                    <UiButtonArrow type="fill" :arrow="true">
+                        {{ $t('buy_gold') }}
+                    </UiButtonArrow>
+                </div>
+                <div class="flex gap-[10px] sm:gap-[30px]">
+                    <div class="rounded-2xl h-[155px] sm:h-[225px] md:h-[280px] w-full" :style="{
+                        backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                    }" />
+                    <div class="rounded-2xl h-[155px] sm:h-[225px] md:h-[280px] w-full" :style="{
+                        backgroundImage: `url('/api/public/file/${component.img[2]}_l.webp')`,
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                    }" />
+                    <div class="hidden sm:block xl:hidden h-[225px] md:h-[280px] rounded-2xl w-full border border-block"
+                        :style="{
+                            backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
+                            backgroundSize: 'cover',
+                            backgroundPosition: 'center',
+                        }" />
+                </div>
+            </div>
+            <div class="sm:hidden xl:block h-[326px] md:h-auto min-w-[40%] xl:min-w-[60%] rounded-2xl border border-block"
+                :style="{
+                    backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                }" />
+        </div>
+        <div class="grid md:grid-cols-1 xl:grid-cols-2 gap-[20px] md:auto-rows-fr sm:gap-[30px]">
+            <div class="space-25-55-75">
+                <h2 class="h2-bold-bounded">{{ component.front_section_lang[0].data.section_2.title }}</h2>
+                <div class="space-y-[40px] sm:space-y-[50px]">
+                    <p v-for="(item, index) in component.front_section_lang[0].data.section_2.text_blocks" :key="index">
+                        {{ item }}
+                    </p>
+                </div>
+            </div>
+            <div class="w-full md:h-full rounded-2xl h-[327px] sm:h-[550px]" :style="{
+                backgroundImage: `url('/api/public/file/${component.img[3]}_l.webp')`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+            }" />
+        </div>
+        <div
+            class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-y-[25px] sm:gap-y-[55px] xl:gap-y-0 gap-x-[30px]">
+            <h2 class="h2-bold-bounded sm:col-start-1 sm:col-end-3">{{
+                component.front_section_lang[0].data.section_3.title }}
+            </h2>
+            <div v-for="(item, index) in component.front_section_lang[0].data.section_3.text_blocks" :key="index"
+                class="flex flex-col justify-between space-25-55">
+                <p class="md:px-4 xl:p-0">{{ item }}</p>
+                <div class=" rounded-2xl h-[227px] sm:h-[281px]" :style="{
+                    backgroundImage: `url('/api/public/file/${component.img[index + 4]}_l.webp')`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                }" />
+            </div>
+            <div
+                class="sm:col-start-1 sm:col-end-3 xl:col-start-3 xl:col-end-5 flex justify-center xl:items-end xl:justify-end">
+                <UiButtonArrow type="fill" :arrow="true">{{ $t('buy_gold') }}</UiButtonArrow>
+            </div>
+        </div>
+    </UiContainer>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    component: {
+        id: number
+        name: string
+        img: string[]
+        component_name: string
+        is_no_lang: boolean
+        page_name: string
+        front_section_lang: {
+            data: {
+                title: string
+                description: string
+                section_2: {
+                    title: string
+                    text_blocks: string[]
+                }
+                section_3: {
+                    title: string
+                    text_blocks: string[]
+                }
+            }
+            id_front_section: number
+            id_lang: number
+        }[]
+    }
+}>();
+
+</script>

components/section/AboutUsDifferent.vue

@@ -0,0 +1,66 @@
+<template>
+  <UiContainer class="space-25-55-75">
+    <div class="grid xl:grid-cols-2">
+      <div class="space-25-75 xl:col-start-2">
+        <h2 class="h2-bold-bounded">
+          {{ component.front_section_lang[0].data.title }}
+        </h2>
+        <p>{{ component.front_section_lang[0].data.description }}</p>
+      </div>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 grid-rows-5 md:grid-rows-3 xl:grid-rows-2 gap-8">
+      <div v-for="(item, index) in component.front_section_lang[0].data.feature_blocks" :key="index" :class="[
+        'p-8 rounded-2xl border border-block flex flex-col justify-between gap-4',
+        index === 0 && 'bg-block dark:text-bg-dark',
+        index === 1 && 'xl:col-start-2 xl:col-end-3',
+        index === 2 && 'xl:col-start-4 xl:col-end-5',
+        index === 3 &&
+        'md:col-start-1 md:col-end-3 xl:col-start-2 xl:col-end-4',
+      ]">
+        <h4 class="h4-uppercase-bold-inter">
+          <span>0{{ index + 1 }} <br /></span>{{ item.block_title }}
+        </h4>
+        <p>{{ item.block_description }}</p>
+      </div>
+      <div
+        class="sm:text-white xl:row-start-2 md:col-start-1 md:col-end-3 xl:col-end-2 w-full md:h-full flex justify-center xl:items-end">
+        <UiButtonArrow :arrow="true" type="fill">Zakoupit zlato</UiButtonArrow>
+      </div>
+      <div class="rounded-2xl row-start-4 md:row-start-2 md:col-start-2 md:col-end-3 xl:col-start-4 xl:col-end-5"
+        :style="{
+          backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'top',
+        }" />
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+import { UiButtonArrow } from "#components";
+
+defineProps<{
+  component: {
+    id: number
+    name: string
+    img: string[]
+    component_name: string
+    is_no_lang: boolean
+    page_name: string
+    front_section_lang: {
+      data: {
+        title: string
+        description: string
+        feature_blocks: {
+          block_title: string
+          block_description: string
+          fill?: boolean
+        }[]
+      }
+      id_front_section: number
+      id_lang: number
+    }[]
+  }
+}>();
+
+</script>

components/section/AboutUsHistory.vue

@@ -0,0 +1,124 @@
+<template>
+  <UiContainer class="space-55-75">
+    <div class="space-25-55-75">
+      <h2 class="h2-bold-bounded">
+        {{ component.front_section_lang[0].data.section_1.title }}
+      </h2>
+      <div class="flex flex-col xl:flex-row gap-12">
+        <div class="rounded-2xl h-[255px] sm:h-[435px] md:h-[500px] w-full xl:min-w-[700px]" :style="{
+          backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'bottom',
+        }" />
+        <div class="flex flex-col justify-between space-25-55">
+          <div class="flex flex-col gap-4">
+            <h4 class="h4-uppercase-bold-inter">
+              {{ component.front_section_lang[0].data.section_1.sub_title }}
+            </h4>
+            <div class="flex flex-col">
+              <p v-for="(item, index) in component.front_section_lang[0].data.section_1.sub_description" :key="index">
+                {{ item }}
+              </p>
+            </div>
+          </div>
+          <h4 class="h4-uppercase-bold-inter">
+            {{ component.front_section_lang[0].data.section_1.sub_title_second }}
+          </h4>
+        </div>
+      </div>
+    </div>
+    <div class="space-25-55-75">
+      <h2 class="h2-bold-bounded sm:text-center">
+        {{ component.front_section_lang[0].data.section_2.title }}
+      </h2>
+      <div class="space-25-55">
+        <div class="flex flex-col w-full xl:w-[55%]">
+          <p v-for="(item, index) in component.front_section_lang[0].data.section_2.description" :key="index">
+            {{ item }}
+          </p>
+        </div>
+        <div class="w-full md:ml-10 xl:m-0 xl:grid xl:grid-cols-2">
+          <h4 class="col-start-2 col-end-3 h4-uppercase-bold-inter">
+            {{ component.front_section_lang[0].data.section_3.title }}
+          </h4>
+        </div>
+      </div>
+      <div class="flex flex-col xl:flex-row gap-12">
+        <div class="flex flex-col sm:flex-row gap-3 min-w-[60%]">
+          <div class="rounded-2xl h-[230px] sm:h-[300px] w-full xl:h-[770px]" :style="{
+            backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }" />
+          <div class="rounded-2xl xl:hidden w-full h-[230px] sm:h-[300px] xl:w-full xl:h-[328px]" :style="{
+            backgroundImage: `url('/api/public/file/${component.img[2]}_l.webp')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }" />
+        </div>
+        <div class="flex flex-col justify-between space-25-55 xl:w-[70%]">
+          <div class="hidden xl:block rounded-2xl max-full min-h-[330px]" :style="{
+            backgroundImage: `url('/api/public/file/${component.img[2]}_l.webp')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }" />
+          <div class="h-full flex flex-col gap-5 xl:gap-0 justify-between">
+            <h4 class="col-start-2 col-end-3 h4-uppercase-bold-inter">
+              {{ component.front_section_lang[0].data.section_4.title }}
+            </h4>
+            <div class="flex flex-col">
+              <p v-if="component.front_section_lang[0].data.section_4.description"
+                v-html="component.front_section_lang[0].data.section_4.description[0]"></p>
+              <br />
+              <p v-if="component.front_section_lang[0].data.section_4.description"
+                v-html="component.front_section_lang[0].data.section_4.description[1]"></p>
+            </div>
+            <h4 class="col-start-2 col-end-3 h4-uppercase-bold-inter">
+              {{ component.front_section_lang[0].data.section_5.title }}
+            </h4>
+          </div>
+        </div>
+      </div>
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  component: {
+    id: number
+    name: string
+    img: string[]
+    component_name: string
+    is_no_lang: boolean
+    page_name: string
+    front_section_lang: {
+      data: {
+        section_1: {
+          title: string
+          sub_title: string
+          sub_description: string[]
+          sub_title_second: string
+        }
+        section_2: {
+          title: string
+          description: string[]
+        }
+        section_3: {
+          title: string
+        }
+        section_4: {
+          title: string
+          description: string[]
+        }
+        section_5: {
+          title: string
+        }
+      }
+      id_front_section: number
+      id_lang: number
+    }[]
+  }
+}>();
+
+</script>

components/section/AboutUsMain.vue

@@ -0,0 +1,86 @@
+<template>
+  <UiContainer class="space-y-[55px] sm:space-y-[75px] xl:space-y-[100px]">
+    <div class="w-full flex flex-col md:flex-row justify-between gap-7">
+      <div class="flex flex-col justify-between w-full gap-4 xl:w-[45%]">
+        <div class="space-y-[25px]">
+          <h1 class="h1-big text-accent-green-light dark:text-accent-green-dark">
+            {{ component.front_section_lang[0].data.main_title }}
+          </h1>
+          <p>
+            {{ component.front_section_lang[0].data.main_description }}
+          </p>
+        </div>
+        <h4 class="h4-uppercase-bold-inter">
+          {{ component.front_section_lang[0].data.main_subtitle }}
+        </h4>
+      </div>
+      <div class="rounded-2xl h-[340px] sm:h-[380px] md:min-w-[324px] xl:h-[800px] xl:min-w-[740px] m-0 sm:mx-10 md:m-0"
+        :style="{
+          backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }"></div>
+    </div>
+    <div class="space-25-55-75">
+      <h2 class="h2-bold-bounded">
+        {{ component.front_section_lang[0].data.story_title }}
+      </h2>
+      <div class="flex flex-col-reverse md:flex-row w-full gap-6">
+        <div class="rounded-2xl h-[390px] md:h-auto min-w-[40%] xl:min-w-[60%]" :style="{
+          backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }" />
+        <div class="flex flex-col">
+          <p v-for="(item, index) in component.front_section_lang[0].data.story_description" :key="index">
+            {{ item }}
+          <div v-if="index < component.front_section_lang[0].data.story_description.length - 1">
+            <br>
+          </div>
+          </p>
+        </div>
+      </div>
+      <div class="flex flex-col w-full gap-6">
+        <h4 class="h4-uppercase-bold-inter">
+          {{ component.front_section_lang[0].data.story_subtitle }}
+        </h4>
+        <div class="flex flex-col justify-between xl:max-w-[70%]">
+          <p v-for="(el, indexEl) in component.front_section_lang[0].data.story_sub_description" :key="indexEl">
+            {{ el }}
+          <div v-if="indexEl < component.front_section_lang[0].data.story_sub_description.length - 1">
+            <br>
+          </div>
+          </p>
+        </div>
+      </div>
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+
+defineProps<{
+  component: {
+    id: number
+    name: string
+    img: string[]
+    component_name: string
+    is_no_lang: boolean
+    page_name: string
+    front_section_lang: {
+      data: {
+        main_title: string
+        main_description: string
+        main_subtitle: string
+        story_title: string
+        story_description: string[]
+        story_subtitle: string
+        story_sub_description: string[]
+      }
+      id_front_section: number
+      id_lang: number
+    }[]
+  }
+}>();
+
+</script>

components/section/BusinessMain.vue

@@ -0,0 +1,118 @@
+<template>
+  <UiContainer class="space-y-[55px] md:space-y-[75px] xl:space-y-[100px]">
+    <div class="space-y-10 sm:space-y-[55px] md:space-y-14">
+      <h1 class="h1 text-center">
+        <span v-for="(item, index) in component.front_section_lang[0].data.title" :key="index" :class="[
+          item.highlight
+            ? 'text-accent-green-light dark:text-accent-green-dark'
+            : '',
+          'inline',
+        ]">
+          {{ item.text }}
+          <span v-if="index !== component.front_section_lang[0].data.title.length - 1">
+          </span>
+        </span>
+      </h1>
+      <div class="h-[180px] sm:h-[330px] md:h-[500px] rounded-2xl" :style="{
+        backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }" />
+      <div class="md:w-full xl:w-[70%] space-y-14">
+        <p>{{ component.front_section_lang[0].data.main_description }}</p>
+        <h4 class="h4-uppercase-bold-inter">
+          {{ component.front_section_lang[0].data.secondary_description }}
+        </h4>
+      </div>
+    </div>
+    <div class="grid space-25-75 xl:space-0 grid-cols-1 xl:grid-cols-2">
+      <h2 class="h2-bold-bounded">
+        {{ component.front_section_lang[0].data.section_1_title }}
+      </h2>
+      <p v-html="component.front_section_lang[0].data.section_1_description"></p>
+    </div>
+    <div class="grid space-25-75 xl:space-0 grid-cols-1 xl:grid-cols-2">
+      <h2 class="h2-bold-bounded">
+        <span v-for="(item, index) in component.front_section_lang[0].data.section_2_title" :key="index" :class="[
+          item.highlight
+            ? 'text-accent-green-light dark:text-accent-green-dark'
+            : '',
+          'inline',
+        ]">
+          {{ item.text }}
+          <span v-if="index !== component.front_section_lang[0].data.title.length - 1">
+          </span>
+        </span>
+      </h2>
+      <p v-html="component.front_section_lang[0].data.section_2_description"></p>
+    </div>
+    <div class="space-25-75">
+      <h2 class="h2-bold-bounded">
+        {{ component.front_section_lang[0].data.section_3_title }}
+      </h2>
+      <div class="grid grid-cols-1 space-25-55 md:space-0 xl:gap-2 md:grid-cols-2">
+        <div class="space-y-[25px] sm:space-y-[45px]">
+          <p>{{ component.front_section_lang[0].data.section_3_description }}</p>
+          <div class="">
+            <p v-for="(item, index) in component.front_section_lang[0].data
+              .section_3_items" :key="index">
+              {{ index + 1 }}.
+              {{ item }}
+            </p>
+          </div>
+        </div>
+        <div class="h-[315px] xl:h-full rounded-2xl" :style="{
+          backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }" />
+      </div>
+    </div>
+    <div class="grid grid-cols-1 xl:grid-cols-2">
+      <div class="col-start-2 col-end-3 space-25-75 xl:space-0">
+        <h2 class="h2-bold-bounded">
+          {{ component.front_section_lang[0].data.section_4_title }}
+        </h2>
+        <p v-html="component.front_section_lang[0].data.section_4_description"></p>
+      </div>
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  component: {
+    id: number
+    name: string
+    img: string[]
+    component_name: string
+    is_no_lang: boolean
+    page_name: string
+    front_section_lang: {
+      data: {
+        title: {
+          text: string
+          highlight: boolean
+        }[]
+        main_description: string
+        secondary_description: string
+        section_1_title: string
+        section_1_description: string
+        section_2_title: {
+          text: string
+          highlight: boolean
+        }[]
+        section_2_description: string
+        section_3_title: string
+        section_3_description: string
+        section_3_items: string[]
+        section_4_title: string
+        section_4_description: string
+      }
+      id_front_section: number
+      id_lang: number
+    }[]
+  }
+}>();
+
+</script>

components/section/BusinessReasons.vue

@@ -0,0 +1,182 @@
+<template>
+  <UiContainer class="space-55-75 xl:!space-y-[100px]">
+    <div class="space-25-75">
+      <h2 class="h2-bold-bounded max-w-[95%]">
+        <span v-for="(item, index) in component.front_section_lang[0].data.reasons_section_title" :key="index" :class="[
+          item.highlight
+            ? 'text-accent-green-light dark:text-accent-green-dark'
+            : '',
+          'inline',
+        ]">
+          {{ item.text }}
+          <span v-if="
+            index !==
+            component.front_section_lang[0].data.reasons_section_title.length - 1
+          ">
+          </span>
+        </span>
+      </h2>
+      <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 md:px-10 xl:p-0 gap-8 auto-rows-fr">
+        <div v-for="(item, index) in component.front_section_lang[0].data.reason_blocks" :key="index" :class="[
+          'p-[25px] rounded-2xl border border-block flex flex-col justify-between gap-20',
+          index === 1 && 'xl:col-start-2 xl:col-end-3',
+          index === 2 && 'xl:col-start-4 xl:col-end-5',
+          index === 3 && 'xl:col-start-2 xl:col-end-3',
+        ]">
+          <h4 class="h4-uppercase-bold-inter">
+            <span>0{{ index + 1 }} <br /></span>{{ item.title }}
+          </h4>
+          <p>{{ item.description }}</p>
+        </div>
+
+        <div class="row-end-7 sm:row-auto rounded-2xl flex items-center justify-center min-h-[200px]">
+          <div class="w-full h-full rounded-2xl" :style="{
+            backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'top',
+          }" />
+        </div>
+      </div>
+    </div>
+    <div class="space-25-55">
+      <div>
+        <div class="space-25-75">
+          <h2 class="h2-bold-bounded">
+            {{ component.front_section_lang[0].data.cta_section_title }}
+          </h2>
+          <div class="hidden xl:grid grid-cols-2 gap-6">
+            <div class="flex flex-col gap-20">
+              <p>{{ component.front_section_lang[0].data.cta_description_intro }}</p>
+              <p>{{ component.front_section_lang[0].data.cta_description_details }}</p>
+            </div>
+            <h4 class="h4-uppercase-bold-inter">
+              {{ component.front_section_lang[0].data.main_call_to_action_statement }}
+            </h4>
+          </div>
+          <div class="xl:hidden space-25-55">
+            <div class="grid grid-cols-1 md:grid-cols-2 md:gap-[55px] space-25-55">
+              <p>{{ component.front_section_lang[0].data.cta_description_intro }}</p>
+              <h4 class="h4-uppercase-bold-inter">
+                {{ component.front_section_lang[0].data.main_call_to_action_statement }}
+              </h4>
+            </div>
+            <p>{{ component.front_section_lang[0].data.cta_description_details }}</p>
+          </div>
+        </div>
+      </div>
+      <div class="space-y-[45px]">
+        <h4 class="h4-uppercase-bold-inter">
+          {{ component.front_section_lang[0].data.form_section_title }}
+        </h4>
+        <div class="flex flex-col md:flex-row gap-8 md:gap-[30px] xl:gap-0">
+          <div class="p-[25px] md:p-[50px] bg-block rounded-2xl space-y-[30px] xl:ml-40 xl:w-[65%]">
+            <div class="flex gap-[30px]">
+              <input :placeholder="$t('first_name')" type="text"
+                class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
+              <input :placeholder="$t('email')" type="text"
+                class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
+            </div>
+            <textarea :placeholder="$t('form_question')"
+              class="border h-[145px] border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
+
+            <div class="w-full flex justify-center sm:justify-start">
+              <UiButtonArrow type="border">{{
+                $t("submit_form")
+                }}</UiButtonArrow>
+            </div>
+          </div>
+          <div class="space-y-[30px] xl:px-[50px] sm:px-10">
+            <h4 class="h4-uppercase-bold-inter">
+              {{ $t('contact_info') }}
+            </h4>
+            <div class="flex flex-col sm:flex-row items-center sm:items-start md:flex-col justify-between gap-[30px]">
+              <div>
+                <p class="text-gray">{{ $t("phone") }}</p>
+                <p>+420 608 428 782</p>
+              </div>
+              <div>
+                <p class="text-gray">{{ $t("email") }}</p>
+                <p>web@yourgold.cz</p>
+              </div>
+              <div>
+                <p class="text-gray">{{ $t("office_address") }}</p>
+                <p>
+                  Floriána Nováka 3 <br />
+                  796 01 Prostějov <br />
+                  Czech Republic <br />
+                  CZ 08435456
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-col xl:flex-row xl:h-[130px] gap-[45px]">
+        <div class="w-full xl:w-[560px] h-[130px] xl:h-full rounded-2xl" :style="{
+          backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }" />
+        <div class="flex flex-col h-full justify-between items-stretch space-y-[25px] sm:space-y-[55px] xl:space-y-0">
+          <p>{{ component.front_section_lang[0].data.closing_inspirational_block }}</p>
+          <h4 class="h4-uppercase-bold-inter">
+            <span v-for="(item, index) in component.front_section_lang[0].data.title" :key="index" :class="[
+              item.highlight
+                ? 'text-accent-green-light dark:text-accent-green-dark'
+                : '',
+              'inline',
+            ]">
+              {{ item.text }}
+              <span v-if="
+                index !==
+                component.front_section_lang[0].data.reasons_section_title.length - 1
+              ">
+              </span>
+            </span>
+          </h4>
+          <p>{{ component.front_section_lang[0].data.final_tagline }}</p>
+        </div>
+      </div>
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  component: {
+    id: number
+    name: string
+    img: string[]
+    component_name: string
+    is_no_lang: boolean
+    page_name: string
+    front_section_lang: {
+      data: {
+        reasons_section_title: {
+          text: string
+          highlight: boolean
+        }[]
+        reason_blocks: {
+          title: string
+          description: string
+        }[]
+        cta_section_title: string
+        cta_description_intro: string
+        cta_description_details: string
+        main_call_to_action_statement: string
+        form_section_title: string
+        closing_inspirational_block: string
+        title: {
+          text: string
+          highlight: boolean
+        }[]
+        final_tagline: string
+        contact_info: string
+      }
+      id_front_section: number
+      id_lang: number
+    }[]
+  }
+}>();
+
+</script>

components/section/CategoryTree.vue

@@ -0,0 +1,46 @@
+<template>
+  <div v-if="hasMainCategory" :class="['flex flex-col gap-[25px]', isOpen && 'border-b border-block pb-[10px]']">
+    <div @click="toggle" class="flex items-center justify-between rounded-lg cursor-pointer">
+      <div class="flex items-center justify-between w-full">
+        <p class="text-lg xl:text-2xl font-extrabold text-black dark:text-white">
+          {{ mainCategoryName }}
+        </p>
+        <span :class="['flex items-center justify-center', isOpen && 'rotate-180', 'transition-all']"><i
+            class="iconify i-lucide:chevron-down text-button shrink-0 size-6 ms-auto"></i></span>
+      </div>
+    </div>
+
+    <ul class="flex flex-col gap-[25px]" v-show="isOpen">
+      <li @click="$emit('change-category', child)" v-for="child in subcategories" :key="child.id"
+        class="text-base xl:text-lg cursor-pointer flex justify-between items-center"
+        :class="child.id === props.active ? 'text-yellow' : ''">
+        <span>{{ child.langs[0].Name }}</span>
+        <span>12</span>
+      </li>
+    </ul>
+  </div>
+  <div v-else>
+    <!-- Optional: Placeholder or message when main category is not available -->
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+// Define the props
+const props = defineProps({
+  data: Array,
+  active: Number
+});
+
+const isOpen = ref(false);
+
+const toggle = () => {
+  isOpen.value = !isOpen.value;
+};
+
+// Computed properties
+const hasMainCategory = computed(() => props.data && props.data.length > 0 && props.data[0].langs && props.data[0].langs.length > 0);
+const mainCategoryName = computed(() => hasMainCategory.value ? props.data[0].langs[0].Name : '');
+const subcategories = computed(() => hasMainCategory.value && props.data[0].children ? props.data[0].children : []);
+</script>

components/section/CheckoutMain.vue

@@ -0,0 +1,257 @@
+<template>
+    <UiContainer>
+        <div class="xl:w-[85%] mx-auto">
+            <div class="space-25-55">
+                <div class="w-full flex items-center sm:justify-center">
+                    <div
+                        class="flex items-center justify-between sm:justify-center sm:gap-[25px] text-gray dark:text-button-disabled w-full sm:w-auto">
+                        <div class="sm:px-6 sm:py-3 mx-auto">
+                            {{ $t("login") }}
+                        </div>
+                        <div
+                            class="cursor-pointer transition-all text-inter hover:bg-button-hover bg-button text-white font-medium rounded-xl px-3 py-1 sm:px-6 sm:py-3">
+                            {{ $t("address") }}
+                        </div>
+                        <div class="sm:px-6 sm:py-3 mx-auto">
+                            {{ $t("summary") }}
+                        </div>
+                        <div class="hidden sm:block sm:px-6 sm:py-3 sm:mx-auto">
+                            {{ $t("order_placed") }}
+                        </div>
+                    </div>
+                </div>
+                <div class="space-y-[25px] sm:space-y-[30px]">
+                    <h2 class="h2-bold-bounded">
+                        {{ $t("Account address") }}
+                    </h2>
+                    <div class="flex flex-col gap-[30px] sm:flex-row">
+                        <div class="flex flex-col sm:w-1/2 gap-[25px] sm:gap-[30px]">
+                            <CheckoutInput v-model="checkoutStore.userName" :id="1" disabled>{{ $t("first_name")
+                                }} </CheckoutInput>
+                            <CheckoutInput v-model="checkoutStore.lastName" :id="2" disabled>{{ $t("surname")
+                                }} </CheckoutInput>
+                            <CheckoutInput v-model="checkoutStore.address" :id="3" disabled>{{ $t("address")
+                                }} </CheckoutInput>
+                            <CheckoutInput v-model="checkoutStore.postCode" :id="4" disabled>{{ $t("post_code")
+                                }} </CheckoutInput>
+                        </div>
+                        <div class="flex flex-col sm:w-1/2 gap-[30px]">
+                            <CheckoutInput v-model="checkoutStore.city" :id="5" disabled>{{ $t("city")
+                                }} </CheckoutInput>
+                            <CheckoutInput v-model="checkoutStore.country" :id="6" disabled>{{ $t("country")
+                                }} </CheckoutInput>
+                            <CheckoutInput v-model="checkoutStore.accountPhoneNumber" :id="7" disabled>{{ $t("phone")
+                                }} </CheckoutInput>
+                        </div>
+                    </div>
+                </div>
+                <div class="space-y-[30px]">
+                    <h2 class="h2-bold-bounded">
+                        {{ $t("Shipping details") }}
+                    </h2>
+                    <div class="flex flex-col gap-2">
+                        <div
+                            :class="['flex items-center gap-[10px] relative border border-block rounded-lg h-[50px] sm:h-[67px] w-full', checkoutStore.vUseAccountPhoneNumber && 'px-6']">
+                            <div class="flex items-center gap-5 sm:gap-[25px]"
+                                v-if="!checkoutStore.vUseAccountPhoneNumber">
+                                <div class="flex flex-col items-start gap-[25px]">
+                                    <div ref="dropdownIsoRef"
+                                        class="pl-5 sm:pl-[25px] relative w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0">
+                                        <div class="p-0" @click="dropIso = !dropIso">
+                                            <div
+                                                class="flex items-center gap-2 text-base sm:text-xl font-medium uppercase text-text-light dark:text-text-dark">
+                                                <p class="hidden sm:block">{{ checkoutStore.selectedIso.name }}</p>
+                                                <p class="sm:hidden">{{ checkoutStore.selectedIso.iso_code }}</p>
+                                                <span> <i
+                                                        class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
+                                            </div>
+                                        </div>
+
+                                        <div v-if="dropIso"
+                                            class="absolute w-[130px] sm:w-full mt-2 left-0 bg-bg-light dark:bg-bg-dark rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
+                                            <div class="overflow-auto h-[200px] w-full overflow-x-hidden">
+                                                <p @click="() => { checkoutStore.selectedIso = item; dropIso = false; checkoutStore.changePrefix(item.call_prefix as string) }"
+                                                    class="w-full hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
+                                                    v-for="item in menuStore.countries" :key="item.iso_code">
+                                                    {{ item?.name }}
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <p class="text-sm sm:text-xl border-r pr-[10px] border-block">{{
+                                    checkoutStore.currentPrefix }}</p>
+                            </div>
+                            <input id="phone"
+                                :value="checkoutStore.vUseAccountPhoneNumber ? checkoutStore.accountPhoneNumber : checkoutStore.phoneNumber"
+                                :disabled="checkoutStore.vUseAccountPhoneNumber" @input="(e) => {
+                                    if (!checkoutStore.vUseAccountPhoneNumber) {
+                                        checkoutStore.phoneNumber = (e.target as HTMLInputElement).value;
+                                    }
+                                }" type="tel" placeholder="123 xxxx xxx"
+                                class="placeholder:text-sm sm:placeholder:text-xl placeholder:text-gray placeholder:uppercase dark:placeholder:text-bg-light rounded-lg h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-0" />
+                        </div>
+                        <p v-if="checkoutStore.phoneValidation === false && !checkoutStore.vUseAccountPhoneNumber"
+                            class="text-red-500">Invalid phone number</p>
+                    </div>
+
+                    <div class="flex items-center gap-2">
+                        <input id="checkbox" @change="(event: Event) => {
+                            const target = event.target as HTMLInputElement
+                            target.checked ? checkoutStore.vUseAccountPhoneNumber = true : checkoutStore.vUseAccountPhoneNumber = false
+                            checkoutStore.phoneValidation = null
+                        }" type="checkbox" class="border border-button !bg-inherit" />
+                        <p>{{ $t('use_account_phone') }}</p>
+                    </div>
+                </div>
+                <div class="space-y-[30px] h-full">
+                    <h2 class="h2-bold-bounded">
+                        {{ $t("Select delivery address") }}
+                    </h2>
+                    <div
+                        class="flex flex-col md:flex-row items-center justify-center gap-[10px] sm:gap-[25px] md:h-[225px]">
+                        <div class="w-full sm:w-[500px] flex flex-col gap-4 h-full">
+                            <div v-for="(item, index) in checkoutStore.addressesList" :key="index"
+                                :class="['flex min-h-[200px] md:h-full flex-col py-[15px] px-[25px] gap-[15px] rounded-lg border-2', checkoutStore.activeAddress === item ? 'border-button' : 'border-block']">
+                                <div
+                                    :class="['flex flex-col justify-between gap-[10px] h-full', checkoutStore.activeAddress !== item && 'text-gray dark:text-button-disabled']">
+                                    <span>{{ item.address.name }} {{ item.address.surname }}</span>
+                                    <span>{{ item.address.street }}</span>
+                                    <span>{{ item.address.postcode }} {{ item.address.city }}</span>
+                                    <span>{{ item.address.country_iso }}</span>
+                                </div>
+                                <div class="flex items-center gap-2 border-t pt-[15px] border-block">
+                                    <input id="checkbox" :checked="checkoutStore.activeAddress ? true : false" @change="(event: Event) => {
+                                        const target = event.target as HTMLInputElement
+                                        target.checked ? checkoutStore.activeAddress = item : checkoutStore.activeAddress = null;
+                                        checkoutStore.isOpen = false;
+                                    }" type="checkbox" class="border border-button !bg-inherit" />
+                                    <p>{{ $t('choose_default_address') }}</p>
+                                </div>
+                            </div>
+                        </div>
+                        <p class="uppercase">{{ $t("or") }}</p>
+                        <div @click="() => {
+                            checkoutStore.isOpen = !checkoutStore.isOpen
+                            checkoutStore.activeAddress = null
+                        }"
+                            :class="['cursor-pointer w-full sm:w-[500px] py-[15px] px-[25px] rounded-lg border-2 flex flex-col items-center justify-center min-h-[200px] md:h-full', checkoutStore.isOpen ? 'border-button text-button' : 'text-gray border-block ']">
+                            <h4
+                                :class="['font-inter text-base leading-[150%] uppercase text-[16px] sm:text-[20px] border-b', checkoutStore.isOpen ? 'border-button' : 'border-gray']">
+                                {{ $t("add_new_address") }}
+                            </h4>
+                        </div>
+                    </div>
+
+                    <div v-if="checkoutStore.isOpen"
+                        class="flex flex-col items-center gap-[30px] justify-center w-full">
+                        <div class="flex flex-col gap-[30px] xl:flex-row w-full">
+                            <div class="flex flex-col sm:w-1/2 gap-[25px] sm:gap-[30px]">
+                                <CheckoutInput v-model="checkoutStore.vNewAddressName" :placeholder="$t('first_name')"
+                                    :id="8">{{ $t("first_name") }}
+                                </CheckoutInput>
+                                <CheckoutInput v-model="checkoutStore.vNewAddressAddress" :placeholder="$t('address')"
+                                    :id="9">{{ $t("address") }}
+                                </CheckoutInput>
+                                <CheckoutInput v-model="checkoutStore.vNewAddressCity" :placeholder="$t('city')"
+                                    :id="10">{{ $t("city") }}
+                                </CheckoutInput>
+                            </div>
+                            <div class="flex flex-col sm:w-1/2 gap-[25px] sm:gap-[30px]">
+                                <CheckoutInput v-model="checkoutStore.vNewAddressSurname" :placeholder="$t('surname')"
+                                    :id="11">{{ $t("surname") }}
+                                </CheckoutInput>
+                                <div class="space-y-[15px]">
+                                    <p class="pl-6">
+                                        {{ $t("country") }}
+                                    </p>
+                                    <div ref="dropdownCountryRef"
+                                        class="relative w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0">
+                                        <div class="border border-block placeholder:text-gray dark:placeholder:text-button-disabled rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2 flex items-center justify-start"
+                                            @click="dropCountry = !dropCountry">
+                                            <div
+                                                class="flex items-center gap-2 text-base sm:text-xl font-medium uppercase text-text-light dark:text-text-dark">
+                                                {{ checkoutStore.vNewAddressCountry ?
+                                                    checkoutStore.vNewAddressCountry.name : '-' }} <span> <i
+                                                        class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
+                                            </div>
+                                        </div>
+
+                                        <div v-if="dropCountry"
+                                            class="absolute z-50 w-full mt-2 left-0 bg-bg-light dark:bg-bg-dark rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
+                                            <div class="overflow-auto h-[200px] w-full">
+                                                <p @click="() => { checkoutStore.vNewAddressCountry = item; dropCountry = false }"
+                                                    class="w-full hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
+                                                    v-for="item in menuStore.countries" :key="item.iso_code">
+                                                    {{ item?.name }}
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <CheckoutInput v-model="checkoutStore.vNewAddressCode" :placeholder="$t('post_code')"
+                                    :id="13">{{ $t("post_code") }}
+                                </CheckoutInput>
+                            </div>
+                        </div>
+                        <div>
+                            <span v-if="addressValidation === false" class="text-red"> {{
+                                $t("Remember to select a shipping address") }}</span>
+                            <div class="group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap">
+                                <button @click="checkoutStore.uploadAddress()"
+                                    :class="['h-[40px] cursor-pointer min-w-40 rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px] bg-button text-text-dark group-hover:bg-button-hover']">
+                                    {{ $t("add_new_address") }}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex justify-center">
+                    <div class="group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap">
+                        <button @click="checkoutStore.sendForm()" :disabled="!checkoutStore.activeAddress"
+                            :class="['h-[40px] cursor-pointer min-w-40 rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px]', checkoutStore.activeAddress ? 'bg-button text-text-dark group-hover:bg-button-hover' : ' bg-button-disabled  text-gray']">
+                            {{ $t("continue") }}
+                        </button>
+                        <div
+                            :class="['flex h-[40px] w-[40px] items-center justify-center rounded-[10px] p-2.5 transition-all sm:h-[50px] sm:w-[50px] md:h-[65px] md:w-[65px] md:rounded-[15px]', checkoutStore.activeAddress ? 'bg-button text-text-dark group-hover:bg-button-hover' : ' bg-button-disabled  text-gray']">
+                            <svg class="" width=" 26" height="26" viewBox="0 0 26 26" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
+                                    fill="currentColor" />
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </UiContainer>
+</template>
+
+<script setup lang="ts">
+import CheckoutInput from '../ui/CheckoutInput.vue';
+import { onClickOutside } from "@vueuse/core";
+
+const checkoutStore = useCheckoutStore();
+const userStore = useUserStore()
+const menuStore = useMenuStore()
+const dropIso = ref(false)
+const dropCountry = ref(false)
+
+const addressValidation = ref<null | boolean>(null);
+
+const dropdownIsoRef = ref(null);
+const dropdownCountryRef = ref(null);
+onClickOutside(dropdownIsoRef, () => {
+    dropIso.value = false
+});
+
+onClickOutside(dropdownCountryRef, () => {
+    dropCountry.value = false
+});
+
+checkoutStore.getCheckout()
+checkoutStore.getAddressList()
+checkoutStore.getUserData()
+</script>

components/section/CheckoutSummary.vue

@@ -0,0 +1,223 @@
+<template>
+    <UiContainer>
+        <div class="xl:w-[85%] mx-auto space-25-55">
+            <div class="space-25-55">
+                <div class="w-full flex items-center sm:justify-center">
+                    <div
+                        class="flex items-center justify-between sm:justify-center sm:gap-[25px] text-gray dark:text-button-disabled w-full sm:w-auto">
+                        <div class="sm:px-6 sm:py-3 mx-auto">
+                            {{ $t("login") }}
+                        </div>
+                        <div class="sm:px-6 sm:py-3 mx-auto">
+                            {{ $t("address") }}
+                        </div>
+                        <div
+                            class="cursor-pointer transition-all text-inter hover:bg-button-hover bg-button text-white font-medium rounded-xl px-3 py-1 sm:px-6 sm:py-3">
+                            {{ $t("summary") }}
+                        </div>
+                        <div class="hidden sm:block sm:px-6 sm:py-3 sm:mx-auto">
+                            {{ $t("order_placed") }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="grid grid-cols-3 gap-[30px]">
+                <div class="col-start-1 col-end-3 space-y-5">
+                    <h4 class="h4-uppercase-bold-inter">{{ component.front_section_lang[0].data.product_list }}</h4>
+                    <div class="border-2 border-block rounded-[15px] p-[50px] space-25-55">
+                        <div v-for="(item, index) in checkoutStore.products" :key="index">
+                            <div class="flex items-center h-[150px]">
+                                <div class="min-w-[150px] flex items-center justify-center h-[150px]">
+                                    <img :src="`/api/public/file/${item.picture_uuid}.webp`" alt=""
+                                        class="max-w-full max-h-full object-contain">
+                                </div>
+
+                                <div class="flex flex-col justify-between min-h-full w-full gap-[7px] sm:gap-[15px]">
+                                    <div class="w-full flex items-center justify-between">
+                                        <h3
+                                            class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[100px] sm:max-w-[200px] md:max-w-[250px]">
+                                            {{ item.name }}
+                                        </h3>
+                                    </div>
+                                    <div class="flex w-full justify-between gap-[10px]">
+                                        <p
+                                            class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
+                                            {{ item.total_price }}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex flex-col items-center gap-[30px]">
+                    <div class="space-y-5 w-full">
+                        <h4 class="h4-uppercase-bold-inter">{{ component.front_section_lang[0].data.account_address }}
+                        </h4>
+                        <div
+                            class="border-2 border-block rounded-[8px] px-[25px] py-[15px] flex flex-col gap-1 text-xl">
+                            <span>{{ checkoutStore.defaultAddress?.address.name }} {{
+                                checkoutStore.defaultAddress?.address.surname }}</span>
+                            <span>{{ checkoutStore.defaultAddress?.address.street }}</span>
+                            <span>{{ checkoutStore.defaultAddress?.address.postcode }} {{
+                                checkoutStore.defaultAddress?.address.city }}</span>
+                        </div>
+                    </div>
+                    <div class="flex flex-col space-y-5 w-full h-full">
+                        <h4 class="h4-uppercase-bold-inter">{{ component.front_section_lang[0].data.note }}</h4>
+                        <textarea v-model="checkoutStore.vNote"
+                            class="border-2 border-block rounded-[8px] p-3 w-full flex-1 resize-none placeholder:text-button"
+                            name="rty" id="1" :placeholder="component.front_section_lang[0].data.note"></textarea>
+                    </div>
+                </div>
+                <div class="col-start-1 col-end-3 space-y-5">
+                    <h4 class="h4-uppercase-bold-inter">Typ doručení</h4>
+                    <div class="border-2 border-block rounded-[15px] p-[50px] space-y-[25px] text-xl">
+                        <div @click="checkoutStore.setCurrentDelivery(delivery)"
+                            v-for="delivery in checkoutStore.deliveryOption" class="flex flex-col cursor-pointer">
+                            <div class="flex items-end justify-between">
+                                <div class="flex gap-[15px]">
+                                    <div class="mt-1 w-4 h-4 border-2 border-button rounded-full">
+                                        <div v-if="checkoutStore.currentDelivery === delivery"
+                                            class="w-full h-full border-3 border-bg-light dark:border-bg-dark rounded-full bg-button">
+                                        </div>
+                                    </div>
+                                    <div class="flex flex-col">
+                                        <span>{{ delivery.delivery_supplier_name }}</span>
+                                        <span>{{ delivery.country_name }}</span>
+                                    </div>
+                                </div>
+                                <p class="font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
+                                    {{ menuStore.formatPrice(Number(delivery.shippment_price)) }}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="space-y-5 w-full flex flex-col h-full">
+                    <h4 class="h4-uppercase-bold-inter">{{ component.front_section_lang[0].data.payment_method }}</h4>
+                    <div
+                        class="border-2 border-block rounded-[8px] px-[25px] py-[15px] flex-1 flex flex-col gap-1 text-xl overflow-auto">
+                        <UCarousel :prevIcon="'i-lucide-chevron-left'" :nextIcon="'i-lucide-chevron-right'" :ui="{
+                            viewport: 'h-full',
+                            container: 'h-full',
+                            item: 'h-full',
+                            prev: 'ring-0 text-button disable:text-block p-0 ring-inset ring-accented bg-inherit disabled:bg-inherit',
+                            next: 'ring-0 text-button disable:text-block p-0 text-[30px] bg-inherit disabled:bg-inherit',
+                            arrows: ''
+                        }" :prev="{ size: 'xl' }" :next="{ size: 'xl' }" arrows :items="checkoutStore.paymentMethods"
+                            class="relative max-w-full mx-10 h-full">
+                            <template #default="{ item }">
+                                <div class="flex flex-col items-start justify-between h-full">
+                                    <span>{{ item.bank_name }}</span>
+                                    <span>{{ item.country_name }}</span>
+                                    <span>{{ item.street_and_number }}</span>
+                                    <span>{{ item.iban }}</span>
+                                    <span>{{ item.swift }}</span>
+                                </div>
+                            </template>
+                        </UCarousel>
+                    </div>
+                </div>
+            </div>
+            <div class="w-full border-y-2 border-block p-[25px] flex flex-col gap-[15px] text-xl">
+                <div class="flex items-center justify-between">
+                    <p>{{ component.front_section_lang[0].data.subtotal }}</p>
+                    <p>€5,043.18</p>
+                </div>
+                <div class="flex items-center justify-between">
+                    <p>{{ component.front_section_lang[0].data.shipping_cost }}</p>
+                    <p>€5,043.18</p>
+                </div>
+                <div class="flex items-center justify-between uppercase">
+                    <p>{{ component.front_section_lang[0].data.total }}</p>
+                    <p
+                        class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
+                        €5,043.18
+                    </p>
+                </div>
+            </div>
+            <div class="flex justify-between mt-1">
+                <div class="flex flex-col gap-1 text-white w-full">
+                    <div class="flex gap-3 text-black dark:text-white items-center">
+                        <input v-model="checkoutStore.vLegal" type="checkbox" id="first" name="first" />
+                        <!-- <label for="first" class="text-sm leading-snug">
+                            {{ $t("I accept ") }}
+                            <NuxtLink target="_blank"
+                                :to="{ name: 'lang-info-name', params: { lang: menuStore.selectedLanguage.iso_code, name: 'legal_statement.html' } }"
+                                class="underline cursor-pointer">
+                                {{ $t("the legal statement*") }}
+                            </NuxtLink>
+                        </label> -->
+                        <p class="text-lg"> {{ $t("I accept ") }} {{ $t("the legal statement*") }}</p>
+                    </div>
+                    <span v-if="checkoutStore.legalValidation" class="text-xs text-red-600 ml-6">
+                        {{ $t("You need to accept this") }}
+                    </span>
+
+                    <div class="flex gap-3 text-black dark:text-white items-center mt-2">
+                        <input v-model="checkoutStore.vTerms" type="checkbox" id="second" name="second" />
+                        <!-- <label for="second" class="text-sm leading-snug">
+                            {{ $t("I accept ") }}
+                            <NuxtLink target="_blank"
+                                :to="{ name: 'lang-info-name', params: { lang: menuStore.selectedLanguage.iso_code, name: 'general_terms_and_conditions.html' } }"
+                                class="underline cursor-pointer">
+                                {{ $t("general terms and conditions*") }}
+                            </NuxtLink>
+                        </label> -->
+                        <p class="text-lg"> {{ $t("I accept ") }} {{ $t("general terms and conditions*") }}</p>
+                    </div>
+                    <span v-if="checkoutStore.termsValidation" class="text-xs text-red-600 ml-6">
+                        {{ $t("You need to accept this") }}
+                    </span>
+                </div>
+
+                <UiButtonArrow type="fill" :arrow="true">
+                    {{ $t("Buy") }}
+                </UiButtonArrow>
+            </div>
+        </div>
+    </UiContainer>
+</template>
+
+<script setup lang="ts">
+import { UCarousel } from '#components';
+
+const checkoutStore = useCheckoutStore();
+const productStore = useProductStore()
+const menuStore = useMenuStore()
+
+checkoutStore.getOrder()
+checkoutStore.getBankAccount()
+checkoutStore.getUserCart()
+checkoutStore.getDeliveryOptions()
+checkoutStore.getDefAddress()
+
+defineProps<{
+    component: {
+        id: number
+        name: string
+        img: string[]
+        component_name: string
+        is_no_lang: boolean
+        page_name: string
+        front_section_lang: {
+            data: {
+                product_list: string
+                account_address: string
+                note: string
+                delivery_type: string
+                payment_method: string
+                subtotal: string
+                shipping_cost: string
+                total: string
+                accept: string
+                legal: string
+                terms: string
+            }
+            id_front_section: number
+            id_lang: number
+        }[]
+    }
+}>();
+</script>

components/section/ContactMain.vue

@@ -0,0 +1,72 @@
+<template>
+    <UiContainer class="space-y-[45px]">
+        <div class="xl:w-[70%] space-y-[25px]">
+            <h1 class="h1">{{ component.front_section_lang[0].data.title }}</h1>
+            <p v-html="component.front_section_lang[0].data.description"></p>
+        </div>
+        <div class="flex flex-col md:flex-row gap-8 md:gap-[30px] xl:gap-0">
+            <div class="p-[25px] md:p-[50px] bg-block rounded-2xl space-y-[30px] xl:ml-40 xl:w-[65%]">
+                <div class="flex gap-[30px]">
+                    <input :placeholder="$t('first_name')" type="text"
+                        class="border border-button placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
+                    <input :placeholder="$t('email')" type="text"
+                        class="border border-button placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
+                </div>
+                <textarea :placeholder="$t('form_question')"
+                    class="border h-[276px] border-button placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
+
+                <div class="w-full flex justify-center sm:justify-start">
+                    <UiButtonArrow type="border">{{
+                        $t("submit_form")
+                    }}</UiButtonArrow>
+                </div>
+            </div>
+            <div class="space-y-[30px] xl:px-[50px] sm:px-10">
+                <h4 class="h4-uppercase-bold-inter">
+                    {{ $t('contact_info') }}
+                </h4>
+                <div
+                    class="flex flex-col sm:flex-row items-center sm:items-start md:flex-col justify-between gap-[15px] sm:gap-[30px]">
+                    <div>
+                        <p class="text-gray">{{ $t("phone") }}</p>
+                        <p>+420 608 428 782</p>
+                    </div>
+                    <div>
+                        <p class="text-gray">{{ $t("email") }}</p>
+                        <p>web@yourgold.cz</p>
+                    </div>
+                    <div>
+                        <p class="text-gray">{{ $t("office_address") }}</p>
+                        <p>
+                            Floriána Nováka 3 <br />
+                            796 01 Prostějov <br />
+                            Czech Republic <br />
+                            CZ 08435456
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </UiContainer>
+</template>
+<script setup lang="ts">
+defineProps<{
+    component: {
+        id: number
+        name: string
+        img: string[]
+        component_name: string
+        is_no_lang: boolean
+        page_name: string
+        front_section_lang: {
+            data: {
+                title: string;
+                description: string;
+            }
+            id_front_section: number
+            id_lang: number
+        }[]
+    }
+}>();
+
+</script>

components/section/CurrencyRatesBar.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="flex gap-24">
+    <div class="price-container">
+      <div class="slider" v-html="duplicatedContent">
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+let res = "<span class=\"text-base sm:text-lg font-bold\">CZK price (to EUR). Kč 25,1720<span class=\"text-accent-green-light dark:text-accent-green-dark\"> Kč 0,0180 (0.07%) </span></span><span class=\"text-base sm:text-lg font-bold\">Gold price on market. 2 929,7250 €<span class=\"text-[#B72D2D]\"> -6,9560 € (-0.24%) </span></span><span class=\"text-base sm:text-lg font-bold\">Silver price on market. 31,5280 €<span class=\"text-accent-green-light dark:text-accent-green-dark\"> 0,1690 € (0.54%) </span></span><span class=\"text-base sm:text-lg font-bold\">PLN price (to EUR). zł 4,2660<span class=\"text-[#B72D2D]\"> zł -0,0050 (-0.12%) </span></span>"
+const productStore = useProductStore()
+const activeElement = ref(1);
+productStore.getModules()
+
+// Computed property to duplicate the content
+const duplicatedContent = computed(() => {
+  const originalContent = res || '';
+  return originalContent + originalContent + originalContent + originalContent;
+});
+
+
+const changeActive = (item: number) => {
+  activeElement.value = item;
+};
+</script>
+
+
+<style scoped>
+.price-container {
+  /* display: flex; */
+  overflow: hidden;
+}
+
+.slider {
+  display: flex;
+  gap: 64px;
+  animation: slidein 40s linear infinite;
+  white-space: nowrap;
+}
+
+.logos {
+  display: flex;
+  gap: 64px;
+  width: 100%;
+  /* display: inline-block; */
+  margin: 0px 0;
+}
+
+.fas {
+  height: 50%;
+  animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
+}
+
+@keyframes slidein {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@media (min-width: 900px) {
+  .slider {
+    animation: slidein 80s linear infinite;
+  }
+}
+</style>

components/section/FooterBlock.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="border-t border-border pt-[75px]">
+    <UiContainer class="flex flex-col gap-24">
+      <div
+        class="grid grid-cols-1 md:grid-cols-2 gap-[75px] xl:gap-0 xl:grid-cols-none xl:grid-flow-col auto-cols-max justify-between">
+        <div>
+          <div v-for="(item, key) in contact" :key="key" class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]">
+            <h3 v-if="key == 'header'" class="h4-uppercase-bold-inter">{{ item }}</h3>
+            <div v-else class="transition-all text-inter">{{ item }}</div>
+          </div>
+        </div>
+
+        <div v-for="(section, index) in docs" :key="index" class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]">
+          <h3 class="h4-uppercase-bold-inter">{{ section.translation }}</h3>
+          <div v-for="(item, key) in section.data" :key="key">
+            <div class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-inter">
+              <a target="_blank" :href="`/api/public/document/${item.name}`">{{ item.translation }}</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <ClientOnly v-if="!colorMode?.forced">
+        <img class="cursor-pointer w-[70%] sm:w-[50%] xl:w-[30%]"
+          :src="isDark ? '/logo-footer-dark.svg' : '/logo-footer.svg'" alt="logo" @click="menuStore.navigateToItem()" />
+      </ClientOnly>
+    </UiContainer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { GenericResponse, Footer } from '~/types';
+
+const menuStore = useMenuStore();
+const colorMode = useColorMode();
+
+const { data } = await useMyFetch<GenericResponse<Footer>>('/api/public/front/footer', {});
+
+
+const contact = ref(data.data.contact)
+const docs = ref(data.data.docs)
+
+
+const isDark = computed(() => colorMode.value === "dark");
+</script>

components/section/InvestmentFaq.vue

@@ -0,0 +1,88 @@
+<template>
+  <UiContainer>
+    <div class="space-25-55">
+      <h2 class="h2-bold-bounded">{{ component.front_section_lang[0].data.title }}</h2>
+
+      <div class="flex flex-col gap-10">
+        <div v-for="(item, index) in component.front_section_lang[0].data.faq" :key="index"
+          @click="active = active === index ? 0 : index"
+          class="flex gap-8 sm:gap-20 md:gap-40 xl:gap-60 cursor-pointer">
+          <h4 class="h4-uppercase-bold-inter">
+            <span v-if="index + 1 < 10">0</span>{{ index + 1 }}
+          </h4>
+          <div :class="[
+            'flex justify-between w-full transition-all duration-300 gap-2 sm:gap-10 md:gap-2',
+            active === index && 'pb-10 border-b border-bg-dark dark:border-bg-light',
+          ]">
+            <div class="max-w-[1200px] flex flex-col gap-6">
+              <h4 :class="[
+                'h4-uppercase-bold-inter transition-colors duration-300',
+                active === index &&
+                'text-accent-green-light dark:text-accent-green-dark',
+              ]">
+                {{ item.label }}
+              </h4>
+
+              <transition name="fade-slide">
+                <p v-if="active === index">
+                  {{ item.content }}
+                </p>
+              </transition>
+            </div>
+
+            <svg class="min-w-5 h-5 dark:text-bg-light" viewBox="0 0 20 21" fill="none"
+              xmlns="http://www.w3.org/2000/svg">
+              <path :d="active === index
+                ? 'M1.29289 17.4628L0.585786 18.1699L2 19.5841L2.70711 18.877L1.29289 17.4628ZM19.9706 1.19936C19.9706 0.647074 19.5228 0.199359 18.9706 0.199359L9.97056 0.19936C9.41828 0.199359 8.97056 0.647075 8.97056 1.19936C8.97056 1.75164 9.41828 2.19936 9.97056 2.19936L17.9706 2.19936L17.9706 10.1994C17.9706 10.7516 18.4183 11.1994 18.9706 11.1994C19.5228 11.1994 19.9706 10.7516 19.9706 10.1994L19.9706 1.19936ZM2 18.1699L2.70711 18.877L19.6777 1.90647L18.9706 1.19936L18.2635 0.492253L1.29289 17.4628L2 18.1699Z'
+                : 'M2.7364 1.49211L2.0293 0.785005L0.615083 2.19922L1.32219 2.90633L2.7364 1.49211ZM18.9999 20.1698C19.5521 20.1698 19.9999 19.7221 19.9999 19.1698L19.9999 10.1698C19.9999 9.6175 19.5521 9.16978 18.9999 9.16978C18.4476 9.16978 17.9999 9.6175 17.9999 10.1698L17.9999 18.1698L9.99986 18.1698C9.44758 18.1698 8.99986 18.6175 8.99986 19.1698C8.99986 19.7221 9.44757 20.1698 9.99986 20.1698L18.9999 20.1698ZM2.0293 2.19922L1.32219 2.90633L18.2928 19.8769L18.9999 19.1698L19.707 18.4627L2.7364 1.49211L2.0293 2.19922Z'
+                " fill="currentColor" />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <h4 class="h4-uppercase-bold-inter sm:text-start md:text-center xl:text-start xl:ml-66">
+        <span v-for="(item, index) in component.front_section_lang [0].data.sub_title" :key="index" :class="{
+          'text-accent-green-light dark:text-accent-green-dark':
+            item.highlight,
+        }">
+          {{ item.text }}
+        </span>
+      </h4>
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  component: {
+    id: number
+    name: string
+    img: string[]
+    component_name: string
+    is_no_lang: boolean
+    page_name: string
+    front_section_lang: {
+      data: {
+        title: string;
+        faq: [
+          {
+            label: string;
+            content: string;
+          }
+        ];
+        sub_title: [
+          {
+            text: string;
+            highlight: boolean;
+          }
+        ];
+      }
+      id_front_section: number
+      id_lang: number
+    }[]
+  }
+}>();
+
+
+const active = ref<number>(0);
+</script>

components/section/InvestmentMain.vue

@@ -0,0 +1,77 @@
+<template>
+  <UiContainer class="space-y-[30px] xl:space-y-[55px]">
+    <div class="flex flex-col xl:flex-row items-stretch w-full h-full gap-5">
+      <div class="flex flex-col justify-between items-center space-25-55 xl:gap-4 w-auto h-auto">
+        <h1 class="h1">
+          <span v-for="(item, index) in component.front_section_lang[0].data.title" :key="index" :class="[
+            item.highlight
+              ? 'text-accent-green-light dark:text-accent-green-dark'
+              : '',
+            'inline',
+          ]">
+            {{ item.text }}
+            <span v-if="index !== component.front_section_lang[0].data.title.length - 1">
+            </span>
+          </span>
+        </h1>
+        <h4 class="h4-uppercase-bold-inter">
+          <span v-for="(item, index) in component.front_section_lang[0].data.sub_title" :key="index" :class="{
+            'text-accent-green-light dark:text-accent-green-dark':
+              item.highlight,
+          }">
+            {{ item.text }}
+          </span>
+        </h4>
+        <p>{{ component.front_section_lang[0].data.description }}</p>
+      </div>
+        <div class="w-full xl:max-w-[570px] h-[390px] sm:h-[506px] block rounded-2xl" :style="{
+        backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }" />
+    </div>
+    <div class="flex flex-col xl:flex-row items-stretch w-full h-full gap-5">
+      <div class="w-full xl:max-w-[570px] h-[225px] block rounded-2xl" :style="{
+        backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }" />
+      <div class="flex flex-col justify-between items-center space-25-55 xl:gap-4 w-auto h-auto">
+        <p>{{ component.front_section_lang[0].data.description_second }}</p>
+        <h4 class="h4-uppercase-bold-inter">
+          {{ component.front_section_lang[0].data.sub_title_second }}
+        </h4>
+      </div>
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  component: {
+    id: number
+    name: string
+    img: string[]
+    component_name: string
+    is_no_lang: boolean
+    page_name: string
+    front_section_lang: {
+      data: {
+        title: {
+          text: string
+          highlight: boolean
+        }[]
+        sub_title: {
+          text: string
+          highlight: boolean
+        }[]
+        description: string
+        description_second: string
+        sub_title_second: string
+      }
+      id_front_section: number
+      id_lang: number
+    }[]
+  }
+}>();
+</script>

components/section/InvestmentSave.vue

@@ -0,0 +1,82 @@
+<template>
+  <UiContainer class="space-y-[50px] sm:space-y-[30px] xl:space-y-[100px]">
+    <div class="space-25-55">
+      <div class="space-25-75">
+        <h4 class="h4-uppercase-bold-inter">
+          {{ component.front_section_lang[0].data.main_title }}
+        </h4>
+        <div class="w-full h-full flex flex-col items-stretch gap-4 xl:flex-row space-25-55 xl:!space-y-0">
+          <div class="flex flex-col space-y-[55px] xl:space-y-0 xl:justify-between">
+            <p>{{ component.front_section_lang[0].data.main_description }}</p>
+            <p>{{ component.front_section_lang[0].data.section_title }}</p>
+            <ul>
+              <li class="" v-for="(item, index) in component.front_section_lang[0].data
+                .section_items" :key="index">
+                <span>{{ index + 1 }}. </span>{{ item }}
+              </li>
+            </ul>
+          </div>
+          <div class="w-full xl:max-w-[690px] h-[200px] sm:h-[390px] block rounded-2xl" :style="{
+            backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }" />
+        </div>
+      </div>
+      <div class="flex items-center justify-center w-[60%] mx-auto">
+        <div class="flex flex-col items-center p-3 sm:p-6 md:p-8 xl:p-11 border border-block rounded-2xl gap-5">
+          <h4 class="h4-uppercase-bold-inter text-accent-green-light dark:text-accent-green-dark">
+            20 {{ $t("years") }}
+          </h4>
+          <img class="dark:hidden"
+            :src="`/api/public/file/${component.img[2]}_l.webp`"
+            alt="" />
+          <img class="hidden dark:block"
+            :src="`/api/public/file/${component.img[3]}_l.webp`"
+            alt="" />
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col gap-4 xl:flex-row space-25-55">
+      <div class="flex flex-col space-25-55 xl:justify-between">
+        <p>{{ component.front_section_lang[0].data.info_description }}</p>
+        <h4 class="h4-uppercase-bold-inter">
+          {{ component.front_section_lang[0].data.info_title }}
+        </h4>
+        <div v-html="component.front_section_lang[0].data.info_description_second" class=""></div>
+      </div>
+      <div class="w-full xl:max-w-[690px] h-[170px] sm:h-[360px] block rounded-2xl" :style="{
+        backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }" />
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  component: {
+    id: number
+    name: string
+    img: string[]
+    component_name: string
+    is_no_lang: boolean
+    page_name: string
+    front_section_lang: {
+      data: {
+        main_title: string
+        main_description: string
+        section_title: string
+        section_items: string[]
+        info_title: string
+        info_description: string
+        info_description_second: string
+      }
+      id_front_section: number
+      id_lang: number
+    }[]
+  }
+}>();
+
+</script>

components/section/InvestmentWhy.vue

@@ -0,0 +1,46 @@
+<template>
+  <UiContainer>
+    <div class="space-25-55-75 max-w-[1000px] mx-auto">
+      <h1 class="h2-bold-bounded">
+        <span v-for="(item, index) in component.front_section_lang[0].data.title" :key="index" :class="[
+          item.highlight
+            ? 'text-accent-green-light dark:text-accent-green-dark'
+            : '',
+          'inline',
+        ]">
+          {{ item.text }}
+          <span v-if="index !== component.front_section_lang[0].data.title.length - 1">
+          </span>
+        </span>
+      </h1>
+      <h4 class="h4-uppercase-bold-inter">
+        {{ component.front_section_lang[0].data.description }}
+      </h4>
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+ defineProps<{
+  component: {
+    id: number
+    name: string
+    img: string[]
+    component_name: string
+    is_no_lang: boolean
+    page_name: string
+    front_section_lang: {
+      data: {
+        title: {
+          text: string
+          highlight: boolean
+        }[]
+        description: string
+      }
+      id_front_section: number
+      id_lang: number
+    }[]
+  }
+}>();
+
+</script>

components/section/InvestmentZone.vue

@@ -0,0 +1,175 @@
+<template>
+  <UiContainer class="space-25-75">
+    <h2 class="h2-bold-bounded">
+      <span v-for="(item, index) in component.front_section_lang[0].data.main_title" :key="index" :class="[
+        item.highlight
+          ? 'text-accent-green-light dark:text-accent-green-dark'
+          : '',
+        'inline',
+      ]">
+        {{ item.text }}
+        <span v-if="index !== component.front_section_lang[0].data.main_title.length - 1">
+        </span>
+      </span>
+    </h2>
+
+    <div class="space-25-55-75">
+      <p>{{ component.front_section_lang[0].data.main_description }}</p>
+      <h4 class="h4-uppercase-bold-inter">
+        {{ component.front_section_lang[0].data.section_title }}
+      </h4>
+    </div>
+
+    <!-- products -->
+    <div class="space-25-55-75 flex flex-col items-center">
+      <div :class="[
+        'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
+        itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
+      ]">
+        <div v-for="(item, index) in productStore.productList" :key="index"
+          class="w-[200px] sm:w-[260px] md:w-[290px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-block rounded-2xl flex flex-col items-center gap-5 sm:gap-7">
+          <img :src="`/api/public/file/${item.cover_picture_uuid}.webp`" alt="pics"
+            class="max-h-[150px] sm:max-h-[180px] md:max-h-[205px]" />
+          <div class="flex flex-col justify-between h-full">
+            <div class="flex flex-col gap-[10px] sm:gap-[15px] w-full">
+              <h3 class="text-[13px] sm:text-base md:text-lg text-xl font-bold leading-[150%] text-bg-dark">
+                {{ item.name }}
+              </h3>
+              <p class="text-[10px] sm:text-[12px] text-sm text-bg-dark">
+                {{ item.tax_name }}
+              </p>
+            </div>
+            <div class="flex items-center justify-between">
+              <p class="text-accent-green-light text-bold-24">
+                {{ item.formatted_price }}
+              </p>
+              <button @click="productStore.incrementCartItem(item.id)"
+                class="w-9 h-9 md:w-12 md:h-12 rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center">
+                <i class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <UiButtonArrow @click="menuStore.navigateToShop" :arrow="true" class="mx-auto" type="fill">{{ $t('eshop') }}</UiButtonArrow>
+    </div>
+
+    <!-- calculator-block -->
+    <div class="flex flex-col xl:flex-row items-stretch gap-6 sm:gap-2 pt-5 sm:p-0 space-25-55">
+      <div class="flex flex-col space-y-[55px] sm:justify-between">
+        <div class="space-25-55">
+          <p>{{ component.front_section_lang[0].data.section_description }}</p>
+          <h4 class="h4-uppercase-bold-inter">
+            {{ component.front_section_lang[0].data.info_title }}
+          </h4>
+          <p>{{ component.front_section_lang[0].data.info_description }}</p>
+        </div>
+        <h4 class="h4-uppercase-bold-inter">
+          {{ component.front_section_lang[0].data.cta_title }}
+        </h4>
+      </div>
+
+      <!-- calculator -->
+      <div class="w-full md:min-w-[680px] p-[25px] md:p-[50px] border border-button rounded-2xl block">
+        <h2 class="h2-bold-bounded text-center mb-10 sm:mb-20">
+          {{ component.front_section_lang[0].data.calculator_title }}
+        </h2>
+        <div class="mb-14 flex flex-col gap-8 sm:gap-14">
+          <div class="flex flex-col gap-4">
+            <div class="flex justify-between">
+              <p>{{ $t("monthly_savings") }}</p>
+              <p class="text-accent-green-light dark:text-accent-green-dark font-bold">
+                {{ store.monthlySavings }} {{ menuStore.selectedCurrency?.sign }}
+              </p>
+            </div>
+            <input v-model="store.monthlySavings" type="range" max="600" :min="store.minValue"
+              class="w-full accent-button cursor-pointer" @mouseup="store.getCalculator()"
+              @touchend="store.getCalculator()" />
+          </div>
+          <div class="flex flex-col gap-4">
+            <div class="flex justify-between">
+              <p>{{ $t("storage_period_years") }}</p>
+              <p class="text-accent-green-light dark:text-accent-green-dark font-bold">
+                {{ store.storagePeriod }}
+              </p>
+            </div>
+            <input v-model="store.storagePeriod" type="range" max="20" class="w-full accent-button cursor-pointer"
+              @mouseup="store.getCalculator()" @touchend="store.getCalculator()" />
+          </div>
+        </div>
+        <div class="flex flex-col items-start sm:flex-row gap-6 sm:gap-1 justify-between sm:items-center">
+          <div class="">
+            <p>{{ $t("expected_savings_value") }}</p>
+            <h2 class="h2-bold-bounded text-accent-green-light dark:text-accent-green-dark">
+              {{ menuStore.selectedCurrency?.sign }} {{ store.totalInvestment }}
+            </h2>
+          </div>
+          <UiButtonArrow :arrow="true" type="fill" class="mx-auto sm:m-0">{{
+            component.front_section_lang[0].data.button
+          }}</UiButtonArrow>
+        </div>
+      </div>
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  component: {
+    id: number
+    name: string
+    img: string[]
+    component_name: string
+    is_no_lang: boolean
+    page_name: string
+    front_section_lang: {
+      data: {
+        main_title: {
+          text: string
+          highlight: boolean
+        }[]
+        main_description: string
+        section_title: string
+        section_description: string
+        info_title: string
+        info_description: string
+        cta_title: string
+        calculator_title: string
+        button: string
+      }
+      id_front_section: number
+      id_lang: number
+    }[]
+  }
+}>();
+
+
+const store = useStore();
+const menuStore = useMenuStore();
+
+const itemCount = ref(4);
+const productStore = useProductStore();
+
+async function updateItemCount() {
+  const width = window.innerWidth;
+  if (width >= 1800) itemCount.value = 5;
+  else if (width >= 1200) itemCount.value = 4;
+  else if (width >= 768) itemCount.value = 3;
+  else if (width >= 640) itemCount.value = 2;
+  else itemCount.value = 1;
+}
+
+watch(itemCount, async () => {
+  await productStore.getList(itemCount.value);
+});
+
+onMounted(async () => {
+  await updateItemCount();
+  window.addEventListener("resize", updateItemCount);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updateItemCount);
+});
+</script>

components/section/LoginMain.vue

@@ -0,0 +1,96 @@
+<template>
+    <UiContainer v-if="!userStore.vCodeVerify" class="flex py-20 sm:py-14">
+        <div class="hidden xl:block rounded-2xl min-w-[60%] h-[830px]" :style="{
+            backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+        }" />
+        <div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12 ">
+            <div class="space-25-55">
+                <div class="flex flex-wrap-reverse gap-y-4 justify-between">
+                    <h2 class="h2-bold-bounded">{{ $t('login') }}</h2>
+                    <button @click="menuStore.navigateToItem()"
+                        class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer">{{
+                            $t('back_to_home') }}</button>
+                </div>
+                <div class="space-y-[15px]">
+                    <p class="pl-6">{{ $t('email') }}</p>
+                    <input v-model="userStore.email" :placeholder="$t('email')" type="text"
+                        class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                </div>
+                <div class="space-y-[15px]">
+                    <p class="pl-6">{{ $t('password') }}</p>
+                    <input v-model="userStore.password" :placeholder="$t('placeholder_password')" type="text"
+                        class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                </div>
+            </div>
+            <p class="text-button hover:text-button-hover transition-all font-medium mt-[30px] cursor-pointer">{{
+                $t('forgot_password_question')
+            }}</p>
+            <div class="py-[25px] sm:py-12 border-b border-gray flex justify-center w-full">
+                <UiButtonArrow @click="userStore.logIn()" type="fill" :arrow="true">{{ $t('login') }}</UiButtonArrow>
+            </div>
+            <div class="mt-[25px] sm:mt-[30px] w-full flex justify-center gap-3">
+                <p class="cursor-pointer hover:underline transition-all">{{
+                    $t('no_account')
+                }}</p>
+                <p class="text-button cursor-pointer hover:text-button-hover">{{
+                    $t('sign_up_now')
+                }}</p>
+            </div>
+        </div>
+    </UiContainer>
+
+    <UiContainer v-if="userStore.vCodeVerify" class="flex py-20 sm:py-14">
+        <div class="hidden xl:block rounded-2xl min-w-[60%] h-[830px]" :style="{
+            backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+        }" />
+        <div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12 ">
+            <div class="space-25-55">
+                <div class="flex flex-wrap-reverse gap-y-4 justify-between">
+                    <h2 class="h2-bold-bounded">{{ $t('verify_login') }}</h2>
+                    <button @click="menuStore.navigateToItem()"
+                        class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer">{{
+                            $t('back_to_home') }}</button>
+                </div>
+                <div class="space-y-[30px]">
+                    <p>{{ $t('send_code') }} <span class="text-button font-semibold">{{ userStore.email }}</span> {{
+                        $t('by_email') }}
+                    </p>
+                    <div class="space-y-[15px]">
+                        <p class="pl-6">{{ $t('code') }}</p>
+                        <input v-model="userStore.vCode" :placeholder="$t('code')" type="text"
+                            class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                    </div>
+                </div>
+            </div>
+            <div class="py-[25px] sm:py-12 flex justify-center w-full">
+                <UiButtonArrow @click="userStore.sendFormCode(true)" type="fill" :arrow="true">{{ $t('confirm') }}
+                </UiButtonArrow>
+            </div>
+        </div>
+    </UiContainer>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+    component: {
+        id: number
+        name: string
+        img: string[]
+        component_name: string
+        is_no_lang: boolean
+        page_name: string
+        front_section_lang: {
+            data: {
+            }
+            id_front_section: number
+            id_lang: number
+        }[]
+    }
+}>();
+const userStore = useUserStore()
+const menuStore = useMenuStore()
+</script>

components/section/MainBlocks.vue

@@ -0,0 +1,70 @@
+<template>
+  <UiContainer class="flex flex-wrap items-center justify-between gap-[30px] sm:gap-y-[55px] xl:gap-y-[100px]">
+    <div class="w-full flex flex-col gap-[25px] xl:max-w-[48%] md:mx-10 xl:m-0"
+      v-for="(item, index) in component.front_section_lang[0].data" :key="index">
+      <!-- xl -->
+      <div class="hidden xl:flex xl:h-[330px] flex-col justify-between">
+        <div class="space-y-[55px]">
+          <h2 class="h2-bold-bounded">{{ item.title }}</h2>
+          <p>{{ item.description }}</p>
+        </div>
+        <h4 class="h4-uppercase-bold-inter">{{ item.sub_title }}</h4>
+      </div>
+
+      <!-- sm/md -->
+      <div class="xl:hidden flex flex-col gap-y-[25px] sm:gap-y-[55px]">
+        <h2 class="h2-bold-bounded">{{ item.title }}</h2>
+        <p>{{ item.description }}</p>
+        <h4 class="h4-uppercase-bold-inter">{{ item.sub_title }}</h4>
+      </div>
+      <UiImgWrapper :src="`/api/public/file/${component.img[index]}_l.webp`">
+        <template #button>
+          <UiButtonArrow :arrow="true">{{ item.title }}</UiButtonArrow>
+        </template>
+      </UiImgWrapper>
+
+    </div>
+
+    <!-- Map block with same layout rules -->
+    <div class="w-full xl:max-w-[48%] md:mx-10 xl:m-0 flex flex-col gap-4 items-center">
+      <h1 class="text-sm sm:text-xl uppercase">
+        Jsme tu pro vás napříč Evropou
+      </h1>
+      <MapBlock />
+      <div class="flex items-center gap-4 w-full justify-end">
+        <div class="flex items-center gap-2">
+          <div class="w-3 h-3 rounded-[2.8px] bg-button"></div>
+          <p>Partners</p>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-3 h-3 rounded-[2.8px] bg-block"></div>
+          <p>Customers</p>
+        </div>
+      </div>
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+type Component = {
+  id: number
+  name: string
+  img: string[]
+  component_name: string
+  is_no_lang: boolean
+  page_name: string
+  front_section_lang: {
+    data: {
+      title: string
+      description: string
+      sub_title: string
+    }[]
+    id_front_section: number
+    id_lang: number
+  }[]
+}
+
+defineProps<{
+  component: Component;
+}>();
+</script>

components/section/MainHero.vue

@@ -0,0 +1,50 @@
+<template>
+  <UiContainer>
+    <div class="space-y-[30px] sm:space-y-[53px]">
+      <h1 class="h1">
+        {{ component.front_section_lang[0].data.title }}
+      </h1>
+      <div
+        class="h-[465px] sm:h-[509px] xl:h-[509px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block"
+        :style="{
+          backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }" />
+      <div class="flex flex-col items-center space-y-[30px] sm:flex-row sm:items-start md:space-y-0 xl:items-center">
+        <h3 class="h4-uppercase-bold-inter sm:min-w-[45%]">
+          {{ component.front_section_lang[0].data.title_second }}
+        </h3>
+        <div class="flex w-full items-start justify-center sm:justify-end">
+          <UiButtonArrow :arrow="true" type="fill">{{
+            component.front_section_lang[0].data.button
+            }}</UiButtonArrow>
+        </div>
+      </div>
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  component: {
+    id: number
+    name: string
+    img: string[]
+    component_name: string
+    is_no_lang: boolean
+    page_name: string
+    front_section_lang: {
+      data: {
+        title: string
+        button: string
+        title_second: string
+      }
+      id_front_section: number
+      id_lang: number
+    }[]
+  }
+}>();
+
+
+</script>

components/section/MainProducts.vue

@@ -0,0 +1,83 @@
+<template>
+  <UiContainer class="space-y-[40px] sm:space-y-[55px] md:space-y-[75px]">
+    <div :class="[
+      'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
+      itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
+    ]">
+      <!-- product -->
+      <div v-for="(item, index) in productStore.productList" :key="index"
+        class="w-[200px] sm:w-[260px] md:w-[290px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-block rounded-2xl flex flex-col items-center gap-5 sm:gap-7">
+        <img :src="`/api/public/file/${item.cover_picture_uuid}.webp`" alt="pics"
+          class="max-h-[150px] sm:max-h-[180px] md:max-h-[205px]" />
+        <div class="flex flex-col justify-between h-full">
+          <div class="flex flex-col gap-[10px] sm:gap-[15px] w-full">
+            <h3 class="text-[13px] sm:text-base md:text-lg text-xl font-bold leading-[150%] text-bg-dark">
+              {{ item.name }}
+            </h3>
+            <p class="text-[10px] sm:text-[12px] text-sm text-bg-dark">
+              {{ item.tax_name }}
+            </p>
+          </div>
+          <div class="flex items-center justify-between">
+            <p class="text-accent-green-light text-bold-24">
+              {{ item.formatted_price }}
+            </p>
+            <button @click="productStore.incrementCartItem(item.id)"
+              class="w-9 h-9 md:w-12 md:h-12 rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center">
+              <i class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col gap-6 md:flex-row items-center justify-between">
+      <h3 class="h4-uppercase-bold-inter w-full text-center md:text-start xl:max-w-[50%]">
+        Zlato je jistota, která nepodléhá času. Udělejte dnes rozhodnutí, které
+        vás ochrání zítra
+      </h3>
+      <UiButtonArrow @click="menuStore.navigateToShop" type="fill" :arrow="true">{{ $t('eshop') }}</UiButtonArrow>
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+defineProps<{
+  component: {
+    id: number
+    name: string
+    img: string[]
+    component_name: string
+    is_no_lang: boolean
+    page_name: string
+  }
+}>();
+
+
+const menuStore = useMenuStore()
+const itemCount = ref(4);
+const productStore = useProductStore();
+
+async function updateItemCount() {
+  const width = window.innerWidth;
+  if (width >= 1800) itemCount.value = 5;
+  else if (width >= 1200) itemCount.value = 4;
+  else if (width >= 768) itemCount.value = 3;
+  else if (width >= 640) itemCount.value = 2;
+  else itemCount.value = 1;
+}
+
+watch(itemCount, async () => {
+  await productStore.getList(itemCount.value);
+});
+
+onMounted(async () => {
+  await updateItemCount();
+  window.addEventListener("resize", updateItemCount);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updateItemCount);
+});
+</script>

components/section/Product.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    class="w-[150px] sm:w-[260px] md:w-[330px] px-2 py-3 sm:py-5 sm:px-[15px] bg-block rounded-2xl flex flex-col items-center gap-[15px] sm:gap-[50px]">
+    <img :src="`/api/public/file/${props.product?.cover_picture_uuid}.webp`" alt="Product Image" :class="[
+      'h-[95px] sm:min-h-[180px] md:min-h-[205px] rounded-[5px]',
+      isError ? 'max-w-[50%]' : ''
+    ]" @error="handleImageError" />
+
+    <div class="flex flex-col justify-between h-full w-full gap-[7px] sSm:gap-[15px]">
+      <div class="flex flex-col gap-[7px] sm:gap-[15px] w-full">
+        <h3 class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark">
+          {{ props.product?.name }}
+        </h3>
+        <p class="text-[9px] sm:text-[12px] text-sm text-bg-dark">
+          {{ props.product?.tax_name }}
+        </p>
+      </div>
+      <div class="flex items-center justify-between">
+        <p class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
+          {{ props.product?.formatted_price }}
+        </p>
+        <button @click="productStore.incrementCartItem(props.product?.id)"
+          class="w-[22px] h-[22px] sm:w-9 sm:h-9 md:w-12 md:h-12 rounded-[5px] text-bg-light sm:rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center p-1">
+          <i class="uil uil-shopping-cart text-lg sm:text-2xl md:text-[31px] cursor-pointer"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  product: Object,
+});
+
+const productStore = useProductStore()
+
+const isError = ref(false);
+
+function handleImageError(event: Event) {
+  isError.value = true;
+  (event.target as HTMLImageElement).src = '/photo.svg';
+}
+</script>

components/section/RegistrationMain.vue

@@ -0,0 +1,164 @@
+<template>
+    <UiContainer class="flex py-[15px] xl:py-20 sm:py-0">
+        <div class="hidden xl:block rounded-2xl min-w-[40%] h-[830px]" :style="{
+            backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+        }" />
+        <div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12 ">
+            <div class="space-25-55">
+                <div class="flex flex-wrap-reverse gap-y-4 justify-between">
+                    <h2 class="h2-bold-bounded">{{ $t('sign_up') }}</h2>
+                    <button @click="menuStore.navigateToItem()"
+                        class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer">{{
+                            $t('back_to_home') }}</button>
+                </div>
+                <div class="space-y-[25px] sm:space-y-[30px]">
+                    <p>{{ $t('current_information') }}</p>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-[30px]">
+                        <div class="space-y-[15px]">
+                            <p class="pl-6">{{ $t('first_name') }}</p>
+                            <input :placeholder="$t('first_name')" type="text"
+                                class="text-sm sm:text-xl border border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                        </div>
+                        <div class="space-y-[15px]">
+                            <p class="pl-6">{{ $t('last_name') }}</p>
+                            <input :placeholder="$t('last_name')" type="text"
+                                class="text-sm sm:text-xl  border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                        </div>
+                        <div class="space-y-[15px]">
+                            <p class="pl-6">{{ $t('email') }}</p>
+                            <input :placeholder="$t('email')" type="text"
+                                class="text-sm sm:text-xl border border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                        </div>
+                        <div class="space-y-[15px]" ref="dropdownRef">
+                            <p class="pl-6">{{ $t('phone') }}</p>
+                            <div class="flex items-center border-2 border-block rounded-lg">
+                                <div
+                                    class="relative z-50 bg-inherit ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0">
+                                    <div class="px-[25px]" @click="dropCountry = !dropCountry">
+                                        <div
+                                            class="flex items-center gap-2 text-sm sm:text-xl uppercase text-text-light dark:text-text-dark">
+                                            <span :class="[dropCountry && 'rotate-180', 'transition-all']"> <i
+                                                    class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
+                                            <p class="text-sm sm:text-xl">
+                                                {{ menuStore.selectedPhoneCountry.iso_code }}
+                                            </p>
+                                        </div>
+                                    </div>
+
+                                    <div v-if="dropCountry"
+                                        class="mt-2 absolute bg-bg-light dark:bg-bg-dark rounded-[5px] ring-0 cursor-pointer w-[130px] sm:w-full border border-button py-[10px] px-[5px] overflow-hidden">
+                                        <div class="overflow-y-auto h-[200px] w-full">
+                                            <p v-for="item in menuStore.countries" :key="item.iso_code"
+                                                @click="() => { menuStore.selectedPhoneCountry = item; dropCountry = false }"
+                                                class="w-full truncate whitespace-nowrap overflow-hidden hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
+                                                :title="item.name">
+                                                {{ item.name }}
+                                            </p>
+                                        </div>
+                                    </div>
+
+                                </div>
+                                <p class="text-sm sm:text-xl font-normal">{{ menuStore.selectedPhoneCountry.call_prefix
+                                }}</p>
+                                <input id="phone" :placeholder="$t('phone')" type="text"
+                                    class="text-sm sm:text-xl placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0" />
+                            </div>
+                        </div>
+                        <div class="space-y-[15px]">
+                            <p class="pl-6">{{ $t('account_type') }}</p>
+                            <USelect v-model="selectedType"
+                                :items="component.front_section_lang && component.front_section_lang[0].data.account_types"
+                                value-key="name" :searchable="false" :ui="{
+                                    base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 h-[50px] sm:h-[67px] w-full p-0',
+                                    trailing: 'hidden w-full',
+                                    viewport: 'ring-0 min-w-full',
+                                    content: 'bg-bg-light dark:bg-bg-dark ring-0 border border-button',
+                                    leading:
+                                        'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-0 w-full',
+                                    group: 'px-[5px] py-[10px]',
+                                    item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 min-w-full',
+                                }">
+                                <template #leading="{ modelValue }">
+                                    <div
+                                        class="flex items-center justify-between gap-2 uppercase text-sm sm:text-xl border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 w-full h-[50px] sm:h-[67px]">
+                                        <p class="truncate whitespace-nowrap">
+                                            {{component.front_section_lang &&
+                                                component.front_section_lang[0].data.account_types.find((item) => item.name
+                                                    === modelValue)?.name}}
+                                        </p>
+                                        <span> <i
+                                                class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
+                                    </div>
+                                </template>
+
+                                <template #item="{ item }">
+                                    <div class="flex items-center gap-2 cursor-pointer min-w-full">
+                                        <p
+                                            class="truncate whitespace-nowrap text-sm sm:text-xl font-medium uppercase text-text-light dark:text-text-dark opacity-100">
+                                            {{ item.name }}
+                                        </p>
+                                    </div>
+                                </template>
+                            </USelect>
+                        </div>
+                        <div class="space-y-[15px]">
+                            <p class="pl-6">{{ $t('partner_code') }}</p>
+                            <input :placeholder="$t('placeholder_password')" type="text"
+                                class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="py-[25px] sm:py-12 border-b border-gray flex justify-center w-full">
+                <UiButtonArrow type="fill" :arrow="true">{{ $t('sign_up') }}</UiButtonArrow>
+            </div>
+            <div class="mt-[25px] sm:mt-[30px] w-full flex justify-center gap-3">
+                <p class="cursor-pointer hover:underline transition-all">{{
+                    $t('is_account')
+                }}</p>
+                <p @click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
+                    class="text-button cursor-pointer hover:text-button-hover">{{
+                        $t('login')
+                    }}</p>
+            </div>
+        </div>
+    </UiContainer>
+</template>
+
+<script lang="ts" setup>
+import { onClickOutside } from "@vueuse/core";
+const props = defineProps<{
+    component: {
+        id: number
+        name: string
+        img: string[]
+        component_name: string
+        is_no_lang: boolean
+        page_name: string
+        front_section_lang: {
+            data: {
+                account_types: {
+                    id: number,
+                    name: string
+                }[]
+            }
+            id_front_section: number
+            id_lang: number
+        }[]
+    }
+}>();
+
+const menuStore = useMenuStore()
+const dropdownRef = ref(null);
+const dropCountry = ref()
+
+const selectedType = ref()
+if (props.component.front_section_lang)
+    selectedType.value = props.component.front_section_lang[0].data.account_types[0].name
+
+onClickOutside(dropdownRef, () => {
+    dropCountry.value = false
+});
+</script>

components/section/ResetPasswordMain.vue

@@ -0,0 +1,41 @@
+<template>
+    <UiContainer class="flex py-10 sm:py-14 gap-10">
+        <div class="hidden xl:block rounded-2xl min-w-[50%] h-[830px]" :style="{
+            backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+        }" />
+        <div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12 ">
+            <div class="space-y-[55px]">
+                <div class="flex flex-col-reverse sm:flex-row justify-between items-start gap-7 sm:items-center">
+                    <h2 class="h2-bold-bounded">{{ $t('reset_password') }}</h2>
+                    <button
+                        class="whitespace-nowrap h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer">{{
+                            $t('back_to_home') }}</button>
+                </div>
+                <div class="space-y-[30px]">
+                    <p>{{ component.section_lang_data.reset_password_description }}</p>
+                    <div class="space-y-[15px]">
+                        <p class="pl-6">{{ $t('email') }}</p>
+                        <input :placeholder="$t('email')" type="text"
+                            class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                    </div>
+                </div>
+            </div>
+            <div class="pt-[25px] sm:pt-12 flex justify-center w-full">
+                <UiButtonArrow type="fill" :arrow="true">{{ $t('confirm') }}</UiButtonArrow>
+            </div>
+        </div>
+    </UiContainer>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ component: Component }>();
+type Component = {
+    image_collection: string;
+    section_id: string;
+    section_img: string;
+    section_lang_data: {
+        reset_password_description: string
+    };
+};</script>

components/section/ShopMain.vue

@@ -0,0 +1,557 @@
+<template>
+  <SectionShopPageCurrencyRatesBar
+    class="mb-[25px] sm:mb-[55px] xl:mb-[75px]"
+  />
+  <UiContainer>
+    <div class="flex flex-col gap-[25px] sm:gap-10 xl:flex-row">
+      <!-- button to open categories -->
+      <div class="xl:hidden flex items-center w-full">
+        <button
+          class="h-[40px] w-full cursor-pointer rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px] bg-button text-text-dark group-hover:bg-button-hover"
+          @click="openCategories = !openCategories"
+        >
+          Otevřené kategorie a filtry
+        </button>
+      </div>
+
+      <Transition>
+        <div v-if="openCategories" class="min-w-[250px] px-5 sm:p-0 xl:hidden">
+          <h1
+            class="font-bounded leading-[140%] font-bold text-[24px] mb-[25px]"
+          >
+            {{ $t("category") }}
+          </h1>
+          <div class="flex flex-col gap-[25px]">
+            <div>
+              <div
+                v-if="categoriesList && categoriesList.length < 1"
+                class="animate-pulse"
+              >
+                <div
+                  class="flex items-center justify-between mt-4 text-white rounded-lg cursor-pointer xl:pr-24"
+                >
+                  <div class="w-32 h-4 bg-gray-200 rounded" />
+                  <div class="w-4 h-4 bg-gray-200 rounded-full" />
+                </div>
+              </div>
+              <CategoryTree
+                :data="categoriesList"
+                :active="categoryId"
+                @change-category="changeCategory($event)"
+              />
+            </div>
+            <div>
+              <p
+                class="mb-[25px] text-lg font-extrabold text-black dark:text-white"
+              >
+                {{ $t("filtered_by") }}
+              </p>
+
+              <div
+                v-for="(item, itemIndex) in filters"
+                :key="itemIndex"
+                :class="[
+                  'mb-[30px]',
+                  visibleFeatures[item.feature] && 'border-b border-block pb-2',
+                ]"
+              >
+                <span
+                  class="flex justify-between items-center font-bold cursor-pointer mb-[25px] text-base"
+                  @click="toggleFeature(item.feature)"
+                >
+                  {{ item.feature }}
+                  <span
+                    :class="[
+                      visibleFeatures[item.feature] && 'rotate-180',
+                      'transition-all',
+                    ]"
+                    ><i
+                      class="iconify i-lucide:chevron-down text-button shrink-0 size-6 ms-auto"
+                  /></span>
+                </span>
+                <ul
+                  v-show="visibleFeatures[item.feature]"
+                  class="flex flex-col gap-5"
+                >
+                  <li
+                    v-for="filter in item.feature_values"
+                    :key="filter.value_id"
+                    class="flex items-center gap-[10px] cursor-pointer"
+                  >
+                    <input
+                      :id="`${filter.value_id}`"
+                      v-model="selectedFilters"
+                      :value="`${filter.parent}.${filter.value_id}`"
+                      type="checkbox"
+                      class="border-button !bg-inherit"
+                    />
+                    <label
+                      :for="`${filter.value_id}`"
+                      class="cursor-pointer flex items-center justify-between w-full text-base"
+                    >
+                      <span>{{ filter.value }}</span>
+                      <span>12</span>
+                    </label>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+
+      <!-- categories -->
+      <div class="min-w-[250px] hidden xl:block">
+        <h1 class="font-bounded leading-[140%] font-bold text-[40px] mb-[55px]">
+          {{ $t("category") }}
+        </h1>
+        <div class="flex flex-col gap-12">
+          <div>
+            <div
+              v-if="categoriesList && categoriesList.length < 1"
+              class="animate-pulse"
+            >
+              <div
+                class="flex items-center justify-between mt-4 text-white rounded-lg cursor-pointer xl:pr-24"
+              >
+                <div class="w-32 h-4 bg-gray-200 rounded" />
+                <div class="w-4 h-4 bg-gray-200 rounded-full" />
+              </div>
+            </div>
+            <CategoryTree
+              :data="categoriesList"
+              :active="categoryId"
+              @change-category="changeCategory($event)"
+            />
+          </div>
+          <div>
+            <p class="mb-10 text-2xl font-extrabold text-black dark:text-white">
+              {{ $t("filtered_by") }}
+            </p>
+
+            <!-- <div v-if="filters.length < 1" class="mb-8 text-white animate-pulse">
+                            <div v-for="i in 5"
+                                class="mt-10 flex justify-between font-bold text-black cursor-pointer 2xl:pr-24 dark:text-gray">
+                                <div class="w-32 h-4 bg-gray-200 rounded"></div>
+                                <div class="w-4 h-4 bg-gray-200 rounded"></div>
+                            </div>
+                        </div> -->
+
+            <div
+              v-for="(item, itemIndex) in filters"
+              :key="itemIndex"
+              :class="[
+                'mb-[30px]',
+                visibleFeatures[item.feature] && 'border-b border-block pb-2',
+              ]"
+            >
+              <span
+                class="flex justify-between items-center font-bold cursor-pointer mb-[25px]"
+                @click="toggleFeature(item.feature)"
+              >
+                {{ item.feature }}
+                <span
+                  :class="[
+                    visibleFeatures[item.feature] && 'rotate-180',
+                    'transition-all',
+                  ]"
+                  ><i
+                    class="iconify i-lucide:chevron-down text-button shrink-0 size-6 ms-auto"
+                /></span>
+              </span>
+              <ul
+                v-show="visibleFeatures[item.feature]"
+                class="flex flex-col gap-5"
+              >
+                <li
+                  v-for="filter in item.feature_values"
+                  :key="filter.value_id"
+                  class="flex items-center gap-[10px] cursor-pointer"
+                >
+                  <!-- <input :id="`${filter.value_id}`" :value="`${filter.parent}.${filter.value_id}`"
+                                        v-model="selectedFilters" type="checkbox" class="border-button !bg-inherit" />
+                                    <label :for="`${filter.value_id}`" class="cursor-pointer">{{ filter.value }}</label> -->
+
+                  <input
+                    :id="`${filter.value_id}`"
+                    v-model="selectedFilters"
+                    :value="`${filter.parent}.${filter.value_id}`"
+                    type="checkbox"
+                    class="border-button !bg-inherit"
+                  />
+                  <label
+                    :for="`${filter.value_id}`"
+                    class="cursor-pointer flex items-center justify-between w-full"
+                  >
+                    <span>{{ filter.value }}</span>
+                    <span>12</span>
+                  </label>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="w-full space-y-10">
+        <!-- pop-up -->
+        <div
+          v-if="isInfo"
+          class="w-full xl:w-[70%] mx-auto border-y border-block py-[15px] sm:p-[30px] flex gap-[55px] relative"
+        >
+          <UButton
+            variant="ghost"
+            class="p-0 absolute right-0 top-2 sm:right-2 sm:top-2 cursor-pointer text-button font-light hover:bg-inherit hover:text-button-hover"
+            size="xl"
+            icon="i-lucide-x"
+            @click="closeElement()"
+          />
+
+          <div class="flex flex-col sm:flex-row gap-[25px]">
+            <div class="flex flex-col justify-between gap-[25px]">
+              <h4
+                class="font-inter text-lg sm:text-[24px] leading-[150%] md:leading-[120%] font-bold"
+              >
+                {{ component.front_section_lang[0].data.title }}
+              </h4>
+              <p>{{ component.front_section_lang[0].data.description }}</p>
+            </div>
+            <img
+              class="max-w-[150px] mx-auto"
+              :src="`/api/public/file/${component.img[0]}_m.webp')`"
+            />
+          </div>
+        </div>
+
+        <div
+          v-if="products.length < 1"
+          class="grid gap-12 pt-32 pb-16 md:grid-cols-2 2xl:grid-cols-3"
+        >
+          <TheProductSkeleton v-for="index in 6" :key="index" />
+        </div>
+
+        <!-- products -->
+        <div
+          v-else
+          ref="loadingElement"
+          class="flex flex-wrap justify-center gap-5 sm:gap-10"
+        >
+          <Product
+            v-for="product in products"
+            :key="product.id"
+            :product="product"
+          />
+        </div>
+
+        <div v-if="reachedEnd" class="w-full flex justify-center">
+          <p>
+            {{ $t("FrontTranslations", "You reached end of the list.") }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </UiContainer>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import Product from "./Product.vue";
+import type {
+  Feature,
+  GenericResponse,
+  GenericResponseChildren,
+  GenericResponseItems,
+  ProductType,
+} from "~/types";
+import CategoryTree from "./CategoryTree.vue";
+const { $session } = useNuxtApp();
+
+watch(
+  () => $session.cookieData,
+  async () => await getProducts(),
+  { deep: true }
+);
+defineProps<{
+  component: {
+    id: number;
+    name: string;
+    img: string[];
+    component_name: string;
+    is_no_lang: boolean;
+    page_name: string;
+    front_section_lang: {
+      data: {
+        title: string;
+        description: string;
+      };
+      id_front_section: number;
+      id_lang: number;
+    }[];
+  };
+}>();
+
+const openCategories = ref(false);
+const isInfo = ref<boolean>(true);
+const selectedFilters = ref<any>([]);
+const categoryId = ref<number>(1);
+
+const loading = ref(false);
+const reachedEnd = ref(false);
+
+const loadingElement = ref<HTMLElement | null>(null);
+
+const page = ref(1);
+const elems = ref(12);
+const maxElements = ref(0);
+
+const products = ref([] as ProductType[]);
+async function getProducts() {
+  try {
+    const { data } = await useMyFetch<GenericResponseItems<ProductType[]>>(
+      `/api/public/products/category/${categoryId.value}?p=${page.value}&elems=${elems.value}`,
+      {
+        headers: {
+          "Content-Type": "application/json",
+        },
+        onErrorOccured: (_, status) => {
+          throw new Error(`HTTP error: ${status}`);
+        },
+      }
+    );
+
+    products.value = data.items;
+    maxElements.value = data.items_count + 1;
+  } catch (error) {
+    console.error("getProducts error:", error);
+  }
+}
+
+const filters = ref([] as Feature[]);
+async function getCategory() {
+  try {
+    const { data } = await useMyFetch<GenericResponse<object>>(
+      `/api/public/products/category/1/classification`,
+      {
+        headers: {
+          "Content-Type": "application/json",
+        },
+        onErrorOccured: (_, status) => {
+          throw new Error(`HTTP error: ${status}`);
+        },
+      }
+    );
+
+    filters.value = data as Feature[];
+    filters.value.forEach((el: Feature) => {
+      const parentId = el.feature_id;
+      el.feature_values.forEach((el) => {
+        el.parent = parentId;
+      });
+    });
+  } catch (error) {
+    console.error("getCategory error:", error);
+  }
+}
+
+const categoriesList = ref();
+async function getCategoryTree() {
+  try {
+    const { data } = await useMyFetch<GenericResponseChildren<ProductType[]>>(
+      `/api/public/categories/tree`,
+      {
+        headers: {
+          "Content-Type": "application/json",
+        },
+        onErrorOccured: (_, status) => {
+          throw new Error(`HTTP error: ${status}`);
+        },
+      }
+    );
+
+    categoriesList.value = data.children;
+  } catch (error) {
+    console.error("getCategory error:", error);
+  }
+}
+
+getProducts();
+getCategory();
+getCategoryTree();
+
+const closeElement = () => {
+  isInfo.value = false;
+};
+
+onMounted(() => {
+  window.addEventListener("scroll", scrollEvent);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", scrollEvent);
+});
+
+async function scrollEvent() {
+  const maxScrollY =
+    window.scrollY ||
+    document.documentElement.scrollHeight -
+      document.documentElement.clientHeight;
+
+  if (
+    window.scrollY >= maxScrollY - 500 &&
+    !reachedEnd.value &&
+    !loading.value
+  ) {
+    loading.value = true;
+    await loadMoreProducts();
+    loading.value = false;
+  }
+}
+
+filters.value.forEach((item) => {
+  visibleFeatures[item.feature] = false;
+});
+
+const visibleFeatures = reactive<Record<string, boolean>>({});
+function toggleFeature(feature: string) {
+  if (feature in visibleFeatures) {
+    visibleFeatures[feature] = !visibleFeatures[feature];
+  } else {
+    visibleFeatures[feature] = true;
+  }
+}
+
+class FilteredQueryString extends URLSearchParams {
+  override append(name: string, value: string): void {
+    if (value == null) {
+      return;
+    }
+
+    super.append(name, value);
+  }
+}
+
+async function loadMoreProducts() {
+  const qParams = new FilteredQueryString();
+
+  page.value = page.value + 1;
+
+  qParams.append("p", `${page.value}`);
+  qParams.append("elems", `${elems.value}`);
+  qParams.append(
+    "features",
+    selectedFilters.value.length > 0 ? selectedFilters.value : null
+  );
+
+  try {
+    const { data } = await useMyFetch<GenericResponseItems<ProductType[]>>(
+      `/api/public/products/category/${categoryId.value}?${qParams.toString()}`,
+      {
+        headers: {
+          "Content-Type": "application/json",
+        },
+        onErrorOccured: (_, status) => {
+          throw new Error(`HTTP error: ${status}`);
+        },
+      }
+    );
+
+    maxElements.value = data.items_count;
+
+    if (data.items) {
+      products.value.push(...(data.items as ProductType[]));
+    } else {
+      reachedEnd.value = true;
+    }
+
+    if (products.value.length >= maxElements.value) {
+      reachedEnd.value = true;
+    }
+  } catch (error) {
+    console.error("getCategory error:", error);
+  }
+}
+
+const changeCategory = (item: any) => {
+  categoryId.value = item.id;
+};
+
+watch(selectedFilters, async (newQuestion: string) => {
+  if (newQuestion) {
+    page.value = 1;
+    reachedEnd.value = false;
+    loadingElement.value?.scrollIntoView();
+
+    const qParams = new FilteredQueryString();
+
+    qParams.append("p", `${page.value}`);
+    qParams.append("elems", `${elems.value}`);
+    qParams.append(
+      "features",
+      selectedFilters.value.length > 0 ? selectedFilters.value : null
+    );
+
+    try {
+      const { data } = await useMyFetch<GenericResponseItems<ProductType[]>>(
+        `/api/public/products/category/1?${qParams.toString()}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+          onErrorOccured: (_, status) => {
+            throw new Error(`HTTP error: ${status}`);
+          },
+        }
+      );
+
+      products.value = data.items;
+      maxElements.value = data.items_count;
+    } catch (error) {
+      console.error("selectedFilters error:", error);
+    }
+  }
+});
+
+watch(categoryId, async (newCategoryId) => {
+  if (newCategoryId) {
+    page.value = 1;
+    reachedEnd.value = false;
+    loadingElement.value?.scrollIntoView();
+
+    const qParams = new FilteredQueryString();
+    qParams.append("p", `${page.value}`);
+    qParams.append("elems", `${elems.value}`);
+    qParams.append(
+      "features",
+      selectedFilters.value.length > 0 ? selectedFilters.value : null
+    );
+
+    try {
+      const { data } = await useMyFetch<GenericResponseItems<ProductType[]>>(
+        `api/public/products/category/${newCategoryId}?${qParams.toString()}`,
+        {
+          headers: { "Content-Type": "application/json" },
+          onErrorOccured: (_, status) => {
+            throw new Error(`HTTP error: ${status}`);
+          },
+        }
+      );
+
+      products.value = data.items;
+      maxElements.value = data.items_count;
+    } catch (error) {
+      console.error("getCategory error:", error);
+    }
+  }
+});
+</script>
+
+<style scoped>
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>

components/sections/main-page/MainHero.vue

@@ -1,44 +0,0 @@
-<template>
-  <UContainer
-    class="mx-auto w-full max-w-[360px] px-[16px] sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-[24px] xl:max-w-[1920px] xl:px-[80px]"
-  >
-    <div class="">
-      <div class="mt-[75px] space-y-[30px] sm:space-y-[53px]">
-        <h1 class="h1">
-          {{ data.title }}
-        </h1>
-        <div
-          class="hidden h-[509px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block"
-          :style="{
-            backgroundImage: `url('/header-hero-desc.png')`,
-          }"
-        />
-        <div
-          class="h-[465px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 sm:h-[509px] xl:hidden"
-          :style="{
-            backgroundImage: `url('/header-hero.png')`,
-          }"
-        />
-        <div
-          class="flex flex-col items-center space-y-[30px] sm:flex-row sm:items-start md:space-y-0 xl:items-center"
-        >
-          <h3 class="h4-uppercase sm:min-w-[45%]">
-            {{ data.title_second }}
-          </h3>
-          <div class="flex w-full items-start justify-center sm:justify-end">
-            <ButtonArrow type="fill">Začít investovat</ButtonArrow>
-          </div>
-        </div>
-      </div>
-    </div>
-  </UContainer>
-</template>
-
-<script lang="ts" setup>
-const data = {
-  title: "INVESTUJTE CHYTŘE. CHRAŇTE SVÉ PENÍZE ZLATEM",
-  button: "Začít investovat",
-  title_second:
-    "Spoření i jednorázová investice do zlata jednoduše a bezpečně s YourGold",
-};
-</script>

components/ui/ButtonArrow.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap">
+    <button :class="[
+      'h-[40px] cursor-pointer min-w-40 rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px]',
+      type === 'fill'
+        ? 'bg-button text-text-dark group-hover:bg-button-hover'
+        : type === 'border'
+          ? 'border-button text-button group-hover:border-button-hover group-hover:text-button-hover border'
+          : 'border-button text-button dark:border-block dark:text-block group-hover:border-button-hover group-hover:text-button-hover border',
+      full && 'w-full'
+    ]">
+      <slot />
+    </button>
+    <div v-if="arrow" :class="[
+      'flex h-[40px] w-[40px] items-center justify-center rounded-[10px] p-2.5 transition-all sm:h-[50px] sm:w-[50px] md:h-[65px] md:w-[65px] md:rounded-[15px]',
+      type === 'fill'
+        ? 'bg-button text-text-dark group-hover:bg-button-hover'
+        : 'border-button text-button dark:border-block dark:text-block group-hover:border-button-hover group-hover:text-button-hover border',
+    ]">
+      <svg class="" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
+          fill="currentColor" />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  type: {
+    type: String,
+  },
+  arrow: {
+    type: Boolean,
+  },
+  full: {
+    type: Boolean,
+  },
+});
+</script>

components/ui/CheckoutInput.vue

@@ -0,0 +1,57 @@
+<template>
+    <div class="space-y-[15px]">
+        <p :for="`base-input-${id}`" class="pl-6">
+            <slot />
+        </p>
+        <div class="flex flex-col">
+            <div class="flex relative">
+                <input :id="`base-input-${id}`" :value="modelValue" :type="!isPasswordVisible ? type : 'text'"
+                    :placeholder="placeholder" :disabled="disabled"
+                    @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+                    @focus="$emit('focus')" @blur="$emit('blur')"
+                    class="border border-block placeholder:text-gray dark:placeholder:text-button-disabled rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                <i v-if="disabled"
+                    class="uil uil-lock-alt text-[22px] absolute right-6 top-1/2 -translate-y-1/2 text-gray" />
+
+                <div v-if="type === 'password'" class="order-2 ml-1.5 cursor-pointer" :title="!isPasswordVisible ? $t('show_password') : $t('hide_password')
+                    " @click="isPasswordVisible = !isPasswordVisible">
+                    <FaceObserver class="ml-4 text-xl leading-6" :isPasswordVisible="isPasswordVisible" />
+                </div>
+
+            </div>
+
+            <!-- <p class="mt-2 text-xs text-red-600">{{ validationText }}</p> -->
+
+            <!-- <p v-if="!validation && validation != null" class="mt-2 text-xs text-red-600">
+                {{ validationText }}
+            </p> -->
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import FaceObserver from './FaceObserver.vue';
+
+defineEmits(["update:modelValue", "focus", "blur"]);
+
+defineProps<{
+    modelValue?: string | any;
+    modelModifiers?: object;
+    id: number;
+    type?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    validation?: boolean | null;
+    validationText?: string;
+}>();
+
+const isPasswordVisible = ref(false);
+
+</script>
+<style>
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+    transition: background-color 5000s ease-in-out 0s;
+}
+</style>

components/ui/Container.vue

@@ -0,0 +1,8 @@
+<template>
+    <UContainer
+        class="mx-auto w-full max-w-[380px] px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20">
+        <slot />
+    </UContainer>
+</template>
+
+<script lang="ts" setup></script>

components/ui/FaceObserver.vue

@@ -0,0 +1,15 @@
+<template>
+    <svg v-if="isPasswordVisible" xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px" fill="#000000"><path d="m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z"/></svg>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px" fill="#000000"><path d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"/></svg>
+  </template>
+  
+  <script>
+  export default {
+    props: {
+      isPasswordVisible: {
+        type: Boolean,
+        required: true
+      }
+    }
+  };
+  </script>

components/ui/ImgWrapper.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="hidden md:block">
+        <svg width="100%" height="100%" viewBox="0 0 870 350" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+                <clipPath id="customClip">
+                    <path
+                        d="M20 0.5H847.666C858.366 0.5 867.067 9.12193 867.165 19.8213L869.315 254.821C869.415 265.66 860.656 274.5 849.816 274.5H653C641.678 274.5 632.5 283.678 632.5 295V330C632.5 340.77 623.77 349.5 613 349.5H20C9.23045 349.5 0.5 340.77 0.5 330V20C0.5 9.23045 9.23045 0.5 20 0.5Z" />
+                </clipPath>
+            </defs>
+
+            <image :href="src" clip-path="url(#customClip)" preserveAspectRatio="xMidYMid slice" width="100%"
+                height="100%" />
+
+            <foreignObject x="640" y="285" width="calc(100% - 640px - 1px)" height="calc(100% - 285px)">
+                <slot name="button" />
+            </foreignObject>
+        </svg>
+    </div>
+    <div class="block md:hidden">
+        <img :src="src" width="100%" height="100%" class="object-contain rounded-2xl my-4" />
+        <div class="flex justify-center">
+            <slot name="button" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ src: string }>()
+</script>

composables/useMyFetch.ts

@@ -0,0 +1,72 @@
+import { ofetch } from "ofetch";
+
+export interface RequestOptions<T> extends RequestInit {
+  onErrorOccured?: (error: Error, statusCode: number) => void;
+  onSuccess?: (data: T, statusCode: number) => void;
+  onStart?: () => void;
+}
+
+/**
+ * @function useMyFetch
+ *
+ * @description
+ * Makes a request to a given url, handles cookies and errors.
+ *
+ * @param {string} url - The url to make a request to.
+ * @param {RequestOptions} [options] - The options to use for the request.
+ *
+ * @returns {Promise<T | undefined>} - A promise resolving to the response data
+ *  or undefined if an error occurred.
+ *
+ * @example
+ * const { data } = useMyFetch<{ name: string }>('/api/user')
+ */
+export const useMyFetch = async <T>(
+  url: string,
+  options?: RequestOptions<T>
+): Promise<T> => {
+  if (options?.onStart) options.onStart();
+  let response = null;
+  try {
+    const event = useRequestEvent();
+
+    if (options == null) options = {};
+
+    options.credentials = "include";
+
+    if (import.meta.server) {
+      const api_uri =
+        event?.node.req.headers["api-uri"] || "http://localhost:4000";
+      url = api_uri + url;
+      options.headers = event?.headers;
+    }
+
+    response = await ofetch.raw(url, options);
+    if (import.meta.server && !event?.handled) {
+      for (const cookie of response.headers.getSetCookie()) {
+        event?.headers.set("Cookie", cookie);
+        event?.node.res.setHeader("set-cookie", cookie);
+      }
+    }
+
+    // handle errors if any
+    if (!response.ok && typeof options.onErrorOccured == "function") {
+      options.onErrorOccured(new Error(response.statusText), response.status);
+    }
+
+    // handle success to be able clearly marked that request has finished
+    if (response.ok && typeof options.onSuccess == "function") {
+      options.onSuccess(response._data, response.status);
+    }
+
+    return response._data as T;
+  } catch (e) {
+    // handle errors if any
+    if (typeof options?.onErrorOccured == "function") {
+      options.onErrorOccured(e as Error, response?.status || 500);
+    } else {
+      console.error(e);
+    }
+    return {} as T;
+  }
+};

composables/usePB.ts

@@ -1,15 +0,0 @@
-// import { ref } from 'vue';
-import pocketbase from "pocketbase";
-
-export const usePB = () => {
-  const nuxtApp = useNuxtApp();
-
-  const isServer = !!nuxtApp.ssrContext;
-  if (isServer) {
-    const pb = new pocketbase(process.env.POCKETBASE_URL || "http://127.0.0.1:8090");
-    return pb;
-  }
-
-  const pb = new pocketbase(window.location.origin);
-  return pb;
-};

error.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="p-10 text-center">
+    <h1 class="text-3xl font-bold">Error {{ error?.statusCode }}</h1>
+    <p class="mt-4 text-gray-600">{{ error?.statusMessage }}</p>
+    <NuxtLink to="/" class="mt-6 text-blue-500 underline">Go back home</NuxtLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({ error: Object })
+</script>

i18n/locales/cs.json

@@ -0,0 +1,3 @@
+{
+    "welcome": "Welcome to Nuxt 3"
+  }

layouts/default.vue

@@ -1,24 +1,18 @@
 <template>
   <div
-    class="bg-bg-light dark:bg-bg-dark text-text-light dark:text-text-dark font-inter flex min-h-screen flex-col overflow-hidden"
-  >
+    class="bg-bg-light dark:bg-bg-dark text-text-light dark:text-text-dark font-inter flex min-h-screen flex-col overflow-hidden">
     <HeaderBlock />
-    <div class="flex-1">
-      <MainHero />
-      {{ $t("button_contact") }}
+    <div
+      class="flex-1 py-[25px] sm:py-[55px] md:py-[75px] space-y-[55px] sm:space-y-[75px] md:space-y-[100px] text-inter">
       <slot />
     </div>
-    <!-- <footer-block /> -->
+    <!-- <FooterBlock /> -->
   </div>
 </template>
 
 <script setup lang="ts">
-import MainHero from "~/components/sections/main-page/MainHero.vue";
-
+// import FooterBlock from "~/components/section/FooterBlock.vue";
 useHead({
   link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.png" }],
 });
 </script>
-
-<style>
-</style>

nuxt.config.ts

@@ -3,26 +3,20 @@ import tailwindcss from "@tailwindcss/vite";
 export default defineNuxtConfig({
   compatibilityDate: "2024-11-01",
   devtools: { enabled: false },
-  // app: {
-  //   pageTransition: { name: "page", mode: "out-in" },
-  // },
-  // nitro: {
-  //   routeRules: {
-  //     "/api/**": {
-  //       proxy: {
-  //         to: `${process.env.POCKETBASE_URL || "http://127.0.0.1:8090"}/api/**`,
-  //       },
-  //     },
-  //   },
-  // },
 
-  modules: ["@pinia/nuxt", "@nuxt/eslint", "@nuxt/ui", "@nuxtjs/i18n"],
+  modules: [
+    "@pinia/nuxt",
+    "@nuxt/eslint",
+    "@nuxt/ui",
+    "@nuxtjs/i18n",
+    "@pinia/nuxt",
+  ],
 
   i18n: {
     locales: [
-      { code: "pl", name: "Polski", icon: "emojione:flag-for-poland" },
-      { code: "en", name: "English", icon: "emojione:flag-for-united-kingdom" },
-      { code: "cs", name: "Čeština", icon: "emojione:flag-for-chechia" },
+      { code: "pl", name: "Polski", icon: "circle-flags:pl" },
+      { code: "en", name: "English", icon: "circle-flags:gb" },
+      { code: "cs", name: "Čeština", icon: "circle-flags:cz" },
     ],
     lazy: true,
     defaultLocale: "en",
@@ -31,7 +25,11 @@ export default defineNuxtConfig({
       optimizeTranslationDirective: false,
     },
   },
-  css: ["@/assets/fonts.css", "@/assets/main.css"],
+  css: [
+    "@/assets/main.css",
+    "vue3-toastify/dist/index.css",
+    "@/assets/toastify-custom.css",
+  ],
   vite: {
     plugins: [tailwindcss()],
     build: {
@@ -42,14 +40,18 @@ export default defineNuxtConfig({
       watch: {
         ignored: ["**/backend/pb_data/**"],
       },
+      hmr: {
+        host: "127.0.0.1",
+        clientPort: 3000, // useful if proxying
+      },
     },
   },
   typescript: {
     tsConfig: {
       compilerOptions: {
-        typeRoots: ["./ts", "./node_modules/@types"],
+        typeRoots: ["./types", "./node_modules/@types"],
       },
-      include: ["./ts"],
+      include: ["./types"],
     },
   },
   ui: {},

package.json

@@ -12,19 +12,19 @@
   "dependencies": {
     "@iconscout/unicons": "^4.2.0",
     "@nuxt/eslint": "^1.4.1",
-    "@nuxt/ui": "^3.1.2",
+    "@nuxt/ui": "^3.1.3",
     "@nuxtjs/i18n": "^9.5.4",
     "@pinia/nuxt": "^0.11.0",
-    "@tailwindcss/vite": "^4.1.7",
+    "@tailwindcss/vite": "^4.1.8",
+    "@vueuse/core": "^13.3.0",
+    "gsap": "^3.13.0",
     "nuxt": "^3.17.4",
-    "pocketbase": "^0.26.0",
     "tailwindcss": "^4.1.7",
     "vue": "^3.5.14",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "vue3-toastify": "^0.2.8"
   },
   "devDependencies": {
-    "@nuxtjs/tailwindcss": "^6.14.0",
-    "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.11"
+    "@nuxtjs/tailwindcss": "^6.14.0"
   }
 }

pages/[id]/[slug].vue

@@ -0,0 +1,78 @@
+<template>
+  <KeepAlive>
+    <component :is="component.componentInstance" v-for="component in componentsList" :key="component.name"
+      :component="component.component" />
+  </KeepAlive>
+</template>
+
+<script setup>
+import { gsap } from 'gsap'
+import ScrollTrigger from 'gsap/ScrollTrigger'
+
+gsap.registerPlugin(ScrollTrigger)
+
+watch(useColorMode(), (color) => {
+  console.log(color);
+
+})
+
+onMounted(() => {
+  const anim = gsap.fromTo(
+    'h1',
+    {
+      opacity: 0,
+      zoom: 0.95
+    },
+    {
+      opacity: 1,
+      duration: 1,
+      zoom: 1,
+      ease: 'power2.out',
+    }
+  )
+
+  ScrollTrigger.create({
+    trigger: 'h1',
+    start: 'top 80%',
+    onEnter: () => anim.restart(),       // play when scrolling down
+    onEnterBack: () => anim.restart(),   // play again when scrolling up
+  })
+
+  const animh2 = gsap.fromTo(
+    'h2',
+    {
+      // opacity: 0,
+      // color: 'var(--color-accent-green-light)',
+    },
+    {
+      // opacity: 1,
+      // duration: 1,
+      ease: 'power2.out',
+    }
+  )
+
+  ScrollTrigger.create({
+    trigger: 'h2',
+    start: 'top 80%',
+    onEnter: () => animh2.restart(),       // play when scrolling down
+    onEnterBack: () => animh2.restart(),   // play again when scrolling up
+  })
+
+
+})
+
+
+const route = useRoute();
+const store = useStore();
+const menuStore = useMenuStore();
+await store.getSections(route.params.id);
+
+onMounted(() => {
+  menuStore.openMenu = false;
+});
+
+useHead(menuStore.headMeta);
+
+const componentsList = await store.getComponents(route.params.id)
+
+</script>

pages/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <KeepAlive>
+    <component :is="component.componentInstance" v-for="component in componentsList" :key="component.name"
+      :component="component.component" />
+
+  </KeepAlive>
+</template>
+
+<script setup>
+const menuStore = useMenuStore();
+
+const route = useRoute();
+
+route.params.id = menuStore.defaultMenu.id;
+route.params.slug = menuStore.defaultMenu.link_rewrite;
+
+const store = useStore();
+await store.getSections(route.params.id);
+
+onMounted(() => {
+  menuStore.openMenu = false;
+});
+
+useHead(menuStore.headMeta);
+const componentsList = await store.getComponents(route.params.id);
+</script>

plugins/01_i18n.ts

@@ -0,0 +1,132 @@
+import type { VueI18n } from "vue-i18n";
+import type { RouteLocation, Router } from "vue-router";
+import type { CookieData, GenericResponse } from "~/types";
+
+
+// Extend the NuxtApp type
+declare module '#app' {
+  interface NuxtApp {
+    $session: Session;
+  }
+}
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $session: Session;
+  }
+}
+
+
+
+export class Session {
+
+  cookieData = ref({} as CookieData);
+  urlParams = new URLSearchParams()
+  currentLanguageIso = ref("" as string)
+  currentCountryIso = ref("" as string)
+  currentCurrencyIso = ref("" as string)
+
+  route = {} as RouteLocation
+  router = {} as Router
+
+  i18n = {} as VueI18n
+  sessionOngoing: boolean = false
+
+  constructor(i18n: VueI18n, router: Router) {
+    this.route = router.currentRoute.value
+    this.router = router
+    this.i18n = i18n
+
+
+    this.setLanguage(this.route.query?.lang_iso ? this.route.query?.lang_iso as string : unref(i18n.locale))
+    this.setCountry(this.route.query?.country_iso ? this.route.query?.country_iso as string : "")
+    this.setCurrency(this.route.query?.currency_iso ? this.route.query?.currency_iso as string : "")
+  }
+
+
+  async loadSession() {
+    if (this.sessionOngoing) return
+    this.sessionOngoing = true
+    this.setQueryParams()
+    const { data } = await useMyFetch<GenericResponse<CookieData>>(`/api/public/cookie?${this.urlParams.toString()}`, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+      onErrorOccured: (_, status) => {
+        throw new Error(`HTTP error: ${status}`);
+      },
+    });
+    this.cookieData.value = data;
+    this.currentCountryIso.value = this.cookieData.value.country.iso_code
+    this.currentLanguageIso.value = this.cookieData.value.language.iso_code
+    this.currentCurrencyIso.value = this.cookieData.value.currency.iso_code
+    setTimeout(() => this.sessionOngoing = false, 2000)
+  }
+
+  setLanguage(iso: string) {
+    this.currentLanguageIso.value = iso
+  }
+
+  setCurrency(iso: string) {
+    this.currentCurrencyIso.value = iso
+  }
+
+  setCountry(iso: string) {
+    this.currentCountryIso.value = iso
+  }
+
+  setQueryParams() {
+    if (this.currentLanguageIso.value.length > 0) {
+      this.urlParams.set("lang_iso", this.currentLanguageIso.value)
+    } else {
+      this.urlParams.delete("lang_iso")
+    }
+
+    if (this.currentCountryIso.value.length > 0) {
+      this.urlParams.set("country_iso", this.currentCountryIso.value)
+    } else {
+      this.urlParams.delete("country_iso")
+    }
+
+    if (this.currentCurrencyIso.value.length > 0) {
+      this.urlParams.set("currency_iso", this.currentCurrencyIso.value)
+    } else {
+      this.urlParams.delete("currency_iso")
+    }
+  }
+
+}
+
+
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const loaded = [] as Array<string>;
+
+  const { $i18n: i18n } = nuxtApp as unknown as { $i18n: VueI18n };
+  const { $router: router } = nuxtApp as unknown as { $router: Router };
+
+  i18n.onBeforeLanguageSwitch = async (_, newLocale) => {
+    if (loaded.includes(newLocale)) return;
+
+    try {
+      loaded.push(newLocale);
+      const { data } = await useMyFetch<GenericResponse<object>>(
+        "/api/public/front/translation"
+      );
+
+      i18n.setLocaleMessage(newLocale, data);
+
+    } catch (err) {
+      console.error("❌ Failed to load translation for locale:", newLocale);
+      throw err;
+    }
+  };
+
+
+
+
+  const session = new Session(i18n, router)
+
+  await session.loadSession();
+  nuxtApp.provide("session", session);
+
+});

plugins/02_initLoad.ts

@@ -0,0 +1,10 @@
+import { defineNuxtPlugin } from "#app";
+
+export default defineNuxtPlugin(async () => {
+  const menuStore = useMenuStore();
+  await menuStore.loadMenu();
+  await menuStore.getLocales();
+  const store = useStore();
+  await store.getMinValue();
+  await store.getCalculator();
+});

plugins/i18n.ts

@@ -1,32 +0,0 @@
-import type { VueI18n } from "vue-i18n";
-import { usePB } from "~/composables/usePB";
-
-export default defineNuxtPlugin(async (nuxtApp) => {
-  const loaded = [] as Array<string>;
-
-  const i18n = nuxtApp.$i18n as VueI18n;
-  const pb = usePB();
-
-  i18n.onBeforeLanguageSwitch = async (oldLocale, newLocale) => {
-    if (loaded.includes(newLocale)) return;
-
-    try {
-      const translation = await pb.collection("translation").getList(1, 1, {
-        expand: "id_lang",
-        filter: `id_lang.iso='${newLocale}'`,
-      });
-
-      if (translation.totalItems === 1) {
-        i18n.setLocaleMessage(newLocale, translation.items[0].data);
-      } else {
-        i18n.setLocaleMessage(newLocale, {});
-      }
-
-      loaded.push(newLocale);
-    } catch (err) {
-      console.error("❌ Failed to load translation for locale:", newLocale);
-      throw err;
-    }
-  };
-
-});

plugins/vue3-toastify.client.ts

@@ -0,0 +1,10 @@
+import * as Vue3Toastify from "vue3-toastify";
+import "vue3-toastify/dist/index.css";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(Vue3Toastify.default, { autoClose: 2000 });
+
+  return {
+    provide: { toast: Vue3Toastify.toast },
+  };
+});

public/icons/Account.svg

@@ -1,10 +0,0 @@
-<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_655_26407)">
-<path d="M21.2558 16.5994C22.7829 15.4046 23.8976 13.766 24.4447 11.9118C24.9918 10.0575 24.9442 8.07977 24.3085 6.25369C23.6727 4.4276 22.4805 2.84399 20.8976 1.72315C19.3148 0.602316 17.42 0 15.4769 0C13.5338 0 11.639 0.602316 10.0562 1.72315C8.47329 2.84399 7.28106 4.4276 6.64533 6.25369C6.0096 8.07977 5.96199 10.0575 6.50911 11.9118C7.05624 13.766 8.17089 15.4046 9.698 16.5994C7.08126 17.6421 4.79807 19.3713 3.09182 21.6029C1.38558 23.8345 0.320246 26.4848 0.00939552 29.2711C-0.0131054 29.4746 0.00490408 29.6804 0.0623953 29.8769C0.119887 30.0734 0.215734 30.2568 0.344465 30.4164C0.604449 30.7389 0.982592 30.9455 1.39571 30.9906C1.80882 31.0358 2.22307 30.916 2.54732 30.6574C2.87157 30.3989 3.07926 30.0228 3.1247 29.6119C3.46674 26.5837 4.91863 23.787 7.20298 21.7561C9.48733 19.7252 12.444 18.6025 15.5081 18.6025C18.5721 18.6025 21.5288 19.7252 23.8131 21.7561C26.0975 23.787 27.5494 26.5837 27.8914 29.6119C27.9337 29.9926 28.1164 30.3441 28.404 30.5987C28.6917 30.8534 29.064 30.993 29.449 30.9906H29.6204C30.0287 30.9439 30.4019 30.7386 30.6587 30.4194C30.9154 30.1002 31.0349 29.6931 30.9911 29.2866C30.6788 26.4924 29.6077 23.8353 27.8927 21.6003C26.1777 19.3653 23.8834 17.6365 21.2558 16.5994ZM15.4769 15.4996C14.2446 15.4996 13.04 15.1362 12.0154 14.4553C10.9907 13.7744 10.1921 12.8067 9.72056 11.6744C9.24898 10.5422 9.12559 9.29628 9.366 8.09429C9.60641 6.8923 10.1998 5.7882 11.0712 4.92162C11.9426 4.05503 13.0527 3.46488 14.2614 3.22579C15.47 2.9867 16.7228 3.10941 17.8612 3.5784C18.9997 4.0474 19.9728 4.84161 20.6575 5.8606C21.3421 6.8796 21.7075 8.07762 21.7075 9.30315C21.7075 10.9465 21.0511 12.5226 19.8826 13.6847C18.7141 14.8467 17.1294 15.4996 15.4769 15.4996Z" fill="#1A1A1A"/>
-</g>
-<defs>
-<clipPath id="clip0_655_26407">
-<rect width="31" height="31" fill="white"/>
-</clipPath>
-</defs>
-</svg>

public/icons/ArrowCorner.svg

@@ -1,3 +0,0 @@
-<svg width="26" height="26" viewBox="0 0 26 26" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z" fill="#FFFEFB"/>
-</svg>

public/icons/Cart.svg

@@ -1,10 +0,0 @@
-<svg width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_655_26413)">
-<path d="M6.06199 28.7857C6.06199 29.0765 6.11376 29.3644 6.21433 29.6331C6.31491 29.9017 6.46232 30.1458 6.64816 30.3514C6.834 30.5571 7.05463 30.7202 7.29744 30.8314C7.54025 30.9427 7.80049 31 8.06331 31C8.59409 31 9.10313 30.7667 9.47845 30.3514C9.66429 30.1458 9.81171 29.9017 9.91228 29.6331C10.0129 29.3644 10.0646 29.0765 10.0646 28.7857C10.0646 28.1984 9.85377 27.6352 9.47845 27.22C9.10313 26.8047 8.59409 26.5714 8.06331 26.5714C7.53253 26.5714 7.02348 26.8047 6.64816 27.22C6.27284 27.6352 6.06199 28.1984 6.06199 28.7857ZM24.0738 28.7857C24.0738 29.0765 24.1256 29.3644 24.2262 29.6331C24.3268 29.9017 24.4742 30.1458 24.66 30.3514C24.8459 30.5571 25.0665 30.7202 25.3093 30.8314C25.5521 30.9427 25.8123 31 26.0752 31C26.6059 31 27.115 30.7667 27.4903 30.3514C27.6762 30.1458 27.8236 29.9017 27.9241 29.6331C28.0247 29.3644 28.0765 29.0765 28.0765 28.7857C28.0765 28.1984 27.8656 27.6352 27.4903 27.22C27.115 26.8047 26.6059 26.5714 26.0752 26.5714C25.5444 26.5714 25.0353 26.8047 24.66 27.22C24.2847 27.6352 24.0738 28.1984 24.0738 28.7857ZM0 1.10714C0 1.40078 0.105426 1.68238 0.293086 1.89001C0.480746 2.09764 0.735268 2.21429 1.00066 2.21429H3.08003L4.32285 8.09543L6.06199 17.7143C6.06199 17.794 6.09601 17.8626 6.10402 17.9401L5.08535 23.0109C5.05242 23.1727 5.05287 23.3406 5.08667 23.5022C5.12048 23.6638 5.18676 23.8149 5.2806 23.9443C5.37444 24.0736 5.49342 24.1779 5.6287 24.2494C5.76398 24.3209 5.91208 24.3577 6.06199 24.3571H28.7649C29.0303 24.3571 29.2849 24.2405 29.4725 24.0329C29.6602 23.8252 29.7656 23.5436 29.7656 23.25C29.7656 22.9564 29.6602 22.6748 29.4725 22.4671C29.2849 22.2595 29.0303 22.1429 28.7649 22.1429H7.31081L7.76911 19.8621C7.86918 19.8799 7.95924 19.9286 8.06331 19.9286H26.3053C27.41 19.9286 28.0765 19.6872 28.6088 18.2679L31.859 7.23629C32.4233 5.25893 31.1845 4.42857 30.0778 4.42857H6.06199C5.90589 4.42857 5.7698 4.48836 5.6237 4.526L4.84719 0.854714C4.79571 0.611482 4.6714 0.394662 4.49445 0.23949C4.31751 0.0843178 4.09833 -8.45862e-05 3.87255 6.36114e-08H1.00066C0.735268 6.36114e-08 0.480746 0.116645 0.293086 0.324275C0.105426 0.531904 0 0.81351 0 1.10714ZM6.10202 6.64286H29.9277L26.7336 17.4906C26.6956 17.5859 26.6636 17.6545 26.6395 17.701C26.5735 17.7076 26.4694 17.7143 26.3053 17.7143H8.06331V17.4951L8.02528 17.2803L6.10202 6.64286Z" fill="#1A1A1A" stroke="#1A1A1A" stroke-width="0.5"/>
-</g>
-<defs>
-<clipPath id="clip0_655_26413">
-<rect width="32" height="31" fill="white"/>
-</clipPath>
-</defs>
-</svg>

public/icons/Light.svg

@@ -1,10 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_655_26429)">
-<path d="M30.4 14.7184H28.832C27.9472 14.7184 27.232 15.2928 27.232 16C27.232 16.7056 27.9472 17.2784 28.832 17.2784H30.4C31.2832 17.2784 32 16.7072 32 16C32 15.2944 31.2816 14.7184 30.4 14.7184ZM16 7.2C14.8434 7.19641 13.6974 7.42158 12.6281 7.86254C11.5589 8.30351 10.5873 8.95158 9.76945 9.76945C8.95158 10.5873 8.30351 11.5589 7.86254 12.6281C7.42158 13.6974 7.19641 14.8434 7.2 16C7.2 20.8816 11.1184 24.8 16 24.8C20.88 24.8 24.8 20.8816 24.8 16C24.8 11.1184 20.8784 7.2 16 7.2ZM16 22.4C12.4624 22.4 9.6 19.5344 9.6 16C9.6 12.4624 12.4624 9.6 16 9.6C17.6974 9.6 19.3253 10.2743 20.5255 11.4745C21.7257 12.6747 22.4 14.3026 22.4 16C22.4 17.6974 21.7257 19.3253 20.5255 20.5255C19.3253 21.7257 17.6974 22.4 16 22.4ZM4.8 16C4.8 15.2944 4.0816 14.7184 3.2 14.7184H1.6C0.7152 14.7184 0 15.2928 0 16C0 16.7056 0.7152 17.2784 1.6 17.2784H3.2C4.0816 17.2784 4.8 16.7056 4.8 16ZM16 4.8C16.7056 4.8 17.2784 4.0848 17.2784 3.2V1.6C17.2784 0.7152 16.7056 0 16 0C15.2928 0 14.7184 0.7152 14.7184 1.6V3.2C14.7184 4.0848 15.2928 4.8 16 4.8ZM16 27.2C15.2928 27.2 14.7184 27.9152 14.7184 28.8V30.4C14.7184 31.2848 15.2928 32 16 32C16.7056 32 17.2784 31.2848 17.2784 30.4V28.8C17.2784 27.9152 16.7056 27.2 16 27.2ZM27.784 6.0256C28.4096 5.4 28.5104 4.488 28.0112 3.9888C27.512 3.4896 26.5984 3.592 25.976 4.2176L24.856 5.336C24.2304 5.9616 24.1296 6.8736 24.6288 7.3728C25.128 7.872 26.0416 7.7696 26.6656 7.144L27.784 6.0256ZM5.3344 24.8528L4.2144 25.9744C3.5888 26.6 3.488 27.5088 3.9872 28.008C4.4864 28.5072 5.4 28.408 6.0224 27.7824L7.1424 26.664C7.768 26.0384 7.8688 25.1264 7.3696 24.6256C6.8704 24.1248 5.9568 24.2304 5.3344 24.8528ZM6.024 4.216C5.4 3.5904 4.4864 3.488 3.9872 3.9872C3.488 4.4864 3.5904 5.4 4.2128 6.0256L5.3328 7.144C5.9584 7.7696 6.8688 7.872 7.368 7.3728C7.8672 6.8736 7.7664 5.96 7.1424 5.336L6.024 4.216ZM24.8544 26.6656L25.9744 27.784C26.6 28.4096 27.5104 28.5088 28.0096 28.0128C28.5088 27.5136 28.408 26.6 27.7824 25.976L26.664 24.8576C26.0384 24.232 25.1264 24.1296 24.6256 24.6288C24.1248 25.128 24.2288 26.04 24.8544 26.6656Z" fill="#1A1A1A"/>
-</g>
-<defs>
-<clipPath id="clip0_655_26429">
-<rect width="32" height="32" fill="white"/>
-</clipPath>
-</defs>
-</svg>

public/icons/Menu.svg

@@ -1,10 +0,0 @@
-<svg width="34" height="32" viewBox="0 0 34 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_655_26427)">
-<path d="M5.02344 17.7998H10.124C12.8453 17.7999 15.0994 19.8877 15.0996 22.4141V27.2148C15.0993 29.7397 12.8469 31.7997 10.124 31.7998H5.02344C2.30877 31.7996 0.200441 29.7471 0.200195 27.2148V22.4141C0.200383 19.8803 2.31032 17.8 5.02344 17.7998ZM23.7236 17.7998H28.8242C31.5454 17.8 33.7996 19.8878 33.7998 22.4141V27.2148C33.7995 29.7396 31.547 31.7996 28.8242 31.7998H23.7236C21.0089 31.7997 18.9006 29.7471 18.9004 27.2148V22.4141C18.9006 19.8802 21.0104 17.7999 23.7236 17.7998ZM5.02344 20.5996C4.84358 20.5982 4.66497 20.6242 4.49316 20.6748L4.32227 20.7334C4.15513 20.8012 3.99951 20.8937 3.86035 21.0068L3.72656 21.127C3.59876 21.254 3.49123 21.3994 3.40723 21.5576L3.33203 21.7197C3.26422 21.8858 3.22137 22.0605 3.20605 22.2383L3.2002 22.4141V27.2119C3.19812 27.3901 3.22321 27.5673 3.27441 27.7373L3.33398 27.9053C3.40256 28.0702 3.49594 28.2237 3.61035 28.3604L3.73145 28.4912C3.85957 28.6163 4.00591 28.7212 4.16504 28.8027L4.32812 28.876C4.5493 28.9627 4.78568 29.0039 5.02344 28.999V29H10.124C11.1459 28.9999 12.0993 28.2308 12.0996 27.2148V22.4141C12.0994 21.4026 11.1526 20.5997 10.124 20.5996H5.02344ZM23.7236 20.5996C23.5435 20.5982 23.3645 20.624 23.1924 20.6748L23.0225 20.7334C22.7995 20.8239 22.5969 20.9578 22.4268 21.127C22.299 21.254 22.1914 21.3994 22.1074 21.5576L22.0312 21.7197C21.9635 21.8857 21.9216 22.0606 21.9062 22.2383L21.9004 22.4141V27.2119C21.8976 27.4496 21.9428 27.6855 22.0342 27.9053C22.1028 28.0702 22.1961 28.2236 22.3105 28.3604L22.4316 28.4912C22.5598 28.6163 22.7061 28.7212 22.8652 28.8027L23.0283 28.876C23.2495 28.9627 23.4859 29.0039 23.7236 28.999V29H28.8242C29.8461 28.9998 30.7995 28.2307 30.7998 27.2148V22.4141C30.7996 21.4026 29.8528 20.5998 28.8242 20.5996H23.7236ZM5.02344 0.200195H10.124C12.8454 0.200256 15.0996 2.28794 15.0996 4.81445V9.61426C15.0996 12.1393 12.847 14.2001 10.124 14.2002H5.02344C2.30861 14.2 0.200195 12.1467 0.200195 9.61426V4.81445C0.200195 2.35951 2.18068 0.3304 4.77148 0.206055L5.02344 0.200195ZM23.7236 0.200195H28.8242C31.5455 0.200356 33.7998 2.288 33.7998 4.81445V9.61426C33.7998 12.1392 31.5471 14.2 28.8242 14.2002H23.7236C21.0087 14.2001 18.9004 12.1467 18.9004 9.61426V4.81445C18.9004 2.28045 21.0103 0.200335 23.7236 0.200195ZM5.02344 3C4.84364 2.99859 4.66492 3.02365 4.49316 3.07422L4.32227 3.13379C4.1551 3.20166 3.99952 3.29404 3.86035 3.40723L3.72656 3.52734C3.59894 3.65424 3.49116 3.79904 3.40723 3.95703L3.33203 4.11914C3.26414 4.28535 3.22135 4.46066 3.20605 4.63867L3.2002 4.81445V9.6123C3.19814 9.79051 3.22316 9.96761 3.27441 10.1377L3.33398 10.3057C3.4025 10.4703 3.49611 10.6232 3.61035 10.7598L3.73145 10.8906C3.85952 11.0157 4.00599 11.1206 4.16504 11.2021L4.32812 11.2764C4.54926 11.3631 4.78573 11.4043 5.02344 11.3994V11.4004H10.124C11.1461 11.4003 12.0996 10.6304 12.0996 9.61426V4.81445C12.0996 3.80279 11.1528 3.00006 10.124 3H5.02344ZM23.7236 3C23.5435 2.99857 23.3644 3.02349 23.1924 3.07422L23.0225 3.13379C22.8553 3.20165 22.6997 3.29404 22.5605 3.40723L22.4268 3.52734C22.2991 3.65425 22.1914 3.79903 22.1074 3.95703L22.0312 4.11914C21.9634 4.28534 21.9215 4.46067 21.9062 4.63867L21.9004 4.81445V9.6123C21.8977 9.84994 21.9428 10.086 22.0342 10.3057C22.1255 10.5252 22.261 10.724 22.4316 10.8906C22.5598 11.0157 22.7061 11.1206 22.8652 11.2021L23.0283 11.2764C23.2495 11.3631 23.4859 11.4043 23.7236 11.3994V11.4004H28.8242C29.8462 11.4002 30.7998 10.6303 30.7998 9.61426V4.81445C30.7998 3.80285 29.8529 3.00016 28.8242 3H23.7236Z" fill="#1A1A1A" stroke="#FFFEFB" stroke-width="0.4"/>
-</g>
-<defs>
-<clipPath id="clip0_655_26427">
-<rect width="34" height="32" fill="white"/>
-</clipPath>
-</defs>
-</svg>

public/icons/Moon.svg

@@ -1,3 +0,0 @@
-<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M29.7777 17.8064C29.5829 17.6469 29.3469 17.5448 29.0965 17.5117C28.8461 17.4787 28.5913 17.5159 28.3612 17.6193C26.9347 18.2661 25.3838 18.599 23.815 18.5951C20.9131 18.5916 18.1303 17.4515 16.0733 15.4232C14.0163 13.395 12.8519 10.6432 12.8341 7.7678C12.8403 6.86664 12.9535 5.96933 13.1714 5.0944C13.2176 4.8612 13.2003 4.62 13.1211 4.39565C13.042 4.1713 12.9039 3.97191 12.7211 3.81803C12.5383 3.66415 12.3175 3.56134 12.0812 3.52019C11.845 3.47904 11.602 3.50104 11.3772 3.58393C9.26238 4.52618 7.42401 5.98566 6.03479 7.82526C4.64556 9.66486 3.75108 11.8242 3.43537 14.1004C3.11966 16.3766 3.39309 18.695 4.22996 20.8377C5.06684 22.9805 6.4397 24.8773 8.21956 26.3499C9.99943 27.8225 12.1279 28.8227 14.405 29.2564C16.682 29.69 19.033 29.543 21.237 28.8292C23.441 28.1153 25.4257 26.858 27.0046 25.1753C28.5836 23.4927 29.7049 21.44 30.2633 19.21C30.3313 18.9546 30.3215 18.6851 30.2351 18.4353C30.1486 18.1855 29.9895 17.9667 29.7777 17.8064ZM16.9621 26.749C14.6981 26.7331 12.4944 26.0243 10.6528 24.7195C8.81108 23.4147 7.42144 21.5777 6.67412 19.4601C5.92679 17.3425 5.85831 15.0477 6.47805 12.89C7.09779 10.7324 8.37545 8.81724 10.1361 7.40689V7.7678C10.1397 11.3615 11.582 14.807 14.1465 17.3481C16.711 19.8892 20.1883 21.3184 23.815 21.3219C24.7673 21.3254 25.7171 21.2268 26.648 21.0279C25.717 22.773 24.3229 24.2331 22.616 25.2507C20.9091 26.2683 18.9541 26.8049 16.9621 26.8024V26.749Z" fill="#FFFEFB"/>
-</svg>

public/logo-dark.svg

@@ -0,0 +1,14 @@
+<svg width="95" height="48" viewBox="0 0 95 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.3 35L4.57999 39.6917L6.70002 35H9L5.60002 42.1549V48H3.46V42.1155L0 35H2.3Z" fill="#FFFEFB"/>
+<path d="M24 41.5001C24 43.2642 23.2178 45.0099 21.8954 46.2542C20.6848 47.4057 19.1389 48 17.3696 48C13.7937 48 11 45.1584 11 41.463C11 39.8657 11.6705 38.2131 12.8439 36.95C13.9799 35.7243 15.6748 35 17.4441 35C21.0387 35 24 37.9344 24 41.5001ZM13.1605 41.5001C13.1605 42.9672 13.6447 44.1 14.6318 44.9542C15.4327 45.6599 16.4756 46.05 17.4814 46.05C19.9399 46.05 21.8209 44.0813 21.8209 41.5371C21.8209 38.9928 19.9212 36.95 17.5 36.95C15.0788 36.95 13.1605 38.9184 13.1605 41.5001Z" fill="#FFFEFB"/>
+<path d="M28.0385 35V43.4813C28.0385 44.3623 28.0962 44.7645 28.2693 45.0899C28.5769 45.7214 29.1923 46.0661 29.9615 46.0661C30.8077 46.0661 31.4423 45.6639 31.7308 44.9364C31.9231 44.4579 31.9423 44.2474 31.9423 43.0029V35H34V43.2516C34 44.5154 33.9038 45.1855 33.6154 45.7788C32.9807 47.1576 31.6153 48 30.0193 48C28.4231 48 27 47.1001 26.3654 45.6832C26.077 45.0706 26 44.4961 26 43.2134V35H28.0385Z" fill="#FFFEFB"/>
+<path d="M38.6855 35C39.8134 35 40.6011 35.1747 41.2278 35.5627C42.3197 36.2224 42.9465 37.4062 42.9465 38.803C42.9465 40.6269 41.9261 42.0625 40.2072 42.7224L43 46.8552L41.4426 48L37.9335 42.7998V47.8836H36V35H38.6855ZM38.6855 40.918C39.33 40.918 39.5269 40.8985 39.7954 40.7821C40.4757 40.491 40.8875 39.7341 40.8875 38.7835C40.8875 37.6 40.1714 36.9015 38.954 36.9015H37.9514V40.8985H38.6855V40.918Z" fill="#FFFEFB"/>
+<path d="M61 40.6995V46.4749C59.6786 47.4852 58.2016 48 56.608 48C52.915 48 50 45.1215 50 41.4618C50 37.8021 52.8764 35 56.5495 35C57.7352 35 58.9981 35.3241 59.9507 35.8578L59.5425 37.8593C58.7069 37.3446 57.3851 36.9824 56.3358 36.9824C54.0618 36.9824 52.2736 39.06 52.2736 41.6142C52.2736 44.1683 54.1394 46.151 56.5495 46.151C57.5211 46.151 58.4928 45.903 58.9596 45.5218V42.5485H55.772L56.1802 40.6995H61Z" fill="#FFFEFB"/>
+<path d="M76 41.5001C76 43.2642 75.2175 45.0099 73.8952 46.2542C72.6849 47.4057 71.1391 48 69.3694 48C65.7939 48 63 45.1584 63 41.463C63 39.8657 63.6707 38.2131 64.844 36.95C65.9799 35.7243 67.6749 35 69.4445 35C73.0387 35 76 37.9344 76 41.5001ZM65.1605 41.5001C65.1605 42.9672 65.6448 44.1 66.632 44.9542C67.4327 45.6599 68.476 46.05 69.4815 46.05C71.9398 46.05 73.8208 44.0813 73.8208 41.5371C73.8208 38.9928 71.9211 36.95 69.5002 36.95C67.0789 36.95 65.1605 38.9184 65.1605 41.5001Z" fill="#FFFEFB"/>
+<path d="M80.1695 35V46.084H84V48H78V35.0196H80.1695V35Z" fill="#FFFEFB"/>
+<path d="M88.7465 35C89.8224 35 90.6202 35.1568 91.4181 35.549C93.5711 36.5882 95 39 95 41.6076C95 44.2157 93.478 46.7056 91.1586 47.5684C90.3235 47.8823 89.5998 48 88.5979 48H86V35.0195H88.7465V35ZM88.4121 46.0391C89.08 46.0391 89.5257 45.9803 89.9896 45.8235C91.7524 45.255 92.9214 43.5294 92.9214 41.5488C92.9214 39.4119 91.5852 37.6077 89.6738 37.098C89.2286 36.9804 88.9136 36.9412 88.2636 36.9412H87.9855L87.9669 46.0391H88.4121Z" fill="#FFFEFB"/>
+<path d="M60 0H53V25H60V0Z" fill="#008567"/>
+<path d="M50 2H43V25H50V2Z" fill="#D3E0DE"/>
+<path d="M40 5H33V25H40V5Z" fill="#E8E7E0"/>
+<path d="M76 29H19V30H76V29Z" fill="#FFFEFB"/>
+</svg>

public/logo-footer-dark.svg

@@ -0,0 +1,10 @@
+<svg width="596" height="94" viewBox="0 0 596 94" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2667 1.5L24.4266 27.124L35.7334 1.5H48L29.8668 40.5766V72.5H18.4533V40.3615L0 1.5H12.2667Z" fill="#FFFEFB"/>
+<path d="M142 37.0003C142 47.0421 137.547 56.9797 130.02 64.0624C123.129 70.6173 114.329 74 104.258 74C83.9024 74 68 57.8248 68 36.7896C68 27.6972 71.8164 18.2898 78.4958 11.0999C84.9627 4.12274 94.6103 0 104.682 0C125.143 0 142 16.7038 142 37.0003ZM80.298 37.0003C80.298 45.3519 83.0546 51.8002 88.6732 56.6625C93.232 60.6797 99.1691 62.9001 104.894 62.9001C118.888 62.9001 129.596 51.6937 129.596 37.211C129.596 22.7284 118.782 11.0999 105 11.0999C91.2178 11.0999 80.298 22.3047 80.298 37.0003Z" fill="#FFFEFB"/>
+<path d="M173.212 1V47.9736C173.212 52.853 173.529 55.0802 174.481 56.8824C176.173 60.38 179.558 62.289 183.788 62.289C188.442 62.289 191.933 60.0618 193.519 56.0324C194.577 53.3825 194.683 52.2166 194.683 45.3237V1H206V46.7009C206 53.7007 205.471 57.4119 203.885 60.6981C200.394 68.3342 192.884 73 184.106 73C175.327 73 167.5 68.0161 164.01 60.1686C162.423 56.7756 162 53.5938 162 46.4896V1H173.212Z" fill="#FFFEFB"/>
+<path d="M242.113 1.5C248.88 1.5 253.607 2.45412 257.367 4.57337C263.918 8.17616 267.679 14.6413 267.679 22.2703C267.679 32.2317 261.556 40.0719 251.243 43.6763L268 66.2474L258.656 72.5L237.601 44.0987V71.8641H226V1.5H242.113ZM242.113 33.8216C245.98 33.8216 247.162 33.7148 248.773 33.0789C252.854 31.4891 255.325 27.3555 255.325 22.1635C255.325 15.6997 251.028 11.8852 243.724 11.8852H237.708V33.7148H242.113V33.8216Z" fill="#FFFEFB"/>
+<path d="M378 32.5663V64.5535C370.792 70.149 362.736 73 354.043 73C333.9 73 318 57.0573 318 36.7884C318 16.5196 333.69 1 353.724 1C360.192 1 367.081 2.79497 372.277 5.7509L370.05 16.8363C365.492 13.9854 358.282 11.9795 352.559 11.9795C340.155 11.9795 330.401 23.4863 330.401 37.6324C330.401 51.7785 340.578 62.7592 353.724 62.7592C359.024 62.7592 364.324 61.3858 366.87 59.2747V42.8071H349.483L351.71 32.5663H378Z" fill="#9A7F62"/>
+<path d="M472 37.0003C472 47.0421 467.546 56.9797 460.019 64.0624C453.129 70.6173 444.33 74 434.257 74C413.904 74 398 57.8248 398 36.7896C398 27.6972 401.818 18.2898 408.497 11.0999C414.963 4.12274 424.611 0 434.684 0C455.144 0 472 16.7038 472 37.0003ZM410.298 37.0003C410.298 45.3519 413.055 51.8002 418.674 56.6625C423.232 60.6797 429.171 62.9001 434.895 62.9001C448.888 62.9001 459.595 51.6937 459.595 37.211C459.595 22.7284 448.782 11.0999 435.001 11.0999C421.218 11.0999 410.298 22.3047 410.298 37.0003Z" fill="#9A7F62"/>
+<path d="M503.571 1.5V62.0358H524V72.5H492V1.60709H503.571V1.5Z" fill="#9A7F62"/>
+<path d="M559.868 1.5C566.085 1.5 570.695 2.35658 575.304 4.49821C587.744 10.1738 596 23.3463 596 37.5879C596 51.8318 587.206 65.4308 573.805 70.1428C568.98 71.8574 564.799 72.5 559.01 72.5H544V1.60673H559.868V1.5ZM557.937 61.7907C561.796 61.7907 564.371 61.4693 567.051 60.6132C577.236 57.5078 583.99 48.0838 583.99 37.2666C583.99 25.5956 576.27 15.7423 565.227 12.9583C562.654 12.3158 560.834 12.1017 557.078 12.1017H555.472L555.364 61.7907H557.937Z" fill="#9A7F62"/>
+</svg>

public/logo-footer.svg

@@ -0,0 +1,10 @@
+<svg width="596" height="94" viewBox="0 0 596 94" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2667 1.5L24.4266 27.124L35.7334 1.5H48L29.8668 40.5766V72.5H18.4533V40.3615L0 1.5H12.2667Z" fill="#1A1A1A"/>
+<path d="M142 37.0003C142 47.0421 137.547 56.9797 130.02 64.0624C123.129 70.6173 114.329 74 104.258 74C83.9024 74 68 57.8248 68 36.7896C68 27.6972 71.8164 18.2898 78.4958 11.0999C84.9627 4.12274 94.6103 0 104.682 0C125.143 0 142 16.7038 142 37.0003ZM80.298 37.0003C80.298 45.3519 83.0546 51.8002 88.6732 56.6625C93.232 60.6797 99.1691 62.9001 104.894 62.9001C118.888 62.9001 129.596 51.6937 129.596 37.211C129.596 22.7284 118.782 11.0999 105 11.0999C91.2178 11.0999 80.298 22.3047 80.298 37.0003Z" fill="#1A1A1A"/>
+<path d="M173.212 1V47.9736C173.212 52.853 173.529 55.0802 174.481 56.8824C176.173 60.38 179.558 62.289 183.788 62.289C188.442 62.289 191.933 60.0618 193.519 56.0324C194.577 53.3825 194.683 52.2166 194.683 45.3237V1H206V46.7009C206 53.7007 205.471 57.4119 203.885 60.6981C200.394 68.3342 192.884 73 184.106 73C175.327 73 167.5 68.0161 164.01 60.1686C162.423 56.7756 162 53.5938 162 46.4896V1H173.212Z" fill="#1A1A1A"/>
+<path d="M242.113 1.5C248.88 1.5 253.607 2.45412 257.367 4.57337C263.918 8.17616 267.679 14.6413 267.679 22.2703C267.679 32.2317 261.556 40.0719 251.243 43.6763L268 66.2474L258.656 72.5L237.601 44.0987V71.8641H226V1.5H242.113ZM242.113 33.8216C245.98 33.8216 247.162 33.7148 248.773 33.0789C252.854 31.4891 255.325 27.3555 255.325 22.1635C255.325 15.6997 251.028 11.8852 243.724 11.8852H237.708V33.7148H242.113V33.8216Z" fill="#1A1A1A"/>
+<path d="M378 32.5663V64.5535C370.792 70.149 362.736 73 354.043 73C333.9 73 318 57.0573 318 36.7884C318 16.5196 333.69 1 353.724 1C360.192 1 367.081 2.79497 372.277 5.7509L370.05 16.8363C365.492 13.9854 358.282 11.9795 352.559 11.9795C340.155 11.9795 330.401 23.4863 330.401 37.6324C330.401 51.7785 340.578 62.7592 353.724 62.7592C359.024 62.7592 364.324 61.3858 366.87 59.2747V42.8071H349.483L351.71 32.5663H378Z" fill="#9A7F62"/>
+<path d="M472 37.0003C472 47.0421 467.546 56.9797 460.019 64.0624C453.129 70.6173 444.33 74 434.257 74C413.904 74 398 57.8248 398 36.7896C398 27.6972 401.818 18.2898 408.497 11.0999C414.963 4.12274 424.611 0 434.684 0C455.144 0 472 16.7038 472 37.0003ZM410.298 37.0003C410.298 45.3519 413.055 51.8002 418.674 56.6625C423.232 60.6797 429.171 62.9001 434.895 62.9001C448.888 62.9001 459.595 51.6937 459.595 37.211C459.595 22.7284 448.782 11.0999 435.001 11.0999C421.218 11.0999 410.298 22.3047 410.298 37.0003Z" fill="#9A7F62"/>
+<path d="M503.571 1.5V62.0358H524V72.5H492V1.60709H503.571V1.5Z" fill="#9A7F62"/>
+<path d="M559.868 1.5C566.085 1.5 570.695 2.35658 575.304 4.49821C587.744 10.1738 596 23.3463 596 37.5879C596 51.8318 587.206 65.4308 573.805 70.1428C568.98 71.8574 564.799 72.5 559.01 72.5H544V1.60673H559.868V1.5ZM557.937 61.7907C561.796 61.7907 564.371 61.4693 567.051 60.6132C577.236 57.5078 583.99 48.0838 583.99 37.2666C583.99 25.5956 576.27 15.7423 565.227 12.9583C562.654 12.3158 560.834 12.1017 557.078 12.1017H555.472L555.364 61.7907H557.937Z" fill="#9A7F62"/>
+</svg>

public/logo.svg

@@ -0,0 +1,14 @@
+<svg width="95" height="48" viewBox="0 0 95 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.3 35L4.57999 39.6917L6.70002 35H9L5.60002 42.1549V48H3.46V42.1155L0 35H2.3Z" fill="#1A1A1A"/>
+<path d="M24 41.5001C24 43.2642 23.2178 45.0099 21.8954 46.2542C20.6848 47.4057 19.1389 48 17.3696 48C13.7937 48 11 45.1584 11 41.463C11 39.8657 11.6705 38.2131 12.8439 36.95C13.9799 35.7243 15.6748 35 17.4441 35C21.0387 35 24 37.9344 24 41.5001ZM13.1605 41.5001C13.1605 42.9672 13.6447 44.1 14.6318 44.9542C15.4327 45.6599 16.4756 46.05 17.4814 46.05C19.9399 46.05 21.8209 44.0813 21.8209 41.5371C21.8209 38.9928 19.9212 36.95 17.5 36.95C15.0788 36.95 13.1605 38.9184 13.1605 41.5001Z" fill="#1A1A1A"/>
+<path d="M28.0385 35V43.4813C28.0385 44.3623 28.0962 44.7645 28.2693 45.0899C28.5769 45.7214 29.1923 46.0661 29.9615 46.0661C30.8077 46.0661 31.4423 45.6639 31.7308 44.9364C31.9231 44.4579 31.9423 44.2474 31.9423 43.0029V35H34V43.2516C34 44.5154 33.9038 45.1855 33.6154 45.7788C32.9807 47.1576 31.6153 48 30.0193 48C28.4231 48 27 47.1001 26.3654 45.6832C26.077 45.0706 26 44.4961 26 43.2134V35H28.0385Z" fill="#1A1A1A"/>
+<path d="M38.6855 35C39.8134 35 40.6011 35.1747 41.2278 35.5627C42.3197 36.2224 42.9465 37.4062 42.9465 38.803C42.9465 40.6269 41.9261 42.0625 40.2072 42.7224L43 46.8552L41.4426 48L37.9335 42.7998V47.8836H36V35H38.6855ZM38.6855 40.918C39.33 40.918 39.5269 40.8985 39.7954 40.7821C40.4757 40.491 40.8875 39.7341 40.8875 38.7835C40.8875 37.6 40.1714 36.9015 38.954 36.9015H37.9514V40.8985H38.6855V40.918Z" fill="#1A1A1A"/>
+<path d="M61 40.6995V46.4749C59.6786 47.4852 58.2016 48 56.608 48C52.915 48 50 45.1215 50 41.4618C50 37.8021 52.8764 35 56.5495 35C57.7352 35 58.9981 35.3241 59.9507 35.8578L59.5425 37.8593C58.7069 37.3446 57.3851 36.9824 56.3358 36.9824C54.0618 36.9824 52.2736 39.06 52.2736 41.6142C52.2736 44.1683 54.1394 46.151 56.5495 46.151C57.5211 46.151 58.4928 45.903 58.9596 45.5218V42.5485H55.772L56.1802 40.6995H61Z" fill="#1A1A1A"/>
+<path d="M76 41.5001C76 43.2642 75.2175 45.0099 73.8952 46.2542C72.6849 47.4057 71.1391 48 69.3694 48C65.7939 48 63 45.1584 63 41.463C63 39.8657 63.6707 38.2131 64.844 36.95C65.9799 35.7243 67.6749 35 69.4445 35C73.0387 35 76 37.9344 76 41.5001ZM65.1605 41.5001C65.1605 42.9672 65.6448 44.1 66.632 44.9542C67.4327 45.6599 68.476 46.05 69.4815 46.05C71.9398 46.05 73.8208 44.0813 73.8208 41.5371C73.8208 38.9928 71.9211 36.95 69.5002 36.95C67.0789 36.95 65.1605 38.9184 65.1605 41.5001Z" fill="#1A1A1A"/>
+<path d="M80.1695 35V46.084H84V48H78V35.0196H80.1695V35Z" fill="#1A1A1A"/>
+<path d="M88.7465 35C89.8224 35 90.6202 35.1568 91.4181 35.549C93.5711 36.5882 95 39 95 41.6076C95 44.2157 93.478 46.7056 91.1586 47.5684C90.3235 47.8823 89.5998 48 88.5979 48H86V35.0195H88.7465V35ZM88.4121 46.0391C89.08 46.0391 89.5257 45.9803 89.9896 45.8235C91.7524 45.255 92.9214 43.5294 92.9214 41.5488C92.9214 39.4119 91.5852 37.6077 89.6738 37.098C89.2286 36.9804 88.9136 36.9412 88.2636 36.9412H87.9855L87.9669 46.0391H88.4121Z" fill="#1A1A1A"/>
+<path d="M60 0H53V25H60V0Z" fill="#004F3D"/>
+<path d="M50 2H43V25H50V2Z" fill="#D3E0DE"/>
+<path d="M40 5H33V25H40V5Z" fill="#E8E7E0"/>
+<path d="M76 29H19V30H76V29Z" fill="#1A1A1A"/>
+</svg>

public/photo.svg

@@ -0,0 +1,3 @@
+<svg width="76" height="53" viewBox="0 0 76 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M76 49.8V2C76 0.9 75.1 0 74 0H2C0.9 0 0 0.9 0 2V50C0 52.5 3.3 52 2 52H74C77 52 75.6 47.4 76 49.8ZM6 48L28 19.3L46.4 43.4L49.9 48H6ZM55 48L50.5 42.2L58 32.4L69.9 48H55ZM72 44L59.6 27.8C58.8 26.7 57.2 26.7 56.4 27.8L48 38.8L29.6 14.8C28.8 13.7 27.2 13.7 26.4 14.8L4 44.1V4H72V44ZM49 10C45.1 10 42 13.1 42 17C42 20.9 45.1 24 49 24C52.9 24 56 20.9 56 17C56 13.1 52.8 10 49 10ZM49 20C47.4 20 46 18.7 46 17C46 15.3 47.3 14 49 14C50.7 14 52 15.3 52 17C52 18.7 50.6 20 49 20Z" fill="#525252"/>
+</svg>

public/robots.txt

@@ -1,2 +0,0 @@
-User-Agent: *
-Disallow:

stores/checkoutStore.ts

@@ -0,0 +1,558 @@
+import type { GenericResponse, GenericResponseItems, UserCart } from "~/types";
+import type {
+  Address,
+  AddressesList,
+  CheckoutOrder,
+  Payment,
+  UserAddressOfficial,
+} from "~/types/checkout";
+import { validation } from "../utils/validation";
+import { REGEX_PHONE } from "../utils/regex";
+import type { CartProduct } from "~/types/product";
+
+export const useCheckoutStore = defineStore("checkoutStore", () => {
+  const { $toast } = useNuxtApp();
+  const menuStore = useMenuStore();
+  const selectedIso = ref(menuStore.selectedCountry);
+
+  const vLegal = ref(false);
+  const vTerms = ref(false);
+  const vNote = ref("");
+  const legalValidation = ref(false);
+  const termsValidation = ref(false);
+
+  // get address list
+  const addressesList = ref<AddressesList[]>();
+  const activeAddress = ref<AddressesList | null>();
+  async function getAddressList() {
+    try {
+      const { data } = await useMyFetch<GenericResponse<AddressesList[]>>(
+        `/api/restricted/user/addresses`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+          onErrorOccured: async (_, status) => {
+            throw createError({
+              statusCode: status,
+              statusMessage: `HTTP error: ${status}`,
+            });
+          },
+        }
+      );
+
+      addressesList.value = data;
+      activeAddress.value = addressesList.value[0];
+    } catch (error) {
+      console.error("restrictedAddress error:", error);
+    }
+  }
+
+  // get user data
+  const userName = ref("");
+  const lastName = ref("");
+  const address = ref("");
+  const postCode = ref("");
+  const city = ref("");
+  const country = ref("");
+  const phoneNumber = ref("");
+  const accountPhoneNumber = ref("");
+  async function getUserData() {
+    try {
+      const { data } = await useMyFetch<GenericResponse<UserAddressOfficial>>(
+        `/api/restricted/user/address/official`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+          onErrorOccured: async (_, status) => {
+            throw createError({
+              statusCode: status,
+              statusMessage: `HTTP error: ${status}`,
+            });
+          },
+        }
+      );
+
+      userName.value = data.address.name;
+      lastName.value = data.address.surname;
+      address.value = data.address.street;
+      postCode.value = data.address.postcode;
+      city.value = data.address.city;
+      country.value = data.address.country.country_lang[0].name;
+    } catch (error) {
+      console.error("getUserData error:", error);
+    }
+  }
+
+  // upload new address
+  const vNewAddressName = ref("");
+  const vNewAddressSurname = ref("");
+  const vNewAddressAddress = ref("");
+  const vNewAddressCode = ref("");
+  const vNewAddressCity = ref("");
+  const vNewAddressCountry = ref();
+  const vUseAccountPhoneNumber = ref(false);
+  const isOpen = ref<boolean>(false);
+  async function uploadAddress() {
+    try {
+      const res = await useMyFetch<GenericResponse<object>>(
+        `/api/restricted/user/address`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            address: {
+              city: vNewAddressCity.value,
+              country_iso: vNewAddressCountry.value.iso_code,
+              name: vNewAddressName.value,
+              postcode: vNewAddressCode.value,
+              street: vNewAddressAddress.value,
+              surname: vNewAddressSurname.value,
+            },
+          }),
+          onErrorOccured: async (_, status) => {
+            throw createError({
+              statusCode: status,
+              statusMessage: `HTTP error: ${status}`,
+            });
+          },
+        }
+      );
+
+      if (res.status === 200) {
+        $toast.success("Address successfully added", {
+          autoClose: 5000,
+          dangerouslyHTMLString: true,
+        });
+        isOpen.value = false;
+        getAddressList();
+      } else {
+        $toast.error("Failed to add address. Please try again.", {
+          autoClose: 5000,
+          dangerouslyHTMLString: true,
+        });
+      }
+    } catch (error) {
+      console.error("uploadAddress error:", error);
+    }
+  }
+
+  const currentPrefix = ref<string | number>(
+    menuStore.selectedCountry.call_prefix
+  );
+  const changePrefix = (item: string) => {
+    currentPrefix.value = item;
+  };
+  const phoneValidation = ref<boolean | null>(null);
+
+  // send checkout form
+  const userStore = useUserStore();
+  async function sendForm() {
+    let phoneNum = vUseAccountPhoneNumber.value
+      ? accountPhoneNumber.value
+      : `${currentPrefix.value}${phoneNumber.value}`.replaceAll(" ", "").trim();
+    // if (vUseAccountPhoneNumber.value) {
+    //   phoneNum = phoneNumber.value;
+    // }
+
+    phoneValidation.value = validation(phoneNum, 1, 49, REGEX_PHONE);
+    if (!phoneValidation.value && !vUseAccountPhoneNumber.value) {
+      return;
+    }
+
+    try {
+      const res = await useMyFetch<GenericResponse<object>>(
+        `/api/restricted/cart/checkout/delivery`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            address: {
+              city: activeAddress.value?.address.city,
+              country_iso: activeAddress.value?.address.country_iso,
+              name: activeAddress.value?.address.name,
+              postcode: activeAddress.value?.address.postcode,
+              street: activeAddress.value?.address.street,
+              surname: activeAddress.value?.address.surname,
+            },
+            phone_number: phoneNum,
+            email: userStore.fullUserData?.email,
+          }),
+          onErrorOccured: async (_, status) => {
+            throw createError({
+              statusCode: status,
+              statusMessage: `HTTP error: ${status}`,
+            });
+          },
+        }
+      );
+
+      if (res.status === 200) {
+        $toast.success("Form successfully sent", {
+          autoClose: 5000,
+          dangerouslyHTMLString: true,
+        });
+        menuStore.navigateToItem(
+          menuStore.menuItems?.find((item) => item.id === 13)
+        );
+      } else {
+        $toast.error("Failed to send form. Please try again.", {
+          autoClose: 5000,
+          dangerouslyHTMLString: true,
+        });
+      }
+    } catch (error) {
+      console.error("uploadAddress error:", error);
+    }
+  }
+
+  const changeActive = (item: any) => {
+    activeAddress.value = item;
+  };
+
+  // get checkout
+  async function getCheckout() {
+    try {
+      const res = await useMyFetch<GenericResponse<object>>(
+        `/api/restricted/cart/checkout`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          onErrorOccured: async (_, status) => {
+            throw createError({
+              statusCode: status,
+              statusMessage: `HTTP error: ${status}`,
+            });
+          },
+        }
+      );
+    } catch (error) {
+      console.error("uploadAddress error:", error);
+    }
+  }
+
+  // get user cart
+  const products = ref<CartProduct[]>();
+  const fullPrice = ref();
+  const fullProductsPrice = ref();
+  async function getUserCart() {
+    try {
+      const { data } = await useMyFetch<GenericResponse<UserCart>>(
+        `/api/public/user/cart`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+          onErrorOccured: async (_, status) => {
+            throw createError({
+              statusCode: status,
+              statusMessage: `HTTP error: ${status}`,
+            });
+          },
+        }
+      );
+
+      products.value = data.cart_items;
+      fullPrice.value = data.total_value;
+      fullProductsPrice.value = data.total_value;
+      fullPrice.value = Number(fullPrice.value) + Number(shippingPrice.value);
+    } catch (error) {
+      console.error("getUserCart error:", error);
+    }
+  }
+
+  // get delivery options
+  const deliveryOption = ref();
+  const currentDelivery = ref();
+  const shippingPrice = ref();
+  async function getDeliveryOptions() {
+    try {
+      const res = await useMyFetch<
+        GenericResponseItems<object>
+        // {
+        //   items: [
+        //     {
+        //       country_iso: string;
+        //       country_name: string;
+        //       delivery_supplier_id: number;
+        //       delivery_supplier_name: string;
+        //       id: number;
+        //       shippment_price: string;
+        //     }
+        //   ];
+        // }
+      >(`/api/restricted/cart/checkout/delivery-options`, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+        onErrorOccured: async (_, status) => {
+          throw createError({
+            statusCode: status,
+            statusMessage: `HTTP error: ${status}`,
+          });
+        },
+      });
+
+      const data = {
+        items: [
+          {
+            id: 31,
+            shippment_price: "2",
+            delivery_supplier_id: 4,
+            delivery_supplier_name: "Personal collection",
+            country_iso: "pl",
+            country_name: "Poland",
+          },
+          {
+            id: 34,
+            shippment_price: "20",
+            delivery_supplier_id: 1,
+            delivery_supplier_name: "Ceska Posta",
+            country_iso: "pl",
+            country_name: "Poland",
+          },
+        ],
+        items_count: 2,
+      };
+
+      deliveryOption.value = data.items;
+      currentDelivery.value = data.items[0];
+      shippingPrice.value = data.items[0].shippment_price;
+      fullPrice.value = Number(fullPrice.value) + Number(shippingPrice.value);
+    } catch (error) {
+      console.error("getUserCart error:", error);
+    }
+  }
+
+  const setCurrentDelivery = (item: any) => {
+    shippingPrice.value = item.shippment_price;
+    currentDelivery.value = item;
+    fullPrice.value = Number(fullPrice.value) + Number(shippingPrice.value);
+  };
+
+  const defaultAddress = ref();
+  async function getDefAddress() {
+    try {
+      const { data } = await useMyFetch<
+        GenericResponse<{
+          addresses: [
+            {
+              is_default: string;
+            }
+          ];
+        }>
+      >(`/api/public/user`, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+        onErrorOccured: async (_, status) => {
+          throw createError({
+            statusCode: status,
+            statusMessage: `HTTP error: ${status}`,
+          });
+        },
+      });
+
+      defaultAddress.value = data.addresses.find(
+        (el: any) => el.is_default === true
+      );
+    } catch (error) {
+      console.error("getUserCart error:", error);
+    }
+  }
+
+  // get bank data
+  const paymentMethods = ref([] as Payment[]);
+  const fullAddress = ref<Address>();
+  const currentPayment = ref<Payment | null>(null);
+  async function getBankAccount() {
+    try {
+      const { data } = await useMyFetch<GenericResponse<Payment[]>>(
+        `/api/restricted/suitable-bank-accounts/${menuStore.selectedCurrency.iso_code}/${fullAddress.value?.country_iso}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+          onErrorOccured: async (_, status) => {
+            throw createError({
+              statusCode: status,
+              statusMessage: `HTTP error: ${status}`,
+            });
+          },
+        }
+      );
+
+      paymentMethods.value = data;
+      currentPayment.value = data[0];
+    } catch (error) {
+      console.error("getUserCart error:", error);
+    }
+  }
+
+  // get order (summary)
+  async function getOrder() {
+    try {
+      const { data } = await useMyFetch<GenericResponse<CheckoutOrder>>(
+        `/api/restricted/cart/checkout/order`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+          onErrorOccured: async (_, status) => {
+            throw createError({
+              statusCode: status,
+              statusMessage: `HTTP error: ${status}`,
+            });
+          },
+        }
+      );
+
+      fullAddress.value = data.delivery_details.address;
+      console.log(fullAddress.value);
+    } catch (error) {
+      console.error("getOrder error:", error);
+    }
+  }
+
+  async function setNewAddress(index: number) {
+    currentPayment.value = paymentMethods.value.find(
+      (item, index) => index === index
+    );
+  }
+
+  // send summary form
+  async function sendSummaryForm() {
+    vLegal.value
+      ? (legalValidation.value = false)
+      : (legalValidation.value = true);
+    vTerms.value
+      ? (termsValidation.value = false)
+      : (termsValidation.value = true);
+    // if (vTerms.value && vLegal.value) {
+    //   isModalOpen.value = true;
+    // }
+
+    try {
+      const res = await useMyFetch<GenericResponse<object>>(
+        `/api/restricted/cart/checkout/delivery`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            accept_general_conditions: true,
+            accept_long_purchase: true,
+            address: fullAddress.value,
+            delivery_option_id: currentDelivery.value.id,
+            note: vNote.value,
+          }),
+          onErrorOccured: async (_, status) => {
+            throw createError({
+              statusCode: status,
+              statusMessage: `HTTP error: ${status}`,
+            });
+          },
+        }
+      );
+
+      putCheckoutBankAccount();
+    } catch (error) {
+      console.error("uploadAddress error:", error);
+    }
+  }
+
+  // put checkout bank-account
+  async function putCheckoutBankAccount() {
+    try {
+      const res = await useMyFetch<GenericResponse<object>>(
+        `restricted/cart/checkout/bank-account/${currentPayment.value?.id}`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            accept_general_conditions: true,
+            accept_long_purchase: true,
+            address: fullAddress.value,
+            delivery_option_id: currentDelivery.value.id,
+            note: vNote.value,
+          }),
+          onErrorOccured: async (_, status) => {
+            throw createError({
+              statusCode: status,
+              statusMessage: `HTTP error: ${status}`,
+            });
+          },
+        }
+      );
+    } catch (error) {
+      console.error("uploadAddress error:", error);
+    }
+  }
+
+  return {
+    addressesList,
+    activeAddress,
+    isOpen,
+    selectedIso,
+    phoneValidation,
+
+    userName,
+    lastName,
+    address,
+    postCode,
+    city,
+    country,
+    phoneNumber,
+    accountPhoneNumber,
+    vUseAccountPhoneNumber,
+
+    currentPrefix,
+    vNewAddressName,
+    vNewAddressSurname,
+    vNewAddressAddress,
+    vNewAddressCode,
+    vNewAddressCity,
+    vNewAddressCountry,
+
+    products,
+    fullPrice,
+    fullProductsPrice,
+    deliveryOption,
+    currentDelivery,
+    shippingPrice,
+    defaultAddress,
+    paymentMethods,
+    currentPayment,
+
+    vLegal,
+    vTerms,
+    vNote,
+    legalValidation,
+    termsValidation,
+
+    changePrefix,
+    getCheckout,
+    getAddressList,
+    getUserData,
+    changeActive,
+    uploadAddress,
+    sendForm,
+    getUserCart,
+    getDeliveryOptions,
+    getDefAddress,
+    setCurrentDelivery,
+    getBankAccount,
+    getOrder,
+    setNewAddress,
+  };
+});

stores/menuStore.ts

@@ -0,0 +1,258 @@
+import type {
+  Country,
+  Currency,
+  FrontMenu,
+  GenericResponse,
+  GenericResponseItems,
+  Language,
+  UIFrontMenu,
+} from "~/types";
+import { useStore } from "./store";
+import { useMyFetch } from "#imports";
+// import { useSession } from "~/plugins/01_i18n";
+
+function buildTreeRecursive(
+  data: (FrontMenu | UIFrontMenu)[],
+  parentId: number
+): UIFrontMenu[] {
+  const children = data.filter(
+    (item): item is UIFrontMenu =>
+      item.id_parent === parentId && !item.is_default
+  );
+
+  return children.map((item) => ({
+    ...item,
+    children: buildTreeRecursive(data, item.id),
+  }));
+}
+
+export const useMenuStore = defineStore("menuStore", () => {
+  const store = useStore();
+  const { $i18n } = useNuxtApp();
+  // const session = useSession();
+  const { $session } = useNuxtApp();
+  const router = useRouter();
+  const route = useRoute();
+
+  const openMenu = ref(false);
+  const openDropDown = ref(false);
+
+  const defaultMenu = ref();
+
+  const menu = ref([] as UIFrontMenu[]);
+  const menuItems = ref([] as FrontMenu[]);
+
+  // curr/country
+  const selectedCountry = ref({} as Country);
+  const selectedPhoneCountry = ref({} as Country);
+  const selectedCurrency = ref({} as Currency);
+  const selectedLanguage = ref({} as Language);
+
+  const countries = ref([] as Country[]);
+  const currencies = ref([] as Currency[]);
+  const languages = ref([] as Language[]);
+
+  const getLocales = async () => {
+    const { data: countriesList } = await useMyFetch<
+      GenericResponse<Country[]>
+    >(`/api/public/country/list`);
+    countries.value = countriesList;
+    selectedCountry.value = countriesList.find(
+      (country) => country.iso_code === $session.currentCountryIso.value
+    ) as Country;
+    selectedPhoneCountry.value = countriesList.find(
+      (country) => country.iso_code === $session.currentCountryIso.value
+    ) as Country;
+
+    const { data: currenciesList } = await useMyFetch<
+      GenericResponseItems<Currency[]>
+    >(`/api/public/currencies`);
+    currencies.value = currenciesList.items;
+    selectedCurrency.value = currenciesList.items.find(
+      (currency) => currency.iso_code === $session.currentCurrencyIso.value
+    ) as Currency;
+
+    const { data: languagesList } = await useMyFetch<
+      GenericResponseItems<Language[]>
+    >(`/api/public/languages`);
+    languages.value = languagesList.items;
+    selectedLanguage.value = languagesList.items.find(
+      (language) => language.iso_code === $session.currentLanguageIso.value
+    ) as Language;
+  };
+
+  const loadMenu = async () => {
+    try {
+      const { data } = await useMyFetch<GenericResponse<FrontMenu[]>>(
+        `/api/public/front/menu`,
+        {
+          onErrorOccured: (err, status) => {
+            console.log(err, status);
+          },
+        }
+      );
+
+      menuItems.value = data;
+
+      const root = data.find((item) => item.is_root) as UIFrontMenu;
+      defaultMenu.value = data.find((item) => item.is_default);
+      if (root) {
+        menu.value = buildTreeRecursive(data, root.id);
+      } else {
+        console.warn("Root menu item not found");
+        menu.value = [];
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const navigateToItem = (item?: UIFrontMenu) => {
+    if (item) {
+      router.push({
+        params: { slug: item.front_menu_lang[0].link_rewrite, id: item.id },
+        name: `id-slug___${$i18n.locale.value}`,
+      });
+      openDropDown.value = false;
+    } else {
+      router.push({
+        params: {
+          slug: defaultMenu.value.front_menu_lang[0].link_rewrite,
+          id: defaultMenu.value.id,
+        },
+        name: `id-slug___${$i18n.locale.value}`,
+      });
+    }
+  };
+
+  function navigateToShop() {
+    navigateToItem(menuItems.value?.find((item) => item.id === 5));
+  }
+
+  const getFirstImage = (size: "l" | "m" | "s" = "m", needbaseurl: boolean) => {
+    const req = useRequestEvent();
+    const url = useRequestURL();
+    // let img = "";
+    const img: string[] = [];
+    for (const s in store.components) {
+      if (store.components[s].front_section.img.length === 0) continue;
+      img.push(
+        `/api/public/file/${store.components[s].front_section.img[0]}_${size}.webp`
+      );
+      if (img.length > 0) break;
+    }
+    if (img.length > 0) {
+      if (needbaseurl) {
+        return `${req?.headers.get("x-forwarded-proto") || url.protocol}://${
+          req?.headers.get("x-forwarded-host") ||
+          url.host ||
+          req?.headers.get("host")
+        }${img[0]}`;
+      }
+      return img[0];
+    }
+    return "";
+  };
+
+  const headMeta = computed(() => {
+    const item = menuItems.value?.find(
+      (item) => item.id.toString() === route.params.id
+    );
+
+    const meta = {
+      title: item?.front_menu_lang[0].meta_title,
+      htmlAttrs: {
+        lang: $i18n.locale.value,
+      },
+      link: [
+        // { rel: "manifest", href: "/api/manifest.json" }
+      ],
+      script:[
+        {src:"https://leiadmin.com/leitag.js?lei=894500UT83EISNNA8D04&color=dark"}
+      ],
+      meta: [
+        {
+          hid: "description",
+          name: "description",
+          content: item?.front_menu_lang[0].meta_description,
+        },
+        {
+          property: "og:title",
+          content: item?.front_menu_lang[0].meta_title,
+        },
+        {
+          property: "og:description",
+          content: item?.front_menu_lang[0].meta_description,
+        },
+        {
+          property: "og:image",
+          content: getFirstImage("m", true),
+        },
+        {
+          property: "twitter:title",
+          content: item?.front_menu_lang[0].meta_title,
+        },
+        {
+          property: "twitter:description",
+          content: item?.front_menu_lang[0].meta_description,
+        },
+        {
+          property: "twitter:image",
+          content: getFirstImage("m", true),
+        },
+      ],
+    };
+
+    const preload = getFirstImage("l", false);
+    if (preload) {
+      meta.link.push({ rel: "preload", as: "image", href: preload } as never);
+    }
+
+    return meta;
+  });
+
+  const formatPrice = (value: number): string => {
+    return value.toLocaleString(selectedLanguage.value.iso_code, {
+      minimumFractionDigits: selectedCurrency.value.precision,
+      maximumFractionDigits: selectedCurrency.value.precision,
+      currency: selectedCurrency.value.iso_code,
+      style: "currency",
+      currencyDisplay: "symbol",
+      currencySign: "accounting",
+    });
+  };
+
+  // watches
+  watch(
+    () => $session.cookieData,
+    async () => {
+      await getLocales();
+      await loadMenu();
+      await store.getMinValue();
+      await store.getCalculator();
+    },
+    { deep: true }
+  );
+
+  return {
+    menu,
+    menuItems,
+    openMenu,
+    openDropDown,
+    currencies,
+    languages,
+    countries,
+    selectedCountry,
+    selectedCurrency,
+    selectedPhoneCountry,
+    selectedLanguage,
+    defaultMenu,
+    headMeta,
+    
+    navigateToShop,
+    loadMenu,
+    navigateToItem,
+    getLocales,
+    formatPrice,
+  };
+});

stores/productStore.ts

@@ -0,0 +1,203 @@
+import { useMyFetch } from "#imports";
+import type {
+  CartItem,
+  GenericResponse,
+  GenericResponseChildren,
+  GenericResponseItems,
+  UserCart,
+} from "~/types";
+import type { Product } from "~/types/product";
+
+export const useProductStore = defineStore("productStore", () => {
+  const { $toast } = useNuxtApp();
+  const productList = ref<Product[]>();
+  const modules = ref();
+
+  async function getList(count: number, categoryId = 1) {
+    try {
+      const { data } = await useMyFetch<GenericResponseItems<[]>>(
+        `/api/public/products/category/${categoryId}?p=1&elems=${count}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+          onErrorOccured: async (_, status) => {
+            // await navigateTo("/error", { replace: true });
+            throw createError({
+              statusCode: status,
+              statusMessage: `HTTP error: ${status}`,
+            });
+          },
+        }
+      );
+
+      productList.value = data.items;
+    } catch (error) {
+      console.error("getList error:", error);
+    }
+  }
+
+  async function getModules() {
+    try {
+      const { data } = await useMyFetch<GenericResponseChildren<[]>>(
+        `/api/public/module/e_shop`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+          onErrorOccured: (_, status) => {
+            throw new Error(`HTTP error: ${status}`);
+          },
+        }
+      );
+
+      modules.value = data.children.find(
+        (item: { id: number; name: string }) =>
+          item.name === "currency_rates_bar"
+      );
+    } catch (error) {
+      console.error("getList error:", error);
+    }
+  }
+
+  async function incrementCartItem(id: number) {
+    try {
+      const res = await useMyFetch<GenericResponse<object>>(
+        `/api/public/user/cart/item/add/${id}/1`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          onErrorOccured: (_, status) => {
+            throw new Error(`HTTP error: ${status}`);
+          },
+        }
+      );
+
+      if (res.status === 200) {
+        $toast.success("Item successfully added to your cart.", {
+          autoClose: 5000,
+          dangerouslyHTMLString: true,
+        });
+        getCart();
+      } else {
+        $toast.error("Failed to add item to cart. Please try again.", {
+          autoClose: 5000,
+          dangerouslyHTMLString: true,
+        });
+      }
+    } catch (error) {
+      $toast.error("An unexpected error occurred while updating your cart.", {
+        autoClose: 5000,
+        dangerouslyHTMLString: true,
+      });
+      console.error("incrementCartItem error:", error);
+    }
+  }
+
+  async function decrementCartItem(id: number) {
+    try {
+      const res = await useMyFetch<GenericResponse<object>>(
+        `/api/public/user/cart/item/subtract/${id}/1`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          onErrorOccured: (_, status) => {
+            throw new Error(`HTTP error: ${status}`);
+          },
+        }
+      );
+
+      if (res.status === 200) {
+        $toast.success("Item successfully removed from your cart.", {
+          autoClose: 5000,
+          dangerouslyHTMLString: true,
+        });
+        getCart();
+      } else {
+        $toast.error("Failed to removed item from cart. Please try again.", {
+          autoClose: 5000,
+          dangerouslyHTMLString: true,
+        });
+      }
+    } catch (error) {
+      $toast.error("An unexpected error occurred while updating your cart.", {
+        autoClose: 5000,
+        dangerouslyHTMLString: true,
+      });
+      console.error("decrementCartItem error:", error);
+    }
+  }
+
+  async function deleteCartItem(id: number) {
+    try {
+      const res = await useMyFetch<GenericResponse<object>>(
+        `/api/public/user/cart/item/${id}`,
+        {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          onErrorOccured: (_, status) => {
+            throw new Error(`HTTP error: ${status}`);
+          },
+        }
+      );
+
+      if (res.status === 200) {
+        $toast.success("Item successfully removed from your cart.", {
+          autoClose: 5000,
+          dangerouslyHTMLString: true,
+        });
+        getCart();
+      } else {
+        $toast.error("Failed to removed item from cart. Please try again.", {
+          autoClose: 5000,
+          dangerouslyHTMLString: true,
+        });
+      }
+    } catch (error) {
+      $toast.error("An unexpected error occurred while updating your cart.", {
+        autoClose: 5000,
+        dangerouslyHTMLString: true,
+      });
+      console.error("deleteCartItem error:", error);
+    }
+  }
+
+  const cart = ref({} as UserCart);
+  async function getCart() {
+    try {
+      const { data } = await useMyFetch<GenericResponse<UserCart>>(
+        `/api/public/user/cart`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+          onErrorOccured: (_, status) => {
+            throw new Error(`HTTP error: ${status}`);
+          },
+        }
+      );
+
+      cart.value = data;
+    } catch (error) {
+      console.error("getList error:", error);
+    }
+  }
+
+  return {
+    productList,
+    modules,
+    cart,
+    getList,
+    getModules,
+    incrementCartItem,
+    decrementCartItem,
+    deleteCartItem,
+    getCart,
+  };
+});