103 lines
3.0 KiB
JavaScript
103 lines
3.0 KiB
JavaScript
import { Link } from "react-router";
|
|
import IntroOverlay from "./IntroOverlay";
|
|
import {
|
|
HERO_PRODUCT_IMAGE_SIZES,
|
|
buildPublicImageSrcSet,
|
|
} from "../../utils/responsiveImages";
|
|
|
|
const HERO_PRODUCT_IMAGE = "/blasse-seide-hero-product.webp";
|
|
|
|
function HeroSection({
|
|
heroImageWrapRef,
|
|
heroImageRef,
|
|
setHeadlinePrimaryRef,
|
|
setHeadlineSecondaryRef,
|
|
setHeadlineTertiaryRef,
|
|
setWordmarkRef,
|
|
setDescriptionRef,
|
|
setActionsRef,
|
|
setScrollRef,
|
|
overlayRef,
|
|
overlayTextRef,
|
|
}) {
|
|
return (
|
|
<section className="hero" id="home" aria-labelledby="hero-heading">
|
|
<div className="hero-material" ref={heroImageWrapRef} aria-hidden="true">
|
|
<div className="hero-material__texture" ref={heroImageRef} />
|
|
</div>
|
|
|
|
<div className="hero-wordmark" aria-hidden="true">
|
|
<div className="hero-wordmark__mask">
|
|
<img
|
|
src="/atmos-hero-wordmark.svg"
|
|
alt=""
|
|
className="hero-wordmark__image"
|
|
ref={setWordmarkRef}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<figure className="hero-product">
|
|
<div className="hero-product__inner" ref={setDescriptionRef}>
|
|
<img
|
|
src={HERO_PRODUCT_IMAGE}
|
|
srcSet={buildPublicImageSrcSet(HERO_PRODUCT_IMAGE, {
|
|
folder: "/images/hero",
|
|
widths: [480, 768, 960],
|
|
originalWidth: 1078,
|
|
})}
|
|
sizes={HERO_PRODUCT_IMAGE_SIZES}
|
|
alt="Blasse Seide Parfumflakon auf einer dunklen Produktkarte"
|
|
className="hero-product__image"
|
|
loading="eager"
|
|
decoding="async"
|
|
fetchPriority="high"
|
|
/>
|
|
</div>
|
|
</figure>
|
|
|
|
<div className="hero-content">
|
|
<h1 className="hero-copy" id="hero-heading">
|
|
<span className="hero-copy-line">
|
|
<span className="reveal-line" ref={setHeadlinePrimaryRef}>
|
|
{"Konzeptionelle D\u00FCfte"}
|
|
</span>
|
|
</span>
|
|
<span className="hero-copy-line">
|
|
<span className="reveal-line" ref={setHeadlineSecondaryRef}>
|
|
{"zwischen Materialit\u00E4t,"}
|
|
</span>
|
|
</span>
|
|
<span className="hero-copy-line">
|
|
<span className="reveal-line" ref={setHeadlineTertiaryRef}>
|
|
Raum und Charakter.
|
|
</span>
|
|
</span>
|
|
</h1>
|
|
|
|
<div className="hero-actions" ref={setActionsRef}>
|
|
<a href="#dufte" className="atmos-btn atmos-btn--primary">
|
|
{"Aktuelle D\u00FCfte"}
|
|
</a>
|
|
<Link to="/discovery-set" className="atmos-btn atmos-btn--secondary">
|
|
Discovery Set
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="hero-scroll" aria-hidden="true" ref={setScrollRef}>
|
|
<span className="hero-scroll__line" />
|
|
<span className="hero-scroll__label">SCROLL RUNTER</span>
|
|
</div>
|
|
|
|
<IntroOverlay
|
|
overlayRef={overlayRef}
|
|
overlayTextRef={overlayTextRef}
|
|
logoSrc="/atmos-logo-dark.svg"
|
|
/>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default HeroSection;
|