Skip to content

Commit a218382

Browse files
mmaxencemmaxence
committed
feat: standardize section headers with Product Principles styling
- Apply consistent section header styling across all new Product Guidelines pages - Use SectionTitle component with BlurReveal wrapper for all section headers - Standardize typography: text-4xl md:text-5xl font-bold text-white mb-6 for titles - Use text-xl text-muted-foreground max-w-3xl mx-auto for subtitles - Remove gradient text effects in favor of consistent white text styling Updated pages: - UX Patterns: Interaction Patterns, UI Kit, Micro-interactions headers - Visual Patterns: Design Principles, Visual Guidelines headers - Workflow & Rituals: Core Principles, Workflow Steps headers All section headers now match the exact styling used in Product Principles for a cohesive and professional appearance across the design system.
1 parent b6df033 commit a218382

File tree

3 files changed

+66
-75
lines changed

3 files changed

+66
-75
lines changed

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

Lines changed: 22 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { useRouter } from 'next/navigation';
88
import Header from '@/components/layout/Header';
99
import Footer from '@/components/layout/Footer';
1010
import SectionNavigation from '@/components/ui/SectionNavigation';
11+
import { SectionTitle } from '@/components/ui/SectionTitle';
12+
import { BlurReveal } from '@/components/ui/BlurReveal';
1113

1214
const UXPatternsPage = () => {
1315
const { t } = useLanguage();
@@ -360,25 +362,16 @@ const UXPatternsPage = () => {
360362
<Palette className="w-16 h-16 text-white mx-auto mb-6" />
361363
</motion.div>
362364

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>
365+
<BlurReveal>
366+
<SectionTitle>
367+
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
368+
UI Kit
369+
</h2>
370+
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
371+
From atoms to modules to views - our comprehensive design system components.
372+
</p>
373+
</SectionTitle>
374+
</BlurReveal>
382375
</div>
383376
</section>
384377
</div>
@@ -396,25 +389,16 @@ const UXPatternsPage = () => {
396389
<Zap className="w-16 h-16 text-white mx-auto mb-6" />
397390
</motion.div>
398391

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>
392+
<BlurReveal>
393+
<SectionTitle>
394+
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
395+
Micro-interactions
396+
</h2>
397+
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
398+
Delightful details that bring our interfaces to life.
399+
</p>
400+
</SectionTitle>
401+
</BlurReveal>
418402
</div>
419403
</section>
420404
</div>

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

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { useRouter } from 'next/navigation';
77
import Header from '@/components/layout/Header';
88
import Footer from '@/components/layout/Footer';
99
import SectionNavigation from '@/components/ui/SectionNavigation';
10+
import { SectionTitle } from '@/components/ui/SectionTitle';
11+
import { BlurReveal } from '@/components/ui/BlurReveal';
1012

1113
const VisualPatternsPage = () => {
1214
const { t } = useLanguage();
@@ -87,12 +89,16 @@ const VisualPatternsPage = () => {
8789
viewport={{ once: true }}
8890
className="text-center mb-16"
8991
>
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>
92+
<BlurReveal>
93+
<SectionTitle>
94+
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
95+
Design Principles
96+
</h2>
97+
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
98+
{t('product.guidelines.visualPatterns.subtitle')}
99+
</p>
100+
</SectionTitle>
101+
</BlurReveal>
96102
</motion.div>
97103

98104
{/* Principles Grid */}
@@ -134,25 +140,16 @@ const VisualPatternsPage = () => {
134140
<Eye className="w-16 h-16 text-white mx-auto mb-6" />
135141
</motion.div>
136142

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 }}
149-
whileInView={{ opacity: 1, y: 0 }}
150-
transition={{ duration: 0.6, delay: 0.4 }}
151-
viewport={{ once: true }}
152-
className="text-xl text-muted-foreground max-w-4xl mx-auto leading-relaxed"
153-
>
154-
Comprehensive visual standards and brand integration guidelines.
155-
</motion.p>
143+
<BlurReveal>
144+
<SectionTitle>
145+
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
146+
Visual Guidelines
147+
</h2>
148+
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
149+
Comprehensive visual standards and brand integration guidelines.
150+
</p>
151+
</SectionTitle>
152+
</BlurReveal>
156153
</div>
157154
</section>
158155
</div>

‎src/app/product/workflow-rituals/page.tsx‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { useRouter } from 'next/navigation';
77
import Header from '@/components/layout/Header';
88
import Footer from '@/components/layout/Footer';
99
import SectionNavigation from '@/components/ui/SectionNavigation';
10+
import { SectionTitle } from '@/components/ui/SectionTitle';
11+
import { BlurReveal } from '@/components/ui/BlurReveal';
1012

1113
const WorkflowRitualsPage = () => {
1214
const { t } = useLanguage();
@@ -87,12 +89,16 @@ const WorkflowRitualsPage = () => {
8789
viewport={{ once: true }}
8890
className="text-center mb-16"
8991
>
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-
Core Principles
92-
</h2>
93-
<p className="text-xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
94-
{t('product.guidelines.workflowRituals.subtitle')}
95-
</p>
92+
<BlurReveal>
93+
<SectionTitle>
94+
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
95+
Core Principles
96+
</h2>
97+
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
98+
{t('product.guidelines.workflowRituals.subtitle')}
99+
</p>
100+
</SectionTitle>
101+
</BlurReveal>
96102
</motion.div>
97103

98104
{/* Principles Grid */}
@@ -131,12 +137,16 @@ const WorkflowRitualsPage = () => {
131137
viewport={{ once: true }}
132138
className="text-center mb-16"
133139
>
134-
<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">
135-
Workflow Steps
136-
</h2>
137-
<p className="text-xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
138-
Our streamlined process for design and development collaboration.
139-
</p>
140+
<BlurReveal>
141+
<SectionTitle>
142+
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
143+
Workflow Steps
144+
</h2>
145+
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
146+
Our streamlined process for design and development collaboration.
147+
</p>
148+
</SectionTitle>
149+
</BlurReveal>
140150
</motion.div>
141151

142152
{/* Workflow Steps */}

0 commit comments

Comments
 (0)