doormile-next/src/components/sections/OurTeam.tsx

import React from "react";
import Image from "next/image";

export default function OurTeam() {
  const teamMembers = [
    {
      name: "Ratan Kumar",
      position: "COO & Operational Specialist",
      image: "/images/Investor.png",
    },
    {
      name: "Fazul Ilahi",
      position: "CTO & Technology Specialist",
      image: "/images/Fazul.png",
    },
    {
      name: "Parthiban",
      position: "CGO & Growth Specialist",
      image: "/images/Parthi.png",
    },
    {
      name: "Aravinth",
      position: "CFO & Finance Specialist",
      image: "/images/Aravinth.png",
    },
    {
      name: "Suriya Kumar",
      position: "Engineering Head & AI Specialist",
      image: "/images/Suriya.png",
    },
  ];

  return (
    <>
    <style dangerouslySetInnerHTML={{ __html: `
      /* Team photos: grayscale by default, full colour on hover (matches design) */
      .team-listing-wrapper.team-grid-listing .team-item .post-media img {
        filter: grayscale(100%);
        transition: filter 0.45s ease;
      }
      .team-listing-wrapper.team-grid-listing .team-item:hover .post-media img {
        filter: grayscale(0%);
      }

      /* Self-contained layout (does not rely on the cached vendor CSS). */
      /* Grid: three columns that wrap, with tightened row/column gaps. */
      .team-listing-wrapper.team-grid-listing {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -16px -44px;
      }
      .team-listing-wrapper.team-grid-listing .team-item-wrapper {
        width: 33.3333%;
        padding: 0 16px;
        margin-bottom: 44px;
        box-sizing: border-box;
      }
      @media (max-width: 1020px) {
        .team-listing-wrapper.team-grid-listing .team-item-wrapper { width: 50%; }
      }
      @media (max-width: 660px) {
        .team-listing-wrapper.team-grid-listing .team-item-wrapper { width: 100%; }
      }

      /* Card: photo on the LEFT, name/position on the RIGHT (side by side). */
      .team-listing-wrapper.team-grid-listing .team-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
      }
      .team-listing-wrapper.team-grid-listing .team-item-media {
        flex-shrink: 0;
        width: 160px;
      }
      .team-listing-wrapper.team-grid-listing .team-item-content {
        flex: 1;
      }
    `}} />
    <div className="elementor-element elementor-element-c2c601a e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="c2c601a" data-element_type="container" data-e-type="container">
      <div className="e-con-inner">
        <div className="elementor-element elementor-element-3306a27 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="3306a27" data-element_type="container" data-e-type="container">
          <div className="elementor-element elementor-element-7afb238 elementor-widget elementor-widget-logico_heading" data-id="7afb238" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
            <div className="elementor-widget-container">
              <div className="logico-title">/Team /</div>
            </div>
          </div>
          
          <div style={{ alignSelf: "flex-start", width: "100%" }} className="elementor-element elementor-element-c46350e elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" data-id="c46350e" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
            <div className="elementor-widget-container">
              <h3 className="logico-title" style={{ textAlign: "left" }}>Meet our the best crew</h3>
            </div>
          </div>
          
          <div className="elementor-element elementor-element-ac909e5 elementor-widget elementor-widget-logico_team_listing" data-id="ac909e5" data-element_type="widget" data-e-type="widget" data-widget_type="logico_team_listing.default">
            <div className="elementor-widget-container">
              <div className="logico-team-listing-widget">
                <div className="archive-listing">
                  <div className="archive-listing-wrapper team-listing-wrapper team-grid-listing columns-3">
                    
                    {teamMembers.map((member, i) => (
                      <div key={i} className="team-item-wrapper post-2866 team type-team status-publish has-post-thumbnail hentry">
                        <div className="team-item">
                          <div className="team-item-media">
                            <div className="post-media">
                              <a href="#">
                                <Image 
                                  src={member.image} 
                                  alt={member.name} 
                                  width={300} 
                                  height={300} 
                                  style={{ objectFit: "cover", width: "100%", height: "auto" }}
                                />
                              </a>
                            </div>
                          </div>
                          <div className="team-item-content">
                            <div className="post-title"><a href="#">{member.name}</a></div>
                            <div className="team-item-position" dangerouslySetInnerHTML={{ __html: member.position }}></div>
                            <div className="team-item-socials">
                              <ul className="team-socials wrapper-socials">
                                <li><a href="https://www.facebook.com/" target="_blank" rel="noreferrer" className="fab fa-facebook-f"></a></li>
                                <li><a href="https://x.com/" target="_blank" rel="noreferrer" className="fab fa-x-twitter"></a></li>
                                <li><a href="https://www.linkedin.com/" target="_blank" rel="noreferrer" className="fab fa-linkedin-in"></a></li>
                                <li><a href="https://www.youtube.com/" target="_blank" rel="noreferrer" className="fab fa-youtube"></a></li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                    ))}

                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    </>
  );
}