Skip to content

Commit 8dc1437

Browse files
coconecologcoconecolog
authored
Update index.astro
1 parent cb16cef commit 8dc1437

1 file changed

Lines changed: 88 additions & 3 deletions

File tree

‎src/pages/index.astro‎

Lines changed: 88 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
// トップページ。文言・リンクは src/data/home.ts にまとめています（文言の修正はそちらだけでOK）。
3-
// 構成: ヒーロー → 01 注力テーマ → 02 課題から探す → 03 新着記事 → 04 ご要望・ご質問
3+
// 構成: ヒーロー → 共通基準（黒い帯） → 01 注力テーマ → 02 課題から探す → 計画から改善、報告まで → 03 新着記事 → 04 ご要望・ご質問
44
// ・01: HOME_FOCUS.category のサブカテゴリ（STEP）と代表記事、ツール、記事・資料の新着を表示。
55
// ・02: Notionのカテゴリ（並び順）と、カテゴリごとのサブカテゴリを自動で表示。
66
// ・03: 記事を新しい順に自動表示（件数は HOME_LATEST.count）。
@@ -16,7 +16,7 @@ import {
1616
import { getResourceById, getResourceBySlug } from "@/lib/resources";
1717
import { SITE_NAME, SITE_DESCRIPTION } from "@/consts";
1818
import { buildOrganizationSchema } from "@/lib/schema";
19-
import { HOME_HERO, HOME_FOCUS, HOME_ISSUES, HOME_LATEST, HOME_REQUEST } from "@/data/home";
19+
import { HOME_HERO, HOME_STANDARDS, HOME_FOCUS, HOME_ISSUES, HOME_PDCA, HOME_LATEST, HOME_REQUEST } from "@/data/home";
2020
2121
const organizationSchema = buildOrganizationSchema();
2222
@@ -136,14 +136,40 @@ const latestPosts = getLibraryItems("post")
136136
<a href={HOME_HERO.imageLink.href} class="block transition-opacity hover:opacity-80" aria-hidden="true" tabindex="-1">
137137
<img src={HOME_HERO.image.src} alt={HOME_HERO.image.alt} width="484" height="475" class="h-auto w-full" />
138138
</a>
139-
<a href={HOME_HERO.imageLink.href} class="group mt-4 flex items-center justify-between gap-4 border-t-2 border-ink-950 pt-4 text-sm font-bold">
139+
<a href={HOME_HERO.imageLink.href} class="group mt-4 flex items-center justify-between gap-4 border-t border-neutral-300 pt-4 text-sm font-bold">
140140
<span class="group-hover:underline">{HOME_HERO.imageLink.label}</span>
141141
<span aria-hidden="true">→</span>
142142
</a>
143143
</div>
144144
</div>
145145
</section>
146146

147+
{/* ===== 共通基準（黒い帯） ===== */}
148+
<section class="bg-ink-950 text-white">
149+
<div class="mx-auto grid max-w-6xl gap-10 px-5 py-12 md:py-14 lg:grid-cols-[minmax(0,1.15fr)_minmax(0,2.3fr)] lg:gap-12">
150+
<div>
151+
<p class="text-xs font-bold text-white/70">{HOME_STANDARDS.eyebrow}</p>
152+
<p class="mt-4 text-xl font-extrabold leading-[1.6] md:text-2xl lg:text-[1.4rem]">
153+
{HOME_STANDARDS.headingLines.map((line) => (
154+
<span class="block">{line}</span>
155+
))}
156+
</p>
157+
</div>
158+
<div class="grid divide-y divide-white/20 sm:grid-cols-3 sm:divide-y-0">
159+
{HOME_STANDARDS.items.map((item) => (
160+
<a href={item.link.href} class="group flex flex-col py-5 sm:border-l sm:border-white/20 sm:py-0 sm:pl-6 sm:pr-6 sm:last:pr-0">
161+
<p class="text-xs font-bold text-white/70">{item.label}</p>
162+
<p class="mt-3 text-[0.95rem] font-extrabold leading-relaxed text-white">{item.title}</p>
163+
<span class="mt-auto inline-flex items-center justify-between gap-4 border-b border-white/40 pb-2 pt-6 text-sm font-bold text-white group-hover:border-white">
164+
{item.link.label}
165+
<span aria-hidden="true">→</span>
166+
</span>
167+
</a>
168+
))}
169+
</div>
170+
</div>
171+
</section>
172+
147173
{/* ===== 01 注力テーマ ===== */}
148174
<section id="focus" class="scroll-mt-20 border-t border-neutral-200">
149175
<div class="mx-auto max-w-6xl px-5 py-16 md:py-20">
@@ -299,6 +325,65 @@ const latestPosts = getLibraryItems("post")
299325
)
300326
}
301327

328+
{/* ===== 計画から改善、報告まで（文言は src/data/home.ts の HOME_PDCA） ===== */}
329+
<section id="tools" class="scroll-mt-20 border-t border-neutral-200">
330+
<div class="mx-auto max-w-6xl px-5 py-14 md:py-16">
331+
<div class="flex flex-col gap-2 md:flex-row md:items-baseline md:justify-between">
332+
<h2 class="text-2xl font-extrabold tracking-tight md:text-[1.75rem]">{HOME_PDCA.heading}</h2>
333+
<p class="text-sm text-neutral-600">{HOME_PDCA.sub}</p>
334+
</div>
335+
<div class="mt-8 grid gap-4 lg:grid-cols-3">
336+
{HOME_PDCA.steps.map((step) => (
337+
<div class="flex flex-col border border-neutral-300 bg-white p-6">
338+
<div class="flex items-center gap-3">
339+
<span class="text-3xl font-light tracking-tight text-neutral-500">{step.step}</span>
340+
<div>
341+
<p class="text-sm font-extrabold">{step.phase}</p>
342+
<p class="text-xs text-neutral-500">{step.purpose}</p>
343+
</div>
344+
</div>
345+
<h3 class="mt-5 text-lg font-extrabold leading-snug">
346+
<a href={step.href} class="hover:underline">{step.name}</a>
347+
</h3>
348+
<p class="mt-2 text-sm leading-relaxed text-neutral-700">{step.description}</p>
349+
<div class="mt-4 border-t border-neutral-200 pt-4">
350+
<p class="text-xs font-bold text-neutral-500">{HOME_PDCA.relatedLabel}</p>
351+
<ul class="mt-2 space-y-2">
352+
{step.related.map((r) => (
353+
<li class="flex items-start gap-2 text-sm">
354+
<span class="mt-[0.2em] shrink-0 border border-ink-950 px-1.5 text-[0.7rem] font-bold leading-snug">{r.type}</span>
355+
<span class="min-w-0 leading-snug">
356+
{r.href ? (
357+
<a href={r.href} class="font-bold hover:underline">{r.name}</a>
358+
) : (
359+
<span class="font-bold">{r.name}<span class="ml-2 text-xs font-normal text-neutral-500">{HOME_PDCA.comingSoonLabel}</span></span>
360+
)}
361+
{r.description && <span class="block text-xs text-neutral-600">{r.description}</span>}
362+
</span>
363+
</li>
364+
))}
365+
</ul>
366+
</div>
367+
<div class="mt-auto pt-5">
368+
<p class="text-xs text-neutral-500">{step.note}</p>
369+
<a href={step.href} class="mt-3 flex items-center justify-between gap-4 bg-ink-950 px-5 py-3 text-sm font-bold text-white transition-colors hover:bg-neutral-800">
370+
{HOME_PDCA.ctaLabel}
371+
<span aria-hidden="true">→</span>
372+
</a>
373+
</div>
374+
</div>
375+
))}
376+
</div>
377+
<div class="mt-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
378+
<p class="text-xs text-neutral-500">{HOME_PDCA.note}</p>
379+
<a href={HOME_PDCA.listLink.href} class="inline-flex items-center justify-between gap-10 self-start border border-neutral-300 px-6 py-3.5 text-sm font-bold transition-colors hover:border-ink-950 md:self-auto">
380+
{HOME_PDCA.listLink.label}
381+
<span aria-hidden="true">→</span>
382+
</a>
383+
</div>
384+
</div>
385+
</section>
386+
302387
{/* ===== 03 新着記事 ===== */}
303388
{
304389
latestPosts.length > 0 && (

0 commit comments

Comments
 (0)