motion

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

const DoubleSquareLandingPage = () => {
  const handleClick = (action) => {
    console.log(`Action triggered: ${action}`);
  };

  const fadeIn = {
    initial: { opacity: 0, y: 20 },
    animate: { opacity: 1, y: 0 },
    transition: { duration: 0.6 }
  };

  return (
    <div className="min-h-screen bg-[#4A90E2] text-white">
      <header className="container mx-auto py-6 px-4 flex justify-between items-center">
        <motion.div 
          className="font-bold text-2xl"
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.5 }}
        >
          DoubleSquare
        </motion.div>
        <motion.div
          initial={{ opacity: 0, x: 20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.5 }}
        >
          <Button 
            variant="ghost" 
            className="text-white hover:text-blue-200"
            onClick={() => handleClick('Log In')}
          >
            Log in
          </Button>
        </motion.div>
      </header>

      <main className="container mx-auto px-4">
        <motion.section 
          className="text-center max-w-4xl mx-auto py-20"
          initial={{ opacity: 0, y: 50 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
        >
          <h1 className="text-6xl font-bold mb-6">Innovative<br />Event Gallery</h1>
          <p className="text-xl mb-10 max-w-2xl mx-auto">
            Dedicated to delivering outstanding experiences for<br />
            event hosts and guests<br />
            while creating a supportive environment for<br />
            photographers
          </p>
        </motion.section>

        <motion.section className="py-20" {...fadeIn}>
          <Card className="bg-white text-gray-800 p-8">
            <CardContent>
              <h2 className="text-4xl font-bold mb-6">Smart Design</h2>
              <p className="text-xl mb-6">
                A cutting-edge interface designed to elevate your gallery creation and
                browsing experience.
              </p>
              <Button 
                className="bg-blue-600 hover:bg-blue-700 text-white"
                onClick={() => handleClick('Design Features')}
              >
                Design Features
              </Button>
            </CardContent>
          </Card>
        </motion.section>

        <section className="py-20 grid grid-cols-1 md:grid-cols-2 gap-8">
          <motion.div {...fadeIn} transition={{ delay: 0.2 }}>
            <Card className="bg-white text-gray-800 p-8">
              <CardContent>
                <h2 className="text-4xl font-bold mb-6">Face Filtering</h2>
                <p className="text-xl mb-6">
                  Utilizing advanced filtering technology for seamless photo
                  organization, including face recognition and more.
                </p>
                <Button 
                  className="bg-blue-600 hover:bg-blue-700 text-white"
                  onClick={() => handleClick('Review Filtering')}
                >
                  Review Filtering
                </Button>
              </CardContent>
            </Card>
          </motion.div>

          <motion.div {...fadeIn} transition={{ delay: 0.4 }}>
            <Card className="bg-white text-gray-800 p-8">
              <CardContent>
                <h2 className="text-4xl font-bold mb-6">Fast & Safe Sharing</h2>
                <p className="text-xl mb-6">
                  For hosts, ensuring fast and full view of relevant approved photos to
                  event guests, allowing customized subgallery sharing with different
                  guests
                </p>
                <Button 
                  className="bg-blue-600 hover:bg-blue-700 text-white"
                  onClick={() => handleClick('Explore Sharing')}
                >
                  Explore Sharing
                </Button>
              </CardContent>
            </Card>
          </motion.div>
        </section>
      </main>

      <motion.footer 
        className="bg-[#3A7BC8] py-10 text-center"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.5, delay: 0.6 }}
      >
        <p>© 2023 DoubleSquare. All rights reserved.</p>
      </motion.footer>
    </div>
  );
};

export default DoubleSquareLandingPage;