feat: add robotics components and data structures

- 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.
2026-05-20 17:22:47 +04:00
parent 2eac53dac3
commit 92cf4aba3b
87 changed files with 6887 additions and 1430 deletions
@@ -0,0 +1,75 @@
+"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>;
+}