mirror of
https://github.com/OwethuManagedServices/oms-website-nextjs.git
synced 2025-12-17 18:58:10 +00:00
Darkmode omplemented
This commit is contained in:
libertyoms
@ -131,13 +131,13 @@ const industryExpertise = [
|
||||
|
||||
export default function AboutUsPage() {
|
||||
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 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 */}
|
||||
<div className="absolute inset-0 bg-black opacity-30"></div>
|
||||
<div className="absolute inset-0 bg-black opacity-30 dark:opacity-50"></div>
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center opacity-10"
|
||||
style={{ backgroundImage: "url('/path/to/abstract-tech-bg.jpg')" }}
|
||||
@ -150,7 +150,7 @@ export default function AboutUsPage() {
|
||||
>
|
||||
About Owethu Managed Services
|
||||
</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
|
||||
deep technical expertise with a passion for innovation to craft
|
||||
bespoke IT solutions that drive tangible business results and unlock
|
||||
@ -159,15 +159,15 @@ export default function AboutUsPage() {
|
||||
</div>
|
||||
</section>
|
||||
{/* 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="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||
<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
|
||||
by Purpose
|
||||
</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
|
||||
Services was born from a clear vision: to harness the
|
||||
transformative power of technology not just to solve problems,
|
||||
@ -176,7 +176,7 @@ export default function AboutUsPage() {
|
||||
technology's potential and the unique challenges modern
|
||||
organizations face.
|
||||
</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
|
||||
a relentless pursuit of knowledge, adaptation to the
|
||||
ever-evolving tech landscape, and an unwavering commitment to
|
||||
@ -198,12 +198,12 @@ export default function AboutUsPage() {
|
||||
</div>
|
||||
</section>
|
||||
{/* 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">
|
||||
<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
|
||||
</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.
|
||||
</p>
|
||||
</div>
|
||||
@ -211,17 +211,17 @@ export default function AboutUsPage() {
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-12">
|
||||
{/* Vision Card */}
|
||||
<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" }}
|
||||
>
|
||||
<FaBullseye
|
||||
className="text-5xl mb-5 text-gold-500"
|
||||
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
|
||||
</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">
|
||||
"To be global leaders in delivering cutting-edge IT
|
||||
solutions, pushing the boundaries of what's possible, and
|
||||
transforming industries for the better. We aim to empower
|
||||
@ -231,17 +231,17 @@ export default function AboutUsPage() {
|
||||
</div>
|
||||
{/* Mission Card */}
|
||||
<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" }}
|
||||
>
|
||||
<FaHandshake
|
||||
className="text-5xl mb-5 text-gold-500"
|
||||
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
|
||||
</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">
|
||||
"We are dedicated to creating tailored, innovative
|
||||
solutions that drive business success. By combining expertise
|
||||
with cutting-edge technology, we solve complex problems and
|
||||
@ -254,13 +254,13 @@ export default function AboutUsPage() {
|
||||
</div>
|
||||
</section>
|
||||
{/* 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="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
|
||||
</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
|
||||
relentless focus on delivering impactful results. We tailor our
|
||||
process to fit your specific project needs.
|
||||
@ -270,16 +270,16 @@ export default function AboutUsPage() {
|
||||
{ourApproach.map((item) => (
|
||||
<div
|
||||
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
|
||||
className="text-4xl text-gold-500 mx-auto mb-5"
|
||||
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}
|
||||
</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}
|
||||
</p>
|
||||
</div>
|
||||
@ -288,7 +288,7 @@ export default function AboutUsPage() {
|
||||
</div>
|
||||
</section>
|
||||
{/* 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="grid grid-cols-1 lg:grid-cols-3 gap-12 items-center">
|
||||
<div className="lg:col-span-1">
|
||||
@ -296,10 +296,10 @@ export default function AboutUsPage() {
|
||||
className="text-5xl text-gold-500 mb-4"
|
||||
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
|
||||
</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
|
||||
expertise across key industries, understanding the unique
|
||||
challenges and opportunities within each sector.
|
||||
@ -309,13 +309,13 @@ export default function AboutUsPage() {
|
||||
{industryExpertise.map((exp) => (
|
||||
<div
|
||||
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" }}
|
||||
>
|
||||
<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}
|
||||
</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}
|
||||
</p>
|
||||
</div>
|
||||
@ -331,7 +331,7 @@ export default function AboutUsPage() {
|
||||
className="text-5xl text-gold-500 mx-auto mb-5"
|
||||
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
|
||||
</h2>
|
||||
<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:
|
||||
</p>
|
||||
<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
|
||||
className="text-xl font-semibold mb-2 font-poppins text-gold-500"
|
||||
style={{ color: "#e1c44a" }}
|
||||
>
|
||||
Scalable & Future-Proof
|
||||
</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
|
||||
technological advancements.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-gray-700 p-6 rounded-lg">
|
||||
<div className="bg-gray-700 dark:bg-gray-700 p-6 rounded-lg">
|
||||
<h4
|
||||
className="text-xl font-semibold mb-2 font-poppins text-gold-500"
|
||||
style={{ color: "#e1c44a" }}
|
||||
>
|
||||
Robust & Reliable
|
||||
</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
|
||||
performance.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-gray-700 p-6 rounded-lg">
|
||||
<div className="bg-gray-700 dark:bg-gray-700 p-6 rounded-lg">
|
||||
<h4
|
||||
className="text-xl font-semibold mb-2 font-poppins text-gold-500"
|
||||
style={{ color: "#e1c44a" }}
|
||||
>
|
||||
Best-Fit Solutions
|
||||
</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
|
||||
infrastructure, not just the latest hype.
|
||||
</p>
|
||||
@ -379,25 +379,25 @@ export default function AboutUsPage() {
|
||||
</div>
|
||||
</section>
|
||||
{/* 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">
|
||||
<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
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{coreValues.map((value) => (
|
||||
<div
|
||||
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
|
||||
className="text-4xl text-gold-500 mx-auto mb-4"
|
||||
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}
|
||||
</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}
|
||||
</p>
|
||||
</div>
|
||||
@ -406,7 +406,7 @@ export default function AboutUsPage() {
|
||||
</div>
|
||||
</section>
|
||||
{/* 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="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">
|
||||
@ -424,17 +424,17 @@ export default function AboutUsPage() {
|
||||
className="text-5xl text-gold-500 mb-4"
|
||||
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" />{" "}
|
||||
We're Partners
|
||||
</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
|
||||
invest time in understanding your culture, goals, and
|
||||
challenges, working alongside your team as an extension of your
|
||||
own capabilities.
|
||||
</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
|
||||
problem-solving, and a long-term commitment to your success,
|
||||
extending far beyond project completion.
|
||||
@ -444,13 +444,13 @@ export default function AboutUsPage() {
|
||||
</div>
|
||||
</section>
|
||||
{/* 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="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
|
||||
</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
|
||||
passion for innovation, our leadership team fosters a culture of
|
||||
excellence and empowers our experts to deliver outstanding results
|
||||
@ -463,7 +463,7 @@ export default function AboutUsPage() {
|
||||
{leadershipTeam.map((member) => (
|
||||
<div
|
||||
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 */}
|
||||
<div className="relative h-60 w-full">
|
||||
@ -473,11 +473,11 @@ export default function AboutUsPage() {
|
||||
alt={`Photo of ${member.name}`}
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="bg-gray-200"
|
||||
className="bg-gray-200 dark:bg-gray-600"
|
||||
/>
|
||||
</div>
|
||||
<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}
|
||||
</h4>
|
||||
<p
|
||||
@ -486,7 +486,7 @@ export default function AboutUsPage() {
|
||||
>
|
||||
{member.title}
|
||||
</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}
|
||||
</p>
|
||||
{member.linkedinUrl && member.linkedinUrl !== "#" && (
|
||||
@ -494,7 +494,7 @@ export default function AboutUsPage() {
|
||||
href={member.linkedinUrl}
|
||||
target="_blank"
|
||||
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}`}
|
||||
>
|
||||
{/* Using a simple text link for cleanliness */}
|
||||
@ -510,15 +510,15 @@ export default function AboutUsPage() {
|
||||
</section>
|
||||
{/* Section 10: Commitment to Impact (Optional, but adds value) */}
|
||||
<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" }}
|
||||
>
|
||||
<div className="container mx-auto px-6 text-center">
|
||||
<FaChartLine className="text-5xl mx-auto mb-5" />
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins">
|
||||
<FaChartLine className="text-5xl mx-auto mb-5 text-gray-800" />
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins text-gray-900">
|
||||
Driving Measurable Impact
|
||||
</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
|
||||
delivering solutions that not only meet technical requirements but
|
||||
also drive efficiency, foster growth, enhance user experiences, and
|
||||
@ -529,7 +529,7 @@ export default function AboutUsPage() {
|
||||
<div className="mt-10">
|
||||
<a
|
||||
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
|
||||
</a>
|
||||
|
||||
@ -11,36 +11,6 @@ import {
|
||||
} from "react-icons/fa"; // Using Fa icons for consistency
|
||||
import { COLORS } from "@/constants"; // Using COLORS constant
|
||||
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
|
||||
interface FAQItem {
|
||||
|
||||
Reference in New Issue
Block a user