opening article page when clicking on card

src/blog/Blog.tsx

@@ -7,7 +7,85 @@ import Article from './components/Article';
 import Latest from './components/Latest';
 import Footer from './components/Footer';
 
+const cardData = [
+  {
+    img: 'https://picsum.photos/800/450?random=1',
+    tag: 'Engineering',
+    title: 'Revolutionizing software development with cutting-edge tools',
+    description:
+      'Our latest engineering tools are designed to streamline workflows and boost productivity. Discover how these innovations are transforming the software development landscape.',
+    content:
+      'Our latest engineering tools are designed to streamline workflows and boost productivity. Discover how these innovations are transforming the software development landscape.',
+    authors: [
+      { name: 'Remy Sharp', avatar: '/static/images/avatar/1.jpg' },
+      { name: 'Travis Howard', avatar: '/static/images/avatar/2.jpg' },
+    ],
+  },
+  {
+    img: 'https://picsum.photos/800/450?random=2',
+    tag: 'Product',
+    title: 'Innovative product features that drive success',
+    description:
+      'Explore the key features of our latest product release that are helping businesses achieve their goals. From user-friendly interfaces to robust functionality, learn why our product stands out.',
+    content:
+      'Explore the key features of our latest product release that are helping businesses achieve their goals. From user-friendly interfaces to robust functionality, learn why our product stands out.',
+    authors: [{ name: 'Erica Johns', avatar: '/static/images/avatar/6.jpg' }],
+  },
+  {
+    img: 'https://picsum.photos/800/450?random=3',
+    tag: 'Design',
+    title: 'Designing for the future: trends and insights',
+    description:
+      'Stay ahead of the curve with the latest design trends and insights. Our design team shares their expertise on creating intuitive and visually stunning user experiences.',
+    content:
+      'Stay ahead of the curve with the latest design trends and insights. Our design team shares their expertise on creating intuitive and visually stunning user experiences.',
+    authors: [{ name: 'Kate Morrison', avatar: '/static/images/avatar/7.jpg' }],
+  },
+  {
+    img: 'https://picsum.photos/800/450?random=4',
+    tag: 'Company',
+    title: "Our company's journey: milestones and achievements",
+    description:
+      "Take a look at our company's journey and the milestones we've achieved along the way. From humble beginnings to industry leader, discover our story of growth and success.",
+    content:
+      "Take a look at our company's journey and the milestones we've achieved along the way. From humble beginnings to industry leader, discover our story of growth and success.",
+    authors: [{ name: 'Cindy Baker', avatar: '/static/images/avatar/3.jpg' }],
+  },
+  {
+    img: 'https://picsum.photos/800/450?random=45',
+    tag: 'Engineering',
+    title: 'Pioneering sustainable engineering solutions',
+    description:
+      "Learn about our commitment to sustainability and the innovative engineering solutions we're implementing to create a greener future. Discover the impact of our eco-friendly initiatives.",
+    content:
+      "Learn about our commitment to sustainability and the innovative engineering solutions we're implementing to create a greener future. Discover the impact of our eco-friendly initiatives.",
+    authors: [
+      { name: 'Agnes Walker', avatar: '/static/images/avatar/4.jpg' },
+      { name: 'Trevor Henderson', avatar: '/static/images/avatar/5.jpg' },
+    ],
+  },
+  {
+    img: 'https://picsum.photos/800/450?random=6',
+    tag: 'Product',
+    title: 'Maximizing efficiency with our latest product updates',
+    description:
+      'Our recent product updates are designed to help you maximize efficiency and achieve more. Get a detailed overview of the new features and improvements that can elevate your workflow.',
+    content:
+      'Our recent product updates are designed to help you maximize efficiency and achieve more. Get a detailed overview of the new features and improvements that can elevate your workflow.',
+    authors: [{ name: 'Travis Howard', avatar: '/static/images/avatar/2.jpg' }],
+  },
+];
+
 export default function Blog(props: { disableCustomTheme?: boolean }) {
+  const [selectedArticle, setSelectedArticle] = React.useState<number | null>(null);
+
+  const handleSelectArticle = (index: number) => {
+    setSelectedArticle(index);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleBack = () => setSelectedArticle(null);
+
   return (
     <AppTheme {...props}>
       <CssBaseline enableColorScheme />
@@ -17,9 +95,11 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
         component="main"
         sx={{ display: 'flex', flexDirection: 'column', my: 16, gap: 4 }}
       >
-        <MainContent />
+        {selectedArticle === null ? (
-        <Latest />
+          <MainContent onSelectArticle={handleSelectArticle} />
-        <Article />
+        ) : (
+          <Article article={cardData[selectedArticle]} onBack={handleBack} />
+        )}
       </Container>
       <Footer />
     </AppTheme>

src/blog/components/Article.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { marked } from 'marked';
-import { Box, Typography, Avatar, Divider, Chip } from '@mui/material';
+import { Box, Typography, Avatar, Divider, IconButton, Chip } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 
 const ArticleContainer = styled(Box)(({ theme }) => ({
   maxWidth: '800px',
@@ -20,45 +21,26 @@ const CoverImage = styled('img')({
   marginBottom: '24px',
 });
 
-export default function ArticlePage() {
+export default function Article({
-  const article = {
+  article,
-    title: 'Revolutionizing Software Development with Cutting-Edge Tools',
+  onBack,
-    subtitle:
+}: {
-      'Discover how modern engineering teams are embracing automation and AI to deliver better software faster.',
+  article: any;
-    author: {
+  onBack: () => void;
-      name: 'Remy Sharp',
+}) {
-      avatar: '/static/images/avatar/1.jpg',
-      date: 'October 28, 2025',
-    },
-    tag: 'Engineering',
-    cover: 'https://picsum.photos/1200/600?random=100',
-    content: `
-### The rise of smart tooling
-
-Software development has come a long way from manual compilation and testing. Modern tools leverage AI to detect code smells, optimize builds, and even generate tests.
-
-### Why it matters
-
-Engineering teams today are under constant pressure to deliver faster without compromising quality. Automation tools bridge this gap by handling repetitive, error-prone tasks — freeing developers to focus on creative problem-solving.
-
-### The human factor
-
-No tool replaces curiosity and critical thinking. The most successful teams balance automation with human oversight to ensure innovation doesn’t outpace understanding.
-
----
-
-*At the end of the day, great software is built by great people — empowered by great tools.*
-    `,
-  };
-
   return (
     <ArticleContainer>
+      <IconButton onClick={onBack} sx={{ mb: 2 }}>
+        <ArrowBackRoundedIcon />
+      </IconButton>
+
       <Chip
         label={article.tag}
         variant="outlined"
         color="primary"
         sx={{ mb: 2, textTransform: 'uppercase', fontWeight: 500 }}
       />
+
       <Typography variant="h3" component="h1" gutterBottom fontWeight="bold">
         {article.title}
       </Typography>
@@ -67,18 +49,18 @@ No tool replaces curiosity and critical thinking. The most successful teams bala
       </Typography>
 
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 2, mb: 1 }}>
-        <Avatar src={article.author.avatar} alt={article.author.name} />
+        <Avatar src={article.authors[0].avatar} alt={article.authors[0].name} />
         <Box>
-          <Typography variant="subtitle2">{article.author.name}</Typography>
+          <Typography variant="subtitle2">{article.authors[0].name}</Typography>
           <Typography variant="caption" color="text.secondary">
-            {article.author.date}
+            {article.authors[0].date}
           </Typography>
         </Box>
       </Box>
 
       <Divider sx={{ my: 3 }} />
 
-      <CoverImage src={article.cover} alt={article.title} />
+      <CoverImage src={article.img} alt={article.title} />
 
       <Box
         sx={{

src/blog/components/MainContent.tsx

@@ -164,7 +164,7 @@ export function Search() {
   );
 }
 
-export default function MainContent() {
+export default function MainContent({ onSelectArticle }: { onSelectArticle: (index: number) => void }) {
   const [focusedCardIndex, setFocusedCardIndex] = React.useState<number | null>(
     null,
   );
@@ -279,6 +279,7 @@ export default function MainContent() {
         <Grid size={{ xs: 12, md: 6 }}>
           <StyledCard
             variant="outlined"
+            onClick={() => onSelectArticle(0)}
             onFocus={() => handleFocus(0)}
             onBlur={handleBlur}
             tabIndex={0}
@@ -311,6 +312,7 @@ export default function MainContent() {
         <Grid size={{ xs: 12, md: 6 }}>
           <StyledCard
             variant="outlined"
+            onClick={() => onSelectArticle(1)}
             onFocus={() => handleFocus(1)}
             onBlur={handleBlur}
             tabIndex={0}
@@ -343,6 +345,7 @@ export default function MainContent() {
         <Grid size={{ xs: 12, md: 4 }}>
           <StyledCard
             variant="outlined"
+            onClick={() => onSelectArticle(2)}
             onFocus={() => handleFocus(2)}
             onBlur={handleBlur}
             tabIndex={0}
@@ -378,6 +381,7 @@ export default function MainContent() {
           >
             <StyledCard
               variant="outlined"
+              onClick={() => onSelectArticle(3)}
               onFocus={() => handleFocus(3)}
               onBlur={handleBlur}
               tabIndex={0}
@@ -412,6 +416,7 @@ export default function MainContent() {
             </StyledCard>
             <StyledCard
               variant="outlined"
+              onClick={() => onSelectArticle(4)}
               onFocus={() => handleFocus(4)}
               onBlur={handleBlur}
               tabIndex={0}
@@ -449,6 +454,7 @@ export default function MainContent() {
         <Grid size={{ xs: 12, md: 4 }}>
           <StyledCard
             variant="outlined"
+            onClick={() => onSelectArticle(5)}
             onFocus={() => handleFocus(5)}
             onBlur={handleBlur}
             tabIndex={0}