motion-ui-skill 2.0.0

package/components/gallery/glass-overlay-image-card.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+
+import { Heart, Share, MapPin, ArrowRight } from "lucide-react";
+
+export type GlassOverlayImageCardProps = Readonly<
+  {
+    image?: string;
+    imageAlt?: string;
+    location?: string;
+    title?: string;
+    savedLabel?: string;
+    savedCount?: string | number;
+    avatars?: string[];
+    exploreLabel?: string;
+    onLike?: () => void;
+    onShare?: () => void;
+    onExplore?: () => void;
+    likeIcon?: ReactNode;
+    shareIcon?: ReactNode;
+    locationIcon?: ReactNode;
+    arrowIcon?: ReactNode;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Glass Overlay Image component — styled with Tailwind CSS.
+export const GlassOverlayImageCard = forwardRef<
+  HTMLDivElement,
+  GlassOverlayImageCardProps
+>(
+  (
+    {
+      className,
+      image = "/background5.webp",
+      imageAlt = "Scenic landscape",
+      location = "Bishnupur, West Bengal",
+      title = "Where the river meets the mangrove forest",
+      savedLabel = "+12 saved",
+      savedCount,
+      avatars = ["JD", "BK", "AS"],
+      exploreLabel = "Explore",
+      likeIcon,
+      shareIcon,
+      locationIcon,
+      arrowIcon,
+      onLike,
+      onShare,
+      onExplore,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        data-slot="glass-overlay-image-card"
+        className={cn(
+          "group relative h-80 w-72 overflow-hidden rounded-3xl shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        {/* Background image */}
+        <Image
+          src={image}
+          alt={imageAlt}
+          fill
+          sizes="288px"
+          className="object-cover transition-transform duration-700 group-hover:scale-110"
+        />
+
+        {/* Top actions */}
+        <div className="absolute top-3 right-3 flex gap-2">
+          <button
+            type="button"
+            aria-label="Like"
+            onClick={onLike}
+            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-white/30 bg-white/20 text-white backdrop-blur-md transition-colors hover:bg-white/30"
+          >
+            {likeIcon ?? <Heart size={14} />}
+          </button>
+
+          <button
+            type="button"
+            aria-label="Share"
+            onClick={onShare}
+            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-white/30 bg-white/20 text-white backdrop-blur-md transition-colors hover:bg-white/30"
+          >
+            {shareIcon ?? <Share size={14} />}
+          </button>
+        </div>
+
+        {/* Glass content */}
+        <div className="absolute right-3 bottom-3 left-3">
+          <div className="rounded-2xl border border-white/25 bg-white/15 p-4 backdrop-blur-xl">
+            {/* Location */}
+            <div className="mb-1.5 flex items-center gap-1.5 text-[10px] text-white/70">
+              {locationIcon ?? <MapPin size={10} />}
+              <span>{location}</span>
+            </div>
+
+            {/* Title */}
+            <h3 className="mb-2 text-sm leading-snug font-semibold text-white">
+              {title}
+            </h3>
+
+            {/* Bottom row */}
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <div className="flex -space-x-2.5">
+                  {avatars.map((initial) => (
+                    <div
+                      key={initial}
+                      className="relative flex h-7 w-7 items-center justify-center rounded-full border-2 border-white/20 bg-neutral-600 text-[9px] font-semibold text-white backdrop-blur-sm"
+                      style={{ zIndex: 10 - avatars.indexOf(initial) }}
+                    >
+                      {initial}
+                    </div>
+                  ))}
+                </div>
+
+                <span className="ml-3 text-[10px] text-white/60">
+                  {typeof savedCount === "number"
+                    ? `${savedCount} saved`
+                    : savedLabel}
+                </span>
+              </div>
+
+              <button
+                type="button"
+                aria-label="Explore"
+                onClick={onExplore}
+                className="flex items-center gap-1 font-mono text-[10px] tracking-wider text-white/50 uppercase transition-colors hover:text-white/80"
+              >
+                {exploreLabel}
+                {arrowIcon ?? (
+                  <ArrowRight size={10} className="relative -top-px" />
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+GlassOverlayImageCard.displayName = "GlassOverlayImageCard";

package/components/gallery/museum-placard-card.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+export type MuseumPlacardCardProps = Readonly<
+  {
+    artist?: string;
+    title?: string;
+    year?: string;
+    medium?: string;
+    dimensions?: string;
+    catalogRef?: string;
+    curatorNote?: string;
+    acquisition?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Museum Placard component — styled with Tailwind CSS.
+export const MuseumPlacardCard = forwardRef<
+  HTMLDivElement,
+  MuseumPlacardCardProps
+>(
+  (
+    {
+      className,
+      artist = "Elena Marchetti",
+      title = "Still Life with Winter Light",
+      year = "2019",
+      medium = "Oil on linen",
+      dimensions = "61 × 76 cm",
+      catalogRef = "INV.2024.118",
+      curatorNote = "Marchetti layers translucent glazes to suspend domestic objects between memory and observation.",
+      acquisition = "Gift of the Hartwell Foundation, 2024",
+      ...props
+    },
+    ref,
+  ) => {
+    const [flipped, setFlipped] = useState(false);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="museum-placard-card"
+        className={cn("mx-auto w-72 font-sans perspective-[1000px]", className)}
+        {...props}
+      >
+        <button
+          type="button"
+          onClick={() => setFlipped((value) => !value)}
+          aria-pressed={flipped}
+          aria-label={flipped ? "Show artwork label" : "Show curator note"}
+          className="group relative h-52 w-full cursor-pointer border-0 bg-transparent p-0 text-left"
+        >
+          <div
+            className={cn(
+              "relative h-52 w-full transition-transform duration-500 [transform-style:preserve-3d]",
+              flipped && "[transform:rotateY(180deg)]",
+            )}
+          >
+            <div className="absolute inset-0 rounded-sm border border-neutral-200 bg-[#faf8f5] px-5 py-4 shadow-sm [backface-visibility:hidden]">
+              <p className="font-mono text-[9px] tracking-[0.22em] text-neutral-400 uppercase">
+                {catalogRef}
+              </p>
+              <p className="mt-3 text-sm font-medium text-neutral-800">
+                {artist}
+              </p>
+              <p className="mt-1 font-serif text-base leading-snug text-neutral-700 italic">
+                {title}
+              </p>
+              <p className="mt-1 text-xs text-neutral-500">{year}</p>
+
+              <div className="mt-4 space-y-1 border-t border-neutral-200 pt-3">
+                <p className="text-[11px] text-neutral-600">{medium}</p>
+                <p className="text-[11px] text-neutral-500">{dimensions}</p>
+              </div>
+
+              <p className="absolute right-4 bottom-3 font-mono text-[8px] tracking-wider text-neutral-400 uppercase opacity-0 transition-opacity group-hover:opacity-100">
+                Tap for note
+              </p>
+            </div>
+
+            <div className="absolute inset-0 [transform:rotateY(180deg)] rounded-sm border border-slate-300 bg-[#e8edf3] px-5 py-4 shadow-sm [backface-visibility:hidden]">
+              <p className="font-mono text-[9px] tracking-[0.22em] text-slate-500 uppercase">
+                Curator note
+              </p>
+              <p className="mt-3 text-[12px] leading-relaxed text-slate-700">
+                {curatorNote}
+              </p>
+              <p className="mt-4 border-t border-slate-300/80 pt-3 text-[10px] leading-relaxed text-slate-600">
+                {acquisition}
+              </p>
+              <p className="absolute right-4 bottom-3 font-mono text-[8px] tracking-wider text-slate-400 uppercase">
+                Tap to return
+              </p>
+            </div>
+          </div>
+        </button>
+      </div>
+    );
+  },
+);
+
+MuseumPlacardCard.displayName = "MuseumPlacardCard";

package/components/gallery/photo-album-card.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+
+export type AlbumPhoto = {
+  id: string;
+  place: string;
+  date: string;
+  src: string;
+};
+
+export type PhotoAlbumCardProps = Readonly<
+  {
+    photos?: AlbumPhoto[];
+    onSlideChange?: (index: number, photo: AlbumPhoto) => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const defaultPhotos: AlbumPhoto[] = [
+  { id: "1", place: "Kyoto", date: "Mar 12", src: "/background5.webp" },
+  { id: "2", place: "Osaka", date: "Apr 03", src: "/background1.webp" },
+  { id: "3", place: "Hokkaido", date: "Jan 28", src: "/wallpaper-2.png" },
+  { id: "4", place: "Tokyo", date: "Jun 14", src: "/wallpaper-11.png" },
+];
+
+// Production-ready Photo Album component — styled with Tailwind CSS.
+export const PhotoAlbumCard = forwardRef<HTMLDivElement, PhotoAlbumCardProps>(
+  ({ className, photos = defaultPhotos, onSlideChange, ...props }, ref) => {
+    const [index, setIndex] = useState(0);
+    const total = photos.length;
+
+    const select = (next: number) => {
+      setIndex(next);
+      onSlideChange?.(next, photos[next]);
+    };
+
+    const prev = () => select((index - 1 + total) % total);
+    const next = () => select((index + 1) % total);
+
+    const current = photos[index];
+
+    return (
+      <div
+        ref={ref}
+        data-slot="photo-album-card"
+        className={cn(
+          "w-80 overflow-hidden rounded-2xl border border-neutral-100 bg-white font-sans shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        <div className="relative aspect-square bg-neutral-100">
+          {photos.map((photo, i) => (
+            <Image
+              key={photo.id}
+              src={photo.src}
+              alt={photo.place}
+              fill
+              priority={i === 0}
+              className={cn(
+                "object-cover transition-opacity duration-300 ease-out",
+                i === index ? "opacity-100" : "opacity-0",
+              )}
+              sizes="320px"
+            />
+          ))}
+
+          <button
+            type="button"
+            aria-label="Previous photo"
+            onClick={prev}
+            className="absolute inset-y-0 left-0 z-10 w-1/3 cursor-pointer"
+          />
+          <button
+            type="button"
+            aria-label="Next photo"
+            onClick={next}
+            className="absolute inset-y-0 right-0 z-10 w-1/3 cursor-pointer"
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-4 border-t border-neutral-100 px-4 py-3">
+          <div className="min-w-0">
+            <p className="truncate text-sm font-semibold text-neutral-900">
+              {current.place}
+            </p>
+            <p className="text-xs text-neutral-400">{current.date}</p>
+          </div>
+
+          <div className="flex shrink-0 items-center gap-1.5">
+            {photos.map((photo, i) => (
+              <button
+                key={photo.id}
+                type="button"
+                aria-label={`Show ${photo.place}`}
+                aria-pressed={i === index}
+                onClick={() => select(i)}
+                className={cn(
+                  "h-1.5 rounded-full transition-all duration-200",
+                  i === index ? "w-5 bg-neutral-900" : "w-1.5 bg-neutral-300",
+                )}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+PhotoAlbumCard.displayName = "PhotoAlbumCard";

package/components/gallery/photo-contact-sheet-card.tsx

@@ -0,0 +1,71 @@
+import Image from "next/image";
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+export type ContactSheetFrame = {
+  src: string;
+  number: string;
+};
+
+export type PhotoContactSheetCardProps = Readonly<
+  {
+    rollLabel?: string;
+    frames?: ContactSheetFrame[];
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const defaultFrames: ContactSheetFrame[] = [
+  { src: "/background5.webp", number: "01" },
+  { src: "/background1.webp", number: "03" },
+  { src: "/wallpaper-11.png", number: "04" },
+  { src: "/wallpaper-2.png", number: "02" },
+];
+
+// Production-ready Photo Contact Sheet component — styled with Tailwind CSS.
+export const PhotoContactSheetCard = forwardRef<
+  HTMLDivElement,
+  PhotoContactSheetCardProps
+>(
+  (
+    {
+      className,
+      rollLabel = "Contact sheet — Roll 12A",
+      frames = defaultFrames,
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="photo-contact-sheet-card"
+      className={cn("w-xs bg-neutral-100 p-3 font-mono", className)}
+      {...props}
+    >
+      <p className="mb-2 text-[9px] tracking-wider text-neutral-500 uppercase">
+        {rollLabel}
+      </p>
+      <div className="grid grid-cols-2 gap-2">
+        {frames.map((frame) => (
+          <div
+            key={frame.number}
+            className="group relative aspect-4/5 overflow-hidden border border-neutral-300 bg-white"
+          >
+            <Image
+              src={frame.src}
+              alt={`Frame ${frame.number}`}
+              fill
+              sizes="160px"
+              className="object-cover transition-transform duration-500 group-hover:scale-105"
+            />
+            <span className="absolute top-1 left-1 bg-white/90 px-1 py-px text-[8px] font-bold text-neutral-800">
+              {frame.number}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+);
+
+PhotoContactSheetCard.displayName = "PhotoContactSheetCard";

package/components/gallery/polaroid-image-card.tsx

@@ -0,0 +1,81 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+
+export type PolaroidImageCardProps = Readonly<
+  {
+    image?: string;
+    imageAlt?: string;
+    caption?: string;
+    date?: string;
+    rotate?: boolean;
+    children?: ReactNode;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Polaroid Image component — styled with Tailwind CSS.
+export const PolaroidImageCard = forwardRef<
+  HTMLDivElement,
+  PolaroidImageCardProps
+>(
+  (
+    {
+      className,
+      image = "/background1.webp",
+      imageAlt = "Polaroid photo",
+      caption = "Golden hour, Kolkata ☀",
+      date = "June, 2026",
+      rotate = true,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        data-slot="polaroid-image-card"
+        className={cn("group w-56", className)}
+        {...props}
+      >
+        <div
+          className={cn(
+            "bg-white p-3 pb-10 shadow-[0_8px_30px_rgba(0,0,0,0.12)] transition-transform duration-500 ease-out",
+            rotate ? "-rotate-2 group-hover:rotate-0" : "",
+          )}
+        >
+          {/* Image */}
+          <div className="relative aspect-square w-full overflow-hidden bg-neutral-100">
+            <Image
+              src={image}
+              alt={imageAlt}
+              fill
+              sizes="224px"
+              className="object-cover sepia-[0.15] transition-all duration-500 group-hover:sepia-0"
+            />
+          </div>
+
+          {/* Caption */}
+          <p className="mt-4 text-center font-serif text-sm text-neutral-600 italic">
+            {caption}
+          </p>
+
+          {/* Date */}
+          <p className="mt-0.5 text-center font-mono text-[10px] text-neutral-400">
+            {date}
+          </p>
+
+          {/* Optional slot (future extension) */}
+          {children}
+        </div>
+      </div>
+    );
+  },
+);
+
+PolaroidImageCard.displayName = "PolaroidImageCard";

package/components/gallery/slow-living-polaroid-card.tsx

@@ -0,0 +1,88 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+
+export type SlowLivingPolaroidCardProps = Readonly<
+  {
+    image?: string;
+    imageAlt?: string;
+    category?: string;
+    issue?: string;
+    topic?: string;
+    date?: string;
+    ritual?: string;
+    headline?: string;
+    body?: string;
+    footer?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Slow Living Polaroid component — styled with Tailwind CSS.
+export const SlowLivingPolaroidCard = forwardRef<
+  HTMLDivElement,
+  SlowLivingPolaroidCardProps
+>(
+  (
+    {
+      className,
+      image = "/background5.webp",
+      imageAlt = "Slow morning portrait",
+      category = "LIFESTYLE",
+      issue = "01",
+      topic = "slow living",
+      date = "JAN 2026",
+      ritual = "daily ritual",
+      headline = "The beauty of a slow morning.",
+      body = "Fresh coffee, soft light, and a moment to just breathe before the day starts.",
+      footer = "stay grounded",
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="slow-living-polaroid-card"
+      className={cn(
+        "relative h-88 w-72 overflow-hidden bg-[#4a2525] font-sans shadow-lg",
+        className,
+      )}
+      {...props}
+    >
+      <div className="absolute top-5 right-5 z-30 text-right font-mono text-[8px] leading-[1.6] tracking-[0.14em] text-[#efe6dc] uppercase">
+        <p>
+          {category} / {issue} — {topic} —
+        </p>
+        <p>{date}</p>
+      </div>
+
+      <div className="absolute top-15 left-[54%] z-10 w-35 -translate-x-1/2 rotate-6">
+        <div
+          className="absolute -top-1.5 -left-2.5 z-20 h-6 w-12 rotate-[-14deg] bg-[#d9c9a3] shadow-sm [clip-path:polygon(4%_18%,12%_2%,88%_8%,96%_22%,92%_88%,84%_98%,14%_94%,2%_78%)]"
+          aria-hidden
+        />
+
+        <div className="bg-white p-2 pb-8 shadow-[0_14px_28px_rgba(0,0,0,0.32)]">
+          <div className="relative aspect-square w-full overflow-hidden bg-neutral-300">
+            <Image
+              src={image}
+              alt={imageAlt}
+              fill
+              sizes="168px"
+              className="object-cover"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="absolute inset-x-4 top-[56%] bottom-4 z-30 flex flex-col justify-end font-mono text-[9px] leading-[1.7] text-[#e8ddd4] lowercase">
+        <p className="text-[#f3ebe3]">{ritual}</p>
+        <p className="mt-1.5 text-[#faf5ef]">{headline}</p>
+        <p className="mt-1.5">{body}</p>
+        <p className="mt-2 text-[#d9cfc4]">{footer}</p>
+      </div>
+    </div>
+  ),
+);
+
+SlowLivingPolaroidCard.displayName = "SlowLivingPolaroidCard";

package/components/gallery/stamp-postcard-card.tsx

@@ -0,0 +1,78 @@
+import Image from "next/image";
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+export type StampPostcardCardProps = Readonly<
+  {
+    message?: string;
+    location?: string;
+    stampValue?: string;
+    imageSrc?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Stamp Postcard component — styled with Tailwind CSS.
+export const StampPostcardCard = forwardRef<
+  HTMLDivElement,
+  StampPostcardCardProps
+>(
+  (
+    {
+      className,
+      message = "Wish you were here! The Sundarbans at golden hour — absolutely unreal.",
+      location = "Sundarbans, WB",
+      stampValue = "₹5",
+      imageSrc = "/background1.webp",
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="stamp-postcard-card"
+      className={cn("w-sm font-sans", className)}
+      {...props}
+    >
+      <div className="relative overflow-hidden rounded-sm border border-neutral-200 bg-[#fffef8] shadow-md">
+        <div className="relative h-32 md:h-36">
+          <Image
+            src={imageSrc}
+            alt={location}
+            fill
+            sizes="320px"
+            className="object-cover"
+          />
+          <div className="absolute top-2 right-2 flex h-14 w-11 rotate-3 flex-col items-center justify-center border-2 border-dashed border-[#b4b1ac] bg-[#f6f2eb]">
+            <span className="text-[8px] font-bold text-[#979591]">INDIA</span>
+            <span className="text-sm font-black text-[#6b6966]">
+              {stampValue}
+            </span>
+          </div>
+        </div>
+        <div className="grid grid-cols-2 gap-0 border-t border-neutral-200">
+          <div className="border-r border-neutral-200 p-3">
+            <p className="text-[12px] leading-relaxed text-neutral-700 italic">
+              {message}
+            </p>
+          </div>
+          <div className="flex flex-col justify-end p-3">
+            <p className="font-mono text-[9px] tracking-wider text-neutral-400 uppercase">
+              Posted from
+            </p>
+            <p className="mt-0.5 text-[11px] font-semibold text-neutral-800">
+              {location}
+            </p>
+            <div className="mt-3 space-y-2">
+              <div className="h-px bg-neutral-200" />
+              <div className="h-px bg-neutral-200" />
+              <div className="h-px bg-neutral-200" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+);
+
+StampPostcardCard.displayName = "StampPostcardCard";