라우팅 추가 및 CSS 구성

- 개인 블로그
 - 로또
 - 여행

로고 이미지 추가 및 변경

src/pages/home/Home.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { navLinks } from '../../routes.jsx';
+import { getBlogPosts } from '../../data/blog';
+import './Home.css';
+
+const Home = () => {
+    const posts = getBlogPosts().slice(0, 3);
+    const highlights = navLinks.filter((link) => link.id !== 'home');
+
+    return (
+        <div className="home">
+            <section className="home-hero">
+                <div className="home-hero__text">
+                    <p className="home-hero__kicker">Personal Archive</p>
+                    <h1>기록을 모으고, 이야기를 이어붙이는 작은 집.</h1>
+                    <p className="home-hero__lead">
+                        개발 실험, 여행 스냅, 그리고 생각을 모아두는 공간입니다. 블로그 글은
+                        마크다운으로 작성해 계속 추가할 수 있어요.
+                    </p>
+                    <div className="home-hero__actions">
+                        <Link className="button primary" to="/blog">
+                            블로그 둘러보기
+                        </Link>
+                        <Link className="button ghost" to="/travel">
+                            여행 갤러리 열기
+                        </Link>
+                    </div>
+                </div>
+                <div className="home-hero__card">
+                    <p className="home-hero__card-title">이번 달 집중 테마</p>
+                    <div className="home-hero__card-body">
+                        <h2>느린 기록, 깊은 회고</h2>
+                        <p>
+                            빠르게 업데이트하는 대신, 한 번쯤 되돌아보며 기록하는 걸 목표로
+                            합니다. 글은 매주 한 편씩 추가될 예정이에요.
+                        </p>
+                    </div>
+                    <div className="home-hero__stats">
+                        <div>
+                            <p className="stat-label">게시 글</p>
+                            <p className="stat-value">{posts.length}편</p>
+                        </div>
+                        <div>
+                            <p className="stat-label">다음 업데이트</p>
+                            <p className="stat-value">이번 주말</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section className="home-section">
+                <div className="home-section__header">
+                    <h2>공간 둘러보기</h2>
+                    <p>확장 가능한 구조로 구성해 이후에도 쉽게 페이지를 추가할 수 있습니다.</p>
+                </div>
+                <div className="home-grid">
+                    {highlights.map((item) => (
+                        <Link key={item.id} to={item.path} className="home-card">
+                            <div>
+                                <p className="home-card__title">{item.label}</p>
+                                <p className="home-card__desc">{item.description}</p>
+                            </div>
+                            <span className="home-card__cta">열기</span>
+                        </Link>
+                    ))}
+                </div>
+            </section>
+
+            <section className="home-section">
+                <div className="home-section__header">
+                    <h2>최근 블로그</h2>
+                    <p>마크다운 파일을 추가하면 자동으로 목록에 반영됩니다.</p>
+                </div>
+                <div className="home-posts">
+                    {posts.map((post) => (
+                        <Link key={post.slug} to="/blog" className="home-post">
+                            <p className="home-post__title">{post.title}</p>
+                            <p className="home-post__excerpt">{post.excerpt}</p>
+                            <span className="home-post__meta">{post.date || '작성일 미정'}</span>
+                        </Link>
+                    ))}
+                </div>
+            </section>
+        </div>
+    );
+};
+
+export default Home;