patx/demo
update rcraft hero
Commit 4138fa8 · patx · 2026-06-04T21:00:05-04:00
Comments
No comments yet.
Diff
diff --git a/docs/finished-hero.png b/docs/finished-hero.png
new file mode 100644
index 0000000..bca1b6d
Binary files /dev/null and b/docs/finished-hero.png differ
diff --git a/docs/framing-hero.png b/docs/framing-hero.png
new file mode 100644
index 0000000..5ad98a5
Binary files /dev/null and b/docs/framing-hero.png differ
diff --git a/docs/house-hero.png b/docs/house-hero.png
new file mode 100644
index 0000000..dff24ba
Binary files /dev/null and b/docs/house-hero.png differ
diff --git a/docs/hero-bg.jpg b/docs/level-hero.jpg
similarity index 100%
rename from docs/hero-bg.jpg
rename to docs/level-hero.jpg
diff --git a/docs/r_craft.html b/docs/r_craft.html
index 350944c..7d92868 100644
--- a/docs/r_craft.html
+++ b/docs/r_craft.html
@@ -210,9 +210,51 @@
display: flex; align-items: flex-end;
padding: 0 3rem 6rem;
position: relative;
+ isolation: isolate;
+ overflow: hidden;
+ background: var(--dark);
+ }
+
+ #hero::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ z-index: 1;
background:
- linear-gradient(to bottom, rgba(26,26,20,0.3) 0%, rgba(26,26,20,0.7) 60%, rgba(26,26,20,0.95) 100%),
- url('hero-bg.jpg') center/cover no-repeat;
+ linear-gradient(to bottom, rgba(26,26,20,0.25) 0%, rgba(26,26,20,0.68) 62%, rgba(26,26,20,0.96) 100%),
+ linear-gradient(to right, rgba(26,26,20,0.78) 0%, rgba(26,26,20,0.4) 45%, rgba(26,26,20,0.18) 100%);
+ pointer-events: none;
+ }
+
+ .hero-slideshow {
+ position: absolute;
+ inset: 0;
+ z-index: 0;
+ overflow: hidden;
+ }
+
+ .hero-slide {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+ opacity: 0;
+ transform: scale(1.12);
+ filter: saturate(0.92) contrast(1.04);
+ animation: heroZoomFade 30s infinite ease-in-out;
+ will-change: opacity, transform;
+ }
+
+ .hero-slide:nth-child(2) { animation-delay: 6s; }
+ .hero-slide:nth-child(3) { animation-delay: 12s; }
+ .hero-slide:nth-child(4) { animation-delay: 18s; }
+ .hero-slide:nth-child(5) { animation-delay: 24s; }
+
+ .hero-content {
+ position: relative;
+ z-index: 2;
}
.hero-eyebrow {
@@ -294,6 +336,7 @@
.hero-stats {
position: absolute;
+ z-index: 2;
right: 3rem; bottom: 6rem;
display: flex; flex-direction: column; gap: 2rem;
text-align: right;
@@ -796,6 +839,27 @@
to { opacity: 1; transform: translateY(0); }
}
+ @keyframes heroZoomFade {
+ 0% {
+ opacity: 0;
+ transform: scale(1.12);
+ }
+ 1.5% {
+ opacity: 1;
+ }
+ 19.5% {
+ opacity: 1;
+ }
+ 21.5% {
+ opacity: 0;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ transform: scale(1);
+ }
+ }
+
.hero-content > * {
animation: fadeUp 0.8s ease both;
}
@@ -948,7 +1012,14 @@
#hero {
padding: 4rem 1rem;
- background-position: left center;
+ }
+
+ .hero-slide {
+ object-position: center;
+ }
+
+ .hero-slide-level {
+ object-position: left center;
}
.hero-eyebrow {
@@ -1053,6 +1124,17 @@
width: auto;
}
}
+
+ @media (prefers-reduced-motion: reduce) {
+ .hero-slide {
+ animation: none;
+ transform: scale(1.03);
+ }
+
+ .hero-slide:first-child {
+ opacity: 1;
+ }
+ }
</style>
</head>
<body>
@@ -1077,6 +1159,13 @@
</nav>
<section id="hero">
+ <div class="hero-slideshow" aria-hidden="true">
+ <img class="hero-slide" src="house-hero.png" width="1672" height="941" alt="" fetchpriority="high" decoding="async">
+ <img class="hero-slide" src="framing-hero.png" width="1672" height="941" alt="" decoding="async">
+ <img class="hero-slide" src="roof-hero.png" width="1920" height="1080" alt="" decoding="async">
+ <img class="hero-slide hero-slide-level" src="level-hero.jpg" width="1920" height="1080" alt="" decoding="async">
+ <img class="hero-slide" src="finished-hero.png" width="1672" height="941" alt="" decoding="async">
+ </div>
<div class="hero-content">
<h1>Building <em>Exceptional</em><br>Homes Across<br>London</h1>
<p class="hero-desc">From loft conversions to full refurbishments — R Craft Construction delivers craftsmanship, precision, and lasting quality across Watford, London, Hertfordshire, Bedfordshire, and nearby areas.</p>
diff --git a/docs/roof-hero.png b/docs/roof-hero.png
new file mode 100644
index 0000000..46ad8e5
Binary files /dev/null and b/docs/roof-hero.png differ