30 lines
1.5 KiB
TypeScript
30 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { PhoneIcon } from 'lucide-react';
|
|
import { useSite } from '../api';
|
|
|
|
export function FloatingContact() {
|
|
const { brand } = useSite();
|
|
|
|
return (
|
|
<a
|
|
href={brand.phone_href}
|
|
aria-label="تماس تلفنی با گروه ساختمانی آرامش"
|
|
className="group fixed bottom-8 left-8 z-40 flex h-14 w-14 items-center justify-center rounded-full border border-copper/50 bg-char/80 text-copper backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.3),0_12px_35px_rgba(0,0,0,0.5),0_0_20px_rgba(197,143,92,0.25)] transition-all duration-500 ease-lux hover:scale-110 hover:border-copper hover:bg-copper hover:text-char hover:shadow-[0_0_35px_rgba(197,143,92,0.7)] active:scale-95"
|
|
>
|
|
{/* پالس هاله نوری در پسزمینه مانند رادار */}
|
|
<span
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute inset-0 rounded-full border border-copper/60 animate-ping opacity-30"
|
|
/>
|
|
|
|
{/* خط انعکاس نوری کریستال در بالای گوی */}
|
|
<span
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute -top-1/2 left-0 right-0 h-full rounded-full bg-gradient-to-b from-white/25 to-transparent"
|
|
/>
|
|
|
|
{/* آیکون تلفن با انیمیشن چرخش ظریف در زمان هاور */}
|
|
<PhoneIcon className="relative z-10 h-6 w-6 transition-transform duration-300 ease-lux group-hover:rotate-12" />
|
|
</a>
|
|
);
|
|
} |