Added reviews. Added pricing.
Build and Publish / Build and Publish Docker Image (push) Successful in 6m27s
Build and Publish / Build and Publish Docker Image (push) Successful in 6m27s
This commit is contained in:
Ultradesu
+109
-11
@@ -97,6 +97,62 @@
|
||||
}
|
||||
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(124,108,255,0.45); }
|
||||
.hero-emoji { font-size: 4rem; margin-bottom: 1rem; display: block; }
|
||||
.hero-desc {
|
||||
font-size: clamp(0.9rem, 2vw, 1.05rem);
|
||||
color: #7a7599; max-width: 640px; margin: 0 auto 2rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.guarantee {
|
||||
text-align: center; padding: 2rem 1.5rem;
|
||||
font-size: 1.1rem; font-weight: 600; color: #2d2b55;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Testimonials ── */
|
||||
.testimonials-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
.testimonial-card {
|
||||
background: rgba(255,255,255,0.55); backdrop-filter: blur(10px);
|
||||
border-radius: 18px; padding: 1.75rem;
|
||||
border: 1px solid rgba(180,170,220,0.2);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.testimonial-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 30px rgba(124,108,255,0.1);
|
||||
}
|
||||
.testimonial-text {
|
||||
font-size: 0.95rem; line-height: 1.7; color: #5a5680;
|
||||
font-style: italic; margin-bottom: 1rem;
|
||||
}
|
||||
.testimonial-text::before { content: "\201C"; font-size: 1.5rem; color: #b06cff; margin-right: 0.2rem; }
|
||||
.testimonial-text::after { content: "\201D"; font-size: 1.5rem; color: #b06cff; margin-left: 0.2rem; }
|
||||
.testimonial-footer {
|
||||
display: flex; align-items: center; gap: 0.75rem;
|
||||
}
|
||||
.testimonial-avatar {
|
||||
width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
|
||||
border: 2px solid rgba(180,170,220,0.3);
|
||||
}
|
||||
.testimonial-note {
|
||||
font-size: 0.85rem; color: #7a7599; font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── Pricing ── */
|
||||
.pricing-block {
|
||||
max-width: 600px; margin: 0 auto;
|
||||
background: rgba(255,255,255,0.55); backdrop-filter: blur(10px);
|
||||
border-radius: 18px; padding: 2rem 2.5rem;
|
||||
border: 1px solid rgba(180,170,220,0.2);
|
||||
text-align: center;
|
||||
}
|
||||
.pricing-text {
|
||||
font-size: clamp(1.1rem, 2.5vw, 1.3rem);
|
||||
color: #2d2b55; font-weight: 700; line-height: 1.7;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
/* ── Section common ── */
|
||||
.section { padding: 5rem 1.5rem; background: transparent; }
|
||||
@@ -230,9 +286,10 @@
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="hero">
|
||||
<span class="hero-emoji" role="img" aria-label="pets">🐱🐶</span>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
@@ -247,19 +304,31 @@
|
||||
<p>{{ t.landing_service_cats_text }}</p>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<span class="service-icon" role="img" aria-label="dog">🐕</span>
|
||||
<h3>{{ t.landing_service_dogs_title }}</h3>
|
||||
<p>{{ t.landing_service_dogs_text }}</p>
|
||||
<span class="service-icon" role="img" aria-label="rodents and reptiles">🐹🦎</span>
|
||||
<h3>{{ t.landing_service_exotic_title }}</h3>
|
||||
<p>{{ t.landing_service_exotic_text }}</p>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<span class="service-icon" role="img" aria-label="home">🏠</span>
|
||||
<h3>{{ t.landing_service_home_title }}</h3>
|
||||
<p>{{ t.landing_service_home_text }}</p>
|
||||
<span class="service-icon" role="img" aria-label="plants and fish">🌿🐟</span>
|
||||
<h3>{{ t.landing_service_bonus_title }}</h3>
|
||||
<p>{{ t.landing_service_bonus_text }}</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing -->
|
||||
{% if !pricing_info.is_empty() %}
|
||||
<section class="section" id="pricing">
|
||||
<div class="section-inner">
|
||||
<h2 class="section-title">{{ t.landing_pricing_title }}</h2>
|
||||
<div class="pricing-block">
|
||||
<p class="pricing-text">{{ pricing_info }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<!-- How it works -->
|
||||
<section class="section" id="how">
|
||||
<div class="section-inner">
|
||||
@@ -284,6 +353,37 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials -->
|
||||
{% if !testimonials.is_empty() %}
|
||||
<section class="section section-alt" id="testimonials">
|
||||
<div class="section-inner">
|
||||
<h2 class="section-title">{{ t.landing_testimonials_title }}</h2>
|
||||
<div class="testimonials-grid">
|
||||
{% for item in &testimonials %}
|
||||
<article class="testimonial-card">
|
||||
<div class="testimonial-text">{{ item.text }}</div>
|
||||
{% if item.image_path.is_some() || item.author_note.is_some() %}
|
||||
<div class="testimonial-footer">
|
||||
{% if item.image_path.is_some() %}
|
||||
<img class="testimonial-avatar" src="/testimonial-image/{{ item.id.unwrap() }}" alt="">
|
||||
{% endif %}
|
||||
{% if let Some(note) = item.author_note.as_deref() %}
|
||||
<span class="testimonial-note">{{ note }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<!-- Guarantee -->
|
||||
<div class="guarantee" style="position:relative;z-index:1;">
|
||||
<p>{{ t.landing_guarantee }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Lead Form -->
|
||||
<section class="form-section" id="form">
|
||||
<div class="form-wrapper">
|
||||
@@ -323,10 +423,8 @@
|
||||
var icons = [
|
||||
// Cat face
|
||||
'<svg viewBox="0 0 80 80" width="W" height="W"><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="C" stroke-width="3" stroke-linecap="round"/><circle cx="28" cy="36" r="3.5" fill="C"/><circle cx="52" cy="36" r="3.5" fill="C"/><ellipse cx="40" cy="48" rx="4" ry="2.5" fill="C"/><path d="M36 48 Q32 54 28 52 M44 48 Q48 54 52 52" fill="none" stroke="C" stroke-width="2" stroke-linecap="round"/></svg>',
|
||||
// Dog face
|
||||
'<svg viewBox="0 0 80 80" width="W" height="W"><path d="M15 28 Q6 18 12 8 Q18 14 22 22 M65 28 Q74 18 68 8 Q62 14 58 22" fill="none" stroke="C" stroke-width="3" stroke-linecap="round"/><ellipse cx="40" cy="44" rx="28" ry="26" fill="none" stroke="C" stroke-width="3"/><circle cx="30" cy="38" r="3" fill="C"/><circle cx="50" cy="38" r="3" fill="C"/><ellipse cx="40" cy="50" rx="5" ry="3.5" fill="C"/><path d="M40 53.5 L40 58 M36 58 Q40 62 44 58" fill="none" stroke="C" stroke-width="2" stroke-linecap="round"/></svg>',
|
||||
// Bone
|
||||
'<svg viewBox="0 0 100 44" width="W" height="H"><path d="M28 14 C28 6, 18 0, 12 6 C6 0, -2 8, 4 16 C0 20, 0 24, 4 28 C-2 36, 6 44, 12 38 C18 44, 28 38, 28 30 L72 30 C72 38, 82 44, 88 38 C94 44, 102 36, 96 28 C100 24, 100 20, 96 16 C102 8, 94 0, 88 6 C82 0, 72 6, 72 14 Z" fill="C" opacity="0.45"/></svg>',
|
||||
// Leaf
|
||||
'<svg viewBox="0 0 60 70" width="W2" height="W"><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="C" opacity="0.3"/><path d="M30 60 L30 20 M30 35 Q20 30 15 25 M30 45 Q40 40 45 35" fill="none" stroke="C" stroke-width="2" stroke-linecap="round"/></svg>',
|
||||
// Bowl
|
||||
'<svg viewBox="0 0 80 50" width="W" height="H2"><path d="M8 18 Q8 46 40 46 Q72 46 72 18 Z" fill="C" opacity="0.2"/><ellipse cx="40" cy="18" rx="34" ry="10" fill="none" stroke="C" stroke-width="3"/><path d="M8 18 Q8 46 40 46 Q72 46 72 18" fill="none" stroke="C" stroke-width="3" stroke-linejoin="round"/></svg>',
|
||||
// Paw print
|
||||
|
||||
Reference in New Issue
Block a user