From e7d7ae0d15bca2bd98f4893f9d32393c1909e45d Mon Sep 17 00:00:00 2001
From: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Date: Tue, 28 Oct 2025 22:01:37 +0530
Subject: [PATCH] added Article Page

---
 src/blog/Blog.tsx               |  2 +
 src/blog/components/Article.tsx | 94 +++++++++++++++++++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 src/blog/components/Article.tsx

diff --git a/src/blog/Blog.tsx b/src/blog/Blog.tsx
index cca605d..722fb52 100644
--- a/src/blog/Blog.tsx
+++ b/src/blog/Blog.tsx
@@ -3,6 +3,7 @@ import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import AppTheme from '../shared-theme/AppTheme';
 import MainContent from './components/MainContent';
+import Article from './components/Article';
 import Latest from './components/Latest';
 import Footer from './components/Footer';
 
@@ -18,6 +19,7 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
       >
         <MainContent />
         <Latest />
+        <Article />
       </Container>
       <Footer />
     </AppTheme>
diff --git a/src/blog/components/Article.tsx b/src/blog/components/Article.tsx
new file mode 100644
index 0000000..dd79688
--- /dev/null
+++ b/src/blog/components/Article.tsx
@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { marked } from 'marked';
+import { Box, Typography, Avatar, Divider, Chip } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+const ArticleContainer = styled(Box)(({ theme }) => ({
+  maxWidth: '800px',
+  margin: '0 auto',
+  padding: theme.spacing(4),
+  [theme.breakpoints.down('sm')]: {
+    padding: theme.spacing(2),
+  },
+}));
+
+const CoverImage = styled('img')({
+  width: '100%',
+  height: 'auto',
+  borderRadius: '12px',
+  marginTop: '16px',
+  marginBottom: '24px',
+});
+
+export default function ArticlePage() {
+  const article = {
+    title: 'Revolutionizing Software Development with Cutting-Edge Tools',
+    subtitle:
+      'Discover how modern engineering teams are embracing automation and AI to deliver better software faster.',
+    author: {
+      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>
+      <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>
+      <Typography variant="h5" color="text.secondary" gutterBottom>
+        {article.subtitle}
+      </Typography>
+
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 2, mb: 1 }}>
+        <Avatar src={article.author.avatar} alt={article.author.name} />
+        <Box>
+          <Typography variant="subtitle2">{article.author.name}</Typography>
+          <Typography variant="caption" color="text.secondary">
+            {article.author.date}
+          </Typography>
+        </Box>
+      </Box>
+
+      <Divider sx={{ my: 3 }} />
+
+      <CoverImage src={article.cover} alt={article.title} />
+
+      <Box
+        sx={{
+          '& h3': { fontWeight: 600, mt: 4 },
+          '& p': { color: 'text.primary', lineHeight: 1.8, mt: 2 },
+          '& em': { fontStyle: 'italic' },
+          '& ul': { pl: 3 },
+        }}
+        dangerouslySetInnerHTML={{ __html: marked(article.content) }}
+      />
+    </ArticleContainer>
+  );
+}