Skip to content

Commit 7d0d152

Browse files
mmaxencemmaxence
committed
feat: improve interaction patterns UI and naming
- Update mobile preview frame to 16:9 ratio (280px width, 157px height) - Make text responsive with break-words and responsive sizing - Rename interaction patterns to use actions: - OnLoad -> While loading - OnScroll -> Page Scroll - Notify -> Notify - Alert -> Alert - Pause & Ask -> Pause & Ask - Magnify -> Magnify - Screen to Screen -> Screen to Screen - Feedback -> Feedback - More to come -> More to come - Move UI relations from titles to tags in left column: - While loading: [Skeleton UI, Loading states] - Page Scroll: [Vertical scroll, Primary interaction] - Notify: [Toast, Banner] - Alert: [Toast, Urgent notification] - Pause & Ask: [Popup, Modal] - Magnify: [Bottomsheet, Expandable content] - Screen to Screen: [Navigation, Transitions] - Feedback: [Touch, Swipe, Haptic] - More to come: [Future patterns] - Add styled tags with primary color scheme - Improve mobile frame design with proper rounded corners - Enhance responsive text handling for better mobile experience
1 parent 8a8e3a6 commit 7d0d152

File tree

2 files changed

+46
-25
lines changed

2 files changed

+46
-25
lines changed

‎src/components/product/ProductGuidelines.tsx‎

Lines changed: 45 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -27,48 +27,57 @@ const ProductGuidelines = () => {
2727
const interactionPatterns = [
2828
{
2929
id: 'onLoad',
30-
title: t('product.guidelines.interactionPatterns.onLoad'),
31-
description: t('product.guidelines.interactionPatterns.onLoad.description')
30+
title: 'While loading',
31+
description: t('product.guidelines.interactionPatterns.onLoad.description'),
32+
tags: ['Skeleton UI', 'Loading states']
3233
},
3334
{
3435
id: 'onScroll',
35-
title: t('product.guidelines.interactionPatterns.onScroll'),
36-
description: t('product.guidelines.interactionPatterns.onScroll.description')
36+
title: 'Page Scroll',
37+
description: t('product.guidelines.interactionPatterns.onScroll.description'),
38+
tags: ['Vertical scroll', 'Primary interaction']
3739
},
3840
{
3941
id: 'notify',
40-
title: t('product.guidelines.interactionPatterns.notify'),
41-
description: t('product.guidelines.interactionPatterns.notify.description')
42+
title: 'Notify',
43+
description: t('product.guidelines.interactionPatterns.notify.description'),
44+
tags: ['Toast', 'Banner']
4245
},
4346
{
4447
id: 'alert',
45-
title: t('product.guidelines.interactionPatterns.alert'),
46-
description: t('product.guidelines.interactionPatterns.alert.description')
48+
title: 'Alert',
49+
description: t('product.guidelines.interactionPatterns.alert.description'),
50+
tags: ['Toast', 'Urgent notification']
4751
},
4852
{
4953
id: 'pauseAsk',
50-
title: t('product.guidelines.interactionPatterns.pauseAsk'),
51-
description: t('product.guidelines.interactionPatterns.pauseAsk.description')
54+
title: 'Pause & Ask',
55+
description: t('product.guidelines.interactionPatterns.pauseAsk.description'),
56+
tags: ['Popup', 'Modal']
5257
},
5358
{
5459
id: 'magnify',
55-
title: t('product.guidelines.interactionPatterns.magnify'),
56-
description: t('product.guidelines.interactionPatterns.magnify.description')
60+
title: 'Magnify',
61+
description: t('product.guidelines.interactionPatterns.magnify.description'),
62+
tags: ['Bottomsheet', 'Expandable content']
5763
},
5864
{
5965
id: 'screenToScreen',
60-
title: t('product.guidelines.interactionPatterns.screenToScreen'),
61-
description: t('product.guidelines.interactionPatterns.screenToScreen.description')
66+
title: 'Screen to Screen',
67+
description: t('product.guidelines.interactionPatterns.screenToScreen.description'),
68+
tags: ['Navigation', 'Transitions']
6269
},
6370
{
6471
id: 'feedback',
65-
title: t('product.guidelines.interactionPatterns.feedback'),
66-
description: t('product.guidelines.interactionPatterns.feedback.description')
72+
title: 'Feedback',
73+
description: t('product.guidelines.interactionPatterns.feedback.description'),
74+
tags: ['Touch', 'Swipe', 'Haptic']
6775
},
6876
{
6977
id: 'moreToCome',
70-
title: t('product.guidelines.interactionPatterns.moreToCome'),
71-
description: t('product.guidelines.interactionPatterns.moreToCome.description')
78+
title: 'More to come',
79+
description: t('product.guidelines.interactionPatterns.moreToCome.description'),
80+
tags: ['Future patterns']
7281
}
7382
];
7483

@@ -314,6 +323,18 @@ const ProductGuidelines = () => {
314323
<p className="text-muted-foreground leading-relaxed text-sm">
315324
{pattern.description}
316325
</p>
326+
327+
{/* Tags */}
328+
<div className="flex flex-wrap gap-2 mt-3">
329+
{pattern.tags.map((tag, tagIndex) => (
330+
<span
331+
key={tagIndex}
332+
className="px-2 py-1 bg-primary/20 text-primary text-xs rounded-full border border-primary/30"
333+
>
334+
{tag}
335+
</span>
336+
))}
337+
</div>
317338
</div>
318339

319340
{/* Live Preview */}
@@ -322,12 +343,12 @@ const ProductGuidelines = () => {
322343
Live Preview
323344
</h6>
324345
<div className="relative">
325-
{/* Mobile Frame with proper phone ratio (9:16) */}
326-
<div className="w-full max-w-[200px] mx-auto bg-black rounded-[2rem] p-1 shadow-2xl">
327-
<div className="bg-muted/20 rounded-[1.5rem] h-[355px] flex items-center justify-center" style={{ aspectRatio: '9/16' }}>
328-
<div className="text-center space-y-3">
329-
<Smartphone className="w-8 h-8 text-muted-foreground mx-auto" />
330-
<p className="text-xs text-muted-foreground">
346+
{/* Mobile Frame with 16:9~10 ratio */}
347+
<div className="w-full max-w-[280px] mx-auto bg-black rounded-[1.5rem] p-1 shadow-2xl">
348+
<div className="bg-muted/20 rounded-[1.25rem] h-[157px] flex items-center justify-center" style={{ aspectRatio: '16/9' }}>
349+
<div className="text-center space-y-2 px-4">
350+
<Smartphone className="w-6 h-6 text-muted-foreground mx-auto" />
351+
<p className="text-xs sm:text-sm text-muted-foreground break-words">
331352
{pattern.title}
332353
</p>
333354
<p className="text-xs text-muted-foreground/70">

‎src/contexts/LanguageContext.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const translations = {
6161
// Philosophy
6262
'philosophy.title': 'Philosophy',
6363
'philosophy.subtitle': 'how we approach it',
64-
'philosophy.content': 'At Buzzvil, design shapes how people experience advertising—not as interruptions, but as moments of connection and delight.\nWe believe every touchpoint, from brand to product, should feel playful, engaging, and effortless.\nOur role is to unify how Buzzvil looks, feels, and behaves across the ecosystem, building trust, driving performance, and inspiring what AdTech can become.',
64+
'philosophy.content': 'At Buzzvil, design shapes how people experience advertising, not as interruptions, but as moments of connection and delight.\nWe believe every touchpoint, from brand to product, should feel playful, engaging, and effortless.\nOur role is to unify how Buzzvil looks, feels, and behaves across the ecosystem, building trust, driving performance, and inspiring what AdTech can become.',
6565

6666
// Ways of Working
6767
'waysOfWorking.title': 'Ways of Working',

0 commit comments

Comments
 (0)