[REFACTOR] Landing Page

FRONTEND-nuxt/app/app.vue

@@ -1,5 +1,28 @@
 <template>
   <BApp>
     <NuxtRouteAnnouncer />
+    <div class="enter-webpage">
+      <LandingHero @explore="onExplore" @about="showAbout = true" />
+      <LandingFooter />
+    </div>
+    <LandingAboutModal v-model="showAbout" />
   </BApp>
 </template>
+
+<script setup>
+const showAbout = ref(false)
+
+function onExplore () {
+    // Placeholder until the graph view exists (plan step 5+)
+}
+</script>
+
+<style scoped>
+.enter-webpage {
+    width: 100%;
+    min-height: 100vh;
+    background: var(--insolito-bg);
+    display: flex;
+    flex-direction: column;
+}
+</style>

FRONTEND-nuxt/app/assets/css/main.scss

@@ -0,0 +1,52 @@
+:root {
+    --insolito-primary: #0b579f;
+    --insolito-primary-dark: #052a50;
+    --insolito-secondary: #f47c21;
+    --insolito-secondary-hover: #d96b18;
+
+    --insolito-bg: #ffffff;
+    --insolito-bg-footer: #eef2f7;
+    --insolito-border: #d7e1ec;
+
+    --insolito-text: #1c2b3a;
+    --insolito-text-muted: #48566b;
+
+    --insolito-node-primary: #396fba;
+    --insolito-node-secondary: #f6934a;
+    --insolito-edge: #c9d9ea;
+}
+
+html,
+body {
+    margin: 0;
+    font-family: 'Roboto', sans-serif;
+}
+
+.btn-primary {
+    background-color: var(--insolito-primary);
+    border-color: var(--insolito-primary);
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+    background-color: var(--insolito-primary-dark);
+    border-color: var(--insolito-primary-dark);
+}
+
+.btn-outline-primary {
+    color: var(--insolito-primary);
+    border-color: var(--insolito-primary);
+}
+
+.btn-outline-primary:hover {
+    background-color: var(--insolito-primary);
+    border-color: var(--insolito-primary);
+}
+
+a {
+    color: var(--insolito-primary);
+}
+
+a:hover {
+    color: var(--insolito-primary-dark);
+}

FRONTEND-nuxt/app/components/landing/AboutModal.vue

@@ -0,0 +1,92 @@
+<template>
+  <BModal
+    :model-value="modelValue"
+    title="About InSoLiTo"
+    size="lg"
+    ok-only
+    ok-title="Close"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <section class="about-section">
+      <h6>What is InSoLiTo?</h6>
+      <p>
+        <strong>InSoLiTo</strong> (Interactions of Software for Life Sciences Tools) is a graph-based
+        web application that visualises the co-usage network of bioinformatics research software from
+        the <a href="https://openebench.bsc.es" target="_blank" rel="noopener noreferrer">OpenEBench</a>
+        collection.
+      </p>
+    </section>
+
+    <hr>
+    <section class="about-section">
+      <h6>How the graph is built</h6>
+      <p>
+        An edge between two tools does not mean one cites the other, or that they are used together in
+        a pipeline — it means both were cited together in the reference list of the same publication
+        (co-citation), derived from PubMed data cross-referenced with OpenEBench.
+      </p>
+    </section>
+
+    <hr>
+    <section class="about-section">
+      <h6>Credits</h6>
+      <p>
+        Originally developed by Sergi Aguiló Castillo at the
+        <a href="https://www.bsc.es" target="_blank" rel="noopener noreferrer">Barcelona Supercomputing Center</a>,
+        within the <a href="https://elixir-europe.org" target="_blank" rel="noopener noreferrer">ELIXIR</a> /
+        <a href="https://inb-elixir.es/" target="_blank" rel="noopener noreferrer">INB</a> ecosystem. See the full
+        <a href="https://upcommons.upc.edu/entities/publication/77d4990b-48f2-4463-9fe6-09cddef064c9" target="_blank" rel="noopener noreferrer">thesis</a>
+        and related
+        <a href="https://f1000research.com/search?q=insolito" target="_blank" rel="noopener noreferrer">posters</a>
+        for further detail.
+      </p>
+    </section>
+
+    <hr>
+    <section class="about-section">
+      <h6>Cite this work</h6>
+      <p class="mb-0">
+        Aguiló-Castillo, S. (2022). <em>InSoLiTo dataset</em> (Version v8) [Data set]. Zenodo.<br>
+        <a href="https://doi.org/10.5281/zenodo.7524268" target="_blank" rel="noopener noreferrer">doi:10.5281/zenodo.7524268</a>
+      </p>
+    </section>
+
+    <hr>
+    <section class="about-section">
+      <h6>Contribute</h6>
+      <p class="mb-0">
+        InSoLiTo is open source — bug reports, feature ideas and pull requests are welcome on
+        <a href="https://github.com/inab/InSoLiTo" target="_blank" rel="noopener noreferrer">
+          <img src="~/assets/images/github.svg" alt="GitHub" class="github-icon">GitHub
+        </a>.
+      </p>
+    </section>
+  </BModal>
+</template>
+
+<script setup>
+defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    }
+})
+defineEmits(['update:modelValue'])
+</script>
+
+<style scoped>
+.about-section h6 {
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    color: var(--insolito-text-muted);
+    margin-bottom: 0.5rem;
+}
+
+.github-icon {
+    height: 18px;
+    margin-right: 4px;
+    vertical-align: middle;
+}
+</style>

FRONTEND-nuxt/app/components/landing/Footer.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="landing-footer">
+    <a href="https://www.bsc.es" target="_blank" rel="noopener noreferrer">
+      <img src="~/assets/images/BSC-blue.svg" alt="BSC" class="footer-logo">
+    </a>
+    <a href="https://inb-elixir.es/" target="_blank" rel="noopener noreferrer">
+      <img src="~/assets/images/logoINB-ELIXIR_ES.png" alt="INB / ELIXIR" class="footer-logo">
+    </a>
+    <a href="https://openebench.bsc.es/" target="_blank" rel="noopener noreferrer">
+      <img src="~/assets/images/openebench.gif" alt="OpenEBench" class="footer-logo">
+    </a>
+    <a href="https://github.com/inab/InSoLiTo" target="_blank" rel="noopener noreferrer">
+      <img src="~/assets/images/github.svg" alt="GitHub" class="footer-logo footer-logo-github">
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.landing-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 40px;
+    padding: 20px 40px;
+    background: var(--insolito-bg-footer);
+    border-top: 1px solid var(--insolito-border);
+    flex-shrink: 0;
+}
+
+.footer-logo {
+    height: 44px;
+    object-fit: contain;
+    opacity: 0.85;
+    transition: opacity 0.2s;
+}
+
+.footer-logo:hover {
+    opacity: 1;
+}
+
+.footer-logo-github {
+    height: 36px;
+    filter: brightness(0);
+}
+
+@media (max-width: 480px) {
+    .landing-footer {
+        gap: 26px;
+        padding: 16px 20px;
+    }
+
+    .footer-logo {
+        height: 34px;
+    }
+
+    .footer-logo-github {
+        height: 28px;
+    }
+}
+</style>