ktc-boost · daaoooy · Dec 1, 2025 · Dec 1, 2025 · Dec 1, 2025 · Dec 1, 2025
diff --git a/README.md b/README.md
@@ -1,2 +1,5 @@
-# boost-docs
-대학생을 위한 팀 프로젝트 매니저 Boost 개발 문서 사이트
+<div align="center">
+  <h3>⚒️ 작업 중 .. ⚒️</h3>
+  <br/>
+  <img src="https://github.com/user-attachments/assets/32da1859-050a-409b-8183-28783eb33540"/>
+</div>
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="kr">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/images/boost-app-icon.png" />

diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.555.0",
+    "motion": "^12.23.25",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.9.6",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/features/main/components/MainAboutDocs.tsx b/src/features/main/components/MainAboutDocs.tsx
@@ -0,0 +1,69 @@
+import { motion } from "motion/react";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/shared/components/shadcn/card";
+import { contentSections } from "@/features/main/constants/mainConstants";
+
+const container = {
+  hidden: {},
+  show: {
+    transition: {
+      staggerChildren: 0.2,
+    },
+  },
+};
+
+const card = {
+  hidden: { opacity: 0, y: 20 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.8 } },
+};
+
+const MainAboutDocs = () => {
+  return (
+    <section
+      id="main-about-docs"
+      aria-label="Main About Docs Section"
+      className="min-w-screen pb-24"
+    >
+      <div className="max-w-4xl mx-auto px-6">
+        <h2 className="text-3xl font-bold text-center mb-12">
+          이 문서가 담고 있는 내용
+        </h2>
+
+        <motion.div
+          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"
+          variants={container}
+          initial="hidden"
+          whileInView="show"
+          viewport={{ once: true, margin: "-50px 0px -50px 0px" }}
+        >
+          {contentSections.map((item) => {
+            const Icon = item.icon;
+            return (
+              <motion.div key={item.title} variants={card}>
+                <Card className="hover:shadow-md transition-shadow">
+                  <CardHeader className="space-y-4">
+                    <div className="flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 mx-auto">
+                      <Icon className="w-6 h-6 text-gray-700" />
+                    </div>
+
+                    <CardTitle className="text-center">{item.title}</CardTitle>
+
+                    <CardDescription className="text-center">
+                      {item.description}
+                    </CardDescription>
+                  </CardHeader>
+                </Card>
+              </motion.div>
+            );
+          })}
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default MainAboutDocs;
diff --git a/src/features/main/components/MainFooter.tsx b/src/features/main/components/MainFooter.tsx
@@ -0,0 +1,25 @@
+const MainFooter = () => {
+  return (
+    <footer className="w-full border-t bg-white mt-10">
+      <div className="mx-auto max-w-7xl px-6 py-8">
+        <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
+          <div className="text-sm text-gray-500">
+            © {new Date().getFullYear()} BOOST Team. All rights reserved.
+          </div>
+
+          <div className="flex items-center gap-6 text-sm text-gray-600">
+            <a
+              href="https://github.com/ktc-boost/boost-docs.git"
+              target="_blank"
+              className="hover:text-gray-900"
+            >
+              GitHub
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default MainFooter;
diff --git a/src/features/main/components/MainHero.tsx b/src/features/main/components/MainHero.tsx
@@ -0,0 +1,43 @@
+import { Button } from "@/shared/components/shadcn/button";
+import { useNavigate } from "react-router-dom";
+import { ROUTE_PATH } from "@/app/routes/routeConstants";
+
+const MainHero = () => {
+  const navigate = useNavigate();
+  const goToOverview = () => navigate(ROUTE_PATH.OVERVIEW_PROJECT_OVERVIEW);
+
+  return (
+    <section
+      id="main-hero"
+      aria-label="Main Hero Section"
+      className="min-h-screen flex items-center justify-center w-full"
+    >
+      <div className="max-w-4xl mx-auto px-6 text-center flex flex-col items-center gap-8">
+        <h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-gray-900">
+          Boost Development Docs
+        </h1>
+
+        <p className="text-gray-600 text-lg sm:text-xl max-w-2xl leading-relaxed">
+          Boost 프로젝트 개발 문서에 오신 것을 환영합니다.
+          <br /> 현재 디자인은 임시이며, 더 예쁘고 완성도 있게 개선될
+          예정입니다!
+        </p>
+
+        <div className="mt-2">
+          <p className="text-gray-500 mb-4">
+            시작하려면 아래 버튼을 클릭하세요.
+          </p>
+          <Button
+            onClick={goToOverview}
+            variant="boostBlue"
+            className="px-8 py-3 text-base rounded-full"
+          >
+            문서 보러가기
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default MainHero;
diff --git a/src/features/main/components/MainNavigation.tsx b/src/features/main/components/MainNavigation.tsx
@@ -0,0 +1,94 @@
+import { Button } from "@/shared/components/shadcn/button";
+import { Menu, X } from "lucide-react";
+import { useState } from "react";
+
+const navItems = [
+  { label: "Home", href: "#home" },
+  { label: "About Docs", href: "#about-docs" },
+  // { label: "Quick Search", href: "#quick-search" },
+  // { label: "Help", href: "#help" },
+];
+
+const MainNavigation = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleNavClick = (href: string) => {
+    const el = document.querySelector(href);
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth" });
+    }
+    setIsOpen(false);
+  };
+
+  return (
+    <nav
+      id="main-nav"
+      aria-label="Main Navigation"
+      className="fixed top-0 left-0 w-screen bg-gray-100 shadow-sm z-50"
+    >
+      <div className="px-6 md:px-0 max-w-7xl mx-auto flex items-center justify-between py-3">
+        <div className="text-xl font-bold text-boost-blue">
+          BOOST <strong className="text-gray-900">Dev Docs</strong>
+        </div>
+
+        <div className="hidden md:flex space-x-12">
+          {navItems.map((item) => (
+            <a
+              key={item.href}
+              href={item.href}
+              className="text-gray-700 hover:text-boost-blue transition"
+            >
+              {item.label}
+            </a>
+          ))}
+        </div>
+
+        <div className="hidden md:block">
+          <Button
+            variant="boostBlue"
+            className="rounded-full"
+            onClick={() => {
+              window.open("https://boost.ai.kr", "_blank");
+            }}
+          >
+            BOOST 서비스로 이동
+          </Button>
+        </div>
+
+        <button
+          className="md:hidden text-gray-700"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          {isOpen ? <X size={24} /> : <Menu size={24} />}
+        </button>
+      </div>
+
+      {isOpen && (
+        <div className="md:hidden absolute top-full left-0 w-full bg-gray-100 shadow-md flex flex-col items-center py-4 space-y-4 px-6">
+          {navItems.map((item) => (
+            <button
+              key={item.href}
+              onClick={() => handleNavClick(item.href)}
+              className="text-gray-700 hover:text-boost-blue text-lg transition w-full"
+            >
+              {item.label}
+            </button>
+          ))}
+
+          <Button
+            onClick={() => {
+              setIsOpen(false);
+              window.open("https://boost.ai.kr", "_blank");
+            }}
+            variant="boostBlue"
+            className="w-full"
+          >
+            BOOST 서비스로 이동
+          </Button>
+        </div>
+      )}
+    </nav>
+  );
+};
+
+export default MainNavigation;