# Hero Centered Media Category: hero Description: Captures attention with a hero section featuring centered text, a prominent media display, and clear CTAs. ## Implementation Context - **Primary**: Use **SenangStart CSS** for the implementation. - **Reference**: Tailwind CSS is provided for stylistic context only. ## SenangStart CSS Usage To use SenangStart CSS, simply include the script in your HTML ``: ```html My App

Hello SenangStart!

Zero config, instant styling.

``` **Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html) ## SenangStart CSS Code ```html <section id="i1y6j" layout="container" space="m-x:auto m-b:big-3x"> <div id="ix5kn" layout="relative flex items:center justify:center" space="p-y:giant-2x tw-lg:p-y:big-4x p-x:none tw-lg:p-x:big-3x h:[100vh] tw-lg:h:[min-content]" visual="tw-lg:rounded:medium bg:neutral-200"> <div layout="flex col items:center" space="max-w:[screen-lg] m-x:auto p-x:medium-3x" class="z-10"> <h1 id="is6u8" space="m-b:medium" visual="text-size:giant tw-lg:text-size:giga font:tw-bold text:center">Transform Your Idea<br>Into&nbsp;<span visual="text:blue-600" id="ixj3p">Great Product</span></h1> <p space="m-b:medium-3x tw-lg:m-b:large" visual="text-size:huge tw-lg:text-size:giant text:center font:tw-semibold" id="id97k">Empowering Business to Build, Innovate, and Succeed<br></p> <div layout="relative" space="w:[100%] m-b:medium tw-lg:m-b:large max-w:[2xl]" class="aspect-video" id="imfy1"><img src="https://placehold.co/600x400" id="ifdyv" layout="top:none left:none absolute object:contain" space="w:[100%] h:[100%]" visual="tw-lg:rounded:medium"></div> <div layout="flex justify:center col tw-lg:row" space="w:[100%] g:medium" id="i6ixf"><a href="#services" layout="flex items:center justify:center" space="p-x:large h:big-2x w:[100%] tw-lg:max-w:[max-content] p-y:medium" visual="bg:blue-600 text:white text-size:big rounded:medium hover:opacity:80 font:tw-semibold" id="ihdgl">Services</a><a href="#products" id="ib08uq" layout="flex items:center justify:center" space="p-x:large h:big-2x w:[100%] tw-lg:max-w:[max-content] p-y:medium" visual="bg:white text:blue-600 text-size:big rounded:medium hover:opacity:80 font:tw-semibold">Products</a> </div> </div> </div> </section> ``` ## Tailwind CSS Code ```html <section id="i1y6j" class="container mx-auto mb-16"> <div id="ix5kn" class="py-28 lg:py-20 px-0 lg:px-16 relative flex items-center justify-center h-screen lg:h-min lg:rounded-lg bg-neutral-200"> <div class="max-w-screen-lg mx-auto flex flex-col items-center px-6 z-10"> <h1 id="is6u8" class="text-4xl lg:text-7xl font-bold text-center mb-4">Transform Your Idea<br>Into&nbsp;<span class="text-blue-600" id="ixj3p">Great Product</span></h1> <p class="text-2xl lg:text-4xl mb-6 lg:mb-8 text-center font-semibold" id="id97k">Empowering Business to Build, Innovate, and Succeed<br></p> <div class="aspect-video w-full relative mb-4 lg:mb-8 max-w-2xl" id="imfy1"><img src="https://placehold.co/600x400" id="ifdyv" class="w-full h-full top-0 left-0 absolute lg:rounded-lg object-contain"></div> <div class="w-full flex gap-4 justify-center flex-col lg:flex-row" id="i6ixf"><a href="#services" class="bg-blue-600 text-white text-xl rounded-lg px-8 h-14 w-full lg:max-w-max py-4 flex items-center justify-center hover:opacity-80 font-semibold" id="ihdgl">Services</a><a href="#products" id="ib08uq" class="bg-white text-blue-600 text-xl rounded-lg px-8 h-14 w-full lg:max-w-max py-4 flex items-center justify-center hover:opacity-80 font-semibold">Products</a> </div> </div> </div> </section> ```