nav issue updated
This commit is contained in:
akash
parent
3c5a0059a3
commit
f4006f861f
@ -2828,7 +2828,10 @@ ul.footer-contact-info-widget .icon {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* background: linear-gradient(90deg, rgba(16, 32, 57, 0.90) 0%, rgba(11, 21, 38, 0.60) 56.25%, rgba(0, 0, 0, 0.00) 97.81%); */
|
||||
background: linear-gradient(90deg,
|
||||
rgba(55, 121, 185, 0.9) 0%,
|
||||
rgba(26, 31, 43, 0.6) 56.25%,
|
||||
rgba(20, 111, 248, 0) 97.81%) !important;
|
||||
}
|
||||
|
||||
.banner-area {
|
||||
|
||||
@ -761,7 +761,7 @@ body {
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%);
|
||||
z-index: 5;
|
||||
box-shadow: 0 8px 24px rgba(211, 61, 53, 0.35);
|
||||
/* box-shadow: 0 8px 24px rgba(211, 61, 53, 0.35); */
|
||||
}
|
||||
|
||||
.fo-hover-title {
|
||||
@ -11598,7 +11598,7 @@ body {
|
||||
|
||||
.pagination-wrapper {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 80px;
|
||||
/* padding-bottom: 80px; */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -12427,7 +12427,7 @@ body {
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%);
|
||||
z-index: 5;
|
||||
box-shadow: 0 8px 24px rgba(211, 61, 53, 0.35);
|
||||
/* box-shadow: 0 8px 24px rgba(211, 61, 53, 0.35); */
|
||||
}
|
||||
|
||||
.fo-hover-title {
|
||||
@ -13593,3 +13593,476 @@ body {
|
||||
margin-top: -50px;
|
||||
}
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------
|
||||
Home Page Blog Slider Styles
|
||||
----------------------------------------------------------- */
|
||||
.blog-slider-active .blog-slider-inner {
|
||||
margin: 0 -10px;
|
||||
}
|
||||
|
||||
.blog-slider-item {
|
||||
outline: none;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.blog-slider-inner .slick-dots {
|
||||
bottom: -40px;
|
||||
}
|
||||
|
||||
.blog-slider-inner .slick-dots li button:before {
|
||||
font-size: 12px;
|
||||
color: #3779b9;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.blog-slider-inner .slick-dots li.slick-active button:before {
|
||||
color: #3779b9;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Ensure 100% width on mobile as requested and handle container padding */
|
||||
@media (max-width: 767px) {
|
||||
.blog-section-one .small-container {
|
||||
padding-left: 15px !important;
|
||||
padding-right: 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.blog-slider-item {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.blog-style-one .blog-image img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-section-one.section-space.pb-0.pt-0 {
|
||||
padding-bottom: 80px !important;
|
||||
padding-top: 20px !important;
|
||||
}
|
||||
|
||||
.service-details__content-title,
|
||||
/* Refined Service Details Spacing (Blog Match) */
|
||||
.service-details__title {
|
||||
font-size: 34px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.service-details__dynamic-content {
|
||||
font-size: 18px;
|
||||
line-height: 1.8;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
/* .service-details__dynamic-content p {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
} */
|
||||
|
||||
.service-details__dynamic-content h3,
|
||||
.service-details__dynamic-content h4 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
/* margin-top: 25px; */
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.service-details__dynamic-content ul,
|
||||
.service-details__dynamic-content ol {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* Custom Service Details List */
|
||||
.service-details__benefit__list_custom {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.service-details__benefit__list_custom li {
|
||||
display: flex !important;
|
||||
align-items: flex-start !important;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px !important;
|
||||
line-height: 1.8;
|
||||
font-size: 16px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.service-details__benefit__list_custom li i {
|
||||
color: #3779b9;
|
||||
font-size: 18px;
|
||||
margin-top: 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.service-details__benefit__list_custom li .list-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.service-details__benefit__list_custom li b {
|
||||
color: #1a1f2b;
|
||||
font-weight: 700;
|
||||
font-size: 17px !important;
|
||||
display: inline;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.service-details__benefit__list_custom li p {
|
||||
margin: 0 !important;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* Small text utility */
|
||||
.small-text {
|
||||
font-size: var(--small-text-size) !important;
|
||||
}
|
||||
|
||||
/* Portfolio Cards Section (Pelocis Style) */
|
||||
.service-details__portfolio-cards {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.service-details__portfolio-cards {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.service-details__portfolio-cards {
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.home-contact-one .home-contact__card__list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px !important;
|
||||
border: 1px solid var(--pelocis-border-color, #DDDDDD);
|
||||
margin-bottom: 21px !important;
|
||||
border-radius: 10px !important;
|
||||
padding: 20px 0px !important;
|
||||
padding-right: 41px !important;
|
||||
padding-left: 89px !important;
|
||||
position: relative;
|
||||
transition: all 500ms ease;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.service-one .service-card {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 1px solid #DDDDDD;
|
||||
position: relative;
|
||||
transition: all 500ms ease-in-out;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.service-one .service-card__inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 40px 30px;
|
||||
transition: 0.5s ease-in-out;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.service-one .service-card__hover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
border: 1px solid #3779b9;
|
||||
background-position: center center;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.service-one .service-card__hover::after {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.service-one .service-card:hover .service-card__hover {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.service-one .service-card__shape {
|
||||
width: 218px;
|
||||
height: 80px;
|
||||
background-color: #3779b9;
|
||||
clip-path: polygon(36% 100%, 65% 100%, 100% 0px, 0px 0px);
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(0.6);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 1;
|
||||
transition: 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.service-one .service-card:hover .service-card__shape {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateX(-50%) scaleY(1);
|
||||
}
|
||||
|
||||
.service-one .service-card__icon {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 18px;
|
||||
background-color: #3779b9;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
transition: all 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.service-one .service-card__icon::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -22px;
|
||||
top: -22px;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background-color: #222222;
|
||||
transform: rotate(41deg);
|
||||
transition: all 500ms ease-in-out;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.service-one .service-card__icon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -22px;
|
||||
bottom: -22px;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background-color: #222222;
|
||||
transform: rotate(41deg);
|
||||
transition: all 500ms ease-in-out;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.service-one .service-card:hover .service-card__icon {
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
.service-one .service-card:hover .service-card__icon::before,
|
||||
.service-one .service-card:hover .service-card__icon::after {
|
||||
background-color: #3779b9;
|
||||
}
|
||||
|
||||
.service-one .service-card__title {
|
||||
font-size: 18px !important;
|
||||
font-weight: 700;
|
||||
line-height: 26px;
|
||||
color: #0f172a;
|
||||
margin-bottom: 10px !important;
|
||||
margin-top: 0 !important;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
transition: all 500ms ease;
|
||||
}
|
||||
|
||||
.service-one .service-card__text {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
color: #475569;
|
||||
margin-bottom: 12px !important;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
transition: all 500ms ease;
|
||||
}
|
||||
|
||||
.service-one .service-card__link {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #3779b9;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 500ms ease;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.service-one .service-card__link:hover {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
/* Typography Refinements */
|
||||
.service-details b {
|
||||
font-size: 17px !important;
|
||||
}
|
||||
|
||||
/* Sidebar Call Card Styling */
|
||||
:root {
|
||||
--insuba-white3: #f1f6f7;
|
||||
--insuba-black5: #0f3667;
|
||||
--insuba-white: #ffffff;
|
||||
--insuba-base: #0365d3;
|
||||
--insuba-base-rgb: 55, 121, 185;
|
||||
}
|
||||
|
||||
.sidebar__single+.sidebar__single {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.sidebar__call {
|
||||
position: relative;
|
||||
padding: 432px 17px 22px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar__call::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(180deg, transparent 30%, rgba(var(--insuba-base-rgb), 0.77)) 70%;
|
||||
border-radius: inherit;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.sidebar__call__logo {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
left: 18px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sidebar__call__inner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 26px;
|
||||
background-color: #343a40;
|
||||
border-radius: 43px;
|
||||
z-index: 1;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.sidebar__call__inner::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: #fff;
|
||||
bottom: 0;
|
||||
border: 6px solid #fff;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sidebar__call__icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 42px;
|
||||
color: #fff;
|
||||
background-color: #3779b9;
|
||||
border: 6px solid #fff;
|
||||
border-radius: 43px;
|
||||
}
|
||||
|
||||
.sidebar__call__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sidebar__call__title {
|
||||
margin: 0 0 5px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--insuba-white);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.sidebar__call__number {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: var(--insuba-white);
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
transition: all 500ms ease;
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animated {
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.fadeInUp {
|
||||
animation-name: fadeInUp;
|
||||
}
|
||||
@ -96,7 +96,7 @@ const HomeContactOne = () => {
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-6 d-flex align-items-center justify-content-center">
|
||||
<div className="home-contact__card" style={{ margin: '0 auto' }}>
|
||||
<div className="home-contact__card" style={{ marginBottom: '10px' }}>
|
||||
<div className="home-contact__card__content">
|
||||
<ul className="home-contact__card__list">
|
||||
<li>
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
import React, { useState, useEffect, useMemo } from "react";
|
||||
import { BlogData } from "@/utils/constant.utils";
|
||||
import Link from "next/link";
|
||||
import Slider from "react-slick";
|
||||
|
||||
const allBlogs = [...BlogData].sort(
|
||||
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
|
||||
@ -26,12 +27,31 @@ const BlogSection = ({
|
||||
columns = "col-xxl-4 col-xl-4 col-lg-6"
|
||||
}: BlogSectionProps) => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [isSlider, setIsSlider] = useState(false);
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
|
||||
// Reset to first page when filtering changes
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [searchTerm, selectedCategory]);
|
||||
|
||||
// Handle mount and resize
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
if (isPaginated) {
|
||||
setIsSlider(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const handleResize = () => {
|
||||
setIsSlider(window.innerWidth <= 1024);
|
||||
};
|
||||
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, [isPaginated]);
|
||||
|
||||
// Filter blogs based on search and category
|
||||
const filteredBlogs = useMemo(() => {
|
||||
let list = [...allBlogs];
|
||||
@ -48,6 +68,10 @@ const BlogSection = ({
|
||||
return list;
|
||||
}, [searchTerm, selectedCategory]);
|
||||
|
||||
if (!isMounted) {
|
||||
return null; // Avoid hydration mismatch
|
||||
}
|
||||
|
||||
// Total pages
|
||||
const totalPages = Math.ceil(filteredBlogs.length / blogsPerPage);
|
||||
|
||||
@ -88,9 +112,58 @@ const BlogSection = ({
|
||||
return pages;
|
||||
};
|
||||
|
||||
const sliderSettings = {
|
||||
dots: false,
|
||||
infinite: true,
|
||||
speed: 500,
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
arrows: false,
|
||||
autoplay: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 767, // Below 768px show 1 card
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<section className={`blog-section-one section-space ${isPaginated ? "pb-0 pt-0" : ""}`}>
|
||||
<div className="small-container p-0">
|
||||
<div className={`small-container ${isSlider ? "blog-slider-active" : ""}`}>
|
||||
{isSlider ? (
|
||||
<Slider {...sliderSettings} className="blog-slider-inner">
|
||||
{currentBlogs.map((blog) => (
|
||||
<div key={blog.id} className="blog-slider-item px-3">
|
||||
<div className="blog-style-one relative overflow-hidden">
|
||||
<Link className="blog-image w-img block relative" href={`/blog/${blog.slug}`}>
|
||||
<img src={blog.image} alt={blog.title} />
|
||||
<span className="blog-category-tag">{blog.category}</span>
|
||||
</Link>
|
||||
<div className="blog-content">
|
||||
<div className="post-meta">
|
||||
<span className="p-relative"><i className="fa-solid fa-user"></i> By Admin</span>
|
||||
<span className="p-relative"><i className="fa-solid fa-calendar-days"></i> {blog.date}</span>
|
||||
</div>
|
||||
<h5 className="blog-title mb-20 mt-15">
|
||||
<Link href={`/blog/${blog.slug}`}>{blog.title}</Link>
|
||||
</h5>
|
||||
<div className="blog-footer">
|
||||
<div className="blog-link-learn">
|
||||
<Link href={`/blog/${blog.slug}`} className="learn-more-link">
|
||||
Learn More <span>+</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
) : (
|
||||
<div className="row g-4">
|
||||
{currentBlogs.map((blog) => (
|
||||
<div key={blog.id} className={columns}>
|
||||
@ -102,7 +175,6 @@ const BlogSection = ({
|
||||
<div className="blog-content">
|
||||
<div className="post-meta">
|
||||
<span className="p-relative"><i className="fa-solid fa-user"></i> By Admin</span>
|
||||
{/* <span className="meta-separator">•</span> */}
|
||||
<span className="p-relative"><i className="fa-solid fa-calendar-days"></i> {blog.date}</span>
|
||||
</div>
|
||||
<h5 className="blog-title mb-20 mt-15">
|
||||
@ -125,6 +197,7 @@ const BlogSection = ({
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isPaginated && totalPages > 1 && (
|
||||
<div className="pagination-wrapper text-center">
|
||||
|
||||
@ -115,7 +115,7 @@ const FeaturesSection = () => {
|
||||
<div className="fo-shape-two"></div>
|
||||
</div>
|
||||
<div className="fo-container">
|
||||
<div className="history-two__title text-center">
|
||||
<div className="history-two__title text-center mb-4">
|
||||
<div className="sec-title">
|
||||
<div className="sec-title__shape"></div>
|
||||
<h6 className="sec-title__tagline">Strategic Digital Services</h6>
|
||||
|
||||
@ -4,7 +4,6 @@ import React, { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ServiceType } from "@/types";
|
||||
import { ourServices } from "@/utils/data";
|
||||
import "@/components/web-development-service/style.css";
|
||||
|
||||
interface ServiceDetailsProps {
|
||||
service: ServiceType;
|
||||
@ -48,20 +47,15 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="service-sidebar__single">
|
||||
<div className="service-sidebar__contact">
|
||||
<div className="service-sidebar__contact-bg"></div>
|
||||
<div className="service-sidebar__contact-icon">
|
||||
<i className="fa-solid fa-phone-volume"></i>
|
||||
</div>
|
||||
<h3 className="service-sidebar__contact-title">Free for This <br /> First Contact Now</h3>
|
||||
<p className="service-sidebar__contact-phone">
|
||||
<a href="tel:+11234751328">+11234 751 328</a>
|
||||
</p>
|
||||
<div className="service-sidebar__contact-btn">
|
||||
<Link href="/contact" className="theme-btn">
|
||||
CALL NOW
|
||||
</Link>
|
||||
<div className="sidebar__call sidebar__single wow fadeInUp animated" data-wow-duration="1500ms" style={{ backgroundImage: 'url("/assets/images/blog/blog-emergency-call.jpg")', visibility: 'visible', animationDuration: '1500ms', animationName: 'fadeInUp' }}>
|
||||
<img src="/favicon.ico" alt="logo" className="sidebar__call__logo" />
|
||||
<div className="sidebar__call__inner">
|
||||
<span className="sidebar__call__icon">
|
||||
<i className="fa-solid fa-phone"></i>
|
||||
</span>
|
||||
<div className="sidebar__call__content">
|
||||
<h4 className="sidebar__call__title">Call if Emergency!</h4>
|
||||
<a href="tel:+6476797651" className="sidebar__call__number">+1-647-679-7651</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -69,9 +63,9 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
|
||||
</div>
|
||||
<div className="col-md-12 col-lg-8">
|
||||
<div className="service-details__content">
|
||||
<div className="service-details__thumbnail">
|
||||
{/* <div className="service-details__thumbnail">
|
||||
<img src={service.bigImage} alt={service.title} />
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{service.content && (
|
||||
<div
|
||||
@ -83,6 +77,22 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-12 col-lg-12 mt-20">
|
||||
<div className="service-details__content">
|
||||
{/* <div className="service-details__thumbnail">
|
||||
<img src={service.bigImage} alt={service.title} />
|
||||
</div> */}
|
||||
|
||||
{service.fullcontent && (
|
||||
<div
|
||||
className="service-details__dynamic-content"
|
||||
dangerouslySetInnerHTML={{ __html: service.fullcontent }}
|
||||
/>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -188,285 +188,6 @@ h2,
|
||||
.heading1 h2,
|
||||
.consen-section-title h2,
|
||||
.vl-section-title,
|
||||
.service-details__content-title,
|
||||
/* Refined Service Details Spacing (Blog Match) */
|
||||
.service-details__title {
|
||||
font-size: 34px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.service-details__dynamic-content {
|
||||
font-size: 18px;
|
||||
line-height: 1.8;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
/* .service-details__dynamic-content p {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
} */
|
||||
|
||||
.service-details__dynamic-content h3,
|
||||
.service-details__dynamic-content h4 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
/* margin-top: 25px; */
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.service-details__dynamic-content ul,
|
||||
.service-details__dynamic-content ol {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* Custom Service Details List */
|
||||
.service-details__benefit__list_custom {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.service-details__benefit__list_custom li {
|
||||
display: flex !important;
|
||||
align-items: flex-start !important;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px !important;
|
||||
line-height: 1.8;
|
||||
font-size: 16px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.service-details__benefit__list_custom li i {
|
||||
color: #3779b9;
|
||||
font-size: 18px;
|
||||
margin-top: 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.service-details__benefit__list_custom li .list-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.service-details__benefit__list_custom li b {
|
||||
color: #1a1f2b;
|
||||
font-weight: 700;
|
||||
font-size: 17px !important;
|
||||
display: inline;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.service-details__benefit__list_custom li p {
|
||||
margin: 0 !important;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* Small text utility */
|
||||
.small-text {
|
||||
font-size: var(--small-text-size) !important;
|
||||
}
|
||||
|
||||
/* Portfolio Cards Section (Pelocis Style) */
|
||||
.service-details__portfolio-cards {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.service-details__portfolio-cards {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.service-details__portfolio-cards {
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.service-one .service-card {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 1px solid #DDDDDD;
|
||||
position: relative;
|
||||
transition: all 500ms ease-in-out;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.service-one .service-card__inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 40px 30px;
|
||||
transition: 0.5s ease-in-out;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.service-one .service-card__hover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
border: 1px solid #3779b9;
|
||||
background-position: center center;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.service-one .service-card__hover::after {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.service-one .service-card:hover .service-card__hover {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.service-one .service-card__shape {
|
||||
width: 218px;
|
||||
height: 80px;
|
||||
background-color: #3779b9;
|
||||
clip-path: polygon(36% 100%, 65% 100%, 100% 0px, 0px 0px);
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(0.6);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 1;
|
||||
transition: 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.service-one .service-card:hover .service-card__shape {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateX(-50%) scaleY(1);
|
||||
}
|
||||
|
||||
.service-one .service-card__icon {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 18px;
|
||||
background-color: #3779b9;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
transition: all 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.service-one .service-card__icon::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -22px;
|
||||
top: -22px;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background-color: #222222;
|
||||
transform: rotate(41deg);
|
||||
transition: all 500ms ease-in-out;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.service-one .service-card__icon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -22px;
|
||||
bottom: -22px;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background-color: #222222;
|
||||
transform: rotate(41deg);
|
||||
transition: all 500ms ease-in-out;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.service-one .service-card:hover .service-card__icon {
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
.service-one .service-card:hover .service-card__icon::before,
|
||||
.service-one .service-card:hover .service-card__icon::after {
|
||||
background-color: #3779b9;
|
||||
}
|
||||
|
||||
.service-one .service-card__title {
|
||||
font-size: 18px !important;
|
||||
font-weight: 700;
|
||||
line-height: 26px;
|
||||
color: #0f172a;
|
||||
margin-bottom: 10px !important;
|
||||
margin-top: 0 !important;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
transition: all 500ms ease;
|
||||
}
|
||||
|
||||
.service-one .service-card__text {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
color: #475569;
|
||||
margin-bottom: 12px !important;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
transition: all 500ms ease;
|
||||
}
|
||||
|
||||
.service-one .service-card__link {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #3779b9;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 500ms ease;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.service-one .service-card__link:hover {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
/* Typography Refinements */
|
||||
.service-details b {
|
||||
font-size: 17px !important;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
|
||||
@ -9,6 +9,7 @@ export interface ServiceType {
|
||||
description: string;
|
||||
slug?: string;
|
||||
content?: string;
|
||||
fullcontent?: string;
|
||||
faq?: { question: string; answer: string }[];
|
||||
metatitle?: string;
|
||||
metaDesc?: string;
|
||||
|
||||
@ -549,12 +549,20 @@ export const ourServices = [
|
||||
<h2 class="service-details__content-title">Website Development at Metatroncube: Crafting Digital Masterpieces</h2>
|
||||
<p class="service-details__text">In the digital age, a website is more than just a digital footprint; it’s a powerful tool that encapsulates the essence of your brand, the voice of your business, and the gateway to connect with a global audience. At Metatroncube Software Solutions, we understand that each website is a unique blend of art and functionality, an opportunity to impress, engage, and convert your visitors into loyal customers.</p>
|
||||
|
||||
<div class="service-details__benefit__img mb-40">
|
||||
<img src="/assets/images/services/service/web.webp" alt="benefit">
|
||||
</div>
|
||||
|
||||
<p class="service-details__text"><b>A website is not just an online destination; it’s a digital journey that starts with a single click.</b></p>
|
||||
|
||||
<p class="service-details__text">Our approach to website development goes beyond the technicalities of coding. We delve into the heart of your business, identifying and understanding your market, goals, and user needs. This allows us to create not just websites, but digital experiences that resonate with your audience, drive engagement, and foster growth.</p>
|
||||
|
||||
<p class="service-details__text">With a team of skilled developers, creative designers, and strategic thinkers, we harness the latest in web technologies and trends to develop websites that are not only visually stunning but also functionally robust. Whether you’re a startup looking to make your mark, a growing business ready to scale, or an established brand seeking to innovate, our comprehensive website development services are tailored to meet your specific needs.</p>
|
||||
|
||||
|
||||
`,
|
||||
fullcontent: `
|
||||
|
||||
|
||||
<h4 class="service-details__content-title">Our Approach to Website Development: A Blend of Innovation and User-Centric Design</h4>
|
||||
|
||||
<p class="service-details__text">At Metatroncube, our approach to website development is rooted in a deep understanding that each project is a unique endeavor with its own set of challenges and opportunities. We don’t just build websites; we craft digital experiences that resonate with your target audience and align with your business objectives.</p>
|
||||
@ -799,6 +807,7 @@ Robust Security</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
`,
|
||||
faq: [
|
||||
{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user