Add new updated site

2026-09-12 10:35:17 +03:30
parent f2e5a9e58b
commit 8abc70dcf1
7 changed files with 134 additions and 121 deletions
@@ -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">
@@ -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>
+  );
+}
@@ -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 }}
          />