feat: add BlogAccordion component and integrate with Blog page; include Pantone color content

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;

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'	]
+	},
+
+];

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 (
+	return (<MainAccordion items={CSSData} title='CSS Only' />);
-		<>
-			<MainAccordion items={CSSData} title='CSS Only' />
-		</>
-	);
 };
 
 export default BestPractices;

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}  />
+
+	</>
+
+		
 	);
 };