feat : Landing Section for frontend page

.github/workflows/deploy-frontend-dev.yml

@@ -2,6 +2,8 @@ name: DeployFrontendDev
 
 on:
   push:
+    # branches:
+    #   - "master"
 
 
 jobs:

nuxt-frontend/components/about/HowItAllStartedSection.vue

@@ -1,9 +1,9 @@
 <template>
   <section class="bg-deep-charcoal 3xl:outer-container">
     <div
-      class="py-[7.5rem] relative container my-0 mx-auto flex flex-row gap-[6.5rem] mb-60"
+      class="py-[7.5rem] relative container my-0 mx-auto flex gap-[6.5rem] mb-60"
     >
-      <div class="sticky w-full top-[400px] pb-[12.5rem] h-[3vh]">
+      <div class="sticky w-full top-[25rem] pb-[12.5rem] h-[3vh]">
         <div class="flex flex-col float-left">
           <div class="desk-header-2 text-white">How it all started?</div>
           <nuxt-link
@@ -19,7 +19,7 @@
       </div>
       <div class="flex flex-col gap-14">
         <div
-          class="flex flex-row gap-10 item opacity-50"
+          class="flex gap-10 item opacity-50"
           v-for="(event, index) in events"
           :key="index"
           :class="{ '!opacity-100': index === activeIndex }"

nuxt-frontend/components/about/HowItAllStartedSectionMobile.vue

@@ -7,12 +7,8 @@
       <div
         class="container flex flex-col items-center w-full md:w-[82%] h-[24.25rem] mt-8 overflow-y-scroll hidden-scrollbar before:-mt-5 before:blur-lg before:absolute before:left-0 before:h-[6%] before:w-full before:bg-black-gradient"
       >
-        <div
-          v-for="(event, index) in events"
-          :key="event"
-          class="flex flex-row items-center"
-        >
-          <div :class="[event.className]" class="flex flex-row">
+        <div v-for="(event, index) in events" :key="event">
+          <div :class="[event.className]" class="flex">
             <div class="flex flex-col">
               <h1 class="mobile-header-2 primary-color">
                 {{ event.year }}

nuxt-frontend/components/about/LandingSection.vue

@@ -6,7 +6,7 @@
       class="container flex flex-col lg:flex-row items-center mt-[2.313rem] 2xl:mt-[5.313rem]"
     >
       <div class="flex flex-col 2xl:mt-8 lg:w-full xl:w-2/4 2xl:w-[42%]">
-        <h1 class="text-left mobile-header-1 lg:desk-header-1 text-black-87">
+        <h1 class="mobile-header-1 lg:desk-header-1 text-black-87">
           Expertise and experience you can count on
         </h1>
         <nuxt-link
@@ -21,7 +21,7 @@
       </div>
 
       <ul
-        class="mt-6 w-full md:w-[90%] lg:w-full xl:w-[55%] 2xl:w-[55%] sub-h1-regular lg:mobile-header-2-regular pl-0 text-left text-black-60"
+        class="mt-6 w-full md:w-[90%] lg:w-full xl:w-[55%] 2xl:w-[55%] sub-h1-regular lg:mobile-header-2-regular pl-0 text-black-60"
       >
         <li
           v-for="experience in experiences"

nuxt-frontend/components/about/WithCanopas.vue

@@ -112,7 +112,7 @@ export default {
           title: "Design",
           description:
             "Working passionately with you, our designers create aesthetically pleasing  and user friendly digital experiences.",
-          className: "lg:ml-[17px] 2xl:ml-[24px]",
+          className: "lg:ml-[17px] 2xl:ml-6",
         },
         {
           image: development,
@@ -128,7 +128,7 @@ export default {
           title: "Marketing",
           description:
             "From organic growth to writing irresistible ads for your marketing campaign, we're here to help you. We'll help you build a brand and community of prospects who can give you a boost on your product launch.",
-          className: "lg:ml-[28px] xl:ml-[38px]",
+          className: "lg:ml-7 xl:ml-[38px]",
         },
         {
           image: support,

nuxt-frontend/components/backend-development/BlogSection.vue

@@ -0,0 +1,195 @@
+<template>
+  <section class="mb-16 lg:mb-60 3xl:outer-container">
+    <h2
+      class="text-center mobile-header-2 lg:desk-header-2 text-black-87 pb-4 lg:pb-[4.5rem]"
+    >
+      Our blogs
+    </h2>
+    <!-- Mobile UI start -->
+    <div class="lg:hidden">
+      <swiper
+        :grabCursor="true"
+        :effect="'creative'"
+        :centeredSlides="true"
+        :loop="false"
+        :creativeEffect="{
+          limitProgress: 5,
+          loop: false,
+          next: {
+            translate: [400, 0, 0],
+          },
+          prev: {
+            translate: [0, 0, -10],
+          },
+        }"
+        :slidesPerView="1"
+        :spaceBetween="10"
+        :modules="modules"
+      >
+        <swiper-slide v-for="(blog, index) in blogs" :key="index" class="my-8">
+          <div
+            :class="blog.className"
+            class="w-80 drop-shadow-md bg-white cursor-pointer mx-auto"
+          >
+            <img
+              :src="blog.image"
+              :srcset="`${blog.image} 400w`"
+              :alt="blog.title"
+              class="h-44 w-80 object-cover"
+              loading="lazy"
+              @click.native="openBlog(blog.link, 'tap_backend_blog_section')"
+            />
+            <div
+              class="w-80 p-4 flex flex-col gap-3"
+              @click.native="openBlog(blog.link, 'tap_backend_blog_section')"
+            >
+              <span class="text-black-87 sub-h3-medium">{{ blog.title }}</span>
+              <span class="text-black-60 sub-h4-medium">{{
+                blog.readTime
+              }}</span>
+            </div>
+          </div></swiper-slide
+        >
+      </swiper>
+    </div>
+    <!-- Mobile UI ends -->
+    <!-- Desktop UI start -->
+    <div class="hidden lg:block xll:container">
+      <swiper
+        :slidesPerView="3"
+        :centeredSlides="true"
+        :loop="true"
+        :autoplay="{
+          delay: 2000,
+          disableOnInteraction: false,
+        }"
+        :speed="2000"
+        :spaceBetween="20"
+        :modules="modules"
+        :navigation="true"
+        class="swiper-container"
+        :breakpoints="{
+          '992': {
+            slidesPerView: 2,
+          },
+          '1200': {
+            slidesPerView: 2.5,
+          },
+          '1400': {
+            slidesPerView: 3.5,
+          },
+          '2440': {
+            slidesPerView: 2.5,
+          },
+        }"
+      >
+        <swiper-slide
+          v-for="(blog, index) in backendblog"
+          :key="index"
+          class="cursor-pointer"
+        >
+          <div class="h-full w-full">
+            <img
+              @click="openBlog(blog.link, 'tap_backend_blog_section')"
+              :src="blog.deskImage[0]"
+              :srcset="`${blog.deskImage[0]} 800w,${blog.deskImage[1]} 1200w`"
+              :alt="blog.title"
+              class="h-full w-full object-cover rounded-xl"
+              loading="lazy"
+            />
+          </div>
+          <div class="mt-6 flex flex-col gap-6">
+            <span
+              @click="openBlog(blog.link, 'tap_backend_blog_section')"
+              class="desk-header-3 text-black-87"
+            >
+              {{ blog.title }}
+            </span>
+            <span class="sub-h1-regular text-black-60">
+              {{ blog.readTime }}
+            </span>
+          </div></swiper-slide
+        >
+      </swiper>
+    </div>
+    <!-- Desktop UI ends -->
+  </section>
+</template>
+<script setup>
+import { EffectCreative, Autoplay } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { openBlog } from "@/utils.js";
+
+import mobile_blog1_400w from "@/assets/images/backend-development/blogs/p1-400w.webp";
+import mobile_blog2_400w from "@/assets/images/backend-development/blogs/p2-400w.webp";
+import mobile_blog3_400w from "@/assets/images/backend-development/blogs/p3-400w.webp";
+import mobile_blog4_400w from "@/assets/images/backend-development/blogs/p4-400w.webp";
+import mobile_blog5_400w from "@/assets/images/backend-development/blogs/p5-400w.webp";
+
+import dektop_blog1_800w from "@/assets/images/backend-development/blogs/desktop/p1-800w.webp";
+import dektop_blog1_1200w from "@/assets/images/backend-development/blogs/desktop/p1-800w.webp";
+import dektop_blog2_800w from "@/assets/images/backend-development/blogs/desktop/p2-800w.webp";
+import dektop_blog2_1200w from "@/assets/images/backend-development/blogs/desktop/p2-800w.webp";
+import dektop_blog3_800w from "@/assets/images/backend-development/blogs/desktop/p3-800w.webp";
+import dektop_blog3_1200w from "@/assets/images/backend-development/blogs/desktop/p3-1200w.webp";
+import dektop_blog4_800w from "@/assets/images/backend-development/blogs/desktop/p4-800w.webp";
+import dektop_blog4_1200w from "@/assets/images/backend-development/blogs/desktop/p4-1200w.webp";
+import dektop_blog5_800w from "@/assets/images/backend-development/blogs/desktop/p5-800w.webp";
+import dektop_blog5_1200w from "@/assets/images/backend-development/blogs/desktop/p5-1200w.webp";
+
+const modules = [Autoplay, EffectCreative];
+const blogs = [
+  {
+    title:
+      "Scaling with Confidence — The Backend Strategies Every Startup Needs",
+    image: mobile_blog1_400w,
+    readTime: "13 min read",
+    deskImage: [dektop_blog1_800w, dektop_blog1_1200w],
+    link: "https://canopas.com/scaling-with-confidence-the-backend-strategies-every-startup-needs-8449426557",
+  },
+  {
+    title: "What is Backend Development & Its Role in Mobile App Development?",
+    image: mobile_blog2_400w,
+    readTime: "7 min read",
+    deskImage: [dektop_blog2_800w, dektop_blog2_1200w],
+    link: "https://canopas.com/what-is-backend-development-its-role-in-mobile-app-development-6114455770",
+    className: "-rotate-6",
+  },
+  {
+    title: "Serverless Microservices using AWS lambda and API Gateway",
+    image: mobile_blog3_400w,
+    readTime: "4 min read",
+    deskImage: [dektop_blog3_800w, dektop_blog3_1200w],
+    link: "https://blog.canopas.com/serverless-microservices-aws-lambda-and-api-gateway-d23f9346f0b6",
+    className: "rotate-6",
+  },
+  {
+    title:
+      "Simplified Your Deployment: GitHub Workflow with EC2, ECR, and Docker",
+    image: mobile_blog4_400w,
+    readTime: "8 min read",
+    deskImage: [dektop_blog4_800w, dektop_blog4_1200w],
+    link: "https://blog.canopas.com/simplified-your-deployment-github-workflow-with-ec2-ecr-and-docker-4c9c392d238d",
+    className: "-rotate-6",
+  },
+  {
+    title: "Golang: Serverless deployment using AWS Cloudformation",
+    image: mobile_blog5_400w,
+    readTime: "9 min read",
+    deskImage: [dektop_blog5_800w, dektop_blog5_1200w],
+    link: "https://blog.canopas.com/golang-serverless-deployment-using-aws-cloudformation-4dee745cbf28",
+    className: "rotate-6",
+  },
+];
+const backendblog = computed(() => Array(50).fill(blogs).flat());
+</script>
+<style lang="postcss" scoped>
+@import "swiper/css";
+@import "swiper/css/effect-creative";
+.swiper-slide {
+  @apply !overflow-visible;
+}
+.swiper-wrapper {
+  @apply !items-start;
+}
+</style>

nuxt-frontend/components/backend-development/CaseStudySection.vue

@@ -5,7 +5,7 @@
         <h2 class="mobile-header-2 lg:desk-header-2 text-black-87">
           Case studies
         </h2>
-        <p class="sub-h1-regular lg:mobile-header-2-regular px-4 text-black-87">
+        <p class="sub-h1-regular lg:mobile-header-2-regular px-4 text-black-60">
           Explore our case studies to witness how we've transformed
           <br class="hidden lg:flex" />our client's ideas into successful apps.
         </p>

nuxt-frontend/components/frontend-development/LandingSection.vue

@@ -0,0 +1,54 @@
+<template>
+  <section
+    class="bg-deep-charcoal text-white pt-6 pb-14 lg:py-36 text-center lg:text-left 3xl:outer-container"
+  >
+    <div class="container flex flex-col gap-8 lg:flex-row">
+      <div class="flex flex-col gap-4 lg:gap-6 lg:flex-1 lg:my-auto">
+        <h1 class="mobile-header-1 lg:desk-header-1">
+          Frontend development company
+        </h1>
+        <p class="sub-h1-regular lg:mobile-header-2-regular text-white-core-80">
+          At Canopas, we merge art with technology, ensuring your website or app
+          that feels and looks impeccable. Our team will help you design
+          visually stunning, high-performing, and user-centric interfaces.
+        </p>
+        <nuxt-link
+          class="gradient-btn primary-btn ml-0 hidden lg:flex"
+          to="/contact"
+          @click.native="$mixpanel.track('tap_frontend_landing_cta')"
+        >
+          <span class="sub-h3-semibold lg:sub-h1-semibold"
+            >Talk to Frontend Experts</span
+          ></nuxt-link
+        >
+      </div>
+      <div
+        class="flex flex-col w-72 xs:w-80 mx-auto lg:w-96 gap-8 lg:flex-1"
+      >
+        <img
+          :src="landing400"
+          :srcset="`${landing400} 400w, ${landing800} 800w, ${landing1200} 1200w, ${landing2400} 2400w`"
+          class="mx-auto w-full h-full object-contain"
+          alt="frontend-landing"
+          loading="eager"
+        />
+        <nuxt-link
+          class="white-btn gradient-border-btn primary-btn border-none lg:hidden"
+          to="/contact"
+          @click.native="$mixpanel.track('tap_frontend_landing_cta')"
+        >
+          <span class="sub-h3-semibold"
+            >Talk to Frontend Experts</span
+          ></nuxt-link
+        >
+      </div>
+    </div>
+  </section>
+</template>
+<script setup>
+import landing400 from "@/assets/images/frontend-development/landing/landing400w.webp";
+import landing800 from "@/assets/images/frontend-development/landing/landing800w.webp";
+import landing1200 from "@/assets/images/frontend-development/landing/landing1200w.webp";
+import landing2400 from "@/assets/images/frontend-development/landing/landing2400w.webp";
+const { $mixpanel } = useNuxtApp();
+</script>

nuxt-frontend/components/jobs/VirtuesView.vue

@@ -8,7 +8,7 @@
       Canopas is built on the 10 virtues
     </div>
     <div class="text-center container mt-8 mb-14 lg:mb-28 sm:p-0">
-      <div class="flex-div flex flex-wrap m-auto lg:w-[85%]">
+      <div class="flex flex-wrap m-auto lg:w-[85%]">
         <div
           class="relative basis-full lg:basis-[33%]"
           v-for="virtue in virtues.slice(0, 3)"
@@ -49,7 +49,7 @@
           </div>
         </div>
       </div>
-      <div class="flex-div flex flex-wrap m-auto lg:w-3/5">
+      <div class="flex flex-wrap m-auto lg:w-3/5">
         <div
           class="relative basis-full lg:basis-1/2"
           v-for="virtue in virtues.slice(3, 5)"
@@ -91,7 +91,7 @@
           </div>
         </div>
       </div>
-      <div class="flex-div flex flex-wrap m-auto lg:w-[85%]">
+      <div class="flex flex-wrap m-auto lg:w-[85%]">
         <div
           class="relative basis-full lg:basis-[33%]"
           v-for="virtue in virtues.slice(5, 8)"
@@ -133,7 +133,7 @@
           </div>
         </div>
       </div>
-      <div class="flex-div flex flex-wrap m-auto lg:w-3/5">
+      <div class="flex flex-wrap m-auto lg:w-3/5">
         <div
           class="relative basis-full lg:basis-1/2"
           v-for="virtue in virtues.slice(8, 10)"

nuxt-frontend/components/services/WhatWeOfferDesktop.vue

@@ -121,6 +121,8 @@ export default {
           title: "Frontend Development",
           description:
             "The front end is the first point of interaction between your users and your app, making its design and functionality crucial. We focus on creating interactive, visually stunning, and easy-to-navigate interfaces that make your digital presence stand out, promoting enhanced user satisfaction and brand loyalty. ",
+          url: "/frontend-development",
+          showServices: config.SHOW_FRONTEND_DEVELOPMENT_PAGE,
         },
       ],
       lastScrollY: 0,

nuxt-frontend/components/services/WhatWeOfferMobile.vue

@@ -119,6 +119,8 @@ export default {
             "The front end is the first point of interaction between your users and your app, making its design and functionality crucial. We focus on creating interactive, visually stunning, and easy-to-navigate interfaces that make your digital presence stand out, promoting enhanced user satisfaction and brand loyalty. ",
           class:
             "bg-gradient-to-b from-[#BBDEFF] via-[#BBDEFF] to-white bg-gradient-[180deg] ",
+          url: "/frontend-development",
+          showServices: config.SHOW_FRONTEND_DEVELOPMENT_PAGE,
         },
       ],
     };