"use client";
import Image from "next/image";
import * as React from "react";


export default function Teams() {

    return (

        < section className="py-20 bg-gray-50" >
            <div className="container px-4 mx-auto max-w-7xl">
                <div className="text-center mb-16">
                    <h2 className="text-3xl font-bold text-gray-900">Meet Our Team</h2>
                    <div className="w-20 h-1 mt-2 mx-auto bg-[#6a47ed]"></div>
                    <p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
                        We&apos;re a passionate team of AI experts, designers, and social media enthusiasts dedicated to making content
                        creation accessible to everyone.
                    </p>
                </div>

                <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-5">
                    {/* Team Member 1 */}
                    <div className="text-center">
                        <div className="relative mx-auto w-40 h-40 mb-4 overflow-hidden rounded-full">
                            <Image
                                src="/assets/images/teams/CEO.webp"
                                alt="Team Member"
                                width={160}
                                height={160}
                                className="object-cover"
                            />
                        </div>
                        <h3 className="text-xl font-semibold text-gray-900">Md. Shaniur Rahman</h3>
                        <p className="text-[#6a47ed]">CEO & Founder</p>
                    </div>

                    {/* Team Member 2 */}
                    <div className="text-center">
                        <div className="relative mx-auto w-40 h-40 mb-4 overflow-hidden rounded-full">
                            <Image
                                src="/assets/images/teams/forhadsir.webp"
                                alt="Team Member"
                                width={160}
                                height={160}
                                className="object-cover"
                            />
                        </div>
                        <h3 className="text-xl font-semibold text-gray-900">Forhad Hossen</h3>
                        <p className="text-[#6a47ed]">COO</p>
                    </div>

                    {/* Team Member 3 */}
                    <div className="text-center">
                        <div className="relative mx-auto w-40 h-40 mb-4 overflow-hidden rounded-full">
                            <Image
                                src="/assets/images/teams/shakil.webp"
                                alt="Team Member"
                                width={160}
                                height={160}
                                className="object-cover"
                            />
                        </div>
                        <h3 className="text-xl font-semibold text-gray-900">Shahriar Kabir Shakil</h3>
                        <p className="text-[#6a47ed]">Software Engineer</p>
                    </div>

                    {/* Team Member 4 */}
                    <div className="text-center">
                        <div className="relative mx-auto w-40 h-40 mb-4 overflow-hidden rounded-full">
                            <Image
                                src="/assets/images/teams/fahim.webp"
                                alt="Team Member"
                                width={160}
                                height={160}
                                className="object-cover"
                            />
                        </div>
                        <h3 className="text-xl font-semibold text-gray-900">Fahim Hossen</h3>
                        <p className="text-[#6a47ed]">Software Engineer</p>
                    </div>
                    {/* Team Member 5 */}
                    <div className="text-center">
                        <div className="relative mx-auto w-40 h-40 mb-4 overflow-hidden rounded-full">
                            <Image
                                src="/assets/images/teams/pintu.webp"
                                alt="Team Member"
                                width={160}
                                height={160}
                                className="object-cover"
                            />
                        </div>
                        <h3 className="text-xl font-semibold text-gray-900">Jahid Hasan Pintu</h3>
                        <p className="text-[#6a47ed]">Software Engineer</p>
                    </div>
                </div>
            </div>
        </section>


    )
}
