-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat : Blog Section for backend page
- Loading branch information
1 parent
0ef94b7
commit 1cf4fa4
Showing
18 changed files
with
203 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file added
BIN
+18.8 KB
nuxt-frontend/assets/images/backend-development/blogs/desktop/p1-1200w.webp
Binary file not shown.
Binary file added
BIN
+13.2 KB
nuxt-frontend/assets/images/backend-development/blogs/desktop/p1-800w.webp
Binary file not shown.
Binary file added
BIN
+19 KB
nuxt-frontend/assets/images/backend-development/blogs/desktop/p2-1200w.webp
Binary file not shown.
Binary file added
BIN
+12.2 KB
nuxt-frontend/assets/images/backend-development/blogs/desktop/p2-800w.webp
Binary file not shown.
Binary file added
BIN
+25.1 KB
nuxt-frontend/assets/images/backend-development/blogs/desktop/p3-1200w.webp
Binary file not shown.
Binary file added
BIN
+15.7 KB
nuxt-frontend/assets/images/backend-development/blogs/desktop/p3-800w.webp
Binary file not shown.
Binary file added
BIN
+46.2 KB
nuxt-frontend/assets/images/backend-development/blogs/desktop/p4-1200w.webp
Binary file not shown.
Binary file added
BIN
+22.4 KB
nuxt-frontend/assets/images/backend-development/blogs/desktop/p4-800w.webp
Binary file not shown.
Binary file added
BIN
+17.8 KB
nuxt-frontend/assets/images/backend-development/blogs/desktop/p5-1200w.webp
Binary file not shown.
Binary file added
BIN
+11.2 KB
nuxt-frontend/assets/images/backend-development/blogs/desktop/p5-800w.webp
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
194 changes: 194 additions & 0 deletions
194
nuxt-frontend/components/backend-development/BlogSection.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,194 @@ | ||
<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"> | ||
Our blogs | ||
</h2> | ||
<!-- Mobile UI start --> | ||
<div class="mt-4 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 text-left 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 mt-[4.5rem] xll:container"> | ||
<swiper | ||
:slidesPerView="3" | ||
:centeredSlides="true" | ||
:loop="true" | ||
:autoplay="{ | ||
delay: 2000, | ||
disableOnInteraction: false, | ||
}" | ||
:speed="2000" | ||
:spaceBetween="10" | ||
:modules="modules" | ||
:navigation="true" | ||
class="swiper-container" | ||
:breakpoints="{ | ||
'992': { | ||
slidesPerView: 2, | ||
}, | ||
'1200': { | ||
slidesPerView: 2.5, | ||
}, | ||
'1400': { | ||
slidesPerView: 3, | ||
}, | ||
'2400': { | ||
slidesPerView: 2.5, | ||
}, | ||
}" | ||
> | ||
<swiper-slide | ||
v-for="(blog, index) in backendblog" | ||
:key="index" | ||
class="cursor-pointer flex-flex-col pl-8" | ||
> | ||
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters