From 9e71cf37c1d325eb04b44098f5c637695280525b Mon Sep 17 00:00:00 2001 From: akash Date: Mon, 2 Mar 2026 16:14:30 +0530 Subject: [PATCH] new sections updated --- public/assets/image.png | Bin 0 -> 6501 bytes src/app/about-us/page.tsx | 6 +- src/app/blog/page.tsx | 4 +- src/app/careers/page.tsx | 41 + src/app/contact/page.tsx | 31 + src/app/globals.css | 2679 +++++++++++++++++ src/app/home-1/page.tsx | 2 + src/app/page.tsx | 19 +- src/app/services/page.tsx | 6 +- src/components/careers/AboutOneSection.tsx | 148 + src/components/careers/ContactSection.tsx | 129 + src/components/careers/FaqVideoSection.tsx | 179 ++ src/components/careers/ProcessSection.tsx | 123 + src/components/careers/ServiceSection.tsx | 144 + src/components/careers/WhyChooseSection.tsx | 111 + src/components/careers/WorkProcessSection.tsx | 127 + src/components/common/InnerBanner.tsx | 231 ++ src/components/home/OfferSection.tsx | 146 + .../home/home-1/FeaturesSection.tsx | 179 ++ 19 files changed, 4287 insertions(+), 18 deletions(-) create mode 100644 public/assets/image.png create mode 100644 src/app/careers/page.tsx create mode 100644 src/app/contact/page.tsx create mode 100644 src/components/careers/AboutOneSection.tsx create mode 100644 src/components/careers/ContactSection.tsx create mode 100644 src/components/careers/FaqVideoSection.tsx create mode 100644 src/components/careers/ProcessSection.tsx create mode 100644 src/components/careers/ServiceSection.tsx create mode 100644 src/components/careers/WhyChooseSection.tsx create mode 100644 src/components/careers/WorkProcessSection.tsx create mode 100644 src/components/common/InnerBanner.tsx create mode 100644 src/components/home/OfferSection.tsx create mode 100644 src/components/home/home-1/FeaturesSection.tsx diff --git a/public/assets/image.png b/public/assets/image.png new file mode 100644 index 0000000000000000000000000000000000000000..f023f108b189b429105731497ad2f5eda0e5c62e GIT binary patch literal 6501 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 CvUW=V literal 0 HcmV?d00001 diff --git a/src/app/about-us/page.tsx b/src/app/about-us/page.tsx index 62b1ffa..2f11c34 100644 --- a/src/app/about-us/page.tsx +++ b/src/app/about-us/page.tsx @@ -4,7 +4,7 @@ import React, { useEffect } from "react"; import Header2 from "@/components/layout/Header2"; import Footer2 from "@/components/layout/Footer2"; -import BannerSection from "@/components/home/home-3/BannerSection"; +import InnerBanner from "@/components/common/InnerBanner"; import FeaturesSection from "@/components/home/home-2/FeaturesSection"; import About2Section from "@/components/home/home-2/About2Section"; import ServiceTabSection from "@/components/home/home-2/ServiceTabSection"; @@ -20,6 +20,7 @@ import ChooseSection from "@/components/home/home-1/ChooseSection"; import FaqSection from "@/components/home/home-3/FaqSection"; import Header1 from "@/components/layout/Header1"; import Footer1 from "@/components/layout/Footer1"; +import OfferSection from "@/components/home/OfferSection"; export default function Home2() { useEffect(() => { @@ -37,11 +38,12 @@ export default function Home2() { <>
- + {/* */} + {/* */} diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx index c760581..27748a6 100644 --- a/src/app/blog/page.tsx +++ b/src/app/blog/page.tsx @@ -4,7 +4,7 @@ import React, { useEffect } from "react"; import Header1 from "@/components/layout/Header1"; import Footer1 from "@/components/layout/Footer1"; -import BannerSection from "@/components/home/home-3/BannerSection"; +import InnerBanner from "@/components/common/InnerBanner"; import AboutSection from "@/components/home/home-1/AboutSection"; import ServiceSliderSection from "@/components/home/home-1/ServiceSliderSection"; import CtaSection from "@/components/home/home-1/CtaSection"; @@ -26,7 +26,7 @@ export default function Home1() { <>
- +
diff --git a/src/app/careers/page.tsx b/src/app/careers/page.tsx new file mode 100644 index 0000000..fdd9ee6 --- /dev/null +++ b/src/app/careers/page.tsx @@ -0,0 +1,41 @@ +"use client"; + +import React, { useEffect } from "react"; +import Header1 from "@/components/layout/Header1"; +import Footer1 from "@/components/layout/Footer1"; +import InnerBanner from "@/components/common/InnerBanner"; +import AboutOneSection from "@/components/careers/AboutOneSection"; +import WhyChooseSection from "@/components/careers/WhyChooseSection"; +import FaqVideoSection from "@/components/careers/FaqVideoSection"; +import ContactSection from "@/components/careers/ContactSection"; +import ServiceSection from "@/components/careers/ServiceSection"; +import WorkProcessSection from "@/components/careers/WorkProcessSection"; +import FeaturesSection from "@/components/home/home-1/FeaturesSection"; + +export default function CareersPage() { + useEffect(() => { + if (typeof window !== "undefined" && (window as any).initMetatron) { + (window as any).initMetatron(); + } + }, []); + + return ( + <> + +
+ + + + + + + + +
+ + + ); +} diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx new file mode 100644 index 0000000..dba03bd --- /dev/null +++ b/src/app/contact/page.tsx @@ -0,0 +1,31 @@ +"use client"; + +import React, { useEffect } from "react"; +import Header1 from "@/components/layout/Header1"; +import Footer1 from "@/components/layout/Footer1"; +import InnerBanner from "@/components/common/InnerBanner"; +import HelpFormSection from "@/components/home/home-2/HelpFormSection"; + +export default function ContactPage() { + useEffect(() => { + const init = () => { + if (typeof window !== "undefined" && (window as any).initMetatron && (window as any).jQuery) { + (window as any).initMetatron(); + } else { + setTimeout(init, 100); + } + }; + init(); + }, []); + + return ( + <> + +
+ + +
+ + + ); +} diff --git a/src/app/globals.css b/src/app/globals.css index f87b9b5..736f136 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -8,4 +8,2683 @@ body { margin: 0; padding: 0; +} + +/* ═══════════════════════════════════════════════════════════ + Offer Section + ═══════════════════════════════════════════════════════════ */ +.secondary-bg { + background: #07172b; +} + +.offer-area { + position: relative; + overflow: hidden; + background: #070d1a; + padding-top: 120px; + padding-bottom: 200px; +} + +.offer__shadow { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 900px; + height: 900px; + border-radius: 50%; + background: radial-gradient(circle, rgba(60, 114, 252, 0.18) 0%, rgba(60, 114, 252, 0.06) 40%, transparent 70%); + pointer-events: none; + z-index: 0; +} + +.offer__shape-left { + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + z-index: 0; + pointer-events: none; +} + +.offer__shape-right { + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + z-index: 0; + pointer-events: none; +} + +.offer-area .container { + position: relative; + z-index: 1; + max-width: 1200px; + margin: 0 auto; + padding: 0 15px; +} + +.offer-header-row { + display: flex; + gap: 1rem; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + margin-bottom: 95px; +} + +.offer-section-header h5 { + display: flex; + align-items: center; + gap: 6px; + font-size: 14px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 2px; + color: #3c72fc; + margin: 0 0 12px; +} + +.offer-section-header h2 { + color: #ffffff; + font-size: clamp(1.6rem, 3vw, 2.4rem); + font-weight: 700; + line-height: 1.3; + margin: 0; +} + +.btn-one { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 13px 28px; + border: 1px solid rgba(255, 255, 255, 0.25); + border-radius: 50px; + color: #fff; + font-size: 15px; + font-weight: 500; + text-decoration: none; + white-space: nowrap; + transition: background 0.3s, border-color 0.3s; +} + +.btn-one:hover { + background: #3c72fc; + border-color: #3c72fc; +} + +/* Offer grid */ +.offer-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 1rem; +} + +@media (max-width: 1199px) { + .offer-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (max-width: 767px) { + .offer-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 479px) { + .offer-grid { + grid-template-columns: repeat(1, 1fr); + } +} + +/* Offer card */ +.offer__item { + border: 1px solid rgba(255, 255, 255, 0.18); + padding: 0 20px 20px; + border-radius: 8px; + text-align: center; + cursor: pointer; + position: relative; + transition: border-color 0.3s; +} + +/* corner-shape images */ +.offer__item .shape-top { + position: absolute; + top: -1px; + right: -1px; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s, visibility 0.3s; + pointer-events: none; +} + +.offer__item .shape-bottom { + position: absolute; + bottom: -1px; + left: -1px; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s, visibility 0.3s; + pointer-events: none; +} + +.offer__item:hover .shape-top, +.offer__item:hover .shape-bottom { + opacity: 1; + visibility: visible; +} + +/* Icon circle */ +.offer__icon { + width: 70px; + height: 70px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: linear-gradient(160deg, #2a5ee8 0%, #0a1a4a 100%); + box-shadow: 0 0 18px rgba(60, 114, 252, 0.45); + margin: -35px auto 0; + transition: background 1s, transform 1s, box-shadow 0.4s; +} + +.offer__item:hover .offer__icon { + background: linear-gradient(160deg, #3c72fc 0%, #1a3fa8 100%); + box-shadow: 0 0 28px rgba(60, 114, 252, 0.75); + transform: rotateY(360deg); +} + +/* card title */ +.offer__item h4 { + color: #fff; + font-size: 16px; + font-weight: 600; + margin: 20px 0 0; +} + +/* WOW fallback keyframes */ +@keyframes _bounceInUp { + 0% { + opacity: 0; + transform: translateY(60px); + } + + 60% { + opacity: 1; + transform: translateY(-12px); + } + + 80% { + transform: translateY(6px); + } + + 100% { + transform: translateY(0); + } +} + +@keyframes _fadeInLeft { + from { + opacity: 0; + transform: translateX(-30px); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes _fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes _fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes _fadeInLeft { + from { + opacity: 0; + transform: translateX(-40px); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes _fadeInRight { + from { + opacity: 0; + transform: translateX(40px); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes _fadeInUpBig { + from { + opacity: 0; + transform: translateY(80px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes _fadeInDownBig { + from { + opacity: 0; + transform: translateY(-80px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +.wow.bounceInUp { + animation: _bounceInUp 1.2s ease both; +} + +.wow.fadeInLeft { + animation: _fadeInLeft 1s ease both; +} + +.wow.fadeInUp { + animation: _fadeInUp 1s ease both; +} + +.wow.fadeIn { + animation: _fadeIn 1.5s ease both; +} + +.wow.fadeInUpBig { + animation: _fadeInUpBig 1.5s ease both; +} + +.wow.fadeInDownBig { + animation: _fadeInDownBig 1.5s ease both; +} + +/* ═══════════════════════════════════════════════════════════ + Inner Banner + ═══════════════════════════════════════════════════════════ */ +.banner__inner-page { + position: relative; + overflow: hidden; + z-index: 1; + text-transform: capitalize; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + padding-top: 180px; + padding-bottom: 180px; +} + +.banner__inner-page::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(270.07deg, #002b98 0.07%, #00060c 99.95%); + z-index: -1; + opacity: 0.82; +} + +.banner__inner-page .ib-shape1, +.banner__inner-page .ib-shape2 { + position: absolute; + left: 0; + bottom: 0; + z-index: -1; + pointer-events: none; +} + +.banner__inner-page .ib-shape3 { + position: absolute; + right: 0; + bottom: 0; + z-index: -1; + pointer-events: none; +} + +.banner__inner-page .ib-container { + position: relative; + z-index: 2; + max-width: 1200px; + margin: 0 auto; + padding: 0 15px; +} + +.banner__inner-page h2 { + font-size: 40px; + line-height: 48px; + color: #ffffff; + margin-bottom: 10px; + font-weight: 700; +} + +.banner__inner-page .breadcrumb-list { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 4px; + font-size: 15px; +} + +.banner__inner-page .breadcrumb-list a { + color: #ffffff; + text-decoration: none; + transition: color 0.3s; +} + +.banner__inner-page .breadcrumb-list a:hover { + color: #3c72fc; +} + +.banner__inner-page .breadcrumb-list span { + color: rgba(255, 255, 255, 0.75); + display: flex; + align-items: center; + gap: 4px; +} + +.banner__inner-page .breadcrumb-list i { + font-size: 13px; + color: #3c72fc; +} + +@keyframes swayX { + 0% { + transform: translateX(0); + } + + 50% { + transform: translateX(-18px); + } + + 100% { + transform: translateX(0); + } +} + +.sway__animationX { + animation: swayX 4s ease-in-out infinite; + display: block; +} + +@keyframes _slideInLeft { + from { + opacity: 0; + transform: translateX(-80px); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes _slideInRight { + from { + opacity: 0; + transform: translateX(80px); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +.wow.slideInLeft { + animation: _slideInLeft 1.2s ease both; +} + +.wow.slideInRight { + animation: _slideInRight 1.2s ease both; +} + +@media (max-width: 768px) { + .banner__inner-page { + padding-top: 120px; + padding-bottom: 120px; + } + + .banner__inner-page h2 { + font-size: 28px; + line-height: 36px; + } + + .banner__inner-page .ib-shape3 { + display: none; + } +} + +/* ═══════════════════════════════════════════════════════════ + Features One (fo-) Section + ═══════════════════════════════════════════════════════════ */ + +/* --- CSS Variables (shared) --- */ +:root { + --getizy-base: #D33D35; + --getizy-base-two: #FB8459; + --getizy-secondary: #222230; + --getizy-white: #FFFFFF; + --getizy-white-rgb: 255, 255, 255; + --getizy-text: #7F7D86; +} + +/* --- Section --- */ +.fo-section { + position: relative; + overflow: visible; + background: #f5f0ec; + padding-top: 120px; + padding-bottom: 120px; +} + +/* --- Background shapes --- */ +.fo-shapes { + position: absolute; + inset: 0; + pointer-events: none; + z-index: 0; + overflow: hidden; +} + +.fo-shape-one { + position: absolute; + width: 600px; + height: 600px; + border-radius: 50%; + opacity: 0.06; + background: radial-gradient(circle, var(--getizy-base) 0%, transparent 70%); + top: -200px; + left: -200px; +} + +.fo-shape-two { + position: absolute; + width: 600px; + height: 600px; + border-radius: 50%; + opacity: 0.06; + background: radial-gradient(circle, var(--getizy-base) 0%, transparent 70%); + bottom: -200px; + right: -200px; +} + +/* --- Container --- */ +.fo-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 15px; + position: relative; + z-index: 1; +} + +/* --- Row --- */ +.fo-row { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: 30px; + justify-content: center; + /* Extra top padding so the hover icon circle (50px above card) has room */ + padding-top: 60px; +} + +/* --- Col --- */ +.fo-col { + flex: 1 1 300px; + max-width: 360px; + /* Extra top space so the hover card icon badge doesn't clip at top */ + padding-top: 50px; +} + +/* ── Item is the full stacked unit ── */ +.fo-item { + position: relative; + /* The hover card is absolutely placed AT THE TOP of .fo-item, + so .fo-item itself does NOT need padding-top */ +} + +/* ══════════════════════════════════ + HOVER OVERLAY CARD (gradient stripe) + Sits OVER the main dark card top + ══════════════════════════════════ */ +.fo-hover-card { + position: absolute; + /* Start fully hidden above the card */ + top: -74px; + left: 0; + right: 0; + z-index: 4; + background: linear-gradient(135deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%); + padding: 50px 75px 20px 23px; + visibility: hidden; + opacity: 0; + transform: translateY(-30px); + transition: opacity 500ms ease, visibility 500ms ease, transform 500ms ease; + /* Height matches the card top section */ + min-height: 160px; +} + +/* Show on hover or when active */ +.fo-item:hover .fo-hover-card, +.fo-item--active .fo-hover-card { + visibility: visible; + opacity: 1; + transform: translateY(0); +} + +/* Icon badge that sticks UP above the hover card */ +.fo-hover-icon { + position: absolute; + top: -50px; + left: 50%; + transform: translateX(-50%); + width: 84px; + height: 84px; + border-radius: 50%; + display: flex; + align-items: center; + 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); +} + +.fo-hover-title { + font-size: 22px; + font-weight: 700; + line-height: 1.3; + color: #fff; + margin: 10px 0 0; +} + +/* Arrow button top-right of hover card */ +.fo-hover-btn { + position: absolute; + top: 0; + right: 0; + width: 76px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background: rgba(255, 255, 255, 0.15); + text-decoration: none; + transition: background 0.3s; +} + +.fo-hover-btn:hover { + background: rgba(255, 255, 255, 0.28); +} + +/* ══════════════════════════════════ + MAIN CARD + ══════════════════════════════════ */ +.fo-card { + position: relative; + z-index: 1; +} + +/* ── Top: dark bg → white on hover ── */ +.fo-card-top { + position: relative; + background-color: var(--getizy-secondary); + padding: 28px 28px 30px 28px; + min-height: 160px; + display: flex; + flex-direction: column; + justify-content: flex-start; + transition: background-color 0.45s ease; + border-left: 2px solid transparent; + border-right: 2px solid transparent; + border-top: none; + border-bottom: none; +} + +.fo-item:hover .fo-card-top, +.fo-item--active .fo-card-top { + background-color: #fff; + border-left: 2px solid var(--getizy-secondary); + border-right: 2px solid var(--getizy-secondary); +} + +.fo-card-title { + font-size: 22px; + font-weight: 700; + line-height: 1.3; + color: #fff; + margin: 0 0 16px; + transition: color 0.45s ease; +} + +.fo-item:hover .fo-card-title, +.fo-item--active .fo-card-title { + color: var(--getizy-secondary); +} + +/* Arrow btn top-right of main card */ +.fo-card-btn { + display: none; +} + +.fo-item:hover .fo-card-btn, +.fo-item--active .fo-card-btn { + background: var(--getizy-secondary); +} + +.fo-card-desc { + font-size: 14px; + line-height: 1.7; + color: var(--getizy-text); + margin: 0; + transition: color 0.45s ease; +} + +.fo-item:hover .fo-card-desc, +.fo-item--active .fo-card-desc { + color: var(--getizy-text); +} + +/* ── Bottom: white section with image ── */ +.fo-card-bottom { + background-color: #fff; + padding: 20px 20px 20px 20px; + position: relative; + border: 2px solid transparent; + border-image: linear-gradient(90deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%); + border-image-slice: 1; + transition: padding 0.45s ease, border 0.45s ease; +} + +.fo-item:hover .fo-card-bottom, +.fo-item--active .fo-card-bottom { + border-image: none; + border-color: var(--getizy-secondary); + border-style: solid; + border-width: 2px; + border-top: none; + padding: 0 32px 40px 32px; +} + +.fo-card-image { + width: 100%; + height: 126px; + overflow: hidden; +} + +/* Floating icon circle at bottom-left of the image area */ +.fo-card-icon { + position: absolute; + bottom: -48px; + left: 18px; + width: 96px; + height: 96px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(90deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%); + z-index: 3; + box-shadow: 0 8px 24px rgba(211, 61, 53, 0.35); + transition: opacity 500ms ease, transform 500ms ease; +} + +.fo-item:hover .fo-card-icon, +.fo-item--active .fo-card-icon { + opacity: 0; + transform: rotateY(180deg); +} + +/* ══════════════════════════════════ + Responsive + ══════════════════════════════════ */ +@media (max-width: 991px) { + .fo-row { + gap: 20px; + } + + .fo-col { + flex: 1 1 260px; + max-width: 320px; + } +} + +@media (max-width: 767px) { + .fo-col { + flex: 1 1 100%; + max-width: 100%; + } + + .fo-section { + padding-top: 80px; + padding-bottom: 80px; + } +} + +.features-one .row { + display: flex; + flex-wrap: wrap; + margin: 0 -15px; +} + +.features-one .col-lg-4 { + width: 33.3333%; + padding: 0 15px; + box-sizing: border-box; +} + +.features-one .col-md-6 { + width: 50%; + padding: 0 15px; + box-sizing: border-box; +} + +.gutter-y-80>* { + margin-bottom: 80px; +} + +/* --- Section wrapper --- */ +.features-one { + padding-top: 250px; + position: relative; + overflow: hidden; + padding-bottom: 170px; +} + +/* --- Background shapes --- */ +.features-one__shapes { + position: absolute; + inset: 0; + pointer-events: none; + z-index: 0; +} + +.body-shape-one, +.body-shape-two { + position: absolute; + width: 500px; + height: 500px; + border-radius: 50%; + opacity: 0.04; + background: radial-gradient(circle, var(--getizy-base) 0%, transparent 70%); +} + +.body-shape-one { + top: -150px; + left: -150px; +} + +.body-shape-two { + bottom: -150px; + right: -150px; +} + +.features-one .container { + position: relative; + z-index: 1; +} + +/* --- Item wrapper --- */ +.features-one__item { + position: relative; + padding-top: 80px; + /* space for the hover overlay that sits above */ +} + +/* --- Hover overlay card (slides in from top) --- */ +.features-one__card__hover { + position: absolute; + top: -80px; + left: 0; + right: 0; + z-index: 2; + background: linear-gradient(135deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%); + padding: 30px 40px 30px 40px; + visibility: hidden; + opacity: 0; + transform: translateY(-50px); + transition: opacity 500ms ease, visibility 500ms ease, transform 500ms ease; +} + +.features-one__item:hover .features-one__card__hover, +.features-one__card__hover__active .features-one__card__hover { + visibility: visible; + transform: translateY(0%); + opacity: 1; +} + +.features-one__card__hover__title { + font-size: 24px; + font-weight: 700; + line-height: 1.3; + color: var(--getizy-white); + margin: 0 0 0 0; + padding-right: 50px; +} + +.features-one__card__hover__btn { + width: 80px; + height: 90px; + background-color: rgba(var(--getizy-white-rgb), 0.15); + display: flex; + align-items: center; + justify-content: center; + position: absolute; + right: 0; + top: 0; + text-decoration: none; + color: var(--getizy-white); + font-size: 18px; + transition: background 0.3s; +} + +.features-one__card__hover__btn:hover { + background-color: rgba(var(--getizy-white-rgb), 0.25); +} + +.features-one__card__hover__icon { + position: absolute; + top: -40px; + left: 50%; + transform: translateX(-50%); + width: 80px; + height: 80px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%); + color: var(--getizy-white); + font-size: 32px; +} + +/* --- Main card --- */ +.features-one__card { + position: relative; + background: var(--getizy-white); +} + +/* Top wrap – default dark bg */ +.features-one__card__top__wrap { + display: flex; + flex-direction: column; + background-color: var(--getizy-secondary); + padding: 30px 40px 30px 40px; + position: relative; + transition: background-color 0.5s ease, border 0.5s ease; +} + +.features-one__item:hover .features-one__card__top__wrap, +.features-one__card__hover__active .features-one__card__top__wrap { + background-color: var(--getizy-white); + border-left: 2px solid var(--getizy-secondary); + border-right: 2px solid var(--getizy-secondary); + border-bottom: none; +} + +.features-one__card__title { + font-size: 24px; + font-weight: 700; + line-height: 1.3; + color: var(--getizy-white); + padding-bottom: 34px; + margin: 0; + padding-right: 50px; + transition: color 0.5s ease; +} + +.features-one__item:hover .features-one__card__title, +.features-one__card__hover__active .features-one__card__title { + color: var(--getizy-secondary); +} + +/* Arrow button in top wrap */ +.features-one__card__btn { + width: 80px; + height: 90px; + background-color: rgba(var(--getizy-white-rgb), 0.08); + display: flex; + align-items: center; + justify-content: center; + position: absolute; + right: 0; + top: 0; + text-decoration: none; + color: var(--getizy-white); + font-size: 18px; + transition: background 0.3s, color 0.3s; +} + +.features-one__item:hover .features-one__card__btn, +.features-one__card__hover__active .features-one__card__btn { + background-color: var(--getizy-secondary); + color: var(--getizy-white); +} + +.features-one__card__btn-two { + background-color: rgba(var(--getizy-white-rgb), 0.08); +} + +.features-one__card__desc { + font-size: 15px; + line-height: 1.7; + color: var(--getizy-text); + margin: 0; +} + +.features-one__item:hover .features-one__card__desc, +.features-one__card__hover__active .features-one__card__desc { + color: var(--getizy-text); +} + +/* Bottom wrap */ +.features-one__card__bottom__wrap { + background-color: var(--getizy-white); + padding: 20px; + position: relative; + border: 2px solid transparent; + border-image: linear-gradient(90deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%); + border-image-slice: 1; + transition: border 0.5s ease, padding 0.5s ease; +} + +.features-one__item:hover .features-one__card__bottom__wrap, +.features-one__card__hover__active .features-one__card__bottom__wrap { + border-top: none; + border-image: none; + border-color: var(--getizy-secondary); + border-style: solid; + border-width: 2px; + padding: 0px 40px 42px 40px; +} + +.features-one__card__image { + width: 100%; + height: 123px; + overflow: hidden; +} + +/* Floating icon circle */ +.features-one__card__icon { + position: absolute; + bottom: -50px; + left: 20px; + width: 100px; + height: 100px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(90deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%); + color: var(--getizy-white); + font-size: 36px; + transition: opacity 500ms ease, transform 500ms ease; + z-index: 3; +} + +.features-one__item:hover .features-one__card__icon, +.features-one__card__hover__active .features-one__card__icon { + opacity: 0; + transform: rotateY(180deg); +} + +/* --- Animate classes for scroll reveal --- */ +.features-one__item.wow.fadeInUp { + animation-name: _featuresOnefadeInUp; + animation-fill-mode: both; +} + +@keyframes _featuresOnefadeInUp { + from { + opacity: 0; + transform: translateY(40px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +/* icon fonts fallback sizing */ +.features-one__card__hover__icon span, +.features-one__card__icon span { + font-size: 36px; + color: var(--getizy-white); +} + +.icon-right-arrow::before { + content: "\2192"; +} + +/* --- Responsive --- */ +@media (max-width: 991px) { + .features-one .col-lg-4 { + width: 50%; + } + + .features-one { + padding-top: 160px; + padding-bottom: 100px; + } +} + +@media (max-width: 767px) { + + .features-one .col-lg-4, + .features-one .col-md-6 { + width: 100%; + } + + .features-one { + padding-top: 100px; + padding-bottom: 80px; + } +} + +/* ═══════════════════════════════════════════════════════════ + About One Section (Careers page) + ═══════════════════════════════════════════════════════════ */ + +/* --- Container / Row --- */ +.ao-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 15px; + position: relative; + z-index: 1; +} + +/* removed ao-grid classes as we are using standard bootstrap container/row/col-lg-7/5 */ + +/* --- Section --- */ +.about-one { + position: relative; + /* background-color: var(--getizy-secondary, #222230); */ + padding-bottom: 160px; + z-index: 1; + overflow: hidden; +} + +.about-one.section-space { + padding-top: 120px; +} + +/* dark texture bg */ +.about-one__bg { + /* background-image: url('/assets/img-app/bg/about-bg1.png'); */ + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + background-position: top left; + background-size: cover; + background-repeat: no-repeat; + opacity: 0.06; + z-index: 0; +} + +/* decorative shapes inherited from features-one */ +.about-one__shapes { + position: absolute; + inset: 0; + pointer-events: none; + z-index: 0; +} + +/* --- Images column --- */ +.about-one__images { + position: relative; + width: 100%; + height: 695px; +} + +.about-one__img__one { + width: 440px; + height: 625px; + position: relative; + overflow: hidden; + z-index: 1; + border-radius: 12px; +} + +.about-one__img__two { + width: 490px; + height: 485px; + position: absolute; + top: 155px; + /* Adjusting for center overlap */ + left: 200px; + overflow: hidden; + z-index: 2; + /* Now on top of img one */ + border-radius: 12px; +} + +/* Rotating logo circle */ +.about-one__logo__icon { + position: absolute; + top: 226px; + left: 585px; + transform: translate(-50%, -50%); + width: 164px; + height: 164px; + border-radius: 50%; + background-color: var(--getizy-secondary, #222230); + display: flex; + align-items: center; + justify-content: center; + animation: rotated2 10s infinite linear; + z-index: 10; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); +} + +.about-one__orange-bar { + position: absolute; + bottom: 0px; + left: 0px; + width: 120px; + height: 8px; + background: linear-gradient(90deg, var(--getizy-base, #D33D35) 0%, var(--getizy-base-two, #FB8459) 100%); + z-index: 10; + border-radius: 4px; +} + +@keyframes rotated2 { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +/* --- Content column --- */ +.about-one__wrapper { + position: relative; + z-index: 1; +} + +/* Big gradient circle behind content */ +.about-one__wrapper__bg__overlay { + position: absolute; + left: -280px; + top: 50%; + transform: translateY(-50%); + width: 950px; + height: 950px; + border-radius: 50%; + background: linear-gradient(145deg, var(--getizy-base, #D33D35) 0%, var(--getizy-base-two, #FB8459) 100%); + z-index: -1; + box-shadow: 0 0 50px rgba(0, 0, 0, 0.2); +} + +.about-one__wrapper__bg__overlay::after { + content: ""; + position: absolute; + top: 26px; + left: 47px; + width: 862px; + height: 862px; + border-radius: 50%; + background-color: transparent; + border: 2px solid var(--getizy-secondary, #222230); + animation: leftToRightThree 3s infinite linear; +} + +@keyframes leftToRightThree { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +.about-one__content { + position: relative; + z-index: 11; + padding-top: 50px; + /* padding-left: 20px; */ + /* Added slight padding for better alignment with the circle */ +} + +/* sec-title inside about-one */ +.ao-sec-title { + margin-bottom: 10px; +} + +.ao-sec-title .sec-title__tagline { + display: flex; + align-items: center; + gap: 8px; + font-size: 14px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 2px; + color: var(--getizy-white, #ffffff); + margin: 0 0 12px; +} + +.ao-diamond { + color: #fff; + margin-right: 10px; + font-size: 14px; +} + +.ao-sec-title .sec-title__title { + font-size: clamp(2.5rem, 5vw, 4.5rem); + font-weight: 700; + line-height: 1.1; + color: var(--getizy-white, #ffffff); + margin: 0 0 20px; +} + +/* body text */ +.about-one__content__desc { + font-size: 16px; + line-height: 30px; + color: #FFEEEA; + padding-bottom: 30px; + border-bottom: 1px solid rgba(255, 255, 255, 0.15); +} + +/* element strip */ +.about-one__content__eliment { + display: flex; + align-items: center; + position: relative; + padding: 15px; + background-color: var(--getizy-secondary, #222230); + border-radius: 8px; + margin-top: 35px; + max-width: 530px; +} + +.about-one__content__eliment__img-wrapper { + width: 100px; + height: 100px; + border-radius: 50%; + border: 4px solid var(--getizy-white, #ffffff); + overflow: hidden; + flex-shrink: 0; + z-index: 1; +} + +.about-one__content__eliment__img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.about-one__content__eliment__content { + padding-left: 20px; +} + +.about-one__content__eliment__title { + font-size: 20px; + font-weight: 700; + color: var(--getizy-white, #ffffff); + margin: 0; +} + +.about-one__content__eliment__desc { + font-size: 14px; + line-height: 1.6; + color: #FFEEEA; + margin: 0; +} + +/* checklist */ +.about-one__content__list { + list-style: none; + margin: 0; + padding: 0; + padding-top: 35px; +} + +.about-one__content__list li { + display: flex; + align-items: center; + gap: 10px; + font-size: 15px; + color: var(--getizy-white, #ffffff); + margin-bottom: 10px; +} + +.about-one__content__list li i { + color: var(--getizy-white, #ffffff); + font-size: 16px; +} + +/* Button */ +.getizy-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + font-size: 16px; + line-height: 1; + font-weight: 600; + color: var(--getizy-white, #ffffff); + padding: 20px 40px; + overflow: hidden; + z-index: 0; + background: linear-gradient(145deg, var(--getizy-base, #D33D35) 0%, var(--getizy-base-two, #FB8459) 100%); + cursor: pointer; + text-decoration: none; + transition: all 0.5s; +} + +.about-one__content .getizy-btn { + background: var(--getizy-secondary, #222230); + margin-top: 30px; +} + +.about-one__content .getizy-btn:hover { + background: linear-gradient(145deg, var(--getizy-base, #D33D35) 0%, var(--getizy-base-two, #FB8459) 100%); +} + +.btn-hover-cropping { + overflow: hidden; + position: relative; + transition: all 0.5s; +} + +/* --- Responsive --- */ +@media (max-width: 991px) { + + .ao-col-7, + .ao-col-5 { + width: 100%; + } + + .about-one__images { + height: 420px; + margin-bottom: 80px; + } + + .about-one__img__one { + width: 280px; + height: 420px; + } + + .about-one__img__two { + width: 300px; + height: 290px; + right: 10px; + bottom: -40px; + } + + .about-one__logo__icon { + top: 80px; + right: 60px; + width: 110px; + height: 110px; + } + + .about-one__wrapper__bg__overlay { + left: -100px; + top: -40px; + width: 600px; + height: 600px; + } + + .about-one__wrapper__bg__overlay::after { + width: 578px; + height: 578px; + } +} + +@media (max-width: 767px) { + .about-one { + padding-bottom: 80px; + } + + .about-one.section-space { + padding-top: 60px; + } + + .about-one__images { + height: 320px; + margin-bottom: 60px; + } + + .about-one__img__one { + width: 200px; + height: 320px; + } + + .about-one__img__two { + width: 220px; + height: 210px; + right: 0; + bottom: -30px; + } + + .about-one__logo__icon { + display: none; + } + + .about-one__content__eliment__content { + padding-left: 60px; + margin-left: 56px; + } +} + +/* ═══════════════════════════════════════════════════════════ + FAQ Section (faq-two) + ═══════════════════════════════════════════════════════════ */ +.faq-two { + position: relative; + background-color: #1b272a; + padding: 120px 0 289px; + clip-path: polygon(0 0, 100% 0, 100% 69%, 80% 100%, 20% 100%, 0% 69%); + z-index: 1; +} + +.faq-two__bg { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + opacity: 0.07; + z-index: -1; +} + +.faq-two__content { + position: relative; +} + +.faq-two__content__title { + font-size: 35px; + line-height: 46px; + font-weight: 700; + color: #fff; + margin: 0 0 21px; + padding-left: 17px; + position: relative; +} + +.faq-two__content__title::before { + content: ""; + position: absolute; + left: 0; + top: 5px; + bottom: 5px; + width: 2px; + background-color: var(--getizy-base, #D33D35); +} + +.faq-two__content__text { + color: rgba(255, 255, 255, 0.7); + margin-bottom: 30px; +} + +.faq-two__content__list { + margin: 0; + padding: 0; + list-style: none; +} + +.faq-two__content__list li { + display: flex; + align-items: center; + gap: 15px; + color: #fff; + font-weight: 700; + margin-bottom: 20px; +} + +.faq-two__content__list li i { + font-size: 24px; + color: var(--getizy-base, #D33D35); +} + +/* Accordion */ +.tolak-accrodion .accrodion { + background-color: #fff; + border-radius: 50px; + transition: all 500ms ease; + overflow: hidden; + margin-bottom: 10px; +} + +.tolak-accrodion .accrodion.active { + border-radius: 10px; +} + +.tolak-accrodion .accrodion-title { + padding: 19px 30px; + padding-right: 50px; + transition: all 500ms ease; + cursor: pointer; + position: relative; + z-index: 2; +} + +.tolak-accrodion .accrodion.active .accrodion-title { + background-color: #fb8459; + /* Using base-two for active title as seen in image */ + color: #fff; +} + +.tolak-accrodion .accrodion-title h4 { + margin: 0; + font-size: 18px; + font-weight: 700; + display: flex; + align-items: center; + gap: 10px; + color: inherit; +} + +.tolak-accrodion .accrodion-title__icon { + position: absolute; + right: 30px; + top: 50%; + transform: translateY(-50%); + width: 20px; + height: 20px; +} + +.tolak-accrodion .accrodion-title__icon::before, +.tolak-accrodion .accrodion-title__icon::after { + content: ""; + position: absolute; + background-color: currentColor; + transition: all 500ms ease; +} + +.tolak-accrodion .accrodion-title__icon::before { + width: 2px; + height: 12px; + left: 9px; + top: 4px; +} + +.tolak-accrodion .accrodion-title__icon::after { + width: 12px; + height: 2px; + left: 4px; + top: 9px; +} + +.tolak-accrodion .accrodion.active .accrodion-title__icon::before { + transform: rotate(90deg); + opacity: 0; +} + +.tolak-accrodion .accrodion-content { + display: none; + padding: 0 30px 25px; +} + +.tolak-accrodion .accrodion.active .accrodion-content { + display: block; +} + +.tolak-accrodion .inner { + display: flex; + align-items: center; + gap: 20px; + padding-top: 15px; +} + +.tolak-accrodion .inner__image { + flex-shrink: 0; +} + +/* ═══════════════════════════════════════════════════════════ + Video Section (video-three) + ═══════════════════════════════════════════════════════════ */ +.video-three { + position: relative; + z-index: 10; + padding-bottom: 120px; +} + +.video-three__inner { + position: relative; + background-position: top center; + background-repeat: no-repeat; + background-size: cover; + border-radius: 50px; + border: 13px solid #fff; + border-right-width: 10px; + border-left-width: 10px; + overflow: visible; + padding: 304px 0 0; + margin-top: -169px; + z-index: 1; +} + +.video-three__btn { + width: 250px; + height: 250px; + background-color: var(--getizy-base, #D33D35); + border: 8px solid #fff; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 50%; + margin: 0 auto -125px; + position: relative; + z-index: 10; + transition: all 500ms ease; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); +} + +.video-three__btn__logo-outer { + position: absolute; + width: 100%; + height: 100%; + border: 2px dashed rgba(255, 255, 255, 0.5); + border-radius: 50%; + animation: rotate-clockwise 15s linear infinite; +} + +.video-three__btn__logo-inner { + position: relative; + z-index: 2; + display: flex; + align-items: center; + justify-content: center; + animation: rotate-counter-clockwise 10s linear infinite; +} + +@keyframes rotate-clockwise { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +@keyframes rotate-counter-clockwise { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(-360deg); + } +} + +@media (max-width: 991px) { + .faq-two { + padding: 80px 0 200px; + clip-path: none; + } + + .video-three__inner { + margin-top: -100px; + padding-top: 200px; + } + + .video-three__btn { + width: 180px; + height: 220px; + margin-bottom: -110px; + } +} + +/* ═══════════════════════════════════════════════════════════ + Why Choose Us Section (why-choose-three) + ═══════════════════════════════════════════════════════════ */ +.why-choose-three { + position: relative; + padding: 120px 0; + overflow: hidden; + background-color: #f7f8fc; +} + +.why-choose-three__bg { + position: absolute; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + background-position: right bottom; + background-repeat: no-repeat; + background-size: auto; + opacity: 0.1; + z-index: 1; +} + +.why-choose-three .container { + position: relative; + z-index: 2; +} + +.why-choose-three__image { + position: relative; + margin-left: -375px; +} + +.why-choose-three__image img { + width: 100%; + border-radius: 0 500px 500px 0; +} + +.why-choose-three__content { + padding-left: 30px; +} + +.why-choose-three__content__text { + margin-bottom: 35px; + font-size: 16px; + line-height: 30px; +} + +.why-choose-three__content__list { + position: relative; + display: flex; + flex-direction: column; + gap: 20px; + margin: 0; + padding: 0; + list-style: none; + counter-reset: count; +} + +.why-choose-three__content__list li { + display: flex; + align-items: center; + gap: 20px; + position: relative; + z-index: 2; + background-color: #fff; + border-radius: 10px; + font-size: 22px; + font-weight: 700; + color: #051d1f; + font-family: var(--getizy-heading, "Barlow", sans-serif); + counter-increment: count; + padding: 19px 30px; + max-width: 87%; + transition: all 500ms ease; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); +} + +.why-choose-three__content__list li:hover { + max-width: 100%; + color: #fff; +} + +.why-choose-three__content__list li::after { + position: absolute; + left: 0; + top: 0; + width: 5px; + height: 100%; + content: ""; + border-radius: 10px; + transition: all 500ms ease; + background-color: var(--getizy-base, #D33D35); + z-index: -1; +} + +.why-choose-three__content__list li:hover::after { + width: 100%; + background-color: var(--getizy-base, #D33D35); +} + +.why-choose-three__content__list__number::after { + content: counters(count, ".", decimal-leading-zero); + font-size: 14px; + font-weight: 700; + width: 32px; + height: 32px; + background-color: #051d1f; + color: #fff; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: all 500ms ease; +} + +.why-choose-three__content__list li:hover .why-choose-three__content__list__number::after { + background-color: #fff; + color: #051d1f; +} + +.why-choose-three__content__list__icon { + font-size: 40px; + color: var(--getizy-base, #D33D35); + transition: all 500ms ease; +} + +.why-choose-three__content__list li:hover .why-choose-three__content__list__icon { + color: #fff; + transform: scale(1.1); +} + +.why-choose-three__content__list__rm { + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + width: 52px; + height: 52px; + background-color: #1b272a; + border: 4px solid #fff; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + color: #fff; + visibility: hidden; + opacity: 0; + transition: all 500ms ease; + margin-right: -26px; +} + +.why-choose-three__content__list li:hover .why-choose-three__content__list__rm { + right: 30px; + visibility: visible; + opacity: 1; + margin-right: 0; +} + +/* Section Title Three */ +.sec-title-three { + margin-bottom: 25px; +} + +.sec-title-three__tagline { + font-size: 14px; + font-weight: 600; + text-transform: uppercase; + color: var(--getizy-base, #D33D35); + letter-spacing: 0.1em; + display: flex; + align-items: center; + gap: 15px; + margin-bottom: 10px; +} + +.sec-title-three__tagline__left-border, +.sec-title-three__tagline__right-border { + width: 30px; + height: 2px; + background-color: currentColor; + display: inline-block; +} + +.sec-title-three__title { + font-size: 45px; + font-weight: 700; + line-height: 1.1; + color: #051d1f; +} + +@media (max-width: 1199px) { + .why-choose-three__image { + margin-left: -150px; + } +} + +@media (max-width: 991px) { + .why-choose-three { + padding: 80px 0; + } + + .why-choose-three__image { + margin-left: 0; + margin-bottom: 40px; + } + + .why-choose-three__image img { + border-radius: 20px; + } + + .why-choose-three__content { + padding-left: 0; + } + + .sec-title-three__title { + font-size: 36px; + } +} + +/* ═══════════════════════════════════════════════════════════ + Contact Section (contact-one) + ═══════════════════════════════════════════════════════════ */ +.contact-one { + position: relative; + overflow: hidden; + padding: 120px 0 0; + background-color: #fff; +} + +.contact-one__info { + position: relative; + background-color: var(--getizy-base, #D33D35); + border-radius: 10px; + padding: 58px 30px 40px 200px; + z-index: 2; +} + +.contact-one__info__icon { + font-size: 114px; + line-height: 114px; + color: #fff; + left: 45px; + position: absolute; + top: 0; + bottom: 0; + margin: auto; + min-height: 114px; + display: flex; + align-items: center; +} + +.contact-one__info__title { + font-size: 30px; + color: #fff; + margin: 0 0 6px; + font-weight: 700; +} + +.contact-one__info__title span { + text-decoration: underline; +} + +.contact-one__info__text { + margin: 0; +} + +.contact-one__info__text a { + color: #fff; + font-size: 24px; + font-weight: 700; + transition: all 500ms ease; +} + +.contact-one__info__text a:hover { + opacity: 0.8; +} + +.contact-one__info::after { + position: absolute; + right: -56px; + top: 50%; + transform: translateY(-50%); + content: ""; + width: 0px; + height: 0px; + border-style: solid; + border-width: 48px 0 48px 56px; + border-color: transparent transparent transparent var(--getizy-base, #D33D35); +} + +.contact-one__image { + position: relative; + z-index: 9; + margin: 20px 0 0 -50px; +} + +.contact-one__image img { + max-width: 100%; + animation: messageMove2 2.5s linear 0s infinite; +} + +@keyframes messageMove2 { + 0% { + transform: translateX(0); + } + + 50% { + transform: translateX(10px); + } + + 100% { + transform: translateX(0); + } +} + +.contact-one__container { + max-width: 1599px; + margin-top: 10px; +} + +.contact-one__wrapper { + position: relative; + z-index: 2; + background-color: #051d1f; + border-radius: 10px; + background-position: right bottom; + background-repeat: no-repeat; + overflow: hidden; +} + +.contact-one__wrapper::after { + position: absolute; + left: 0; + bottom: 0; + width: 215px; + height: 100px; + content: ""; + background-color: var(--getizy-base, #D33D35); + z-index: -1; + border-radius: 0 0 0 10px; +} + +.contact-one__image-two { + position: relative; + padding: 23px 0 0 25px; + display: inline-block; + margin-bottom: -10px; +} + +.contact-one__image-two img { + max-width: 100%; + border: 10px solid #fff; + position: relative; + z-index: 2; +} + +.contact-one__content::before { + position: absolute; + left: -56px; + top: 156px; + content: ""; + width: 0px; + height: 0px; + border-style: solid; + border-width: 48px 56px 48px 0; + border-color: transparent var(--getizy-base, #D33D35) transparent transparent; + z-index: 1; +} + +@keyframes airTree { + 0% { + transform: translateY(-50%) rotate(0deg) translate(0px, 0px); + } + + 50% { + transform: translateY(-50%) rotate(0deg) translate(0px, 6px); + } + + 100% { + transform: translateY(-50%) rotate(0deg) translate(0px, 0px); + } +} + +.contact-one__content { + padding: 60px 50px 60px 0; +} + +.contact-one__content__text { + color: rgba(255, 255, 255, 0.7); + margin-bottom: 30px; +} + +/* Form Styles */ +.form-one__group { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; +} + +.form-one__control--full { + grid-column: span 2; +} + +.form-one__control input, +.form-one__control textarea { + width: 100%; + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 5px; + color: #fff; + padding: 15px 20px; + outline: none; + transition: all 500ms ease; +} + +.form-one__control textarea { + height: 140px; + resize: none; +} + +.form-one__control input:focus, +.form-one__control textarea:focus { + border-color: var(--getizy-base, #D33D35); +} + +.contact-one__form .tolak-btn { + width: auto; + background-color: var(--getizy-base, #D33D35); + color: #fff; + border: none; + padding: 15px 40px; + font-weight: 700; + border-radius: 5px; + cursor: pointer; + transition: all 500ms ease; +} + +.contact-one__form .tolak-btn:hover { + background-color: #fff; + color: #051d1f; +} + +@media (max-width: 991px) { + .contact-one { + padding: 80px 0 0; + } + + .contact-one__info { + padding: 40px 30px 40px 140px; + margin-bottom: 30px; + } + + .contact-one__info__icon { + font-size: 80px; + left: 30px; + } + + .contact-one__info::after { + display: none; + } + + .contact-one__image { + margin: 0; + margin-bottom: 40px; + } + + .contact-one__image-two { + padding: 20px; + display: block; + text-align: center; + } + + .contact-one__image-two::before { + display: none; + } + + .contact-one__content { + padding: 0 30px 50px; + } + + .form-one__group { + grid-template-columns: 1fr; + } + + .form-one__control--full { + grid-column: span 1; + } +} + +/* ═══════════════════════════════════════════════════════════ + Service Section Three (service-three) + ═══════════════════════════════════════════════════════════ */ +.service-three { + position: relative; + background-color: #ecf2fc; + padding: 120px 0; + overflow: hidden; + z-index: 1; +} + +.service-three__bg { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + opacity: 0.07; + z-index: -1; +} + +.service-three__shape { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 100%; + background-position: left bottom; + background-repeat: no-repeat; + background-size: auto; + opacity: 0.2; + z-index: -1; +} + +.service-three__item { + position: relative; + z-index: 2; + padding: 40px 0 20px; + transition: all 500ms ease; +} + +.service-three__item__content { + position: relative; + z-index: 2; + background-color: #fff; + border-radius: 20px 20px 0 0; + padding: 0 28px 22px; + transition: all 500ms ease; +} + +.service-three__item:hover .service-three__item__content { + background-color: #1b272a; +} + +.service-three__item__icon { + position: relative; + z-index: 3; + top: -40px; + width: 84px; + height: 84px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto -22px; + background-color: rgba(255, 255, 255, 0.9); + font-size: 42px; + color: var(--getizy-base, #D33D35); + transition: all 500ms ease; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); +} + +.service-three__item:hover .service-three__item__icon { + background-color: var(--getizy-base, #D33D35); + color: #fff; +} + +.service-three__item__title { + font-size: 22px; + font-weight: 700; + margin: 0 0 10px; +} + +.service-three__item__title a { + color: #051d1f; + transition: all 500ms ease; +} + +.service-three__item:hover .service-three__item__title a { + color: #fff; +} + +.service-three__item__text { + line-height: 26px; + margin: 0; + color: #6c7279; + transition: all 500ms ease; +} + +.service-three__item:hover .service-three__item__text { + color: rgba(255, 255, 255, 0.7); +} + +.service-three__item__image { + position: relative; + overflow: hidden; + line-height: 0; +} + +.service-three__item__image img { + width: 100%; + height: auto; + clip-path: polygon(0% 0%, 100% 0, 100% 69%, 50% 100%, 0 69%); + transition: all 500ms ease; +} + +.service-three__item:hover .service-three__item__image img { + transform: scale(1.05); +} + +.service-three__item__rm { + position: absolute; + left: 0; + right: 0; + bottom: -6px; + margin: 0 auto; + width: 52px; + height: 52px; + background-color: #1b272a; + border: 4px solid #fff; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + color: var(--getizy-base, #D33D35); + transition: all 500ms ease; + z-index: 3; +} + +.service-three__item:hover .service-three__item__rm { + background-color: var(--getizy-base, #D33D35); + color: #fff; +} + +@media (max-width: 991px) { + .service-three { + padding: 80px 0; + } +} + +/* ═══════════════════════════════════════════════════════════ + Work Process Section (work-process-style2) + ═══════════════════════════════════════════════════════════ */ +.work-process-container-wrapper.style2 { + position: relative; + padding: 120px 0; + z-index: 1; +} + +.work-process-container-wrapper.style2 .shape { + position: absolute; + right: 5%; + top: 10%; + z-index: 2; +} + +.rotate360 { + animation: rotate 15s linear infinite; +} + +@keyframes rotate { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +.work-process-wrapper.style2 { + position: relative; + background-color: #3d72fc; + border-radius: 40px; + padding: 100px 60px; + overflow: hidden; + z-index: 1; +} + +.work-process-wrapper.style2 .shape1, +.work-process-wrapper.style2 .shape2 { + position: absolute; + z-index: -1; + opacity: 0.1; +} + +.work-process-wrapper.style2 .shape1 { + left: 0; + top: 0; +} + +.work-process-wrapper.style2 .shape2 { + right: 0; + bottom: 0; +} + +.work-process-content .section-title .subtitle { + display: flex; + align-items: center; + gap: 15px; + font-size: 16px; + font-weight: 600; + text-transform: uppercase; + margin-bottom: 20px; +} + +.work-process-content .section-title .title { + font-size: 48px; + font-weight: 700; + line-height: 1.2; + margin-bottom: 25px; +} + +.work-process-content .section-title p { + font-size: 16px; + line-height: 1.8; + margin-bottom: 40px; +} + +.gt-btn.style5 { + display: inline-flex; + align-items: center; + gap: 15px; + background-color: #fff; + color: #3d72fc; + padding: 18px 35px; + border-radius: 50px; + font-weight: 700; + transition: all 500ms ease; +} + +.gt-btn.style5:hover { + background-color: #1b272a; + color: #fff; +} + +/* Hub and Spoke Visualization */ +.work-process-thumb { + position: relative; + width: 100%; + height: 600px; + display: flex; + align-items: center; + justify-content: center; +} + +.work-process-thumb .thumb2_1 { + position: relative; + z-index: 2; + width: 200px; + height: 200px; + background-color: rgba(255, 255, 255, 0.1); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.work-process-thumb .thumb2_1 img { + max-width: 80%; + filter: brightness(0) invert(1); +} + +.work-process-thumb::before { + content: ""; + position: absolute; + width: 450px; + height: 450px; + border: 2px dashed rgba(255, 255, 255, 0.3); + border-radius: 50%; + z-index: 1; + animation: rotate 30s linear infinite; +} + +.process-card { + position: absolute; + background: #fff; + padding: 15px 25px; + border-radius: 12px; + display: flex; + align-items: center; + gap: 15px; + width: 240px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + z-index: 3; + transition: all 400ms ease; +} + +.process-card:hover { + transform: translateY(-5px); +} + +.process-card .number { + position: absolute; + left: -15px; + top: 50%; + transform: translateY(-50%); + width: 32px; + height: 32px; + background: #3d72fc; + color: #fff; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 13px; + font-weight: 800; + border: 2px solid #fff; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} + +.process-card .icon { + font-size: 24px; + color: #3d72fc; +} + +.process-card .text { + font-size: 15px; + font-weight: 700; + color: #051d1f; + line-height: 1.1; + letter-spacing: -0.01em; +} + +/* Card Positions Around Circle */ +.card-1 { + top: 0; + left: 50%; + transform: translateX(-50%); +} + +.card-2 { + top: 20%; + left: 0; +} + +.card-3 { + bottom: 20%; + left: 0; +} + +.card-4 { + bottom: 0; + left: 50%; + transform: translateX(-50%); +} + +.card-6 { + bottom: 20%; + right: 0; +} + +.card-7 { + top: 20%; + right: 0; +} + +/* Mirror Number for right cards */ +.card-6 .number, +.card-7 .number { + left: auto; + right: -15px; +} + +@media (max-width: 1399px) { + .work-process-thumb { + height: 500px; + scale: 0.8; + } +} + +@media (max-width: 1199px) { + .work-process-wrapper.style2 { + padding: 80px 40px; + } + + .work-process-content .section-title .title { + font-size: 36px; + } + + .work-process-thumb { + margin-top: 50px; + scale: 1; + height: auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 30px; + padding: 20px; + } + + .work-process-thumb::before, + .work-process-thumb .thumb2_1 { + display: none; + } + + .process-card { + position: relative; + top: auto !important; + left: auto !important; + right: auto !important; + bottom: auto !important; + transform: none !important; + width: 100%; + } +} + +@media (max-width: 767px) { + .work-process-thumb { + grid-template-columns: 1fr; + } } \ No newline at end of file diff --git a/src/app/home-1/page.tsx b/src/app/home-1/page.tsx index 84152a2..de2cf6f 100644 --- a/src/app/home-1/page.tsx +++ b/src/app/home-1/page.tsx @@ -5,6 +5,7 @@ import Header1 from "@/components/layout/Header1"; import Footer1 from "@/components/layout/Footer1"; import BannerSection from "@/components/home/home-1/BannerSection"; +import FeaturesSection from "@/components/home/home-1/FeaturesSection"; import AboutSection from "@/components/home/home-1/AboutSection"; import ServiceSliderSection from "@/components/home/home-1/ServiceSliderSection"; import CtaSection from "@/components/home/home-1/CtaSection"; @@ -27,6 +28,7 @@ export default function Home1() {
+ diff --git a/src/app/page.tsx b/src/app/page.tsx index 9cab89a..84014c3 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -8,14 +8,15 @@ import BannerSection from "@/components/home/home-1/BannerSection"; import AboutSection from "@/components/home/home-1/AboutSection"; import ServiceSliderSection from "@/components/home/home-1/ServiceSliderSection"; import CtaSection from "@/components/home/home-1/CtaSection"; -import ProjectsSection from "@/components/home/home-1/ProjectsSection"; import ChooseSection from "@/components/home/home-1/ChooseSection"; -import TeamSection from "@/components/home/home-1/TeamSection"; -import TestimonialsSection from "@/components/home/home-2/TestimonialsSection"; +import TestimonialsSection from "@/components/home/home-1/TestimonialsSection"; import BlogSection from "@/components/home/home-1/BlogSection"; import BrandSection from "@/components/home/home-1/BrandSection"; import IconCounterSection from "@/components/home/home-2/IconCounterSection"; -import HelpFormSection from "@/components/home/home-2/HelpFormSection"; +import OfferSection from "@/components/home/OfferSection"; +import FeaturesSection from "@/components/home/home-1/FeaturesSection"; +import ContactSection from "@/components/careers/ContactSection"; +import FaqVideoSection from "@/components/careers/FaqVideoSection"; export default function MainPage() { useEffect(() => { @@ -39,14 +40,10 @@ export default function MainPage() { - - - {/* */} - - {/* */} - {/* */} - + + +
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx index 782e08b..382a36c 100644 --- a/src/app/services/page.tsx +++ b/src/app/services/page.tsx @@ -4,7 +4,7 @@ import React, { useEffect } from "react"; import Header3 from "@/components/layout/Header3"; import Footer3 from "@/components/layout/Footer3"; -import BannerSection from "@/components/home/home-3/BannerSection"; +import InnerBanner from "@/components/common/InnerBanner"; import AboutSection from "@/components/home/home-3/AboutSection"; import HelpFormSection from "@/components/home/home-3/HelpFormSection"; import ServiceSection from "@/components/home/home-3/ServiceSection"; @@ -35,12 +35,12 @@ export default function Home3() { <>
- + {/* */} - + {/* */} {/* */} diff --git a/src/components/careers/AboutOneSection.tsx b/src/components/careers/AboutOneSection.tsx new file mode 100644 index 0000000..be1fe46 --- /dev/null +++ b/src/components/careers/AboutOneSection.tsx @@ -0,0 +1,148 @@ +"use client"; + +import React, { useEffect, useRef } from "react"; +import Link from "next/link"; +import Image from "next/image"; + +const AboutOneSection = () => { + const imagesRef = useRef(null); + const wrapperRef = useRef(null); + + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const el = entry.target as HTMLElement; + const elements = el.querySelectorAll(".wow"); + elements.forEach((child) => { + const childEl = child as HTMLElement; + const delay = childEl.dataset.wowDelay || "0ms"; + setTimeout(() => { + childEl.classList.add("animated", "fadeInUp"); + childEl.style.visibility = "visible"; + }, parseInt(delay)); + }); + observer.unobserve(el); + } + }); + }, + { threshold: 0.1 } + ); + + if (imagesRef.current) observer.observe(imagesRef.current); + if (wrapperRef.current) observer.observe(wrapperRef.current); + + return () => observer.disconnect(); + }, []); + + return ( +
+
+
+
+
+
+
+
+
+
+
+ About Careers +
+
+ Careers Team +
+
+ Logo +
+
+
+
+
+
+
+
+
+
+ ◆ + About us +
+

+ Discover the World Marketing Agency +

+
+
+ There are many variations of passages of Lorem Ipsum avalab but the majority have + suffered alteration in some form, by injected humour, or randomised words which + don't +
+
+
+ Free Consultation +
+
+

+ Free Consultation +

+

+ There are many variations of passages of Lorem Ipsum avalab but +

+
+
+
    +
  • + + Many variations of passages of lorem +
    • +
  • + + Many variations of passages of lorem +
    • +
  • + + Expert many variations teacher +
    • +
+
+ + Discover More + +
+
+
+
+
+
+
+ ); +}; + +export default AboutOneSection; diff --git a/src/components/careers/ContactSection.tsx b/src/components/careers/ContactSection.tsx new file mode 100644 index 0000000..e45b52d --- /dev/null +++ b/src/components/careers/ContactSection.tsx @@ -0,0 +1,129 @@ +"use client"; + +import React, { useEffect, useRef } from "react"; + +const ContactSection = () => { + 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"); + + if (htmlEl.classList.contains("fadeInLeft")) { + htmlEl.classList.add("fadeInLeft"); + } else if (htmlEl.classList.contains("fadeInRight")) { + htmlEl.classList.add("fadeInRight"); + } else { + htmlEl.classList.add("fadeInUp"); + } + + htmlEl.style.visibility = "visible"; + }, parseInt(delay)); + }); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.1 } + ); + + if (sectionRef.current) { + observer.observe(sectionRef.current); + } + + return () => observer.disconnect(); + }, []); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + // Handle form submission logic here + }; + + return ( +
+
+
+
+
+
+ +
+

+ Let's call together just contact line +

+

+ ++255225551, +6544144444 +

+
+
+
+
+ Contact Support +
+
+
+
+ +
+
+
+
+
+ Business Growth +
+
+
+
+
+
+ + Get In Contact + +
+

+ Get free Business touch Customers me. +

+
+

+ Business tailored it design, management & support services
business agency elit, sed do eiusmod tempor. +

+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+ ); +}; + +export default ContactSection; diff --git a/src/components/careers/FaqVideoSection.tsx b/src/components/careers/FaqVideoSection.tsx new file mode 100644 index 0000000..c19eb48 --- /dev/null +++ b/src/components/careers/FaqVideoSection.tsx @@ -0,0 +1,179 @@ +"use client"; + +import React, { useState, useEffect, useRef } from "react"; +import Image from "next/image"; + +const FaqVideoSection = () => { + const [activeAccordion, setActiveAccordion] = useState(1); + 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"); + + if (htmlEl.classList.contains("fadeInLeft")) { + htmlEl.classList.add("fadeInLeft"); + } else if (htmlEl.classList.contains("fadeInRight")) { + htmlEl.classList.add("fadeInRight"); + } else { + htmlEl.classList.add("fadeInUp"); + } + + htmlEl.style.visibility = "visible"; + }, parseInt(delay)); + }); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.1 } + ); + + if (sectionRef.current) { + observer.observe(sectionRef.current); + } + + return () => observer.disconnect(); + }, []); + + const toggleAccordion = (index: number) => { + setActiveAccordion(activeAccordion === index ? null : index); + }; + + const faqItems = [ + { + id: 0, + title: "Maecenas facilisis erat id odio", + content: "Solution the connection, we create business marketing platforms business Solution as slightly believable now.", + }, + { + id: 1, + title: "Digital data facilisis erat id solution business", + content: "Solution the connection, we create business marketing platforms business Solution as slightly believable now.", + }, + { + id: 2, + title: "We adapt our delivery to the way your solution", + content: "Solution the connection, we create business marketing platforms business Solution as slightly believable now.", + }, + { + id: 3, + title: "Best service facilisis erat id solution business", + content: "Solution the connection, we create business marketing platforms business Solution as slightly believable now.", + }, + ]; + + return ( + <> +
+
+
+
+
+
+

+ Frequently Asked Questions For It's a Section on Documents +

+

+ Business tailored design, management & support services Business + business agency elit, sed do eiusmod tempor  majority have + in some we form, by injected humour solution. +

+
    +
  • +
    ✓
    + You solution business will be fully satisfied you are under. +
    • +
  • +
    ✓
    + You solution business will be fully satisfied you are under. +
    • +
  • +
    ✓
    + You solution business will be fully satisfied you are under. +
    • +
  • +
    ✓
    + You solution business will be fully satisfied you are under. +
    • +
  • +
    ?
    + Where Common Question are Answere +
    • +
+
+
+
+
+ {faqItems.map((item) => ( +
+
toggleAccordion(item.id)} + > +

+ + {item.title} + +

+
+
+
+
+ Logo +
+

{item.content}

+
+
+
+ ))} +
+
+
+
+
+ +
+
+
+
+
+
+ Rotating Logo +
+
+
+
+
+ + ); +}; + +export default FaqVideoSection; diff --git a/src/components/careers/ProcessSection.tsx b/src/components/careers/ProcessSection.tsx new file mode 100644 index 0000000..74d3acd --- /dev/null +++ b/src/components/careers/ProcessSection.tsx @@ -0,0 +1,123 @@ +"use client"; + +import React, { useEffect, useRef } from "react"; +import Image from "next/image"; + +const ProcessSection = () => { + 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"; + const duration = htmlEl.dataset.wowDuration || "1500ms"; + + setTimeout(() => { + htmlEl.classList.add("animated", "fadeInUp"); + htmlEl.style.visibility = "visible"; + htmlEl.style.animationDuration = duration; + }, parseInt(delay)); + }); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.1 } + ); + + if (sectionRef.current) { + observer.observe(sectionRef.current); + } + + return () => observer.disconnect(); + }, []); + + const processItems = [ + { + num: "01", + title: "Share Your Concept", + desc: "that a reader will be distracted by the readable content of a page when He is looking", + delay: "0ms", + left: false, + }, + { + num: "02", + title: "Analyze Your Concept", + desc: "that a reader will be distracted by the readable content of a page when He is looking", + delay: "200ms", + left: true, + }, + { + num: "03", + title: "Let’s Start Development", + desc: "that a reader will be distracted by the readable content of a page when He is looking", + delay: "300ms", + left: false, + }, + { + num: "04", + title: "Read to Launch", + desc: "that a reader will be distracted by the readable content of a page when He is looking", + delay: "400ms", + left: true, + }, + ]; + + return ( +
+
+
+
+
+
+
+ + Step Process +
+

Our works Process

+
+
+
+
+
+ Process Line +
+
+ {processItems.map((item, index) => ( +
+ {item.num} +

{item.title}

+

{item.desc}

+
+ ))} +
+
+
+
+ ); +}; + +export default ProcessSection; diff --git a/src/components/careers/ServiceSection.tsx b/src/components/careers/ServiceSection.tsx new file mode 100644 index 0000000..0782f85 --- /dev/null +++ b/src/components/careers/ServiceSection.tsx @@ -0,0 +1,144 @@ +"use client"; + +import React, { useEffect, useRef } from "react"; +import Link from "next/link"; + +const ServiceSection = () => { + 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"); + + if (htmlEl.classList.contains("fadeInLeft")) { + htmlEl.classList.add("fadeInLeft"); + } else if (htmlEl.classList.contains("fadeInRight")) { + htmlEl.classList.add("fadeInRight"); + } else { + htmlEl.classList.add("fadeInUp"); + } + + htmlEl.style.visibility = "visible"; + }, parseInt(delay)); + }); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.1 } + ); + + if (sectionRef.current) { + observer.observe(sectionRef.current); + } + + return () => observer.disconnect(); + }, []); + + const services = [ + { + title: "Network Infrastructure", + text: "Solution the connection, we create platforms business Solution", + icon: "fa-solid fa-network-wired", + image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-1.jpg", + link: "/business-growth" + }, + { + title: "Data Management", + text: "Solution the connection, we create platforms business Solution", + icon: "fa-solid fa-database", + image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-2.jpg", + link: "/business-support" + }, + { + title: "Technology Solution", + text: "Solution the connection, we create platforms business Solution", + icon: "fa-solid fa-microchip", + image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-3.jpg", + link: "/technology-services" + }, + { + title: "Technology Solution", + text: "Solution the connection, we create platforms business Solution", + icon: "fa-solid fa-microchip", + image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-3.jpg", + link: "/technology-services" + }, + { + title: "Data Management", + text: "Solution the connection, we create platforms business Solution", + icon: "fa-solid fa-database", + image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-2.jpg", + link: "/business-support" + }, + { + title: "Network Infrastructure", + text: "Solution the connection, we create platforms business Solution", + icon: "fa-solid fa-network-wired", + image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-1.jpg", + link: "/business-growth" + }, + ]; + + return ( +
+
+
+
+
+
+ + OUR BEST SERVICE + +
+

We Are Service Your Business

+
+ +
+ {services.map((service, index) => ( +
+
+
+
+ +
+

+ {service.title} +

+

{service.text}

+
+
+ {service.title} + {/* + + */} +
+
+
+ ))} +
+
+
+ ); +}; + +export default ServiceSection; diff --git a/src/components/careers/WhyChooseSection.tsx b/src/components/careers/WhyChooseSection.tsx new file mode 100644 index 0000000..77a4d41 --- /dev/null +++ b/src/components/careers/WhyChooseSection.tsx @@ -0,0 +1,111 @@ +"use client"; + +import React, { useEffect, useRef } from "react"; +import Link from "next/link"; + +const WhyChooseSection = () => { + 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"); + + if (htmlEl.classList.contains("slideInLeft")) { + htmlEl.classList.add("slideInLeft"); + } else { + htmlEl.classList.add("fadeInUp"); + } + + htmlEl.style.visibility = "visible"; + }, parseInt(delay)); + }); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.1 } + ); + + if (sectionRef.current) { + observer.observe(sectionRef.current); + } + + return () => observer.disconnect(); + }, []); + + const listItems = [ + { + iconClass: "fa-solid fa-globe", + title: "Accelerate Innovation Tech Teams", + link: "/team", + }, + { + iconClass: "fa-solid fa-network-wired", + title: "Network Infrastructure software", + link: "/about", + }, + { + iconClass: "fa-solid fa-gears", + title: "We Provide This Solution Business", + link: "/services", + }, + ]; + + return ( +
+
+
+
+
+
+ Why Choose Us +
+
+
+
+
+
+ + Why Choose Us + +
+

+ Choose The Best IT Service For Company Solution +

+
+

+ Business tailored design, management & support services Business business agency elit, sed do eiusmod tempor + majority have in some we form, by injected humour solution. +

+
    + {listItems.map((item, index) => ( +
  • + + + + + {item.title} + +
    • + ))} +
+
+
+
+
+
+ ); +}; + +export default WhyChooseSection; diff --git a/src/components/careers/WorkProcessSection.tsx b/src/components/careers/WorkProcessSection.tsx new file mode 100644 index 0000000..6f2607d --- /dev/null +++ b/src/components/careers/WorkProcessSection.tsx @@ -0,0 +1,127 @@ +"use client"; + +import React, { useEffect, useRef } from "react"; + +const WorkProcessSection = () => { + 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"; + }, parseInt(delay.replace('s', '')) * 1000); + }); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.1 } + ); + + if (sectionRef.current) { + observer.observe(sectionRef.current); + } + + return () => observer.disconnect(); + }, []); + + const processCards = [ + { id: 1, text: "Brainstorming \n Ideas", icon: "tolak-icons-two-lamp" }, + { id: 2, text: "Product \n Design", icon: "tolak-icons-two-settings-2" }, + { id: 3, text: "Back-End \n Development", icon: "tolak-icons-two-optimization" }, + { id: 4, text: "SEO \n Optimization", icon: "tolak-icons-two-business-analysis" }, + { id: 6, text: "Digital SEO \n Marketing", icon: "tolak-icons-two-support" }, + { id: 7, text: "Mobile \n Development", icon: "tolak-icons-two-smart-solution" }, + ]; + + return ( +
+
+ + shape + +
+
+
+
+ shape +
+
+ shape +
+ +
+
+
+
+
+ icon + How we do + icon +
+

+ Amazing Solutions
For business +

+

+ We don't believe in a one-size-fit-all approach. Our services are carefully + customized to suit your specific need, ensuring you to achieve your goals. +

+ +
+
+
+ +
+
+
+ thumb +
+ + {processCards.map((card) => ( +
+
{card.id}
+
+ +
+
+ {card.text.split('\n').map((line, i) => ( + + {line} + {i === 0 &&
} + + ))} +
+
+ ))} +
+
+
+
+
+
+ ); +}; + +export default WorkProcessSection; diff --git a/src/components/common/InnerBanner.tsx b/src/components/common/InnerBanner.tsx new file mode 100644 index 0000000..e5b56d6 --- /dev/null +++ b/src/components/common/InnerBanner.tsx @@ -0,0 +1,231 @@ +"use client"; +import React, { useEffect } from "react"; +import Link from "next/link"; + +interface InnerBannerProps { + title: string; + breadcrumb?: string; // overrides title in breadcrumb if different + bgImage?: string; // optional custom background, defaults to hero-bg1 +} + +const InnerBanner = ({ + title, + breadcrumb, + bgImage = "/assets/img/bg/hero-bg1.png", +}: InnerBannerProps) => { + const crumb = breadcrumb ?? title; + + useEffect(() => { + if (typeof window !== "undefined") { + // @ts-ignore + if (window.WOW) { + // @ts-ignore + new window.WOW({ live: false }).init(); + } + } + }, []); + + return ( + <> + + +
+ {/* shape2 – bottom-left large */} +
+ shape +
+ + {/* shape1 – bottom-left small (layered above shape2) */} +
+ shape +
+ + {/* shape3 – right side with sway */} +
+ shape +
+ + {/* text content */} +
+

+ {title} +

+ +
+ Home + + + {crumb} + +
+
+
+ + ); +}; + +export default InnerBanner; diff --git a/src/components/home/OfferSection.tsx b/src/components/home/OfferSection.tsx new file mode 100644 index 0000000..13d2297 --- /dev/null +++ b/src/components/home/OfferSection.tsx @@ -0,0 +1,146 @@ +"use client"; +import React, { useEffect } from "react"; + +// ── inline SVG icons ──────────────────────────────────────────────────────── +const IconWebsite = () => ( + + + +); + +const IconAndroid = () => ( + + + + +); + +const IconIOS = () => ( + + + + + + + +); + +const IconWatch = () => ( + + + + + +); + +const IconTv = () => ( + + + + + + + + +); + +const IconIOT = () => ( + + + + + +); + +// ── shape images ───────────────────────────────────────────────────────────── +const SHAPE_TOP = "/assets/img/elements/elements12.png"; +const SHAPE_BOTTOM = "/assets/img/elements/elements14.png"; +const SECTION_TITLE_ICON = "/assets/img/elements/elements21.png"; +const SHAPE_LEFT = "/assets/img/elements/elements3.png"; +const SHAPE_RIGHT = "/assets/img/elements/elements6.png"; + +// ── data ───────────────────────────────────────────────────────────────────── +const OFFER_ITEMS = [ + { icon: , label: "Website" }, + { icon: , label: "Android" }, + { icon: , label: "IOS" }, + { icon: , label: "Watch" }, + { icon: , label: "Tv" }, + { icon: , label: "IOT" }, +]; + +// ── component ───────────────────────────────────────────────────────────────── +const OfferSection = () => { + useEffect(() => { + if (typeof window !== "undefined") { + // @ts-ignore + if (window.WOW) { + // @ts-ignore + new window.WOW({ live: false }).init(); + } + } + }, []); + + return ( +
+ {/* central radial glow */} +
+ + {/* left shape */} + + +
+ {/* header row */} +
+
+
+ icon + Our offering +
+

+ Enhance and Pioneer Using
Technology Trends +

+
+ + + Explore More  + +
+ + {/* cards grid */} +
+ {OFFER_ITEMS.map(({ icon, label }, idx) => ( +
+
+
+ shape +
+
+ shape +
+ + {/* icon */} +
{icon}
+ +

{label}

+
+
+ ))} +
+
+
+ ); +}; + +export default OfferSection; diff --git a/src/components/home/home-1/FeaturesSection.tsx b/src/components/home/home-1/FeaturesSection.tsx new file mode 100644 index 0000000..b094be0 --- /dev/null +++ b/src/components/home/home-1/FeaturesSection.tsx @@ -0,0 +1,179 @@ +"use client"; + +import React, { useEffect, useRef } from "react"; +import Link from "next/link"; +import Image from "next/image"; + +interface FeatureItem { + title: string; + desc: string; + icon: React.ReactNode; + image: string; + imageAlt: string; + defaultActive?: boolean; + delay: number; +} + +/* SVG icons matching the original icon font shapes */ +const IdeaIcon = () => ( + + + + + +); + +const GrowthIcon = () => ( + + + + + + + + +); + +const TeamIcon = () => ( + + + + + + + + +); + +const ArrowIcon = () => ( + + + +); + +const features: FeatureItem[] = [ + { + title: "Versatile Latest Technology", + desc: "There are many variations of passages of Lorem Ipsum avalab but the majority have suffered alteration in some having fun", + icon: , + image: "/assets/img-app/about/about-img2.png", + imageAlt: "Versatile Latest Technology", + delay: 0, + }, + { + title: "Business Planning Strategies", + desc: "There are many variations of passages of Lorem Ipsum avalab but the majority have suffered alteration in some having fun", + icon: , + image: "/assets/img-app/about/about-img4.png", + imageAlt: "Business Planning Strategies", + defaultActive: true, + delay: 200, + }, + { + title: "Professional Team Members", + desc: "There are many variations of passages of Lorem Ipsum avalab but the majority have suffered alteration in some having fun", + icon: , + image: "/assets/img-app/about/about-img1.png", + imageAlt: "Professional Team Members", + delay: 400, + }, +]; + +const FeaturesSection = () => { + const itemRefs = useRef<(HTMLDivElement | null)[]>([]); + + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const el = entry.target as HTMLElement; + const delay = parseInt(el.dataset.wowDelay || "0"); + setTimeout(() => { + el.style.opacity = "1"; + el.style.transform = "translateY(0)"; + el.style.visibility = "visible"; + }, delay); + observer.unobserve(el); + } + }); + }, + { threshold: 0.1 } + ); + + itemRefs.current.forEach((el) => { + if (el) observer.observe(el); + }); + + return () => observer.disconnect(); + }, []); + + return ( +
+
+
+
+
+
+
+ {features.map((feature, index) => ( +
+
{ itemRefs.current[index] = el; }} + className={`fo-item${feature.defaultActive ? " fo-item--active" : ""}`} + data-wow-delay={String(feature.delay)} + style={{ + opacity: 0, + transform: "translateY(40px)", + transition: `opacity 1.5s ease ${feature.delay}ms, transform 1.5s ease ${feature.delay}ms`, + visibility: "hidden", + }} + > + {/* Hover overlay card — slides down from top */} +
+ {/* Circle icon badge above the hover card */} +
+ {feature.icon} +
+

{feature.title}

+ + + +
+ + {/* Main card */} +
+ {/* Top dark section */} +
+

{feature.title}

+ + + +

{feature.desc}

+
+ {/* Bottom white section with image + floating icon */} +
+
+ {feature.imageAlt} +
+
+ {feature.icon} +
+
+
+
+
+ ))} +
+
+
+ ); +}; + +export default FeaturesSection;