Skip to content

Revamp website visuals #1175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
ealush wants to merge 2 commits into
base: latest
Choose a base branch
from
Draft

Revamp website visuals #1175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1715266
Revamp website visuals
ealush Dec 6, 2025
d607b06
Polish hero CTAs and feature polish
ealush Dec 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 16 additions & 25 deletions website/docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,25 @@
// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion

import { Highlight, themes } from 'prism-react-renderer';
import path from 'path';
import { themes } from 'prism-react-renderer';
import { fileURLToPath } from 'url';

// const darkCodeTheme = require('prism-react-renderer/themes/dracula');
// const lightCodeTheme = require('prism-react-renderer/themes/github');
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

function badgeLink(url, badge, name) {
return `<a href="${url}" class="header-badge" target="_blank">
<img src="${badge}" alt="${name}"/>
</a>`;
}

/** @type {import('@docusaurus/types').Config} */
const config = {
baseUrl: '/',
favicon: 'favicon.ico',
title: 'Vest',
tagline:
'Declarative validations framework inspired by unit testing libraries',
tagline: 'Declarative validations framework inspired by unit testing libraries',
url: 'https://vestjs.dev',
onBrokenLinks: 'throw',
markdown: {
Expand All @@ -23,12 +30,6 @@ const config = {
},
organizationName: 'ealush', // Usually your GitHub org/user name.
plugins: [
// [
// require.resolve('@easyops-cn/docusaurus-search-local'),
// {
// indexBlog: false,
// },
// ],
[
'@docusaurus/plugin-google-gtag',
{
Expand All @@ -43,7 +44,7 @@ const config = {
/** @type {import('@docusaurus/preset-classic').Options} */
({
docs: {
sidebarPath: require.resolve('./sidebars.js'),
sidebarPath: path.resolve(__dirname, './sidebars.js'),
// Please change this to your repo.
editUrl: 'https://github.com/ealush/vest/edit/latest/website/',
lastVersion: 'current',
Expand Down Expand Up @@ -76,7 +77,7 @@ const config = {
beforeDefaultRehypePlugins: [],
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
customCss: path.resolve(__dirname, './src/css/custom.css'),
},
}),
],
Expand Down Expand Up @@ -195,10 +196,6 @@ const config = {
{
title: 'More',
items: [
// {
// label: "Blog",
// to: "/blog",
// },
{
label: 'GitHub',
href: 'https://github.com/ealush/vest',
Expand All @@ -210,7 +207,7 @@ const config = {
},
prism: {
theme: themes.github,
darkTheme: themes.dracula,
darkTheme: themes.vsDark,
},
announcementBar: {
id: 'announcementBar-vest-6',
Expand All @@ -232,10 +229,4 @@ const config = {
}),
};

module.exports = config;

function badgeLink(url, badge, name) {
return `<a href="${url}" class="header-badge" target="_blank">
<img src="${badge}" alt="${name}"/>
</a>`;
}
export default config;
116 changes: 47 additions & 69 deletions website/src/components/HomepageFeatures.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,97 +5,75 @@ import styles from './HomepageFeatures.module.css';

const FeatureList = [
{
title: 'Easy to learn',
emoji: '💡',
description: (
<>
Vest adopts the syntax and style of unit testing frameworks, so you can
leverage the knowledge you already have to write your form validations.
</>
),
title: 'Declarative by design',
emoji: '🧾',
category: 'DX',
description:
'Author validations like unit tests with suites, hooks, and familiar assertions.',
},
{
title: 'Framework Agnostic',
emoji: '🎨',
description: (
<>
Bring your own UI. Vest is framework agnostic, so you can use it with
any UI framework you have.
</>
),
title: 'Framework agnostic',
emoji: '🌐',
category: 'Flexible',
description: 'Use Vest anywhere—React, Vue, Svelte, vanilla JS, or your favorite stack.',
},
{
title: 'Really smart',
emoji: '🧠',
description: (
<>
Vest takes care of all the annoying parts for you. It manages its own
state, handles async validations and much more.
</>
),
title: 'Async ready',
emoji: '⚡️',
category: 'Performance',
description: 'Handle async flows out of the box with deterministic state management.',
},
{
title: 'Extendable',
title: 'Extendable core',
emoji: '🧩',
description: (
<>
You can easily add new custom types of validations to Vest according to
your needs.
</>
),
category: 'Composable',
description: 'Add custom validation rules and share suites across teams with ease.',
},
{
title: 'Reusable',
emoji: '♻️',
description: (
<>
Validation logic in Vest can be shared across multiple features in your
app.
</>
),
title: 'Tiny footprint',
emoji: '🎯',
category: 'Shipping',
description: 'Zero dependencies and a few KBs—perfect for modern, lean bundles.',
},
{
title: 'Tiny',
emoji: '🐜',
description: (
<>
Packed with features, but optimized for size. Vest brings no
dependencies, and only takes a few KBs.
</>
),
title: 'Test-like ergonomics',
emoji: '✅',
category: 'Productivity',
description: 'Readable error messages, deterministic runs, and intuitive APIs.',
},
];

function Feature({ emoji, title, description }) {
function Feature({ emoji, title, category, description }) {
return (
<div className={clsx('col col--4')}>
<div className={styles.featureCard}>
<div className="text--center">
<span className={styles.emoji}>{emoji}</span>
</div>
<div className="text--center padding-horiz--md">
<h3 className={styles.featureTitle}>{title}</h3>
<p className={styles.featureDescription}>{description}</p>
</div>
<div className={styles.featureCard}>
<div className={styles.featureHeader}>
<span className={styles.emoji}>{emoji}</span>
<span className={styles.category}>{category}</span>
</div>
<h3 className={styles.featureTitle}>{title}</h3>
<p className={styles.featureDescription}>{description}</p>
</div>
);
}

export default function HomepageFeatures() {
return (
<>
<section
className={clsx(styles.features, commonStyles.main_section_centered)}
>
<div className="container">
<div className="row">
{FeatureList.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
<section className={clsx(styles.features, commonStyles.main_section_centered)}>
<div className="container">
<div className={styles.sectionHeader}>
<p className={styles.sectionEyebrow}>Built for modern DX</p>
<h2 className={styles.sectionTitle}>Everything you need to trust your forms</h2>
<p className={styles.sectionDescription}>
Vest pairs a lightweight core with a familiar testing-inspired API, so you can ship
confident experiences without fighting your validation layer.
</p>
</div>
</section>
</>
<div className={styles.featuresGrid}>
{FeatureList.map((feature) => (
<Feature key={feature.title} {...feature} />
))}
</div>
</div>
</section>
);
}
Loading
Loading