Skip to content

Commit a313ead

Browse files
eagleonhilleagleonhill
authored
Add compare page for slurm (#2)
1 parent 5c71199 commit a313ead

File tree

8 files changed

+529
-5
lines changed

8 files changed

+529
-5
lines changed

‎.vitepress/components/ComparisonBanner.vue‎

Lines changed: 346 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,346 @@
1+
<template>
2+
<div class="comparison-banner">
3+
<div class="banner-content">
4+
<!-- Left Side: Verdict and CTA -->
5+
<div class="verdict-section">
6+
<div class="verdict-content">
7+
<h2 class="verdict-title">{{ verdictTitle }}</h2>
8+
<p class="verdict-description">{{ verdictDescription }}</p>
9+
<div class="cta-buttons">
10+
<a
11+
v-for="(button, index) in ctaButtons"
12+
:key="index"
13+
:href="button.link"
14+
class="cta-button"
15+
:class="[button.variant || 'primary']"
16+
>
17+
{{ button.text }}
18+
</a>
19+
</div>
20+
</div>
21+
</div>
22+
23+
<!-- Right Side: VS Comparison with Logos -->
24+
<div class="comparison-section">
25+
<div class="vs-container">
26+
<div class="competitor-item">
27+
<div class="competitor-logo">
28+
<img :src="competitorA.logo" :alt="competitorA.name" />
29+
</div>
30+
<span class="competitor-name">{{ competitorA.name }}</span>
31+
</div>
32+
33+
<div class="vs-divider">
34+
<span class="vs-text">VS</span>
35+
</div>
36+
37+
<div class="competitor-item winner" :class="{ highlight: highlightWinner }">
38+
<div class="competitor-logo">
39+
<img :src="competitorB.logo" :alt="competitorB.name" />
40+
</div>
41+
<span class="competitor-name">{{ competitorB.name }}</span>
42+
<div v-if="showWinnerBadge" class="winner-badge">
43+
<CheckIcon class="check-icon" />
44+
</div>
45+
</div>
46+
</div>
47+
</div>
48+
</div>
49+
</div>
50+
</template>
51+
52+
<script setup lang="ts">
53+
import { h, defineComponent } from "vue";
54+
55+
interface Button {
56+
text: string
57+
link: string
58+
variant?: 'primary' | 'secondary'
59+
}
60+
61+
interface Competitor {
62+
name: string
63+
logo: string
64+
}
65+
66+
interface Props {
67+
verdictTitle: string
68+
verdictDescription: string
69+
ctaButtons: Button[]
70+
competitorA: Competitor
71+
competitorB: Competitor
72+
highlightWinner?: boolean
73+
showWinnerBadge?: boolean
74+
}
75+
76+
defineProps<Props>()
77+
78+
const CheckIcon = defineComponent({
79+
name: "CheckIcon",
80+
setup() {
81+
return () =>
82+
h("svg", {
83+
class: "w-6 h-6",
84+
fill: "currentColor",
85+
viewBox: "0 0 20 20",
86+
xmlns: "http://www.w3.org/2000/svg"
87+
}, [
88+
h("path", {
89+
"fill-rule": "evenodd",
90+
d: "M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 12.586l7.293-7.293a1 1 0 0 1 1.414 0z",
91+
"clip-rule": "evenodd",
92+
}),
93+
]);
94+
},
95+
});
96+
</script>
97+
98+
<style scoped>
99+
.comparison-banner {
100+
margin: 0;
101+
padding: 4rem 2rem;
102+
background: linear-gradient(135deg, var(--vp-c-bg-alt) 0%, var(--vp-c-bg) 100%);
103+
border-top: 1px solid var(--vp-c-border);
104+
border-bottom: 1px solid var(--vp-c-border);
105+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
106+
position: relative;
107+
overflow: hidden;
108+
}
109+
110+
.comparison-banner::before {
111+
content: '';
112+
position: absolute;
113+
top: 0;
114+
left: 0;
115+
right: 0;
116+
bottom: 0;
117+
background: radial-gradient(circle at 20% 50%, rgba(var(--vp-c-brand-rgb, 59, 130, 246), 0.05) 0%, transparent 50%),
118+
radial-gradient(circle at 80% 50%, rgba(var(--vp-c-brand-rgb, 59, 130, 246), 0.03) 0%, transparent 50%);
119+
pointer-events: none;
120+
}
121+
122+
.banner-content {
123+
display: grid;
124+
grid-template-columns: 1fr 1fr;
125+
gap: 3rem;
126+
align-items: center;
127+
max-width: 1200px;
128+
margin: 0 auto;
129+
}
130+
131+
/* Left Side - Verdict Section */
132+
.verdict-section {
133+
display: flex;
134+
flex-direction: column;
135+
justify-content: center;
136+
}
137+
138+
.verdict-title {
139+
font-size: 2.5rem;
140+
font-weight: 700;
141+
line-height: 1.2;
142+
margin: 0 0 1rem 0;
143+
color: var(--vp-c-text-1);
144+
background: linear-gradient(135deg, var(--vp-c-brand-1), var(--vp-c-brand-2));
145+
-webkit-background-clip: text;
146+
-webkit-text-fill-color: transparent;
147+
background-clip: text;
148+
}
149+
150+
.verdict-description {
151+
font-size: 1rem;
152+
line-height: 1.6;
153+
color: var(--vp-c-text-2);
154+
margin: 0 0 2rem 0;
155+
}
156+
157+
.cta-buttons {
158+
display: flex;
159+
gap: 1rem;
160+
flex-wrap: wrap;
161+
}
162+
163+
.cta-button {
164+
display: inline-flex;
165+
align-items: center;
166+
padding: 0.875rem 1.5rem;
167+
border-radius: 0.75rem;
168+
font-weight: 600;
169+
font-size: 1rem;
170+
text-decoration: none;
171+
transition: all 0.3s ease;
172+
border: 2px solid transparent;
173+
}
174+
175+
.cta-button.primary {
176+
background: var(--vp-c-brand-1);
177+
color: var(--vp-c-bg);
178+
}
179+
180+
.cta-button.primary:hover {
181+
background: var(--vp-c-brand-2);
182+
transform: translateY(-2px);
183+
box-shadow: var(--vp-shadow-3);
184+
}
185+
186+
.cta-button.secondary {
187+
background: transparent;
188+
color: var(--vp-c-brand-1);
189+
border-color: var(--vp-c-brand-1);
190+
}
191+
192+
.cta-button.secondary:hover {
193+
background: var(--vp-c-brand-1);
194+
color: var(--vp-c-bg);
195+
transform: translateY(-2px);
196+
}
197+
198+
/* Right Side - Comparison Section */
199+
.comparison-section {
200+
display: flex;
201+
justify-content: center;
202+
align-items: center;
203+
}
204+
205+
.vs-container {
206+
display: flex;
207+
align-items: center;
208+
gap: 2rem;
209+
}
210+
211+
.competitor-item {
212+
display: flex;
213+
flex-direction: column;
214+
align-items: center;
215+
gap: 1rem;
216+
position: relative;
217+
padding: 1.5rem;
218+
border-radius: 1rem;
219+
background: var(--vp-c-bg);
220+
border: 2px solid var(--vp-c-border);
221+
transition: all 0.3s ease;
222+
}
223+
224+
.competitor-item.winner.highlight {
225+
border-color: var(--vp-c-brand-1);
226+
box-shadow: 0 0 20px rgba(var(--vp-c-brand-1), 0.2);
227+
transform: scale(1.05);
228+
}
229+
230+
.competitor-logo {
231+
width: 80px;
232+
height: 80px;
233+
display: flex;
234+
align-items: center;
235+
justify-content: center;
236+
background: var(--vp-c-bg-alt);
237+
border-radius: 50%;
238+
padding: 1rem;
239+
}
240+
241+
.competitor-logo img {
242+
max-width: 100%;
243+
max-height: 100%;
244+
object-fit: contain;
245+
}
246+
247+
.competitor-name {
248+
font-weight: 600;
249+
font-size: 1.1rem;
250+
color: var(--vp-c-text-1);
251+
text-align: center;
252+
}
253+
254+
.vs-divider {
255+
display: flex;
256+
align-items: center;
257+
justify-content: center;
258+
width: 60px;
259+
height: 60px;
260+
background: var(--vp-c-brand-1);
261+
color: var(--vp-c-bg);
262+
border-radius: 50%;
263+
font-weight: 700;
264+
font-size: 1.2rem;
265+
box-shadow: var(--vp-shadow-2);
266+
}
267+
268+
.winner-badge {
269+
position: absolute;
270+
top: -8px;
271+
right: -8px;
272+
width: 32px;
273+
height: 32px;
274+
background: var(--vp-c-green-1, #10b981);
275+
color: white;
276+
border-radius: 50%;
277+
display: flex;
278+
align-items: center;
279+
justify-content: center;
280+
box-shadow: var(--vp-shadow-2);
281+
}
282+
283+
.check-icon {
284+
width: 18px;
285+
height: 18px;
286+
}
287+
288+
/* Responsive Design */
289+
@media (max-width: 768px) {
290+
.banner-content {
291+
grid-template-columns: 1fr;
292+
gap: 2rem;
293+
}
294+
295+
.verdict-title {
296+
font-size: 2rem;
297+
}
298+
299+
.verdict-description {
300+
font-size: 1.1rem;
301+
}
302+
303+
.vs-container {
304+
gap: 1rem;
305+
}
306+
307+
.competitor-item {
308+
padding: 1rem;
309+
}
310+
311+
.competitor-logo {
312+
width: 60px;
313+
height: 60px;
314+
}
315+
316+
.vs-divider {
317+
width: 50px;
318+
height: 50px;
319+
font-size: 1rem;
320+
}
321+
322+
.cta-buttons {
323+
justify-content: center;
324+
}
325+
}
326+
327+
@media (max-width: 480px) {
328+
.comparison-banner {
329+
padding: 3rem 1rem;
330+
}
331+
332+
.vs-container {
333+
flex-direction: column;
334+
gap: 1rem;
335+
}
336+
337+
.vs-divider {
338+
transform: rotate(90deg);
339+
}
340+
341+
.cta-button {
342+
width: 100%;
343+
justify-content: center;
344+
}
345+
}
346+
</style>

‎.vitepress/components/Footer.vue‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@
2222
<Icon icon="tabler:shield-lock" class="footer-icon" />
2323
Security Notice
2424
</a></li>
25+
<li><a href="/sitemap">
26+
<Icon icon="tabler:news" class="footer-icon" />
27+
Sitemap
28+
</a></li>
2529
</ul>
2630
</div>
2731

@@ -52,6 +56,17 @@
5256
</ul>
5357
</div>
5458

59+
<!-- Column 3: Compare -->
60+
<div class="footer-column">
61+
<h3 class="footer-title">Compare</h3>
62+
<ul class="footer-links">
63+
<li><a href="/slurm-alternative">
64+
<Icon icon="tabler:arrow-up-right" class="footer-icon" />
65+
Velda VS Slurm
66+
</a></li>
67+
</ul>
68+
</div>
69+
5570
<!-- Column 3: Connect -->
5671
<div class="footer-column">
5772
<h3 class="footer-title">Connect</h3>
@@ -113,7 +128,6 @@ const currentYear = computed(() => new Date().getFullYear())
113128
.velda-footer {
114129
background: var(--vp-c-bg-soft);
115130
border-top: 1px solid var(--vp-c-divider);
116-
margin-top: 4rem;
117131
width: 100%;
118132
position: relative;
119133
z-index: 30;
@@ -135,7 +149,7 @@ const currentYear = computed(() => new Date().getFullYear())
135149
136150
@media (min-width: 768px) {
137151
.footer-columns {
138-
grid-template-columns: repeat(3, 1fr);
152+
grid-template-columns: repeat(4, 1fr);
139153
gap: 3rem;
140154
}
141155
}

0 commit comments

Comments
 (0)