Welcome to Our Corporate World

"<!--$--> <div> <header class="bg-stone-100"> <div class="container mx-auto"> <nav class="w-full rounded-lg border shadow-lg overflow-hidden p-2 bg-background/10 border-transparent shadow-transparent px-0"> <div class="flex items-center relative"><a href="#" class="font-sans antialiased text-sm text-inherit block py-1 font-semibold">Material Tailwind</a> <div class="hidden lg:block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"> <ul class="mt-4 flex flex-col gap-x-3 gap-y-1.5 lg:mt-0 lg:flex-row lg:items-center"> <li><a href="#" class="font-sans antialiased text-sm text-inherit flex items-center gap-x-2 p-1 hover:text-primary">Home</a> </li> <li><a href="#" class="font-sans antialiased text-sm text-inherit flex items-center gap-x-2 p-1 hover:text-primary">About</a> </li> <li><a href="#" class="font-sans antialiased text-sm text-inherit flex items-center gap-x-2 p-1 hover:text-primary">Contact Us</a></li> </ul> </div> <div class="gap-2 items-center hidden lg:ml-auto lg:flex"><button class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center transition-all duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none text-sm rounded-md py-1.5 px-3 shadow-sm hover:shadow bg-secondary border-secondary text-secondary-foreground hover:bg-secondary-light hover:border-secondary-light" data-shape="default" data-width="default">Sign In</button><button class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center transition-all duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none text-sm rounded-md py-1.5 px-3 shadow-sm hover:shadow bg-primary border-primary text-primary-foreground hover:bg-primary-light hover:border-primary-light" data-shape="default" data-width="default">Buy Now</button></div> <button class="place-items-center border align-middle select-none font-sans font-medium text-center transition-all duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none data-[shape=circular]:rounded-full text-sm min-w-[34px] min-h-[34px] rounded-md bg-transparent border-transparent text-secondary-foreground hover:bg-secondary/10 hover:border-secondary/10 shadow-none hover:shadow-none ml-auto grid lg:hidden" data-shape="default"><i class="fas fa-bars h-4 w-4"></i></button> </div> </nav> <div class="container px-8 py-12 md:py-20 lg:py-28 mx-auto"> <div class="grid md:grid-cols-2 gap-12 items-center"> <div> <div data-open="true" data-shape="pill" class="relative inline-flex w-max items-center border font-sans font-medium rounded-md data-[shape=pill]:rounded-full text-sm p-0.5 border-transparent shadow-none mb-6 bg-green-500/10 text-green-500"> <span class="grid place-items-center shrink-0 rounded-full translate-x-1 w-4 h-4"><i class="fas fa-info-circle w-full h-full"></i></span><span class="font-inherit text-inherit leading-none my-1 mx-2.5">Discover what's new</span></div> <h1 class="font-sans antialiased font-bold text-3xl md:text-4xl lg:text-5xl text-inherit mb-4"> Welcome to Our Corporate World</h1> <p class="font-sans antialiased text-lg text-stone-600">Where innovation meets excellence.</p> </div> <div class="h-[50vh]"><img src="https://bucket.material-tailwind.com/magic-ai/15710b45040a19a7f5869d71a522e449f7c5040668df5dfc5fdbfc52f011e693.jpg" alt="gradient pattern" class="w-full h-full rounded-xl object-cover"></div> </div> </div> </div> </header> </div><!--/$--><!--$--> <div class="container mx-auto mt-24"> <div class="container mx-auto mb-12 text-center"> <p variant="h1" class="font-sans antialiased text-base text-inherit mb-2 font-bold !text-4xl !leading-snug lg:!text-5xl"> Our Key Features</p> <p variant="lead" class="font-sans antialiased mx-auto w-full px-4 text-xl text-stone-500 lg:w-8/12 lg:px-8"> Discover the unique offerings that set us apart.</p> </div> <div class="px-4 gap-4 grid grid-cols-1 md:grid-cols-3"> <div class="w-full min-h-[200px] animate-[pulse_1s_ease_infinite] [animation-delay:var(--delay)]" style="--delay:0ms"> <div class="h-[200px] w-full bg-stone-300 rounded-lg"></div> </div> <div class="w-full min-h-[200px] animate-[pulse_1s_ease_infinite] [animation-delay:var(--delay)]" style="--delay:150ms"> <div class="h-[200px] w-full bg-stone-300 rounded-lg"></div> </div> <div class="w-full min-h-[200px] animate-[pulse_1s_ease_infinite] [animation-delay:var(--delay)]" style="--delay:300ms"> <div class="h-[200px] w-full bg-stone-300 rounded-lg"></div> </div> </div> </div><!--/$--><!--$--> <div class="container mx-auto mt-24"> <div class="container mx-auto mb-12 text-center"> <p variant="h1" class="font-sans antialiased text-base text-inherit mb-2 font-bold !text-4xl !leading-snug lg:!text-5xl"> What Our Clients Say</p> <p variant="lead" class="font-sans antialiased mx-auto w-full px-4 text-xl text-stone-500 lg:w-8/12 lg:px-8"> Real stories from satisfied clients.</p> </div> <div class="px-4 gap-4 grid grid-cols-1 md:grid-cols-3"> <div class="w-full min-h-[200px] animate-[pulse_1s_ease_infinite] [animation-delay:var(--delay)]" style="--delay:0ms"> <div class="h-[200px] w-full bg-stone-300 rounded-lg"></div> </div> <div class="w-full min-h-[200px] animate-[pulse_1s_ease_infinite] [animation-delay:var(--delay)]" style="--delay:150ms"> <div class="h-[200px] w-full bg-stone-300 rounded-lg"></div> </div> <div class="w-full min-h-[200px] animate-[pulse_1s_ease_infinite] [animation-delay:var(--delay)]" style="--delay:300ms"> <div class="h-[200px] w-full bg-stone-300 rounded-lg"></div> </div> </div> </div><!--/$--><!--$--> <div class="container mx-auto mt-24"> <div class="container mx-auto mb-12 text-center"> <p variant="h1" class="font-sans antialiased text-base text-inherit mb-2 font-bold !text-4xl !leading-snug lg:!text-5xl"> Latest Insights</p> <p variant="lead" class="font-sans antialiased mx-auto w-full px-4 text-xl text-stone-500 lg:w-8/12 lg:px-8"> Stay updated with our latest articles.</p> </div> <div class="px-4 gap-4 grid grid-cols-1 md:grid-cols-3"> <div class="w-full min-h-[200px] animate-[pulse_1s_ease_infinite] [animation-delay:var(--delay)]" style="--delay:0ms"> <div class="h-[200px] w-full bg-stone-300 rounded-lg"></div> </div> <div class="w-full min-h-[200px] animate-[pulse_1s_ease_infinite] [animation-delay:var(--delay)]" style="--delay:150ms"> <div class="h-[200px] w-full bg-stone-300 rounded-lg"></div> </div> <div class="w-full min-h-[200px] animate-[pulse_1s_ease_infinite] [animation-delay:var(--delay)]" style="--delay:300ms"> <div class="h-[200px] w-full bg-stone-300 rounded-lg"></div> </div> </div> </div><!--/$--><!--$--> <div class="container mx-auto mt-24"> <div class="container mx-auto mb-12 text-center"> <p variant="h1" class="font-sans antialiased text-base text-inherit mb-2 font-bold !text-4xl !leading-snug lg:!text-5xl"> Get in Touch</p> <p variant="lead" class="font-sans antialiased mx-auto w-full px-4 text-xl text-stone-500 lg:w-8/12 lg:px-8"> We'd love to hear from you.</p> </div> <div class="px-4 gap-4 grid grid-cols-1 md:grid-cols-2"> <div class="w-full min-h-[200px] animate-[pulse_1s_ease_infinite] [animation-delay:var(--delay)]" style="--delay:0ms"> <div class="h-[200px] w-full bg-stone-300 rounded-lg"></div> </div> <div class="w-full min-h-[200px] animate-[pulse_1s_ease_infinite] [animation-delay:var(--delay)]" style="--delay:150ms"> <div class="h-[200px] w-full bg-stone-300 rounded-lg"></div> </div> </div> </div><!--/$-->"