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,125 @@
+import { Link } from "react-router-dom";
+import { company, whatsappUrl } from "../data";
+import "./Primitives.css";
+
+export function Arrow({ diagonal = false }) {
+  return (
+    <svg
+      className="arrow"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        d={diagonal ? "M6 18 18 6M6 6h12v12" : "M4 12h15m-6-6 6 6-6 6"}
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function Action({ children, to, variant = "dark" }) {
+  return (
+    <Link className={`action action--${variant}`} to={to}>
+      {children}
+      <Arrow />
+    </Link>
+  );
+}
+
+export function WhatsAppAction({
+  children = "Talk to us on WhatsApp",
+  variant = "dark",
+  direct = false,
+}) {
+  const url = whatsappUrl(company.whatsapp);
+  const className = `action action--${variant}`;
+  if (url)
+    return (
+      <a className={className} href={url} target="_blank" rel="noreferrer">
+        {children}
+        <Arrow diagonal />
+      </a>
+    );
+  if (direct)
+    return (
+      <button
+        className={className}
+        type="button"
+        disabled
+        aria-describedby="whatsapp-status"
+      >
+        {children}
+        <Arrow diagonal />
+      </button>
+    );
+  return (
+    <Action to="/contact#whatsapp" variant={variant}>
+      {children}
+    </Action>
+  );
+}
+
+export function Eyebrow({ children }) {
+  return <p className="eyebrow">{children}</p>;
+}
+
+export function SectionHeading({ label, title, children, centered = false }) {
+  return (
+    <header
+      className={`section-heading${centered ? " section-heading--centered" : ""}`}
+    >
+      <div className="section-heading__title">
+        <Eyebrow>{label}</Eyebrow>
+        <h2 className="section-heading__heading">{title}</h2>
+      </div>
+      {children && <div className="section-heading__aside">{children}</div>}
+    </header>
+  );
+}
+
+export function Textile({
+  kind = "natural",
+  className = "",
+  caption = true,
+  eager = false,
+}) {
+  return (
+    <figure className={`textile textile--${kind} ${className}`}>
+      <img
+        className="textile__image"
+        src={`/images/knit-${kind}.jpg`}
+        alt="Illustrative knitted texture — not an RRS product photograph"
+        width="1600"
+        height="1200"
+        loading={eager ? "eager" : "lazy"}
+      />
+      {caption && (
+        <figcaption className="textile__caption">
+          Illustrative texture · RRS photography to follow
+        </figcaption>
+      )}
+    </figure>
+  );
+}
+
+export function PageHero({ label, title, children, texture = "natural" }) {
+  return (
+    <section className="page-hero">
+      <div className="page-hero__copy">
+        <Eyebrow>{label}</Eyebrow>
+        <h1 className="page-hero__title">{title}</h1>
+        <div className="page-hero__description">{children}</div>
+        <span className="page-hero__footnote">
+          Radhe Radhe Synthetics · Greige knitted fabrics
+        </span>
+      </div>
+      <Textile kind={texture} eager />
+    </section>
+  );
+}