nav+ departments+ home
This commit is contained in:
@ -1,4 +1,3 @@
|
||||
// DepartmentDetail.jsx
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import d1 from "../../../../src/assets/Images/d1.jpeg";
|
||||
@ -49,15 +48,15 @@ function ProjectsTimeline({
|
||||
|
||||
const stop1 = document.createElementNS(svgNS, "stop");
|
||||
stop1.setAttribute("offset", "0%");
|
||||
stop1.setAttribute("style", "stop-color:#ea580c;stop-opacity:1");
|
||||
stop1.setAttribute("style", "stop-color:#0f172a;stop-opacity:1");
|
||||
|
||||
const stop2 = document.createElementNS(svgNS, "stop");
|
||||
stop2.setAttribute("offset", "50%");
|
||||
stop2.setAttribute("style", "stop-color:#dc2626;stop-opacity:1");
|
||||
stop2.setAttribute("style", "stop-color:#f97316;stop-opacity:1");
|
||||
|
||||
const stop3 = document.createElementNS(svgNS, "stop");
|
||||
stop3.setAttribute("offset", "100%");
|
||||
stop3.setAttribute("style", "stop-color:#b91c1c;stop-opacity:1");
|
||||
stop3.setAttribute("style", "stop-color:#9ca3af;stop-opacity:1");
|
||||
|
||||
gradient.appendChild(stop1);
|
||||
gradient.appendChild(stop2);
|
||||
@ -96,7 +95,7 @@ function ProjectsTimeline({
|
||||
path.setAttribute("stroke-width", "4");
|
||||
path.setAttribute("fill", "none");
|
||||
path.setAttribute("stroke-linecap", "round");
|
||||
path.style.filter = "drop-shadow(0 2px 8px rgba(251, 191, 36, 0.3))";
|
||||
path.style.filter = "drop-shadow(0 2px 8px rgba(15,23,42,0.22))";
|
||||
svgEl.appendChild(path);
|
||||
}
|
||||
}, [itemsRefs]);
|
||||
@ -193,31 +192,30 @@ function ProjectsTimeline({
|
||||
}, [itemsRefs, drawCurvedLines, projects.length]);
|
||||
|
||||
const css = `
|
||||
:root{--bg-start:#0f172a;--bg-mid:#1e293b;--bg-end:#334155}
|
||||
:root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
|
||||
.projects-timeline-root { direction: rtl; min-height: 100%; }
|
||||
.timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.2) transparent; }
|
||||
.timeline-scroll::-webkit-scrollbar{ height:10px;}
|
||||
.timeline-scroll::-webkit-scrollbar-track{ background: transparent; border-radius:10px; margin:0 8px;}
|
||||
.timeline-scroll::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.12); border-radius:10px; border:2px solid transparent; background-clip:padding-box;}
|
||||
.timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
|
||||
.timeline-scroll::-webkit-scrollbar{ display:none; height:0; }
|
||||
.timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
|
||||
.svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
|
||||
.timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; }
|
||||
.year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background:linear-gradient(135deg,#dc2626 0%,#b91c1c 50%,#991b1b 100%); color:white; box-shadow:0 8px 25px rgba(220,38,38,.4); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:5px solid rgba(255,255,255,.25); position:relative; z-index:2; backdrop-filter: blur(10px); }
|
||||
.year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(220,38,38,.3); opacity:0; transition:all .6s ease; }
|
||||
.timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 15px 50px rgba(220,38,38,.5); border-color: rgba(255,255,255,.5); transform: translateY(-15px) scale(1.05); animation: glow 2s ease-in-out infinite; }
|
||||
.year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; }
|
||||
.timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
|
||||
.timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
|
||||
@keyframes glow { 0%,100%{ filter: brightness(1);} 50%{ filter: brightness(1.15);} }
|
||||
@keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.3); opacity:0;} }
|
||||
.project-card { margin-top:40px; background: #ffffff; border-radius:20px; padding:28px; min-width:320px; max-width:380px; box-shadow:0 8px 30px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04); opacity:.6; transform: scale(.92) translateY(10px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(251,191,36,.1); position:relative; overflow:hidden;}
|
||||
.project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left,#dc2626,#b91c1c,#991b1b); opacity:0; transition:opacity .6s ease;}
|
||||
.timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 20px 60px rgba(0,0,0,.12),0 5px 15px rgba(0,0,0,.06),0 0 0 1px rgba(220,38,38,.15); border-color: rgba(220,38,38,.25); }
|
||||
@keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
|
||||
.project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
|
||||
.project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
|
||||
.timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
|
||||
.timeline-item.active .project-card::before { opacity:1; }
|
||||
.project-text { font-size:15px; line-height:2; color:#1f2937; font-weight:500; }
|
||||
.project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; }
|
||||
.project-text li { margin-bottom:12px; padding-right:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
|
||||
.timeline-item.active .project-text li:hover { background: rgba(220,38,38,.08); transform: translateX(-4px); }
|
||||
.timeline-item.active .project-text li:hover { background: rgba(249,115,22,.06); transform: translateX(-4px); }
|
||||
.scroll-indicator { position:absolute; bottom:30px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
|
||||
.scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:#dc2626; box-shadow:0 6px 20px rgba(0,0,0,.15); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(10px); }
|
||||
.scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fee2e2 100%); transform: scale(1.15); box-shadow:0 10px 35px rgba(220,38,38,.25); }
|
||||
.scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:var(--accent); box-shadow:0 6px 20px rgba(2,6,23,.35); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(6px); }
|
||||
.scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fff8f2 100%); transform: scale(1.12); box-shadow:0 10px 35px rgba(15,23,42,.22); }
|
||||
.scroll-btn:active:not(:disabled){ transform: scale(1.05); }
|
||||
.scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
|
||||
@media (max-width:768px){
|
||||
@ -234,7 +232,7 @@ function ProjectsTimeline({
|
||||
.projects-timeline-root.plain-bleed .project-card { max-width:420px; }
|
||||
`;
|
||||
|
||||
const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%, #475569 100%)" };
|
||||
const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
|
||||
|
||||
return (
|
||||
<div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`}>
|
||||
@ -638,4 +636,4 @@ export default function DepartmentDetail() {
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user