final pt.1

index.html

@@ -6,7 +6,7 @@
     <meta name="theme-color" content="#f5f3ee" />
     <meta
       name="description"
-      content="Radhe Radhe Synthetics - greige knitted fabrics engineered for diverse apparel applications. Consistency at scale. Continuous development."
+      content="Radhe Radhe Synthetics - manufacturing of fancy grey knitting and shirting fabrics. Consistency at scale. Continuous development."
     />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>RRS - Radhe Radhe Synthetics</title>

src/data.js

@@ -4,8 +4,7 @@ const address =
 export const company = Object.freeze({
   name: "Radhe Radhe Synthetics Pvt. Ltd.",
   shortName: "Radhe Radhe Synthetics Pvt Ltd.",
-  description:
+  description: "Manufacturing of fancy grey knitting and shirting fabrics.",
-    "Grey knitted fabrics engineered for diverse apparel applications.",
   whatsapp: "919769665899", // International digits, no + or spaces.
   phone: "+91 97696 65899",
   email: "radheradhesynthetics@gmail.com",
@@ -15,6 +14,7 @@ export const company = Object.freeze({
 
 export const navigation = [
   { to: "/", label: "Home" },
+  { to: "/about", label: "About" },
   { to: "/fabrics", label: "Fabrics" },
   { to: "/products", label: "Products" },
   { to: "/contact", label: "Contact" },
@@ -61,16 +61,6 @@ export const products = [
       "/images/refined/products/active-wear/Gemini_Generated_Image_ysg0d0ysg0d0ysg0.jpeg",
     ],
   },
-  {
-    title: "Imported / Exclusive Fabrics",
-    text: "Selected distinctive constructions for requirements beyond standard fabric programmes.",
-    categories: [],
-    images: [
-      "/images/refined/products/imported-exclusive/exclusive-01-alpine-fleece.jpeg",
-      "/images/refined/products/imported-exclusive/exclusive-02-bamboo.jpeg",
-      "/images/refined/products/imported-exclusive/exclusive-03-blue-construction.jpeg",
-    ],
-  },
   {
     title: "Cotton & Viscose",
     text: "Soft, breathable constructions for varied garment and womenswear applications.",

src/main.jsx

@@ -5,6 +5,7 @@ import Layout from "./components/Layout";
 import Loader from "./components/Loader";
 import { Action } from "./components/Primitives";
 import Home from "./pages/Home";
+import About from "./pages/About";
 import Fabrics from "./pages/Fabrics";
 import Contact from "./pages/Contact";
 import Products from "./pages/Products";
@@ -30,6 +31,7 @@ createRoot(document.getElementById("root")).render(
       <Routes>
         <Route element={<Layout />}>
           <Route index element={<Home />} />
+          <Route path="about" element={<About />} />
           <Route path="fabrics" element={<Fabrics />} />
           <Route path="products" element={<Products />} />
           <Route path="contact" element={<Contact />} />

src/pages/About.css

@@ -0,0 +1,198 @@
+.about-journey {
+  display: block;
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 110px 0;
+}
+
+.about-story {
+  display: grid;
+  grid-template-columns: 1fr 1.15fr;
+  gap: 70px;
+  align-items: center;
+  padding: 70px 0 100px;
+  border-bottom: 1px solid var(--line);
+}
+.about-story__copy {
+  min-width: 0;
+}
+.about-story__title {
+  margin: 0 0 28px;
+  font-family: var(--serif);
+  font-size: clamp(32px, 3.6vw, 50px);
+  line-height: 1.12;
+  font-weight: 400;
+  letter-spacing: -0.045em;
+}
+.about-story__text {
+  max-width: 560px;
+  margin: 0 0 22px;
+  color: var(--muted);
+  font-size: 15px;
+  line-height: 1.9;
+}
+.about-story__text strong {
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.about-journey__copy {}
+.about-journey__title {
+  margin: 0 0 28px;
+  font-family: var(--serif);
+  font-size: clamp(32px, 3.6vw, 50px);
+  line-height: 1.12;
+  font-weight: 400;
+  letter-spacing: -0.045em;
+}
+.about-journey__text {
+  max-width: 560px;
+  margin: 0 0 22px;
+  color: var(--muted);
+  font-size: 15px;
+  line-height: 1.9;
+}
+.about-work {
+  margin-inline: calc(0px - var(--page-gutter));
+  padding: 100px var(--page-gutter);
+  background: var(--wash);
+}
+.about-work__intro {
+  max-width: 420px;
+  margin-inline: auto;
+}
+.about-work__steps {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 64px;
+  list-style: none;
+  margin: 64px 0 0;
+  padding: 0;
+  counter-reset: work-steps;
+}
+.about-work__step {
+  min-width: 0;
+  padding-top: 22px;
+  border-top: 2px solid var(--ink);
+}
+.about-work__number {
+  display: block;
+  margin-bottom: 18px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--industrial);
+  letter-spacing: 0.08em;
+}
+.about-work__step-title {
+  margin: 0 0 14px;
+  font-family: var(--serif);
+  font-size: clamp(24px, 2vw, 30px);
+  font-weight: 400;
+  letter-spacing: -0.03em;
+}
+.about-work__step-text {
+  margin: 0;
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1.85;
+}
+
+.about-collections {
+  padding: 100px 0;
+}
+.about-collections__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 24px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.about-collection {
+  min-width: 0;
+}
+.about-collection__link {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  text-decoration: none;
+  color: inherit;
+}
+.about-collection__visual {
+  position: relative;
+  overflow: hidden;
+  border-radius: 5px;
+  background: #aba08b;
+  margin-bottom: 18px;
+}
+.about-collection__image {
+  display: block;
+  width: 100%;
+  min-height: 260px;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  transition: transform 400ms ease;
+}
+.about-collection__link:hover .about-collection__image {
+  transform: scale(1.035);
+}
+.about-collection__name {
+  font-family: var(--serif);
+  font-size: 20px;
+  letter-spacing: -0.02em;
+  margin-bottom: 8px;
+}
+.about-collection__text {
+  flex: 1;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.75;
+  margin-bottom: 16px;
+}
+.about-collection__cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+@media (max-width: 960px) {
+  .about-collections__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 760px) {
+  .about-story,
+  .about-story {
+    padding-bottom: 60px;
+  },
+  .about-story__image img {
+    max-height: 460px;
+  }
+  .about-work {
+    padding-top: 70px;
+    padding-bottom: 70px;
+  }
+  .about-work__steps {
+    grid-template-columns: 1fr;
+    gap: 44px;
+    margin-top: 44px;
+  }
+  .about-collections {
+    padding: 70px 0;
+  }
+}
+
+@media (max-width: 560px) {
+  .about-collections__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .about-collection__image {
+    transition: none;
+  }
+}

src/pages/About.jsx

@@ -0,0 +1,186 @@
+import { Link } from "react-router-dom";
+import { products } from "../data";
+import {
+  Arrow,
+  Eyebrow,
+  PageHero,
+  SectionHeading,
+  Textile,
+} from "../components/Primitives";
+import { ContactBanner } from "../components/Layout";
+import Stats from "../components/Stats";
+import "./About.css";
+
+const steps = [
+  {
+    number: "01",
+    title: "Develop",
+    text: "Every RRS fabric starts from the requirement. Yarn, composition, structure and machine configuration are selected around the application the fabric will serve.",
+  },
+  {
+    number: "02",
+    title: "Sample",
+    text: "Grey developments are processed separately as samples, so each construction can be seen as it will behave after dyeing and finishing.",
+  },
+  {
+    number: "03",
+    title: "Scale",
+    text: "Successful constructions are reproduced consistently across commercial quantities — the same character, run after run.",
+  },
+];
+
+export default function About() {
+  return (
+    <>
+      <PageHero
+        label="About RRS"
+        src="/images/library/hero-02-tencel-cotton.jpeg"
+        title={
+          <>
+            The mill behind
+            <br />
+            <em>the fabric.</em>
+          </>
+        }
+      >
+        <p>
+          Radhe Radhe Synthetics manufactures fancy grey knitting and shirting
+          fabrics — engineered around precise yarn, structure and requirement,
+          and backed by consistent commercial manufacturing.
+        </p>
+      </PageHero>
+
+      <section className="about-story">
+        <Textile
+          src="/images/library/gallery-01.jpeg"
+          className="about-story__image"
+        />
+        <div className="about-story__copy">
+          <Eyebrow>Who we are</Eyebrow>
+          <h2 className="about-story__title">
+            A knitting house,
+            <br />
+            <em>built for repeatability.</em>
+          </h2>
+          <p className="about-story__text">
+            <strong>
+              RRS is a circular-knitting manufacturer first and foremost.
+            </strong>{" "}
+            From a single set of machines operating 18 to 28 gauge and 30 to 34
+            inch diameter — single and double jersey — we turn high-quality yarn
+            into premium grey knitted fabrics.
+          </p>
+          <p className="about-story__text">
+            What distinguishes us is development. Every fabric can be
+            constructed around the texture, handle and structure a garment calls
+            for — and then reproduced consistently across bulk orders.
+            Consistency at scale is the promise behind every development.
+          </p>
+        </div>
+      </section>
+
+      <section className="about-journey">
+        <div className="about-journey__copy">
+          <Eyebrow>Our journey</Eyebrow>
+          <h2 className="about-journey__title">
+            From one machine
+            <br />
+            <em>to continuous capability.</em>
+          </h2>
+          <p className="about-journey__text">
+            RRS has grown from development-focused production into a
+            manufacturer built to reproduce successful constructions across
+            commercial quantities. The machinery floor covers multiple
+            circular-knitting configurations, letting us change yarn,
+            composition, structure and machine setup according to the fabric
+            being developed.
+          </p>
+          <p className="about-journey__text">
+            The result is a broad manufacturing vocabulary — from understated
+            shirting constructions to highly textured knitted surfaces —
+            developed, sampled and scaled under one roof.
+          </p>
+        </div>
+      </section>
+
+      <section className="about-work">
+        <SectionHeading
+          centered
+          label="How we work"
+          title={
+            <>
+              Develop.
+              <br />
+              <em>Sample. Scale.</em>
+            </>
+          }
+        >
+          <p className="about-work__intro">
+            The same process behind every RRS order — from the first
+            conversation to the final roll.
+          </p>
+        </SectionHeading>
+        <ol className="about-work__steps">
+          {steps.map(({ number, title, text }) => (
+            <li className="about-work__step" key={number}>
+              <span className="about-work__number" aria-hidden="true">
+                {number}
+              </span>
+              <h3 className="about-work__step-title">{title}</h3>
+              <p className="about-work__step-text">{text}</p>
+            </li>
+          ))}
+        </ol>
+      </section>
+
+      <Stats />
+
+      <section className="about-collections">
+        <SectionHeading
+          label="Collections"
+          title={
+            <>
+              What we
+              <br />
+              <em>manufacture.</em>
+            </>
+          }
+        />
+        <ul className="about-collections__grid">
+          {products.map(({ title, text, images }) => (
+            <li className="about-collection" key={title}>
+              <Link className="about-collection__link" to="/products">
+                <div className="about-collection__visual">
+                  <img
+                    className="about-collection__image"
+                    src={images[0]}
+                    alt={`${title} fabric`}
+                    width="1600"
+                    height="1200"
+                    loading="lazy"
+                  />
+                </div>
+                <span className="about-collection__name">{title}</span>
+                <span className="about-collection__text">{text}</span>
+                <span className="about-collection__cta">
+                  View products
+                  <Arrow diagonal />
+                </span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <ContactBanner
+        title={
+          <>
+            Developing your
+            <br />
+            <em>next construction?</em>
+          </>
+        }
+      />
+    </>
+  );
+}

src/pages/Products.jsx

@@ -19,26 +19,12 @@ export default function Products() {
           </h1>
           <p className="products-hero__text">
             Explore the product families RRS manufactures across everyday,
-            active, exclusive and natural-fibre applications.
+            active and natural-fibre applications.
           </p>
         </div>
       </section>
       <section className="products-list">
-        <SectionHeading
+        <SectionHeading title="Fabric Range" />
-          label="Product range"
-          title={
-            <>
-              Built around
-              <br />
-              <em>the application.</em>
-            </>
-          }
-        >
-          <p>
-            Each family can be developed around the required structure, yarn,
-            handle and commercial quantity.
-          </p>
-        </SectionHeading>
         <div className="products-list__grid">
           {products.map(({ title, text, categories, images }) => (
             <article className="product" key={title}>

tests/site.spec.js

@@ -3,6 +3,7 @@ import { whatsappUrl } from "../src/data.js";
 
 const pages = [
   ["/", "Built to develop."],
+  ["/about", "The mill behind"],
   ["/fabrics", "Different yarns."],
   ["/products", "Knitted for"],
   ["/contact", "Bring us your"],
@@ -78,11 +79,12 @@ test("desktop navigation, anchored CTA and browser back work", async ({
       .getByRole("navigation", { name: "Main navigation" })
       .getByRole("link", { name: "Fabrics", exact: true }),
   ).toHaveAttribute("aria-current", "page");
-  await page
+  const bannerCta = page
     .locator(".contact-banner")
-    .getByRole("link", { name: "Text us on WhatsApp", exact: true })
+    .getByRole("link", { name: "Text us on WhatsApp", exact: true });
-    .click();
+  await expect(bannerCta).toHaveAttribute("href", /wa\.me/);
-  await expect(page).toHaveURL("/contact#whatsapp");
+  await expect(bannerCta).toHaveAttribute("target", "_blank");
+  await page.goto("/contact#whatsapp");
   await expect(page.locator("#whatsapp")).toBeInViewport();
   await expect(
     page
@@ -94,12 +96,6 @@ test("desktop navigation, anchored CTA and browser back work", async ({
   );
   await page.goBack();
   await expect(page).toHaveURL("/fabrics");
-  await page.goto("/contact#whatsapp");
-  await page
-    .locator(".contact-banner")
-    .getByRole("link", { name: "Text us on WhatsApp", exact: true })
-    .click();
-  await expect(page.locator("#whatsapp")).toBeInViewport();
 });
 
 test("mobile navigation closes on selection and Escape", async ({ page }) => {