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,117 @@
+"use client";
+
+import { useRef } from "react";
+import { motion, Variants, useScroll, useTransform } from "framer-motion";
+
+// تعریف Variants با انیمیشن‌های نرم‌تر و روان‌تر
+const containerVariants: Variants = {
+  hidden: {
+    opacity: 0,
+    filter: "blur(8px)", // بلور اولیه کمی بیشتر برای حس نرم‌تر شدن
+  },
+  visible: {
+    opacity: 1,
+    filter: "blur(0px)",
+    transition: {
+      duration: 1.2, // زمان طولانی‌تر برای محو شدن بلور
+      when: "beforeChildren",
+      staggerChildren: 0.15, // فاصله زمانی کمی بیشتر بین ورود هر خط
+    },
+  },
+};
+
+const itemVariants: Variants = {
+  hidden: { y: 30, opacity: 0 }, // شروع از فاصله کمی پایین‌تر
+  visible: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      duration: 1.2, // مدت زمان لغزش به بالا
+      // این منحنی (easeOutExpo) راز انیمیشن‌های نرم سبک اپل است
+      ease: [0.16, 1, 0.3, 1] as [number, number, number, number], 
+    },
+  },
+};
+
+export default function Hero() {
+  const ref = useRef<HTMLElement>(null);
+
+  // هوک‌ها برای افکت پارالاکس و محو شدن هنگام اسکرول
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ["start start", "end start"],
+  });
+  const y = useTransform(scrollYProgress, [0, 1], ["0%", "50%"]);
+  const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0]);
+
+  return (
+    <section
+      ref={ref}
+      className="relative h-screen flex flex-col items-center justify-center overflow-hidden bg-gray-950"
+      onMouseMove={(e) => {
+        // آپدیت متغیرهای CSS برای موقعیت موس جهت افکت نورافکن
+        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="
+          pointer-events-none absolute -inset-px rounded-xl opacity-50
+          transition-opacity duration-300 
+          before:absolute before:inset-0 before:rounded-xl 
+          before:bg-[radial-gradient(600px_circle_at_var(--mouse-x)_var(--mouse-y),rgba(30,129,243,0.15),transparent_40%)]
+        "
+      />
+
+      {/* لایه پس‌زمینه: خطوط گرید */}
+      <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
+
+      {/* کانتینر اصلی محتوا */}
+      <motion.div
+        style={{ y, opacity }}
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        className="z-10 text-center w-full max-w-5xl mx-auto px-4"
+      >
+        <motion.div
+          variants={itemVariants}
+          className="mb-6 inline-block rounded-full border border-blue-500/30 bg-blue-500/10 px-4 py-1.5 text-sm text-blue-300"
+        >
+          توسعه نرم‌افزار با بالاترین کیفیت
+        </motion.div>
+
+        <motion.h1
+          variants={itemVariants}
+          className="text-5xl md:text-7xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400 pb-4"
+        >
+          راهکارهای دیجیتال برای فردای شما
+        </motion.h1>
+
+        <motion.p
+          variants={itemVariants}
+          className="mt-4 text-lg text-neutral-400 max-w-2xl mx-auto"
+        >
+          ما با ترکیب خلاقیت و تکنولوژی‌های پیشرفته، نرم‌افزارهایی خلق می‌کنیم
+          که نه تنها نیازهای امروز شما را برآورده می‌کنند، بلکه مسیر رشد آینده
+          کسب‌وکار شما را هموار می‌سازند.
+        </motion.p>
+
+        <motion.div
+          variants={itemVariants}
+          className="mt-8 flex justify-center gap-4"
+        >
+          <button className="px-6 py-2 rounded-md bg-blue-600 text-white font-medium hover:bg-blue-700 transition-colors">
+            شروع همکاری
+          </button>
+          <button className="px-6 py-2 rounded-md border border-neutral-700 text-neutral-300 font-medium hover:bg-neutral-800 transition-colors">
+            مشاهده نمونه کارها
+          </button>
+        </motion.div>
+      </motion.div>
+    </section>
+  );
+}