{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "profile-page-shadcnui",
  "type": "registry:page",
  "title": "Profile Page",
  "description": "User profile with gradient cover, stats, and posts feed",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/profile/profile-page.tsx",
      "content": "\"use client\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { motion } from \"framer-motion\";\nimport {\n  Calendar,\n  Link as LinkIcon,\n  MapPin,\n  MoreHorizontal,\n  UserPlus,\n} from \"lucide-react\";\nimport { useState } from \"react\";\n\nexport function ProfilePage() {\n  const [isFollowing, setIsFollowing] = useState(false);\n\n  return (\n    <div className=\"\">\n      {/* Cover Image with Gradient Animation */}\n      <div\n        className=\"relative h-48 md:h-64 w-full overflow-hidden rounded-b-2xl\"\n        role=\"img\"\n        aria-label=\"Profile cover background\"\n      >\n        <motion.div\n          className=\"absolute inset-0\"\n          animate={{\n            background: [\n              \"linear-gradient(45deg, #667eea 0%, #764ba2 100%)\",\n              \"linear-gradient(45deg, #f093fb 0%, #f5576c 100%)\",\n              \"linear-gradient(45deg, #4facfe 0%, #00f2fe 100%)\",\n              \"linear-gradient(45deg, #43e97b 0%, #38f9d7 100%)\",\n              \"linear-gradient(45deg, #667eea 0%, #764ba2 100%)\",\n            ],\n          }}\n          transition={{\n            duration: 15,\n            repeat: Infinity,\n            ease: \"linear\",\n          }}\n        />\n        <div className=\"absolute inset-0 bg-black/10\" />\n      </div>\n\n      <div className=\"container max-w-4xl mx-auto px-4 sm:px-6 pb-6\">\n        {/* Profile Header */}\n        <div className=\"relative -mt-8 sm:-mt-8 mb-6 sm:mb-8 flex flex-col items-start gap-4 md:flex-row md:items-end md:justify-between\">\n          <div className=\"flex items-end gap-4 sm:gap-6\">\n            <motion.div\n              initial={{ scale: 0.9, opacity: 0 }}\n              animate={{ scale: 1, opacity: 1 }}\n              transition={{ delay: 0.2 }}\n              className=\"relative\"\n            >\n              <div className=\"h-24 w-24 sm:h-32 sm:w-32 overflow-hidden rounded-full border-4 border-background bg-background shadow-xl\">\n                <Avatar className=\"h-full w-full\">\n                  <AvatarImage\n                    src=\"https://github.com/shadcn.png\"\n                    alt=\"Moumen Soliman's profile picture\"\n                    className=\"object-cover\"\n                  />\n                  <AvatarFallback className=\"text-2xl sm:text-4xl\">\n                    MS\n                  </AvatarFallback>\n                </Avatar>\n              </div>\n              <div\n                className=\"absolute bottom-1 right-1 sm:bottom-2 sm:right-2 h-4 w-4 sm:h-5 sm:w-5 rounded-2xl border-4 border-background bg-emerald-500\"\n                aria-label=\"Online status: Active\"\n                role=\"status\"\n              />\n            </motion.div>\n\n            <div className=\"mb-1 sm:mb-2 space-y-0.5 sm:space-y-1\">\n              <h1 className=\"text-xl sm:text-2xl font-bold tracking-tight text-foreground md:text-3xl\">\n                Moumen Soliman\n              </h1>\n              <p className=\"text-sm sm:text-base text-muted-foreground\">\n                @moumensoliman\n              </p>\n            </div>\n          </div>\n\n          <div className=\"flex w-full gap-2 sm:gap-3 md:w-auto md:mb-2\">\n            <Button\n              className={cn(\n                \"flex-1 md:flex-none gap-2 transition-all\",\n                isFollowing\n                  ? \"bg-secondary text-secondary-foreground hover:bg-secondary/80\"\n                  : \"\"\n              )}\n              variant={isFollowing ? \"secondary\" : \"default\"}\n              onClick={() => setIsFollowing(!isFollowing)}\n              aria-label={\n                isFollowing\n                  ? \"Unfollow Moumen Soliman\"\n                  : \"Follow Moumen Soliman\"\n              }\n            >\n              <UserPlus className=\"h-4 w-4\" aria-hidden=\"true\" />\n              {isFollowing ? \"Following\" : \"Follow\"}\n            </Button>\n            <Button\n              variant=\"outline\"\n              className=\"flex-1 md:flex-none\"\n              aria-label=\"Message Moumen Soliman\"\n            >\n              Message\n            </Button>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"border border-border/40\"\n              aria-label=\"More profile options\"\n            >\n              <MoreHorizontal className=\"h-4 w-4\" aria-hidden=\"true\" />\n            </Button>\n          </div>\n        </div>\n\n        {/* Bio & Stats */}\n        <section\n          aria-label=\"User bio and statistics\"\n          className=\"grid gap-8 md:grid-cols-[2fr,1fr]\"\n        >\n          <div className=\"space-y-6\">\n            <div className=\"space-y-4\">\n              <p className=\"text-sm sm:text-base leading-relaxed text-foreground/90\">\n                Product Designer & Frontend Developer. Passionate about building\n                beautiful, accessible user interfaces. Creating digital\n                experiences that matter. ✨\n              </p>\n\n              <div className=\"flex flex-wrap gap-3 sm:gap-4 text-xs sm:text-sm text-muted-foreground\">\n                <div className=\"flex items-center gap-1.5\">\n                  <MapPin\n                    className=\"h-3.5 w-3.5 sm:h-4 sm:w-4\"\n                    aria-hidden=\"true\"\n                  />\n                  <span>San Francisco, CA</span>\n                </div>\n                <div className=\"flex items-center gap-1.5\">\n                  <LinkIcon\n                    className=\"h-3.5 w-3.5 sm:h-4 sm:w-4\"\n                    aria-hidden=\"true\"\n                  />\n                  <a\n                    href=\"#\"\n                    className=\"hover:text-primary hover:underline\"\n                    aria-label=\"Visit Moumen Soliman's website\"\n                  >\n                    moumen.dev\n                  </a>\n                </div>\n                <div className=\"flex items-center gap-1.5\">\n                  <Calendar\n                    className=\"h-3.5 w-3.5 sm:h-4 sm:w-4\"\n                    aria-hidden=\"true\"\n                  />\n                  <span>Joined March 2024</span>\n                </div>\n              </div>\n\n              <div className=\"flex gap-4 sm:gap-6 pt-2 text-sm sm:text-base\">\n                <div className=\"flex items-center gap-1.5\">\n                  <span className=\"font-bold text-foreground\">1,240</span>\n                  <span className=\"text-muted-foreground\">Following</span>\n                </div>\n                <div className=\"flex items-center gap-1.5\">\n                  <span className=\"font-bold text-foreground\">8,560</span>\n                  <span className=\"text-muted-foreground\">Followers</span>\n                </div>\n                <div className=\"flex items-center gap-1.5\">\n                  <span className=\"font-bold text-foreground\">342</span>\n                  <span className=\"text-muted-foreground\">Posts</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </section>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:page",
      "target": "components/uitripled/profile-page-shadcnui.tsx"
    }
  ]
}