99 lines
5.1 KiB
JavaScript
99 lines
5.1 KiB
JavaScript
"use client";
|
|
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import { Autoplay } from "swiper";
|
|
import "swiper/css";
|
|
import { useState } from "react";
|
|
import ContactPopup from "./ContactPopup";
|
|
import Link from "next/link";
|
|
import ConsenHead from "@/src/ConsenHead";
|
|
|
|
const caseStudies = [
|
|
{ id: 1, img: "/assets/images/Mobile-app-development-service/discovery.webp", category: "Discovery & Strategy", title: "Understand your goals", link: "/portfolio-details" },
|
|
{ id: 2, img: "/assets/images/Mobile-app-development-service/wireframing.webp", category: "Wireframing & Design", title: "Stunning UI/UX layouts", link: "/portfolio-details" },
|
|
{ id: 3, img: "/assets/images/Mobile-app-development-service/coding.webp", category: "Development ", title: "Agile coding & testing", link: "/portfolio-details" },
|
|
{ id: 4, img: "/assets/images/Mobile-app-development-service/testing.webp", category: "Launch & Deployment", title: "Go live with confidence", link: "/portfolio-details" },
|
|
{ id: 5, img: "/assets/images/Mobile-app-development-service/support.webp", category: " Maintenance & Growth", title: "Continuous support", link: "/portfolio-details" },
|
|
];
|
|
|
|
export default function OurDevelopment() {
|
|
const [showPopup, setShowPopup] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<ConsenHead
|
|
title="Case Studies - Metatroncube Software Solutions | Innovative Tech in Waterloo"
|
|
description="Explore case studies showcasing how Metatroncube Software Solutions delivers innovative, user-centric digital products that drive growth."
|
|
/>
|
|
|
|
<div className="case-study-area color-bg">
|
|
<div className="container">
|
|
<div className="row case-study-bg align-items-center mb-40">
|
|
<div className="col-lg-6 col-md-6">
|
|
<div className="consen-section-title">
|
|
<h2>A Proven Process <span> for App Success</span></h2>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6 col-md-6">
|
|
<div className="consen-button text-right">
|
|
<a
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
setShowPopup(true);
|
|
}}
|
|
>
|
|
Start My App Journey
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
<Swiper
|
|
modules={[Autoplay]}
|
|
spaceBetween={30}
|
|
slidesPerView={3}
|
|
loop={true}
|
|
loopedSlides={caseStudies.length} // loop all slides
|
|
speed={4000} // sliding speed
|
|
autoplay={{
|
|
delay: 0, // no delay, continuous movement
|
|
disableOnInteraction: false,
|
|
pauseOnMouseEnter: false,
|
|
}}
|
|
allowTouchMove={true}
|
|
breakpoints={{
|
|
0: { slidesPerView: 1 },
|
|
768: { slidesPerView: 3 },
|
|
1200: { slidesPerView: 3 },
|
|
}}
|
|
className="case-study owl-carousel"
|
|
>
|
|
{caseStudies.concat(caseStudies).map((item, idx) => (
|
|
<SwiperSlide key={idx}>
|
|
<div className="case-study-single-box" style={{ textAlign: "left" }}>
|
|
<div className="case-study-thumb">
|
|
<img src={item.img} alt={item.title} />
|
|
<div className="case-study-content">
|
|
<div className="case-study-title content-new">
|
|
<h6>{item.category}</h6>
|
|
<h3>{item.title}</h3>
|
|
</div>
|
|
<div className="case-button">
|
|
<Link href={item.link}></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ContactPopup show={showPopup} onClose={() => setShowPopup(false)} />
|
|
</>
|
|
);
|
|
} |