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
dist/assets/index-Bj-KDMGO.js
Vendored
-182
View File
File diff suppressed because one or more lines are too long
dist/assets/index-D0ECyUx1.js
Vendored
+190
View File
File diff suppressed because one or more lines are too long
dist/assets/index-CUodwQpv.css → dist/assets/index-eJB9Fk64.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/index.html
Vendored
+2 -2
View File
@@ -5,8 +5,8 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Handyman Service App Design</title> <title>Handyman Service App Design</title>
<script type="module" crossorigin src="/assets/index-Bj-KDMGO.js"></script> <script type="module" crossorigin src="/handyman/assets/index-D0ECyUx1.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CUodwQpv.css"> <link rel="stylesheet" crossorigin href="/handyman/assets/index-eJB9Fk64.css">
</head> </head>
<body> <body>
src/app/App.tsx
+6 -1
View File
@@ -1,6 +1,11 @@
import { RouterProvider } from "react-router"; import { RouterProvider } from "react-router";
import { router } from "./routes"; import { router } from "./routes";
import { ThemeProvider } from "./ThemeProvider";
export default function App() { export default function App() {
return <RouterProvider router={router} />; return (
<ThemeProvider>
<RouterProvider router={router} />
</ThemeProvider>
);
} }
src/app/ThemeProvider.tsx
+38
View File
@@ -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;
}
src/app/components/Footer.tsx
+27 -25
View File
@@ -6,28 +6,28 @@ export function Footer() {
const { t } = useTranslation(); const { t } = useTranslation();
return ( 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="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"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{/* Company Info */} {/* Company Info */}
<div> <div>
<div className="flex items-center space-x-2 mb-4"> <div className="flex items-center space-x-2 mb-4">
<Wrench className="h-8 w-8 text-orange-600" /> <Wrench className="h-8 w-8 text-sky-600" />
<span className="font-bold text-xl text-white"> <span className="font-bold text-xl text-white dark:text-white">
{t("footer.brand")} {t("footer.brand")}
</span> </span>
</div> </div>
<p className="text-sm mb-4"> <p className="text-sm mb-4 text-gray-300 dark:text-gray-400">
{t("footer.description")} {t("footer.description")}
</p> </p>
<div className="flex space-x-4"> <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" /> <Facebook className="h-5 w-5" />
</a> </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" /> <Instagram className="h-5 w-5" />
</a> </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" /> <Twitter className="h-5 w-5" />
</a> </a>
</div> </div>
@@ -35,32 +35,32 @@ export function Footer() {
{/* Quick Links */} {/* Quick Links */}
<div> <div>
<h3 className="text-white font-semibold mb-4"> <h3 className="text-white font-semibold mb-4 dark:text-gray-100">
{t("footer.quickLinks")} {t("footer.quickLinks")}
</h3> </h3>
<ul className="space-y-2"> <ul className="space-y-2">
<li> <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")} {t("footer.links.home")}
</Link> </Link>
</li> </li>
<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")} {t("footer.links.services")}
</Link> </Link>
</li> </li>
<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")} {t("footer.links.about")}
</Link> </Link>
</li> </li>
<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")} {t("footer.links.gallery")}
</Link> </Link>
</li> </li>
<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")} {t("footer.links.contact")}
</Link> </Link>
</li> </li>
@@ -69,7 +69,7 @@ export function Footer() {
{/* Services */} {/* Services */}
<div> <div>
<h3 className="text-white font-semibold mb-4"> <h3 className="text-white font-semibold mb-4 dark:text-gray-100">
{t("footer.ourServices")} {t("footer.ourServices")}
</h3> </h3>
<ul className="space-y-2 text-sm"> <ul className="space-y-2 text-sm">
@@ -84,46 +84,48 @@ export function Footer() {
{/* Contact Info */} {/* Contact Info */}
<div> <div>
<h3 className="text-white font-semibold mb-4"> <h3 className="text-white font-semibold mb-4 dark:text-gray-100">
{t("footer.contactInfo")} {t("footer.contactInfo")}
</h3> </h3>
<ul className="space-y-3"> <ul className="space-y-3">
<li className="flex items-start space-x-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> <div>
<p className="text-sm">{t("footer.callUs")}</p> <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> </div>
</li> </li>
<li className="flex items-start space-x-3"> <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> <div>
<p className="text-sm">{t("footer.emailUs")}</p> <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> </div>
</li> </li>
<li className="flex items-start space-x-3"> <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> <div>
<p className="text-sm">{t("footer.location")}</p> <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 123 Main Street<br />New York, NY 10001
</p> </p>
</div> </div>
</li> </li>
<li className="flex items-start space-x-3"> <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> <div>
<p className="text-sm">{t("footer.hours")}</p> <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> </div>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div className="border-t border-gray-800 mt-8 pt-8 text-center text-sm"> <div className="border-t border-gray-800 mt-8 pt-8 text-center text-sm dark:border-gray-900">
<p>{t("footer.copyright")}</p> <p className="text-gray-400 dark:text-gray-500">
{t("footer.copyright")}
</p>
</div> </div>
</div> </div>
</footer> </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 { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { LanguageSwitcher } from "./LanguageSwitcher"; import { LanguageSwitcher } from "./LanguageSwitcher";
import { ThemeToggle } from "./ThemeToggle";
export function Header() { export function Header() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -20,13 +21,13 @@ export function Header() {
const isActive = (path: string) => location.pathname === path; const isActive = (path: string) => location.pathname === path;
return ( 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16"> <div className="flex justify-between items-center h-16">
{/* Logo */} {/* Logo */}
<Link to="/" className="flex items-center space-x-2"> <Link to="/" className="flex items-center space-x-2">
<Wrench className="h-8 w-8 text-orange-600" /> <Wrench className="h-8 w-8 text-sky-600 dark:text-sky-400" />
<span className="font-bold text-xl text-gray-900"> <span className="font-bold text-xl text-gray-900 dark:text-white">
{t("header.brand")} {t("header.brand")}
</span> </span>
</Link> </Link>
@@ -39,20 +40,21 @@ export function Header() {
to={item.path} to={item.path}
className={`transition-colors ${ className={`transition-colors ${
isActive(item.path) isActive(item.path)
? "text-orange-600" ? "text-sky-600"
: "text-gray-700 hover:text-orange-600" : "text-white-700 hover:text-sky-600 dark:text-white-200 dark:hover:text-sky-400"
}`} }`}
> >
{item.name} {item.name}
</Link> </Link>
))} ))}
<LanguageSwitcher /> <LanguageSwitcher />
<ThemeToggle />
</nav> </nav>
{/* CTA Button */} {/* CTA Button */}
<Link <Link
to="/contact" 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")} {t("header.cta")}
</Link> </Link>
@@ -63,9 +65,9 @@ export function Header() {
onClick={() => setMobileMenuOpen(!mobileMenuOpen)} onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
> >
{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> </button>
</div> </div>
@@ -80,8 +82,8 @@ export function Header() {
onClick={() => setMobileMenuOpen(false)} onClick={() => setMobileMenuOpen(false)}
className={`block py-2 transition-colors ${ className={`block py-2 transition-colors ${
isActive(item.path) isActive(item.path)
? "text-orange-600" ? "text-sky-600"
: "text-gray-700 hover:text-orange-600" : "text-white-700 hover:text-sky-600"
}`} }`}
> >
{item.name} {item.name}
@@ -90,10 +92,13 @@ export function Header() {
<div className="mt-4"> <div className="mt-4">
<LanguageSwitcher /> <LanguageSwitcher />
</div> </div>
<div className="mt-4">
<ThemeToggle />
</div>
<Link <Link
to="/contact" to="/contact"
onClick={() => setMobileMenuOpen(false)} 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")} {t("header.cta")}
</Link> </Link>
src/app/components/LanguageSwitcher.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export function LanguageSwitcher() {
type="button" type="button"
onClick={() => setLang(other as "en" | "nl")} onClick={() => setLang(other as "en" | "nl")}
aria-label={t("header.language")} 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 />} {other === "en" ? <FlagGB /> : <FlagNL />}
</button> </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>
);
}
src/app/pages/About.tsx
+32 -32
View File
@@ -63,34 +63,34 @@ export function About() {
]; ];
return ( return (
<div> <div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
{/* Hero Section */} {/* 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"> <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")} {t("about.hero.title")}
</h1> </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")} {t("about.hero.subtitle")}
</p> </p>
</div> </div>
</section> </section>
{/* Story 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="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 className="grid lg:grid-cols-2 gap-12 items-center">
<div> <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")} {t("about.story.title")}
</h2> </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")} {t("about.story.p1")}
</p> </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")} {t("about.story.p2")}
</p> </p>
<p className="text-lg text-gray-700"> <p className="text-lg text-gray-700 dark:text-gray-300">
{t("about.story.p3")} {t("about.story.p3")}
</p> </p>
</div> </div>
@@ -104,7 +104,7 @@ export function About() {
</section> </section>
{/* Stats 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="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"> <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
{stats.map((stat, index) => ( {stats.map((stat, index) => (
@@ -112,7 +112,7 @@ export function About() {
<div className="text-4xl md:text-5xl text-white mb-2"> <div className="text-4xl md:text-5xl text-white mb-2">
{stat.value} {stat.value}
</div> </div>
<div className="text-orange-100">{stat.label}</div> <div className="text-sky-100">{stat.label}</div>
</div> </div>
))} ))}
</div> </div>
@@ -120,13 +120,13 @@ export function About() {
</section> </section>
{/* Values 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12"> <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")} {t("about.values.title")}
</h2> </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")} {t("about.values.subtitle")}
</p> </p>
</div> </div>
@@ -134,12 +134,12 @@ export function About() {
{values.map((value, index) => { {values.map((value, index) => {
const Icon = value.icon; const Icon = value.icon;
return ( return (
<div key={index} className="bg-white rounded-lg p-6 shadow-lg text-center"> <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-orange-100 w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-4"> <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-orange-600" /> <Icon className="h-7 w-7 text-sky-600" />
</div> </div>
<h3 className="text-xl mb-3 text-gray-900">{value.title}</h3> <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> </div>
); );
})} })}
@@ -148,25 +148,25 @@ export function About() {
</section> </section>
{/* Team 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12"> <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")} {t("about.team.title")}
</h2> </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")} {t("about.team.subtitle")}
</p> </p>
</div> </div>
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
{team.map((member, index) => ( {team.map((member, index) => (
<div key={index} className="bg-gray-50 rounded-lg p-6 text-center"> <div key={index} className="bg-gray-50 rounded-lg p-6 text-center dark:bg-gray-800">
<div className="bg-orange-100 w-24 h-24 rounded-full mx-auto mb-4 flex items-center justify-center"> <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-orange-600" /> <Users className="h-12 w-12 text-sky-600" />
</div> </div>
<h3 className="text-xl mb-1 text-gray-900">{member.name}</h3> <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-sky-600 mb-3">{member.role}</p>
<p className="text-gray-600">{member.description}</p> <p className="text-gray-600 dark:text-gray-300">{member.description}</p>
</div> </div>
))} ))}
</div> </div>
@@ -174,21 +174,21 @@ export function About() {
</section> </section>
{/* Certifications 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12"> <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")} {t("about.certifications.title")}
</h2> </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")} {t("about.certifications.subtitle")}
</p> </p>
</div> </div>
<div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto"> <div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
{certifications.map((cert, index) => ( {certifications.map((cert, index) => (
<div key={index} className="flex items-center space-x-3 bg-white p-4 rounded-lg"> <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-orange-600 flex-shrink-0" /> <CheckCircle className="h-6 w-6 text-sky-600 flex-shrink-0" />
<span className="text-gray-700">{cert}</span> <span className="text-gray-700 dark:text-gray-300">{cert}</span>
</div> </div>
))} ))}
</div> </div>
src/app/pages/Contact.tsx
+46 -53
View File
@@ -52,72 +52,70 @@ export function Contact() {
]; ];
return ( return (
<div> <div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
{/* Hero Section */} {/* 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 dark:text-white text-center">
<h1 className="text-4xl md:text-5xl mb-6 text-gray-900">
{t("contact.hero.title")} {t("contact.hero.title")}
</h1> </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-white">
{t("contact.hero.subtitle")} {t("contact.hero.subtitle")}
</p> </p>
</div>
</section> </section>
{/* Contact Info & Form 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-5 gap-12"> <div className="grid lg:grid-cols-5 gap-12">
{/* Contact Information */} {/* Contact Information */}
<div className="lg:col-span-2 space-y-8"> <div className="lg:col-span-2 space-y-8">
<div> <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")} {t("contact.info.title")}
</h2> </h2>
<p className="text-gray-600 mb-8"> <p className="text-gray-600 mb-8 dark:text-white">
{t("contact.info.subtitle")} {t("contact.info.subtitle")}
</p> </p>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-start space-x-4"> <div className="flex items-start space-x-4">
<div className="bg-orange-100 p-3 rounded-lg"> <div className="bg-sky-100 p-3 rounded-lg">
<Phone className="h-6 w-6 text-orange-600" /> <Phone className="h-6 w-6 text-sky-600" />
</div> </div>
<div> <div>
<h3 className="text-gray-900 mb-1">{t("contact.info.phone")}</h3> <h3 className="text-gray-900 mb-1 dark:text-white">{t("contact.info.phone")}</h3>
<a href="tel:5551234567" className="text-orange-600 hover:text-orange-700"> <a href="tel:5551234567" className="text-sky-600 hover:text-sky-700 dark:text-white dark:hover:text-white">
(555) 123-4567 (555) 123-4567
</a> </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")} {t("contact.info.phoneHours")}
</p> </p>
</div> </div>
</div> </div>
<div className="flex items-start space-x-4"> <div className="flex items-start space-x-4">
<div className="bg-orange-100 p-3 rounded-lg"> <div className="bg-sky-100 p-3 rounded-lg">
<Mail className="h-6 w-6 text-orange-600" /> <Mail className="h-6 w-6 text-sky-600" />
</div> </div>
<div> <div>
<h3 className="text-gray-900 mb-1">{t("contact.info.email")}</h3> <h3 className="text-gray-900 mb-1 dark:text-white">{t("contact.info.email")}</h3>
<a href="mailto:info@lucris.nl" className="text-orange-600 hover:text-orange-700"> <a href="mailto:info@lucris.nl" className="text-sky-600 hover:text-sky-700 dark:text-white dark:hover:text-white">
info@lucris.nl info@lucris.nl
</a> </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")} {t("contact.info.emailNote")}
</p> </p>
</div> </div>
</div> </div>
<div className="flex items-start space-x-4"> <div className="flex items-start space-x-4">
<div className="bg-orange-100 p-3 rounded-lg"> <div className="bg-sky-100 p-3 rounded-lg">
<MapPin className="h-6 w-6 text-orange-600" /> <MapPin className="h-6 w-6 text-sky-600" />
</div> </div>
<div> <div>
<h3 className="text-gray-900 mb-1">{t("contact.info.address")}</h3> <h3 className="text-gray-900 mb-1 dark:text-white">{t("contact.info.address")}</h3>
<p className="text-gray-600"> <p className="text-gray-600 dark:text-white">
{t("contact.info.addressLine1")}<br /> {t("contact.info.addressLine1")}<br />
{t("contact.info.addressLine2")} {t("contact.info.addressLine2")}
</p> </p>
@@ -125,12 +123,12 @@ export function Contact() {
</div> </div>
<div className="flex items-start space-x-4"> <div className="flex items-start space-x-4">
<div className="bg-orange-100 p-3 rounded-lg"> <div className="bg-sky-100 p-3 rounded-lg">
<Clock className="h-6 w-6 text-orange-600" /> <Clock className="h-6 w-6 text-sky-600" />
</div> </div>
<div> <div>
<h3 className="text-gray-900 mb-1">{t("contact.info.hours")}</h3> <h3 className="text-gray-900 mb-1 dark:text-white">{t("contact.info.hours")}</h3>
<p className="text-gray-600"> <p className="text-gray-600 dark:text-white">
{t("contact.info.hoursLine1")}<br /> {t("contact.info.hoursLine1")}<br />
{t("contact.info.hoursLine2")}<br /> {t("contact.info.hoursLine2")}<br />
{t("contact.info.hoursLine3")} {t("contact.info.hoursLine3")}
@@ -139,20 +137,17 @@ export function Contact() {
</div> </div>
</div> </div>
<div className="bg-orange-50 p-6 rounded-lg border border-orange-200"> <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">{t("contact.emergency.title")}</h3> <h3 className="text-gray-900 mb-2 dark:text-white">{t("contact.emergency.title")}</h3>
<p className="text-gray-600 mb-3"> <p className="text-gray-600 mb-3 dark:text-white">
{t("contact.emergency.subtitle")} {t("contact.emergency.subtitle")}
</p> </p>
<a href="tel:5559876543" className="text-xl text-orange-600 hover:text-orange-700">
(555) 987-6543
</a>
</div> </div>
</div> </div>
{/* Contact Form */} {/* Contact Form */}
<div className="lg:col-span-3 bg-gray-50 p-8 rounded-lg"> <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"> <h2 className="text-2xl mb-6 text-gray-900 dark:text-white">
{t("contact.form.title")} {t("contact.form.title")}
</h2> </h2>
@@ -172,7 +167,7 @@ export function Contact() {
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
<div className="grid md:grid-cols-2 gap-6"> <div className="grid md:grid-cols-2 gap-6">
<div> <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")} * {t("contact.form.fullName")} *
</label> </label>
<input <input
@@ -182,13 +177,13 @@ export function Contact() {
required required
value={formData.name} value={formData.name}
onChange={handleChange} 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")} placeholder={t("contact.form.fullNamePlaceholder")}
/> />
</div> </div>
<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")} * {t("contact.form.phone")} *
</label> </label>
<input <input
@@ -198,14 +193,14 @@ export function Contact() {
required required
value={formData.phone} value={formData.phone}
onChange={handleChange} 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")} placeholder={t("contact.form.phonePlaceholder")}
/> />
</div> </div>
</div> </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")} * {t("contact.form.email")} *
</label> </label>
<input <input
@@ -215,13 +210,13 @@ export function Contact() {
required required
value={formData.email} value={formData.email}
onChange={handleChange} 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")} placeholder={t("contact.form.emailPlaceholder")}
/> />
</div> </div>
<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")} * {t("contact.form.service")} *
</label> </label>
<select <select
@@ -230,7 +225,7 @@ export function Contact() {
required required
value={formData.service} value={formData.service}
onChange={handleChange} 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> <option value="">{t("contact.form.servicePlaceholder")}</option>
{services.map((service) => ( {services.map((service) => (
@@ -242,7 +237,7 @@ export function Contact() {
</div> </div>
<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")} * {t("contact.form.details")} *
</label> </label>
<textarea <textarea
@@ -252,20 +247,20 @@ export function Contact() {
value={formData.message} value={formData.message}
onChange={handleChange} onChange={handleChange}
rows={6} 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")} placeholder={t("contact.form.detailsPlaceholder")}
/> />
</div> </div>
<button <button
type="submit" 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" /> <Send className="mr-2 h-5 w-5" />
{t("contact.form.submit")} {t("contact.form.submit")}
</button> </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")} {t("contact.form.disclaimer")}
</p> </p>
</form> </form>
@@ -276,17 +271,15 @@ export function Contact() {
</section> </section>
{/* Map Section */} {/* Map 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"> <h2 className="text-3xl text-center mb-8 text-gray-900 dark:text-white">
<h2 className="text-3xl text-center mb-8 text-gray-900">
{t("contact.map.title")} {t("contact.map.title")}
</h2> </h2>
<div className="bg-gray-300 rounded-lg overflow-hidden h-96 flex items-center justify-center"> <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"> <p className="text-gray-600 dark:text-white">
{t("contact.map.placeholder")} {t("contact.map.placeholder")}
</p> </p>
</div> </div>
</div>
</section> </section>
</div> </div>
); );
src/app/pages/Gallery.tsx
+11 -13
View File
@@ -66,21 +66,19 @@ export function Gallery() {
: projects.filter((project) => project.category === selectedCategory); : projects.filter((project) => project.category === selectedCategory);
return ( return (
<div> <div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
{/* Hero Section */} {/* 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 dark:text-white text-center">
<h1 className="text-4xl md:text-5xl mb-6 text-gray-900">
{t("gallery.hero.title")} {t("gallery.hero.title")}
</h1> </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("gallery.hero.subtitle")} {t("gallery.hero.subtitle")}
</p> </p>
</div>
</section> </section>
{/* Filter 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex flex-wrap gap-3 justify-center"> <div className="flex flex-wrap gap-3 justify-center">
{categories.map((category) => ( {categories.map((category) => (
@@ -89,8 +87,8 @@ export function Gallery() {
onClick={() => setSelectedCategory(category.key)} onClick={() => setSelectedCategory(category.key)}
className={`px-6 py-2 rounded-full transition-colors ${ className={`px-6 py-2 rounded-full transition-colors ${
selectedCategory === category.key selectedCategory === category.key
? "bg-orange-600 text-white" ? "bg-sky-600 text-white"
: "bg-gray-100 text-gray-700 hover:bg-gray-200" : "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} {category.label}
@@ -101,13 +99,13 @@ export function Gallery() {
</section> </section>
{/* Gallery Grid */} {/* 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="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"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{filteredProjects.map((project, index) => ( {filteredProjects.map((project, index) => (
<div <div
key={index} 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 <ImageWithFallback
src={project.image} 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 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="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) categories.find((c) => c.key === project.category)
?.label ?.label
@@ -132,7 +130,7 @@ export function Gallery() {
{filteredProjects.length === 0 && ( {filteredProjects.length === 0 && (
<div className="text-center py-12"> <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")} {t("gallery.empty")}
</p> </p>
</div> </div>
src/app/pages/Home.tsx
+37 -38
View File
@@ -55,30 +55,30 @@ export function Home() {
]; ];
return ( return (
<div> <div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
{/* Hero Section */} {/* Hero */}
<section className="relative bg-gradient-to-br from-orange-50 to-orange-100 overflow-hidden"> <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="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 className="grid lg:grid-cols-2 gap-12 items-center">
<div> <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")} {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> </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")} {t("home.hero.subtitle")}
</p> </p>
<div className="flex flex-col sm:flex-row gap-4"> <div className="flex flex-col sm:flex-row gap-4">
<Link <Link
to="/contact" 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")} {t("home.hero.ctaPrimary")}
<ArrowRight className="ml-2 h-5 w-5" /> <ArrowRight className="ml-2 h-5 w-5" />
</Link> </Link>
<a <a
href="tel:5551234567" 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" /> <Phone className="mr-2 h-5 w-5" />
{t("home.hero.ctaSecondary")} {t("home.hero.ctaSecondary")}
@@ -96,14 +96,13 @@ export function Home() {
</div> </div>
</section> </section>
{/* Features Section */} <section className="py-16 bg-white dark:bg-gray-900">
<section className="py-16 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <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"> <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
{features.map((feature, index) => ( {features.map((feature, index) => (
<div key={index} className="flex items-center space-x-3"> <div key={index} className="flex items-center space-x-3">
<CheckCircle className="h-6 w-6 text-orange-600 flex-shrink-0" /> <CheckCircle className="h-6 w-6 text-sky-600 flex-shrink-0" />
<span className="text-gray-700">{feature}</span> <span className="text-gray-700 dark:text-gray-300">{feature}</span>
</div> </div>
))} ))}
</div> </div>
@@ -111,13 +110,13 @@ export function Home() {
</section> </section>
{/* Services 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12"> <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")} {t("home.services.title")}
</h2> </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")} {t("home.services.subtitle")}
</p> </p>
</div> </div>
@@ -125,7 +124,7 @@ export function Home() {
{services.map((service, index) => ( {services.map((service, index) => (
<div <div
key={index} 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 <ImageWithFallback
src={service.image} src={service.image}
@@ -134,10 +133,10 @@ export function Home() {
/> />
<div className="p-6"> <div className="p-6">
<h3 className="text-xl mb-2 text-gray-900">{service.title}</h3> <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 <Link
to="/services" 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")} {t("home.services.learnMore")}
<ArrowRight className="ml-2 h-4 w-4" /> <ArrowRight className="ml-2 h-4 w-4" />
@@ -149,7 +148,7 @@ export function Home() {
<div className="text-center mt-12"> <div className="text-center mt-12">
<Link <Link
to="/services" 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")} {t("home.services.viewAll")}
<ArrowRight className="ml-2 h-5 w-5" /> <ArrowRight className="ml-2 h-5 w-5" />
@@ -159,7 +158,7 @@ export function Home() {
</section> </section>
{/* About Preview 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="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 className="grid lg:grid-cols-2 gap-12 items-center">
<ImageWithFallback <ImageWithFallback
@@ -168,42 +167,42 @@ export function Home() {
className="rounded-lg shadow-lg w-full" className="rounded-lg shadow-lg w-full"
/> />
<div> <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")} {t("home.about.title")}
</h2> </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")} {t("home.about.subtitle")}
</p> </p>
<ul className="space-y-4 mb-8"> <ul className="space-y-4 mb-8">
<li className="flex items-start space-x-3"> <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> <div>
<span className="text-gray-900"> <span className="text-gray-900">
{t("home.about.points.experienced.title")} {t("home.about.points.experienced.title")}
</span> </span>
<p className="text-gray-600"> <p className="text-gray-600 dark:text-gray-300">
{t("home.about.points.experienced.text")} {t("home.about.points.experienced.text")}
</p> </p>
</div> </div>
</li> </li>
<li className="flex items-start space-x-3"> <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> <div>
<span className="text-gray-900"> <span className="text-gray-900">
{t("home.about.points.pricing.title")} {t("home.about.points.pricing.title")}
</span> </span>
<p className="text-gray-600"> <p className="text-gray-600 dark:text-gray-300">
{t("home.about.points.pricing.text")} {t("home.about.points.pricing.text")}
</p> </p>
</div> </div>
</li> </li>
<li className="flex items-start space-x-3"> <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> <div>
<span className="text-gray-900"> <span className="text-gray-900">
{t("home.about.points.guarantee.title")} {t("home.about.points.guarantee.title")}
</span> </span>
<p className="text-gray-600"> <p className="text-gray-600 dark:text-gray-300">
{t("home.about.points.guarantee.text")} {t("home.about.points.guarantee.text")}
</p> </p>
</div> </div>
@@ -211,7 +210,7 @@ export function Home() {
</ul> </ul>
<Link <Link
to="/about" 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")} {t("home.about.learnMore")}
<ArrowRight className="ml-2 h-5 w-5" /> <ArrowRight className="ml-2 h-5 w-5" />
@@ -222,25 +221,25 @@ export function Home() {
</section> </section>
{/* Testimonials 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12"> <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")} {t("home.testimonials.title")}
</h2> </h2>
<p className="text-xl text-gray-600"> <p className="text-xl text-gray-600 dark:text-gray-300">
{t("home.testimonials.subtitle")} {t("home.testimonials.subtitle")}
</p> </p>
</div> </div>
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
{testimonials.map((testimonial, index) => ( {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"> <div className="flex mb-4">
{[...Array(testimonial.rating)].map((_, i) => ( {[...Array(testimonial.rating)].map((_, i) => (
<Star key={i} className="h-5 w-5 text-yellow-400 fill-current" /> <Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
))} ))}
</div> </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> <p className="text-gray-900">- {testimonial.name}</p>
</div> </div>
))} ))}
@@ -249,25 +248,25 @@ export function Home() {
</section> </section>
{/* CTA 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"> <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"> <h2 className="text-3xl md:text-4xl mb-6 text-white">
{t("home.cta.title")} {t("home.cta.title")}
</h2> </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")} {t("home.cta.subtitle")}
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <div className="flex flex-col sm:flex-row gap-4 justify-center">
<Link <Link
to="/contact" 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")} {t("home.cta.primary")}
<ArrowRight className="ml-2 h-5 w-5" /> <ArrowRight className="ml-2 h-5 w-5" />
</Link> </Link>
<a <a
href="tel:5551234567" 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" /> <Phone className="mr-2 h-5 w-5" />
{t("home.cta.secondary")} {t("home.cta.secondary")}
src/app/pages/Services.tsx
+28 -22
View File
@@ -120,21 +120,19 @@ export function Services() {
]; ];
return ( return (
<div> <div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
{/* Hero Section */} {/* 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 dark:text-white text-center">
<h1 className="text-4xl md:text-5xl mb-6 text-gray-900">
{t("services.hero.title")} {t("services.hero.title")}
</h1> </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("services.hero.subtitle")} {t("services.hero.subtitle")}
</p> </p>
</div>
</section> </section>
{/* Services Grid */} {/* 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="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"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{services.map((service, index) => { {services.map((service, index) => {
@@ -142,18 +140,22 @@ export function Services() {
return ( return (
<div <div
key={index} 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"> <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-orange-600" /> <Icon className="h-7 w-7 text-sky-600" />
</div> </div>
<h3 className="text-xl mb-3 text-gray-900">{service.title}</h3> <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"> <ul className="space-y-2">
{service.items.map((item, itemIndex) => ( {service.items.map((item, itemIndex) => (
<li key={itemIndex} className="flex items-start space-x-2"> <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" /> <CheckCircle className="h-5 w-5 text-sky-600 flex-shrink-0 mt-0.5" />
<span className="text-gray-700">{item}</span> <span className="text-gray-700 dark:text-gray-300">
{item}
</span>
</li> </li>
))} ))}
</ul> </ul>
@@ -165,24 +167,28 @@ export function Services() {
</section> </section>
{/* Process 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12"> <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")} {t("services.process.title")}
</h2> </h2>
<p className="text-xl text-gray-600"> <p className="text-xl text-gray-600 dark:text-gray-300">
{t("services.process.subtitle")} {t("services.process.subtitle")}
</p> </p>
</div> </div>
<div className="grid md:grid-cols-4 gap-8"> <div className="grid md:grid-cols-4 gap-8">
{process.map((step, index) => ( {process.map((step, index) => (
<div key={index} className="text-center"> <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} {step.step}
</div> </div>
<h3 className="text-xl mb-2 text-gray-900">{step.title}</h3> <h3 className="text-xl mb-2 text-gray-900 dark:text-white">
<p className="text-gray-600">{step.description}</p> {step.title}
</h3>
<p className="text-gray-600 dark:text-gray-300">
{step.description}
</p>
</div> </div>
))} ))}
</div> </div>
@@ -190,17 +196,17 @@ export function Services() {
</section> </section>
{/* CTA 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"> <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"> <h2 className="text-3xl md:text-4xl mb-6 text-white">
{t("services.cta.title")} {t("services.cta.title")}
</h2> </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")} {t("services.cta.subtitle")}
</p> </p>
<Link <Link
to="/contact" 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")} {t("services.cta.button")}
<ArrowRight className="ml-2 h-5 w-5" /> <ArrowRight className="ml-2 h-5 w-5" />
tailwind.config.js
+3
View File
@@ -0,0 +1,3 @@
module.exports = {
darkMode: "class",
};