cameleer/cameleer-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(design): Hero asymmetric layout with real product UI + bug fixes

Browse Source 
- Hero restructured from stacked to 2-col grid on lg+ (copy left, product
  screenshot right). Replaces the abstract RouteDiagram with the actual
  exchange-detail view — the product doing the thing the copy promises.
- Kicker broken out of the shared uppercase-mono pattern: italic pill with
  a soft amber fill/border, scaled up to 14px. The humor now wears a
  different costume from the other section kickers.
- Hero brand mark scaled to 64px and given a slow 7s sway (reduced-motion
  guarded) — living atmosphere, not ambient animation.
- H1 min-height raised to 2.5em to absorb the 2-line wrap of line 1 at
  mobile sizes without layout shift on rotation.
- Amber radial glow behind the product shot + subtle bevel + frame ring.
- Footer placeholder 3-wavy-lines SVG replaced with real camel logo
  (spec gap from earlier refresh — header got swapped, footer didn't).
- Screenshot assets imported under public/product/.
This commit is contained in:
hsiegeln
2026-04-25 00:20:39 +02:00
parent af7c61c203
commit 8c77db02ac
5 changed files with 87 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/sections/Hero.astro
View File

@@ -1,58 +1,75 @@
---
import CTAButtons from '../CTAButtons.astro';
import RouteDiagram from '../RouteDiagram.astro';
import TopographicBg from '../TopographicBg.astro';
---
<section class="relative overflow-hidden border-b border-border">
<TopographicBg opacity={0.14} lines={10} />
<div class="relative max-w-content mx-auto px-6 pt-20 pb-24 md:pt-28 md:pb-32">
<div class="max-w-3xl">
<div class="flex items-center gap-3 mb-6">
<TopographicBg opacity={0.22} lines={11} />
<div class="relative max-w-content mx-auto px-6 pt-16 pb-20 md:pt-24 md:pb-24 lg:pt-28">
<div class="grid lg:grid-cols-12 gap-10 lg:gap-14 items-center">
<div class="lg:col-span-5">
<img
src="/cameleer-logo.svg"
width="48"
height="48"
width="64"
height="64"
alt=""
decoding="async"
class="shrink-0"
class="shrink-0 mb-5 hero-mark"
/>
<p class="text-accent font-mono text-xs tracking-[0.25em] uppercase">
<p
class="inline-flex items-center gap-2 mb-7 rounded-full border border-accent/30 bg-accent/[0.08] text-accent px-3.5 py-1 text-sm italic font-medium"
>
<span aria-hidden="true" class="text-base">✦</span>
Your camels called. They want a GPS.
</p>
<h1
class="font-bold text-text mb-6 hero-rotator"
aria-live="off"
data-hero-rotator
>
<span class="hero-line" data-active aria-hidden="false">Run Apache Camel without running Apache Camel.</span>
<span class="hero-line" aria-hidden="true">Camel integrations, minus the baggage.</span>
<span class="hero-line" aria-hidden="true">Your camels, our caravan. You just ride.</span>
</h1>
<p class="text-lg md:text-xl text-text-muted max-w-prose leading-relaxed mb-10">
The hosted home for your Camel integrations — with deep tracing, replay, and live control built in. Because you chose Camel to stay free, not to stay up all night.
</p>
<CTAButtons size="lg" />
</div>
<div class="lg:col-span-7 relative">
<div class="hero-shot relative rounded-lg border border-border-strong bg-bg-elevated overflow-hidden">
<img
src="/product/exchange-detail.png"
alt="Cameleer Mission Control — route execution detail with processor-level trace"
width="1920"
height="945"
loading="eager"
decoding="async"
class="block w-full h-auto"
/>
<div class="absolute inset-0 ring-1 ring-inset ring-accent/10 pointer-events-none rounded-lg"></div>
</div>
<div aria-hidden="true" class="hero-shot-glow"></div>
</div>
<h1
class="text-display font-bold text-text mb-6 hero-rotator"
aria-live="off"
data-hero-rotator
>
<span class="hero-line" data-active aria-hidden="false">Run Apache Camel without running Apache Camel.</span>
<span class="hero-line" aria-hidden="true">Camel integrations, minus the baggage.</span>
<span class="hero-line" aria-hidden="true">Your camels, our caravan. You just ride.</span>
</h1>
<p class="text-lg md:text-xl text-text-muted max-w-prose leading-relaxed mb-10">
The hosted home for your Camel integrations — with deep tracing, replay, and live control built in. Because you chose Camel to stay free, not to stay up all night.
</p>
<CTAButtons size="lg" />
</div>
<div class="mt-16 md:mt-20">
<RouteDiagram />
</div>
</div>
</section>
<style>
/* Rotating H1 — fluid size + fade transition */
.hero-rotator {
font-size: clamp(2.25rem, 4.5vw, 4rem);
line-height: 1.05;
letter-spacing: -0.02em;
position: relative;
display: block;
/* Reserve height for the tallest line so no layout shift on swap.
Two lines at current H1 size handles all three on most viewports. */
min-height: 2.2em;
/* Reserve enough vertical space that a 2-line wrap of the longest line
does not push the page on swap (mobile wraps line 1 to 2 lines). */
min-height: 2.5em;
}
.hero-line {
display: block;
opacity: 0;
transition: opacity 700ms ease-in-out;
/* Stack all lines on top of each other — only [data-active] is visible. */
position: absolute;
inset: 0;
}
@@ -60,10 +77,39 @@ import TopographicBg from '../TopographicBg.astro';
opacity: 1;
position: relative;
}
/* Product screenshot frame — subtle dropshadow + amber glow behind */
.hero-shot {
box-shadow:
0 1px 0 rgba(240, 180, 41, 0.08) inset,
0 30px 60px -20px rgba(0, 0, 0, 0.6),
0 10px 25px -10px rgba(0, 0, 0, 0.5);
}
.hero-shot-glow {
position: absolute;
inset: 10% -5% 10% -5%;
background: radial-gradient(
60% 60% at 50% 50%,
rgba(240, 180, 41, 0.18),
transparent 70%
);
filter: blur(40px);
z-index: -1;
}
/* Slow sway on the mark — tasteful, not distracting */
@keyframes hero-mark-sway {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-2px) rotate(-1.5deg); }
}
.hero-mark {
animation: hero-mark-sway 7s ease-in-out infinite;
transform-origin: 50% 90%;
}
@media (prefers-reduced-motion: reduce) {
.hero-line {
transition: none;
}
.hero-line { transition: none; }
.hero-mark { animation: none; }
}
</style>