Skip to content

Commit 751bc5d

Browse files
eagleonhilleagleonhill
committed
Revise hero page
1 parent d576ea8 commit 751bc5d

File tree

10 files changed

+187
-28
lines changed

10 files changed

+187
-28
lines changed

‎.vitepress/components/HomeHeroInfo.vue‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<template>
2+
<div class="home-hero">
3+
<div class="hero-content">
4+
<h1 class="hero-headline">
5+
The developer platform for ML and HPC workloads that scale instantly
6+
</h1>
7+
<p class="hero-subline">
8+
Instantly run workflows and scale your workloads across your cluster or cloud with a simple
9+
<code class="vrun">vrun</code> command prefix. No image rebuilds, no dependency drift, no manifests, no waiting, cut cloud bill.
10+
</p>
11+
<div class="hero-kicker">
12+
vrun is all you need
13+
</div>
14+
<div class="hero-ctas">
15+
<a class="cta primary" href="/comparison">Get started</a>
16+
<a class="cta secondary" href="/book">Book a demo</a>
17+
</div>
18+
</div>
19+
</div>
20+
</template>
21+
22+
<style scoped>
23+
.home-hero {
24+
display: flex;
25+
align-items: center;
26+
padding-top: 15vh;
27+
justify-content: center;
28+
min-height: 50vh;
29+
text-align: center;
30+
}
31+
32+
.hero-content {
33+
max-width: 800px;
34+
margin: 0 auto;
35+
}
36+
37+
.hero-headline {
38+
font-size: 3rem;
39+
font-weight: 800;
40+
line-height: 1.2;
41+
/* tighten spacing under headline */
42+
margin-bottom: 1rem;
43+
color: var(--vp-c-text-1);
44+
}
45+
46+
.hero-subline {
47+
font-size: 1.25rem;
48+
line-height: 1.8;
49+
color: var(--vp-c-text-2);
50+
margin-bottom: 0;
51+
}
52+
53+
.hero-kicker {
54+
font-size: 0.75rem;
55+
font-family: 'Oswald', ui-sans-serif;
56+
font-weight: 500;
57+
text-transform: uppercase;
58+
letter-spacing: 0.1em;
59+
color: var(--vp-c-brand-2);
60+
margin-top: 2.2rem;
61+
margin-bottom: 2rem;
62+
}
63+
64+
.hero-ctas {
65+
display: flex;
66+
/* constrain CTA row so buttons aren't too wide on large screens */
67+
width: 100%;
68+
max-width: 420px;
69+
margin: 0.75rem auto 0;
70+
gap: 1rem;
71+
align-items: stretch;
72+
}
73+
74+
.cta {
75+
display: inline-flex;
76+
align-items: center;
77+
justify-content: center;
78+
padding: 0.65rem 1.1rem;
79+
border-radius: 10px;
80+
text-decoration: none;
81+
font-weight: 600;
82+
font-size: 0.95rem;
83+
/* make CTAs equal width */
84+
flex: 1 1 0;
85+
min-width: 120px;
86+
}
87+
88+
.cta.primary {
89+
background: var(--vp-button-brand-bg, var(--vp-c-brand-1));
90+
color: white;
91+
}
92+
93+
.cta.secondary {
94+
background: transparent;
95+
color: var(--vp-c-brand-1);
96+
border: 2px solid var(--vp-c-brand-1);
97+
}
98+
99+
.cta.primary:hover, .cta.secondary:hover {
100+
opacity: 0.95;
101+
transform: translateY(-1px);
102+
}
103+
104+
/* Responsive design */
105+
@media (max-width: 768px) {
106+
.home-hero {
107+
padding: 3rem 1.5rem;
108+
}
109+
110+
.hero-headline {
111+
font-size: 2.25rem;
112+
}
113+
114+
.hero-subline {
115+
font-size: 1.125rem;
116+
}
117+
}
118+
119+
@media (max-width: 480px) {
120+
.home-hero {
121+
padding: 2rem 1rem;
122+
}
123+
124+
.hero-headline {
125+
font-size: 1.875rem;
126+
}
127+
128+
.hero-subline {
129+
font-size: 1rem;
130+
}
131+
132+
.hero-ctas {
133+
flex-direction: column;
134+
max-width: 320px;
135+
gap: 0.75rem;
136+
}
137+
.cta { width: 100%; }
138+
}
139+
</style>

‎.vitepress/config.mts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default withMermaid(defineConfig({
1616
],
1717
themeConfig: {
1818
logo: "/logos.png",
19-
siteTitle: 'VELDA',
19+
siteTitle: '<span class="brand">VELDA</span>',
2020
nav: [
2121
{ text: 'Home', link: '/' },
2222
{ text: 'Blog', link: '/blog/' },
@@ -29,7 +29,7 @@ export default withMermaid(defineConfig({
2929
'/blog/': [
3030
{
3131
text: 'Blog',
32-
items: [{text: "Latest Posts", link: '/blog/'}, ...blogPosts.map(post => ({
32+
items: [{ text: "Latest Posts", link: '/blog/' }, ...blogPosts.map(post => ({
3333
text: post.title,
3434
link: `/blog/${post.slug}`
3535
}))]

‎.vitepress/theme/CustomLayout.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,16 @@
33
<template #layout-bottom>
44
<Footer />
55
</template>
6+
<template #home-hero-info>
7+
<HomeHeroInfo />
8+
</template>
69
</Layout>
710
</template>
811

912
<script setup lang="ts">
1013
import DefaultTheme from 'vitepress/theme'
1114
import Footer from '../components/Footer.vue'
15+
import HomeHeroInfo from '../components/HomeHeroInfo.vue'
1216
1317
const { Layout } = DefaultTheme
1418
</script>

‎.vitepress/theme/custom.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
11
@import "tailwindcss";
22

3+
.brand {
4+
font-family: 'Oswald', ui-sans-serif;
5+
font-weight: 700;
6+
}
7+
8+
code.vrun {
9+
color: var(--vp-c-brand-1);
10+
font-weight: 500;
11+
background: transparent;
12+
padding: 0 0.18rem;
13+
border-radius: 4px;
14+
font-family: 'Oswald', ui-sans-serif;
15+
}
16+
17+
318
/* Custom VitePress CSS */
419
:root {
520
--vp-c-brand-1: #1B8696;

‎.vitepress/theme/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ import { Icon } from '@iconify/vue'
1414
import setupGA from './ga'
1515
import ComparisonLayout from './ComparisonLayout.vue'
1616

17+
import '@fontsource/oswald/500.css';
18+
import '@fontsource/oswald/600.css';
19+
import "@fontsource/oswald/700.css";
20+
1721
declare global {
1822
interface Window {
1923
gtag?: (...args: any[]) => void

‎index.md‎

Lines changed: 10 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,10 @@ layout: home
66
head:
77
- - meta
88
- name: description
9-
content: Velda - Supercharge your development with accessible compute power as you need.
9+
content: Velda - Develop platform that can instantly scale, built for ML, HPC and automation workloads.
1010
- - meta
1111
- property: og:title
12-
content: VELDA - Develop without limits
13-
- - meta
14-
- property: og:description
15-
content: Redefine how compute resources(e.g. GPUs) can be accessed through a personalized HPC cluster. Stop spending on GPUs when they're inactive, or scale your application like your machine has unbounded power. Book your personalized demo today.
12+
content: VELDA - Develop platform that can instantly scale
1613
- - meta
1714
- property: og:image
1815
content: https://velda.io/og-preview.png
@@ -39,25 +36,14 @@ head:
3936
href: https://velda.io
4037

4138
hero:
42-
name: "VELDA"
43-
text: Develop without limits
44-
image:
45-
src: /logos.png
46-
alt: Velda
47-
actions:
48-
- theme: brand
49-
text: Get started
50-
link: comparison
51-
- theme: alt
52-
text: Book a demo
53-
link: https://calendly.com/velda-io/30min
39+
null:
5440
features:
55-
- title: Develop on Velda
56-
details: Instantly onboard new developers from templates. Use your favorite IDEs, or directly connect from the browser in VS-code.
57-
- title: Scale in seconds
58-
details: With a vrun prefix, run your workload with the compute power you need, like running locally. Your data and environment are always in sync.
59-
- title: Save $$$
60-
details: Only provision the compute resource you use. No extra setup work required to scale.
41+
- title: Develop on <span class="brand">VELDA</span>
42+
details: One click to access VS-Code from your browser, or connect with your prefered IDE. Instantly onboard from predefined templates.
43+
- title: Scale in Seconds
44+
details: With a simple <code class="vrun">vrun</code> prefix, run your workload with the compute power you need, same experience as running locally. Your data and environment are always in sync.
45+
- title: Save on Compute
46+
details: Only provision the compute resource you use. No extra setup work required to scale, no more idle GPUs on developer's workstation.
6147

6248
---
6349

@@ -80,4 +66,4 @@ Watch this one-minute demo to see how Velda act in action.
8066
8167
### Start your journey today
8268

83-
Experience the development platform that leading teams are already using to ship faster. [Book your personalized demo](https://calendly.com/velda-io/30min) and get free cluster setup as an early adopter—limited spots available.
69+
Experience the development platform that leading teams are already using to ship faster. [Book your personalized demo](https://calendly.com/velda-io/30min) and get free cluster setup as an early adopter—limited spots available.t

‎package-lock.json‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"update-blog-posts": "node scripts/update-blog-posts.js"
1717
},
1818
"dependencies": {
19+
"@fontsource/oswald": "^5.2.8",
1920
"@iconify/vue": "^5.0.0",
2021
"@tailwindcss/postcss": "^4.1.11",
2122
"@tailwindcss/vite": "^4.1.11",

‎public/github.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<html>
22

33
<head>
4-
4+
<meta name="robots" content="noindex" />
55
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JY86KL8PQD"></script>
66
<script>
77
window.dataLayer = window.dataLayer || [];

‎sitemap.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,4 @@ description: Complete site navigation for Velda - find all pages, blog posts, an
3636

3737
---
3838

39-
*Last updated: 2025-10-07*
39+
*Last updated: 2025-10-08*

0 commit comments

Comments
 (0)