fixed the navbar and edited the themes config and edited the home page and enhancced the canves background joints and lines with more shapes
All checks were successful
Build frontend / build (push) Successful in 37s
All checks were successful
Build frontend / build (push) Successful in 37s
This commit is contained in:
mouazkh
@ -9,7 +9,7 @@ const StyledWrapper = styled.div`
|
||||
.theme-toggle-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: ${props => props.theme === 'dark' ? '#FFD700' : '#FF8C00'};
|
||||
color: ${(props) => (props.theme === "dark" ? "#FFD700" : "#FF8C00")};
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 50%;
|
||||
@ -18,12 +18,15 @@ const StyledWrapper = styled.div`
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 1.5rem;
|
||||
|
||||
|
||||
&:hover {
|
||||
background: ${props => props.theme === 'dark' ? 'rgba(255, 215, 0, 0.1)' : 'rgba(255, 140, 0, 0.1)'};
|
||||
background: ${(props) =>
|
||||
props.theme === "dark"
|
||||
? "rgba(255, 215, 0, 0.1)"
|
||||
: "rgba(255, 140, 0, 0.1)"};
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
@ -46,10 +49,11 @@ const ThemeToggle = ({ currentTheme, toggleTheme }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const LanguageSwitcher = ({ i18n }) => {
|
||||
const LanguageSwitcher = ({ i18n, currentTheme }) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef(null);
|
||||
const current = i18n.language?.startsWith("ar") ? "ar" : "en";
|
||||
const isDark = currentTheme === "dark";
|
||||
|
||||
useEffect(() => {
|
||||
const onDocClick = (e) => {
|
||||
@ -66,7 +70,14 @@ const LanguageSwitcher = ({ i18n }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={ref} style={{ position: "relative", display: "inline-flex", alignItems: "center" }}>
|
||||
<div
|
||||
ref={ref}
|
||||
style={{
|
||||
position: "relative",
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-haspopup="true"
|
||||
@ -77,7 +88,7 @@ const LanguageSwitcher = ({ i18n }) => {
|
||||
borderRadius: "50%",
|
||||
border: "none",
|
||||
background: "transparent",
|
||||
color: "inherit",
|
||||
color: isDark ? "#e6e6e6" : "#313131",
|
||||
cursor: "pointer",
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
@ -98,12 +109,15 @@ const LanguageSwitcher = ({ i18n }) => {
|
||||
position: "absolute",
|
||||
top: "calc(100% + 8px)",
|
||||
right: 0,
|
||||
background: "linear-gradient(180deg,#111827,#0b1220)",
|
||||
background: isDark
|
||||
? "linear-gradient(180deg, #446a85, #2d4b5f)"
|
||||
: "#ffffff",
|
||||
borderRadius: 8,
|
||||
boxShadow: "0 8px 30px rgba(2,6,23,0.5)",
|
||||
padding: "6px",
|
||||
zIndex: 60,
|
||||
minWidth: 96,
|
||||
border: isDark ? "none" : "1px solid #e5e7eb",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
@ -117,8 +131,13 @@ const LanguageSwitcher = ({ i18n }) => {
|
||||
textAlign: "left",
|
||||
padding: "8px 10px",
|
||||
borderRadius: 6,
|
||||
background: current === "en" ? "rgba(255,183,77,0.12)" : "transparent",
|
||||
color: "inherit",
|
||||
background:
|
||||
current === "en"
|
||||
? isDark
|
||||
? "rgba(255,183,77,0.12)"
|
||||
: "#f3f4f6"
|
||||
: "transparent",
|
||||
color: isDark ? "inherit" : "#313131",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
transition: "all 0.2s ease",
|
||||
@ -139,8 +158,13 @@ const LanguageSwitcher = ({ i18n }) => {
|
||||
textAlign: "left",
|
||||
padding: "8px 10px",
|
||||
borderRadius: 6,
|
||||
background: current === "ar" ? "rgba(255,183,77,0.12)" : "transparent",
|
||||
color: "inherit",
|
||||
background:
|
||||
current === "ar"
|
||||
? isDark
|
||||
? "rgba(255,183,77,0.12)"
|
||||
: "#f3f4f6"
|
||||
: "transparent",
|
||||
color: isDark ? "inherit" : "#313131",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
transition: "all 0.2s ease",
|
||||
@ -169,11 +193,16 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
const scrollPosition = window.scrollY + 140;
|
||||
|
||||
for (const section of sections) {
|
||||
const element = document.getElementById(section) || document.querySelector(`[name="${section}"]`);
|
||||
const element =
|
||||
document.getElementById(section) ||
|
||||
document.querySelector(`[name="${section}"]`);
|
||||
if (element) {
|
||||
const offsetTop = element.offsetTop;
|
||||
const offsetHeight = element.offsetHeight;
|
||||
if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
|
||||
if (
|
||||
scrollPosition >= offsetTop &&
|
||||
scrollPosition < offsetTop + offsetHeight
|
||||
) {
|
||||
setActiveSection(section);
|
||||
break;
|
||||
}
|
||||
@ -224,11 +253,13 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
}
|
||||
|
||||
.glass-nav {
|
||||
background: linear-gradient(180deg, rgba(75,85,99,0.96), rgba(55,65,81,0.9));
|
||||
color: #e6e6e6;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
background: rgba(227, 232, 236, 0.9);
|
||||
color: #313131;
|
||||
border-bottom: 1px solid rgba(4, 28, 64, 0.1);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
@ -260,35 +291,35 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
.nav-link:hover .nav-pill {
|
||||
transform: translateY(-6px) scale(1.06);
|
||||
box-shadow:
|
||||
0 14px 40px rgba(2,6,23,0.28),
|
||||
0 6px 20px rgba(255,122,24,0.08);
|
||||
background: linear-gradient(90deg, #ffd27a, #ff8a00);
|
||||
color: #050505;
|
||||
0 14px 40px rgba(224, 105, 35, 0.28),
|
||||
0 6px 20px rgba(224, 105, 35, 0.08);
|
||||
background: #e06923;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.nav-link.active .nav-pill,
|
||||
.mobile-drawer .nav-pill.active {
|
||||
background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18) !important;
|
||||
color: #0b0b0b !important;
|
||||
background: #e06923 !important;
|
||||
color: #ffffff !important;
|
||||
transform: translateY(-3px) scale(1.03);
|
||||
box-shadow: 0 8px 26px rgba(255, 122, 24, 0.16), 0 2px 6px rgba(0,0,0,0.12);
|
||||
box-shadow: 0 8px 26px rgba(224, 105, 35, 0.25), 0 2px 6px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.nav-link:active .nav-pill,
|
||||
.mobile-drawer a:active .nav-pill {
|
||||
transition-duration: 0s !important;
|
||||
transform: translateY(-3px) scale(1.03) !important;
|
||||
background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18) !important;
|
||||
color: #0b0b0b !important;
|
||||
box-shadow: 0 8px 26px rgba(255, 122, 24, 0.16) !important;
|
||||
background: #e06923 !important;
|
||||
color: #ffffff !important;
|
||||
box-shadow: 0 8px 26px rgba(224, 105, 35, 0.25) !important;
|
||||
}
|
||||
|
||||
.nav-link:focus-visible .nav-pill,
|
||||
.mobile-drawer a:focus-visible .nav-pill {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 6px rgba(255,165,0,0.14), 0 8px 30px rgba(255,122,24,0.12);
|
||||
background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18);
|
||||
color: #0b0b0b;
|
||||
box-shadow: 0 0 0 6px rgba(224, 105, 35, 0.14), 0 8px 30px rgba(224, 105, 35, 0.12);
|
||||
background: #e06923;
|
||||
color: #ffffff;
|
||||
transform: translateY(-3px) scale(1.02);
|
||||
}
|
||||
|
||||
@ -345,7 +376,11 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
<div className="mx-auto max-w-screen-xl">
|
||||
<div className="flex items-center justify-between h-14 px-2 md:px-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div aria-hidden className="logo-placeholder" style={{ width: 36, height: 36 }} />
|
||||
<div
|
||||
aria-hidden
|
||||
className="logo-placeholder"
|
||||
style={{ width: 36, height: 36 }}
|
||||
/>
|
||||
<div className="hidden md:flex items-center space-x-6 rtl:space-x-reverse ml-6">
|
||||
<ul className="flex items-center gap-6">
|
||||
{navItems.map((item) => {
|
||||
@ -361,13 +396,25 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
onSetActive={() => setActiveSection(item.key)}
|
||||
onClick={() => {
|
||||
setActiveSection(item.key);
|
||||
if (item.key === "home") scroll.scrollToTop({ duration: 600 });
|
||||
if (item.key === "home")
|
||||
scroll.scrollToTop({ duration: 600 });
|
||||
if (menuOpen) setMenuOpen(false);
|
||||
}}
|
||||
className={`nav-link cursor-pointer text-sm md:text-lg ${isActive ? "active" : "text-slate-200 dark:text-slate-200/90"}`}
|
||||
className={`nav-link cursor-pointer text-sm md:text-lg ${isActive ? "active" : ""}`}
|
||||
style={{
|
||||
color: isActive
|
||||
? ""
|
||||
: currentTheme === "dark"
|
||||
? "rgba(229,231,235,0.95)"
|
||||
: "#313131",
|
||||
}}
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
>
|
||||
<span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span>
|
||||
<span
|
||||
className={`nav-pill ${isActive ? "active" : ""}`}
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
@ -378,13 +425,22 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
|
||||
<div className="flex items-center gap-3 md:gap-5">
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
<LanguageSwitcher i18n={i18n} />
|
||||
<ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
|
||||
<LanguageSwitcher i18n={i18n} currentTheme={currentTheme} />
|
||||
<ThemeToggle
|
||||
currentTheme={currentTheme}
|
||||
toggleTheme={toggleTheme}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:hidden w-full">
|
||||
{!isRtl ? (
|
||||
<div style={{ display: "flex", alignItems: "center", width: "100%" }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<button
|
||||
onClick={() => setMenuOpen((s) => !s)}
|
||||
@ -394,23 +450,56 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
style={{ marginRight: 8 }}
|
||||
>
|
||||
<span className="sr-only">Open main menu</span>
|
||||
<svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
|
||||
{menuOpen ? <path d="M6 18L18 6M6 6l12 12" /> : <><path d="M3 6h18" /><path d="M3 12h18" /><path d="M3 18h18" /></>}
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden
|
||||
>
|
||||
{menuOpen ? (
|
||||
<path d="M6 18L18 6M6 6l12 12" />
|
||||
) : (
|
||||
<>
|
||||
<path d="M3 6h18" />
|
||||
<path d="M3 12h18" />
|
||||
<path d="M3 18h18" />
|
||||
</>
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1 }} />
|
||||
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||||
<ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
|
||||
<div
|
||||
style={{ display: "flex", alignItems: "center", gap: 8 }}
|
||||
>
|
||||
<ThemeToggle
|
||||
currentTheme={currentTheme}
|
||||
toggleTheme={toggleTheme}
|
||||
/>
|
||||
<LanguageSwitcher i18n={i18n} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: "flex", alignItems: "center", width: "100%" }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||||
<ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ display: "flex", alignItems: "center", gap: 8 }}
|
||||
>
|
||||
<ThemeToggle
|
||||
currentTheme={currentTheme}
|
||||
toggleTheme={toggleTheme}
|
||||
/>
|
||||
<LanguageSwitcher i18n={i18n} />
|
||||
</div>
|
||||
|
||||
@ -425,8 +514,25 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
style={{ marginLeft: 8 }}
|
||||
>
|
||||
<span className="sr-only">Open main menu</span>
|
||||
<svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
|
||||
{menuOpen ? <path d="M6 18L18 6M6 6l12 12" /> : <><path d="M3 6h18" /><path d="M3 12h18" /><path d="M3 18h18" /></>}
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden
|
||||
>
|
||||
{menuOpen ? (
|
||||
<path d="M6 18L18 6M6 6l12 12" />
|
||||
) : (
|
||||
<>
|
||||
<path d="M3 6h18" />
|
||||
<path d="M3 12h18" />
|
||||
<path d="M3 18h18" />
|
||||
</>
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
@ -454,14 +560,19 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
offset={-110}
|
||||
onSetActive={() => setActiveSection(item.key)}
|
||||
onClick={() => {
|
||||
setActiveSection(item.key);
|
||||
if (item.key === "home") scroll.scrollToTop({ duration: 600 });
|
||||
setActiveSection(item.key);
|
||||
if (item.key === "home")
|
||||
scroll.scrollToTop({ duration: 600 });
|
||||
setMenuOpen(false);
|
||||
}}
|
||||
className={`block w-full text-right px-3 py-2 rounded-md font-semibold text-base ${isActive ? "text-amber-400" : "text-slate-200 hover:text-amber-400"}`}
|
||||
className={`block w-full text-right px-3 py-2 rounded-md font-semibold text-base ${isActive ? "text-amber-400" : "text-[#313131] dark:text-slate-200 hover:text-amber-400"}`}
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
>
|
||||
<span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span>
|
||||
<span
|
||||
className={`nav-pill ${isActive ? "active" : ""}`}
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
@ -475,4 +586,4 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
export default Navbar;
|
||||
|
||||
Reference in New Issue
Block a user