92cf4aba3b
- Introduced RobotProductCard component for displaying robot details. - Added WhyUs component highlighting key reasons for choosing our robotics solutions. - Implemented CursorSpotlight for enhanced user interaction. - Created GlassPanel for a stylish UI element. - Developed MotionSection for animated section visibility. - Added PremiumButton for versatile button options. - Established data structures for industries and robots, including detailed specifications and use cases. - Included utility functions for retrieving robots by slug and category.
89 lines
3.6 KiB
TypeScript
89 lines
3.6 KiB
TypeScript
/**
|
|
* Refined gold WhatsApp link.
|
|
*
|
|
* Use 3 surfaces:
|
|
* - <WhatsAppLink href={...} display="+CC XX XXX XXXX" ariaLabel="..." inline /> (footer row)
|
|
* - <WhatsAppIconButton href={...} ariaLabel="..." /> (nav)
|
|
* - <WhatsAppLink href={...} display={...} ariaLabel={...} /> (contact card)
|
|
*
|
|
* URL format expected: https://api.whatsapp.com/send/?phone=COUNTRYCODE+DIGITS&text&type=phone_number&app_absent=0
|
|
* Phone in URL = digits only (no + or spaces). Display string = formatted "+CC XX XXX XXXX".
|
|
*
|
|
* lucide-react has no WhatsApp glyph → use this inline SVG.
|
|
*/
|
|
import type { SVGProps } from "react";
|
|
|
|
export function WhatsAppIcon({ className, ...rest }: SVGProps<SVGSVGElement>) {
|
|
return (
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
aria-hidden
|
|
className={className}
|
|
{...rest}
|
|
>
|
|
<path d="M19.11 4.86A9.94 9.94 0 0 0 12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.33 4.95L2 22l5.27-1.38a9.93 9.93 0 0 0 4.76 1.21h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.84-7.06ZM12.04 20.15c-1.5 0-2.96-.4-4.24-1.17l-.3-.18-3.13.82.83-3.05-.2-.31a8.21 8.21 0 0 1-1.26-4.35c0-4.53 3.69-8.22 8.22-8.22 2.2 0 4.27.86 5.82 2.41a8.16 8.16 0 0 1 2.41 5.81c0 4.53-3.69 8.24-8.15 8.24Zm4.72-6.16c-.26-.13-1.53-.75-1.76-.83-.24-.09-.41-.13-.58.13-.17.26-.66.83-.81 1-.15.17-.3.2-.55.07-.26-.13-1.1-.41-2.1-1.29-.78-.69-1.3-1.55-1.45-1.81-.15-.26-.02-.4.11-.53.11-.11.26-.3.39-.45.13-.15.17-.26.26-.43.09-.17.04-.32-.02-.45-.07-.13-.58-1.4-.79-1.92-.21-.5-.42-.43-.58-.44-.15-.01-.32-.01-.49-.01-.17 0-.45.06-.69.32-.24.26-.9.88-.9 2.15 0 1.27.92 2.5 1.05 2.67.13.17 1.82 2.78 4.42 3.9.62.27 1.1.43 1.48.55.62.2 1.18.17 1.63.1.5-.07 1.53-.62 1.74-1.23.21-.6.21-1.12.15-1.23-.06-.11-.23-.18-.49-.31Z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
type LinkProps = {
|
|
href: string;
|
|
display: string;
|
|
ariaLabel: string;
|
|
inline?: boolean; // true = footer row; false = larger contact-card row
|
|
};
|
|
|
|
export function WhatsAppLink({ href, display, ariaLabel, inline }: LinkProps) {
|
|
if (inline) {
|
|
return (
|
|
<a
|
|
href={href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label={ariaLabel}
|
|
className="flex items-center gap-3 text-sm text-mist hover:text-gold-light"
|
|
>
|
|
<WhatsAppIcon className="size-4" />
|
|
WhatsApp · {display}
|
|
</a>
|
|
);
|
|
}
|
|
return (
|
|
<a
|
|
href={href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label={ariaLabel}
|
|
className="group flex items-center gap-3 rounded-xl border border-bone/8 bg-bone/[0.03] p-3.5 transition-colors duration-500 hover:border-gold/30"
|
|
>
|
|
<span className="grid size-9 shrink-0 place-items-center rounded-full border border-gold/30 bg-gold/[0.08] text-gold-light shadow-[0_0_14px_-4px_rgba(212,164,55,0.6)]">
|
|
<WhatsAppIcon className="size-4" />
|
|
</span>
|
|
<span className="text-bone group-hover:text-gold-light">
|
|
WhatsApp · {display}
|
|
</span>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
type ButtonProps = {
|
|
href: string;
|
|
ariaLabel: string;
|
|
className?: string;
|
|
};
|
|
|
|
export function WhatsAppIconButton({ href, ariaLabel, className }: ButtonProps) {
|
|
return (
|
|
<a
|
|
href={href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label={ariaLabel}
|
|
className={`group grid size-10 place-items-center rounded-full border border-bone/15 text-bone transition-all duration-500 hover:border-gold/40 hover:text-gold-light hover:shadow-[0_0_22px_-6px_rgba(212,164,55,0.6)] hover:scale-[1.04] ${className ?? ""}`}
|
|
>
|
|
<WhatsAppIcon className="size-[18px]" />
|
|
</a>
|
|
);
|
|
}
|