118 lines
4.6 KiB
TypeScript
118 lines
4.6 KiB
TypeScript
"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>
|
|
);
|
|
}
|