Add custom 404 view and improve additive comparison UX

data/additive/e330-citric-acid/article.md

@@ -19,7 +19,7 @@ Citric acid shows up across many categories: soft drinks and flavored waters, ca
 
 ## What can replace citric acid?
 Depending on the job, manufacturers may choose:
-- For sourness or pH control: [malic acid](/e296-malic-acid), [lactic acid](/e270-lactic-acid), [fumaric acid](/e297-fumaric-acid), or [phosphoric acid](/e338-phosphoric-acid) in some beverages
+- For sourness or pH control: [malic acid](/e296-malic-acid){.additive}, [lactic acid](/e270-lactic-acid){.additive}, [fumaric acid](/e297-fumaric-acid){.additive}, or [phosphoric acid](/e338-phosphoric-acid){.additive} in some beverages
 - For buffering and mild tartness: [sodium citrate](/e331-sodium-citrates), [potassium citrate](/e332-potassium-citrates), or [calcium citrate](/e333-calcium-citrates)
 - For preservation systems: pair acids with preservatives such as [sorbic acid](/e200-sorbic-acid) or [sodium benzoate](/e211-sodium-benzoate)
 - For metal control (sequestration): [calcium disodium EDTA](/e385-calcium-disodium-ethylenediaminetetraacetate) in applications where permitted

src/app/compare/[[...slug]]/page.tsx

@@ -4,6 +4,7 @@ import { AdditiveComparison, type ComparisonAdditive } from '../../../components
 import { getAdditiveBySlug, getAwarenessScores } from '../../../lib/additives';
 import { formatAdditiveDisplayName } from '../../../lib/additive-format';
 import { getSearchHistory } from '../../../lib/search-history';
+import { getSearchQuestions } from '../../../lib/search-questions';
 interface ComparePageProps {
   params: Promise<{ slug?: string[] }>;
 }
@@ -116,11 +117,14 @@ export default async function ComparePage({ params }: ComparePageProps) {
         return null;
       }
 
+      const searchQuestionsDataset = getSearchQuestions(slugValue);
+
       return [
         slugValue,
         {
           ...additive,
           searchHistory: getSearchHistory(slugValue),
+          searchQuestions: searchQuestionsDataset?.questions ?? null,
         },
       ];
     })

src/app/globals.css

@@ -43,6 +43,10 @@ a {
   max-width: 1120px;
   margin: 0 auto;
   padding: 0 1.5rem;
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 
 @media (min-width: 1600px) {
@@ -56,7 +60,7 @@ a {
   position: relative;
   padding: 0.46875rem 0;
   color: #ffffff;
-  background-color: #c19fff;
+  background-color: #9060e8;
 }
 
 .header-shell {
@@ -272,7 +276,7 @@ a {
   right: calc(50% - 50vw);
   top: 0;
   bottom: calc(-1 * var(--page-hero-gradient-extension, 50px));
-  background: linear-gradient(180deg, #c19fff 0%, #f5f5f5 100%);
+  background: linear-gradient(180deg,#9060e8 0%, #f5f5f5 100%);
   z-index: -1;
 }
 
@@ -338,6 +342,20 @@ a {
   line-height: 1;
 }
 
+@media (min-width: 1200px) {
+.site-footer .content-shell {
+    max-width: none;
+    width: 100%;
+    margin: 0;
+    padding: 0 20px;
+  }
+
+  .site-footer .footer-shell {
+    width: 100%;
+    padding: 0 20px;
+  }
+}
+
 .footer-brand {
   display: inline-flex;
   align-items: center;
@@ -371,8 +389,11 @@ a {
 }
 
 .main-content {
-  flex: 1;
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
   padding: 0 0 3rem;
+  min-height: 0;
 }
 
 @media (max-width: 600px) {

src/app/not-found.tsx

@@ -0,0 +1,52 @@
+import type { Metadata } from 'next';
+import NextLink from 'next/link';
+import { Box, Link as MuiLink, Typography } from '@mui/material';
+
+export const metadata: Metadata = {
+  title: '404 - Page Not Found',
+};
+
+export default function NotFoundPage() {
+  return (
+    <Box component="section" sx={{ width: '100%', display: 'flex', flexDirection: 'column', flex: 1 }}>
+      <Box
+        className="page-hero"
+        sx={{
+          flex: 1,
+          display: 'flex',
+          alignItems: { xs: 'flex-start', sm: 'center' },
+          justifyContent: { xs: 'flex-start', sm: 'center' },
+          pt: { xs: 0, sm: '50px' },
+        }}
+      >
+        <Box
+          className="page-hero-content"
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          gap={2}
+          textAlign="center"
+          sx={{ width: '100%', maxWidth: 520, margin: '0 auto' }}
+        >
+          <Typography component="h1" variant="h2" sx={{ fontWeight: 700 }}>
+            404 - Page Not Found
+          </Typography>
+          <Typography variant="body1" color="text.secondary">
+            The page you were looking for doesn’t exist at this address.
+          </Typography>
+          <Typography variant="body1" color="text.secondary">
+            You can browse or search additives to discover the information you need.
+          </Typography>
+          <MuiLink
+            component={NextLink}
+            href="/"
+            underline="always"
+            sx={{ fontWeight: 600, fontSize: '1.05rem' }}
+          >
+            Go to homepage
+          </MuiLink>
+        </Box>
+      </Box>
+    </Box>
+  );
+}