ab/web-petting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjusted hero landing
Build and Publish / Build and Publish Docker Image (push) Successful in 1m53s
Details

Browse Source
This commit is contained in:
Ultradesu
2026-05-13 14:56:15 +01:00
parent 21331b75a8
commit 68d578b29d
3 changed files with 74 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Cargo.lock
Generated
+1 -1
View File
@@ -3255,7 +3255,7 @@ dependencies = [
[[package]]
name = "web-petting"
version = "0.1.4"
version = "0.1.5"
dependencies = [
"chrono",
"chrono-tz",
Cargo.toml
+1 -1
View File
@@ -1,6 +1,6 @@
[package]
name = "web-petting"
version = "0.1.5"
version = "0.1.6"
edition = "2024"
[dependencies]
templates/landing.html
+72 -5
View File
@@ -96,6 +96,51 @@
box-shadow: 0 4px 20px rgba(124,108,255,0.35);
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(124,108,255,0.45); }
.hero { position: relative; }
.hero-blob {
position: absolute;
border-radius: 50%;
z-index: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-blob-br {
width: 360px; height: 400px;
right: -100px; bottom: -110px;
background-color: #ffe0ec;
background-image: radial-gradient(ellipse at 40% 40%, #ffd6e8 0%, #f8c4d8 60%, #eab0d0 100%);
border-radius: 50%;
overflow: hidden;
}
.hero-blob-tl {
width: 240px; height: 270px;
left: -65px; top: -15px;
background-color: #d8ecff;
background-image: radial-gradient(ellipse at 60% 60%, #d0e8ff 0%, #b8d8f8 60%, #a4c8f0 100%);
border-radius: 50%;
overflow: hidden;
}
.hero-blob-bl {
width: 290px; height: 330px;
left: -80px; bottom: -90px;
background-color: #d4f0d8;
background-image: radial-gradient(ellipse at 55% 45%, #ddf5e0 0%, #c4e8ca 60%, #b0dbb8 100%);
border-radius: 50%;
overflow: hidden;
}
.hero-blob svg {
position: absolute; opacity: 0.3;
}
.hero-blob img {
width: 100%; height: 100%; object-fit: contain;
}
.hero-content { position: relative; z-index: 1; }
@media (max-width: 600px) {
.hero-blob-br { width: 200px; height: 240px; right: -55px; bottom: -65px; }
.hero-blob-bl { width: 180px; height: 210px; left: -50px; bottom: -55px; }
.hero-blob-tl { width: 140px; height: 160px; left: -40px; top: -10px; }
}
.hero-emoji { font-size: 4rem; margin-bottom: 1rem; display: block; }
.hero-desc {
font-size: clamp(0.9rem, 2vw, 1.05rem);
@@ -118,6 +163,7 @@
border-radius: 18px; padding: 1.75rem;
border: 1px solid rgba(180,170,220,0.2);
transition: transform 0.2s, box-shadow 0.2s;
-webkit-transform: translateZ(0); transform: translateZ(0);
}
.testimonial-card:hover {
transform: translateY(-3px);
@@ -147,6 +193,7 @@
border-radius: 18px; padding: 2rem 2.5rem;
border: 1px solid rgba(180,170,220,0.2);
text-align: center;
-webkit-transform: translateZ(0); transform: translateZ(0);
}
.pricing-text {
font-size: clamp(1.1rem, 2.5vw, 1.3rem);
@@ -177,6 +224,7 @@
border-radius: 18px; padding: 2rem 1.75rem;
border: 1px solid rgba(180,170,220,0.2);
transition: transform 0.2s, box-shadow 0.2s;
-webkit-transform: translateZ(0); transform: translateZ(0);
}
.service-card:hover {
transform: translateY(-4px);
@@ -210,6 +258,7 @@
border-radius: 22px; padding: 2.5rem 2rem;
box-shadow: 0 8px 40px rgba(124,108,255,0.12);
border: 1px solid rgba(180,170,220,0.25);
-webkit-transform: translateZ(0); transform: translateZ(0);
}
.form-wrapper h2 {
text-align: center; font-size: 1.6rem; font-weight: 800;
@@ -286,11 +335,29 @@
<!-- Hero -->
<section class="hero">
<span class="hero-emoji" role="img" aria-label="pets">🐱🐹🦎</span>
<h1>{{ t.landing_hero_title }}</h1>
<p>{{ t.landing_hero_subtitle }}</p>
<p class="hero-desc">{{ t.landing_hero_description }}</p>
<a href="#form" class="hero-cta">{{ t.landing_hero_cta }}</a>
<div class="hero-blob hero-blob-tl">
<svg viewBox="0 0 60 70" width="50" height="58" style="left:15%;top:18%;transform:rotate(-15deg);"><ellipse cx="30" cy="46" rx="16" ry="18" fill="#8cb8e8" opacity="0.55"/><ellipse cx="14" cy="22" rx="8" ry="10" fill="#8cb8e8" opacity="0.55" transform="rotate(-10 14 22)"/><ellipse cx="46" cy="22" rx="8" ry="10" fill="#8cb8e8" opacity="0.55" transform="rotate(10 46 22)"/><ellipse cx="24" cy="8" rx="6" ry="8" fill="#8cb8e8" opacity="0.55" transform="rotate(-5 24 8)"/><ellipse cx="38" cy="8" rx="6" ry="8" fill="#8cb8e8" opacity="0.55" transform="rotate(5 38 8)"/></svg>
<svg viewBox="0 0 60 55" width="32" height="30" style="right:20%;bottom:22%;transform:rotate(12deg);"><path d="M30 50 C10 35 0 22 0 14 C0 5 7 0 15 0 C21 0 26 3 30 9 C34 3 39 0 45 0 C53 0 60 5 60 14 C60 22 50 35 30 50Z" fill="#7baad4" opacity="0.5"/></svg>
<svg viewBox="0 0 80 40" width="44" height="22" style="left:50%;top:60%;transform:rotate(8deg);"><path d="M60 20 Q48 2 28 8 Q10 14 10 20 Q10 26 28 32 Q48 38 60 20Z" fill="#9ac4e8" opacity="0.3"/><path d="M60 20 L74 6 L74 34 Z" fill="#9ac4e8" opacity="0.3"/></svg>
</div>
<div class="hero-blob hero-blob-bl">
<svg viewBox="0 0 60 70" width="45" height="52" style="right:18%;top:15%;transform:rotate(20deg);"><path d="M30 65 C30 65 10 45 10 25 C10 10 25 2 30 2 C35 2 50 10 50 25 C50 45 30 65 30 65Z" fill="#8cc49a" opacity="0.35"/><path d="M30 60 L30 20 M30 35 Q20 30 15 25 M30 45 Q40 40 45 35" fill="none" stroke="#7ab88a" stroke-width="2" stroke-linecap="round"/></svg>
<svg viewBox="0 0 80 40" width="40" height="20" style="left:30%;bottom:25%;transform:rotate(-12deg);"><path d="M60 20 Q48 2 28 8 Q10 14 10 20 Q10 26 28 32 Q48 38 60 20Z" fill="#90c8a0" opacity="0.3"/><path d="M60 20 L74 6 L74 34 Z" fill="#90c8a0" opacity="0.3"/></svg>
<svg viewBox="0 0 60 55" width="30" height="28" style="right:30%;bottom:40%;transform:rotate(15deg);"><path d="M30 50 C10 35 0 22 0 14 C0 5 7 0 15 0 C21 0 26 3 30 9 C34 3 39 0 45 0 C53 0 60 5 60 14 C60 22 50 35 30 50Z" fill="#7cb88c" opacity="0.5"/></svg>
</div>
<div class="hero-blob hero-blob-br">
<svg viewBox="0 0 80 80" width="60" height="60" style="left:12%;top:15%;transform:rotate(10deg);"><path d="M20 15 L10 2 L18 18 M60 15 L70 2 L62 18 M40 70 C18 70 8 52 8 38 C8 20 22 8 40 8 C58 8 72 20 72 38 C72 52 62 70 40 70Z" fill="none" stroke="#e89cb8" stroke-width="3" stroke-linecap="round"/><circle cx="28" cy="36" r="3.5" fill="#e89cb8"/><circle cx="52" cy="36" r="3.5" fill="#e89cb8"/><ellipse cx="40" cy="48" rx="4" ry="2.5" fill="#e89cb8"/></svg>
<svg viewBox="0 0 60 70" width="40" height="47" style="right:15%;top:50%;transform:rotate(-20deg);"><ellipse cx="30" cy="46" rx="16" ry="18" fill="#e8a0b8" opacity="0.55"/><ellipse cx="14" cy="22" rx="8" ry="10" fill="#e8a0b8" opacity="0.55" transform="rotate(-10 14 22)"/><ellipse cx="46" cy="22" rx="8" ry="10" fill="#e8a0b8" opacity="0.55" transform="rotate(10 46 22)"/><ellipse cx="24" cy="8" rx="6" ry="8" fill="#e8a0b8" opacity="0.55" transform="rotate(-5 24 8)"/><ellipse cx="38" cy="8" rx="6" ry="8" fill="#e8a0b8" opacity="0.55" transform="rotate(5 38 8)"/></svg>
<svg viewBox="0 0 60 55" width="36" height="33" style="left:55%;bottom:18%;transform:rotate(-8deg);"><path d="M30 50 C10 35 0 22 0 14 C0 5 7 0 15 0 C21 0 26 3 30 9 C34 3 39 0 45 0 C53 0 60 5 60 14 C60 22 50 35 30 50Z" fill="#d48aaa" opacity="0.5"/></svg>
<svg viewBox="0 0 60 70" width="30" height="35" style="left:20%;bottom:30%;transform:rotate(25deg);"><path d="M30 65 C30 65 10 45 10 25 C10 10 25 2 30 2 C35 2 50 10 50 25 C50 45 30 65 30 65Z" fill="#e8b0c4" opacity="0.35"/><path d="M30 60 L30 20 M30 35 Q20 30 15 25 M30 45 Q40 40 45 35" fill="none" stroke="#d49ab0" stroke-width="2" stroke-linecap="round"/></svg>
</div>
<div class="hero-content">
<span class="hero-emoji" role="img" aria-label="pets">🐱🐹🦎</span>
<h1>{{ t.landing_hero_title }}</h1>
<p>{{ t.landing_hero_subtitle }}</p>
<p class="hero-desc">{{ t.landing_hero_description }}</p>
<a href="#form" class="hero-cta">{{ t.landing_hero_cta }}</a>
</div>
</section>
<!-- Services -->