new section added

src/app/about-us/page.tsx

@@ -23,6 +23,7 @@ import Header1 from "@/components/layout/Header1";
 import Footer1 from "@/components/layout/Footer1";
 import OfferSection from "@/components/home/OfferSection";
 import WhyChooseSection from "@/components/careers/WhyChooseSection";
+import PageHeader from "@/components/common/PageHeader";
 
 export default function Home2() {
     useEffect(() => {
@@ -40,7 +41,7 @@ export default function Home2() {
         <>
             <Header1 />
             <main>
-                <InnerBanner title="About Us" />
+                <PageHeader title="About Us" />
                 {/* <FeaturesSection /> */}
                 <About2Section />
                 <IconCounterSection />

src/app/blog/[slug]/BlogDetailsClient.tsx

@@ -6,6 +6,7 @@ import Header1 from "@/components/layout/Header1";
 import Footer1 from "@/components/layout/Footer1";
 import InnerBanner from "@/components/common/InnerBanner";
 import { BlogType } from "@/types";
+import PageHeader from "@/components/common/PageHeader";
 
 interface BlogDetailsClientProps {
     blog: BlogType | undefined;
@@ -41,7 +42,7 @@ export default function BlogDetailsClient({ blog }: BlogDetailsClientProps) {
         <>
             <Header1 />
             <main>
-                <InnerBanner title={blog.title} />
+                <PageHeader title="Blog Details" />
 
                 <section className="blog-details-area section-space">
                     <div className="container">

src/app/blog/page.tsx

@@ -3,19 +3,10 @@
 import React, { useEffect } from "react";
 import Header1 from "@/components/layout/Header1";
 import Footer1 from "@/components/layout/Footer1";
-
-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";
-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-1/TestimonialsSection";
 import BlogSection from "@/components/home/home-1/BlogSection";
-import BrandSection from "@/components/home/home-1/BrandSection";
+import PageHeader from "@/components/common/PageHeader";
 
-export default function Home1() {
+export default function BlogPage() {
     useEffect(() => {
         if (typeof window !== "undefined" && (window as any).initMetatron) {
             (window as any).initMetatron();
@@ -26,9 +17,8 @@ export default function Home1() {
         <>
             <Header1 />
             <main>
-                <InnerBanner title="Our Blog" />
+                <PageHeader title="Our Blog" />
                 <BlogSection hideHeader={true} />
-
             </main>
             <Footer1 />
         </>

src/app/careers/page.tsx

@@ -11,6 +11,7 @@ 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";
+import PageHeader from "@/components/common/PageHeader";
 
 export default function CareersPage() {
     useEffect(() => {
@@ -23,10 +24,7 @@ export default function CareersPage() {
         <>
             <Header1 />
             <main>
-                <InnerBanner
-                    title="Careers"
-                    bgImage="/assets/img-app/bg/hero-bg2.png"
-                />
+                <PageHeader title="Careers" />
                 <AboutOneSection />
                 <WhyChooseUs />
                 <FaqVideoSection />

src/app/contact/page.tsx

@@ -6,6 +6,7 @@ import Footer1 from "@/components/layout/Footer1";
 import InnerBanner from "@/components/common/InnerBanner";
 import ContactSection from "@/components/contact/ContactSection";
 import MapSection from "@/components/contact/MapSection";
+import PageHeader from "@/components/common/PageHeader";
 
 export default function ContactPage() {
     useEffect(() => {
@@ -23,7 +24,7 @@ export default function ContactPage() {
         <>
             <Header1 />
             <main>
-                <InnerBanner title="Contact Us" />
+                <PageHeader title="Contact Us" />
                 <ContactSection />
                 <MapSection />
             </main>

src/app/faq/page.tsx

@@ -6,6 +6,7 @@ import Footer1 from "@/components/layout/Footer1";
 import InnerBanner from "@/components/common/InnerBanner";
 import FaqPageSection from "@/components/faq/FaqPageSection";
 import FaqVideoSection from "@/components/careers/FaqVideoSection";
+import PageHeader from "@/components/common/PageHeader";
 
 export default function FaqPage() {
     useEffect(() => {
@@ -23,7 +24,7 @@ export default function FaqPage() {
         <>
             <Header1 />
             <main>
-                <InnerBanner title="FAQ" />
+                <PageHeader title="FAQ" />
                 <FaqPageSection />
                 <FaqVideoSection />
             </main>

src/app/page.tsx

@@ -17,6 +17,16 @@ 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";
+import AboutTwo from "@/components/home/AboutTwo";
+import MedicalServices from "@/components/home/MedicalServices";
+import WhyChooseTwo from "@/components/home/WhyChooseTwo";
+import HistoryTwo from "@/components/home/HistoryTwo";
+import AboutThree from "@/components/home/AboutThree";
+import HomeContactOne from "@/components/home/HomeContactOne";
+import FaqFour from "@/components/home/FaqFour";
+import CounsellingSolutions from "@/components/home/CounsellingSolutions";
+import CallAreaThree from "@/components/home/CallAreaThree";
+import CounterAreaTwo from "@/components/home/CounterAreaTwo";
 
 export default function MainPage() {
     useEffect(() => {
@@ -36,6 +46,11 @@ export default function MainPage() {
             <main>
                 <BannerSection />
                 <AboutSection />
+                <AboutTwo />
+                <MedicalServices />
+                <WhyChooseTwo />
+                <HistoryTwo />
+                <AboutThree />
                 <ChooseSection />
                 <IconCounterSection />
                 <ServiceThreeSlider />
@@ -43,6 +58,11 @@ export default function MainPage() {
                 <BrandSection />
                 <TestimonialsSection />
                 <ContactSection />
+                <HomeContactOne />
+                <CallAreaThree />
+                <CounterAreaTwo />
+                <CounsellingSolutions />
+                <FaqFour />
                 <BlogSection />
 
             </main>

src/app/portfolio/page.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import React, { useEffect } from "react";
+import Header1 from "@/components/layout/Header1";
+import Footer1 from "@/components/layout/Footer1";
+import PortfolioSection from "@/components/home/PortfolioSection";
+import Link from "next/link";
+import PageHeader from "@/components/common/PageHeader";
+
+/* ── Page ── */
+export default function PortfolioPage() {
+    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>
+                <PageHeader title="Our Portfolio" />
+                <PortfolioSection />
+            </main>
+            <Footer1 />
+        </>
+    );
+}

src/app/services/page.tsx

@@ -22,6 +22,7 @@ import WorkProcessSection from "@/components/home/home-2/WorkProcessSection";
 import ServiceSection2 from "@/components/careers/ServiceSection";
 import WorkProcessSection2 from "@/components/careers/WorkProcessSection";
 import AboutService from "@/components/services/AboutService";
+import PageHeader from "@/components/common/PageHeader";
 
 export default function Home3() {
     useEffect(() => {
@@ -39,7 +40,7 @@ export default function Home3() {
         <>
             <Header1 />
             <main>
-                <InnerBanner title="Our Services" />
+                <PageHeader title="Our Services" />
                 <FeaturesSection />
                 <ChooseSection />
                 {/* <HelpFormSection /> */}

src/components/common/PageHeader.tsx

@@ -0,0 +1,48 @@
+import Link from 'next/link';
+import React from 'react';
+
+interface PageHeaderProps {
+    title: string;
+    breadcrumbItems?: { name: string; href?: string }[];
+}
+
+const PageHeader: React.FC<PageHeaderProps> = ({ title, breadcrumbItems }) => {
+    return (
+        <section className="page-header">
+            <div className="page-header__bg">
+                <div
+                    className="page-header__bg__img"
+                    style={{ backgroundImage: 'url(https://bracketweb.com/pelocishtml/assets/images/backgrounds/page-header-img-1.png)' }}
+                >
+                </div>
+                <div className="page-header__bg__shape-1">
+                </div>
+                <div className="page-header__bg__shape-2">
+                </div>
+            </div>
+            <div className="container">
+                <h2 className="page-header__title">{title}</h2>
+                <ul className="pelocis-breadcrumb list-unstyled">
+                    <li><Link href="/">Home</Link></li>
+                    {breadcrumbItems && breadcrumbItems.map((item, index) => (
+                        <li key={index}>
+                            {item.href ? (
+                                <Link href={item.href}>{item.name}</Link>
+                            ) : (
+                                <span>{item.name}</span>
+                            )}
+                        </li>
+                    ))}
+                    {!breadcrumbItems && <li><span>{title}</span></li>}
+                </ul>
+            </div>
+            <img
+                className="page-header__shape"
+                src="https://bracketweb.com/pelocishtml/assets/images/shapes/bannar-shape-2.png"
+                alt="bannar-shape"
+            />
+        </section>
+    );
+};
+
+export default PageHeader;

src/components/home/AboutThree.tsx

@@ -0,0 +1,102 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+const AboutThree = () => {
+    const [count, setCount] = useState(0);
+    const countTarget = 26;
+    const [hasCounted, setHasCounted] = useState(false);
+    const counterRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting && !hasCounted) {
+                setHasCounted(true);
+                let start = 0;
+                const duration = 1500;
+                const increment = countTarget / (duration / 16);
+                const timer = setInterval(() => {
+                    start += increment;
+                    if (start >= countTarget) {
+                        setCount(countTarget);
+                        clearInterval(timer);
+                    } else {
+                        setCount(Math.floor(start));
+                    }
+                }, 16);
+            }
+        }, { threshold: 0.5 });
+
+        if (counterRef.current) {
+            observer.observe(counterRef.current);
+        }
+
+        return () => observer.disconnect();
+    }, [hasCounted]);
+
+    return (
+        <section className="about-three">
+            <div className="about-three__bg">
+                <div className="about-three__shape-one">
+                    <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/about-3-shape-1.png" alt="pelocis" />
+                </div>
+                <div className="about-three__shape-two">
+                    <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/about-3-shape-2.png" alt="pelocis" />
+                </div>
+            </div>
+            <div className="container">
+                <div className="row">
+                    <div className="col-xl-6 wow fadeInUp animated" data-wow-delay="100ms">
+                        <div className="about-three__content">
+                            <div className="sec-title">
+                                <div className="sec-title__shape"></div>
+                                <h6 className="sec-title__tagline">OUR ABOUT COMPANY</h6>
+                                <h3 className="sec-title__title">Psychology Seeks Explore The About Workings of Human</h3>
+                            </div>
+                            <p className="about-three__text">
+                                Business tailored design, management &amp; support services Business <br />
+                                business agency elit, sed do eiusmod tempor &nbsp;majority have <br />
+                                in some we form, by injected humour solution.
+                            </p>
+                            <div className="about-three__card">
+                                <ul className="about-three__card__list">
+                                    <li className="about-three__card__item">
+                                        <div className="about-three__card__icon">
+                                            <i className="fa-solid fa-hand-holding-heart"></i>
+                                        </div>
+                                        <h3>Behavioral Psychology</h3>
+                                    </li>
+                                    <li>
+                                        <span className="fa-solid fa-circle-check" style={{ color: '#222222', fontSize: '20px', marginRight: '8px' }}></span>
+                                        The right therapist can help you develop skills
+                                    </li>
+                                </ul>
+                                <div className="about-three__card__exp count-box counted" ref={counterRef}>
+                                    <h3 className="about-three__card__exp__number">
+                                        <span className="count-text">{count}</span>+
+                                    </h3>
+                                    <p className="about-three__card__exp__text">Years Experience</p>
+                                </div>
+                            </div>
+                            <p className="about-three__content__text">
+                                <span>Psychology :</span> The scientific study of behavior and mental processes It explores
+                                various aspects of human behavior such as perception, cognition, emotion,
+                                personality, development, and social interactions.
+                            </p>
+                            <a href="#" className="pelocis-btn">
+                                <span>About More <i className="fa-solid fa-arrow-right-long" style={{ marginLeft: '8px' }}></i></span>
+                            </a>
+                        </div>
+                    </div>
+                    <div className="col-xl-6 wow fadeInRight animated" data-wow-delay="200ms">
+                        <div className="pelocis-stretch-element-inside-column" style={{ marginLeft: '0px', marginRight: '-375.012px' }}>
+                            <div className="about-three__img">
+                                <img src="https://bracketweb.com/pelocishtml/assets/images/resources/about-3-1.png" alt="pelocis" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default AboutThree;

src/components/home/AboutTwo.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import React from "react";
+
+const AboutTwo = () => {
+    return (
+        <section className="about-two">
+            <div className="about-two__shape"></div>
+            <img
+                src="https://bracketweb.com/pelocishtml/assets/images/shapes/home-two-about-shape-1.png"
+                alt="shape"
+                className="about-two__shape__two"
+            />
+            <img
+                src="https://bracketweb.com/pelocishtml/assets/images/shapes/home-two-about-shape-2.png"
+                alt="shape"
+                className="about-two__shape__three"
+            />
+            <div className="container">
+                <div className="row align-items-center">
+                    <div className="col-xl-6">
+                        <div className="about-two__img">
+                            <img
+                                src="https://bracketweb.com/pelocishtml/assets/images/resources/about-2-1.jpg"
+                                alt="about"
+                            />
+                        </div>
+                    </div>
+                    <div className="col-xl-6">
+                        <div className="about-two__content">
+                            <div className="sec-title">
+                                <span className="about-two__dot-circle"></span>
+                                <div className="sec-title__shape"></div>
+                                <h6 className="sec-title__tagline">OUR ABOUT COMPANY</h6>
+                                <h3 className="sec-title__title">Psychology Seeks To Explore The About Workings of Human</h3>
+                            </div>
+                            <p className="about-two__text">
+                                Business tailored design, management & support services Business
+                                business agency elit, sed do eiusmod tempor &nbsp;majority have
+                                in some we form, by injected humour solution.
+                            </p>
+                            <ul className="about-two__list">
+                                <li>
+                                    <span className="icon-social-care"></span>
+                                    <div className="about-two__list__content">
+                                        <h3 className="about-two__list__title">Behavioral Psychology</h3>
+                                        <p className="about-two__list__text">Supporting individuals inovercoming and for their
+                                            quality of life whether solution.</p>
+                                    </div>
+                                </li>
+                                 <li>
+                                    <span className="icon-social-care"></span>
+                                    <div className="about-two__list__content">
+                                        <h4 className="about-two__list__title">Behavioral Psychology</h4>
+                                        <p className="about-two__list__text">Supporting individuals inovercoming and for their
+                                            quality of life whether solution.</p>
+                                    </div>
+                                </li>
+                            </ul>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default AboutTwo;

src/components/home/CallAreaThree.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Link from 'next/link';
+
+const CallAreaThree: React.FC = () => {
+    return (
+        <section className="call-area-three">
+            <div
+                className="call-area-three__bg"
+                style={{ backgroundImage: 'url(https://bracketweb.com/pelocishtml/assets/images/backgrounds/counter-area-two-bg.png)' }}
+            ></div>
+            <div className="container">
+                <div className="call-area-three__content">
+                    <h2 className="call-area-three__title">
+                        We Are Always Ready For Every Challenge <br /> Please Trust Us
+                    </h2>
+                    <p className="call-area-three__text">
+                        Business tailored design, management &amp; support services Business agency, sed <br />
+                        tempor &nbsp;majority have in some we form, by injected solution.
+                    </p>
+                    <Link href="/contact" className="pelocis-btn">
+                        <span>
+                            Get A Free Quote <i className="icon-right-arrow-white"></i>
+                        </span>
+                    </Link>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default CallAreaThree;

src/components/home/CounsellingSolutions.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import Link from 'next/link';
+
+const CounsellingSolutions: React.FC = () => {
+    return (
+        <section className="counselling-solutions">
+            <div className="container">
+                <div className="row">
+                    <div className="col-lg-6">
+                        <div className="counselling-solutions__title">
+                            <div className="sec-title">
+                                <div className="sec-title__shape"></div>
+                                <h6 className="sec-title__tagline">BEST COUNSELLING SOLUTION</h6>
+                                <h3 className="sec-title__title">
+                                    Psychology is a Broad Field So <br /> Consider Skill Solution
+                                </h3>
+                            </div>
+                        </div>
+                        <div className="counselling-solutions__content">
+                            <p className="counselling-solutions__text">
+                                Business tailored design, management &amp; support services Business
+                                business agency elit, sed do eiusmod tempor &nbsp;majority have
+                                in some we form, by injected humour solution.
+                            </p>
+                            <p className="counselling-solutions__text">
+                                <strong>Psychology:</strong> The scientific study of behavior and mental processes It explores
+                                various aspects of human behavior such as perception, cognition, emotion,
+                                personality, development, and social interactions.
+                            </p>
+
+                            <ul className="counselling-solutions__list--two">
+                                <li>
+                                    <span className="icon-arrow-circle-check"></span>
+                                    The right therapist can help you develop the skills to manage
+                                </li>
+                            </ul>
+                            <Link href="#" className="pelocis-btn">
+                                <span>
+                                    Discover More <i className="icon-right-arrow-white"></i>
+                                </span>
+                            </Link>
+                        </div>
+                    </div>
+                    <div className="col-lg-6">
+                        <div className="counselling-solutions__image">
+                            <img
+                                src="https://bracketweb.com/pelocishtml/assets/images/resources/counselling-solutions-1-1.png"
+                                alt="pelocis"
+                                className="counselling-solutions__image__one"
+                            />
+                            <img
+                                src="https://bracketweb.com/pelocishtml/assets/images/resources/counselling-solutions-1-2.png"
+                                alt="pelocis"
+                                className="counselling-solutions__image__two"
+                            />
+                            <div className="counselling-solutions__image__watch-btn">
+                                <Link href="https://www.youtube.com/watch?v=h9MbznbxlLc" className="video-popup">
+                                    <i className="icon-play"></i>
+                                </Link>
+                                <span>WATCH VIDEO</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default CounsellingSolutions;

src/components/home/CounterAreaTwo.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from 'react';
+
+interface CounterProps {
+    end: number;
+    duration?: number;
+}
+
+const Counter: React.FC<CounterProps> = ({ end, duration = 2000 }) => {
+    const [count, setCount] = useState(0);
+    const countRef = useRef<HTMLSpanElement>(null);
+    const [hasStarted, setHasStarted] = useState(false);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting && !hasStarted) {
+                    setHasStarted(true);
+                }
+            },
+            { threshold: 0.1 }
+        );
+
+        if (countRef.current) {
+            observer.observe(countRef.current);
+        }
+
+        return () => observer.disconnect();
+    }, [hasStarted]);
+
+    useEffect(() => {
+        if (!hasStarted) return;
+
+        let startTimestamp: number | null = null;
+        const step = (timestamp: number) => {
+            if (!startTimestamp) startTimestamp = timestamp;
+            const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+            setCount(Math.floor(progress * end));
+            if (progress < 1) {
+                window.requestAnimationFrame(step);
+            }
+        };
+        window.requestAnimationFrame(step);
+    }, [hasStarted, end, duration]);
+
+    return <span ref={countRef}>{count}</span>;
+};
+
+const counterItems = [
+    {
+        icon: "icon-succefull",
+        count: 950,
+        suffix: "k+",
+        text: "Projects Succefull"
+    },
+    {
+        icon: "icon-customers",
+        count: 256,
+        suffix: "k+",
+        text: "Happy Customers"
+    },
+    {
+        icon: "icon-planing",
+        count: 852,
+        suffix: "k+",
+        text: "Consultants Planing"
+    },
+    {
+        icon: "icon-awards",
+        count: 965,
+        suffix: "+",
+        text: "Awards Winners"
+    }
+];
+
+const CounterAreaTwo: React.FC = () => {
+    return (
+        <section className="counter-area-two">
+            <div className="container">
+                <ul className="counter-area-two__list">
+                    {counterItems.map((item, index) => (
+                        <li key={index} className="counter-area-two__item count-box">
+                            <div className="counter-area-two__icon">
+                                <span className={item.icon}></span>
+                            </div>
+                            <div className="counter-area-two__content">
+                                <h3 className="counter-area-two__count">
+                                    <Counter end={item.count} />
+                                    {item.suffix}
+                                </h3>
+                                <p className="counter-area-two__text">{item.text}</p>
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </section>
+    );
+};
+
+export default CounterAreaTwo;

src/components/home/FaqFour.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import React, { useState } from 'react';
+
+const FaqFour = () => {
+    const [activeIndex, setActiveIndex] = useState(0);
+
+    const toggleAccordion = (index: number) => {
+        setActiveIndex(index === activeIndex ? -1 : index);
+    };
+
+    const faqItems = [
+        {
+            question: "What are the different branches of psychology?",
+            answer: "Supporting individuals in overcome expert many of variations challenges, and enhancing their best quality of life whether are going to use."
+        },
+        {
+            question: "How does psychology differ from psychiatry?",
+            answer: "Supporting individuals in overcome expert many of variations challenges, and enhancing their best quality of life whether are going to use."
+        },
+        {
+            question: "How do psychologists diagnose mental disorders?",
+            answer: "Supporting individuals in overcome expert many of variations challenges, and enhancing their best quality of life whether are going to use."
+        },
+        {
+            question: "What are the common methods used in psychological?",
+            answer: "Supporting individuals in overcome expert many of variations challenges, and enhancing their best quality of life whether are going to use."
+        }
+    ];
+
+    return (
+        <section className="faq-four">
+            <div className="container">
+                <div className="row">
+                    <div className="col-xl-6">
+                        <div className="faq-four__content">
+                            <div className="sec-title">
+                                <div className="sec-title__shape"></div>
+                                <h6 className="sec-title__tagline">OUR FAQ US</h6>
+                                <h3 className="sec-title__title">We Providing Psychology People Choose of Promoting</h3>
+                            </div>
+                            <p className="faq-four__content__text">
+                                Business tailored design, management &amp; support services Business business agency elit,
+                                sed do eiusmod tempor majority have in some we form, by injected humour solution.
+                            </p>
+                            <div className="faq-one__accordion pelocis-accrodion">
+                                {faqItems.map((item, index) => (
+                                    <div key={index} className={`accrodion ${activeIndex === index ? 'active' : ''}`}>
+                                        <div className="accrodion-title" onClick={() => toggleAccordion(index)}>
+                                            <div className="accrodion-title__shape"></div>
+                                            <div className="accrodion-title__icon">
+                                                <i className="fa fa-check"></i>
+                                            </div>
+                                            <h4>
+                                                {item.question}
+                                                <i className="icon-right-arrow-white"></i>
+                                            </h4>
+                                        </div>
+                                        <div className="accrodion-content" style={{ display: activeIndex === index ? 'block' : 'none' }}>
+                                            <div className="inner">
+                                                <div className="accrodion-content__icon">
+                                                    <span className="icon-faq1"></span>
+                                                </div>
+                                                <p>{item.answer}</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-xl-6">
+                        <div className="pelocis-stretch-element-inside-column">
+                            <div className="faq-four__image">
+                                <img
+                                    src="https://bracketweb.com/pelocishtml/assets/images/resources/faq-4-1.jpg"
+                                    alt="pelocis"
+                                />
+                                <div className="faq-four__image__icon">
+                                    <i className="icon-faq"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default FaqFour;

src/components/home/HistoryTwo.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+
+const HistoryTwo = () => {
+    return (
+        <section className="history-two">
+            <div className="history-two__bg" style={{ backgroundImage: "url('https://bracketweb.com/pelocishtml/assets/images/resources/history-2-4.png')" }}></div>
+            <div className="container wow fadeInUp animated" style={{ visibility: 'visible', animationName: 'fadeInUp' }}>
+                <div className="history-two__title text-center">
+                    <div className="sec-title">
+                        <div className="sec-title__shape"></div>
+                        <h6 className="sec-title__tagline">OUR HISTORY</h6>
+                        <h3 className="sec-title__title">Psychology Diverse And Multidisciplinary <br />Field Encompassing Areas</h3>
+                    </div>
+                </div>
+                <div className="row history-two__wrapper">
+                    <div className="col-lg-6">
+                        <div className="history-two__border">
+                            <div className="history-two__content">
+                                <div className="history-two__content__count"></div>
+                                <p className="history-two__content__text">
+                                    History company support continue
+                                    to explore new frontiers, including
+                                    team stands ready to our reliable
+                                    or assistance of and technical.
+                                </p>
+                                <h3 className="history-two__content__title">Psychology Today</h3>
+                                <span className="history-two__content__date">02-08-2021</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-lg-6">
+                        <div className="history-two__images">
+                            <span className="history-two__images__date">2021</span>
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/history-2-1.png" alt="pelocis" />
+                        </div>
+                    </div>
+                    <div className="col-lg-6">
+                        <div className="history-two__images history-two__images--right">
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/history-2-1.png" alt="pelocis" />
+                            <span className="history-two__images__date">2021</span>
+                        </div>
+                    </div>
+                    <div className="col-lg-6">
+                        <div className="history-two__border history-two__border--left ">
+                            <div className="history-two__content history-two__content--left">
+                                <div className="history-two__content__count"></div>
+                                <p className="history-two__content__text">
+                                    History company support continue
+                                    to explore new frontiers, including
+                                    team stands ready to our reliable
+                                    or assistance of and technical.
+                                </p>
+                                <h3 className="history-two__content__title">Psychology Today</h3>
+                                <span className="history-two__content__date">02-08-2021</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-lg-6">
+                        <div className="history-two__border">
+                            <div className="history-two__content">
+                                <div className="history-two__content__count"></div>
+                                <p className="history-two__content__text">
+                                    History company support continue
+                                    to explore new frontiers, including
+                                    team stands ready to our reliable
+                                    or assistance of and technical.
+                                </p>
+                                <h3 className="history-two__content__title">Psychology Today</h3>
+                                <span className="history-two__content__date">02-08-2021</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-lg-6">
+                        <div className="history-two__images">
+                            <span className="history-two__images__date">2021</span>
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/history-2-1.png" alt="pelocis" />
+                        </div>
+                    </div>
+                </div>
+                <div className="history-two__btn">
+                    <a href="contact.html" className="pelocis-btn">
+                        <span>View all history <i className="icon-right-arrow-white"></i></span>
+                    </a>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default HistoryTwo;

src/components/home/HomeContactOne.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import React, { useState } from 'react';
+
+const HomeContactOne = () => {
+    const [distance, setDistance] = useState(7000);
+
+    const handleRangeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setDistance(parseInt(e.target.value));
+    };
+
+    return (
+        <section className="home-contact-one">
+            <div
+                className="home-contact-one__bg"
+                style={{ backgroundImage: 'url(https://bracketweb.com/pelocishtml/assets/images/backgrounds/contact-bg-1.jpg)' }}
+            ></div>
+            <div className="container">
+                <div className="row">
+                    <div className="col-xl-6">
+                        <div className="home-contact__card ">
+                            <div className="home-contact__card__content">
+                                <ul className="home-contact__card__list">
+                                    <li>
+                                        <span className="fa fa-phone"></span>
+                                        <div className="pl-5">
+                                            <h3 className="home-contact__card__list__title">Get Contact Now</h3>
+                                            <p className="home-contact__card__list__text">
+                                                <a href="tel:+11234751328">+11234 751 328</a>
+                                            </p>
+                                        </div>
+                                        <div className="home-contact__card__list__shape"></div>
+                                    </li>
+                                    <li>
+                                        <span className="fa-solid fa-envelope"></span>
+                                        <div className="pl-5">
+                                            <h3 className="home-contact__card__list__title">Sent Email</h3>
+                                            <p className="home-contact__card__list__text">
+                                                <a href="mailto:pelocis@envato.com">pelocis@envato.com</a>
+                                            </p>
+                                        </div>
+                                        <div className="home-contact__card__list__shape"></div>
+                                    </li>
+                                    <li>
+                                        <span className="fa-solid fa-location-dot"></span>
+                                        <div className="pl-5">
+                                            <h3 className="home-contact__card__list__title">Location</h3>
+                                            <p className="home-contact__card__list__text">8/05 Mozilla Golden</p>
+                                        </div>
+                                        <div className="home-contact__card__list__shape"></div>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div className="home-contact__card__shape-one">
+                                <img
+                                    src="https://bracketweb.com/pelocishtml/assets/images/resources/home-contact-logo.png"
+                                    alt="pelocis"
+                                    className="home-contact__card__shape-three"
+                                />
+                            </div>
+                            <img
+                                src="https://bracketweb.com/pelocishtml/assets/images/resources/home-contact-img-1.png"
+                                alt="pelocis"
+                                className="home-contact__card__shape-two"
+                            />
+                        </div>
+                    </div>
+                    <div className="col-xl-6">
+                        <form
+                            className="appointment__form contact-form-validated form-one wow fadeInUp animated"
+                            data-wow-duration="1500ms"
+                            data-wow-delay="100ms"
+                            action="#"
+                            noValidate
+                        >
+                            <div className="appointment__form__top">
+                                <div className="appointment__form__title">
+                                    <div className="sec-title">
+                                        <div className="sec-title__shape"></div>
+                                        <h6 className="sec-title__tagline">OUR CONTACT US</h6>
+                                        <h3 className="sec-title__title">If Your Problem Contact Us For <br /> Immediately Center</h3>
+                                    </div>
+                                    <img
+                                        src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-1.png"
+                                        alt="pelocis"
+                                        className="appointment__form__title__shape"
+                                    />
+                                </div>
+                                <p className="appointment__form__text">
+                                    Business tailored design, management &amp; support services Business
+                                    business agency elit, sed do eiusmod tempor majority have
+                                    in some we form, by injected humour solution.
+                                </p>
+                            </div>
+                            <div className="form-one__group row">
+                                <div className="form-one__control col-md-6">
+                                    <label htmlFor="name" className="appointment__form__lable">Name</label>
+                                    <input id="name" type="text" name="name" placeholder="Select Name *" />
+                                </div>
+                                <div className="form-one__control col-md-6">
+                                    <label htmlFor="email" className="appointment__form__lable">Email</label>
+                                    <input id="email" type="email" name="email" placeholder="Select Email *" />
+                                </div>
+                                <div className="form-one__control col-md-6">
+                                    <label htmlFor="phone" className="appointment__form__lable">Phone</label>
+                                    <input id="phone" type="text" name="phone" placeholder="Select a Phone" />
+                                </div>
+                                <div className="form-one__control form-one__control--full col-md-6">
+                                    <label htmlFor="program-select" className="appointment__form__lable">Program</label>
+                                    <div className="form-one__control__select">
+                                        <select
+                                            className="form-select selectpicker"
+                                            id="program-select"
+                                            defaultValue="Select program"
+                                            style={{
+                                                width: '100%',
+                                                padding: '12px 20px',
+                                                borderRadius: '5px',
+                                                border: '1px solid #ddd',
+                                                fontSize: '14px'
+                                            }}
+                                        >
+                                            <option value="Select program">Select a Program</option>
+                                            <option value="Select program 01">Select Program 01</option>
+                                            <option value="Select program 02">Select Program 02</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <div className="form-one__control mt-30">
+                                    <button type="submit" className="pelocis-btn">
+                                        <span>
+                                            SEND Request
+                                            <i className="fa-solid fa-arrow-right-long" style={{ marginLeft: '8px' }}></i>
+                                        </span>
+                                    </button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default HomeContactOne;

src/components/home/MedicalServices.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+
+const services = [
+    {
+        id: 0,
+        title: "Excellent infection prevention",
+        text: "Lorem ipsum dolor sit amet, conse ctetur adipiscing eliteiusmod tempor incididunt",
+        icon: "/assets/imgs/icon/icon-7.png",
+        link: "service-details.html",
+    },
+    {
+        id: 1,
+        title: "Health patients comprehensive",
+        text: "From its medieval origins to the digital era , learn everything there is to know",
+        icon: "/assets/imgs/icon/icon-7.png",
+        link: "service-details.html",
+    },
+    {
+        id: 2,
+        title: "Pediatric Hematology Oncology",
+        text: "Creation timelines for the standard lorem ipsum passage vary, with some citing the",
+        icon: "/assets/imgs/icon/icon-7.png",
+        link: "service-details.html",
+    },
+    {
+        id: 3,
+        title: "Care Pediatric & Medicine",
+        text: "Letraset's dry-transfer sheets, and later entered the digital world via Aldus",
+        icon: "/assets/imgs/icon/icon-7.png",
+        link: "service-details.html",
+    },
+    {
+        id: 4,
+        title: "Labor & Delivery: The Birthplace",
+        text: "Some claim lorem ipsum threatens to promote design over content, while others defend",
+        icon: "/assets/imgs/icon/icon-7.png",
+        link: "service-details.html",
+    },
+    {
+        id: 5,
+        title: "Urogynecology & Pelvic Health",
+        text: "Generally, lorem ipsum is best suited to keeping templates from looking bare or",
+        icon: "/assets/imgs/icon/icon-7.png",
+        link: "service-details.html",
+    },
+];
+
+const MedicalServices = () => {
+    const [activeTab, setActiveTab] = useState(0);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setActiveTab((prev) => (prev + 1) % services.length);
+        }, 5000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    const handleTabClick = (e: React.MouseEvent, id: number) => {
+        e.preventDefault();
+        setActiveTab(id);
+    };
+
+    return (
+        <section
+            className="medical-services-section space"
+            style={{ backgroundImage: `url('/assets/img/bg/sr-bg-5-1.jpg')` }}
+            data-bg-src="/assets/img/bg/sr-bg-5-1.jpg"
+        >
+            <div className="container">
+                <div
+                    className="section-title text-center wow fadeInUp animated"
+                    data-wow-delay="0.3s"
+                    style={{ visibility: "visible", animationDelay: "0.3s", animationName: "g" }}
+                >
+                    <h2 className="sec-title h1">Medical <span className="inner-text">Services</span></h2>
+                    <p className="sec-text">Search or browse by hospital, treatment or consultant to see what can do for you</p>
+                   
+                </div>
+                <div
+                    className="service-circle wow fadeInUp animated"
+                    data-wow-delay="0.4s"
+                    style={{ visibility: "visible", animationDelay: "0.4s", animationName: "g" }}
+                >
+                    <div className="service-circle__lines">
+                        <div className="line"></div>
+                        <div className="line"></div>
+                        <div className="line"></div>
+                        <div className="line"></div>
+                    </div>
+                    <nav className="service-circle__menu">
+                        <ul>
+                            {services.map((service, index) => (
+                                <li
+                                    key={service.id}
+                                    className={activeTab === index ? "active" : ""}
+                                >
+                                    <a
+                                        href="#"
+                                        onClick={(e) => handleTabClick(e, index)}
+                                        data-tab-link={index}
+                                    >
+                                        <img src={service.icon} alt="icon" />
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    </nav>
+                    <div className="service-circle__center">
+                        {services.map((service, index) => (
+                            <div
+                                key={service.id}
+                                className={`service-circle__item ${activeTab === index ? "active" : ""}`}
+                                data-tab-no={index}
+                            >
+                                <h3 className="service-circle__title h4">
+                                    <a href={service.link}>{service.title}</a>
+                                </h3>
+                                <p className="service-circle__text">{service.text}</p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default MedicalServices;

src/components/home/MedicalServicesCircle.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+
+interface ServiceItem {
+    id: number;
+    icon: string;
+    title: string;
+    text: string;
+}
+
+const services: ServiceItem[] = [
+    {
+        id: 0,
+        icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-1.jpg", // Using logical equivalents
+        title: "Excellent infection prevention",
+        text: "Lorem ipsum dolor sit amet, conse ctetur adipiscing eliteiusmod tempor incididunt"
+    },
+    {
+        id: 1,
+        icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-2.jpg",
+        title: "Health patients comprehensive",
+        text: "From its medieval origins to the digital era , learn everything there is to know"
+    },
+    {
+        id: 2,
+        icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-3.jpg",
+        title: "Pediatric Hematology Oncology",
+        text: "Creation timelines for the standard lorem ipsum passage vary, with some citing the"
+    },
+    {
+        id: 3,
+        icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-4.jpg",
+        title: "Care Pediatric & Medicine",
+        text: "Letraset's dry-transfer sheets, and later entered the digital world via Aldus"
+    },
+    {
+        id: 4,
+        icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-5.jpg",
+        title: "Labor & Delivery: The Birthplace",
+        text: "Some claim lorem ipsum threatens to promote design over content, while others defend"
+    },
+    {
+        id: 5,
+        icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-6.jpg",
+        title: "Urogynecology & Pelvic Health",
+        text: "Generally, lorem ipsum is best suited to keeping templates from looking bare or"
+    }
+];
+
+const MedicalServicesCircle: React.FC = () => {
+    const [activeTab, setActiveTab] = useState(0);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setActiveTab((prev) => (prev + 1) % services.length);
+        }, 5000);
+        return () => clearInterval(interval);
+    }, []);
+
+    const handleTabClick = (e: React.MouseEvent, id: number) => {
+        e.preventDefault();
+        setActiveTab(id);
+    };
+
+    return (
+        <section className="medical-services-circle space" style={{ backgroundImage: 'url(https://bracketweb.com/pelocishtml/assets/images/backgrounds/video-one-bg.jpg)' }}>
+            <div className="container">
+                <div className="section-title text-center">
+                    <h2 className="sec-title h1">Medical <span className="inner-text">Services</span></h2>
+                    <p className="sec-text">Search or browse by hospital, treatment or consultant to see what can do for you</p>
+                    <div className="sec-icon2">
+                        <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/sec-title-shape-1.png" alt="icon" />
+                    </div>
+                </div>
+
+                <div className="service-circle">
+                    <div className="service-circle__lines">
+                        <div className="line"></div>
+                        <div className="line"></div>
+                        <div className="line"></div>
+                        <div className="line"></div>
+                    </div>
+
+                    <nav className="service-circle__menu">
+                        <ul>
+                            {services.map((service, index) => (
+                                <li
+                                    key={service.id}
+                                    className={activeTab === service.id ? 'active' : ''}
+                                    style={{ '--rotate-item': `${index * 60}deg` } as React.CSSProperties}
+                                >
+                                    <a href="#" onClick={(e) => handleTabClick(e, service.id)}>
+                                        <img
+                                            src={service.icon}
+                                            alt="icon"
+                                            style={{
+                                                '--rotate-icon': `-${index * 60}deg`,
+                                                '--icon-left': index === 2 || index === 3 ? '46%' : index === 4 ? '48%' : '50%',
+                                                '--icon-top': index === 2 ? '34%' : '35%'
+                                            } as React.CSSProperties}
+                                        />
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    </nav>
+
+                    <div className="service-circle__center">
+                        {services.map((service) => (
+                            <div
+                                key={service.id}
+                                className={`service-circle__item ${activeTab === service.id ? 'active' : ''}`}
+                            >
+                                <div className="service-circle__item-inner">
+                                    <h3 className="service-circle__title h4">
+                                        <Link href="/service-details">{service.title}</Link>
+                                    </h3>
+                                    <p className="service-circle__text">{service.text}</p>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default MedicalServicesCircle;

src/components/home/PortfolioSection.tsx

@@ -0,0 +1,364 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import Link from "next/link";
+import { PortfolioData, MobileAppServicesData } from "@/utils/constant.utils";
+
+/* ─────────────────── Tab config ─────────────────── */
+const TABS = [
+    { label: "All Items", value: "all" },
+    { label: "Web Development", value: "web" },
+    { label: "Graphic Design", value: "graphic" },
+    { label: "Google Meta Ads", value: "meta" },
+    { label: "Shopify Store", value: "shopify" },
+    { label: "WordPress", value: "wordpress" },
+    { label: "Logo Branding", value: "logo" },
+    { label: "Video Editing", value: "video" },
+    { label: "Mobile App Development", value: "mobile" },
+];
+
+/* ─────────────────── Helpers ─────────────────── */
+function toEmbed(url: string): string {
+    if (!url) return "";
+    let m = url.match(/youtube\.com\/shorts\/([a-zA-Z0-9_-]+)/);
+    if (m) return `https://www.youtube.com/embed/${m[1]}`;
+    m = url.match(/youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)/);
+    if (m) return `https://www.youtube.com/embed/${m[1]}`;
+    m = url.match(/youtu\.be\/([a-zA-Z0-9_-]+)/);
+    if (m) return `https://www.youtube.com/embed/${m[1]}`;
+    return url;
+}
+function isYouTube(url: string): boolean {
+    return /youtube|youtu\.be/.test(url);
+}
+
+/* ─────────────────── Card sub-components ─────────────────── */
+
+/** Monitor mockup — Web Development / Shopify / WordPress */
+function MonitorCard({ item, onOpen }: { item: (typeof PortfolioData)[0], onOpen: () => void }) {
+    const hasLink = item.link && item.link !== "#";
+    return (
+        <div className="pf-monitor-wrap">
+            <div className="pf-monitor" onClick={onOpen} style={{ cursor: 'zoom-in' }}>
+                <div className="pf-monitor-screen">
+                    <img src={item.image} alt={item.alt} />
+                </div>
+                <div className="pf-monitor-stand" />
+                <div className="pf-monitor-base" />
+            </div>
+            <div className="pf-card-info">
+                <h3 className="pf-card-name">
+                    {hasLink ? (
+                        <Link href={item.link!} target="_blank" rel="noopener">
+                            {item.name} <i className="fa-solid fa-arrow-up-right-from-square" style={{ fontSize: '14px', marginLeft: '5px' }} />
+                        </Link>
+                    ) : (
+                        item.name
+                    )}
+                </h3>
+            </div>
+        </div>
+    );
+}
+
+/** Graphic Design — Pinned on wall style */
+function GraphicCard({ item, onOpen }: { item: (typeof PortfolioData)[0], onOpen: () => void }) {
+    const [orientation, setOrientation] = useState<"landscape" | "portrait">("landscape");
+
+    const handleLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+        const { naturalWidth, naturalHeight } = e.currentTarget;
+        if (naturalHeight > naturalWidth) {
+            setOrientation("portrait");
+        } else {
+            setOrientation("landscape");
+        }
+    };
+
+    return (
+        <div className={`pf-pinned-item ${orientation}`}>
+            <div className="pf-pinned-paper" onClick={onOpen} style={{ cursor: 'zoom-in' }}>
+                <div className="pf-pin" />
+                <img src={item.image} alt={item.alt} onLoad={handleLoad} />
+            </div>
+            <div className="pf-card-info">
+                <h4 className="pf-card-name">{item.name}</h4>
+            </div>
+        </div>
+    );
+}
+
+/** Google Meta Ads — wide display */
+function MetaCard({ item, onOpen }: { item: (typeof PortfolioData)[0], onOpen: () => void }) {
+    return (
+        <div className="pf-meta-wrap" onClick={onOpen} style={{ cursor: 'zoom-in' }}>
+            <div className="pf-meta-screen">
+                <img src={item.image} alt={item.alt} />
+                <div className="pf-meta-overlay">
+                    <h4 className="pf-card-name" style={{ color: '#fff', margin: 0 }}>{item.name}</h4>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+/** Logo Branding — clean white card */
+function LogoCard({ item, onOpen }: { item: (typeof PortfolioData)[0], onOpen: () => void }) {
+    return (
+        <div className="pf-logo-wrap" onClick={onOpen} style={{ cursor: 'zoom-in' }}>
+            <div className="pf-logo-frame">
+                <img src={item.image} alt={item.alt} />
+            </div>
+            <div className="pf-card-info">
+                <h3 className="pf-card-name">{item.name}</h3>
+            </div>
+        </div>
+    );
+}
+
+/** Video Editing — embedded player */
+function VideoCard({ item }: { item: (typeof PortfolioData)[0] }) {
+    const src = (item as any).video ?? item.videoLink ?? "";
+    const embedSrc = toEmbed(src);
+    return (
+        <div className="pf-video-wrap">
+            <div className="pf-video-player">
+                {isYouTube(src) ? (
+                    <iframe
+                        src={embedSrc}
+                        title={item.name}
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        allowFullScreen
+                    />
+                ) : (
+                    <video controls>
+                        <source src={src} />
+                    </video>
+                )}
+            </div>
+            <div className="pf-card-info">
+                <h3 className="pf-card-name">{item.name}</h3>
+            </div>
+        </div>
+    );
+}
+
+/** Mobile App — phone mockup */
+function MobileCard({ item, onOpen }: { item: (typeof MobileAppServicesData)[0], onOpen: () => void }) {
+    return (
+        <div className="pf-mobile-wrap" onClick={onOpen} style={{ cursor: 'zoom-in' }}>
+            <div className="pf-phone">
+                <div className="pf-phone-notch" />
+                <div className="pf-phone-screen">
+                    <img src={item.image} alt={item.alt} />
+                </div>
+                <div className="pf-phone-home-btn" />
+            </div>
+            <div className="pf-card-info">
+                <h3 className="pf-card-name">{item.name}</h3>
+                {item.category === "live" && (
+                    <span className="pf-live-badge">🟢 Live</span>
+                )}
+                {item.category === "coming-soon" && (
+                    <span className="pf-soon-badge">🔜 Coming Soon</span>
+                )}
+            </div>
+        </div>
+    );
+}
+
+/* ─────────────────── Lightbox Component ─────────────────── */
+function PortfolioLightbox({ item, onClose }: { item: any; onClose: () => void }) {
+    if (!item) return null;
+
+    return (
+        <div className="pf-lightbox-backdrop" onClick={onClose}>
+            <div className="pf-lightbox-content" onClick={(e) => e.stopPropagation()}>
+                <img src={item.image} alt={item.alt || item.name} className="pf-lightbox-img" />
+                <div className="pf-lightbox-details">
+                    <h3>{item.name}</h3>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+/* ─────────────────── Main Section ─────────────────── */
+export default function PortfolioSection() {
+    const [activeTab, setActiveTab] = useState("all");
+    const [lightboxItem, setLightboxItem] = useState<any>(null);
+
+    // Close lightbox on Escape key
+    useEffect(() => {
+        const handleEsc = (e: KeyboardEvent) => {
+            if (e.key === "Escape") setLightboxItem(null);
+        };
+        window.addEventListener("keydown", handleEsc);
+        return () => window.removeEventListener("keydown", handleEsc);
+    }, []);
+
+    const byCategory = (cat: string) =>
+        PortfolioData.filter((i) => i.category === cat);
+
+    const showCat = (cat: string) =>
+        activeTab === "all" || activeTab === cat;
+
+    const itemsFor = (cat: string) =>
+        activeTab === "all" ? byCategory(cat) : PortfolioData.filter((i) => i.category === cat);
+
+    const mobileItems =
+        activeTab === "all" || activeTab === "mobile" ? MobileAppServicesData : [];
+
+    return (
+        <section className="pf-section">
+            <div className="pf-container">
+
+                {/* ── Filter Tabs ── */}
+                <div className="pf-tabs">
+                    {TABS.map((tab) => (
+                        <button
+                            key={tab.value}
+                            className={`pf-tab-btn${activeTab === tab.value ? " active" : ""}`}
+                            onClick={() => setActiveTab(tab.value)}
+                        >
+                            {tab.label}
+                        </button>
+                    ))}
+                </div>
+
+                {/* ── Web Development ── */}
+                {showCat("web") && byCategory("web").length > 0 && (
+                    <>
+                        {activeTab === "all" && (
+                            <div className="pf-section-label"><h3>Web Development</h3></div>
+                        )}
+                        <div className="pf-grid">
+                            {itemsFor("web").map((item) => (
+                                <div key={item.id} className="pf-fade-item">
+                                    <MonitorCard item={item} onOpen={() => setLightboxItem(item)} />
+                                </div>
+                            ))}
+                        </div>
+                    </>
+                )}
+
+                {/* ── Graphic Design ── */}
+                {showCat("graphic") && byCategory("graphic").length > 0 && (
+                    <>
+                        {activeTab === "all" && (
+                            <div className="pf-section-label"><h3>Graphic Design</h3></div>
+                        )}
+                        <div className="pf-grid">
+                            {itemsFor("graphic").map((item) => (
+                                <div key={item.id} className="pf-fade-item">
+                                    <GraphicCard item={item} onOpen={() => setLightboxItem(item)} />
+                                </div>
+                            ))}
+                        </div>
+                    </>
+                )}
+
+                {/* ── Google Meta Ads ── */}
+                {showCat("meta") && byCategory("meta").length > 0 && (
+                    <>
+                        {activeTab === "all" && (
+                            <div className="pf-section-label"><h3>Google Meta Ads</h3></div>
+                        )}
+                        <div className="pf-grid-meta">
+                            {itemsFor("meta").map((item) => (
+                                <div key={item.id} className="pf-fade-item">
+                                    <MetaCard item={item} onOpen={() => setLightboxItem(item)} />
+                                </div>
+                            ))}
+                        </div>
+                    </>
+                )}
+
+                {/* ── Shopify Store ── */}
+                {showCat("shopify") && byCategory("shopify").length > 0 && (
+                    <>
+                        {activeTab === "all" && (
+                            <div className="pf-section-label"><h3>Shopify Store</h3></div>
+                        )}
+                        <div className="pf-grid">
+                            {itemsFor("shopify").map((item) => (
+                                <div key={item.id} className="pf-fade-item">
+                                    <MonitorCard item={item} onOpen={() => setLightboxItem(item)} />
+                                </div>
+                            ))}
+                        </div>
+                    </>
+                )}
+
+                {/* ── WordPress ── */}
+                {showCat("wordpress") && byCategory("wordpress").length > 0 && (
+                    <>
+                        {activeTab === "all" && (
+                            <div className="pf-section-label"><h3>WordPress</h3></div>
+                        )}
+                        <div className="pf-grid">
+                            {itemsFor("wordpress").map((item) => (
+                                <div key={item.id} className="pf-fade-item">
+                                    <MonitorCard item={item} onOpen={() => setLightboxItem(item)} />
+                                </div>
+                            ))}
+                        </div>
+                    </>
+                )}
+
+                {/* ── Logo Branding ── */}
+                {showCat("logo") && byCategory("logo").length > 0 && (
+                    <>
+                        {activeTab === "all" && (
+                            <div className="pf-section-label"><h3>Logo Branding</h3></div>
+                        )}
+                        <div className="pf-grid">
+                            {itemsFor("logo").map((item) => (
+                                <div key={item.id} className="pf-fade-item">
+                                    <LogoCard item={item} onOpen={() => setLightboxItem(item)} />
+                                </div>
+                            ))}
+                        </div>
+                    </>
+                )}
+
+                {/* ── Video Editing ── */}
+                {showCat("video") && byCategory("video").length > 0 && (
+                    <>
+                        {activeTab === "all" && (
+                            <div className="pf-section-label"><h3>Video Editing</h3></div>
+                        )}
+                        <div className="pf-grid">
+                            {itemsFor("video").map((item) => (
+                                <div key={item.id} className="pf-fade-item">
+                                    <VideoCard item={item} />
+                                </div>
+                            ))}
+                        </div>
+                    </>
+                )}
+
+                {/* ── Mobile App Development ── */}
+                {mobileItems.length > 0 && (
+                    <>
+                        {activeTab === "all" && (
+                            <div className="pf-section-label"><h3>Mobile App Development</h3></div>
+                        )}
+                        <div className="pf-grid-mobile">
+                            {mobileItems.map((item) => (
+                                <div key={item.id} className="pf-fade-item">
+                                    <MobileCard item={item} onOpen={() => setLightboxItem(item)} />
+                                </div>
+                            ))}
+                        </div>
+                    </>
+                )}
+
+            </div>
+
+            {/* ── Lightbox ── */}
+            <PortfolioLightbox
+                item={lightboxItem}
+                onClose={() => setLightboxItem(null)}
+            />
+        </section>
+    );
+}

src/components/home/WhyChooseTwo.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+interface WhyChooseTwoProps {
+    reverse?: boolean;
+}
+
+const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
+    return (
+        <section className="why-choose-two">
+            <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/why-chosse-2-shape.png" alt="pelocis" className="why-choose-two__shape-three" />
+            <div className="container">
+                <div className={`row ${reverse ? 'flex-row-reverse' : ''}`}>
+                    <div className="col-xl-6">
+                        <div className="why-choose-two__content">
+                            <div className="sec-title">
+                                <div className="sec-title__shape"></div>
+                                <h6 className="sec-title__tagline">WHY CHOOSE US</h6>
+                                <h3 className="sec-title__title">We Providing&nbsp;Psychology People <br /> Choose of Promoting</h3>
+                            </div>
+                            <p className="why-choose-two__text">
+                                Business tailored design, management &amp; support services Business
+                                business agency elit, sed do eiusmod tempor &nbsp;majority have
+                                in some we form, by injected humour solution.
+                            </p>
+                            <div className="why-choose-two__box">
+                                <ul className="why-choose-two__list">
+                                    <li className="why-choose-two__item">
+                                        <div className="why-choose-two__count"></div>
+                                        <div className="why-choose-two__icon">
+                                            <span className="fa-solid fa-lightbulb"></span>
+                                        </div>
+                                        <div className="why-choose-two__item__content">
+                                            <h3 className="why-choose-two__item__title">Family Service Psychology</h3>
+                                            <p className="why-choose-two__item__text">
+                                                Supporting individuals in overcoming service
+                                            </p>
+                                        </div>
+                                    </li>
+                                    <li className="why-choose-two__item">
+                                        <div className="why-choose-two__count"></div>
+                                        <div className="why-choose-two__icon">
+                                            <span className="fa-solid fa-brain"></span>
+                                        </div>
+                                        <div className="why-choose-two__item__content">
+                                            <h3 className="why-choose-two__item__title">Cognitive off Psychology</h3>
+                                            <p className="why-choose-two__item__text">
+                                                Supporting individuals in overcoming service
+                                            </p>
+                                        </div>
+                                    </li>
+                                    <li className="why-choose-two__item">
+                                        <div className="why-choose-two__count"></div>
+                                        <div className="why-choose-two__icon">
+                                            <span className="fa-solid fa-people-roof"></span>
+                                        </div>
+                                        <div className="why-choose-two__item__content">
+                                            <h3 className="why-choose-two__item__title">Relationship Psychology</h3>
+                                            <p className="why-choose-two__item__text">
+                                                Supporting individuals in overcoming service
+                                            </p>
+                                        </div>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-xl-6">
+                        <div className="pelocis-stretch-element-inside-column" style={reverse ? { marginLeft: '-367.812px', marginRight: '0px' } : { marginLeft: '0px', marginRight: '-367.812px' }}>
+                            <div className="why-choose-two__shape-one">
+                                <img src="https://bracketweb.com/pelocishtml/assets/images/resources/why-choose-two-img-1.png" alt="pelocis" />
+                            </div>
+                            <div className="why-choose-two__shape-two"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default WhyChooseTwo;

src/utils/data.ts

@@ -81,6 +81,92 @@ export const features2 = [
     { id: 3, title: "Web Development", icon: "/assets/imgs/service/service-icon3.png", description: "Lorem Ipsum is simply dummy text of the printing and typesetting" }
 ];
 
+export const services1: ServiceType[] = [
+    {
+        id: 1,
+        icon: '/assets/imgs/icon/icon.png',
+        image: '/assets/imgs/service/service-img1.png',
+        title: 'Custom Website Development',
+        description: 'Tailor-made websites built specifically for your business goals and audience.',
+    },
+    {
+        id: 2,
+        icon: '/assets/imgs/icon/icon-2.png',
+        image: '/assets/imgs/service/service-img2.png',
+        title: 'E-commerce Development',
+        description: 'High-converting online stores with seamless checkout and payment integration.',
+    },
+    {
+        id: 3,
+        icon: '/assets/imgs/icon/icon-3.png',
+        image: '/assets/imgs/service/service-img3.png',
+        title: 'Mobile App Development',
+        description: 'Custom iOS and Android applications built for performance and scalability.',
+    }
+];
+
+export const services3: ServiceType[] = [
+    {
+        id: 1,
+        icon: '/assets/imgs/icon/icon-14.png',
+        image: '/assets/imgs/service/service-img4.png',
+        title: 'Cyber Security',
+        description: 'Protect your business from digital threats with our advanced security solutions.',
+    },
+    {
+        id: 2,
+        icon: '/assets/imgs/icon/icon-15.png',
+        image: '/assets/imgs/service/service-img5.png',
+        title: 'IT Management',
+        description: 'Comprehensive IT management services to keep your business running smoothly.',
+    },
+    {
+        id: 3,
+        icon: '/assets/imgs/icon/icon-16.png',
+        image: '/assets/imgs/service/service-img6.png',
+        title: 'Cloud Solutions',
+        description: 'Scalable and secure cloud infrastructure for your enterprise needs.',
+    },
+    {
+        id: 4,
+        icon: '/assets/imgs/icon/icon-17.png',
+        image: '/assets/imgs/service/service-img7.png',
+        title: 'Data Analytics',
+        description: 'Gain valuable insights from your data to drive informed business decisions.',
+    }
+];
+
+export const services2: ServiceType[] = [
+    {
+        id: 1,
+        icon: '/assets/imgs/icon/icon-2.png',
+        image: '/assets/imgs/service/service-img4.png',
+        title: 'Managed IT Services',
+        description: 'Providing comprehensive IT support and management to optimize your business operations.',
+    },
+    {
+        id: 2,
+        icon: '/assets/imgs/icon/icon-3.png',
+        image: '/assets/imgs/service/service-img5.png',
+        title: 'Cloud Computing',
+        description: 'Transforming your business with scalable and secure cloud infrastructure solutions.',
+    },
+    {
+        id: 3,
+        icon: '/assets/imgs/icon/icon.png',
+        image: '/assets/imgs/service/service-img6.png',
+        title: 'Cybersecurity Solutions',
+        description: 'Protecting your digital assets with advanced threat detection and mitigation strategies.',
+    },
+    {
+        id: 4,
+        icon: '/assets/imgs/icon/icon-2.png',
+        image: '/assets/imgs/service/service-img7.png',
+        title: 'Software Development',
+        description: 'Building custom software tailored to your specific business requirements and goals.',
+    }
+];
+
 
 export const caseStudies: CaseStudyType[] = [
     {