Add initial project files

apps/web/web-runtime/blocks/components/FaqBlock.tsx

@@ -0,0 +1,41 @@
+import type { FaqBlock as FaqBlockData } from '#web-runtime/types';
+
+export default function FaqBlock({ block }: { block: FaqBlockData }) {
+  return (
+    <section
+      className="border-b border-[#d6d7cf] py-[clamp(4.5rem,9vw,8rem)] nth-of-type-[even]:bg-[#fffdf8]"
+      data-page-block={block.type}
+    >
+      <div className="mx-auto grid w-[min(calc(100%-2rem),76rem)] grid-cols-[minmax(15rem,0.65fr)_minmax(0,1fr)] items-start gap-[clamp(2rem,7vw,7rem)] max-[45rem]:w-[min(calc(100%-1.25rem),76rem)] max-[45rem]:grid-cols-1">
+        {block.title || block.subtitle ? (
+          <header className="sticky top-8 max-w-3xl max-[45rem]:static">
+            {block.title ? (
+              <h2 className="text-[clamp(2rem,4vw,3.8rem)] leading-[1.04] font-semibold tracking-[-0.055em]">
+                {block.title}
+              </h2>
+            ) : null}
+            {block.subtitle ? (
+              <p className="mt-4 max-w-160 text-lg leading-[1.6] text-[#5d675f]">
+                {block.subtitle}
+              </p>
+            ) : null}
+          </header>
+        ) : null}
+
+        <div className="border-t border-[#172019]">
+          {block.items.map((item, index) => (
+            <details
+              className="group border-b border-[#d6d7cf] py-5"
+              key={`${block.id}-item-${index}`}
+            >
+              <summary className="flex cursor-pointer list-none items-center justify-between gap-4 text-[1.05rem] leading-[1.4] font-bold marker:hidden after:shrink-0 after:font-mono after:text-[1.35rem] after:text-[#517000] after:content-['+'] group-open:after:content-['−'] [&::-webkit-details-marker]:hidden">
+                {item.question}
+              </summary>
+              <p className="mt-4 max-w-180 leading-[1.7] text-[#5d675f]">{item.answer}</p>
+            </details>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}