diff --git a/public/assets/css/main.css b/public/assets/css/main.css index 70a4094..d278c7e 100644 --- a/public/assets/css/main.css +++ b/public/assets/css/main.css @@ -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 { diff --git a/src/app/globals.css b/src/app/globals.css index c0b6073..e138b7c 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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 { @@ -13592,4 +13592,477 @@ body { .video-three .video-three__inner { 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; } \ No newline at end of file diff --git a/src/components/home/HomeContactOne.tsx b/src/components/home/HomeContactOne.tsx index fb2ab8e..a24e53b 100644 --- a/src/components/home/HomeContactOne.tsx +++ b/src/components/home/HomeContactOne.tsx @@ -96,7 +96,7 @@ const HomeContactOne = () => {
-
+
  • diff --git a/src/components/home/home-1/BlogSection.tsx b/src/components/home/home-1/BlogSection.tsx index 295631f..6ea004a 100644 --- a/src/components/home/home-1/BlogSection.tsx +++ b/src/components/home/home-1/BlogSection.tsx @@ -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,43 +112,92 @@ 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 (
    -
    -
    - {currentBlogs.map((blog) => ( -
    -
    - - {blog.title} - {blog.category} - -
    -
    - By Admin - {/* • */} - {blog.date} -
    -
    - {blog.title} -
    -
    -
    - - Learn More + - +
    + {isSlider ? ( + + {currentBlogs.map((blog) => ( +
    +
    + + {blog.title} + {blog.category} + +
    +
    + By Admin + {blog.date} +
    +
    + {blog.title} +
    +
    +
    + + Learn More + + +
    -
    - ))} - {currentBlogs.length === 0 && ( -
    -

    No blogs found matching your criteria.

    -
    - )} -
    + ))} + + ) : ( +
    + {currentBlogs.map((blog) => ( +
    +
    + + {blog.title} + {blog.category} + +
    +
    + By Admin + {blog.date} +
    +
    + {blog.title} +
    +
    +
    + + Learn More + + +
    +
    +
    +
    +
    + ))} + {currentBlogs.length === 0 && ( +
    +

    No blogs found matching your criteria.

    +
    + )} +
    + )} {isPaginated && totalPages > 1 && (
    diff --git a/src/components/home/home-1/FeaturesSection.tsx b/src/components/home/home-1/FeaturesSection.tsx index d8530d0..93dd89f 100644 --- a/src/components/home/home-1/FeaturesSection.tsx +++ b/src/components/home/home-1/FeaturesSection.tsx @@ -115,7 +115,7 @@ const FeaturesSection = () => {
    -
    +
    Strategic Digital Services
    diff --git a/src/components/services-digital-solutions/ServiceDetails.tsx b/src/components/services-digital-solutions/ServiceDetails.tsx index 9ae091a..594949f 100644 --- a/src/components/services-digital-solutions/ServiceDetails.tsx +++ b/src/components/services-digital-solutions/ServiceDetails.tsx @@ -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 = ({ service }) => {
-
-
-
-
- -
-

Free for This
First Contact Now

-

- +11234 751 328 -

-
- - CALL NOW - +
+ logo +
+ + + +
+

Call if Emergency!

+ +1-647-679-7651
@@ -69,9 +63,9 @@ const ServiceDetails: React.FC = ({ service }) => {
-
+ {/*
{service.title} -
+
*/} {service.content && (
= ({ service }) => {
+
+
+ {/*
+ {service.title} +
*/} + + {service.fullcontent && ( +
+ )} + +
+
+
diff --git a/src/components/web-development-service/style.css b/src/components/web-development-service/style.css index d9ad5f9..1150928 100644 --- a/src/components/web-development-service/style.css +++ b/src/components/web-development-service/style.css @@ -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 { diff --git a/src/types/index.ts b/src/types/index.ts index 9bc6663..607820f 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -9,6 +9,7 @@ export interface ServiceType { description: string; slug?: string; content?: string; + fullcontent?: string; faq?: { question: string; answer: string }[]; metatitle?: string; metaDesc?: string; diff --git a/src/utils/data.ts b/src/utils/data.ts index 50f7998..ca37fbd 100644 --- a/src/utils/data.ts +++ b/src/utils/data.ts @@ -549,11 +549,19 @@ export const ourServices = [

Website Development at Metatroncube: Crafting Digital Masterpieces

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.

+
+ benefit +
+

A website is not just an online destination; it’s a digital journey that starts with a single click.

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.

+

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.

+ + + `, + fullcontent: ` -

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.

Our Approach to Website Development: A Blend of Innovation and User-Centric Design

@@ -799,6 +807,7 @@ Robust Security
+ `, faq: [ {