omswebsite-backups/oms-website-nextjs
1
0
Fork 0
mirror of https://github.com/OwethuManagedServices/oms-website-nextjs.git synced 2025-12-17 18:58:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Darkmode omplemented

Browse Source
This commit is contained in:
libertyoms
2025-04-27 13:34:34 +02:00
parent b1680d297b
commit 9b0cf2a5f6
4 changed files with 61 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
app/(website)/about/page.tsx
View File

@ -131,13 +131,13 @@ const industryExpertise = [
export default function AboutUsPage() { export default function AboutUsPage() {
return ( return (
<div className="bg-white text-gray-800 overflow-x-hidden"> <div className="bg-white text-gray-800 overflow-x-hidden dark:bg-gray-900 dark:text-gray-200">
{" "} {" "}
{/* Prevent horizontal scroll */} {/* Prevent horizontal scroll & Add dark mode base */}
{/* Section 1: Hero / Company Overview */} {/* Section 1: Hero / Company Overview */}
<section className="relative bg-gradient-to-r from-gray-800 via-gray-700 to-gray-800 text-white py-24 md:py-40"> <section className="relative bg-gradient-to-r from-gray-800 via-gray-700 to-gray-800 text-white py-24 md:py-40">
{/* Optional decorative background elements */} {/* Optional decorative background elements */}
<div className="absolute inset-0 bg-black opacity-30"></div> <div className="absolute inset-0 bg-black opacity-30 dark:opacity-50"></div>
<div <div
className="absolute inset-0 bg-cover bg-center opacity-10" className="absolute inset-0 bg-cover bg-center opacity-10"
style={{ backgroundImage: "url('/path/to/abstract-tech-bg.jpg')" }} style={{ backgroundImage: "url('/path/to/abstract-tech-bg.jpg')" }}
@ -150,7 +150,7 @@ export default function AboutUsPage() {
> >
About Owethu Managed Services About Owethu Managed Services
</h1> </h1>
<p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed text-gray-200 font-poppins"> <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 font-poppins">
Your strategic partner in navigating the digital frontier. We fuse Your strategic partner in navigating the digital frontier. We fuse
deep technical expertise with a passion for innovation to craft deep technical expertise with a passion for innovation to craft
bespoke IT solutions that drive tangible business results and unlock bespoke IT solutions that drive tangible business results and unlock
@ -159,15 +159,15 @@ export default function AboutUsPage() {
</div> </div>
</section> </section>
{/* Section 2: Our Genesis & Purpose */} {/* Section 2: Our Genesis & Purpose */}
<section className="py-16 md:py-24 bg-gray-50"> <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
<div className="container mx-auto px-6"> <div className="container mx-auto px-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div> <div>
<h2 className="text-3xl md:text-4xl font-bold mb-6 font-poppins text-gray-900 leading-tight"> <h2 className="text-3xl md:text-4xl font-bold mb-6 font-poppins text-gray-900 dark:text-white leading-tight">
Forged in Innovation, <br className="hidden md:inline" /> Driven Forged in Innovation, <br className="hidden md:inline" /> Driven
by Purpose by Purpose
</h2> </h2>
<p className="text-md md:text-lg text-gray-700 leading-relaxed mb-4 font-poppins"> <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4 font-poppins">
Expand on the founding story/motivation. E.g., Owethu Managed Expand on the founding story/motivation. E.g., Owethu Managed
Services was born from a clear vision: to harness the Services was born from a clear vision: to harness the
transformative power of technology not just to solve problems, transformative power of technology not just to solve problems,
@ -176,7 +176,7 @@ export default function AboutUsPage() {
technology&apos;s potential and the unique challenges modern technology&apos;s potential and the unique challenges modern
organizations face. organizations face.
</p> </p>
<p className="text-md md:text-lg text-gray-700 leading-relaxed font-poppins"> <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-poppins">
Elaborate on the journey. E.g., Our journey has been defined by Elaborate on the journey. E.g., Our journey has been defined by
a relentless pursuit of knowledge, adaptation to the a relentless pursuit of knowledge, adaptation to the
ever-evolving tech landscape, and an unwavering commitment to ever-evolving tech landscape, and an unwavering commitment to
@ -198,12 +198,12 @@ export default function AboutUsPage() {
</div> </div>
</section> </section>
{/* Section 3: Vision & Mission (Similar layout, refined look) */} {/* Section 3: Vision & Mission (Similar layout, refined look) */}
<section className="py-16 md:py-24 bg-white"> <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
<div className="container mx-auto px-6 text-center mb-12"> <div className="container mx-auto px-6 text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900"> <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white">
Our North Star Our North Star
</h2> </h2>
<p className="text-md md:text-lg text-gray-600 mt-3 max-w-2xl mx-auto font-poppins"> <p className="text-md md:text-lg text-gray-600 dark:text-gray-400 mt-3 max-w-2xl mx-auto font-poppins">
Guiding our strategy, actions, and partnerships. Guiding our strategy, actions, and partnerships.
</p> </p>
</div> </div>
@ -211,17 +211,17 @@ export default function AboutUsPage() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-12"> <div className="grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-12">
{/* Vision Card */} {/* Vision Card */}
<div <div
className="bg-gray-50 p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 border-t-4 border-gold-500 flex flex-col items-center text-center" className="bg-gray-50 dark:bg-gray-800 p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 border-t-4 border-gold-500 flex flex-col items-center text-center"
style={{ borderColor: "#e1c44a" }} style={{ borderColor: "#e1c44a" }}
> >
<FaBullseye <FaBullseye
className="text-5xl mb-5 text-gold-500" className="text-5xl mb-5 text-gold-500"
style={{ color: "#e1c44a" }} style={{ color: "#e1c44a" }}
/> />
<h3 className="text-2xl font-bold mb-4 font-poppins text-gray-900"> <h3 className="text-2xl font-bold mb-4 font-poppins text-gray-900 dark:text-white">
Our Vision Our Vision
</h3> </h3>
<p className="text-gray-700 leading-relaxed font-poppins flex-grow"> <p className="text-gray-700 dark:text-gray-300 leading-relaxed font-poppins flex-grow">
&quot;To be global leaders in delivering cutting-edge IT &quot;To be global leaders in delivering cutting-edge IT
solutions, pushing the boundaries of what&apos;s possible, and solutions, pushing the boundaries of what&apos;s possible, and
transforming industries for the better. We aim to empower transforming industries for the better. We aim to empower
@ -231,17 +231,17 @@ export default function AboutUsPage() {
</div> </div>
{/* Mission Card */} {/* Mission Card */}
<div <div
className="bg-gray-50 p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 border-t-4 border-gold-500 flex flex-col items-center text-center" className="bg-gray-50 dark:bg-gray-800 p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 border-t-4 border-gold-500 flex flex-col items-center text-center"
style={{ borderColor: "#e1c44a" }} style={{ borderColor: "#e1c44a" }}
> >
<FaHandshake <FaHandshake
className="text-5xl mb-5 text-gold-500" className="text-5xl mb-5 text-gold-500"
style={{ color: "#e1c44a" }} style={{ color: "#e1c44a" }}
/> />
<h3 className="text-2xl font-bold mb-4 font-poppins text-gray-900"> <h3 className="text-2xl font-bold mb-4 font-poppins text-gray-900 dark:text-white">
Our Mission Our Mission
</h3> </h3>
<p className="text-gray-700 leading-relaxed font-poppins flex-grow"> <p className="text-gray-700 dark:text-gray-300 leading-relaxed font-poppins flex-grow">
&quot;We are dedicated to creating tailored, innovative &quot;We are dedicated to creating tailored, innovative
solutions that drive business success. By combining expertise solutions that drive business success. By combining expertise
with cutting-edge technology, we solve complex problems and with cutting-edge technology, we solve complex problems and
@ -254,13 +254,13 @@ export default function AboutUsPage() {
</div> </div>
</section> </section>
{/* Section 4: Our Approach & Methodology */} {/* Section 4: Our Approach & Methodology */}
<section className="py-16 md:py-24 bg-gradient-to-br from-gray-100 to-gray-200"> <section className="py-16 md:py-24 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700">
<div className="container mx-auto px-6"> <div className="container mx-auto px-6">
<div className="text-center mb-14"> <div className="text-center mb-14">
<h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 mb-4"> <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
How We Deliver Excellence How We Deliver Excellence
</h2> </h2>
<p className="text-md md:text-lg text-gray-700 max-w-3xl mx-auto font-poppins"> <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto font-poppins">
Our methodology is built on collaboration, precision, and a Our methodology is built on collaboration, precision, and a
relentless focus on delivering impactful results. We tailor our relentless focus on delivering impactful results. We tailor our
process to fit your specific project needs. process to fit your specific project needs.
@ -270,16 +270,16 @@ export default function AboutUsPage() {
{ourApproach.map((item) => ( {ourApproach.map((item) => (
<div <div
key={item.title} key={item.title}
className="bg-white p-6 rounded-lg shadow-md text-center transform transition duration-300 hover:-translate-y-2 hover:shadow-xl" className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md text-center transform transition duration-300 hover:-translate-y-2 hover:shadow-xl dark:hover:shadow-gold-500/20"
> >
<item.icon <item.icon
className="text-4xl text-gold-500 mx-auto mb-5" className="text-4xl text-gold-500 mx-auto mb-5"
style={{ color: "#e1c44a" }} style={{ color: "#e1c44a" }}
/> />
<h4 className="text-xl font-semibold mb-3 font-poppins"> <h4 className="text-xl font-semibold mb-3 font-poppins dark:text-white">
{item.title} {item.title}
</h4> </h4>
<p className="text-gray-600 font-poppins text-sm leading-relaxed"> <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm leading-relaxed">
{item.description} {item.description}
</p> </p>
</div> </div>
@ -288,7 +288,7 @@ export default function AboutUsPage() {
</div> </div>
</section> </section>
{/* Section 5: Industry Expertise */} {/* Section 5: Industry Expertise */}
<section className="py-16 md:py-24 bg-white"> <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
<div className="container mx-auto px-6"> <div className="container mx-auto px-6">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12 items-center"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 items-center">
<div className="lg:col-span-1"> <div className="lg:col-span-1">
@ -296,10 +296,10 @@ export default function AboutUsPage() {
className="text-5xl text-gold-500 mb-4" className="text-5xl text-gold-500 mb-4"
style={{ color: "#e1c44a" }} style={{ color: "#e1c44a" }}
/> />
<h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins text-gray-900 leading-tight"> <h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins text-gray-900 dark:text-white leading-tight">
Deep Domain Knowledge Deep Domain Knowledge
</h2> </h2>
<p className="text-md md:text-lg text-gray-700 leading-relaxed font-poppins"> <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-poppins">
We combine broad technological capabilities with specialized We combine broad technological capabilities with specialized
expertise across key industries, understanding the unique expertise across key industries, understanding the unique
challenges and opportunities within each sector. challenges and opportunities within each sector.
@ -309,13 +309,13 @@ export default function AboutUsPage() {
{industryExpertise.map((exp) => ( {industryExpertise.map((exp) => (
<div <div
key={exp.industry} key={exp.industry}
className="bg-gray-50 p-6 rounded-lg shadow-sm border-l-4 border-gold-500" className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm border-l-4 border-gold-500"
style={{ borderColor: "#e1c44a" }} style={{ borderColor: "#e1c44a" }}
> >
<h4 className="text-lg font-semibold mb-2 font-poppins"> <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
{exp.industry} {exp.industry}
</h4> </h4>
<p className="text-gray-600 font-poppins text-sm leading-relaxed"> <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm leading-relaxed">
{exp.details} {exp.details}
</p> </p>
</div> </div>
@ -331,7 +331,7 @@ export default function AboutUsPage() {
className="text-5xl text-gold-500 mx-auto mb-5" className="text-5xl text-gold-500 mx-auto mb-5"
style={{ color: "#e1c44a" }} style={{ color: "#e1c44a" }}
/> />
<h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins"> <h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins text-white">
Smart Technology, Applied Wisely Smart Technology, Applied Wisely
</h2> </h2>
<p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed text-gray-300 mb-8 font-poppins"> <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed text-gray-300 mb-8 font-poppins">
@ -339,38 +339,38 @@ export default function AboutUsPage() {
strategically. Our focus is on building solutions that are: strategically. Our focus is on building solutions that are:
</p> </p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
<div className="bg-gray-700 p-6 rounded-lg"> <div className="bg-gray-700 dark:bg-gray-700 p-6 rounded-lg">
<h4 <h4
className="text-xl font-semibold mb-2 font-poppins text-gold-500" className="text-xl font-semibold mb-2 font-poppins text-gold-500"
style={{ color: "#e1c44a" }} style={{ color: "#e1c44a" }}
> >
Scalable & Future-Proof Scalable & Future-Proof
</h4> </h4>
<p className="text-gray-300 font-poppins text-sm"> <p className="text-gray-300 dark:text-gray-300 font-poppins text-sm">
Designed to grow with your business and adapt to future Designed to grow with your business and adapt to future
technological advancements. technological advancements.
</p> </p>
</div> </div>
<div className="bg-gray-700 p-6 rounded-lg"> <div className="bg-gray-700 dark:bg-gray-700 p-6 rounded-lg">
<h4 <h4
className="text-xl font-semibold mb-2 font-poppins text-gold-500" className="text-xl font-semibold mb-2 font-poppins text-gold-500"
style={{ color: "#e1c44a" }} style={{ color: "#e1c44a" }}
> >
Robust & Reliable Robust & Reliable
</h4> </h4>
<p className="text-gray-300 font-poppins text-sm"> <p className="text-gray-300 dark:text-gray-300 font-poppins text-sm">
Built with quality and security at the core, ensuring dependable Built with quality and security at the core, ensuring dependable
performance. performance.
</p> </p>
</div> </div>
<div className="bg-gray-700 p-6 rounded-lg"> <div className="bg-gray-700 dark:bg-gray-700 p-6 rounded-lg">
<h4 <h4
className="text-xl font-semibold mb-2 font-poppins text-gold-500" className="text-xl font-semibold mb-2 font-poppins text-gold-500"
style={{ color: "#e1c44a" }} style={{ color: "#e1c44a" }}
> >
Best-Fit Solutions Best-Fit Solutions
</h4> </h4>
<p className="text-gray-300 font-poppins text-sm"> <p className="text-gray-300 dark:text-gray-300 font-poppins text-sm">
Chosen based on your specific needs, budget, and existing Chosen based on your specific needs, budget, and existing
infrastructure, not just the latest hype. infrastructure, not just the latest hype.
</p> </p>
@ -379,25 +379,25 @@ export default function AboutUsPage() {
</div> </div>
</section> </section>
{/* Section 7: Core Values (Reusing previous structure, adjusting background) */} {/* Section 7: Core Values (Reusing previous structure, adjusting background) */}
<section className="py-16 md:py-24 bg-gray-100"> <section className="py-16 md:py-24 bg-gray-100 dark:bg-gray-800">
<div className="container mx-auto px-6"> <div className="container mx-auto px-6">
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12 font-poppins text-gray-900"> <h2 className="text-3xl md:text-4xl font-bold text-center mb-12 font-poppins text-gray-900 dark:text-white">
Our Foundational Values Our Foundational Values
</h2> </h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
{coreValues.map((value) => ( {coreValues.map((value) => (
<div <div
key={value.title} key={value.title}
className="bg-white p-6 rounded-lg shadow-sm text-center transition-shadow duration-300 hover:shadow-lg" className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-sm text-center transition-shadow duration-300 hover:shadow-lg dark:hover:shadow-gold-500/20"
> >
<value.icon <value.icon
className="text-4xl text-gold-500 mx-auto mb-4" className="text-4xl text-gold-500 mx-auto mb-4"
style={{ color: "#e1c44a" }} style={{ color: "#e1c44a" }}
/> />
<h4 className="text-xl font-semibold mb-2 font-poppins"> <h4 className="text-xl font-semibold mb-2 font-poppins dark:text-white">
{value.title} {value.title}
</h4> </h4>
<p className="text-gray-600 font-poppins text-sm leading-relaxed"> <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm leading-relaxed">
{value.description} {value.description}
</p> </p>
</div> </div>
@ -406,7 +406,7 @@ export default function AboutUsPage() {
</div> </div>
</section> </section>
{/* Section 8: The OMS Partnership */} {/* Section 8: The OMS Partnership */}
<section className="py-16 md:py-24 bg-white"> <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
<div className="container mx-auto px-6"> <div className="container mx-auto px-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div className="relative h-64 md:h-80 rounded-lg overflow-hidden shadow-lg order-last md:order-first"> <div className="relative h-64 md:h-80 rounded-lg overflow-hidden shadow-lg order-last md:order-first">
@ -424,17 +424,17 @@ export default function AboutUsPage() {
className="text-5xl text-gold-500 mb-4" className="text-5xl text-gold-500 mb-4"
style={{ color: "#e1c44a" }} style={{ color: "#e1c44a" }}
/> />
<h2 className="text-3xl md:text-4xl font-bold mb-6 font-poppins text-gray-900 leading-tight"> <h2 className="text-3xl md:text-4xl font-bold mb-6 font-poppins text-gray-900 dark:text-white leading-tight">
More Than Vendors, <br className="hidden md:inline" />{" "} More Than Vendors, <br className="hidden md:inline" />{" "}
We&apos;re Partners We&apos;re Partners
</h2> </h2>
<p className="text-md md:text-lg text-gray-700 leading-relaxed mb-4 font-poppins"> <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4 font-poppins">
We believe the best results come from true collaboration. We We believe the best results come from true collaboration. We
invest time in understanding your culture, goals, and invest time in understanding your culture, goals, and
challenges, working alongside your team as an extension of your challenges, working alongside your team as an extension of your
own capabilities. own capabilities.
</p> </p>
<p className="text-md md:text-lg text-gray-700 leading-relaxed font-poppins"> <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-poppins">
This means open communication, shared goals, proactive This means open communication, shared goals, proactive
problem-solving, and a long-term commitment to your success, problem-solving, and a long-term commitment to your success,
extending far beyond project completion. extending far beyond project completion.
@ -444,13 +444,13 @@ export default function AboutUsPage() {
</div> </div>
</section> </section>
{/* Section 9: Our Leadership Team */} {/* Section 9: Our Leadership Team */}
<section className="py-16 md:py-24 bg-gray-50"> <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
<div className="container mx-auto px-6"> <div className="container mx-auto px-6">
<div className="text-center mb-14"> <div className="text-center mb-14">
<h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 mb-4"> <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
Meet Our Leadership Meet Our Leadership
</h2> </h2>
<p className="text-md md:text-lg text-gray-700 max-w-3xl mx-auto font-poppins"> <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto font-poppins">
Slightly enhance the intro. E.g., Guided by experience and a Slightly enhance the intro. E.g., Guided by experience and a
passion for innovation, our leadership team fosters a culture of passion for innovation, our leadership team fosters a culture of
excellence and empowers our experts to deliver outstanding results excellence and empowers our experts to deliver outstanding results
@ -463,7 +463,7 @@ export default function AboutUsPage() {
{leadershipTeam.map((member) => ( {leadershipTeam.map((member) => (
<div <div
key={member.id} key={member.id}
className="bg-white rounded-lg shadow-lg overflow-hidden text-center transition-transform duration-300 hover:scale-105 max-w-sm mx-auto" className="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden text-center transition-transform duration-300 hover:scale-105 max-w-sm mx-auto dark:hover:shadow-gold-500/20"
> >
{/* Added max-width and mx-auto for centering if fewer than 3 items */} {/* Added max-width and mx-auto for centering if fewer than 3 items */}
<div className="relative h-60 w-full"> <div className="relative h-60 w-full">
@ -473,11 +473,11 @@ export default function AboutUsPage() {
alt={`Photo of ${member.name}`} alt={`Photo of ${member.name}`}
layout="fill" layout="fill"
objectFit="cover" objectFit="cover"
className="bg-gray-200" className="bg-gray-200 dark:bg-gray-600"
/> />
</div> </div>
<div className="p-6"> <div className="p-6">
<h4 className="text-xl font-semibold font-poppins mb-1"> <h4 className="text-xl font-semibold font-poppins mb-1 dark:text-white">
{member.name} {member.name}
</h4> </h4>
<p <p
@ -486,7 +486,7 @@ export default function AboutUsPage() {
> >
{member.title} {member.title}
</p> </p>
<p className="text-gray-600 font-poppins text-sm mb-4"> <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm mb-4">
{member.bio} {member.bio}
</p> </p>
{member.linkedinUrl && member.linkedinUrl !== "#" && ( {member.linkedinUrl && member.linkedinUrl !== "#" && (
@ -494,7 +494,7 @@ export default function AboutUsPage() {
href={member.linkedinUrl} href={member.linkedinUrl}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-sm font-medium text-blue-600 hover:text-blue-800 transition-colors duration-200 font-poppins" className="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors duration-200 font-poppins"
aria-label={`LinkedIn profile of ${member.name}`} aria-label={`LinkedIn profile of ${member.name}`}
> >
{/* Using a simple text link for cleanliness */} {/* Using a simple text link for cleanliness */}
@ -510,15 +510,15 @@ export default function AboutUsPage() {
</section> </section>
{/* Section 10: Commitment to Impact (Optional, but adds value) */} {/* Section 10: Commitment to Impact (Optional, but adds value) */}
<section <section
className="py-16 md:py-24 bg-gold-500 text-gray-900" className="py-16 md:py-24 bg-gold-500 text-gray-900 dark:bg-gold-600 dark:text-gray-900"
style={{ backgroundColor: "#e1c44a" }} style={{ backgroundColor: "#e1c44a" }}
> >
<div className="container mx-auto px-6 text-center"> <div className="container mx-auto px-6 text-center">
<FaChartLine className="text-5xl mx-auto mb-5" /> <FaChartLine className="text-5xl mx-auto mb-5 text-gray-800" />
<h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins"> <h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins text-gray-900">
Driving Measurable Impact Driving Measurable Impact
</h2> </h2>
<p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed font-poppins"> <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed font-poppins text-gray-800">
Ultimately, our success is measured by yours. We are committed to Ultimately, our success is measured by yours. We are committed to
delivering solutions that not only meet technical requirements but delivering solutions that not only meet technical requirements but
also drive efficiency, foster growth, enhance user experiences, and also drive efficiency, foster growth, enhance user experiences, and
@ -529,7 +529,7 @@ export default function AboutUsPage() {
<div className="mt-10"> <div className="mt-10">
<a <a
href="/contact" href="/contact"
className="inline-block bg-gray-800 text-white font-bold py-3 px-8 rounded-md hover:bg-gray-900 transition-colors duration-300 font-poppins" className="inline-block bg-gray-800 text-white font-bold py-3 px-8 rounded-md hover:bg-gray-900 dark:bg-gray-900 dark:hover:bg-black transition-colors duration-300 font-poppins"
> >
Start the Conversation Start the Conversation
</a> </a>

30
app/(website)/contact/page.tsx
View File

@ -11,36 +11,6 @@ import {
} from "react-icons/fa"; // Using Fa icons for consistency } from "react-icons/fa"; // Using Fa icons for consistency
import { COLORS } from "@/constants"; // Using COLORS constant import { COLORS } from "@/constants"; // Using COLORS constant
import ContactForm from "@/components/ContactForm"; import ContactForm from "@/components/ContactForm";
import { Metadata } from "next";
// SEO Metadata for the Contact page
export const metadata: Metadata = {
title: "Contact Us | Owethu Managed Services (OMS)",
description:
"Get in touch with Owethu Managed Services. Contact us for IT solutions, resource augmentation, project management, and custom software development inquiries.",
alternates: {
canonical: "/contact",
},
openGraph: {
title: "Contact OMS",
description: "Reach out to OMS for expert IT services and solutions.",
url: "https://oms.africa/contact", // Replace with your actual domain
images: [
{
url: "/og-image-contact.jpg", // Create a specific OG image for contact
width: 1200,
height: 630,
alt: "Contact Owethu Managed Services",
},
],
},
twitter: {
card: "summary_large_image",
title: "Contact OMS",
description: "Get in touch with Owethu Managed Services.",
images: ["/og-image-contact.jpg"],
},
};
// Define the structure for FAQ items // Define the structure for FAQ items
interface FAQItem { interface FAQItem {

4
components/HeaderClient.tsx
View File

@ -153,7 +153,7 @@ const HeaderClient = ({
title="Request a Demo" title="Request a Demo"
> >
<FiClipboard className="w-4 h-4 mr-1.5" /> <FiClipboard className="w-4 h-4 mr-1.5" />
Request Demo Request OBSE Demo
</Link> </Link>
{/* --- Auth Section --- */} {/* --- Auth Section --- */}
@ -333,7 +333,7 @@ const HeaderClient = ({
title="Request a Demo" title="Request a Demo"
> >
<FiClipboard className="w-4 h-4 mr-1.5" /> <FiClipboard className="w-4 h-4 mr-1.5" />
Request Demo Request OBSE Demo
</Link> </Link>
</div> </div>
{/* Auth Buttons in Mobile Menu */} {/* Auth Buttons in Mobile Menu */}

2
components/HeaderSingle.tsx
View File

@ -164,7 +164,7 @@ const Header = () => {
title="Request a Demo" title="Request a Demo"
> >
<FiClipboard className="w-4 h-4 mr-1.5" /> <FiClipboard className="w-4 h-4 mr-1.5" />
Request Demo Request OBSE Demo
</Link> </Link>
</div> </div>