From 0a282291da1d9dce4acbf2d285562dd8df9586e2 Mon Sep 17 00:00:00 2001 From: chait Date: Mon, 19 Oct 2026 22:47:05 -0400 Subject: [PATCH] final pt.1 --- index.html | 2 +- src/data.js | 14 +-- src/main.jsx | 2 + src/pages/About.css | 198 +++++++++++++++++++++++++++++++++++++++++ src/pages/About.jsx | 186 ++++++++++++++++++++++++++++++++++++++ src/pages/Products.jsx | 18 +--- tests/site.spec.js | 16 ++-- 7 files changed, 397 insertions(+), 39 deletions(-) create mode 100644 src/pages/About.css create mode 100644 src/pages/About.jsx diff --git a/index.html b/index.html index 922da93..2168f37 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ RRS - Radhe Radhe Synthetics diff --git a/src/data.js b/src/data.js index 7b62751..57c0a40 100644 --- a/src/data.js +++ b/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: - "Grey knitted fabrics engineered for diverse apparel applications.", + description: "Manufacturing of fancy grey knitting and shirting fabrics.", 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.", diff --git a/src/main.jsx b/src/main.jsx index eace7d3..0ff27c1 100644 --- a/src/main.jsx +++ b/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( }> } /> + } /> } /> } /> } /> diff --git a/src/pages/About.css b/src/pages/About.css new file mode 100644 index 0000000..a790433 --- /dev/null +++ b/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; + } +} diff --git a/src/pages/About.jsx b/src/pages/About.jsx new file mode 100644 index 0000000..01218a1 --- /dev/null +++ b/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 ( + <> + + The mill behind +
+ the fabric. + + } + > +

+ Radhe Radhe Synthetics manufactures fancy grey knitting and shirting + fabrics — engineered around precise yarn, structure and requirement, + and backed by consistent commercial manufacturing. +

+ + +
+ +
+ Who we are +

+ A knitting house, +
+ built for repeatability. +

+

+ + RRS is a circular-knitting manufacturer first and foremost. + {" "} + 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. +

+

+ 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. +

+
+
+ +
+
+ Our journey +

+ From one machine +
+ to continuous capability. +

+

+ 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. +

+

+ The result is a broad manufacturing vocabulary — from understated + shirting constructions to highly textured knitted surfaces — + developed, sampled and scaled under one roof. +

+
+
+ +
+ + Develop. +
+ Sample. Scale. + + } + > +

+ The same process behind every RRS order — from the first + conversation to the final roll. +

+ +
    + {steps.map(({ number, title, text }) => ( +
  1. + +

    {title}

    +

    {text}

    +
    2. + ))} +
+
+ + + +
+ + What we +
+ manufacture. + + } + /> +
    + {products.map(({ title, text, images }) => ( +
  • + +
    + {`${title} +
    + {title} + {text} + + View products + + + +
    • + ))} +
+
+ + + Developing your +
+ next construction? + + } + /> + + ); +} diff --git a/src/pages/Products.jsx b/src/pages/Products.jsx index db46408..b67a833 100644 --- a/src/pages/Products.jsx +++ b/src/pages/Products.jsx @@ -19,26 +19,12 @@ export default function Products() {

Explore the product families RRS manufactures across everyday, - active, exclusive and natural-fibre applications. + active and natural-fibre applications.

- - Built around -
- the application. - - } - > -

- Each family can be developed around the required structure, yarn, - handle and commercial quantity. -

- +
{products.map(({ title, text, categories, images }) => (
diff --git a/tests/site.spec.js b/tests/site.spec.js index 0cc73ea..43daa66 100644 --- a/tests/site.spec.js +++ b/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 }) - .click(); - await expect(page).toHaveURL("/contact#whatsapp"); + .getByRole("link", { name: "Text us on WhatsApp", exact: true }); + await expect(bannerCta).toHaveAttribute("href", /wa\.me/); + 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 }) => {