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