Added Home page
This commit is contained in:
Rahaf
@ -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,
|
||||
|
||||
];
|
||||
|
||||
|
||||
@ -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) => (
|
||||
<motion.div
|
||||
key={`star-${star.id}`}
|
||||
className="absolute rounded-full bg-white"
|
||||
style={{
|
||||
left: `${star.x}%`,
|
||||
top: `${star.y}%`,
|
||||
width: star.size,
|
||||
height: star.size,
|
||||
opacity: star.opacity,
|
||||
}}
|
||||
animate={{
|
||||
opacity: [star.opacity, star.opacity * 0.3, star.opacity],
|
||||
y: star.y - (scrollProgress * 10),
|
||||
}}
|
||||
transition={{
|
||||
duration: star.duration,
|
||||
delay: star.delay,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
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) => (
|
||||
<div
|
||||
key={`bg-star-${star.id}`}
|
||||
className="absolute rounded-full bg-white"
|
||||
style={{
|
||||
left: `${star.x}%`,
|
||||
top: `${star.y}%`,
|
||||
width: star.size,
|
||||
height: star.size,
|
||||
opacity: star.opacity,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<Element name="home">
|
||||
<div className="relative h-screen w-full" dir="rtl">
|
||||
{/* الخلفية */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center z-0 transition-all duration-1000"
|
||||
style={{ backgroundImage: `url('${getBackgroundImage()}')` }}
|
||||
loading="eager"
|
||||
fetchPriority="high"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/50 z-10" />
|
||||
|
||||
{/* المحتوى */}
|
||||
<div className="relative z-20 flex flex-col items-center justify-center h-full w-full px-4 text-white text-center">
|
||||
<motion.div
|
||||
className="flex flex-col items-center justify-center gap-y-6 w-full max-w-screen-sm sm:max-w-2xl md:max-w-4xl"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{/* العنوان المتغير */}
|
||||
<motion.div
|
||||
className="relative flex items-center justify-between w-full px-2 sm:px-4"
|
||||
variants={itemVariants}
|
||||
>
|
||||
<motion.button
|
||||
onClick={prevPhrase}
|
||||
className="text-2xl sm:text-4xl p-1 sm:p-2 rounded bg-transparent text-[var(--primary-color)] hover:scale-110 transition-transform z-10"
|
||||
aria-label="السابق"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 32 32"
|
||||
strokeWidth={2}
|
||||
stroke="currentColor"
|
||||
className="w-8 h-8 sm:w-10 sm:h-10"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M11 6l10 10-10 10"
|
||||
/>
|
||||
</svg>
|
||||
</motion.button>
|
||||
|
||||
<div className="relative h-[120px] sm:h-[150px] w-full flex justify-center items-center px-2">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.span
|
||||
key={currentIndex}
|
||||
className="absolute text-xl sm:text-3xl md:text-5xl font-bold text-[var(--primary-color)] text-center px-2 max-w-full break-words"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
{phrases[currentIndex]}
|
||||
</motion.span>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
onClick={nextPhrase}
|
||||
className="text-2xl sm:text-4xl p-1 sm:p-2 rounded bg-transparent text-[var(--primary-color)] hover:scale-110 transition-transform z-10"
|
||||
aria-label="التالي"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 32 32"
|
||||
strokeWidth={2}
|
||||
stroke="currentColor"
|
||||
className="w-8 h-8 sm:w-10 sm:h-10"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M21 6L11 16l10 10"
|
||||
/>
|
||||
</svg>
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
|
||||
{/* وصف إضافي */}
|
||||
<motion.div className="w-full px-2 sm:px-4" variants={itemVariants}>
|
||||
<div className="text-sm sm:text-lg md:text-2xl text-white space-y-1">
|
||||
<p>{t("home.subtitle1")}</p>
|
||||
<p>{t("home.subtitle2")}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* زر تواصل معنا */}
|
||||
<motion.div
|
||||
className="w-full flex justify-center"
|
||||
variants={itemVariants}
|
||||
>
|
||||
<div className="relative">
|
||||
<motion.button
|
||||
onClick={() => 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 }}
|
||||
>
|
||||
<span className="absolute w-0 h-0 transition-all duration-500 ease-out bg-[rgba(10,25,70,0.9)] rounded-full group-hover:w-56 group-hover:h-56"></span>
|
||||
<span className="absolute bottom-0 left-0 h-full -ml-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-auto h-full opacity-100 object-stretch"
|
||||
viewBox="0 0 487 487"
|
||||
>
|
||||
<path
|
||||
fillOpacity=".1"
|
||||
fillRule="nonzero"
|
||||
fill="#FFF"
|
||||
d="M0 .3c67 2.1 134.1 4.3 186.3 37 52.2 32.7 89.6 95.8 112.8 150.6 23.2 54.8 32.3 101.4 61.2 149.9 28.9 48.4 77.7 98.8 126.4 149.2H0V.3z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span className="absolute top-0 right-0 w-12 h-full -mr-3">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="object-cover w-full h-full"
|
||||
viewBox="0 0 487 487"
|
||||
>
|
||||
<path
|
||||
fillOpacity=".1"
|
||||
fillRule="nonzero"
|
||||
fill="#FFF"
|
||||
d="M487 486.7c-66.1-3.6-132.3-7.3-186.3-37s-95.9-85.3-126.2-137.2c-30.4-51.8-49.3-99.9-76.5-151.4C70.9 109.6 35.6 54.8.3 0H487v486.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span className="absolute inset-0 w-full h-full -mt-1 rounded-lg opacity-30 bg-gradient-to-b from-transparent via-transparent to-gray-200"></span>
|
||||
<span className="relative text-base font-semibold">
|
||||
{t("home.contactUs")}
|
||||
</span>
|
||||
</motion.button>
|
||||
<AnimatePresence>
|
||||
{menuOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20, y: -10 }}
|
||||
animate={{ opacity: 1, x: 0, y: 10 }}
|
||||
exit={{ opacity: 0, x: 20, y: -10 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className={`absolute top-16 ${
|
||||
isMobile ? "right-0" : "sm:right-32"
|
||||
} bg-[rgba(10,25,70,0.9)] text-white rounded-lg shadow-lg py-5 px-5 z-40`}
|
||||
>
|
||||
<a
|
||||
href="https://wa.me/963965656631"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-3 text-sm py-2 px-3 rounded hover:bg-[rgba(235,131,23,0.3)] transition-colors"
|
||||
>
|
||||
<FaWhatsapp className="text-xl" />
|
||||
<span>963965656631</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://wa.me/963965656635"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-3 text-sm py-2 px-3 rounded hover:bg-[rgba(235,131,23,0.3)] transition-colors"
|
||||
>
|
||||
<FaWhatsapp className="text-xl" />
|
||||
<FaPhone className="text-xl" />
|
||||
<span>963965656635</span>
|
||||
</a>
|
||||
<a
|
||||
href="mailto:info@TPS-STATIONS.COM"
|
||||
className="flex items-center gap-3 text-sm py-2 px-3 rounded hover:bg-[rgba(235,131,23,0.3)] transition-colors"
|
||||
>
|
||||
<FaEnvelope className="text-xl" />
|
||||
<span>info@TPS-STATIONS.COM</span>
|
||||
</a>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
<Element name="home" ref={homeRef}>
|
||||
<div className="fixed inset-0 -z-10 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-[#080613] via-[#12143b] to-[#080613]">
|
||||
<StaticStars />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative min-h-screen w-full overflow-hidden" dir="rtl">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<AnimatedStars />
|
||||
|
||||
<motion.div
|
||||
className="absolute inset-0"
|
||||
animate={{
|
||||
background: [
|
||||
"radial-gradient(circle at 30% 50%, rgba(63, 68, 106, 0.2) 0%, transparent 50%)",
|
||||
"radial-gradient(circle at 70% 50%, rgba(54, 57, 163, 0.3) 0%, transparent 50%)",
|
||||
"radial-gradient(circle at 30% 50%, rgba(63, 68, 106, 0.2) 0%, transparent 50%)",
|
||||
],
|
||||
}}
|
||||
transition={{
|
||||
duration: 20,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<motion.div
|
||||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full"
|
||||
animate={{
|
||||
background: [
|
||||
"radial-gradient(circle, rgba(87, 97, 221, 0.15) 0%, transparent 70%)",
|
||||
"radial-gradient(circle, rgba(54, 57, 163, 0.2) 0%, transparent 70%)",
|
||||
"radial-gradient(circle, rgba(87, 97, 221, 0.15) 0%, transparent 70%)",
|
||||
],
|
||||
}}
|
||||
transition={{
|
||||
duration: 10,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 min-h-screen flex flex-col items-center justify-center px-4">
|
||||
<AnimatePresence>
|
||||
{showLogo && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50, scale: 0.9 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
transition={{
|
||||
duration: 1.2,
|
||||
type: "spring",
|
||||
damping: 20,
|
||||
}}
|
||||
className="relative mb-2"
|
||||
>
|
||||
<div className="relative">
|
||||
<motion.img
|
||||
src={companyLogo}
|
||||
alt="Company Logo"
|
||||
className="w-auto max-w-[280px] md:max-w-[400px] lg:max-w-[400px] h-auto"
|
||||
whileHover={{ scale: 1.03 }}
|
||||
transition={{ type: "spring", stiffness: 300 }}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute inset-0 -z-10 blur-2xl opacity-40"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #5761dd 0%, #3639a3 50%, #3f446a 100%)",
|
||||
}}
|
||||
animate={{
|
||||
scale: [1, 1.05, 1],
|
||||
opacity: [0.3, 0.5, 0.3],
|
||||
}}
|
||||
transition={{
|
||||
duration: 4,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<AnimatePresence>
|
||||
{showTagline && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{
|
||||
duration: 1,
|
||||
delay: 0.8,
|
||||
}}
|
||||
className="text-center max-w-4xl mx-auto"
|
||||
>
|
||||
<motion.div
|
||||
className="text-xl md:text-2xl lg:text-2xl font-bold text-white mb-4 leading-relaxed"
|
||||
animate={{
|
||||
opacity: [0.9, 1, 0.9],
|
||||
}}
|
||||
transition={{
|
||||
duration: 4,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse",
|
||||
}}
|
||||
>
|
||||
<h2 className="mb-4 text-2xl md:text-3xl">
|
||||
شريكك الهندسي والتقني الرائد
|
||||
</h2>
|
||||
<p className="mb-3">
|
||||
في تنفيذ وإدارة المشاريع الصناعية والسكنية والنفطية
|
||||
</p>
|
||||
<p>
|
||||
والمساهمة في تطوير البنية التحتية والقطاعات الإنتاجية
|
||||
<span className="block mt-3 text-xl md:text-2xl">
|
||||
عبر حلول حديثة ومستدامة
|
||||
</span>
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="w-48 h-1 mx-auto bg-gradient-to-r from-transparent via-[#5761dd] via-[#3639a3] to-transparent mt-6"
|
||||
animate={{
|
||||
scaleX: [0.5, 1, 0.5],
|
||||
}}
|
||||
transition={{
|
||||
duration: 3,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse",
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
background: `radial-gradient(circle at ${scrollProgress * 100}% ${50 + scrollProgress * 20}%, rgba(87, 97, 221, 0.1) 0%, transparent 50%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Element>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
export default Home;
|
||||
Reference in New Issue
Block a user