Skip to content

Commit 1648c61

Browse files
mmaxencemmaxence
committed
feat: rename Integration Workflow to Workflow & Rituals and add Product submenu
- Rename 'Integration Workflow' to 'Workflow and Rituals' across all files - Update translation keys from integrationWorkflow to workflowRituals - Rename directory from /product/integration-workflow to /product/workflow-rituals - Update all component references to use new translation keys - Add Product submenu with indented items: - Main sections: Principles, Guidelines, Resources (with indentation) - Sub-pages: UX Patterns, Visual Patterns, Workflow & Rituals (with icons) - Desktop: Hover-activated dropdown with smooth animations - Mobile: Expandable accordion with proper indentation - Enhanced navigation features: - Visual hierarchy with indented submenu items - Icons for sub-pages (MousePointer, Eye, Workflow) - Smooth hover and click animations - Responsive design for both desktop and mobile - Proper state management for submenu visibility - Updated translations: - English: 'Workflow and Rituals' - Korean: '워크플로우와 의식' - All related principle and description keys updated
1 parent 68285df commit 1648c61

File tree

4 files changed

+168
-52
lines changed

4 files changed

+168
-52
lines changed

‎src/app/product/integration-workflow/page.tsx‎ renamed to ‎src/app/product/workflow-rituals/page.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ const IntegrationWorkflowPage = () => {
1212
const router = useRouter();
1313

1414
const principles = [
15-
t('product.guidelines.integrationWorkflow.principle1'),
16-
t('product.guidelines.integrationWorkflow.principle2'),
17-
t('product.guidelines.integrationWorkflow.principle3'),
18-
t('product.guidelines.integrationWorkflow.principle4')
15+
t('product.guidelines.workflowRituals.principle1'),
16+
t('product.guidelines.workflowRituals.principle2'),
17+
t('product.guidelines.workflowRituals.principle3'),
18+
t('product.guidelines.workflowRituals.principle4')
1919
];
2020

2121
return (
@@ -47,13 +47,13 @@ const IntegrationWorkflowPage = () => {
4747
className="text-center mb-16"
4848
>
4949
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">
50-
{t('product.guidelines.integrationWorkflow.title')}
50+
{t('product.guidelines.workflowRituals.title')}
5151
</h1>
5252
<p className="text-xl text-muted-foreground max-w-4xl mx-auto leading-relaxed mb-4">
53-
{t('product.guidelines.integrationWorkflow.subtitle')}
53+
{t('product.guidelines.workflowRituals.subtitle')}
5454
</p>
5555
<p className="text-lg text-muted-foreground max-w-4xl mx-auto leading-relaxed">
56-
{t('product.guidelines.integrationWorkflow.description')}
56+
{t('product.guidelines.workflowRituals.description')}
5757
</p>
5858
</motion.div>
5959

@@ -72,13 +72,13 @@ const IntegrationWorkflowPage = () => {
7272
</div>
7373
<div className="flex-1">
7474
<h2 className="text-2xl lg:text-3xl font-bold text-white mb-2">
75-
{t('product.guidelines.integrationWorkflow.title')}
75+
{t('product.guidelines.workflowRituals.title')}
7676
</h2>
7777
<p className="text-lg text-muted-foreground font-medium mb-4">
78-
{t('product.guidelines.integrationWorkflow.subtitle')}
78+
{t('product.guidelines.workflowRituals.subtitle')}
7979
</p>
8080
<p className="text-muted-foreground leading-relaxed">
81-
{t('product.guidelines.integrationWorkflow.description')}
81+
{t('product.guidelines.workflowRituals.description')}
8282
</p>
8383
</div>
8484
</div>

‎src/components/layout/Header.tsx‎

Lines changed: 140 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,35 @@
22

33
import { useState } from 'react';
44
import { motion, AnimatePresence } from 'framer-motion';
5-
import { Menu, X, BookOpen, Award, Code } from 'lucide-react';
5+
import { Menu, X, BookOpen, Award, Code, ChevronDown, MousePointer, Eye, Workflow } from 'lucide-react';
66
import { useLanguage } from '@/contexts/LanguageContext';
77
import { useRouter } from 'next/navigation';
88
import LanguageSwitcher from './LanguageSwitcher';
99
import Logo from './Logo';
1010

1111
const Header = () => {
1212
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
13+
const [isProductSubmenuOpen, setIsProductSubmenuOpen] = useState(false);
1314
const { t } = useLanguage();
1415
const router = useRouter();
1516

1617
const navItems = [
1718
{ name: t('nav.foundations'), href: '/', icon: BookOpen },
1819
{ name: t('nav.brand'), href: '/brand', icon: Award },
19-
{ name: t('nav.product'), href: '/product', icon: Code },
20+
{
21+
name: t('nav.product'),
22+
href: '/product',
23+
icon: Code,
24+
hasSubmenu: true,
25+
submenuItems: [
26+
{ name: t('product.sections.principles'), href: '/product#principles' },
27+
{ name: t('product.sections.guidelines'), href: '/product#guidelines' },
28+
{ name: t('product.sections.resources'), href: '/product#resources' },
29+
{ name: 'UX Patterns', href: '/product/UX-patterns', icon: MousePointer },
30+
{ name: 'Visual Patterns', href: '/product/visual-patterns', icon: Eye },
31+
{ name: 'Workflow & Rituals', href: '/product/workflow-rituals', icon: Workflow },
32+
]
33+
},
2034
];
2135

2236
return (
@@ -38,17 +52,70 @@ const Header = () => {
3852
{/* Desktop Navigation */}
3953
<nav className="hidden md:flex items-center space-x-8">
4054
{navItems.map((item, index) => (
41-
<motion.button
42-
key={item.name}
43-
whileHover={{ y: -1 }}
44-
className="flex items-center space-x-2 text-muted-foreground hover:text-foreground transition-colors duration-150 group cursor-pointer"
45-
onClick={() => {
46-
router.push(item.href);
47-
}}
48-
>
49-
<item.icon className="w-4 h-4 text-white group-hover:scale-105 transition-transform duration-150" />
50-
<span className="font-medium">{item.name}</span>
51-
</motion.button>
55+
<div key={item.name} className="relative">
56+
{item.hasSubmenu ? (
57+
<div
58+
onMouseEnter={() => setIsProductSubmenuOpen(true)}
59+
onMouseLeave={() => setIsProductSubmenuOpen(false)}
60+
className="relative"
61+
>
62+
<motion.button
63+
whileHover={{ y: -1 }}
64+
className="flex items-center space-x-2 text-muted-foreground hover:text-foreground transition-colors duration-150 group cursor-pointer"
65+
onClick={() => {
66+
router.push(item.href);
67+
}}
68+
>
69+
<item.icon className="w-4 h-4 text-white group-hover:scale-105 transition-transform duration-150" />
70+
<span className="font-medium">{item.name}</span>
71+
<ChevronDown className={`w-4 h-4 transition-transform duration-200 ${isProductSubmenuOpen ? 'rotate-180' : ''}`} />
72+
</motion.button>
73+
74+
{/* Submenu */}
75+
<AnimatePresence>
76+
{isProductSubmenuOpen && (
77+
<motion.div
78+
initial={{ opacity: 0, y: 10 }}
79+
animate={{ opacity: 1, y: 0 }}
80+
exit={{ opacity: 0, y: 10 }}
81+
transition={{ duration: 0.2 }}
82+
className="absolute top-full left-0 mt-2 w-64 bg-background/98 backdrop-blur-sm border border-border rounded-lg shadow-xl z-50"
83+
>
84+
<div className="py-2">
85+
{item.submenuItems?.map((subItem, subIndex) => (
86+
<motion.button
87+
key={subItem.name}
88+
whileHover={{ x: 4 }}
89+
onClick={() => {
90+
router.push(subItem.href);
91+
setIsProductSubmenuOpen(false);
92+
}}
93+
className="w-full flex items-center space-x-3 px-4 py-3 text-left hover:bg-accent transition-colors"
94+
>
95+
{subItem.icon && <subItem.icon className="w-4 h-4 text-muted-foreground" />}
96+
<span className={`font-medium ${subItem.icon ? 'text-muted-foreground' : 'text-foreground pl-7'}`}>
97+
{subItem.name}
98+
</span>
99+
</motion.button>
100+
))}
101+
</div>
102+
</motion.div>
103+
)}
104+
</AnimatePresence>
105+
</div>
106+
) : (
107+
<motion.button
108+
whileHover={{ y: -1 }}
109+
className="flex items-center space-x-2 text-muted-foreground hover:text-foreground transition-colors duration-150 group cursor-pointer"
110+
onClick={() => {
111+
router.push(item.href);
112+
}}
113+
>
114+
<item.icon className="w-4 h-4 text-white group-hover:scale-105 transition-transform duration-150" />
115+
<span className="font-medium">{item.name}</span>
116+
</motion.button>
117+
)}
118+
</div>
52119
))}
53120
<LanguageSwitcher />
54121
</nav>
@@ -80,17 +147,66 @@ const Header = () => {
80147
>
81148
<div className="px-4 py-4 space-y-2">
82149
{navItems.map((item, index) => (
83-
<motion.button
84-
key={item.name}
85-
onClick={() => {
86-
setIsMobileMenuOpen(false);
87-
router.push(item.href);
88-
}}
89-
className="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-accent transition-colors cursor-pointer w-full text-left"
90-
>
91-
<item.icon className="w-5 h-5 text-white" />
92-
<span className="font-medium">{item.name}</span>
93-
</motion.button>
150+
<div key={item.name}>
151+
{item.hasSubmenu ? (
152+
<div>
153+
<motion.button
154+
onClick={() => {
155+
setIsProductSubmenuOpen(!isProductSubmenuOpen);
156+
}}
157+
className="flex items-center justify-between w-full px-4 py-3 rounded-lg hover:bg-accent transition-colors cursor-pointer text-left"
158+
>
159+
<div className="flex items-center space-x-3">
160+
<item.icon className="w-5 h-5 text-white" />
161+
<span className="font-medium">{item.name}</span>
162+
</div>
163+
<ChevronDown className={`w-4 h-4 transition-transform duration-200 ${isProductSubmenuOpen ? 'rotate-180' : ''}`} />
164+
</motion.button>
165+
166+
<AnimatePresence>
167+
{isProductSubmenuOpen && (
168+
<motion.div
169+
initial={{ opacity: 0, height: 0 }}
170+
animate={{ opacity: 1, height: 'auto' }}
171+
exit={{ opacity: 0, height: 0 }}
172+
transition={{ duration: 0.2 }}
173+
className="overflow-hidden"
174+
>
175+
<div className="ml-6 space-y-1">
176+
{item.submenuItems?.map((subItem, subIndex) => (
177+
<motion.button
178+
key={subItem.name}
179+
onClick={() => {
180+
setIsMobileMenuOpen(false);
181+
setIsProductSubmenuOpen(false);
182+
router.push(subItem.href);
183+
}}
184+
className="flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-accent transition-colors cursor-pointer w-full text-left"
185+
>
186+
{subItem.icon && <subItem.icon className="w-4 h-4 text-muted-foreground" />}
187+
<span className={`font-medium text-sm ${subItem.icon ? 'text-muted-foreground' : 'text-foreground'}`}>
188+
{subItem.name}
189+
</span>
190+
</motion.button>
191+
))}
192+
</div>
193+
</motion.div>
194+
)}
195+
</AnimatePresence>
196+
</div>
197+
) : (
198+
<motion.button
199+
onClick={() => {
200+
setIsMobileMenuOpen(false);
201+
router.push(item.href);
202+
}}
203+
className="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-accent transition-colors cursor-pointer w-full text-left"
204+
>
205+
<item.icon className="w-5 h-5 text-white" />
206+
<span className="font-medium">{item.name}</span>
207+
</motion.button>
208+
)}
209+
</div>
94210
))}
95211
<div className="px-4 py-3">
96212
<LanguageSwitcher />

‎src/components/product/ProductGuidelines.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@ const ProductGuidelines = () => {
3535
]
3636
},
3737
{
38-
id: 'integration-workflow',
39-
title: t('product.guidelines.integrationWorkflow.title'),
40-
description: t('product.guidelines.integrationWorkflow.description'),
38+
id: 'workflow-rituals',
39+
title: t('product.guidelines.workflowRituals.title'),
40+
description: t('product.guidelines.workflowRituals.description'),
4141
icon: Workflow,
42-
href: '/product/integration-workflow',
42+
href: '/product/workflow-rituals',
4343
features: [
4444
'Design Handoff',
4545
'Development Process',

‎src/contexts/LanguageContext.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -236,13 +236,13 @@ const translations = {
236236
'product.guidelines.visualPatterns.principle3': 'Ensure visual patterns work across different screen sizes and contexts',
237237
'product.guidelines.visualPatterns.principle4': 'Balance brand expression with functional clarity',
238238

239-
'product.guidelines.integrationWorkflow.title': 'Integration Workflow',
240-
'product.guidelines.integrationWorkflow.subtitle': 'How design and development work together',
241-
'product.guidelines.integrationWorkflow.description': 'The process and tools that ensure our design patterns are properly implemented and maintained across all products.',
242-
'product.guidelines.integrationWorkflow.principle1': 'Establish clear handoff processes between design and development',
243-
'product.guidelines.integrationWorkflow.principle2': 'Use design tokens to maintain consistency across platforms',
244-
'product.guidelines.integrationWorkflow.principle3': 'Implement regular design reviews and quality assurance',
245-
'product.guidelines.integrationWorkflow.principle4': 'Document and version control all design system changes',
239+
'product.guidelines.workflowRituals.title': 'Workflow and Rituals',
240+
'product.guidelines.workflowRituals.subtitle': 'How design and development work together',
241+
'product.guidelines.workflowRituals.description': 'The process and tools that ensure our design patterns are properly implemented and maintained across all products.',
242+
'product.guidelines.workflowRituals.principle1': 'Establish clear handoff processes between design and development',
243+
'product.guidelines.workflowRituals.principle2': 'Use design tokens to maintain consistency across platforms',
244+
'product.guidelines.workflowRituals.principle3': 'Implement regular design reviews and quality assurance',
245+
'product.guidelines.workflowRituals.principle4': 'Document and version control all design system changes',
246246

247247
'product.guidelines.cta.title': 'Ready to implement these guidelines?',
248248
'product.guidelines.cta.description': 'Access our comprehensive design system resources and start building consistent product experiences.',
@@ -495,13 +495,13 @@ const translations = {
495495
'product.guidelines.visualPatterns.principle3': '다양한 화면 크기와 컨텍스트에서 시각적 패턴이 작동하도록 보장',
496496
'product.guidelines.visualPatterns.principle4': '브랜드 표현과 기능적 명확성의 균형 유지',
497497

498-
'product.guidelines.integrationWorkflow.title': '통합 워크플로우',
499-
'product.guidelines.integrationWorkflow.subtitle': '디자인과 개발이 함께 작업하는 방식',
500-
'product.guidelines.integrationWorkflow.description': '우리의 디자인 패턴이 모든 제품에서 적절히 구현되고 유지되도록 하는 프로세스와 도구입니다.',
501-
'product.guidelines.integrationWorkflow.principle1': '디자인과 개발 간의 명확한 인수인계 프로세스 수립',
502-
'product.guidelines.integrationWorkflow.principle2': '플랫폼 간 일관성을 유지하기 위해 디자인 토큰 사용',
503-
'product.guidelines.integrationWorkflow.principle3': '정기적인 디자인 리뷰와 품질 보증 구현',
504-
'product.guidelines.integrationWorkflow.principle4': '모든 디자인 시스템 변경사항 문서화 및 버전 관리',
498+
'product.guidelines.workflowRituals.title': '워크플로우와 의식',
499+
'product.guidelines.workflowRituals.subtitle': '디자인과 개발이 함께 작업하는 방식',
500+
'product.guidelines.workflowRituals.description': '우리의 디자인 패턴이 모든 제품에서 적절히 구현되고 유지되도록 하는 프로세스와 도구입니다.',
501+
'product.guidelines.workflowRituals.principle1': '디자인과 개발 간의 명확한 인수인계 프로세스 수립',
502+
'product.guidelines.workflowRituals.principle2': '플랫폼 간 일관성을 유지하기 위해 디자인 토큰 사용',
503+
'product.guidelines.workflowRituals.principle3': '정기적인 디자인 리뷰와 품질 보증 구현',
504+
'product.guidelines.workflowRituals.principle4': '모든 디자인 시스템 변경사항 문서화 및 버전 관리',
505505

506506
'product.guidelines.cta.title': '이 가이드라인을 구현할 준비가 되셨나요?',
507507
'product.guidelines.cta.description': '포괄적인 디자인 시스템 리소스에 액세스하고 일관된 제품 경험 구축을 시작하세요.',

0 commit comments

Comments
 (0)