omswebsite-backups/oms-website-nextjs
1
0
Fork 0
mirror of https://github.com/OwethuManagedServices/oms-website-nextjs.git synced 2025-12-17 17:18:09 +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() {
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&apos;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">
&quot;To be global leaders in delivering cutting-edge IT
solutions, pushing the boundaries of what&apos;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">
&quot;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&apos;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>

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

@ -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 {

4
components/HeaderClient.tsx
View File

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

2
components/HeaderSingle.tsx
View File

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