index.astro raw

   1  ---
   2  export const prerender = false;
   3  import Base from '../layouts/Base.astro';
   4  ---
   5  
   6  <Base title="Начало" titleEn="Home" isHome={true}>
   7    <main>
   8      <section class="hero">
   9        <div class="hero-bg" style="background-image: url('/images/hero-bg.jpg'); background-size: cover; background-position: center;"></div>
  10        <div class="container hero-content">
  11          <h1 class="hero-title" data-i18n="heroTitle">Здраве от планината</h1>
  12          <p class="hero-subtitle" data-i18n="heroSubtitle">Вкусът на истинския чай, съхранен през поколенията.</p>
  13          <a href="/shop" class="btn btn-hero" data-i18n="shopNow">Разгледайте продуктите</a>
  14        </div>
  15      </section>
  16  
  17      <section class="featured-panel">
  18        <div class="featured-panel-image" style="background-image: url('/images/products/parallax-1.jpg')"></div>
  19        <div class="featured-panel-text" style="background-image: url('/images/products/home-2background-img-6.jpg')">
  20          <div class="featured-panel-body">
  21            <h3 data-i18n="panelTitle">Диворастящи билки</h3>
  22            <p data-i18n="panelText1">Нашите билки растат в естествената си среда,</p>
  23            <p data-i18n="panelText2">сред чистата природа на югозападна България.</p>
  24            <p data-i18n="panelText3">Всички растения са ръчно набрани,</p>
  25            <p data-i18n="panelText4">внимателно почистени и естествено изсушени.</p>
  26            <a href="/about" class="btn" data-i18n="panelCta">Научете повече</a>
  27          </div>
  28        </div>
  29      </section>
  30  
  31    </main>
  32  </Base>
  33  
  34  <script>
  35    // parallax hero: background scrolls at ~0.5x speed
  36    const heroBg = document.querySelector('.hero-bg');
  37    if (heroBg) {
  38      const factor = 0.5;
  39      function parallax() {
  40        heroBg.style.transform = `translateY(${window.scrollY * factor}px)`;
  41      }
  42      window.addEventListener('scroll', parallax, { passive: true });
  43      parallax();
  44    }
  45  </script>
  46