[Feature/Refactor] Website UI/UX Renewal and Style Optimization #60

src/components/Criteria.astro

@@ -0,0 +1,36 @@
+---
+// src/components/Criteria.astro
+interface Props {
+  items: string[];
+}
+const { items } = Astro.props;
+---
+
+<div
+  class="my-4 rounded-xl border border-emerald-100 bg-emerald-50/30 p-4 shadow-sm"
+>
+  {/* 항목들을 모바일에서도 한 줄에 예쁘게 칩(Chip) 형태로 가로 배치 */}
+  <div class="flex flex-wrap gap-2.5">
+    {
+      items.map((item) => (
+        <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-emerald-200 bg-white text-emerald-800 shadow-sm transition-all hover:border-emerald-300">
+          {/* 성공/패스를 의미하는 초록색 체크 아이콘 */}
+          <svg
+            class="h-4 w-4 shrink-0 text-emerald-500"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="3"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M4.5 12.75l6 6 9-13.5"
+            />
+          </svg>
+          <span class="text-sm font-bold tracking-tight">{item}</span>
+        </div>
+      ))
+    }
+  </div>
+</div>

src/components/DocBadgeGrid.astro

@@ -0,0 +1,19 @@
+---
+// src/components/DocBadgeGrid.astro
+interface Props {
+  docs: string[];
+}
+const { docs } = Astro.props;
+---
+
+<div
+  class="my-5 flex flex-wrap gap-2 rounded-xl bg-slate-50 border border-slate-200/60 p-4 shadow-sm"
+>
+  {
+    docs.map((doc) => (
+      <span class="inline-block px-3 py-1.5 text-xs font-bold bg-slate-950 text-slate-100 border border-slate-900 rounded-lg shadow-sm font-mono tracking-tight transition-all hover:bg-slate-900">
+        {doc}
+      </span>
+    ))
+  }
+</div>

src/components/DocLink.astro

@@ -0,0 +1,30 @@
+---
+// src/components/DocLink.astro
+interface Props {
+  href: string;
+  text?: string;
+}
+const { href, text = 'View Document Standard' } = Astro.props;
+---
+
+<div class="my-4">
+  <a
+    href={href}
+    class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border border-slate-200 bg-white text-xs font-bold text-slate-600 shadow-sm no-underline transition-all hover:bg-slate-50 hover:text-slate-900 hover:border-slate-300 group"
+  >
+    <span>{text}</span>
+    {/* 오른쪽으로 향하는 미니멀한 화살표 애니메이션 */}
+    <svg
+      class="h-3.5 w-3.5 text-slate-400 transition-transform group-hover:translate-x-0.5 group-hover:text-slate-700"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="3"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path>
+    </svg>
+  </a>
+</div>

src/components/DocumentFlow.astro

@@ -0,0 +1,42 @@
+---
+// src/components/DocumentFlow.astro
+interface Props {
+  documents: string[];
+}
+const { documents } = Astro.props;
+---
+
+<div
+  class="my-6 rounded-2xl border border-slate-200 bg-slate-50/60 p-5 shadow-sm"
+>
+  {/* 모바일 화면에서도 자연스럽게 흐르도록 flex-wrap 처리 */}
+  <div class="flex flex-wrap items-center gap-x-2.5 gap-y-3.5">
+    {
+      documents.map((doc, idx) => (
+        <div class="flex items-center gap-2.5">
+          {/* .md 파일명에 맞춰 시그니처 폰트 스타일(Mono)과 묵직한 다크 배지 적용 */}
+          <span class="inline-block px-3 py-1.5 text-xs font-bold bg-slate-950 text-slate-100 border border-slate-900 rounded-lg shadow-sm font-mono tracking-tight">
+            {doc}
+          </span>
+
+          {/* 마지막 문서 뒤에는 화살표를 표시하지 않음 */}
+          {idx < documents.length - 1 && (
+            <svg
+              class="h-4 w-4 text-slate-400 shrink-0"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="3"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
+              />
+            </svg>
+          )}
+        </div>
+      ))
+    }
+  </div>
+</div>

src/components/Hero.astro

@@ -0,0 +1,153 @@
+<section
+  class="relative w-full min-h-[70vh] sm:min-h-[85vh] flex items-center overflow-hidden bg-white border-b border-slate-100"
+  style={`background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5))`}
+>
+  <div class="absolute inset-0 z-0 pointer-events-none select-none">
+    <svg
+      class="absolute right-0 top-0 h-full w-full md:w-[60%] text-slate-200/40"
+      viewBox="0 0 800 600"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M500 0L580 120L480 250L620 320L520 500L680 600"
+        stroke="currentColor"
+        stroke-width="1"></path>
+      <path
+        d="M580 120L700 80L800 180L620 320"
+        stroke="currentColor"
+        stroke-width="1"></path>
+      <path
+        d="M480 250L380 340L420 480L520 500"
+        stroke="currentColor"
+        stroke-width="1"></path>
+      <path d="M620 320L750 380L680 600" stroke="currentColor" stroke-width="1"
+      ></path>
+      <path
+        d="M700 80L800 0M800 180L850 280M750 380L820 450M420 480L350 600"
+        stroke="currentColor"
+        stroke-width="1"
+        stroke-dasharray="4 4"></path>
+
+      <circle cx="500" cy="0" r="4" fill="currentColor"></circle>
+      <circle cx="580" cy="120" r="4" fill="currentColor"></circle>
+      <circle cx="480" cy="250" r="4" fill="currentColor"></circle>
+      <circle cx="620" cy="320" r="4" fill="currentColor"></circle>
+      <circle cx="520" cy="500" r="4" fill="currentColor"></circle>
+      <circle cx="680" cy="600" r="4" fill="currentColor"></circle>
+      <circle cx="700" cy="80" r="3" fill="currentColor"></circle>
+      <circle cx="800" cy="180" r="3" fill="currentColor"></circle>
+      <circle cx="380" cy="340" r="3" fill="currentColor"></circle>
+      <circle cx="420" cy="480" r="3" fill="currentColor"></circle>
+      <circle cx="750" cy="380" r="3" fill="currentColor"></circle>
+    </svg>
+
+    <div
+      class="absolute inset-0 bg-gradient-to-r from-white via-white/90 to-transparent md:to-transparent"
+    >
+    </div>
+  </div>
+
+  <div
+    class="relative z-10 w-full max-w-7xl mx-auto px-6 sm:px-8 md:px-12 py-12"
+  >
+    <div class="max-w-2xl">
+      {/* 탑 라벨 서브타이틀 */}
+      <span
+        class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-slate-50 border border-slate-200/60 text-[10px] sm:text-[11px] font-black tracking-wide text-slate-600 font-mono mb-6 select-none shadow-sm"
+      >
+        <span class="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse"
+        ></span>
+        AI-CENTRIC PRODUCT DEVELOPMENT FRAMEWORK
+      </span>
+
+      {/* 메인 카피라인 */}
+      <h1
+        class="text-4xl sm:text-5xl md:text-6xl font-black text-slate-900 tracking-tight leading-[1.12] mb-6"
+      >
+        AI는 바뀝니다.<br />
+        <span
+          class="bg-gradient-to-r from-slate-950 via-slate-800 to-slate-600 bg-clip-text text-transparent"
+        >
+          프로젝트는 계속되어야 합니다.
+        </span>
+      </h1>
+
+      {/* 코어 설명 */}
+      <p
+        class="text-base sm:text-lg font-normal text-slate-600 leading-relaxed max-w-xl mb-8"
+      >
+        REPL Works는 일회성 Chat 에이전트가 아닙니다. 프로젝트의 본질적인 의도,
+        설계 구조, 아키텍처 결정을 규칙화하여 <strong
+          class="font-extrabold text-slate-900 shadow-[inset_0_-4px_0_rgba(14,165,233,0.1)]"
+          >Git에 영구 자산으로 남기는</strong
+        > AI 중심 개발 프레임워크입니다.
+      </p>
+
+      {/* 핵심 가치 배지 보드 */}
+      <div class="mb-10">
+        <span
+          class="text-[10px] font-black tracking-widest text-slate-400 uppercase font-mono block mb-3.5"
+          >WHAT WE PROVIDE</span
+        >
+        <div class="flex flex-wrap gap-2.5 max-w-xl">
+          <span
+            class="inline-flex items-center px-3 py-1.5 rounded-xl border border-slate-200/80 bg-white text-xs font-semibold text-slate-700 hover:border-slate-300 hover:shadow-sm transition-all select-none"
+          >
+            ✨ 특정 AI 의존성 탈피
+          </span>
+          <span
+            class="inline-flex items-center px-3 py-1.5 rounded-xl border border-slate-200/80 bg-white text-xs font-semibold text-slate-700 hover:border-slate-300 hover:shadow-sm transition-all select-none"
+          >
+            ⏳ 프로젝트 지속성
+          </span>
+          <span
+            class="inline-flex items-center px-3 py-1.5 rounded-xl border border-slate-200/80 bg-white text-xs font-semibold text-slate-700 hover:border-slate-300 hover:shadow-sm transition-all select-none"
+          >
+            ⚡ AI 입력 비용 최적화
+          </span>
+          <span
+            class="inline-flex items-center px-3 py-1.5 rounded-xl border border-slate-200/80 bg-white text-xs font-semibold text-slate-700 hover:border-slate-300 hover:shadow-sm transition-all select-none"
+          >
+            🌱 온보딩 비용 절감
+          </span>
+          <span
+            class="inline-flex items-center px-3 py-1.5 rounded-xl border border-slate-200/80 bg-white text-xs font-semibold text-slate-700 hover:border-slate-300 hover:shadow-sm transition-all select-none"
+          >
+            📦 Git 기반 워크플로
+          </span>
+        </div>
+      </div>
+
+      {/* 액션 버튼 */}
+      <div class="flex flex-wrap items-center gap-3">
+        <a
+          href="/workflow"
+          class="inline-flex items-center justify-center px-6 py-3 text-xs font-black text-white bg-slate-950 rounded-xl shadow-md hover:bg-slate-900 hover:-translate-y-0.5 transition-all group shrink-0"
+        >
+          <span>워크플로 시작하기</span>
+          <svg
+            class="h-3.5 w-3.5 ml-1.5 text-slate-400 transition-transform group-hover:translate-x-1"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="3"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path>
+          </svg>
+        </a>
+        <a
+          href="https://github.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center justify-center px-6 py-3 text-xs font-black text-slate-700 bg-white border border-slate-200 rounded-xl shadow-sm hover:bg-slate-50 hover:border-slate-300 hover:-translate-y-0.5 transition-all shrink-0"
+        >
+          GitHub 원격 저장소
+        </a>
+      </div>
+    </div>
+  </div>
+</section>

src/components/InOut.astro

@@ -0,0 +1,76 @@
+---
+// src/components/InOut.astro
+interface Props {
+  type: 'input' | 'output';
+  items: string[];
+}
+
+const { type, items } = Astro.props;
+
+// 입력과 출력에 따른 스타일 정의
+const isInput = type === 'input';
+const bgColor = isInput ? 'bg-slate-50' : 'bg-blue-50/50';
+const borderColor = isInput ? 'border-slate-200' : 'border-blue-200';
+const labelColor = isInput ? 'bg-slate-900' : 'bg-blue-600';
+const iconColor = isInput ? 'text-slate-400' : 'text-blue-500';
+---
+
+<div class={`my-4 rounded-2xl border ${borderColor} ${bgColor} p-5 shadow-sm`}>
+  {/* 상단 라벨 */}
+  <div class="mb-4 flex items-center gap-2">
+    <span
+      class={`px-2.5 py-0.5 text-[10px] font-black uppercase tracking-wider text-white rounded-full ${labelColor}`}
+    >
+      {type}
+    </span>
+    <div class={`h-px flex-1 ${isInput ? 'bg-slate-200' : 'bg-blue-200'}`}>
+    </div>
+  </div>
+
+  {/* 아이템 리스트 (가로로 예쁘게 배치) */}
+  <div class="flex flex-wrap gap-2">
+    {
+      items.map((item) => (
+        <div
+          class={`flex items-center gap-2 px-3 py-1.5 rounded-lg border shadow-sm transition-all ${
+            item.endsWith('.md')
+              ? 'bg-slate-950 text-slate-100 border-slate-800 font-mono'
+              : 'bg-white text-slate-800 border-slate-200'
+          }`}
+        >
+          {/* 아이콘: 입력은 화살표 인, 출력은 체크박스 */}
+          {isInput ? (
+            <svg
+              class={`h-3.5 w-3.5 ${iconColor}`}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="3"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"
+              />
+            </svg>
+          ) : (
+            <svg
+              class={`h-3.5 w-3.5 ${iconColor}`}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="3"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M4.5 12.75l6 6 9-13.5"
+              />
+            </svg>
+          )}
+          <span class="text-sm font-bold tracking-tight">{item}</span>
+        </div>
+      ))
+    }
+  </div>
+</div>