import { cn } from "@/lib/classes";

export const ClerkSessionCard = () => {
  const content = [
    {
      label: "Device",
      value: "Macbook Pro",
    },
    {
      label: "Location",
      value: "San Francisco, CA",
    },
    {
      label: "Browser",
      value: "Chrome",
    },
  ];

  return (
    <div className="py-20">
      <div className="group isolate flex flex-col rounded-2xl bg-[#212126] shadow-[inset_0_1px,inset_0_0_0_1px] shadow-white/[0.025] overflow-hidden max-w-[500px] w-full max-h-[600px] h-[528px]">
        <div className="relative z-10 flex-none px-6 pt-6">
          <h3 className="text-sm font-medium text-white">Session Management</h3>
          <p className="mt-2 text-pretty text-sm/5 text-[#9394a1]">
            Clerk manages the full session lifecycle, including critical
            security functionality like active device monitoring and session
            revocation.
          </p>
        </div>
        <div className="pointer-events-none relative flex-auto select-none min-h-[10.25rem]">
          <div className="relative flex flex-col h-full items-center justify-center">
            <div className="relative">
              <div className="relative z-10 mx-auto mt-12 w-64 rounded-lg bg-[rgba(116,118,134,.05)] bg-gradient-to-br from-white/5 to-65% px-6 pb-6 pt-14 text-[0.625rem]/[1.125rem] backdrop-blur-sm shadow-[inset_0_1px_1px_rgba(255,255,255,0.05),0_2px_13px_rgba(0,0,0,0.2),0_1px_2px_rgba(0,0,0,0.2)]">
                <div className="relative isolate z-20 mx-auto flex justify-center">
                  <div className="relative isolate [perspective:1000px]">
                    <div
                      className={cn([
                        "[--off-color:#5E5F6E] [--on-color:#212126] absolute bottom-[calc(100%-0.0625rem)] left-1/2 -translate-x-1/2 flex h-[4.25rem] w-[6.5rem] origin-bottom items-center justify-center rounded-t border border-[#5e5f6e] shadow-[inset_0_0_0_2px_theme(colors.black/75%)] transform-3d ",
                        "before:absolute before:inset-[-0.0625rem] before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-black/40 before:from-[0.0625rem] before:to-black/80 before:transition-opacity before:duration-1000 before:group-hover:opacity-0 before:group-hover:duration-500",
                        "after:absolute after:inset-x-[-1px] after:top-0 after:-z-10 after:h-[0.125rem] after:rounded-t-full after:bg-[#747686] after:[transform:rotateX(90deg)_translateY(-1px)] [perspective:60px]",
                        "[transition:background-color_0.5s,transform_0.5s] [transition-timing-function:cubic-bezier(0.16,1,0.3,1)]",
                        "bg-(--off-color) rotate-x-[-75deg] group-hover:bg-(--on-color) group-hover:rotate-x-[20deg]",
                      ])}
                    >
                      <div className="absolute inset-x-0 top-0.5 h-5 origin-top bg-gradient-to-b from-white/15 to-transparent blur-sm opacity-100 group-hover:opacity-0 rotate-x-90 group-hover:rotate-x-0 [transition:opacity_0.5s,transform_0.5s] [transition-timing-function:cubic-bezier(0.16,1,0.3,1)]" />
                      <div className="absolute inset-0 z-30 overflow-hidden rounded-[inherit] opacity-0 transition-opacity duration-500 group-hover:opacity-100 group-hover:duration-1000">
                        <div className="absolute size-[125%] -translate-x-10 -translate-y-1/2 -rotate-45 bg-gradient-to-l from-white/[0.08]" />
                      </div>
                      <div className="rounded-full text-white p-2 opacity-0 group-hover:opacity-100 [transition:opacity_0.3s_ease-in-out] text-lg">
                        Clerk
                      </div>
                    </div>
                    <div
                      className={cn(
                        "relative h-[0.375rem] w-[7.25rem] rounded-b-md rounded-t-[1px] bg-gradient-to-b from-[#5e5f6e] from-65% to-[#42434d] shadow-[inset_0_1px_0px] shadow-white/10",
                        "before:absolute before:left-1/2 before:top-0 before:h-[0.125rem] before:w-[1.25rem] before:-translate-x-1/2 before:rounded-b-full before:bg-[#42434d] before:shadow-[inset_2px_0_1px_-2px_theme(colors.black/50%),inset_-2px_0_1px_-2px_theme(colors.black/50%),0_1px_0_theme(colors.white/10%)]"
                      )}
                    ></div>
                  </div>
                </div>
                <div className="mt-6 flex flex-col gap-1">
                  {content.map((item, index) => {
                    return (
                      <div className="py-1.5 flex" key={index}>
                        <div
                          className="w-14 flex-none text-[#9394a1] [transition:opacity_0.5s,translate_0.3s] [transition-timing-function:cubic-bezier(0.16,1,0.3,1)] translate-x-[5rem] group-hover:translate-x-0"
                          style={{
                            transitionDelay: `${index * 0.1}s`,
                          }}
                        >
                          {item.label}
                        </div>
                        <div
                          className="font-medium text-white [transition:opacity_0.5s,transform_0.5s,filter_0.5s] [transition-timing-function:cubic-bezier(0.16,1,0.3,1)] opacity-0 group-hover:opacity-100 blur-sm group-hover:blur-none"
                          style={{
                            transitionDelay: `${index * 0.1}s`,
                          }}
                        >
                          {item.value}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
              <svg
                viewBox="0 0 208 248"
                fill="none"
                aria-hidden="true"
                className="absolute left-full top-[calc(122/16*1rem)] ml-1.5 w-52"
              >
                <g
                  filter="url(#filter0_bd_29_5466)"
                  shapeRendering="crispEdges"
                >
                  <path
                    fill="#fff"
                    fillOpacity=".04"
                    d="M4.229 24.678 23.639 4.46A8 8 0 0 1 29.409 2H198a8 8 0 0 1 8 8v228a8 8 0 0 1-8 8H10a8 8 0 0 1-8-8V30.219a8 8 0 0 1 2.229-5.54Z"
                  ></path>
                  <path
                    stroke="#fff"
                    strokeOpacity=".05"
                    d="M24 4.806 4.59 25.024a7.5 7.5 0 0 0-2.09 5.194V238a7.5 7.5 0 0 0 7.5 7.5h188a7.5 7.5 0 0 0 7.5-7.5V10a7.5 7.5 0 0 0-7.5-7.5H29.41A7.5 7.5 0 0 0 24 4.806Z"
                  ></path>
                </g>
                <defs>
                  <filter
                    id="filter0_bd_29_5466"
                    width="220"
                    height="260"
                    x="-6"
                    y="-6"
                    colorInterpolationFilters="sRGB"
                    filterUnits="userSpaceOnUse"
                  >
                    <feFlood
                      floodOpacity="0"
                      result="BackgroundImageFix"
                    ></feFlood>
                    <feGaussianBlur
                      in="BackgroundImageFix"
                      stdDeviation="4"
                    ></feGaussianBlur>
                    <feComposite
                      in2="SourceAlpha"
                      operator="in"
                      result="effect1_backgroundBlur_29_5466"
                    ></feComposite>
                    <feColorMatrix
                      in="SourceAlpha"
                      result="hardAlpha"
                      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                    ></feColorMatrix>
                    <feOffset></feOffset>
                    <feGaussianBlur stdDeviation="1"></feGaussianBlur>
                    <feComposite in2="hardAlpha" operator="out"></feComposite>
                    <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"></feColorMatrix>
                    <feBlend
                      in2="effect1_backgroundBlur_29_5466"
                      result="effect2_dropShadow_29_5466"
                    ></feBlend>
                    <feBlend
                      in="SourceGraphic"
                      in2="effect2_dropShadow_29_5466"
                      result="shape"
                    ></feBlend>
                  </filter>
                </defs>
              </svg>
              <svg
                viewBox="0 0 208 248"
                fill="none"
                aria-hidden="true"
                className="absolute right-full top-[calc(122/16*1rem)] mr-1.5 w-52 -scale-x-100"
              >
                <g
                  filter="url(#filter0_bd_29_5466)"
                  shapeRendering="crispEdges"
                >
                  <path
                    fill="#fff"
                    fillOpacity=".04"
                    d="M4.229 24.678 23.639 4.46A8 8 0 0 1 29.409 2H198a8 8 0 0 1 8 8v228a8 8 0 0 1-8 8H10a8 8 0 0 1-8-8V30.219a8 8 0 0 1 2.229-5.54Z"
                  ></path>
                  <path
                    stroke="#fff"
                    strokeOpacity=".05"
                    d="M24 4.806 4.59 25.024a7.5 7.5 0 0 0-2.09 5.194V238a7.5 7.5 0 0 0 7.5 7.5h188a7.5 7.5 0 0 0 7.5-7.5V10a7.5 7.5 0 0 0-7.5-7.5H29.41A7.5 7.5 0 0 0 24 4.806Z"
                  ></path>
                </g>
                <defs>
                  <filter
                    id="filter0_bd_29_5466"
                    width="220"
                    height="260"
                    x="-6"
                    y="-6"
                    colorInterpolationFilters="sRGB"
                    filterUnits="userSpaceOnUse"
                  >
                    <feFlood
                      floodOpacity="0"
                      result="BackgroundImageFix"
                    ></feFlood>
                    <feGaussianBlur
                      in="BackgroundImageFix"
                      stdDeviation="4"
                    ></feGaussianBlur>
                    <feComposite
                      in2="SourceAlpha"
                      operator="in"
                      result="effect1_backgroundBlur_29_5466"
                    ></feComposite>
                    <feColorMatrix
                      in="SourceAlpha"
                      result="hardAlpha"
                      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                    ></feColorMatrix>
                    <feOffset></feOffset>
                    <feGaussianBlur stdDeviation="1"></feGaussianBlur>
                    <feComposite in2="hardAlpha" operator="out"></feComposite>
                    <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"></feColorMatrix>
                    <feBlend
                      in2="effect1_backgroundBlur_29_5466"
                      result="effect2_dropShadow_29_5466"
                    ></feBlend>
                    <feBlend
                      in="SourceGraphic"
                      in2="effect2_dropShadow_29_5466"
                      result="shape"
                    ></feBlend>
                  </filter>
                </defs>
              </svg>

              <div className="absolute left-1/2 top-[calc(30/16*1rem)] ml-[calc(-600/2/16*1rem)] aspect-[600/87] w-[calc(600/16*1rem)]">
                <svg
                  viewBox="0 0 600 87"
                  fill="none"
                  aria-hidden="true"
                  className="absolute inset-0 size-full stroke-white/5"
                >
                  <path d="M0 86h136.686a8 8 0 0 0 5.657-2.343l80.314-80.314A8 8 0 0 1 228.314 1h143.372a8 8 0 0 1 5.657 2.343l80.314 80.314A8 8 0 0 0 463.314 86H600"></path>
                </svg>
              </div>
            </div>

            <div className="absolute inset-0 bg-[radial-gradient(97.14%_100%_at_top,rgba(33,33,38,0)_42.04%,#212126_89.82%)]" />
          </div>
        </div>
      </div>
    </div>
  );
};
Clerk Session Card

Installation

Installation

Session Management
