RRS First version

2026-09-12 03:08:23 -04:00
commit c050d25a84
41 changed files with 5575 additions and 0 deletions
@@ -0,0 +1,83 @@
+import { developments } from "../data";
+import { Action, SectionHeading } from "./Primitives";
+import "./Gallery.css";
+
+const textures = ["fine", "natural", "structured"];
+
+export default function Gallery({ preview = false }) {
+  const items = preview ? developments.slice(0, 3) : developments;
+  return (
+    <section className="gallery" id="developments" tabIndex={-1}>
+      <SectionHeading
+        centered
+        label="Selected developments"
+        title={
+          preview ? (
+            <>
+              Structure changes
+              <br />
+              <em>everything.</em>
+            </>
+          ) : (
+            <>
+              From greige
+              <br />
+              <em>to possibility.</em>
+            </>
+          )
+        }
+      >
+        <p className="gallery__intro">
+          {preview
+            ? "From subtle surface structures to more expressive knitted textures, different yarn combinations and machine setups produce entirely different fabric characteristics."
+            : "Selected developments are processed separately as reference samples to explore how a construction can translate after dyeing and finishing. RRS commercially manufactures greige fabric only."}
+        </p>
+        {preview && (
+          <Action to="/fabrics#developments" variant="outline">
+            View developments
+          </Action>
+        )}
+      </SectionHeading>
+      <div className="gallery__grid">
+        {items.map((name, index) => (
+          <article className="sample" key={name}>
+            <div className="sample__visual">
+              <img
+                className="sample__image"
+                src={`/images/knit-${textures[index % textures.length]}.jpg`}
+                alt={`Illustrative placeholder for ${name}; RRS sample photograph not yet supplied`}
+                width="1600"
+                height="1200"
+                loading="lazy"
+              />
+              <span className="sample__badge">Image placeholder</span>
+            </div>
+            <div className="sample__heading">
+              <h3 className="sample__name">{name}</h3>
+              <span className="sample__detail">Development reference</span>
+            </div>
+            <p className="sample__pending">RRS sample photography to follow.</p>
+          </article>
+        ))}
+      </div>
+      <aside className="gallery__notice">
+        <span className="gallery__notice-mark" aria-hidden="true">
+          i
+        </span>
+        <div>
+          <p className="gallery__notice-text">
+            Illustrative textures shown, not actual RRS samples. Development
+            names are references, not technical categories.
+          </p>
+          <p className="gallery__notice-text">
+            When supplied, processed images will be labelled{" "}
+            <strong>Processed Development Reference</strong>. Processed samples
+            are for visual reference; RRS commercially manufactures and supplies
+            greige fabric only. Finished appearance may vary depending on the
+            buyer’s processing and finishing method.
+          </p>
+        </div>
+      </aside>
+    </section>
+  );
+}