remove unneeded containers

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

@@ -3,44 +3,42 @@
 import Link from "next/link";
 import { motion } from "framer-motion";
 import { Links, LinkColors } from "@/components/header/constants";
-import Container from "@/components/ui/container";
 
 function DefaultHeader() {
   return (
-    <Container>
+    <motion.nav
-      <motion.nav
+      initial="hidden"
-        initial="hidden"
+      animate="visible"
-        animate="visible"
+      variants={{
-        variants={{
+        visible: {
-          visible: {
+          transition: {
-            transition: {
+            staggerChildren: 0.3
-              staggerChildren: 0.3
+          }
-            }
+        },
-          },
+      }}
-        }}
+      className="
-        className="
+        mx-auto
-          hidden 2xl:flex xl:flex lg:flex md:flex flex-row
+        hidden 2xl:flex xl:flex lg:flex md:flex flex-row
-          lg:px-6 md:px-5 sm:px-4 lg:py-1.5 md:py-1.5
+        lg:px-6 md:px-5 sm:px-4 lg:py-1.5 md:py-1.5
-          lg:text-4xl md:text-3xl
+        lg:text-4xl md:text-3xl
-          font-bold justify-center
+        font-bold justify-center
-      ">
+    ">
-        <div className="flex lg:space-x-20 md:space-x-10">
+      <div className="flex lg:space-x-20 md:space-x-10">
-          {Links.map((link) => (
+        {Links.map((link) => (
-            <motion.div
+          <motion.div
-              key={link.id}
+            key={link.id}
-              initial={{ opacity: 0 }}
+            initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
+            animate={{ opacity: 1 }}
-              transition={{ delay: link.id * 0.2 }}
+            transition={{ delay: link.id * 0.2 }}
-              className={`
+            className={`
-                inline-block
+              inline-block
-                ${LinkColors[link.color]} dark:${LinkColors[link.color]}
+              ${LinkColors[link.color]} dark:${LinkColors[link.color]}
-              `}>
+            `}>
-              <Link href={link.href}>{link.label}</Link>
+            <Link href={link.href}>{link.label}</Link>
-            </motion.div>
+          </motion.div>
-          ))}
+        ))}
-        </div>
+      </div>
-      </motion.nav>
+    </motion.nav>
-    </Container>
   );
 }
 

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

@@ -32,7 +32,7 @@ function Portrait() {
 
 function Content() {
   return (
-    <Container>
+    <>
       <div className="relative h-screen overflow-y-scroll font-bold text-4xl">
         <div className="h-screen flex flex-col items-center justify-center">
           <div className="relative h-48 overflow-y-auto">
@@ -85,7 +85,7 @@ function Content() {
           </div>
         </div>
       </div>
-    </Container>
+    </>
   );
 };