Add Get in Touch component

src/app/components/get-in-touch.tsx

@@ -0,0 +1,35 @@
+"use client";
+import { motion } from "framer-motion";
+
+export const GetInTouch = () => {
+	return (
+		<div className="flex flex-1 w-full items-center dark:bg-dot-white/[0.2] bg-dot-black/[0.2] flex-col space-y-2 overflow-hidden max-h-32">
+			<motion.div
+				variants={{ initial: { y: 0 }, hover: { y: -50 } }}
+				className="flex flex-row rounded-2xl p-3 self-start space-x-2 w-fit bg-green-100 rounded-tl-sm dark:bg-green-900"
+			>
+				<p className="text-slate-500 text-xs dark:text-neutral-300">Got any magic tricks for new projects?</p>
+			</motion.div>
+			<motion.div
+				variants={{ initial: { y: 0 }, hover: { y: -90 } }}
+				className="flex flex-row rounded-2xl p-3 self-end space-x-2 w-fit ml-auto bg-blue-100 rounded-br-sm dark:bg-blue-900"
+			>
+				<p className="text-slate-500 text-xs dark:text-neutral-300">Tell me about it.</p>
+			</motion.div>
+			<motion.div
+				variants={{ initial: { y: 128 }, hover: { y: -92 } }}
+				className="flex flex-row rounded-2xl p-3 self-start space-x-2 w-fit bg-green-100 rounded-tl-sm dark:bg-green-900"
+			>
+				<p className="text-slate-500 text-xs dark:text-neutral-300">
+					I'm brewing up a something special and need some coding wizardry. Think you can cast a spell?
+				</p>
+			</motion.div>
+			<motion.div
+				variants={{ initial: { y: 128 }, hover: { y: -90 } }}
+				className="flex flex-row rounded-2xl p-3 self-end space-x-2 w-fit ml-auto bg-blue-100 rounded-br-sm dark:bg-blue-900"
+			>
+				<p className="text-slate-500 text-xs dark:text-neutral-300">Let's discuss details and make it fly!</p>
+			</motion.div>
+		</div>
+	);
+};

src/app/page.tsx

@@ -1,31 +1,31 @@
 import { Footer, Header } from "@/components/ui";
 import { BentoGrid, BentoGridItem } from "@/components/ui/bento-grid";
 import { IconBraces, IconMessage, IconRoad, IconWriting } from "@tabler/icons-react";
-import Skills from "./components/Skills";
+import { TechArsenal } from "./components";
+import { GetInTouch } from "./components/get-in-touch";
 
 export default function Home() {
 	return (
 		<div className="relative flex min-h-screen flex-col dark:bg-black bg-white dark:bg-dot-white/[0.2] bg-dot-black/[0.2]">
 			<Header />
 			<main className="container py-8 flex flex-col flex-1 justify-center ">
-				<BentoGrid className="max-w-4xl mx-auto md:auto-rows-[15rem]">
+				<BentoGrid className="max-w-4xl mx-auto md:auto-rows-auto">
 					<BentoGridItem
 						href="/skills"
 						title="Tech Arsenal"
 						description="Building exceptional experiences with a powerful tech stack."
-						header={<Skills />}
+						header={<TechArsenal />}
 						className="md:col-span-2"
 						icon={<IconBraces size={20} className="text-neutral-500" />}
 					/>
 					<BentoGridItem
 						href="/"
 						title="Get in touch!"
 						description="Connect for your next project or tech chat."
-						header={<h1>Header</h1>}
+						header={<GetInTouch />}
 						className="md:col-span-1"
 						icon={<IconMessage size={20} className="text-neutral-500" />}
 					/>
-
 					<BentoGridItem
 						href="/"
 						title="Technical Scribbles"

src/components/ui/bento-grid.tsx

@@ -42,8 +42,8 @@ export const BentoGridItem = ({
 				{header}
 				<div className="group-hover/bento:translate-x-2 transition duration-200">
 					{icon}
-					<div className="font-sans font-bold text-neutral-600 dark:text-neutral-200 mb-2 mt-2">{title}</div>
-					<div className="font-sans font-normal text-neutral-600 text-xs dark:text-neutral-300">{description}</div>
+					<h2 className="font-sans font-bold text-neutral-600 dark:text-neutral-200 mb-2 mt-2">{title}</h2>
+					<p className="font-sans font-normal text-neutral-600 text-xs dark:text-neutral-300">{description}</p>
 				</div>
 			</Link>
 		</motion.div>