motion-ui-skill 2.0.0

package/components/users/credit-card-glass.tsx

@@ -0,0 +1,113 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+export type CreditCardGlassProps = Readonly<
+  {
+    holderName?: string;
+    cardNumber?: string;
+    expiryDate?: string;
+    tier?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Credit Card Glass component — styled with Tailwind CSS.
+export const CreditCardGlass = forwardRef<HTMLDivElement, CreditCardGlassProps>(
+  (
+    {
+      className,
+      holderName = "Alex Morgan",
+      cardNumber = "4532 •••• •••• 7891",
+      expiryDate = "09/28",
+      tier = "Platinum",
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="credit-card-glass"
+      className={cn(
+        "group relative h-48 w-80 cursor-pointer overflow-hidden rounded-2xl font-sans",
+        className,
+      )}
+      {...props}
+    >
+      {/* Background */}
+      <div
+        data-slot="credit-card-glass-background"
+        className="absolute inset-0 bg-linear-to-br from-neutral-800 via-neutral-900 to-black"
+      />
+
+      {/* Glow Effects */}
+      <div
+        data-slot="credit-card-glass-glow-top"
+        className="absolute top-[-20%] right-[-10%] h-40 w-40 rounded-full bg-teal-500/30 blur-[50px] transition-colors duration-700 group-hover:bg-teal-500/40"
+      />
+
+      <div
+        data-slot="credit-card-glass-glow-bottom"
+        className="absolute bottom-[-30%] left-[-10%] h-48 w-48 rounded-full bg-cyan-500/20 blur-[60px]"
+      />
+
+      {/* Card Content */}
+      <div
+        data-slot="credit-card-glass-content"
+        className="relative z-10 flex h-full flex-col justify-between p-5"
+      >
+        {/* Top Section */}
+        <div
+          data-slot="credit-card-glass-header"
+          className="flex items-start justify-between"
+        >
+          <div
+            data-slot="credit-card-glass-chip"
+            className="h-7 w-10 rounded-md bg-linear-to-br from-amber-300 to-amber-500 opacity-90"
+          />
+
+          <span className="font-mono text-[10px] tracking-[0.2em] text-white/40 uppercase">
+            {tier}
+          </span>
+        </div>
+
+        {/* Bottom Section */}
+        <div data-slot="credit-card-glass-details">
+          <p className="mb-3 font-mono text-lg tracking-[0.15em] text-white/90">
+            {cardNumber}
+          </p>
+
+          <div className="flex items-end justify-between">
+            <div>
+              <p className="mb-0.5 font-mono text-[8px] tracking-widest text-white/30 uppercase">
+                Card Holder
+              </p>
+
+              <p className="text-xs font-medium tracking-wider text-white/80 uppercase">
+                {holderName}
+              </p>
+            </div>
+
+            <div className="text-right">
+              <p className="mb-0.5 font-mono text-[8px] tracking-widest text-white/30 uppercase">
+                Expires
+              </p>
+
+              <p className="font-mono text-xs text-white/80">{expiryDate}</p>
+            </div>
+
+            {/* Payment Network */}
+            <div
+              data-slot="credit-card-glass-network"
+              className="flex -space-x-2"
+            >
+              <div className="h-7 w-7 rounded-full bg-red-500/80 opacity-90" />
+              <div className="h-7 w-7 rounded-full bg-amber-500/80 opacity-90" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+);
+
+CreditCardGlass.displayName = "CreditCardGlass";

package/components/users/team-member-card.tsx

@@ -0,0 +1,50 @@
+import React, { forwardRef } from "react";
+import Image from "next/image";
+import { cn } from "@/lib/cn";
+import { Github } from "@/icons/brands/github";
+import { Mail } from "lucide-react";
+
+export const TeamMemberCard = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className = "", ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "group relative h-72 w-56 cursor-pointer overflow-hidden rounded-2xl",
+      className,
+    )}
+    {...props}
+  >
+    <Image
+      src="/profile-picture.png"
+      alt="Team member"
+      fill
+      sizes="224px"
+      className="object-cover transition-transform duration-700 group-hover:scale-110"
+    />
+    <div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/20 to-transparent" />
+
+    <div className="absolute top-3 right-3 flex translate-y-1 gap-1.5 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
+      <button type="button" className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg border border-white/30 bg-white/20 text-white backdrop-blur-md transition-colors hover:bg-white/30">
+        <Github size={13} />
+      </button>
+      <button type="button" className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg border border-white/30 bg-white/20 text-white backdrop-blur-md transition-colors hover:bg-white/30">
+        <Mail size={13} />
+      </button>
+    </div>
+
+    <div className="absolute right-0 bottom-0 left-0 p-4">
+      <p className="mb-1 font-mono text-[10px] tracking-widest text-white/50 uppercase">
+        Lead Engineer
+      </p>
+      <h3 className="text-lg leading-tight font-semibold text-white">
+        Alex Morgan
+      </h3>
+      <p className="mt-1.5 translate-y-2 text-xs leading-relaxed text-white/60 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
+        Building design tools that developers love. Previously at Stripe.
+      </p>
+    </div>
+  </div>
+));
+TeamMemberCard.displayName = "TeamMemberCard";

package/components/users/testimonial-card.tsx

@@ -0,0 +1,239 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+import { Star, Quote, ChevronLeft, ChevronRight } from "lucide-react";
+
+export type TestimonialItem = {
+  quote: string;
+  name: string;
+  role: string;
+  rating?: number;
+  avatar?: string;
+};
+
+export type TestimonialCardProps = Readonly<
+  {
+    testimonials?: TestimonialItem[];
+    quote?: string;
+    name?: string;
+    role?: string;
+    rating?: number;
+    avatar?: string;
+    avatarAlt?: string;
+    quoteIcon?: React.ReactNode;
+    autoPlayMs?: number;
+    onChange?: (index: number) => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+
+const RATING_STARS = [
+  "star-1",
+  "star-2",
+  "star-3",
+  "star-4",
+  "star-5",
+] as const;
+
+const defaultTestimonials: TestimonialItem[] = [
+  {
+    quote: "The way each component feels cohesive without being overly uniform is genuinely impressive.",
+    name: "Alex Morgan",
+    role: "Product Designer",
+    rating: 5,
+    avatar: "/profile-picture.png",
+  },
+  {
+    quote: "The attention to detail in each component really shows, especially spacing and typography.",
+    name: "Sarah Chen",
+    role: "Frontend Engineer",
+    rating: 5,
+    avatar: "/woman.png",
+  },
+  {
+    quote: "Clean code, zero bloat, and works seamlessly out of the box with Tailwind CSS.",
+    name: "David Kim",
+    role: "Tech Lead",
+    rating: 5,
+    avatar: "/profile-picture.png",
+  },
+];
+
+// Production-ready Testimonial component — styled with Tailwind CSS.
+export const TestimonialCard = forwardRef<HTMLDivElement, TestimonialCardProps>(
+  (
+    {
+      className,
+      testimonials,
+      quote = defaultTestimonials[0].quote,
+      name = defaultTestimonials[0].name,
+      role = defaultTestimonials[0].role,
+      rating = 5,
+      avatar = "/profile-picture.png",
+      avatarAlt = "Reviewer",
+      quoteIcon,
+      autoPlayMs = 6000,
+      onChange,
+      ...props
+    },
+    ref,
+  ) => {
+    const items =
+      testimonials ??
+      defaultTestimonials.map((item, index) =>
+        index === 0 ? { ...item, quote, name, role, rating, avatar } : item,
+      );
+
+    const [index, setIndex] = useState(0);
+    const [animating, setAnimating] = useState(false);
+    const current = items[index];
+
+    const goTo = (next: number) => {
+      if (animating || next === index) return;
+      setAnimating(true);
+      setIndex(next);
+      onChange?.(next);
+      globalThis.setTimeout(() => setAnimating(false), 320);
+    };
+
+    const prev = () => goTo((index - 1 + items.length) % items.length);
+    const next = () => goTo((index + 1) % items.length);
+
+    useEffect(() => {
+      if (autoPlayMs <= 0) return;
+      const timer = globalThis.setInterval(() => {
+        setIndex((current) => {
+          const next = (current + 1) % items.length;
+          onChange?.(next);
+          return next;
+        });
+      }, autoPlayMs);
+      return () => globalThis.clearInterval(timer);
+    }, [autoPlayMs, items.length, onChange]);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="testimonial-card"
+        className={cn(
+          "relative w-72 rounded-2xl border border-neutral-100 bg-white p-6 font-sans shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        <style>{`
+          @keyframes testimonial-fade {
+            from { opacity: 0; transform: translateY(6px); }
+            to { opacity: 1; transform: translateY(0); }
+          }
+        `}</style>
+
+        <div
+          data-slot="testimonial-card-quote-icon"
+          className="pointer-events-none absolute top-5 right-5 text-neutral-100 select-none"
+        >
+          {quoteIcon ?? <Quote size={24} />}
+        </div>
+
+        <div
+          key={current.name}
+          style={{ animation: "testimonial-fade 0.32s ease-out" }}
+        >
+          <div
+            data-slot="testimonial-card-rating"
+            className="mb-4 flex gap-0.5"
+          >
+            {RATING_STARS.slice(0, current.rating ?? 5).map((starId) => (
+              <Star
+                key={starId}
+                size={12}
+                className="text-yellow-400"
+                fill="#FFD700"
+              />
+            ))}
+          </div>
+
+          <p
+            data-slot="testimonial-card-quote"
+            className="relative z-10 mb-6 text-sm leading-relaxed text-neutral-700"
+          >
+            {current.quote}
+          </p>
+
+          <div
+            data-slot="testimonial-card-author"
+            className="flex items-center gap-3 border-t border-neutral-100 pt-4"
+          >
+            <div
+              data-slot="testimonial-card-avatar"
+              className="h-10 w-10 overflow-hidden rounded-full border-2 border-neutral-100"
+            >
+              <Image
+                src={current.avatar ?? avatar}
+                alt={avatarAlt}
+                width={40}
+                height={40}
+                className="h-full w-full object-cover"
+              />
+            </div>
+
+            <div data-slot="testimonial-card-author-info">
+              <p className="text-sm font-semibold text-neutral-900">
+                {current.name}
+              </p>
+              <p className="text-[11px] text-neutral-400">{current.role}</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-4 flex items-center justify-between">
+          <div className="flex gap-1">
+            {items.map((item) => (
+              <button
+                key={item.name}
+                type="button"
+                aria-label={`Go to testimonial ${items.indexOf(item) + 1}`}
+                onClick={() => goTo(items.indexOf(item))}
+                className={cn(
+                  "h-1.5 cursor-pointer rounded-full transition-all duration-300",
+                  items.indexOf(item) === index
+                    ? "w-5 bg-neutral-900"
+                    : "w-1.5 bg-neutral-200 hover:bg-neutral-300",
+                )}
+              />
+            ))}
+          </div>
+
+          <div className="flex gap-1">
+            <button
+              type="button"
+              aria-label="Previous testimonial"
+              onClick={prev}
+              className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border border-neutral-200 text-neutral-500 transition-colors hover:bg-neutral-50"
+            >
+              <ChevronLeft size={14} />
+            </button>
+            <button
+              type="button"
+              aria-label="Next testimonial"
+              onClick={next}
+              className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border border-neutral-200 text-neutral-500 transition-colors hover:bg-neutral-50"
+            >
+              <ChevronRight size={14} />
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+TestimonialCard.displayName = "TestimonialCard";

package/components/wallet/wallet-pass-card.tsx

@@ -0,0 +1,220 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+
+export type WalletPassCardProps = Readonly<
+  {
+    memberName?: string;
+    membershipType?: string;
+    passType?: string;
+    expiryDate?: string;
+    memberId?: string;
+    avatar?: string;
+    avatarAlt?: string;
+    onFlip?: (flipped: boolean) => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const PASS_PERFORATIONS = [
+  "pass-perf-1",
+  "pass-perf-2",
+  "pass-perf-3",
+  "pass-perf-4",
+  "pass-perf-5",
+  "pass-perf-6",
+  "pass-perf-7",
+  "pass-perf-8",
+  "pass-perf-9",
+  "pass-perf-10",
+  "pass-perf-11",
+  "pass-perf-12",
+] as const;
+
+const QR_CELLS = [
+  { id: "qr-01", dark: true },
+  { id: "qr-02", dark: false },
+  { id: "qr-03", dark: true },
+  { id: "qr-04", dark: false },
+  { id: "qr-05", dark: true },
+  { id: "qr-06", dark: false },
+  { id: "qr-07", dark: true },
+  { id: "qr-08", dark: false },
+  { id: "qr-09", dark: true },
+  { id: "qr-10", dark: false },
+  { id: "qr-11", dark: true },
+  { id: "qr-12", dark: false },
+  { id: "qr-13", dark: true },
+  { id: "qr-14", dark: false },
+  { id: "qr-15", dark: true },
+  { id: "qr-16", dark: false },
+  { id: "qr-17", dark: true },
+  { id: "qr-18", dark: false },
+  { id: "qr-19", dark: true },
+  { id: "qr-20", dark: false },
+  { id: "qr-21", dark: true },
+  { id: "qr-22", dark: false },
+  { id: "qr-23", dark: true },
+  { id: "qr-24", dark: false },
+  { id: "qr-25", dark: true },
+] as const;
+
+// Production-ready Wallet Pass component — styled with Tailwind CSS.
+export const WalletPassCard = forwardRef<HTMLDivElement, WalletPassCardProps>(
+  (
+    {
+      className,
+      memberName = "Alex Morgan",
+      membershipType = "Premium Member",
+      passType = "Member Pass",
+      expiryDate = "Dec 2026",
+      memberId = "MBR-2048",
+      avatar = "/profile-picture.png",
+      avatarAlt = "Member profile",
+      onFlip,
+      ...props
+    },
+    ref,
+  ) => {
+    const [flipped, setFlipped] = useState(false);
+
+    const toggleFlip = () => {
+      const next = !flipped;
+      setFlipped(next);
+      onFlip?.(next);
+    };
+
+    return (
+      <div
+        ref={ref}
+        data-slot="wallet-pass-card"
+        className={cn("w-64 font-sans perspective-[1000px]", className)}
+        {...props}
+      >
+        <style>{`
+          @keyframes wallet-flip-shadow {
+            0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
+            50% { box-shadow: 0 18px 40px rgba(0,0,0,0.18); }
+          }
+        `}</style>
+
+        <button
+          type="button"
+          onClick={toggleFlip}
+          aria-label={flipped ? "Show pass front" : "Show pass back"}
+          aria-pressed={flipped}
+          data-slot="wallet-pass-card-flip"
+          className="relative h-54 w-full cursor-pointer overflow-hidden rounded-2xl border-0 bg-white p-0 shadow-lg outline-none"
+          style={{
+            animation: flipped
+              ? undefined
+              : "wallet-flip-shadow 3s ease-in-out infinite",
+          }}
+        >
+          <div
+            className="relative h-full w-full transition-transform duration-700 ease-[cubic-bezier(0.34,1.2,0.64,1)]"
+            style={{
+              transformStyle: "preserve-3d",
+              transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)",
+            }}
+          >
+            {/* Front */}
+            <div
+              className="absolute inset-0 flex flex-col overflow-hidden rounded-2xl bg-white"
+              style={{ backfaceVisibility: "hidden" }}
+            >
+              <div className="bg-linear-to-br from-blue-600 to-teal-700 p-4">
+                <div className="mb-6 flex items-center justify-between">
+                  <span className="font-mono text-[10px] tracking-widest text-white/60 uppercase">
+                    {passType}
+                  </span>
+                  <div className="flex h-6 w-6 items-center justify-center rounded-md bg-white/20">
+                    <span className="text-[10px] font-bold text-white">
+                      {memberName.charAt(0).toUpperCase()}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-3">
+                  <div className="relative h-12 w-12 overflow-hidden rounded-full border-2 border-white/30">
+                    <Image
+                      src={avatar}
+                      alt={avatarAlt}
+                      fill
+                      sizes="48px"
+                      className="object-cover"
+                    />
+                  </div>
+                  <div className="text-left">
+                    <p className="text-sm font-semibold text-white">
+                      {memberName}
+                    </p>
+                    <p className="text-[11px] text-white/60">
+                      {membershipType}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="relative flex-1 bg-white px-4 py-3">
+                <div className="absolute -top-1.5 right-0 left-0 flex justify-between px-2">
+                  {PASS_PERFORATIONS.map((perforationId) => (
+                    <div
+                      key={perforationId}
+                      className="h-3 w-3 rounded-full bg-white ring-1 ring-white"
+                    />
+                  ))}
+                </div>
+                <div className="flex items-center justify-between pt-1">
+                  <div className="text-left">
+                    <p className="font-mono text-[9px] tracking-wider text-neutral-400 uppercase">
+                      Valid Until
+                    </p>
+                    <p className="text-xs font-semibold text-neutral-900">
+                      {expiryDate}
+                    </p>
+                  </div>
+                  <p className="text-[10px] text-neutral-400">Tap to flip</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Back */}
+            <div
+              className="absolute inset-0 overflow-hidden rounded-2xl bg-white"
+              style={{
+                backfaceVisibility: "hidden",
+                transform: "rotateY(180deg)",
+              }}
+            >
+              <div className="flex h-full flex-col items-center justify-center bg-white p-5">
+                <p className="font-mono text-[10px] tracking-widest text-neutral-400 uppercase">
+                  Scan at entry
+                </p>
+                <div className="my-3 grid h-20 w-20 grid-cols-5 gap-px rounded-lg border border-neutral-100 bg-white p-2">
+                  {QR_CELLS.map((cell) => (
+                    <div
+                      key={cell.id}
+                      className={cn(
+                        "rounded-[1px]",
+                        cell.dark ? "bg-neutral-900" : "bg-white",
+                      )}
+                    />
+                  ))}
+                </div>
+                <p className="font-mono text-xs text-neutral-700">{memberId}</p>
+                <p className="mt-1 text-[10px] text-neutral-400">
+                  Tap again to flip back
+                </p>
+              </div>
+            </div>
+          </div>
+        </button>
+      </div>
+    );
+  },
+);
+
+WalletPassCard.displayName = "WalletPassCard";