Skip to content

Commit 5fc167f

Browse files
pavanpodilapavanpodila
committed
feat: integrate reusable components (Badge, CtaButton, FlutterBrand) and enhance workflow engine section
1 parent 4feb633 commit 5fc167f

File tree

12 files changed

+427
-148
lines changed

12 files changed

+427
-148
lines changed

‎website/.vitepress/theme/CustomHome.vue‎

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<script setup lang="ts">
22
import { Icon } from '@iconify/vue';
3+
import Badge from './components/Badge.vue';
4+
import CtaButton from './components/CtaButton.vue';
35
import SectionHeader from './components/SectionHeader.vue';
46
import FeatureCard from './components/FeatureCard.vue';
57
import DetailRow from './components/DetailRow.vue';
8+
import FlutterBrand from './components/FlutterBrand.vue';
69
import MarqueeSection from './components/MarqueeSection.vue';
710
import CodePreview from './components/CodePreview.vue';
811
import UseCaseCard from './components/UseCaseCard.vue';
@@ -444,35 +447,23 @@ const ctaBlinkCells = generateBlinkCells(15, 73);
444447

445448
<div class="hero-content">
446449
<div class="hero-text">
447-
<div class="badge badge-blue">
448-
<Icon icon="simple-icons:flutter" />
449-
<span>Built for Flutter</span>
450-
</div>
450+
<Badge icon="simple-icons:flutter" color="blue">Built for Flutter</Badge>
451451
<h1 class="hero-title">
452452
<span class="hero-title-static">Visualize any</span>
453453
<WordFlipper :words="flipperWords" :interval="1500" />
454454
</h1>
455455
<p class="hero-subtitle">
456456
A flexible, high-performance node-based flow editor for
457-
<span class="flutter-brand"
458-
><Icon icon="simple-icons:flutter" /> Flutter</span
459-
>. Build workflow editors, visual programming interfaces, and
457+
<FlutterBrand />. Build workflow editors, visual programming interfaces, and
460458
interactive diagrams.
461459
</p>
462460
<div class="hero-actions">
463-
<a
464-
href="/docs/getting-started/installation"
465-
class="hero-btn hero-btn-primary hero-btn-lg"
466-
>
461+
<CtaButton href="/docs/getting-started/installation" variant="primary" size="large">
467462
Get Started <Icon icon="ph:arrow-right-bold" />
468-
</a>
469-
<a
470-
href="https://flow.demo.vyuh.tech"
471-
class="hero-btn hero-btn-secondary hero-btn-lg"
472-
target="_blank"
473-
>
474-
<Icon icon="ph:play-fill" /> Live Demo
475-
</a>
463+
</CtaButton>
464+
<CtaButton href="https://flow.demo.vyuh.tech" icon="ph:play-fill" variant="secondary" size="large" external>
465+
Live Demo
466+
</CtaButton>
476467
</div>
477468
</div>
478469

‎website/.vitepress/theme/components/Badge.vue‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<script setup lang="ts">
2+
import { Icon } from '@iconify/vue';
3+
4+
defineProps<{
5+
icon?: string;
6+
color?: 'blue' | 'purple' | 'teal' | 'amber' | 'gray';
7+
}>();
8+
</script>
9+
10+
<template>
11+
<div class="badge" :class="color ? `badge-${color}` : 'badge-blue'">
12+
<Icon v-if="icon" :icon="icon" />
13+
<span><slot /></span>
14+
</div>
15+
</template>
16+
17+
<style>
18+
.badge {
19+
display: inline-flex;
20+
align-items: center;
21+
gap: 0.5rem;
22+
padding: 0.5rem 1rem;
23+
font-family: var(--vn-font-mono);
24+
font-size: 0.75rem;
25+
font-weight: 600;
26+
text-transform: uppercase;
27+
letter-spacing: 0.05em;
28+
border-radius: 100px;
29+
width: fit-content;
30+
}
31+
32+
.badge svg {
33+
width: 1em;
34+
height: 1em;
35+
}
36+
37+
/* Color variants */
38+
.badge-blue {
39+
background: var(--vn-blue-dim);
40+
color: var(--vn-blue);
41+
border: 1px solid color-mix(in srgb, var(--vn-blue) 30%, transparent);
42+
}
43+
44+
.badge-purple {
45+
background: var(--vn-purple-dim);
46+
color: var(--vn-purple);
47+
border: 1px solid color-mix(in srgb, var(--vn-purple) 30%, transparent);
48+
}
49+
50+
.badge-teal {
51+
background: var(--vn-teal-dim);
52+
color: var(--vn-teal);
53+
border: 1px solid color-mix(in srgb, var(--vn-teal) 30%, transparent);
54+
}
55+
56+
.badge-amber {
57+
background: var(--vn-amber-dim);
58+
color: var(--vn-amber);
59+
border: 1px solid color-mix(in srgb, var(--vn-amber) 30%, transparent);
60+
}
61+
62+
.badge-gray {
63+
background: var(--vn-bg-elevated);
64+
color: var(--vn-text-secondary);
65+
border: 1px solid var(--vn-border);
66+
}
67+
</style>

‎website/.vitepress/theme/components/CtaButton.vue‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<script setup lang="ts">
2+
import { Icon } from '@iconify/vue';
3+
4+
defineProps<{
5+
href: string;
6+
icon?: string;
7+
variant?: 'primary' | 'secondary';
8+
size?: 'default' | 'large';
9+
external?: boolean;
10+
}>();
11+
</script>
12+
13+
<template>
14+
<a
15+
:href="href"
16+
class="cta-button"
17+
:class="[
18+
variant === 'secondary' ? 'cta-button-secondary' : 'cta-button-primary',
19+
size === 'large' ? 'cta-button-lg' : ''
20+
]"
21+
:target="external ? '_blank' : undefined"
22+
>
23+
<Icon v-if="icon" :icon="icon" />
24+
<slot />
25+
</a>
26+
</template>
27+
28+
<style>
29+
.cta-button {
30+
display: inline-flex;
31+
align-items: center;
32+
gap: 0.5rem;
33+
padding: 0.875rem 1.75rem;
34+
font-family: var(--vn-font-sans);
35+
font-size: 0.95rem;
36+
font-weight: 600;
37+
border-radius: var(--vn-radius-md);
38+
cursor: pointer;
39+
transition: all 0.4s var(--vn-ease-out);
40+
text-decoration: none;
41+
border: none;
42+
}
43+
44+
.cta-button-primary {
45+
background: linear-gradient(135deg, var(--vn-blue), var(--vn-purple));
46+
color: white;
47+
box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
48+
}
49+
50+
.cta-button-primary:hover {
51+
box-shadow: 0 12px 40px rgba(37, 99, 235, 0.5), 0 0 60px rgba(139, 92, 246, 0.3);
52+
transform: translateY(-4px);
53+
}
54+
55+
.cta-button-secondary {
56+
background: var(--vn-bg-surface);
57+
color: var(--vn-text-primary);
58+
border: 1px solid var(--vn-border-strong);
59+
box-shadow: var(--vn-shadow);
60+
}
61+
62+
.cta-button-secondary:hover {
63+
border-color: var(--vn-blue);
64+
color: var(--vn-blue);
65+
background: var(--vn-blue-dim);
66+
}
67+
68+
.cta-button-lg {
69+
padding: 1.125rem 2.5rem;
70+
font-size: 1.1rem;
71+
}
72+
73+
/* Mobile responsiveness */
74+
@media (max-width: 767px) {
75+
.cta-button {
76+
justify-content: center;
77+
width: 100%;
78+
}
79+
}
80+
</style>

‎website/.vitepress/theme/components/DetailRow.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup lang="ts">
22
import { Icon } from '@iconify/vue';
3+
import Badge from './Badge.vue';
34
import MediaPlaceholder from './MediaPlaceholder.vue';
45
56
export interface MediaConfig {
@@ -23,10 +24,7 @@ defineProps<{
2324
<template>
2425
<div class="detail-row" :class="{ 'detail-row-reverse': reverse }">
2526
<div class="detail-content">
26-
<div class="badge" :class="'badge-' + tagColor">
27-
<Icon :icon="tagIcon" />
28-
<span>{{ tag }}</span>
29-
</div>
27+
<Badge :icon="tagIcon" :color="tagColor">{{ tag }}</Badge>
3028
<h2 class="section-title">{{ title }}</h2>
3129
<p class="detail-subtitle">{{ subtitle }}</p>
3230
<ul class="detail-bullets">

‎website/.vitepress/theme/components/FlutterBrand.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script setup lang="ts">
2+
import { Icon } from '@iconify/vue';
3+
</script>
4+
5+
<template>
6+
<span class="flutter-brand"><Icon icon="simple-icons:flutter" /> Flutter</span>
7+
</template>
8+
9+
<style>
10+
.flutter-brand {
11+
display: inline-flex;
12+
align-items: baseline;
13+
gap: 0.2em;
14+
font-weight: 900;
15+
color: var(--vn-blue);
16+
}
17+
18+
.flutter-brand svg {
19+
position: relative;
20+
top: 0.1em;
21+
}
22+
</style>

0 commit comments

Comments
 (0)