Compare commits
2 Commits
6420af403a
...
be4a941730
| Author | SHA1 | Date | |
|---|---|---|---|
| be4a941730 | |||
| ce5717b703 |
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
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;
|
||||
@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);
|
||||
}
|
||||
}
|
||||
@ -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)',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user