Apple Cards Carousel

"use client";

import { Carousel, Card } from "@/components/vritti/apple-cards-carousel";

const data = [
  {
    category: "Nature",
    title: "Mountain Sunrise",
    src: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=600&h=800&fit=crop",
    content: <p className="text-neutral-600 dark:text-neutral-400">A breathtaking mountain landscape at dawn.</p>,
  },
  {
    category: "Architecture",
    title: "Modern Design",
    src: "https://images.unsplash.com/photo-1487958449943-2429e8be8625?w=600&h=800&fit=crop",
    content: <p className="text-neutral-600 dark:text-neutral-400">Contemporary architecture with clean lines.</p>,
  },
  {
    category: "Travel",
    title: "Ocean View",
    src: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600&h=800&fit=crop",
    content: <p className="text-neutral-600 dark:text-neutral-400">A serene ocean view from a tropical beach.</p>,
  },
];

export function AppleCardsCarouselExample() {
  return (
    <div className="w-full py-8">
      <Carousel
        items={data.map((card, index) => (
          <Card key={card.src} card={card} index={index} />
        ))}
      />
    </div>
  );
}

"use client";

import { Carousel, Card } from "@/components/vritti/apple-cards-carousel";

const data = [
  {
    category: "Design",
    title: "Minimal Aesthetics",
    src: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=600&h=800&fit=crop",
    content: (
      <div>
        <p className="text-neutral-600 dark:text-neutral-400">
          Clean, minimal design with purposeful white space and elegant typography.
        </p>
      </div>
    ),
  },
  {
    category: "Technology",
    title: "Future of AI",
    src: "https://images.unsplash.com/photo-1677442136019-21780ecad995?w=600&h=800&fit=crop",
    content: (
      <div>
        <p className="text-neutral-600 dark:text-neutral-400">
          Exploring the cutting edge of artificial intelligence and machine learning.
        </p>
      </div>
    ),
  },
  {
    category: "Productivity",
    title: "Work Smarter",
    src: "https://images.unsplash.com/photo-1497032628192-86f99bcd76bc?w=600&h=800&fit=crop",
    content: (
      <div>
        <p className="text-neutral-600 dark:text-neutral-400">
          Tools and techniques for maximizing your daily productivity.
        </p>
      </div>
    ),
  },
  {
    category: "Culture",
    title: "Digital Art",
    src: "https://images.unsplash.com/photo-1633186223163-0399f4dbb7f3?w=600&h=800&fit=crop",
    content: (
      <div>
        <p className="text-neutral-600 dark:text-neutral-400">
          The intersection of creativity and technology in modern art.
        </p>
      </div>
    ),
  },
];

export function AppleCardsCarouselLayoutExample() {
  return (
    <div className="w-full py-8">
      <Carousel
        items={data.map((card, index) => (
          <Card key={card.src} card={card} index={index} layout />
        ))}
      />
    </div>
  );
}