Skip to content

Commit b6df033

Browse files
mmaxencemmaxence
committed
feat: standardize new pages with consistent styling and structure
- Update all new Product Guidelines sub-pages to follow existing page patterns - Add SectionNavigation component to all new pages for consistent navigation - Implement proper intro screens with icons, titles, and descriptions - Structure content with proper section IDs and scroll-mt-24 classes - Apply consistent motion animations and responsive design - Fix build issues by switching from turbopack to standard Next.js build Pages updated: - /product/UX-patterns: Full interaction patterns with accordion UI - /product/visual-patterns: Design principles and visual guidelines - /product/workflow-rituals: Core principles and workflow steps All pages now feature: - Consistent header/footer layout - Section navigation with proper IDs - Intro screens with animated icons and titles - Proper section structure with scroll margins - Responsive design and motion animations - Back navigation to parent Guidelines page
1 parent 705860d commit b6df033

File tree

4 files changed

+360
-160
lines changed

4 files changed

+360
-160
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"scripts": {
66
"dev": "next dev --turbopack",
7-
"build": "next build --turbopack",
7+
"build": "next build",
88
"start": "next start",
99
"lint": "eslint"
1010
},

‎src/app/product/UX-patterns/page.tsx‎

Lines changed: 114 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { MousePointer, Palette, Zap, Smartphone, ChevronDown, CheckCircle, XCirc
77
import { useRouter } from 'next/navigation';
88
import Header from '@/components/layout/Header';
99
import Footer from '@/components/layout/Footer';
10+
import SectionNavigation from '@/components/ui/SectionNavigation';
1011

1112
const UXPatternsPage = () => {
1213
const { t } = useLanguage();
@@ -17,6 +18,12 @@ const UXPatternsPage = () => {
1718
setOpenPattern(openPattern === patternId ? null : patternId);
1819
};
1920

21+
const sections = [
22+
{ id: 'interaction-patterns', label: 'Interaction Patterns' },
23+
{ id: 'ui-kit', label: 'UI Kit' },
24+
{ id: 'micro-interactions', label: 'Micro-interactions' }
25+
];
26+
2027
const interactionPatterns = [
2128
{
2229
id: 'onLoad',
@@ -113,6 +120,8 @@ const UXPatternsPage = () => {
113120
<main className="min-h-screen relative">
114121
<Header />
115122

123+
<SectionNavigation sections={sections} />
124+
116125
{/* Back Button */}
117126
<div className="pt-20 px-4 sm:px-6 lg:px-8">
118127
<div className="max-w-7xl mx-auto">
@@ -127,34 +136,49 @@ const UXPatternsPage = () => {
127136
</div>
128137
</div>
129138

130-
<section className="py-20 px-4 sm:px-6 lg:px-8">
131-
<div className="max-w-7xl mx-auto">
132-
{/* Section Header */}
139+
{/* Intro Screen */}
140+
<section className="min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8">
141+
<div className="max-w-7xl mx-auto text-center">
133142
<motion.div
134143
initial={{ opacity: 0, y: 30 }}
135-
whileInView={{ opacity: 1, y: 0 }}
136-
transition={{ duration: 0.6 }}
137-
viewport={{ once: true }}
138-
className="text-center mb-16"
144+
animate={{ opacity: 1, y: 0 }}
145+
transition={{ duration: 0.8, ease: 'easeOut' }}
146+
className="mb-8"
139147
>
140-
<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">
141-
{t('product.guidelines.uxPatterns.title')}
142-
</h1>
143-
<p className="text-xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
144-
{t('product.guidelines.uxPatterns.description')}
145-
</p>
148+
<MousePointer className="w-16 h-16 text-white mx-auto mb-6" />
146149
</motion.div>
150+
151+
<motion.h1
152+
initial={{ opacity: 0, y: 30 }}
153+
animate={{ opacity: 1, y: 0 }}
154+
transition={{ duration: 0.8, delay: 0.2, ease: 'easeOut' }}
155+
className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent"
156+
>
157+
UX Patterns
158+
</motion.h1>
159+
160+
<motion.p
161+
initial={{ opacity: 0, y: 30 }}
162+
animate={{ opacity: 1, y: 0 }}
163+
transition={{ duration: 0.8, delay: 0.4, ease: 'easeOut' }}
164+
className="text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed"
165+
>
166+
{t('product.guidelines.uxPatterns.description')}
167+
</motion.p>
168+
</div>
169+
</section>
147170

148-
{/* Subsections */}
149-
<div className="space-y-20">
171+
<div id="interaction-patterns" className="scroll-mt-24">
172+
<section className="py-20 px-4 sm:px-6 lg:px-8">
173+
<div className="max-w-7xl mx-auto">
150174
{subsections.map((subsection, sectionIndex) => (
151175
<motion.div
152176
key={subsection.id}
153177
initial={{ opacity: 0, y: 30 }}
154178
whileInView={{ opacity: 1, y: 0 }}
155179
transition={{ duration: 0.6, delay: sectionIndex * 0.2 }}
156180
viewport={{ once: true }}
157-
className="bg-gradient-to-br from-background to-muted/20 rounded-2xl border border-border p-8 lg:p-12 shadow-2xl"
181+
className="bg-gradient-to-br from-background to-muted/20 rounded-2xl border border-border p-8 lg:p-12 shadow-2xl mb-20"
158182
>
159183
{/* Subsection Header */}
160184
<div className="flex items-start space-x-6 mb-8">
@@ -320,8 +344,80 @@ const UXPatternsPage = () => {
320344
</motion.div>
321345
))}
322346
</div>
323-
</div>
324-
</section>
347+
</section>
348+
</div>
349+
350+
<div id="ui-kit" className="min-h-screen flex items-center justify-center scroll-mt-24">
351+
<section className="py-20 px-4 sm:px-6 lg:px-8">
352+
<div className="max-w-7xl mx-auto text-center">
353+
<motion.div
354+
initial={{ opacity: 0, y: 30 }}
355+
whileInView={{ opacity: 1, y: 0 }}
356+
transition={{ duration: 0.6 }}
357+
viewport={{ once: true }}
358+
className="mb-8"
359+
>
360+
<Palette className="w-16 h-16 text-white mx-auto mb-6" />
361+
</motion.div>
362+
363+
<motion.h2
364+
initial={{ opacity: 0, y: 30 }}
365+
whileInView={{ opacity: 1, y: 0 }}
366+
transition={{ duration: 0.6, delay: 0.2 }}
367+
viewport={{ once: true }}
368+
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"
369+
>
370+
UI Kit
371+
</motion.h2>
372+
373+
<motion.p
374+
initial={{ opacity: 0, y: 30 }}
375+
whileInView={{ opacity: 1, y: 0 }}
376+
transition={{ duration: 0.6, delay: 0.4 }}
377+
viewport={{ once: true }}
378+
className="text-xl text-muted-foreground max-w-4xl mx-auto leading-relaxed"
379+
>
380+
From atoms to modules to views - our comprehensive design system components.
381+
</motion.p>
382+
</div>
383+
</section>
384+
</div>
385+
386+
<div id="micro-interactions" className="min-h-screen flex items-center justify-center scroll-mt-24">
387+
<section className="py-20 px-4 sm:px-6 lg:px-8">
388+
<div className="max-w-7xl mx-auto text-center">
389+
<motion.div
390+
initial={{ opacity: 0, y: 30 }}
391+
whileInView={{ opacity: 1, y: 0 }}
392+
transition={{ duration: 0.6 }}
393+
viewport={{ once: true }}
394+
className="mb-8"
395+
>
396+
<Zap className="w-16 h-16 text-white mx-auto mb-6" />
397+
</motion.div>
398+
399+
<motion.h2
400+
initial={{ opacity: 0, y: 30 }}
401+
whileInView={{ opacity: 1, y: 0 }}
402+
transition={{ duration: 0.6, delay: 0.2 }}
403+
viewport={{ once: true }}
404+
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"
405+
>
406+
Micro-interactions
407+
</motion.h2>
408+
409+
<motion.p
410+
initial={{ opacity: 0, y: 30 }}
411+
whileInView={{ opacity: 1, y: 0 }}
412+
transition={{ duration: 0.6, delay: 0.4 }}
413+
viewport={{ once: true }}
414+
className="text-xl text-muted-foreground max-w-4xl mx-auto leading-relaxed"
415+
>
416+
Delightful details that bring our interfaces to life.
417+
</motion.p>
418+
</div>
419+
</section>
420+
</div>
325421

326422
<Footer />
327423
</main>

‎src/app/product/visual-patterns/page.tsx‎

Lines changed: 108 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,18 @@ import { Eye, ArrowLeft } from 'lucide-react';
66
import { useRouter } from 'next/navigation';
77
import Header from '@/components/layout/Header';
88
import Footer from '@/components/layout/Footer';
9+
import SectionNavigation from '@/components/ui/SectionNavigation';
910

1011
const VisualPatternsPage = () => {
1112
const { t } = useLanguage();
1213
const router = useRouter();
1314

15+
const sections = [
16+
{ id: 'principles', label: 'Design Principles' },
17+
{ id: 'guidelines', label: 'Visual Guidelines' },
18+
{ id: 'coming-soon', label: 'Coming Soon' }
19+
];
20+
1421
const principles = [
1522
t('product.guidelines.visualPatterns.principle1'),
1623
t('product.guidelines.visualPatterns.principle2'),
@@ -22,6 +29,8 @@ const VisualPatternsPage = () => {
2229
<main className="min-h-screen relative">
2330
<Header />
2431

32+
<SectionNavigation sections={sections} />
33+
2534
{/* Back Button */}
2635
<div className="pt-20 px-4 sm:px-6 lg:px-8">
2736
<div className="max-w-7xl mx-auto">
@@ -36,52 +45,55 @@ const VisualPatternsPage = () => {
3645
</div>
3746
</div>
3847

39-
<section className="py-20 px-4 sm:px-6 lg:px-8">
40-
<div className="max-w-7xl mx-auto">
41-
{/* Section Header */}
48+
{/* Intro Screen */}
49+
<section className="min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8">
50+
<div className="max-w-7xl mx-auto text-center">
4251
<motion.div
4352
initial={{ opacity: 0, y: 30 }}
44-
whileInView={{ opacity: 1, y: 0 }}
45-
transition={{ duration: 0.6 }}
46-
viewport={{ once: true }}
47-
className="text-center mb-16"
53+
animate={{ opacity: 1, y: 0 }}
54+
transition={{ duration: 0.8, ease: 'easeOut' }}
55+
className="mb-8"
4856
>
49-
<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.visualPatterns.title')}
51-
</h1>
52-
<p className="text-xl text-muted-foreground max-w-4xl mx-auto leading-relaxed mb-4">
53-
{t('product.guidelines.visualPatterns.subtitle')}
54-
</p>
55-
<p className="text-lg text-muted-foreground max-w-4xl mx-auto leading-relaxed">
56-
{t('product.guidelines.visualPatterns.description')}
57-
</p>
57+
<Eye className="w-16 h-16 text-white mx-auto mb-6" />
5858
</motion.div>
59-
60-
{/* Visual Patterns Content */}
61-
<motion.div
59+
60+
<motion.h1
6261
initial={{ opacity: 0, y: 30 }}
63-
whileInView={{ opacity: 1, y: 0 }}
64-
transition={{ duration: 0.6, delay: 0.2 }}
65-
viewport={{ once: true }}
66-
className="bg-gradient-to-br from-background to-muted/20 rounded-2xl border border-border p-8 lg:p-12 shadow-2xl"
62+
animate={{ opacity: 1, y: 0 }}
63+
transition={{ duration: 0.8, delay: 0.2, ease: 'easeOut' }}
64+
className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent"
6765
>
68-
{/* Section Header */}
69-
<div className="flex items-start space-x-6 mb-8">
70-
<div className="w-16 h-16 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
71-
<Eye className="w-8 h-8 text-white" />
72-
</div>
73-
<div className="flex-1">
74-
<h2 className="text-2xl lg:text-3xl font-bold text-white mb-2">
75-
{t('product.guidelines.visualPatterns.title')}
76-
</h2>
77-
<p className="text-lg text-muted-foreground font-medium mb-4">
78-
{t('product.guidelines.visualPatterns.subtitle')}
79-
</p>
80-
<p className="text-muted-foreground leading-relaxed">
81-
{t('product.guidelines.visualPatterns.description')}
82-
</p>
83-
</div>
84-
</div>
66+
Visual Patterns
67+
</motion.h1>
68+
69+
<motion.p
70+
initial={{ opacity: 0, y: 30 }}
71+
animate={{ opacity: 1, y: 0 }}
72+
transition={{ duration: 0.8, delay: 0.4, ease: 'easeOut' }}
73+
className="text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed"
74+
>
75+
{t('product.guidelines.visualPatterns.description')}
76+
</motion.p>
77+
</div>
78+
</section>
79+
80+
<div id="principles" className="scroll-mt-24">
81+
<section className="py-20 px-4 sm:px-6 lg:px-8">
82+
<div className="max-w-7xl mx-auto">
83+
<motion.div
84+
initial={{ opacity: 0, y: 30 }}
85+
whileInView={{ opacity: 1, y: 0 }}
86+
transition={{ duration: 0.6 }}
87+
viewport={{ once: true }}
88+
className="text-center mb-16"
89+
>
90+
<h2 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">
91+
Design Principles
92+
</h2>
93+
<p className="text-xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
94+
{t('product.guidelines.visualPatterns.subtitle')}
95+
</p>
96+
</motion.div>
8597

8698
{/* Principles Grid */}
8799
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -105,26 +117,69 @@ const VisualPatternsPage = () => {
105117
</motion.div>
106118
))}
107119
</div>
120+
</div>
121+
</section>
122+
</div>
108123

109-
{/* Coming Soon Section */}
124+
<div id="guidelines" className="min-h-screen flex items-center justify-center scroll-mt-24">
125+
<section className="py-20 px-4 sm:px-6 lg:px-8">
126+
<div className="max-w-7xl mx-auto text-center">
110127
<motion.div
111-
initial={{ opacity: 0, y: 20 }}
128+
initial={{ opacity: 0, y: 30 }}
129+
whileInView={{ opacity: 1, y: 0 }}
130+
transition={{ duration: 0.6 }}
131+
viewport={{ once: true }}
132+
className="mb-8"
133+
>
134+
<Eye className="w-16 h-16 text-white mx-auto mb-6" />
135+
</motion.div>
136+
137+
<motion.h2
138+
initial={{ opacity: 0, y: 30 }}
139+
whileInView={{ opacity: 1, y: 0 }}
140+
transition={{ duration: 0.6, delay: 0.2 }}
141+
viewport={{ once: true }}
142+
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"
143+
>
144+
Visual Guidelines
145+
</motion.h2>
146+
147+
<motion.p
148+
initial={{ opacity: 0, y: 30 }}
112149
whileInView={{ opacity: 1, y: 0 }}
113150
transition={{ duration: 0.6, delay: 0.4 }}
114151
viewport={{ once: true }}
115-
className="mt-12 p-8 bg-gradient-to-r from-primary/10 to-primary/5 rounded-xl border border-primary/20"
152+
className="text-xl text-muted-foreground max-w-4xl mx-auto leading-relaxed"
116153
>
117-
<h3 className="text-xl font-semibold text-white mb-4">
118-
More Visual Patterns Coming Soon
119-
</h3>
120-
<p className="text-muted-foreground leading-relaxed">
121-
We&apos;re continuously expanding our visual pattern library with brand-specific guidelines,
122-
component variations, and design tokens. Check back regularly for updates.
123-
</p>
154+
Comprehensive visual standards and brand integration guidelines.
155+
</motion.p>
156+
</div>
157+
</section>
158+
</div>
159+
160+
<div id="coming-soon" className="min-h-screen flex items-center justify-center scroll-mt-24">
161+
<section className="py-20 px-4 sm:px-6 lg:px-8">
162+
<div className="max-w-7xl mx-auto">
163+
<motion.div
164+
initial={{ opacity: 0, y: 30 }}
165+
whileInView={{ opacity: 1, y: 0 }}
166+
transition={{ duration: 0.6 }}
167+
viewport={{ once: true }}
168+
className="text-center"
169+
>
170+
<div className="bg-gradient-to-r from-primary/10 to-primary/5 rounded-2xl border border-primary/20 p-12">
171+
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6 bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">
172+
More Visual Patterns Coming Soon
173+
</h2>
174+
<p className="text-xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
175+
We&apos;re continuously expanding our visual pattern library with brand-specific guidelines,
176+
component variations, and design tokens. Check back regularly for updates.
177+
</p>
178+
</div>
124179
</motion.div>
125-
</motion.div>
126-
</div>
127-
</section>
180+
</div>
181+
</section>
182+
</div>
128183

129184
<Footer />
130185
</main>

0 commit comments

Comments
 (0)