80 lines
4.9 KiB
TypeScript
80 lines
4.9 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import Link from "next/link";
|
|
import { ourServices } from "@/utils/data";
|
|
|
|
const HomeServiceOne: React.FC = () => {
|
|
return (
|
|
<section
|
|
className="service-one-home"
|
|
style={{ backgroundImage: 'url("/assets/images/home/5/bg-service.webp")' }}
|
|
>
|
|
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/home-services-shape-1.png" alt="pelocis" className="service-one-home__shape-one" />
|
|
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/home-services-shape-2.png" alt="pelocis" className="service-one-home__shape-two" />
|
|
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/home-services-shape-3.png" alt="pelocis" className="service-one-home__shape-three" /> */}
|
|
<div className="container">
|
|
<div className="row align-items-center justify-content-between">
|
|
<div className="col-lg-6">
|
|
<div className="service-one-home__title">
|
|
<div className="sec-title">
|
|
<div className="sec-title__shape">
|
|
</div>
|
|
<h6 className="sec-title__tagline">OUR SERVICES</h6>
|
|
<h3 className="sec-title__title text-white">We Shape the Perfect
|
|
Solution.</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-5">
|
|
<div className="service-one-home__text">
|
|
<p className="text-white">
|
|
At Metatroncube, we sculpt digital excellence, meticulously blending innovation with user-centric design to manifest your business vision. Partner with us to experience a seamless fusion of web & app development, SEO, digital marketing, and graphic design services. Our strategic solutions and unparalleled execution pave the way for your digital voyage. We are your navigators in the digital realm, steering your project from conception to completion with precision and creativity.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="swiper service-one-home__carousel mt-50">
|
|
<div className="swiper-wrapper">
|
|
{ourServices.slice(0, 6).map((service, index) => {
|
|
return (
|
|
<div key={index} className="swiper-slide">
|
|
<div className="item">
|
|
<div className="home-services__card">
|
|
<div className="home-services__card__shape--one"></div>
|
|
<div className="home-services__card__shape--two"></div>
|
|
<div className="home-services__card__content">
|
|
<div className="home-services__card__icon">
|
|
<img src={service.icon} alt="icon" width="42" height="42" />
|
|
</div>
|
|
<h4 className="home-services__card__count">--</h4>
|
|
<h2 className="home-services__card__title">
|
|
<Link href={`/services-digital-solutions/${service.slug}`}>{service.title}</Link>
|
|
</h2>
|
|
<p className="home-services__card__text">
|
|
{service.description.substring(0, 100)}...
|
|
</p>
|
|
</div>
|
|
<div className="home-services__card__image">
|
|
<img src={service.image} alt={service.title} />
|
|
<div className="home-services__card__hover">
|
|
<Link href={`/services-digital-solutions/${service.slug}`} className="home-services__card__hover-link">
|
|
<i className="fa-solid fa-arrow-right"></i>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default HomeServiceOne;
|