Untitled

import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { MotionDiv } from "framer-motion";

export default function FootballBackpackers() {
  return (
    <div className="bg-gray-100 min-h-screen p-6">
      {/* Header Section */}
      <header className="text-center py-8">
        <h1 className="text-4xl font-bold text-green-600">FootballBackpackers</h1>
        <p className="text-lg text-gray-600">Surprise football trips for budget travelers</p>
      </header>

      {/* Hero Section */}
      <MotionDiv
        className="bg-white rounded-2xl shadow-md p-6 text-center mx-auto max-w-2xl"
        animate={{ opacity: 1, y: 0 }}
        initial={{ opacity: 0, y: -20 }}
      >
        <h2 className="text-2xl font-semibold mb-4">Book Your Surprise Trip Now!</h2>
        <p className="text-gray-500 mb-6">Flights, stay & tickets included – destination revealed 1 week before departure.</p>
        <Input placeholder="Enter your email for €50 off" className="mb-4" />
        <Button className="w-full bg-green-500 hover:bg-green-700 text-white">Join the Waitlist</Button>
      </MotionDiv>

      {/* Packages Section */}
      <section className="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
        {["Basic", "Standard", "VIP"].map((type, index) => (
          <Card key={index} className="text-center p-4">
            <h3 className="text-xl font-bold">{type} Package</h3>
            <p className="text-gray-500">All-inclusive football trip</p>
            <p className="text-green-600 font-bold text-2xl mt-2">{index === 0 ? "€349" : index === 1 ? "€499" : "€799"}</p>
            <Button className="mt-4 bg-green-500 hover:bg-green-700 text-white">Book Now</Button>
          </Card>
        ))}
      </section>

      {/* How It Works Section */}
      <section className="mt-12 text-center">
        <h2 className="text-2xl font-bold mb-4">How It Works</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {["Book your trip", "We plan everything", "You enjoy the match!"].map((step, i) => (
            <Card key={i} className="p-4 text-gray-600">{step}</Card>
          ))}
        </div>
      </section>
    </div>
  );
}