Added background
Added About
This commit is contained in:
Rahaf
@ -1,72 +1,690 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { Element } from "react-scroll";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import AOS from "aos";
|
||||
import "aos/dist/aos.css";
|
||||
|
||||
const About = () => {
|
||||
const { t } = useTranslation();
|
||||
const home10 = "https://i.imgur.com/MW2Sk0y.jpg";
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
Building,
|
||||
Eye,
|
||||
MessageSquare,
|
||||
Heart,
|
||||
X,
|
||||
Sparkles,
|
||||
Zap,
|
||||
Target,
|
||||
Globe,
|
||||
Shield,
|
||||
ChevronLeft,
|
||||
ArrowDown,
|
||||
ChevronRight
|
||||
} from "lucide-react";
|
||||
import styled, { keyframes } from "styled-components";
|
||||
|
||||
|
||||
const companyInfo = [
|
||||
{
|
||||
id: 1,
|
||||
title: "من نحن",
|
||||
icon: Building,
|
||||
description: `تتمثل غايتنا في تقديم حلول هندسية وتقنية متكاملة تشمل تصميم و تنفيذ وإشراف وإدارة المشاريع الصناعية والخدمية ابتداءً من الدراسات والتخطيط مروراً بالتنفيذ والتركيب وصولاً إلى التشغيل والصيانة، توريد و تركيب المعدات و الآلات و خطوط الإنتاج و قطع الصيانة، تمثيل الشركات و الوكالات و المشاركة في المناقصات و المزايدات مع القطاعين العام و الخاص و ذلك وفق القوانين و الأنظمة المعمول بها`,
|
||||
features: [
|
||||
"تنفيذ الأعمال المدنية والمعمارية و المعدنية و الميكانيكية و الكهربائية ",
|
||||
"التحكم و تصميم و تطوير و تنفيذ الأنظمة و التطبيقات البرمجية و قواعد البيانات حسب متطلبات كل مشروع بما في ذلك أنظمة الأتمتة و التحكم",
|
||||
"تطوير و تنفيذ أنظمة متخصصة لإدارة و تشغيل المنشآت الصناعية و محطات الوقود ",
|
||||
"التفتيش الفني بكل أنواعه",
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "رؤيتنا",
|
||||
icon: Eye,
|
||||
description: `أن نكون الشريك الهندسي التقني الموثوق في تنفيذ و إدارة المشاريع الصناعية والسكنية و النفطية والمساهمة في تطوير البنية التحتية والقطاعات الإنتاجية عبر حلول حديثة ومستدامة.`,
|
||||
features: [
|
||||
"الشريك الهندسي الموثوق",
|
||||
"تنمية البنية التحتية",
|
||||
"حلول مستدامة وحديثة",
|
||||
"الريادة في القطاع الهندسي"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "رسالتنا",
|
||||
icon: MessageSquare,
|
||||
description: `تقديم خدمات هندسية ودراسات تنفيذية وإشراف متكامل بأعلى معايير الجودة والسلامة، من خلال كوادر مؤهلة وخبرات متخصصة، مع الالتزام بالوقت والتكلفة وتحقيق أعلى قيمة مضافة لعملائنا.`,
|
||||
features: [
|
||||
"أعلى معايير الجودة والسلامة",
|
||||
"الالتزام بالوقت والتكلفة",
|
||||
"فرق عمل متخصصة ومؤهلة",
|
||||
"تحقيق القيمة المضافة للعملاء"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "قيمنا",
|
||||
icon: Heart,
|
||||
description: `نؤمن بقيم ثابتة توجه أعمالنا وعلاقاتنا مع العملاء والشركاء: الجودة والتميز في كل ما نقدمه، النزاهة المهنية في التعامل، الالتزام بالاستدامة والمسؤولية البيئية والاجتماعية.`,
|
||||
features: [
|
||||
"الجودة الاحترافية",
|
||||
"السلامة المهنية",
|
||||
"الاستدامة والمسؤولية",
|
||||
"التطوير المستمر",
|
||||
"الشفافية و بناء الثقة"
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
AOS.init({ duration: 1000, once: false });
|
||||
// Animations
|
||||
const rotating = keyframes`
|
||||
from {
|
||||
transform: perspective(var(--perspective)) rotateX(var(--rotateX))
|
||||
rotateY(0);
|
||||
}
|
||||
to {
|
||||
transform: perspective(var(--perspective)) rotateX(var(--rotateX))
|
||||
rotateY(1turn);
|
||||
}
|
||||
`;
|
||||
|
||||
const handleScroll = () => {
|
||||
AOS.refresh();
|
||||
const floatAnimation = keyframes`
|
||||
0%, 100% {
|
||||
transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
|
||||
translateZ(var(--translateZ)) translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
|
||||
translateZ(var(--translateZ)) translateY(-10px);
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.3s ease;
|
||||
`;
|
||||
|
||||
const Wrapper = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
`;
|
||||
|
||||
const Inner = styled(motion.div)`
|
||||
--quantity: ${props => props.quantity || 4};
|
||||
--w: 250px;
|
||||
--h: 350px;
|
||||
--translateZ: 320px;
|
||||
--rotateX: -8deg;
|
||||
--perspective: 2000px;
|
||||
position: absolute;
|
||||
width: var(--w);
|
||||
height: var(--h);
|
||||
top: 26%;
|
||||
left: calc(50% - (var(--w) / 2));
|
||||
transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(${props => props.rotation || 0}deg);
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
z-index: 10;
|
||||
`;
|
||||
|
||||
const Card = styled.div.attrs(props => ({
|
||||
style: {
|
||||
'--index': props['data-index'] || 0,
|
||||
}
|
||||
}))`
|
||||
position: absolute;
|
||||
border: 2px solid ${props => props.$theme === 'dark' ? '#4a4a4a' : '#d1c9be'};
|
||||
border-radius: 20px;
|
||||
overflow: visible;
|
||||
inset: 0;
|
||||
transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
|
||||
translateZ(var(--translateZ));
|
||||
cursor: pointer;
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
background: ${props => props.$theme === 'dark' ? '#f5e7c673' : '#f5e7c673'};
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
|
||||
&:hover {
|
||||
transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
|
||||
translateZ(calc(var(--translateZ) + 80px)) scale(1.05);
|
||||
border-color: #e06923;
|
||||
background: ${props => props.$theme === 'dark' ? '#F7B980' : '#F7B980'};
|
||||
box-shadow:
|
||||
0 0 30px rgba(4, 28, 64, 0.3),
|
||||
0 0 60px rgba(4, 28, 64, 0.2);
|
||||
}
|
||||
|
||||
${props => props.$isFront && `
|
||||
transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
|
||||
translateZ(calc(var(--translateZ) + 50px)) scale(1.03);
|
||||
border-color:#e06923;
|
||||
box-shadow:
|
||||
0 15px 35px rgba(4, 28, 64, 0.2),
|
||||
0 5px 15px rgba(4, 28, 64, 0.1);
|
||||
`}
|
||||
`;
|
||||
|
||||
const CardContent = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 18px;
|
||||
transition: all 0.3s ease;
|
||||
`;
|
||||
|
||||
const CardHeader = styled.div`
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
`;
|
||||
|
||||
const IconWrapper = styled.div`
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
transition: all 0.3s ease;
|
||||
`;
|
||||
|
||||
const CardTitle = styled.h3`
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
color: #041c40;
|
||||
margin-bottom: 6px;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
letter-spacing: -0.5px;
|
||||
text-align: center !important;
|
||||
`;
|
||||
|
||||
const CardDescription = styled.p`
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: ${props => props.$theme === 'dark' ? '#131313' : '#131313'};
|
||||
margin-bottom: 6px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 8;
|
||||
-webkit-box-orventical: vertical;
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
opacity: 0.9;
|
||||
`;
|
||||
|
||||
const ArrowHint = styled(motion.div)`
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: #041c40;
|
||||
z-index: 2;
|
||||
opacity: 0.7;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
span {
|
||||
font-size: 11px;
|
||||
color: #041c40;
|
||||
font-weight: 500;
|
||||
opacity: 0;
|
||||
white-space: nowrap;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
svg {
|
||||
animation: bounce 2s infinite;
|
||||
transition: all 0.3s ease;
|
||||
color: #041c40;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(5px);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
span {
|
||||
opacity: 1;
|
||||
}
|
||||
svg {
|
||||
animation: bounce 1s infinite;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const HeaderSection = styled.div`
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const Title = styled.div`
|
||||
font-size: 42px;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
color: #041c40;
|
||||
margin-bottom: 15px;
|
||||
text-shadow: 0 2px 10px rgba(4, 28, 64, 0.2);
|
||||
letter-spacing: -0.5px;
|
||||
`;
|
||||
|
||||
const Subtitle = styled.div`
|
||||
font-size: 16px;
|
||||
color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
|
||||
opacity: 0.8;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
`;
|
||||
|
||||
const DetailModal = styled(motion.div)`
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: ${props => props.$theme === 'dark' ? 'rgb(49 49 49 / 75%)' : 'rgb(245 238 230 / 65%)'};
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 15px;
|
||||
`;
|
||||
|
||||
const ModalContent = styled(motion.div)`
|
||||
max-width: 650px;
|
||||
width: 100%;
|
||||
height: 86%;
|
||||
background: ${props => props.$theme === 'dark' ? 'rgba(49, 49, 49, 0.9)' : 'rgba(245, 238, 230, 0.9)'};
|
||||
backdrop-filter: blur(40px);
|
||||
-webkit-backdrop-filter: blur(40px);
|
||||
border-radius: 25px;
|
||||
border: 2px solid ${props => props.$theme === 'dark' ? '#4a4a4a' : '#d1c9be'};
|
||||
padding: 12px 20px;
|
||||
position: relative;
|
||||
color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
|
||||
`;
|
||||
|
||||
const CloseButton = styled(motion.button)`
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(4, 28, 64, 0.3);
|
||||
background: ${props => props.$theme === 'dark' ? 'rgba(49, 49, 49, 0.8)' : 'rgba(245, 238, 230, 0.8)'};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: #041c40;
|
||||
z-index: 1001;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(4, 28, 64, 0.1);
|
||||
transform: rotate(90deg);
|
||||
border-color: #041c40;
|
||||
}
|
||||
`;
|
||||
|
||||
const NavButton = styled(motion.button)`
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: ${props => props.$theme === 'dark' ? 'rgba(49, 49, 49, 0.8)' : 'rgba(245, 238, 230, 0.8)'};
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid ${props => props.$theme === 'dark' ? '#4a4a4a' : '#d1c9be'};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
|
||||
z-index: 100;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(4, 28, 64, 0.1);
|
||||
border-color: #041c40;
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
color: #041c40;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
&:hover {
|
||||
background: ${props => props.$theme === 'dark' ? 'rgba(49, 49, 49, 0.8)' : 'rgba(245, 238, 230, 0.8)'};
|
||||
transform: translateY(-50%) scale(1);
|
||||
border-color: ${props => props.$theme === 'dark' ? '#4a4a4a' : '#d1c9be'};
|
||||
color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const LeftNavButton = styled(NavButton)`
|
||||
left: 30px;
|
||||
`;
|
||||
|
||||
const RightNavButton = styled(NavButton)`
|
||||
right: 30px;
|
||||
`;
|
||||
|
||||
const DotsContainer = styled.div`
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
z-index: 100;
|
||||
`;
|
||||
|
||||
const Dot = styled.div.attrs(props => ({
|
||||
'data-active': props['data-active'] || 'false'
|
||||
}))`
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: ${props =>
|
||||
props['data-active'] === 'true'
|
||||
? '#041c40'
|
||||
: props.$theme === 'dark'
|
||||
? 'rgba(224, 105, 35, 0.3)'
|
||||
: 'rgba(4, 28, 64, 0.3)'
|
||||
};
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: ${props =>
|
||||
props['data-active'] === 'true'
|
||||
? '#041c40'
|
||||
: props.$theme === 'dark'
|
||||
? 'rgba(224, 105, 35, 0.5)'
|
||||
: 'rgba(4, 28, 64, 0.5)'
|
||||
};
|
||||
transform: scale(1.2);
|
||||
}
|
||||
`;
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
const About = ({ theme = 'light' }) => {
|
||||
const [selectedCard, setSelectedCard] = useState(null);
|
||||
const [rotation, setRotation] = useState(0);
|
||||
const [activeCardIndex, setActiveCardIndex] = useState(0);
|
||||
const innerRef = useRef(null);
|
||||
|
||||
const handleCardClick = (card) => {
|
||||
setSelectedCard(card);
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setSelectedCard(null);
|
||||
};
|
||||
|
||||
const handleNextCard = () => {
|
||||
const angleStep = 360 / companyInfo.length;
|
||||
setRotation(prev => prev - angleStep);
|
||||
setActiveCardIndex(prev => (prev + 1) % companyInfo.length);
|
||||
};
|
||||
|
||||
const handlePrevCard = () => {
|
||||
const angleStep = 360 / companyInfo.length;
|
||||
setRotation(prev => prev + angleStep);
|
||||
setActiveCardIndex(prev => (prev - 1 + companyInfo.length) % companyInfo.length);
|
||||
};
|
||||
|
||||
const handleDotClick = (index) => {
|
||||
const angleStep = 360 / companyInfo.length;
|
||||
const targetRotation = -index * angleStep;
|
||||
setRotation(targetRotation);
|
||||
setActiveCardIndex(index);
|
||||
};
|
||||
|
||||
const isCardInFront = (index) => {
|
||||
const cardAngle = (index * (360 / companyInfo.length) + rotation) % 360;
|
||||
const normalizedAngle = (cardAngle + 360) % 360;
|
||||
return Math.abs(normalizedAngle) < 30 || Math.abs(normalizedAngle - 360) < 30;
|
||||
};
|
||||
|
||||
return (
|
||||
<Element name="about">
|
||||
<section
|
||||
className="w-full h-screen px-4 sm:px-6 lg:px-16 py-12 sm:py-16 text-black font-sans relative overflow-hidden"
|
||||
style={{ direction: "rtl", backgroundColor: "#111827" }}
|
||||
>
|
||||
{/* صورة الخلفية */}
|
||||
<div
|
||||
className="relative w-full sm:w-3/4 mx-auto z-0"
|
||||
data-aos="fade-right"
|
||||
style={{
|
||||
borderRadius: "12px",
|
||||
border: "1px solid #EB8323",
|
||||
boxShadow:
|
||||
"0 0 15px 5px rgba(235, 131, 35, 0.4), 0 0 8px 2px rgba(235, 131, 35, 0.3)",
|
||||
}}
|
||||
<StyledWrapper $theme={theme}>
|
||||
<HeaderSection>
|
||||
<Title>
|
||||
<div
|
||||
className="pt-0 mb-2 text-4xl font-extrabold md:text-5xl lg:text-6xl"
|
||||
style={{
|
||||
background: 'linear-gradient(90deg, #e06923 0%, #ffffff 33%, #313131 66%, #e06923 100%)',
|
||||
backgroundSize: '300% 100%',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
backgroundClip: 'text',
|
||||
color: 'transparent',
|
||||
animation: 'gradientFlow 3s ease infinite',
|
||||
fontWeight: 900,
|
||||
letterSpacing: '-0.5px'
|
||||
}}
|
||||
>
|
||||
من نحن
|
||||
</div>
|
||||
</Title>
|
||||
<Subtitle $theme={theme}>
|
||||
<div className="text-lg font-medium lg:text-xl mb-6 max-w-3xl mx-auto">
|
||||
رحلة التميز الهندسي والتقني، هنا حيث تلتقي الخبرة بالابتكار
|
||||
</div>
|
||||
</Subtitle>
|
||||
</HeaderSection>
|
||||
|
||||
<Wrapper>
|
||||
<LeftNavButton
|
||||
$theme={theme}
|
||||
onClick={handlePrevCard}
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
<img
|
||||
src={home10}
|
||||
alt="شخص"
|
||||
className="w-full h-[450px] sm:h-[500px] md:h-[600px] object-cover rounded-lg transition-all duration-300"
|
||||
loading="eager"
|
||||
fetchPriority="high"
|
||||
/>
|
||||
</div>
|
||||
<ChevronLeft size={28} />
|
||||
</LeftNavButton>
|
||||
|
||||
<Inner
|
||||
ref={innerRef}
|
||||
quantity={companyInfo.length}
|
||||
rotation={rotation}
|
||||
>
|
||||
{companyInfo.map((card, index) => {
|
||||
const Icon = card.icon;
|
||||
const isFront = isCardInFront(index);
|
||||
|
||||
{/* مربع النص المتراكب */}
|
||||
<div
|
||||
className="z-10 max-w-full px-4 sm:px-0 -mt-20 sm:mt-0 sm:absolute sm:bottom-10 sm:right-10
|
||||
bg-white/20 backdrop-blur-md text-black p-6 sm:p-12 rounded-xl shadow-2xl
|
||||
flex flex-col sm:max-w-md"
|
||||
data-aos="fade-left"
|
||||
return (
|
||||
<Card
|
||||
key={card.id}
|
||||
data-index={index}
|
||||
$theme={theme}
|
||||
$isFront={isFront}
|
||||
onClick={() => isFront && handleCardClick(card)}
|
||||
>
|
||||
<CardContent $theme={theme}>
|
||||
<CardHeader>
|
||||
<IconWrapper>
|
||||
<Icon size={32} style={{ color: '#e06923' }} />
|
||||
</IconWrapper>
|
||||
<CardTitle>{card.title}</CardTitle>
|
||||
<CardDescription $theme={theme}>
|
||||
{card.description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<div>
|
||||
{isFront && (
|
||||
<ArrowHint style={{ color: '#e06923' }}>
|
||||
<ArrowDown size={24} style={{ color: '#e06923' }} />
|
||||
<span style={{ color: '#e06923' }}>إضغط لعرض التفاصيل</span>
|
||||
</ArrowHint>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</Inner>
|
||||
|
||||
<RightNavButton
|
||||
$theme={theme}
|
||||
onClick={handleNextCard}
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
<h1 className="mb-4 sm:mb-6 text-3xl sm:text-5xl font-extrabold md:text-6xl lg:text-7xl text-center self-center mt-0">
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#10375C] to-[#F3C623]">
|
||||
{t('about.title')}
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-lg sm:text-2xl leading-relaxed flex-grow text-center">
|
||||
{t('about.description')}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</Element>
|
||||
<ChevronRight size={28} />
|
||||
</RightNavButton>
|
||||
|
||||
<DotsContainer>
|
||||
{companyInfo.map((_, index) => (
|
||||
<Dot
|
||||
key={index}
|
||||
$theme={theme}
|
||||
data-active={index === activeCardIndex ? 'true' : 'false'}
|
||||
onClick={() => handleDotClick(index)}
|
||||
/>
|
||||
))}
|
||||
</DotsContainer>
|
||||
</Wrapper>
|
||||
|
||||
{selectedCard && (
|
||||
<DetailModal
|
||||
$theme={theme}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={handleCloseModal}
|
||||
>
|
||||
<ModalContent
|
||||
$theme={theme}
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.8, opacity: 0 }}
|
||||
transition={{ type: "spring", damping: 25, stiffness: 200 }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<CloseButton
|
||||
$theme={theme}
|
||||
onClick={handleCloseModal}
|
||||
whileHover={{ rotate: 90 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
<X size={20} />
|
||||
</CloseButton>
|
||||
|
||||
<div style={{ gap: '20px', marginBottom: '30px', textAlign:'center' }}>
|
||||
<div>
|
||||
<h2 style={{
|
||||
fontSize: '36px',
|
||||
fontWeight: '800',
|
||||
color: theme === 'dark' ? '#F5EEE6' : '#041c40',
|
||||
marginBottom: '10px',
|
||||
}}>
|
||||
{selectedCard.title}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '30px' }}>
|
||||
<p style={{
|
||||
color: theme === 'dark' ? '#F5EEE6' : '#131313',
|
||||
lineHeight: '1.7',
|
||||
fontSize: '16px',
|
||||
textAlign: 'right',
|
||||
padding: '20px',
|
||||
background: 'rgba(4, 28, 64, 0.05)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
borderRadius: '16px',
|
||||
border: '1px solid rgba(4, 28, 64, 0.2)'
|
||||
}}>
|
||||
{selectedCard.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '30px' }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '15px' }}>
|
||||
{selectedCard.features.map((feature, idx) => (
|
||||
<div key={idx} style={{
|
||||
padding: '18px',
|
||||
background: 'rgba(4, 28, 64, 0.05)',
|
||||
backdropFilter: 'blur(15px)',
|
||||
borderRadius: '15px',
|
||||
border: '1px solid rgba(4, 28, 64, 0.2)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '15px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s ease',
|
||||
}}>
|
||||
<div style={{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '12px',
|
||||
background: 'rgba(4, 28, 64, 0.1)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
{idx === 1 && <Shield size={20} style={{ color: '#e06923' }} />}
|
||||
{idx === 0 && <Target size={20} style={{ color: '#e06923' }} />}
|
||||
{idx === 2 && <Globe size={20} style={{ color: '#e06923' }} />}
|
||||
{idx === 3 && <Zap size={20} style={{ color: '#e06923' }} />}
|
||||
{idx === 4 && <Sparkles size={20} style={{ color: '#e06923' }} />}
|
||||
</div>
|
||||
<span style={{
|
||||
color: theme === 'dark' ? '#F5EEE6' : '#131313',
|
||||
fontSize: '15px',
|
||||
fontWeight: '500',
|
||||
flex: 1
|
||||
}}>
|
||||
{feature}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</ModalContent>
|
||||
</DetailModal>
|
||||
)}
|
||||
</StyledWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user