From 4f442c369bc7598fdc32d267b382b8dcd5e21d98 Mon Sep 17 00:00:00 2001
From: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Date: Sun, 9 Nov 2025 00:00:55 +0530
Subject: [PATCH] feat(ui): make footer always visible on home and hidden in
 article view

---
 src/blog/Blog.tsx                   |  92 +++++++++----
 src/blog/components/Footer.tsx      | 202 +---------------------------
 src/blog/components/MainContent.tsx |   1 -
 3 files changed, 74 insertions(+), 221 deletions(-)

diff --git a/src/blog/Blog.tsx b/src/blog/Blog.tsx
index 1d334dd..7bd502b 100644
--- a/src/blog/Blog.tsx
+++ b/src/blog/Blog.tsx
@@ -1,15 +1,16 @@
 import * as React from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
+import Box from '@mui/material/Box';
 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';
-import { useArticles } from './providers/Article'; // ✅ custom hook for global articles
+import { useArticles } from './providers/Article';
 
 export default function Blog(props: { disableCustomTheme?: boolean }) {
-  const { articles, loading, error } = useArticles(); // ✅ Hook must be inside component
+  const { articles, loading, error } = useArticles();
   const [selectedArticle, setSelectedArticle] = React.useState<number | null>(null);
 
   const handleSelectArticle = (index: number) => {
@@ -26,7 +27,12 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
         <Container
           maxWidth="lg"
           component="main"
-          sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100vh',
+          }}
         >
           Loading articles...
         </Container>
@@ -41,7 +47,12 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
         <Container
           maxWidth="lg"
           component="main"
-          sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100vh',
+          }}
         >
           Failed to load articles: {error}
         </Container>
@@ -53,28 +64,61 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
     <AppTheme {...props}>
       <CssBaseline enableColorScheme />
 
-      <Container
-        maxWidth="lg"
-        component="main"
-        sx={{ display: 'flex', flexDirection: 'column', my: 4, gap: 4 }}
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          minHeight: '100vh',
+        }}
       >
-        {selectedArticle === null ? (
-          <>
-            <MainContent articles={articles} onSelectArticle={handleSelectArticle} />
-            <Latest
-              articles={articles}
-              onSelectArticle={handleSelectArticle}
-              onLoadMore={async (offset, limit) => {
-                // Optional: fetch more from API (if you want true pagination)
-                // await fetchMoreArticles(offset, limit);
-              }}
-            />
-          </>
-        ) : (
-          <Article article={articles[selectedArticle]} onBack={handleBack} />
+        <Container
+          maxWidth="lg"
+          component="main"
+          sx={{
+            flex: '1 0 auto',
+            display: 'flex',
+            flexDirection: 'column',
+            my: 4,
+            gap: 4,
+            pb: selectedArticle === null ? 24 : 0, // space for fixed footer on home
+          }}
+        >
+          {selectedArticle === null ? (
+            <>
+              <MainContent
+                articles={articles}
+                onSelectArticle={handleSelectArticle}
+              />
+              <Latest
+                articles={articles}
+                onSelectArticle={handleSelectArticle}
+                onLoadMore={async (offset, limit) => {
+                  // Optional pagination call
+                }}
+              />
+            </>
+          ) : (
+            <Article article={articles[selectedArticle]} onBack={handleBack} />
+          )}
+        </Container>
+
+        {selectedArticle === null && (
+          <Box
+            component="footer"
+            sx={{
+              position: 'fixed',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              zIndex: 1000,
+              bgcolor: 'background.paper',
+              boxShadow: '0 -2px 10px rgba(0,0,0,0.08)',
+            }}
+          >
+            <Footer />
+          </Box>
         )}
-      </Container>
-      <Footer />
+      </Box>
     </AppTheme>
   );
 }
diff --git a/src/blog/components/Footer.tsx b/src/blog/components/Footer.tsx
index 1057307..ffdbba1 100644
--- a/src/blog/components/Footer.tsx
+++ b/src/blog/components/Footer.tsx
@@ -1,24 +1,14 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import Container from '@mui/material/Container';
-import Divider from '@mui/material/Divider';
-import IconButton from '@mui/material/IconButton';
-import InputLabel from '@mui/material/InputLabel';
 import Link from '@mui/material/Link';
-import Stack from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-import GitHubIcon from '@mui/icons-material/GitHub';
-import LinkedInIcon from '@mui/icons-material/LinkedIn';
-import TwitterIcon from '@mui/icons-material/X';
 
 function Copyright() {
   return (
-    <Typography variant="body2" sx={{ color: 'text.secondary', mt: 1 }}>
-      {'Copyright © '}
-      <Link color="text.secondary" href="https://mui.com/">
-        Sitemark
+    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+      <Link color="text.secondary" href="https://www.aetoskia.com/">
+        {'Copyright © Aetoskia Internal Infrastructure — All rights reserved.'}
       </Link>
       &nbsp;
       {new Date().getFullYear()}
@@ -29,197 +19,17 @@ function Copyright() {
 export default function Footer() {
   return (
     <React.Fragment>
-      <Divider />
       <Container
         sx={{
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
-          gap: { xs: 4, sm: 8 },
-          py: { xs: 8, sm: 10 },
+          gap: { xs: 2, sm: 4 },
+          py: { xs: 2, sm: 4 },
           textAlign: { sm: 'center', md: 'left' },
         }}
       >
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: { xs: 'column', sm: 'row' },
-            width: '100%',
-            justifyContent: 'space-between',
-          }}
-        >
-          <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 4,
-              minWidth: { xs: '100%', sm: '60%' },
-            }}
-          >
-            <Box sx={{ width: { xs: '100%', sm: '60%' } }}>
-              <Typography
-                variant="body2"
-                gutterBottom
-                sx={{ fontWeight: 600, mt: 2 }}
-              >
-                Join the newsletter
-              </Typography>
-              <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
-                Subscribe for weekly updates. No spams ever!
-              </Typography>
-              <InputLabel htmlFor="email-newsletter">Email</InputLabel>
-              <Stack direction="row" spacing={1} useFlexGap>
-                <TextField
-                  id="email-newsletter"
-                  hiddenLabel
-                  size="small"
-                  variant="outlined"
-                  fullWidth
-                  aria-label="Enter your email address"
-                  placeholder="Your email address"
-                  slotProps={{
-                    htmlInput: {
-                      autoComplete: 'off',
-                      'aria-label': 'Enter your email address',
-                    },
-                  }}
-                  sx={{ width: '250px' }}
-                />
-                <Button
-                  variant="contained"
-                  color="primary"
-                  size="small"
-                  sx={{ flexShrink: 0 }}
-                >
-                  Subscribe
-                </Button>
-              </Stack>
-            </Box>
-          </Box>
-          <Box
-            sx={{
-              display: { xs: 'none', sm: 'flex' },
-              flexDirection: 'column',
-              gap: 1,
-            }}
-          >
-            <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
-              Product
-            </Typography>
-            <Link color="text.secondary" variant="body2" href="#">
-              Features
-            </Link>
-            <Link color="text.secondary" variant="body2" href="#">
-              Testimonials
-            </Link>
-            <Link color="text.secondary" variant="body2" href="#">
-              Highlights
-            </Link>
-            <Link color="text.secondary" variant="body2" href="#">
-              Pricing
-            </Link>
-            <Link color="text.secondary" variant="body2" href="#">
-              FAQs
-            </Link>
-          </Box>
-          <Box
-            sx={{
-              display: { xs: 'none', sm: 'flex' },
-              flexDirection: 'column',
-              gap: 1,
-            }}
-          >
-            <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
-              Company
-            </Typography>
-            <Link color="text.secondary" variant="body2" href="#">
-              About us
-            </Link>
-            <Link color="text.secondary" variant="body2" href="#">
-              Careers
-            </Link>
-            <Link color="text.secondary" variant="body2" href="#">
-              Press
-            </Link>
-          </Box>
-          <Box
-            sx={{
-              display: { xs: 'none', sm: 'flex' },
-              flexDirection: 'column',
-              gap: 1,
-            }}
-          >
-            <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
-              Legal
-            </Typography>
-            <Link color="text.secondary" variant="body2" href="#">
-              Terms
-            </Link>
-            <Link color="text.secondary" variant="body2" href="#">
-              Privacy
-            </Link>
-            <Link color="text.secondary" variant="body2" href="#">
-              Contact
-            </Link>
-          </Box>
-        </Box>
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            pt: { xs: 4, sm: 8 },
-            width: '100%',
-            borderTop: '1px solid',
-            borderColor: 'divider',
-          }}
-        >
-          <div>
-            <Link color="text.secondary" variant="body2" href="#">
-              Privacy Policy
-            </Link>
-            <Typography sx={{ display: 'inline', mx: 0.5, opacity: 0.5 }}>
-              &nbsp;•&nbsp;
-            </Typography>
-            <Link color="text.secondary" variant="body2" href="#">
-              Terms of Service
-            </Link>
-            <Copyright />
-          </div>
-          <Stack
-            direction="row"
-            spacing={1}
-            useFlexGap
-            sx={{ justifyContent: 'left', color: 'text.secondary' }}
-          >
-            <IconButton
-              color="inherit"
-              size="small"
-              href="https://github.com/mui"
-              aria-label="GitHub"
-              sx={{ alignSelf: 'center' }}
-            >
-              <GitHubIcon />
-            </IconButton>
-            <IconButton
-              color="inherit"
-              size="small"
-              href="https://x.com/MaterialUI"
-              aria-label="X"
-              sx={{ alignSelf: 'center' }}
-            >
-              <TwitterIcon />
-            </IconButton>
-            <IconButton
-              color="inherit"
-              size="small"
-              href="https://www.linkedin.com/company/mui/"
-              aria-label="LinkedIn"
-              sx={{ alignSelf: 'center' }}
-            >
-              <LinkedInIcon />
-            </IconButton>
-          </Stack>
-        </Box>
+        <Copyright />
       </Container>
     </React.Fragment>
   );
diff --git a/src/blog/components/MainContent.tsx b/src/blog/components/MainContent.tsx
index 6771bc4..69a01d6 100644
--- a/src/blog/components/MainContent.tsx
+++ b/src/blog/components/MainContent.tsx
@@ -137,7 +137,6 @@ export default function MainContent({
         <Typography variant="h1" gutterBottom>
           Blog
         </Typography>
-        <Typography>Stay in the loop with the latest about our products</Typography>
       </div>
       <Box
         sx={{