Compare commits
2 Commits
6420af403a
...
be4a941730
| Author | SHA1 | Date | |
|---|---|---|---|
| be4a941730 | |||
| ce5717b703 |
@ -6,7 +6,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dark .App {
|
.dark .App {
|
||||||
background-color: #0f172a;
|
background-color: #080613;
|
||||||
color: #f1f5f9;
|
color: #f1f5f9;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -16,7 +16,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
--app-bg: #0f172a;
|
--app-bg: #080613;
|
||||||
--app-text: #f1f5f9;
|
--app-text: #f1f5f9;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -19,7 +19,7 @@ import { useState, useEffect } from "react";
|
|||||||
// import home10 from "../assets/home10.jpg";
|
// import home10 from "../assets/home10.jpg";
|
||||||
|
|
||||||
// Services images
|
// 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
|
// List all critical images that need to be preloaded
|
||||||
@ -42,7 +42,7 @@ const imagesToPreload = [
|
|||||||
// home9,
|
// home9,
|
||||||
// home10,
|
// home10,
|
||||||
// Services images
|
// 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 { motion, AnimatePresence } from "framer-motion";
|
||||||
import { Element } from "react-scroll";
|
import { Element } from "react-scroll";
|
||||||
|
|
||||||
import { FaWhatsapp, FaPhone, FaEnvelope } from "react-icons/fa";
|
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import "../../../index.css";
|
import "../../../index.css";
|
||||||
|
|
||||||
|
import companyLogo from "../../../assets/REXNT.png";
|
||||||
|
|
||||||
const home1 = "https://i.imgur.com/g4fVyLj.jpg";
|
const createStars = (count, config = {}) =>
|
||||||
const home1Mobile = "https://i.imgur.com/NNeCIAj.jpg";
|
Array.from({ length: count }).map((_, i) => ({
|
||||||
|
id: i,
|
||||||
const home2 = "https://i.imgur.com/d9enpvc.jpg";
|
x: Math.random() * 100,
|
||||||
const home2Mobile = "https://i.imgur.com/a85P9Q8.jpg";
|
y: Math.random() * 100,
|
||||||
|
size: Math.random() * (config.maxSize || 3) + (config.minSize || 1),
|
||||||
const home3 = "https://i.imgur.com/nWTJcjz.jpg";
|
opacity: Math.random() * (config.maxOpacity || 0.8) + (config.minOpacity || 0.2),
|
||||||
|
duration: Math.random() * (config.maxDuration || 10) + (config.minDuration || 5),
|
||||||
const home4 = "https://i.imgur.com/btajXYO.jpg";
|
delay: Math.random() * (config.maxDelay || 2),
|
||||||
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 Home = () => {
|
const Home = () => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [currentIndex, setCurrentIndex] = useState(0);
|
const [showLogo, setShowLogo] = useState(false);
|
||||||
const [menuOpen, setMenuOpen] = useState(false);
|
const [showTagline, setShowTagline] = useState(false);
|
||||||
const [isMobile, setIsMobile] = 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(() => {
|
useEffect(() => {
|
||||||
const updateSize = () => setIsMobile(window.innerWidth < 640);
|
const logoTimeout = setTimeout(() => setShowLogo(true), 500);
|
||||||
updateSize();
|
const taglineTimeout = setTimeout(() => setShowTagline(true), 1500);
|
||||||
window.addEventListener("resize", updateSize);
|
|
||||||
return () => window.removeEventListener("resize", updateSize);
|
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 AnimatedStars = () => (
|
||||||
const interval = setInterval(() => {
|
<>
|
||||||
setCurrentIndex((prev) => (prev + 1) % phrases.length);
|
{stars.map((star) => (
|
||||||
}, 4000);
|
<motion.div
|
||||||
return () => clearInterval(interval);
|
key={`star-${star.id}`}
|
||||||
}, [phrases.length]);
|
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 = () => {
|
const StaticStars = () => (
|
||||||
setCurrentIndex((prev) => (prev + 1) % phrases.length);
|
<>
|
||||||
};
|
{backgroundStars.map((star) => (
|
||||||
|
<div
|
||||||
const prevPhrase = () => {
|
key={`bg-star-${star.id}`}
|
||||||
setCurrentIndex((prev) => (prev - 1 + phrases.length) % phrases.length);
|
className="absolute rounded-full bg-white"
|
||||||
};
|
style={{
|
||||||
|
left: `${star.x}%`,
|
||||||
const getBackgroundImage = () => {
|
top: `${star.y}%`,
|
||||||
switch (currentIndex) {
|
width: star.size,
|
||||||
case 0:
|
height: star.size,
|
||||||
return isMobile ? home2Mobile : home2;
|
opacity: star.opacity,
|
||||||
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 "";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Element name="home">
|
<Element name="home" ref={homeRef}>
|
||||||
<div className="relative h-screen w-full" dir="rtl">
|
<div className="fixed inset-0 -z-10 overflow-hidden">
|
||||||
{/* الخلفية */}
|
<div className="absolute inset-0 bg-gradient-to-b from-[#080613] via-[#12143b] to-[#080613]">
|
||||||
<div
|
<StaticStars />
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</Element>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Home;
|
export default Home;
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
BIN
src/assets/REXNT.png
Normal file
BIN
src/assets/REXNT.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB |
103
src/index.css
103
src/index.css
@ -3,68 +3,127 @@
|
|||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
--bg-color: #f8fafc;
|
--bg-color: #ffffff;
|
||||||
--surface-color: #ffffff;
|
--surface-color: #f8fafc;
|
||||||
--text-color: #1e293b;
|
--text-color: #1e293b;
|
||||||
--border-color: #e2e8f0;
|
--border-color: #e2e8f0;
|
||||||
--primary-color: #275094;
|
--primary-color: #5761dd;
|
||||||
--secondary-color: #3c3c3c;
|
--secondary-color: #3c3c3c;
|
||||||
|
--accent-color: #3639a3;
|
||||||
}
|
}
|
||||||
.dark {
|
.dark {
|
||||||
--bg-color: #0f172a;
|
--bg-color: #080613;
|
||||||
--surface-color: #1e293b;
|
--surface-color: #12143b;
|
||||||
--text-color: #f1f5f9;
|
--text-color: #f1f5f9;
|
||||||
--border-color: #334155;
|
--border-color: #3f446a;
|
||||||
--primary-color: #1c3a6b;
|
--primary-color: #3639a3;
|
||||||
--secondary-color: #2a2a2a;
|
--secondary-color: #3f446a;
|
||||||
|
--accent-color: #5761dd;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
@apply bg-theme text-theme transition-colors duration-300;
|
@apply bg-theme text-theme transition-colors duration-300;
|
||||||
font-family: system-ui, -apple-system, sans-serif;
|
font-family: system-ui, -apple-system, sans-serif;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer components {
|
@layer components {
|
||||||
.theme-container {
|
.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 {
|
.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 {
|
.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 {
|
.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 {
|
.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 {
|
.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 {
|
.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 {
|
.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 {
|
.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 {
|
.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 {
|
.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 {
|
.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 {
|
.theme-text {
|
||||||
@apply text-gray-700 dark: text-gray-300 leading-relaxed;
|
@apply leading-relaxed;
|
||||||
|
color: var(--text-color);
|
||||||
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
.theme-footer {
|
.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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,4 +1,3 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
export default {
|
export default {
|
||||||
content: [
|
content: [
|
||||||
"./index.html",
|
"./index.html",
|
||||||
@ -8,38 +7,23 @@ export default {
|
|||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
primary: '#275094',
|
theme: {
|
||||||
'primary-light': '#3c6bc9',
|
DEFAULT: 'var(--bg-color)',
|
||||||
'primary-dark': '#1c3a6b',
|
|
||||||
|
|
||||||
secondary: '#3c3c3c',
|
|
||||||
'secondary-light': '#5a5a5a',
|
|
||||||
'secondary-dark': '#2a2a2a',
|
|
||||||
|
|
||||||
light: {
|
|
||||||
bg: '#f8fafc',
|
|
||||||
surface: '#ffffff',
|
|
||||||
text: '#1e293b',
|
|
||||||
border: '#e2e8f0',
|
|
||||||
accent: '#3b82f6',
|
|
||||||
},
|
},
|
||||||
dark: {
|
surface: {
|
||||||
bg: '#0f172a',
|
DEFAULT: 'var(--surface-color)',
|
||||||
surface: '#1e293b',
|
},
|
||||||
text: '#f1f5f9',
|
border: {
|
||||||
border: '#334155',
|
theme: 'var(--border-color)',
|
||||||
accent: '#60a5fa',
|
},
|
||||||
|
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)',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user