126 lines
4.2 KiB
React
126 lines
4.2 KiB
React
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 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 (
|
|
<>
|
|
<section className="home-hero">
|
|
<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.
|
|
</p>
|
|
<div className="home-hero__actions">
|
|
<Action to="/fabrics" variant="dark">
|
|
Explore our fabrics
|
|
</Action>
|
|
<Action to="/contact#whatsapp" variant="outline">
|
|
Text us on WhatsApp
|
|
</Action>
|
|
</div>
|
|
</div>
|
|
<div className="home-hero__bottom">
|
|
<span className="home-hero__tagline">
|
|
Development · Circular knitting · Bulk production
|
|
</span>
|
|
</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 />
|
|
</>
|
|
);
|
|
}
|