Built around
@@ -92,7 +93,7 @@ export default function About() {
>
{" "}
- Radhe Radhe Synthetics is a specialist manufacturer of greige knitted
+ Radhe Radhe Synthetics is a specialist manufacturer of grey knitted
fabrics with a focus on consistent bulk production and continuous
fabric development.
diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx
index 5bd6a0a..03e552e 100644
--- a/src/pages/Contact.jsx
+++ b/src/pages/Contact.jsx
@@ -60,7 +60,7 @@ export default function Contact() {
fabric requirement.
}
- texture="structured"
+ src="/images/library/hero-02-tencel-cotton.jpeg"
>
Share an existing requirement, bulk quantity or new construction with
diff --git a/src/pages/Fabrics.jsx b/src/pages/Fabrics.jsx
index 60b1908..16aece2 100644
--- a/src/pages/Fabrics.jsx
+++ b/src/pages/Fabrics.jsx
@@ -10,6 +10,7 @@ export default function Fabrics() {
<>
Different yarns.
@@ -19,8 +20,8 @@ export default function Fabrics() {
}
>
- RRS manufactures greige knitted fabrics across diverse yarns, fibres
- and blends, with constructions developed according to the required
+ RRS manufactures grey knitted fabrics across diverse yarns, fibres and
+ blends, with constructions developed according to the required
texture, appearance and apparel application.
diff --git a/src/pages/Home.css b/src/pages/Home.css
index 5b704cd..85f3b9d 100644
--- a/src/pages/Home.css
+++ b/src/pages/Home.css
@@ -6,27 +6,24 @@
overflow: hidden;
min-height: 768px;
margin-inline: calc(0px - var(--page-gutter));
- color: var(--paper);
- background: var(--ink);
-}
-.home-hero__image {
- position: absolute;
- inset: 0;
- width: 100%;
- height: 100%;
- object-fit: cover;
- object-position: center 65%;
+ color: var(--ink);
+ background: var(--wash);
}
.home-hero__shade {
position: absolute;
inset: 0;
- background:
- linear-gradient(90deg, #132630e8 0%, #1f3239a8 54%, #17262f73 100%),
- linear-gradient(0deg, #111b22b5 0%, transparent 45%);
+ z-index: 1;
+ background: linear-gradient(
+ 90deg,
+ #f5f3eef5 0%,
+ #f5f3eed1 42%,
+ #f5f3ee5c 70%,
+ transparent 100%
+ );
}
.home-hero__content {
position: relative;
- z-index: 1;
+ z-index: 2;
max-width: 900px;
padding: 65px 62px 90px;
}
@@ -41,7 +38,7 @@
.home-hero__description {
max-width: 400px;
margin: 0 0 30px;
- color: #eeece5;
+ color: var(--muted);
font-size: 15px;
line-height: 1.8;
}
@@ -52,6 +49,7 @@
}
.home-hero__bottom {
position: absolute;
+ z-index: 2;
bottom: 0;
left: var(--page-gutter);
right: var(--page-gutter);
@@ -59,18 +57,18 @@
justify-content: space-between;
gap: 20px;
padding: 20px 0;
- border-top: 1px solid #ffffff35;
+ border-top: 1px solid #282a2330;
font-size: 11px;
line-height: 1.6;
}
.home-hero__tagline {
font-size: clamp(14px, 1.2vw, 16px);
font-weight: 500;
- color: #ffffff;
+ color: var(--ink);
letter-spacing: 0.01em;
}
.home-hero__image-note {
- color: #e2e2dc;
+ color: var(--muted);
}
.home-intro {
display: grid;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index d2de25e..75bc021 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -9,12 +9,18 @@ import {
} from "../components/Primitives";
import { ContactBanner } from "../components/Layout";
import Gallery from "../components/Gallery";
+import ImageCarousel from "../components/ImageCarousel";
import Stats from "../components/Stats";
import "./Home.css";
const processItems = capabilities.map((capability, index) => ({
...capability,
- image: ["fine", "natural", "structured", "fine"][index],
+ image: [
+ "/images/library/polyester-04.jpeg",
+ "/images/library/polyester-05.jpeg",
+ "/images/library/exclusive-04-madagascar.jpeg",
+ "/images/library/exclusive-05-premium-structure.jpeg",
+ ][index],
href: index < 2 ? "/fabrics#applications" : "/fabrics#production",
}));
@@ -22,14 +28,7 @@ export default function Home() {
return (
<>
- 
+
Specialist circular-knitting manufacturer · RRS
@@ -39,15 +38,15 @@ export default function Home() {
Built to repeat.
- Greige knitted fabrics developed around yarn, structure and
+ Grey knitted fabrics developed around yarn, structure and
application—then manufactured for consistent commercial supply.
-
+
Explore our fabrics
-
- Request a quote
+
+ Talk to us
@@ -66,14 +65,14 @@ export default function Home() {
Our fabrics
- Greige is where
+ Grey is where
it begins.
- RRS specialises in circular-knitted greige fabrics developed for
+ RRS specialises in circular-knitted grey fabrics developed for
varied apparel applications.
@@ -118,7 +117,7 @@ export default function Home() {
See our capability
-
+
))}
diff --git a/src/pages/Products.css b/src/pages/Products.css
new file mode 100644
index 0000000..649e579
--- /dev/null
+++ b/src/pages/Products.css
@@ -0,0 +1,156 @@
+.products-hero {
+ position: relative;
+ display: flex;
+ align-items: center;
+ min-height: 680px;
+ margin-inline: calc(0px - var(--page-gutter));
+ overflow: hidden;
+ color: var(--ink);
+}
+.products-hero__shade {
+ position: absolute;
+ inset: 0;
+ z-index: 1;
+ background: linear-gradient(
+ 90deg,
+ #f5f3eef5 0%,
+ #f5f3eed1 42%,
+ #f5f3ee5c 70%,
+ transparent 100%
+ );
+}
+.products-hero__content {
+ position: relative;
+ z-index: 2;
+ width: min(650px, 65%);
+ padding: 80px var(--page-gutter) 110px;
+}
+.products-hero__title {
+ margin: 28px 0 24px;
+ font-family: var(--serif);
+ font-size: clamp(54px, 6.5vw, 92px);
+ font-weight: 400;
+ line-height: 0.98;
+ letter-spacing: -0.045em;
+}
+.products-hero__text {
+ max-width: 460px;
+ margin: 0;
+ font-size: 15px;
+ line-height: 1.8;
+}
+.products-hero__note {
+ position: absolute;
+ z-index: 2;
+ right: var(--page-gutter);
+ bottom: 24px;
+ margin: 0;
+ font-size: 10px;
+ color: var(--muted);
+}
+.products-list {
+ padding-top: 95px;
+}
+.products-list__grid {
+ border-top: 1px solid var(--line);
+}
+.product {
+ display: grid;
+ grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+ align-items: center;
+ gap: clamp(36px, 7vw, 110px);
+ padding: 58px 0;
+ border-bottom: 1px solid var(--line);
+}
+.product:nth-child(even) .product__visual {
+ order: 2;
+}
+.product__visual {
+ position: relative;
+ min-height: 0;
+ aspect-ratio: 16 / 10;
+ overflow: hidden;
+ background: var(--wash);
+}
+.product__visual img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+.product__visual span {
+ position: absolute;
+ left: 14px;
+ bottom: 14px;
+ padding: 7px 10px;
+ background: #f5f3eedb;
+ font-size: 10px;
+}
+.product__copy {
+ max-width: 520px;
+}
+.product__title {
+ margin: 0 0 20px;
+ font-family: var(--serif);
+ font-size: clamp(38px, 4.5vw, 64px);
+ font-weight: 500;
+ line-height: 1;
+ letter-spacing: -0.035em;
+}
+.product__text {
+ max-width: 440px;
+ margin: 0;
+ color: var(--muted);
+ font-size: 14px;
+ line-height: 1.9;
+}
+.product__categories {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px 0;
+ margin: 26px 0 0;
+ padding: 0;
+ list-style: none;
+}
+.product__categories li {
+ font-size: 12px;
+}
+.product__categories li + li::before {
+ content: "/";
+ margin: 0 12px;
+ color: var(--muted);
+}
+@media (max-width: 700px) {
+ .products-hero {
+ min-height: 560px;
+ }
+ .products-hero__shade {
+ background: linear-gradient(90deg, #f5f3eef2, #f5f3ee8a);
+ }
+ .products-hero__content {
+ width: 100%;
+ padding-bottom: 100px;
+ }
+ .products-hero__title {
+ font-size: clamp(46px, 13vw, 72px);
+ }
+ .products-hero__note {
+ left: var(--page-gutter);
+ right: var(--page-gutter);
+ }
+ .products-list {
+ padding-top: 60px;
+ }
+ .product {
+ grid-template-columns: 1fr;
+ gap: 28px;
+ padding: 42px 0;
+ }
+ .product:nth-child(even) .product__visual {
+ order: 0;
+ }
+ .product__visual {
+ min-height: 0;
+ aspect-ratio: 4 / 3;
+ }
+}
diff --git a/src/pages/Products.jsx b/src/pages/Products.jsx
new file mode 100644
index 0000000..3deb866
--- /dev/null
+++ b/src/pages/Products.jsx
@@ -0,0 +1,69 @@
+import { products } from "../data";
+import ImageCarousel from "../components/ImageCarousel";
+import { ContactBanner } from "../components/Layout";
+import { Eyebrow, SectionHeading } from "../components/Primitives";
+import "./Products.css";
+
+export default function Products() {
+ return (
+ <>
+
+
+
+
+
Products
+
+ Knitted for
+
+ everyday performance.
+
+
+ Explore the product families RRS manufactures across everyday,
+ active, exclusive and natural-fibre applications.
+
+
+ Illustrative product imagery · RRS photography to follow
+
+
+
+
+ Built around
+
+ the application.
+
+ }
+ >
+
+ Each family can be developed around the required structure, yarn,
+ handle and commercial quantity.
+
+
+
+ {products.map(({ title, text, categories, images }) => (
+
+
+
+
+
+
{title}
+
{text}
+ {categories.length > 0 && (
+
+ {categories.map((category) => (
+ - {category}
+ ))}
+
+ )}
+
+ ))}
+
- Image placeholder
{caption && (