Initial Commit

app/globals.css

@@ -1,26 +1,149 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
 @import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:is(.dark *));
 
 @theme inline {
+  /* Map semantic utility colors to CSS variables */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  /* Map specific OMS colors IF you want direct utilities like bg-oms-gold */
+  /* If you only use semantic vars (like bg-primary), these aren't strictly needed here */
+  --color-oms-gold: var(--oms-gold);
+  --color-oms-black: var(--oms-black);
+  --color-oms-white: var(--oms-white);
+  --color-oms-light-gray: var(--oms-light-gray);
+
+  /* Map font variables */
+  --font-sans: var(--font-sans);
+
+  /* Map radius variables */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+:root {
+  /* --- Font --- */
+  --font-sans: "Poppins", sans-serif;
+
+  /* --- Radius --- */
+  --radius: 0.5rem; /* Example: Adjust OMS desired radius */
+
+  /* --- Light Mode Colors --- */
+  --background: #ffffff; /* White */
+  --foreground: #000000; /* Black */
+  --card: #ffffff;
+  --card-foreground: #000000;
+  --popover: #ffffff;
+  --popover-foreground: #000000;
+  --primary: #e1c44a; /* OMS Gold */
+  --primary-foreground: #000000; /* Black Text on Gold */
+  --secondary: #f8f9fa; /* OMS Light Gray */
+  --secondary-foreground: #000000; /* Black Text on Light Gray */
+  --muted: #f8f9fa; /* OMS Light Gray */
+  --muted-foreground: #6c757d; /* Muted Gray Text */
+  --accent: var(--primary); /* Use Primary Gold for Accent */
+  --accent-foreground: var(
+    --primary-foreground
+  ); /* Use Black for Accent Text */
+  --destructive: #dc3545; /* Example Red */
+  --destructive-foreground: #ffffff; /* White Text on Red */
+  --border: #dee2e6; /* Light Gray Border */
+  --input: #dee2e6; /* Light Gray Input Border */
+  --ring: var(--primary); /* Gold focus ring */
+
+  /* --- Specific OMS Colors (Optional if Semantic is Enough) --- */
+  --oms-gold: #e1c44a;
+  --oms-black: #000000;
+  --oms-white: #ffffff;
+  --oms-light-gray: #f8f9fa;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+.dark {
+  /* --- Dark Mode Color Overrides --- */
+  --background: #121212; /* Very Dark Gray/Black */
+  --foreground: #e0e0e0; /* Light Gray Text */
+  --card: #1e1e1e; /* Slightly Lighter Dark */
+  --card-foreground: #e0e0e0;
+  --popover: #1e1e1e;
+  --popover-foreground: #e0e0e0;
+  --primary: #e1c44a; /* Keep Gold */
+  --primary-foreground: #000000; /* Keep Black Text on Gold */
+  --secondary: #2a2a2a; /* Darker Gray */
+  --secondary-foreground: #e0e0e0; /* Light Text */
+  --muted: #2a2a2a;
+  --muted-foreground: #a0a0a0; /* Dimmer Light Text */
+  --accent: var(--primary); /* Keep Gold */
+  --accent-foreground: var(--primary-foreground); /* Keep Black */
+  --destructive: #842029; /* Darker Red */
+  --destructive-foreground: #f8d7da; /* Lighter text on Dark Red */
+  --border: #3a3a3a; /* Dark Border */
+  --input: #3a3a3a;
+  --ring: var(--primary); /* Keep Gold */
+
+  /* --- Specific OMS Colors (Optional) --- */
+  --oms-gold: #e1c44a;
+  --oms-black: #000000;
+  --oms-white: #ffffff;
+  --oms-light-gray: #2a2a2a; /* Use Dark Gray */
+}
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    @apply flex flex-col min-h-screen;
+  }
+  main {
+    @apply flex-grow;
   }
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+@layer components {
+}
+
+@layer utilities {
+  .animation-delay-300 {
+    animation-delay: 0.3s;
+  }
+  .animation-delay-600 {
+    animation-delay: 0.6s;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.8s ease-out forwards;
+  opacity: 0;
 }

app/layout.tsx

@@ -1,20 +1,21 @@
+// app/layout.tsx
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Poppins } from "next/font/google";
 import "./globals.css";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import ChatbotWidget from "@/components/ChatbotWidget";
+import { ThemeProvider } from "@/providers/theme-provider";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const poppins = Poppins({
   subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700", "800"],
+  variable: "--font-poppins",
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "OMS - Owethu Managed Services",
+  description: "Where innovation meets excellence.",
 };
 
 export default function RootLayout({
@@ -23,11 +24,18 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+    <html
+      lang="en"
+      className={`${poppins.variable} font-sans`}
+      suppressHydrationWarning
+    >
+      <body>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <Header />
+          <main>{children}</main>
+          <Footer />
+          <ChatbotWidget />
+        </ThemeProvider>
       </body>
     </html>
   );

app/page.tsx

@@ -1,103 +1,168 @@
+// app/page.tsx
 import Image from "next/image";
+import Button from "@/components/ui/Button"; // Use the reusable button
+import {
+  FaCogs,
+  FaProjectDiagram,
+  FaCode,
+  FaUsers,
+  FaBuilding,
+  FaCar,
+  FaLaptopCode,
+} from "react-icons/fa"; // Import icons
 
-export default function Home() {
+export default function HomePage() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
+    <>
+      {/* Hero Section */}
+      <section className="relative h-[70vh] md:h-[85vh] flex items-center justify-center text-center bg-dark text-light overflow-hidden">
+        {/* Background Video/Image Placeholder */}
+        {/* TODO: Replace with actual <video> or Next/Image */}
+        <div className="absolute inset-0 z-0 opacity-30">
+          <Image
+            src="/hero-bg.jpg" // Add a placeholder image in /public
+            alt="Digital transformation background"
+            layout="fill"
+            objectFit="cover"
+            quality={75}
+          />
+          {/* OR a video element:
+          <video
+            autoPlay
+            loop
+            muted
+            playsInline
+            className="w-full h-full object-cover"
+            poster="/placeholder-hero-bg.jpg" // Poster image
           >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+            <source src="/your-video.mp4" type="video/mp4" />
+            Your browser does not support the video tag.
+          </video> */}
         </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
+        {/* Overlay */}
+        <div className="absolute inset-0 bg-gradient-to-b from-black/50 to-black/80 z-10"></div>
+
+        {/* Content */}
+        <div className="relative z-20 container mx-auto px-6">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-4 leading-tight text-primary animate-fade-in-up">
+            Where Innovation <br className="hidden md:block" /> Meets
+            Excellence.
+          </h1>
+          <p className="text-lg md:text-xl max-w-3xl mx-auto mb-8 text-gray-300 animate-fade-in-up animation-delay-300">
+            Welcome to Owethu Managed Services. We deliver cutting-edge IT
+            solutions, empowering businesses to thrive in the ever-evolving
+            digital landscape with unmatched industry expertise.
+          </p>
+          <Button
+            href="/about"
+            size="lg"
+            className="animate-fade-in-up animation-delay-600"
+          >
+            Learn More →
+          </Button>
+        </div>
+      </section>
+
+      {/* Core Services Section */}
+      <section className="py-20 md:py-28 bg-light-gray">
+        <div className="container mx-auto px-6 text-center">
+          <h2 className="text-3xl md:text-4xl font-bold mb-4 text-dark">
+            Core Services
+          </h2>
+          <p className="text-lg text-gray-600 mb-12 md:mb-16 max-w-2xl mx-auto">
+            Tailored solutions designed to drive growth, optimize productivity,
+            and solve your most complex business challenges.
+          </p>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
+            {/* Service Card 1: Resource Augmentation */}
+            <div className="bg-light p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 text-left">
+              <FaCogs className="text-primary text-4xl mb-4" />
+              <h3 className="text-xl font-semibold mb-3 text-dark">
+                Resource Augmentation
+              </h3>
+              <p className="text-gray-600">
+                Access top-tier IT talent seamlessly integrated with your team.
+                Skilled professionals for short-term projects or long-term
+                engagements.
+              </p>
+            </div>
+            {/* Service Card 2: Project Management */}
+            <div className="bg-light p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 text-left">
+              <FaProjectDiagram className="text-primary text-4xl mb-4" />
+              <h3 className="text-xl font-semibold mb-3 text-dark">
+                Project Management
+              </h3>
+              <p className="text-gray-600">
+                Expert management ensuring on-time, within-budget delivery with
+                superior results, risk mitigation, and maximum efficiency.
+              </p>
+            </div>
+            {/* Service Card 3: Product Development */}
+            <div className="bg-light p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 text-left">
+              <FaCode className="text-primary text-4xl mb-4" />
+              <h3 className="text-xl font-semibold mb-3 text-dark">
+                Product Development
+              </h3>
+              <p className="text-gray-600">
+                Creating innovative, scalable digital products from concept to
+                deployment to enhance efficiency and foster business growth.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Client Logos Section */}
+      <section className="py-16 md:py-20 bg-light">
+        <div className="container mx-auto px-6 text-center">
+          <h2 className="text-3xl md:text-4xl font-bold mb-12 text-dark">
+            Trusted By Industry Leaders
+          </h2>
+          {/* TODO: Implement Auto-Sliding Panel (e.g., using Swiper.js or react-slick) */}
+          <div className="flex flex-wrap justify-center items-center gap-10 md:gap-16 opacity-70">
+            {/* Placeholder Logos - Replace with actual client logos */}
+            <FaBuilding
+              title="Financial Services Client"
+              className="text-5xl text-gray-500 hover:text-primary transition-colors"
+            />
+            <FaCar
+              title="Automotive Client"
+              className="text-5xl text-gray-500 hover:text-primary transition-colors"
+            />
+            <FaLaptopCode
+              title="Tech Industry Client"
+              className="text-5xl text-gray-500 hover:text-primary transition-colors"
+            />
+            <FaUsers
+              title="Generic Client 1"
+              className="text-5xl text-gray-500 hover:text-primary transition-colors"
+            />
+            <FaBuilding
+              title="Generic Client 2"
+              className="text-5xl text-gray-500 hover:text-primary transition-colors"
+            />
+          </div>
+          <p className="mt-8 text-gray-500 italic">
+            Showcasing key clients across financial services, automotive, and
+            tech industries.
+            {/* (Auto-sliding panel coming soon!) */}
+          </p>
+        </div>
+      </section>
+
+      {/* Call to Action (Optional but good practice) */}
+      <section className="bg-primary text-dark py-16">
+        <div className="container mx-auto px-6 text-center">
+          <h2 className="text-3xl font-bold mb-4">Ready to Innovate?</h2>
+          <p className="text-lg mb-8 max-w-xl mx-auto">
+            Let&apos;s discuss how OMS can help transform your business with
+            cutting-edge technology solutions.
+          </p>
+          <Button href="/contact" variant="secondary" size="lg">
+            Get In Touch
+          </Button>
+        </div>
+      </section>
+    </>
   );
 }