dadobos/handyman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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.
This commit is contained in:
Dan Dobos
2026-02-23 13:51:44 +01:00
parent 8954081593
commit e8d0f5b087
16 changed files with 471 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/Footer.tsx
+27 -25
View File
@@ -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>
src/app/components/Header.tsx
+16 -11
View File
@@ -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>
src/app/components/LanguageSwitcher.tsx
+1 -1
View File
@@ -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>
src/app/components/ThemeToggle.tsx
+17
View File
@@ -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>
);
}