fix: correct intro screen icons and prevent auto-scroll on Product page

- Replace Menu icon with proper icons: Award for Brand, Code for Product
- Fix ProductPrinciples auto-scroll to only trigger on user interaction
- Prevent unwanted scroll behavior on Product page landing
- Maintain proper icon consistency with navigation header
- Improve user experience by eliminating unexpected scroll behavior

Author: mmaxence

src/app/design/brand/page.tsx

@@ -4,7 +4,7 @@ import Header from '@/components/Header';
 import Footer from '@/components/Footer';
 import SectionNavigation from '@/components/SectionNavigation';
 import SectionPlaceholder from '@/components/SectionPlaceholder';
-import { Award, FileText, Download, Menu } from 'lucide-react';
+import { Award, FileText, Download } from 'lucide-react';
 import { useLanguage } from '@/contexts/LanguageContext';
 import { motion } from 'framer-motion';
 
@@ -32,7 +32,7 @@ export default function BrandPage() {
             transition={{ duration: 0.8, ease: 'easeOut' }}
             className="mb-8"
           >
-            <Menu className="w-16 h-16 text-white mx-auto mb-6" />
+            <Award className="w-16 h-16 text-white mx-auto mb-6" />
           </motion.div>
 
           <motion.h1

src/app/design/product/page.tsx

@@ -5,7 +5,7 @@ import Footer from '@/components/Footer';
 import SectionNavigation from '@/components/SectionNavigation';
 import ProductPrinciples from '@/components/ProductPrinciples';
 import SectionPlaceholder from '@/components/SectionPlaceholder';
-import { FileText, Download, Menu } from 'lucide-react';
+import { FileText, Download, Code } from 'lucide-react';
 import { useLanguage } from '@/contexts/LanguageContext';
 import { motion } from 'framer-motion';
 
@@ -33,7 +33,7 @@ export default function ProductPage() {
             transition={{ duration: 0.8, ease: 'easeOut' }}
             className="mb-8"
           >
-            <Menu className="w-16 h-16 text-white mx-auto mb-6" />
+            <Code className="w-16 h-16 text-white mx-auto mb-6" />
           </motion.div>
 
           <motion.h1

src/components/ProductPrinciples.tsx

@@ -124,9 +124,9 @@ const ProductPrinciples = () => {
     };
   }, [isHovered, isPrinciplesInView, translatedPrinciples.length]);
 
-  // Auto-scroll to active principle tab
+  // Auto-scroll to active principle tab (only when user is interacting)
   useEffect(() => {
-    if (principlesNavRef.current) {
+    if (principlesNavRef.current && isHovered) {
       const activeButton = principlesNavRef.current.children[selectedPrinciple] as HTMLElement;
       if (activeButton) {
         activeButton.scrollIntoView({
@@ -136,7 +136,7 @@ const ProductPrinciples = () => {
         });
       }
     }
-  }, [selectedPrinciple]);
+  }, [selectedPrinciple, isHovered]);
 
   const containerVariants = {
     hidden: { opacity: 0 },