about.astro raw

   1  ---
   2  export const prerender = false;
   3  import Base from '../layouts/Base.astro';
   4  ---
   5  <Base title="За нас">
   6    <section class="about-hero">
   7      <div class="about-hero-bg" id="about-hero-bg" style="background-image: url('/images/shop-hero.jpg')"></div>
   8      <div class="container about-hero-content">
   9        <h1 class="about-hero-title" data-i18n="aboutTitle">Кои сме ние</h1>
  10      </div>
  11    </section>
  12  
  13    <section class="section about-content">
  14      <div class="container">
  15        <div class="about-layout">
  16          <div class="about-image" id="about-image"></div>
  17          <div class="about-text md-content" id="about-text">
  18            <div id="about-text-top">
  19              <h2 data-i18n="aboutSubtitle">Семейна традиция</h2>
  20              <p data-i18n="aboutText1">Ние сме семейна компания, посветена на събирането и предлагането на висококачествени билки и чайове от Стара планина. Нашата мисия е да ви предоставим чисти, натурални продукти, събрани на ръка с грижа и уважение към природата.</p>
  21              <p data-i18n="aboutText2">Вярваме, че истинският вкус на чая идва от чистата природа. Затова нашите билки се събират от екологично чисти райони, далеч от замърсители и промишленост.</p>
  22              <p data-i18n="aboutText3">Ние не засаждаме и култивираме билките, защото вярваме, че израстването в естествената им среда придава уникалния им характер и здравословни свойства. Ангажираността ни с качеството и отговорното производство се отразява във всеки аспект на нашата работа, защото за нас чаят е повече от напитка - той е начин на живот и израз на нашата любов към природата.</p>
  23            </div>
  24          </div>
  25          <div class="about-text md-content" id="about-text-rest">
  26            <p data-i18n="aboutText4">Благодарим ви, че избирате Zlattea! Нашата врата е отворена за вас за всяко запитване или нужда от помощ. Нека ви поведем във вълшебния свят на българския планински чай и да се насладим заедно на магията, която създава.</p>
  27          </div>
  28        </div>
  29      </div>
  30    </section>
  31  </Base>
  32  
  33  <script>
  34    import { currentLang } from '../lib/i18n';
  35    import { renderMarkdown } from '../lib/markdown';
  36  
  37    function splitBlocks(md: string): string[] {
  38      return md.split(/\n\s*\n+/).map(b => b.trim()).filter(b => b.length > 0);
  39    }
  40  
  41    async function load() {
  42      try {
  43        const r = await fetch('/api/options');
  44        const opts = await r.json();
  45        const lang = currentLang();
  46        const rawUrl = opts.about_image || '/images/about-preview.jpg';
  47        const imgUrl = rawUrl.startsWith('http') ? `/api/proxy-image?url=${encodeURIComponent(rawUrl)}` : rawUrl;
  48        const md = lang === 'en' ? (opts.about_md_en || '') : (opts.about_md_bg || '');
  49  
  50        const imgEl = document.getElementById('about-image');
  51        if (imgEl) imgEl.innerHTML = `<img src="${imgUrl}" alt="Zlattea" />`;
  52  
  53        if (md) {
  54          const blocks = splitBlocks(md);
  55          const top = blocks.slice(0, 3).map(b => renderMarkdown(b)).join('');
  56          const rest = blocks.slice(3).map(b => renderMarkdown(b)).join('');
  57          document.getElementById('about-text-top')!.innerHTML = top;
  58          document.getElementById('about-text-rest')!.innerHTML = rest;
  59        }
  60      } catch (e) { console.error('about load error:', e); }
  61    }
  62    load();
  63    window.addEventListener('lang-changed', load);
  64  </script>
  65  
  66  <script>
  67    const bg = document.getElementById('about-hero-bg');
  68    if (bg) {
  69      const factor = 0.5;
  70      function parallax() { bg.style.transform = `translateY(${window.scrollY * factor}px)`; }
  71      window.addEventListener('scroll', parallax, { passive: true });
  72      parallax();
  73    }
  74  </script>
  75  
  76  <style>
  77    .about-layout {
  78      display: grid;
  79      grid-template-columns: 1fr 2fr;
  80      gap: 2rem;
  81      align-items: start;
  82      position: relative;
  83      z-index: 1;
  84      color: var(--text);
  85      padding: 2rem;
  86    }
  87    .about-image img {
  88      width: 100%;
  89      border-radius: 8px;
  90    }
  91    .about-text {
  92      text-align: justify;
  93      line-height: 1.8;
  94      color: var(--text);
  95    }
  96    .about-text h2, .about-text h3 {
  97      color: var(--text);
  98    }
  99    .about-text p { color: var(--text); }
 100    .about-text li { color: var(--text); }
 101    .about-text a { color: var(--primary); }
 102    #about-text-rest {
 103      grid-column: 1 / -1;
 104      margin-top: 1.5rem;
 105    }
 106    @media (max-width: 768px) {
 107      .about-layout { grid-template-columns: 1fr; }
 108      .about-image { max-width: 400px; margin: 0 auto; }
 109      #about-text-rest { grid-column: auto; }
 110    }
 111  </style>
 112