feat(landing): enhance comparison section and localization updates

- Added a new noteLink property to the ComparisonSection component for linking to relevant resources.
- Updated the comparison feature entry to include a link to the GitHub repository.
- Enhanced styling for note links in the comparison table for better visibility and user interaction.
- Changed the pricing label in English and Russian localization files from "Pricing" to "Free" for clarity.
This commit is contained in:
iliya 2026-03-23 17:00:29 +02:00
parent ff40fa796e
commit e893a772a7
5 changed files with 58 additions and 6 deletions

3
.gitignore vendored
View file

@ -38,8 +38,7 @@ yarn-error.log*
*.tsbuildinfo *.tsbuildinfo
.pnpm-store/ .pnpm-store/
package-lock.json /package-lock.json
!landing/package-lock.json
notification_example/ notification_example/
temp/ temp/
.claude/ .claude/

View file

@ -4,6 +4,7 @@ const { t } = useI18n()
interface CellValue { interface CellValue {
status: string status: string
note?: string note?: string
noteLink?: string
} }
interface ComparisonRow { interface ComparisonRow {
@ -154,7 +155,7 @@ const rows = computed<ComparisonRow[]>(() => [
}, },
{ {
feature: t('comparison.features.multiAgent'), feature: t('comparison.features.multiAgent'),
us: { status: 'soon', note: 'In development' }, us: { status: 'soon', note: 'In development', noteLink: 'https://github.com/Alishahryar1/free-claude-code' },
vibeKanban: { status: 'yes', note: '6+ agents' }, vibeKanban: { status: 'yes', note: '6+ agents' },
aperant: { status: 'yes', note: '11 providers' }, aperant: { status: 'yes', note: '11 providers' },
cursor: { status: 'yes', note: 'Multi-model' }, cursor: { status: 'yes', note: 'Multi-model' },
@ -260,8 +261,17 @@ function getStatusIcon(status: string): string {
{{ getStatusIcon((row[comp.key as keyof ComparisonRow] as CellValue).status) }} {{ getStatusIcon((row[comp.key as keyof ComparisonRow] as CellValue).status) }}
</template> </template>
</span> </span>
<a
v-if="(row[comp.key as keyof ComparisonRow] as CellValue).noteLink && (row[comp.key as keyof ComparisonRow] as CellValue).status !== 'text'"
:href="(row[comp.key as keyof ComparisonRow] as CellValue).noteLink"
target="_blank"
rel="noopener noreferrer"
class="comparison-table__cell-note comparison-table__cell-note--link"
>
{{ (row[comp.key as keyof ComparisonRow] as CellValue).note }}
</a>
<span <span
v-if="(row[comp.key as keyof ComparisonRow] as CellValue).note && (row[comp.key as keyof ComparisonRow] as CellValue).status !== 'text'" v-else-if="(row[comp.key as keyof ComparisonRow] as CellValue).note && (row[comp.key as keyof ComparisonRow] as CellValue).status !== 'text'"
class="comparison-table__cell-note" class="comparison-table__cell-note"
> >
{{ (row[comp.key as keyof ComparisonRow] as CellValue).note }} {{ (row[comp.key as keyof ComparisonRow] as CellValue).note }}
@ -421,6 +431,19 @@ function getStatusIcon(status: string): string {
white-space: normal; white-space: normal;
} }
.comparison-table__cell-note--link {
color: #00d4e6;
text-decoration: underline;
text-decoration-color: rgba(0, 212, 230, 0.3);
text-underline-offset: 2px;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.comparison-table__cell-note--link:hover {
color: #00f0ff;
text-decoration-color: rgba(0, 240, 255, 0.6);
}
/* Cell status variants */ /* Cell status variants */
.comparison-table__cell--yes .comparison-table__cell-content { .comparison-table__cell--yes .comparison-table__cell-content {
color: #39ff14; color: #39ff14;
@ -533,6 +556,16 @@ function getStatusIcon(status: string): string {
color: #94a3b8; color: #94a3b8;
} }
.v-theme--light .comparison-table__cell-note--link {
color: #0891b2;
text-decoration-color: rgba(8, 145, 178, 0.3);
}
.v-theme--light .comparison-table__cell-note--link:hover {
color: #0e7490;
text-decoration-color: rgba(14, 116, 144, 0.6);
}
.v-theme--light .comparison-table__cell--yes .comparison-table__cell-content { .v-theme--light .comparison-table__cell--yes .comparison-table__cell-content {
color: #059669; color: #059669;
background: rgba(5, 150, 105, 0.1); background: rgba(5, 150, 105, 0.1);

View file

@ -4,7 +4,7 @@
"screenshots": "Screenshots", "screenshots": "Screenshots",
"comparison": "Compare", "comparison": "Compare",
"download": "Download", "download": "Download",
"pricing": "Pricing", "pricing": "Free",
"faq": "FAQ", "faq": "FAQ",
"viewOnGithub": "View on GitHub" "viewOnGithub": "View on GitHub"
}, },

View file

@ -4,7 +4,7 @@
"screenshots": "Скриншоты", "screenshots": "Скриншоты",
"comparison": "Сравнение", "comparison": "Сравнение",
"download": "Скачать", "download": "Скачать",
"pricing": "Цены", "pricing": "Бесплатно",
"faq": "FAQ", "faq": "FAQ",
"viewOnGithub": "View on GitHub" "viewOnGithub": "View on GitHub"
}, },

View file

@ -13,6 +13,7 @@
"nuxt": "^3.20.2", "nuxt": "^3.20.2",
"nuxt-icon": "^0.6.10", "nuxt-icon": "^0.6.10",
"pinia": "^3.0.4", "pinia": "^3.0.4",
"swiper": "^12.1.2",
"vue": "^3.5.27", "vue": "^3.5.27",
"vue-i18n": "^11.2.8", "vue-i18n": "^11.2.8",
"vue-router": "^4.6.4", "vue-router": "^4.6.4",
@ -13114,6 +13115,25 @@
"node": ">=16" "node": ">=16"
} }
}, },
"node_modules/swiper": {
"version": "12.1.2",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-12.1.2.tgz",
"integrity": "sha512-4gILrI3vXZqoZh71I1PALqukCFgk+gpOwe1tOvz5uE9kHtl2gTDzmYflYCwWvR4LOvCrJi6UEEU+gnuW5BtkgQ==",
"funding": [
{
"type": "patreon",
"url": "https://www.patreon.com/swiperjs"
},
{
"type": "open_collective",
"url": "http://opencollective.com/swiper"
}
],
"license": "MIT",
"engines": {
"node": ">= 4.7.0"
}
},
"node_modules/system-architecture": { "node_modules/system-architecture": {
"version": "0.1.0", "version": "0.1.0",
"resolved": "https://registry.npmjs.org/system-architecture/-/system-architecture-0.1.0.tgz", "resolved": "https://registry.npmjs.org/system-architecture/-/system-architecture-0.1.0.tgz",