shift-card

1"use client"
2 
3import { motion } from "motion/react"
4 
5import { ShiftCard } from "@/components/ui/shift-card"
6import { TextureButton } from "@/components/ui/texture-button"
7 
8export function ShiftCardDemo() {
9  // Content for the top part of the card
10  const topContent = (
11    <div className="bg-accent/90 rounded-md text-primary shadow-[0px_1px_1px_0px_rgba(0,0,0,0.05),0px_1px_1px_0px_rgba(255,252,240,0.5)_inset,0px_0px_0px_1px_hsla(0,0%,100%,0.1)_inset,0px_0px_1px_0px_rgba(28,27,26,0.5)] dark:shadow-[0_1px_0_0_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(0,0,0,0.1),0_2px_2px_0_rgba(0,0,0,0.1),0_4px_4px_0_rgba(0,0,0,0.1),0_8px_8px_0_rgba(0,0,0,0.1)]">
12      <h3 className=" text-lg  p-4">
13        <svg
14          width="1em"
15          height="1em"
16          viewBox="0 0 54 80"
17          fill="none"
18          xmlns="http://www.w3.org/2000/svg"
19        >
20          <g clipPath="url(#clip0_912_3)">
21            <path
22              d="M13.3333 80.0002C20.6933 80.0002 26.6667 74.0268 26.6667 66.6668V53.3335H13.3333C5.97333 53.3335 0 59.3068 0 66.6668C0 74.0268 5.97333 80.0002 13.3333 80.0002Z"
23              fill="#0ACF83"
24            />
25            <path
26              d="M0 39.9998C0 32.6398 5.97333 26.6665 13.3333 26.6665H26.6667V53.3332H13.3333C5.97333 53.3332 0 47.3598 0 39.9998Z"
27              fill="#A259FF"
28            />
29            <path
30              d="M0 13.3333C0 5.97333 5.97333 0 13.3333 0H26.6667V26.6667H13.3333C5.97333 26.6667 0 20.6933 0 13.3333Z"
31              fill="#F24E1E"
32            />
33            <path
34              d="M26.6667 0H40.0001C47.3601 0 53.3334 5.97333 53.3334 13.3333C53.3334 20.6933 47.3601 26.6667 40.0001 26.6667H26.6667V0Z"
35              fill="#FF7262"
36            />
37            <path
38              d="M53.3334 39.9998C53.3334 47.3598 47.3601 53.3332 40.0001 53.3332C32.6401 53.3332 26.6667 47.3598 26.6667 39.9998C26.6667 32.6398 32.6401 26.6665 40.0001 26.6665C47.3601 26.6665 53.3334 32.6398 53.3334 39.9998Z"
39              fill="#1ABCFE"
40            />
41          </g>
42          <defs>
43            <clipPath id="clip0_912_3">
44              <rect width={53.3333} height={80} fill="white" />
45            </clipPath>
46          </defs>
47        </svg>
48        Screen Capture
49      </h3>
50    </div>
51  )
52 
53  // Content that animates into top from the middle
54  const topAnimateContent = (
55    <>
56      <motion.img
57        transition={{ duration: 0.3, ease: "circIn" }}
58        src="/basic-img.png"
59        layoutId="img"
60        width={78}
61        height={100}
62        alt="basic image"
63        className="rounded-sm  absolute top-1.5 right-2 shadow-lg"
64      />
65 
66      <motion.div
67        className="h-[70px] w-[82px] absolute top-[4px] right-[6px] bg-transparent border-[2px] rounded-br-sm rounded-sm  border-neutral-800/80 dark:border-neutral-200/80 border-dashed  ml-auto  mb-[6px] dark:mb-[3px]"
68        initial={{ opacity: 0, scale: 1.6, y: 0, filter: "blur(4px)" }}
69        animate={{
70          opacity: 1,
71          y: 0,
72          scale: 1,
73          filter: "blur(0px)",
74          transition: { delay: 0.35, duration: 0.15 },
75        }}
76        exit={{
77          opacity: 0,
78          y: 100,
79          filter: "blur(4px)",
80          transition: { delay: 0.0, duration: 0 },
81        }}
82      />
83    </>
84  )
85 
86  // Content that animates from the top to the middle
87  const middleContent = (
88    <motion.img
89      src="/basic-img.png"
90      layoutId="img"
91      width={150}
92      height={200}
93      alt="basic image"
94      className="rounded-sm  border-2 border-white dark:border-black"
95    />
96  )
97 
98  // Content for the bottom part of the card that shows more details on hover
99  const bottomContent = (
100    <div className="pb-4">
101      <div className="flex w-full flex-col gap-1 bg-primary/90 border-t border-t-black/10 rounded-t-lg px-4 pb-4  ">
102        <div className="font-sans text-[14px] font-medium text-white dark:text-[#171717] flex gap-1 pt-2.5 items-center">
103          <svg
104            xmlns="http://www.w3.org/2000/svg"
105            viewBox="-50 -50 430 390"
106            fill="#1185fd"
107            aria-hidden="true"
108            width="1em"
109            height="1em"
110          >
111            <path d="M180 141.964C163.699 110.262 119.308 51.1817 78.0347 22.044C38.4971 -5.86834 23.414 -1.03207 13.526 3.43594C2.08093 8.60755 0 26.1785 0 36.5164C0 46.8542 5.66748 121.272 9.36416 133.694C21.5786 174.738 65.0603 188.607 105.104 184.156C107.151 183.852 109.227 183.572 111.329 183.312C109.267 183.642 107.19 183.924 105.104 184.156C46.4204 192.847 -5.69621 214.233 62.6582 290.33C137.848 368.18 165.705 273.637 180 225.702C194.295 273.637 210.76 364.771 295.995 290.33C360 225.702 313.58 192.85 254.896 184.158C252.81 183.926 250.733 183.645 248.671 183.315C250.773 183.574 252.849 183.855 254.896 184.158C294.94 188.61 338.421 174.74 350.636 133.697C354.333 121.275 360 46.8568 360 36.519C360 26.1811 357.919 8.61012 346.474 3.43851C336.586 -1.02949 321.503 -5.86576 281.965 22.0466C240.692 51.1843 196.301 110.262 180 141.964Z" />
112          </svg>{" "}
113          <p>Share your work</p>
114        </div>
115        <div className="w-full text-pretty font-sans text-[13px] leading-4 text-neutral-200 dark:text-[#171717] pb-2  ">
116          Share your image to build that audience. Inspired by{" "}
117          <a
118            target="_blank"
119            rel="noopener noreferrer"
120            href="https://x.com/mrncst"
121          >
122            @mrncst
123          </a>
124        </div>
125 
126        <div className="bg-accent/80 dark:bg-accent px-1 py-1 rounded-xl flex flex-col gap-1">
127          <TextureButton variant="primary">
128            <svg
129              viewBox="0 0 256 209"
130              width="1em"
131              height="1em"
132              xmlns="http://www.w3.org/2000/svg"
133              preserveAspectRatio="xMidYMid"
134            >
135              <path
136                d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 0 1-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 0 1-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 0 1-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 0 0 256 25.45"
137                fill="#55acee"
138              />
139            </svg>
140            Post on Twitter
141          </TextureButton>
142 
143          <TextureButton variant="primary">
144            <svg
145              viewBox="0 0 256 256"
146              xmlns="http://www.w3.org/2000/svg"
147              width="1em"
148              height="1em"
149              preserveAspectRatio="xMidYMid"
150            >
151              <path
152                fill="#625DF5"
153                d="M256 113.765h-74.858l64.83-37.43-14.237-24.667-64.83 37.43 37.421-64.825-24.667-14.246-37.421 64.826V0h-28.476v74.86L76.326 10.027 51.667 24.266 89.096 89.09 24.265 51.668l-14.238 24.66 64.83 37.43H0v28.477h74.85l-64.823 37.43 14.238 24.667 64.824-37.423-37.43 64.825 24.667 14.239 37.429-64.832V256h28.476v-74.853l37.422 64.826 24.665-14.239-37.428-64.832 64.83 37.43 14.24-24.667-64.825-37.423h74.85v-28.477H256ZM128 166.73c-21.472 0-38.876-17.403-38.876-38.876 0-21.472 17.404-38.876 38.876-38.876 21.472 0 38.875 17.404 38.875 38.876 0 21.473-17.403 38.876-38.875 38.876Z"
154              />
155            </svg>{" "}
156            Open in Loom{" "}
157          </TextureButton>
158        </div>
159      </div>
160    </div>
161  )
162 
163  return (
164    <div className="flex justify-center items-center ">
165      <ShiftCard
166        className="bg-card dark:bg-[#1A1A1A] "
167        topContent={topContent}
168        topAnimateContent={topAnimateContent}
169        middleContent={middleContent}
170        bottomContent={bottomContent}
171      />
172    </div>
173  )
174}