motion-ui-skill 2.0.0

package/components/profile/team-member-profile-grid.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import Link from "next/link";
+
+import { cn } from "@/lib/cn";
+
+export type TeamMemberProfile = Readonly<{
+  id?: string;
+  name: string;
+  role: string;
+  bio: string;
+  image: string;
+  imageAlt?: string;
+  profileHref?: string;
+}>;
+
+export type TeamMemberProfileGridProps = Readonly<
+  {
+    title?: string;
+    subtitle?: string;
+    members?: readonly TeamMemberProfile[];
+    profileLabel?: string;
+  } & ComponentPropsWithoutRef<"section">
+>;
+
+const DEFAULT_MEMBERS: readonly TeamMemberProfile[] = [
+  {
+    id: "alex-morgan",
+    name: "Alex Morgan",
+    role: "Founder & engineer",
+    bio: "Building open-source UI for developers who care about craft, speed, and copy-paste simplicity.",
+    image: "/profile-picture.png",
+    profileHref: "#",
+  },
+  {
+    id: "team-placeholder-1",
+    name: "Team member",
+    role: "Role",
+    bio: "Add your next hire here when the team grows.",
+    image: "/profile-picture.png",
+    profileHref: "#",
+  },
+  {
+    id: "team-placeholder-2",
+    name: "Team member",
+    role: "Role",
+    bio: "Swap this placeholder with a real profile.",
+    image: "/profile-picture.png",
+    profileHref: "#",
+  },
+];
+
+function MemberProfileLink({
+  href,
+  label,
+  className,
+}: Readonly<{
+  href: string;
+  label: string;
+  className?: string;
+}>) {
+  const linkClassName = cn(
+    "text-xs font-medium text-neutral-900 underline-offset-4 transition-colors hover:underline",
+    className,
+  );
+
+  if (!href || href === "#") {
+    return (
+      <button type="button" className={linkClassName}>
+        {label}
+      </button>
+    );
+  }
+
+  return (
+    <Link href={href} className={linkClassName}>
+      {label}
+    </Link>
+  );
+}
+
+// Team member profile grid — equal-height cards with compact portraits for about pages.
+export const TeamMemberProfileGrid = forwardRef<
+  HTMLElement,
+  TeamMemberProfileGridProps
+>(
+  (
+    {
+      className,
+      title = "The team",
+      subtitle = "People behind the product",
+      members = DEFAULT_MEMBERS,
+      profileLabel = "View profile",
+      ...props
+    },
+    ref,
+  ) => (
+    <section
+      ref={ref}
+      data-slot="team-member-profile-grid"
+      className={cn("w-full max-w-4xl font-sans", className)}
+      {...props}
+    >
+      <header className="mb-8 border-b border-neutral-200 pb-4">
+        <p className="font-mono text-[10px] font-semibold tracking-[0.2em] text-neutral-500 uppercase">
+          {subtitle}
+        </p>
+        <h2 className="mt-2 font-serif text-3xl leading-none tracking-tight text-neutral-950">
+          {title}
+        </h2>
+      </header>
+
+      <ul className="grid grid-cols-1 gap-6 md:grid-cols-3">
+        {members.map((member, index) => {
+          const alt = member.imageAlt ?? member.name;
+          const key = member.id ?? `${member.name}-${index}`;
+
+          return (
+            <li key={key} className="min-w-0">
+              <article className="flex h-full flex-col border border-neutral-200 bg-white p-5">
+                <div className="size-16 shrink-0 overflow-hidden border border-neutral-200 bg-neutral-100">
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    src={member.image}
+                    alt={alt}
+                    className="size-full object-cover"
+                  />
+                </div>
+
+                <h3 className="mt-4 font-serif text-xl leading-none tracking-tight text-neutral-950">
+                  {member.name}
+                </h3>
+                <p className="mt-2 text-[10px] font-semibold tracking-[0.16em] text-neutral-500 uppercase">
+                  {member.role}
+                </p>
+                <p className="mt-3 text-xs leading-relaxed text-neutral-600">
+                  {member.bio}
+                </p>
+
+                {member.profileHref ? (
+                  <div className="mt-auto border-t border-neutral-100 pt-4">
+                    <MemberProfileLink
+                      href={member.profileHref}
+                      label={profileLabel}
+                    />
+                  </div>
+                ) : null}
+              </article>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  ),
+);
+
+TeamMemberProfileGrid.displayName = "TeamMemberProfileGrid";

package/components/profile/user-profile-card.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import Link from "next/link";
+
+import { ArrowUpRight } from "lucide-react";
+
+import { cn } from "@/lib/cn";
+
+export type UserProfileCardProps = Readonly<
+  {
+    name?: string;
+    title?: string;
+    bio?: string;
+    image?: string;
+    imageAlt?: string;
+    emailHref?: string;
+    websiteHref?: string;
+    emailLabel?: string;
+    websiteLabel?: string;
+    sectionLabel?: string;
+  } & ComponentPropsWithoutRef<"article">
+>;
+
+function ProfileLink({
+  href,
+  label,
+}: Readonly<{
+  href: string;
+  label: string;
+}>) {
+  const className =
+    "group inline-flex items-center gap-1 text-sm text-neutral-800 underline-offset-4 transition-colors hover:text-neutral-950 hover:underline";
+
+  if (!href || href === "#") {
+    return (
+      <button type="button" className={className}>
+        {label}
+        <ArrowUpRight
+          size={13}
+          aria-hidden
+          className="transition-transform group-hover:translate-x-px group-hover:-translate-y-px"
+        />
+      </button>
+    );
+  }
+
+  return (
+    <Link href={href} className={className}>
+      {label}
+      <ArrowUpRight
+        size={13}
+        aria-hidden
+        className="transition-transform group-hover:translate-x-px group-hover:-translate-y-px"
+      />
+    </Link>
+  );
+}
+
+// User profile — author byline on warm editorial paper, not another avatar hero card.
+export const UserProfileCard = forwardRef<HTMLElement, UserProfileCardProps>(
+  (
+    {
+      className,
+      name = "Alex Morgan",
+      title = "Founder & engineer",
+      bio = "Building open-source UI for developers who care about craft, speed, and copy-paste simplicity.",
+      image = "/profile-picture.png",
+      imageAlt,
+      emailHref = "mailto:alex.morgan@example.com",
+      websiteHref = "https://motion-ui.dev",
+      emailLabel = "alex.morgan@example.com",
+      websiteLabel = "motion-ui.dev",
+      sectionLabel = "Profile",
+      ...props
+    },
+    ref,
+  ) => {
+    const alt = imageAlt ?? name;
+
+    return (
+      <article
+        ref={ref}
+        data-slot="user-profile-card"
+        className={cn(
+          "w-80 border border-neutral-200 bg-[#f6f2eb] p-5 font-sans",
+          className,
+        )}
+        {...props}
+      >
+        <div className="mb-4 flex items-center justify-between border-b border-neutral-200 pb-3">
+          <span className="font-mono text-[10px] font-semibold tracking-[0.2em] text-neutral-500 uppercase">
+            {sectionLabel}
+          </span>
+        </div>
+
+        <div className="flex gap-4">
+          <div className="size-16 shrink-0 overflow-hidden border border-neutral-300 bg-neutral-100">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={image} alt={alt} className="size-full object-cover" />
+          </div>
+
+          <div className="min-w-0 pt-0.5">
+            <h3 className="font-serif text-2xl leading-none tracking-tight text-neutral-950">
+              {name}
+            </h3>
+            <p className="mt-2 font-mono text-[10px] font-medium tracking-[0.16em] text-neutral-500 uppercase">
+              {title}
+            </p>
+          </div>
+        </div>
+
+        <p className="mt-4 text-sm leading-relaxed text-neutral-700">{bio}</p>
+
+        <div className="mt-5 flex flex-wrap gap-x-5 gap-y-2 border-t border-neutral-200 pt-4">
+          <ProfileLink href={emailHref} label={emailLabel} />
+          <ProfileLink href={websiteHref} label={websiteLabel} />
+        </div>
+      </article>
+    );
+  },
+);
+
+UserProfileCard.displayName = "UserProfileCard";

package/components/resources/resource-links-panel.tsx

@@ -0,0 +1,176 @@
+import Image from "next/image";
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ComponentType,
+  type SVGProps,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { ProductHunt } from "@/icons/brands/producthunt";
+
+export type ResourceLinkItem = Readonly<{
+  name: string;
+  description: string;
+  shortDescription?: string;
+  href: string;
+  domain?: string;
+  color?: string;
+  Icon?: ComponentType<SVGProps<SVGSVGElement> & { size?: number | string }>;
+  imageSrc?: string;
+  letter?: string;
+}>;
+
+const DEMO_ITEMS: ResourceLinkItem[] = [
+  {
+    name: "Cursor",
+    description: "For Editor",
+    href: "https://cursor.com",
+    imageSrc: "/cursor.webp",
+  },
+  {
+    name: "Dither.it",
+    description: "For making images better",
+    href: "https://ditherit.com",
+    letter: "D",
+    color: "text-rose-400",
+  },
+  {
+    name: "Lucide",
+    description: "For icons",
+    href: "https://lucide.dev",
+    imageSrc: "/lucide-logo.svg",
+  },
+  {
+    name: "Product Hunt",
+    description: "For new products",
+    href: "https://www.producthunt.com",
+    Icon: ProductHunt,
+    color: "text-red-400",
+  },
+];
+
+export type ResourceLinksPanelProps = Readonly<
+  {
+    title?: string;
+    items?: readonly ResourceLinkItem[];
+    sortItems?: boolean;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+function getDomain(href: string) {
+  try {
+    return new URL(href).hostname.replace(/^www\./, "");
+  } catch {
+    return href;
+  }
+}
+
+function ListIcon({ item }: { item: ResourceLinkItem }) {
+  const { Icon, imageSrc, letter, color } = item;
+  const iconColor = color ?? "text-neutral-800";
+  const letterColor = color ?? "text-neutral-600";
+
+  return (
+    <div className="flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden">
+      {imageSrc ? (
+        <Image
+          src={imageSrc}
+          alt=""
+          width={20}
+          height={20}
+          className="h-5 w-5 rounded object-contain"
+        />
+      ) : Icon ? (
+        <Icon size={16} className={iconColor} />
+      ) : (
+        <span className={`font-sans text-[16px] font-semibold ${letterColor}`}>
+          {letter}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function ListRow({ item }: { item: ResourceLinkItem }) {
+  const domain = item.domain ?? getDomain(item.href);
+  const mobileDescription = item.shortDescription ?? item.description;
+
+  return (
+    <li className="min-w-0">
+      <a
+        href={item.href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="group flex min-w-0 items-center gap-2.5 py-0.5 max-[499px]:gap-2"
+      >
+        <ListIcon item={item} />
+        <div className="flex min-w-0 flex-1 items-center gap-3 max-[499px]:gap-2">
+          <p className="hidden min-w-0 flex-1 truncate font-sans text-sm leading-snug min-[500px]:block">
+            <span className="font-semibold text-neutral-900 group-hover:text-neutral-700">
+              {item.name}
+            </span>
+            <span className="text-neutral-300"> / </span>
+            <span className="text-neutral-500">{item.description}</span>
+          </p>
+
+          <div className="flex min-w-0 flex-1 items-baseline overflow-hidden min-[500px]:hidden">
+            <span className="shrink-0 font-sans text-xs leading-snug font-semibold text-neutral-900 group-hover:text-neutral-700">
+              {item.name}
+            </span>
+            <span className="shrink-0 px-1 font-sans text-xs text-neutral-300">
+              /
+            </span>
+            <span className="min-w-0 truncate font-sans text-xs leading-snug text-neutral-500">
+              {mobileDescription}
+            </span>
+          </div>
+
+          <span className="shrink-0 font-mono text-sm text-neutral-400 group-hover:text-neutral-500 max-[499px]:text-[11px]">
+            {domain}
+          </span>
+        </div>
+      </a>
+    </li>
+  );
+}
+
+// Resource link list — same row layout as the homepage Resources section. Copy, pass title + items.
+export const ResourceLinksPanel = forwardRef<
+  HTMLDivElement,
+  ResourceLinksPanelProps
+>(function ResourceLinksPanel(
+  {
+    title = "Resources",
+    items = DEMO_ITEMS,
+    sortItems = true,
+    className,
+    ...props
+  },
+  ref,
+) {
+  const rows = sortItems
+    ? [...items].sort((a, b) => a.name.localeCompare(b.name))
+    : items;
+
+  return (
+    <div
+      ref={ref}
+      className={cn("min-w-0 max-[499px]:overflow-hidden", className)}
+      {...props}
+    >
+      <section>
+        <h3 className="font-sans text-sm font-semibold text-neutral-900">
+          {title}
+        </h3>
+        <ul className="mt-4 flex flex-col gap-2.5">
+          {rows.map((item) => (
+            <ListRow key={item.name} item={item} />
+          ))}
+        </ul>
+      </section>
+    </div>
+  );
+});
+
+ResourceLinksPanel.displayName = "ResourceLinksPanel";

package/components/socials/discord-chat-card.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+
+import { Send } from "lucide-react";
+import { Discord } from "@/icons/brands/discord";
+
+export type DiscordMessage = {
+  id: string;
+  author: string;
+  avatar?: string;
+  content: string;
+  time: string;
+  roleColor?: string;
+};
+
+export type DiscordChatCardProps = Readonly<
+  {
+    channel?: string;
+    server?: string;
+    messages?: DiscordMessage[];
+    onSend?: (text: string) => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const defaultMessages: DiscordMessage[] = [
+  {
+    id: "1",
+    author: "Sarah",
+    avatar: "/woman.png",
+    content: "The new GitHub repo card looks clean — shipping tonight?",
+    time: "10:41 AM",
+    roleColor: "text-violet-400",
+  },
+  {
+    id: "2",
+    author: "Marcus",
+    avatar: "/profile-picture.png",
+    content: "Yep, PR is ready. Typewriter widget is my favorite.",
+    time: "10:43 AM",
+    roleColor: "text-teal-400",
+  },
+];
+
+// Production-ready Discord Chat component — styled with Tailwind CSS.
+export const DiscordChatCard = forwardRef<HTMLDivElement, DiscordChatCardProps>(
+  (
+    {
+      className,
+      channel = "design-system",
+      server = "Motion UI",
+      messages = defaultMessages,
+      onSend,
+      ...props
+    },
+    ref,
+  ) => {
+    const [items, setItems] = useState(messages);
+    const [draft, setDraft] = useState("");
+
+    const send = () => {
+      if (!draft.trim()) return;
+      setItems((prev) => [
+        ...prev,
+        {
+          id: String(prev.length + 1),
+          author: "You",
+          avatar: "/profile-picture.png",
+          content: draft.trim(),
+          time: "Now",
+          roleColor: "text-blue-400",
+        },
+      ]);
+      onSend?.(draft.trim());
+      setDraft("");
+    };
+
+    return (
+      <div
+        ref={ref}
+        data-slot="discord-chat-card"
+        className={cn(
+          "w-72 overflow-hidden rounded-2xl border border-neutral-100 bg-white font-sans shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        <div className="flex items-center gap-2.5 border-b border-neutral-100 px-4 py-3">
+          <Discord size={15} color="#5865F2" className="shrink-0" />
+          <p className="min-w-0 flex-1 truncate text-sm text-neutral-800">
+            <span className="text-neutral-300">·</span>
+            <span className="text-[11px] text-neutral-400">{server}</span>
+          </p>
+        </div>
+
+        <div className="max-h-40 scrollbar-none space-y-3 overflow-y-auto px-3 py-3 [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
+          {items.map((msg) => (
+            <div key={msg.id} className="flex items-start gap-2.5">
+              <div className="h-7 w-7 shrink-0 overflow-hidden rounded-full bg-neutral-100">
+                <Image
+                  src={msg.avatar ?? "/profile-picture.png"}
+                  alt={msg.author}
+                  width={28}
+                  height={28}
+                  className="h-full w-full object-cover"
+                />
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="flex items-baseline gap-2">
+                  <span
+                    className={cn(
+                      "text-[12px] font-semibold",
+                      msg.roleColor ?? "text-neutral-800",
+                    )}
+                  >
+                    {msg.author}
+                  </span>
+                  <span className="text-[10px] text-neutral-400">
+                    {msg.time}
+                  </span>
+                </div>
+                <p className="mt-0.5 text-[12px] leading-relaxed text-neutral-700">
+                  {msg.content}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex items-center gap-2 border-t border-neutral-100 px-3 py-2">
+          <input
+            type="text"
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && send()}
+            placeholder={`Message #${channel}`}
+            aria-label="Discord message"
+            className="flex-1 rounded-lg bg-neutral-100 px-3 py-2 text-[12px] outline-none focus:bg-neutral-50"
+          />
+          <button
+            type="button"
+            onClick={send}
+            aria-label="Send"
+            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-[#5865F2] text-white"
+          >
+            <Send size={12} />
+          </button>
+        </div>
+      </div>
+    );
+  },
+);
+
+DiscordChatCard.displayName = "DiscordChatCard";