Skip to content

Commit c663ff9

Browse files
mmaxencemmaxence
committed
feat: implement consistent BlurReveal across all section headers
- Update homepage sections to use SectionHeader component: - Philosophy section: Replace manual header with SectionHeader - Values section: Replace manual header with SectionHeader - Team and Tools: Already using SectionTitle with BlurReveal - Update Brand page sections: - Replace SectionPlaceholder with proper sections using SectionHeader - All three sections (principles, guidelines, resources) now have BlurReveal - Maintain AnimatedSection wrapper for consistent page animations - Update Product page sections: - ProductPrinciples: Already using BlurReveal + SectionTitle - ProductGuidelines: Replace manual header with SectionHeader - All Product sub-pages already using SectionHeader - Benefits achieved: - Consistent BlurReveal animation across ALL section headers - Unified visual experience across entire application - All submenu sections now have proper BlurReveal effects - Maintained existing functionality while improving consistency - Cleaned up unused imports and optimized code - Pages now with consistent BlurReveal: - Homepage: Mission, Philosophy, Values, Team, Tools - Brand: Principles, Guidelines, Resources - Product: Principles, Guidelines, Resources - UX-patterns: Interaction Patterns, UI Kit, Micro-interactions - Visual-patterns: Design Principles, Visual Guidelines - Workflow-rituals: Core Principles, Workflow Steps
1 parent dfadf64 commit c663ff9

File tree

4 files changed

+56
-56
lines changed

4 files changed

+56
-56
lines changed

‎src/app/brand/page.tsx‎

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
import Header from '@/components/layout/Header';
44
import Footer from '@/components/layout/Footer';
55
import SectionNavigation from '@/components/ui/SectionNavigation';
6-
import SectionPlaceholder from '@/components/ui/SectionPlaceholder';
76
import { AnimatedSection } from '@/components/ui/AnimatedSection';
87
import { PageHero } from '@/components/ui/PageHero';
9-
import { Award, FileText, Download } from 'lucide-react';
8+
import { SectionHeader } from '@/components/ui/SectionHeader';
9+
import { Award } from 'lucide-react';
1010
import { useLanguage } from '@/contexts/LanguageContext';
1111

1212
export default function BrandPage() {
@@ -32,34 +32,43 @@ export default function BrandPage() {
3232
maxWidth="4xl"
3333
/>
3434

35-
<div id="principles" className="min-h-screen flex items-center justify-center scroll-mt-24">
36-
<AnimatedSection delay={0.1}>
37-
<SectionPlaceholder
38-
title={t('brand.principles.title')}
39-
description={t('brand.principles.description')}
40-
icon={Award}
41-
/>
42-
</AnimatedSection>
35+
<div id="principles" className="scroll-mt-24">
36+
<section className="py-20 px-4 sm:px-6 lg:px-8">
37+
<div className="max-w-7xl mx-auto">
38+
<AnimatedSection delay={0.1}>
39+
<SectionHeader
40+
title={t('brand.principles.title')}
41+
description={t('brand.principles.description')}
42+
/>
43+
</AnimatedSection>
44+
</div>
45+
</section>
4346
</div>
4447

45-
<div id="guidelines" className="min-h-screen flex items-center justify-center scroll-mt-24">
46-
<AnimatedSection delay={0.2}>
47-
<SectionPlaceholder
48-
title={t('brand.guidelines.title')}
49-
description={t('brand.guidelines.description')}
50-
icon={FileText}
51-
/>
52-
</AnimatedSection>
48+
<div id="guidelines" className="scroll-mt-24">
49+
<section className="py-20 px-4 sm:px-6 lg:px-8">
50+
<div className="max-w-7xl mx-auto">
51+
<AnimatedSection delay={0.2}>
52+
<SectionHeader
53+
title={t('brand.guidelines.title')}
54+
description={t('brand.guidelines.description')}
55+
/>
56+
</AnimatedSection>
57+
</div>
58+
</section>
5359
</div>
5460

55-
<div id="resources" className="min-h-screen flex items-center justify-center scroll-mt-24">
56-
<AnimatedSection delay={0.3}>
57-
<SectionPlaceholder
58-
title={t('brand.resources.title')}
59-
description={t('brand.resources.description')}
60-
icon={Download}
61-
/>
62-
</AnimatedSection>
61+
<div id="resources" className="scroll-mt-24">
62+
<section className="py-20 px-4 sm:px-6 lg:px-8">
63+
<div className="max-w-7xl mx-auto">
64+
<AnimatedSection delay={0.3}>
65+
<SectionHeader
66+
title={t('brand.resources.title')}
67+
description={t('brand.resources.description')}
68+
/>
69+
</AnimatedSection>
70+
</div>
71+
</section>
6372
</div>
6473
<Footer />
6574
</main>

‎src/app/page.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import InteractiveMinimap from '@/components/ui/InteractiveMinimap';
1313
import SectionNavigation from '@/components/ui/SectionNavigation';
1414
import { ParallaxSection } from '@/components/ui/ParallaxSection';
1515
import { LanguageTransitionWrapper } from '@/components/layout/LanguageTransitionWrapper';
16+
import { SectionHeader } from '@/components/ui/SectionHeader';
1617
import { useLanguage } from '@/contexts/LanguageContext';
1718

1819
export default function Home() {
@@ -63,14 +64,12 @@ export default function Home() {
6364
<ParallaxSection speed={0.4} offset={100}>
6465
<section id="philosophy" className="py-20 scroll-mt-24">
6566
<div className="max-w-7xl mx-auto px-8">
66-
<div className="text-center mb-16">
67-
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-2 bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">
68-
{t('philosophy.title')}
69-
</h2>
70-
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
71-
{t('philosophy.subtitle')}
72-
</p>
73-
</div>
67+
<SectionHeader
68+
title={t('philosophy.title')}
69+
description={t('philosophy.subtitle')}
70+
titleSize="5xl"
71+
descriptionSize="xl"
72+
/>
7473

7574
<div className="max-w-4xl mx-auto">
7675
<div className="text-center p-12 bg-gradient-to-br from-background to-muted/20 rounded-2xl border border-border">

‎src/components/product/ProductGuidelines.tsx‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { motion } from 'framer-motion';
44
import { useLanguage } from '@/contexts/LanguageContext';
55
import { MousePointer, Eye, Workflow, ArrowRight } from 'lucide-react';
66
import { useRouter } from 'next/navigation';
7+
import { SectionHeader } from '../ui/SectionHeader';
78

89
const ProductGuidelines = () => {
910
const { t } = useLanguage();
@@ -52,20 +53,12 @@ const ProductGuidelines = () => {
5253
<section className="py-20 px-4 sm:px-6 lg:px-8">
5354
<div className="max-w-7xl mx-auto">
5455
{/* Section Header */}
55-
<motion.div
56-
initial={{ opacity: 0, y: 30 }}
57-
whileInView={{ opacity: 1, y: 0 }}
58-
transition={{ duration: 0.6 }}
59-
viewport={{ once: true }}
60-
className="text-center mb-16"
61-
>
62-
<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">
63-
{t('product.guidelines.title')}
64-
</h2>
65-
<p className="text-xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
66-
{t('product.guidelines.intro')}
67-
</p>
68-
</motion.div>
56+
<SectionHeader
57+
title={t('product.guidelines.title')}
58+
description={t('product.guidelines.intro')}
59+
titleSize="5xl"
60+
descriptionSize="xl"
61+
/>
6962

7063
{/* Guidelines Cards */}
7164
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

‎src/components/sections/Values.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import { useState, useEffect, useRef } from 'react';
44
import { useLanguage } from '@/contexts/LanguageContext';
5+
import { SectionHeader } from '../ui/SectionHeader';
56

67
const BUZZVIL_VALUES = [
78
{
@@ -217,14 +218,12 @@ const Values = () => {
217218
return (
218219
<section className="py-20 px-4 sm:px-6 lg:px-8" ref={valuesSectionRef}>
219220
<div className="max-w-7xl mx-auto">
220-
<div className="text-center mb-16">
221-
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-2 bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">
222-
{t('values.title')}
223-
</h2>
224-
<p className="text-lg text-muted-foreground max-w-3xl mx-auto">
225-
{t('values.subtitle')}
226-
</p>
227-
</div>
221+
<SectionHeader
222+
title={t('values.title')}
223+
description={t('values.subtitle')}
224+
titleSize="5xl"
225+
descriptionSize="lg"
226+
/>
228227

229228
{/* Value Navigation */}
230229
<div className="flex justify-center mb-12 px-4">

0 commit comments

Comments
 (0)