Circular Split Roll

1// Built using Hyperiux Vault: https://vault.hyperiux.com
2 
3"use client";
4 
5import React, { useEffect, useState } from "react";
6import { ReactLenis } from "lenis/react";
7import { CircularSplitRollComp } from "./CircularSplitRollComp";
8 
9const TABLET_BREAKPOINT = 1024;
10 
11const showcaseItems = [
12  {
13    title: "Vuelta",
14    image:
15      "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/v-01.jpg",
16    alt: "Vuelta lamp",
17  },
18  {
19    title: "JH42",
20    image:
21      "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/v-02.jpg",
22    alt: "JH42 lamp",
23  },
24  {
25    title: "Hay",
26    image:
27      "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/v-03.jpg",
28    alt: "Hay product",
29  },
30  {
31    title: "Teresa",
32    image:
33      "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-08.jpg",
34    alt: "Teresa lamp",
35  },
36  {
37    title: "Tahiti",
38    image:
39      "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-14.jpg",
40    alt: "Tahiti lamp",
41  },
42  {
43    title: "Akari 1A",
44    image:
45      "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/v-06.jpg",
46    alt: "Akari 1A lamp",
47  },
48  {
49    title: "Nessino",
50    image:
51      "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/v-07.jpg",
52    alt: "Nessino lamp",
53  },
54  {
55    title: "Panthella",
56    image:
57      "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/v-08.jpg",
58    alt: "Panthella lamp",
59  },
60  {
61    title: "Bellhop",
62    image:
63      "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-01.jpg",
64    alt: "Bellhop lamp",
65  },
66  {
67    title: "Flowerpot",
68    image:
69      "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-06.jpg",
70    alt: "Flowerpot lamp",
71  },
72];
73 
74function useIsDesktop() {
75  const [isDesktop, setIsDesktop] = useState(false);
76  const [hasMounted, setHasMounted] = useState(false);
77 
78  useEffect(() => {
79    const updateViewport = () => {
80      setIsDesktop(window.innerWidth > TABLET_BREAKPOINT);
81      setHasMounted(true);
82    };
83 
84    updateViewport();
85 
86    window.addEventListener("resize", updateViewport);
87 
88    return () => {
89      window.removeEventListener("resize", updateViewport);
90    };
91  }, []);
92 
93// … truncated