new sections updated
This commit is contained in:
akash
parent
8d0466d68d
commit
9e71cf37c1
BIN
public/assets/image.png
Normal file
BIN
public/assets/image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
@ -4,7 +4,7 @@ import React, { useEffect } from "react";
|
|||||||
import Header2 from "@/components/layout/Header2";
|
import Header2 from "@/components/layout/Header2";
|
||||||
import Footer2 from "@/components/layout/Footer2";
|
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 FeaturesSection from "@/components/home/home-2/FeaturesSection";
|
||||||
import About2Section from "@/components/home/home-2/About2Section";
|
import About2Section from "@/components/home/home-2/About2Section";
|
||||||
import ServiceTabSection from "@/components/home/home-2/ServiceTabSection";
|
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 FaqSection from "@/components/home/home-3/FaqSection";
|
||||||
import Header1 from "@/components/layout/Header1";
|
import Header1 from "@/components/layout/Header1";
|
||||||
import Footer1 from "@/components/layout/Footer1";
|
import Footer1 from "@/components/layout/Footer1";
|
||||||
|
import OfferSection from "@/components/home/OfferSection";
|
||||||
|
|
||||||
export default function Home2() {
|
export default function Home2() {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -37,11 +38,12 @@ export default function Home2() {
|
|||||||
<>
|
<>
|
||||||
<Header1 />
|
<Header1 />
|
||||||
<main>
|
<main>
|
||||||
<BannerSection />
|
<InnerBanner title="About Us" />
|
||||||
{/* <FeaturesSection /> */}
|
{/* <FeaturesSection /> */}
|
||||||
<About2Section />
|
<About2Section />
|
||||||
<IconCounterSection />
|
<IconCounterSection />
|
||||||
<ServiceTabSection />
|
<ServiceTabSection />
|
||||||
|
<OfferSection/>
|
||||||
{/* <TextSliderSection /> */}
|
{/* <TextSliderSection /> */}
|
||||||
<WorkProcessSection />
|
<WorkProcessSection />
|
||||||
<TestimonialsSection />
|
<TestimonialsSection />
|
||||||
|
|||||||
@ -4,7 +4,7 @@ import React, { useEffect } from "react";
|
|||||||
import Header1 from "@/components/layout/Header1";
|
import Header1 from "@/components/layout/Header1";
|
||||||
import Footer1 from "@/components/layout/Footer1";
|
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 AboutSection from "@/components/home/home-1/AboutSection";
|
||||||
import ServiceSliderSection from "@/components/home/home-1/ServiceSliderSection";
|
import ServiceSliderSection from "@/components/home/home-1/ServiceSliderSection";
|
||||||
import CtaSection from "@/components/home/home-1/CtaSection";
|
import CtaSection from "@/components/home/home-1/CtaSection";
|
||||||
@ -26,7 +26,7 @@ export default function Home1() {
|
|||||||
<>
|
<>
|
||||||
<Header1 />
|
<Header1 />
|
||||||
<main>
|
<main>
|
||||||
<BannerSection />
|
<InnerBanner title="Our Blog" />
|
||||||
<BlogSection />
|
<BlogSection />
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
41
src/app/careers/page.tsx
Normal file
41
src/app/careers/page.tsx
Normal file
@ -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 (
|
||||||
|
<>
|
||||||
|
<Header1 />
|
||||||
|
<main>
|
||||||
|
<InnerBanner
|
||||||
|
title="Careers"
|
||||||
|
bgImage="/assets/img-app/bg/hero-bg2.png"
|
||||||
|
/>
|
||||||
|
<AboutOneSection />
|
||||||
|
<WhyChooseSection />
|
||||||
|
<FaqVideoSection />
|
||||||
|
<ContactSection />
|
||||||
|
<FeaturesSection/>
|
||||||
|
<ServiceSection />
|
||||||
|
<WorkProcessSection />
|
||||||
|
</main>
|
||||||
|
<Footer1 />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
31
src/app/contact/page.tsx
Normal file
31
src/app/contact/page.tsx
Normal file
@ -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 (
|
||||||
|
<>
|
||||||
|
<Header1 />
|
||||||
|
<main>
|
||||||
|
<InnerBanner title="Contact Us" />
|
||||||
|
<HelpFormSection />
|
||||||
|
</main>
|
||||||
|
<Footer1 />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
2679
src/app/globals.css
2679
src/app/globals.css
File diff suppressed because it is too large
Load Diff
@ -5,6 +5,7 @@ import Header1 from "@/components/layout/Header1";
|
|||||||
import Footer1 from "@/components/layout/Footer1";
|
import Footer1 from "@/components/layout/Footer1";
|
||||||
|
|
||||||
import BannerSection from "@/components/home/home-1/BannerSection";
|
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 AboutSection from "@/components/home/home-1/AboutSection";
|
||||||
import ServiceSliderSection from "@/components/home/home-1/ServiceSliderSection";
|
import ServiceSliderSection from "@/components/home/home-1/ServiceSliderSection";
|
||||||
import CtaSection from "@/components/home/home-1/CtaSection";
|
import CtaSection from "@/components/home/home-1/CtaSection";
|
||||||
@ -27,6 +28,7 @@ export default function Home1() {
|
|||||||
<Header1 />
|
<Header1 />
|
||||||
<main>
|
<main>
|
||||||
<BannerSection />
|
<BannerSection />
|
||||||
|
<FeaturesSection />
|
||||||
<AboutSection />
|
<AboutSection />
|
||||||
<ServiceSliderSection />
|
<ServiceSliderSection />
|
||||||
<CtaSection />
|
<CtaSection />
|
||||||
|
|||||||
@ -8,14 +8,15 @@ import BannerSection from "@/components/home/home-1/BannerSection";
|
|||||||
import AboutSection from "@/components/home/home-1/AboutSection";
|
import AboutSection from "@/components/home/home-1/AboutSection";
|
||||||
import ServiceSliderSection from "@/components/home/home-1/ServiceSliderSection";
|
import ServiceSliderSection from "@/components/home/home-1/ServiceSliderSection";
|
||||||
import CtaSection from "@/components/home/home-1/CtaSection";
|
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 ChooseSection from "@/components/home/home-1/ChooseSection";
|
||||||
import TeamSection from "@/components/home/home-1/TeamSection";
|
import TestimonialsSection from "@/components/home/home-1/TestimonialsSection";
|
||||||
import TestimonialsSection from "@/components/home/home-2/TestimonialsSection";
|
|
||||||
import BlogSection from "@/components/home/home-1/BlogSection";
|
import BlogSection from "@/components/home/home-1/BlogSection";
|
||||||
import BrandSection from "@/components/home/home-1/BrandSection";
|
import BrandSection from "@/components/home/home-1/BrandSection";
|
||||||
import IconCounterSection from "@/components/home/home-2/IconCounterSection";
|
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() {
|
export default function MainPage() {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -39,14 +40,10 @@ export default function MainPage() {
|
|||||||
<IconCounterSection />
|
<IconCounterSection />
|
||||||
<ServiceSliderSection />
|
<ServiceSliderSection />
|
||||||
<CtaSection />
|
<CtaSection />
|
||||||
|
|
||||||
<BrandSection />
|
<BrandSection />
|
||||||
<ProjectsSection />
|
<FaqVideoSection/>
|
||||||
{/* <HelpFormSection/> */}
|
<TestimonialsSection/>
|
||||||
|
<ContactSection/>
|
||||||
{/* <TeamSection /> */}
|
|
||||||
{/* <TestimonialsSection /> */}
|
|
||||||
<TestimonialsSection />
|
|
||||||
<BlogSection />
|
<BlogSection />
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@ -4,7 +4,7 @@ import React, { useEffect } from "react";
|
|||||||
import Header3 from "@/components/layout/Header3";
|
import Header3 from "@/components/layout/Header3";
|
||||||
import Footer3 from "@/components/layout/Footer3";
|
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 AboutSection from "@/components/home/home-3/AboutSection";
|
||||||
import HelpFormSection from "@/components/home/home-3/HelpFormSection";
|
import HelpFormSection from "@/components/home/home-3/HelpFormSection";
|
||||||
import ServiceSection from "@/components/home/home-3/ServiceSection";
|
import ServiceSection from "@/components/home/home-3/ServiceSection";
|
||||||
@ -35,12 +35,12 @@ export default function Home3() {
|
|||||||
<>
|
<>
|
||||||
<Header1 />
|
<Header1 />
|
||||||
<main>
|
<main>
|
||||||
<BannerSection />
|
<InnerBanner title="Our Services" />
|
||||||
<FeaturesSection />
|
<FeaturesSection />
|
||||||
<ChooseSection />
|
<ChooseSection />
|
||||||
{/* <HelpFormSection /> */}
|
{/* <HelpFormSection /> */}
|
||||||
<ServiceSection />
|
<ServiceSection />
|
||||||
<WorkProcessSection/>
|
<WorkProcessSection />
|
||||||
{/* <ProjectsSection /> */}
|
{/* <ProjectsSection /> */}
|
||||||
{/* <BrandsSection /> */}
|
{/* <BrandsSection /> */}
|
||||||
<FaqSection />
|
<FaqSection />
|
||||||
|
|||||||
148
src/components/careers/AboutOneSection.tsx
Normal file
148
src/components/careers/AboutOneSection.tsx
Normal file
@ -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<HTMLDivElement>(null);
|
||||||
|
const wrapperRef = useRef<HTMLDivElement>(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 (
|
||||||
|
<section className="about-one section-space">
|
||||||
|
<div className="about-one__bg"></div>
|
||||||
|
<div className="about-one__shapes">
|
||||||
|
<div className="body-shape-one"></div>
|
||||||
|
<div className="body-shape-two"></div>
|
||||||
|
</div>
|
||||||
|
<div className="container">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-lg-7">
|
||||||
|
<div
|
||||||
|
ref={imagesRef}
|
||||||
|
className="about-one__images"
|
||||||
|
>
|
||||||
|
<div className="about-one__img__one wow fadeInLeft" data-wow-delay="500ms" style={{ visibility: "hidden" }}>
|
||||||
|
<Image
|
||||||
|
src="/assets/img-app/about/about-img5.png"
|
||||||
|
alt="About Careers"
|
||||||
|
width={440}
|
||||||
|
height={695}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="about-one__img__two wow fadeInRight" data-wow-delay="700ms" style={{ visibility: "hidden" }}>
|
||||||
|
<Image
|
||||||
|
src="/assets/img-app/about/about-img4.png"
|
||||||
|
alt="Careers Team"
|
||||||
|
width={490}
|
||||||
|
height={471}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="about-one__logo__icon">
|
||||||
|
<Image
|
||||||
|
src="/assets/img-app/logo.webp"
|
||||||
|
alt="Logo"
|
||||||
|
width={104}
|
||||||
|
height={50}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="about-one__orange-bar"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-5 position-relative">
|
||||||
|
<div
|
||||||
|
ref={wrapperRef}
|
||||||
|
className="about-one__wrapper"
|
||||||
|
>
|
||||||
|
<div className="about-one__wrapper__bg__overlay"></div>
|
||||||
|
<div className="about-one__content">
|
||||||
|
<div className="sec-title wow" data-wow-delay="200ms" style={{ visibility: "hidden" }}>
|
||||||
|
<h6 className="sec-title__tagline">
|
||||||
|
<span className="ao-diamond">◆</span>
|
||||||
|
About us
|
||||||
|
</h6>
|
||||||
|
<h2 className="sec-title__title">
|
||||||
|
Discover the World Marketing Agency
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div className="about-one__content__desc wow" data-wow-delay="400ms" style={{ visibility: "hidden" }}>
|
||||||
|
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
|
||||||
|
</div>
|
||||||
|
<div className="about-one__content__eliment wow" data-wow-delay="600ms" style={{ visibility: "hidden" }}>
|
||||||
|
<div className="about-one__content__eliment__img-wrapper">
|
||||||
|
<Image
|
||||||
|
src="/assets/img-app/about/about-img2.png"
|
||||||
|
alt="Free Consultation"
|
||||||
|
width={132}
|
||||||
|
height={132}
|
||||||
|
className="about-one__content__eliment__img"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="about-one__content__eliment__content">
|
||||||
|
<h3 className="about-one__content__eliment__title">
|
||||||
|
Free Consultation
|
||||||
|
</h3>
|
||||||
|
<p className="about-one__content__eliment__desc">
|
||||||
|
There are many variations of passages of Lorem Ipsum avalab but
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul className="about-one__content__list wow" data-wow-delay="800ms" style={{ visibility: "hidden" }}>
|
||||||
|
<li>
|
||||||
|
<i className="fa-solid fa-circle-check"></i>
|
||||||
|
Many variations of passages of lorem
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<i className="fa-solid fa-circle-check"></i>
|
||||||
|
Many variations of passages of lorem
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<i className="fa-solid fa-circle-check"></i>
|
||||||
|
Expert many variations teacher
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div className="wow" data-wow-delay="1000ms" style={{ visibility: "hidden" }}>
|
||||||
|
<Link href="/about-us" className="getizy-btn btn-hover-cropping">
|
||||||
|
Discover More
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AboutOneSection;
|
||||||
129
src/components/careers/ContactSection.tsx
Normal file
129
src/components/careers/ContactSection.tsx
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useEffect, useRef } from "react";
|
||||||
|
|
||||||
|
const ContactSection = () => {
|
||||||
|
const sectionRef = useRef<HTMLDivElement>(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 (
|
||||||
|
<section ref={sectionRef} className="contact-one">
|
||||||
|
<div className="container">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-lg-8">
|
||||||
|
<div className="contact-one__info wow fadeInLeft" data-wow-delay="100ms" style={{ visibility: "hidden" }}>
|
||||||
|
<div className="contact-one__info__icon">
|
||||||
|
<span className="fa-solid fa-headset"></span>
|
||||||
|
</div>
|
||||||
|
<h3 className="contact-one__info__title">
|
||||||
|
Let's call together just <span>contact</span> line
|
||||||
|
</h3>
|
||||||
|
<p className="contact-one__info__text">
|
||||||
|
<a href="tel:255225551">++255225551</a>, <a href="tel:6544144444">+6544144444</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-4">
|
||||||
|
<div className="contact-one__image wow fadeInRight" data-wow-delay="200ms" style={{ visibility: "hidden" }}>
|
||||||
|
<img src="https://tolaklaravel.bracketweb.com/assets/images/resources/contact-1-1.png" alt="Contact Support" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container contact-one__container wow fadeInUp" data-wow-delay="100ms" style={{ visibility: "hidden", marginTop: "-113px" }}>
|
||||||
|
<div
|
||||||
|
className="contact-one__wrapper"
|
||||||
|
style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/shapes/contact-1-shape-1.png)" }}
|
||||||
|
>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-lg-6">
|
||||||
|
<div className="contact-one__image-two">
|
||||||
|
<img src="https://tolaklaravel.bracketweb.com/assets/images/resources/contact-1-2.jpg" alt="Business Growth" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-6">
|
||||||
|
<div className="contact-one__content">
|
||||||
|
<div className="sec-title text-left">
|
||||||
|
<h6 className="sec-title__tagline">
|
||||||
|
<span className="sec-title__tagline__left"></span>
|
||||||
|
Get In Contact
|
||||||
|
<span className="sec-title__tagline__right"></span>
|
||||||
|
</h6>
|
||||||
|
<h3 className="sec-title__title" style={{ color: "#fff" }}>
|
||||||
|
Get free Business touch Customers me.
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<p className="contact-one__content__text">
|
||||||
|
Business tailored it design, management & support services <br />business agency elit, sed do eiusmod tempor.
|
||||||
|
</p>
|
||||||
|
<form className="contact-one__form form-one" onSubmit={handleSubmit}>
|
||||||
|
<div className="form-one__group">
|
||||||
|
<div className="form-one__control">
|
||||||
|
<input type="text" name="name" placeholder="Your Name" required />
|
||||||
|
</div>
|
||||||
|
<div className="form-one__control">
|
||||||
|
<input type="email" name="email" placeholder="Email address" required />
|
||||||
|
</div>
|
||||||
|
<div className="form-one__control form-one__control--full">
|
||||||
|
<textarea name="message" placeholder="Message" required></textarea>
|
||||||
|
</div>
|
||||||
|
<div className="form-one__control form-one__control--full">
|
||||||
|
<button type="submit" className="tolak-btn">
|
||||||
|
<b>Send Request</b>
|
||||||
|
<span></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ContactSection;
|
||||||
179
src/components/careers/FaqVideoSection.tsx
Normal file
179
src/components/careers/FaqVideoSection.tsx
Normal file
@ -0,0 +1,179 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState, useEffect, useRef } from "react";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
const FaqVideoSection = () => {
|
||||||
|
const [activeAccordion, setActiveAccordion] = useState<number | null>(1);
|
||||||
|
const sectionRef = useRef<HTMLDivElement>(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 (
|
||||||
|
<>
|
||||||
|
<section ref={sectionRef} className="faq-two">
|
||||||
|
<div
|
||||||
|
className="faq-two__bg jarallax"
|
||||||
|
style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/backgrounds/faq-bg-2.jpg)" }}
|
||||||
|
></div>
|
||||||
|
<div className="container">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-lg-6 wow fadeInLeft" data-wow-delay="0ms" style={{ visibility: "hidden" }}>
|
||||||
|
<div className="faq-two__content">
|
||||||
|
<h2 className="faq-two__content__title">
|
||||||
|
Frequently Asked Questions For It's a Section on Documents
|
||||||
|
</h2>
|
||||||
|
<p className="faq-two__content__text">
|
||||||
|
Business tailored design, management & support services Business
|
||||||
|
business agency elit, sed do eiusmod tempor majority have
|
||||||
|
in some we form, by injected humour solution.
|
||||||
|
</p>
|
||||||
|
<ul className="faq-two__content__list">
|
||||||
|
<li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}>
|
||||||
|
<div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#D33D35", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div>
|
||||||
|
You solution business will be fully satisfied you are under.
|
||||||
|
</li>
|
||||||
|
<li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}>
|
||||||
|
<div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#D33D35", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div>
|
||||||
|
You solution business will be fully satisfied you are under.
|
||||||
|
</li>
|
||||||
|
<li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}>
|
||||||
|
<div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#D33D35", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div>
|
||||||
|
You solution business will be fully satisfied you are under.
|
||||||
|
</li>
|
||||||
|
<li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}>
|
||||||
|
<div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#D33D35", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div>
|
||||||
|
You solution business will be fully satisfied you are under.
|
||||||
|
</li>
|
||||||
|
<li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700" }}>
|
||||||
|
<div style={{ width: "40px", height: "40px", borderRadius: "50%", border: "2px solid #fb8459", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "20px", color: "#fb8459" }}>?</div>
|
||||||
|
<span>Where Common Question are Answere</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-6 wow fadeInRight" data-wow-delay="200ms" style={{ visibility: "hidden" }}>
|
||||||
|
<div className="faq-two__accordion tolak-accrodion">
|
||||||
|
{faqItems.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item.id}
|
||||||
|
className={`accrodion ${activeAccordion === item.id ? "active" : ""}`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="accrodion-title"
|
||||||
|
onClick={() => toggleAccordion(item.id)}
|
||||||
|
>
|
||||||
|
<h4>
|
||||||
|
<i className="fa fa-check-circle" style={{ color: activeAccordion === item.id ? "#fff" : "#fb8459" }}></i>
|
||||||
|
{item.title}
|
||||||
|
<span className="accrodion-title__icon"></span>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div className="accrodion-content">
|
||||||
|
<div className="inner">
|
||||||
|
<div className="inner__image">
|
||||||
|
<img
|
||||||
|
src="https://tolaklaravel.bracketweb.com/assets/images/resources/accordian-logo.png"
|
||||||
|
alt="Logo"
|
||||||
|
width={50}
|
||||||
|
height={50}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p>{item.content}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="video-three wow fadeInUp" data-wow-delay="400ms">
|
||||||
|
<div className="container">
|
||||||
|
<div
|
||||||
|
className="video-three__inner"
|
||||||
|
style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/backgrounds/video-bg-3.jpg)" }}
|
||||||
|
>
|
||||||
|
<div className="video-three__btn">
|
||||||
|
<div className="video-three__btn__logo-outer"></div>
|
||||||
|
<div className="video-three__btn__logo-inner">
|
||||||
|
<img
|
||||||
|
src="https://tolaklaravel.bracketweb.com/assets/images/resources/accordian-logo.png"
|
||||||
|
alt="Rotating Logo"
|
||||||
|
width={140}
|
||||||
|
height={140}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FaqVideoSection;
|
||||||
123
src/components/careers/ProcessSection.tsx
Normal file
123
src/components/careers/ProcessSection.tsx
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useEffect, useRef } from "react";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
const ProcessSection = () => {
|
||||||
|
const sectionRef = useRef<HTMLDivElement>(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 (
|
||||||
|
<section ref={sectionRef} className="process-one-h-four section-space">
|
||||||
|
<div
|
||||||
|
className="process-one-h-four__bg"
|
||||||
|
style={{ backgroundImage: "url(/assets/imgs/bg/process-bg.png)" }}
|
||||||
|
></div>
|
||||||
|
<div className="container">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-md-12">
|
||||||
|
<div
|
||||||
|
className="sec-title wow"
|
||||||
|
data-wow-duration="1500ms"
|
||||||
|
style={{ visibility: "hidden" }}
|
||||||
|
>
|
||||||
|
<h6 className="sec-title__tagline text-center">
|
||||||
|
<span className="icon-sec-icon"></span>
|
||||||
|
Step Process
|
||||||
|
</h6>
|
||||||
|
<h3 className="sec-title__title text-center">Our works Process</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="process-one-h-four__wrapper">
|
||||||
|
<div className="process-one-h-four__line-shape">
|
||||||
|
<Image
|
||||||
|
src="/assets/image.png"
|
||||||
|
alt="Process Line"
|
||||||
|
width={1170}
|
||||||
|
height={500}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="process-one-h-four__content">
|
||||||
|
{processItems.map((item, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={`process-one-h-four__item wow ${item.left ? "process-one-h-four__item-left" : ""}`}
|
||||||
|
data-wow-duration="1500ms"
|
||||||
|
data-wow-delay={item.delay}
|
||||||
|
style={{ visibility: "hidden" }}
|
||||||
|
>
|
||||||
|
<span className="process-one-h-four__num">{item.num}</span>
|
||||||
|
<h3 className="process-one-h-four__title">{item.title}</h3>
|
||||||
|
<p className="process-one-h-four__desc">{item.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProcessSection;
|
||||||
144
src/components/careers/ServiceSection.tsx
Normal file
144
src/components/careers/ServiceSection.tsx
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useEffect, useRef } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
const ServiceSection = () => {
|
||||||
|
const sectionRef = useRef<HTMLDivElement>(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 (
|
||||||
|
<section ref={sectionRef} className="service-three">
|
||||||
|
<div
|
||||||
|
className="service-three__bg"
|
||||||
|
style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/backgrounds/service-bg-3.jpg)" }}
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
className="service-three__shape"
|
||||||
|
style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/shapes/service-shape-3.png)" }}
|
||||||
|
></div>
|
||||||
|
<div className="container">
|
||||||
|
<div className="sec-title-three">
|
||||||
|
<h6 className="sec-title-three__tagline">
|
||||||
|
<span className="sec-title-three__tagline__left-border"></span>
|
||||||
|
OUR BEST SERVICE
|
||||||
|
<span className="sec-title-three__tagline__right-border"></span>
|
||||||
|
</h6>
|
||||||
|
<h3 className="sec-title-three__title">We Are Service Your Business</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="row">
|
||||||
|
{services.map((service, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="col-lg-4 col-md-6 wow fadeInUp"
|
||||||
|
data-wow-delay={`${index * 100}ms`}
|
||||||
|
style={{ visibility: "hidden" }}
|
||||||
|
>
|
||||||
|
<div className="service-three__item text-center">
|
||||||
|
<div className="service-three__item__content">
|
||||||
|
<div className="service-three__item__icon">
|
||||||
|
<span className={service.icon}></span>
|
||||||
|
</div>
|
||||||
|
<h3 className="service-three__item__title">
|
||||||
|
<Link href={service.link}>{service.title}</Link>
|
||||||
|
</h3>
|
||||||
|
<p className="service-three__item__text">{service.text}</p>
|
||||||
|
</div>
|
||||||
|
<div className="service-three__item__image">
|
||||||
|
<img src={service.image} alt={service.title} />
|
||||||
|
{/* <Link className="service-three__item__rm" href={service.link}>
|
||||||
|
<span className="fa-solid fa-arrow-right-long"></span>
|
||||||
|
</Link> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ServiceSection;
|
||||||
111
src/components/careers/WhyChooseSection.tsx
Normal file
111
src/components/careers/WhyChooseSection.tsx
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useEffect, useRef } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
const WhyChooseSection = () => {
|
||||||
|
const sectionRef = useRef<HTMLDivElement>(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 (
|
||||||
|
<section ref={sectionRef} className="why-choose-three">
|
||||||
|
<div
|
||||||
|
className="why-choose-three__bg"
|
||||||
|
style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/backgrounds/why-choose-3-bg.png)" }}
|
||||||
|
></div>
|
||||||
|
<div className="container">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-xl-6">
|
||||||
|
<div className="why-choose-three__image wow slideInLeft" data-wow-delay="0ms" style={{ visibility: "hidden" }}>
|
||||||
|
<img src="https://tolaklaravel.bracketweb.com/assets/images/resources/why-choose-3-1.jpg" alt="Why Choose Us" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-xl-6 d-flex align-items-center">
|
||||||
|
<div className="why-choose-three__content wow fadeInUp" data-wow-delay="200ms" style={{ visibility: "hidden" }}>
|
||||||
|
<div className="sec-title-three text-left">
|
||||||
|
<h6 className="sec-title-three__tagline">
|
||||||
|
<span className="sec-title-three__tagline__left-border"></span>
|
||||||
|
Why Choose Us
|
||||||
|
<span className="sec-title-three__tagline__right-border"></span>
|
||||||
|
</h6>
|
||||||
|
<h3 className="sec-title-three__title">
|
||||||
|
Choose The Best IT Service For Company Solution
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<p className="why-choose-three__content__text">
|
||||||
|
Business tailored design, management & support services Business business agency elit, sed do eiusmod tempor
|
||||||
|
majority have in some we form, by injected humour solution.
|
||||||
|
</p>
|
||||||
|
<ul className="why-choose-three__content__list">
|
||||||
|
{listItems.map((item, index) => (
|
||||||
|
<li key={index}>
|
||||||
|
<span className="why-choose-three__content__list__number"></span>
|
||||||
|
<span className="why-choose-three__content__list__icon">
|
||||||
|
<i className={item.iconClass}></i>
|
||||||
|
</span>
|
||||||
|
{item.title}
|
||||||
|
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WhyChooseSection;
|
||||||
127
src/components/careers/WorkProcessSection.tsx
Normal file
127
src/components/careers/WorkProcessSection.tsx
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useEffect, useRef } from "react";
|
||||||
|
|
||||||
|
const WorkProcessSection = () => {
|
||||||
|
const sectionRef = useRef<HTMLDivElement>(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 (
|
||||||
|
<div ref={sectionRef} className="work-process-container-wrapper style2">
|
||||||
|
<div className="shape">
|
||||||
|
<a href="#">
|
||||||
|
<img
|
||||||
|
className="rotate360"
|
||||||
|
src="https://tolaklaravel.bracketweb.com/assets/images/shapes/workProcessShape2_3.png"
|
||||||
|
alt="shape"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="container">
|
||||||
|
<div className="work-process-wrapper style2">
|
||||||
|
<div className="shape1 d-none d-xxl-block">
|
||||||
|
<img src="https://tolaklaravel.bracketweb.com/assets/images/shapes/workProcessShape2_1.png" alt="shape" />
|
||||||
|
</div>
|
||||||
|
<div className="shape2 d-none d-xxl-block">
|
||||||
|
<img src="https://tolaklaravel.bracketweb.com/assets/images/shapes/workProcessShape2_2.png" alt="shape" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="row gy-5 gx-70 align-items-center">
|
||||||
|
<div className="col-xl-5">
|
||||||
|
<div className="work-process-content">
|
||||||
|
<div className="section-title">
|
||||||
|
<div className="subtitle text-white wow" data-wow-delay="0.3s" style={{ visibility: "hidden" }}>
|
||||||
|
<img src="https://tolaklaravel.bracketweb.com/assets/images/icon/arrowLeftWhite.svg" alt="icon" />
|
||||||
|
<span className="text-white">How we do</span>
|
||||||
|
<img src="https://tolaklaravel.bracketweb.com/assets/images/icon/arrowRightWhite.svg" alt="icon" />
|
||||||
|
</div>
|
||||||
|
<h2 className="title text-white wow" data-wow-delay="0.6s" style={{ visibility: "hidden" }}>
|
||||||
|
Amazing Solutions <br /> For business
|
||||||
|
</h2>
|
||||||
|
<p className="text-white wow" data-wow-delay="0.5s" style={{ visibility: "hidden" }}>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
<div className="btn-wrapper mt-4">
|
||||||
|
<a className="gt-btn style5" href="#">
|
||||||
|
<b>HOW IT WORKS</b>
|
||||||
|
<i className="fa-sharp fa-regular fa-arrow-right-long"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-xl-7">
|
||||||
|
<div className="work-process-thumb wow" data-wow-delay="0.3s" style={{ visibility: "hidden" }}>
|
||||||
|
<div className="thumb2_1">
|
||||||
|
<img
|
||||||
|
src="https://tolaklaravel.bracketweb.com/assets/images/resources/workProcessThumb1_1.png"
|
||||||
|
style={{ filter: "none", maxWidth: "100%" }}
|
||||||
|
alt="thumb"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{processCards.map((card) => (
|
||||||
|
<div key={card.id} className={`process-card card-${card.id}`}>
|
||||||
|
<div className="number">{card.id}</div>
|
||||||
|
<div className="icon">
|
||||||
|
<span className={card.icon}></span>
|
||||||
|
</div>
|
||||||
|
<div className="text">
|
||||||
|
{card.text.split('\n').map((line, i) => (
|
||||||
|
<React.Fragment key={i}>
|
||||||
|
{line}
|
||||||
|
{i === 0 && <br />}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WorkProcessSection;
|
||||||
231
src/components/common/InnerBanner.tsx
Normal file
231
src/components/common/InnerBanner.tsx
Normal file
@ -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 (
|
||||||
|
<>
|
||||||
|
<style>{`
|
||||||
|
/* ── 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* dark gradient overlay */
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* shapes */
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* container */
|
||||||
|
.banner__inner-page .ib-container {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* title */
|
||||||
|
.banner__inner-page h2 {
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 48px;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* breadcrumb */
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── sway animation for shape3 ─── */
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── WOW fallback ─── */
|
||||||
|
@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); }
|
||||||
|
}
|
||||||
|
@keyframes _fadeInUp {
|
||||||
|
from { opacity: 0; transform: translateY(20px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
.wow.slideInLeft { animation: _slideInLeft 1.2s ease both; }
|
||||||
|
.wow.slideInRight { animation: _slideInRight 1.2s ease both; }
|
||||||
|
.wow.fadeInUp { animation: _fadeInUp 1s 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; }
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
|
||||||
|
<section
|
||||||
|
className="banner__inner-page"
|
||||||
|
style={{ backgroundImage: `url(${bgImage})` }}
|
||||||
|
>
|
||||||
|
{/* shape2 – bottom-left large */}
|
||||||
|
<div
|
||||||
|
className="ib-shape2 wow slideInLeft"
|
||||||
|
data-wow-delay="0ms"
|
||||||
|
data-wow-duration="1500ms"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/assets/img/elements/elements16.png"
|
||||||
|
alt="shape"
|
||||||
|
width={169}
|
||||||
|
height={266}
|
||||||
|
style={{ color: "transparent" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* shape1 – bottom-left small (layered above shape2) */}
|
||||||
|
<div
|
||||||
|
className="ib-shape1 wow slideInLeft"
|
||||||
|
data-wow-delay="200ms"
|
||||||
|
data-wow-duration="1500ms"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/assets/img/elements/elements8.png"
|
||||||
|
alt="shape"
|
||||||
|
width={188}
|
||||||
|
height={231}
|
||||||
|
style={{ color: "transparent", opacity: 0.6 }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* shape3 – right side with sway */}
|
||||||
|
<div
|
||||||
|
className="ib-shape3 wow slideInRight"
|
||||||
|
data-wow-delay="200ms"
|
||||||
|
data-wow-duration="1500ms"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/assets/img/elements/elements9.png"
|
||||||
|
alt="shape"
|
||||||
|
width={535}
|
||||||
|
height={450}
|
||||||
|
className="sway__animationX"
|
||||||
|
style={{ color: "transparent", opacity: 0.5 }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* text content */}
|
||||||
|
<div className="ib-container">
|
||||||
|
<h2
|
||||||
|
className="wow fadeInUp"
|
||||||
|
data-wow-delay="0ms"
|
||||||
|
data-wow-duration="1500ms"
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="breadcrumb-list wow fadeInUp"
|
||||||
|
data-wow-delay="200ms"
|
||||||
|
data-wow-duration="1500ms"
|
||||||
|
>
|
||||||
|
<Link href="/">Home</Link>
|
||||||
|
<span>
|
||||||
|
<i className="fa-regular fa-angles-right mx-2" />
|
||||||
|
{crumb}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InnerBanner;
|
||||||
146
src/components/home/OfferSection.tsx
Normal file
146
src/components/home/OfferSection.tsx
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
"use client";
|
||||||
|
import React, { useEffect } from "react";
|
||||||
|
|
||||||
|
// ── inline SVG icons ────────────────────────────────────────────────────────
|
||||||
|
const IconWebsite = () => (
|
||||||
|
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M18 0C10.3961 0 0 5.74724 0 18C0 29.9409 9.99921 36 18 36C31.7268 36 36 23.974 36 18C36 9.18425 29.2535 0 18 0ZM13.826 1.6937C11.948 3.29528 10.389 5.94567 9.38268 9.23386C8.07874 8.46142 6.8811 7.50472 5.81811 6.39213C8.01496 4.08898 10.7929 2.47323 13.826 1.6937ZM5.04567 7.25669C6.23622 8.49685 7.58976 9.55276 9.06378 10.389C8.51102 12.5362 8.18504 14.9173 8.14252 17.4189H1.17638C1.30394 13.6843 2.66457 10.1197 5.04567 7.25669ZM5.04567 28.7433C2.65748 25.8803 1.30394 22.3158 1.17638 18.5811H8.14252C8.18504 21.0898 8.51102 23.4638 9.06378 25.611C7.59685 26.4543 6.24331 27.5032 5.04567 28.7433ZM5.81811 29.615C6.8811 28.5024 8.07874 27.5457 9.38268 26.7732C10.389 30.0543 11.948 32.7118 13.826 34.3134C10.7929 33.5268 8.01496 31.911 5.81811 29.615ZM17.4189 34.7953C14.4 34.4126 11.7992 31.0394 10.3961 26.2063C12.5646 25.1079 14.9598 24.4913 17.4189 24.3992V34.7953ZM17.4189 23.2441C14.8535 23.3291 12.3591 23.9598 10.0984 25.0654C9.62362 23.0811 9.34016 20.8913 9.29764 18.5811H17.4189V23.2441ZM17.4189 17.4189H9.29764C9.34016 15.1087 9.62362 12.9189 10.0984 10.9346C12.3661 12.0402 14.8606 12.6709 17.4189 12.7559V17.4189ZM17.4189 11.6008C14.9528 11.5157 12.5646 10.8921 10.3961 9.7937C11.7992 4.95354 14.4 1.5874 17.4189 1.20472V11.6008ZM30.9543 7.25669C33.3354 10.1197 34.6961 13.6843 34.8236 17.4189H27.8646C27.8221 14.9102 27.4961 12.5362 26.9433 10.389C28.4102 9.54567 29.7638 8.49685 30.9543 7.25669ZM30.1819 6.38504C29.1189 7.49764 27.9213 8.45433 26.6173 9.22677C25.611 5.94567 24.052 3.29528 22.174 1.68661C25.2071 2.47323 27.985 4.08898 30.1819 6.38504ZM18.5811 1.20472C21.6 1.5874 24.2008 4.96063 25.6039 9.7937C23.4354 10.8921 21.0472 11.5087 18.5811 11.6008V1.20472ZM18.5811 12.7559C21.1465 12.6709 23.6409 12.0402 25.9016 10.9346C26.3764 12.9189 26.6598 15.1087 26.7024 17.4189H18.5811V12.7559ZM18.5811 18.5811H26.7024C26.6598 20.8913 26.3764 23.0811 25.9016 25.0654C23.6195 23.9424 21.1233 23.3213 18.5811 23.2441V18.5811ZM18.5811 34.7953V24.3992C21.0472 24.4843 23.4354 25.1079 25.6039 26.2063C24.2008 31.0465 21.6 34.4126 18.5811 34.7953ZM22.174 34.3063C24.052 32.7047 25.611 30.0543 26.6173 26.7661C27.9213 27.5386 29.1189 28.4953 30.1819 29.6079C27.985 31.911 25.2071 33.5268 22.174 34.3063ZM30.9543 28.7433C29.7638 27.5032 28.4102 26.4543 26.9433 25.611C27.4961 23.4638 27.8221 21.0827 27.8646 18.5811H34.8236C34.6961 22.3158 33.3354 25.8803 30.9543 28.7433Z" fill="#3C72FC" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const IconAndroid = () => (
|
||||||
|
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M22.3329 3.58535L23.91 0.956761C23.9526 0.885641 23.9809 0.806813 23.9931 0.724776C24.0053 0.64274 24.0012 0.559103 23.9811 0.47864C23.961 0.398177 23.9252 0.322464 23.8758 0.255824C23.8265 0.189184 23.7644 0.132922 23.6933 0.0902496C23.6222 0.0475777 23.5434 0.0193317 23.4613 0.00712437C23.3793 -0.00508296 23.2957 -0.00101255 23.2152 0.0191032C23.1347 0.039219 23.059 0.0749861 22.9924 0.124362C22.9257 0.173739 22.8695 0.235758 22.8268 0.306877L21.1626 3.08072C20.1717 2.72831 19.1107 2.52621 18.0004 2.52621C16.8901 2.52621 15.829 2.72831 14.8381 3.08072L13.1739 0.306877C13.0878 0.163244 12.948 0.0597288 12.7855 0.0191032C12.623 -0.0215224 12.4511 0.00406979 12.3074 0.0902497C12.1638 0.17643 12.0603 0.316138 12.0196 0.47864C11.979 0.641142 12.0046 0.813128 12.0908 0.956761L13.6678 3.58535C10.6192 5.16111 8.52686 8.33789 8.52686 12.0004C8.52686 12.1679 8.59339 12.3285 8.71184 12.4469C8.83028 12.5654 8.99092 12.6319 9.15842 12.6319H26.8423C27.0098 12.6319 27.1705 12.5654 27.2889 12.4469C27.4074 12.3285 27.4739 12.1679 27.4739 12.0004C27.4733 8.33853 25.3815 5.16174 22.3329 3.58535ZM9.81399 11.3688C10.1374 7.13539 13.6855 3.78997 18.0004 3.78997C22.3152 3.78997 25.8634 7.13539 26.1868 11.3688H9.81399Z" fill="#3C72FC" />
|
||||||
|
<path d="M26.8416 13.2634H9.15774C8.99024 13.2634 8.8296 13.33 8.71116 13.4484C8.59272 13.5668 8.52618 13.7275 8.52618 13.895V26.6343C8.52751 27.4433 8.8497 28.2188 9.42205 28.7905C9.9944 29.3623 10.7702 29.6837 11.5792 29.6842H12.3156V33.4774C12.3156 34.8681 13.4486 35.9999 14.8419 35.9999C16.2351 35.9999 17.3681 34.8681 17.3681 33.4774V29.6842H18.6313V33.4774C18.6313 34.8681 19.7643 35.9999 21.1575 35.9999C22.5508 35.9999 23.6838 34.8681 23.6838 33.4774V29.6842H24.4202C25.2293 29.6839 26.0051 29.3625 26.5775 28.7907C27.1499 28.2189 27.472 27.4434 27.4732 26.6343V13.895C27.4732 13.7275 27.4067 13.5668 27.2882 13.4484C27.1698 13.33 27.0091 13.2634 26.8416 13.2634ZM30.3153 13.2634C29.0963 13.2634 28.1048 14.2562 28.1048 15.4764V24.3133C28.1048 25.5335 29.0963 26.5263 30.3153 26.5263C31.5342 26.5263 32.5258 25.5335 32.5258 24.3133V15.4764C32.5254 14.89 32.2925 14.3277 31.8781 13.9129C31.4637 13.498 30.9017 13.2644 30.3153 13.2634ZM5.68412 13.2634C4.46519 13.2634 3.47363 14.2562 3.47363 15.4764V24.3133C3.47363 25.5335 4.46519 26.5263 5.68412 26.5263C6.90305 26.5263 7.89461 25.5335 7.89461 24.3133V15.4764C7.89427 14.89 7.66136 14.3277 7.24696 13.9129C6.83255 13.498 6.27051 13.2644 5.68412 13.2634Z" fill="#3C72FC" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const IconIOS = () => (
|
||||||
|
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clipPath="url(#clip0_ios)">
|
||||||
|
<path d="M25.368 0.727224L25.3301 0L24.6063 0.0778922C24.5353 0.0854747 17.5395 0.928503 17.0597 8.75012L17.0115 9.53318L17.7945 9.48011C17.8745 9.47459 25.7981 8.84249 25.368 0.727224ZM24.0025 1.60058C23.8708 6.3141 20.2037 7.62517 18.5204 7.97878C19.1614 3.39831 22.4832 2.00245 24.0025 1.60058Z" fill="#3C72FC" />
|
||||||
|
<path d="M32.1109 25.8609L31.6704 25.7182C29.0048 24.8566 27.2147 22.415 27.2147 19.6426C27.2147 17.1763 28.6092 14.9705 30.8549 13.8855L31.525 13.5622L31.1514 12.9191C30.9914 12.6434 29.4963 10.2011 26.3379 9.39256C23.8329 8.7515 21.0164 9.31881 17.9634 11.0793C16.671 10.2949 12.3779 8.03393 8.9624 10.3004C8.29377 10.6699 1.20696 14.9153 4.89546 26.3703C5.00369 26.6267 7.57551 32.652 10.6188 34.9088C11.4398 35.6933 13.5394 36.6735 15.9389 35.0377C16.3546 34.8661 19.136 33.7956 20.9006 35.0494C21.552 35.4954 22.6894 36.0007 23.8908 36.0007C24.8021 36.0007 25.7499 35.7105 26.5509 34.8833C26.9245 34.56 30.3373 31.514 32.1109 26.6888L32.1626 26.5482L32.1109 25.8609Z" fill="#3C72FC" />
|
||||||
|
</g>
|
||||||
|
<defs><clipPath id="clip0_ios"><rect width="36" height="36" fill="white" /></clipPath></defs>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const IconWatch = () => (
|
||||||
|
<svg width="26" height="36" viewBox="0 0 26 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M19.4282 8.14719H4.2927C3.43931 8.14719 2.74512 8.84146 2.74512 9.69477V26.3054C2.74512 27.1587 3.43938 27.853 4.2927 27.853H19.4282C20.2815 27.853 20.9757 27.1587 20.9757 26.3054V9.69477C20.9757 8.84146 20.2814 8.14719 19.4282 8.14719Z" fill="#3C72FC" fillOpacity="0.2" />
|
||||||
|
<path d="M23.6774 11.9782H23.0853V9.28238C23.0853 7.59677 21.7931 6.20775 20.1474 6.05271L19.2545 2.08153C18.9789 0.855914 17.9092 0 16.653 0H7.0679C5.81176 0 4.74196 0.855914 4.4664 2.08153L3.57351 6.05271C1.92777 6.20775 0.635498 7.59677 0.635498 9.28238V26.7176C0.635498 28.5067 2.09104 29.9622 3.88007 29.9622H19.063L18.2255 33.6871C18.0589 34.428 17.4123 34.9453 16.653 34.9453H7.0679C6.30859 34.9453 5.662 34.428 5.49543 33.6871L5.0834 31.8545C5.0834 31.5633 4.84731 31.3272 4.55606 31.3272C4.26481 31.3272 4.02872 31.5633 4.02872 31.8545L4.4664 33.9185C4.74196 35.1441 5.81169 36 7.0679 36H16.653C17.9092 36 18.9789 35.1441 19.2545 33.9185L20.1474 29.9473C21.7931 29.7922 23.0853 28.4032 23.0853 26.7176V18.4657H23.6774C24.6077 18.4657 25.3646 17.7088 25.3646 16.7785V13.6654C25.3646 12.7351 24.6078 11.9782 23.6774 11.9782Z" fill="#3C72FC" />
|
||||||
|
<path d="M13.001 2.48169H10.7086C10.4174 2.48169 10.1812 2.7178 10.1812 3.00903C10.1812 3.30027 10.4174 3.53638 10.7086 3.53638H13.0122C13.3035 3.53638 13.5396 3.30027 13.5396 3.00903C13.5396 2.7178 13.3035 2.48169 13.0123 2.48169Z" fill="#3C72FC" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const IconTv = () => (
|
||||||
|
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clipPath="url(#clip0_tv)">
|
||||||
|
<path d="M28.5331 13.0602H33.0025C33.2979 13.0602 33.5371 12.8208 33.5371 12.5254C33.5371 12.2301 33.2979 11.9907 33.0025 11.9907H28.5331C28.2377 11.9907 27.9985 12.2301 27.9985 12.5254C27.9985 12.8208 28.2377 13.0602 28.5331 13.0602ZM28.5331 14.9672H33.0025C33.2977 14.9672 33.537 14.7278 33.537 14.4325C33.537 14.1372 33.2977 13.8978 33.0025 13.8978H28.5331C28.2377 13.8978 27.9985 14.1372 27.9985 14.4325C27.9985 14.7278 28.2377 14.9672 28.5331 14.9672ZM28.5331 16.8741H33.0025C33.2977 16.8741 33.537 16.6347 33.537 16.3394C33.537 16.0441 33.2977 15.8047 33.0025 15.8047H28.5331C28.2377 15.8047 27.9985 16.0441 27.9985 16.3394C27.9985 16.6347 28.2377 16.8741 28.5331 16.8741Z" fill="#3C72FC" />
|
||||||
|
<path d="M8.09721 30.1764C10.3632 30.4112 12.6399 30.5287 14.9181 30.5285C17.1969 30.5285 19.4763 30.4112 21.7392 30.1764C23.0383 30.0412 24.2682 29.4631 25.2021 28.5479C26.1362 27.6325 26.7388 26.4147 26.8995 25.1185C27.3389 21.5631 27.3389 17.9672 26.8995 14.4118C26.7388 13.1157 26.1362 11.8979 25.2021 10.9824C24.2682 10.0673 23.0383 9.4891 21.7392 9.35396C17.204 8.88429 12.6324 8.88429 8.09721 9.35396C6.79811 9.48882 5.56814 10.0673 4.63432 10.9824C3.70021 11.8979 3.09728 13.1157 2.93697 14.4118C2.49725 17.9672 2.49725 21.5632 2.93697 25.1185C3.09728 26.4147 3.70021 27.6325 4.63432 28.5479C5.56814 29.4631 6.79783 30.0412 8.09721 30.1764Z" fill="#3C72FC" fillOpacity="0.2" />
|
||||||
|
<path d="M31.3294 6.27253H21.8985C21.8109 5.64497 21.5645 5.05016 21.1827 4.54446L24.8145 0.912619C24.9135 0.813379 24.9698 0.677319 24.9698 0.535541C24.9698 0.393763 24.9135 0.257703 24.8145 0.158463C24.7153 0.0592237 24.5792 0 24.4374 0C24.2957 0 24.1596 0.0592237 24.0603 0.158463L20.4261 3.7891C19.0907 2.78694 17.2373 2.78694 15.9022 3.78889L12.2698 0.15655C12.1695 0.0563102 12.0335 0 11.8918 0C11.75 0 11.614 0.0563102 11.5137 0.15655C11.4135 0.258007 11.3572 0.394295 11.3572 0.536419C11.3572 0.678542 11.4135 0.81483 11.5137 0.916287L15.1455 4.54446C14.7637 5.05022 14.5173 5.64499 14.4295 6.27253H4.6706C2.09506 6.27253 0 8.3677 0 10.9432V28.5871C0 31.1623 2.09513 33.2574 4.6706 33.2574H6.24602L6.48192 34.1267C6.73188 35.0468 7.57233 35.6895 8.5259 35.6895C9.47948 35.6895 10.32 35.0469 10.57 34.1267L10.8059 33.2574H25.1941L25.43 34.1267C25.68 35.0468 26.5207 35.6895 27.474 35.6895C28.4277 35.6895 29.2681 35.0469 29.518 34.1267L29.754 33.2574H31.3297C33.9049 33.2574 36 31.1623 36 28.5871V10.9432C36 8.36763 33.9049 6.27253 31.3294 6.27253ZM16.2532 4.89581C17.3071 3.84225 19.0214 3.84225 20.0751 4.89609C20.4579 5.2781 20.7114 5.75461 20.8147 6.27267H15.5135C15.6166 5.75468 15.8702 5.2781 16.2532 4.89581ZM34.9307 28.5871C34.9307 30.5726 33.3152 32.1882 31.3294 32.1882H4.6706C2.68484 32.1882 1.06928 30.5726 1.06928 28.5871V10.9432C1.06928 8.95741 2.68484 7.34184 4.6706 7.34184H31.3297C33.3152 7.34184 34.9307 8.95741 34.9307 10.9432V28.5871ZM9.53805 33.8462C9.41423 34.3018 8.99805 34.6202 8.52597 34.6202C8.05382 34.6202 7.63772 34.3019 7.51382 33.8462L7.354 33.2574H9.69794L9.53805 33.8462ZM28.4862 33.8462C28.3623 34.3018 27.9462 34.6202 27.474 34.6202C27.0019 34.6202 26.5858 34.3019 26.4622 33.8462L26.3023 33.2574H28.646L28.4862 33.8462Z" fill="#3C72FC" />
|
||||||
|
</g>
|
||||||
|
<defs><clipPath id="clip0_tv"><rect width="36" height="36" fill="white" /></clipPath></defs>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const IconIOT = () => (
|
||||||
|
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M17.9999 10.2061C15.6829 10.2061 13.7979 12.0901 13.7979 14.406C13.7979 16.722 15.6828 18.606 17.9999 18.606C20.317 18.606 22.202 16.7219 22.202 14.406C22.202 12.0901 20.317 10.2061 17.9999 10.2061ZM17.9999 17.4061C16.3446 17.4061 14.9979 16.0601 14.9979 14.406C14.9979 12.7519 16.3446 11.406 17.9999 11.406C19.6552 11.406 21.002 12.7519 21.002 14.406C21.002 16.0601 19.6552 17.4061 17.9999 17.4061Z" fill="#3C72FC" />
|
||||||
|
<path d="M25.1903 18.0102C25.192 17.882 25.2001 17.7544 25.2001 17.626C25.2001 10.7685 22.7292 4.40667 18.4208 0.171803C18.1574 0 17.8427 0 17.5793 0.171803C13.2709 4.40667 10.8 10.7685 10.8 17.626C10.8 17.7544 10.8081 17.882 10.8098 18.0102C7.91877 19.5144 6 23.5346 6 28.1996C6 28.3587 6.06321 28.5113 6.17573 28.6238C6.28825 28.7364 6.44085 28.7996 6.59998 28.7996H29.4001C29.5592 28.7996 29.7118 28.7364 29.8243 28.6238C29.9369 28.5113 30.0001 28.3587 30.0001 28.1996C30.0001 23.5347 28.0814 19.5144 25.1903 18.0102ZM18.0001 1.45473C19.2677 2.78406 20.3501 4.32033 21.2367 6.00572H14.7634C15.6501 4.32026 16.7325 2.78399 18.0001 1.45473ZM7.21177 27.5996C7.35472 23.9749 8.78488 20.794 10.8614 19.374C11.0423 22.2454 11.6673 25.0445 12.6977 27.5996H7.21177ZM22.0117 27.5999H13.9884C12.6868 24.5589 12.0001 21.1194 12.0001 17.626C12.0001 13.8965 12.767 10.3296 14.1786 7.20568H21.8216C23.2332 10.3296 24.0001 13.8965 24.0001 17.626C24.0001 21.1195 23.3134 24.5589 22.0117 27.5999ZM23.3024 27.5996C24.3329 25.0445 24.9579 22.2454 25.1387 19.374C27.2153 20.794 28.6454 23.9749 28.7884 27.5996H23.3024Z" fill="#3C72FC" />
|
||||||
|
<path d="M18.0001 32.4005C17.6409 32.4005 17.4001 32.6993 17.4001 33.0005V35.3999C17.4001 35.7591 17.6409 35.9999 18.0001 35.9999C18.3593 35.9999 18.6001 35.7591 18.6001 35.3999V33.0006C18.6001 32.6993 18.3593 32.4005 18.0001 32.4005ZM14.9969 32.4005C14.6377 32.4005 14.3969 32.6993 14.3969 33.0005V34.1993C14.3969 34.5585 14.6377 34.7993 14.9969 34.7993C15.3561 34.7993 15.5969 34.5585 15.5969 34.1993V33.0005C15.5968 32.6993 15.3561 32.4005 14.9969 32.4005ZM21.0033 32.4005C20.6441 32.4005 20.4034 32.6993 20.4034 33.0005V34.1993C20.4034 34.5585 20.6441 34.7993 21.0033 34.7993C21.3625 34.7993 21.6033 34.5585 21.6033 34.1993V33.0005C21.6033 32.6993 21.3625 32.4005 21.0033 32.4005Z" fill="#3C72FC" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
// ── 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: <IconWebsite />, label: "Website" },
|
||||||
|
{ icon: <IconAndroid />, label: "Android" },
|
||||||
|
{ icon: <IconIOS />, label: "IOS" },
|
||||||
|
{ icon: <IconWatch />, label: "Watch" },
|
||||||
|
{ icon: <IconTv />, label: "Tv" },
|
||||||
|
{ icon: <IconIOT />, label: "IOT" },
|
||||||
|
];
|
||||||
|
|
||||||
|
// ── component ─────────────────────────────────────────────────────────────────
|
||||||
|
const OfferSection = () => {
|
||||||
|
useEffect(() => {
|
||||||
|
if (typeof window !== "undefined") {
|
||||||
|
// @ts-ignore
|
||||||
|
if (window.WOW) {
|
||||||
|
// @ts-ignore
|
||||||
|
new window.WOW({ live: false }).init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="offer-area secondary-bg">
|
||||||
|
{/* central radial glow */}
|
||||||
|
<div className="offer__shadow wow fadeIn" data-wow-delay="200ms" data-wow-duration="1500ms" />
|
||||||
|
|
||||||
|
{/* left shape */}
|
||||||
|
|
||||||
|
|
||||||
|
<div className="container">
|
||||||
|
{/* header row */}
|
||||||
|
<div className="offer-header-row">
|
||||||
|
<div className="offer-section-header">
|
||||||
|
<h5 className="wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
|
||||||
|
<img src={SECTION_TITLE_ICON} alt="icon" width={28} height={12} style={{ color: "transparent", verticalAlign: "middle", marginRight: 4 }} />
|
||||||
|
Our offering
|
||||||
|
</h5>
|
||||||
|
<h2 className="wow fadeInLeft" data-wow-delay="200ms" data-wow-duration="1500ms">
|
||||||
|
Enhance and Pioneer Using <br /> Technology Trends
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a
|
||||||
|
className="btn-one wow fadeInUp"
|
||||||
|
data-wow-delay="200ms"
|
||||||
|
data-wow-duration="1500ms"
|
||||||
|
href="/pricing"
|
||||||
|
>
|
||||||
|
Explore More <i className="fa-regular fa-arrow-right-long" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* cards grid */}
|
||||||
|
<div className="offer-grid">
|
||||||
|
{OFFER_ITEMS.map(({ icon, label }, idx) => (
|
||||||
|
<div
|
||||||
|
key={label}
|
||||||
|
className="wow bounceInUp"
|
||||||
|
data-wow-delay="0ms"
|
||||||
|
data-wow-duration="1500ms"
|
||||||
|
style={{ animationDelay: `${idx * 80}ms` }}
|
||||||
|
>
|
||||||
|
<div className="offer__item">
|
||||||
|
<div className="shape-top">
|
||||||
|
<img src={SHAPE_TOP} alt="shape" width={40} height={40} style={{ color: "transparent" }} />
|
||||||
|
</div>
|
||||||
|
<div className="shape-bottom">
|
||||||
|
<img src={SHAPE_BOTTOM} alt="shape" width={40} height={40} style={{ color: "transparent" }} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* icon */}
|
||||||
|
<div className="offer__icon">{icon}</div>
|
||||||
|
|
||||||
|
<h4>{label}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default OfferSection;
|
||||||
179
src/components/home/home-1/FeaturesSection.tsx
Normal file
179
src/components/home/home-1/FeaturesSection.tsx
Normal file
@ -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 = () => (
|
||||||
|
<svg width="36" height="36" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M32 6C21.5 6 13 14.5 13 25c0 7.4 4 13.8 10 17.2V48h18v-5.8C47 38.8 51 32.4 51 25c0-10.5-8.5-19-19-19z" stroke="white" strokeWidth="3" strokeLinejoin="round" fill="none" />
|
||||||
|
<path d="M23 48h18M25 54h14M29 60h6" stroke="white" strokeWidth="3" strokeLinecap="round" />
|
||||||
|
<path d="M32 14v4M22 18l2.8 2.8M42 18l-2.8 2.8" stroke="white" strokeWidth="2.5" strokeLinecap="round" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const GrowthIcon = () => (
|
||||||
|
<svg width="36" height="36" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M8 48L22 30l10 8L46 16l10 10" stroke="white" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
<path d="M46 8h10v10" stroke="white" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
<rect x="8" y="50" width="8" height="8" rx="1" fill="white" />
|
||||||
|
<rect x="20" y="42" width="8" height="16" rx="1" fill="white" />
|
||||||
|
<rect x="32" y="36" width="8" height="22" rx="1" fill="white" />
|
||||||
|
<rect x="44" y="28" width="8" height="30" rx="1" fill="white" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const TeamIcon = () => (
|
||||||
|
<svg width="36" height="36" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="32" cy="18" r="9" stroke="white" strokeWidth="3" fill="none" />
|
||||||
|
<path d="M14 52c0-9.9 8.1-18 18-18s18 8.1 18 18" stroke="white" strokeWidth="3" strokeLinecap="round" fill="none" />
|
||||||
|
<circle cx="14" cy="22" r="6" stroke="white" strokeWidth="2.5" fill="none" />
|
||||||
|
<path d="M2 50c0-7.2 5.4-13 12-13" stroke="white" strokeWidth="2.5" strokeLinecap="round" fill="none" />
|
||||||
|
<circle cx="50" cy="22" r="6" stroke="white" strokeWidth="2.5" fill="none" />
|
||||||
|
<path d="M62 50c0-7.2-5.4-13-12-13" stroke="white" strokeWidth="2.5" strokeLinecap="round" fill="none" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const ArrowIcon = () => (
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M5 12h14M13 6l6 6-6 6" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
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: <IdeaIcon />,
|
||||||
|
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: <GrowthIcon />,
|
||||||
|
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: <TeamIcon />,
|
||||||
|
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 (
|
||||||
|
<section className="fo-section">
|
||||||
|
<div className="fo-shapes">
|
||||||
|
<div className="fo-shape-one"></div>
|
||||||
|
<div className="fo-shape-two"></div>
|
||||||
|
</div>
|
||||||
|
<div className="fo-container">
|
||||||
|
<div className="fo-row">
|
||||||
|
{features.map((feature, index) => (
|
||||||
|
<div className="fo-col" key={index}>
|
||||||
|
<div
|
||||||
|
ref={(el) => { 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 */}
|
||||||
|
<div className="fo-hover-card">
|
||||||
|
{/* Circle icon badge above the hover card */}
|
||||||
|
<div className="fo-hover-icon">
|
||||||
|
{feature.icon}
|
||||||
|
</div>
|
||||||
|
<h2 className="fo-hover-title">{feature.title}</h2>
|
||||||
|
<Link href="#" className="fo-hover-btn">
|
||||||
|
<ArrowIcon />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main card */}
|
||||||
|
<div className="fo-card">
|
||||||
|
{/* Top dark section */}
|
||||||
|
<div className="fo-card-top">
|
||||||
|
<h2 className="fo-card-title">{feature.title}</h2>
|
||||||
|
<Link href="#" className="fo-card-btn">
|
||||||
|
<ArrowIcon />
|
||||||
|
</Link>
|
||||||
|
<p className="fo-card-desc">{feature.desc}</p>
|
||||||
|
</div>
|
||||||
|
{/* Bottom white section with image + floating icon */}
|
||||||
|
<div className="fo-card-bottom">
|
||||||
|
<div className="fo-card-image">
|
||||||
|
<Image
|
||||||
|
src={feature.image}
|
||||||
|
alt={feature.imageAlt}
|
||||||
|
width={340}
|
||||||
|
height={123}
|
||||||
|
style={{ width: "100%", height: "100%", objectFit: "cover" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="fo-card-icon">
|
||||||
|
{feature.icon}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FeaturesSection;
|
||||||
Loading…
x
Reference in New Issue
Block a user