68 lines
1.8 KiB
JavaScript
68 lines
1.8 KiB
JavaScript
import { Link } from "react-router";
|
|
import IntroOverlay from "./IntroOverlay";
|
|
|
|
function HeroSection({
|
|
heroImageWrapRef,
|
|
heroImageRef,
|
|
setHeadlinePrimaryRef,
|
|
setHeadlineSecondaryRef,
|
|
setDescriptionRef,
|
|
setActionsRef,
|
|
overlayRef,
|
|
overlayTextRef,
|
|
}) {
|
|
return (
|
|
<header className="hero" id="home">
|
|
<div className="hero-media" ref={heroImageWrapRef}>
|
|
<img
|
|
src="/atmos-hero-image.png"
|
|
alt="Atmos perfume bottle in a material-led campaign scene"
|
|
className="hero-media__image"
|
|
ref={heroImageRef}
|
|
loading="eager"
|
|
decoding="async"
|
|
fetchPriority="high"
|
|
/>
|
|
</div>
|
|
|
|
<div className="hero-content">
|
|
<h1 className="hero-title">
|
|
<span className="hero-title-line">
|
|
<span className="reveal-line" ref={setHeadlinePrimaryRef}>
|
|
{"D\u00DCFTE ALS"}
|
|
</span>
|
|
</span>
|
|
<span className="hero-title-line">
|
|
<span className="reveal-line" ref={setHeadlineSecondaryRef}>
|
|
AUSDRUCK
|
|
</span>
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="hero-text" ref={setDescriptionRef}>
|
|
{
|
|
"Konzeptionelle D\u00FCfte zwischen Materialit\u00E4t, Raum und Charakter."
|
|
}
|
|
</p>
|
|
|
|
<div className="hero-actions" ref={setActionsRef}>
|
|
<a href="#dufte" className="btn btn-primary">
|
|
{"Aktuelle D\u00FCfte"}
|
|
</a>
|
|
<Link to="/discovery-set" className="btn btn-secondary">
|
|
Discovery Set
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<IntroOverlay
|
|
overlayRef={overlayRef}
|
|
overlayTextRef={overlayTextRef}
|
|
logoSrc="/atmos-logo-dark.svg"
|
|
/>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export default HeroSection;
|