containerize app, several polishing things:

src/web/src/app/layout.js

@@ -3,6 +3,7 @@ import "@/style/globals.css";
 import Theme from "@/app/theme";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
+import Container from "@/components/ui/container";
 
 // Metadata
 export const metadata = {
@@ -19,11 +20,13 @@ export default function Layout({children}) {
         dark:bg-dark-background dark:text-dark-foreground
       ">
         <Theme>
-          <Header />
+          <Container>
-          <main>
+            <Header />
-            {children}
+            <main>
-          </main>
+              {children}
-          <Footer />
+            </main>
+            <Footer />
+          </Container >
         </Theme>
       </body>
     </html>

src/web/src/app/page.jsx

@@ -7,8 +7,6 @@ import Hero from "@/components/hero";
 // Exports
 export default function Index() {
   return (
-    <Container>
+    <Hero />
-      <Hero />
-    </Container>
   );
 }

src/web/src/components/footer/index.jsx

@@ -3,9 +3,7 @@ import Content from "@/components/footer/content";
 
 function Footer() {
   return (
-    <Container>
+    <Content />
-      <Content />
-    </Container>
   );
 }
 

src/web/src/components/header/default.jsx

@@ -22,7 +22,6 @@ function DefaultHeader() {
         lg:px-6 md:px-5 sm:px-4 lg:py-1.5 md:py-1.5
         lg:text-4xl md:text-3xl
         font-bold justify-center
-        shadow-md
     ">
       <div className="flex lg:space-x-20 md:space-x-10">
         {Links.map((link) => (

src/web/src/components/hero/content.jsx

@@ -4,7 +4,6 @@ import Typewriter from 'typewriter-effect';
 import { motion } from 'framer-motion';
 import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
-import Container from "@/components/ui/container";
 
 function Portrait() {
   const fadeInAnimation = {