Added background
Added About
This commit is contained in:
Rahaf
631
package-lock.json
generated
631
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
13
package.json
13
package.json
@ -11,8 +11,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emailjs/browser": "^4.4.1",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"@heroicons/react": "^2.2.0",
|
||||
"aos": "^2.3.4",
|
||||
"clsx": "^2.1.1",
|
||||
"framer-motion": "^12.23.26",
|
||||
"i18next": "^25.7.3",
|
||||
"i18next-browser-languagedetector": "^8.2.0",
|
||||
@ -21,11 +22,15 @@
|
||||
"react-dom": "^19.2.0",
|
||||
"react-i18next": "^16.5.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-scroll": "^1.9.3"
|
||||
"react-scroll": "^1.9.3",
|
||||
"styled-components": "^6.1.19",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"three": "^0.182.0",
|
||||
"tweakpane": "^4.0.5",
|
||||
"vanta": "^0.5.24"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@tailwindcss/postcss": "^4.1.18",
|
||||
"@types/react": "^19.2.5",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
@ -35,7 +40,7 @@
|
||||
"eslint-plugin-react-refresh": "^0.4.24",
|
||||
"globals": "^16.5.0",
|
||||
"postcss": "^8.5.6",
|
||||
"tailwindcss": "^3.3.6",
|
||||
"tailwindcss": "^3.4.0",
|
||||
"vite": "^7.2.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,5 +2,5 @@ export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
}
|
||||
64
src/App.css
64
src/App.css
@ -1,26 +1,56 @@
|
||||
.App {
|
||||
min-height: 100vh;
|
||||
background-color: white;
|
||||
color: #1e293b;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
.min-h-screen.bg-white.dark\:bg-gray-900 {}
|
||||
|
||||
.bg-white,
|
||||
.bg-gray-50,
|
||||
.dark\:bg-gray-800,
|
||||
.dark\:bg-gray-900 {
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.dark .App {
|
||||
background-color: #080613;
|
||||
color: #f1f5f9;
|
||||
.dark .bg-white,
|
||||
.dark .bg-gray-50,
|
||||
.dark .dark\:bg-gray-800,
|
||||
.dark .dark\:bg-gray-900 {}
|
||||
|
||||
.border,
|
||||
.border-gray-200,
|
||||
.dark\:border-gray-700 {
|
||||
border-color: rgba(var(--border-color), 0.3) !important;
|
||||
}
|
||||
|
||||
:root {
|
||||
--app-bg: white;
|
||||
--app-text: #1e293b;
|
||||
.text-gray-900,
|
||||
.dark\:text-white {
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--app-bg: #080613;
|
||||
--app-text: #f1f5f9;
|
||||
.dark .text-gray-900,
|
||||
.dark .dark\:text-white {
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.App {
|
||||
background-color: var(--app-bg);
|
||||
color: var(--app-text);
|
||||
.bg-opacity-95 {
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.shadow-lg,
|
||||
.shadow-xl {
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.dark .shadow-lg,
|
||||
.dark .shadow-xl {
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
.bg-gradient-to-r,
|
||||
.bg-gradient-to-l,
|
||||
.bg-gradient-to-t,
|
||||
.bg-gradient-to-b {
|
||||
background-blend-mode: overlay;
|
||||
}
|
||||
|
||||
.fixed.top-0 {
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
}
|
||||
70
src/App.jsx
70
src/App.jsx
@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import "./i18n";
|
||||
import Navbar from "./Components/Nav/Navbar";
|
||||
import Home from "./Components/Sections/Home/Home";
|
||||
@ -7,22 +7,70 @@ import About from "./Components/Sections/About/About";
|
||||
import Contact from "./Components/Sections/Contact/Contact";
|
||||
import ImagePreloader from "./Components/ImagePreloader";
|
||||
import Footer from "./Components/Nav/Footer";
|
||||
import BackgroundCanvas from "./Components/BackgroundCanvas/BackgroundCanvas";
|
||||
import "./App.css";
|
||||
|
||||
const App = () => {
|
||||
const [theme, setTheme] = useState("light");
|
||||
useEffect(() => {
|
||||
console.log("Current theme:", theme);
|
||||
console.log("HTML has dark class:", document.documentElement.classList.contains('dark'));
|
||||
|
||||
const canvas = document.querySelector('.background-canvas');
|
||||
if (canvas) {
|
||||
console.log("Canvas found:", canvas);
|
||||
console.log("Canvas dimensions:", canvas.width, "x", canvas.height);
|
||||
console.log("Canvas position:", canvas.style.position);
|
||||
console.log("Canvas z-index:", canvas.style.zIndex);
|
||||
} else {
|
||||
console.log("Canvas NOT found!");
|
||||
}
|
||||
}, [theme]);
|
||||
|
||||
useEffect(() => {
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
|
||||
if (savedTheme === "dark" || (!savedTheme && prefersDark)) {
|
||||
setTheme("dark");
|
||||
document.documentElement.classList.add("dark");
|
||||
} else {
|
||||
document.documentElement.classList.remove("dark");
|
||||
setTheme("light");
|
||||
}
|
||||
}, []);
|
||||
|
||||
const toggleTheme = () => {
|
||||
const newTheme = theme === "light" ? "dark" : "light";
|
||||
setTheme(newTheme);
|
||||
|
||||
if (newTheme === "dark") {
|
||||
document.documentElement.classList.add("dark");
|
||||
} else {
|
||||
document.documentElement.classList.remove("dark");
|
||||
}
|
||||
|
||||
localStorage.setItem("theme", newTheme);
|
||||
};
|
||||
|
||||
return (
|
||||
<ImagePreloader>
|
||||
<div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<Navbar />
|
||||
<main className="flex-grow">
|
||||
<Home />
|
||||
<Services />
|
||||
<About />
|
||||
<Contact />
|
||||
</main>
|
||||
<Footer />
|
||||
<div className="relative min-h-screen bg-transparent">
|
||||
<BackgroundCanvas theme={theme} />
|
||||
<div className="relative z-10">
|
||||
<div className="min-h-screen bg-transparent">
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<Navbar toggleTheme={toggleTheme} currentTheme={theme} />
|
||||
<main className="flex-grow">
|
||||
{/* <Home /> */}
|
||||
<Services />
|
||||
<About theme={theme} />
|
||||
<Contact />
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ImagePreloader>
|
||||
|
||||
121
src/Components/BackgroundCanvas/BackgroundCanvas.css
Normal file
121
src/Components/BackgroundCanvas/BackgroundCanvas.css
Normal file
@ -0,0 +1,121 @@
|
||||
html {
|
||||
overflow-x: hidden !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 100% !important;
|
||||
min-height: 100% !important;
|
||||
position: relative !important;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
.background-canvas {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
z-index: -1 !important;
|
||||
pointer-events: none !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0px !important;
|
||||
height: 0px !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: transparent !important;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: none !important;
|
||||
scrollbar-color: transparent transparent !important;
|
||||
}
|
||||
|
||||
* {
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar !important;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
position: relative !important;
|
||||
z-index: 10 !important;
|
||||
min-height: 100vh !important;
|
||||
width: 100% !important;
|
||||
padding: 20px !important;
|
||||
}
|
||||
|
||||
nav.fixed {
|
||||
z-index: 50 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.background-canvas {
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
body {
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
overscroll-behavior-y: contain !important;
|
||||
}
|
||||
* {
|
||||
-webkit-tap-highlight-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.content-container {
|
||||
position: relative !important;
|
||||
z-index: 10 !important;
|
||||
height: 100% !important;
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
}
|
||||
|
||||
.scroll-container::-webkit-scrollbar {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.scroll-container:hover::-webkit-scrollbar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
body {
|
||||
height: -webkit-fill-available !important;
|
||||
}
|
||||
.background-canvas {
|
||||
height: -webkit-fill-available !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-on-scroll {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-on-scroll.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
237
src/Components/BackgroundCanvas/BackgroundCanvas.jsx
Normal file
237
src/Components/BackgroundCanvas/BackgroundCanvas.jsx
Normal file
@ -0,0 +1,237 @@
|
||||
import React, { useRef, useEffect, useState } from 'react';
|
||||
import './BackgroundCanvas.css';
|
||||
|
||||
const BackgroundCanvas = ({ theme = 'light' }) => {
|
||||
const canvasRef = useRef(null);
|
||||
const animationRef = useRef(null);
|
||||
const jointsRef = useRef([]);
|
||||
const cameraRef = useRef(null);
|
||||
const keysRef = useRef(new Array(127).fill(0));
|
||||
const worldRef = useRef({ width: 0, height: 0 });
|
||||
const themeRef = useRef(theme);
|
||||
|
||||
class Camera {
|
||||
constructor(position, zoom) {
|
||||
this.position = position;
|
||||
this.speed = 3;
|
||||
this.acceleration = { x: 0, y: 0, z: 0 };
|
||||
this.zoom = zoom;
|
||||
}
|
||||
}
|
||||
|
||||
class Joint {
|
||||
constructor(position, vector) {
|
||||
this.position = position;
|
||||
this.vector = vector;
|
||||
this.speed = 0.5;
|
||||
this.w = 2;
|
||||
this.h = 2;
|
||||
this.bone_length = 150;
|
||||
}
|
||||
}
|
||||
|
||||
const generateJoints = (numb, worldWidth, worldHeight) => {
|
||||
const arr = new Array(numb).fill(0);
|
||||
arr.forEach((v, i) => {
|
||||
arr[i] = new Joint(
|
||||
{
|
||||
x: Math.random() * worldWidth,
|
||||
y: Math.random() * worldHeight,
|
||||
},
|
||||
{
|
||||
x: Math.random() * 2 - 1,
|
||||
y: Math.random() * 2 - 1,
|
||||
}
|
||||
);
|
||||
});
|
||||
return arr;
|
||||
};
|
||||
|
||||
const moveJoints = (joints, world) => {
|
||||
joints.forEach((joint) => {
|
||||
joint.position.x += joint.vector.x * joint.speed;
|
||||
joint.position.y += joint.vector.y * joint.speed;
|
||||
|
||||
if (joint.position.x < 0) joint.position.x = world.width;
|
||||
if (joint.position.x > world.width) joint.position.x = 0;
|
||||
if (joint.position.y < 0) joint.position.y = world.height;
|
||||
if (joint.position.y > world.height) joint.position.y = 0;
|
||||
});
|
||||
};
|
||||
|
||||
const drawJoints = (ctx, joints, camera, view, theme) => {
|
||||
const len = joints.length;
|
||||
|
||||
let lineColor, pointColor, backgroundColor;
|
||||
if (theme === 'dark') {
|
||||
backgroundColor = '#000000';
|
||||
lineColor = '#FFFFFF';
|
||||
pointColor = '#F5EEE6';
|
||||
} else {
|
||||
backgroundColor = '#FFFFFF';
|
||||
lineColor = '#131313';
|
||||
pointColor = '#041c40';
|
||||
}
|
||||
|
||||
ctx.fillStyle = backgroundColor;
|
||||
ctx.fillRect(0, 0, view.width, view.height);
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
for (let j = i + 1; j < len; j += 3) {
|
||||
const length = Math.hypot(
|
||||
joints[j].position.x - joints[i].position.x,
|
||||
joints[j].position.y - joints[i].position.y
|
||||
);
|
||||
|
||||
if (length <= joints[i].bone_length) {
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = lineColor;
|
||||
ctx.lineWidth = camera.zoom * (30 / length);
|
||||
ctx.moveTo(
|
||||
view.width / 2 + (joints[i].position.x - camera.position.x) * camera.zoom,
|
||||
view.height / 2 + (joints[i].position.y - camera.position.y) * camera.zoom
|
||||
);
|
||||
ctx.lineTo(
|
||||
view.width / 2 + (joints[j].position.x - camera.position.x) * camera.zoom,
|
||||
view.height / 2 + (joints[j].position.y - camera.position.y) * camera.zoom
|
||||
);
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
}
|
||||
}
|
||||
|
||||
ctx.fillStyle = pointColor;
|
||||
ctx.fillRect(
|
||||
view.width / 2 + ((joints[i].position.x - camera.position.x) - joints[i].w / 2) * camera.zoom,
|
||||
view.height / 2 + ((joints[i].position.y - camera.position.y) - joints[i].w / 2) * camera.zoom,
|
||||
joints[i].w * camera.zoom,
|
||||
joints[i].h * camera.zoom
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const moveCamera = (camera, keys) => {
|
||||
if (keys[37]) camera.acceleration.x -= camera.speed;
|
||||
if (keys[38]) camera.acceleration.y -= camera.speed;
|
||||
if (keys[39]) camera.acceleration.x += camera.speed;
|
||||
if (keys[40]) camera.acceleration.y += camera.speed;
|
||||
if (keys[188]) camera.acceleration.z += 0.003;
|
||||
if (keys[190]) camera.acceleration.z -= 0.003;
|
||||
|
||||
camera.position.x += camera.acceleration.x;
|
||||
camera.position.y += camera.acceleration.y;
|
||||
camera.zoom += camera.acceleration.z;
|
||||
|
||||
camera.acceleration.x *= 0.96;
|
||||
camera.acceleration.y *= 0.96;
|
||||
camera.acceleration.z *= 0.9;
|
||||
};
|
||||
|
||||
const initCanvas = () => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
const view = {
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
};
|
||||
|
||||
canvas.width = view.width;
|
||||
canvas.height = view.height;
|
||||
|
||||
worldRef.current = {
|
||||
width: view.width * 2,
|
||||
height: view.height * 2,
|
||||
};
|
||||
|
||||
cameraRef.current = new Camera(
|
||||
{
|
||||
x: worldRef.current.width / 2,
|
||||
y: worldRef.current.height / 2,
|
||||
},
|
||||
1
|
||||
);
|
||||
|
||||
jointsRef.current = generateJoints(300, worldRef.current.width, worldRef.current.height);
|
||||
};
|
||||
|
||||
const animate = () => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
const view = {
|
||||
width: canvas.width,
|
||||
height: canvas.height,
|
||||
};
|
||||
|
||||
moveCamera(cameraRef.current, keysRef.current);
|
||||
moveJoints(jointsRef.current, worldRef.current);
|
||||
|
||||
drawJoints(ctx, jointsRef.current, cameraRef.current, view, themeRef.current);
|
||||
|
||||
animationRef.current = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
themeRef.current = theme;
|
||||
}, [theme]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e) => {
|
||||
keysRef.current[e.keyCode] = 1;
|
||||
};
|
||||
|
||||
const handleKeyUp = (e) => {
|
||||
keysRef.current[e.keyCode] = 0;
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
window.addEventListener('keyup', handleKeyUp);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
window.removeEventListener('keyup', handleKeyUp);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
worldRef.current = {
|
||||
width: canvas.width * 2,
|
||||
height: canvas.height * 2,
|
||||
};
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
initCanvas();
|
||||
animate();
|
||||
|
||||
return () => {
|
||||
if (animationRef.current) {
|
||||
cancelAnimationFrame(animationRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="background-canvas"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default BackgroundCanvas;
|
||||
@ -4,44 +4,15 @@ import { Link } from "react-scroll";
|
||||
import LanguageSwitcher from "../LanguageSwitcher/LanguageSwitcher";
|
||||
import "../../index.css";
|
||||
|
||||
const Navbar = () => {
|
||||
const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const [activeSection, setActiveSection] = useState("home");
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
|
||||
// Initialize dark mode
|
||||
useEffect(() => {
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
const shouldEnableDarkMode = savedTheme === "dark" || (!savedTheme && prefersDark);
|
||||
|
||||
setIsDarkMode(shouldEnableDarkMode);
|
||||
if (shouldEnableDarkMode) {
|
||||
document.documentElement.classList.add("dark");
|
||||
}
|
||||
}, []);
|
||||
|
||||
const toggleMenu = () => {
|
||||
setMenuOpen(!menuOpen);
|
||||
};
|
||||
|
||||
// Toggle dark/light mode
|
||||
const toggleDarkMode = () => {
|
||||
const newDarkMode = !isDarkMode;
|
||||
setIsDarkMode(newDarkMode);
|
||||
|
||||
if (newDarkMode) {
|
||||
document.documentElement.classList.add("dark");
|
||||
localStorage.setItem("theme", "dark");
|
||||
} else {
|
||||
document.documentElement.classList.remove("dark");
|
||||
localStorage.setItem("theme", "light");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Handle scroll to update active section
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const sections = ["home", "services", "about", "contact"];
|
||||
@ -70,7 +41,6 @@ const Navbar = () => {
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
// Update document direction when language changes
|
||||
useEffect(() => {
|
||||
if (i18n.language === "ar") {
|
||||
document.documentElement.dir = "rtl";
|
||||
@ -89,9 +59,8 @@ const Navbar = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<nav className="bg-white/10 backdrop-blur-lg fixed top-0 w-full z-50 shadow h-14">
|
||||
<nav className="navbar-theme fixed top-0 w-full z-50 shadow h-14">
|
||||
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto py-2 px-4">
|
||||
{/* الشعار */}
|
||||
<img
|
||||
src="src/assets/TPS-logo.png"
|
||||
className="h-8 sm:h-10 md:h-12 transition-all duration-300"
|
||||
@ -100,19 +69,20 @@ const Navbar = () => {
|
||||
|
||||
{/* الجانب الأيمن */}
|
||||
<div className="flex items-center md:order-2 space-x-1 md:space-x-0 rtl:space-x-reverse relative">
|
||||
<button
|
||||
onClick={toggleDarkMode}
|
||||
{/* زر تبديل الثيم */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
type="button"
|
||||
className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 ml-2 transition-colors duration-200"
|
||||
aria-label={isDarkMode ? "Light Mode" : "Dark Mode"}
|
||||
title={isDarkMode ? "Light Mode" : "Dark Mode"}
|
||||
className="icon-button-theme inline-flex items-center p-2 w-10 h-10 justify-center text-sm"
|
||||
aria-label={currentTheme === "dark" ? "الوضع الفاتح" : "الوضع الداكن"}
|
||||
title={currentTheme === "dark" ? "الوضع الفاتح" : "الوضع الداكن"}
|
||||
>
|
||||
{isDarkMode ? (
|
||||
<svg className="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
{currentTheme === "dark" ? (
|
||||
<svg className="w-5 h-5 text-secondary" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<svg className="w-5 h-5 text-primary" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
|
||||
</svg>
|
||||
)}
|
||||
@ -125,7 +95,7 @@ const Navbar = () => {
|
||||
<button
|
||||
onClick={toggleMenu}
|
||||
type="button"
|
||||
className="inline-flex items-center right--30 p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 ml-2"
|
||||
className="icon-button-theme inline-flex items-center p-2 w-10 h-10 justify-center text-sm md:hidden"
|
||||
aria-controls="navbar-menu"
|
||||
aria-expanded={menuOpen}
|
||||
>
|
||||
@ -149,9 +119,10 @@ const Navbar = () => {
|
||||
}`}
|
||||
id="navbar-menu"
|
||||
>
|
||||
<ul className="flex flex-col md:flex-row bg-white dark:bg-gray-900 md:bg-transparent md:dark:bg-transparent p-4 md:p-0 rounded-lg shadow-md md:shadow-none space-y-2 md:space-y-0 md:space-x-6 mt-4 md:mt-0 divide-y divide-gray-200 md:divide-y-0">
|
||||
<ul className="flex flex-col md:flex-row p-4 md:p-0 rounded-lg space-y-2 md:space-y-0 md:space-x-6 mt-4 md:mt-0 divide-y md:divide-y-0"
|
||||
style={{ borderColor: 'var(--border-color)' }}>
|
||||
{navItems.map((item) => (
|
||||
<li key={item.key} className="pt-2 md:pt-0">
|
||||
<li key={item.key} className="pt-2 md:pt-0 first:pt-0 md:first:pt-0">
|
||||
<Link
|
||||
to={item.key}
|
||||
smooth
|
||||
@ -159,10 +130,8 @@ const Navbar = () => {
|
||||
spy={true}
|
||||
offset={0}
|
||||
onSetActive={() => setActiveSection(item.key)}
|
||||
className={`block text-center md:inline cursor-pointer text-lg font-semibold transition duration-200 ${
|
||||
activeSection === item.key
|
||||
? "text-yellow-500"
|
||||
: "text-gray-800 dark:text-white hover:text-yellow-500"
|
||||
className={`nav-link-theme block text-center md:inline cursor-pointer text-lg px-4 py-2 rounded-lg ${
|
||||
activeSection === item.key ? "nav-link-active" : ""
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
@ -176,4 +145,4 @@ const Navbar = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
export default Navbar;
|
||||
@ -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;
|
||||
|
||||
|
||||
|
||||
136
src/index.css
136
src/index.css
@ -3,127 +3,33 @@
|
||||
@tailwind utilities;
|
||||
@layer base {
|
||||
:root {
|
||||
--bg-color: #ffffff;
|
||||
--surface-color: #f8fafc;
|
||||
--text-color: #1e293b;
|
||||
--border-color: #e2e8f0;
|
||||
--primary-color: #5761dd;
|
||||
--secondary-color: #3c3c3c;
|
||||
--accent-color: #3639a3;
|
||||
--primary: #041c40;
|
||||
--secondary: #e06923;
|
||||
--tertiary: #313131;
|
||||
--bg-color: #F5EEE6;
|
||||
--text-color: #313131;
|
||||
--border-color: #d1c9be;
|
||||
}
|
||||
.dark {
|
||||
--bg-color: #080613;
|
||||
--surface-color: #12143b;
|
||||
--text-color: #f1f5f9;
|
||||
--border-color: #3f446a;
|
||||
--primary-color: #3639a3;
|
||||
--secondary-color: #3f446a;
|
||||
--accent-color: #5761dd;
|
||||
--primary: #041c40;
|
||||
--secondary: #e06923;
|
||||
--tertiary: #313131;
|
||||
--bg-color: #313131;
|
||||
--text-color: #F5EEE6;
|
||||
--border-color: #4a4a4a;
|
||||
}
|
||||
body {
|
||||
@apply bg-theme text-theme transition-colors duration-300;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.theme-container {
|
||||
@apply transition-colors duration-300;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
.theme-surface {
|
||||
@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 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 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 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 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 shadow-md border-b transition-colors duration-300;
|
||||
background-color: var(--surface-color);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
.theme-nav-link {
|
||||
@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 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 transition-colors duration-300;
|
||||
background-color: var(--surface-color);
|
||||
}
|
||||
.theme-heading {
|
||||
@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 mb-8;
|
||||
color: var(--text-color);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.theme-text {
|
||||
@apply leading-relaxed;
|
||||
color: var(--text-color);
|
||||
opacity: 0.9;
|
||||
}
|
||||
.theme-footer {
|
||||
@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);
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
21
src/main.jsx
21
src/main.jsx
@ -1,10 +1,15 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
import './index.css';
|
||||
import './App.css';
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
document.documentElement.style.setProperty('--bg-color', '#F5EEE6');
|
||||
document.documentElement.style.setProperty('--text-color', '#131313');
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
</React.StrictMode>
|
||||
);
|
||||
@ -1,29 +1,23 @@
|
||||
export default {
|
||||
module.exports = {
|
||||
darkMode: 'class',
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
theme: {
|
||||
DEFAULT: 'var(--bg-color)',
|
||||
},
|
||||
surface: {
|
||||
DEFAULT: 'var(--surface-color)',
|
||||
},
|
||||
border: {
|
||||
theme: 'var(--border-color)',
|
||||
},
|
||||
primary: {
|
||||
light: '#5761dd',
|
||||
DEFAULT: 'var(--primary-color)',
|
||||
dark: '#3639a3',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: 'var(--secondary-color)',
|
||||
},
|
||||
primary: '#041c40',
|
||||
secondary: '#e06923',
|
||||
'dark-bg': '#313131',
|
||||
'light-bg': '#F5EEE6',
|
||||
},
|
||||
backdropBlur: {
|
||||
'xs': '2px',
|
||||
'sm': '4px',
|
||||
'md': '8px',
|
||||
'lg': '12px',
|
||||
'xl': '20px',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,7 +1,19 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
plugins: [react()],
|
||||
css: {
|
||||
postcss: './postcss.config.js',
|
||||
},
|
||||
build: {
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
'react-vendor': ['react', 'react-dom'],
|
||||
'animation-vendor': ['three', 'styled-components', 'framer-motion'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user