diff --git a/src/components/Layout.css b/src/components/Layout.css index 1c5658e..7fd29d2 100644 --- a/src/components/Layout.css +++ b/src/components/Layout.css @@ -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; diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx index 81f8c86..b2506be 100644 --- a/src/components/Layout.jsx +++ b/src/components/Layout.jsx @@ -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() { } }} > -
- Contact RRS -
- {company.email} - - {company.phone} -
-
diff --git a/src/components/Stats.jsx b/src/components/Stats.jsx index 7e71635..e3e666b 100644 --- a/src/components/Stats.jsx +++ b/src/components/Stats.jsx @@ -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() {

{label}

{value}

{unit}

-

{text}

+ {text &&

{text}

} ))} diff --git a/src/data.js b/src/data.js index 2ebeb78..7b62751 100644 --- a/src/data.js +++ b/src/data.js @@ -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", diff --git a/src/main.jsx b/src/main.jsx index b2c6092..eace7d3 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -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( } /> } /> } /> - } /> } /> } /> diff --git a/src/pages/About.css b/src/pages/About.css deleted file mode 100644 index b750fc5..0000000 --- a/src/pages/About.css +++ /dev/null @@ -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; - } -} diff --git a/src/pages/About.jsx b/src/pages/About.jsx deleted file mode 100644 index 404dc96..0000000 --- a/src/pages/About.jsx +++ /dev/null @@ -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 ( -
-
- -
-
- ); -} - -export default function About() { - return ( - <> - - Built around -
- repeatable production. - - } - > - {" "} -

- Radhe Radhe Synthetics is a specialist manufacturer of grey knitted - fabrics with a focus on consistent bulk production and continuous - fabric development. -

-
-
- - Develop with curiosity. -
- Produce with consistency. - - } - > -

- Two ideas guide the way RRS works. Together, they define how we - approach knitting and production. -

-
-
- {principles.map(({ title, text }) => ( -
-

{title}

-

{text}

-
- ))} -
-
-
- - The people -
- behind RRS. - - } - > -

Meet our owners and directors.

-
-
- - -
-
-
- - Develop. Test. Repeat. - - } - /> -
- {process.map(({ title, text }) => ( -
-

{title}

-

{text}

-
- ))} -
-
-
- - Where we work. - - } - /> -
-
-
- - RRS -
- - A place for our next conversation. - -
-
- Factory or office -

{company.name}

-

{company.address}

- - Open in Google Maps ↗ - -
-
-
- - - ); -} diff --git a/src/pages/Home.css b/src/pages/Home.css index b913176..1144020 100644 --- a/src/pages/Home.css +++ b/src/pages/Home.css @@ -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; - } } diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index c15e225..64902d3 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -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() {
- Specialist circular-knitting manufacturer · RRS

Built to develop.
Built to repeat.

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

@@ -57,69 +37,6 @@ export default function Home() {
- -
-
- Our fabrics -

- Grey is where -
- it begins. -

-
-
-

- RRS specialises in circular-knitted grey fabrics developed for - varied apparel applications. -

-

- Different constructions require different yarns, blends and machine - configurations. Our manufacturing capability allows us to develop - fabrics around structure, texture, composition and intended use. -

-

- From shirting constructions to textured and structured knits, we - work across polyester, cotton, rayon, stretch yarns and varied - blends. -

- - Get to know RRS - -
-
-
- - From requirement -
- to repeat production. - - } - > -

- A direct sequence connects fabric development with dependable - commercial manufacturing. -

-
-
- {processItems.map(({ title, subtitle, text, image, href }) => ( -
-
-

{title}

-

{subtitle}

-

{text}

- - See our capability - -
- -
- ))} -
-
- ); } diff --git a/tests/site.spec.js b/tests/site.spec.js index f0ff479..18d6bda 100644 --- a/tests/site.spec.js +++ b/tests/site.spec.js @@ -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 ({