Landing page Design

<section class="relative z-10 mt-12 mb-24">
    <div class="mx-auto max-w-7xl space-y-24 sm:space-y-36 px-4 sm:px-12 lg:px-8 xl:px-16">
        <div class="mx-auto">
            <div class="relative before:z-0 before:top-[50%] before:absolute before:h-[1px] before:bg-black before:w-full">
                <span class="block relative w-max bg-black px-4 py-1 text-white z-10">Vision</span>
            </div>
            <div class="mt-14 gap-4 sm:grid sm:grid-cols-2 md:gap-6 lg:gap-12">
                <h2 class="text-3xl font-bold sm:text-4xl">Our Passion for Design</h2>
                <div class="mt-6 space-y-6 text-gray-700 sm:mt-0">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam temporibus quo nemo fugit deserunt aliquid modi, amet beatae animi tenetur cumque eum suscipit doloribus dolorem dolore in aut ratione tempore.
                    </p>
                    <p>We use our digital product design and development expertise to achieve quantifiable business goals, build a strong design framework early on and empower our clients to continue maintaining a consistent product.</p>
                </div>
            </div>
        </div>
        <div class="mx-auto">
            <div class="relative before:z-0 before:top-[50%] before:absolute before:h-[1px] before:bg-black before:w-full">
                <span class="block relative w-max bg-black px-4 py-1 text-white z-10">Mission</span>
            </div>
            <div class="mt-24 gap-4 sm:grid sm:grid-cols-2 md:gap-6 lg:gap-12">
                <div>
                    <h2 class="text-3xl font-bold sm:text-4xl">Our Commitment to Quality</h2>
                </div>
                <div class="mt-6 space-y-6 text-gray-700 sm:mt-0">
                    <p>Know more about his tastes and lifestyle. During the working process, we perform regular fitting with the client because he is the only person who can feel whether a new suit fits or not.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat nobis, illo modi ut iusto assumenda fugit ad quod consequatur aperiam dolore reprehenderit hic veniam fugiat. Delectus quisquam est officia tempore?</p>
                </div>
            </div>
            <div class="mt-24 grid gap-4 sm:grid-cols-2 md:gap-6 lg:gap-12 xl:grid-cols-5">
                <div class="xl:col-span-2">
                    <img class="rounded-md" src="https://designcools.com/wp-content/uploads/2024/11/event-speakers.png" alt="landing page layout" width="" height="" />
                </div>
                <div class="xl:col-span-3">
                    <img class="rounded-md" src="https://designcools.com/wp-content/uploads/2024/10/This-is-digital-LOW-RES-21.webp" alt="landing page design" width="" height="" />
                </div>
            </div>
        </div>
        <div class="mx-auto">
            <div class="relative before:z-0 before:top-[50%] before:absolute before:h-[1px] before:bg-black before:w-full">
                <span class="block relative w-max bg-black px-4 py-1 text-white z-10">Team</span>
            </div>
            <div class="mt-24 gap-4 sm:grid sm:grid-cols-2 md:gap-6 lg:gap-12">
                <div>
                    <h2 class="text-3xl font-bold sm:text-4xl">Meet our team</h2>
                </div>
                <div class="mt-6 text-gray-600 sm:mt-0">
                    <p>During the working process, we perform regular fitting with the client because he is the only person who can feel whether a new suit fits or not.</p>
                </div>
            </div>
            <div class="mt-24">
                <div class="grid gap-x-0 sm:gap-x-6 lg:gap-x-12 gap-y-12 sm:grid-cols-2 md:grid-cols-3 xl:gap-12">
                    <div class="group overflow-hidden">
                        <img
                            class="h-80 w-full rounded-md object-cover object-top transition-all duration-500 group-hover:h-[18rem] group-hover:rounded-xl"
                            src="https://designcools.com/wp-content/uploads/2024/11/lady.jpeg"
                            alt="team member"
                        />
                        <div class="px-3 pt-2 sm:pt-4 sm:pb-0">
                            <div class="flex justify-between">
                                <h3 class="text-xl font-medium text-gray-700 transition-all duration-500 group-hover:tracking-wider group-hover:text-primary">Liam Brown</h3>
                                <span class="text-xs text-gray-600">_01</span>
                            </div>
                            <div class="mt-1 flex items-center justify-between">
                                <span class="inline-block translate-y-6 text-sm text-gray-600 transition duration-300 group-hover:translate-y-0">Founder - CEO</span>
                                <a href="" class="inline-block translate-y-8 text-sm tracking-wide text-gray-600 transition-all duration-500 group-hover:translate-y-0 group-hover:text-primary"> Linktree </a>
                            </div>
                        </div>
                    </div>
                    <div class="group overflow-hidden">
                        <img
                            class="h-80 w-full rounded-md object-cover object-top transition-all duration-500 group-hover:h-[18rem] group-hover:rounded-xl"
                            src="https://designcools.com/wp-content/uploads/2024/11/lady2.jpeg"
                            alt="team member"
                        />
                        <div class="px-3 pt-2 sm:pt-4 sm:pb-0">
                            <div class="flex justify-between">
                                <h3 class="text-xl font-medium text-gray-700 transition-all duration-500 group-hover:tracking-wider group-hover:text-primary">Elijah Jones</h3>
                                <span class="text-xs text-gray-600">_02</span>
                            </div>
                            <div class="mt-1 flex items-center justify-between">
                                <span class="inline-block translate-y-6 text-sm text-gray-600 transition duration-300 group-hover:translate-y-0">Co-Founder - CTO</span>
                                <a href="" class="inline-block translate-y-8 text-sm tracking-wide text-gray-600 transition-all duration-500 group-hover:translate-y-0 group-hover:text-primary"> Linktree </a>
                            </div>
                        </div>
                    </div>
                    <div class="group overflow-hidden">
                        <img
                            class="h-80 w-full rounded-md object-cover object-top transition-all duration-500 group-hover:h-[18rem] group-hover:rounded-xl"
                            src="https://designcools.com/wp-content/uploads/2024/11/man.jpeg"
                            alt="team member"
                        />
                        <div class="px-3 pt-2 sm:pt-4 sm:pb-0">
                            <div class="flex justify-between">
                                <h3 class="text-xl font-medium text-gray-700 transition-all duration-500 group-hover:tracking-wider group-hover:text-primary">Isabella Garcia</h3>
                                <span class="text-xs text-gray-600">_03</span>
                            </div>
                            <div class="mt-1 flex items-center justify-between">
                                <span class="inline-block translate-y-6 text-sm text-gray-600 transition duration-300 group-hover:translate-y-0">Sales Manager</span>
                                <a href="" class="inline-block translate-y-8 text-sm tracking-wide text-gray-600 transition-all duration-500 group-hover:translate-y-0 group-hover:text-primary"> Linktree </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>