Skip to content

Commit

Permalink
Merge pull request #579 from canopas/major-ui-fixes-in-all-pages
Browse files Browse the repository at this point in the history
Fix: Major UI fixes in all pages and improvements with content changes
  • Loading branch information
cp-dharti-r authored Jun 19, 2024
2 parents a85e52f + a152f57 commit 29b158a
Showing 45 changed files with 341 additions and 325 deletions.
2 changes: 1 addition & 1 deletion nuxt-frontend/assets/css/global.css
Original file line number Diff line number Diff line change
@@ -179,7 +179,7 @@
}

.gradient-border-btn {
@apply m-[5px] rounded-[0.6rem] border border-solid border-transparent bg-gradient-to-r from-orange-300 to-pink-300 p-4 text-center shadow-[inset_2px_1000px_1px_white] lg:hover:border lg:hover:border-solid lg:hover:border-transparent lg:hover:from-pink-300 lg:hover:to-orange-300 lg:hover:shadow-none lg:hover:bg-gradient-[91.53deg] active:scale-[0.98];
@apply m-[5px] rounded-[0.6rem] border border-solid border-transparent bg-gradient-to-r from-orange-300 to-pink-300 p-4 text-center shadow-[inset_2px_1000px_1px_white] hover:border hover:border-solid hover:border-transparent hover:from-pink-300 hover:to-orange-300 hover:shadow-none hover:bg-gradient-[91.53deg] active:scale-[0.98];
}

.gradient-border-btn > a > .fab {
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template>
<div class="container">
<div id="guarantee" class="container">
<div
class="rounded-xl border bg-[#F8F8F8] shadow-[0px_2px_35px_rgba(0,0,0,0.12)] mt-16 lg:my-28 px-4 py-8 lg:py-14 mb-16 3xl:mb-[23rem]"
class="rounded-xl border bg-[#F8F8F8] shadow-[0px_2px_35px_rgba(0,0,0,0.12)] mt-16 lg:my-28 px-4 py-8 lg:py-14 mb-16 3xl:mb-[23rem] mx-0 lg:mx-10 xl:mx-28"
>
<div class="flex flex-row items-center lg:items-end gap-1">
<div class="flex flex-row items-center lg:items-end gap-3">
<img
:src="badge"
class="w-14 lg:w-[108px] h-[51px] lg:h-[99px] ml-[-5px] lg:ml-0 lg:mt-[-35px]"
@@ -27,7 +27,7 @@
</div>
</template>
<script>
import badge from "@/assets/images/guaranty-badge.webp";
import badge from "@/assets/images/guarantee-badge.webp";
export default {
data() {
return {
Original file line number Diff line number Diff line change
@@ -70,7 +70,7 @@
{{ benefit.number }}
</div>

<div class="">
<div>
<div class="desk-header-3 text-black-87">
{{ benefit.title }}
</div>
2 changes: 1 addition & 1 deletion nuxt-frontend/components/contact/thank-you/HappyClient.vue
Original file line number Diff line number Diff line change
@@ -79,7 +79,7 @@
</div>
</a>
</div>
<div class="">
<div>
<div
class="mobile-header-2-semibold text-black-87 transition-all ease duration-500"
:class="client.class"
4 changes: 2 additions & 2 deletions nuxt-frontend/components/contributions/DesktopLanding.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<section
class="pb-28 mt-[1.563rem] bg-gradient-to-r from-white via-pink-5 to-white bg-gradient-[180.05deg]"
class="pb-28 mt-[1.563rem] from-white via-pink-5 to-white bg-gradient-[180.05deg]"
>
<div class="relative xll:container w-full h-full pb-16 lg:pt-12">
<div class="container flex flex-col items-center mx-auto md:text-center">
@@ -19,7 +19,7 @@
fostering innovation, and empowering developers around the globe.
</div>
<nuxt-link
class="mt-10 gradient-btn primary-btn"
class="mt-10 gradient-btn primary-btn z-10"
to="/contact"
@click.native="$mixpanel.track('tap_landing_cta')"
>
3 changes: 1 addition & 2 deletions nuxt-frontend/components/contributions/WeeklyUpdate.vue
Original file line number Diff line number Diff line change
@@ -40,7 +40,6 @@
<img
:src="[weekly.image]"
alt="Weekly-stack-image"
class="h-fit w-fit object-contain"
loading="lazy"
/>
<div class="bg-white-smoke-1 p-4 pb-14">
@@ -87,7 +86,7 @@
<img
:src="[weekly.image]"
alt="Weekly-stack-image"
class="h-[72%] lg:h-full w-fit object-cover"
class="h-[72%] lg:h-full w-full object-cover"
loading="lazy"
/>
</div>
4 changes: 2 additions & 2 deletions nuxt-frontend/components/contributions/WhatsTrending.vue
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@
@click="openBlog(post.link, 'tap_contribution_trending_section')"
>
<div class="overflow-hidden rounded-3xl border-1 border-black-80">
<div class="">
<div>
<img
@click.native="$mixpanel.track('tap_whats_trending_blog')"
:src="post.images[0]"
@@ -52,7 +52,7 @@
</div>
<!-- Mobile UI end -->
<!-- Desktop UI start -->
<div class="mt-10 hidden overflow-hidden lg:block mt-20">
<div class="hidden overflow-hidden lg:block mt-20">
<div
class="animate-gridAnimationReverse"
:style="{
Original file line number Diff line number Diff line change
@@ -179,7 +179,7 @@ function handleScroll() {
@import "swiper/css/pagination";
.swiper-pagination {
@apply static pt-8;
@apply static !mt-8;
}
.swiper-pagination-bullet {
@apply !w-3 !h-3 !rounded-full !bg-pink-90 !border !border-solid !border-white-core-80;
167 changes: 75 additions & 92 deletions nuxt-frontend/components/home-new/BlogSection.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
<template>
<section v-if="activeBlog" class="my-16 lg:my-60 text-black-87 h-full">
<div class="mt-14 lg:hidden w-full flex justify-center">
<hr class="w-[95%] sm:w-[75%]" />
</div>
<section
v-if="activeBlog"
class="mt-16 mb-24 lg:my-60 text-black-87 h-full mx-5 sm:mx-0"
>
<div class="container flex flex-col items-center m-auto w-full">
<div class="container">
<p class="text-white-smoke background-text text-center">Blogs</p>
@@ -13,35 +19,23 @@
<div
class="w-full text-center text-black-60 sub-h1-regular lg:mobile-header-2-regular"
>
Well, at least the community says Hell Yeah. Our blogs hosted on
medium have
Our
<span
class="v2-canopas-gradient-text sub-h1-semibold lg:mobile-header-2-semibold"
>100k+</span
>5-star Clutch ratings</span
>
minutes monthly reading time and it’s only rising.
and love from the developer community speak for us. Our blogs attract
<span
class="v2-canopas-gradient-text sub-h1-semibold lg:mobile-header-2-semibold"
>50K+ monthly visitors</span
>, and the number keeps growing.
</div>
</div>
</div>
<div
class="relative mt-8 h-full"
:class="width > 767 && width < 992 ? 'container' : ''"
>
<div class="w-full h-full mr-0">
<img
:src="bgMobile"
class="md:hidden sm:ml-[153px] w-full sm:w-[80%] h-full object-cover"
alt="blog-background-image"
/>
</div>
<div
class="absolute top-0 left-0 right-0 flex flex-col md:flex-row md:mt-8 lg:mt-16 z-[1] lg:min-h-[580px] md:pb-[15%] lg:py-0"
:class="width < 768 || width > 2000 ? 'container' : ''"
>
<div
class="relative flex flex-col items-center md:items-start md:justify-center md:flex-[60%] lg:ml-[7%] xl:ml-[10%] 2xl:ml-[15%] xll:ml-[1%]"
:class="width > 2000 ? 'ml-0' : ''"
>

<div class="xll:container relative">
<div class="flex gap-8 container">
<div class="md:w-[64%]">
<div
v-for="(blog, index) in blogs"
:key="blog"
@@ -52,9 +46,9 @@
"
@touchstart.passive="activeIndex = index"
@click.native="$mixpanel.track('tap_blog_post')"
class="md:w-1/2 2xl:w-[55%] xll:w-[65%] 3xl:w-[55%] w-full"
class="w-full"
>
<div class="flex flex-col 2xl:pr-16">
<div class="flex flex-col">
<div
class="flex gap-8 md:gap-4 lg:gap-8 justify-end mt-[18px] md:mt-4 lg:mt-8"
>
@@ -77,7 +71,7 @@
</div>

<div
class="flex flex-col w-full"
class="flex flex-col gap-5 w-full"
@touchstart.passive="
activeBlog = blog;
animate = true;
@@ -88,113 +82,102 @@
v-if="index == 0"
class="h-[0.063rem] mb-4 lg:mb-8 bg-[#C6C6C6]"
/>
<div @mouseleave="animate = false">
<nuxt-link
:to="'/' + blog.slug"
@click.native="$mixpanel.track('tap_blog_post')"
>
<span
:class="
activeIndex == index
? 'bg-gradient-underline-out box-decoration-clone bg-no-repeat pb-[5px] transition-all duration-500 bg-[length:100%] hover:bg-gradient-underline-out'
: 'bg-[length:0%]'
"
class="sub-h1-semibold lg:mobile-header-2-semibold xl:desk-header-3 text-black-87 cursor-pointer"
>
{{ blog.title }}</span
<div>
<div @mouseleave="animate = false">
<nuxt-link
:to="'/' + blog.slug"
@click.native="$mixpanel.track('tap_blog_post')"
>
</nuxt-link>
</div>
<div
class="flex justify-between mt-[0.9375rem] md:mt-4 lg:mt-8 text-black-60"
>
<span class="w-auto sub-h4-regular lg:sub-h1-semibold">
{{ blog.author.name }}
</span>
<nuxt-link
:to="'/' + blog.slug"
@click.native="$mixpanel.track('tap_blog_post')"
<span
:class="
activeIndex == index
? 'bg-gradient-underline-out box-decoration-clone bg-no-repeat pb-[5px] transition-all duration-500 bg-[length:100%] hover:bg-gradient-underline-out'
: 'bg-[length:0%]'
"
class="sub-h1-semibold lg:mobile-header-2-semibold xl:desk-header-3 text-black-87 cursor-pointer"
>
{{ blog.title }}</span
>
</nuxt-link>
</div>
<div
class="flex justify-between mt-[0.9375rem] md:mt-4 lg:mt-8 text-black-60"
>
<span
class="lg:w-[7.938rem] cursor-pointer sub-h3-semibold lg:mobile-header-3-semibold lg:v2-canopas-gradient-text"
>
Read more
<Icon
class="!hidden lg:!inline-block arrow fa w-4 h-4 text-pink-300"
name="fa6-solid:arrow-right-long"
id="leftArrow"
/>
<span class="w-auto sub-h4-regular lg:sub-h1-semibold">
{{ blog.author.name }}
</span>
</nuxt-link>
<nuxt-link
:to="'/' + blog.slug"
@click.native="$mixpanel.track('tap_blog_post')"
>
<span
class="lg:w-[7.938rem] cursor-pointer sub-h3-semibold lg:mobile-header-3-semibold lg:v2-canopas-gradient-text"
>
Read more
<Icon
class="arrow fa w-4 h-4 text-pink-300 !hidden lg:!inline-block"
name="fa6-solid:arrow-right-long"
id="leftArrow"
/>
</span>
</nuxt-link>
</div>
</div>
<hr class="h-[0.063rem] mt-4 lg:mt-8 bg-[#C6C6C6]" />

<hr class="h-[0.063rem] bg-[#C6C6C6]" />
<nuxt-link
v-if="activeIndex == index"
:to="'/' + blog.slug"
@click.native="$mixpanel.track('tap_blog_post')"
class="md:hidden"
>
<div
class="block md:!hidden mt-4 w-full animate-fadeInRight"
>
<div class="animate-fadeInRight">
<img
:src="blog.image_url"
class="object-cover"
class="h-full w-full rounded-lg"
loading="lazy"
:alt="blog.title"
/>
<hr
v-if="index != blogs.length - 1"
class="md:hidden mt-4 h-[0.063rem] bg-[#C6C6C6]"
/>
<hr v-if="index != blogs.length - 1" class="mt-5" />
</div>
</nuxt-link>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hidden md:flex lg:justify-end 3xl:justify-center flex-[40%]">
<div>
<img
v-if="(width > 767 && width < 991) || width > 3839"
:src="bgNew"
loading="lazy"
class="3xl:w-[55%] 3xl:mr-0 relative ml-[300px] 3xl:ml-[1156px] mt-[30px] 3xl:-mt-[24px]"
alt="blog-background-image"
/>
<img
v-else
:src="bg"
loading="lazy"
class="relative mt-14 lg:mt-[4.5rem]"
alt="blog-background-image"
/>
<div class="hidden md:flex w-[36%] items-center justify-center">
<nuxt-link
:to="'/' + activeBlog.slug"
@click.native="$mixpanel.track('tap_blog_post')"
>
<img
v-if="activeBlog !== null"
:src="activeBlog.image_url"
class="absolute inline-block inset-0 m-auto w-[90%] md:top-8 lg:top-[5.5rem] xl:top-[7.5rem] 3xl:-top-[3.5rem] md:w-[47%] lg:w-[37%] xl:w-[35%] 2xl:w-[30%] xll:w-[26%] 3xl:w-[17%] md:-right-[387px] lg:-right-[570px] xl:-right-[680px] 2xl:-right-[945px] xll:-right-[1600px] 3xl:-right-[1246px] cursor-pointer"
class="w-full cursor-pointer rounded-lg"
:class="animate ? 'animate-fadeInRight' : ''"
loading="lazy"
:alt="activeBlog.title"
/>
</nuxt-link>
</div>
</div>
<img
class="absolute top-0 -right-5 sm:right-0 h-full z-[-1]"
:src="bg"
:srcset="`${bg} 400w, ${bg400} 800w, ${bg2400} 1200w`"
alt="blog-background-image"
/>
</div>
</section>
</template>

<script setup>
import bgMobile from "@/assets/images/blog/bg/bg400.svg";
import bg from "@/assets/images/blog/bg/bg2400.svg";
import bgNew from "@/assets/images/blog/bg/bg.webp";
import config from "@/config.js";
import { useBlogListStore } from "@/stores/resources";
import bg from "@/assets/images/blog/bg/bg.webp";
import bg400 from "@/assets/images/blog/bg/bg400.svg";
import bg2400 from "@/assets/images/blog/bg/bg2400.svg";
const { $mixpanel } = useNuxtApp();
2 changes: 1 addition & 1 deletion nuxt-frontend/components/home-new/CaseStudy.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<section
:class="
currentRoutePath == '/portfolio' ? 'mt-6 lg:mt-28' : 'mt-16 lg:mt-60'
currentRoutePath == '/portfolio' ? 'mt-16 lg:mt-28' : 'mt-16 lg:mt-60'
"
>
<div>
Loading

0 comments on commit 29b158a

Please sign in to comment.