Merge branch 'lhtdraft' into 'main'

indexwave

See merge request !136

components/indexwave.vue

+<template>
+    <div class="">
+        <svg class="waves z-50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+            viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
+            <defs>
+                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"  />
+            </defs>
+            <g class="parallax">
+                <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(254,251,240,0.7)" />
+                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(254,251,240,0.5)" />
+                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(254,251,240,0.3)" />
+                <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(254,251,240,0.1)" />
+            </g>
+        </svg>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+.waves {
+    position: relative;
+    width: 100%;
+    height: 15vh;
+    margin-bottom: -7px;
+    /*Fix for safari gap*/
+    min-height: 100px;
+    max-height: 150px;
+}
+
+
+/* Animation */
+
+.parallax>use {
+    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
+}
+
+.parallax>use:nth-child(1) {
+    animation-delay: -2s;
+    animation-duration: 7s;
+}
+
+.parallax>use:nth-child(2) {
+    animation-delay: -3s;
+    animation-duration: 10s;
+}
+
+.parallax>use:nth-child(3) {
+    animation-delay: -4s;
+    animation-duration: 13s;
+}
+
+.parallax>use:nth-child(4) {
+    animation-delay: -5s;
+    animation-duration: 20s;
+}
+
+@keyframes move-forever {
+    0% {
+        transform: translate3d(-90px, 0, 0);
+    }
+
+    100% {
+        transform: translate3d(85px, 0, 0);
+    }
+}
+
+/*Shrinking for mobile*/
+@media (max-width: 768px) {
+    .waves {
+        height: 40px;
+        min-height: 40px;
+    }
+
+    .content {
+        height: 30vh;
+    }
+
+    h1 {
+        font-size: 24px;
+    }
+}</style>
\ No newline at end of file

pages/index.vue

 <template>
   <div id="index" class="test">
     <Title>Home</Title>
-    <div class=" h-screen" id="home page" style="background: url(https://static.igem.wiki/teams/4713/wiki/index/home.jpg) center center / cover">
+    <div class=" h-screen relative" id="home page" style="background: url(https://static.igem.wiki/teams/4713/wiki/index/home.jpg) center center / cover">
       <h3 class="text-center pt-52 pb-5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent text-4xl lg:text-6xl font-bold">
         Welcome to peking igem
       </h3>
       <h1 class="text-center pt-32 pb-64 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent text-8xl lg:text-9xl font-bold">
         Crown Assassin
       </h1>
+      <Indexwave class=" absolute bottom-[0] w-full"/>
     </div>
+    
     <div id="Pancreatic Cancer1" class="h-screen" style="background: url(https://static.igem.wiki/teams/4713/wiki/index/background2.png) center center / cover">
       <section class=" relative" style="height: 100%; width: 100%">
         <h5 class="w-[40%] mx-auto absolute text-2xl lg:text-4xl text-center lg-top-11 sm-top-3" style="left:10%;">