changes i dont like
This commit is contained in:
@@ -34,28 +34,6 @@
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: #faf9f5;
|
||||
}
|
||||
.contact-strip {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
padding: 9px var(--page-gutter);
|
||||
background: #111;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.contact-strip__details {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.contact-strip a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.contact-strip a:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
.site-header__inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -111,22 +89,6 @@
|
||||
.site-nav__link:hover {
|
||||
color: var(--ink);
|
||||
}
|
||||
.site-nav__contact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
margin-left: 18px;
|
||||
padding: 12px 20px;
|
||||
border: 1px solid var(--industrial-deep);
|
||||
border-radius: 30px;
|
||||
background: var(--industrial-deep);
|
||||
color: var(--paper);
|
||||
text-decoration: none;
|
||||
font-size: 11px;
|
||||
}
|
||||
.site-nav__contact:hover {
|
||||
background: var(--industrial);
|
||||
}
|
||||
.site-header__toggle {
|
||||
display: none;
|
||||
}
|
||||
@@ -281,9 +243,6 @@
|
||||
.site-nav {
|
||||
gap: 23px;
|
||||
}
|
||||
.site-nav__contact {
|
||||
margin-left: 12px;
|
||||
}
|
||||
.site-footer__top {
|
||||
gap: 30px;
|
||||
}
|
||||
@@ -301,18 +260,6 @@
|
||||
padding-left: 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.contact-strip {
|
||||
align-items: center;
|
||||
padding-block: 8px;
|
||||
}
|
||||
.contact-strip > span {
|
||||
display: none;
|
||||
}
|
||||
.contact-strip__details {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.site-header__toggle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -344,11 +291,6 @@
|
||||
right: 15px;
|
||||
bottom: 20px;
|
||||
}
|
||||
.site-nav__contact {
|
||||
grid-column: 1 / -1;
|
||||
margin: 12px 0 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.contact-banner {
|
||||
padding: 40px 25px;
|
||||
min-height: 400px;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, NavLink, Outlet, useLocation } from "react-router-dom";
|
||||
import { company, navigation, phoneHref } from "../data";
|
||||
import { company, navigation } from "../data";
|
||||
import { Arrow, WhatsAppAction } from "./Primitives";
|
||||
import "./Layout.css";
|
||||
|
||||
@@ -32,14 +32,6 @@ function Header() {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="contact-strip">
|
||||
<span>Contact RRS</span>
|
||||
<div className="contact-strip__details">
|
||||
<a href={`mailto:${company.email}`}>{company.email}</a>
|
||||
<span aria-hidden="true">·</span>
|
||||
<a href={phoneHref(company.phone)}>{company.phone}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="site-header__inner">
|
||||
<Brand />
|
||||
<button
|
||||
@@ -71,13 +63,6 @@ function Header() {
|
||||
{label}
|
||||
</NavLink>
|
||||
))}
|
||||
<Link
|
||||
className="site-nav__contact"
|
||||
to="/contact#whatsapp"
|
||||
onClick={closeMenu}
|
||||
>
|
||||
Text us on WhatsApp <Arrow diagonal />
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -12,19 +12,18 @@ const facts = [
|
||||
label: "Our specialisation",
|
||||
value: "Grey",
|
||||
unit: "Knitted fabrics only",
|
||||
text: "The starting point for a world of possibilities.",
|
||||
},
|
||||
{
|
||||
label: "The capability",
|
||||
value: "Circular",
|
||||
unit: "Knitting · multiple constructions",
|
||||
text: "Different structures. Different configurations.",
|
||||
text: "We have all configuration machines from 18 gauge to 28 gauge and 30 Dia to 34 Dia, including single and double jersey machines.",
|
||||
},
|
||||
{
|
||||
label: "The approach",
|
||||
value: "Continuous",
|
||||
unit: "Fabric development",
|
||||
text: "Exploring yarns, blends and new constructions.",
|
||||
text: "Continuous improvement.",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -36,7 +35,7 @@ export default function Stats() {
|
||||
<p className="stats__label">{label}</p>
|
||||
<p className="stats__value">{value}</p>
|
||||
<p className="stats__unit">{unit}</p>
|
||||
<p className="stats__text">{text}</p>
|
||||
{text && <p className="stats__text">{text}</p>}
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
|
||||
+2
-26
@@ -3,12 +3,12 @@ const address =
|
||||
|
||||
export const company = Object.freeze({
|
||||
name: "Radhe Radhe Synthetics Pvt. Ltd.",
|
||||
shortName: "RadheRadhe Pvt. Ltd.",
|
||||
shortName: "Radhe Radhe Synthetics Pvt Ltd.",
|
||||
description:
|
||||
"Grey knitted fabrics engineered for diverse apparel applications.",
|
||||
whatsapp: "919769665899", // International digits, no + or spaces.
|
||||
phone: "+91 97696 65899",
|
||||
email: "hituagarwal2905@gmail.com",
|
||||
email: "radheradhesynthetics@gmail.com",
|
||||
address,
|
||||
mapsUrl: `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`,
|
||||
});
|
||||
@@ -17,33 +17,9 @@ export const navigation = [
|
||||
{ to: "/", label: "Home" },
|
||||
{ to: "/fabrics", label: "Fabrics" },
|
||||
{ to: "/products", label: "Products" },
|
||||
{ to: "/about", label: "Manufacturing" },
|
||||
{ to: "/contact", label: "Contact" },
|
||||
];
|
||||
|
||||
export const capabilities = [
|
||||
{
|
||||
title: "Develop",
|
||||
subtitle: "Define the construction",
|
||||
text: "The requirement begins with the intended application, yarn, blend, structure and fabric character.",
|
||||
},
|
||||
{
|
||||
title: "Configure",
|
||||
subtitle: "Match yarn to machine",
|
||||
text: "Machine configuration and yarn selection are aligned to the construction being developed.",
|
||||
},
|
||||
{
|
||||
title: "Manufacture",
|
||||
subtitle: "Circular knitting at scale",
|
||||
text: "The approved construction moves into grey production across the appropriate circular-knitting setup.",
|
||||
},
|
||||
{
|
||||
title: "Repeat",
|
||||
subtitle: "Maintain bulk consistency",
|
||||
text: "Successful developments are reproduced with repeatability across commercial manufacturing quantities.",
|
||||
},
|
||||
];
|
||||
|
||||
export const applications = [
|
||||
{
|
||||
title: "Shirting constructions",
|
||||
|
||||
@@ -6,7 +6,6 @@ import Loader from "./components/Loader";
|
||||
import { Action } from "./components/Primitives";
|
||||
import Home from "./pages/Home";
|
||||
import Fabrics from "./pages/Fabrics";
|
||||
import About from "./pages/About";
|
||||
import Contact from "./pages/Contact";
|
||||
import Products from "./pages/Products";
|
||||
import "./base.css";
|
||||
@@ -33,7 +32,6 @@ createRoot(document.getElementById("root")).render(
|
||||
<Route index element={<Home />} />
|
||||
<Route path="fabrics" element={<Fabrics />} />
|
||||
<Route path="products" element={<Products />} />
|
||||
<Route path="about" element={<About />} />
|
||||
<Route path="contact" element={<Contact />} />
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Route>
|
||||
|
||||
@@ -1,208 +0,0 @@
|
||||
.philosophy {
|
||||
border-top: 1px solid var(--line);
|
||||
padding-top: 70px;
|
||||
}
|
||||
.philosophy__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-block: 1px solid var(--line);
|
||||
padding-block: 48px;
|
||||
}
|
||||
.philosophy__item {
|
||||
padding: 10px clamp(24px, 4vw, 72px);
|
||||
}
|
||||
.philosophy__item:first-child {
|
||||
text-align: right;
|
||||
}
|
||||
.philosophy__item + .philosophy__item {
|
||||
border-left: 1px solid var(--line);
|
||||
}
|
||||
.philosophy__title {
|
||||
margin: 0 0 18px;
|
||||
font-family: var(--serif);
|
||||
font-weight: 400;
|
||||
font-size: clamp(40px, 4vw, 58px);
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
.philosophy__text {
|
||||
max-width: 390px;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.9;
|
||||
color: var(--muted);
|
||||
}
|
||||
.philosophy__item:first-child .philosophy__text {
|
||||
margin-left: auto;
|
||||
}
|
||||
.leadership {
|
||||
padding-top: 100px;
|
||||
}
|
||||
.leadership__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 28px;
|
||||
}
|
||||
.owner {
|
||||
margin: 0;
|
||||
}
|
||||
.owner__portrait {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
min-height: 370px;
|
||||
padding: 24px;
|
||||
background: #e5e2d9;
|
||||
color: #7e8271;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.owner__silhouette {
|
||||
width: 185px;
|
||||
height: 220px;
|
||||
}
|
||||
.approach {
|
||||
padding-top: 100px;
|
||||
}
|
||||
.approach__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 35px;
|
||||
}
|
||||
.approach__step {
|
||||
border-top: 1px solid var(--ink);
|
||||
padding-top: 20px;
|
||||
}
|
||||
.approach__title {
|
||||
margin: 8px 0 18px;
|
||||
font-family: var(--serif);
|
||||
font-size: 36px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
.approach__text {
|
||||
font-size: 13px;
|
||||
line-height: 1.9;
|
||||
color: var(--muted);
|
||||
margin: 0;
|
||||
}
|
||||
.location {
|
||||
padding-top: 100px;
|
||||
}
|
||||
.location__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1fr;
|
||||
gap: 50px;
|
||||
}
|
||||
.location__map {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 360px;
|
||||
border: 1px solid #d2d5c7;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background-color: #e4e6dc;
|
||||
background-image:
|
||||
linear-gradient(#75866b16 1px, transparent 1px),
|
||||
linear-gradient(90deg, #75866b16 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
.location__pin {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border: 1px solid var(--ink);
|
||||
padding: 14px 21px;
|
||||
background: var(--paper);
|
||||
border-radius: 50px;
|
||||
font-family: var(--serif);
|
||||
font-size: 24px;
|
||||
}
|
||||
.location__pin-dot {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
outline: 1px solid #8f725c50;
|
||||
outline-offset: 5px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.location__map-caption {
|
||||
position: absolute;
|
||||
bottom: 22px;
|
||||
font-family: var(--serif);
|
||||
font-style: italic;
|
||||
font-size: 18px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.location__details {
|
||||
align-self: center;
|
||||
}
|
||||
.location__name {
|
||||
max-width: 360px;
|
||||
margin: 0 0 25px;
|
||||
font-family: var(--serif);
|
||||
font-size: 31px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
.location__address {
|
||||
font-size: 14px;
|
||||
line-height: 1.9;
|
||||
color: var(--muted);
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.location__button {
|
||||
display: inline-block;
|
||||
padding: 15px 20px;
|
||||
border: 1px solid var(--ink);
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border-radius: 30px;
|
||||
font-size: 11px;
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (max-width: 650px) {
|
||||
.philosophy {
|
||||
padding-top: 45px;
|
||||
}
|
||||
.philosophy__grid,
|
||||
.leadership__grid,
|
||||
.approach__grid,
|
||||
.location__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.philosophy__grid {
|
||||
padding-block: 0;
|
||||
}
|
||||
.philosophy__item {
|
||||
padding: 32px 0;
|
||||
}
|
||||
.philosophy__item:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
.philosophy__item:first-child .philosophy__text {
|
||||
margin-left: 0;
|
||||
}
|
||||
.philosophy__item + .philosophy__item {
|
||||
border-top: 1px solid var(--line);
|
||||
border-left: 0;
|
||||
}
|
||||
.leadership,
|
||||
.approach,
|
||||
.location {
|
||||
padding-top: 60px;
|
||||
}
|
||||
.leadership__grid {
|
||||
gap: 35px;
|
||||
}
|
||||
.owner__portrait {
|
||||
min-height: 330px;
|
||||
}
|
||||
.location__grid {
|
||||
gap: 30px;
|
||||
}
|
||||
}
|
||||
@@ -1,190 +0,0 @@
|
||||
import { company } from "../data";
|
||||
import { Eyebrow, PageHero, SectionHeading } from "../components/Primitives";
|
||||
import { ContactBanner } from "../components/Layout";
|
||||
import "./About.css";
|
||||
|
||||
const principles = [
|
||||
{
|
||||
title: "Built to repeat.",
|
||||
text: "A fabric developed successfully should remain dependable when manufactured at scale.",
|
||||
},
|
||||
{
|
||||
title: "Built to develop.",
|
||||
text: "New yarn combinations, structures and constructions create new possibilities for apparel.",
|
||||
},
|
||||
];
|
||||
const process = [
|
||||
{
|
||||
title: "Develop.",
|
||||
text: "A construction begins with the relationship between yarn, machine and structure, with the eventual application in mind.",
|
||||
},
|
||||
{
|
||||
title: "Test.",
|
||||
text: "Selected constructions are evaluated through processed samples to explore their possibilities.",
|
||||
},
|
||||
{
|
||||
title: "Repeat.",
|
||||
text: "Successful developments are reproduced consistently in commercial grey production.",
|
||||
},
|
||||
];
|
||||
|
||||
function Portrait({ number }) {
|
||||
return (
|
||||
<figure className="owner">
|
||||
<div
|
||||
className="owner__portrait"
|
||||
role="img"
|
||||
aria-label={`Owner ${number} portrait`}
|
||||
>
|
||||
<svg
|
||||
className="owner__silhouette"
|
||||
viewBox="0 0 200 230"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle
|
||||
cx="100"
|
||||
cy="76"
|
||||
r="35"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<path
|
||||
d="M28 218v-29c0-40 32-72 72-72s72 32 72 72v29"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M8 8h26M8 8v26m184-26h-26m26 0v26M8 222h26M8 222v-26m184 26h-26m26 0v-26"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</figure>
|
||||
);
|
||||
}
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<>
|
||||
<PageHero
|
||||
label="Manufacturing at RRS"
|
||||
src="/images/library/hero-01-viscose.jpeg"
|
||||
title={
|
||||
<>
|
||||
Built around
|
||||
<br />
|
||||
<em>repeatable production.</em>
|
||||
</>
|
||||
}
|
||||
>
|
||||
{" "}
|
||||
<p>
|
||||
Radhe Radhe Synthetics is a specialist manufacturer of grey knitted
|
||||
fabrics with a focus on consistent bulk production and continuous
|
||||
fabric development.
|
||||
</p>
|
||||
</PageHero>
|
||||
<section className="philosophy">
|
||||
<SectionHeading
|
||||
centered
|
||||
label="Our manufacturing discipline"
|
||||
title={
|
||||
<>
|
||||
Develop with curiosity.
|
||||
<br />
|
||||
<em>Produce with consistency.</em>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<p>
|
||||
Two ideas guide the way RRS works. Together, they define how we
|
||||
approach knitting and production.
|
||||
</p>
|
||||
</SectionHeading>
|
||||
<div className="philosophy__grid">
|
||||
{principles.map(({ title, text }) => (
|
||||
<article className="philosophy__item" key={title}>
|
||||
<h3 className="philosophy__title">{title}</h3>
|
||||
<p className="philosophy__text">{text}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section className="leadership">
|
||||
<SectionHeading
|
||||
label="Our people"
|
||||
title={
|
||||
<>
|
||||
The people
|
||||
<br />
|
||||
<em>behind RRS.</em>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<p>Meet our owners and directors.</p>
|
||||
</SectionHeading>
|
||||
<div className="leadership__grid">
|
||||
<Portrait number={1} />
|
||||
<Portrait number={2} />
|
||||
</div>
|
||||
</section>
|
||||
<section className="approach">
|
||||
<SectionHeading
|
||||
label="Our manufacturing approach"
|
||||
title={
|
||||
<>
|
||||
Develop. Test. <em>Repeat.</em>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<div className="approach__grid">
|
||||
{process.map(({ title, text }) => (
|
||||
<article className="approach__step" key={title}>
|
||||
<h3 className="approach__title">{title}</h3>
|
||||
<p className="approach__text">{text}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section className="location">
|
||||
<SectionHeading
|
||||
label="Our location"
|
||||
title={
|
||||
<>
|
||||
Where <em>we work.</em>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<div className="location__grid">
|
||||
<div
|
||||
className="location__map"
|
||||
role="img"
|
||||
aria-label="Decorative map graphic."
|
||||
>
|
||||
<div className="location__pin">
|
||||
<span className="location__pin-dot" />
|
||||
<span>RRS</span>
|
||||
</div>
|
||||
<span className="location__map-caption">
|
||||
A place for our next conversation.
|
||||
</span>
|
||||
</div>
|
||||
<div className="location__details">
|
||||
<Eyebrow>Factory or office</Eyebrow>
|
||||
<h3 className="location__name">{company.name}</h3>
|
||||
<p className="location__address">{company.address}</p>
|
||||
<a
|
||||
className="location__button"
|
||||
href={company.mapsUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Open in Google Maps ↗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<ContactBanner />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -67,115 +67,6 @@
|
||||
color: var(--ink);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
.home-intro {
|
||||
display: grid;
|
||||
gap: 44px;
|
||||
padding-top: 92px;
|
||||
}
|
||||
.home-intro__heading {
|
||||
text-align: center;
|
||||
}
|
||||
.home-intro__body {
|
||||
width: min(100%, 820px);
|
||||
margin-inline: auto;
|
||||
}
|
||||
.home-intro__title {
|
||||
margin: 0;
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(36px, 4.2vw, 57px);
|
||||
font-weight: 400;
|
||||
line-height: 1.08;
|
||||
letter-spacing: -0.045em;
|
||||
}
|
||||
.home-intro__lead {
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(25px, 2.5vw, 34px);
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.015em;
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
.home-intro__text {
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
line-height: 1.9;
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
.home-intro__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
margin-top: 12px;
|
||||
padding-bottom: 7px;
|
||||
border-bottom: 1px solid var(--ink);
|
||||
color: var(--ink);
|
||||
font-size: 11px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.process {
|
||||
padding-top: 95px;
|
||||
}
|
||||
.process__list {
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.process__item {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
||||
align-items: center;
|
||||
gap: clamp(45px, 7vw, 120px);
|
||||
padding: 58px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.process__item:nth-child(even) {
|
||||
background: linear-gradient(90deg, transparent, #49667808, transparent);
|
||||
}
|
||||
.process__item:nth-child(even) .process__visual {
|
||||
order: -1;
|
||||
}
|
||||
.process__copy {
|
||||
max-width: 560px;
|
||||
padding-inline: clamp(0px, 2vw, 34px);
|
||||
}
|
||||
.process__verb {
|
||||
margin: 0 0 24px;
|
||||
font-family: var(--sans);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--industrial);
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.process__title {
|
||||
margin: 0 0 22px;
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(35px, 3.3vw, 52px);
|
||||
font-weight: 400;
|
||||
line-height: 1.08;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
.process__text {
|
||||
margin: 0 0 28px;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
line-height: 1.9;
|
||||
}
|
||||
.process__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
padding-bottom: 7px;
|
||||
border-bottom: 1px solid var(--ink);
|
||||
color: var(--ink);
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.process__visual {
|
||||
width: 100%;
|
||||
min-height: 320px;
|
||||
aspect-ratio: 16 / 10;
|
||||
}
|
||||
.process__link:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.home-hero {
|
||||
min-height: 560px;
|
||||
@@ -194,28 +85,4 @@
|
||||
gap: 8px;
|
||||
padding: 15px 0;
|
||||
}
|
||||
.home-intro {
|
||||
gap: 30px;
|
||||
padding-top: 55px;
|
||||
}
|
||||
.process {
|
||||
padding-top: 60px;
|
||||
}
|
||||
.process__item {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 28px;
|
||||
padding: 42px 0;
|
||||
}
|
||||
.process__visual,
|
||||
.process__item:nth-child(even) .process__visual {
|
||||
order: -1;
|
||||
}
|
||||
.process__copy {
|
||||
max-width: none;
|
||||
padding-inline: 0;
|
||||
}
|
||||
.process__visual {
|
||||
min-height: 280px;
|
||||
aspect-ratio: 4 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
+5
-88
@@ -1,29 +1,8 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { capabilities } from "../data";
|
||||
import {
|
||||
Action,
|
||||
Arrow,
|
||||
Eyebrow,
|
||||
SectionHeading,
|
||||
Textile,
|
||||
} from "../components/Primitives";
|
||||
import { ContactBanner } from "../components/Layout";
|
||||
import Gallery from "../components/Gallery";
|
||||
import { Action } from "../components/Primitives";
|
||||
import ImageCarousel from "../components/ImageCarousel";
|
||||
import Stats from "../components/Stats";
|
||||
import "./Home.css";
|
||||
|
||||
const processItems = capabilities.map((capability, index) => ({
|
||||
...capability,
|
||||
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",
|
||||
}));
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
@@ -31,15 +10,16 @@ export default function Home() {
|
||||
<ImageCarousel className="home-hero__carousel" />
|
||||
<div className="home-hero__shade" />
|
||||
<div className="home-hero__content">
|
||||
<Eyebrow>Specialist circular-knitting manufacturer · RRS</Eyebrow>
|
||||
<h1 className="home-hero__title">
|
||||
Built to develop.
|
||||
<br />
|
||||
<em>Built to repeat.</em>
|
||||
</h1>
|
||||
<p className="home-hero__description">
|
||||
Grey knitted fabrics developed around yarn, structure and
|
||||
application - then manufactured for consistent commercial supply.
|
||||
We transform high-quality yarn into premium grey knitted fabrics. By
|
||||
engineering each fabric around precise yarn, structure, and
|
||||
application requirements, we deliver purpose-built textiles backed
|
||||
by consistent, reliable commercial manufacturing.
|
||||
</p>
|
||||
<div className="home-hero__actions">
|
||||
<Action to="/fabrics" variant="dark">
|
||||
@@ -57,69 +37,6 @@ export default function Home() {
|
||||
</div>
|
||||
</section>
|
||||
<Stats />
|
||||
<Gallery preview />
|
||||
<section className="home-intro">
|
||||
<div className="home-intro__heading">
|
||||
<Eyebrow>Our fabrics</Eyebrow>
|
||||
<h2 className="home-intro__title">
|
||||
Grey is where
|
||||
<br />
|
||||
<em>it begins.</em>
|
||||
</h2>
|
||||
</div>
|
||||
<div className="home-intro__body">
|
||||
<p className="home-intro__lead">
|
||||
RRS specialises in circular-knitted grey 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>
|
||||
<section className="process">
|
||||
<SectionHeading
|
||||
label="Manufacturing process"
|
||||
title={
|
||||
<>
|
||||
From requirement
|
||||
<br />
|
||||
<em>to repeat production.</em>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<p>
|
||||
A direct sequence connects fabric development with dependable
|
||||
commercial manufacturing.
|
||||
</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}>
|
||||
See our capability <Arrow diagonal />
|
||||
</Link>
|
||||
</div>
|
||||
<Textile className="process__visual" src={image} />
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<ContactBanner />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
+16
-22
@@ -5,7 +5,6 @@ const pages = [
|
||||
["/", "Built to develop."],
|
||||
["/fabrics", "Different yarns."],
|
||||
["/products", "Knitted for"],
|
||||
["/about", "Built around"],
|
||||
["/contact", "Bring us your"],
|
||||
];
|
||||
|
||||
@@ -115,11 +114,13 @@ test("mobile navigation closes on selection and Escape", async ({ page }) => {
|
||||
await toggle.click();
|
||||
await page
|
||||
.getByRole("navigation", { name: "Main navigation" })
|
||||
.getByRole("link", { name: "Manufacturing", exact: true })
|
||||
.getByRole("link", { name: "Products", exact: true })
|
||||
.click();
|
||||
await expect(page).toHaveURL("/about");
|
||||
await expect(page).toHaveURL("/products");
|
||||
await expect(toggle).toHaveAttribute("aria-expanded", "false");
|
||||
await expect(page.locator(".owner")).toHaveCount(2);
|
||||
await expect(page.getByRole("heading", { level: 1 })).toContainText(
|
||||
"Knitted for",
|
||||
);
|
||||
await toggle.click();
|
||||
await page.getByRole("link", { name: "RRS home", exact: true }).click();
|
||||
await expect(page).toHaveURL("/");
|
||||
@@ -197,27 +198,20 @@ test("every page section unveils once when scrolled into view", async ({
|
||||
}
|
||||
});
|
||||
|
||||
test("homepage presents proof, fabrics and process in that order", async ({
|
||||
test("homepage shows the four stat facts and nothing else", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/");
|
||||
const fabricsHeading = page.getByRole("heading", {
|
||||
level: 2,
|
||||
name: "Grey is where it begins.",
|
||||
});
|
||||
const developmentsHeading = page.getByRole("heading", {
|
||||
level: 2,
|
||||
name: "What we make. What we can develop.",
|
||||
});
|
||||
await expect(fabricsHeading).toHaveCSS("text-align", "center");
|
||||
await expect(developmentsHeading.locator("..").locator("..")).toHaveClass(
|
||||
/section-heading--centered/,
|
||||
);
|
||||
const sections = await page
|
||||
.locator("#main-content > section")
|
||||
.evaluateAll((nodes) => nodes.map((node) => node.classList[0]));
|
||||
expect(sections.indexOf("stats")).toBeLessThan(sections.indexOf("gallery"));
|
||||
expect(sections.indexOf("gallery")).toBeLessThan(sections.indexOf("process"));
|
||||
await expect(page.locator(".stats__item")).toHaveCount(4);
|
||||
await expect(
|
||||
page.getByText("The starting point for a world of possibilities."),
|
||||
).toHaveCount(0);
|
||||
await expect(page.locator(".contact-banner")).toHaveCount(0);
|
||||
await expect(page.locator(".contact-strip")).toHaveCount(0);
|
||||
await expect(page.locator(".site-nav__contact")).toHaveCount(0);
|
||||
await expect(
|
||||
page.getByRole("link", { name: "Manufacturing", exact: true }),
|
||||
).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("home and products heroes cycle through four product images", async ({
|
||||
|
||||
Reference in New Issue
Block a user