Social Card

1"use client";
2 
3import Link from "next/link";
4import { cn } from "@/lib/utils";
5import { useState } from "react";
6import type * as React from "react";
7import { motion } from "motion/react";
8import { LuArrowUpRight } from "react-icons/lu";
9 
10interface SocialCardProps {
11  className?: string;
12  image: string;
13  title: string;
14  name: string;
15  pitch: string;
16  icon?: React.ReactNode;
17  buttons?: Array<{
18    label: string;
19    icon?: React.ReactNode;
20    link?: string;
21  }>;
22}
23 
24const SocialCard = ({
25  className,
26  image,
27  title,
28  name,
29  pitch,
30  icon,
31  buttons,
32}: SocialCardProps) => {
33  const [isHovered, setHovered] = useState(false);
34 
35  return (
36    <motion.div
37      className={cn(
38        "group relative h-87.5 w-70 overflow-hidden rounded-2xl p-0 md:w-75",
39        "bg-white/50 dark:bg-neutral-950/50",
40        "shadow-sm ring-1 shadow-black/10 ring-black/10 dark:bg-neutral-900 dark:ring-neutral-800",
41        className,
42      )}
43      initial={{ y: 20, opacity: 0 }}
44      animate={{ y: 0, opacity: 1 }}
45      whileHover={{ scale: 1.02 }}
46      onMouseEnter={() => setHovered(true)}
47      onMouseLeave={() => setHovered(false)}
48    >
49      <div className="relative mb-2 p-6 pb-4">
50        <div className="flex items-start justify-between">
51          <div className="flex-1">
52            <div className="mb-1 flex items-center gap-3">
53              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400">
54                {icon}
55              </div>
56              <div className="h-px flex-1 bg-linear-to-r from-neutral-200 to-transparent dark:from-neutral-800"></div>
57            </div>
58            <h3 className="text-xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-100">
59              {title}
60            </h3>
61            <div className="mt-1 h-0.5 w-12 bg-linear-to-r from-neutral-400 to-neutral-200 dark:from-neutral-600 dark:to-neutral-800"></div>
62          </div>
63        </div>
64 
65        {isHovered && (
66          <>
67            <motion.img
68              src={image}
69              alt={title}
70              className="absolute top-6 right-4 h-18 w-18 rounded-sm shadow-lg ring-2 ring-white dark:ring-neutral-900"
71              width={500}
72              height={500}
73              layoutId="card-image"
74              transition={{ duration: 0.3, ease: "circIn" }}
75            />
76 
77            <motion.div
78// … truncated