Untitled

import React from 'react';
import { Button } from "@/components/ui/button";

export default function HomeFeatures() {
  const designFeatures = [
    {
      title: "Smart Design",
      description:
        "A cutting-edge interface designed to elevate your gallery creation and browsing experience.",
      buttonText: "Design Features",
      image: "/api/placeholder/600/400",
    },
    {
      title: "Face Filtering",
      description:
        "Utilizing advanced filtering technology for seamless photo organization, including face recognition and more.",
      buttonText: "Review Filtering",
      image: "/api/placeholder/600/400",
    },
    {
      title: "Fast & Safe Sharing",
      description:
        "For hosts, ensuring fast and full view of relevant approved photos to event guests, allowing customized subgallery sharing with different guests",
      buttonText: "Explore Sharing",
      image: "/api/placeholder/600/400",
    },
  ];

  return (
    <section className="py-20 bg-gray-50">
      <div className="container mx-auto px-4">
        {designFeatures.map((feature, index) => (
          <div key={index} className="flex flex-col md:flex-row items-center justify-between mb-20 last:mb-0">
            <div className={`w-full md:w-1/2 ${index % 2 === 0 ? 'md:pr-10' : 'md:pl-10 md:order-2'}`}>
              <h2 className="text-4xl font-bold mb-4 text-gray-900">{feature.title}</h2>
              <p className="text-xl text-gray-600 mb-6">{feature.description}</p>
              <Button variant="outline" className="text-blue-600 border-blue-600 hover:bg-blue-50">
                {feature.buttonText}
              </Button>
            </div>
            <div className={`w-full md:w-1/2 mt-10 md:mt-0 ${index % 2 === 0 ? '' : 'md:order-1'}`}>
              <div className="relative rounded-lg overflow-hidden shadow-xl">
                <img
                  src={feature.image}
                  alt={feature.title}
                  className="w-full h-auto"
                />
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}