Sticky Scroll Reveal

"use client";
import React from "react";
import { StickyScroll } from "@/lab/aceternity/ui/sticky-scroll-reveal";

const content = [
  {
    title: "Collaborative Editing",
    description:
      "Work together in real time with your team, clients, and stakeholders. Collaborate on documents, share ideas, and make decisions quickly. With our platform, you can streamline your workflow and increase productivity.",
    content: (
      <div className="flex h-full w-full items-center justify-center bg-[linear-gradient(to_bottom_right,var(--color-cyan-500),var(--color-emerald-500))] p-2 text-center text-white">
        Collaborative Editing
      </div>
    ),
  },
  {
    title: "Real time changes",
    description:
      "See changes as they happen. With our platform, you can track every modification in real time. No more confusion about the latest version of your project. Say goodbye to the chaos of version control and embrace the simplicity of real-time updates.",
    content: (
      <div className="flex h-full w-full items-center justify-center bg-[linear-gradient(to_bottom_right,var(--color-pink-500),var(--color-indigo-500))] p-2 text-center text-white">
        Real time changes
      </div>
    ),
  },
  {
    title: "Version control",
    description:
      "Experience real-time updates and never stress about version control again. Our platform ensures that you're always working on the most recent version of your project, eliminating the need for constant manual updates. Stay in the loop, keep your team aligned, and maintain the flow of your work without any interruptions.",
    content: (
      <div className="flex h-full w-full items-center justify-center bg-[linear-gradient(to_bottom_right,var(--color-orange-500),var(--color-yellow-500))] p-2 text-center text-white">
        Version control
      </div>
    ),
  },
  {
    title: "Running out of content",
    description:
      "Experience real-time updates and never stress about version control again. Our platform ensures that you're always working on the most recent version of your project, eliminating the need for constant manual updates. Stay in the loop, keep your team aligned, and maintain the flow of your work without any interruptions.",
    content: (
      <div className="flex h-full w-full items-center justify-center bg-[linear-gradient(to_bottom_right,var(--color-cyan-500),var(--color-emerald-500))] p-2 text-center text-white">
        Running out of content
      </div>
    ),
  },
];

export default function StickyScrollRevealDemo() {
  return (
    <div className="@container relative h-full w-full">
      <StickyScroll
        content={content}
        className="h-full space-x-[3cqw] rounded-none p-[4cqw] [&_h2]:text-[clamp(0.85rem,2.6cqw,1.5rem)] [&_p]:mt-[2cqw] [&_p]:text-[clamp(0.6rem,1.5cqw,1rem)] [&>div:first-child>div>div]:my-[8cqw]"
        contentClassName="top-[6cqw] block h-[24cqw] w-[32cqw] shrink-0 text-[clamp(0.6rem,1.6cqw,1rem)]"
      />
    </div>
  );
}