fix: apply basic semantic html (#191)

Co-authored-by: Lee Chase <[email protected]>

Author: janhassel

src/components/commonHeader/CommonHeader.jsx

@@ -9,7 +9,7 @@ import { AspectRatio, Column, Grid, Heading } from '@carbon/react';
 
 export const CommonHeader = ({ title, paragraphs }) => {
   return (
-    <Grid className="cs--common-header">
+    <Grid as="header" className="cs--common-header">
       <Column sm={4} md={8} lg={8}>
         <AspectRatio as="section" ratio="16x9">
           <Heading className="cs--common-header__title">{title}</Heading>

src/components/footer/Footer.jsx

@@ -9,7 +9,7 @@ import { AspectRatio, Column } from '@carbon/react';
 
 export const Footer = () => {
   return (
-    <Column sm={4} md={8} lg={8} className="cs--footer">
+    <Column as="footer" sm={4} md={8} lg={8} className="cs--footer">
       <AspectRatio ratio="16x9">
         <p>Footer</p>
         <p>Copyright IBM 2025</p>

src/layouts/page-layout.jsx

@@ -20,7 +20,7 @@ export const PageLayout = ({ children, className, fallback }) => {
         <div className={classNames('cs--page-layout', className)}>
           <Nav />
           <Theme theme={primaryTheme} as={Content}>
-            <Content className="cs--page-layout-content">{children}</Content>
+            <div className="cs--page-layout-content">{children}</div>
           </Theme>
         </div>
       </Suspense>