Skip to content

Commit 9df705a

Browse files
ErwanDecosterLe-Caignec
ErwanDecoster
and
Le-Caignec
authored
feat: update "Quick Start" & "use Cases" page (#18)
Co-authored-by: Robin Le Caignec <[email protected]>
1 parent ca73019 commit 9df705a

File tree

16 files changed

+494
-624
lines changed

16 files changed

+494
-624
lines changed

‎.vitepress/theme/style.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,39 @@
4545
* in custom container, badges, etc.
4646
* -------------------------------------------------------------------------- */
4747

48+
@theme {
49+
--color-primary: var(--vp-c-brand-2);
50+
--color-primary2: var(--vp-c-brand-1);
51+
52+
--color-soft-bg: var(--vp-c-bg-soft);
53+
--color-border: var(--vp-c-border);
54+
--color-bg: var(--vp-c-bg);
55+
56+
--color-text1: var(--vp-c-text-1);
57+
--color-text2: var(--vp-c-text-2);
58+
--color-text3: var(--vp-c-text-3);
59+
60+
--color-success-1: var(--vp-c-green-1);
61+
--color-success-2: var(--vp-c-green-2);
62+
--color-success-3: var(--vp-c-green-3);
63+
--color-success-soft: var(--vp-c-green-soft);
64+
65+
--color-important-1: var(--vp-c-purple-1);
66+
--color-important-2: var(--vp-c-purple-2);
67+
--color-important-3: var(--vp-c-purple-3);
68+
--color-important-soft: var(--vp-c-purple-soft);
69+
70+
--color-warning-1: var(--vp-c-yellow-1);
71+
--color-warning-2: var(--vp-c-yellow-2);
72+
--color-warning-3: var(--vp-c-yellow-3);
73+
--color-warning-soft: var(--vp-c-yellow-soft);
74+
75+
--color-danger-1: var(--vp-c-red-1);
76+
--color-danger-2: var(--vp-c-red-2);
77+
--color-danger-3: var(--vp-c-red-3);
78+
--color-danger-soft: var(--vp-c-red-soft);
79+
}
80+
4881
:root {
4982
--vp-c-default-1: var(--vp-c-gray-1);
5083
--vp-c-default-2: var(--vp-c-gray-2);
@@ -66,6 +99,11 @@
6699
--vp-c-warning-3: var(--vp-c-yellow-3);
67100
--vp-c-warning-soft: var(--vp-c-yellow-soft);
68101

102+
--vp-c-important-1: var(--vp-c-purple-1);
103+
--vp-c-important-2: var(--vp-c-purple-2);
104+
--vp-c-important-3: var(--vp-c-purple-3);
105+
--vp-c-important-soft: var(--vp-c-purple-soft);
106+
69107
--vp-c-danger-1: var(--vp-c-red-1);
70108
--vp-c-danger-2: var(--vp-c-red-2);
71109
--vp-c-danger-3: var(--vp-c-red-3);

src/assets/content-creator-screenshot.png renamed to src/assets/use-cases/content-creator.png

File renamed without changes.

‎src/assets/use-cases/elizaos.png‎

384 KB
Loading

‎src/assets/use-cases/oracle-factory.png‎

214 KB
Loading

src/assets/web3messaging-screenshot.png renamed to src/assets/use-cases/web3-messaging.png

File renamed without changes.

‎src/components/Badge.vue‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<span :class="badgeClasses">
3+
<Icon v-if="icon" :icon="icon" :height="iconSize" />
4+
{{ label }}
5+
</span>
6+
</template>
7+
8+
<script setup lang="ts">
9+
import { Icon } from '@iconify/vue';
10+
import { computed } from 'vue';
11+
12+
interface Props {
13+
label: string;
14+
variant?:
15+
| 'success'
16+
| 'warning'
17+
| 'danger'
18+
| 'important'
19+
| 'primary'
20+
| 'default';
21+
icon?: string;
22+
iconSize?: number;
23+
size?: 'sm' | 'md';
24+
}
25+
26+
const props = withDefaults(defineProps<Props>(), {
27+
variant: 'default',
28+
iconSize: 14,
29+
size: 'sm',
30+
});
31+
32+
const badgeClasses = computed(() => {
33+
const baseClasses = 'inline-flex items-center rounded-2xl font-medium border';
34+
35+
// Size classes
36+
const sizeClasses =
37+
props.size === 'md'
38+
? 'gap-2 px-4 py-1.5 text-sm'
39+
: 'gap-1.5 px-3 py-1 text-xs';
40+
41+
// Variant classes
42+
let variantClasses = '';
43+
switch (props.variant) {
44+
case 'success':
45+
variantClasses = 'bg-success-soft text-success-3 border-success-3';
46+
break;
47+
case 'warning':
48+
variantClasses = 'bg-warning-soft text-warning-3 border-warning-3';
49+
break;
50+
case 'danger':
51+
variantClasses = 'bg-danger-soft text-danger-3 border-danger-3';
52+
break;
53+
case 'important':
54+
variantClasses = 'bg-important-soft text-important-3 border-important-3';
55+
break;
56+
case 'primary':
57+
variantClasses = 'bg-primary2/10 text-primary2 border-primary2/30';
58+
break;
59+
default:
60+
variantClasses = 'bg-soft-bg text-text2 border-border';
61+
}
62+
63+
return `${baseClasses} ${sizeClasses} ${variantClasses}`;
64+
});
65+
</script>

‎src/components/CardGrid.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div class="my-8 grid grid-cols-1 gap-6 md:grid-cols-2">
3+
<slot />
4+
</div>
5+
</template>

‎src/components/ProjectCard.vue‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<template>
2+
<div
3+
class="bg-soft-bg border-border hover:border-primary relative flex h-full min-h-[220px] flex-col rounded-lg border p-5 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
4+
>
5+
<!-- Icon -->
6+
<div class="flex items-start gap-2">
7+
<div
8+
class="border-border bg-bg flex h-14 w-14 items-center justify-center rounded-xl border"
9+
>
10+
<Icon :icon="icon" height="24" />
11+
</div>
12+
<div>
13+
<h3 class="mt-0! mb-1! text-lg font-semibold">{{ title }}</h3>
14+
<Badge
15+
:label="statusLabel"
16+
:variant="badgeVariant"
17+
:icon="statusIcon"
18+
/>
19+
</div>
20+
</div>
21+
22+
<!-- Content -->
23+
<div class="flex-1">
24+
<p class="text-text2 mb-3 h-14 overflow-hidden text-sm leading-relaxed">
25+
{{ description }}
26+
</p>
27+
28+
<!-- Status Badge -->
29+
</div>
30+
<!-- Actions -->
31+
<div class="mt-auto">
32+
<div v-if="githubUrl" class="grid gap-3">
33+
<Button
34+
as="a"
35+
:href="buttonHref"
36+
:disabled="buttonDisabled"
37+
:target="buttonTarget"
38+
:rel="buttonRel"
39+
class="flex-1"
40+
>
41+
<Icon :icon="buttonIcon" :height="16" />
42+
{{ buttonLabel }}
43+
</Button>
44+
<Button
45+
as="a"
46+
:href="githubUrl"
47+
target="_blank"
48+
rel="noreferrer"
49+
variant="secondary"
50+
class="flex-1"
51+
>
52+
<Icon icon="mdi:github" :height="16" />
53+
{{ githubLabel || 'View Code' }}
54+
</Button>
55+
</div>
56+
<Button
57+
v-else
58+
:as="buttonHref ? 'a' : 'button'"
59+
:href="buttonHref"
60+
:disabled="buttonDisabled"
61+
:target="buttonTarget"
62+
:rel="buttonRel"
63+
class="w-full"
64+
>
65+
<Icon :icon="buttonIcon" :height="16" />
66+
{{ buttonLabel }}
67+
</Button>
68+
</div>
69+
</div>
70+
</template>
71+
72+
<script setup lang="ts">
73+
import { Icon } from '@iconify/vue';
74+
import { computed } from 'vue';
75+
import Badge from './Badge.vue';
76+
import Button from './ui/Button.vue';
77+
78+
interface Props {
79+
title: string;
80+
description: string;
81+
icon: string;
82+
status: 'available' | 'coming-soon' | 'interactive';
83+
statusLabel: string;
84+
buttonLabel: string;
85+
buttonIcon: string;
86+
buttonHref?: string;
87+
buttonTarget?: string;
88+
buttonRel?: string;
89+
buttonDisabled?: boolean;
90+
githubUrl?: string;
91+
githubLabel?: string;
92+
}
93+
94+
const props = defineProps<Props>();
95+
96+
const statusIcon = computed(() => {
97+
switch (props.status) {
98+
case 'available':
99+
return 'mdi:check-circle-outline';
100+
case 'interactive':
101+
return 'mdi:play-circle-outline';
102+
case 'coming-soon':
103+
return 'mdi:clock-outline';
104+
default:
105+
return 'mdi:check-circle-outline';
106+
}
107+
});
108+
109+
const badgeVariant = computed(() => {
110+
switch (props.status) {
111+
case 'available':
112+
return 'success';
113+
case 'coming-soon':
114+
return 'warning';
115+
case 'interactive':
116+
return 'primary';
117+
default:
118+
return 'success';
119+
}
120+
});
121+
</script>

‎src/components/UseCaseCard.vue‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<template>
2+
<div
3+
class="bg-soft-bg group border-border hover:border-primary overflow-hidden rounded-xl border shadow-md transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
4+
>
5+
<!-- Image -->
6+
<div class="group relative overflow-hidden">
7+
<a :href="demoUrl" target="_blank" rel="noreferrer">
8+
<img
9+
:src="imageUrl"
10+
:alt="imageAlt"
11+
class="max-h-48 w-full object-cover object-top transition-transform duration-300 group-hover:scale-105"
12+
/>
13+
</a>
14+
</div>
15+
16+
<!-- Content -->
17+
<div class="p-6">
18+
<h3 class="text-text1 mt-0! mb-4 text-2xl font-semibold">{{ title }}</h3>
19+
<p class="text-text2 mb-6 text-sm leading-relaxed">{{ description }}</p>
20+
21+
<!-- Feature Tags -->
22+
<div class="mb-6 flex flex-wrap gap-2">
23+
<Badge
24+
v-for="feature in features"
25+
:key="feature"
26+
:label="feature"
27+
variant="primary"
28+
/>
29+
</div>
30+
31+
<!-- Actions -->
32+
<div v-if="githubUrl || demoUrl" class="flex flex-wrap gap-4">
33+
<Button
34+
v-if="demoUrl"
35+
as="a"
36+
:href="demoUrl"
37+
target="_blank"
38+
rel="noreferrer"
39+
>
40+
<Icon :icon="demoIcon" height="18" />
41+
Try Live Demo
42+
</Button>
43+
<Button
44+
v-if="githubUrl"
45+
as="a"
46+
:href="githubUrl"
47+
target="_blank"
48+
rel="noreferrer"
49+
variant="secondary"
50+
>
51+
<Icon icon="mdi:github" height="18" />
52+
View Code
53+
</Button>
54+
</div>
55+
</div>
56+
</div>
57+
</template>
58+
59+
<script setup lang="ts">
60+
import { Icon } from '@iconify/vue';
61+
import Badge from './Badge.vue';
62+
import Button from './ui/Button.vue';
63+
64+
interface Props {
65+
title: string;
66+
description: string;
67+
imageUrl: string;
68+
imageAlt: string;
69+
features: string[];
70+
demoUrl?: string;
71+
githubUrl?: string;
72+
demoIcon: string;
73+
}
74+
75+
defineProps<Props>();
76+
</script>

‎src/components/ui/Button.vue‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,38 @@
11
<template>
22
<component
3-
:is="as || 'button'"
4-
:type="as === 'button' || !as ? 'button' : undefined"
5-
class="inline-flex h-11 cursor-pointer items-center justify-center rounded-lg border-none bg-[#fcd15a]! px-5! py-2 text-base font-medium text-[#1e1e1e]! no-underline! transition-all! duration-200 hover:-translate-y-0.5 hover:transform hover:bg-[#ffb74d]! hover:shadow-md focus:shadow-[0_0_0_2px_rgba(252,209,90,0.3)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
3+
:is="as"
4+
:type="as === 'button' ? 'button' : undefined"
5+
:class="buttonClasses"
66
v-bind="$attrs"
77
>
88
<slot />
99
</component>
1010
</template>
1111

1212
<script setup>
13-
defineProps({
13+
import { computed } from 'vue';
14+
15+
const props = defineProps({
1416
as: {
1517
type: String,
1618
default: 'button',
1719
},
20+
variant: {
21+
type: String,
22+
default: 'primary',
23+
validator: (value) => ['primary', 'secondary'].includes(value),
24+
},
25+
});
26+
27+
const buttonClasses = computed(() => {
28+
const baseClasses =
29+
'inline-flex h-11 cursor-pointer gap-1.5 items-center justify-center rounded-lg px-5! py-2 text-base font-medium no-underline! transition-all! duration-200 not-disabled:hover:-translate-y-0.5 not-disabled:hover:transform not-disabled:hover:shadow-md focus:outline-none disabled:cursor-not-allowed disabled:opacity-60';
30+
31+
if (props.variant === 'secondary') {
32+
return `${baseClasses} bg-soft-bg! text-text1! border border-primary! hover:!bg-primary/10 focus:shadow-[0_0_0_2px_rgba(252,209,90,0.3)]`;
33+
}
34+
35+
// Primary variant (default)
36+
return `${baseClasses} border-none bg-primary! text-[#1e1e1e]! focus:shadow-[0_0_0_2px_rgba(252,209,90,0.3)]`;
1837
});
1938
</script>

0 commit comments

Comments
 (0)