Containerize hero and header

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

@@ -3,10 +3,11 @@
 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 (
-    <div className="sticky mx-auto max-w-screen-lg">
+    <Container>
       <motion.nav
         initial="hidden"
         animate="visible"
@@ -39,7 +40,7 @@ function DefaultHeader() {
           ))}
         </div>
       </motion.nav>
-    </div>
+    </Container>
   );
 }
 

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

@@ -4,6 +4,7 @@ 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 = {
@@ -31,10 +32,9 @@ 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">
-          <Portrait />
           <div className="relative h-48 overflow-y-auto">
             <Typewriter
               options={{
@@ -85,7 +85,7 @@ function Content() {
           </div>
         </div>
       </div>
-    </>
+    </Container>
   );
 };
 

src/web/src/components/hero/index.jsx

@@ -5,9 +5,7 @@ import Content from '@/components/hero/content';
 
 function Hero() {
   return (
-    <div className="h-[calc(100vh-96px)] relative">
     <Content />
-    </div>
   );
 }
 

src/web/src/components/ui/grid.jsx

@@ -1,37 +0,0 @@
-"use client"
-
-import React, { useState } from 'react';
-
-const Grid = () => {
-  const [squares, setSquares] = useState([]);
-
-  const handleClick = (event) => {
-    const { clientX, clientY } = event;
-    const newSquares = [];
-
-    for (let i = 0; i < 25; i++) {
-      const left = clientX - 50 + Math.random() * 100;
-      const top = clientY - 50 + Math.random() * 100;
-      const color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
-
-      newSquares.push({ left, top, color });
-    }
-
-    setSquares(newSquares);
-  };
-
-  return (
-    <div className="relative w-full h-screen overflow-hidden" onClick={handleClick}>
-      {squares.map((square, index) => (
-        <div
-          key={index}
-          className="absolute w-8 h-8 bg-gray-300 rounded-md opacity-0 transition-transform transition-opacity duration-500 transform scale-0"
-          style={{ left: square.left, top: square.top, backgroundColor: square.color }}
-        />
-      ))}
-    </div>
-  );
-};
-
-export default Grid;
-