diff --git a/public/assets/images/services/workprocess/bg-shape.png b/public/assets/images/services/workprocess/bg-shape.png new file mode 100644 index 0000000..e39407b Binary files /dev/null and b/public/assets/images/services/workprocess/bg-shape.png differ diff --git a/public/assets/images/services/workprocess/branding.webp b/public/assets/images/services/workprocess/branding.webp new file mode 100644 index 0000000..0b09018 Binary files /dev/null and b/public/assets/images/services/workprocess/branding.webp differ diff --git a/public/assets/images/services/workprocess/comprehensive.webp b/public/assets/images/services/workprocess/comprehensive.webp new file mode 100644 index 0000000..eee2b6b Binary files /dev/null and b/public/assets/images/services/workprocess/comprehensive.webp differ diff --git a/public/assets/images/services/workprocess/icon/branding.webp b/public/assets/images/services/workprocess/icon/branding.webp new file mode 100644 index 0000000..ddc0c61 Binary files /dev/null and b/public/assets/images/services/workprocess/icon/branding.webp differ diff --git a/public/assets/images/services/workprocess/icon/comprehensive.webp b/public/assets/images/services/workprocess/icon/comprehensive.webp new file mode 100644 index 0000000..7e01afc Binary files /dev/null and b/public/assets/images/services/workprocess/icon/comprehensive.webp differ diff --git a/public/assets/images/services/workprocess/icon/strategic.webp b/public/assets/images/services/workprocess/icon/strategic.webp new file mode 100644 index 0000000..4559fa6 Binary files /dev/null and b/public/assets/images/services/workprocess/icon/strategic.webp differ diff --git a/public/assets/images/services/workprocess/left-img.webp b/public/assets/images/services/workprocess/left-img.webp new file mode 100644 index 0000000..e4b1fe0 Binary files /dev/null and b/public/assets/images/services/workprocess/left-img.webp differ diff --git a/public/assets/images/services/workprocess/strategic.webp b/public/assets/images/services/workprocess/strategic.webp new file mode 100644 index 0000000..2ecdc07 Binary files /dev/null and b/public/assets/images/services/workprocess/strategic.webp differ diff --git a/src/app/globals.css b/src/app/globals.css index c668f6e..0629aa9 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -8307,7 +8307,7 @@ body { } .sec-title__title { - font-size: 32px; + font-size: 30px; } .projects-one__filter__list li { @@ -8828,7 +8828,7 @@ body { @media (max-width: 767px) { .sec-title__title { - font-size: 26px; + font-size: 23px; } .sec-title__text-shape { @@ -12957,7 +12957,7 @@ body { font-size: 35px; color: var(--pelocis-black, #222222); font-weight: bold; - line-height: 46px; + line-height: 1.3; margin-top: 6px; } @@ -13321,6 +13321,12 @@ body { font-size: 12px !important; } + + .work-process-box-3 { + + margin-top: 0px; + + } } @media (max-width: 500px) { @@ -13344,7 +13350,7 @@ body { .sec-title__title { - font-size: 24px !important; + font-size: 20px !important; } @@ -14232,6 +14238,8 @@ body { opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; + position: relative; + top: -85px; } /* Strictly ONLY show content when active */ @@ -14420,7 +14428,7 @@ body { .hero-1 .slider-header span { font-size: 17px; font-weight: 700; - color: #4a3424; + color: #fff; margin-right: 15px; letter-spacing: -0.5px; } @@ -14520,7 +14528,7 @@ body { } .hero-1 .slider-category-title a { - color: #1a1f2b; + color: #fff; text-decoration: none; display: flex; align-items: center; @@ -14530,7 +14538,7 @@ body { } .hero-1 .slider-category-title a:hover { - color: #1a1f2b; + color: #fff; } .hero-1 .slider-category-title span { @@ -14732,6 +14740,14 @@ body { .main-shirt { max-width: 58%; } + + .hero-1 .slider-category-title { + padding-top: 15px; + text-align: center; + font-size: 15px; + font-weight: 900; + color: #1a1f2b; + } } /* 1540px */ @@ -14767,6 +14783,13 @@ body { max-width: 700px; padding-right: 0px; } + + .work-process-section-3 .left-shape { + position: absolute; + top: 0; + bottom: 0; + width: 520px !important; + } } /* 1360px */ @@ -14775,6 +14798,21 @@ body { padding: 200px 0 120px; } + .hero-1 .slider-category-title { + padding-top: 15px; + text-align: center; + font-size: 13px; + font-weight: 900; + color: #1a1f2b; + } + + .work-process-section-3 .left-shape { + position: absolute; + top: 0; + bottom: 0; + width: 380px !important; + } + .hero-content { flex: 0 0 48%; max-width: 48%; @@ -14800,6 +14838,13 @@ body { padding: 180px 0 120px; } + .work-process-section-3 .left-shape { + position: absolute; + top: 0; + bottom: 0; + width: 357px !important; + } + .hero-content h1 { font-size: 42px; margin-bottom: 20px; @@ -14807,7 +14852,7 @@ body { .theme-btn { padding: 18px 40px; - font-size: 14px; + font-size: 11px; } .our-services-slider { @@ -14832,12 +14877,30 @@ body { } .hero-content h1 { - font-size: 40px; + font-size: 36px; + } + + .banner-sub-title { + color: #fff; + font-size: 13px !important; + font-style: normal; + font-weight: 600; + line-height: 32px; + letter-spacing: 2px !important; + text-transform: uppercase; + margin-left: -46px !important; + margin-bottom: 10px !important; } .our-services-slider { max-width: 600px; } + + .hero-content p { + + font-size: 15px !important; + + } } /* 992px (Tablet) */ @@ -14846,6 +14909,31 @@ body { padding: 250px 0 80px; } + .hero-1 .slider-header span { + font-size: 17px; + font-weight: 700; + color: #1a1f2b !important; + margin-right: 15px; + letter-spacing: -0.5px; + } + + .hero-content { + + position: relative; + top: 0px !important; + + } + + .hero-1 .slider-category-title a { + color: #1a1f2b !important; + text-decoration: none; + display: flex; + align-items: center; + justify-content: center; + gap: 5px; + transition: color 0.3s; + } + .banner-pagination { display: none !important; @@ -14917,6 +15005,10 @@ body { .hero-1 .main-shirt { max-width: 60%; } + + .section-padding { + padding: 60px 0 60px !important; + } } /* 500px */ @@ -14927,7 +15019,7 @@ body { } .hero-1 .slider-category-title a { - font-size: 10px !important; + font-size: 12px !important; } .hero-1 .hero-content h1 { @@ -14957,7 +15049,7 @@ body { } .hero-1 .hero-content p { - font-size: 15px; + font-size: 13px; } .hero-1 .theme-btn { @@ -15001,4 +15093,321 @@ body { .custom-container { max-width: 1650px; } +} + +/* ----------------------------------------------------------- + Careers Work Process Section + ----------------------------------------------------------- */ +.work-process-section-3 { + position: relative; + z-index: 1; +} + +.section-padding { + padding: 80px 0 80px !important; +} + +.work-process-section-3 .left-shape { + position: absolute; + top: 0; + bottom: 0; + /* width: 520px; */ +} + +.work-process-section-3 .left-shape img { + height: 100%; + width: 100%; +} + +.section-title { + position: relative; + z-index: 99; + margin-bottom: 30px; + margin-top: -7px; +} + +.work-process-box-3 { + margin-top: 30px; + text-align: center; + position: relative; +} + +.work-process-box-3::before { + position: absolute; + top: 100px; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + content: ""; + background-position: center; + background-repeat: no-repeat; + background-image: url("/assets/images/services/workprocess/bg-shape.png"); + transition: all 0.4s ease-in-out; +} + +.work-process-box-3:hover::before { + background-image: var(--hover-bg, url("/assets/images/services/workprocess/bg-shape.png")); +} + +.work-process-box-3 .content { + padding: 40px 60px; + position: relative; + z-index: 9; +} + +.work-process-box-3 .content::before { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 80%; + content: ""; + background: #fff; + border-radius: 5px 5px 5px 125px; + max-width: 370px; + box-shadow: 0px 0px 40px 0px rgba(42, 35, 115, 0.06); + margin: 0 auto; + z-index: -1; + transition: all 0.4s ease-in-out; +} + +.work-process-box-3:hover .content::before { + height: 100%; + background: #1a1f2b; + border-radius: 5px 5px 5px 125px; +} + +@media (max-width: 1199px) { + .work-process-box-3 .content::before { + max-width: initial; + height: 100%; + } +} + +.work-process-box-3 .content .step { + border-radius: 22.5px; + width: 60px; + height: 137px; + line-height: 137px; + background: linear-gradient(180deg, #3779b9 0%, #07172b 100%); + color: #fff; + display: inline-block; + position: absolute; + bottom: 86px; + right: 26px; + transition: all 0.4s ease-in-out; +} + +.work-process-box-3:hover .content .step { + background: linear-gradient(180deg, #fff 0%, #c0d9f0 100%); + color: #07172b; + bottom: 96px; +} + +.work-process-box-3 .content .step span { + transform: rotate(-90deg); + display: inline-block; +} + +.work-process-box-3 .content h3 { + font-size: 22px; + font-weight: 700; + line-height: 1.3; + margin-bottom: 15px; + transition: color 0.4s ease-in-out; +} + +.work-process-box-3 .content p { + transition: color 0.4s ease-in-out; +} + +.work-process-box-3:hover .content h3 { + color: #fff; +} + +.work-process-box-3:hover .content p { + color: rgba(255, 255, 255, 0.8); +} + +.work-process-box-3 .icon { + width: 138px; + height: 138px; + line-height: 158px; + background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%); + background-size: 200% auto; + border-radius: 50%; + margin: 40px auto 0; + position: relative; + font-size: 70px; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.5s ease-in-out; + z-index: 1; +} + +.work-process-box-3:hover .icon { + background-position: right center; + transform: rotateY(360deg); + box-shadow: 0 0 30px rgba(55, 121, 185, 0.5); +} + +.work-process-box-3 .icon::before { + position: absolute; + top: 50%; + left: 50%; + width: 160px; + height: 160px; + border-radius: 50%; + background: linear-gradient(180deg, transparent 30%, rgba(var(--insuba-base-rgb), 0.77)) 70% !important; + transform: translate(-50%, -50%); + content: ""; + z-index: -1; + transition: background 0.4s ease-in-out; +} + +.work-process-box-3:hover .icon::before { + background: rgba(55, 121, 185, 0.12); +} + +/* Responsive Containers per requirements */ +@media (min-width: 1400px) { + .container { + max-width: 1320px; + } +} + +@media (min-width: 1200px) { + .container { + max-width: 1140px; + } +} + +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 720px; + } + + +} + +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} + +/* Specific viewports requested */ + +@media (max-width: 1024px) { + + .work-process-section-3 .left-shape img { + display: none !important; + } + +} + +@media (max-width: 992px) { + .work-process-box-3 .content { + padding: 30px 20px; + } +} + +@media (max-width: 500px) { + .work-process-box-3 .content .step { + right: 10px; + height: 100px; + line-height: 100px; + width: 40px; + bottom: 50px; + } +} + +@media (max-width: 475px) {} + +@media (max-width: 425px) { + .work-process-box-3 .icon { + width: 100px; + height: 100px; + font-size: 50px; + } + + .work-process-box-3 .icon::before { + width: 120px; + height: 120px; + } +} + +@media (max-width: 320px) {} + +/* Tagline & Title for Careers WP3 */ +.wp3-tagline { + display: block; + font-size: 14px; + font-weight: 500; + color: #888; + letter-spacing: 1px; + margin-bottom: 10px; + text-align: center; +} + +.wp3-title { + font-size: clamp(28px, 4vw, 42px); + font-weight: 700; + color: #07172b; + line-height: 1.25; + text-align: center; + margin: 0 auto 10px; + max-width: 600px; +} + +/* Dashed connector row (matches reference dots + line) */ +.wp3-connector { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 830px; + margin: 18px auto 10px; + position: relative; + padding: 0 60px; +} + +.wp3-connector-line { + position: absolute; + top: 50%; + left: 60px; + right: 60px; + height: 2px; + border-top: 2px dashed #3779b9; + transform: translateY(-50%); + z-index: 0; +} + +.wp3-connector-dot { + width: 12px; + height: 12px; + border-radius: 50%; + background: #3779b9; + border: 2px solid #3779b9; + position: relative; + z-index: 1; + flex-shrink: 0; +} + +/* Hide connector on small screens */ +@media (max-width: 768px) { + .wp3-connector { + display: none; + } } \ No newline at end of file diff --git a/src/app/services-digital-solutions/page.tsx b/src/app/services-digital-solutions/page.tsx index 9c27fe0..41a15c5 100644 --- a/src/app/services-digital-solutions/page.tsx +++ b/src/app/services-digital-solutions/page.tsx @@ -11,6 +11,7 @@ import PageHeader from "@/components/common/PageHeader"; import AboutTwo from "@/components/home/AboutTwo"; import ResultsSection from "@/components/about/Results"; import MetatronInitializer from "@/components/MetatronInitializer"; +import CareersWorkProcess from "@/components/careers/CareersWorkProcess"; export const metadata: Metadata = { title: "Metatroncube | Digital Solutions: Web, Mobile & SEO Experts", @@ -31,7 +32,8 @@ export default function Home3() { bannerLeftImage="/assets/images/innerbanner/left/left-services.webp" bannerRightImage="/assets/images/innerbanner/right/right-services.webp" /> - + {/* */} + diff --git a/src/components/careers/CareersWorkProcess.tsx b/src/components/careers/CareersWorkProcess.tsx new file mode 100644 index 0000000..261d942 --- /dev/null +++ b/src/components/careers/CareersWorkProcess.tsx @@ -0,0 +1,119 @@ +"use client"; + +import React, { useEffect, useRef } from "react"; + +const CareersWorkProcess = () => { + const sectionRef = useRef(null); + + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const elements = entry.target.querySelectorAll(".wow"); + elements.forEach((el) => { + const htmlEl = el as HTMLElement; + const delay = htmlEl.dataset.wowDelay || "0ms"; + setTimeout(() => { + htmlEl.classList.add("animated"); + htmlEl.classList.add("fadeInUp"); + htmlEl.style.visibility = "visible"; + }, parseFloat(delay.replace("s", "")) * 1000); + }); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.1 } + ); + + if (sectionRef.current) { + observer.observe(sectionRef.current); + } + + return () => observer.disconnect(); + }, []); + + /* ── Icons and hover backgrounds use static images ── */ + const processSteps = [ + { + id: 1, + stepText: "Step 01", + title: "Comprehensive digital development", + desc: "Expert web, app development and e-commerce solutions.", + delay: ".3s", + icon: "/assets/images/services/workprocess/icon/comprehensive.webp", + hoverBg: "/assets/images/services/workprocess/comprehensive.webp", + }, + { + id: 2, + stepText: "Step 02", + title: "Strategic online growth solutions", + desc: "Strategic SEO and digital marketing for growth.", + delay: ".5s", + icon: "/assets/images/services/workprocess/icon/strategic.webp", + hoverBg: "/assets/images/services/workprocess/strategic.webp", + }, + { + id: 3, + stepText: "Step 03", + title: "Creative design and branding excellence", + desc: "Creative graphic design and branding strategy services.", + delay: ".7s", + icon: "/assets/images/services/workprocess/icon/branding.webp", + hoverBg: "/assets/images/services/workprocess/branding.webp", + }, + ]; + + return ( +
+
+ shape +
+ +
+ {/* Heading */} +
+
+
+
Strategic Digital Services
+

Innovation & Growth

+
+
+ +
+ {processSteps.map((step) => ( +
+
+
+

{step.title}

+

{step.desc}

+
+ {step.title} +
+
+
+
+ ))} +
+
+
+ ); +}; + +export default CareersWorkProcess; diff --git a/src/components/home/home-1/AboutSection.tsx b/src/components/home/home-1/AboutSection.tsx index 2ea9bef..618f7e1 100644 --- a/src/components/home/home-1/AboutSection.tsx +++ b/src/components/home/home-1/AboutSection.tsx @@ -49,7 +49,7 @@ const AboutSection = () => {

Partner with Metatroncube Software Solutions and unlock a world of digital possibilities in web & app development, SEO, digital marketing, and graphic design services. Our commitment extends beyond mere product delivery; we focus on enhancing your market presence and driving business success with comprehensive digital strategies. Experience the unique Metatroncube advantage in every aspect of digital transformation.

-
+
Exceptional Digital Quality
@@ -58,7 +58,7 @@ const AboutSection = () => {
-
+
Expertise in innovation
@@ -67,7 +67,7 @@ const AboutSection = () => {
-
+
Comprehensive web solutions
diff --git a/src/components/home/home-1/BannerSection.tsx b/src/components/home/home-1/BannerSection.tsx index 6a36019..03fcfe1 100644 --- a/src/components/home/home-1/BannerSection.tsx +++ b/src/components/home/home-1/BannerSection.tsx @@ -130,7 +130,7 @@ const BannerSection = () => { {/* Bottom Right "Our Service" Slider */}
- Our Service + Our Service
diff --git a/src/components/home/home-2/About2Section.tsx b/src/components/home/home-2/About2Section.tsx index 23ae5fd..63edb6a 100644 --- a/src/components/home/home-2/About2Section.tsx +++ b/src/components/home/home-2/About2Section.tsx @@ -39,7 +39,7 @@ const About2Section = () => (

Metatroncube Software Solutions was born from a passion for technology and a vision to revolutionize digital interactions. Based in the heart of Waterloo's tech hub, we have been pioneering custom software solutions since 2019.

-
+
@@ -49,7 +49,7 @@ const About2Section = () => (
-
+
@@ -59,7 +59,7 @@ const About2Section = () => (
-
+