Untitled
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