Refactor code structure for improved readability and maintainability

2026-08-28 03:28:21 +00:00 · 2025-06-20 16:20:28 +03:00
parent aab9b84b1a
commit 0546a2f72e
9 changed files with 182 additions and 65 deletions
@@ -2,14 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg?v=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link rel="shortcut icon" href="/favicon.svg?v=1.0" />
    <link rel="apple-touch-icon" href="/favicon.svg?v=1.0" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Vancouver Investment Fund - Ukrainian investment fund established in 2018, focused on energy, woodworking, real estate, retail, and wholesale trade." />
+    <title>Vancouver</title>
    <meta name="keywords" content="investment fund, ukraine, vancouver, energy, real estate, retail, woodworking" />
    <meta name="author" content="Vancouver Investment Fund" />
    <title>Vancouver Investment Fund</title>
  </head>
  <body>
    <div id="app"></div>
@@ -1,8 +0,0 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
    <g fill="none">
        <path fill="#2859c5"
            d="M13.68 4.845C13.8 3.2 9.195.122 9.195 1.511v1.615a48 48 0 0 0-2.444.035a.933.933 0 0 0-.907.846c-.043.547-.043 1.08 0 1.627a.933.933 0 0 0 .907.846q.726.028 1.432.035a1.017 1.017 0 0 1 1.012 1.011v.603c0 1.361 4.62-1.695 4.485-3.284" />
        <path fill="#8fbffa"
            d="M.322 9.215C.203 7.569 4.807 4.492 4.807 5.88v.604c0 .556.455 1.005 1.012 1.01q.706.008 1.432.036a.934.934 0 0 1 .907.846c.043.547.043 1.08 0 1.627a.933.933 0 0 1-.907.846a48 48 0 0 1-2.444.035v1.615c0 1.36-4.62-1.695-4.485-3.284" />
    </g>
 </svg>
@@ -7,9 +7,9 @@
  <div class="container">
    <div class="footer-content">
      <div class="footer-section">
-        <h3>Vancouver Investment Fund</h3>
+        <h3>{t('header_title', $language)}</h3>
        <p class="footer-description">
-          {t('description', $language)}
+          {t('company_name', $language)}
        </p>
      </div>
@@ -1,5 +1,6 @@
 <script>
  import { theme, language } from '../stores.js';
  import { t } from '../translations.js';
  import { Sun, Moon, Globe, Monitor } from 'lucide-svelte';
  let showLanguageMenu = false;
@@ -46,7 +47,7 @@
  <div class="container">
    <div class="header-content">
      <div class="logo">
-        <h1>Vancouver</h1>
+        <h1>{t('header_title', $language)}</h1>
      </div>
      <div class="header-controls">
@@ -2,7 +2,7 @@
  import { onMount } from 'svelte';
  import { language } from '../stores.js';
  import { t } from '../translations.js';
-  import { TrendingUp, Building2, TreePine, ShoppingCart, Truck, Users } from 'lucide-svelte';
+  import { TrendingUp, Building2, TreePine, ShoppingCart, Truck, Users, ExternalLink } from 'lucide-svelte';
  let mounted = false;
@@ -34,7 +34,8 @@
      icon: TrendingUp,
      titleKey: 'energy',
      descKey: 'energy_desc',
-      color: '#059669'
+      color: '#059669',
      backgroundImage: '/energy-background.jpg'
    },
    {
      icon: TreePine,
@@ -42,25 +43,53 @@
      descKey: 'woodworking_desc',
      color: '#7c3aed'
    },
    {
      icon: Building2,
      titleKey: 'real_estate',
      descKey: 'real_estate_desc',
      color: '#d97706'
    },
    {
      icon: ShoppingCart,
      titleKey: 'retail',
      descKey: 'retail_desc',
-      color: '#dc2626'
+      color: '#dc2626',
      backgroundImage: '/retail-background.jpg'
    },
    {
      icon: Truck,
      titleKey: 'wholesale',
      descKey: 'wholesale_desc',
      color: '#4f46e5'
    },
    {
      icon: Building2,
      titleKey: 'real_estate',
      descKey: 'real_estate_desc',
      color: '#d97706',
      backgroundImage: '/office-background.jpg'
    }
  ];
  const linkUrls = {
    energy: 'https://hirsky.windpark.com.ua',
    woodworking: 'https://www.slavforest.com.ua/',
    retail: 'https://silpo.ua/'
  };
  function renderTextWithLinks(text, areaKey) {
    if (!text.includes('{link}')) {
      return text;
    }
    return text.split('{link}').map((part, index) => {
      if (index === 0) return part;
      const [linkText, ...rest] = part.split('{/link}');
      const afterLink = rest.join('{/link}');
      return {
        beforeLink: '',
        linkText: linkText,
        afterLink: afterLink,
        url: linkUrls[areaKey]
      };
    });
  }
 </script>
 <main class="main" class:mounted>
@@ -71,9 +100,6 @@
        <h1 class="hero-title">
          {t('company_name', $language)}
        </h1>
        <p class="hero-description">
          {t('description', $language)}
        </p>
      </div>
    </div>
  </section>
@@ -87,17 +113,39 @@
    </div>
  </section>
  <!-- Description Section -->
  <section class="description-section scroll-animate">
    <div class="container">
      <p class="description-text">
        {t('description', $language)}
      </p>
    </div>
  </section>
  <!-- Investment Areas -->
  <section class="investment-areas scroll-animate">
    <div class="container">
      <div class="areas-grid">
        {#each investmentAreas as area, index}
-          <div class="area-card" style="--delay: {index * 0.1}s">
+          <div class="area-card"
               class:has-background={area.backgroundImage}
               style="--delay: {index * 0.1}s; {area.backgroundImage ? `--bg-image: url('${area.backgroundImage}')` : ''}">
            <div class="area-icon" style="--icon-color: {area.color}">
              <svelte:component this={area.icon} size={32} />
            </div>
            <h3>{t(area.titleKey, $language)}</h3>
-            <p>{t(area.descKey, $language)}</p>
+            <p>
              {#each renderTextWithLinks(t(area.descKey, $language), area.titleKey) as part}
                {#if typeof part === 'string'}
                  {part}
                {:else}
                  {part.beforeLink}<a href={part.url} target="_blank" rel="noopener noreferrer" class="external-link">
                    {part.linkText}
                    <ExternalLink size={14} />
                  </a>{part.afterLink}
                {/if}
              {/each}
            </p>
          </div>
        {/each}
      </div>
@@ -245,20 +293,10 @@
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--primary-color);
-    margin-bottom: 1.5rem;
+    margin-bottom: 0;
    line-height: 1.2;
    text-align: center;
-  }
+    text-transform: uppercase;
  .hero-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  /* NAV Value Section */
@@ -285,6 +323,23 @@
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
  /* Description Section */
  .description-section {
    padding: 3rem 0;
    background: var(--bg-secondary);
  }
  .description-text {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Investment Areas */
  .investment-areas {
    padding: 4rem 0;
@@ -308,6 +363,42 @@
    animation-delay: var(--delay);
    opacity: 0;
    transform: translateY(20px);
    position: relative;
    overflow: hidden;
  }
  .area-card.has-background {
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .area-card.has-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-color);
    opacity: 0.35;
    z-index: 1;
  }
  .area-card.has-background > * {
    position: relative;
    z-index: 2;
  }
  .area-card.has-background h3 {
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }
  .area-card.has-background p {
    color: #f8fafc;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }
  .area-card:hover {
@@ -315,6 +406,10 @@
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }
  .area-card.has-background:hover::before {
    opacity: 0.25;
  }
  .area-icon {
    width: 64px;
    height: 64px;
@@ -338,6 +433,30 @@
    line-height: 1.6;
  }
  .external-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
    transition: all 0.2s ease;
  }
  .external-link:hover {
    text-decoration: underline;
    color: var(--primary-color);
  }
  .area-card.has-background .external-link {
    color: #ffffff;
  }
  .area-card.has-background .external-link:hover {
    color: #e2e8f0;
    text-decoration: underline;
  }
  /* Mission & Vision */
  .mission-vision {
    padding: 4rem 0;
@@ -505,6 +624,14 @@
      font-size: 1.125rem;
    }
    .description-section {
      padding: 2rem 0;
    }
    .description-text {
      font-size: 1rem;
    }
    .section-title {
      font-size: 1.5rem;
    }
@@ -1,17 +1,18 @@
 export const translations = {
  en: {
-    company_name: 'JOINT STOCK COMPANY CLOSED NON-DIVERSIFIED VENTURE CORPORATE INVESTMENT FUND "VANCOUVER"',
+    header_title: 'Investment Fund «Vancouver»',
    company_name: 'STOCK COMPANY CLOSED NON-DIVERSIFIED VENTURE CORPORATE INVESTMENT FUND "VANCOUVER"',
    description: 'We are a Ukrainian investment fund established in 2018. Over more than six years of operation, we have focused our investment strategy on the following key areas:',
    energy: 'Energy',
-    energy_desc: 'Investments in renewable energy, particularly in the Hirskyi Wind Park project, which provides clean energy and contributes to Ukraine\'s energy independence.',
+    energy_desc: 'Investing in renewable energy is a strategic focus of the Fund. In particular, we support the development of the {link}Hirskyi Wind Park{/link}, which generates clean electricity, reduces carbon emissions, and contributes to strengthening Ukraine’s energy independence in today’s complex geopolitical landscape.',
    woodworking: 'Woodworking Industry',
-    woodworking_desc: 'Partnership with SLAV FOREST — a modern woodworking enterprise that implements advanced wood processing technologies with a focus on export-oriented production.',
+    woodworking_desc: 'Partnership with {link}SLAV FOREST{/link} — a modern woodworking enterprise that implements advanced wood processing technologies with a focus on export-oriented production.',
    real_estate: 'Office Real Estate',
-    real_estate_desc: 'We invest in stable real estate assets located in the central business districts of Kyiv.',
+    real_estate_desc: 'We invest in commercial real estate located in central districts of Kyiv to ensure stable income and asset value preservation. Our focus lies on properties with high occupancy rates, developed infrastructure, and strong long-term lease potential.',
    retail: 'Retail',
-    retail_desc: 'Investment participation in the development of the Silpo chain — one of Ukraine\'s most successful retailers, focused on innovation in customer service.',
+    retail_desc: 'The Fund is involved in the development of the {link}Silpo{/link} supermarket chain, known for its innovative retail approach and unique customer experience. Investments are aimed at expanding the network, enhancing digital services, and increasing operational efficiency.',
    wholesale: 'Wholesale Trade',
-    wholesale_desc: 'Support of trading companies that provide logistics and distribution of goods both within Ukraine and internationally.',
+    wholesale_desc: 'We support logistics and distribution companies that ensure efficient supply of goods both domestically and abroad. Our investments help scale operations, optimise processes, and enhance the competitiveness of the business.',
    nav_value: 'As of the end of Q1 2025, the Fund\'s net asset value amounts to €16.8 million.',
    mission_title: 'Mission / Vision',
    mission: 'Mission',
@@ -19,7 +20,7 @@ export const translations = {
    vision: 'Vision',
    vision_desc: 'We strive to become the investment partner of choice for Ukrainian and international investors seeking transparent, professional, and efficient capital placement mechanisms.',
    team_title: 'Team',
-    team_desc: 'Key person responsible for the Fund\'s operations:',
+    team_desc: 'Key persons responsible for the Fund\'s operations:',
    fund_manager: 'Fund Manager:',
    manager_name: 'Oleksandr Viktorovych Svynar — an experienced finance and investment manager responsible for the overall strategy and asset management.',
    partners_title: 'Fund Partners',
@@ -40,34 +41,35 @@ export const translations = {
    valuer_address: 'Kyiv, 25 Lva Tolstoho St.',
    valuer_code: 'EDRPOU Code: 34289017',
    contact_title: 'Contact Information',
-    manager_title: 'Manager: Oleksandr Viktorovych Svynar',
+    manager_title: 'Oleksandr Viktorovych Svynar',
    office_address: 'Office Address:',
    address: '01033, Ukraine, Kyiv, 48, 50A Zhylianska St., Office 13',
    phone: 'Phone: +38 050 465 46 18'
  },
  uk: {
-    company_name: 'АКЦІОНЕРНЕ ТОВАРИСТВО ЗАКРИТИЙ НЕДИВЕРСИФІКОВАНИЙ ВЕНЧУРНИЙ КОРПОРАТИВНИЙ ІНВЕСТИЦІЙНИЙ ФОНД "ВАНКУВЕР"',
+    header_title: 'Інвестиційний фонд «Vancouver»',
    company_name: 'Aкціонерне товариство закритий недиверсифікований венчурний корпоративний інвестиційний фонд "Vancouver"',
    description: 'Ми — український інвестиційний фонд, заснований у 2018 році. За понад шість років роботи ми зосередили свою інвестиційну стратегію на наступних ключових напрямках:',
    energy: 'Енергетика',
-    energy_desc: 'Інвестиції у відновлювану енергетику, зокрема у проект Гірського вітропарку, який забезпечує чисту енергію та сприяє енергетичній незалежності України.',
+    energy_desc: 'Інвестиції у відновлювану енергетику є стратегічним напрямом діяльності Фонду. Зокрема, ми підтримуємо розвиток вітроелектростанції {link}Вітряний Парк Гірський{/link}, яка генерує чисту електроенергію, зменшує викиди вуглецю та сприяє зміцненню енергетичної незалежності України у складних геополітичних умовах.',
    woodworking: 'Деревообробна промисловість',
-    woodworking_desc: 'Партнерство з SLAV FOREST — сучасним деревообробним підприємством, яке впроваджує передові технології обробки деревини з орієнтацією на експортне виробництво.',
+    woodworking_desc: 'Партнерство з {link}СЛАВ ФОРЕСТ{/link} — сучасним деревообробним підприємством, яке впроваджує передові технології в обробці деревини з фокусом на експортно орієнтовану продукцію.',
    real_estate: 'Офісна нерухомість',
-    real_estate_desc: 'Ми інвестуємо у стабільні активи нерухомості, розташовані в центральних діловий районах Києва.',
+    real_estate_desc: 'Ми інвестуємо у комерційну нерухомість у центральних районах Києва з метою формування стабільного доходу та збереження вартості активів. Основний фокус — об’єкти з високою заповнюваністю, розвиненою інфраструктурою та перспективами довгострокової оренди.',
-    retail: 'Роздрібна торгівля',
+    retail: 'Рітейл',
-    retail_desc: 'Інвестиційна участь у розвитку мережі Silpo — одного з найуспішніших рітейлерів України, орієнтованого на інновації в обслуговуванні клієнтів.',
+    retail_desc: 'Фонд бере участь у розвитку мережі супермаркетів {link}Сільпо{/link}, які відомі інноваційним підходом до рітейлу та створенням унікального клієнтського досвіду. Інвестиції спрямовані на розширення мережі, цифрові сервіси та підвищення операційної ефективності.',
    wholesale: 'Оптова торгівля',
-    wholesale_desc: 'Підтримка торговельних компаній, які забезпечують логістику та дистрибуцію товарів як в межах України, так і на міжнародному рівні.',
+    wholesale_desc: 'Ми підтримуємо логістичні та дистрибуційні компанії, які забезпечують ефективне постачання товарів як на внутрішньому ринку, так і за кордоном. Інвестиції дозволяють масштабувати операції, оптимізувати процеси та підвищувати конкурентоспроможність бізнесу.',
    nav_value: 'Станом на кінець І кварталу 2025 року чиста вартість активів Фонду становить 16,8 млн євро.',
    mission_title: 'Місія / Бачення',
    mission: 'Місія',
-    mission_desc: 'Генерувати стабільне довгострокове зростання капіталу через стратегічні інвестиції у перспективні економічні сектори, що демонструють динаміку сталого розвитку.',
+    mission_desc: 'Формування стабільного довгострокового зростання капіталу через стратегічне інвестування в перспективні галузі економіки, що демонструють сталу динаміку розвитку.',
    vision: 'Бачення',
-    vision_desc: 'Ми прагнемо стати інвестиційним партнером вибору для українських та міжнародних інвесторів, які шукають прозорі, професійні та ефективні механізми розміщення капіталу.',
+    vision_desc: 'Ми прагнемо стати інвестиційним партнером першого вибору для українських та міжнародних інвесторів, які шукають прозорі, професійні та ефективні механізми розміщення капіталу.',
    team_title: 'Команда',
-    team_desc: 'Ключова особа, відповідальна за діяльність Фонду:',
+    team_desc: 'Ключові особи, відповідальні за діяльність Фонду:',
-    fund_manager: 'Управляючий фондом:',
+    fund_manager: 'Керівник Фонду:',
-    manager_name: 'Свинар Олександр Вікторович — досвідчений менеджер з фінансів та інвестицій, відповідальний за загальну стратегію та управління активами.',
+    manager_name: 'Свинар Олександр Вікторович — досвідчений управлінець у сфері фінансів та інвестицій, який відповідає за загальну стратегію та управління активами.',
    partners_title: 'Партнери фонду',
    auditing_firm: 'Аудиторська фірма:',
    auditing_name: 'ТОВ "АУДИТОРСЬКИЙ ЦЕНТР "ІНФОРМ-ПЛЮС"',
@@ -86,7 +88,7 @@ export const translations = {
    valuer_address: 'м. Київ, вул. Льва Толстого, 25',
    valuer_code: 'Код ЄДРПОУ: 34289017',
    contact_title: 'Контактна інформація',
-    manager_title: 'Менеджер: Свинар Олександр Вікторович',
+    manager_title: 'Свинар Олександр Вікторович',
    office_address: 'Адреса офісу:',
    address: '01033, Україна, м. Київ, вул. Жилянська, 48, 50А, офіс 13',
    phone: 'Телефон: +38 050 465 46 18'