my changes
This commit is contained in:
@ -1,279 +1,265 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Element } from "react-scroll";
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import { Button, Dropdown } from "flowbite-react";
|
||||
|
||||
import { FaWhatsapp, FaPhone, FaEnvelope } from "react-icons/fa";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import "../../../index.css";
|
||||
export default function EngineeringHeroFlowbite() {
|
||||
const defaultConfig = {
|
||||
main_title: "حلول هندسية متكاملة",
|
||||
subtitle: "نصمم ونبني المستقبل بخبرة ودقة واحترافية",
|
||||
primary_color: "#e67e22",
|
||||
background_color: "#000000",
|
||||
text_color: "#ffffff",
|
||||
secondary_surface: "#95a5a6",
|
||||
secondary_action: "#34495e",
|
||||
font_family: "Cairo",
|
||||
font_size: 16,
|
||||
};
|
||||
|
||||
|
||||
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 Home = () => {
|
||||
const { t } = useTranslation();
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
const phrases = t("home.phrases", { returnObjects: true });
|
||||
const [config, setConfig] = useState(defaultConfig);
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
const mainTitleRef = useRef(null);
|
||||
const subtitleRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const updateSize = () => setIsMobile(window.innerWidth < 640);
|
||||
updateSize();
|
||||
window.addEventListener("resize", updateSize);
|
||||
return () => window.removeEventListener("resize", updateSize);
|
||||
const id = "cairo-font-link";
|
||||
if (!document.getElementById(id)) {
|
||||
const link = document.createElement("link");
|
||||
link.id = id;
|
||||
link.rel = "stylesheet";
|
||||
link.href = "https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap";
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentIndex((prev) => (prev + 1) % phrases.length);
|
||||
}, 4000);
|
||||
return () => clearInterval(interval);
|
||||
}, [phrases.length]);
|
||||
const main = mainTitleRef.current;
|
||||
const sub = subtitleRef.current;
|
||||
const baseFontStack = "Arial, sans-serif";
|
||||
const font = (config.font_family || defaultConfig.font_family) + ", " + baseFontStack;
|
||||
const baseSize = config.font_size || defaultConfig.font_size;
|
||||
|
||||
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 "";
|
||||
if (main) {
|
||||
main.textContent = config.main_title || defaultConfig.main_title;
|
||||
main.style.fontFamily = font;
|
||||
main.style.fontSize = `${baseSize * 4}px`;
|
||||
main.style.color = config.text_color || defaultConfig.text_color;
|
||||
}
|
||||
};
|
||||
|
||||
if (sub) {
|
||||
sub.textContent = config.subtitle || defaultConfig.subtitle;
|
||||
sub.style.fontFamily = font;
|
||||
sub.style.fontSize = `${baseSize * 1.75}px`;
|
||||
sub.style.color = config.text_color || defaultConfig.text_color;
|
||||
}
|
||||
|
||||
const root = document.documentElement;
|
||||
root.style.setProperty("--ehb-primary", config.primary_color || defaultConfig.primary_color);
|
||||
root.style.setProperty("--ehb-background", config.background_color || defaultConfig.background_color);
|
||||
root.style.setProperty("--ehb-surface", config.secondary_surface || defaultConfig.secondary_surface);
|
||||
root.style.setProperty("--ehb-action", config.secondary_action || defaultConfig.secondary_action);
|
||||
}, [config]);
|
||||
|
||||
useEffect(() => {
|
||||
const element = {
|
||||
defaultConfig,
|
||||
onConfigChange: async (newCfg) => {
|
||||
setConfig((c) => ({ ...c, ...newCfg }));
|
||||
},
|
||||
mapToCapabilities: (cfg) => ({
|
||||
recolorables: [
|
||||
{
|
||||
get: () => cfg.background_color || defaultConfig.background_color,
|
||||
set: (value) => {
|
||||
cfg.background_color = value;
|
||||
window?.elementSdk?.setConfig?.({ background_color: value });
|
||||
setConfig({ ...cfg });
|
||||
},
|
||||
},
|
||||
{
|
||||
get: () => cfg.secondary_surface || defaultConfig.secondary_surface,
|
||||
set: (value) => {
|
||||
cfg.secondary_surface = value;
|
||||
window?.elementSdk?.setConfig?.({ secondary_surface: value });
|
||||
setConfig({ ...cfg });
|
||||
},
|
||||
},
|
||||
{
|
||||
get: () => cfg.text_color || defaultConfig.text_color,
|
||||
set: (value) => {
|
||||
cfg.text_color = value;
|
||||
window?.elementSdk?.setConfig?.({ text_color: value });
|
||||
setConfig({ ...cfg });
|
||||
},
|
||||
},
|
||||
{
|
||||
get: () => cfg.primary_color || defaultConfig.primary_color,
|
||||
set: (value) => {
|
||||
cfg.primary_color = value;
|
||||
window?.elementSdk?.setConfig?.({ primary_color: value });
|
||||
setConfig({ ...cfg });
|
||||
},
|
||||
},
|
||||
{
|
||||
get: () => cfg.secondary_action || defaultConfig.secondary_action,
|
||||
set: (value) => {
|
||||
cfg.secondary_action = value;
|
||||
window?.elementSdk?.setConfig?.({ secondary_action: value });
|
||||
setConfig({ ...cfg });
|
||||
},
|
||||
},
|
||||
],
|
||||
borderables: [],
|
||||
fontEditable: {
|
||||
get: () => cfg.font_family || defaultConfig.font_family,
|
||||
set: (value) => {
|
||||
cfg.font_family = value;
|
||||
window?.elementSdk?.setConfig?.({ font_family: value });
|
||||
setConfig({ ...cfg });
|
||||
},
|
||||
},
|
||||
fontSizeable: {
|
||||
get: () => cfg.font_size || defaultConfig.font_size,
|
||||
set: (value) => {
|
||||
cfg.font_size = value;
|
||||
window?.elementSdk?.setConfig?.({ font_size: value });
|
||||
setConfig({ ...cfg });
|
||||
},
|
||||
},
|
||||
}),
|
||||
mapToEditPanelValues: (cfg) =>
|
||||
new Map([
|
||||
["main_title", cfg.main_title || defaultConfig.main_title],
|
||||
["subtitle", cfg.subtitle || defaultConfig.subtitle],
|
||||
]),
|
||||
};
|
||||
|
||||
if (window?.elementSdk?.init) {
|
||||
try {
|
||||
window.elementSdk.init(element);
|
||||
} catch (e) {}
|
||||
}
|
||||
}, []);
|
||||
|
||||
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 dir="rtl" className="h-screen w-full overflow-hidden" style={{ background: 'var(--ehb-background, #000000)' }}>
|
||||
<style>{`
|
||||
:root { --ehb-primary: #e67e22; --ehb-background: #000000; --ehb-surface: #95a5a6; --ehb-action: #34495e }
|
||||
.logo-container{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--ehb-background) 0%, #34495e 100%);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeOutContainer 0.5s ease-out 4s forwards}
|
||||
.logo{width:80px;height:80px;border-radius:12px;position:absolute;opacity:0;transform:translateY(100%);display:flex;align-items:center;justify-content:center;background:transparent}
|
||||
.logo img{max-width:70%;max-height:70%;object-fit:contain;display:block}
|
||||
.logo-1{animation:jumpIn 0.6s ease-out 0.2s forwards, moveToMerge 0.8s ease-in-out 2s forwards}
|
||||
.logo-2{animation:jumpIn 0.6s ease-out 0.4s forwards, moveToMerge 0.8s ease-in-out 2s forwards}
|
||||
.logo-3{animation:jumpIn 0.6s ease-out 0.6s forwards, moveToMerge 0.8s ease-in-out 2s forwards}
|
||||
.final-logo{width:120px;height:120px;background:transparent;border-radius:16px;position:absolute;opacity:0;transform:scale(0);animation:finalLogoAppear 0.6s ease-out 2.8s forwards;display:flex;align-items:center;justify-content:center}
|
||||
.final-logo img{max-width:80%;max-height:80%;object-fit:contain;display:block}
|
||||
@keyframes jumpIn{0%{opacity:0;transform:translateY(100%)}60%{transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}
|
||||
@keyframes moveToMerge{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
|
||||
@keyframes finalLogoAppear{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
|
||||
@keyframes fadeOutContainer{to{opacity:0;visibility:hidden}}
|
||||
.hero-section{position:relative;width:100%;height:100%;overflow:hidden;opacity:0;animation:fadeInHero 1s ease-out 4.5s forwards}
|
||||
@keyframes fadeInHero{to{opacity:1}}
|
||||
.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0.35));z-index:3}
|
||||
.hero-layout{position:relative;z-index:10;height:100%;display:flex;align-items:center;justify-content:space-between;padding:40px;gap:2rem;direction:ltr;flex-direction:row}
|
||||
.hero-left{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:20px}
|
||||
.hero-left img{max-width:100%;height:auto;display:block}
|
||||
.hero-content{flex:1;z-index:15;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:40px}
|
||||
.hero-title{opacity:0;transform:translateY(30px);animation:slideUpFade 1s ease-out 6s forwards}
|
||||
.hero-subtitle{opacity:0;transform:translateY(30px);animation:slideUpFade 1s ease-out 6.3s forwards}
|
||||
@keyframes slideUpFade{to{opacity:1;transform:translateY(0)}}
|
||||
|
||||
{/* المحتوى */}
|
||||
<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>
|
||||
/* Brighter, more luminous navy glows: stronger cores, additional layered highlights, subtle lens flare and increased saturation */
|
||||
.navy-glow{position:absolute;pointer-events:none;z-index:4;opacity:1;transform:translateZ(0);mix-blend-mode:screen;filter:blur(160px) saturate(160%);transition:opacity .45s ease, transform .45s ease, filter .45s ease;will-change:opacity,transform,filter}
|
||||
|
||||
<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>
|
||||
/* bottom-left glow: very bright core + warm accent rim for contrast */
|
||||
.navy-glow.bottom-left{left:0;bottom:0;width:90vh;height:90vh;border-radius:50%;
|
||||
background: radial-gradient(circle at 15% 88%, rgba(10,34,78,0.98) 0%, rgba(22,54,110,0.76) 18%, rgba(40,78,140,0.48) 36%, rgba(6,23,58,0) 62%);
|
||||
box-shadow: 0 0 120px 32px rgba(10,34,78,0.12), inset 0 0 140px 10px rgba(230,126,34,0.035);
|
||||
animation: glowFloat 9s ease-in-out infinite alternate, glowPulse 5.8s ease-in-out infinite;}
|
||||
|
||||
<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>
|
||||
/* layered depth */
|
||||
.navy-glow.bottom-left::before, .navy-glow.bottom-left::after{content:"";position:absolute;border-radius:50%;left:0;top:0;right:0;bottom:0;pointer-events:none}
|
||||
.navy-glow.bottom-left::before{background: radial-gradient(circle at 22% 78%, rgba(120,170,220,0.22), rgba(120,170,220,0) 46%);transform:scale(0.95);filter:blur(42px);opacity:0.96}
|
||||
.navy-glow.bottom-left::after{background: radial-gradient(circle at 42% 92%, rgba(230,126,34,0.12), rgba(230,126,34,0) 52%);transform:scale(0.7);filter:blur(30px);opacity:0.7}
|
||||
/* tiny bright flare center */
|
||||
.navy-glow.bottom-left .flare{position:absolute;left:18%;bottom:20%;width:18vh;height:18vh;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.35) 8%, rgba(10,34,78,0.0) 45%);filter:blur(28px);opacity:0.95}
|
||||
|
||||
{/* وصف إضافي */}
|
||||
<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>
|
||||
/* top-right glow: tighter and brighter to balance composition */
|
||||
.navy-glow.top-right{right:0;top:0;width:78vh;height:78vh;border-radius:50%;
|
||||
background: radial-gradient(circle at 88% 12%, rgba(12,36,82,0.98) 0%, rgba(20,44,88,0.72) 16%, rgba(44,78,140,0.38) 36%, rgba(6,23,58,0) 62%);
|
||||
box-shadow: 0 0 110px 24px rgba(44,78,140,0.08), inset 0 0 120px 6px rgba(255,255,255,0.02);
|
||||
animation: glowFloat 11.5s ease-in-out infinite alternate, glowPulse 6.6s ease-in-out infinite}
|
||||
|
||||
{/* زر تواصل معنا */}
|
||||
<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>
|
||||
.navy-glow.top-right::before, .navy-glow.top-right::after{content:"";position:absolute;border-radius:50%;left:0;top:0;right:0;bottom:0;pointer-events:none}
|
||||
.navy-glow.top-right::before{background: radial-gradient(circle at 70% 30%, rgba(160,200,255,0.18), rgba(160,200,255,0) 48%);transform:scale(0.94);filter:blur(40px);opacity:0.98}
|
||||
.navy-glow.top-right::after{background: radial-gradient(circle at 85% 20%, rgba(255,255,255,0.06), rgba(255,255,255,0) 45%);transform:scale(0.62);filter:blur(24px);opacity:0.6}
|
||||
.navy-glow.top-right .flare{position:absolute;right:14%;top:12%;width:10vh;height:10vh;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.28) 10%, rgba(12,36,82,0) 48%);filter:blur(20px);opacity:0.9}
|
||||
|
||||
/* slightly stronger pulse and float so glow reads as illuminated but stays subtle */
|
||||
@keyframes glowFloat{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-22px) scale(1.045)}}
|
||||
@keyframes glowPulse{0%{opacity:1}50%{opacity:0.66}100%{opacity:1}}
|
||||
|
||||
/* small responsive tweak so glows don't overwhelm on narrow screens */
|
||||
@media (max-width: 640px){
|
||||
.navy-glow.bottom-left{width:56vh;height:56vh;filter:blur(110px)}
|
||||
.navy-glow.top-right{width:50vh;height:50vh;filter:blur(106px)}
|
||||
.navy-glow.bottom-left .flare, .navy-glow.top-right .flare{display:none}
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="logo-container">
|
||||
<div className="logo logo-1" style={{ left: 'calc(50% - 200px)' }}>
|
||||
<img src="src/assets/TPS-logo.png" alt="TPS logo" />
|
||||
</div>
|
||||
<div className="logo logo-2" style={{ left: 'calc(50% - 40px)' }}>
|
||||
<img src="src/assets/NSC.png" alt="NSC logo" />
|
||||
</div>
|
||||
<div className="logo logo-3" style={{ left: 'calc(50% + 120px)' }}>
|
||||
<img src="src/assets/LOGO.png" alt="LOGO" />
|
||||
</div>
|
||||
<div className="final-logo">
|
||||
<img src="src/assets/REXNT.png" alt="REXNT" />
|
||||
</div>
|
||||
</div>
|
||||
</Element>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
<div className="hero-section">
|
||||
{/* removed the previous hero-image background as requested */}
|
||||
|
||||
<div className="navy-glow bottom-left"><div className="flare" /></div>
|
||||
<div className="navy-glow top-right"><div className="flare" /></div>
|
||||
|
||||
<div className="hero-overlay" />
|
||||
|
||||
<div className="hero-layout">
|
||||
<div className="hero-left">
|
||||
<img src="src/assets/REXNT.png" alt="REXNT" />
|
||||
</div>
|
||||
|
||||
<div className="hero-content">
|
||||
<h1 ref={mainTitleRef} className="hero-title text-white text-right" style={{ fontWeight: 800, marginBottom: 24, textShadow: '2px 2px 8px rgba(0,0,0,0.5)' }} />
|
||||
|
||||
<p ref={subtitleRef} className="hero-subtitle text-white text-right" style={{ maxWidth: 800, textShadow: '1px 1px 4px rgba(0,0,0,0.5)' }} />
|
||||
|
||||
<div className="mt-8 flex items-center gap-6 justify-end">
|
||||
<Button color="light" onClick={() => window?.scrollTo?.({ top: 0, behavior: 'smooth' })}>ابدأ</Button>
|
||||
|
||||
<div className="relative">
|
||||
<Button onClick={() => setDropdownOpen((s) => !s)} className="bg-[var(--ehb-primary)] text-black font-semibold">
|
||||
تواصل معنا
|
||||
</Button>
|
||||
|
||||
{dropdownOpen && (
|
||||
<div className="absolute mt-3 right-0 bg-[#06173a] border border-white/10 rounded p-3 text-white shadow-2xl">
|
||||
<a className="flex items-center gap-3 py-2 px-3 hover:underline" href="https://wa.me/963965656631" target="_blank" rel="noreferrer">📱 <span>+963965656631</span></a>
|
||||
<a className="flex items-center gap-3 py-2 px-3 hover:underline" href="mailto:info@TPS-STATIONS.COM">✉️ <span>info@TPS-STATIONS.COM</span></a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user