Untitled

 avatar
unknown
plain_text
a month ago
16 kB
3
Indexable
"use client";
import Image from "next/image";
import React, { useState } from "react";

const data = [
    {
        title: "Customer FOCUS",
        desc: "Customer FOCUS: We champion our customers' SUCCess through innovative, value-driven solutions",
        image: "/about-us/img1.png"
    },
    {
        title: "Relationships",
        desc: "We build enduring partnerships through trust, collaboration, and shared success.",
        image: "/about-us/img2.png"
    },
    {
        title: "Integrity and\n Transparency",
        desc: "We demonstrate honesty, accountability, and transparency in every action.",
        image: "/about-us/img3.png"
    },
    {
        title: "Successful Solutions",
        desc: "We create transformative solutions that deliver measurable, lasting impact.",
        image: "/about-us/img4.png"
    },
    {
        title: "People\n Orientation",
        desc: "We empower our people through a culture of growth, respect, and excellence.",
        image: "/about-us/img5.png"
    }
]

const WhatWeDo = () => {
    const [hoveredCard, setHoveredCard] = useState(null);

    return (
        <div className="w-full bg-black">
            <div className="flex flex-col px-[10%] md:flex-row md:px-[7%] md:gap-[15%] pt-[5%] justify-between">
                <div className="bg-[#e0f6ff] text-[#0b76a0] px-4 py-2 text-sm font-semibold self-start z-[10]">
                    <div className="flex">
                        <div className="w-2 h-2 bg-[#0b76a0] mr-2 self-center"></div>
                        What We Do
                    </div>
                </div>

                <div className="text-white w-full z-[10] mt-4 md:w-[60%] md:mt-0">
                    <p className="text-lg leading-relaxed">
                        At Covalense Digital Solutions, we empower communications services providers (CSPs)
                        and enterprises to thrive in the digital age. Through our cutting-edge platform and
                        tailored solutions, we enable seamless customer journeys—from onboarding to billing to
                        care—using advanced cloud, AI, and mobile technologies.
                    </p>
                    <p className="text-lg mt-5 leading-relaxed">
                        Specialising in digital transformation solutions, we help our clients create exceptional
                        customer experiences while unlocking new opportunities. Our mission is to deliver
                        meaningful business value through innovation and partnership.
                    </p>
                </div>
            </div>
            {/*  work only below section */}
            <div className="w-full bg-black">
                <div className="relative w-full h-[1100px] hidden lg:block">
                    <Image
                        src="/about-us/combo.png"
                        alt="Customer Focus"
                        layout="fill"
                        objectFit="stretch"
                    />
                    <div className="absolute top-[150px] flex flex-col justify-center text-white p-4">
                        <div className="w-[53%]  pl-[5%]">
                            <div className="bg-[#e0f6ff] text-[#0b76a0] px-4 py-2 text-sm font-semibold self-start inline-block mb-4">
                                <div className="flex">
                                    <div className="w-2 h-2 bg-[#0b76a0] mr-2 self-center"></div>
                                    Our Values
                                </div>
                            </div>
                            <p className="text-lg mb-8">
                                Our values are our foundation - shaping how we collaborate, innovate, and deliver exceptional results. Through them, we create lasting impact for our clients, partners, and teams.
                            </p>
                        </div>

                        <div className="flex flex-col gap-4 px-[5%]">
                            <div className="flex justify-start gap-4 mb-8">
                                {data.slice(0, 3).map((item, index) => (
                                    <div
                                        key={index}
                                        className="relative w-[295px] h-[333px] overflow-hidden"
                                        onMouseEnter={() => setHoveredCard(index)}
                                        onMouseLeave={() => setHoveredCard(null)}
                                    >
                                        <Image
                                            src={item.image}
                                            alt={item.title}
                                            layout="fill"
                                            objectFit="cover"
                                        />
                                        <div className="absolute inset-x-0 bottom-4 text-white p-4">
                                            <h3
                                                className={`text-xl font-semibold break-words transition-transform duration-300 ${hoveredCard === index ? 'translate-y-0 mb-2' : 'absolute bottom-0'
                                                    }`}
                                            >
                                                {item.title.split('\n').map((part, index) => (
                                                    <React.Fragment key={index}>
                                                        {part}
                                                        {index < item.title.split('\n').length - 1 && <br />}
                                                    </React.Fragment>
                                                ))}
                                            </h3>
                                            <p
                                                className={`text-sm break-words transition-opacity duration-300 ${hoveredCard === index ? 'opacity-100' : 'opacity-0'
                                                    }`}
                                            >
                                                {item.desc}
                                            </p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                            <div className="flex justify-end gap-4">
                                {data.slice(3).map((item, index) => (
                                    <div
                                        key={index + 3}
                                        className="relative w-[295px] h-[333px] overflow-hidden"
                                        onMouseEnter={() => setHoveredCard(index + 3)}
                                        onMouseLeave={() => setHoveredCard(null)}
                                    >
                                        <Image
                                            src={item.image}
                                            alt={item.title}
                                            layout="fill"
                                            objectFit="cover"
                                        />
                                        <div className="absolute inset-x-0 bottom-4 text-white p-4">
                                            <h3
                                                className={`text-xl font-semibold break-words transition-transform duration-300 ${hoveredCard === index + 3 ? 'translate-y-0 mb-2' : 'absolute bottom-0'
                                                    }`}
                                            >
                                                {item.title.split('\n').map((part, index) => (
                                                    <React.Fragment key={index}>
                                                        {part}
                                                        {index < item.title.split('\n').length - 1 && <br />}
                                                    </React.Fragment>
                                                ))}
                                            </h3>
                                            <p
                                                className={`text-sm break-words transition-opacity duration-300 ${hoveredCard === index + 3 ? 'opacity-100' : 'opacity-0'
                                                    }`}
                                            >
                                                {item.desc}
                                            </p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div className="block lg:hidden px-4 py-8">
                <div className="w-full px-[5%] sm:px-[10%]">
                    <div className="bg-[#e0f6ff] text-[#0b76a0] px-4 py-2 text-sm font-semibold inline-block mb-4">
                        Our Values
                    </div>
                    <p className="text-lg text-white mb-8">
                        Our values are our foundation - shaping how we collaborate, innovate, and deliver exceptional results. Through them, we create lasting impact for our clients, partners, and teams.
                    </p>

                    {/* Grid layout for smaller screens */}
                    <div className="grid md:grid-cols-2 grid-cols-1 gap-6">
                        {data.map((item, index) => (
                            <div
                                key={index}
                                className="relative w-[295px] h-[333px] overflow-hidden justify-self-center"
                                onMouseEnter={() => setHoveredCard(index)}
                                onMouseLeave={() => setHoveredCard(null)}
                            >
                                <Image
                                    src={item.image}
                                    alt={item.title}
                                    layout="fill"
                                    objectFit="cover"
                                />
                                <div className="absolute inset-x-0 bottom-4 text-white p-4">
                                    <h3
                                        className={`text-xl font-semibold break-words transition-transform duration-300 ${hoveredCard === index
                                            ? 'translate-y-0 mb-2'
                                            : 'absolute bottom-0'
                                            }`}
                                    >
                                        {item.title.split('\n').map((part, index) => (
                                            <React.Fragment key={index}>
                                                {part}
                                                {index < item.title.split('\n').length - 1 && <br />}
                                            </React.Fragment>
                                        ))}
                                    </h3>
                                    <p
                                        className={`text-sm break-words transition-opacity duration-300 ${hoveredCard === index
                                            ? 'opacity-100'
                                            : 'opacity-0'
                                            }`}
                                    >
                                        {item.desc}
                                    </p>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default WhatWeDo;




import React from 'react'
import Image from 'next/image'
const Core = () => {
    return (
        <div className="relative w-full bg-white flex flex-col">
            <div className="text-center text-4xl font-bold my-12">
                Core Philosophy
            </div>

            <div className="flex w-full flex-col md:flex-row gap-[10%] px-6 md:px-0">
                <div className="w-full md:w-[40%] flex justify-center items-center md:pr-10 mb-8 md:mb-0">
                    <div className="relative w-full aspect-[5/5]">
                        <Image
                            src="/about-us/core.png"
                            alt="Core Philosophy"
                            layout="fill"
                            objectFit="contain"
                            className="absolute inset-0"
                        />
                    </div>
                </div>

                <div className="w-full md:w-[80%] py-8">
                    <div className='w-full md:w-[90%] flex flex-col md:flex-row items-start justify-between'>
                        <div className="flex items-center mb-4 md:mb-0 md:mr-6">
                            <Image
                                src="/about-us/target.png"
                                alt="Mission Icon"
                                width={40}
                                height={40}
                                className="mr-4"
                            />
                            <h2 className="text-2xl font-semibold">Mission</h2>
                        </div>
                        <p className="text-gray-700 w-full md:w-[70%] text-left">
                            To deliver innovative technology solutions that create meaningful business value for our customers while empowering our employees with opportunities for professional growth and excellence through right platforms.
                        </p>
                    </div>
                    
                    <div className='w-full md:w-[90%] flex flex-col md:flex-row items-start justify-between mt-4'>
                        <div className="flex items-center mb-4 md:mb-0 md:mr-6">
                            <Image
                                src="/about-us/eye.png"
                                alt="Mission Icon"
                                width={40}
                                height={40}
                                className="mr-4"
                            />
                            <h2 className="text-2xl font-semibold">Mission</h2>
                        </div>
                        <p className="text-gray-700 w-full md:w-[70%] text-left">
                        To be a globally recognised company delivering innovative digital solutions, known for providing world-class products and services that enable businesses to realize their full potential.
                        </p>
                    </div>
                </div>
            </div>

            <div className="absolute top-0 right-0 w-[20%] h-full pointer-events-none z-[1] hidden lg:block">
                <div className="absolute top-0 right-0 w-[50%] h-[30%]">
                    <Image
                        src="/about-us/rtc.png"
                        alt="Customer Focus Top"
                        layout="fill"
                        objectFit="cover"
                        className="absolute inset-0"
                    />
                </div>

                <div className="absolute bottom-0 right-0 w-[150%] h-[43%]">
                    <Image
                        src="/about-us/btr.png"
                        alt="Customer Focus Bottom"
                        layout="fill"
                        objectFit="cover"
                        className="absolute bottom-0"
                    />
                </div>
            </div>
        </div>
    )
}

export default Core

Editor is loading...
Leave a Comment