diff --git a/src/App.css b/src/App.css index d3c26f5..2b8c343 100644 --- a/src/App.css +++ b/src/App.css @@ -6,7 +6,7 @@ } .dark .App { - background-color: #0f172a; + background-color: #080613; color: #f1f5f9; } @@ -16,7 +16,7 @@ } .dark { - --app-bg: #0f172a; + --app-bg: #080613; --app-text: #f1f5f9; } diff --git a/src/Components/ImagePreloader.jsx b/src/Components/ImagePreloader.jsx index 9281dd2..2c6aadb 100644 --- a/src/Components/ImagePreloader.jsx +++ b/src/Components/ImagePreloader.jsx @@ -19,7 +19,7 @@ import { useState, useEffect } from "react"; // import home10 from "../assets/home10.jpg"; // Services images -import gasStation from "../assets/Images/gasstation.jpg"; +// import gasStation from "../assets/Images/gasstation.jpg"; // List all critical images that need to be preloaded @@ -42,7 +42,7 @@ const imagesToPreload = [ // home9, // home10, // Services images - gasStation, + // gasStation, ]; diff --git a/src/Components/Sections/Home/Home.jsx b/src/Components/Sections/Home/Home.jsx index 0d10785..aefd77a 100644 --- a/src/Components/Sections/Home/Home.jsx +++ b/src/Components/Sections/Home/Home.jsx @@ -1,279 +1,254 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useRef } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Element } from "react-scroll"; - -import { FaWhatsapp, FaPhone, FaEnvelope } from "react-icons/fa"; import { useTranslation } from "react-i18next"; import "../../../index.css"; +import companyLogo from "../../../assets/REXNT.png"; -const home1 = "https://i.imgur.com/g4fVyLj.jpg"; -const home1Mobile = "https://i.imgur.com/NNeCIAj.jpg"; - -const home2 = "https://i.imgur.com/d9enpvc.jpg"; -const home2Mobile = "https://i.imgur.com/a85P9Q8.jpg"; - -const home3 = "https://i.imgur.com/nWTJcjz.jpg"; - -const home4 = "https://i.imgur.com/btajXYO.jpg"; -const home4Mobile = "https://i.imgur.com/BZnHa4v.jpg"; - -const home6 = "https://i.imgur.com/gtwlzDA.jpg"; -const home6Mobile = "https://i.imgur.com/xs8OB15.jpg"; - -const home7 = "https://i.imgur.com/kSErZeJ.jpg"; -const home7Mobile = "https://i.imgur.com/02ftPiK.jpg"; - -const home8 = "https://i.imgur.com/0gsQF8L.jpg"; -const home8Mobile = "https://i.imgur.com/vey37dG.jpg"; - - -const containerVariants = { - hidden: { opacity: 0 }, - visible: { - opacity: 1, - transition: { staggerChildren: 0.3, when: "beforeChildren" }, - }, -}; - -const itemVariants = { - hidden: { opacity: 0, y: 20 }, - visible: { opacity: 1, y: 0, transition: { duration: 0.8 } }, -}; +const createStars = (count, config = {}) => + Array.from({ length: count }).map((_, i) => ({ + id: i, + x: Math.random() * 100, + y: Math.random() * 100, + size: Math.random() * (config.maxSize || 3) + (config.minSize || 1), + opacity: Math.random() * (config.maxOpacity || 0.8) + (config.minOpacity || 0.2), + duration: Math.random() * (config.maxDuration || 10) + (config.minDuration || 5), + delay: Math.random() * (config.maxDelay || 2), + })); const Home = () => { const { t } = useTranslation(); - const [currentIndex, setCurrentIndex] = useState(0); - const [menuOpen, setMenuOpen] = useState(false); - const [isMobile, setIsMobile] = useState(false); + const [showLogo, setShowLogo] = useState(false); + const [showTagline, setShowTagline] = useState(false); + const [scrollProgress, setScrollProgress] = useState(0); + const homeRef = useRef(null); - const phrases = t("home.phrases", { returnObjects: true }); + const stars = createStars(120); + const backgroundStars = createStars(80, { + minSize: 0.5, + maxSize: 2, + minOpacity: 0.1, + maxOpacity: 0.5, + }); useEffect(() => { - const updateSize = () => setIsMobile(window.innerWidth < 640); - updateSize(); - window.addEventListener("resize", updateSize); - return () => window.removeEventListener("resize", updateSize); + const logoTimeout = setTimeout(() => setShowLogo(true), 500); + const taglineTimeout = setTimeout(() => setShowTagline(true), 1500); + + const handleScroll = () => { + if (homeRef.current) { + const scrollPosition = window.scrollY; + const windowHeight = window.innerHeight; + const progress = Math.min(scrollPosition / (windowHeight * 0.2), 1); + setScrollProgress(progress); + } + }; + + window.addEventListener("scroll", handleScroll); + + return () => { + clearTimeout(logoTimeout); + clearTimeout(taglineTimeout); + window.removeEventListener("scroll", handleScroll); + }; }, []); - useEffect(() => { - const interval = setInterval(() => { - setCurrentIndex((prev) => (prev + 1) % phrases.length); - }, 4000); - return () => clearInterval(interval); - }, [phrases.length]); + const AnimatedStars = () => ( + <> + {stars.map((star) => ( + + ))} + + ); - const nextPhrase = () => { - setCurrentIndex((prev) => (prev + 1) % phrases.length); - }; - - const prevPhrase = () => { - setCurrentIndex((prev) => (prev - 1 + phrases.length) % phrases.length); - }; - - const getBackgroundImage = () => { - switch (currentIndex) { - case 0: - return isMobile ? home2Mobile : home2; - case 1: - return home3; - case 2: - return isMobile ? home4Mobile : home4; - case 3: - return isMobile ? home6Mobile : home6; - case 4: - return isMobile ? home8Mobile : home8; - case 5: - return isMobile ? home7Mobile : home7; - case 6: - return isMobile ? home1Mobile : home1; - default: - return ""; - } - }; + const StaticStars = () => ( + <> + {backgroundStars.map((star) => ( +
+ ))} + + ); return ( - -
- {/* الخلفية */} -
-
- - {/* المحتوى */} -
- - {/* العنوان المتغير */} - - - - - - - -
- - - {phrases[currentIndex]} - - -
- - - - - - - - - {/* وصف إضافي */} - -
-

{t("home.subtitle1")}

-

{t("home.subtitle2")}

-
- - - {/* زر تواصل معنا */} - -
- setMenuOpen((prev) => !prev)} - whileHover={{ scale: 1.05 }} - className="relative inline-flex items-center justify-center px-8 py-2.5 overflow-hidden tracking-tighter text-white bg-[#EB8317] rounded-md group" - style={{ zIndex: 30 }} - > - - - - - - - - - - - - - - {t("home.contactUs")} - - - - {menuOpen && ( - - - - 963965656631 - - - - - 963965656635 - - - - info@TPS-STATIONS.COM - - - )} - -
- - + +
+
+
+ +
+
+ + + +
+ +
+ +
+ +
+ + {showLogo && ( + +
+ + +
+ + )} + + + + {showTagline && ( + + +

+ شريكك الهندسي والتقني الرائد +

+

+ في تنفيذ وإدارة المشاريع الصناعية والسكنية والنفطية +

+

+ والمساهمة في تطوير البنية التحتية والقطاعات الإنتاجية + + عبر حلول حديثة ومستدامة + +

+ + + + + )} + +
+ + +
); }; -export default Home; +export default Home; \ No newline at end of file diff --git a/src/assets/Images/gasstation.jpg b/src/assets/Images/gasstation.jpg deleted file mode 100644 index 0e44a51..0000000 Binary files a/src/assets/Images/gasstation.jpg and /dev/null differ diff --git a/src/assets/REXNT.png b/src/assets/REXNT.png new file mode 100644 index 0000000..e44893f Binary files /dev/null and b/src/assets/REXNT.png differ diff --git a/src/assets/TPS-logo.png b/src/assets/TPS-logo.png deleted file mode 100644 index 27b03c1..0000000 Binary files a/src/assets/TPS-logo.png and /dev/null differ diff --git a/src/index.css b/src/index.css index 21353ba..eac21f6 100644 --- a/src/index.css +++ b/src/index.css @@ -3,68 +3,127 @@ @tailwind utilities; @layer base { :root { - --bg-color: #f8fafc; - --surface-color: #ffffff; + --bg-color: #ffffff; + --surface-color: #f8fafc; --text-color: #1e293b; --border-color: #e2e8f0; - --primary-color: #275094; + --primary-color: #5761dd; --secondary-color: #3c3c3c; + --accent-color: #3639a3; } .dark { - --bg-color: #0f172a; - --surface-color: #1e293b; + --bg-color: #080613; + --surface-color: #12143b; --text-color: #f1f5f9; - --border-color: #334155; - --primary-color: #1c3a6b; - --secondary-color: #2a2a2a; + --border-color: #3f446a; + --primary-color: #3639a3; + --secondary-color: #3f446a; + --accent-color: #5761dd; } body { @apply bg-theme text-theme transition-colors duration-300; font-family: system-ui, -apple-system, sans-serif; + background-color: var(--bg-color); + color: var(--text-color); } } @layer components { .theme-container { - @apply bg-theme text-theme transition-colors duration-300; + @apply transition-colors duration-300; + background-color: var(--bg-color); + color: var(--text-color); } .theme-surface { - @apply bg-surface border border-theme rounded-lg p-4 transition-colors duration-300; + @apply border rounded-lg p-4 transition-colors duration-300; + background-color: var(--surface-color); + border-color: var(--border-color); + color: var(--text-color); } .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; + @apply rounded-xl shadow-lg p-6 transition-all duration-300 hover: shadow-xl; + background-color: var(--surface-color); + border: 1px solid var(--border-color); } .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; + @apply font-medium py-3 px-6 rounded-lg transition-all duration-200 hover: scale-105 active: scale-95; + background-color: var(--primary-color); + color: white; + } + .theme-btn-primary:hover { + background-color: var(--accent-color); } .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; + @apply font-medium py-3 px-6 rounded-lg transition-all duration-200 hover: scale-105 active: scale-95; + background-color: var(--secondary-color); + color: white; } .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; + @apply w-full px-4 py-3 rounded-lg focus: ring-2 focus: border-transparent transition-colors duration-200; + background-color: var(--surface-color); + border: 1px solid var(--border-color); + color: var(--text-color); + } + .theme-input:focus { + border-color: var(--primary-color); + box-shadow: 0 0 0 2px rgba(87, 97, 221, 0.1); } .theme-nav { - @apply bg-white dark: bg-gray-800 shadow-md border-b border-gray-200 dark: border-gray-700 transition-colors duration-300; + @apply shadow-md border-b transition-colors duration-300; + background-color: var(--surface-color); + border-color: var(--border-color); } .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; + @apply font-medium transition-colors duration-200 px-4 py-2; + color: var(--text-color); + } + .theme-nav-link:hover { + color: var(--primary-color); } .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; + @apply py-12 md: py-16 lg: py-20 px-4 md: px-8 transition-colors duration-300; + background-color: var(--bg-color); } .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; + @apply py-12 md: py-16 lg: py-20 px-4 md: px-8 transition-colors duration-300; + background-color: var(--surface-color); } .theme-heading { - @apply text-3xl md: text-4xl lg: text-5xl font-bold text-gray-900 dark: text-white mb-6; + @apply text-3xl md: text-4xl lg: text-5xl font-bold mb-6; + color: var(--text-color); } .theme-subheading { - @apply text-xl md: text-2xl text-gray-600 dark: text-gray-300 mb-8; + @apply text-xl md: text-2xl mb-8; + color: var(--text-color); + opacity: 0.8; } .theme-text { - @apply text-gray-700 dark: text-gray-300 leading-relaxed; + @apply leading-relaxed; + color: var(--text-color); + opacity: 0.9; } .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; + @apply py-8 border-t transition-colors duration-300; + background-color: var(--surface-color); + border-color: var(--border-color); + color: var(--text-color); + } + .bg-theme { + background-color: var(--bg-color); + } + .text-theme { + color: var(--text-color); + } + .bg-surface { + background-color: var(--surface-color); + } + .border-theme { + border-color: var(--border-color); + } + .bg-primary { + background-color: var(--primary-color); + } + .bg-secondary { + background-color: var(--secondary-color); } } \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index cbac0e8..ab52806 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,4 +1,3 @@ -/** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", @@ -8,38 +7,23 @@ export default { theme: { 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', + theme: { + DEFAULT: 'var(--bg-color)', }, - dark: { - bg: '#0f172a', - surface: '#1e293b', - text: '#f1f5f9', - border: '#334155', - accent: '#60a5fa', + surface: { + DEFAULT: 'var(--surface-color)', + }, + border: { + theme: 'var(--border-color)', + }, + primary: { + light: '#5761dd', + DEFAULT: 'var(--primary-color)', + dark: '#3639a3', + }, + secondary: { + DEFAULT: 'var(--secondary-color)', }, - }, - backgroundColor: { - 'theme': 'var(--bg-color)', - 'surface': 'var(--surface-color)', - }, - textColor: { - 'theme': 'var(--text-color)', - }, - borderColor: { - 'theme': 'var(--border-color)', }, }, },