Scroll 01

import { Scroll01 } from "@/components/ui/scroll-01";

const values = {
  items: [
    {
      title: "Build faster",
      description: "Create interfaces quickly using reusable blocks.",
      media:
        "https://images.unsplash.com/photo-1486092642310-0c4e84309adb?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    {
      title: "Customize easily",
      description: "Adapt everything to your design system.",
      media:
        "https://images.unsplash.com/photo-1479707406242-e8929e87e734?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    {
      title: "Stay consistent",
      description: "Keep layouts balanced with a clear visual rhythm.",
      media:
        "https://images.unsplash.com/photo-1628880689946-f4a0533ac5fc?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    {
      title: "Guide attention",
      description: "Highlight the right content without adding noise.",
      media:
        "https://images.unsplash.com/photo-1571495653425-621ba3cb7ac1?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    {
      title: "Scale calmly",
      description: "Expand your pages with patterns that stay elegant.",
      media:
        "https://images.unsplash.com/photo-1561990306-7462bfe923b6?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
  ],
};

export default function Scroll01Demo() {
  return (
    <div className="mx-auto max-w-4xl px-4">
      <div className="h-10" />
      <Scroll01 items={values.items} />
      <div className="h-32" />
    </div>
  );
}