a

2026-09-09 16:03:24 +03:30
parent ce2cf49edc
commit 71cd5c8072
16 changed files with 6191 additions and 190 deletions
@@ -0,0 +1,94 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+const customEase: [number, number, number, number] = [0.16, 1, 0.3, 1];
+
+export default function CtaBanner() {
+  return (
+    <section 
+      className="relative py-32 px-4 md:px-8 bg-gray-950 overflow-hidden"
+      onMouseMove={(e) => {
+        const { currentTarget, clientX, clientY } = e;
+        const { left, top } = currentTarget.getBoundingClientRect();
+        currentTarget.style.setProperty("--mouse-x", `${clientX - left}px`);
+        currentTarget.style.setProperty("--mouse-y", `${clientY - top}px`);
+      }}
+    >
+      
+      {/* پس‌زمینه: گرید و افکت Spotlight */}
+      <div className="absolute inset-0 z-0">
+        {/* گرید با رنگ خاکستری ملایم مطابق با بخش پروژه‌ها */}
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
+        
+        {/* لایه نورافکن (Spotlight) وابسته به حرکت موس */}
+        <div className="pointer-events-none absolute -inset-px opacity-50 before:absolute before:inset-0 before:bg-[radial-gradient(800px_circle_at_var(--mouse-x)_var(--mouse-y),rgba(255,255,255,0.06),transparent_40%)]" />
+      </div>
+
+      <div className="relative z-10 max-w-7xl mx-auto">
+        <motion.div
+          initial={{ opacity: 0, y: 50, scale: 0.95 }}
+          whileInView={{ opacity: 1, y: 0, scale: 1 }}
+          viewport={{ once: true, margin: "-100px" }}
+          transition={{ duration: 1.2, ease: customEase }}
+          className="relative overflow-hidden rounded-[2.5rem] bg-white shadow-2xl shadow-gray-900/50 border border-gray-200"
+        >
+          {/* هاله‌های نوری پاستلی کارت */}
+          <div className="absolute -top-32 -right-32 w-[30rem] h-[30rem] bg-indigo-50 blur-[100px] rounded-full pointer-events-none" />
+          <div className="absolute -bottom-32 -left-32 w-[30rem] h-[30rem] bg-pink-50 blur-[100px] rounded-full pointer-events-none" />
+
+          <div className="relative z-10 py-20 px-6 md:px-16 flex flex-col items-center text-center">
+            <motion.h2
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 1, delay: 0.2, ease: customEase }}
+              className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-gray-900 mb-6"
+            >
+              آماده خلق یک{" "}
+              <span className="bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 to-purple-500">
+                شاهکار
+              </span>{" "}
+              هستید؟
+            </motion.h2>
+            
+            <motion.p
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 1, delay: 0.3, ease: customEase }}
+              className="text-lg md:text-xl text-gray-500 max-w-2xl mb-10 font-medium leading-relaxed"
+            >
+              ایده‌های خود را با تکنولوژی‌های روز دنیا و طراحی خیره‌کننده به واقعیت تبدیل کنید. تیم ما برای شروع پروژه بعدی شما آماده است.
+            </motion.p>
+
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 1, delay: 0.4, ease: customEase }}
+            >
+              <button className="group relative inline-flex items-center justify-center gap-3 px-8 py-4 bg-gray-900 text-white rounded-full font-bold text-lg overflow-hidden transition-all duration-300 hover:bg-gray-800 hover:scale-105 hover:shadow-xl hover:shadow-gray-900/20 active:scale-95">
+                <span>شروع همکاری</span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={2.5}
+                  stroke="currentColor"
+                  className="w-5 h-5 transition-transform duration-300 group-hover:-translate-x-1"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+                  />
+                </svg>
+              </button>
+            </motion.div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}