Fix header and portfolio detail UI issue

canopas · Jun 28, 2024 · ac7bd45 · ac7bd45
1 parent e8d80fb
commit ac7bd45
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 12 deletions.
diff --git a/.github/workflows/deploy-backend-dev.yml b/.github/workflows/deploy-backend-dev.yml
@@ -3,7 +3,7 @@ name: DeployBackendDev
 on:
   push:
     branches:
-      - "use-nuxt-image-to-show-images"
+      - "master"
 
 jobs:
   deploy-backend-dev:

diff --git a/.github/workflows/deploy-backend-prod.yml b/.github/workflows/deploy-backend-prod.yml
@@ -3,7 +3,7 @@ name: DeployBackendProd
 on:
   push:
     branches:
-      - "use-nuxt-image-to-show-images"
+      - "master"
 
 jobs:
   deploy-backend-prod:

diff --git a/.github/workflows/deploy-frontend-dev.yml b/.github/workflows/deploy-frontend-dev.yml
@@ -3,7 +3,7 @@ name: DeployFrontendServerlessDev
 on:
   push:
     branches:
-      - "master"
+      - "use-nuxt-image-to-show-images"
 
 jobs:
   deploy-frontend-dev:

diff --git a/nuxt-frontend/components/partials/NewHeader.vue b/nuxt-frontend/components/partials/NewHeader.vue
@@ -39,14 +39,14 @@
                   "
                   :to="navbar.url"
                   @click.native="$mixpanel.track(navbar.event)"
-                  class="group relative mr-5 inline-block sm:mr-[30px] lg:mr-2 xl:mr-[30px]"
+                  class="flex gap-2 group relative mr-5 sm:mr-[30px] lg:mr-2 xl:mr-[30px]"
                   :class="[
                     isActiveRoute(navbar.name)
                       ? 'router-link-exact-active'
                       : '',
                     navbar.className
                       ? navbar.className
-                      : ' main-menu after:absolute after:bottom-0 after:left-0 after:top-[27px] after:h-[3px] after:w-full  after:origin-bottom-left after:scale-x-0 after:from-[#f2709c] after:to-[#ff9472] after:duration-300 after:bg-gradient-[90deg] hover:from-[#ff9472] hover:to-[#f2709c] hover:bg-clip-text hover:text-transparent hover:bg-gradient-[270.11deg] hover:after:origin-bottom-left hover:after:scale-x-100 ',
+                      : ' main-menu after:absolute after:bottom-0 after:left-0 after:top-[27px] after:h-[3px] after:w-full after:origin-bottom-left after:scale-x-0 after:from-[#f2709c] after:to-[#ff9472] after:duration-300 after:bg-gradient-[90deg] hover:from-[#ff9472] hover:to-[#f2709c] hover:bg-clip-text hover:text-transparent hover:bg-gradient-[270.11deg] hover:after:origin-bottom-left hover:after:scale-x-100 ',
                   ]"
                 >
                   <span
@@ -55,6 +55,37 @@
                     ]"
                     >{{ navbar.name }}</span
                   >
+                  <span
+                    v-if="navbar.subMenus"
+                    class="flex items-center transition ease-in-out duration-500"
+                    :class="showContributionMenu ? 'rotate-180' : ''"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="13"
+                      height="7"
+                      viewBox="0 0 13 7"
+                      fill="none"
+                    >
+                      <path
+                        d="M6.5 6.5L0.5 0.5H12.5L6.5 6.5Z"
+                        fill="url(#paint0_linear_8576_22013)"
+                      />
+                      <defs>
+                        <linearGradient
+                          id="paint0_linear_8576_22013"
+                          x1="13.76"
+                          y1="3.49999"
+                          x2="-1.17743"
+                          y2="6.50015"
+                          gradientUnits="userSpaceOnUse"
+                        >
+                          <stop stop-color="#F2709C" />
+                          <stop offset="1" stop-color="#FF835B" />
+                        </linearGradient>
+                      </defs>
+                    </svg>
+                  </span>
                 </nuxt-link>
 
                 <ul
@@ -124,7 +155,7 @@
             <nuxt-link
               :to="navbar.url == '/contributions' ? '' : navbar.url"
               @click.native="$mixpanel.track(navbar.event)"
-              class="group relative mr-5 inline-block sm:mr-[30px] lg:mr-5"
+              class="flex gap-2 group relative mr-5 w-fit sm:mr-[30px] lg:mr-5 cursor-pointer"
               :class="[
                 isActiveRoute(navbar.name) ? 'router-link-exact-active' : '',
                 navbar.className
@@ -137,8 +168,39 @@
                   : ''
               "
             >
-              {{ navbar.name }}</nuxt-link
-            >
+              <span>{{ navbar.name }}</span>
+              <span
+                v-if="navbar.subMenus"
+                class="flex items-center transition ease-in-out duration-500"
+                :class="showContributionMenu ? 'rotate-180' : ''"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="13"
+                  height="7"
+                  viewBox="0 0 13 7"
+                  fill="none"
+                >
+                  <path
+                    d="M6.5 6.5L0.5 0.5H12.5L6.5 6.5Z"
+                    fill="url(#paint1_linear_8576_22013)"
+                  />
+                  <defs>
+                    <linearGradient
+                      id="paint1_linear_8576_22013"
+                      x1="13.76"
+                      y1="3.49999"
+                      x2="-1.17743"
+                      y2="6.50015"
+                      gradientUnits="userSpaceOnUse"
+                    >
+                      <stop stop-color="#F2709C" />
+                      <stop offset="1" stop-color="#FF835B" />
+                    </linearGradient>
+                  </defs>
+                </svg>
+              </span>
+            </nuxt-link>
             <ul
               :class="
                 showContributionMenu && navbar.name == 'Contribution'

diff --git a/nuxt-frontend/components/portfolio/LandingSection.vue b/nuxt-frontend/components/portfolio/LandingSection.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="bg-white" :ref="response.landingref1">
-    <div class="container z pb-16 lg:pb-60">
+    <div class="container z pt-28 md:pt-36 lg:pt-56 pb-16 lg:pb-60">
       <h1
         class="sub-h1-semibold lg:sub-h2-medium text-black-60 animate__animated animate__fadeInUp"
       >

diff --git a/nuxt-frontend/components/portfolio/VideoSection.vue b/nuxt-frontend/components/portfolio/VideoSection.vue
@@ -1,14 +1,21 @@
 <template>
   <section class="bg-white relative" :ref="response.ref">
-    <div class="relative container">
+    <div class="relative container py-10 lg:py-20">
       <img
         v-if="response.backgroundImage[3]"
         :src="response.backgroundImage[3]"
         :srcset="`${response.backgroundImage[0]} 400w, ${response.backgroundImage[1]} 800w, ${response.backgroundImage[2]} 1200w, ${response.backgroundImage[3]} 1600w`"
-        class="hidden absolute object-cover w-full py-40 lg:block"
+        class="hidden object-cover w-full py-40 lg:block"
         alt="luxeradio-music-background"
       />
-      <div class="flex flex-col justify-between py-16 lg:flex-row lg:py-60">
+      <div
+        class="flex flex-col justify-between lg:flex-row"
+        :class="
+          response.backgroundImage[3]
+            ? 'absolute bottom-0 items-center h-full'
+            : 'py-16 lg:py-60'
+        "
+      >
         <div class="mobile-header-3-semibold lg:desk-header-3 text-black-87">
           {{ response.title }}
         </div>