a.golshani/company-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a

Browse Source
This commit is contained in:
a.golshani
2026-09-13 15:44:15 +03:30
parent 71cd5c8072
commit 16cba4492a
9 changed files with 1499 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/banner/CtaBanner.tsx
+53 -67
View File
@@ -1,13 +1,14 @@
"use client";
import React from "react";
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"
<section
className="relative py-28 md:py-36 px-4 md:px-8 bg-gray-950 overflow-hidden flex items-center justify-center"
onMouseMove={(e) => {
const { currentTarget, clientX, clientY } = e;
const { left, top } = currentTarget.getBoundingClientRect();
@@ -15,78 +16,63 @@ export default function CtaBanner() {
currentTarget.style.setProperty("--mouse-y", `${clientY - top}px`);
}}
>
{/* ========================================================
پس‌زمینه کاملاً منطبق با سکشن Projects
======================================================== */}
{/* افکت 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%)]" />
{/* پس‌زمینه: گرید و افکت 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="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]" />
<div className="relative z-10 max-w-7xl mx-auto">
<div className="relative z-10 max-w-4xl w-full mx-auto">
<motion.div
initial={{ opacity: 0, y: 50, scale: 0.95 }}
initial={{ opacity: 0, y: 25, scale: 0.98 }}
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"
viewport={{ once: true, margin: "-50px" }}
transition={{ duration: 0.8, ease: customEase }}
className="group relative rounded-3xl bg-neutral-900/50 border border-white/10 overflow-hidden backdrop-blur-md p-8 md:p-16 flex flex-col items-center text-center transition-colors hover:bg-neutral-900/70"
>
{/* هاله‌های نوری پاستلی کارت */}
<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="pointer-events-none absolute -top-24 left-1/2 -translate-x-1/2 w-96 h-48 bg-white/[0.04] rounded-full blur-3xl" />
<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>
{/* تیتر اصلی با گرادیانت هماهنگ با متون Projects */}
<motion.h2
initial={{ opacity: 0, y: 15 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.7, delay: 0.1, ease: customEase }}
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-[1.25] text-white max-w-2xl mb-8"
>
آماده خلق یک{" "}
<span className="text-neutral-500">شاهکار دیجیتال</span> هستید؟
</motion.h2>
<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
initial={{ opacity: 0, y: 12 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.7, delay: 0.2, ease: customEase }}
>
<button className="relative group/btn inline-flex items-center justify-center gap-3 px-8 py-4 rounded-full font-semibold text-gray-950 text-base md:text-lg bg-white hover:bg-neutral-200 active:scale-[0.98] transition-all duration-300 shadow-[0_0_25px_rgba(255,255,255,0.15)] hover:shadow-[0_0_35px_rgba(255,255,255,0.25)]">
<span className="tracking-tight">شروع همکاری</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={2.2}
stroke="currentColor"
className="w-5 h-5 transition-transform duration-300 group-hover/btn:-translate-x-1.5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
/>
</svg>
</button>
</motion.div>
</motion.div>
</div>
</section>