From edd95617f0f9cfb106012e1c6696b616e72d120a Mon Sep 17 00:00:00 2001
From: Sami Kolari <sami_kolari@hotmail.com>
Date: Wed, 24 Apr 2024 17:13:14 +0300
Subject: [PATCH] updated into section, news and calendar (#321)

---
 public/index.html                     |   2 +-
 src/assets/css/colors.css             |  11 +
 src/assets/css/elements.css           |   9 +
 src/assets/css/reset.css              |   9 +
 src/assets/css/variables.css          |  13 +-
 src/components/Banner.vue             |  45 ++--
 src/components/Calendar.vue           | 291 ++++++++++++++++++++++++++
 src/components/Navbar.vue             | 144 ++++++-------
 src/components/News.vue               | 110 ++++++----
 src/components/PageSection.vue        |  45 ++--
 src/components/icons/CalendarIcon.vue |  44 ++++
 src/components/icons/ChevronIcon.vue  |   2 +-
 src/components/icons/FilterIcon.vue   |  43 ++++
 src/components/icons/GlobeIcon.vue    |   8 +-
 src/components/icons/MarkerIcon.vue   |  42 ++++
 src/components/icons/NewTabIcon.vue   |   3 +
 src/components/icons/index.js         |   8 +-
 src/components/index.js               |   2 +
 src/content/english/main.js           |  52 ++---
 src/js/contentfulClient.js            |  15 ++
 src/views/Home.vue                    |  76 ++++---
 21 files changed, 763 insertions(+), 211 deletions(-)
 create mode 100644 src/components/Calendar.vue
 create mode 100644 src/components/icons/CalendarIcon.vue
 create mode 100644 src/components/icons/FilterIcon.vue
 create mode 100644 src/components/icons/MarkerIcon.vue
diff --git a/public/index.html b/public/index.html
index c1f927ebf..2d2b132e4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,7 +11,7 @@
     <script defer data-domain="robotframework.org" src="https://plausible.io/js/plausible.outbound-links.js"></script>
     <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
     <script defer src="/scripts/gh-pages-spa.js"></script>
-    <script defer src="/scripts/stars-tag.js"></script>
+    <script src="/scripts/stars-tag.js"></script>
   </head>
   <body>
     <noscript>
diff --git a/src/assets/css/colors.css b/src/assets/css/colors.css
index 01a93db89..3e99de219 100644
--- a/src/assets/css/colors.css
+++ b/src/assets/css/colors.css
@@ -96,3 +96,14 @@
         color: var(--color-white);
     }
 }
+
+/* updated color classes for more straightforward darkmode support */
+.color-text {
+    color: var(--color-text);
+}
+.color-link {
+    color: var(--color-link);
+}
+.bg-secondary {
+    background-color: var(--color-background-secondary);
+}
diff --git a/src/assets/css/elements.css b/src/assets/css/elements.css
index c5a87834a..f249c81df 100644
--- a/src/assets/css/elements.css
+++ b/src/assets/css/elements.css
@@ -7,6 +7,10 @@
 .card:hover {
     box-shadow: 2px 4px 4px -1px rgba(0,0,0,0.16),
     6px 6px 20px -1px rgba(107, 84, 84, 0.1);
+    @media (prefers-color-scheme: dark) {
+        box-shadow: 3px 5px 8px -1px rgba(0,0,0,0.2),
+        6px 6px 20px -1px rgba(0, 0, 0, 0.1);
+    }
 }
 .card.sharp {
     border-radius: 0;
@@ -140,3 +144,8 @@ button.bling {
         background-position: -10% 50%;
     }
 }
+
+hr.theme {
+    border: solid 2px var(--color-theme);
+    border-radius: 4px;
+}
diff --git a/src/assets/css/reset.css b/src/assets/css/reset.css
index d7cc19521..5476d3ec9 100644
--- a/src/assets/css/reset.css
+++ b/src/assets/css/reset.css
@@ -48,4 +48,13 @@ ul {
 }
 form {
 	display: contents;
+}
+fieldset {
+	border: 2px double var(--color-text);
+	padding: 0.5rem 1rem;
+}
+legend {
+	line-height: 1;
+	padding-inline: 0.5rem;
+	margin-left: 0.75rem;
 }
\ No newline at end of file
diff --git a/src/assets/css/variables.css b/src/assets/css/variables.css
index 55efa6d38..fe1a224f5 100644
--- a/src/assets/css/variables.css
+++ b/src/assets/css/variables.css
@@ -3,6 +3,9 @@
     --color-theme-dark: #09504d; /* for theme color dark */
     --color-alert: #ff9f94;
     --color-background: #f0f0f0;
+    --color-background-secondary: #fff;
+
+    --color-text: #000000;
     --color-background-darkmode: #222222;
 
     --color-white: #f5f5f5;
@@ -10,7 +13,7 @@
     --color-grey: #c6c6c6;
     --color-grey-dark: #292f33;
     --color-black: #000000; /* body text */
-    --color-link: #00c0b5;
+    --color-link: #00857e;
     --color-link-visited: #578a88;
 
     --color-red: #d32f2f;
@@ -68,3 +71,11 @@
 
     --border-radius-rounded: 0.2rem;
 }
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-text: #f0f0f0;
+        --color-link: #00c0b5;
+        --color-background-secondary: #2b2b2b;
+    }
+}
diff --git a/src/components/Banner.vue b/src/components/Banner.vue
index 84773f809..c9d0fd0a2 100644
--- a/src/components/Banner.vue
+++ b/src/components/Banner.vue
@@ -1,24 +1,45 @@
 <template>
-  <div class="row bg-theme center p-medium">
-    <div>
-      <h1 class="title" style="font-size: 4rem;">
-        ROBOT<br>
-        FRAME<br>
-        WORK<div style="font-size: 2.5rem; transform: translateY(-.5rem); display: inline-block;">🇺🇦</div>
-      </h1>
-    </div>
+  <div class="banner">
+    <h1 class="color-black logotype bg-theme">
+      <div class="color-white">ROBOT</div>
+      <div>FRAME</div>
+      <div class="flex">
+        WORK
+        <robot-icon size="4.6rem" color="black" style="transform: translate(0.5rem, 1rem);" />
+      </div>
+    </h1>
   </div>
 </template>
 
 <script>
+import RobotIcon from './icons/RobotIcon.vue'
 export default {
-  name: 'Banner'
+  name: 'Banner',
+  components: {
+    RobotIcon
+  }
 }
 </script>
 
 <style scoped>
-  .title::first-line {
-    color: var(--color-white);
+  h1 {
+    width: fit-content;
+    margin: 0 auto;
+    max-width: 100%;
+  }
+  .banner {
+    width: 100%;
+    background-color: var(--color-theme);
+  }
+  .logotype {
+    font-size: 6rem;
+    padding: 2rem;
+    display: block;
+    @media screen and (max-width: 769px) {
+      display: flex;
+      flex-wrap: wrap;
+      font-size: 20vw;
+      padding: 14.25vw;
+    }
   }
-
 </style>
diff --git a/src/components/Calendar.vue b/src/components/Calendar.vue
new file mode 100644
index 000000000..94e44a521
--- /dev/null
+++ b/src/components/Calendar.vue
@@ -0,0 +1,291 @@
+<template>
+  <div
+    class="inner-calendar-container card bg-secondary"
+    :class="expanded ? 'expanded' : 'minified'"
+    ref="container">
+    <div class="flex between px-medium py-xsmall">
+      <h2 class="type-xlarge color-text mb-none">
+        Events
+      </h2>
+      <button class="flex middle" @click="filtersOpen = !filtersOpen">
+        <div :class="filtersOpen ? 'color-theme' : 'color-text'" class="filter">
+          Filter
+        </div>
+        <filter-icon :color="filtersOpen ? 'theme' : 'text'" class="ml-2xsmall block" size="1rem" />
+      </button>
+    </div>
+    <div v-if="filtersOpen" class="p-medium">
+      <fieldset class="row mb-xsmall">
+        <legend>Types</legend>
+        <div class="flex middle col-sm-6">
+          <input type="checkbox" id="conference" v-model="show.types.Conference" />
+          <label for="conference" class="ml-2xsmall">Conference</label>
+        </div>
+        <div class="flex middle col-sm-6">
+          <input type="checkbox" id="meetup" v-model="show.types['Meet-up']" />
+          <label for="meetup" class="ml-2xsmall">Meet-up</label>
+        </div>
+        <div class="flex middle col-sm-6">
+          <input type="checkbox" id="tutorial" v-model="show.types.Tutorial" />
+          <label for="tutorial" class="ml-2xsmall">Tutorial</label>
+        </div>
+        <div class="flex middle col-sm-6">
+          <input type="checkbox" id="workshop" v-model="show.types.Workshop" />
+          <label for="workshop" class="ml-2xsmall">Workshop</label>
+        </div>
+      </fieldset>
+      <div class="flex middle col-sm-12">
+        <input type="checkbox" id="past" v-model="show.past" />
+        <label for="past" class="ml-2xsmall">Show past events</label>
+      </div>
+      <div class="flex middle col-sm-12">
+        <input type="checkbox" id="official" v-model="show.officialOnly" />
+        <label for="official" class="ml-2xsmall">Show only official events</label>
+      </div>
+    </div>
+    <!-- <div class="px-medium pb-small border-bottom-bg">
+      <input placeholder="Search by name, date, location..." class="search" />
+    </div> -->
+    <h3 v-if="loading" class="type-medium px-small">
+      loading events...
+    </h3>
+    <template v-else>
+      <article
+        v-for="(event, i) in filteredEvents"
+        :key="event.id"
+        :ref="`article-${i}`"
+        class="px-medium py-small border-bottom-bg">
+        <div class="badge">
+          {{ event.eventType }}
+        </div>
+        <a :href="event.link" target="_blank" rel="noreferrer nofollow" class="title weight-bold mt-2xsmall">
+          <new-tab-icon color="theme" class="mr-2xsmall" style="transform: translateY(2px)" />
+          <span>
+            {{ event.eventName }}
+          </span>
+        </a>
+        <div class="flex middle">
+          <calendar-icon size="1rem" color="white" class="mr-2xsmall" style="transform: translateY(-2px)" />
+          {{ getDateString(new Date(event.date), new Date(event.dateEnd)) }}
+        </div>
+        <div v-if="event.location.trim() !== ''" class="flex">
+          <marker-icon class="mr-2xsmall" size="1rem" style="transform: translateY(3px)" />
+          {{ event.location }}
+        </div>
+        <div v-if="event.online" class="flex middle">
+          <globe-icon class="mr-2xsmall" size="0.85rem" style="transform: translateY(-1px)" />
+          Available Online
+        </div>
+        <div v-if="event.hostedByFoundation" class="flex middle">
+          <robot-icon size="1rem" class="mr-2xsmall" style="transform: translateY(-2px)" />
+          Hosted by Foundation
+        </div>
+        <details v-if="event.description && event.description.trim() !== ''">
+          <summary class="color-link cursor-pointer flex middle" @click="showInfo($event.target.parentElement)">
+            <chevron-icon color="theme" direction="right" class="chevron" size="1.25rem" />
+          </summary>
+          <div v-html="parseDescription(event.description || '')" class="description" />
+        </details>
+      </article>
+    </template>
+    <button v-if="!expanded" class="expand color-text" @click="expand()">
+      Expand
+    </button>
+  </div>
+</template>
+
+<script>
+import { getEvents, monthNames } from '../js/contentfulClient'
+import { getDate, getMonth, getYear, isPast, isSameDay } from 'date-fns'
+import { CalendarIcon, NewTabIcon, FilterIcon, RobotIcon, MarkerIcon, GlobeIcon, ChevronIcon } from './icons'
+import { marked } from 'marked'
+
+export default {
+  data: () => ({
+    expanded: false,
+    filtersOpen: false,
+    show: {
+      types: {
+        Conference: true,
+        Workshop: true,
+        'Meet-up': true,
+        Tutorial: true
+      },
+      past: false,
+      officialOnly: false
+    },
+    events: [],
+    imgUrlParams: '?w=500&h=500',
+    selectedDate: new Date()
+  }),
+  components: {
+    CalendarIcon,
+    FilterIcon,
+    RobotIcon,
+    NewTabIcon,
+    MarkerIcon,
+    GlobeIcon,
+    ChevronIcon
+  },
+  computed: {
+    loading() {
+      return this.events.length === 0
+    },
+    selectedMonthName() {
+      const index = getMonth(this.selectedDate)
+      return monthNames[index]
+    },
+    filteredEvents() {
+      const filtered = this.events
+        .filter(({ eventType, date }) => {
+          if (!this.show.types.Conference && eventType === 'Conference') return false
+          if (!this.show.types['Meet-up'] && eventType === 'Meet-up') return false
+          if (!this.show.types.Workshop && eventType === 'Workshop') return false
+          if (!this.show.types.Tutorial && eventType === 'Tutorial') return false
+          if (!this.show.past && isPast(new Date(date))) return false
+          return true
+        })
+      return filtered
+    }
+  },
+  async mounted() {
+    this.events = (await getEvents()).sort((a, b) => {
+      if (new Date(a.date) < new Date(b.date)) return -1
+      return 1
+    })
+  },
+  methods: {
+    parseDescription: (t) => marked.parse(t),
+    getDateString(date, dateEnd) {
+      const monthIndex = getMonth(date)
+      const day = getDate(date)
+      // 25 May 2024
+      if (isNaN(dateEnd) || isSameDay(date, dateEnd)) return `${day} ${monthNames[monthIndex]} ${getYear(date)}`
+      const monthIndexEnd = getMonth(dateEnd)
+      const dayEnd = getDate(dateEnd)
+      // 25-27 May 2024
+      if (monthIndex === monthIndexEnd) return `${day}-${dayEnd} ${monthNames[monthIndex]} ${getYear(date)}`
+      // 25 May - 02 Jun 2024
+      return `${day} ${monthNames[monthIndex]} - ${dayEnd} ${monthNames[monthIndexEnd]} ${getYear(date)}`
+    },
+    isOverflown(ref) {
+      this.$nextTick(() => {
+        const el = this.$refs[ref]
+        if (!el) return undefined
+        const { clientWidth, clientHeight, scrollWidth, scrollHeight } = el
+        return scrollHeight > clientHeight || scrollWidth > clientWidth
+      })
+    },
+    expand() {
+      if (!this.expanded) {
+        setTimeout(() => {
+          this.$refs.container.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+        }, 1)
+      }
+      this.expanded = true
+    },
+    showInfo(detailsElement) {
+      this.expand()
+      setTimeout(() => {
+        detailsElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+      }, 1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .filter {
+    transition: color 0.2s;
+  }
+  .filter:hover {
+    color: var(--color-theme);
+  }
+  .search {
+    width: 100%;
+    padding: 0.25rem;
+    background-color: var(--color-bg);
+    color: var(--color-text);
+  }
+  .inner-calendar-container {
+    position: relative;
+    overflow: hidden;
+    transition: opacity 0.3s background-color 0.2s;
+    height: min(40rem, 70vh);
+
+    &.expanded {
+      overflow: auto;
+      height: 80vh;
+    }
+  }
+
+  .title {
+    display: block;
+    text-wrap: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--type-large);
+    line-height: 1.5;
+  }
+
+  .description {
+    margin-top: 0.25rem;
+    font-size: 1rem;
+  }
+  .description:deep p {
+    margin-bottom: 0.5rem;
+  }
+  .description:deep p:last-of-type {
+    margin-bottom: 0;
+  }
+  .description:deep h2 {
+    font-size: var(--type-large);
+    margin-top: 2rem;
+    margin-bottom: 0.5rem;
+  }
+
+  img.main {
+    width: 100%;
+    border-radius: 0.25rem;
+  }
+  .badge {
+    width: fit-content;
+    height: fit-content;
+    padding: 0.25rem 0.5rem;
+    line-height: 1;
+    font-size: var(--type-small);
+    border-radius: 0.5rem;
+    border: 1px solid var(--color-theme);
+    background-color: var(--color-bg-lighter);
+  }
+  .expand {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    padding-block: 0.75rem;
+    background-color: color-mix(in srgb, var(--color-bg) 70%, transparent);
+    font-size: 1.25rem;
+    backdrop-filter: blur(2px);
+  }
+  summary {
+    display: block;
+  }
+  summary::after {
+    content: 'More info';
+    padding-left: 0.25rem;
+    font-size: 1rem;
+    line-height: 1;
+  }
+  .chevron {
+    transform: translateY(4px) rotate(180deg) !important;
+  }
+  details[open] {
+    summary::after {
+      content: 'Hide info'
+    }
+    .chevron {
+      transform: translateY(4px) rotate(270deg) !important;
+    }
+  }
+</style>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index fd5d2f653..c730b03c2 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,72 +1,69 @@
 <template>
   <div
     ref="nav"
-    class="flex navbar bg-black color-white p-xsmall">
-    <transition name="opacity">
-      <div v-if="navSticky && !iconInContainer">
-        <robot-icon
-          size="1.75rem"
-          class="absolute rf-icon-rotation cursor-pointer"
-          @click="logoClick" />
-      </div>
-    </transition>
-    <div class="container row middle pr-small">
-      <div class="col-sm-3 flex">
-        <transition name="opacity">
-          <robot-icon
-            v-if="navSticky && iconInContainer"
-            size="1.75rem"
-            class="rf-icon-rotation cursor-pointer"
-            @click="logoClick" />
-        </transition>
+    class="navbar bg-black color-white p-xsmall">
+    <!-- NAV LEFT SIDE -->
+    <div class="flex middle">
+      <button @click="logoClick" name="scroll to beginning" class="rf-icon flex">
+        <robot-icon size="1.75rem" />
+      </button>
+      <!-- internal page navigation -->
+      <button
+        v-for="(item, i) in $tm('navbar.items')"
+        :key="item.name"
+        :name="`go-to-${item.name}`"
+        class="color-white font-title type-small type-no-underline type-uppercase px-small"
+        :class="i !== 3 ? 'border-right-white border-light' : ''"
+        @click="itemClick(item.id)">
+        {{ item.name }}
+      </button>
+    </div>
+    <!-- NAV RIGHT SIDE -->
+    <div class="flex middle">
+      <div style="height: 1rem;">
+        <a class="github-button" href="https://github.com/robotframework/robotframework" data-color-scheme="dark_high_contrast" data-show-count="true" aria-label="Robot Framework GitHub Stars">Star</a>
       </div>
-      <div class="flex">
-        <!-- internal page navigation -->
+      <router-link
+        class="color-white font-title type-uppercase type-no-underline px-medium"
+        :to="{name: 'Foundation'}">
+        Foundation
+      </router-link>
+      <div class="relative" ref="dropdownDocs">
         <button
-          v-for="(item, i) in $tm('navbar.items')"
-          :key="item.name"
-          :name="`go-to-${item.name}`"
-          class="color-white font-title type-no-underline type-uppercase line-height-body border-right-white border-light"
-          :class="i === 0 ? 'pl-xsmall pr-small' : 'px-small'"
-          @click="itemClick(item.id)">
-          {{ item.name }}
+          class="flex middle font-title type-uppercase line-height-body dropdown-button"
+          :class="docsDropdownOpen ? 'color-theme' : 'color-white'"
+          @click="docsDropdownOpen = !docsDropdownOpen">
+          <div>
+            {{ $t('navbar.dropdownDocs.name') }}
+          </div>
+          <chevron-icon
+            :color="docsDropdownOpen ? 'theme' : 'white'"
+            :direction="docsDropdownOpen ? 'up' : 'down'"
+            size="1rem" />
         </button>
-        <div class="relative" ref="dropdownDocs">
-          <button
-            class="flex middle px-small font-title type-uppercase line-height-body dropdown-button"
-            :class="docsDropdownOpen ? 'color-theme' : 'color-white'"
-            @click="docsDropdownOpen = !docsDropdownOpen">
-            <div>
-              {{ $t('navbar.dropdownDocs.name') }}
-            </div>
-            <chevron-icon
-              :color="docsDropdownOpen ? 'theme' : 'white'"
-              :direction="docsDropdownOpen ? 'up' : 'down'"
-              size="1.5rem" />
-          </button>
-          <transition name="fade">
+        <transition name="fade">
+          <div
+            v-if="docsDropdownOpen"
+            class="dropdown-container bg-black color-white p-large card">
             <div
-              v-if="docsDropdownOpen"
-              class="dropdown-container bg-black color-white p-small card" style="left: 0.25rem;">
-              <div
-                v-for="({ name, url, description }, i) in $tm('navbar.dropdownDocs.items')"
-                :key="name">
-                <a :href="url"
-                  @click="linkClick(name)">
-                  {{ name }}
-                </a>
-                <p class="type-small mt-none" :class="i === $tm('navbar.dropdownDocs.items').length - 1 ? 'mb-none' : ''">
-                  {{ description }}
-                </p>
+              v-for="({ name, url, description, large }, i) in $tm('navbar.dropdownDocs.items')"
+              :key="name"
+              :class="large ? 'border-bottom-white border-thin pb-small mb-small' : 'mt-medium'">
+              <a :href="url"
+                class="type-no-underline"
+                :class="large ? 'type-xlarge' : ''"
+                @click="linkClick(name)">
+                {{ name }}
+              </a>
+              <div :class="i === $tm('navbar.dropdownDocs.items').length - 1 ? 'mb-none' : ''">
+                {{ description }}
               </div>
             </div>
-          </transition>
-        </div>
-        <div style="height: 1.7rem;">
-          <a class="github-button" href="https://github.com/robotframework/robotframework" data-color-scheme="dark_high_contrast" data-show-count="true" data-size="large" aria-label="Robot Framework GitHub Stars">Star</a>
-        </div>
+          </div>
+        </transition>
       </div>
     </div>
+  </div>
     <!-- lang - disabled for now
     <button
       class="border-left-white font-title type-uppercase pl-small relative line-height-body"
@@ -100,7 +97,6 @@
         </div>
       </transition>
     </button> -->
-  </div>
 </template>
 
 <script>
@@ -185,6 +181,14 @@ export default {
 </script>
 
 <style scoped>
+  .navbar {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    position: sticky;
+    top: -0.1px;
+    z-index: 2;
+  }
   button, a {
     transition: color 0.2s;
   }
@@ -203,34 +207,20 @@ export default {
   a:hover > svg {
     fill: var(--color-theme) !important;
   }
-  .navbar {
-    position: sticky;
-    top: -1px;
-    z-index: 2;
-  }
-  .tiny-logo-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  .tiny-logo-container > img {
-    margin-top: 0.1rem;
-    width: 3.5rem;
-    height: 3.5rem;
-  }
   .dropdown-container {
     position: absolute;
-    top: calc(100% + 1rem);
+    top: calc(100% + 1.5rem);
+    right: 0;
     width: max-content;
   }
   .dropdown-container a {
     display: block;
     line-height: 1;
   }
-  .rf-icon-rotation {
+  .rf-icon {
     transition: transform 0.2s;
   }
-  .rf-icon-rotation:hover {
+  .rf-icon:hover {
     transform: rotate(90deg);
   }
 </style>
diff --git a/src/components/News.vue b/src/components/News.vue
index 0172c7e47..0bd25eb33 100644
--- a/src/components/News.vue
+++ b/src/components/News.vue
@@ -1,34 +1,42 @@
 <template>
-  <transition appear name="opacity">
-    <div v-if="height" class="news-container card" :style="{height: `${height}px`}">
-      <h2 style="letter-spacing: 0.125rem; position: sticky; top: 0;" class="type-center type-large mb-none color-black bg-theme">
-        NEWS
+  <div
+    class="inner-news-container card bg-secondary"
+    :class="expanded ? 'expanded' : ''"
+    :style="{opacity: news.length === 0 ? 0.5 : 1}"
+    ref="container">
+    <div class="flex between px-medium py-xsmall">
+      <h2 class="type-xlarge color-text mb-none">
+        News
       </h2>
-      <div class="bg-grey-dark pt-small">
-        <div v-if="news.length === 0">
-          loading...
-        </div>
-        <template v-else>
-          <article
-            v-for="entry in news"
-            :key="entry.id"
-            class="pb-small px-small">
-            <template v-if="entry.link">
-              <a :href="entry.link" target="blank" class="mb-none line-height-1">
-                <h3 class="mb-none line-height-1 font-body">{{ entry.title }}</h3>
-              </a>
-            </template>
-            <h3 v-else class="mb-none line-height-1 font-body">{{ entry.title }}</h3>
-            <div class="type-small">{{ entry.date }}</div>
-            <template v-if="entry.image">
-              <img :src="`${entry.image.file.url}${imgUrlParams}`" class="main" />
-            </template>
-            <div v-if="entry.body" class="mb-none" style="line-height: 1.25;" v-html="parseBody(entry.body)" />
-          </article>
-        </template>
-      </div>
+      <a href="https://seu2.cleverreach.com/f/362604-365504/" class="newsletter">
+        Subscribe to newsletter
+      </a>
     </div>
-  </transition>
+    <h3 v-if="loading" class="type-medium px-small">
+      loading news...
+    </h3>
+    <template v-else>
+      <article
+        v-for="entry in news"
+        :key="entry.id"
+        class="flex border-bottom-bg p-medium">
+        <div class="col-sm-3 pr-xsmall">
+          <img v-if="entry.image" :src="`${entry.image.file.url}${imgUrlParams}`" class="main block" />
+        </div>
+        <div class="col-sm-9 pl-xsmall">
+          <a v-if="entry.link" :href="entry.link" target="blank" class="mb-none line-height-1">
+            <h3 class="mb-xsmall line-height-1 font-body">{{ entry.title }}</h3>
+          </a>
+          <h3 v-else class="mb-none line-height-1 font-body">{{ entry.title }}</h3>
+          <div v-if="entry.body" class="mb-none font-small" style="line-height: 1.25;" v-html="parseBody(entry.body)" />
+          <div class="type-small line-height-1">{{ entry.date }}</div>
+        </div>
+      </article>
+    </template>
+    <button v-if="!expanded" class="expand color-text" @click="expand()">
+      Expand
+    </button>
+  </div>
 </template>
 
 <script>
@@ -36,15 +44,16 @@ import { getNews } from '../js/contentfulClient'
 import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
 export default {
   data: () => ({
+    expanded: false,
     news: [],
-    imgUrlParams: '?w=500&h=500',
-    height: 0
+    imgUrlParams: '?w=300&h=300&fit=fill'
   }),
+  computed: {
+    loading() {
+      return this.news.length === 0
+    }
+  },
   async mounted() {
-    const introEl = document.getElementById('intro-text')
-    setTimeout(() => {
-      this.height = introEl.offsetHeight - 16
-    }, 500)
     this.news = (await getNews()).sort((a, b) => {
       if (new Date(a.date) > new Date(b.date)) return -1
       return 1
@@ -54,24 +63,45 @@ export default {
     parseBody(body) {
       return documentToHtmlString(body, {
         renderNode: {
-          paragraph: (node, next) => `<p class="mb-2xsmall ">${next(node.content)}</p>`,
+          paragraph: (node, next) => `<p class="mb-2xsmall">${next(node.content)}</p>`,
           blockquote: (node, next) => `<blockquote class="mb-2xsmall border-left-white border-thin pl-2xsmall">${next(node.content)}</blockquote>`
         }
       })
+    },
+    expand() {
+      this.expanded = true
+      setTimeout(() => {
+        this.$refs.container.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      }, 1)
     }
   }
 }
 </script>
 
 <style scoped>
+  .inner-news-container {
+    position: relative;
+    overflow: hidden;
+    transition: opacity 0.3s background-color 0.2s;
+    height: min(40rem, 70vh);
+
+    &.expanded {
+      overflow: auto;
+      height: 80vh;
+    }
+  }
   img.main {
     width: 100%;
     border-radius: 0.25rem;
   }
-  .news-container {
-    overflow: auto;
-    border-radius: 0.25rem;
-    background-color: var(--color-bg-alt);
-    color: var(--color-white);
+  .expand {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    padding-block: 0.75rem;
+    background-color: color-mix(in srgb, var(--color-bg) 70%, transparent);
+    font-size: 1.25rem;
+    backdrop-filter: blur(2px);
   }
 </style>
diff --git a/src/components/PageSection.vue b/src/components/PageSection.vue
index dcd52de22..f647534b8 100644
--- a/src/components/PageSection.vue
+++ b/src/components/PageSection.vue
@@ -1,26 +1,13 @@
 <template>
-  <div
-    class="border-top-theme mt-xlarge section-container"
-    tabindex="-1">
-    <div class="row p-small pb-none">
-      <div
-        class="col-sm-12 col-lg-3"
-        :class="$store.state.isMobile ? '' : 'pt-3xsmall'">
-        <h2 :id="titleId" :class="longTitle && 'type-large'">
-          {{ title }}
-        </h2>
-      </div>
-      <div
-        v-if="body !== ''"
-        class="col-sm-12 col-lg-9"
-        :class="$store.state.isMobile ? '' : 'pt-2xsmall'"
-        v-html="body" />
-        <slot v-else />
+  <div class="row section-container">
+    <div class="col-sm-12 col-lg-2 title">
+      <h2 :id="titleId">
+        {{ title }}
+      </h2>
     </div>
-    <div
-      class="row"
-      :class="$store.state.isMobile ? '' : 'pl-small pr-small'">
-      <slot v-if="body !== ''"/>
+    <div class="col-sm-12 col-lg-10 body">
+      <div v-html="body" />
+      <slot />
     </div>
   </div>
 </template>
@@ -58,10 +45,24 @@ export default {
     visibility: hidden;
     pointer-events: none;
   }
-  @media screen and (max-width: 700px) {
+  .body {
+    margin-bottom: 2rem;
+  }
+  @media screen and (max-width: 1024px) {
     h2::before {
       margin-top: -30px;
       height: 30px;
     }
+    .section-container {
+      padding: 1rem;
+    }
+  }
+  @media screen and (min-width: 1025px) {
+    .title {
+      padding-left: 0.5rem;
+    }
+    .body {
+      padding-right: 1rem;
+    }
   }
 </style>
diff --git a/src/components/icons/CalendarIcon.vue b/src/components/icons/CalendarIcon.vue
new file mode 100644
index 000000000..aa984a1a6
--- /dev/null
+++ b/src/components/icons/CalendarIcon.vue
@@ -0,0 +1,44 @@
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    :width="size"
+    :height="size"
+    :fill="fillColor">
+    <g>
+      <path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 16H5V10h14zM9 14H7v-2h2zm4 0h-2v-2h2zm4 0h-2v-2h2zm-8 4H7v-2h2zm4 0h-2v-2h2zm4 0h-2v-2h2z"/>
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'Calendar',
+  props: {
+    size: {
+      type: String,
+      default: '1rem'
+    },
+    color: {
+      type: String,
+      default: 'black'
+    }
+  },
+  computed: {
+    fillColor() {
+      if (this.color === 'white') return '#f5f5f5'
+      if (this.color === 'theme') return '#00c0b5'
+      return '#1d1d1d'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  svg {
+    transition: fill 0.2s, transform 0.3s;
+    flex-shrink: 0;
+  }
+  svg:hover {
+    fill: var(--color-theme);
+  }
+</style>
diff --git a/src/components/icons/ChevronIcon.vue b/src/components/icons/ChevronIcon.vue
index 480aad3cf..db494cbcf 100644
--- a/src/components/icons/ChevronIcon.vue
+++ b/src/components/icons/ChevronIcon.vue
@@ -1,6 +1,6 @@
 <template>
   <svg
-    viewBox="0 0 24 24"
+    viewBox="3 3 18 18"
     :width="size"
     :height="size"
     :fill="fillColor"
diff --git a/src/components/icons/FilterIcon.vue b/src/components/icons/FilterIcon.vue
new file mode 100644
index 000000000..e5bf070c9
--- /dev/null
+++ b/src/components/icons/FilterIcon.vue
@@ -0,0 +1,43 @@
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    :width="size"
+    :height="size"
+    :fill="fillColor">
+    <g>
+      <path d="M10 18h4v-2h-4zM3 6v2h18V6zm3 7h12v-2H6z"/>
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'FilterIcon',
+  props: {
+    size: {
+      type: String,
+      default: '1rem'
+    },
+    color: {
+      type: String,
+      default: 'bg'
+    }
+  },
+  computed: {
+    fillColor() {
+      if (this.color === 'text') return 'var(--color-text)'
+      if (this.color === 'theme') return 'var(--color-theme)'
+      return 'var(--color-bg)'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  svg {
+    transition: fill 0.2s, transform 0.3s;
+  }
+  svg:hover {
+    fill: var(--color-theme);
+  }
+</style>
diff --git a/src/components/icons/GlobeIcon.vue b/src/components/icons/GlobeIcon.vue
index e4d30967b..c13e9df4b 100644
--- a/src/components/icons/GlobeIcon.vue
+++ b/src/components/icons/GlobeIcon.vue
@@ -1,9 +1,9 @@
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    height="20px"
     viewBox="0 0 24 24"
-    width="20px"
+    :width="size"
+    :height="size"
     :class="{
       ['fill-white']: color === 'white',
       ['fill-theme']: color === 'theme'
@@ -23,6 +23,10 @@ export default {
     color: {
       type: String,
       default: 'white'
+    },
+    size: {
+      type: String,
+      default: '1rem'
     }
   }
 }
diff --git a/src/components/icons/MarkerIcon.vue b/src/components/icons/MarkerIcon.vue
new file mode 100644
index 000000000..9b6458705
--- /dev/null
+++ b/src/components/icons/MarkerIcon.vue
@@ -0,0 +1,42 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    :width="size"
+    :height="size"
+    :class="{
+      ['fill-white']: color === 'white',
+      ['fill-theme']: color === 'theme'
+    }">
+    <path
+      d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7m0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'MarkerIcon',
+  props: {
+    color: {
+      type: String,
+      default: 'white'
+    },
+    size: {
+      type: String,
+      default: '1rem'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  svg {
+    flex-shrink: 0;
+  }
+  .fill-white {
+    fill: var(--color-white);
+  }
+  .fill-theme {
+    fill: var(--color-theme);
+  }
+</style>
diff --git a/src/components/icons/NewTabIcon.vue b/src/components/icons/NewTabIcon.vue
index 795c7673b..de1bdde85 100644
--- a/src/components/icons/NewTabIcon.vue
+++ b/src/components/icons/NewTabIcon.vue
@@ -33,6 +33,9 @@ export default {
 </script>
 
 <style scoped>
+  svg {
+    flex-shrink: 0;
+  }
   .fill-white {
     fill: var(--color-white);
   }
diff --git a/src/components/icons/index.js b/src/components/icons/index.js
index 67be79d6a..bddfa3653 100644
--- a/src/components/icons/index.js
+++ b/src/components/icons/index.js
@@ -5,6 +5,9 @@ import RobotIcon from './RobotIcon.vue'
 import DocumentIcon from './DocumentIcon.vue'
 import TwitterIcon from './TwitterIcon.vue'
 import RetweetIcon from './RetweetIcon.vue'
+import CalendarIcon from './CalendarIcon.vue'
+import FilterIcon from './FilterIcon.vue'
+import MarkerIcon from './MarkerIcon.vue'
 
 export {
   GlobeIcon,
@@ -13,5 +16,8 @@ export {
   RobotIcon,
   DocumentIcon,
   TwitterIcon,
-  RetweetIcon
+  RetweetIcon,
+  CalendarIcon,
+  FilterIcon,
+  MarkerIcon
 }
diff --git a/src/components/index.js b/src/components/index.js
index 7ff6c71f9..38a32b370 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,4 +1,5 @@
 import News from './News.vue'
+import Calendar from './Calendar.vue'
 import Banner from './Banner.vue'
 import PageFooter from './PageFooter.vue'
 import Navbar from './Navbar.vue'
@@ -24,6 +25,7 @@ import DocumentIcon from './icons/DocumentIcon.vue'
 
 export {
   News,
+  Calendar,
   Banner,
   PageFooter,
   Navbar,
diff --git a/src/content/english/main.js b/src/content/english/main.js
index 9164bb55b..831b4dfb8 100644
--- a/src/content/english/main.js
+++ b/src/content/english/main.js
@@ -11,7 +11,7 @@ export default () => ({
   navbar: {
     items: [
       {
-        name: 'Getting started',
+        name: 'Get started',
         id: 'getting-started'
       },
       {
@@ -31,49 +31,49 @@ export default () => ({
       name: 'Docs',
       items: [
         {
-          name: 'Guides (new)',
+          name: 'Guides',
           url: 'https://docs.robotframework.org/docs',
-          description: 'How to start'
+          description: 'Start here'
         },
         {
           name: 'User Guide',
           url: 'https://robotframework.org/robotframework/latest/RobotFrameworkUserGuide.html',
-          description: 'All features explained'
+          description: 'Original handbook'
         },
         {
-          name: 'BuiltIn Library',
+          name: 'Keywords',
           url: 'https://robotframework.org/robotframework/latest/libraries/BuiltIn.html',
-          description: 'Always available keywords'
+          description: 'Built-in keywords'
         },
         {
-          name: 'Standard Libraries',
+          name: 'Libraries',
           url: 'https://robotframework.org/robotframework/#standard-libraries',
-          description: 'Keyword documentation'
+          description: 'Standard libraries'
         },
         {
           name: 'Public API',
           url: 'https://robot-framework.readthedocs.io/en/stable/',
-          description: 'Build RF extensions'
+          description: 'Extending the framework'
         }
       ]
     }
   },
   introduction: {
     title: 'Introduction',
-    body:
-      `<p>Robot Framework is a generic open source automation framework.
-      It can be used for <a href="/test-automation/">test automation</a> and robotic process automation (RPA).</p>
-
-      <p>Robot Framework is supported by <a href="/foundation/">Robot Framework Foundation</a>.
-      Many industry-leading companies use the tool in their software development.</p>
-
-      <p>Robot Framework is open and extensible. Robot Framework can be integrated with virtually any
-      other tool to create powerful and flexible automation solutions.
-      Robot Framework is free to use without licensing costs.</p>
-
-      <p>Robot Framework has an easy syntax, utilizing human-readable keywords. Its capabilities can be extended
-      by libraries implemented with Python, Java or many other programming languages.
-      Robot Framework has a rich ecosystem around it, consisting of libraries and tools that are developed as separate projects.</p>`,
+    body: `
+      <p>
+        Robot Framework is an open source automation framework for test automation and <a href="https://docs.robotframework.org/docs/getting_started/rpa">robotic process automation (RPA)</a>.
+        It is supported by the <a href="/foundation/">Robot Framework Foundation</a> and <a href="/users">widely used</a> in the industry.
+        </p>
+        <p>
+          Its <a href="https://docs.robotframework.org/docs/style_guide">human-friendly and versalite syntax</a> uses keywords and supports <a href="https://docs.robotframework.org/docs/extending_robot_framework/custom-libraries/python_library">extending through libraries</a> in
+          Python, Java, and other languages.
+        </p>
+        <p class="mb-none">
+        It integrates with other tools for comprehensive automation without licensing fees,
+        bolstered by a rich community with hundreds of <a href="#resources">3rd party libraries</a>.
+      </p>
+    `,
     usedByTitle: 'Robot Framework is used by...',
     companies: [
       {
@@ -125,11 +125,11 @@ export default () => ({
     ]
   },
   gettingStarted: {
-    title: 'Getting Started',
+    title: 'Get Started',
     body:
       `<cite>Code is worth a thousand words.</cite>
-      <p>Below you'll find a live Robot Framework editor with embedded <a href="https://pyodide.org/en/stable/" target="_blank">WASM Python</a> environment to run it online.
-      Feel free to experiment with it! <b>NOTE: This is the editor's first release.</b> If you find bugs,
+      <p>Below you'll find a live Robot Framework editor.
+      Feel free to experiment with it! If you find bugs,
       please report them in <a href="https://github.com/robotframework/robotframework.github.com/issues" target="_blank">Github issues.</a></p>
       <p>To start using Robot Framework in a project of your own, please check tabs "Install" and "Learn". Also be sure to visit the new <a href="https://docs.robotframework.org/">Robot Framework Docs</a>!</p>`,
     tabs: [
diff --git a/src/js/contentfulClient.js b/src/js/contentfulClient.js
index 813958a42..e4ffd09f7 100644
--- a/src/js/contentfulClient.js
+++ b/src/js/contentfulClient.js
@@ -5,6 +5,21 @@ const client = contentful.createClient({
   accessToken: 'kDjw4Ergl45z3NFMv6Bhd5Z5w_HTIdcioiY4Hq9mC0I' // read-only for free plan, dont worry :)
 })
 
+export const monthNames = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec'
+]
+
 export const getNews = async() => {
   const items = await client
     .getEntries({
diff --git a/src/views/Home.vue b/src/views/Home.vue
index adac76627..d1f038246 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,29 +1,26 @@
 <template>
   <nav-mobile />
-  <banner />
   <navbar class="nav-desktop" />
-  <div class="container mb-xlarge">
-    <!-- introduction -->
-    <page-section
-      title-id="introduction"
-      :title="$t('introduction.title')">
-      <div class="col-sm-12 col-lg-9 row">
-        <div class="col-sm-12 col-lg-8 pr-small">
-          <div v-html="$t('introduction.body')" id="intro-text" class="mb-small" />
-          <!-- <company-carousel /> -->
-        </div>
-        <div class="col-lg-4 pt-2xsmall">
-          <news />
-        </div>
+  <banner />
+  <div class="container">
+    <div class="row intro">
+      <div class="col-sm-12 col-lg-8 col-lg-offset-2 type-large p-medium card bg-secondary">
+        <div v-html="$t('introduction.body')" />
       </div>
-    </page-section>
+      <div class="col-sm-12 col-lg-3 col-lg-offset-2 calendar-container">
+        <calendar />
+      </div>
+      <div class="col-sm-12 col-lg-5 pl-medium news-container">
+        <news />
+      </div>
+    </div>
+    <hr class="theme">
     <!-- getting started -->
     <page-section
       title-id="getting-started"
       :title="$t('gettingStarted.title')"
       :body="$t('gettingStarted.body')">
       <tab-box
-        class="col-sm-12 col-lg-9 col-lg-offset-3"
         :tabs="$tm('gettingStarted.tabs')">
         <template v-slot:tab-1>
           <monaco-editor />
@@ -39,35 +36,36 @@
         </template>
       </tab-box>
     </page-section>
+    <hr class="theme">
     <!-- resources -->
     <page-section
       title-id="resources"
       :title="$t('resources.title')"
       :body="$t('resources.body')">
-      <resource-box class="col-sm-12 col-lg-9 col-lg-offset-3" />
+      <resource-box />
     </page-section>
+    <hr class="theme">
     <!-- community -->
     <page-section
       title-id="community"
       :title="$t('community.title')"
       :body="$t('community.body')">
-      <div class="col-sm-12 col-lg-9 col-lg-offset-3 row">
-        <community-items />
-        <button class="theme mt-medium" :class="$store.state.isMobile ? 'ml-xsmall' : ''">
-          <router-link :to="{ name: 'CoC' }" class="type-no-underline">
-            Code of Ethics
-          </router-link>
-        </button>
-        <video-component videoId='2GDrtvz_1Ds' class="col-sm-12 mt-small" />
-      </div>
+      <community-items />
+      <button class="theme mt-medium" :class="$store.state.isMobile ? 'ml-xsmall' : ''">
+        <router-link :to="{ name: 'CoC' }" class="type-no-underline">
+          Code of Ethics
+        </router-link>
+      </button>
+      <video-component videoId='2GDrtvz_1Ds' class="col-sm-12 mt-small" />
     </page-section>
+    <hr class="theme">
     <!-- development -->
     <page-section
       title-id="development"
       :title="$t('development.title')"
       :body="$t('development.body')">
-      <sponsors class="col-sm-12 col-lg-9 col-lg-offset-3" />
-      <milestones class="col-sm-12 col-lg-9 col-lg-offset-3 mt-medium" />
+      <sponsors />
+      <milestones />
     </page-section>
   </div>
   <page-footer />
@@ -82,6 +80,7 @@ import {
   NavMobile,
   PageSection,
   News,
+  Calendar,
   CommunityItems,
   ResourceBox,
   TabBox,
@@ -100,6 +99,7 @@ export default {
     NavMobile,
     PageSection,
     News,
+    Calendar,
     CommunityItems,
     ResourceBox,
     TabBox,
@@ -115,5 +115,25 @@ export default {
   .nav-desktop {
     display: none;
   }
+  .calendar-container {
+    margin-top: 2rem;
+  }
+  .news-container {
+    padding-left: 0;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+}
+@media screen and (min-width: 1025px) {
+  .intro {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+  .calendar-container {
+    margin-top: 1.5rem;
+  }
+  .news-container {
+    margin-top: 1.5rem;
+  }
 }
 </style>
