691 lines
20 KiB
JavaScript
691 lines
20 KiB
JavaScript
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: [
|
|
"الجودة الاحترافية",
|
|
"السلامة المهنية",
|
|
"الاستدامة والمسؤولية",
|
|
"التطوير المستمر",
|
|
"الشفافية و بناء الثقة"
|
|
]
|
|
}
|
|
];
|
|
|
|
// 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 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);
|
|
}
|
|
`;
|
|
|
|
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 (
|
|
<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 }}
|
|
>
|
|
<ChevronLeft size={28} />
|
|
</LeftNavButton>
|
|
|
|
<Inner
|
|
ref={innerRef}
|
|
quantity={companyInfo.length}
|
|
rotation={rotation}
|
|
>
|
|
{companyInfo.map((card, index) => {
|
|
const Icon = card.icon;
|
|
const isFront = isCardInFront(index);
|
|
|
|
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 }}
|
|
>
|
|
<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;
|
|
|
|
|