import React from 'react';
import { Faces } from './faces';

export function Newsletter() {
  return (
    <div className="flex items-center justify-center h-screen p-10 md:p-40">
      <div className="flex flex-col md:flex-row w-full rounded-lg overflow-hidden">
        <div className="w-full md:w-1/2">
          {/* <img
            src="https://res.cloudinary.com/dezd109fz/image/upload/v1737606596/Screenshot_2025-01-23_095938_fv9kxh.png" // Replace with your image URL
            alt="Description of Image"
            className="object-cover w-full h-full"
          /> */}
          <Faces />
        </div>

        <div className="w-full md:w-1/2 px-8 py-28 flex flex-col justify-between text-white">
          <h2 className="text-5xl leading-[1.2] mb-4">Stay Up to Date with Latest Tech Updates</h2>
          <p className="mb-6">
            Stay updated with our latest news and offers. Join our community today!
          </p>

          <div className="flex space-x-4">
            <input
              type="email"
              placeholder="Enter your email"
              className="py-2 px-4 border border-[#4F79B9] bg-transparent rounded-xl mb-4 w-7/12 h-12"
              required
            />
            <button className="bg-[#4F79B9] text-white py-2 px-4 w-6/12 h-12 rounded-full hover:bg-[#3a5e95]">
              Subscribe to Newsletter
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}