ok

src/components/ui/Cube.tsx

@@ -88,7 +88,7 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
               <h4 className="text-base font-semibold mb-2">
                 {descriptionTitle}
               </h4>
-              <CP>{description}</CP>
+              <CP color="custom">{description}</CP>
             </div>
           </motion.div>
         )}
@@ -106,7 +106,7 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
               <h4 className="text-base font-semibold mb-2 text-center">
                 {descriptionTitle}
               </h4>
-              <CP className="text-center">{description}</CP>
+              <CP className="text-center" color="custom">{description}</CP>
             </div>
           </motion.div>
         )}

src/components/ui/ScrollDown.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
+import { useScroll } from '@/hooks/useScroll'
+
+export function ScrollDown() {
+  const { isAtBottom, scrollToNext } = useScroll()
+
+  if (isAtBottom) {
+    return null
+  }
+
+  return (
+    <button
+      onClick={scrollToNext}
+      className="fixed bottom-8 right-8 z-50 flex items-center gap-x-2 text-2xl font-medium text-[#1c1c49] lg:text-3xl animate-blink"
+    >
+      <span>scroll</span>
+      <ChevronDoubleDownIcon className="h-6 w-6" />
+    </button>
+  )
+}

src/components/ui/ScrollUp.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { ChevronDoubleUpIcon } from '@heroicons/react/24/outline'
+import { useScroll } from '@/hooks/useScroll'
+
+export function ScrollUp() {
+  const { isAtBottom, scrollToTop } = useScroll()
+
+  if (!isAtBottom) {
+    return null
+  }
+
+  return (
+    <button
+      onClick={scrollToTop}
+      className="fixed bottom-8 right-8 z-50 flex items-center gap-x-2 text-2xl font-medium text-[#1c1c49] lg:text-3xl animate-blink"
+    >
+      <span>top</span>
+      <ChevronDoubleUpIcon className="h-6 w-6" />
+    </button>
+  )
+}