73 lines
2.3 KiB
React
73 lines
2.3 KiB
React
|
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";
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
AOS.init({ duration: 1000, once: false });
|
||
|
|
|
||
|
|
const handleScroll = () => {
|
||
|
|
AOS.refresh();
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener("scroll", handleScroll);
|
||
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
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)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<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>
|
||
|
|
|
||
|
|
{/* مربع النص المتراكب */}
|
||
|
|
<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"
|
||
|
|
>
|
||
|
|
<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>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default About;
|