3 collumn in wave

Hey!

I've just tested this and it seems to be working as expected:

Are you adding this to a specific view that is causing the problem or does adding it to any view result in the same behaviour?

Also, once you add the new section, to compile a theme's assets you can navigate into the theme folder and you can run npm run watch to start your asset watcher and develop your theme. When you are ready to compile and minify your assets for production you will want to run npm run production.

yes, I'm adding it in the home.blade.php of the your wonderfull Wave template

@extends('theme::layouts.app')

@section('content')

<div class="relative flex items-center w-full">
    <div class="relative z-20 px-8 mx-auto xl:px-5 max-w-7xl">

        <div class="flex flex-col items-center h-full pt-16 pb-56 lg:flex-row">

            <div class="flex flex-col items-start w-full mb-16 md:items-center lg:pr-12 lg:items-start lg:w-1/2 lg:mb-0">

                <h2 class="invisible text-sm font-semibold tracking-wide text-gray-700 uppercase transition-none duration-700 ease-out transform translate-y-12 opacity-0 sm:text-base lg:text-sm xl:text-base" data-replace='{ "transition-none": "transition-all", "invisible": "visible", "translate-y-12": "translate-y-0", "scale-110": "scale-100", "opacity-0": "opacity-100" }'>Placeholder Text</h2>
                <h1 class="invisible pb-2 mt-3 text-4xl font-extrabold leading-10 tracking-tight text-transparent transition-none duration-700 ease-out delay-150 transform translate-y-12 opacity-0 bg-clip-text bg-gradient-to-r from-blue-600 via-blue-500 to-purple-600 scale-10 md:my-5 sm:leading-none lg:text-5xl xl:text-6xl" data-replace='{ "transition-none": "transition-all", "invisible": "visible", "translate-y-12": "translate-y-0", "scale-110": "scale-100", "opacity-0": "opacity-100" }'>Placeholder Text</h1>
                <p class="invisible max-w-2xl mt-0 text-base text-left text-gray-600 transition-none duration-700 ease-out delay-300 transform translate-y-12 opacity-0 md:text-center lg:text-left sm:mt-2 md:mt-0 sm:text-base lg:text-lg xl:text-xl" data-replace='{ "transition-none": "transition-all", "invisible": "visible", "translate-y-12": "translate-y-0", "scale-110": "scale-100", "opacity-0": "opacity-100" }'>Placeholder Text</p>
                <div class="invisible w-full mt-5 transition-none duration-700 ease-out transform translate-y-12 opacity-0 delay-450 sm:mt-8 sm:flex sm:justify-center lg:justify-start sm:w-auto" data-replace='{ "transition-none": "transition-all", "invisible": "visible", "translate-y-12": "translate-y-0", "opacity-0": "opacity-100" }'>
                    <div class="rounded-md">
                        <a href="Placeholder Text" class="flex items-center justify-center w-full px-8 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out border border-transparent rounded-md bg-wave-500 hover:bg-wave-600 focus:outline-none focus:border-wave-600 focus:shadow-outline-indigo md:py-4 md:text-lg md:px-10">
                            Placeholder Text
                        </a>
                    </div>
                    {{-- <div class="mt-3 sm:mt-0 sm:ml-3">
                        <a href="#" class="flex items-center justify-center w-full px-8 py-3 text-base font-medium leading-6 text-indigo-700 transition duration-150 ease-in-out bg-indigo-100 border-2 border-transparent rounded-md hover:text-indigo-600 hover:bg-indigo-50 focus:outline-none focus:shadow-outline-indigo focus:border-indigo-300 md:py-4 md:text-lg md:px-10">
                            Learn More
                        </a>
                    </div> --}}
                </div>
            </div>

            <div class="flex w-full mb-16 lg:w-1/2 lg:mb-0">

                <div class="relative invisible transition-none duration-1000 delay-100 transform translate-x-12 opacity-0" data-replace='{ "transition-none": "transition-all", "invisible": "visible", "translate-x-12": "translate-y-0", "opacity-0": "opacity-100" }'>
                    <img src="Placeholder Text" class="w-full max-w-3xl sm:w-auto">
                </div>

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



</div>

{{-- <div class="relative z-40 -mt-64">

    <svg viewBox="0 0 120 28" class="-mt-64">
        <defs>
            <path id="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
        </defs>
        <use id="wave3" class="wave" xlink:href="#wave" x="0" y="-2"></use>
        <use id="wave2" class="wave" xlink:href="#wave" x="0" y="0"></use>
        <use id="wave1" class="wave" xlink:href="#wave" x="0" y="1" />
    </svg>
</div> --}}

{{-- FEATURES SECTION --}}

<section class="pt-20 pb-32 bg-white tails-selected-element" contenteditable="false">
    <div class="max-w-4xl px-20 mx-auto">
    <h2 class="mb-1 text-3xl font-extrabold leading-tight text-gray-900">Empower your digital management journey with our intuitive features. Easily organize, secure, and manage your digital assets with peace of mind.</h2>
    <div class="grid grid-cols-1 mt-16 sm:grid-cols-2 md:grid-cols-3 gap-x-10 lg:gap-x-16 gap-y-20">
        <div class="">
            <svg class="w-10 h-10 text-blue-600" data-primary="blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" class=""></path>
            </svg>
            <h3 class="mt-6 text-lg font-semibold text-gray-900">Placeholder Text</h3>
            <p class="mt-2 text-base text-gray-600">Placeholder Text</p>
        </div>
        <div class="">
            <svg class="w-10 h-10 text-blue-600" data-primary="blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" class=""></path>
            </svg>
            <h3 class="mt-6 text-lg font-semibold text-gray-900">Placeholder Text</h3>
            <p class="mt-2 text-base text-gray-600">Placeholder Text</p>
        </div>
        <div class="">
            <svg class="w-10 h-10 text-blue-600" data-primary="blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" class=""></path>
            </svg>
            <h3 class="mt-6 text-lg font-semibold text-gray-900">Placeholder Text</h3>
            <p class="mt-2 text-base text-gray-600">Placeholder Text</p>
        </div>
    </div>
    </div>
</section>

@endsection

Hey!

Yep, so I got it working after running npm run production inside the resources/views/themes/tailwind directory:

Let me know how it goes on your end!

UPDATE:

First : tanxs for your time. I truly appreciate it.

But let me learn a bit if you please :

I usually always run PHP ARTISAN SERVE at the root.

What happen when you run NPM run production from inside a specific folder ? Why would you choose to do that ?

At this point, the NPM run production inside the tailwind directory give me a error sh: 1: mix: not found.

I don't want or like to waste people time, i will look it up online, but will appreciate any information making me more competent.

tanxs

Well, today was quite a learning experience for me:

I discovered that Laravel Mix runs parallel with php artisan serve, whereas previously, I mistakenly believed they were performing the same function.
I realized that I need to install npm in the theme directory, contrary to my previous assumption that it should be installed at the root.

It's reassuring to see that everything is functioning as intended now. I just need to adjust the width of this new section and continue working on my app. I hope I won't have to bother you too much in the future, but I must say, your information is effective, easy to grasp, and presented in a very human way. Thank you for not getting frustrated or impatient with this old man.

Yours sincerely,

nicolas

Hey!

No worries at all. Happy to hear that this has been helpful.

Feel free to post new questions in case anything else comes up. And good luck with your project 👏