Init

app/components/CommonHeader.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+// experimenta header with branding
+</script>
+
+<template>
+  <header class="header-wrapper">
+    <div class="header-content">
+      <NuxtLink to="/" class="logo">
+        <img src="/img/experimenta-logo-white.svg" alt="experimenta Logo" class="logo-svg" />
+      </NuxtLink>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.header-wrapper {
+  background: rgba(46, 16, 101, 0.95);
+  backdrop-filter: blur(10px);
+  position: relative;
+  z-index: 100;
+  padding: 30px 0;
+}
+
+.header-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: white;
+  transition: all 0.3s ease;
+}
+
+.logo:hover {
+  transform: scale(1.05);
+}
+
+.logo-svg {
+  width: 300px;
+  height: auto;
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
+}
+
+@media (max-width: 768px) {
+  .logo-svg {
+    width: 250px;
+    max-width: 90%;
+  }
+}
+
+@media (max-width: 480px) {
+  .logo-svg {
+    width: 200px;
+  }
+}
+</style>