Getting home page all dolled up

src/pages/index.tsx

@@ -1,24 +1,43 @@
+"use client";
+
 import { Canvas } from "@react-three/fiber";
-import { OrbitControls, Plane } from "@react-three/drei";
+import Link from "next/link";
 
 import Internal from "@/components/common/Internal";
+import { Button } from "@/components/ui/button";
+import Model from "@/components/common/Model";
 
 export default function Home(): JSX.Element {
   return (
     <Internal hideFooter>
-      <div className="absolute h-screen w-full top-0 left-0 scene">
-        <Canvas
-          shadows
-          camera={{ position: [4, 2, 2] }}
-        >
-          <OrbitControls />
-          <ambientLight intensity={0.1} />
-          <directionalLight
-            color="white"
-            position={[0, 5, 5]}
-          />
-          <Plane args={[2, 2]} />
-        </Canvas>
+      <div className="flex flex-col justify-center w-full h-screen relative">
+        <div className="container relative z-10">
+          <h1 className="text-4xl md:text-[64px] mt-24 md:mt-0 text-primary font-sans font-bold leading-none">
+            Software Engineer
+            <br />
+            and Web Designer
+          </h1>
+          <p className="md:w-1/2 opacity-60 text-white my-2">
+            I'm looking for freelance clients. Let's talk, and get your website
+            built!
+          </p>
+          <Button asChild>
+            <Link href="/portfolio">Hiring a freelancer?</Link>
+          </Button>
+        </div>
+        <div className="flex flex-col justify-center items-center absolute top-0 left-0 w-full h-screen bg-black">
+          <Canvas
+            shadows
+            camera={{ position: [4, 2, 2] }}
+          >
+            <ambientLight intensity={0.1} />
+            <directionalLight
+              color="white"
+              position={[0, 5, 5]}
+            />
+            <Model />
+          </Canvas>
+        </div>
       </div>
     </Internal>
   );