From 8abc70dcf1f637d8b066dc7d734a99b48edf1c20 Mon Sep 17 00:00:00 2001
From: Behrad <BehradBahadory@gmail.com>
Date: Wed, 9 Sep 2026 14:34:18 +0330
Subject: [PATCH] Add new updated site

---
 docker-compose.yml                            |  1 +
 frontend/src/components/FloatingContact.tsx   |  8 +-
 .../src/components/home/FeaturedProjects.tsx  | 55 ++++++-------
 frontend/src/components/home/Testimonials.tsx | 50 ++++++------
 frontend/src/components/home/Timeline.tsx     | 23 +++---
 frontend/src/pages/Investment.tsx             | 41 +++++-----
 frontend/src/pages/Projects.tsx               | 77 ++++++++++---------
 7 files changed, 134 insertions(+), 121 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 21ecb20..5e5147c 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -47,6 +47,7 @@ services:
       retries: 12
     ports:
       - "9001:9001" # کنسول MinIO — در محیط واقعی با فایروال ببندید
+      - "19000:9000" # دسترسی مستقیم/لوکال به MinIO (اختیاری — تصاویر از مسیر /media سرو می‌شوند)
     labels:
       - traefik.enable=true
       - traefik.http.routers.media.rule=PathPrefix(`/media`)
diff --git a/frontend/src/components/FloatingContact.tsx b/frontend/src/components/FloatingContact.tsx
index 2612f07..fd2031f 100644
--- a/frontend/src/components/FloatingContact.tsx
+++ b/frontend/src/components/FloatingContact.tsx
@@ -9,7 +9,7 @@ export function FloatingContact() {
     <a
       href={brand.phone_href}
       aria-label="تماس تلفنی با گروه ساختمانی آرامش"
-      className="group fixed bottom-8 left-8 z-40 flex h-14 w-14 items-center justify-center rounded-full border border-copper/50 bg-char/80 text-copper backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.3),0_12px_35px_rgba(0,0,0,0.5),0_0_20px_rgba(197,143,92,0.25)] transition-all duration-500 ease-lux hover:scale-110 hover:border-copper hover:bg-copper hover:text-char hover:shadow-[0_0_35px_rgba(197,143,92,0.7)] active:scale-95"
+      className="group fixed bottom-8 left-8 z-40 flex h-14 w-14 items-center justify-center rounded-full border border-copper/50 bg-char/80 text-copper backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.1),0_12px_35px_rgba(0,0,0,0.5),0_0_20px_rgba(197,143,92,0.25)] transition-all duration-500 ease-lux hover:scale-110 hover:border-copper hover:bg-copper hover:text-char hover:shadow-[0_0_35px_rgba(197,143,92,0.7)] active:scale-95"
     >
       {/* پالس هاله نوری در پس‌زمینه مانند رادار */}
       <span
@@ -17,12 +17,6 @@ export function FloatingContact() {
         className="pointer-events-none absolute inset-0 rounded-full border border-copper/60 animate-ping opacity-30"
       />
 
-      {/* خط انعکاس نوری کریستال در بالای گوی */}
-      <span
-        aria-hidden="true"
-        className="pointer-events-none absolute -top-1/2 left-0 right-0 h-full rounded-full bg-gradient-to-b from-white/25 to-transparent"
-      />
-
       {/* آیکون تلفن با انیمیشن چرخش ظریف در زمان هاور */}
       <PhoneIcon className="relative z-10 h-6 w-6 transition-transform duration-300 ease-lux group-hover:rotate-12" />
     </a>
diff --git a/frontend/src/components/home/FeaturedProjects.tsx b/frontend/src/components/home/FeaturedProjects.tsx
index 04069f8..c473fc2 100644
--- a/frontend/src/components/home/FeaturedProjects.tsx
+++ b/frontend/src/components/home/FeaturedProjects.tsx
@@ -36,33 +36,36 @@ export function FeaturedProjects() {
       <div className="mx-auto max-w-site px-6 lg:px-10">
         <SectionHeading title={heading.title} lead={heading.lead} headingKey="featured_projects" />
 
-        {/* دکمه‌های فیلتر کپسولی شیشه‌ای مات */}
-        <div className="mt-10 flex flex-wrap items-center gap-3" role="tablist" aria-label="فیلتر وضعیت پروژه">
-          {FILTERS.map((filter) => {
+        {/* دکمه‌های فیلتر مینیمال و شیشه‌ای (بدون کادر) */}
+        <div className="mt-10 flex items-center justify-center gap-4 md:gap-6" role="tablist" aria-label="فیلتر وضعیت پروژه">
+          {FILTERS.map((filter, index) => {
             const isSelected = status === filter.key
             return (
-              <button
-                key={filter.key}
-                type="button"
-                role="tab"
-                aria-selected={isSelected}
-                onClick={() => setStatus(filter.key)}
-                className={`group relative flex items-center justify-center overflow-hidden rounded-full px-7 py-3 text-sm transition-all duration-300 ease-out active:scale-95 cursor-pointer select-none ${
-                  isSelected
-                    ? 'border border-copper bg-copper font-bold text-char shadow-[0_0_25px_rgba(197,143,92,0.45),inset_0_1px_1px_rgba(255,255,255,0.4)]'
-                    : 'border border-white/15 bg-white/[0.04] font-light text-ivory/70 backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)] hover:border-copper/60 hover:bg-white/[0.08] hover:text-ivory hover:shadow-[0_0_20px_rgba(197,143,92,0.2)]'
-                }`}
-              >
-                {/* خط بازتاب نوری لبه شیشه */}
-                <span className="pointer-events-none absolute -top-1/2 left-0 right-0 h-full rounded-full bg-gradient-to-b from-white/20 to-transparent" />
-
-                <span className="relative z-10 transition-colors duration-300 ease-out">
-                  <InlineEdit
-                    value={filter.label}
-                    onSave={(v) => saveStatusLabel(filter.key, v)}
-                  />
-                </span>
-              </button>
+              <React.Fragment key={filter.key}>
+                {/* خط جداکننده بین دکمه‌ها */}
+                {index > 0 && (
+                  <span className="h-6 w-[2px] rounded-full bg-ivory/10" aria-hidden="true" />
+                )}
+                
+                <button
+                  type="button"
+                  role="tab"
+                  aria-selected={isSelected}
+                  onClick={() => setStatus(filter.key)}
+                  className={`group relative rounded-lg px-6 py-2.5 text-sm font-medium transition-all duration-300 ease-lux active:scale-95 cursor-pointer select-none backdrop-blur-md ${
+                    isSelected
+                      ? 'bg-copper/15 text-copper shadow-[0_4px_15px_rgba(197,143,92,0.1)]'
+                      : 'bg-transparent text-ivory/60 hover:bg-white/5 hover:text-ivory'
+                  }`}
+                >
+                  <span className="relative z-10 transition-colors duration-300 ease-out">
+                    <InlineEdit
+                      value={filter.label}
+                      onSave={(v) => saveStatusLabel(filter.key, v)}
+                    />
+                  </span>
+                </button>
+              </React.Fragment>
             )
           })}
         </div>
@@ -94,7 +97,7 @@ export function FeaturedProjects() {
           </AnimatePresence>
         </div>
 
-        {/* دکمه مشاهده همه پروژه‌ها: کپسولی شیشه‌ای با گوی آیکون متحرک */}
+        {/* دکمه مشاهده همه پروژه‌ها */}
         {heading.cta_label && heading.cta_href && (
           <Reveal delay={0.1}>
             <div className="mt-12 flex justify-center">
diff --git a/frontend/src/components/home/Testimonials.tsx b/frontend/src/components/home/Testimonials.tsx
index e554f22..e492bff 100644
--- a/frontend/src/components/home/Testimonials.tsx
+++ b/frontend/src/components/home/Testimonials.tsx
@@ -40,41 +40,45 @@ export function Testimonials() {
             </motion.blockquote>
           </AnimatePresence>
 
-          <div className="mt-10 flex items-center justify-center gap-4">
+          <div className="mt-12 flex items-center justify-center gap-5">
             <button
               type="button"
               onClick={() => go(1)}
               aria-label="نظر قبلی"
-              className="flex h-11 w-11 items-center justify-center border border-ivory/20 text-ivory/70 transition-colors duration-200 ease-lux hover:border-copper hover:text-copper">
-
-              <ChevronRightIcon className="h-5 w-5" />
+              className="group flex h-12 w-12 items-center justify-center rounded-full border border-copper/35 bg-char/80 text-ivory/80 backdrop-blur-md shadow-[0_4px_20px_rgba(0,0,0,0.35)] transition-all duration-300 ease-lux hover:scale-110 hover:border-copper hover:bg-copper hover:text-char hover:shadow-[0_0_25px_rgba(197,143,92,0.45)] active:scale-95"
+            >
+              <ChevronRightIcon className="h-5 w-5 transition-transform duration-300 ease-lux group-hover:translate-x-0.5" />
             </button>
-            <div className="flex gap-2" role="tablist" aria-label="انتخاب نظر">
-              {testimonials.map((t, i) =>
-              <button
-                key={t.id}
-                type="button"
-                role="tab"
-                aria-selected={i === index}
-                aria-label={`نظر ${t.name}`}
-                onClick={() => setIndex(i)}
-                className={`h-1.5 transition-[width,background-color] duration-200 ease-lux ${
-                i === index ? 'w-8 bg-copper' : 'w-3 bg-ivory/25'}`
-                } />
 
-              )}
+            <div className="flex items-center gap-2" role="tablist" aria-label="انتخاب نظر">
+              {testimonials.map((t, i) => (
+                <button
+                  key={t.id}
+                  type="button"
+                  role="tab"
+                  aria-selected={i === index}
+                  aria-label={`نظر ${t.name}`}
+                  onClick={() => setIndex(i)}
+                  className={`h-2 rounded-full transition-all duration-300 ease-lux ${
+                    i === index
+                      ? 'w-8 bg-copper shadow-[0_0_12px_rgba(197,143,92,0.6)]'
+                      : 'w-2.5 bg-ivory/20 hover:bg-ivory/40'
+                  }`}
+                />
+              ))}
             </div>
+
             <button
               type="button"
               onClick={() => go(-1)}
               aria-label="نظر بعدی"
-              className="flex h-11 w-11 items-center justify-center border border-ivory/20 text-ivory/70 transition-colors duration-200 ease-lux hover:border-copper hover:text-copper">
-
-              <ChevronLeftIcon className="h-5 w-5" />
+              className="group flex h-12 w-12 items-center justify-center rounded-full border border-copper/35 bg-char/80 text-ivory/80 backdrop-blur-md shadow-[0_4px_20px_rgba(0,0,0,0.35)] transition-all duration-300 ease-lux hover:scale-110 hover:border-copper hover:bg-copper hover:text-char hover:shadow-[0_0_25px_rgba(197,143,92,0.45)] active:scale-95"
+            >
+              <ChevronLeftIcon className="h-5 w-5 transition-transform duration-300 ease-lux group-hover:-translate-x-0.5" />
             </button>
           </div>
         </div>
       </div>
-    </section>);
-
-}
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/home/Timeline.tsx b/frontend/src/components/home/Timeline.tsx
index a6fe6cb..a952573 100644
--- a/frontend/src/components/home/Timeline.tsx
+++ b/frontend/src/components/home/Timeline.tsx
@@ -17,10 +17,10 @@ function Item({ item, index }: { item: Milestone; index: number }) {
     <li ref={ref} className="relative md:grid md:grid-cols-2 md:gap-16">
       <span
         aria-hidden="true"
-        className={`absolute right-[-5px] top-6 z-10 h-2.5 w-2.5 rounded-full transition-all duration-500 ease-lux md:right-1/2 md:translate-x-1/2 ${
+        className={`absolute right-[-5px] top-8 z-10 h-3 w-3 rounded-full transition-all duration-500 ease-lux md:right-1/2 md:translate-x-1/2 ${
           active
-            ? 'bg-copper shadow-[0_0_0_5px_rgba(213,135,76,0.22)]'
-            : 'bg-ivory/25'
+            ? 'bg-copper shadow-[0_0_15px_rgba(197,143,92,0.6),0_0_0_6px_rgba(213,135,76,0.15)]'
+            : 'bg-ivory/20'
         }`}
       />
 
@@ -33,10 +33,13 @@ function Item({ item, index }: { item: Milestone; index: number }) {
         transition={{ duration: 0.55, ease }}
       >
         <EditableItem resource="timeline" item={item}>
-          <div className="border border-ivory/10 bg-ink p-6 md:p-7">
-            <span className="text-sm font-light text-copper">{item.year}</span>
-            <h3 className="mt-3 text-lg font-bold text-ivory">{item.title}</h3>
-            <p className="mt-3 text-sm font-light leading-8 text-ivory/60">{item.desc}</p>
+          <div className="group relative overflow-hidden rounded-2xl border border-ivory/10 bg-ink/40 p-6 backdrop-blur-md transition-all duration-500 ease-lux hover:-translate-y-1.5 hover:border-copper/50 hover:bg-ink/60 hover:shadow-[0_12px_40px_-10px_rgba(197,143,92,0.35)] md:p-8">
+            {/* لایه نوری ظریف که در هاور روشن می‌شود */}
+            <div className="absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
+            
+            <span className="relative z-10 text-sm font-medium tracking-widest text-copper">{item.year}</span>
+            <h3 className="relative z-10 mt-3 text-xl font-bold text-ivory transition-colors duration-300 group-hover:text-white">{item.title}</h3>
+            <p className="relative z-10 mt-3 text-sm font-light leading-relaxed text-ivory/60 transition-colors duration-300 group-hover:text-ivory/80">{item.desc}</p>
           </div>
         </EditableItem>
       </motion.div>
@@ -66,14 +69,14 @@ export function Timeline() {
           />
         </div>
 
-        <div ref={ref} className="relative mx-auto max-w-4xl">
+        <div ref={ref} className="relative mx-auto mt-20 max-w-4xl">
           <span
             aria-hidden="true"
-            className="absolute inset-y-0 right-0 w-px bg-ivory/12 md:right-1/2"
+            className="absolute inset-y-0 right-0 w-px bg-ivory/10 md:right-1/2"
           />
           <motion.span
             aria-hidden="true"
-            className="absolute inset-y-0 right-0 w-px origin-top bg-copper md:right-1/2"
+            className="absolute inset-y-0 right-0 w-px origin-top bg-gradient-to-b from-copper/80 via-copper to-copper/20 shadow-[0_0_10px_rgba(197,143,92,0.5)] md:right-1/2"
             style={{ scaleY }}
           />
 
diff --git a/frontend/src/pages/Investment.tsx b/frontend/src/pages/Investment.tsx
index 36786ae..51c8e78 100644
--- a/frontend/src/pages/Investment.tsx
+++ b/frontend/src/pages/Investment.tsx
@@ -9,7 +9,7 @@ import { AddItemButton, EditableItem } from '../admin/Editable'
 
 export function Investment() {
   const { investment_models } = useSite()
-    const heading = useSectionHeading('investment_models')
+  const heading = useSectionHeading('investment_models')
 
   return (
     <>
@@ -22,26 +22,29 @@ export function Investment() {
             {investment_models.map((model, i) => (
               <Reveal key={model.id} delay={0.06 * i} className="h-full">
                 <EditableItem resource="investment_models" item={model} className="h-full">
-                <article className="group flex h-full flex-col border border-ivory/10 bg-char p-10 transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
-                  <p className="text-sm font-bold text-copper/80">۰{(i + 1).toLocaleString('fa-IR')}</p>
+                  <article className="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-ivory/10 bg-char/40 p-10 backdrop-blur-md transition-all duration-500 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:bg-char/70 hover:shadow-[0_12px_40px_-10px_rgba(197,143,92,0.35)] transform-gpu">
+                    {/* لایه نوری ظریف که در زمان هاور روشن می‌شود */}
+                    <div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
+                    
+                    <p className="relative z-10 text-sm font-bold text-copper/80">۰{(i + 1).toLocaleString('fa-IR')}</p>
 
-                  <h3 className="mt-6 text-2xl font-bold text-ivory transition-colors duration-300 ease-out group-hover:text-copper">
-                    {model.title}
-                  </h3>
+                    <h3 className="relative z-10 mt-6 text-2xl font-bold text-ivory transition-colors duration-300 ease-out group-hover:text-copper">
+                      {model.title}
+                    </h3>
 
-                  <p className="mt-5 text-sm font-light leading-9 text-ivory/65">{model.desc}</p>
+                    <p className="relative z-10 mt-5 text-sm font-light leading-9 text-ivory/65">{model.desc}</p>
 
-                  <div className="mt-auto pt-10">
-                    <ul className="space-y-4 border-t border-ivory/10 pt-8">
-                      {model.points.map((point) => (
-                        <li key={point} className="flex items-start gap-3 text-sm font-light leading-8 text-ivory/65">
-                         <span className="mt-3.5 h-1 w-1 shrink-0 rounded-full bg-copper transition-transform duration-300 ease-out group-hover:scale-[1.5]" aria-hidden="true" />
-                          {point}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                </article>
+                    <div className="relative z-10 mt-auto pt-10">
+                      <ul className="space-y-4 border-t border-ivory/10 pt-8 transition-colors duration-500 group-hover:border-copper/20">
+                        {model.points.map((point) => (
+                          <li key={point} className="flex items-start gap-3 text-sm font-light leading-8 text-ivory/70 transition-colors duration-300 group-hover:text-ivory">
+                            <span className="mt-3.5 h-1.5 w-1.5 shrink-0 rounded-full bg-copper/60 transition-all duration-300 ease-lux group-hover:scale-125 group-hover:bg-copper group-hover:shadow-[0_0_10px_rgba(197,143,92,0.8)]" aria-hidden="true" />
+                            {point}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  </article>
                 </EditableItem>
               </Reveal>
             ))}
@@ -54,4 +57,4 @@ export function Investment() {
       <ContactSection />
     </>
   )
-}
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Projects.tsx b/frontend/src/pages/Projects.tsx
index c492aa8..1cffb84 100644
--- a/frontend/src/pages/Projects.tsx
+++ b/frontend/src/pages/Projects.tsx
@@ -26,8 +26,9 @@ export function Projects() {
   const doneLabel = useStatusLabel('done');
   const progressLabel = useStatusLabel('progress');
   const FILTERS: {key: ProjectStatus;label: string;}[] = [
-  { key: 'done', label: doneLabel },
-  { key: 'progress', label: progressLabel }];
+    { key: 'done', label: doneLabel },
+    { key: 'progress', label: progressLabel }
+  ];
   const [status, setStatus] = useState<ProjectStatus>('done');
   const list = projects.filter((p) => p.status === status);
 
@@ -35,47 +36,51 @@ export function Projects() {
     <>
       <PageHero pageKey="projects" />
       
-
       <section className="bg-ink py-24 lg:py-32" aria-label="فهرست پروژه‌ها">
         <div className="mx-auto max-w-site px-6 lg:px-10">
-          <div className="flex flex-wrap gap-3" role="tablist" aria-label="فیلتر وضعیت پروژه">
-            {FILTERS.map((filter) =>
-            <button
-              key={filter.key}
-              type="button"
-              role="tab"
-              aria-selected={status === filter.key}
-              onClick={() => setStatus(filter.key)}
-              className={`group relative overflow-hidden border px-7 py-3 text-sm transition-colors duration-300 ease-lux ${
-              status === filter.key ?
-              'border-copper bg-copper font-bold text-char' :
-              'border-ivory/15 font-light text-ivory/65'}`
-              }>
-              
-                {status !== filter.key &&
-              <span
-                aria-hidden="true"
-                className="absolute inset-0 translate-y-full bg-copper transition-transform duration-300 ease-lux group-hover:translate-y-0" />
-
-              }
-                <span className="relative z-10 transition-colors duration-300 ease-lux group-hover:text-char">
-                  <InlineEdit
-                    value={filter.label}
-                    onSave={(v) => saveStatusLabel(filter.key, v)}
-                  />
-                </span>
-              </button>
-            )}
+          
+          {/* دکمه‌های فیلتر مینیمال و شیشه‌ای (وسط‌چین و بدون کادر) */}
+          <div className="flex items-center justify-center gap-4 md:gap-6" role="tablist" aria-label="فیلتر وضعیت پروژه">
+            {FILTERS.map((filter, index) => {
+              const isSelected = status === filter.key;
+              return (
+                <React.Fragment key={filter.key}>
+                  {/* خط جداکننده بین دکمه‌ها */}
+                  {index > 0 && (
+                    <span className="h-6 w-[2px] rounded-full bg-ivory/10" aria-hidden="true" />
+                  )}
+                  
+                  <button
+                    type="button"
+                    role="tab"
+                    aria-selected={isSelected}
+                    onClick={() => setStatus(filter.key)}
+                    className={`group relative rounded-lg px-6 py-2.5 text-sm font-medium transition-all duration-300 ease-lux active:scale-95 cursor-pointer select-none backdrop-blur-md ${
+                      isSelected
+                        ? 'bg-copper/15 text-copper shadow-[0_4px_15px_rgba(197,143,92,0.1)]'
+                        : 'bg-transparent text-ivory/60 hover:bg-white/5 hover:text-ivory'
+                    }`}
+                  >
+                    <span className="relative z-10 transition-colors duration-300 ease-out">
+                      <InlineEdit
+                        value={filter.label}
+                        onSave={(v) => saveStatusLabel(filter.key, v)}
+                      />
+                    </span>
+                  </button>
+                </React.Fragment>
+              );
+            })}
           </div>
 
           <div className="mt-12 grid gap-6 lg:grid-cols-3">
-            {list.map((project, i) =>
-            <Reveal key={project.id} delay={0.05 * i} className="h-full">
+            {list.map((project, i) => (
+              <Reveal key={project.id} delay={0.05 * i} className="h-full">
                 <EditableItem resource="projects" item={project} className="h-full">
                   <ProjectCard project={project} imageClass="h-80" />
                 </EditableItem>
               </Reveal>
-            )}
+            ))}
             <AddItemButton resource="projects" />
           </div>
         </div>
@@ -83,6 +88,6 @@ export function Projects() {
 
       <Gallery />
       <ContactSection />
-    </>);
-
+    </>
+  );
 }
\ No newline at end of file