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.
76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import type { LucideIcon } from "lucide-react";
|
|
import type { ReactNode } from "react";
|
|
|
|
type Props = {
|
|
Icon?: LucideIcon;
|
|
title: ReactNode;
|
|
body?: ReactNode;
|
|
href?: string;
|
|
external?: boolean;
|
|
className?: string;
|
|
/** Append custom inner content below the body */
|
|
children?: ReactNode;
|
|
};
|
|
|
|
export function GlassCard({
|
|
Icon,
|
|
title,
|
|
body,
|
|
href,
|
|
external,
|
|
className,
|
|
children,
|
|
}: Props) {
|
|
const inner = (
|
|
<>
|
|
{/* hover amber radial glow */}
|
|
<div
|
|
aria-hidden
|
|
className="pointer-events-none absolute -bottom-16 -right-16 size-48 rounded-full opacity-0 blur-3xl transition-opacity duration-700 group-hover:opacity-100"
|
|
style={{
|
|
background:
|
|
"radial-gradient(circle, rgba(212,164,55,0.28), transparent 70%)",
|
|
}}
|
|
/>
|
|
{Icon ? (
|
|
<div className="grid size-11 place-items-center rounded-full glass-gold transition-all duration-500 group-hover:rotate-[8deg] group-hover:shadow-[0_0_22px_-6px_rgba(212,164,55,0.6)]">
|
|
<Icon className="size-[18px] text-gold-light" strokeWidth={1.4} />
|
|
</div>
|
|
) : null}
|
|
<h4 className="mt-5 font-display text-xl text-bone transition-colors duration-500 group-hover:text-gold-light md:text-2xl">
|
|
{title}
|
|
</h4>
|
|
{body ? (
|
|
<p className="mt-2 text-sm text-mist text-pretty leading-relaxed">
|
|
{body}
|
|
</p>
|
|
) : null}
|
|
{children}
|
|
{/* gold underline sweep */}
|
|
<span
|
|
aria-hidden
|
|
className="pointer-events-none absolute bottom-0 left-0 h-px w-0 bg-gradient-to-r from-gold via-gold-light to-transparent transition-all duration-700 group-hover:w-full"
|
|
/>
|
|
</>
|
|
);
|
|
|
|
const base = `group relative isolate h-full overflow-hidden rounded-2xl border border-bone/10 bg-graphite/40 p-6 backdrop-blur-sm transition-all duration-500 hover:-translate-y-1 hover:border-gold/30 hover:bg-graphite/60 md:p-7 ${className ?? ""}`;
|
|
|
|
if (href) {
|
|
return (
|
|
<a
|
|
href={href}
|
|
{...(external
|
|
? { target: "_blank", rel: "noopener noreferrer" }
|
|
: {})}
|
|
className={base}
|
|
>
|
|
{inner}
|
|
</a>
|
|
);
|
|
}
|
|
return <div className={base}>{inner}</div>;
|
|
}
|