hamzeh/REXNT
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added contact us

Browse Source 
Added services
This commit is contained in:
Rahaf
2026-01-09 19:24:08 +03:00
parent 330a0d1ff1
commit 4bedf7b193
6 changed files with 151 additions and 782 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/Components/Sections/About/About.css
View File

@ -1,30 +0,0 @@
.grow-img {
animation: growIn 1s ease-out forwards;
}
@keyframes growIn {
0% {
transform: scale(0.8);
opacity: 0.8;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes soft-blink {
0%,
100% {
opacity: 0.5;
transform: translateX(0);
}
50% {
opacity: 1;
transform: translateX(4px);
}
}
.animate-soft-blink {
animation: soft-blink 3s infinite ease-in-out;
}

47
src/Components/Sections/About/About.jsx
View File

@ -70,7 +70,6 @@ const companyInfo = [
}
];
// Animations
const rotating = keyframes`
from {
transform: perspective(var(--perspective)) rotateX(var(--rotateX))
@ -140,7 +139,7 @@ const Card = styled.div.attrs(props => ({
}
}))`
position: absolute;
border: 2px solid ${props => props.$theme === 'dark' ? '#4a4a4a' : '#d1c9be'};
border: 2px solid ${props => props.$theme === 'dark' ? '#47718b' : '#47718b'};
border-radius: 20px;
overflow: visible;
inset: 0;
@ -148,15 +147,15 @@ const Card = styled.div.attrs(props => ({
translateZ(var(--translateZ));
cursor: pointer;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
background: ${props => props.$theme === 'dark' ? '#f5e7c673' : '#f5e7c673'};
background: ${props => props.$theme === 'dark' ? 'linear-gradient(45deg,#3c4b5d, #57acd9)' : 'linear-gradient(45deg,white,#47718b)'};
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'};
border-color: #47718b;
// background: ${props => props.$theme === 'dark' ? 'linear-gradient(45deg,#57acd9, transpatent)' : '#063e5b'};
box-shadow:
0 0 30px rgba(4, 28, 64, 0.3),
0 0 60px rgba(4, 28, 64, 0.2);
@ -165,7 +164,7 @@ const Card = styled.div.attrs(props => ({
${props => props.$isFront && `
transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
translateZ(calc(var(--translateZ) + 50px)) scale(1.03);
border-color:#e06923;
border-color:#47718b;
box-shadow:
0 15px 35px rgba(4, 28, 64, 0.2),
0 5px 15px rgba(4, 28, 64, 0.1);
@ -213,7 +212,7 @@ const CardTitle = styled.h3`
const CardDescription = styled.p`
font-size: 14px;
line-height: 1.6;
color: ${props => props.$theme === 'dark' ? '#131313' : '#131313'};
color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
margin-bottom: 6px;
display: -webkit-box;
-webkit-line-clamp: 8;
@ -310,7 +309,7 @@ const DetailModal = styled(motion.div)`
left: 0;
right: 0;
bottom: 0;
background: ${props => props.$theme === 'dark' ? 'rgb(49 49 49 / 75%)' : 'rgb(245 238 230 / 65%)'};
background: ${props => props.$theme === 'dark' ? 'rgb(49 49 49 / 75%)' : 'rgb(49 49 49 / 75%)'};
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 2000;
@ -324,7 +323,7 @@ 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)'};
background: ${props => props.$theme === 'dark' ? 'linear-gradient(45deg, #063e5b, gray);' : 'linear-gradient(45deg,#539cc4, gray)'};
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
border-radius: 25px;
@ -486,17 +485,7 @@ const About = ({ theme = 'light' }) => {
<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>
@ -538,7 +527,7 @@ const About = ({ theme = 'light' }) => {
<CardContent $theme={theme}>
<CardHeader>
<IconWrapper>
<Icon size={32} style={{ color: '#e06923' }} />
<Icon size={32} style={{ color: '#57acd9' }} />
</IconWrapper>
<CardTitle>{card.title}</CardTitle>
<CardDescription $theme={theme}>
@ -548,9 +537,9 @@ const About = ({ theme = 'light' }) => {
<div>
{isFront && (
<ArrowHint style={{ color: '#e06923' }}>
<ArrowDown size={24} style={{ color: '#e06923' }} />
<span style={{ color: '#e06923' }}>إضغط لعرض التفاصيل</span>
<ArrowHint style={{ color: '#57acd9' }}>
<ArrowDown size={24} style={{ color: '#57acd9' }} />
<span style={{ color: '#57acd9' }}>إضغط لعرض التفاصيل</span>
</ArrowHint>
)}
</div>
@ -660,11 +649,11 @@ const About = ({ theme = 'light' }) => {
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' }} />}
{idx === 1 && <Shield size={20} style={{ color: '#57acd9' }} />}
{idx === 0 && <Target size={20} style={{ color: '#57acd9' }} />}
{idx === 2 && <Globe size={20} style={{ color: '#57acd9' }} />}
{idx === 3 && <Zap size={20} style={{ color: '#57acd9' }} />}
{idx === 4 && <Sparkles size={20} style={{ color: '#57acd9' }} />}
</div>
<span style={{
color: theme === 'dark' ? '#F5EEE6' : '#131313',