diff --git a/index.html b/index.html index a0d4ef5..922da93 100644 --- a/index.html +++ b/index.html @@ -6,10 +6,10 @@ - RRS — Radhe Radhe Synthetics + RRS - Radhe Radhe Synthetics
diff --git a/src/components/CapacityValue.jsx b/src/components/CapacityValue.jsx index 460a556..cc7fd76 100644 --- a/src/components/CapacityValue.jsx +++ b/src/components/CapacityValue.jsx @@ -21,7 +21,7 @@ export default function CapacityValue() { diff --git a/src/components/Gallery.css b/src/components/Gallery.css index 02a16e9..b7a420c 100644 --- a/src/components/Gallery.css +++ b/src/components/Gallery.css @@ -27,7 +27,8 @@ object-fit: cover; transition: transform 700ms ease; } -.sample:hover .sample__image { +/* Hover zoom only on the home page's featured developments. */ +.gallery--preview .sample:hover .sample__image { transform: scale(1.045); } .sample__badge { @@ -119,7 +120,7 @@ .sample__image { transition: none; } - .sample:hover .sample__image { + .gallery--preview .sample:hover .sample__image { transform: none; } } diff --git a/src/components/Gallery.jsx b/src/components/Gallery.jsx index b32585d..afadc89 100644 --- a/src/components/Gallery.jsx +++ b/src/components/Gallery.jsx @@ -15,7 +15,11 @@ const textures = [ export default function Gallery({ preview = false }) { const items = preview ? developments.slice(0, 3) : developments; return ( -
+
{preview ? "A selection of knitted structures showing how yarn, composition and machine setup shape the final fabric character." - : "Selected developments are processed separately as reference samples to explore how a construction can translate after dyeing and finishing. RRS commercially manufactures grey fabric only."} + : "Selected developments are processed separately as samples to explore how a construction can translate after dyeing and finishing. RRS commercially manufactures grey fabric only."}

{preview && ( @@ -63,7 +67,6 @@ export default function Gallery({ preview = false }) {

{name}

- Development reference
))} diff --git a/src/components/ImageCarousel.css b/src/components/ImageCarousel.css index 57f2bee..8f5bddd 100644 --- a/src/components/ImageCarousel.css +++ b/src/components/ImageCarousel.css @@ -48,22 +48,17 @@ animation-delay: 25s; } /* Each slide fades IN over the previous one (which stays opaque beneath it), - so there is never a moment with no image on screen — works for any count. */ + so there is never a moment with no image on screen - works for any count. */ @keyframes carousel-fade { 0% { opacity: 0; - transform: scale(1); } 4%, 96% { opacity: 1; } - 96% { - transform: scale(1.015); - } 100% { opacity: 0; - transform: scale(1.015); } } @media (prefers-reduced-motion: reduce) { diff --git a/src/components/Layout.css b/src/components/Layout.css index 7286460..1c5658e 100644 --- a/src/components/Layout.css +++ b/src/components/Layout.css @@ -176,11 +176,6 @@ text-decoration: underline; text-underline-offset: 4px; } -.site-footer__pending { - margin: 0; - color: var(--muted); - font-size: 11px; -} .site-footer__bottom { display: flex; justify-content: space-between; @@ -209,7 +204,7 @@ margin-top: 38px; padding-top: 23px; border-top: 1px solid var(--line); - font-family: var(--mono); + font-family: var(--sans); font-size: 8px; line-height: 1.6; text-transform: uppercase; diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx index a096893..81f8c86 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 } from "../data"; +import { company, navigation, phoneHref } from "../data"; import { Arrow, WhatsAppAction } from "./Primitives"; import "./Layout.css"; @@ -35,17 +35,9 @@ function Header() {
Contact RRS
- {company.email ? ( - {company.email} - ) : ( - Email to be supplied - )} + {company.email} - {company.phone ? ( - {company.phone} - ) : ( - Phone to be supplied - )} + {company.phone}
@@ -84,7 +76,7 @@ function Header() { to="/contact#whatsapp" onClick={closeMenu} > - Talk to us + Text us on WhatsApp
@@ -116,9 +108,6 @@ function Footer() { Phone · Email · Address -

- Contact details to be supplied. -

@@ -178,7 +167,7 @@ export default function Layout() { useEffect(() => { const title = navigation.find(({ to }) => to === pathname)?.label ?? "Page not found"; - document.title = `${title === "Home" ? "RRS" : `${title} — RRS`} | Radhe Radhe Synthetics`; + document.title = `${title === "Home" ? "RRS" : `${title} - RRS`} | Radhe Radhe Synthetics`; const target = hash ? document.getElementById(hash.slice(1)) : document.getElementById("main-content"); diff --git a/src/components/Primitives.css b/src/components/Primitives.css index 1df8564..33de41b 100644 --- a/src/components/Primitives.css +++ b/src/components/Primitives.css @@ -52,6 +52,16 @@ cursor: not-allowed; opacity: 0.55; } +.action__label { + display: inline-flex; + align-items: center; + gap: 8px; +} +.action__icon { + flex: 0 0 auto; + width: 15px; + height: 15px; +} .eyebrow { margin: 0 0 18px; font-family: var(--sans); @@ -107,23 +117,6 @@ height: 100%; min-height: 300px; object-fit: cover; - transition: transform 700ms ease; -} -.textile:hover .textile__image { - transform: scale(1.035); -} -.textile__caption { - position: absolute; - left: 18px; - bottom: 16px; - right: 18px; - width: fit-content; - padding: 7px 10px; - border-radius: 2px; - background: #f5f3eeeb; - color: #34352d; - font-size: 11px; - line-height: 1.5; } .page-hero { display: grid; @@ -188,7 +181,4 @@ .textile__image { transition: none; } - .textile:hover .textile__image { - transform: none; - } } diff --git a/src/components/Primitives.jsx b/src/components/Primitives.jsx index 3aa971e..b55880e 100644 --- a/src/components/Primitives.jsx +++ b/src/components/Primitives.jsx @@ -32,17 +32,47 @@ export function Action({ children, to, variant = "dark" }) { ); } +export function WhatsAppIcon({ className = "", strokeWidth = 2.4 }) { + return ( + + ); +} + export function WhatsAppAction({ - children = "Talk to us", + children = "Text us on WhatsApp", variant = "dark", direct = false, }) { const url = whatsappUrl(company.whatsapp); const className = `action action--${variant}`; + const label = ( + + + {children} + + ); if (url) return ( - {children} + {label} ); @@ -54,7 +84,7 @@ export function WhatsAppAction({ disabled aria-describedby="whatsapp-status" > - {children} + {label} ); @@ -83,27 +113,17 @@ export function SectionHeading({ label, title, children, centered = false }) { ); } -export function Textile({ - src, - className = "", - caption = true, - eager = false, -}) { +export function Textile({ src, className = "", eager = false }) { return (
Reference fabric photograph - {caption && ( -
- Reference fabric -
- )}
); } diff --git a/src/data.js b/src/data.js index 9eb7f74..2ebeb78 100644 --- a/src/data.js +++ b/src/data.js @@ -1,13 +1,16 @@ +const address = + "508, Accord Classic, Jay Prakash Nagar, Above Anupam Stationary, Goregaon East, Mumbai, Maharashtra - 400 063"; + export const company = Object.freeze({ name: "Radhe Radhe Synthetics Pvt. Ltd.", shortName: "RadheRadhe Pvt. Ltd.", description: "Grey knitted fabrics engineered for diverse apparel applications.", - whatsapp: "", // Supply the business number in international digits, without + or spaces. - phone: "", - email: "", - address: "", - mapsUrl: "", + whatsapp: "919769665899", // International digits, no + or spaces. + phone: "+91 97696 65899", + email: "hituagarwal2905@gmail.com", + address, + mapsUrl: `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`, }); export const navigation = [ @@ -115,17 +118,21 @@ export const yarns = [ "Other yarns selected according to fabric requirements", ]; -// Development names are references, not technical categories or specifications. +// Development names are sample labels, not technical categories or specifications. export const developments = [ - "Micro Break", - "Luxe", - "Jerry", - "Killer", - "Joker", - "Ice Cool", - "Maple", + "Lehar", + "Shahi", + "Jhalar", + "Vajra", + "Natkhat", + "Chandni", + "Ashoka", ]; +export function phoneHref(number) { + return number ? `tel:+${number.replace(/\D/g, "")}` : null; +} + export function whatsappUrl(number) { return /^[1-9]\d{7,14}$/.test(number) ? `https://wa.me/${number}?text=${encodeURIComponent("Hello RRS, I'd like to discuss a fabric requirement.")}` diff --git a/src/pages/About.css b/src/pages/About.css index 5ff080b..b750fc5 100644 --- a/src/pages/About.css +++ b/src/pages/About.css @@ -58,47 +58,10 @@ border: 1px solid var(--line); border-radius: 4px; } -.owner__image-label { - align-self: flex-start; - font-size: 12px; - font-weight: 500; - color: var(--muted); -} .owner__silhouette { width: 185px; height: 220px; } -.owner__pending { - font-size: 11px; - text-align: center; - color: var(--muted); -} -.owner__caption { - padding: 22px 0 0; -} -.owner__identity { - display: flex; - align-items: baseline; - gap: 20px; - justify-content: space-between; -} -.owner__name { - margin: 0; - font-family: var(--serif); - font-weight: 400; - font-size: 26px; -} -.owner__role { - color: var(--muted); - font-size: 11px; -} -.owner__bio { - max-width: 370px; - margin: 13px 0 0; - font-size: 13px; - color: var(--muted); - line-height: 1.9; -} .approach { padding-top: 100px; } @@ -146,15 +109,6 @@ linear-gradient(90deg, #75866b16 1px, transparent 1px); background-size: 40px 40px; } -.location__map-label { - position: absolute; - top: 20px; - left: 20px; - right: 20px; - font-size: 11px; - line-height: 1.6; - color: var(--muted); -} .location__pin { display: flex; align-items: center; @@ -211,15 +165,6 @@ font-size: 11px; text-decoration: none; } -.location__button:disabled { - opacity: 0.5; - cursor: not-allowed; -} -.location__status { - font-size: 11px; - color: var(--muted); - line-height: 1.8; -} @media (max-width: 650px) { .philosophy { padding-top: 45px; diff --git a/src/pages/About.jsx b/src/pages/About.jsx index 2c8ce8b..404dc96 100644 --- a/src/pages/About.jsx +++ b/src/pages/About.jsx @@ -20,7 +20,7 @@ const process = [ }, { title: "Test.", - text: "Selected constructions are evaluated through processed reference samples to explore their possibilities.", + text: "Selected constructions are evaluated through processed samples to explore their possibilities.", }, { title: "Repeat.", @@ -28,15 +28,14 @@ const process = [ }, ]; -function PortraitPlaceholder({ number }) { +function Portrait({ number }) { return (
- Portrait placeholder - - Professional photograph to follow -
-
-
-

[Owner Name]

- [Director / Role] -
-

- Biography to be supplied. This profile will introduce the person - behind the fabric. -

-
); } @@ -135,15 +121,11 @@ export default function About() { } > -

- Meet our owners and directors. -
- Names, roles and biographies will be added when supplied. -

+

Meet our owners and directors.

- - + +
@@ -177,11 +159,8 @@ export default function About() {
- - Map placeholder / Not a geographical location -
RRS @@ -193,37 +172,15 @@ export default function About() {
Factory or office

{company.name}

-

- {company.address || ( - <> - [Full Factory / Office Address] -
- [City, State, PIN, India] - - )} -

- {company.mapsUrl ? ( - - Open in Google Maps ↗ - - ) : ( - - )} -

- Verified location details to be supplied. -

+

{company.address}

+ + Open in Google Maps ↗ +
diff --git a/src/pages/Contact.css b/src/pages/Contact.css index 2479617..3029e3e 100644 --- a/src/pages/Contact.css +++ b/src/pages/Contact.css @@ -86,7 +86,7 @@ } .channels__grid { display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } .channels__item { diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx index 03e552e..c112c00 100644 --- a/src/pages/Contact.jsx +++ b/src/pages/Contact.jsx @@ -1,10 +1,11 @@ import { useState } from "react"; -import { company } from "../data"; +import { company, phoneHref } from "../data"; import { Eyebrow, PageHero, SectionHeading, WhatsAppAction, + WhatsAppIcon, } from "../components/Primitives"; import { ContactBanner } from "../components/Layout"; import "./Contact.css"; @@ -24,27 +25,21 @@ export default function Contact() { } } const channels = [ - { - title: "WhatsApp", - value: company.whatsapp || "[Number]", - href: "#whatsapp", - note: "Discuss a fabric requirement.", - }, { title: "Phone", - value: company.phone || "[Number]", - href: company.phone ? `tel:${company.phone}` : null, + value: company.phone, + href: phoneHref(company.phone), note: "A direct conversation with RRS.", }, { title: "Email", - value: company.email || "[Email Address]", + value: company.email, href: company.email ? `mailto:${company.email}` : null, - note: "Share your requirement or reference.", + note: "Share your requirement.", }, { title: "Address", - value: company.address || "[Full Business Address]", + value: company.address, href: company.mapsUrl || null, note: "Factory / office location.", }, @@ -76,8 +71,8 @@ export default function Contact() { Let’s begin here.

- Share your fabric requirement, intended application, composition or - reference with our team. + Share your fabric requirement, intended application, composition + with our team.

{message}
@@ -94,29 +89,10 @@ export default function Contact() {
- +

- {company.whatsapp - ? "Opens WhatsApp with a conversation starter." - : "Business WhatsApp number to be supplied. Chat will be available once details are confirmed."} + Opens WhatsApp with a conversation starter.

@@ -130,8 +106,8 @@ export default function Contact() { } >

- Contact information is awaiting confirmation. No phone numbers, - email addresses or locations have been assumed. + Reach RRS directly on WhatsApp or by phone or email - a direct + manufacturing conversation is the fastest way to begin.

@@ -158,7 +134,7 @@ export default function Contact() { in mind? } - text="Share your fabric requirement, intended application, composition or reference with our team and start a conversation about what can be developed." + text="Share your fabric requirement, intended application, composition with our team and start a conversation about what can be developed." /> ); diff --git a/src/pages/Home.css b/src/pages/Home.css index 85f3b9d..b913176 100644 --- a/src/pages/Home.css +++ b/src/pages/Home.css @@ -67,9 +67,6 @@ color: var(--ink); letter-spacing: 0.01em; } -.home-hero__image-note { - color: var(--muted); -} .home-intro { display: grid; gap: 44px; @@ -140,7 +137,7 @@ } .process__verb { margin: 0 0 24px; - font-family: var(--mono); + font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--industrial); diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 75bc021..c15e225 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -39,14 +39,14 @@ export default function Home() {

Grey knitted fabrics developed around yarn, structure and - application—then manufactured for consistent commercial supply. + application - then manufactured for consistent commercial supply.

Explore our fabrics - Talk to us + Text us on WhatsApp
@@ -54,9 +54,6 @@ export default function Home() { Development · Circular knitting · Bulk production - - Factory photography scheduled for content handover - diff --git a/tests/site.spec.js b/tests/site.spec.js index 1b46e51..f0ff479 100644 --- a/tests/site.spec.js +++ b/tests/site.spec.js @@ -81,22 +81,24 @@ test("desktop navigation, anchored CTA and browser back work", async ({ ).toHaveAttribute("aria-current", "page"); await page .locator(".contact-banner") - .getByRole("link", { name: "Talk to us", exact: true }) + .getByRole("link", { name: "Text us on WhatsApp", exact: true }) .click(); await expect(page).toHaveURL("/contact#whatsapp"); await expect(page.locator("#whatsapp")).toBeInViewport(); await expect( - page.getByRole("button", { name: "Talk to us", exact: true }), - ).toBeDisabled(); + page + .locator(".whatsapp") + .getByRole("link", { name: "Text us on WhatsApp", exact: true }), + ).toHaveAttribute("href", /wa\.me/); await expect(page.locator("#whatsapp-status")).toContainText( - "number to be supplied", + "Opens WhatsApp", ); await page.goBack(); await expect(page).toHaveURL("/fabrics"); await page.goto("/contact#whatsapp"); await page .locator(".contact-banner") - .getByRole("link", { name: "Talk to us", exact: true }) + .getByRole("link", { name: "Text us on WhatsApp", exact: true }) .click(); await expect(page.locator("#whatsapp")).toBeInViewport(); }); @@ -240,7 +242,7 @@ test("home and products heroes cycle through four product images", async ({ await expect(page.getByText("Women’s wear", { exact: true })).toBeVisible(); }); -test("capacity values roll in opposite directions and settle at 60–70", async ({ +test("capacity values roll in opposite directions and settle at 60-70", async ({ page, }) => { for (const path of ["/", "/fabrics"]) {