From 48650c3574c428ed55629379df4161f0b9cface3 Mon Sep 17 00:00:00 2001
From: Dan Dobos <dan@prowarehouse.nl>
Date: Fri, 17 Oct 2025 12:38:51 +0200
Subject: [PATCH] feat: add BlogAccordion component and integrate with Blog
 page; include Pantone color content

---
 .../blog-accordion/BlogAccordion.jsx          | 35 +++++++++++++++++++
 src/data/Data.jsx                             | 15 ++++++++
 src/pages/best-practices/BestPractices.jsx    |  6 +---
 src/pages/blog/Blog.jsx                       | 13 ++++++-
 4 files changed, 63 insertions(+), 6 deletions(-)
 create mode 100644 src/components/blog-accordion/BlogAccordion.jsx

diff --git a/src/components/blog-accordion/BlogAccordion.jsx b/src/components/blog-accordion/BlogAccordion.jsx
new file mode 100644
index 0000000..39a4af4
--- /dev/null
+++ b/src/components/blog-accordion/BlogAccordion.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+	Accordion,
+	AccordionSummary,
+	AccordionDetails,
+	Typography,
+} from '@mui/material';
+
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+const BlogAccordion = ({blogContent}) => {
+	return (
+        blogContent.map(({title, description}) => (
+		<Accordion
+			// defaultExpanded
+			// slotProps={{ unmountOnExit: true }}
+			key={title}
+			sx={{ background: 'transparent' }}>
+			<AccordionSummary
+				expandIcon={<ExpandMoreIcon />}
+				aria-controls='panel1a-content'
+									id='panel1a-header'>
+				<Typography variant='h5'>{ title }</Typography>
+			</AccordionSummary>
+			<AccordionDetails>
+               {description.map((lineContent, idx) => (
+                <Typography 
+                    key={idx} paragraph>{lineContent}</Typography>
+               ))}
+			</AccordionDetails>
+		</Accordion>
+	)));
+};
+
+export default BlogAccordion;
\ No newline at end of file
diff --git a/src/data/Data.jsx b/src/data/Data.jsx
index 59bf91d..46c06fd 100644
--- a/src/data/Data.jsx
+++ b/src/data/Data.jsx
@@ -99,3 +99,18 @@ a warming, brown hue imbued with richness. It nurtures us with its suggestion of
 of chocolate and coffee, answering our desire for comfort.`]
 
 
+export const  BlogContent = [
+	{
+		title: 'Panetone color 2025', 
+		description: [
+			'A Pantone color is a standardized, proprietary color created by the Pantone company, which assigns a unique code to each color. These colors are used in various industries to ensure color consistency across different materials and locations, as they provide a shared language for specifying and reproducing colors accurately. Pantone colors are often more vibrant and consistent than colors created with the standard CMYK or RGB color models.',
+			
+			'For 2025, the Pantone Color Institute selects PANTONE 17-1230 Mocha Mousse, a warming, brown hue imbued with richness. It nurtures us with its suggestion of the delectable qualities of chocolate and coffee, answering our desire for comfort.'	]
+	},
+	{
+		title: 'How I achieved 100% on Lighthouse Audit', 
+		description: [
+			'TBA'	]
+	},
+
+];
\ No newline at end of file
diff --git a/src/pages/best-practices/BestPractices.jsx b/src/pages/best-practices/BestPractices.jsx
index 0a75e39..bf57c8e 100644
--- a/src/pages/best-practices/BestPractices.jsx
+++ b/src/pages/best-practices/BestPractices.jsx
@@ -3,11 +3,7 @@ import { CSSData } from 'data/Data';
 import MainAccordion from 'components/main-accordion/MainAccordion';
 
 const BestPractices = () => {
-	return (
-		<>
-			<MainAccordion items={CSSData} title='CSS Only' />
-		</>
-	);
+	return (<MainAccordion items={CSSData} title='CSS Only' />);
 };
 
 export default BestPractices;
diff --git a/src/pages/blog/Blog.jsx b/src/pages/blog/Blog.jsx
index fbb319f..1288b06 100644
--- a/src/pages/blog/Blog.jsx
+++ b/src/pages/blog/Blog.jsx
@@ -1,8 +1,19 @@
 import React from 'react';
 
+import { BlogContent } from 'data/Data';
+
+import BlogAccordion from 'components/blog-accordion/BlogAccordion';
+
+
 const Blog = () => {
 	return (
-		<div style={{ minHeight: 'calc(100vh-128px)' }}>Blog ...in progress</div>
+		// <div style={{ minHeight: 'calc(100vh-128px)' }}>Blog ...in progress</div>
+	<>
+			<BlogAccordion blogContent={BlogContent}  />
+
+	</>
+
+		
 	);
 };