{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glassmorphism-listen-app-block-shadcnui",
  "type": "registry:block",
  "title": "Glassmorphism Listen App",
  "description": "Music streaming block with glassmorphism player, curated highlights, and animated controls",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/glassmorphism-listen-app-block.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport {\n  Headphones,\n  Heart,\n  Pause,\n  Repeat,\n  Shuffle,\n  SkipBack,\n  SkipForward,\n  Volume2,\n} from \"lucide-react\";\n\nconst highlights = [\n  {\n    title: \"Spatial audio\",\n    description:\n      \"Immerse yourself in cinematic soundscapes crafted for every mood.\",\n  },\n];\n\nconst playlist = [\n  {\n    id: \"5L2ELXkO17Iu9J8hwMktVJ\",\n    title: \"Helaf El Amar\",\n    artist: \"George Wassouf\",\n    album: \"El Hawa Sultan\",\n    duration: \"6:40\",\n    currentTime: \"01:12\",\n    progress: 35,\n    spotifyUrl: \"https://open.spotify.com/track/5L2ELXkO17Iu9J8hwMktVJ\",\n    embedUrl:\n      \"https://open.spotify.com/embed/track/5L2ELXkO17Iu9J8hwMktVJ?utm_source=generator\",\n  },\n  {\n    id: \"2Z8WuEywRWYTKe1NybPQEW\",\n    title: \"Levitating\",\n    artist: \"Dua Lipa\",\n    album: \"Future Nostalgia\",\n    duration: \"3:23\",\n    currentTime: \"00:48\",\n    progress: 22,\n    spotifyUrl: \"https://open.spotify.com/track/2Z8WuEywRWYTKe1NybPQEW\",\n    embedUrl:\n      \"https://open.spotify.com/embed/track/2Z8WuEywRWYTKe1NybPQEW?utm_source=generator\",\n  },\n  {\n    id: \"02MWAaffLxlfxAUY7c5dvx\",\n    title: \"Heat Waves\",\n    artist: \"Glass Animals\",\n    album: \"Dreamland\",\n    duration: \"3:58\",\n    currentTime: \"02:41\",\n    progress: 68,\n    spotifyUrl: \"https://open.spotify.com/track/02MWAaffLxlfxAUY7c5dvx\",\n    embedUrl:\n      \"https://open.spotify.com/embed/track/02MWAaffLxlfxAUY7c5dvx?utm_source=generator\",\n  },\n  {\n    id: \"4ZtFanR9U6ndgddUvNcjcG\",\n    title: \"good 4 u\",\n    artist: \"Olivia Rodrigo\",\n    album: \"SOUR\",\n    duration: \"2:58\",\n    currentTime: \"00:36\",\n    progress: 20,\n    spotifyUrl: \"https://open.spotify.com/track/4ZtFanR9U6ndgddUvNcjcG\",\n    embedUrl:\n      \"https://open.spotify.com/embed/track/4ZtFanR9U6ndgddUvNcjcG?utm_source=generator\",\n  },\n];\n\nexport function GlassmorphismListenAppBlock() {\n  const [activeIndex, setActiveIndex] = useState(0);\n  const activeTrack = playlist[activeIndex];\n\n  return (\n    <section className=\"relative overflow-hidden px-6 py-32\">\n      <div className=\"absolute inset-0 -z-10\">\n        <div className=\"absolute left-1/2 top-0 h-[520px] w-[520px] -translate-x-1/2 rounded-full bg-foreground/[0.03] blur-3xl\" />\n        <div className=\"absolute bottom-0 right-0 h-[420px] w-[420px] rounded-full bg-foreground/[0.02] blur-3xl\" />\n      </div>\n\n      <div className=\"mx-auto max-w-6xl\">\n        <Card className=\"relative overflow-hidden border border-border/50 bg-background/40 p-10 shadow-[0_40px_120px_rgba(15,23,42,0.25)] backdrop-blur-2xl md:p-16\">\n          <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.05] via-transparent to-transparent\" />\n\n          <div className=\"relative z-10 grid gap-12 lg:grid-cols-[1.15fr_0.85fr]\">\n            <div className=\"space-y-10\">\n              <div className=\"space-y-5\">\n                <Badge\n                  variant=\"outline\"\n                  className=\"w-fit border-border/60 bg-background/40 text-xs uppercase tracking-[0.2em] text-foreground/70 backdrop-blur\"\n                >\n                  listen app\n                </Badge>\n                <div className=\"space-y-4\">\n                  <h2 className=\"text-4xl font-semibold tracking-tight text-foreground md:text-5xl lg:text-6xl\">\n                    Sound that feels like a private concert\n                  </h2>\n                  <p className=\"max-w-xl text-base leading-relaxed text-foreground/70 md:text-lg\">\n                    Stream, discover, and share music with glassy interfaces,\n                    subtle motion, and immersive visuals that keep the focus on\n                    the sound.\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"flex flex-col gap-4 pt-2 sm:flex-row\">\n                <Button size=\"lg\" className=\"h-12 rounded-full px-8 text-base\">\n                  Start listening\n                </Button>\n                <Button\n                  size=\"lg\"\n                  variant=\"outline\"\n                  className=\"h-12 rounded-full px-8 text-base hover:bg-foreground/5\"\n                >\n                  View plans\n                </Button>\n              </div>\n\n              <div className=\"grid gap-4 sm:grid-cols-1\">\n                {highlights.map((highlight) => (\n                  <div\n                    key={highlight.title}\n                    className=\"group h-full rounded-3xl border border-border/40 bg-background/60 p-6 backdrop-blur-xl transition-all duration-300 hover:-translate-y-1 hover:border-border\"\n                  >\n                    <div className=\"mb-4 flex h-10 w-10 items-center justify-center rounded-full border border-border/40 bg-foreground/10 text-foreground/80\">\n                      <Headphones className=\"h-4 w-4\" />\n                    </div>\n                    <h3 className=\"mb-2 text-lg font-semibold text-foreground\">\n                      {highlight.title}\n                    </h3>\n                    <p className=\"text-sm leading-relaxed text-foreground/70\">\n                      {highlight.description}\n                    </p>\n                  </div>\n                ))}\n              </div>\n            </div>\n\n            <div className=\"space-y-6\">\n              <div className=\"rounded-3xl border border-border/40 bg-background/70 p-6 shadow-[0_25px_80px_rgba(15,23,42,0.35)] backdrop-blur-2xl\">\n                <div className=\"flex items-start gap-4\">\n                  <div className=\"relative h-20 w-20 overflow-hidden rounded-2xl border border-border/40 bg-gradient-to-br from-foreground/30 via-foreground/10 to-transparent\">\n                    <div className=\"absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(255,255,255,0.6),_transparent_60%)]\" />\n                    <div className=\"absolute bottom-2 left-1/2 h-8 w-8 -translate-x-1/2 rounded-full bg-background/70\" />\n                  </div>\n                  <div className=\"flex-1 space-y-4\">\n                    <div className=\"flex items-start justify-between gap-3\">\n                      <div>\n                        <p className=\"text-xs uppercase tracking-[0.3em] text-foreground/60\">\n                          Now playing\n                        </p>\n                        <h3 className=\"mt-2 text-2xl font-semibold tracking-tight text-foreground\">\n                          {activeTrack.title}\n                        </h3>\n                        <p className=\"text-sm text-foreground/60\">\n                          {activeTrack.artist} · {activeTrack.album}\n                        </p>\n                      </div>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon\"\n                        className=\"rounded-full border border-border/40 bg-background/60 text-foreground/70 backdrop-blur hover:text-foreground\"\n                      >\n                        <Heart className=\"h-4 w-4\" />\n                      </Button>\n                    </div>\n                    <Button\n                      variant=\"outline\"\n                      size=\"sm\"\n                      className=\"h-9 rounded-full border-border/50 bg-background/60 px-4 text-xs uppercase tracking-[0.2em] text-foreground/70 backdrop-blur hover:text-foreground\"\n                      asChild\n                    >\n                      <a\n                        href={activeTrack.spotifyUrl}\n                        target=\"_blank\"\n                        rel=\"noreferrer\"\n                      >\n                        Open in Spotify\n                      </a>\n                    </Button>\n                  </div>\n                </div>\n\n                <div className=\"space-y-3 pt-6\">\n                  <div className=\"flex items-center justify-between text-xs font-medium tracking-wide text-foreground/50\">\n                    <span>{activeTrack.currentTime}</span>\n                    <span>{activeTrack.duration}</span>\n                  </div>\n                  <div className=\"h-1.5 w-full rounded-full bg-foreground/10\">\n                    <div\n                      className=\"h-full rounded-full bg-gradient-to-r from-foreground to-foreground/40 transition-[width]\"\n                      style={{ width: `${activeTrack.progress}%` }}\n                    />\n                  </div>\n                </div>\n\n                <div className=\"flex items-center justify-between pt-6\">\n                  <div className=\"flex items-center gap-2\">\n                    <Button\n                      variant=\"ghost\"\n                      size=\"icon\"\n                      className=\"h-10 w-10 rounded-full border border-border/40 bg-background/60 text-foreground/70 backdrop-blur hover:text-foreground\"\n                    >\n                      <Shuffle className=\"h-4 w-4\" />\n                    </Button>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"icon\"\n                      className=\"h-10 w-10 rounded-full border border-border/40 bg-background/60 text-foreground/70 backdrop-blur hover:text-foreground\"\n                    >\n                      <SkipBack className=\"h-4 w-4\" />\n                    </Button>\n                  </div>\n\n                  <Button className=\"h-12 w-12 rounded-full bg-foreground text-background hover:bg-foreground/90\">\n                    <Pause className=\"h-5 w-5\" />\n                  </Button>\n\n                  <div className=\"flex items-center gap-2\">\n                    <Button\n                      variant=\"ghost\"\n                      size=\"icon\"\n                      className=\"h-10 w-10 rounded-full border border-border/40 bg-background/60 text-foreground/70 backdrop-blur hover:text-foreground\"\n                    >\n                      <SkipForward className=\"h-4 w-4\" />\n                    </Button>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"icon\"\n                      className=\"h-10 w-10 rounded-full border border-border/40 bg-background/60 text-foreground/70 backdrop-blur hover:text-foreground\"\n                    >\n                      <Repeat className=\"h-4 w-4\" />\n                    </Button>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"icon\"\n                      className=\"h-10 w-10 rounded-full border border-border/40 bg-background/60 text-foreground/70 backdrop-blur hover:text-foreground\"\n                    >\n                      <Volume2 className=\"h-4 w-4\" />\n                    </Button>\n                  </div>\n                </div>\n\n                <div className=\"mt-8 overflow-hidden rounded-3xl border border-border/40 bg-background/80 shadow-[0_20px_60px_rgba(15,23,42,0.35)] backdrop-blur\">\n                  <iframe\n                    className=\"h-[152px] w-full\"\n                    src={activeTrack.embedUrl}\n                    title={`${activeTrack.title} - Spotify`}\n                    width=\"100%\"\n                    height=\"100%\"\n                    frameBorder=\"0\"\n                    allow=\"autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture\"\n                    loading=\"lazy\"\n                  />\n                </div>\n              </div>\n\n              <div className=\"relative\">\n                <div className=\"max-h-80 space-y-3 overflow-y-auto pr-2 sm:max-h-[24rem]\">\n                  {playlist.map((track, index) => {\n                    const isActive = index === activeIndex;\n\n                    return (\n                      <button\n                        key={track.id}\n                        type=\"button\"\n                        onClick={() => setActiveIndex(index)}\n                        aria-pressed={isActive}\n                        className={`group flex w-full items-center gap-4 rounded-3xl border border-border/40 bg-background/60 p-5 text-left backdrop-blur-xl transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/50 ${\n                          isActive\n                            ? \"border-foreground/40 bg-foreground/[0.08] shadow-[0_20px_60px_rgba(15,23,42,0.35)]\"\n                            : \"hover:-translate-y-1 hover:border-border/60\"\n                        }`}\n                      >\n                        <div\n                          className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-border/40 text-sm font-semibold transition-colors ${\n                            isActive\n                              ? \"bg-foreground/20 text-foreground\"\n                              : \"bg-background/70 text-foreground/70\"\n                          }`}\n                        >\n                          {track.title.charAt(0)}\n                        </div>\n                        <div className=\"flex flex-1 items-center justify-between gap-4\">\n                          <div>\n                            <p className=\"text-sm font-semibold text-foreground/90\">\n                              {track.title}\n                            </p>\n                            <p className=\"text-xs text-foreground/60\">\n                              {track.artist}\n                            </p>\n                          </div>\n                          <span className=\"text-xs font-medium uppercase tracking-[0.2em] text-foreground/50\">\n                            {track.duration}\n                          </span>\n                        </div>\n                      </button>\n                    );\n                  })}\n                </div>\n                <div className=\"pointer-events-none absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-background/90 via-background/40 to-transparent\" />\n                <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-background/90 via-background/40 to-transparent\" />\n              </div>\n            </div>\n          </div>\n        </Card>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/glassmorphism-listen-app-block-shadcnui.tsx"
    }
  ]
}