# App Download CTA Category: cta Description: Encourages app downloads with prominent call-to-action buttons for both App Store and Play Store. ## 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="iq6c9k" layout="container" space="m-x:auto m-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x"> <div id="ikg6bc" layout="relative grid grid-cols:1 overflow:hidden tw-lg:grid-cols:3" space="g:medium p:medium tw-lg:p-x:big-3x tw-lg:p-y:big" visual="rounded:big bg:blue-500 text:white"> <div id="it9lmw" layout="col-span:1 flex col justify:center tw-lg:col-span:2"> <h1 id="ijfehq" space="m-b:small" visual="text-size:huge font:tw-semibold capitalize tw-lg:text-size:mega tw-lg:font:tw-bold">Download My App</h1> <p id="i9jh58" space="m-b:medium w:[100%] tw-lg:m-b:large" visual="text-size:base text:black tw-lg:text-size:huge">Don't wait anymore, push the download button now!</p> <div id="in87r6" layout="flex col tw-lg:row" space="g:medium"><a id="ibapy4" href="https://qheat.bookklik.com/web/" type="button" target="_blank" layout="flex items:center justify:center" space="h:big w:[100%] p-x:medium-3x tw-lg:max-w:[max-content]" visual="rounded:medium bg:white text-size:large font:tw-semibold text:blue-500 hover:opacity:80">App Store</a><a id="ixfgqb" href="https://play.google.com/store/apps/details?id=com.qheat.calculator" type="button" target="_blank" layout="flex items:center justify:center" space="h:big w:[100%] p-x:medium-3x tw-lg:max-w:[max-content]" visual="rounded:medium border-w:regular border:white text-size:large font:tw-semibold text:white hover:opacity:80">Play Store</a></div> </div> <div id="i4ajll" layout="hidden tw-lg:flex" class="justify-right aspect-square"><img id="ivfr4c" src="https://placehold.co/400x400" layout="object:contain" space="m-x:auto w:[100%]" /></div> </div> </section> ``` ## Tailwind CSS Code ```html <section id="iq6c9k" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div id="ikg6bc" class="relative grid grid-cols-1 gap-4 overflow-hidden rounded-2xl bg-blue-500 p-4 text-white lg:grid-cols-3 lg:px-16 lg:py-12"> <div id="it9lmw" class="col-span-1 flex flex-col justify-center lg:col-span-2"> <h1 id="ijfehq" class="mb-2 text-2xl font-semibold capitalize lg:text-6xl lg:font-bold">Download My App</h1> <p id="i9jh58" class="mb-4 w-full text-base text-black lg:mb-8 lg:text-2xl">Don't wait anymore, push the download button now!</p> <div id="in87r6" class="flex flex-col gap-4 lg:flex-row"><a id="ibapy4" href="https://qheat.bookklik.com/web/" type="button" target="_blank" class="flex h-12 w-full items-center justify-center rounded-lg bg-white px-6 text-lg font-semibold text-blue-500 hover:opacity-80 lg:max-w-max">App Store</a><a id="ixfgqb" href="https://play.google.com/store/apps/details?id=com.qheat.calculator" type="button" target="_blank" class="flex h-12 w-full items-center justify-center rounded-lg border-2 border-white px-6 text-lg font-semibold text-white hover:opacity-80 lg:max-w-max">Play Store</a></div> </div> <div id="i4ajll" class="justify-right hidden aspect-square lg:flex"><img id="ivfr4c" src="https://placehold.co/400x400" class="mx-auto w-full object-contain" /></div> </div> </section> ```