From ff40fa796ef0fabf5825ad93a96b1067458ad954 Mon Sep 17 00:00:00 2001 From: iliya Date: Mon, 23 Mar 2026 16:52:13 +0200 Subject: [PATCH] feat(landing): update navigation and enhance screenshots section - Added "Screenshots" and "Pricing" entries to the navigation menu. - Introduced a new state variable `swiperReady` to manage the readiness of the screenshots carousel. - Enhanced the styling of the screenshots section for improved visibility and user experience. - Updated localization files for English and Russian to include new navigation labels. - Adjusted layout and transitions for the screenshots carousel to enhance performance and aesthetics. --- .gitignore | 1 + landing/components/layout/AppHeader.vue | 4 +- .../sections/ScreenshotsSection.vue | 72 +- landing/locales/en.json | 2 + landing/locales/ru.json | 2 + landing/package-lock.json | 14659 ++++++++++++++++ 6 files changed, 14709 insertions(+), 31 deletions(-) create mode 100644 landing/package-lock.json diff --git a/.gitignore b/.gitignore index 951ddde3..0ac18775 100644 --- a/.gitignore +++ b/.gitignore @@ -39,6 +39,7 @@ yarn-error.log* .pnpm-store/ package-lock.json +!landing/package-lock.json notification_example/ temp/ .claude/ diff --git a/landing/components/layout/AppHeader.vue b/landing/components/layout/AppHeader.vue index 9e6e90ee..5674a1a4 100644 --- a/landing/components/layout/AppHeader.vue +++ b/landing/components/layout/AppHeader.vue @@ -5,8 +5,10 @@ const { t } = useI18n(); const menuOpen = ref(false); const navItems = computed(() => [ - { id: 'comparison', label: t('nav.comparison') }, + { id: 'screenshots', label: t('nav.screenshots') }, { id: 'download', label: t('nav.download') }, + { id: 'comparison', label: t('nav.comparison') }, + { id: 'pricing', label: t('nav.pricing') }, { id: 'faq', label: t('nav.faq') }, ]); diff --git a/landing/components/sections/ScreenshotsSection.vue b/landing/components/sections/ScreenshotsSection.vue index 44eb07aa..78ecbd61 100644 --- a/landing/components/sections/ScreenshotsSection.vue +++ b/landing/components/sections/ScreenshotsSection.vue @@ -20,6 +20,7 @@ const screenshots = [ ]; const swiperRef = ref(null); +const swiperReady = ref(false); const lightboxOpen = ref(false); const lightboxIndex = ref(0); @@ -67,6 +68,31 @@ onMounted(() => { pagination: { clickable: true, }, + injectStyles: [` + .swiper-pagination { + position: relative !important; + bottom: auto !important; + margin-top: 28px; + } + .swiper-pagination-bullet { + width: 10px; + height: 10px; + background: rgba(0, 240, 255, 0.4); + opacity: 1; + transition: all 0.2s ease; + } + .swiper-pagination-bullet-active { + background: #00f0ff; + width: 28px; + border-radius: 5px; + } + :host-context(.v-theme--light) .swiper-pagination-bullet { + background: rgba(0, 139, 178, 0.35); + } + :host-context(.v-theme--light) .swiper-pagination-bullet-active { + background: #0891b2; + } + `], breakpoints: { 600: { slidesPerView: 1.5, @@ -83,6 +109,7 @@ onMounted(() => { }, }); (swiperRef.value as any).initialize(); + swiperReady.value = true; } }); @@ -115,7 +142,7 @@ function slideNext() { -