From 3ff54588ba09587d6bcac9b6b8952073f10ef7f9 Mon Sep 17 00:00:00 2001 From: Rahaf Date: Tue, 23 Dec 2025 22:00:31 +0300 Subject: [PATCH] Added ThemeToggle Added Footer --- src/App.css | 26 ++++++++ src/App.jsx | 28 +++++---- src/Components/Nav/Footer.jsx | 13 ++++ src/Components/Nav/Navbar.jsx | 46 ++++++++++++++ src/index.css | 109 ++++++++++++++++++++-------------- tailwind.config.js | 38 +++++++++++- 6 files changed, 203 insertions(+), 57 deletions(-) create mode 100644 src/Components/Nav/Footer.jsx diff --git a/src/App.css b/src/App.css index e69de29..d3c26f5 100644 --- a/src/App.css +++ b/src/App.css @@ -0,0 +1,26 @@ +.App { + min-height: 100vh; + background-color: white; + color: #1e293b; + transition: background-color 0.3s ease, color 0.3s ease; +} + +.dark .App { + background-color: #0f172a; + color: #f1f5f9; +} + +:root { + --app-bg: white; + --app-text: #1e293b; +} + +.dark { + --app-bg: #0f172a; + --app-text: #f1f5f9; +} + +.App { + background-color: var(--app-bg); + color: var(--app-text); +} \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index e50166c..a09f073 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,26 +1,32 @@ import React from "react"; -import "./i18n"; // Import i18n configuration +import "./i18n"; import Navbar from "./Components/Nav/Navbar"; import Home from "./Components/Sections/Home/Home"; import Services from "./Components/Sections/Services/Services"; import About from "./Components/Sections/About/About"; import Contact from "./Components/Sections/Contact/Contact"; import ImagePreloader from "./Components/ImagePreloader"; +import Footer from "./Components/Nav/Footer"; import "./App.css"; -function App() { +const App = () => { + return ( -
- - - - - +
+
+ +
+ + + + +
+
+
); -} +}; -export default App; -//test +export default App; \ No newline at end of file diff --git a/src/Components/Nav/Footer.jsx b/src/Components/Nav/Footer.jsx new file mode 100644 index 0000000..73f3ae0 --- /dev/null +++ b/src/Components/Nav/Footer.jsx @@ -0,0 +1,13 @@ +import React from "react"; + +const Footer = () => ( +
+
+

+ © {new Date().getFullYear()} REXNT - جميع الحقوق محفوظة +

+
+
+); + +export default Footer; \ No newline at end of file diff --git a/src/Components/Nav/Navbar.jsx b/src/Components/Nav/Navbar.jsx index bb83d8d..cf1b222 100644 --- a/src/Components/Nav/Navbar.jsx +++ b/src/Components/Nav/Navbar.jsx @@ -8,11 +8,39 @@ const Navbar = () => { const { t, i18n } = useTranslation(); const [menuOpen, setMenuOpen] = useState(false); const [activeSection, setActiveSection] = useState("home"); + const [isDarkMode, setIsDarkMode] = useState(false); + + // Initialize dark mode + useEffect(() => { + const savedTheme = localStorage.getItem("theme"); + const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; + const shouldEnableDarkMode = savedTheme === "dark" || (!savedTheme && prefersDark); + + setIsDarkMode(shouldEnableDarkMode); + if (shouldEnableDarkMode) { + document.documentElement.classList.add("dark"); + } + }, []); const toggleMenu = () => { setMenuOpen(!menuOpen); }; + // Toggle dark/light mode + const toggleDarkMode = () => { + const newDarkMode = !isDarkMode; + setIsDarkMode(newDarkMode); + + if (newDarkMode) { + document.documentElement.classList.add("dark"); + localStorage.setItem("theme", "dark"); + } else { + document.documentElement.classList.remove("dark"); + localStorage.setItem("theme", "light"); + } + }; + + // Handle scroll to update active section useEffect(() => { const handleScroll = () => { @@ -72,6 +100,24 @@ const Navbar = () => { {/* الجانب الأيمن */}
+ + {/* Language Switcher */} diff --git a/src/index.css b/src/index.css index ee84d3e..21353ba 100644 --- a/src/index.css +++ b/src/index.css @@ -1,51 +1,70 @@ @tailwind base; @tailwind components; @tailwind utilities; -@import "flowbite/src/themes/default"; -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); -@plugin "flowbite/plugin"; -@source "../node_modules/flowbite"; -:root { - --primary-color: #F4F6FF; - --secondary-color: #F3C623; - --accent-color: #EB8317; - /* --dark-color: #10375C; */ - --dark-color: #111827; - --font-color: #D1D5DB; +@layer base { + :root { + --bg-color: #f8fafc; + --surface-color: #ffffff; + --text-color: #1e293b; + --border-color: #e2e8f0; + --primary-color: #275094; + --secondary-color: #3c3c3c; + } + .dark { + --bg-color: #0f172a; + --surface-color: #1e293b; + --text-color: #f1f5f9; + --border-color: #334155; + --primary-color: #1c3a6b; + --secondary-color: #2a2a2a; + } + body { + @apply bg-theme text-theme transition-colors duration-300; + font-family: system-ui, -apple-system, sans-serif; + } } - -/* Default font for all languages except Arabic */ - -* { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -} - - -/* Arabic font family when document direction is RTL */ - -@font-face { - font-family: 'Madani Arabic'; - src: url('./assets/fonts/Madani-Arabic-Regular.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'Madani Arabic'; - src: url('./assets/fonts/Madani-Arabic-Bold.ttf') format('truetype'); - font-weight: bold; - font-style: normal; -} - - -/* Arabic font override */ - -html[dir="rtl"] *, -html[lang="ar"] * { - font-family: 'Madani Arabic', Arial, sans-serif; -} - -html { - scroll-behavior: smooth; +@layer components { + .theme-container { + @apply bg-theme text-theme transition-colors duration-300; + } + .theme-surface { + @apply bg-surface border border-theme rounded-lg p-4 transition-colors duration-300; + } + .theme-card { + @apply bg-white dark: bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark: border-gray-700 transition-all duration-300 hover: shadow-xl; + } + .theme-btn-primary { + @apply bg-primary hover: bg-primary-light dark: bg-primary-dark dark: hover: bg-primary text-white font-medium py-3 px-6 rounded-lg transition-all duration-200 hover: scale-105 active: scale-95; + } + .theme-btn-secondary { + @apply bg-secondary hover: bg-secondary-light dark: bg-secondary-dark dark: hover: bg-secondary text-white font-medium py-3 px-6 rounded-lg transition-all duration-200 hover: scale-105 active: scale-95; + } + .theme-input { + @apply w-full px-4 py-3 bg-white dark: bg-gray-800 border border-gray-300 dark: border-gray-600 rounded-lg focus: ring-2 focus: ring-primary focus: border-transparent text-gray-900 dark: text-white placeholder-gray-500 dark: placeholder-gray-400 transition-colors duration-200; + } + .theme-nav { + @apply bg-white dark: bg-gray-800 shadow-md border-b border-gray-200 dark: border-gray-700 transition-colors duration-300; + } + .theme-nav-link { + @apply text-gray-700 dark: text-gray-300 hover: text-primary dark: hover: text-primary-light font-medium transition-colors duration-200 px-4 py-2; + } + .theme-section { + @apply py-12 md: py-16 lg: py-20 px-4 md: px-8 bg-white dark: bg-gray-900 transition-colors duration-300; + } + .theme-section-alt { + @apply py-12 md: py-16 lg: py-20 px-4 md: px-8 bg-gray-50 dark: bg-gray-800 transition-colors duration-300; + } + .theme-heading { + @apply text-3xl md: text-4xl lg: text-5xl font-bold text-gray-900 dark: text-white mb-6; + } + .theme-subheading { + @apply text-xl md: text-2xl text-gray-600 dark: text-gray-300 mb-8; + } + .theme-text { + @apply text-gray-700 dark: text-gray-300 leading-relaxed; + } + .theme-footer { + @apply bg-gray-800 dark: bg-gray-900 text-white py-8 border-t border-gray-700 dark: border-gray-800 transition-colors duration-300; + } } \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index c9f6a55..cbac0e8 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,8 +4,44 @@ export default { "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], + darkMode: 'class', theme: { - extend: {}, + extend: { + colors: { + primary: '#275094', + 'primary-light': '#3c6bc9', + 'primary-dark': '#1c3a6b', + + secondary: '#3c3c3c', + 'secondary-light': '#5a5a5a', + 'secondary-dark': '#2a2a2a', + + light: { + bg: '#f8fafc', + surface: '#ffffff', + text: '#1e293b', + border: '#e2e8f0', + accent: '#3b82f6', + }, + dark: { + bg: '#0f172a', + surface: '#1e293b', + text: '#f1f5f9', + border: '#334155', + accent: '#60a5fa', + }, + }, + backgroundColor: { + 'theme': 'var(--bg-color)', + 'surface': 'var(--surface-color)', + }, + textColor: { + 'theme': 'var(--text-color)', + }, + borderColor: { + 'theme': 'var(--border-color)', + }, + }, }, plugins: [], } \ No newline at end of file