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:
parent
ff40fa796e
commit
e893a772a7
5 changed files with 58 additions and 6 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -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/
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
"screenshots": "Скриншоты",
|
"screenshots": "Скриншоты",
|
||||||
"comparison": "Сравнение",
|
"comparison": "Сравнение",
|
||||||
"download": "Скачать",
|
"download": "Скачать",
|
||||||
"pricing": "Цены",
|
"pricing": "Бесплатно",
|
||||||
"faq": "FAQ",
|
"faq": "FAQ",
|
||||||
"viewOnGithub": "View on GitHub"
|
"viewOnGithub": "View on GitHub"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
20
landing/package-lock.json
generated
20
landing/package-lock.json
generated
|
|
@ -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",
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue