Skip to content

Commit 8a9afa4

Browse files
ErwanDecosterErwanDecoster
committed
refactor: use-case components, using tailwind and fix some style issue
1 parent 4f4ebdb commit 8a9afa4

File tree

3 files changed

+129
-197
lines changed

3 files changed

+129
-197
lines changed

‎src/components/QuickStartCard.vue‎

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@
1111
</div>
1212
<div>
1313
<h3 class="mt-0! mb-1! text-lg font-semibold">{{ title }}</h3>
14-
<StatusBadge :status="status" :label="statusLabel" />
14+
<Badge
15+
:label="statusLabel"
16+
:variant="badgeVariant"
17+
:icon="statusIcon"
18+
/>
1519
</div>
1620
</div>
1721

@@ -42,7 +46,8 @@
4246

4347
<script setup lang="ts">
4448
import { Icon } from '@iconify/vue';
45-
import StatusBadge from './StatusBadge.vue';
49+
import { computed } from 'vue';
50+
import Badge from './Badge.vue';
4651
import Button from './ui/Button.vue';
4752
4853
interface Props {
@@ -60,5 +65,31 @@ interface Props {
6065
buttonDisabled?: boolean;
6166
}
6267
63-
withDefaults(defineProps<Props>(), {});
68+
const props = withDefaults(defineProps<Props>(), {});
69+
70+
const statusIcon = computed(() => {
71+
switch (props.status) {
72+
case 'available':
73+
return 'mdi:check-circle-outline';
74+
case 'interactive':
75+
return 'mdi:play-circle-outline';
76+
case 'coming-soon':
77+
return 'mdi:clock-outline';
78+
default:
79+
return 'mdi:check-circle-outline';
80+
}
81+
});
82+
83+
const badgeVariant = computed(() => {
84+
switch (props.status) {
85+
case 'available':
86+
return 'success';
87+
case 'coming-soon':
88+
return 'warning';
89+
case 'interactive':
90+
return 'primary';
91+
default:
92+
return 'success';
93+
}
94+
});
6495
</script>

‎src/components/UseCaseCard.vue‎

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

‎src/overview/use-cases.md‎

Lines changed: 23 additions & 194 deletions
Original file line numberDiff line numberDiff line change
@@ -4,201 +4,30 @@ Explore our demo applications showcasing iExec's privacy-preserving technologies
44
in action. Each use case demonstrates real-world applications of confidential
55
computing and decentralized data protection.
66

7-
<div class="use-cases-grid">
8-
<div class="use-case-card">
9-
<div class="card-image">
10-
<a href="https://demo.iex.ec/content-creator/" target="_blank" rel="noreferrer">
11-
<img src="/assets/content-creator-screenshot.png" alt="Content Creator Demo Screenshot">
12-
</a>
13-
</div>
14-
<div class="card-content">
15-
<h3>Content Creator</h3>
16-
<p class="card-description">
17-
A comprehensive demo showcasing iExec's DataProtector Sharing module. Experience privacy-first data sharing where content creators can securely share their work while maintaining full control over access permissions and monetization.
18-
</p>
19-
<div class="card-features">
20-
<span class="feature-tag">DataProtector</span>
21-
<span class="feature-tag">Privacy-First</span>
22-
<span class="feature-tag">Content Sharing</span>
23-
<span class="feature-tag">Monetization</span>
24-
</div>
25-
<div class="card-actions">
26-
<a href="https://demo.iex.ec/content-creator/" target="_blank" rel="noreferrer" class="demo-link">
27-
<Icon icon="mdi:art" height="18" />
28-
Try Live Demo
29-
</a>
30-
<a href="https://github.com/iExecBlockchainComputing/content-creator-usecase-demo" target="_blank" rel="noreferrer" class="github-link">
31-
<Icon icon="mdi:github" height="18" />
32-
View Code
33-
</a>
34-
</div>
35-
</div>
36-
</div>
37-
38-
<div class="use-case-card">
39-
<div class="card-image">
40-
<a href="https://demo.iex.ec/web3messaging/" target="_blank" rel="noreferrer">
41-
<img src="/assets/web3messaging-screenshot.png" alt="Web3Messaging Demo Screenshot">
42-
</a>
43-
</div>
44-
<div class="card-content">
45-
<h3>Web3Messaging</h3>
46-
<p class="card-description">
47-
Secure communication platform for Web3 users enabling privacy-preserving messaging through Web3Mail and Web3Telegram. Users maintain control over their data while enabling targeted communication and monetizing their engagement.
48-
</p>
49-
<div class="card-features">
50-
<span class="feature-tag">Web3Mail</span>
51-
<span class="feature-tag">Web3Telegram</span>
52-
<span class="feature-tag">User Consent</span>
53-
<span class="feature-tag">Monetization</span>
54-
</div>
55-
<div class="card-actions">
56-
<a href="https://demo.iex.ec/web3messaging" target="_blank" rel="noreferrer" class="demo-link">
57-
<Icon icon="mdi:message-processing" height="18" />
58-
Try Live Demo
59-
</a>
60-
<a href="https://github.com/iExecBlockchainComputing/web3-messaging-usecase-demo" target="_blank" rel="noreferrer" class="github-link">
61-
<Icon icon="mdi:github" height="18" />
62-
View Code
63-
</a>
64-
</div>
65-
</div>
66-
</div>
7+
<div class="grid grid-cols-1 gap-8 my-8">
8+
<UseCaseCard
9+
title="Content Creator"
10+
description="A comprehensive demo showcasing iExec's DataProtector Sharing module. Experience privacy-first data sharing where content creators can securely share their work while maintaining full control over access permissions and monetization."
11+
imageUrl="/assets/content-creator-screenshot.png"
12+
imageAlt="Content Creator Demo Screenshot"
13+
:features="['DataProtector', 'Privacy-First', 'Content Sharing', 'Monetization']"
14+
demoUrl="https://demo.iex.ec/content-creator/"
15+
githubUrl="https://github.com/iExecBlockchainComputing/content-creator-usecase-demo"
16+
demoIcon="mdi:art"
17+
/>
18+
19+
<UseCaseCard
20+
title="Web3Messaging"
21+
description="Secure communication platform for Web3 users enabling privacy-preserving messaging through Web3Mail and Web3Telegram. Users maintain control over their data while enabling targeted communication and monetizing their engagement."
22+
imageUrl="/assets/web3messaging-screenshot.png"
23+
imageAlt="Web3Messaging Demo Screenshot"
24+
:features="['Web3Mail', 'Web3Telegram', 'User Consent', 'Monetization']"
25+
demoUrl="https://demo.iex.ec/web3messaging"
26+
githubUrl="https://github.com/iExecBlockchainComputing/web3-messaging-usecase-demo"
27+
demoIcon="mdi:message-processing"
28+
/>
6729
</div>
6830

69-
<style scoped>
70-
.use-cases-grid {
71-
display: grid;
72-
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
73-
gap: 2rem;
74-
margin: 2rem 0;
75-
}
76-
77-
.use-case-card {
78-
background: var(--vp-c-bg-soft);
79-
border: 1px solid var(--vp-c-border);
80-
border-radius: 12px;
81-
overflow: hidden;
82-
transition: all 0.3s ease;
83-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
84-
}
85-
86-
.use-case-card:hover {
87-
transform: translateY(-4px);
88-
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
89-
border-color: var(--vp-c-brand-1);
90-
}
91-
92-
.card-image {
93-
position: relative;
94-
overflow: hidden;
95-
}
96-
97-
.card-image img {
98-
width: 100%;
99-
height: 200px;
100-
object-fit: cover;
101-
transition: transform 0.3s ease;
102-
}
103-
104-
.card-image:hover img {
105-
transform: scale(1.05);
106-
}
107-
108-
.card-content {
109-
padding: 1.5rem;
110-
}
111-
112-
.card-content h3 {
113-
margin: 0 0 1rem 0;
114-
color: var(--vp-c-text-1);
115-
font-size: 1.5rem;
116-
font-weight: 600;
117-
}
118-
119-
.card-description {
120-
color: var(--vp-c-text-2);
121-
line-height: 1.6;
122-
margin-bottom: 1.5rem;
123-
font-size: 0.95rem;
124-
}
125-
126-
.card-features {
127-
display: flex;
128-
flex-wrap: wrap;
129-
gap: 0.5rem;
130-
margin-bottom: 1.5rem;
131-
}
132-
133-
.feature-tag {
134-
background: var(--vp-c-brand-soft);
135-
color: var(--vp-c-brand-1);
136-
padding: 0.25rem 0.75rem;
137-
border-radius: 20px;
138-
font-size: 0.8rem;
139-
font-weight: 500;
140-
border: 1px solid var(--vp-c-brand-2);
141-
}
142-
143-
.card-actions {
144-
display: flex;
145-
gap: 1rem;
146-
flex-wrap: wrap;
147-
}
148-
149-
.demo-link,
150-
.github-link {
151-
display: inline-flex;
152-
align-items: center;
153-
gap: 0.5rem;
154-
padding: 0.6rem 1.2rem;
155-
border-radius: 8px;
156-
text-decoration: none;
157-
font-weight: 500;
158-
font-size: 0.9rem;
159-
transition: all 0.2s ease;
160-
border: 1px solid transparent;
161-
}
162-
163-
.demo-link {
164-
background: var(--vp-c-brand-1);
165-
color: white;
166-
}
167-
168-
.demo-link:hover {
169-
background: var(--vp-c-brand-2);
170-
transform: translateY(-1px);
171-
}
172-
173-
.github-link {
174-
background: var(--vp-c-bg);
175-
color: var(--vp-c-text-1);
176-
border-color: var(--vp-c-border);
177-
}
178-
179-
.github-link:hover {
180-
background: var(--vp-c-bg-soft);
181-
border-color: var(--vp-c-text-2);
182-
transform: translateY(-1px);
183-
}
184-
185-
@media (max-width: 768px) {
186-
.use-cases-grid {
187-
grid-template-columns: 1fr;
188-
gap: 1.5rem;
189-
}
190-
191-
.card-actions {
192-
flex-direction: column;
193-
}
194-
195-
.demo-link,
196-
.github-link {
197-
justify-content: center;
198-
}
199-
}
200-
</style>
201-
20231
<script setup>
203-
import { Icon } from '@iconify/vue';
32+
import UseCaseCard from '../components/UseCaseCard.vue';
20433
</script>

0 commit comments

Comments
 (0)