petra-tool / frontend / src / views / pub / Home.vue
Home.vue
Raw
<template>
  <v-container>
    <app-bar-public></app-bar-public>
    <v-row no-gutters class="pt-10" id="Tool">
      <v-col cols="12">
        <v-card flat>
          <v-row>
            <v-col cols="12" md="6">
              <v-card-title class="py-3">
                Design support for innovative mechatronic product development
              </v-card-title>
              <v-card-text>
                Meet PETRA, the tool to manage and simplify your prototyping journey from idea to product concept for novice teams!
              </v-card-text>
              <v-card-actions class="">
                <v-btn color="primary" depressed block :to="{name: 'site-dashboard'}">Click here to get to the Tool</v-btn>
              </v-card-actions>
            </v-col>
            <v-col cols="12" md="6" align-self="center">
              <v-card-text>
                <v-img :src="require('../../assets/double-diamond.png')"
                       contain class="shrink"/>
              </v-card-text>
            </v-col>
          </v-row>
        </v-card>
      </v-col>
    </v-row>

    <v-row no-gutters class="pt-10">
      <v-col cols="12" class="text-h3 font-weight-bold text-center" id="Features">
        Features
      </v-col>
      <v-col cols="12" md="4">
        <v-card flat color="rgba(255,255,255,0)" class="text-center pa-5">
          <v-card-text>
            <v-avatar color="white" size="140">
              <v-icon size="60" color="accent">mdi-notebook</v-icon>
            </v-avatar>
          </v-card-text>
          <v-card-title class="justify-center text-no-wrap">Team-Centric Planning</v-card-title>
          <v-card-text class="text-body-1 text--primary">Collaborate seamlessly with your team, making planning and decision-making straightforward
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="4">
        <v-card flat color="rgba(255,255,255,0)" class="text-center pa-5">
          <v-card-text>
            <v-avatar color="white" size="140">
              <v-icon size="60" color="accent">mdi-head-cog</v-icon>
            </v-avatar>
          </v-card-text>
          <v-card-title class="justify-center text-no-wrap">Agility through Prototyping</v-card-title>
          <v-card-text class="text-body-1 text--primary">Rapidly iterate and test ideas, ensuring flexibility and adaptability in your product development process
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="4">
        <v-card flat color="rgba(255,255,255,0)" class="text-center pa-5">
          <v-card-text>
            <v-avatar color="white" size="140">
              <v-icon size="60" color="accent">mdi-cog</v-icon>
            </v-avatar>
          </v-card-text>
          <v-card-title class="justify-center text-no-wrap">Intuitive Interfaces</v-card-title>
          <v-card-text class="text-body-1 text--primary">Enjoy user-friendly interfaces that make navigating and using this tool easy and intuitive
          </v-card-text>
        </v-card>
      </v-col>


      <v-col cols="12" md="4">
        <v-card flat color="rgba(255,255,255,0)" class="text-center pa-5">
          <v-card-text>
            <v-avatar color="white" size="140">
              <v-icon size="60" color="accent">mdi-poll</v-icon>
            </v-avatar>
          </v-card-text>
          <v-card-title class="justify-center text-no-wrap">Data-Driven Metrics</v-card-title>
          <v-card-text class="text-body-1 text--primary">Gain valuable insights through data-driven metrics, helping you make informed decisions at every stage
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="4">
        <v-card flat color="rgba(255,255,255,0)" class="text-center pa-5">
          <v-card-text>
            <v-avatar color="white" size="140">
              <v-icon size="60" color="accent">mdi-handshake</v-icon>
            </v-avatar>
          </v-card-text>
          <v-card-title class="justify-center text-no-wrap">Holistic Progression</v-card-title>
          <v-card-text class="text-body-1 text--primary">Follow a structured path from idea to product concept, covering all crucial aspects of your mechatronic product development journey
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="4">
        <v-card flat color="rgba(255,255,255,0)" class="text-center pa-5">
          <v-card-text>
            <v-avatar color="white" size="140">
              <v-icon size="60" color="accent">mdi-check</v-icon>
            </v-avatar>
          </v-card-text>
          <v-card-title class="justify-center text-no-wrap">Unambiguous Directives</v-card-title>
          <v-card-text class="text-body-1 text--primary">Receive clear and precise guidance throughout your design process, eliminating confusion and streamlining your efforts
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <v-row no-gutters class="pt-10">
      <v-col cols="12" class="text-h3 font-weight-bold text-center" id="Contributors">
        Contributors
      </v-col>
      <v-col cols="12" md="4">
        <v-card flat color="rgba(255,255,255,0)" class="text-center pa-5">
          <v-card-text>
            <v-avatar color="white" size="140">
              <v-img :src="require('../../assets/contributors/martins-pacheco.jpg')"></v-img>
            </v-avatar>
          </v-card-text>
          <v-card-title class="justify-center text-no-wrap">Nuno Miguel<br>Martins Pacheco</v-card-title>
          <v-card-text class="text-body-1 text--primary">Doctoral Researcher</v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="4">
        <v-card flat color="rgba(255,255,255,0)" class="text-center pa-5">
          <v-card-text>
            <v-avatar color="white" size="140">
              <v-img :src="require('../../assets/contributors/suresh.jpg')"></v-img>
            </v-avatar>
          </v-card-text>
          <v-card-title class="justify-center text-no-wrap">Anand<br>Suresh</v-card-title>
          <v-card-text class="text-body-1 text--primary">Post-Doctoral Researcher</v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="4">
        <v-card flat color="rgba(255,255,255,0)" class="text-center pa-5">
          <v-card-text>
            <v-avatar color="white" size="140">
              <v-img :src="require('../../assets/contributors/zimmermann.jpg')"></v-img>
            </v-avatar>
          </v-card-text>
          <v-card-title class="justify-center text-no-wrap">Markus<br>Zimmermann</v-card-title>
          <v-card-text class="text-body-1 text--primary">Professor</v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <v-row no-gutters>
      <v-col cols="12" md="4">
        <v-card flat color="rgba(255,255,255,0)" class="text-center pa-5">
          <v-card-text>
            <v-avatar color="white" size="140">
              <v-img :src="require('../../assets/contributors/nuernberger.jpg')"></v-img>
            </v-avatar>
          </v-card-text>
          <v-card-title class="justify-center text-no-wrap">Masaru Nürnberger</v-card-title>
          <v-card-text class="text-body-1 text--primary">Student Researcher</v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="4">
        <v-card flat color="rgba(255,255,255,0)" class="text-center pa-5">
          <v-card-text>
            <v-avatar color="white" size="140">
              <v-img :src="require('../../assets/contributors/duran.jpg')"></v-img>
            </v-avatar>
          </v-card-text>
          <v-card-title class="justify-center text-no-wrap">Laura Durán</v-card-title>
          <v-card-text class="text-body-1 text--primary">Student Researcher</v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="4">
        <v-card flat color="rgba(255,255,255,0)" class="text-center pa-5">
          <v-card-text>
            <v-avatar color="white" size="140">
              <v-img :src="require('../../assets/contributors/feldl.jpg')"></v-img>
            </v-avatar>
          </v-card-text>
          <v-card-title class="justify-center text-no-wrap">Andreas Feldl</v-card-title>
          <v-card-text class="text-body-1 text--primary">Student Researcher</v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <v-row class="pt-10">
      <v-col cols="12" class="text-h3 font-weight-bold text-center" id="Publications">
        Publications
      </v-col>
      <v-col cols="12">
        <v-card flat v-for="(pub, i) in publications" :key="i" class="mb-2" color="rgba(255,255,255,1)">
          <v-card-text>
            <v-row no-gutters>
              <v-col cols="11" class="text--primary">
                <v-row no-gutters>
                  <v-col cols="12"><strong>{{ pub.name }}</strong></v-col>
                  <v-col cols="12">{{ pub.credits }}</v-col>
                </v-row>
              </v-col>
              <v-col cols="1" class="ml-auto text-right" align-self="center">
                <a :href="pub.href" class="text-decoration-none text--primary" target="_blank">
                  Full Text
                </a>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <v-row class="pt-10 pb-md-10">
      <v-col cols="12">
        <v-card flat>
          <v-card-title class="justify-center" id="Contact">Contact</v-card-title>
          <v-card-text>
            <v-btn depressed block href="mailto:petra.lpl@ed.tum.de">Email us</v-btn>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import AppBarPublic from "@/components/AppBarPublic";

export default {
  name: 'Home',
  components: {AppBarPublic},
  data: () => ({
    whatsNext: [
      {
        text: 'Register',
        name: 'auth-register',
      },
      {
        text: 'Login',
        name: 'auth-login',
      },
    ],
    publications: [
      // To change a publication, edit the name, credits or href (with https).
      // To append a new pub, add name, credits and href in two curly brackets (dont forget the commas)
      // or remove the double slashes to uncomment the last element
      {
        name: 'A Fuzzy Front-End Product Development Framework for Start-ups',
        credits: 'ICED 2021 | Nuno Miguel Martins Pacheco, Anand Vazhapilli Sureshbabu, Masaru Charles - Nürnberger , Laura Isabel Durán Noy and Markus Zimmermann',
        href: 'https://www.cambridge.org/core/journals/proceedings-of-the-design-society/article/fuzzy-frontend-product-development-framework-for-startups/61C89F54B7B136EEAFA595F4E0A18288',
      },
      {
        name: 'What is successful prototyping? Insights from Novice Designers\' self-evaluation of Prototyping Success',
        credits: 'ICED 2021 | Camilla Arndt Hansen, Nuno Miguel Martins Pacheco, Ali Gürcan Özkil and Markus Zimmermann',
        href: 'https://www.cambridge.org/core/journals/proceedings-of-the-design-society/article/what-is-successful-prototyping-insights-from-novice-designers-selfevaluation-of-prototyping-success/611875932C029BA402FF29321CD0CCC7',
      },
      {
        name: 'A Role-Based Prototyping Approach for Human-Centered Design in Industry',
        credits: 'I’CoRD 2021 | Nuno Miguel Martins Pacheco, Anand Vazhapilli Sureshbabu, Markus Zimmermann',
        href: 'https://link.springer.com/chapter/10.1007%2F978-981-16-0119-4_75',
      },
      {
        name: 'A Behavior-Centric Concept for Engineering Education in New Product Development',
        credits: 'NordDesign 2020 | Jan Behrenbeck, Nuno Miguel Martins Pacheco, Bilal Tariq, Markus Zimmermann',
        href: 'https://www.designsociety.org/publication/42525/A+Behavior-Centric+Concept+for+Engineering+Education+in+New+Product+Development',
      },
      {
        name: 'A Role-based Prototyping Approach for Human-Centred Design in Fuzzy Front-End Scenarios',
        credits: 'NordDesign 2020 | Nuno Miguel Martins Pacheco, Jan Behrenbeck, Bilal Tariq, Anand Vazhapilli, Sureshbabu, Markus Zimmermann',
        href: 'https://www.designsociety.org/publication/42507/A+Role-based+Prototyping+Approach+for+Human-Centred+Design+in+Fuzzy+Front-End+Scenarios',
      },
      // {
      //   name: '<THE_NAME>',
      //   credits: '<THE_CREDITS>',
      //   href: '<THE_LINK>',
      // },
    ],
  }),
}
</script>