Untitled

import React from 'react';
import { Play, Plus, X, Circle } from 'lucide-react';

const EnverLandingPage = () => {
  return (
    <div className="bg-gray-900 text-white min-h-screen">
      <header className="container mx-auto py-6 flex justify-between items-center">
        <div className="flex items-center">
          <Circle className="text-blue-500 mr-2" />
          <span className="font-bold text-xl">Enver</span>
        </div>
        <nav>
          <ul className="flex space-x-6">
            <li>Home</li>
            <li>Services</li>
            <li>Our Project</li>
            <li>About us</li>
          </ul>
        </nav>
        <button className="bg-blue-600 px-4 py-2 rounded">Contact us</button>
      </header>

      <main>
        <section className="container mx-auto py-20 flex items-center">
          <div className="w-1/2">
            <h1 className="text-5xl font-bold mb-4">Build Your Awesome Platform</h1>
            <p className="mb-6">Enver studio is a digital studio that offers several services such as UI/UX Design to developers, we will provide the best service for those of you who use our services.</p>
            <button className="bg-blue-600 px-6 py-3 rounded-full flex items-center">
              Our Services <Play className="ml-2" size={16} />
            </button>
          </div>
          <div className="w-1/2 relative">
            <img src="/api/placeholder/400/400" alt="Itai Zeilig" className="rounded-lg" />
            <div className="absolute top-0 right-0 bg-green-500 text-black p-2 rounded">
              Itai Zeilig
            </div>
            <Plus className="absolute top-10 left-10 text-blue-500" size={24} />
            <X className="absolute bottom-10 right-10 text-red-500" size={24} />
          </div>
        </section>

        <section className="bg-gray-800 py-20">
          <div className="container mx-auto">
            <h2 className="text-3xl font-bold mb-8">Why Enver Is The Best Choice?</h2>
            <div className="relative">
              <img src="/api/placeholder/800/400" alt="Team working" className="rounded-lg" />
              <button className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 p-4 rounded-full">
                <Play />
              </button>
            </div>
          </div>
        </section>

        <section className="container mx-auto py-20">
          <h2 className="text-3xl font-bold mb-12 text-center">The Service We Provide For You</h2>
          <div className="grid grid-cols-3 gap-8">
            {['Development', 'UI/UX Designer', 'Graphic Designer', 'Motion Graphic', 'Photography', 'Videography'].map((service, index) => (
              <div key={index} className="bg-gray-800 p-6 rounded-lg">
                <div className="bg-blue-600 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                  <Circle />
                </div>
                <h3 className="text-xl font-bold mb-2">{service}</h3>
                <p>Create a platform with the best and coolest quality from us.</p>
              </div>
            ))}
          </div>
        </section>

        <section className="container mx-auto py-20">
          <h2 className="text-3xl font-bold mb-12 text-center">Our Awesome Portfolio</h2>
          <div className="grid grid-cols-3 gap-8">
            {[1, 2, 3].map((item) => (
              <img key={item} src={`/api/placeholder/300/200`} alt={`Portfolio item ${item}`} className="rounded-lg" />
            ))}
          </div>
        </section>

        <section className="container mx-auto py-20 text-center">
          <h2 className="text-3xl font-bold mb-6">Contact us for the service you want to use</h2>
          <button className="bg-blue-600 px-6 py-3 rounded-full">Contact us</button>
        </section>
      </main>

      <footer className="bg-gray-800 py-6">
        <div className="container mx-auto flex justify-between items-center">
          <div className="flex items-center">
            <Circle className="text-blue-500 mr-2" />
            <span className="font-bold">Enver</span>
          </div>
          <nav>
            <ul className="flex space-x-6">
              <li>Support</li>
              <li>Privacy Policy</li>
              <li>Terms and Conditions</li>
            </ul>
          </nav>
          <p>© 2023 Enver. All Rights Reserved.</p>
        </div>
      </footer>
    </div>
  );
};

export default EnverLandingPage;