chore: update dependencies and improve UI components

- Updated dependencies in bun.lock and package.json to specific versions for better stability.
- Added a new Contact component to display contact methods with tooltips.
- Introduced a Banner component for notifications with customizable actions.
- Enhanced the Dialog, Checkbox, Button, Input, and Label components for better usability and styling.
- Integrated react-snowfall for a snow effect in the main page.
- Added a Discord SVG icon to the project.

src/app/page.tsx

@@ -1,13 +1,25 @@
+'use client';
 import Projects from "@/components/Projects";
 import TimelineComponent from "@/components/timeline";
 import Image from "next/image";
 import DraggableWindow from "@/components/DraggableWindow";
 import ReadmeWindow from "@/components/ReadmeWindow";
+import Snowfall from 'react-snowfall';
+import { useTheme } from "next-themes";
+import { Banner } from "@/components/ui/banner";
+import { LinkIcon, TreeDeciduous, TreePalmIcon, TreesIcon } from "lucide-react";
+import { useState } from "react";
+import Contact from "@/components/Contact";
+
+export default function Page() {
+  const { theme } = useTheme();
+  const [show, setShow] = useState(true);
 
-export default async function BlogIndex() {
   return (
     <main className="min-h-screen w-screen overflow-y-scroll snap-y snap-mandatory">
-      <div className="max-w-4xl w-full flex flex-row h-auto mx-auto gap-4 items-center my-8 lg:px-0 px-8">
+      <Snowfall color={theme === 'dark' ? '#ffffff' : '#bcbcd6ff'} />
+
+      <div className="max-w-3xl w-full flex flex-row h-auto mx-auto gap-4 items-center my-8 lg:px-0 px-8">
         <Image
           src="/Frame.svg"
           alt="logo"
@@ -19,9 +31,31 @@ export default async function BlogIndex() {
           <a href="mailto:me@imnya.ng">me@imnya.ng</a>
         </h1>
       </div>
+      <div className="max-w-3xl w-full flex mx-auto mb-8">
+        <Contact />
+      </div>
       <section id="about" className="w-full snap-start snap-always flex flex-col items-center justify-center px-8 lg:px-0">
+        <div className="max-w-3xl w-full mb-8">
+          <Banner
+            show={show}
+            onHide={() => setShow(false)}
+            icon={
+              <TreeDeciduous className="w-4 h-4 text-green-800" />
+            }
+            title={
+              <>
+                제 크리스마스 트리를 꾸며주세요!
+              </>
+            }
+            action={{
+              label: "트리 꾸미러 가기",
+              onClick: () => window.open("https://imnya.ng/tree", "_blank"),
+            }}
+          />
+        </div>
+
         <DraggableWindow />
-        <div className="max-w-4xl w-full">
+        <div className="max-w-3xl w-full">
           <p>나의 <strong>어두움</strong>이 다른 사람들에겐 <strong>빛</strong>이 되길 바라는 <strong>개발자, 정보보안전문가</strong> 남현석입니다.</p>
           <p><strong>초등학교 시절 운영체제</strong>에 흥미를 느껴 컴퓨터를 시작했고, 이후 프로그래밍에 관심을 갖게 되었습니다.</p>
           <p><strong>초등학교 4학년 때 Python</strong>으로 프로그래밍을 시작했으며, 현재는 <strong>TypeScript</strong>를 주로 사용합니다.</p>