import {
    ArrowPathIcon,
    CloudArrowUpIcon,
    Cog6ToothIcon,
    FingerPrintIcon,
    LockClosedIcon,
    ServerIcon,
    CubeIcon,
    DocumentMagnifyingGlassIcon,
    CpuChipIcon,
    ShieldCheckIcon,
    FilmIcon,
    GlobeAltIcon,
    RocketLaunchIcon,
  } from '@heroicons/react/20/solid'
  
  const features = [
    {
      name: 'Seamless Networking.',
      description: 'Stay connected with your network, explore new opportunities and engage with the latest immersive content through MyVerse Social.',
      icon: CubeIcon,
    },
    {
      name: 'Personalized Events Calendar.',
      description: 'Keep track of upcoming events and exclusive activities tailored to your interests. Never miss another conference, meetup, or virtual gathering in your field..',
      icon: DocumentMagnifyingGlassIcon,
    },
    {
      name: 'Contact Management.',
      description: 'Organize and manage all your contacts in one place. Keep track of your connections, prioritize key relationships, and stay in touch with ease.',
      icon: CpuChipIcon,
    },
    {
      name: 'Share Your Story.',
      description: 'Post photos, videos, publish your verses, and updates about your latest achievements, projects, or ideas to showcase your skills and inspire your connections.',
      icon: ShieldCheckIcon,
    },
    {
      name: 'Discover New Verses.',
      description: 'Explore unique virtual spaces, or "Verses," where you can learn, network, and collaborate. Engage in communities that align with your passions.',
      icon: FilmIcon,
    },
    {
      name: 'Effortless Collaboration.',
      description: 'Use MyVerse Social to find collaborators, pitch ideas, and join forces on exciting projects—streamline your teamwork in a visually compelling environment.',
      icon: GlobeAltIcon,
    },
  ]
  
  export default function Crm() {
    return (
      <div className=" bg-gradient-to-b from-purple-50/10 to-white lg:py-20 py-24 mb-12">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="mx-auto max-w-4xl sm:text-center">

            <p className="mt-2 h3-title">
            MyVerse Social</p>
            <p className="mt-4 section-text font-display ">
            Stay connected with your network, explore new opportunities, and engage with the latest immersive content through MyVerse Social—a space to expand your virtual presence, create lasting connections, and thrive in the metaverse.
            </p>
          </div>
        </div>
        <div className="relative overflow-hidden pt-16">
          <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <img
            alt="App screenshot"
            src="/images/socmed2.jpg"
            width={2432}
            height={1442}
            
          />
          <div aria-hidden="true" className="relative">
            <div className="absolute -inset-x-20 bottom-0 bg-gradient-to-t from-white pt-[7%]" />
          </div>
        </div>
        </div>
        <div className="mx-auto lg:mt-16 max-w-7xl px-6 mt-20 md:mt-24 lg:px-8">
          <dl className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base leading-7 text-purple-900 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-10">
            {features.map((feature) => (
              <div key={feature.name} className="relative pl-9">
                <dt className="inline font-semibold text-purple-700">
                  <feature.icon aria-hidden="true" className="absolute left-1 top-1 h-5 w-5 text-purple-700" />
                  {feature.name}
                </dt>{' '}
                <dd className="inline">{feature.description}</dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    )
  }
  