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,137 @@
+import { Link } from "react-router-dom";
+import { capabilities, company } from "../data";
+import {
+  Action,
+  Arrow,
+  Eyebrow,
+  SectionHeading,
+  Textile,
+  WhatsAppAction,
+} from "../components/Primitives";
+import { ContactBanner } from "../components/Layout";
+import Gallery from "../components/Gallery";
+import Stats from "../components/Stats";
+import "./Home.css";
+
+const processItems = [
+  {
+    ...capabilities[0],
+    image: "fine",
+    href: "/fabrics#developments",
+  },
+  {
+    ...capabilities[2],
+    image: "structured",
+    href: "/fabrics#circular-knitting",
+  },
+  {
+    ...capabilities[1],
+    image: "natural",
+    href: "/fabrics#production",
+  },
+];
+
+export default function Home() {
+  return (
+    <>
+      <section className="home-hero">
+        <img
+          className="home-hero__image"
+          src="/images/knit-natural.jpg"
+          alt="Original illustrative macro knit texture, pending RRS photography"
+          width="1600"
+          height="1200"
+          fetchPriority="high"
+        />
+        <div className="home-hero__shade" />
+        <div className="home-hero__content">
+          <Eyebrow>Circular knitted fabrics · RRS</Eyebrow>
+          <h1 className="home-hero__title">
+            Built to develop.
+            <br />
+            <em>Built to repeat.</em>
+          </h1>
+          <p className="home-hero__description">{company.description}</p>
+          <div className="home-hero__actions">
+            <Action to="/fabrics" variant="light">
+              Explore our fabrics
+            </Action>
+            <WhatsAppAction variant="ghost">Talk to RRS</WhatsAppAction>
+          </div>
+        </div>
+        <div className="home-hero__bottom">
+          <span className="home-hero__tagline">
+            Consistency at scale. Continuous development.
+          </span>
+          <span className="home-hero__image-note">
+            Illustrative texture · Photography to follow
+          </span>
+        </div>
+      </section>
+      <Gallery preview />
+      <section className="home-intro">
+        <div className="home-intro__heading">
+          <Eyebrow>Our fabrics</Eyebrow>
+          <h2 className="home-intro__title">
+            Greige is where
+            <br />
+            <em>it begins.</em>
+          </h2>
+        </div>
+        <div className="home-intro__body">
+          <p className="home-intro__lead">
+            RRS specialises in circular-knitted greige fabrics developed for
+            varied apparel applications.
+          </p>
+          <p className="home-intro__text">
+            Different constructions require different yarns, blends and machine
+            configurations. Our manufacturing capability allows us to develop
+            fabrics around structure, texture, composition and intended use.
+          </p>
+          <p className="home-intro__text">
+            From shirting constructions to textured and structured knits, we
+            work across polyester, cotton, rayon, stretch yarns and varied
+            blends.
+          </p>
+          <Link className="home-intro__link" to="/about">
+            Get to know RRS <Arrow diagonal />
+          </Link>
+        </div>
+      </section>
+      <Stats />
+      <section className="process">
+        <SectionHeading
+          label="How we work"
+          title={
+            <>
+              Behind the fabric:
+              <br />
+              <em>our process.</em>
+            </>
+          }
+        >
+          <p>
+            Development, circular knitting and repeatable bulk production work
+            as one discipline.
+          </p>
+        </SectionHeading>
+        <div className="process__list">
+          {processItems.map(({ title, subtitle, text, image, href }) => (
+            <article className="process__item" key={title}>
+              <div className="process__copy">
+                <p className="process__verb">{title}</p>
+                <h3 className="process__title">{subtitle}</h3>
+                <p className="process__text">{text}</p>
+                <Link className="process__link" to={href}>
+                  Explore this capability <Arrow diagonal />
+                </Link>
+              </div>
+              <Textile className="process__visual" kind={image} />
+            </article>
+          ))}
+        </div>
+      </section>
+      <ContactBanner />
+    </>
+  );
+}