new home page

src/components/AppCardLink.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+defineProps({
+  label: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  text: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  route: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  isAlternativeColor: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<template>
+  <RouterLink :to="route">
+    <div
+      class="app-card-link"
+      :class="{ 'app-card-link--alternative-color': isAlternativeColor }"
+    >
+      <div class="app-card-link__label">
+        {{ label }}
+      </div>
+      <div class="app-card-link__body">
+        {{ text }}
+      </div>
+    </div>
+  </RouterLink>
+</template>
+
+<style scoped>
+.app-card-link {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  position: relative;
+  padding: 30px;
+  width: 366px;
+  height: 250px;
+  background: #000;
+  box-shadow: -1px 1px 16px 3px rgba(255, 255, 255, 0.25);
+  cursor: pointer;
+  text-decoration: none;
+  color: var(--color-text);
+}
+
+.app-card-link__label {
+  background: var(--color-heading);
+  max-width: fit-content;
+  padding: 0 10px;
+  font-weight: 600;
+}
+</style>

src/constants/home-page.ts

@@ -0,0 +1,56 @@
+export const customerCards = {
+  industry: {
+    title: 'Industry 4.0',
+    description:
+      'Real-time decision making, empowers manufacturers to be more adaptive, ' +
+      'proactive, and efficient in their operations, directly contributing to ' +
+      'increased competitiveness and success in a fast-paced market. ' +
+      'Real time decision making through local edge-cloud computing enables ' +
+      'enhanced efficiency and productivity, ' +
+      'quality control, safety and supply chain optimization.',
+    route: '/industry',
+  },
+  energyGrid: {
+    title: 'Energy Grid 3.0',
+    description:
+      'The future democratic, efficient, resilient and sustainable energy ' +
+      'system will be based on the combination of a wide range of ' +
+      'sustainable microgrids. Solar panels, wind turbines, ' +
+      'energy storage systems and hydrogen will allow local communities ' +
+      'and even individual households to produce and store their own energy, ' +
+      'contributing excess power back to the grid.',
+    route: '/energy-grid',
+  },
+  city: {
+    title: 'City 2.0',
+    description:
+      'Managing the limited resources such as public spaces, water, air ' +
+      'and energy, preventing pollution and securing critical, ' +
+      'infrastructure will be key in achieving high quality of ' +
+      'life in our future cities. Privacy preserving sensing and ' +
+      'data processing will support inclusivity and community ' +
+      'engagement for creating and maintaining sustainable cities.',
+    route: '/city',
+  },
+  agriculture: {
+    title: 'Agriculture 3.0',
+    description:
+      'Innovative farming with higher yield, less waste, lower costs ' +
+      'and less environmental stress and damage is needed to ' +
+      'feed a growing global population in a sustainable way. ' +
+      'This becomes possible through data driven advisory ' +
+      'in farming and integrated value chains connecting ' +
+      'farmers directly to consumers,',
+    route: '/agriculture',
+  },
+  health: {
+    title: 'Health 3.0',
+    description:
+      'Predictive healthcare allows caregivers to forecast health ' +
+      'issues before they develop, plan preventative measures and ' +
+      'reactive treatments. Processing locally large volumes of ' +
+      'privacy sensitive data and AI are key for providing personalised care, ' +
+      'fine grained and real time monitoring and treatment of chronic diseases.',
+    route: '/health',
+  },
+};

src/layout/AppFooter.vue

@@ -2,9 +2,12 @@
 
 <template>
   <footer class="app-footer">
-    <section class="app-footer__side">Our Customers</section>
-    <section class="app-footer__center">Contact Us</section>
-    <section class="app-footer__side">Technology Pillars</section>
+    <section class="app-footer__side">
+      <RouterLink to="/">Our Customers</RouterLink>
+    </section>
+    <section class="app-footer__side">
+      <RouterLink to="/service">Our service</RouterLink>
+    </section>
   </footer>
 </template>
 
@@ -23,19 +26,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-}
-
-.app-footer__center {
-  background: url('assets/footer-bg-mobile.svg') top no-repeat;
-  width: 873px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-
-  @media (min-width: 1280px) {
-    background: url('assets/footer-bg.svg') top no-repeat;
+  a {
+    color: var(--color-text);
   }
 }
 </style>

src/layout/AppHeader.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { RouterLink, useRouter } from 'vue-router';
 import { computed } from 'vue';
+
 const router = useRouter();
 
 const currentPathObject = computed(
@@ -11,14 +12,15 @@ const currentPathObject = computed(
 <template>
   <header class="app-header">
     <nav>
-      <img
-        alt="Hiro logo"
-        class="logo"
-        src="@/assets/hiro-logo.svg"
-        height="100"
-        width="181"
-      />
-      <RouterLink to="/">Home</RouterLink>
+      <RouterLink to="/">
+        <img
+          alt="Hiro logo"
+          class="logo"
+          src="@/assets/hiro-logo.svg"
+          height="100"
+          width="181"
+        />
+      </RouterLink>
       <RouterLink to="/services">About</RouterLink>
       <RouterLink to="/playground">Playground</RouterLink>
     </nav>

src/router/index.ts

@@ -6,7 +6,7 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      name: 'home',
+      name: 'our customers',
       component: HomeView,
     },
     {

src/views/HomeView.vue

@@ -1,26 +1,65 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import AppCard from '@/components/AppCard.vue';
+import { customerCards } from '@/constants/home-page';
+import AppCardLink from '@/components/AppCardLink.vue';
 
-import AppGraph from '@/components/Graph';
-import type { NodeNameValue } from '@/components/Graph';
-
-const activeCube = ref<NodeNameValue | null>(null);
-
-const handleChange = (value: NodeNameValue) => {
-  activeCube.value = value;
-};
+const { industry, energyGrid, city, agriculture, health } = customerCards;
 </script>
 
 <template>
-  <main>
-    <h1>Home view</h1>
-
-    <p>Active cube: {{ activeCube }}</p>
-    <div style="width: 50%; margin: 0 auto">
-      <AppGraph
-        :activeCube="activeCube"
-        @change="handleChange"
+  <main class="customers-view">
+    <section class="customers-view__upper-section">
+      <AppCardLink
+        :label="industry.title"
+        :text="industry.description"
+        :route="industry.route"
+      />
+      <AppCardLink
+        :label="energyGrid.title"
+        :text="energyGrid.description"
+        :route="energyGrid.route"
+      />
+      <AppCardLink
+        :label="city.title"
+        :text="city.description"
+        :route="city.route"
+      />
+    </section>
+    <section class="customers-view__lower-section">
+      <AppCardLink
+        :label="agriculture.title"
+        :text="agriculture.description"
+        :route="agriculture.route"
       />
-    </div>
+      <AppCard
+        :label="agriculture.title"
+        :text="agriculture.description"
+      />
+      <AppCardLink
+        :label="health.title"
+        :text="health.description"
+        :route="health.route"
+      />
+    </section>
   </main>
 </template>
+
+<style scoped>
+.customers-view {
+  display: flex;
+  gap: 3rem;
+  padding: 1rem;
+  flex-direction: column;
+  align-items: center;
+}
+
+.customers-view__upper-section {
+  display: flex;
+  gap: 1rem;
+}
+
+.customers-view__lower-section {
+  display: flex;
+  gap: 1rem;
+}
+</style>