feat: update UI components for dark mode support and color scheme changes

- Refactored About, Contact, Gallery, Home, Services pages to enhance dark mode compatibility. - Changed color schemes from orange to sky for various elements. - Updated background colors and text colors to improve readability in dark mode. - Added dark mode configuration to Tailwind CSS.
2026-02-23 13:51:44 +01:00
parent 8954081593
commit e8d0f5b087
16 changed files with 471 additions and 397 deletions
@@ -5,8 +5,8 @@
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Handyman Service App Design</title>
-      <script type="module" crossorigin src="/assets/index-Bj-KDMGO.js"></script>
-      <link rel="stylesheet" crossorigin href="/assets/index-CUodwQpv.css">
+      <script type="module" crossorigin src="/handyman/assets/index-D0ECyUx1.js"></script>
+      <link rel="stylesheet" crossorigin href="/handyman/assets/index-eJB9Fk64.css">
    </head>

    <body>
@@ -1,6 +1,11 @@
 import { RouterProvider } from "react-router";
 import { router } from "./routes";
+import { ThemeProvider } from "./ThemeProvider";

 export default function App() {
-  return <RouterProvider router={router} />;
+  return (
+    <ThemeProvider>
+      <RouterProvider router={router} />
+    </ThemeProvider>
+  );
 }
@@ -0,0 +1,38 @@
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+
+type Theme = "light" | "dark";
+type ThemeContextValue = { theme: Theme; toggle: () => void };
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>(() => {
+    const saved = localStorage.getItem("theme") as Theme | null;
+    if (saved) return saved;
+    return window.matchMedia?.("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.toggle("dark", theme === "dark");
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const value = useMemo(
+    () => ({
+      theme,
+      toggle: () => setTheme((t) => (t === "dark" ? "light" : "dark")),
+    }),
+    [theme],
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
+  return ctx;
+}
@@ -6,28 +6,28 @@ export function Footer() {
  const { t } = useTranslation();

  return (
-    <footer className="bg-gray-900 text-gray-300">
+    <footer className="bg-gray-900 text-gray-300 dark:bg-black dark:text-gray-400">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {/* Company Info */}
          <div>
            <div className="flex items-center space-x-2 mb-4">
-              <Wrench className="h-8 w-8 text-orange-600" />
-              <span className="font-bold text-xl text-white">
+              <Wrench className="h-8 w-8 text-sky-600" />
+              <span className="font-bold text-xl text-white dark:text-white">
                {t("footer.brand")}
              </span>
            </div>
-            <p className="text-sm mb-4">
+            <p className="text-sm mb-4 text-gray-300 dark:text-gray-400">
              {t("footer.description")}
            </p>
            <div className="flex space-x-4">
-              <a href="#" className="hover:text-orange-600 transition-colors">
+              <a href="#" className="hover:text-sky-600 transition-colors">
                <Facebook className="h-5 w-5" />
              </a>
-              <a href="#" className="hover:text-orange-600 transition-colors">
+              <a href="#" className="hover:text-sky-600 transition-colors">
                <Instagram className="h-5 w-5" />
              </a>
-              <a href="#" className="hover:text-orange-600 transition-colors">
+              <a href="#" className="hover:text-sky-600 transition-colors">
                <Twitter className="h-5 w-5" />
              </a>
            </div>
@@ -35,32 +35,32 @@ export function Footer() {

          {/* Quick Links */}
          <div>
-            <h3 className="text-white font-semibold mb-4">
+            <h3 className="text-white font-semibold mb-4 dark:text-gray-100">
              {t("footer.quickLinks")}
            </h3>
            <ul className="space-y-2">
              <li>
-                <Link to="/" className="hover:text-orange-600 transition-colors">
+                <Link to="/" className="hover:text-sky-600 transition-colors text-gray-300 dark:text-gray-400 dark:hover:text-sky-400">
                  {t("footer.links.home")}
                </Link>
              </li>
              <li>
-                <Link to="/services" className="hover:text-orange-600 transition-colors">
+                <Link to="/services" className="hover:text-sky-600 transition-colors text-gray-300 dark:text-gray-400 dark:hover:text-sky-400">
                  {t("footer.links.services")}
                </Link>
              </li>
              <li>
-                <Link to="/about" className="hover:text-orange-600 transition-colors">
+                <Link to="/about" className="hover:text-sky-600 transition-colors text-gray-300 dark:text-gray-400 dark:hover:text-sky-400">
                  {t("footer.links.about")}
                </Link>
              </li>
              <li>
-                <Link to="/gallery" className="hover:text-orange-600 transition-colors">
+                <Link to="/gallery" className="hover:text-sky-600 transition-colors text-gray-300 dark:text-gray-400 dark:hover:text-sky-400">
                  {t("footer.links.gallery")}
                </Link>
              </li>
              <li>
-                <Link to="/contact" className="hover:text-orange-600 transition-colors">
+                <Link to="/contact" className="hover:text-sky-600 transition-colors text-gray-300 dark:text-gray-400 dark:hover:text-sky-400">
                  {t("footer.links.contact")}
                </Link>
              </li>
@@ -69,7 +69,7 @@ export function Footer() {

          {/* Services */}
          <div>
-            <h3 className="text-white font-semibold mb-4">
+            <h3 className="text-white font-semibold mb-4 dark:text-gray-100">
              {t("footer.ourServices")}
            </h3>
            <ul className="space-y-2 text-sm">
@@ -84,46 +84,48 @@ export function Footer() {

          {/* Contact Info */}
          <div>
-            <h3 className="text-white font-semibold mb-4">
+            <h3 className="text-white font-semibold mb-4 dark:text-gray-100">
              {t("footer.contactInfo")}
            </h3>
            <ul className="space-y-3">
              <li className="flex items-start space-x-3">
-                <Phone className="h-5 w-5 text-orange-600 flex-shrink-0 mt-0.5" />
+                <Phone className="h-5 w-5 text-sky-600 flex-shrink-0 mt-0.5" />
                <div>
                  <p className="text-sm">{t("footer.callUs")}</p>
-                  <p className="text-white">(555) 123-4567</p>
+                  <p className="text-white dark:text-gray-200">(555) 123-4567</p>
                </div>
              </li>
              <li className="flex items-start space-x-3">
-                <Mail className="h-5 w-5 text-orange-600 flex-shrink-0 mt-0.5" />
+                <Mail className="h-5 w-5 text-sky-600 flex-shrink-0 mt-0.5" />
                <div>
                  <p className="text-sm">{t("footer.emailUs")}</p>
-                  <p className="text-white">info@lucris.nl</p>
+                  <p className="text-white dark:text-gray-200">info@lucris.nl</p>
                </div>
              </li>
              <li className="flex items-start space-x-3">
-                <MapPin className="h-5 w-5 text-orange-600 flex-shrink-0 mt-0.5" />
+                <MapPin className="h-5 w-5 text-sky-600 flex-shrink-0 mt-0.5" />
                <div>
                  <p className="text-sm">{t("footer.location")}</p>
-                  <p className="text-white">
+                  <p className="text-white dark:text-gray-200">
                    123 Main Street<br />New York, NY 10001
                  </p>
                </div>
              </li>
              <li className="flex items-start space-x-3">
-                <Clock className="h-5 w-5 text-orange-600 flex-shrink-0 mt-0.5" />
+                <Clock className="h-5 w-5 text-sky-600 flex-shrink-0 mt-0.5" />
                <div>
                  <p className="text-sm">{t("footer.hours")}</p>
-                  <p className="text-white">{t("footer.hoursValue")}</p>
+                  <p className="text-white dark:text-gray-200">{t("footer.hoursValue")}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>

-        <div className="border-t border-gray-800 mt-8 pt-8 text-center text-sm">
-          <p>{t("footer.copyright")}</p>
+        <div className="border-t border-gray-800 mt-8 pt-8 text-center text-sm dark:border-gray-900">
+          <p className="text-gray-400 dark:text-gray-500">
+            {t("footer.copyright")}
+          </p>
        </div>
      </div>
    </footer>
@@ -3,6 +3,7 @@ import { Menu, X, Wrench } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { LanguageSwitcher } from "./LanguageSwitcher";
+import { ThemeToggle } from "./ThemeToggle";

 export function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -20,13 +21,13 @@ export function Header() {
  const isActive = (path: string) => location.pathname === path;

  return (
-    <header className="bg-white shadow-md sticky top-0 z-50">
+    <header className="bg-white shadow-md sticky top-0 z-50 dark:bg-gray-900 dark:shadow-gray-900/50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          {/* Logo */}
          <Link to="/" className="flex items-center space-x-2">
-            <Wrench className="h-8 w-8 text-orange-600" />
-            <span className="font-bold text-xl text-gray-900">
+            <Wrench className="h-8 w-8 text-sky-600 dark:text-sky-400" />
+            <span className="font-bold text-xl text-gray-900 dark:text-white">
              {t("header.brand")}
            </span>
          </Link>
@@ -39,20 +40,21 @@ export function Header() {
                to={item.path}
                className={`transition-colors ${
                  isActive(item.path)
-                    ? "text-orange-600"
-                    : "text-gray-700 hover:text-orange-600"
+                    ? "text-sky-600"
+                    : "text-white-700 hover:text-sky-600 dark:text-white-200 dark:hover:text-sky-400"
                }`}
              >
                {item.name}
              </Link>
            ))}
            <LanguageSwitcher />
+            <ThemeToggle />
          </nav>

          {/* CTA Button */}
          <Link
            to="/contact"
-            className="hidden md:block bg-orange-600 text-white px-6 py-2 rounded-md hover:bg-orange-700 transition-colors"
+            className="hidden md:block bg-sky-600 text-white px-6 py-2 rounded-md hover:bg-sky-700 transition-colors"
          >
            {t("header.cta")}
          </Link>
@@ -63,9 +65,9 @@ export function Header() {
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          >
            {mobileMenuOpen ? (
-              <X className="h-6 w-6 text-gray-900" />
+              <X className="h-6 w-6 text-gray-900 dark:text-white" />
            ) : (
-              <Menu className="h-6 w-6 text-gray-900" />
+              <Menu className="h-6 w-6 text-gray-900 dark:text-white" />
            )}
          </button>
        </div>
@@ -80,8 +82,8 @@ export function Header() {
                onClick={() => setMobileMenuOpen(false)}
                className={`block py-2 transition-colors ${
                  isActive(item.path)
-                    ? "text-orange-600"
-                    : "text-gray-700 hover:text-orange-600"
+                    ? "text-sky-600"
+                    : "text-white-700 hover:text-sky-600"
                }`}
              >
                {item.name}
@@ -90,10 +92,13 @@ export function Header() {
            <div className="mt-4">
              <LanguageSwitcher />
            </div>
+              <div className="mt-4">
+                <ThemeToggle />
+              </div>
            <Link
              to="/contact"
              onClick={() => setMobileMenuOpen(false)}
-              className="block mt-4 bg-orange-600 text-white px-6 py-2 rounded-md text-center hover:bg-orange-700 transition-colors"
+              className="block mt-4 bg-sky-600 text-white px-6 py-2 rounded-md text-center hover:bg-sky-700 transition-colors"
            >
              {t("header.cta")}
            </Link>
@@ -38,7 +38,7 @@ export function LanguageSwitcher() {
      type="button"
      onClick={() => setLang(other as "en" | "nl")}
      aria-label={t("header.language")}
-      className="flex items-center gap-1 bg-white px-2 py-1 text-sm hover:bg-gray-50"
+      className="flex items-center gap-1 px-2 py-1 text-sm hover:bg-gray-50"
    >
      {other === "en" ? <FlagGB /> : <FlagNL />}
    </button>
@@ -0,0 +1,17 @@
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "../ThemeProvider";
+
+export function ThemeToggle() {
+  const { theme, toggle } = useTheme();
+
+  return (
+    <button
+      type="button"
+      onClick={toggle}
+      className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
+      aria-label="Toggle theme"
+    >
+      {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+    </button>
+  );
+}
@@ -63,34 +63,34 @@ export function About() {
  ];

  return (
-    <div>
+    <div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
      {/* Hero Section */}
-      <section className="bg-gradient-to-br from-orange-50 to-orange-100 py-16">
+      <section className="bg-gradient-to-br from-sky-50 to-sky-100 py-16 dark:from-gray-900 dark:to-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <h1 className="text-4xl md:text-5xl mb-6 text-gray-900">
+          <h1 className="text-4xl md:text-5xl mb-6 text-gray-900 dark:text-white text-center">
            {t("about.hero.title")}
          </h1>
-          <p className="text-xl text-gray-700 max-w-3xl mx-auto">
+          <p className="text-xl text-gray-700 max-w-3xl mx-auto dark:text-gray-300">
            {t("about.hero.subtitle")}
          </p>
        </div>
      </section>

      {/* Story Section */}
-      <section className="py-16 bg-white">
+      <section className="py-16 bg-white dark:bg-gray-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
-              <h2 className="text-3xl md:text-4xl mb-6 text-gray-900">
+              <h2 className="text-3xl md:text-4xl mb-6 text-gray-900 dark:text-white">
                {t("about.story.title")}
              </h2>
-              <p className="text-lg text-gray-700 mb-4">
+              <p className="text-lg text-gray-700 mb-4 dark:text-gray-300">
                {t("about.story.p1")}
              </p>
-              <p className="text-lg text-gray-700 mb-4">
+              <p className="text-lg text-gray-700 mb-4 dark:text-gray-300">
                {t("about.story.p2")}
              </p>
-              <p className="text-lg text-gray-700">
+              <p className="text-lg text-gray-700 dark:text-gray-300">
                {t("about.story.p3")}
              </p>
            </div>
@@ -104,7 +104,7 @@ export function About() {
      </section>

      {/* Stats Section */}
-      <section className="py-16 bg-orange-600">
+      <section className="py-16 bg-sky-600 dark:bg-sky-700">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {stats.map((stat, index) => (
@@ -112,7 +112,7 @@ export function About() {
                <div className="text-4xl md:text-5xl text-white mb-2">
                  {stat.value}
                </div>
-                <div className="text-orange-100">{stat.label}</div>
+                <div className="text-sky-100">{stat.label}</div>
              </div>
            ))}
          </div>
@@ -120,13 +120,13 @@ export function About() {
      </section>

      {/* Values Section */}
-      <section className="py-16 bg-gray-50">
+      <section className="py-16 bg-gray-50 dark:bg-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
-            <h2 className="text-3xl md:text-4xl mb-4 text-gray-900">
+            <h2 className="text-3xl md:text-4xl mb-4 text-gray-900 dark:text-white">
              {t("about.values.title")}
            </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto dark:text-gray-300">
              {t("about.values.subtitle")}
            </p>
          </div>
@@ -134,12 +134,12 @@ export function About() {
            {values.map((value, index) => {
              const Icon = value.icon;
              return (
-                <div key={index} className="bg-white rounded-lg p-6 shadow-lg text-center">
-                  <div className="bg-orange-100 w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <Icon className="h-7 w-7 text-orange-600" />
+                <div key={index} className="bg-white rounded-lg p-6 shadow-lg text-center dark:bg-gray-900 dark:border dark:border-gray-800">
+                  <div className="bg-sky-100 w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <Icon className="h-7 w-7 text-sky-600" />
                  </div>
                  <h3 className="text-xl mb-3 text-gray-900">{value.title}</h3>
-                  <p className="text-gray-600">{value.description}</p>
+                  <p className="text-gray-600 dark:text-gray-300">{value.description}</p>
                </div>
              );
            })}
@@ -148,25 +148,25 @@ export function About() {
      </section>

      {/* Team Section */}
-      <section className="py-16 bg-white">
+      <section className="py-16 bg-white dark:bg-gray-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
-            <h2 className="text-3xl md:text-4xl mb-4 text-gray-900">
+            <h2 className="text-3xl md:text-4xl mb-4 text-gray-900 dark:text-white">
              {t("about.team.title")}
            </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto dark:text-gray-300">
              {t("about.team.subtitle")}
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {team.map((member, index) => (
-              <div key={index} className="bg-gray-50 rounded-lg p-6 text-center">
-                <div className="bg-orange-100 w-24 h-24 rounded-full mx-auto mb-4 flex items-center justify-center">
-                  <Users className="h-12 w-12 text-orange-600" />
+              <div key={index} className="bg-gray-50 rounded-lg p-6 text-center dark:bg-gray-800">
+                <div className="bg-sky-100 w-24 h-24 rounded-full mx-auto mb-4 flex items-center justify-center">
+                  <Users className="h-12 w-12 text-sky-600" />
                </div>
                <h3 className="text-xl mb-1 text-gray-900">{member.name}</h3>
-                <p className="text-orange-600 mb-3">{member.role}</p>
-                <p className="text-gray-600">{member.description}</p>
+                <p className="text-sky-600 mb-3">{member.role}</p>
+                <p className="text-gray-600 dark:text-gray-300">{member.description}</p>
              </div>
            ))}
          </div>
@@ -174,21 +174,21 @@ export function About() {
      </section>

      {/* Certifications Section */}
-      <section className="py-16 bg-gray-50">
+      <section className="py-16 bg-gray-50 dark:bg-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
-            <h2 className="text-3xl md:text-4xl mb-4 text-gray-900">
+            <h2 className="text-3xl md:text-4xl mb-4 text-gray-900 dark:text-white">
              {t("about.certifications.title")}
            </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto dark:text-gray-300">
              {t("about.certifications.subtitle")}
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
            {certifications.map((cert, index) => (
-              <div key={index} className="flex items-center space-x-3 bg-white p-4 rounded-lg">
-                <CheckCircle className="h-6 w-6 text-orange-600 flex-shrink-0" />
-                <span className="text-gray-700">{cert}</span>
+              <div key={index} className="flex items-center space-x-3 bg-white p-4 rounded-lg dark:bg-gray-900 dark:border dark:border-gray-800">
+                <CheckCircle className="h-6 w-6 text-sky-600 flex-shrink-0" />
+                <span className="text-gray-700 dark:text-gray-300">{cert}</span>
              </div>
            ))}
          </div>
@@ -52,72 +52,70 @@ export function Contact() {
  ];

  return (
-    <div>
+    <div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
      {/* Hero Section */}
-      <section className="bg-gradient-to-br from-orange-50 to-orange-100 py-16">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <h1 className="text-4xl md:text-5xl mb-6 text-gray-900">
-            {t("contact.hero.title")}
-          </h1>
-          <p className="text-xl text-gray-700 max-w-3xl mx-auto">
-            {t("contact.hero.subtitle")}
-          </p>
-        </div>
+      <section className="bg-gradient-to-br from-sky-50 to-sky-100 py-16 dark:from-gray-900 dark:to-gray-800">
+        <h1 className="text-4xl md:text-5xl mb-6 text-gray-900 dark:text-white text-center">
+          {t("contact.hero.title")}
+        </h1>
+        <p className="text-xl text-gray-700 max-w-3xl mx-auto dark:text-white">
+          {t("contact.hero.subtitle")}
+        </p>
      </section>

      {/* Contact Info & Form Section */}
-      <section className="py-16 bg-white">
+      <section className="py-16 bg-white dark:bg-gray-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-5 gap-12">
            {/* Contact Information */}
            <div className="lg:col-span-2 space-y-8">
              <div>
-                <h2 className="text-3xl mb-6 text-gray-900">
+                <h2 className="text-3xl mb-6 text-gray-900 dark:text-white" >
                  {t("contact.info.title")}
                </h2>
-                <p className="text-gray-600 mb-8">
+                <p className="text-gray-600 mb-8 dark:text-white">
                  {t("contact.info.subtitle")}
                </p>
              </div>

              <div className="space-y-6">
                <div className="flex items-start space-x-4">
-                  <div className="bg-orange-100 p-3 rounded-lg">
-                    <Phone className="h-6 w-6 text-orange-600" />
+                  <div className="bg-sky-100 p-3 rounded-lg">
+                    <Phone className="h-6 w-6 text-sky-600" />
                  </div>
                  <div>
-                    <h3 className="text-gray-900 mb-1">{t("contact.info.phone")}</h3>
-                    <a href="tel:5551234567" className="text-orange-600 hover:text-orange-700">
+                    <h3 className="text-gray-900 mb-1 dark:text-white">{t("contact.info.phone")}</h3>
+                    <a href="tel:5551234567" className="text-sky-600 hover:text-sky-700 dark:text-white dark:hover:text-white">
                      (555) 123-4567
                    </a>
-                    <p className="text-gray-600 text-sm mt-1">
+                    <p className="text-gray-600 text-sm mt-1 dark:text-white">
                      {t("contact.info.phoneHours")}
                    </p>
                  </div>
                </div>

                <div className="flex items-start space-x-4">
-                  <div className="bg-orange-100 p-3 rounded-lg">
-                    <Mail className="h-6 w-6 text-orange-600" />
+                  <div className="bg-sky-100 p-3 rounded-lg">
+                    <Mail className="h-6 w-6 text-sky-600" />
                  </div>
                  <div>
-                    <h3 className="text-gray-900 mb-1">{t("contact.info.email")}</h3>
-                    <a href="mailto:info@lucris.nl" className="text-orange-600 hover:text-orange-700">
+                    <h3 className="text-gray-900 mb-1 dark:text-white">{t("contact.info.email")}</h3>
+                    <a href="mailto:info@lucris.nl" className="text-sky-600 hover:text-sky-700 dark:text-white dark:hover:text-white">
                      info@lucris.nl
                    </a>
-                    <p className="text-gray-600 text-sm mt-1">
+                    <p className="text-gray-600 text-sm mt-1 dark:text-white">
                      {t("contact.info.emailNote")}
                    </p>
                  </div>
                </div>

                <div className="flex items-start space-x-4">
-                  <div className="bg-orange-100 p-3 rounded-lg">
-                    <MapPin className="h-6 w-6 text-orange-600" />
+                  <div className="bg-sky-100 p-3 rounded-lg">
+                    <MapPin className="h-6 w-6 text-sky-600" />
                  </div>
                  <div>
-                    <h3 className="text-gray-900 mb-1">{t("contact.info.address")}</h3>
-                    <p className="text-gray-600">
+                    <h3 className="text-gray-900 mb-1 dark:text-white">{t("contact.info.address")}</h3>
+                    <p className="text-gray-600 dark:text-white">
                      {t("contact.info.addressLine1")}<br />
                      {t("contact.info.addressLine2")}
                    </p>
@@ -125,12 +123,12 @@ export function Contact() {
                </div>

                <div className="flex items-start space-x-4">
-                  <div className="bg-orange-100 p-3 rounded-lg">
-                    <Clock className="h-6 w-6 text-orange-600" />
+                  <div className="bg-sky-100 p-3 rounded-lg">
+                    <Clock className="h-6 w-6 text-sky-600" />
                  </div>
                  <div>
-                    <h3 className="text-gray-900 mb-1">{t("contact.info.hours")}</h3>
-                    <p className="text-gray-600">
+                    <h3 className="text-gray-900 mb-1 dark:text-white">{t("contact.info.hours")}</h3>
+                    <p className="text-gray-600 dark:text-white">
                      {t("contact.info.hoursLine1")}<br />
                      {t("contact.info.hoursLine2")}<br />
                      {t("contact.info.hoursLine3")}
@@ -139,20 +137,17 @@ export function Contact() {
                </div>
              </div>

-              <div className="bg-orange-50 p-6 rounded-lg border border-orange-200">
-                <h3 className="text-gray-900 mb-2">{t("contact.emergency.title")}</h3>
-                <p className="text-gray-600 mb-3">
+              <div className="bg-sky-50 p-6 rounded-lg border border-sky-200 dark:bg-gray-800 dark:border-gray-700">
+                <h3 className="text-gray-900 mb-2 dark:text-white">{t("contact.emergency.title")}</h3>
+                <p className="text-gray-600 mb-3 dark:text-white">
                  {t("contact.emergency.subtitle")}
                </p>
-                <a href="tel:5559876543" className="text-xl text-orange-600 hover:text-orange-700">
-                  (555) 987-6543
-                </a>
              </div>
            </div>

            {/* Contact Form */}
-            <div className="lg:col-span-3 bg-gray-50 p-8 rounded-lg">
-              <h2 className="text-2xl mb-6 text-gray-900">
+            <div className="lg:col-span-3 bg-gray-50 p-8 rounded-lg dark:bg-gray-800">
+              <h2 className="text-2xl mb-6 text-gray-900 dark:text-white">
                {t("contact.form.title")}
              </h2>

@@ -172,7 +167,7 @@ export function Contact() {
                <form onSubmit={handleSubmit} className="space-y-6">
                  <div className="grid md:grid-cols-2 gap-6">
                    <div>
-                      <label htmlFor="name" className="block text-sm text-gray-700 mb-2">
+                      <label htmlFor="name" className="block text-sm text-gray-700 mb-2 dark:text-white">
                        {t("contact.form.fullName")} *
                      </label>
                      <input
@@ -182,13 +177,13 @@ export function Contact() {
                        required
                        value={formData.name}
                        onChange={handleChange}
-                        className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-orange-600 focus:ring-2 focus:ring-orange-200 outline-none transition-all"
+                        className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-sky-600 focus:ring-2 focus:ring-sky-200 outline-none transition-all dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-sky-500/30"
                        placeholder={t("contact.form.fullNamePlaceholder")}
                      />
                    </div>

                    <div>
-                      <label htmlFor="phone" className="block text-sm text-gray-700 mb-2">
+                      <label htmlFor="phone" className="block text-sm text-gray-700 mb-2 dark:text-white">
                        {t("contact.form.phone")} *
                      </label>
                      <input
@@ -198,14 +193,14 @@ export function Contact() {
                        required
                        value={formData.phone}
                        onChange={handleChange}
-                        className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-orange-600 focus:ring-2 focus:ring-orange-200 outline-none transition-all"
+                        className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-sky-600 focus:ring-2 focus:ring-sky-200 outline-none transition-all dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-sky-500/30"
                        placeholder={t("contact.form.phonePlaceholder")}
                      />
                    </div>
                  </div>

                  <div>
-                    <label htmlFor="email" className="block text-sm text-gray-700 mb-2">
+                    <label htmlFor="email" className="block text-sm text-gray-700 mb-2 dark:text-white">
                      {t("contact.form.email")} *
                    </label>
                    <input
@@ -215,13 +210,13 @@ export function Contact() {
                      required
                      value={formData.email}
                      onChange={handleChange}
-                      className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-orange-600 focus:ring-2 focus:ring-orange-200 outline-none transition-all"
+                      className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-sky-600 focus:ring-2 focus:ring-sky-200 outline-none transition-all dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-sky-500/30"
                      placeholder={t("contact.form.emailPlaceholder")}
                    />
                  </div>

                  <div>
-                    <label htmlFor="service" className="block text-sm text-gray-700 mb-2">
+                    <label htmlFor="service" className="block text-sm text-gray-700 mb-2 dark:text-white">
                      {t("contact.form.service")} *
                    </label>
                    <select
@@ -230,7 +225,7 @@ export function Contact() {
                      required
                      value={formData.service}
                      onChange={handleChange}
-                      className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-orange-600 focus:ring-2 focus:ring-orange-200 outline-none transition-all"
+                      className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-sky-600 focus:ring-2 focus:ring-sky-200 outline-none transition-all dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-sky-500/30"
                    >
                      <option value="">{t("contact.form.servicePlaceholder")}</option>
                      {services.map((service) => (
@@ -242,7 +237,7 @@ export function Contact() {
                  </div>

                  <div>
-                    <label htmlFor="message" className="block text-sm text-gray-700 mb-2">
+                    <label htmlFor="message" className="block text-sm text-gray-700 mb-2 dark:text-white">
                      {t("contact.form.details")} *
                    </label>
                    <textarea
@@ -252,20 +247,20 @@ export function Contact() {
                      value={formData.message}
                      onChange={handleChange}
                      rows={6}
-                      className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-orange-600 focus:ring-2 focus:ring-orange-200 outline-none transition-all resize-none"
+                      className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-sky-600 focus:ring-2 focus:ring-sky-200 outline-none transition-all resize-none dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-sky-500/30"
                      placeholder={t("contact.form.detailsPlaceholder")}
                    />
                  </div>

                  <button
                    type="submit"
-                    className="w-full bg-orange-600 text-white px-8 py-4 rounded-lg hover:bg-orange-700 transition-colors flex items-center justify-center"
+                    className="w-full bg-sky-600 text-white px-8 py-4 rounded-lg hover:bg-sky-700 transition-colors flex items-center justify-center"
                  >
                    <Send className="mr-2 h-5 w-5" />
                    {t("contact.form.submit")}
                  </button>

-                  <p className="text-sm text-gray-600 text-center">
+                  <p className="text-sm text-gray-600 text-center dark:text-white">
                    {t("contact.form.disclaimer")}
                  </p>
                </form>
@@ -276,16 +271,14 @@ export function Contact() {
      </section>

      {/* Map Section */}
-      <section className="py-16 bg-gray-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <h2 className="text-3xl text-center mb-8 text-gray-900">
-            {t("contact.map.title")}
-          </h2>
-          <div className="bg-gray-300 rounded-lg overflow-hidden h-96 flex items-center justify-center">
-            <p className="text-gray-600">
-              {t("contact.map.placeholder")}
-            </p>
-          </div>
+      <section className="py-16 bg-gray-50 dark:bg-gray-800">
+        <h2 className="text-3xl text-center mb-8 text-gray-900 dark:text-white">
+          {t("contact.map.title")}
+        </h2>
+        <div className="bg-gray-300 rounded-lg overflow-hidden h-96 flex items-center justify-center dark:bg-gray-700">
+          <p className="text-gray-600 dark:text-white">
+            {t("contact.map.placeholder")}
+          </p>
        </div>
      </section>
    </div>
@@ -66,21 +66,19 @@ export function Gallery() {
      : projects.filter((project) => project.category === selectedCategory);

  return (
-    <div>
+    <div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
      {/* Hero Section */}
-      <section className="bg-gradient-to-br from-orange-50 to-orange-100 py-16">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <h1 className="text-4xl md:text-5xl mb-6 text-gray-900">
-            {t("gallery.hero.title")}
-          </h1>
-          <p className="text-xl text-gray-700 max-w-3xl mx-auto">
-            {t("gallery.hero.subtitle")}
-          </p>
-        </div>
+      <section className="bg-gradient-to-br from-sky-50 to-sky-100 py-16 dark:from-gray-900 dark:to-gray-800">
+        <h1 className="text-4xl md:text-5xl mb-6 text-gray-900 dark:text-white text-center">
+          {t("gallery.hero.title")}
+        </h1>
+        <p className="text-xl text-gray-700 max-w-3xl mx-auto dark:text-gray-300">
+          {t("gallery.hero.subtitle")}
+        </p>
      </section>

      {/* Filter Section */}
-      <section className="py-8 bg-white border-b border-gray-200">
+      <section className="py-8 bg-white border-b border-gray-200 dark:bg-gray-900 dark:border-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-wrap gap-3 justify-center">
            {categories.map((category) => (
@@ -89,8 +87,8 @@ export function Gallery() {
                onClick={() => setSelectedCategory(category.key)}
                className={`px-6 py-2 rounded-full transition-colors ${
                  selectedCategory === category.key
-                    ? "bg-orange-600 text-white"
-                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                    ? "bg-sky-600 text-white"
+                    : "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
                }`}
              >
                {category.label}
@@ -101,13 +99,13 @@ export function Gallery() {
      </section>

      {/* Gallery Grid */}
-      <section className="py-16 bg-white">
+      <section className="py-16 bg-white dark:bg-gray-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {filteredProjects.map((project, index) => (
              <div
                key={index}
-                className="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-shadow cursor-pointer"
+                className="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-shadow cursor-pointer dark:shadow-black/40"
              >
                <ImageWithFallback
                  src={project.image}
@@ -116,7 +114,7 @@ export function Gallery() {
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  <div className="absolute bottom-0 left-0 right-0 p-6 text-white">
-                    <div className="inline-block bg-orange-600 px-3 py-1 rounded-full text-sm mb-2">
+                    <div className="inline-block bg-sky-600 px-3 py-1 rounded-full text-sm mb-2">
                      {
                        categories.find((c) => c.key === project.category)
                          ?.label
@@ -132,7 +130,7 @@ export function Gallery() {

          {filteredProjects.length === 0 && (
            <div className="text-center py-12">
-              <p className="text-xl text-gray-600">
+              <p className="text-xl text-gray-600 dark:text-gray-300">
                {t("gallery.empty")}
              </p>
            </div>
@@ -55,30 +55,30 @@ export function Home() {
  ];

  return (
-    <div>
-      {/* Hero Section */}
-      <section className="relative bg-gradient-to-br from-orange-50 to-orange-100 overflow-hidden">
+    <div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+      {/* Hero */}
+      <section className="relative bg-gradient-to-br from-sky-50 to-sky-100 overflow-hidden dark:from-gray-900 dark:to-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-28">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
-              <h1 className="text-4xl md:text-5xl lg:text-6xl mb-6 text-gray-900">
+              <h1 className="text-4xl md:text-5xl lg:text-6xl mb-6 text-gray-900 dark:text-white">
                {t("home.hero.title")}
-                <span className="text-orange-600"> {t("home.hero.titleHighlight")}</span>
+                <span className="text-sky-600"> {t("home.hero.titleHighlight")}</span>
              </h1>
-              <p className="text-xl text-gray-700 mb-8">
+              <p className="text-xl text-gray-700 mb-8 dark:text-gray-300">
                {t("home.hero.subtitle")}
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Link
                  to="/contact"
-                  className="inline-flex items-center justify-center bg-orange-600 text-white px-8 py-4 rounded-lg hover:bg-orange-700 transition-colors"
+                  className="inline-flex items-center justify-center bg-sky-600 text-white px-8 py-4 rounded-lg hover:bg-sky-700 transition-colors"
                >
                  {t("home.hero.ctaPrimary")}
                  <ArrowRight className="ml-2 h-5 w-5" />
                </Link>
                <a
                  href="tel:5551234567"
-                  className="inline-flex items-center justify-center bg-white text-orange-600 px-8 py-4 rounded-lg border-2 border-orange-600 hover:bg-orange-50 transition-colors"
+                  className="inline-flex items-center justify-center bg-white text-sky-600 px-8 py-4 rounded-lg border-2 border-sky-600 hover:bg-sky-50 transition-colors dark:bg-gray-900 dark:text-sky-400 dark:border-sky-500 dark:hover:bg-gray-800"
                >
                  <Phone className="mr-2 h-5 w-5" />
                  {t("home.hero.ctaSecondary")}
@@ -96,14 +96,13 @@ export function Home() {
        </div>
      </section>

-      {/* Features Section */}
-      <section className="py-16 bg-white">
+      <section className="py-16 bg-white dark:bg-gray-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
            {features.map((feature, index) => (
              <div key={index} className="flex items-center space-x-3">
-                <CheckCircle className="h-6 w-6 text-orange-600 flex-shrink-0" />
-                <span className="text-gray-700">{feature}</span>
+                <CheckCircle className="h-6 w-6 text-sky-600 flex-shrink-0" />
+                <span className="text-gray-700 dark:text-gray-300">{feature}</span>
              </div>
            ))}
          </div>
@@ -111,13 +110,13 @@ export function Home() {
      </section>

      {/* Services Section */}
-      <section className="py-16 bg-gray-50">
+      <section className="py-16 bg-gray-50 dark:bg-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
-            <h2 className="text-3xl md:text-4xl mb-4 text-gray-900">
+            <h2 className="text-3xl md:text-4xl mb-4 text-gray-900 dark:text-white">
              {t("home.services.title")}
            </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto dark:text-gray-300">
              {t("home.services.subtitle")}
            </p>
          </div>
@@ -125,7 +124,7 @@ export function Home() {
            {services.map((service, index) => (
              <div
                key={index}
-                className="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow"
+                className="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow dark:bg-gray-900 dark:border dark:border-gray-800"
              >
                <ImageWithFallback
                  src={service.image}
@@ -134,10 +133,10 @@ export function Home() {
                />
                <div className="p-6">
                  <h3 className="text-xl mb-2 text-gray-900">{service.title}</h3>
-                  <p className="text-gray-600 mb-4">{service.description}</p>
+                  <p className="text-gray-600 mb-4 dark:text-gray-300">{service.description}</p>
                  <Link
                    to="/services"
-                    className="inline-flex items-center text-orange-600 hover:text-orange-700"
+                    className="inline-flex items-center text-sky-600 hover:text-sky-700"
                  >
                    {t("home.services.learnMore")}
                    <ArrowRight className="ml-2 h-4 w-4" />
@@ -149,7 +148,7 @@ export function Home() {
          <div className="text-center mt-12">
            <Link
              to="/services"
-              className="inline-flex items-center bg-orange-600 text-white px-8 py-3 rounded-lg hover:bg-orange-700 transition-colors"
+              className="inline-flex items-center bg-sky-600 text-white px-8 py-3 rounded-lg hover:bg-sky-700 transition-colors"
            >
              {t("home.services.viewAll")}
              <ArrowRight className="ml-2 h-5 w-5" />
@@ -159,7 +158,7 @@ export function Home() {
      </section>

      {/* About Preview Section */}
-      <section className="py-16 bg-white">
+      <section className="py-16 bg-white dark:bg-gray-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <ImageWithFallback
@@ -168,42 +167,42 @@ export function Home() {
              className="rounded-lg shadow-lg w-full"
            />
            <div>
-              <h2 className="text-3xl md:text-4xl mb-6 text-gray-900">
+              <h2 className="text-3xl md:text-4xl mb-6 text-gray-900 dark:text-white">
                {t("home.about.title")}
              </h2>
-              <p className="text-lg text-gray-600 mb-6">
+              <p className="text-lg text-gray-600 mb-6 dark:text-gray-300">
                {t("home.about.subtitle")}
              </p>
              <ul className="space-y-4 mb-8">
                <li className="flex items-start space-x-3">
-                  <CheckCircle className="h-6 w-6 text-orange-600 flex-shrink-0 mt-0.5" />
+                  <CheckCircle className="h-6 w-6 text-sky-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <span className="text-gray-900">
                      {t("home.about.points.experienced.title")}
                    </span>
-                    <p className="text-gray-600">
+                    <p className="text-gray-600 dark:text-gray-300">
                      {t("home.about.points.experienced.text")}
                    </p>
                  </div>
                </li>
                <li className="flex items-start space-x-3">
-                  <CheckCircle className="h-6 w-6 text-orange-600 flex-shrink-0 mt-0.5" />
+                  <CheckCircle className="h-6 w-6 text-sky-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <span className="text-gray-900">
                      {t("home.about.points.pricing.title")}
                    </span>
-                    <p className="text-gray-600">
+                    <p className="text-gray-600 dark:text-gray-300">
                      {t("home.about.points.pricing.text")}
                    </p>
                  </div>
                </li>
                <li className="flex items-start space-x-3">
-                  <CheckCircle className="h-6 w-6 text-orange-600 flex-shrink-0 mt-0.5" />
+                  <CheckCircle className="h-6 w-6 text-sky-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <span className="text-gray-900">
                      {t("home.about.points.guarantee.title")}
                    </span>
-                    <p className="text-gray-600">
+                    <p className="text-gray-600 dark:text-gray-300">
                      {t("home.about.points.guarantee.text")}
                    </p>
                  </div>
@@ -211,7 +210,7 @@ export function Home() {
              </ul>
              <Link
                to="/about"
-                className="inline-flex items-center text-orange-600 hover:text-orange-700 text-lg"
+                className="inline-flex items-center text-sky-600 hover:text-sky-700 text-lg"
              >
                {t("home.about.learnMore")}
                <ArrowRight className="ml-2 h-5 w-5" />
@@ -222,25 +221,25 @@ export function Home() {
      </section>

      {/* Testimonials Section */}
-      <section className="py-16 bg-gray-50">
+      <section className="py-16 bg-gray-50 dark:bg-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
-            <h2 className="text-3xl md:text-4xl mb-4 text-gray-900">
+            <h2 className="text-3xl md:text-4xl mb-4 text-gray-900 dark:text-white">
              {t("home.testimonials.title")}
            </h2>
-            <p className="text-xl text-gray-600">
+            <p className="text-xl text-gray-600 dark:text-gray-300">
              {t("home.testimonials.subtitle")}
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {testimonials.map((testimonial, index) => (
-              <div key={index} className="bg-white rounded-lg p-6 shadow-lg">
+              <div key={index} className="bg-white rounded-lg p-6 shadow-lg dark:bg-gray-900 dark:border dark:border-gray-800">
                <div className="flex mb-4">
                  {[...Array(testimonial.rating)].map((_, i) => (
                    <Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
                  ))}
                </div>
-                <p className="text-gray-700 mb-4">"{testimonial.text}"</p>
+                <p className="text-gray-700 mb-4 dark:text-gray-300">"{testimonial.text}"</p>
                <p className="text-gray-900">- {testimonial.name}</p>
              </div>
            ))}
@@ -249,25 +248,25 @@ export function Home() {
      </section>

      {/* CTA Section */}
-      <section className="py-16 bg-orange-600">
+      <section className="py-16 bg-sky-600 dark:bg-sky-700">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl md:text-4xl mb-6 text-white">
            {t("home.cta.title")}
          </h2>
-          <p className="text-xl text-orange-100 mb-8">
+          <p className="text-xl text-sky-100 mb-8 dark:text-sky-100/90">
            {t("home.cta.subtitle")}
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              to="/contact"
-              className="inline-flex items-center justify-center bg-white text-orange-600 px-8 py-4 rounded-lg hover:bg-gray-100 transition-colors"
+              className="inline-flex items-center justify-center bg-white text-sky-600 px-8 py-4 rounded-lg hover:bg-gray-100 transition-colors"
            >
              {t("home.cta.primary")}
              <ArrowRight className="ml-2 h-5 w-5" />
            </Link>
            <a
              href="tel:5551234567"
-              className="inline-flex items-center justify-center bg-orange-700 text-white px-8 py-4 rounded-lg hover:bg-orange-800 transition-colors"
+              className="inline-flex items-center justify-center bg-sky-700 text-white px-8 py-4 rounded-lg hover:bg-sky-800 transition-colors dark:bg-sky-800 dark:hover:bg-sky-900"
            >
              <Phone className="mr-2 h-5 w-5" />
              {t("home.cta.secondary")}
@@ -120,21 +120,19 @@ export function Services() {
  ];

  return (
-    <div>
+    <div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
      {/* Hero Section */}
-      <section className="bg-gradient-to-br from-orange-50 to-orange-100 py-16">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <h1 className="text-4xl md:text-5xl mb-6 text-gray-900">
-            {t("services.hero.title")}
-          </h1>
-          <p className="text-xl text-gray-700 max-w-3xl mx-auto">
-            {t("services.hero.subtitle")}
-          </p>
-        </div>
+      <section className="bg-gradient-to-br from-sky-50 to-sky-100 py-16 dark:from-gray-900 dark:to-gray-800">
+        <h1 className="text-4xl md:text-5xl mb-6 text-gray-900 dark:text-white text-center">
+          {t("services.hero.title")}
+        </h1>
+        <p className="text-xl text-gray-700 max-w-3xl mx-auto dark:text-gray-300">
+          {t("services.hero.subtitle")}
+        </p>
      </section>

      {/* Services Grid */}
-      <section className="py-16 bg-white">
+      <section className="py-16 bg-white dark:bg-gray-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {services.map((service, index) => {
@@ -142,18 +140,22 @@ export function Services() {
              return (
                <div
                  key={index}
-                  className="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-xl transition-shadow"
+                  className="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-xl transition-shadow dark:bg-gray-900 dark:border-gray-800"
                >
-                  <div className="bg-orange-100 w-14 h-14 rounded-lg flex items-center justify-center mb-4">
-                    <Icon className="h-7 w-7 text-orange-600" />
+                  <div className="bg-sky-100 w-14 h-14 rounded-lg flex items-center justify-center mb-4">
+                    <Icon className="h-7 w-7 text-sky-600" />
                  </div>
                  <h3 className="text-xl mb-3 text-gray-900">{service.title}</h3>
-                  <p className="text-gray-600 mb-4">{service.description}</p>
+                  <p className="text-gray-600 mb-4 dark:text-gray-300">
+                    {service.description}
+                  </p>
                  <ul className="space-y-2">
                    {service.items.map((item, itemIndex) => (
                      <li key={itemIndex} className="flex items-start space-x-2">
-                        <CheckCircle className="h-5 w-5 text-orange-600 flex-shrink-0 mt-0.5" />
-                        <span className="text-gray-700">{item}</span>
+                        <CheckCircle className="h-5 w-5 text-sky-600 flex-shrink-0 mt-0.5" />
+                        <span className="text-gray-700 dark:text-gray-300">
+                          {item}
+                        </span>
                      </li>
                    ))}
                  </ul>
@@ -165,24 +167,28 @@ export function Services() {
      </section>

      {/* Process Section */}
-      <section className="py-16 bg-gray-50">
+      <section className="py-16 bg-gray-50 dark:bg-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
-            <h2 className="text-3xl md:text-4xl mb-4 text-gray-900">
+            <h2 className="text-3xl md:text-4xl mb-4 text-gray-900 dark:text-white">
              {t("services.process.title")}
            </h2>
-            <p className="text-xl text-gray-600">
+            <p className="text-xl text-gray-600 dark:text-gray-300">
              {t("services.process.subtitle")}
            </p>
          </div>
          <div className="grid md:grid-cols-4 gap-8">
            {process.map((step, index) => (
              <div key={index} className="text-center">
-                <div className="bg-orange-600 text-white w-16 h-16 rounded-full flex items-center justify-center text-2xl mx-auto mb-4">
+                <div className="bg-sky-600 text-white w-16 h-16 rounded-full flex items-center justify-center text-2xl mx-auto mb-4">
                  {step.step}
                </div>
-                <h3 className="text-xl mb-2 text-gray-900">{step.title}</h3>
-                <p className="text-gray-600">{step.description}</p>
+                <h3 className="text-xl mb-2 text-gray-900 dark:text-white">
+                  {step.title}
+                </h3>
+                <p className="text-gray-600 dark:text-gray-300">
+                  {step.description}
+                </p>
              </div>
            ))}
          </div>
@@ -190,17 +196,17 @@ export function Services() {
      </section>

      {/* CTA Section */}
-      <section className="py-16 bg-orange-600">
+      <section className="py-16 bg-sky-600 dark:bg-sky-700">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl md:text-4xl mb-6 text-white">
            {t("services.cta.title")}
          </h2>
-          <p className="text-xl text-orange-100 mb-8">
+          <p className="text-xl text-sky-100 mb-8 dark:text-sky-100/90">
            {t("services.cta.subtitle")}
          </p>
          <Link
            to="/contact"
-            className="inline-flex items-center bg-white text-orange-600 px-8 py-4 rounded-lg hover:bg-gray-100 transition-colors"
+            className="inline-flex items-center bg-white text-sky-600 px-8 py-4 rounded-lg hover:bg-gray-100 transition-colors"
          >
            {t("services.cta.button")}
            <ArrowRight className="ml-2 h-5 w-5" />
@@ -0,0 +1,3 @@
+module.exports = {
+  darkMode: "class",
+};