SenangStart Loading... [Back](https://senangstart.com) showcase 18 [ Alternating Experiences ](#experiences-1) [ App Screenshot Previews ](#previews-2) [ Award Showcase Grid ](#awards-1) [ Bonus Content Grid ](#bonus-1) [ Course Card Grid ](#blogs-2) [ Course Offer Cards ](#offer-2) [ Custom Section Benefits ](#benefits-1) [ Dual Product Cards ](#products-3) [ Filterable Portfolio ](#products-4) [ Offer Image Grid ](#offer-1) [ Partners & Clients ](#partners-clients) [ Portfolio Reveal Grid ](#products-1) [ Quality Asym Images ](#quality-1) [ Service Icon Grid ](#services-1) [ Specialty Icon Grid ](#specialities-1) [ STEM Learning Previews ](#previews-1) [ Template Showcase Grid ](#products-2) [ Webinar Grid ](#blogs-1) cta 7 [ App Download CTA ](#cta-2) [ CTA Profile Card ](#cta-1) [ CTA Stats & Image ](#cta-5) [ Newsletter CTA Logos ](#cta-6) [ Plan CTA Testimonial ](#cta-7) [ Product CTA Interactive ](#cta-3) [ Profile CTA Background ](#cta-4) feature 4 [ App Features Centered ](#features-2) [ App Features Mobile ](#features-1) [ Feature Image Toggle ](#features-4) [ Feature Large Image ](#features-3) general 4 [ App Onboarding Steps ](#steps-2) [ Event Timeline ](#timeline-1) [ Step Image Cards ](#steps-1) [ Story Mission Banners ](#story-1) testimonial 4 [ Basic Testimonial Grid ](#testimony-2) [ Simple Testimonial ](#testimony-1) [ Testimonial Cards Stats ](#testimony-4) [ Testimonial Slider ](#testimony-3) video 6 [ Centered Video Show ](#video-1) [ Video Feature Highlights ](#video-6) [ Video Fullwidth Overlay ](#video-2) [ Video Gallery ](#video-4) [ Video Testimonial ](#video-5) [ Video with Sidebar ](#video-3) problem 6 [ Challenge Icon Cards ](#problems-3) [ Dual Problem Cards ](#problems-1) [ Multi-Format Problems ](#problems-2) [ Problem Before/After ](#problems-4) [ Problem Image Stack ](#problems-6) [ Tabbed Problem Explore ](#problems-5) faq 6 [ Classic Accordion ](#faq-1) [ Colored Block FAQ ](#faq-4) [ Formal List FAQ ](#faq-6) [ Grid Toggle FAQ ](#faq-2) [ Interactive List FAQ ](#faq-5) [ Sidebar Intro FAQ ](#faq-3) product 2 [ Course Product Page ](#product-1) [ Webinar Product Booking ](#product-2) footer 2 [ Footer Sitemap ](#footer-2) [ Simple Footer Social ](#footer-1) story 5 [ Founder's Perspective ](#story-4) [ Guiding Core Values ](#story-3) [ Our Journey Timeline ](#story-2) [ Our Working Philosophy ](#story-5) [ The Evolution Story ](#story-6) statistic 6 [ Global Scale Stats ](#statistics-6) [ Impact Highlights ](#statistics-4) [ Key Metrics Showcase ](#statistics-2) [ Milestone Cards ](#statistics-5) [ Progress Report List ](#statistics-3) [ Statistic Box Grid ](#statistics-1) hero 6 [ Hero BG Pattern Card ](#hero-6) [ Hero Centered Media ](#hero-1) [ Hero Feature Cards ](#hero-5) [ Hero Full BG Image ](#hero-3) [ Hero Split BG Image ](#hero-2) [ Hero Split Overlay ](#hero-4) team 2 [ Medical Team Grid ](#team-2) [ Team Leadership Grid ](#team-1) navigation 6 [ Navbar Announce User ](#navbar-6) [ Navbar Mega Menu ](#navbar-5) [ Navbar Prev/Next Nav ](#navbar-2) [ Navbar Top Bar Links ](#navbar-3) [ Navbar with Search ](#navbar-4) [ Standard Navbar ](#navbar-1) pricing 2 [ Pricing Compare Table ](#pricing-2) [ Pricing Toggle Cards ](#pricing-1) [![SenangStart](https://senangstart.com/img/ss_logo_text.svg)](https://senangstart.com) #### [\#](https://senangstart.com/sections/experiences-1/llms.txt)Alternating Experiences showcase Highlights expertise and custom software solutions using alternating text and image blocks to engage users. TailwindCSS SenangStart CSS Leverage Our Expertise in IT and Software Development Benefit from our years of experience and proven track record in the industry. With a focus on innovation and collaboration, we create software that delivers real value to your business. [Our Works](#products) ![](https://placehold.co/400x400) ![](https://placehold.co/400x400) Maximize Your Business Potential with Custom Software Transform your ideas into reality with our custom software solutions. From startups to established companies, we help you reach new heights by optimizing processes and delivering competitive advantages. [Talk To An Expert](#contact) <section id="iia0d1" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="flex flex-col gap-16 lg:gap-32"> <div class="flex flex-col lg:mx-24"> <div class="grid gap-8 lg:grid-cols-3 lg:gap-16"> <div class="order-2 flex flex-col justify-center gap-4 lg:order-1 lg:col-span-2 lg:gap-8"> <p id="ib9e5z" class="text-2xl font-bold lg:text-4xl">Leverage Our Expertise in IT and Software Development</p> <p class="text-xl lg:text-2xl">Benefit from our years of experience and proven track record in the industry. With a focus on innovation and collaboration, we create software that delivers real value to your business.</p> <a href="#products" class="flex h-12 w-full items-center justify-center rounded-lg border-2 border-gray-800 px-6 text-lg font-semibold text-gray-800 hover:opacity-80 lg:max-w-max">Our Works</a> </div> <div class="order-1 lg:order-2"> <img src="https://placehold.co/400x400" class="h-full w-full object-contain" /> </div> </div> </div> <div class="flex flex-col lg:mx-24"> <div class="grid gap-8 lg:grid-cols-3 lg:gap-16"> <div> <img src="https://placehold.co/400x400" class="h-full w-full object-contain" /> </div> <div class="flex flex-col justify-center gap-4 lg:col-span-2 lg:gap-8"> <p class="text-2xl font-bold lg:text-4xl">Maximize Your Business Potential with Custom Software</p> <p class="text-xl lg:text-2xl">Transform your ideas into reality with our custom software solutions. From startups to established companies, we help you reach new heights by optimizing processes and delivering competitive advantages.</p> <a id="iswbtx" href="#contact" class="flex h-12 w-full items-center justify-center rounded-lg bg-blue-600 px-6 text-lg font-semibold text-white hover:opacity-80 lg:max-w-max">Talk To An Expert</a> </div> </div> </div> </div> </section> COPY ```

Leverage Our Expertise in IT and Software Development

Benefit from our years of experience and proven track record in the industry. With a focus on innovation and collaboration, we create software that delivers real value to your business.

Our Works

Maximize Your Business Potential with Custom Software

Transform your ideas into reality with our custom software solutions. From startups to established companies, we help you reach new heights by optimizing processes and delivering competitive advantages.

Talk To An Expert
``` Leverage Our Expertise in IT and Software Development Benefit from our years of experience and proven track record in the industry. With a focus on innovation and collaboration, we create software that delivers real value to your business. [Our Works](#products) ![](https://placehold.co/400x400) ![](https://placehold.co/400x400) Maximize Your Business Potential with Custom Software Transform your ideas into reality with our custom software solutions. From startups to established companies, we help you reach new heights by optimizing processes and delivering competitive advantages. [Talk To An Expert](#contact) <section id="iia0d1" 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 layout="flex col" space="g:big-3x tw-lg:g:giant-3x"> <div layout="flex col" space="tw-lg:m-x:giant"> <div layout="grid tw-lg:grid-cols:3" space="g:large tw-lg:g:big-3x"> <div layout="order:2 flex col justify:center tw-lg:order:1 tw-lg:col-span:2" space="g:medium tw-lg:g:large"> <p id="ib9e5z" visual="text-size:huge font:tw-bold tw-lg:text-size:giant">Leverage Our Expertise in IT and Software Development</p> <p visual="text-size:big tw-lg:text-size:huge">Benefit from our years of experience and proven track record in the industry. With a focus on innovation and collaboration, we create software that delivers real value to your business.</p> <a href="#products" 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:gray-800 text-size:large font:tw-semibold text:gray-800 hover:opacity:80">Our Works</a> </div> <div layout="order:1 tw-lg:order:2"> <img src="https://placehold.co/400x400" layout="object:contain" space="h:\[100%\] w:\[100%\]" /> </div> </div> </div> <div layout="flex col" space="tw-lg:m-x:giant"> <div layout="grid tw-lg:grid-cols:3" space="g:large tw-lg:g:big-3x"> <div> <img src="https://placehold.co/400x400" layout="object:contain" space="h:\[100%\] w:\[100%\]" /> </div> <div layout="flex col justify:center tw-lg:col-span:2" space="g:medium tw-lg:g:large"> <p visual="text-size:huge font:tw-bold tw-lg:text-size:giant">Maximize Your Business Potential with Custom Software</p> <p visual="text-size:big tw-lg:text-size:huge">Transform your ideas into reality with our custom software solutions. From startups to established companies, we help you reach new heights by optimizing processes and delivering competitive advantages.</p> <a id="iswbtx" href="#contact" 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:blue-600 text-size:large font:tw-semibold text:white hover:opacity:80">Talk To An Expert</a> </div> </div> </div> </div> </section> COPY ```

Leverage Our Expertise in IT and Software Development

Benefit from our years of experience and proven track record in the industry. With a focus on innovation and collaboration, we create software that delivers real value to your business.

Our Works

Maximize Your Business Potential with Custom Software

Transform your ideas into reality with our custom software solutions. From startups to established companies, we help you reach new heights by optimizing processes and delivering competitive advantages.

Talk To An Expert
``` #### [\#](https://senangstart.com/sections/previews-2/llms.txt)App Screenshot Previews showcase Offers a visual sneak peek of an application through a grid of multiple screenshot previews. TailwindCSS SenangStart CSS Sneak Peak Screenshots ============ Wondering how it looks? Exactly like this ![](https://placehold.co/320x640) ![](https://placehold.co/320x640) ![](https://placehold.co/320x640) ![](https://placehold.co/320x640) <section id="ilc2u9" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div id="isptkh" class="mb-8 grid grid-cols-1 lg:mx-24 lg:mb-16"> <div id="ig5foi" class="col-span-1"> <div id="id5gvp" class="mb-2 max-w-max rounded-md bg-blue-600 px-2 font-bold text-white lg:mb-4">Sneak Peak</div> </div> <div id="igs3aa"> <h1 id="ipdwmm" class="mb-2 text-2xl font-bold capitalize text-blue-600 lg:mb-4 lg:text-6xl">Screenshots<br /></h1> </div> <div id="iuc5n3" class="flex items-center"> <p id="ircdcj" class="w-full text-left text-base font-medium lg:text-2xl">Wondering how it looks? Exactly like this<br /></p> </div> </div> <div id="iohgva" class="grid grid-cols-2 gap-4 lg:grid-cols-4"> <div id="iuexhs"><img src="https://placehold.co/320x640" class="mx-auto" /></div> <div id="iuexhs"><img src="https://placehold.co/320x640" class="mx-auto" /></div> <div id="iuexhs"><img src="https://placehold.co/320x640" class="mx-auto" /></div> <div id="iuexhs"><img src="https://placehold.co/320x640" class="mx-auto" /></div> </div> </section> COPY ```
Sneak Peak

Screenshots

Wondering how it looks? Exactly like this

``` Sneak Peak Screenshots ============ Wondering how it looks? Exactly like this ![](https://placehold.co/320x640) ![](https://placehold.co/320x640) ![](https://placehold.co/320x640) ![](https://placehold.co/320x640) <section id="ilc2u9" 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="isptkh" layout="grid grid-cols:1" space="m-b:large tw-lg:m-x:giant tw-lg:m-b:big-3x"> <div id="ig5foi" layout="col-span:1"> <div id="id5gvp" space="m-b:small max-w:\[max-content\] p-x:small tw-lg:m-b:medium" visual="rounded:small bg:blue-600 font:tw-bold text:white">Sneak Peak</div> </div> <div id="igs3aa"> <h1 id="ipdwmm" space="m-b:small tw-lg:m-b:medium" visual="text-size:huge font:tw-bold capitalize text:blue-600 tw-lg:text-size:mega">Screenshots<br /></h1> </div> <div id="iuc5n3" layout="flex items:center"> <p id="ircdcj" space="w:\[100%\]" visual="text:left text-size:base font:tw-medium tw-lg:text-size:huge">Wondering how it looks? Exactly like this<br /></p> </div> </div> <div id="iohgva" layout="grid grid-cols:2 tw-lg:grid-cols:4" space="g:medium"> <div id="iuexhs"><img src="https://placehold.co/320x640" space="m-x:auto" /></div> <div id="iuexhs"><img src="https://placehold.co/320x640" space="m-x:auto" /></div> <div id="iuexhs"><img src="https://placehold.co/320x640" space="m-x:auto" /></div> <div id="iuexhs"><img src="https://placehold.co/320x640" space="m-x:auto" /></div> </div> </section> COPY ```
Sneak Peak

Screenshots

Wondering how it looks? Exactly like this

``` #### [\#](https://senangstart.com/sections/awards-1/llms.txt)Award Showcase Grid showcase Presents company achievements and awards in a visually appealing grid format with icons and descriptions. TailwindCSS SenangStart CSS Awards 1st Runner Up ================ UniMaker 2018 Northern Region 1st Runner Up ================ Inclusive Innovation Challenge 2017 Gold Medal ============= Invention, Innovation & Design Exposition 2018 Diamond Award ================ National Student Affair Invention, Innovation & Design Competition <section id="ic39kg" class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto"> <div class="flex items-center mb-4 lg:mb-8"> <div class="flex-grow border-neutral-200 border-t border-2"></div> <div class="px-4 font-bold text-2xl lg:text-4xl"> <p>Awards</p> </div> <div class="flex-grow border-neutral-200 border-t border-2"></div> </div> <div class="grid gap-4 lg:grid-cols-2"> <div class="items-center justify-center p-4 rounded-lg bg-neutral-200 lg:p-8" > <div class="w-16 h-16 flex items-center justify-center text-4xl bg-blue-600 text-white mb-4 rounded-full" > <i class="fas fa-trophy"></i> </div> <h1 class="text-2xl lg:text-4xl font-semibold mb-2"> 1st Runner Up<br /> </h1> <p class="lg:text-lg">UniMaker 2018 Northern Region<br /></p> </div> <div class="items-center justify-center p-4 rounded-lg bg-neutral-200 lg:p-8" > <div class="w-16 h-16 flex items-center justify-center text-4xl bg-blue-600 text-white mb-4 rounded-full" > <i class="fa-medapps fab"></i> </div> <h1 class="text-2xl lg:text-4xl font-semibold mb-2"> 1st Runner Up<br /> </h1> <p class="lg:text-lg">Inclusive Innovation Challenge 2017<br /></p> </div> <div class="items-center justify-center p-4 rounded-lg bg-neutral-200 lg:p-8" > <div class="w-16 h-16 flex items-center justify-center text-4xl bg-blue-600 text-white mb-4 rounded-full" > <i class="fas fa-medal"></i> </div> <h1 class="text-2xl lg:text-4xl font-semibold mb-2"> Gold Medal<br /> </h1> <p class="lg:text-lg"> Invention, Innovation &amp; Design Exposition 2018<br /> </p> </div> <div class="items-center justify-center p-4 rounded-lg bg-neutral-200 lg:p-8" > <div class="w-16 h-16 flex items-center justify-center text-4xl bg-blue-600 text-white mb-4 rounded-full" > <i class="fas fa-award"></i> </div> <h1 class="text-2xl lg:text-4xl font-semibold mb-2"> Diamond Award<br /> </h1> <p class="lg:text-lg"> National Student Affair Invention, Innovation &amp; Design Competition<br /> </p> </div> </div> </section> COPY ```

Awards

1st Runner Up

UniMaker 2018 Northern Region

1st Runner Up

Inclusive Innovation Challenge 2017

Gold Medal

Invention, Innovation & Design Exposition 2018

Diamond Award

National Student Affair Invention, Innovation & Design Competition

``` Awards 1st Runner Up ================ UniMaker 2018 Northern Region 1st Runner Up ================ Inclusive Innovation Challenge 2017 Gold Medal ============= Invention, Innovation & Design Exposition 2018 Diamond Award ================ National Student Affair Invention, Innovation & Design Competition <section id="ic39kg" layout="container" space="p-x:medium-3x tw-lg:p-x:big-3x m-y:large tw-lg:m-y:big-3x m-x:auto"> <div layout="flex items:center" space="m-b:medium tw-lg:m-b:large"> <div layout="grow" visual="border:neutral-200 border-w:regular" class="border-t"></div> <div space="p-x:medium" visual="font:tw-bold text-size:huge tw-lg:text-size:giant"> <p>Awards</p> </div> <div layout="grow" visual="border:neutral-200 border-w:regular" class="border-t"></div> </div> <div layout="grid tw-lg:grid-cols:2" space="g:medium"> <div layout="items:center justify:center" space="p:medium tw-lg:p:large" visual="rounded:medium bg:neutral-200" > <div layout="flex items:center justify:center" space="w:big-3x h:big-3x m-b:medium" visual="text-size:giant bg:blue-600 text:white rounded:round" > <i class="fas fa-trophy"></i> </div> <h1 space="m-b:small" visual="text-size:huge tw-lg:text-size:giant font:tw-semibold"> 1st Runner Up<br /> </h1> <p visual="tw-lg:text-size:large">UniMaker 2018 Northern Region<br /></p> </div> <div layout="items:center justify:center" space="p:medium tw-lg:p:large" visual="rounded:medium bg:neutral-200" > <div layout="flex items:center justify:center" space="w:big-3x h:big-3x m-b:medium" visual="text-size:giant bg:blue-600 text:white rounded:round" > <i class="fa-medapps fab"></i> </div> <h1 space="m-b:small" visual="text-size:huge tw-lg:text-size:giant font:tw-semibold"> 1st Runner Up<br /> </h1> <p visual="tw-lg:text-size:large">Inclusive Innovation Challenge 2017<br /></p> </div> <div layout="items:center justify:center" space="p:medium tw-lg:p:large" visual="rounded:medium bg:neutral-200" > <div layout="flex items:center justify:center" space="w:big-3x h:big-3x m-b:medium" visual="text-size:giant bg:blue-600 text:white rounded:round" > <i class="fas fa-medal"></i> </div> <h1 space="m-b:small" visual="text-size:huge tw-lg:text-size:giant font:tw-semibold"> Gold Medal<br /> </h1> <p visual="tw-lg:text-size:large"> Invention, Innovation &amp; Design Exposition 2018<br /> </p> </div> <div layout="items:center justify:center" space="p:medium tw-lg:p:large" visual="rounded:medium bg:neutral-200" > <div layout="flex items:center justify:center" space="w:big-3x h:big-3x m-b:medium" visual="text-size:giant bg:blue-600 text:white rounded:round" > <i class="fas fa-award"></i> </div> <h1 space="m-b:small" visual="text-size:huge tw-lg:text-size:giant font:tw-semibold"> Diamond Award<br /> </h1> <p visual="tw-lg:text-size:large"> National Student Affair Invention, Innovation &amp; Design Competition<br /> </p> </div> </div> </section> COPY ```

Awards

1st Runner Up

UniMaker 2018 Northern Region

1st Runner Up

Inclusive Innovation Challenge 2017

Gold Medal

Invention, Innovation & Design Exposition 2018

Diamond Award

National Student Affair Invention, Innovation & Design Competition

``` #### [\#](https://senangstart.com/sections/bonus-1/llms.txt)Bonus Content Grid showcase Showcases supplementary content, news, or updates in a visually engaging grid with a highlighted main piece. TailwindCSS SenangStart CSS News Bonus ===== Our latest updates and what is happening in the organisation ![](https://placehold.co/600x600)Points One Headline Description ==================== ![](https://placehold.co/600x600) ![](https://placehold.co/600x300)Point Two Headline Description ![](https://placehold.co/600x600) ![](https://placehold.co/600x300)Points Three Headline Description <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="mb-4 grid grid-cols-1 lg:mb-8 lg:grid-cols-2"> <div class="col-span-1 lg:col-span-2"> <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">News</div> </div> <div> <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-0 lg:text-6xl">Bonus</h1> </div> <div class="flex items-center"> <p class="w-full text-left text-base font-semibold lg:text-right lg:text-2xl">Our latest updates and what is happening in the organisation</p> </div> </div> <div class="grid grid-cols-1 grid-rows-3 gap-4 lg:grid-cols-2 lg:grid-rows-2"> <div class="relative row-span-1 overflow-hidden rounded-lg bg-gray-200 lg:row-span-2" style="padding-top: 100%"> <img src="https://placehold.co/600x600" class="absolute top-0 w-full" /> <div class="absolute left-0 top-0 w-full p-4 lg:p-8"> <p class="mb-2 font-bold opacity-50 lg:mb-4">Points One</p> <h1 class="text-base font-semibold capitalize lg:text-6xl lg:font-bold">Headline Description</h1> </div> </div> <div class="relative row-span-1 overflow-hidden rounded-lg bg-gray-200"> <img src="https://placehold.co/600x600" class="absolute top-0 w-full lg:hidden" /> <img src="https://placehold.co/600x300" class="absolute top-0 hidden w-full lg:block" /> <div class="absolute left-0 top-0 w-full p-4 lg:p-8"> <p class="mb-2 font-bold opacity-50">Point Two</p> <p class="text-base font-semibold lg:text-2xl">Headline Description</p> </div> </div> <div class="relative row-span-1 overflow-hidden rounded-lg bg-gray-200"> <img src="https://placehold.co/600x600" class="absolute top-0 w-full lg:hidden" /> <img src="https://placehold.co/600x300" class="absolute top-0 hidden w-full lg:block" /> <div class="absolute left-0 top-0 w-full p-4 lg:p-8"> <p class="mb-2 font-bold opacity-50">Points Three</p> <p class="text-base font-semibold lg:text-2xl">Headline Description</p> </div> </div> </div> </section> COPY ```
News

Bonus

Our latest updates and what is happening in the organisation

Points One

Headline Description

Point Two

Headline Description

Points Three

Headline Description

``` News Bonus ===== Our latest updates and what is happening in the organisation ![](https://placehold.co/600x600)Points One Headline Description ==================== ![](https://placehold.co/600x600) ![](https://placehold.co/600x300)Point Two Headline Description ![](https://placehold.co/600x600) ![](https://placehold.co/600x300)Points Three Headline Description <section 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 layout="grid grid-cols:1 tw-lg:grid-cols:2" space="m-b:medium tw-lg:m-b:large"> <div layout="col-span:1 tw-lg:col-span:2"> <div space="m-b:small max-w:\[max-content\] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:blue-600 font:tw-bold text:blue-600">News</div> </div> <div> <h1 space="m-b:small tw-lg:m-b:none" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">Bonus</h1> </div> <div layout="flex items:center"> <p space="w:\[100%\]" visual="text:left text-size:base font:tw-semibold tw-lg:text:right tw-lg:text-size:huge">Our latest updates and what is happening in the organisation</p> </div> </div> <div layout="grid grid-cols:1 grid-rows:3 tw-lg:grid-cols:2 tw-lg:grid-rows:2" space="g:medium"> <div layout="relative row-span:1 overflow:hidden tw-lg:row-span:2" visual="rounded:medium bg:gray-200" style="padding-top: 100%"> <img src="https://placehold.co/600x600" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute left:none top:none" space="w:\[100%\] p:medium tw-lg:p:large"> <p space="m-b:small tw-lg:m-b:medium" visual="font:tw-bold opacity:50">Points One</p> <h1 visual="text-size:base font:tw-semibold capitalize tw-lg:text-size:mega tw-lg:font:tw-bold">Headline Description</h1> </div> </div> <div layout="relative row-span:1 overflow:hidden" visual="rounded:medium bg:gray-200"> <img src="https://placehold.co/600x600" layout="absolute top:none tw-lg:hidden" space="w:\[100%\]" /> <img src="https://placehold.co/600x300" layout="absolute top:none hidden tw-lg:block" space="w:\[100%\]" /> <div layout="absolute left:none top:none" space="w:\[100%\] p:medium tw-lg:p:large"> <p space="m-b:small" visual="font:tw-bold opacity:50">Point Two</p> <p visual="text-size:base font:tw-semibold tw-lg:text-size:huge">Headline Description</p> </div> </div> <div layout="relative row-span:1 overflow:hidden" visual="rounded:medium bg:gray-200"> <img src="https://placehold.co/600x600" layout="absolute top:none tw-lg:hidden" space="w:\[100%\]" /> <img src="https://placehold.co/600x300" layout="absolute top:none hidden tw-lg:block" space="w:\[100%\]" /> <div layout="absolute left:none top:none" space="w:\[100%\] p:medium tw-lg:p:large"> <p space="m-b:small" visual="font:tw-bold opacity:50">Points Three</p> <p visual="text-size:base font:tw-semibold tw-lg:text-size:huge">Headline Description</p> </div> </div> </div> </section> COPY ```
News

Bonus

Our latest updates and what is happening in the organisation

Points One

Headline Description

Point Two

Headline Description

Points Three

Headline Description

``` #### [\#](https://senangstart.com/sections/blogs-2/llms.txt)Course Card Grid showcase Presents multiple courses or articles in a grid of visually appealing cards, each with key details and actions. TailwindCSS SenangStart CSS More Courses ============ #### Making Your Ads Work 3 Days [View](#) [Buy](#) Bootcamp #### Making Your Ads Work 3 Days [View](#) [Buy](#) Bootcamp #### Making Your Ads Work 3 Days [View](#) [Buy](#) Bootcamp <section class="px-6 lg:px-16 container mx-auto my-8 lg:my-16"> <h1 class="font-bold text-4xl">More Courses</h1> <div class="grid lg:grid-cols-3 mt-4 lg:mt-8 gap-4"> <div class="bg-gray-200 rounded-lg p-4 flex flex-col" style=" background: url('https://placehold.co/400x600'); background-size: cover; background-position: center; " > <div class="text-center"> <h4 class="text-xl font-semibold mb-1">Making Your Ads Work</h4> <p class="text-sm">3 Days</p> </div> <div class="flex-grow h-80"></div> <div> <div class="flex mb-4"> <a href="#" class="min-h-12 flex items-center justify-center bg-white text-blue-600 font-semibold px-8 rounded-lg flex-grow" >View</a > <div class="w-2"></div> <a href="#" class="h-12 flex items-center justify-center text-white bg-blue-600 font-semibold px-8 rounded-lg" >Buy</a > </div> <p class="pt-4 border-t border-neutral-200 text-center text-xs"> Bootcamp </p> </div> </div> <div class="bg-gray-200 rounded-lg p-4 flex flex-col" style=" background: url('https://placehold.co/400x600'); background-size: cover; background-position: center; " > <div class="text-center"> <h4 class="text-xl font-semibold mb-1">Making Your Ads Work</h4> <p class="text-sm">3 Days</p> </div> <div class="flex-grow h-80"></div> <div> <div class="flex mb-4"> <a href="#" class="min-h-12 flex items-center justify-center bg-white text-blue-600 font-semibold px-8 rounded-lg flex-grow" >View</a > <div class="w-2"></div> <a href="#" class="h-12 flex items-center justify-center text-white bg-blue-600 font-semibold px-8 rounded-lg" >Buy</a > </div> <p class="pt-4 border-t border-neutral-200 text-center text-xs"> Bootcamp </p> </div> </div> <div class="bg-gray-200 rounded-lg p-4 flex flex-col" style=" background: url('https://placehold.co/400x600'); background-size: cover; background-position: center; " > <div class="text-center"> <h4 class="text-xl font-semibold mb-1">Making Your Ads Work</h4> <p class="text-sm">3 Days</p> </div> <div class="flex-grow h-80"></div> <div> <div class="flex mb-4"> <a href="#" class="min-h-12 flex items-center justify-center bg-white text-blue-600 font-semibold px-8 rounded-lg flex-grow" >View</a > <div class="w-2"></div> <a href="#" class="h-12 flex items-center justify-center text-white bg-blue-600 font-semibold px-8 rounded-lg" >Buy</a > </div> <p class="pt-4 border-t border-neutral-200 text-center text-xs"> Bootcamp </p> </div> </div> </div> </section> COPY ```

More Courses

Making Your Ads Work

3 Days

View
Buy

Bootcamp

Making Your Ads Work

3 Days

View
Buy

Bootcamp

Making Your Ads Work

3 Days

View
Buy

Bootcamp

``` More Courses ============ #### Making Your Ads Work 3 Days [View](#) [Buy](#) Bootcamp #### Making Your Ads Work 3 Days [View](#) [Buy](#) Bootcamp #### Making Your Ads Work 3 Days [View](#) [Buy](#) Bootcamp <section layout="container" space="p-x:medium-3x tw-lg:p-x:big-3x m-x:auto m-y:large tw-lg:m-y:big-3x"> <h1 visual="font:tw-bold text-size:giant">More Courses</h1> <div layout="grid tw-lg:grid-cols:3" space="m-t:medium tw-lg:m-t:large g:medium"> <div layout="flex col" space="p:medium" visual="bg:gray-200 rounded:medium" style=" background: url('https://placehold.co/400x600'); background-size: cover; background-position: center; " > <div visual="text:center"> <h4 space="m-b:tiny" visual="text-size:big font:tw-semibold">Making Your Ads Work</h4> <p visual="text-size:small">3 Days</p> </div> <div layout="grow" space="h:vast-9x"></div> <div> <div layout="flex" space="m-b:medium"> <a href="#" layout="flex items:center justify:center grow" space="min-h:big p-x:large" visual="bg:white text:blue-600 font:tw-semibold rounded:medium" >View</a > <div space="w:small"></div> <a href="#" layout="flex items:center justify:center" space="h:big p-x:large" visual="text:white bg:blue-600 font:tw-semibold rounded:medium" >Buy</a > </div> <p space="p-t:medium" visual="border:neutral-200 text:center text-size:mini" class="border-t"> Bootcamp </p> </div> </div> <div layout="flex col" space="p:medium" visual="bg:gray-200 rounded:medium" style=" background: url('https://placehold.co/400x600'); background-size: cover; background-position: center; " > <div visual="text:center"> <h4 space="m-b:tiny" visual="text-size:big font:tw-semibold">Making Your Ads Work</h4> <p visual="text-size:small">3 Days</p> </div> <div layout="grow" space="h:vast-9x"></div> <div> <div layout="flex" space="m-b:medium"> <a href="#" layout="flex items:center justify:center grow" space="min-h:big p-x:large" visual="bg:white text:blue-600 font:tw-semibold rounded:medium" >View</a > <div space="w:small"></div> <a href="#" layout="flex items:center justify:center" space="h:big p-x:large" visual="text:white bg:blue-600 font:tw-semibold rounded:medium" >Buy</a > </div> <p space="p-t:medium" visual="border:neutral-200 text:center text-size:mini" class="border-t"> Bootcamp </p> </div> </div> <div layout="flex col" space="p:medium" visual="bg:gray-200 rounded:medium" style=" background: url('https://placehold.co/400x600'); background-size: cover; background-position: center; " > <div visual="text:center"> <h4 space="m-b:tiny" visual="text-size:big font:tw-semibold">Making Your Ads Work</h4> <p visual="text-size:small">3 Days</p> </div> <div layout="grow" space="h:vast-9x"></div> <div> <div layout="flex" space="m-b:medium"> <a href="#" layout="flex items:center justify:center grow" space="min-h:big p-x:large" visual="bg:white text:blue-600 font:tw-semibold rounded:medium" >View</a > <div space="w:small"></div> <a href="#" layout="flex items:center justify:center" space="h:big p-x:large" visual="text:white bg:blue-600 font:tw-semibold rounded:medium" >Buy</a > </div> <p space="p-t:medium" visual="border:neutral-200 text:center text-size:mini" class="border-t"> Bootcamp </p> </div> </div> </div> </section> COPY ```

More Courses

Making Your Ads Work

3 Days

View
Buy

Bootcamp

Making Your Ads Work

3 Days

View
Buy

Bootcamp

Making Your Ads Work

3 Days

View
Buy

Bootcamp

``` #### [\#](https://senangstart.com/sections/offer-2/llms.txt)Course Offer Cards showcase Displays detailed course offers in card format, including titles, durations, and direct enrollment CTAs. TailwindCSS SenangStart CSS ### Expand Your Skill Set #### Mastering Digital Advertising 3-Day Intensive Bootcamp [View Syllabus](#) [Enroll Now](#) Hands-On Learning #### Data Analytics Essentials 5-Day Comprehensive Course [View Syllabus](#) [Enroll Now](#) Real-World Applications #### Social Media Strategy 4-Day Interactive Workshop [View Syllabus](#) [Enroll Now](#) Expert-Led Training <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <h3 class="text-2xl font-bold capitalize lg:text-4xl">Expand Your Skill Set</h3> <div class="mt-4 grid gap-4 lg:mt-8 lg:grid-cols-3"> <div class="flex flex-col rounded-lg bg-gray-200 p-4" style="background: url('https://placehold.co/400x600'); background-size: cover;"> <div class="text-center"> <h4 class="mb-1 text-xl font-semibold">Mastering Digital Advertising</h4> <p class="text-sm">3-Day Intensive Bootcamp</p> </div> <div class="h-80 flex-grow"></div> <div> <div class="mb-4 grid gap-2 xl:grid-cols-2"> <a href="#" type="button" class="flex min-h-12 items-center justify-center rounded-lg bg-white px-6 py-2 text-lg font-semibold text-blue-600 hover:opacity-80">View Syllabus</a> <a href="#" type="button" class="flex min-h-12 items-center justify-center rounded-lg bg-blue-600 px-6 py-2 text-lg font-semibold text-white hover:opacity-80">Enroll Now</a> </div> <p class="border-t-2 border-white border-opacity-50 pt-4 text-center text-xs">Hands-On Learning</p> </div> </div> <div class="flex flex-col rounded-lg bg-gray-200 p-4" style="background: url('https://placehold.co/400x600'); background-size: cover;"> <div class="text-center"> <h4 class="mb-1 text-xl font-semibold">Data Analytics Essentials</h4> <p class="text-sm">5-Day Comprehensive Course</p> </div> <div class="h-80 flex-grow"></div> <div> <div class="mb-4 grid gap-2 xl:grid-cols-2"> <a href="#" type="button" class="flex min-h-12 items-center justify-center rounded-lg bg-white px-6 py-2 text-lg font-semibold text-blue-600 hover:opacity-80">View Syllabus</a> <a href="#" type="button" class="flex min-h-12 items-center justify-center rounded-lg bg-blue-600 px-6 py-2 text-lg font-semibold text-white hover:opacity-80">Enroll Now</a> </div> <p class="border-t-2 border-white border-opacity-50 pt-4 text-center text-xs">Real-World Applications</p> </div> </div> <div class="flex flex-col rounded-lg bg-gray-200 p-4" style="background: url('https://placehold.co/400x600'); background-size: cover;"> <div class="text-center"> <h4 class="mb-1 text-xl font-semibold">Social Media Strategy</h4> <p class="text-sm">4-Day Interactive Workshop</p> </div> <div class="h-80 flex-grow"></div> <div> <div class="mb-4 grid gap-2 xl:grid-cols-2"> <a href="#" type="button" class="flex min-h-12 items-center justify-center rounded-lg bg-white px-6 py-2 text-lg font-semibold text-blue-600 hover:opacity-80">View Syllabus</a> <a href="#" type="button" class="flex min-h-12 items-center justify-center rounded-lg bg-blue-600 px-6 py-2 text-lg font-semibold text-white hover:opacity-80">Enroll Now</a> </div> <p class="border-t-2 border-white border-opacity-50 pt-4 text-center text-xs">Expert-Led Training</p> </div> </div> </div> </section> COPY ```

Expand Your Skill Set

Mastering Digital Advertising

3-Day Intensive Bootcamp

View Syllabus Enroll Now

Hands-On Learning

Data Analytics Essentials

5-Day Comprehensive Course

View Syllabus Enroll Now

Real-World Applications

Social Media Strategy

4-Day Interactive Workshop

View Syllabus Enroll Now

Expert-Led Training

``` ### Expand Your Skill Set #### Mastering Digital Advertising 3-Day Intensive Bootcamp [View Syllabus](#) [Enroll Now](#) Hands-On Learning #### Data Analytics Essentials 5-Day Comprehensive Course [View Syllabus](#) [Enroll Now](#) Real-World Applications #### Social Media Strategy 4-Day Interactive Workshop [View Syllabus](#) [Enroll Now](#) Expert-Led Training <section 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"> <h3 visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:giant">Expand Your Skill Set</h3> <div layout="grid tw-lg:grid-cols:3" space="m-t:medium g:medium tw-lg:m-t:large"> <div layout="flex col" space="p:medium" visual="rounded:medium bg:gray-200" style="background: url('https://placehold.co/400x600'); background-size: cover;"> <div visual="text:center"> <h4 space="m-b:tiny" visual="text-size:big font:tw-semibold">Mastering Digital Advertising</h4> <p visual="text-size:small">3-Day Intensive Bootcamp</p> </div> <div layout="grow" space="h:vast-9x"></div> <div> <div layout="grid tw-xl:grid-cols:2" space="m-b:medium g:small"> <a href="#" type="button" layout="flex items:center justify:center" space="min-h:big p-x:medium-3x p-y:small" visual="rounded:medium bg:white text-size:large font:tw-semibold text:blue-600 hover:opacity:80">View Syllabus</a> <a href="#" type="button" layout="flex items:center justify:center" space="min-h:big p-x:medium-3x p-y:small" visual="rounded:medium bg:blue-600 text-size:large font:tw-semibold text:white hover:opacity:80">Enroll Now</a> </div> <p space="p-t:medium" visual="border-t-w:regular border:white text:center text-size:mini" class="border-opacity-50">Hands-On Learning</p> </div> </div> <div layout="flex col" space="p:medium" visual="rounded:medium bg:gray-200" style="background: url('https://placehold.co/400x600'); background-size: cover;"> <div visual="text:center"> <h4 space="m-b:tiny" visual="text-size:big font:tw-semibold">Data Analytics Essentials</h4> <p visual="text-size:small">5-Day Comprehensive Course</p> </div> <div layout="grow" space="h:vast-9x"></div> <div> <div layout="grid tw-xl:grid-cols:2" space="m-b:medium g:small"> <a href="#" type="button" layout="flex items:center justify:center" space="min-h:big p-x:medium-3x p-y:small" visual="rounded:medium bg:white text-size:large font:tw-semibold text:blue-600 hover:opacity:80">View Syllabus</a> <a href="#" type="button" layout="flex items:center justify:center" space="min-h:big p-x:medium-3x p-y:small" visual="rounded:medium bg:blue-600 text-size:large font:tw-semibold text:white hover:opacity:80">Enroll Now</a> </div> <p space="p-t:medium" visual="border-t-w:regular border:white text:center text-size:mini" class="border-opacity-50">Real-World Applications</p> </div> </div> <div layout="flex col" space="p:medium" visual="rounded:medium bg:gray-200" style="background: url('https://placehold.co/400x600'); background-size: cover;"> <div visual="text:center"> <h4 space="m-b:tiny" visual="text-size:big font:tw-semibold">Social Media Strategy</h4> <p visual="text-size:small">4-Day Interactive Workshop</p> </div> <div layout="grow" space="h:vast-9x"></div> <div> <div layout="grid tw-xl:grid-cols:2" space="m-b:medium g:small"> <a href="#" type="button" layout="flex items:center justify:center" space="min-h:big p-x:medium-3x p-y:small" visual="rounded:medium bg:white text-size:large font:tw-semibold text:blue-600 hover:opacity:80">View Syllabus</a> <a href="#" type="button" layout="flex items:center justify:center" space="min-h:big p-x:medium-3x p-y:small" visual="rounded:medium bg:blue-600 text-size:large font:tw-semibold text:white hover:opacity:80">Enroll Now</a> </div> <p space="p-t:medium" visual="border-t-w:regular border:white text:center text-size:mini" class="border-opacity-50">Expert-Led Training</p> </div> </div> </div> </section> COPY ```

Expand Your Skill Set

Mastering Digital Advertising

3-Day Intensive Bootcamp

View Syllabus Enroll Now

Hands-On Learning

Data Analytics Essentials

5-Day Comprehensive Course

View Syllabus Enroll Now

Real-World Applications

Social Media Strategy

4-Day Interactive Workshop

View Syllabus Enroll Now

Expert-Led Training

``` #### [\#](https://senangstart.com/sections/benefits-1/llms.txt)Custom Section Benefits showcase Illustrates the benefits of versatile, customizable website sections, often with visual examples and a call-to-action. TailwindCSS SenangStart CSS Sections Compliment Your Designs with Customizable Sections ---------------------------------------------------- ###### From hero sections to testimonials, SenangStart has the perfect section for your website. ![](https://placehold.co/600x400/2563EB/FFFFFF) ##### Hero Sections ###### Hero sections with background images, text, and buttons ![](https://placehold.co/600x400/) ##### Contents ###### Sections for displaying content, including text and images ![](https://placehold.co/600x400/) [See All Sections](https://senangstart.com/sections) <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="text-center"> <div class="headline mx-auto mb-8 max-w-full lg:max-w-3xl"> <div class="mx-auto mb-2 w-min rounded-lg bg-blue-600 px-2 py-1 lg:mb-4" > <p class="text-sm font-bold uppercase text-white">Sections</p> </div> <h2 class="mb-4 text-3xl font-bold capitalize lg:text-6xl"> Compliment Your Designs with Customizable Sections </h2> <h6 class="text-base lg:text-lg"> From hero sections to testimonials, SenangStart has the perfect section for your website. </h6> </div> <div class="mb-8 grid grid-cols-1 gap-4 lg:mb-16 lg:grid-cols-2"> <div class="aspect-square overflow-hidden rounded-xl bg-gradient-to-br from-blue-300 to-blue-600 lg:col-span-2 lg:aspect-video" > <img class="scale-120 h-full w-full object-cover object-center" src="https://placehold.co/600x400/2563EB/FFFFFF" alt="" /> </div> <div class="flex flex-col justify-between rounded-xl bg-neutral-200 px-4 pt-4" > <div> <h5 class="mb-4 text-lg font-bold lg:text-xl">Hero Sections</h5> <h6 class="text-base lg:text-lg"> Hero sections with background images, text, and buttons </h6> </div> <div class="p-8 lg:p-16"> <img class="w-full" src="https://placehold.co/600x400/" alt="" /> </div> </div> <div class="flex flex-col justify-between rounded-xl bg-neutral-200 px-4 pt-4" > <div> <h5 class="mb-4 text-lg font-bold lg:text-xl">Contents</h5> <h6 class="text-base lg:text-lg"> Sections for displaying content, including text and images </h6> </div> <div class="p-8 lg:p-16"> <img class="w-full" src="https://placehold.co/600x400/" alt="" /> </div> </div> </div> <div class="flex justify-center"> <a href="https://senangstart.com/sections" class="flex items-center gap-2 pr-1 text-xl font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80" >See All Sections<i class="fas fa-arrow-right"></i ></a> </div> </div> </section> COPY ```

Sections

Compliment Your Designs with Customizable Sections

From hero sections to testimonials, SenangStart has the perfect section for your website.
Hero Sections
Hero sections with background images, text, and buttons
Contents
Sections for displaying content, including text and images
See All Sections
``` Sections Compliment Your Designs with Customizable Sections ---------------------------------------------------- ###### From hero sections to testimonials, SenangStart has the perfect section for your website. ![](https://placehold.co/600x400/2563EB/FFFFFF) ##### Hero Sections ###### Hero sections with background images, text, and buttons ![](https://placehold.co/600x400/) ##### Contents ###### Sections for displaying content, including text and images ![](https://placehold.co/600x400/) [See All Sections](https://senangstart.com/sections) <section 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 visual="text:center"> <div space="m-x:auto m-b:large max-w:\[100%\] tw-lg:max-w:\[3xl\]" class="headline"> <div space="m-x:auto m-b:small w:\[min-content\] p-x:small p-y:tiny tw-lg:m-b:medium" visual="rounded:medium bg:blue-600" > <p visual="text-size:small font:tw-bold uppercase text:white">Sections</p> </div> <h2 space="m-b:medium" visual="text-size:grand font:tw-bold capitalize tw-lg:text-size:mega"> Compliment Your Designs with Customizable Sections </h2> <h6 visual="text-size:base tw-lg:text-size:large"> From hero sections to testimonials, SenangStart has the perfect section for your website. </h6> </div> <div layout="grid grid-cols:1 tw-lg:grid-cols:2" space="m-b:large g:medium tw-lg:m-b:big-3x"> <div layout="overflow:hidden tw-lg:col-span:2" visual="rounded:medium bg-image:gradient-to-br from:blue-300 to:blue-600" class="aspect-square lg:aspect-video" > <img layout="object:cover" space="h:\[100%\] w:\[100%\]" class="scale-120 object-center" src="https://placehold.co/600x400/2563EB/FFFFFF" alt="" /> </div> <div layout="flex col justify:between" space="p-x:medium p-t:medium" visual="rounded:medium bg:neutral-200" > <div> <h5 space="m-b:medium" visual="text-size:large font:tw-bold tw-lg:text-size:big">Hero Sections</h5> <h6 visual="text-size:base tw-lg:text-size:large"> Hero sections with background images, text, and buttons </h6> </div> <div space="p:large tw-lg:p:big-3x"> <img space="w:\[100%\]" src="https://placehold.co/600x400/" alt="" /> </div> </div> <div layout="flex col justify:between" space="p-x:medium p-t:medium" visual="rounded:medium bg:neutral-200" > <div> <h5 space="m-b:medium" visual="text-size:large font:tw-bold tw-lg:text-size:big">Contents</h5> <h6 visual="text-size:base tw-lg:text-size:large"> Sections for displaying content, including text and images </h6> </div> <div space="p:large tw-lg:p:big-3x"> <img space="w:\[100%\]" src="https://placehold.co/600x400/" alt="" /> </div> </div> </div> <div layout="flex justify:center"> <a href="https://senangstart.com/sections" layout="flex items:center" space="g:small p-r:tiny hover:g:small-3x hover:p-r:none" visual="text-size:big font:tw-semibold text:blue-600 hover:opacity:80" >See All Sections<i class="fas fa-arrow-right"></i ></a> </div> </div> </section> COPY ```

Sections

Compliment Your Designs with Customizable Sections

From hero sections to testimonials, SenangStart has the perfect section for your website.
Hero Sections
Hero sections with background images, text, and buttons
Contents
Sections for displaying content, including text and images
See All Sections
``` #### [\#](https://senangstart.com/sections/products-3/llms.txt)Dual Product Cards showcase Features two products side-by-side in card format, each with an image, description, and call-to-action. TailwindCSS SenangStart CSS Brand Product that we proud of ======================== Here’s what we have to complete our ecosystem ![](https://placehold.co/600x600)SenangStart =========== A website rebranding + Corporate photography to bring you the best Product Price Learn more ![](https://placehold.co/600x600)Product Name ============ Content can be used to explain the glimpse idea or to catch in seconds viewer eye Product Price Learn more <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="mb-4 grid grid-cols-1 lg:mx-24 lg:mb-8"> <div class="col-span-1"> <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Brand</div> </div> <div> <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Product that we proud of</h1> </div> <div class="flex items-center"> <p class="w-full text-left text-base font-semibold lg:text-2xl">Here’s what we have to complete our ecosystem</p> </div> </div> <div class="grid grid-cols-1 gap-4 lg:grid-cols-2"> <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%"> <img src="https://placehold.co/600x600" class="absolute top-0 w-full" /> <div class="absolute bottom-0 left-0 w-full p-4 lg:p-8"> <h1 class="mb-2 text-2xl font-bold lg:text-5xl">SenangStart</h1> <p class="mb-2 lg:text-lg">A website rebranding + Corporate photography to bring you the best</p> <p class="mb-4 text-sm lg:text-base">Product Price</p> <a href="" class="flex h-8 max-w-max items-center justify-center rounded-lg bg-blue-600 px-4 text-sm text-white lg:h-12 lg:px-6 lg:text-base"> Learn more </a> </div> </div> <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%"> <img src="https://placehold.co/600x600" class="absolute top-0 w-full" /> <div class="absolute bottom-0 left-0 w-full p-4 lg:p-8"> <h1 class="mb-2 text-2xl font-bold lg:text-5xl">Product Name</h1> <p class="mb-2 lg:text-lg">Content can be used to explain the glimpse idea or to catch in seconds viewer eye</p> <p class="mb-4 text-sm lg:text-base">Product Price</p> <a href="" class="flex h-8 max-w-max items-center justify-center rounded-lg bg-blue-600 px-4 text-sm text-white lg:h-12 lg:px-6 lg:text-base"> Learn more </a> </div> </div> </div> </section> COPY ```
Brand

Product that we proud of

Here’s what we have to complete our ecosystem

SenangStart

A website rebranding + Corporate photography to bring you the best

Product Price

Learn more

Product Name

Content can be used to explain the glimpse idea or to catch in seconds viewer eye

Product Price

Learn more
``` Brand Product that we proud of ======================== Here’s what we have to complete our ecosystem ![](https://placehold.co/600x600)SenangStart =========== A website rebranding + Corporate photography to bring you the best Product Price Learn more ![](https://placehold.co/600x600)Product Name ============ Content can be used to explain the glimpse idea or to catch in seconds viewer eye Product Price Learn more <section 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 layout="grid grid-cols:1" space="m-b:medium tw-lg:m-x:giant tw-lg:m-b:large"> <div layout="col-span:1"> <div space="m-b:small max-w:\[max-content\] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:blue-600 font:tw-bold text:blue-600">Brand</div> </div> <div> <h1 space="m-b:small tw-lg:m-b:medium" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">Product that we proud of</h1> </div> <div layout="flex items:center"> <p space="w:\[100%\]" visual="text:left text-size:base font:tw-semibold tw-lg:text-size:huge">Here’s what we have to complete our ecosystem</p> </div> </div> <div layout="grid grid-cols:1 tw-lg:grid-cols:2" space="g:medium"> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 100%"> <img src="https://placehold.co/600x600" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute bottom:none left:none" space="w:\[100%\] p:medium tw-lg:p:large"> <h1 space="m-b:small" visual="text-size:huge font:tw-bold tw-lg:text-size:mount">SenangStart</h1> <p space="m-b:small" visual="tw-lg:text-size:large">A website rebranding + Corporate photography to bring you the best</p> <p space="m-b:medium" visual="text-size:small tw-lg:text-size:base">Product Price</p> <a href="" layout="flex items:center justify:center" space="h:large max-w:\[max-content\] p-x:medium tw-lg:h:big tw-lg:p-x:medium-3x" visual="rounded:medium bg:blue-600 text-size:small text:white tw-lg:text-size:base"> Learn more </a> </div> </div> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 100%"> <img src="https://placehold.co/600x600" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute bottom:none left:none" space="w:\[100%\] p:medium tw-lg:p:large"> <h1 space="m-b:small" visual="text-size:huge font:tw-bold tw-lg:text-size:mount">Product Name</h1> <p space="m-b:small" visual="tw-lg:text-size:large">Content can be used to explain the glimpse idea or to catch in seconds viewer eye</p> <p space="m-b:medium" visual="text-size:small tw-lg:text-size:base">Product Price</p> <a href="" layout="flex items:center justify:center" space="h:large max-w:\[max-content\] p-x:medium tw-lg:h:big tw-lg:p-x:medium-3x" visual="rounded:medium bg:blue-600 text-size:small text:white tw-lg:text-size:base"> Learn more </a> </div> </div> </div> </section> COPY ```
Brand

Product that we proud of

Here’s what we have to complete our ecosystem

SenangStart

A website rebranding + Corporate photography to bring you the best

Product Price

Learn more

Product Name

Content can be used to explain the glimpse idea or to catch in seconds viewer eye

Product Price

Learn more
``` #### [\#](https://senangstart.com/sections/products-4/llms.txt)Filterable Portfolio showcase Presents a dynamic portfolio where users can filter projects by category, with details for each item. TailwindCSS SenangStart CSS PORTFOLIO Featured Work ------------- Browse through our collection of successful projects and creative solutions. All Projects Web Development Mobile Apps UI/UX Design Web Development ### E-commerce Platform A complete online shopping solution with advanced features and seamless user experience. React Node.js MongoDB ![E-commerce Platform](https://placehold.co/800x600) ![Mobile App](https://placehold.co/800x600) Mobile Development ### Fitness Tracking App A comprehensive fitness tracking application with real-time monitoring and personalized insights. React Native Firebase GraphQL UI/UX Design ### Financial Dashboard An intuitive dashboard design for monitoring and analyzing financial data with advanced visualization. Figma Adobe XD Prototyping ![Dashboard Design](https://placehold.co/800x600) <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16" x-data="{ activeCategory: 'all' }" > <div class="mb-8 grid grid-cols-1 lg:grid-cols-2"> <div> <div class="mb-2 max-w-max rounded-lg bg-blue-100 px-3 py-1 text-blue-600" > <p class="text-sm font-bold">PORTFOLIO</p> </div> <h2 class="mb-4 text-3xl font-bold lg:text-5xl">Featured Work</h2> </div> <div class="flex items-center"> <p class="text-lg lg:text-xl"> Browse through our collection of successful projects and creative solutions. </p> </div> </div> <!-- Category Filters --> <div class="mb-8 flex flex-wrap gap-4"> <button @click="activeCategory = 'all'" class="rounded-lg px-4 py-2 text-sm font-semibold transition-colors" :class="activeCategory === 'all' ? 'bg-blue-600 text-white' : 'bg-neutral-100 hover:bg-neutral-200'" > All Projects </button> <button @click="activeCategory = 'web'" class="rounded-lg px-4 py-2 text-sm font-semibold transition-colors" :class="activeCategory === 'web' ? 'bg-blue-600 text-white' : 'bg-neutral-100 hover:bg-neutral-200'" > Web Development </button> <button @click="activeCategory = 'mobile'" class="rounded-lg px-4 py-2 text-sm font-semibold transition-colors" :class="activeCategory === 'mobile' ? 'bg-blue-600 text-white' : 'bg-neutral-100 hover:bg-neutral-200'" > Mobile Apps </button> <button @click="activeCategory = 'design'" class="rounded-lg px-4 py-2 text-sm font-semibold transition-colors" :class="activeCategory === 'design' ? 'bg-blue-600 text-white' : 'bg-neutral-100 hover:bg-neutral-200'" > UI/UX Design </button> </div> <!-- Gallery Grid --> <div class="grid gap-8"> <!-- Project Card 1 --> <div x-show="activeCategory === 'all' || activeCategory === 'web'" class="group grid overflow-hidden rounded-2xl bg-neutral-100 lg:grid-cols-2" > <div class="order-2 flex flex-col justify-center p-8 lg:order-1"> <div class="mb-2 text-sm font-semibold text-blue-600"> Web Development </div> <h3 class="mb-4 text-2xl font-bold">E-commerce Platform</h3> <p class="mb-6 text-lg"> A complete online shopping solution with advanced features and seamless user experience. </p> <div class="flex flex-wrap gap-2"> <span class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-600" >React</span > <span class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-600" >Node.js</span > <span class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-600" >MongoDB</span > </div> </div> <div class="order-1 overflow-hidden lg:order-2"> <img src="https://placehold.co/800x600" alt="E-commerce Platform" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-110" /> </div> </div> <!-- Project Card 2 --> <div x-show="activeCategory === 'all' || activeCategory === 'mobile'" class="group grid overflow-hidden rounded-2xl bg-neutral-100 lg:grid-cols-2" > <div class="overflow-hidden"> <img src="https://placehold.co/800x600" alt="Mobile App" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-110" /> </div> <div class="flex flex-col justify-center p-8"> <div class="mb-2 text-sm font-semibold text-blue-600"> Mobile Development </div> <h3 class="mb-4 text-2xl font-bold">Fitness Tracking App</h3> <p class="mb-6 text-lg"> A comprehensive fitness tracking application with real-time monitoring and personalized insights. </p> <div class="flex flex-wrap gap-2"> <span class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-600" >React Native</span > <span class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-600" >Firebase</span > <span class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-600" >GraphQL</span > </div> </div> </div> <!-- Project Card 3 --> <div x-show="activeCategory === 'all' || activeCategory === 'design'" class="group grid overflow-hidden rounded-2xl bg-neutral-100 lg:grid-cols-2" > <div class="order-2 flex flex-col justify-center p-8 lg:order-1"> <div class="mb-2 text-sm font-semibold text-blue-600"> UI/UX Design </div> <h3 class="mb-4 text-2xl font-bold">Financial Dashboard</h3> <p class="mb-6 text-lg"> An intuitive dashboard design for monitoring and analyzing financial data with advanced visualization. </p> <div class="flex flex-wrap gap-2"> <span class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-600" >Figma</span > <span class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-600" >Adobe XD</span > <span class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-600" >Prototyping</span > </div> </div> <div class="order-1 overflow-hidden lg:order-2"> <img src="https://placehold.co/800x600" alt="Dashboard Design" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-110" /> </div> </div> </div> </section> COPY ```

PORTFOLIO

Featured Work

Browse through our collection of successful projects and creative solutions.

Web Development

E-commerce Platform

A complete online shopping solution with advanced features and seamless user experience.

React Node.js MongoDB
E-commerce Platform
Mobile App
Mobile Development

Fitness Tracking App

A comprehensive fitness tracking application with real-time monitoring and personalized insights.

React Native Firebase GraphQL
UI/UX Design

Financial Dashboard

An intuitive dashboard design for monitoring and analyzing financial data with advanced visualization.

Figma Adobe XD Prototyping
Dashboard Design
``` PORTFOLIO Featured Work ------------- Browse through our collection of successful projects and creative solutions. All Projects Web Development Mobile Apps UI/UX Design Web Development ### E-commerce Platform A complete online shopping solution with advanced features and seamless user experience. React Node.js MongoDB ![E-commerce Platform](https://placehold.co/800x600) ![Mobile App](https://placehold.co/800x600) Mobile Development ### Fitness Tracking App A comprehensive fitness tracking application with real-time monitoring and personalized insights. React Native Firebase GraphQL UI/UX Design ### Financial Dashboard An intuitive dashboard design for monitoring and analyzing financial data with advanced visualization. Figma Adobe XD Prototyping ![Dashboard Design](https://placehold.co/800x600) <section 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" x-data="{ activeCategory: 'all' }" > <div layout="grid grid-cols:1 tw-lg:grid-cols:2" space="m-b:large"> <div> <div space="m-b:small max-w:\[max-content\] p-x:small-3x p-y:tiny" visual="rounded:medium bg:blue-100 text:blue-600" > <p visual="text-size:small font:tw-bold">PORTFOLIO</p> </div> <h2 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mount">Featured Work</h2> </div> <div layout="flex items:center"> <p visual="text-size:large tw-lg:text-size:big"> Browse through our collection of successful projects and creative solutions. </p> </div> </div> <!-- Category Filters --> <div layout="flex wrap" space="m-b:large g:medium"> <button @click="activeCategory = 'all'" space="p-x:medium p-y:small" visual="rounded:medium text-size:small font:tw-semibold transition:colors" :class="activeCategory === 'all' ? 'bg-blue-600 text-white' : 'bg-neutral-100 hover:bg-neutral-200'" > All Projects </button> <button @click="activeCategory = 'web'" space="p-x:medium p-y:small" visual="rounded:medium text-size:small font:tw-semibold transition:colors" :class="activeCategory === 'web' ? 'bg-blue-600 text-white' : 'bg-neutral-100 hover:bg-neutral-200'" > Web Development </button> <button @click="activeCategory = 'mobile'" space="p-x:medium p-y:small" visual="rounded:medium text-size:small font:tw-semibold transition:colors" :class="activeCategory === 'mobile' ? 'bg-blue-600 text-white' : 'bg-neutral-100 hover:bg-neutral-200'" > Mobile Apps </button> <button @click="activeCategory = 'design'" space="p-x:medium p-y:small" visual="rounded:medium text-size:small font:tw-semibold transition:colors" :class="activeCategory === 'design' ? 'bg-blue-600 text-white' : 'bg-neutral-100 hover:bg-neutral-200'" > UI/UX Design </button> </div> <!-- Gallery Grid --> <div layout="grid" space="g:large"> <!-- Project Card 1 --> <div x-show="activeCategory === 'all' || activeCategory === 'web'" layout="grid overflow:hidden tw-lg:grid-cols:2" visual="rounded:big bg:neutral-100" class="group" > <div layout="order:2 flex col justify:center tw-lg:order:1" space="p:large"> <div space="m-b:small" visual="text-size:small font:tw-semibold text:blue-600"> Web Development </div> <h3 space="m-b:medium" visual="text-size:huge font:tw-bold">E-commerce Platform</h3> <p space="m-b:medium-3x" visual="text-size:large"> A complete online shopping solution with advanced features and seamless user experience. </p> <div layout="flex wrap" space="g:small"> <span space="p-x:small-3x p-y:tiny" visual="rounded:round bg:blue-100 text-size:small text:blue-600" >React</span > <span space="p-x:small-3x p-y:tiny" visual="rounded:round bg:blue-100 text-size:small text:blue-600" >Node.js</span > <span space="p-x:small-3x p-y:tiny" visual="rounded:round bg:blue-100 text-size:small text:blue-600" >MongoDB</span > </div> </div> <div layout="order:1 overflow:hidden tw-lg:order:2"> <img src="https://placehold.co/800x600" alt="E-commerce Platform" layout="object:cover" space="h:\[100%\] w:\[100%\]" visual="transition:transform duration:slow" class="group-hover:scale-110" /> </div> </div> <!-- Project Card 2 --> <div x-show="activeCategory === 'all' || activeCategory === 'mobile'" layout="grid overflow:hidden tw-lg:grid-cols:2" visual="rounded:big bg:neutral-100" class="group" > <div layout="overflow:hidden"> <img src="https://placehold.co/800x600" alt="Mobile App" layout="object:cover" space="h:\[100%\] w:\[100%\]" visual="transition:transform duration:slow" class="group-hover:scale-110" /> </div> <div layout="flex col justify:center" space="p:large"> <div space="m-b:small" visual="text-size:small font:tw-semibold text:blue-600"> Mobile Development </div> <h3 space="m-b:medium" visual="text-size:huge font:tw-bold">Fitness Tracking App</h3> <p space="m-b:medium-3x" visual="text-size:large"> A comprehensive fitness tracking application with real-time monitoring and personalized insights. </p> <div layout="flex wrap" space="g:small"> <span space="p-x:small-3x p-y:tiny" visual="rounded:round bg:blue-100 text-size:small text:blue-600" >React Native</span > <span space="p-x:small-3x p-y:tiny" visual="rounded:round bg:blue-100 text-size:small text:blue-600" >Firebase</span > <span space="p-x:small-3x p-y:tiny" visual="rounded:round bg:blue-100 text-size:small text:blue-600" >GraphQL</span > </div> </div> </div> <!-- Project Card 3 --> <div x-show="activeCategory === 'all' || activeCategory === 'design'" layout="grid overflow:hidden tw-lg:grid-cols:2" visual="rounded:big bg:neutral-100" class="group" > <div layout="order:2 flex col justify:center tw-lg:order:1" space="p:large"> <div space="m-b:small" visual="text-size:small font:tw-semibold text:blue-600"> UI/UX Design </div> <h3 space="m-b:medium" visual="text-size:huge font:tw-bold">Financial Dashboard</h3> <p space="m-b:medium-3x" visual="text-size:large"> An intuitive dashboard design for monitoring and analyzing financial data with advanced visualization. </p> <div layout="flex wrap" space="g:small"> <span space="p-x:small-3x p-y:tiny" visual="rounded:round bg:blue-100 text-size:small text:blue-600" >Figma</span > <span space="p-x:small-3x p-y:tiny" visual="rounded:round bg:blue-100 text-size:small text:blue-600" >Adobe XD</span > <span space="p-x:small-3x p-y:tiny" visual="rounded:round bg:blue-100 text-size:small text:blue-600" >Prototyping</span > </div> </div> <div layout="order:1 overflow:hidden tw-lg:order:2"> <img src="https://placehold.co/800x600" alt="Dashboard Design" layout="object:cover" space="h:\[100%\] w:\[100%\]" visual="transition:transform duration:slow" class="group-hover:scale-110" /> </div> </div> </div> </section> COPY ```

PORTFOLIO

Featured Work

Browse through our collection of successful projects and creative solutions.

Web Development

E-commerce Platform

A complete online shopping solution with advanced features and seamless user experience.

React Node.js MongoDB
E-commerce Platform
Mobile App
Mobile Development

Fitness Tracking App

A comprehensive fitness tracking application with real-time monitoring and personalized insights.

React Native Firebase GraphQL
UI/UX Design

Financial Dashboard

An intuitive dashboard design for monitoring and analyzing financial data with advanced visualization.

Figma Adobe XD Prototyping
Dashboard Design
``` #### [\#](https://senangstart.com/sections/offer-1/llms.txt)Offer Image Grid showcase Displays multiple offers or services in a grid of images, each with a concise descriptive overlay. TailwindCSS SenangStart CSS Offer What we offer ============= Our latest updates and what is happening in the organisation ![](https://placehold.co/400x400)Card description. Flexible components. ![](https://placehold.co/400x400)Card description. Flexible components. ![](https://placehold.co/400x400)Card description. Flexible components. <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="mb-4 grid grid-cols-1 lg:mb-8 lg:grid-cols-2"> <div class="col-span-1 lg:col-span-2"> <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Offer</div> </div> <div> <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-0 lg:text-6xl">What we offer</h1> </div> <div class="flex items-center"> <p class="w-full text-left text-base font-semibold lg:text-right lg:text-2xl">Our latest updates and what is happening in the organisation</p> </div> </div> <div class="grid grid-cols-1 gap-4 lg:grid-cols-3"> <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%"> <img src="https://placehold.co/400x400" class="absolute top-0 w-full" /> <div class="absolute bottom-0 left-0 w-full p-4"> <p class="text-base font-semibold lg:text-2xl">Card description. Flexible components.</p> </div> </div> <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%"> <img src="https://placehold.co/400x400" class="absolute top-0 w-full" /> <div class="absolute bottom-0 left-0 w-full p-4"> <p class="text-base font-semibold lg:text-2xl">Card description. Flexible components.</p> </div> </div> <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%"> <img src="https://placehold.co/400x400" class="absolute top-0 w-full" /> <div class="absolute bottom-0 left-0 w-full p-4"> <p class="text-base font-semibold lg:text-2xl">Card description. Flexible components.</p> </div> </div> </div> </section> COPY ```
Offer

What we offer

Our latest updates and what is happening in the organisation

Card description. Flexible components.

Card description. Flexible components.

Card description. Flexible components.

``` Offer What we offer ============= Our latest updates and what is happening in the organisation ![](https://placehold.co/400x400)Card description. Flexible components. ![](https://placehold.co/400x400)Card description. Flexible components. ![](https://placehold.co/400x400)Card description. Flexible components. <section 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 layout="grid grid-cols:1 tw-lg:grid-cols:2" space="m-b:medium tw-lg:m-b:large"> <div layout="col-span:1 tw-lg:col-span:2"> <div space="m-b:small max-w:\[max-content\] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:blue-600 font:tw-bold text:blue-600">Offer</div> </div> <div> <h1 space="m-b:small tw-lg:m-b:none" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">What we offer</h1> </div> <div layout="flex items:center"> <p space="w:\[100%\]" visual="text:left text-size:base font:tw-semibold tw-lg:text:right tw-lg:text-size:huge">Our latest updates and what is happening in the organisation</p> </div> </div> <div layout="grid grid-cols:1 tw-lg:grid-cols:3" space="g:medium"> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 100%"> <img src="https://placehold.co/400x400" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute bottom:none left:none" space="w:\[100%\] p:medium"> <p visual="text-size:base font:tw-semibold tw-lg:text-size:huge">Card description. Flexible components.</p> </div> </div> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 100%"> <img src="https://placehold.co/400x400" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute bottom:none left:none" space="w:\[100%\] p:medium"> <p visual="text-size:base font:tw-semibold tw-lg:text-size:huge">Card description. Flexible components.</p> </div> </div> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 100%"> <img src="https://placehold.co/400x400" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute bottom:none left:none" space="w:\[100%\] p:medium"> <p visual="text-size:base font:tw-semibold tw-lg:text-size:huge">Card description. Flexible components.</p> </div> </div> </div> </section> COPY ```
Offer

What we offer

Our latest updates and what is happening in the organisation

Card description. Flexible components.

Card description. Flexible components.

Card description. Flexible components.

``` #### [\#](https://senangstart.com/sections/partners-clients/llms.txt)Partners & Clients showcase Displays a collection of partner and client logos to showcase collaborations and build trust. TailwindCSS SenangStart CSS Partners & Clients ![](https://placehold.co/260x80) ![](https://placehold.co/260x80) ![](https://placehold.co/260x80) ![](https://placehold.co/260x80) ![](https://placehold.co/260x80) ![](https://placehold.co/260x80) <section id="if6xg" class="container mx-auto my-4 px-6 lg:my-8 lg:px-16"> <div class="mb-4 flex items-center lg:mb-8" id="ihxr9"> <div class="flex-grow border-2 border-t border-blue-200"></div> <div class="px-4 text-2xl font-bold lg:text-4xl"> <p id="ibn3j">Partners &amp; Clients</p> </div> <div class="flex-grow border-2 border-t border-blue-200"></div> </div> <div id="i5xkv" class="grid grid-cols-2 gap-8 lg:grid-cols-6 lg:gap-4"> <div class="flex h-16 items-center justify-center rounded"><img src="https://placehold.co/260x80" class="h-16 w-full object-contain grayscale" /></div> <div class="flex h-16 items-center justify-center rounded"><img src="https://placehold.co/260x80" class="h-16 w-full object-contain grayscale" /></div> <div class="flex h-16 items-center justify-center rounded"><img src="https://placehold.co/260x80" class="h-16 w-full object-contain grayscale" /></div> <div class="flex h-16 items-center justify-center rounded"><img src="https://placehold.co/260x80" class="h-16 w-full object-contain grayscale" /></div> <div class="flex h-16 items-center justify-center rounded"><img src="https://placehold.co/260x80" class="h-16 w-full object-contain grayscale" /></div> <div class="flex h-16 items-center justify-center rounded"><img src="https://placehold.co/260x80" class="h-16 w-full object-contain grayscale" /></div> </div> </section> COPY ```

Partners & Clients

``` Partners & Clients ![](https://placehold.co/260x80) ![](https://placehold.co/260x80) ![](https://placehold.co/260x80) ![](https://placehold.co/260x80) ![](https://placehold.co/260x80) ![](https://placehold.co/260x80) <section id="if6xg" layout="container" space="m-x:auto m-y:medium p-x:medium-3x tw-lg:m-y:large tw-lg:p-x:big-3x"> <div layout="flex items:center" space="m-b:medium tw-lg:m-b:large" id="ihxr9"> <div layout="grow" visual="border-w:regular border:blue-200" class="border-t"></div> <div space="p-x:medium" visual="text-size:huge font:tw-bold tw-lg:text-size:giant"> <p id="ibn3j">Partners &amp; Clients</p> </div> <div layout="grow" visual="border-w:regular border:blue-200" class="border-t"></div> </div> <div id="i5xkv" layout="grid grid-cols:2 tw-lg:grid-cols:6" space="g:large tw-lg:g:medium"> <div layout="flex items:center justify:center" space="h:big-3x" visual="rounded:small"><img src="https://placehold.co/260x80" layout="object:contain" space="h:big-3x w:\[100%\]" class="grayscale" /></div> <div layout="flex items:center justify:center" space="h:big-3x" visual="rounded:small"><img src="https://placehold.co/260x80" layout="object:contain" space="h:big-3x w:\[100%\]" class="grayscale" /></div> <div layout="flex items:center justify:center" space="h:big-3x" visual="rounded:small"><img src="https://placehold.co/260x80" layout="object:contain" space="h:big-3x w:\[100%\]" class="grayscale" /></div> <div layout="flex items:center justify:center" space="h:big-3x" visual="rounded:small"><img src="https://placehold.co/260x80" layout="object:contain" space="h:big-3x w:\[100%\]" class="grayscale" /></div> <div layout="flex items:center justify:center" space="h:big-3x" visual="rounded:small"><img src="https://placehold.co/260x80" layout="object:contain" space="h:big-3x w:\[100%\]" class="grayscale" /></div> <div layout="flex items:center justify:center" space="h:big-3x" visual="rounded:small"><img src="https://placehold.co/260x80" layout="object:contain" space="h:big-3x w:\[100%\]" class="grayscale" /></div> </div> </section> COPY ```

Partners & Clients

``` #### [\#](https://senangstart.com/sections/products-1/llms.txt)Portfolio Reveal Grid showcase Showcases portfolio projects in a grid where images interact on hover, accompanied by descriptions and links. TailwindCSS SenangStart CSS Our Previous Work - Proof of Our Expertise ========================================== Explore our diverse range of software development projects that showcase our team's capabilities. From simple web applications to complex enterprise solutions, we've got you covered. Kad Kahwin Digital Revolusi Kad Kahwin - E-card wedding invitation revolution with Chat AI feature [Learn More](https://hub.kadkahwindigital.my/) ![](https://placehold.co/600x600/2563EB/FFFFFF) SenangWebs Effortless Web Design, Your Way! Drag and drop static page website builder [Learn More](https://use.senangwebs.com) ![](https://placehold.co/600x600/2563EB/FFFFFF) QHeat Advanced heat transfer calculator with preset parameter & built in workflow generator [Learn More](https://qheatapp.com/) ![](https://placehold.co/600x600/2563EB/FFFFFF) STEM-AR Dive into the fascinating world of STEM (Science, Technology, Engineering & Mathematic) through the lens of Augmented Reality [Learn More](https://stem-ar.use.senangwebs.com/) ![](https://placehold.co/600x600/2563EB/FFFFFF) <section id="i45ch1" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="mb-4 grid grid-cols-1 lg:mx-24 lg:mb-8"> <div class="col-span-1"></div> <div> <h1 id="iwb62y" class="mb-2 text-3xl font-bold capitalize lg:mb-4 lg:text-6xl">Our Previous Work - Proof of Our Expertise</h1> </div> <div class="flex items-center"> <p id="it0vps" class="w-full text-left text-xl opacity-70 lg:text-2xl">Explore our diverse range of software development projects that showcase our team's capabilities. From simple web applications to complex enterprise solutions, we've got you covered.</p> </div> </div> <div class="grid grid-cols-1 gap-y-4 lg:grid-cols-2 lg:gap-4"> <div id="ifim5u" class="group flex flex-col justify-between overflow-hidden rounded-lg border border-gray-300"> <div class="flex h-full flex-col justify-between p-4 text-center lg:p-8"> <div id="ijjb2h"> <div class="mb-2 text-lg font-bold lg:mb-4 lg:text-3xl">Kad Kahwin Digital</div> <div id="ion706" class="mb-4 text-base lg:mb-8 lg:text-lg">Revolusi Kad Kahwin - E-card wedding invitation revolution with Chat AI feature</div> </div> <div id="ib9ess" class="flex justify-center"> <a id="is8dpb" href="https://hub.kadkahwindigital.my/" class="flex items-center gap-2 pr-1 font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80 lg:text-lg">Learn More<i class="fas fa-arrow-right"></i></a> </div> </div> <div><img id="iqz78g" src="https://placehold.co/600x600/2563EB/FFFFFF" class="w-full grayscale transition group-hover:translate-y-4 group-hover:grayscale-0" /></div> </div> <div id="ivbreb" class="group flex flex-col justify-between overflow-hidden rounded-lg border border-gray-300"> <div id="iouupi" class="flex h-full flex-col justify-between p-4 text-center lg:p-8"> <div id="ih3d3p"> <div class="mb-2 text-lg font-bold lg:mb-4 lg:text-3xl">SenangWebs</div> <div id="inyi5b" class="mb-4 text-base lg:mb-8 lg:text-lg">Effortless Web Design, Your Way! Drag and drop static page website builder</div> </div> <div class="flex justify-center"> <a id="iz0gwi" href="https://use.senangwebs.com" class="flex items-center gap-2 pr-1 font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80 lg:text-lg">Learn More<i class="fas fa-arrow-right"></i></a> </div> </div> <div><img id="ie1xqz" src="https://placehold.co/600x600/2563EB/FFFFFF" class="w-full grayscale transition group-hover:translate-y-4 group-hover:grayscale-0" /></div> </div> <div id="ixi16u" class="group flex flex-col justify-between overflow-hidden rounded-lg border border-gray-300"> <div id="iefxe5" class="flex h-full flex-col justify-between p-4 text-center lg:p-8"> <div> <div id="i765y2" class="mb-2 text-lg font-bold lg:mb-4 lg:text-3xl">QHeat</div> <div id="il5zfi" class="mb-4 text-base lg:mb-8 lg:text-lg">Advanced heat transfer calculator with preset parameter &amp; built in workflow generator</div> </div> <div class="flex justify-center"> <a id="ijau8a" href="https://qheatapp.com/" class="flex items-center gap-2 pr-1 font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80 lg:text-lg">Learn More<i class="fas fa-arrow-right"></i></a> </div> </div> <div><img id="ilx3al" src="https://placehold.co/600x600/2563EB/FFFFFF" class="w-full grayscale transition group-hover:translate-y-4 group-hover:grayscale-0" /></div> </div> <div id="icj8d9" class="group flex flex-col justify-between overflow-hidden rounded-lg border border-gray-300"> <div id="iiu3jj" class="flex h-full flex-col justify-between p-4 text-center lg:p-8"> <div> <div id="i6638l" class="mb-2 text-lg font-bold lg:mb-4 lg:text-3xl">STEM-AR</div> <div id="i83aw5" class="mb-4 text-base lg:mb-8 lg:text-lg">Dive into the fascinating world of STEM (Science, Technology, Engineering &amp; Mathematic) through the lens of Augmented Reality<br /></div> </div> <div class="flex justify-center"> <a id="imvnkg" href="https://stem-ar.use.senangwebs.com/" class="flex items-center gap-2 pr-1 font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80 lg:text-lg">Learn More<i class="fas fa-arrow-right"></i></a> </div> </div> <div><img id="i8rdy4" src="https://placehold.co/600x600/2563EB/FFFFFF" class="w-full grayscale transition group-hover:translate-y-4 group-hover:grayscale-0" /></div> </div> </div> </section> COPY ```

Our Previous Work - Proof of Our Expertise

Explore our diverse range of software development projects that showcase our team's capabilities. From simple web applications to complex enterprise solutions, we've got you covered.

Kad Kahwin Digital
Revolusi Kad Kahwin - E-card wedding invitation revolution with Chat AI feature
SenangWebs
Effortless Web Design, Your Way! Drag and drop static page website builder
Learn More
QHeat
Advanced heat transfer calculator with preset parameter & built in workflow generator
Learn More
STEM-AR
Dive into the fascinating world of STEM (Science, Technology, Engineering & Mathematic) through the lens of Augmented Reality
Learn More
``` Our Previous Work - Proof of Our Expertise ========================================== Explore our diverse range of software development projects that showcase our team's capabilities. From simple web applications to complex enterprise solutions, we've got you covered. Kad Kahwin Digital Revolusi Kad Kahwin - E-card wedding invitation revolution with Chat AI feature [Learn More](https://hub.kadkahwindigital.my/) ![](https://placehold.co/600x600/2563EB/FFFFFF) SenangWebs Effortless Web Design, Your Way! Drag and drop static page website builder [Learn More](https://use.senangwebs.com) ![](https://placehold.co/600x600/2563EB/FFFFFF) QHeat Advanced heat transfer calculator with preset parameter & built in workflow generator [Learn More](https://qheatapp.com/) ![](https://placehold.co/600x600/2563EB/FFFFFF) STEM-AR Dive into the fascinating world of STEM (Science, Technology, Engineering & Mathematic) through the lens of Augmented Reality [Learn More](https://stem-ar.use.senangwebs.com/) ![](https://placehold.co/600x600/2563EB/FFFFFF) <section id="i45ch1" 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 layout="grid grid-cols:1" space="m-b:medium tw-lg:m-x:giant tw-lg:m-b:large"> <div layout="col-span:1"></div> <div> <h1 id="iwb62y" space="m-b:small tw-lg:m-b:medium" visual="text-size:grand font:tw-bold capitalize tw-lg:text-size:mega">Our Previous Work - Proof of Our Expertise</h1> </div> <div layout="flex items:center"> <p id="it0vps" space="w:\[100%\]" visual="text:left text-size:big opacity:70 tw-lg:text-size:huge">Explore our diverse range of software development projects that showcase our team's capabilities. From simple web applications to complex enterprise solutions, we've got you covered.</p> </div> </div> <div layout="grid grid-cols:1 tw-lg:grid-cols:2" space="g-y:medium tw-lg:g:medium"> <div id="ifim5u" layout="flex col justify:between overflow:hidden" visual="rounded:medium border-w:thin border:gray-300" class="group"> <div layout="flex col justify:between" space="h:\[100%\] p:medium tw-lg:p:large" visual="text:center"> <div id="ijjb2h"> <div space="m-b:small tw-lg:m-b:medium" visual="text-size:large font:tw-bold tw-lg:text-size:grand">Kad Kahwin Digital</div> <div id="ion706" space="m-b:medium tw-lg:m-b:large" visual="text-size:base tw-lg:text-size:large">Revolusi Kad Kahwin - E-card wedding invitation revolution with Chat AI feature</div> </div> <div id="ib9ess" layout="flex justify:center"> <a id="is8dpb" href="https://hub.kadkahwindigital.my/" layout="flex items:center" space="g:small p-r:tiny hover:g:small-3x hover:p-r:none" visual="font:tw-semibold text:blue-600 hover:opacity:80 tw-lg:text-size:large">Learn More<i class="fas fa-arrow-right"></i></a> </div> </div> <div><img id="iqz78g" src="https://placehold.co/600x600/2563EB/FFFFFF" space="w:\[100%\]" visual="transition:all" class="grayscale group-hover:translate-y-4 group-hover:grayscale-0" /></div> </div> <div id="ivbreb" layout="flex col justify:between overflow:hidden" visual="rounded:medium border-w:thin border:gray-300" class="group"> <div id="iouupi" layout="flex col justify:between" space="h:\[100%\] p:medium tw-lg:p:large" visual="text:center"> <div id="ih3d3p"> <div space="m-b:small tw-lg:m-b:medium" visual="text-size:large font:tw-bold tw-lg:text-size:grand">SenangWebs</div> <div id="inyi5b" space="m-b:medium tw-lg:m-b:large" visual="text-size:base tw-lg:text-size:large">Effortless Web Design, Your Way! Drag and drop static page website builder</div> </div> <div layout="flex justify:center"> <a id="iz0gwi" href="https://use.senangwebs.com" layout="flex items:center" space="g:small p-r:tiny hover:g:small-3x hover:p-r:none" visual="font:tw-semibold text:blue-600 hover:opacity:80 tw-lg:text-size:large">Learn More<i class="fas fa-arrow-right"></i></a> </div> </div> <div><img id="ie1xqz" src="https://placehold.co/600x600/2563EB/FFFFFF" space="w:\[100%\]" visual="transition:all" class="grayscale group-hover:translate-y-4 group-hover:grayscale-0" /></div> </div> <div id="ixi16u" layout="flex col justify:between overflow:hidden" visual="rounded:medium border-w:thin border:gray-300" class="group"> <div id="iefxe5" layout="flex col justify:between" space="h:\[100%\] p:medium tw-lg:p:large" visual="text:center"> <div> <div id="i765y2" space="m-b:small tw-lg:m-b:medium" visual="text-size:large font:tw-bold tw-lg:text-size:grand">QHeat</div> <div id="il5zfi" space="m-b:medium tw-lg:m-b:large" visual="text-size:base tw-lg:text-size:large">Advanced heat transfer calculator with preset parameter &amp; built in workflow generator</div> </div> <div layout="flex justify:center"> <a id="ijau8a" href="https://qheatapp.com/" layout="flex items:center" space="g:small p-r:tiny hover:g:small-3x hover:p-r:none" visual="font:tw-semibold text:blue-600 hover:opacity:80 tw-lg:text-size:large">Learn More<i class="fas fa-arrow-right"></i></a> </div> </div> <div><img id="ilx3al" src="https://placehold.co/600x600/2563EB/FFFFFF" space="w:\[100%\]" visual="transition:all" class="grayscale group-hover:translate-y-4 group-hover:grayscale-0" /></div> </div> <div id="icj8d9" layout="flex col justify:between overflow:hidden" visual="rounded:medium border-w:thin border:gray-300" class="group"> <div id="iiu3jj" layout="flex col justify:between" space="h:\[100%\] p:medium tw-lg:p:large" visual="text:center"> <div> <div id="i6638l" space="m-b:small tw-lg:m-b:medium" visual="text-size:large font:tw-bold tw-lg:text-size:grand">STEM-AR</div> <div id="i83aw5" space="m-b:medium tw-lg:m-b:large" visual="text-size:base tw-lg:text-size:large">Dive into the fascinating world of STEM (Science, Technology, Engineering &amp; Mathematic) through the lens of Augmented Reality<br /></div> </div> <div layout="flex justify:center"> <a id="imvnkg" href="https://stem-ar.use.senangwebs.com/" layout="flex items:center" space="g:small p-r:tiny hover:g:small-3x hover:p-r:none" visual="font:tw-semibold text:blue-600 hover:opacity:80 tw-lg:text-size:large">Learn More<i class="fas fa-arrow-right"></i></a> </div> </div> <div><img id="i8rdy4" src="https://placehold.co/600x600/2563EB/FFFFFF" space="w:\[100%\]" visual="transition:all" class="grayscale group-hover:translate-y-4 group-hover:grayscale-0" /></div> </div> </div> </section> COPY ```

Our Previous Work - Proof of Our Expertise

Explore our diverse range of software development projects that showcase our team's capabilities. From simple web applications to complex enterprise solutions, we've got you covered.

Kad Kahwin Digital
Revolusi Kad Kahwin - E-card wedding invitation revolution with Chat AI feature
SenangWebs
Effortless Web Design, Your Way! Drag and drop static page website builder
Learn More
QHeat
Advanced heat transfer calculator with preset parameter & built in workflow generator
Learn More
STEM-AR
Dive into the fascinating world of STEM (Science, Technology, Engineering & Mathematic) through the lens of Augmented Reality
Learn More
``` #### [\#](https://senangstart.com/sections/quality-1/llms.txt)Quality Asym Images showcase Showcases quality through an asymmetrical layout of text and multiple, varied-sized images for visual interest. TailwindCSS SenangStart CSS ##### Care of High Quality Lorem ipsum dolor sit amet, consectetur adipis elit. Sit enim nec, proin faucibus nibh et sagittis a. Lacinia purus ac amet pellentesque aliquam enim. <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="grid gap-4 lg:grid-cols-3"> <div class="order-2 lg:order-1"> <h5 class="mb-4 text-3xl font-bold lg:text-5xl">Care of High Quality</h5> <p>Lorem ipsum dolor sit amet, consectetur adipis elit. Sit enim nec, proin faucibus nibh et sagittis a. Lacinia purus ac amet pellentesque aliquam enim.</p> </div> <div class="order-1 lg:order-2"> <div class="rounded-lg bg-gray-100" style=" padding-top: calc(150% + 1rem); background-image: url('https://placehold.co/400x600/2563EB/FFFFFF'); background-size: cover; background-position: center; " ></div> </div> <div class="order-3"> <div class="grid grid-cols-1 gap-4"> <div class="rounded-lg bg-gray-100" style=" padding-top: 90%; background-image: url('https://placehold.co/400x300/2563EB/FFFFFF'); background-size: cover; background-position: center; " ></div> <div class="rounded-lg bg-gray-100" style=" padding-top: 60%; background-image: url('https://placehold.co/400x200/2563EB/FFFFFF'); background-size: cover; background-position: center; " ></div> </div> </div> </div> </section> COPY ```
Care of High Quality

Lorem ipsum dolor sit amet, consectetur adipis elit. Sit enim nec, proin faucibus nibh et sagittis a. Lacinia purus ac amet pellentesque aliquam enim.

``` ##### Care of High Quality Lorem ipsum dolor sit amet, consectetur adipis elit. Sit enim nec, proin faucibus nibh et sagittis a. Lacinia purus ac amet pellentesque aliquam enim. <section 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 layout="grid tw-lg:grid-cols:3" space="g:medium"> <div layout="order:2 tw-lg:order:1"> <h5 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mount">Care of High Quality</h5> <p>Lorem ipsum dolor sit amet, consectetur adipis elit. Sit enim nec, proin faucibus nibh et sagittis a. Lacinia purus ac amet pellentesque aliquam enim.</p> </div> <div layout="order:1 tw-lg:order:2"> <div visual="rounded:medium bg:gray-100" style=" padding-top: calc(150% + 1rem); background-image: url('https://placehold.co/400x600/2563EB/FFFFFF'); background-size: cover; background-position: center; " ></div> </div> <div layout="order:3"> <div layout="grid grid-cols:1" space="g:medium"> <div visual="rounded:medium bg:gray-100" style=" padding-top: 90%; background-image: url('https://placehold.co/400x300/2563EB/FFFFFF'); background-size: cover; background-position: center; " ></div> <div visual="rounded:medium bg:gray-100" style=" padding-top: 60%; background-image: url('https://placehold.co/400x200/2563EB/FFFFFF'); background-size: cover; background-position: center; " ></div> </div> </div> </div> </section> COPY ```
Care of High Quality

Lorem ipsum dolor sit amet, consectetur adipis elit. Sit enim nec, proin faucibus nibh et sagittis a. Lacinia purus ac amet pellentesque aliquam enim.

``` #### [\#](https://senangstart.com/sections/services-1/llms.txt)Service Icon Grid showcase Presents a range of services in a grid, each represented by an icon, title, and brief description. TailwindCSS SenangStart CSS Software Solutions Tailored for Your Business ============================================= At Bookklik, we believe that every business deserves a software solution that fits their unique needs. Our team of expert developers creates custom solutions to help you streamline processes, boost productivity, and drive growth. #### Virtual Reality (VR) We provide immersive 3D visualization to wow your audience and make a lasting mark for your brands. #### Augmented Reality (AR) We offer unique Augmented Reality solution for myriad applications, including tourism, education, exhibition, and many more. #### Website & Web System Our team use pixels and codes to create beautiful things. We design and develop award-winning portals & websites using the latest technologies. #### Mobile App Development Our app developers build native and hybrid mobile applications on IOS, Android, and Windows, for a variety of mobile devices and tablets. #### Graphic Design We help you find the right pixels combination for your brands or products. #### Training We provide training in web and mobile application development for beginners who are eager to learn. <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="mb-4 grid grid-cols-1 lg:mx-24 lg:mb-8"> <div class="col-span-1"></div> <div> <h1 class="mb-2 text-3xl font-bold capitalize lg:mb-4 lg:text-6xl">Software Solutions Tailored for Your Business</h1> </div> <div class="flex items-center"> <p class="w-full text-left text-xl opacity-80 lg:text-2xl">At Bookklik, we believe that every business deserves a software solution that fits their unique needs. Our team of expert developers creates custom solutions to help you streamline processes, boost productivity, and drive growth.</p> </div> </div> <div class="grid gap-4 lg:grid-cols-3"> <div class="flex flex-col rounded-lg border border-neutral-200 p-4"> <div class="mb-8 flex h-16 w-16 items-center justify-center rounded-md bg-blue-600 text-4xl text-white"> <i class="fas fa-vr-cardboard"></i> </div> <h4 class="mb-2 text-lg font-semibold">Virtual Reality (VR)<br /></h4> <p class="text-lg">We provide immersive 3D visualization to wow your audience and make a lasting mark for your brands.<br /></p> </div> <div class="flex flex-col rounded-lg border border-neutral-200 p-4"> <div class="mb-8 flex h-16 w-16 items-center justify-center rounded-md bg-blue-600 text-4xl text-white"> <i class="fas fa-cube"></i> </div> <h4 class="mb-2 text-lg font-semibold">Augmented Reality (AR)<br /></h4> <p class="text-lg">We offer unique Augmented Reality solution for myriad applications, including tourism, education, exhibition, and many more.<br /></p> </div> <div class="flex flex-col rounded-lg border border-neutral-200 p-4"> <div class="mb-8 flex h-16 w-16 items-center justify-center rounded-md bg-blue-600 text-4xl text-white"> <i class="fas fa-globe"></i> </div> <h4 class="mb-2 text-lg font-semibold">Website &amp; Web System<br /></h4> <p class="text-lg">Our team use pixels and codes to create beautiful things. We design and develop award-winning portals &amp; websites using the latest technologies.<br /></p> </div> <div class="flex flex-col rounded-lg border border-neutral-200 p-4"> <div class="mb-8 flex h-16 w-16 items-center justify-center rounded-md bg-blue-600 text-4xl text-white"> <i class="fas fa-mobile"></i> </div> <h4 class="mb-2 text-lg font-semibold">Mobile App Development<br /></h4> <p class="text-lg">Our app developers build native and hybrid mobile applications on IOS, Android, and Windows, for a variety of mobile devices and tablets.<br /></p> </div> <div class="flex flex-col rounded-lg border border-neutral-200 p-4"> <div class="mb-8 flex h-16 w-16 items-center justify-center rounded-md bg-blue-600 text-4xl text-white"> <i class="fas fa-palette"></i> </div> <h4 class="mb-2 text-lg font-semibold">Graphic Design<br /></h4> <p class="text-lg">We help you find the right pixels combination for your brands or products.<br /></p> </div> <div class="flex flex-col rounded-lg border border-neutral-200 p-4"> <div class="mb-8 flex h-16 w-16 items-center justify-center rounded-md bg-blue-600 text-4xl text-white"> <i class="fas fa-chalkboard-teacher"></i> </div> <h4 class="mb-2 text-lg font-semibold">Training<br /></h4> <p class="text-lg">We provide training in web and mobile application development for beginners who are eager to learn.<br /></p> </div> </div> </section> COPY ```

Software Solutions Tailored for Your Business

At Bookklik, we believe that every business deserves a software solution that fits their unique needs. Our team of expert developers creates custom solutions to help you streamline processes, boost productivity, and drive growth.

Virtual Reality (VR)

We provide immersive 3D visualization to wow your audience and make a lasting mark for your brands.

Augmented Reality (AR)

We offer unique Augmented Reality solution for myriad applications, including tourism, education, exhibition, and many more.

Website & Web System

Our team use pixels and codes to create beautiful things. We design and develop award-winning portals & websites using the latest technologies.

Mobile App Development

Our app developers build native and hybrid mobile applications on IOS, Android, and Windows, for a variety of mobile devices and tablets.

Graphic Design

We help you find the right pixels combination for your brands or products.

Training

We provide training in web and mobile application development for beginners who are eager to learn.

``` Software Solutions Tailored for Your Business ============================================= At Bookklik, we believe that every business deserves a software solution that fits their unique needs. Our team of expert developers creates custom solutions to help you streamline processes, boost productivity, and drive growth. #### Virtual Reality (VR) We provide immersive 3D visualization to wow your audience and make a lasting mark for your brands. #### Augmented Reality (AR) We offer unique Augmented Reality solution for myriad applications, including tourism, education, exhibition, and many more. #### Website & Web System Our team use pixels and codes to create beautiful things. We design and develop award-winning portals & websites using the latest technologies. #### Mobile App Development Our app developers build native and hybrid mobile applications on IOS, Android, and Windows, for a variety of mobile devices and tablets. #### Graphic Design We help you find the right pixels combination for your brands or products. #### Training We provide training in web and mobile application development for beginners who are eager to learn. <section 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 layout="grid grid-cols:1" space="m-b:medium tw-lg:m-x:giant tw-lg:m-b:large"> <div layout="col-span:1"></div> <div> <h1 space="m-b:small tw-lg:m-b:medium" visual="text-size:grand font:tw-bold capitalize tw-lg:text-size:mega">Software Solutions Tailored for Your Business</h1> </div> <div layout="flex items:center"> <p space="w:\[100%\]" visual="text:left text-size:big opacity:80 tw-lg:text-size:huge">At Bookklik, we believe that every business deserves a software solution that fits their unique needs. Our team of expert developers creates custom solutions to help you streamline processes, boost productivity, and drive growth.</p> </div> </div> <div layout="grid tw-lg:grid-cols:3" space="g:medium"> <div layout="flex col" space="p:medium" visual="rounded:medium border-w:thin border:neutral-200"> <div layout="flex items:center justify:center" space="m-b:large h:big-3x w:big-3x" visual="rounded:small bg:blue-600 text-size:giant text:white"> <i class="fas fa-vr-cardboard"></i> </div> <h4 space="m-b:small" visual="text-size:large font:tw-semibold">Virtual Reality (VR)<br /></h4> <p visual="text-size:large">We provide immersive 3D visualization to wow your audience and make a lasting mark for your brands.<br /></p> </div> <div layout="flex col" space="p:medium" visual="rounded:medium border-w:thin border:neutral-200"> <div layout="flex items:center justify:center" space="m-b:large h:big-3x w:big-3x" visual="rounded:small bg:blue-600 text-size:giant text:white"> <i class="fas fa-cube"></i> </div> <h4 space="m-b:small" visual="text-size:large font:tw-semibold">Augmented Reality (AR)<br /></h4> <p visual="text-size:large">We offer unique Augmented Reality solution for myriad applications, including tourism, education, exhibition, and many more.<br /></p> </div> <div layout="flex col" space="p:medium" visual="rounded:medium border-w:thin border:neutral-200"> <div layout="flex items:center justify:center" space="m-b:large h:big-3x w:big-3x" visual="rounded:small bg:blue-600 text-size:giant text:white"> <i class="fas fa-globe"></i> </div> <h4 space="m-b:small" visual="text-size:large font:tw-semibold">Website &amp; Web System<br /></h4> <p visual="text-size:large">Our team use pixels and codes to create beautiful things. We design and develop award-winning portals &amp; websites using the latest technologies.<br /></p> </div> <div layout="flex col" space="p:medium" visual="rounded:medium border-w:thin border:neutral-200"> <div layout="flex items:center justify:center" space="m-b:large h:big-3x w:big-3x" visual="rounded:small bg:blue-600 text-size:giant text:white"> <i class="fas fa-mobile"></i> </div> <h4 space="m-b:small" visual="text-size:large font:tw-semibold">Mobile App Development<br /></h4> <p visual="text-size:large">Our app developers build native and hybrid mobile applications on IOS, Android, and Windows, for a variety of mobile devices and tablets.<br /></p> </div> <div layout="flex col" space="p:medium" visual="rounded:medium border-w:thin border:neutral-200"> <div layout="flex items:center justify:center" space="m-b:large h:big-3x w:big-3x" visual="rounded:small bg:blue-600 text-size:giant text:white"> <i class="fas fa-palette"></i> </div> <h4 space="m-b:small" visual="text-size:large font:tw-semibold">Graphic Design<br /></h4> <p visual="text-size:large">We help you find the right pixels combination for your brands or products.<br /></p> </div> <div layout="flex col" space="p:medium" visual="rounded:medium border-w:thin border:neutral-200"> <div layout="flex items:center justify:center" space="m-b:large h:big-3x w:big-3x" visual="rounded:small bg:blue-600 text-size:giant text:white"> <i class="fas fa-chalkboard-teacher"></i> </div> <h4 space="m-b:small" visual="text-size:large font:tw-semibold">Training<br /></h4> <p visual="text-size:large">We provide training in web and mobile application development for beginners who are eager to learn.<br /></p> </div> </div> </section> COPY ```

Software Solutions Tailored for Your Business

At Bookklik, we believe that every business deserves a software solution that fits their unique needs. Our team of expert developers creates custom solutions to help you streamline processes, boost productivity, and drive growth.

Virtual Reality (VR)

We provide immersive 3D visualization to wow your audience and make a lasting mark for your brands.

Augmented Reality (AR)

We offer unique Augmented Reality solution for myriad applications, including tourism, education, exhibition, and many more.

Website & Web System

Our team use pixels and codes to create beautiful things. We design and develop award-winning portals & websites using the latest technologies.

Mobile App Development

Our app developers build native and hybrid mobile applications on IOS, Android, and Windows, for a variety of mobile devices and tablets.

Graphic Design

We help you find the right pixels combination for your brands or products.

Training

We provide training in web and mobile application development for beginners who are eager to learn.

``` #### [\#](https://senangstart.com/sections/specialities-1/llms.txt)Specialty Icon Grid showcase Details various specialties or services in a grid, each with a dedicated icon and descriptive text. TailwindCSS SenangStart CSS ##### Comprehensive Care at Clinika Our expert team is dedicated to providing personalized, compassionate care in a modern and welcoming environment. #### State-of-the-Art Facilities Our clinic is equipped with cutting-edge technology to ensure accurate diagnoses and effective treatments for all our patients. #### Expert Medical Team Our board-certified specialists are committed to delivering the highest standard of care tailored to your unique health needs. #### Personalized Treatment Plans We create customized care plans to ensure you receive the most effective and compassionate treatment possible. <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="h-4 w-full"></div> <div class="mb-8 grid gap-4 lg:grid-cols-2"> <div> <h5 class="text-3xl font-bold lg:text-5xl">Comprehensive Care at Clinika</h5> </div> <div class="flex items-center"> <p class="text-base lg:text-lg">Our expert team is dedicated to providing personalized, compassionate care in a modern and welcoming environment.</p> </div> </div> <div class="grid gap-4 lg:grid-cols-3"> <div class="flex flex-col rounded-lg border border-neutral-200 p-4"> <div class="mb-8 flex h-12 w-12 items-center justify-center rounded bg-neutral-200 text-blue-600 text-xl"> <i class="fas fa-building"></i> </div> <h4 class="mb-2 text-lg font-semibold">State-of-the-Art Facilities</h4> <p class="text-lg">Our clinic is equipped with cutting-edge technology to ensure accurate diagnoses and effective treatments for all our patients.</p> </div> <div class="flex flex-col rounded-lg border border-neutral-200 p-4"> <div class="mb-8 flex h-12 w-12 items-center justify-center rounded bg-neutral-200 text-blue-600 text-xl"> <i class="fas fa-stethoscope"></i> </div> <h4 class="mb-2 text-lg font-semibold">Expert Medical Team</h4> <p class="text-lg">Our board-certified specialists are committed to delivering the highest standard of care tailored to your unique health needs.</p> </div> <div class="flex flex-col rounded-lg border border-neutral-200 p-4"> <div class="mb-8 flex h-12 w-12 items-center justify-center rounded bg-neutral-200 text-blue-600 text-xl"> <i class="fas fa-notes-medical"></i> </div> <h4 class="mb-2 text-lg font-semibold">Personalized Treatment Plans</h4> <p class="text-lg">We create customized care plans to ensure you receive the most effective and compassionate treatment possible.</p> </div> </div> </section> COPY ```
Comprehensive Care at Clinika

Our expert team is dedicated to providing personalized, compassionate care in a modern and welcoming environment.

State-of-the-Art Facilities

Our clinic is equipped with cutting-edge technology to ensure accurate diagnoses and effective treatments for all our patients.

Expert Medical Team

Our board-certified specialists are committed to delivering the highest standard of care tailored to your unique health needs.

Personalized Treatment Plans

We create customized care plans to ensure you receive the most effective and compassionate treatment possible.

``` ##### Comprehensive Care at Clinika Our expert team is dedicated to providing personalized, compassionate care in a modern and welcoming environment. #### State-of-the-Art Facilities Our clinic is equipped with cutting-edge technology to ensure accurate diagnoses and effective treatments for all our patients. #### Expert Medical Team Our board-certified specialists are committed to delivering the highest standard of care tailored to your unique health needs. #### Personalized Treatment Plans We create customized care plans to ensure you receive the most effective and compassionate treatment possible. <section 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 space="h:medium w:\[100%\]"></div> <div layout="grid tw-lg:grid-cols:2" space="m-b:large g:medium"> <div> <h5 visual="text-size:grand font:tw-bold tw-lg:text-size:mount">Comprehensive Care at Clinika</h5> </div> <div layout="flex items:center"> <p visual="text-size:base tw-lg:text-size:large">Our expert team is dedicated to providing personalized, compassionate care in a modern and welcoming environment.</p> </div> </div> <div layout="grid tw-lg:grid-cols:3" space="g:medium"> <div layout="flex col" space="p:medium" visual="rounded:medium border-w:thin border:neutral-200"> <div layout="flex items:center justify:center" space="m-b:large h:big w:big" visual="rounded:small bg:neutral-200 text:blue-600 text-size:big"> <i class="fas fa-building"></i> </div> <h4 space="m-b:small" visual="text-size:large font:tw-semibold">State-of-the-Art Facilities</h4> <p visual="text-size:large">Our clinic is equipped with cutting-edge technology to ensure accurate diagnoses and effective treatments for all our patients.</p> </div> <div layout="flex col" space="p:medium" visual="rounded:medium border-w:thin border:neutral-200"> <div layout="flex items:center justify:center" space="m-b:large h:big w:big" visual="rounded:small bg:neutral-200 text:blue-600 text-size:big"> <i class="fas fa-stethoscope"></i> </div> <h4 space="m-b:small" visual="text-size:large font:tw-semibold">Expert Medical Team</h4> <p visual="text-size:large">Our board-certified specialists are committed to delivering the highest standard of care tailored to your unique health needs.</p> </div> <div layout="flex col" space="p:medium" visual="rounded:medium border-w:thin border:neutral-200"> <div layout="flex items:center justify:center" space="m-b:large h:big w:big" visual="rounded:small bg:neutral-200 text:blue-600 text-size:big"> <i class="fas fa-notes-medical"></i> </div> <h4 space="m-b:small" visual="text-size:large font:tw-semibold">Personalized Treatment Plans</h4> <p visual="text-size:large">We create customized care plans to ensure you receive the most effective and compassionate treatment possible.</p> </div> </div> </section> COPY ```
Comprehensive Care at Clinika

Our expert team is dedicated to providing personalized, compassionate care in a modern and welcoming environment.

State-of-the-Art Facilities

Our clinic is equipped with cutting-edge technology to ensure accurate diagnoses and effective treatments for all our patients.

Expert Medical Team

Our board-certified specialists are committed to delivering the highest standard of care tailored to your unique health needs.

Personalized Treatment Plans

We create customized care plans to ensure you receive the most effective and compassionate treatment possible.

``` #### [\#](https://senangstart.com/sections/previews-1/llms.txt)STEM Learning Previews showcase Presents STEM learning topics with engaging visuals and descriptions, featuring interactive image previews. TailwindCSS SenangStart CSS 📖 Learning STEM Topics ====================== Science Eclipse An eclipse takes place when one heavenly body such as a moon or planet moves into the shadow of another heavenly body. ![](https://placehold.co/400x400/2563EB/FFFFFF) ![](https://placehold.co/400x160) ![](https://placehold.co/400x400/2563EB/FFFFFF) ![](https://placehold.co/400x160) Technology Augmented Reality Thanks to augmented reality technology, digital objects can exist outside of the digital world and come into our world. Engineering Combustion Engines Internal combustion engines (ICE) are the most common form of heat engines, as they are used in vehicles, boats, ships, airplanes, and trains. ![](https://placehold.co/400x400/2563EB/FFFFFF) ![](https://placehold.co/400x160) ![](https://placehold.co/400x400/2563EB/FFFFFF) ![](https://placehold.co/400x160) Mathematics Dimensions Dimensions are used to describe the size and shape of an object. For example: length, width, height, etc. <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <h1 class="mb-8 text-center text-3xl font-bold lg:mx-24 lg:mb-16 lg:text-6xl">📖 Learning STEM Topics</h1> <div class="flex flex-col gap-8 lg:gap-16"> <div class="flex flex-col lg:mx-24"> <div class="group grid gap-8 lg:grid-cols-2 lg:gap-16"> <div class="order-2 flex flex-col justify-center gap-4 lg:order-1 lg:gap-8"> <div class="max-w-max rounded-md bg-blue-600 px-2 font-bold text-white">Science</div> <p class="text-2xl font-bold lg:text-4xl">Eclipse</p> <p class="text-xl lg:text-2xl">An eclipse takes place when one heavenly body such as a moon or planet moves into the shadow of another heavenly body.<br /></p> </div> <div class="order-1 flex flex-col items-center lg:order-2"> <img src="https://placehold.co/400x400/2563EB/FFFFFF" class="w-full max-w-md object-contain duration-500 ease-in-out group-hover:scale-150" /> <img src="https://placehold.co/400x160" class="w-full max-w-sm object-contain" /> </div> </div> </div> <div class="flex flex-col lg:mx-24"> <div class="group grid gap-8 lg:grid-cols-2 lg:gap-16"> <div class="flex flex-col items-center"> <img src="https://placehold.co/400x400/2563EB/FFFFFF" class="w-full max-w-md object-contain duration-500 ease-in-out group-hover:scale-150" /> <img src="https://placehold.co/400x160" class="w-full max-w-sm object-contain" /> </div> <div class="flex flex-col justify-center gap-4 lg:gap-8"> <div class="max-w-max rounded-md bg-blue-600 px-2 font-bold text-white">Technology</div> <p class="text-2xl font-bold lg:text-4xl">Augmented Reality<br /></p> <p class="text-xl lg:text-2xl">Thanks to augmented reality technology, digital objects can exist outside of the digital world and come into our world.<br /></p> </div> </div> </div> <div class="flex flex-col lg:mx-24"> <div class="group grid gap-8 lg:grid-cols-2 lg:gap-16"> <div class="order-2 flex flex-col justify-center gap-4 lg:order-1 lg:gap-8"> <div class="max-w-max rounded-md bg-blue-600 px-2 font-bold text-white">Engineering</div> <p class="text-2xl font-bold lg:text-4xl">Combustion Engines<br /></p> <p class="text-xl lg:text-2xl">Internal combustion engines (ICE) are the most common form of heat engines, as they are used in vehicles, boats, ships, airplanes, and trains.<br /></p> </div> <div class="order-1 flex flex-col items-center lg:order-2"> <img src="https://placehold.co/400x400/2563EB/FFFFFF" class="w-full max-w-md object-contain duration-500 ease-in-out group-hover:scale-150" /> <img src="https://placehold.co/400x160" class="w-full max-w-sm object-contain" /> </div> </div> </div> <div class="flex flex-col lg:mx-24"> <div class="group grid gap-8 lg:grid-cols-2 lg:gap-16"> <div class="flex flex-col items-center"> <img src="https://placehold.co/400x400/2563EB/FFFFFF" class="w-full max-w-md object-contain duration-500 ease-in-out group-hover:scale-150" /> <img src="https://placehold.co/400x160" class="w-full max-w-sm object-contain" /> </div> <div class="flex flex-col justify-center gap-4 lg:gap-8"> <div class="max-w-max rounded-md bg-blue-600 px-2 font-bold text-white">Mathematics</div> <p class="text-2xl font-bold lg:text-4xl">Dimensions<br /></p> <p class="text-xl lg:text-2xl">Dimensions are used to describe the size and shape of an object. For example: length, width, height, etc.<br /></p> </div> </div> </div> </div> </section> COPY ```

📖 Learning STEM Topics

Science

Eclipse

An eclipse takes place when one heavenly body such as a moon or planet moves into the shadow of another heavenly body.

Technology

Augmented Reality

Thanks to augmented reality technology, digital objects can exist outside of the digital world and come into our world.

Engineering

Combustion Engines

Internal combustion engines (ICE) are the most common form of heat engines, as they are used in vehicles, boats, ships, airplanes, and trains.

Mathematics

Dimensions

Dimensions are used to describe the size and shape of an object. For example: length, width, height, etc.

``` 📖 Learning STEM Topics ====================== Science Eclipse An eclipse takes place when one heavenly body such as a moon or planet moves into the shadow of another heavenly body. ![](https://placehold.co/400x400/2563EB/FFFFFF) ![](https://placehold.co/400x160) ![](https://placehold.co/400x400/2563EB/FFFFFF) ![](https://placehold.co/400x160) Technology Augmented Reality Thanks to augmented reality technology, digital objects can exist outside of the digital world and come into our world. Engineering Combustion Engines Internal combustion engines (ICE) are the most common form of heat engines, as they are used in vehicles, boats, ships, airplanes, and trains. ![](https://placehold.co/400x400/2563EB/FFFFFF) ![](https://placehold.co/400x160) ![](https://placehold.co/400x400/2563EB/FFFFFF) ![](https://placehold.co/400x160) Mathematics Dimensions Dimensions are used to describe the size and shape of an object. For example: length, width, height, etc. <section 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"> <h1 space="m-b:large tw-lg:m-x:giant tw-lg:m-b:big-3x" visual="text:center text-size:grand font:tw-bold tw-lg:text-size:mega">📖 Learning STEM Topics</h1> <div layout="flex col" space="g:large tw-lg:g:big-3x"> <div layout="flex col" space="tw-lg:m-x:giant"> <div layout="grid tw-lg:grid-cols:2" space="g:large tw-lg:g:big-3x" class="group"> <div layout="order:2 flex col justify:center tw-lg:order:1" space="g:medium tw-lg:g:large"> <div space="max-w:\[max-content\] p-x:small" visual="rounded:small bg:blue-600 font:tw-bold text:white">Science</div> <p visual="text-size:huge font:tw-bold tw-lg:text-size:giant">Eclipse</p> <p visual="text-size:big tw-lg:text-size:huge">An eclipse takes place when one heavenly body such as a moon or planet moves into the shadow of another heavenly body.<br /></p> </div> <div layout="order:1 flex col items:center tw-lg:order:2"> <img src="https://placehold.co/400x400/2563EB/FFFFFF" layout="object:contain" space="w:\[100%\] max-w:\[md\]" visual="duration:slower ease:in-out" class="group-hover:scale-150" /> <img src="https://placehold.co/400x160" layout="object:contain" space="w:\[100%\] max-w:\[sm\]" /> </div> </div> </div> <div layout="flex col" space="tw-lg:m-x:giant"> <div layout="grid tw-lg:grid-cols:2" space="g:large tw-lg:g:big-3x" class="group"> <div layout="flex col items:center"> <img src="https://placehold.co/400x400/2563EB/FFFFFF" layout="object:contain" space="w:\[100%\] max-w:\[md\]" visual="duration:slower ease:in-out" class="group-hover:scale-150" /> <img src="https://placehold.co/400x160" layout="object:contain" space="w:\[100%\] max-w:\[sm\]" /> </div> <div layout="flex col justify:center" space="g:medium tw-lg:g:large"> <div space="max-w:\[max-content\] p-x:small" visual="rounded:small bg:blue-600 font:tw-bold text:white">Technology</div> <p visual="text-size:huge font:tw-bold tw-lg:text-size:giant">Augmented Reality<br /></p> <p visual="text-size:big tw-lg:text-size:huge">Thanks to augmented reality technology, digital objects can exist outside of the digital world and come into our world.<br /></p> </div> </div> </div> <div layout="flex col" space="tw-lg:m-x:giant"> <div layout="grid tw-lg:grid-cols:2" space="g:large tw-lg:g:big-3x" class="group"> <div layout="order:2 flex col justify:center tw-lg:order:1" space="g:medium tw-lg:g:large"> <div space="max-w:\[max-content\] p-x:small" visual="rounded:small bg:blue-600 font:tw-bold text:white">Engineering</div> <p visual="text-size:huge font:tw-bold tw-lg:text-size:giant">Combustion Engines<br /></p> <p visual="text-size:big tw-lg:text-size:huge">Internal combustion engines (ICE) are the most common form of heat engines, as they are used in vehicles, boats, ships, airplanes, and trains.<br /></p> </div> <div layout="order:1 flex col items:center tw-lg:order:2"> <img src="https://placehold.co/400x400/2563EB/FFFFFF" layout="object:contain" space="w:\[100%\] max-w:\[md\]" visual="duration:slower ease:in-out" class="group-hover:scale-150" /> <img src="https://placehold.co/400x160" layout="object:contain" space="w:\[100%\] max-w:\[sm\]" /> </div> </div> </div> <div layout="flex col" space="tw-lg:m-x:giant"> <div layout="grid tw-lg:grid-cols:2" space="g:large tw-lg:g:big-3x" class="group"> <div layout="flex col items:center"> <img src="https://placehold.co/400x400/2563EB/FFFFFF" layout="object:contain" space="w:\[100%\] max-w:\[md\]" visual="duration:slower ease:in-out" class="group-hover:scale-150" /> <img src="https://placehold.co/400x160" layout="object:contain" space="w:\[100%\] max-w:\[sm\]" /> </div> <div layout="flex col justify:center" space="g:medium tw-lg:g:large"> <div space="max-w:\[max-content\] p-x:small" visual="rounded:small bg:blue-600 font:tw-bold text:white">Mathematics</div> <p visual="text-size:huge font:tw-bold tw-lg:text-size:giant">Dimensions<br /></p> <p visual="text-size:big tw-lg:text-size:huge">Dimensions are used to describe the size and shape of an object. For example: length, width, height, etc.<br /></p> </div> </div> </div> </div> </section> COPY ```

📖 Learning STEM Topics

Science

Eclipse

An eclipse takes place when one heavenly body such as a moon or planet moves into the shadow of another heavenly body.

Technology

Augmented Reality

Thanks to augmented reality technology, digital objects can exist outside of the digital world and come into our world.

Engineering

Combustion Engines

Internal combustion engines (ICE) are the most common form of heat engines, as they are used in vehicles, boats, ships, airplanes, and trains.

Mathematics

Dimensions

Dimensions are used to describe the size and shape of an object. For example: length, width, height, etc.

``` #### [\#](https://senangstart.com/sections/products-2/llms.txt)Template Showcase Grid showcase Presents a variety of website templates in a grid, each with a preview image, name, and link for more details. TailwindCSS SenangStart CSS Templates Explore Versatility with Ready-to-Use Templates Our collection showcases a variety of designs, each ingeniously crafted to highlight the versatility of our Tailwind CSS component library. From minimalist portfolios to dynamic e-commerce interfaces, SenangStart has the perfect template for your project. ![Agency Business](https://placehold.co/400x400/2563EB/FFFFFF)Agency Business Agency Business [Preview](https://senangstart.com/template/agency-business) ![Personal Website](https://placehold.co/400x400/2563EB/FFFFFF)Personal Website For personal branding, portfolio, and resume [Preview](https://senangstart.com/template/personal-website) ![Education App](https://placehold.co/400x400/2563EB/FFFFFF)Education App Education App [Preview](https://senangstart.com/template/education-app) [See More Templates](https://senangstart.com/templates) <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="text-center"> <div class="headline mx-auto mb-8 max-w-full lg:max-w-3xl"> <div class="mx-auto mb-2 w-max rounded-lg bg-blue-600 px-2 py-1 lg:mb-4"> <p class="text-sm font-bold uppercase text-white">Templates</p> </div> <div class="mb-4 text-3xl font-bold capitalize lg:text-6xl">Explore Versatility with Ready-to-Use Templates</div> <div class="text-base lg:text-lg">Our collection showcases a variety of designs, each ingeniously crafted to highlight the versatility of our Tailwind CSS component library. From minimalist portfolios to dynamic e-commerce interfaces, SenangStart has the perfect template for your project.</div> </div> <div class="mb-8 grid grid-cols-1 gap-y-4 lg:mb-16 lg:grid-cols-3 lg:gap-4"> <div class="group flex flex-col justify-between overflow-hidden rounded-lg border border-slate-300 lg:rounded-2xl"> <img class="w-full" src="https://placehold.co/400x400/2563EB/FFFFFF" alt="Agency Business" /> <div class="flex h-full flex-col justify-between p-4 text-center lg:p-8"> <div> <div class="lg:text-32 mb-2 text-lg font-bold lg:mb-4">Agency Business</div> <div class="mb-4 text-base lg:mb-8 lg:text-lg">Agency Business</div> </div> <div class="flex justify-center"> <a href="https://senangstart.com/template/agency-business" target="\_blank" class="flex items-center gap-2 pr-1 text-lg font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80">Preview<i class="fas fa-arrow-right"></i></a> </div> </div> </div> <div class="group flex flex-col justify-between overflow-hidden rounded-lg border border-slate-300 lg:rounded-2xl"> <img class="w-full" src="https://placehold.co/400x400/2563EB/FFFFFF" alt="Personal Website" /> <div class="flex h-full flex-col justify-between p-4 text-center lg:p-8"> <div> <div class="lg:text-32 mb-2 text-lg font-bold lg:mb-4">Personal Website</div> <div class="mb-4 text-base lg:mb-8 lg:text-lg">For personal branding, portfolio, and resume</div> </div> <div class="flex justify-center"> <a href="https://senangstart.com/template/personal-website" target="\_blank" class="flex items-center gap-2 pr-1 text-lg font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80">Preview<i class="fas fa-arrow-right"></i></a> </div> </div> </div> <div class="group flex flex-col justify-between overflow-hidden rounded-lg border border-slate-300 lg:rounded-2xl"> <img class="w-full" src="https://placehold.co/400x400/2563EB/FFFFFF" alt="Education App" /> <div class="flex h-full flex-col justify-between p-4 text-center lg:p-8"> <div> <div class="lg:text-32 mb-2 text-lg font-bold lg:mb-4">Education App</div> <div class="mb-4 text-base lg:mb-8 lg:text-lg">Education App</div> </div> <div class="flex justify-center"> <a href="https://senangstart.com/template/education-app" target="\_blank" class="flex items-center gap-2 pr-1 text-lg font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80">Preview<i class="fas fa-arrow-right"></i></a> </div> </div> </div> </div> <div class="flex justify-center"> <a href="https://senangstart.com/templates" class="flex items-center gap-2 pr-1 text-xl font-semibold text-blue-600 hover:gap-3 hover:pr-0 hover:opacity-80">See More Templates<i class="fas fa-arrow-right"></i></a> </div> </div> </section> COPY ```

Templates

Explore Versatility with Ready-to-Use Templates
Our collection showcases a variety of designs, each ingeniously crafted to highlight the versatility of our Tailwind CSS component library. From minimalist portfolios to dynamic e-commerce interfaces, SenangStart has the perfect template for your project.
Agency Business
Agency Business
Agency Business
Preview
Personal Website
Personal Website
For personal branding, portfolio, and resume
Preview
Education App
Education App
Education App
Preview
See More Templates
``` Templates Explore Versatility with Ready-to-Use Templates Our collection showcases a variety of designs, each ingeniously crafted to highlight the versatility of our Tailwind CSS component library. From minimalist portfolios to dynamic e-commerce interfaces, SenangStart has the perfect template for your project. ![Agency Business](https://placehold.co/400x400/2563EB/FFFFFF)Agency Business Agency Business [Preview](https://senangstart.com/template/agency-business) ![Personal Website](https://placehold.co/400x400/2563EB/FFFFFF)Personal Website For personal branding, portfolio, and resume [Preview](https://senangstart.com/template/personal-website) ![Education App](https://placehold.co/400x400/2563EB/FFFFFF)Education App Education App [Preview](https://senangstart.com/template/education-app) [See More Templates](https://senangstart.com/templates) <section 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 visual="text:center"> <div space="m-x:auto m-b:large max-w:\[100%\] tw-lg:max-w:\[3xl\]" class="headline"> <div space="m-x:auto m-b:small w:\[max-content\] p-x:small p-y:tiny tw-lg:m-b:medium" visual="rounded:medium bg:blue-600"> <p visual="text-size:small font:tw-bold uppercase text:white">Templates</p> </div> <div space="m-b:medium" visual="text-size:grand font:tw-bold capitalize tw-lg:text-size:mega">Explore Versatility with Ready-to-Use Templates</div> <div visual="text-size:base tw-lg:text-size:large">Our collection showcases a variety of designs, each ingeniously crafted to highlight the versatility of our Tailwind CSS component library. From minimalist portfolios to dynamic e-commerce interfaces, SenangStart has the perfect template for your project.</div> </div> <div layout="grid grid-cols:1 tw-lg:grid-cols:3" space="m-b:large g-y:medium tw-lg:m-b:big-3x tw-lg:g:medium"> <div layout="flex col justify:between overflow:hidden" visual="rounded:medium border-w:thin border:slate-300 tw-lg:rounded:big" class="group"> <img space="w:\[100%\]" src="https://placehold.co/400x400/2563EB/FFFFFF" alt="Agency Business" /> <div layout="flex col justify:between" space="h:\[100%\] p:medium tw-lg:p:large" visual="text:center"> <div> <div space="m-b:small tw-lg:m-b:medium" visual="text-size:large font:tw-bold" class="lg:text-32">Agency Business</div> <div space="m-b:medium tw-lg:m-b:large" visual="text-size:base tw-lg:text-size:large">Agency Business</div> </div> <div layout="flex justify:center"> <a href="https://senangstart.com/template/agency-business" target="\_blank" layout="flex items:center" space="g:small p-r:tiny hover:g:small-3x hover:p-r:none" visual="text-size:large font:tw-semibold text:blue-600 hover:opacity:80">Preview<i class="fas fa-arrow-right"></i></a> </div> </div> </div> <div layout="flex col justify:between overflow:hidden" visual="rounded:medium border-w:thin border:slate-300 tw-lg:rounded:big" class="group"> <img space="w:\[100%\]" src="https://placehold.co/400x400/2563EB/FFFFFF" alt="Personal Website" /> <div layout="flex col justify:between" space="h:\[100%\] p:medium tw-lg:p:large" visual="text:center"> <div> <div space="m-b:small tw-lg:m-b:medium" visual="text-size:large font:tw-bold" class="lg:text-32">Personal Website</div> <div space="m-b:medium tw-lg:m-b:large" visual="text-size:base tw-lg:text-size:large">For personal branding, portfolio, and resume</div> </div> <div layout="flex justify:center"> <a href="https://senangstart.com/template/personal-website" target="\_blank" layout="flex items:center" space="g:small p-r:tiny hover:g:small-3x hover:p-r:none" visual="text-size:large font:tw-semibold text:blue-600 hover:opacity:80">Preview<i class="fas fa-arrow-right"></i></a> </div> </div> </div> <div layout="flex col justify:between overflow:hidden" visual="rounded:medium border-w:thin border:slate-300 tw-lg:rounded:big" class="group"> <img space="w:\[100%\]" src="https://placehold.co/400x400/2563EB/FFFFFF" alt="Education App" /> <div layout="flex col justify:between" space="h:\[100%\] p:medium tw-lg:p:large" visual="text:center"> <div> <div space="m-b:small tw-lg:m-b:medium" visual="text-size:large font:tw-bold" class="lg:text-32">Education App</div> <div space="m-b:medium tw-lg:m-b:large" visual="text-size:base tw-lg:text-size:large">Education App</div> </div> <div layout="flex justify:center"> <a href="https://senangstart.com/template/education-app" target="\_blank" layout="flex items:center" space="g:small p-r:tiny hover:g:small-3x hover:p-r:none" visual="text-size:large font:tw-semibold text:blue-600 hover:opacity:80">Preview<i class="fas fa-arrow-right"></i></a> </div> </div> </div> </div> <div layout="flex justify:center"> <a href="https://senangstart.com/templates" layout="flex items:center" space="g:small p-r:tiny hover:g:small-3x hover:p-r:none" visual="text-size:big font:tw-semibold text:blue-600 hover:opacity:80">See More Templates<i class="fas fa-arrow-right"></i></a> </div> </div> </section> COPY ```

Templates

Explore Versatility with Ready-to-Use Templates
Our collection showcases a variety of designs, each ingeniously crafted to highlight the versatility of our Tailwind CSS component library. From minimalist portfolios to dynamic e-commerce interfaces, SenangStart has the perfect template for your project.
Agency Business
Agency Business
Agency Business
Personal Website
Personal Website
For personal branding, portfolio, and resume
Education App
Education App
Education App
See More Templates
``` #### [\#](https://senangstart.com/sections/blogs-1/llms.txt)Webinar Grid showcase Showcases upcoming or past webinars in a grid layout, each with event details and a link. TailwindCSS SenangStart CSS #### Up-Coming Webinar Latest Thursday, March 28 [ Navigate the Entrepreneurial Rollercoaster: Shift from Struggle to Success](#) Latest Friday, April 5 [ Tech Tea Time: Business Networking for AI Enthusiasts](#) Latest Saturday, March 30 [ The Financial Investment Expo 2024（Kuala Lunpur）](#) <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <h4 class="text-xl font-bold capitalize lg:text-2xl"> Up-Coming Webinar </h4> <div class="mt-4 grid gap-4 lg:mt-8 lg:grid-cols-3"> <div> <div class="relative rounded-lg bg-gray-200 p-4" style=" padding-top: 60%; background: url('https://placehold.co/600x400'); background-size: cover; " > <p class="absolute left-4 top-4 flex h-6 items-center rounded border-2 border-black px-1 text-xs font-bold" > Latest </p> </div> <p class="mb-1 mt-2 text-sm">Thursday, March 28</p> <a href="#" class="font-bold hover:underline lg:text-lg"> Navigate the Entrepreneurial Rollercoaster: Shift from Struggle to Success</a > </div> <div> <div class="relative rounded-lg bg-gray-200 p-4" style=" padding-top: 60%; background: url('https://placehold.co/600x400'); background-size: cover; " > <p class="absolute left-4 top-4 flex h-6 items-center rounded border-2 border-black px-1 text-xs font-bold" > Latest </p> </div> <p class="mb-1 mt-2 text-sm">Friday, April 5</p> <a href="#" class="font-bold hover:underline lg:text-lg"> Tech Tea Time: Business Networking for AI Enthusiasts</a > </div> <div> <div class="relative rounded-lg bg-gray-200 p-4" style=" padding-top: 60%; background: url('https://placehold.co/600x400'); background-size: cover; " > <p class="absolute left-4 top-4 flex h-6 items-center rounded border-2 border-black px-1 text-xs font-bold" > Latest </p> </div> <p class="mb-1 mt-2 text-sm">Saturday, March 30</p> <a href="#" class="font-bold hover:underline lg:text-lg"> The Financial Investment Expo 2024（Kuala Lunpur）</a > </div> </div> </section> COPY ```

Up-Coming Webinar

Latest

Thursday, March 28

Navigate the Entrepreneurial Rollercoaster: Shift from Struggle to Success

Latest

Friday, April 5

Tech Tea Time: Business Networking for AI Enthusiasts

Latest

Saturday, March 30

The Financial Investment Expo 2024（Kuala Lunpur）
``` #### Up-Coming Webinar Latest Thursday, March 28 [ Navigate the Entrepreneurial Rollercoaster: Shift from Struggle to Success](#) Latest Friday, April 5 [ Tech Tea Time: Business Networking for AI Enthusiasts](#) Latest Saturday, March 30 [ The Financial Investment Expo 2024（Kuala Lunpur）](#) <section 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"> <h4 visual="text-size:big font:tw-bold capitalize tw-lg:text-size:huge"> Up-Coming Webinar </h4> <div layout="grid tw-lg:grid-cols:3" space="m-t:medium g:medium tw-lg:m-t:large"> <div> <div layout="relative" space="p:medium" visual="rounded:medium bg:gray-200" style=" padding-top: 60%; background: url('https://placehold.co/600x400'); background-size: cover; " > <p layout="absolute left:medium top:medium flex items:center" space="h:medium-3x p-x:tiny" visual="rounded:small border-w:regular border:black text-size:mini font:tw-bold" > Latest </p> </div> <p space="m-b:tiny m-t:small" visual="text-size:small">Thursday, March 28</p> <a href="#" visual="font:tw-bold hover:underline tw-lg:text-size:large"> Navigate the Entrepreneurial Rollercoaster: Shift from Struggle to Success</a > </div> <div> <div layout="relative" space="p:medium" visual="rounded:medium bg:gray-200" style=" padding-top: 60%; background: url('https://placehold.co/600x400'); background-size: cover; " > <p layout="absolute left:medium top:medium flex items:center" space="h:medium-3x p-x:tiny" visual="rounded:small border-w:regular border:black text-size:mini font:tw-bold" > Latest </p> </div> <p space="m-b:tiny m-t:small" visual="text-size:small">Friday, April 5</p> <a href="#" visual="font:tw-bold hover:underline tw-lg:text-size:large"> Tech Tea Time: Business Networking for AI Enthusiasts</a > </div> <div> <div layout="relative" space="p:medium" visual="rounded:medium bg:gray-200" style=" padding-top: 60%; background: url('https://placehold.co/600x400'); background-size: cover; " > <p layout="absolute left:medium top:medium flex items:center" space="h:medium-3x p-x:tiny" visual="rounded:small border-w:regular border:black text-size:mini font:tw-bold" > Latest </p> </div> <p space="m-b:tiny m-t:small" visual="text-size:small">Saturday, March 30</p> <a href="#" visual="font:tw-bold hover:underline tw-lg:text-size:large"> The Financial Investment Expo 2024（Kuala Lunpur）</a > </div> </div> </section> COPY ```

Up-Coming Webinar

Latest

Thursday, March 28

Navigate the Entrepreneurial Rollercoaster: Shift from Struggle to Success

Latest

Friday, April 5

Tech Tea Time: Business Networking for AI Enthusiasts

Latest

Saturday, March 30

The Financial Investment Expo 2024（Kuala Lunpur）
``` #### [\#](https://senangstart.com/sections/cta-2/llms.txt)App Download CTA cta Encourages app downloads with prominent call-to-action buttons for both App Store and Play Store. TailwindCSS SenangStart CSS Download My App =============== Don't wait anymore, push the download button now! [App Store](https://qheat.bookklik.com/web/)[Play Store](https://play.google.com/store/apps/details?id=com.qheat.calculator) ![](https://placehold.co/400x400) <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> COPY ```

Download My App

Don't wait anymore, push the download button now!

``` Download My App =============== Don't wait anymore, push the download button now! [App Store](https://qheat.bookklik.com/web/)[Play Store](https://play.google.com/store/apps/details?id=com.qheat.calculator) ![](https://placehold.co/400x400) <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> COPY ```

Download My App

Don't wait anymore, push the download button now!

``` #### [\#](https://senangstart.com/sections/cta-1/llms.txt)CTA Profile Card cta Features a compelling call-to-action alongside a personal profile to encourage direct contact or engagement. TailwindCSS SenangStart CSS Ready to Take Your Business to the Next Level? ============================================== Contact us today for a free consultation and let our team of experts discuss how we can create a custom software solution tailored to your business needs and goals. ![](https://placehold.co/64x64) A.Hakim Noor Technology Officer [Contact Me Now](https://bookklik.com/contact-us "Contact Me") ![](https://placehold.co/400x400) <section id="i5mjqy" class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto"> <div class="rounded-lg bg-neutral-200 p-4 lg:px-16 lg:py-12 overflow-hidden relative grid grid-cols-1 lg:grid-cols-3 gap-4"> <div id="idkx7p" class="col-span-1 lg:col-span-2 flex flex-col justify-center"> <h1 id="isvtkz" class="text-3xl lg:text-6xl capitalize font-semibold lg:font-bold mb-2">Ready to Take Your Business to the Next Level?</h1> <p id="i2aebj" class="text-xl lg:text-2xl w-full opacity-70 mb-4 lg:mb-8">Contact us today for a free consultation and let our team of experts discuss how we can create a custom software solution tailored to your business needs and goals.</p> <div id="i9v9v9" class="flex mb-4 lg:mb-8"> <div class="w-16 rounded-full bg-blue-100 relative overflow-hidden mr-4 h-16"><img src="https://placehold.co/64x64" class="w-16 absolute top-0 right-0 grayscale"></div> <div class="flex justify-center flex-col font-semibold"> <p class="text-lg">A.Hakim Noor</p> <p id="iwxz4f" class="text-sm">Technology Officer</p> </div> </div><a id="iks4tf" href="https://bookklik.com/contact-us" title="Contact Me" class="bg-blue-600 text-white rounded-lg text-lg font-semibold px-6 w-full lg:max-w-max h-12 flex items-center justify-center hover:opacity-80">Contact Me Now</a> </div> <div class="hidden lg:flex justify-right relative"><img src="https://placehold.co/400x400" class="w-full h-full absolute top-0 left-0 object-contain"></div> </div> </section> COPY ```

Ready to Take Your Business to the Next Level?

Contact us today for a free consultation and let our team of experts discuss how we can create a custom software solution tailored to your business needs and goals.

A.Hakim Noor

Technology Officer

Contact Me Now
``` Ready to Take Your Business to the Next Level? ============================================== Contact us today for a free consultation and let our team of experts discuss how we can create a custom software solution tailored to your business needs and goals. ![](https://placehold.co/64x64) A.Hakim Noor Technology Officer [Contact Me Now](https://bookklik.com/contact-us "Contact Me") ![](https://placehold.co/400x400) <section id="i5mjqy" layout="container" space="p-x:medium-3x tw-lg:p-x:big-3x m-y:large tw-lg:m-y:big-3x m-x:auto"> <div layout="overflow:hidden relative grid grid-cols:1 tw-lg:grid-cols:3" space="p:medium tw-lg:p-x:big-3x tw-lg:p-y:big g:medium" visual="rounded:medium bg:neutral-200"> <div id="idkx7p" layout="col-span:1 tw-lg:col-span:2 flex col justify:center"> <h1 id="isvtkz" space="m-b:small" visual="text-size:grand tw-lg:text-size:mega capitalize font:tw-semibold tw-lg:font:tw-bold">Ready to Take Your Business to the Next Level?</h1> <p id="i2aebj" space="w:\[100%\] m-b:medium tw-lg:m-b:large" visual="text-size:big tw-lg:text-size:huge opacity:70">Contact us today for a free consultation and let our team of experts discuss how we can create a custom software solution tailored to your business needs and goals.</p> <div id="i9v9v9" layout="flex" space="m-b:medium tw-lg:m-b:large"> <div layout="relative overflow:hidden" space="w:big-3x m-r:medium h:big-3x" visual="rounded:round bg:blue-100"><img src="https://placehold.co/64x64" layout="absolute top:none right:none" space="w:big-3x" class="grayscale"></div> <div layout="flex justify:center col" visual="font:tw-semibold"> <p visual="text-size:large">A.Hakim Noor</p> <p id="iwxz4f" visual="text-size:small">Technology Officer</p> </div> </div><a id="iks4tf" href="https://bookklik.com/contact-us" title="Contact Me" layout="flex items:center justify:center" space="p-x:medium-3x w:\[100%\] tw-lg:max-w:\[max-content\] h:big" visual="bg:blue-600 text:white rounded:medium text-size:large font:tw-semibold hover:opacity:80">Contact Me Now</a> </div> <div layout="hidden tw-lg:flex relative" class="justify-right"><img src="https://placehold.co/400x400" layout="absolute top:none left:none object:contain" space="w:\[100%\] h:\[100%\]"></div> </div> </section> COPY ```

Ready to Take Your Business to the Next Level?

Contact us today for a free consultation and let our team of experts discuss how we can create a custom software solution tailored to your business needs and goals.

A.Hakim Noor

Technology Officer

Contact Me Now
``` #### [\#](https://senangstart.com/sections/cta-5/llms.txt)CTA Stats & Image cta Combines compelling statistics, clear call-to-action buttons, and an engaging image to drive user action. TailwindCSS SenangStart CSS Ready to Transform Your Business? ----------------------------------- Join over 10,000+ companies that have accelerated their growth with our solutions. 98% Customer Satisfaction 2.5x Revenue Growth 24/7 Expert Support 50+ Countries Served [ Schedule Demo ](#demo) [ Contact Sales ](#contact) ![Dashboard Preview](https://placehold.co/600x800) <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="overflow-hidden rounded-2xl bg-blue-600 text-white"> <div class="grid gap-8 lg:grid-cols-2"> <!-- Content Side --> <div class="p-8 lg:p-16"> <h2 class="mb-4 text-3xl font-bold lg:text-5xl"> Ready to Transform Your Business? </h2> <p class="mb-8 text-lg lg:text-xl"> Join over 10,000+ companies that have accelerated their growth with our solutions. </p> <!-- Stats Grid --> <div class="mb-8 grid grid-cols-2 gap-8"> <div> <p class="text-3xl font-bold lg:text-5xl">98%</p> <p class="text-sm lg:text-base">Customer Satisfaction</p> </div> <div> <p class="text-3xl font-bold lg:text-5xl">2.5x</p> <p class="text-sm lg:text-base">Revenue Growth</p> </div> <div> <p class="text-3xl font-bold lg:text-5xl">24/7</p> <p class="text-sm lg:text-base">Expert Support</p> </div> <div> <p class="text-3xl font-bold lg:text-5xl">50+</p> <p class="text-sm lg:text-base">Countries Served</p> </div> </div> <!-- CTA Buttons --> <div class="flex flex-col gap-4 xl:flex-row"> <a href="#demo" class="flex h-14 items-center justify-center rounded-lg bg-white px-8 text-lg font-semibold text-blue-600 hover:bg-opacity-90" > Schedule Demo </a> <a href="#contact" class="flex h-14 items-center justify-center rounded-lg border-2 border-white px-8 text-lg font-semibold hover:bg-white hover:text-blue-600" > Contact Sales </a> </div> </div> <!-- Image Side --> <div class="relative hidden lg:block"> <img src="https://placehold.co/600x800" alt="Dashboard Preview" class="absolute -right-24 top-1/2 w-auto -translate-y-1/2 object-cover" /> </div> </div> </div> </section> COPY ```

Ready to Transform Your Business?

Join over 10,000+ companies that have accelerated their growth with our solutions.

98%

Customer Satisfaction

2.5x

Revenue Growth

24/7

Expert Support

50+

Countries Served

Schedule Demo Contact Sales
``` Ready to Transform Your Business? ----------------------------------- Join over 10,000+ companies that have accelerated their growth with our solutions. 98% Customer Satisfaction 2.5x Revenue Growth 24/7 Expert Support 50+ Countries Served [ Schedule Demo ](#demo) [ Contact Sales ](#contact) ![Dashboard Preview](https://placehold.co/600x800) <section 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 layout="overflow:hidden" visual="rounded:big bg:blue-600 text:white"> <div layout="grid tw-lg:grid-cols:2" space="g:large"> <!-- Content Side --> <div space="p:large tw-lg:p:big-3x"> <h2 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mount"> Ready to Transform Your Business? </h2> <p space="m-b:large" visual="text-size:large tw-lg:text-size:big"> Join over 10,000+ companies that have accelerated their growth with our solutions. </p> <!-- Stats Grid --> <div layout="grid grid-cols:2" space="m-b:large g:large"> <div> <p visual="text-size:grand font:tw-bold tw-lg:text-size:mount">98%</p> <p visual="text-size:small tw-lg:text-size:base">Customer Satisfaction</p> </div> <div> <p visual="text-size:grand font:tw-bold tw-lg:text-size:mount">2.5x</p> <p visual="text-size:small tw-lg:text-size:base">Revenue Growth</p> </div> <div> <p visual="text-size:grand font:tw-bold tw-lg:text-size:mount">24/7</p> <p visual="text-size:small tw-lg:text-size:base">Expert Support</p> </div> <div> <p visual="text-size:grand font:tw-bold tw-lg:text-size:mount">50+</p> <p visual="text-size:small tw-lg:text-size:base">Countries Served</p> </div> </div> <!-- CTA Buttons --> <div layout="flex col tw-xl:row" space="g:medium"> <a href="#demo" layout="flex items:center justify:center" space="h:big-2x p-x:large" visual="rounded:medium bg:white text-size:large font:tw-semibold text:blue-600" class="hover:bg-opacity-90" > Schedule Demo </a> <a href="#contact" layout="flex items:center justify:center" space="h:big-2x p-x:large" visual="rounded:medium border-w:regular border:white text-size:large font:tw-semibold hover:bg:white hover:text:blue-600" > Contact Sales </a> </div> </div> <!-- Image Side --> <div layout="relative hidden tw-lg:block"> <img src="https://placehold.co/600x800" alt="Dashboard Preview" layout="absolute object:cover" space="w:auto" class="-right-24 top-1/2 -translate-y-1/2" /> </div> </div> </div> </section> COPY ```

Ready to Transform Your Business?

Join over 10,000+ companies that have accelerated their growth with our solutions.

98%

Customer Satisfaction

2.5x

Revenue Growth

24/7

Expert Support

50+

Countries Served

Schedule Demo Contact Sales
Dashboard Preview
``` #### [\#](https://senangstart.com/sections/cta-6/llms.txt)Newsletter CTA Logos cta Promotes newsletter sign-ups with a prominent CTA, email form, and logos for social proof. TailwindCSS SenangStart CSS NEWSLETTER Stay Ahead of the Curve ------------------------- Get weekly insights on industry trends, tech innovations, and growth strategies delivered to your inbox. Subscribe Now TRUSTED BY LEADING COMPANIES ![Company Logo](https://placehold.co/120x40) ![Company Logo](https://placehold.co/120x40) ![Company Logo](https://placehold.co/120x40) ![Company Logo](https://placehold.co/120x40) <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="rounded-2xl bg-neutral-100 p-8 lg:p-16"> <div class="mx-auto max-w-3xl text-center"> <span class="mb-4 inline-block rounded-full bg-blue-100 px-4 py-2 text-sm font-semibold text-blue-600" >NEWSLETTER</span > <h2 class="mb-4 text-3xl font-bold lg:text-5xl"> Stay Ahead of the Curve </h2> <p class="mb-8 text-lg lg:text-xl"> Get weekly insights on industry trends, tech innovations, and growth strategies delivered to your inbox. </p> <!-- Email Form --> <form class="mb-8"> <div class="flex flex-col gap-4 lg:flex-row"> <input type="email" placeholder="Enter your email" class="h-14 flex-grow rounded-lg border border-neutral-200 px-6 focus:border-blue-600 focus:outline-none" /> <button class="h-14 rounded-lg bg-blue-600 px-8 text-lg font-semibold text-white hover:bg-blue-700" > Subscribe Now </button> </div> </form> <!-- Social Proof --> <div class="flex flex-col items-center gap-4"> <p class="text-sm font-semibold text-neutral-600"> TRUSTED BY LEADING COMPANIES </p> <div class="flex flex-wrap items-center justify-center gap-8"> <img src="https://placehold.co/120x40" alt="Company Logo" class="h-8 grayscale transition-all hover:grayscale-0" /> <img src="https://placehold.co/120x40" alt="Company Logo" class="h-8 grayscale transition-all hover:grayscale-0" /> <img src="https://placehold.co/120x40" alt="Company Logo" class="h-8 grayscale transition-all hover:grayscale-0" /> <img src="https://placehold.co/120x40" alt="Company Logo" class="h-8 grayscale transition-all hover:grayscale-0" /> </div> </div> </div> </div> </section> COPY ```
NEWSLETTER

Stay Ahead of the Curve

Get weekly insights on industry trends, tech innovations, and growth strategies delivered to your inbox.

TRUSTED BY LEADING COMPANIES

Company Logo Company Logo Company Logo Company Logo
``` NEWSLETTER Stay Ahead of the Curve ------------------------- Get weekly insights on industry trends, tech innovations, and growth strategies delivered to your inbox. Subscribe Now TRUSTED BY LEADING COMPANIES ![Company Logo](https://placehold.co/120x40) ![Company Logo](https://placehold.co/120x40) ![Company Logo](https://placehold.co/120x40) ![Company Logo](https://placehold.co/120x40) <section 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 space="p:large tw-lg:p:big-3x" visual="rounded:big bg:neutral-100"> <div space="m-x:auto max-w:\[3xl\]" visual="text:center"> <span layout="inline" space="m-b:medium p-x:medium p-y:small" visual="rounded:round bg:blue-100 text-size:small font:tw-semibold text:blue-600" >NEWSLETTER</span > <h2 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mount"> Stay Ahead of the Curve </h2> <p space="m-b:large" visual="text-size:large tw-lg:text-size:big"> Get weekly insights on industry trends, tech innovations, and growth strategies delivered to your inbox. </p> <!-- Email Form --> <form space="m-b:large"> <div layout="flex col tw-lg:row" space="g:medium"> <input type="email" placeholder="Enter your email" layout="grow" space="h:big-2x p-x:medium-3x" visual="rounded:medium border-w:thin border:neutral-200 focus:border:blue-600 focus:outline:none" /> <button space="h:big-2x p-x:large" visual="rounded:medium bg:blue-600 text-size:large font:tw-semibold text:white hover:bg:blue-700" > Subscribe Now </button> </div> </form> <!-- Social Proof --> <div layout="flex col items:center" space="g:medium"> <p visual="text-size:small font:tw-semibold text:neutral-600"> TRUSTED BY LEADING COMPANIES </p> <div layout="flex wrap items:center justify:center" space="g:large"> <img src="https://placehold.co/120x40" alt="Company Logo" space="h:large" visual="transition:all" class="grayscale hover:grayscale-0" /> <img src="https://placehold.co/120x40" alt="Company Logo" space="h:large" visual="transition:all" class="grayscale hover:grayscale-0" /> <img src="https://placehold.co/120x40" alt="Company Logo" space="h:large" visual="transition:all" class="grayscale hover:grayscale-0" /> <img src="https://placehold.co/120x40" alt="Company Logo" space="h:large" visual="transition:all" class="grayscale hover:grayscale-0" /> </div> </div> </div> </div> </section> COPY ```
NEWSLETTER

Stay Ahead of the Curve

Get weekly insights on industry trends, tech innovations, and growth strategies delivered to your inbox.

TRUSTED BY LEADING COMPANIES

Company Logo Company Logo Company Logo Company Logo
``` #### [\#](https://senangstart.com/sections/cta-7/llms.txt)Plan CTA Testimonial cta Motivates plan upgrades by comparing features, showing premium benefits, and including a persuasive testimonial. TailwindCSS SenangStart CSS UPGRADE NOW Why Choose Premium? --------------------- Unlock advanced features and take your business to the next level. ### Free Plan Basic features for small teams - Up to 5 team members - Basic analytics - 5GB storage - Advanced security - Custom integrations [ Current Plan ](#signup) ### Premium Plan Advanced features for growing businesses - Unlimited team members - Advanced analytics & reporting - Unlimited storage - Enterprise-grade security - Custom integrations & API access [ Upgrade Now ](#upgrade) ![Customer](https://placehold.co/80x80)> "Upgrading to Premium was a game-changer for our team. The advanced features and unlimited storage have significantly improved our workflow." Sarah Johnson Product Manager at TechCorp <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="rounded-2xl bg-neutral-100 p-8 lg:p-16"> <div class="mx-auto max-w-4xl"> <div class="mb-8 text-center"> <span class="mb-4 inline-block rounded-full bg-blue-100 px-4 py-2 text-sm font-semibold text-blue-600" >UPGRADE NOW</span > <h2 class="mb-4 text-3xl font-bold lg:text-5xl"> Why Choose Premium? </h2> <p class="text-lg lg:text-xl"> Unlock advanced features and take your business to the next level. </p> </div> <!-- Feature Comparison --> <div class="mb-8 grid gap-4 lg:grid-cols-2"> <!-- Free Features --> <div class="rounded-xl bg-white p-6"> <div class="mb-6"> <h3 class="text-xl font-bold">Free Plan</h3> <p class="text-sm text-neutral-600"> Basic features for small teams </p> </div> <ul class="mb-6 space-y-4"> <li class="flex items-center gap-3"> <i class="fas fa-check text-green-500"></i> <span>Up to 5 team members</span> </li> <li class="flex items-center gap-3"> <i class="fas fa-check text-green-500"></i> <span>Basic analytics</span> </li> <li class="flex items-center gap-3"> <i class="fas fa-check text-green-500"></i> <span>5GB storage</span> </li> <li class="flex items-center gap-3 text-neutral-400"> <i class="fas fa-times"></i> <span>Advanced security</span> </li> <li class="flex items-center gap-3 text-neutral-400"> <i class="fas fa-times"></i> <span>Custom integrations</span> </li> </ul> <a href="#signup" class="flex h-12 w-full items-center justify-center rounded-lg border-2 border-neutral-200 font-semibold hover:border-blue-600 hover:text-blue-600" > Current Plan </a> </div> <!-- Premium Features --> <div class="rounded-xl bg-blue-600 p-6 text-white"> <div class="mb-6"> <h3 class="text-xl font-bold">Premium Plan</h3> <p class="text-sm text-blue-200"> Advanced features for growing businesses </p> </div> <ul class="mb-6 space-y-4"> <li class="flex items-center gap-3"> <i class="fas fa-check"></i> <span>Unlimited team members</span> </li> <li class="flex items-center gap-3"> <i class="fas fa-check"></i> <span>Advanced analytics & reporting</span> </li> <li class="flex items-center gap-3"> <i class="fas fa-check"></i> <span>Unlimited storage</span> </li> <li class="flex items-center gap-3"> <i class="fas fa-check"></i> <span>Enterprise-grade security</span> </li> <li class="flex items-center gap-3"> <i class="fas fa-check"></i> <span>Custom integrations & API access</span> </li> </ul> <a href="#upgrade" class="flex h-12 w-full items-center justify-center rounded-lg bg-white font-semibold text-blue-600 hover:bg-opacity-90" > Upgrade Now </a> </div> </div> <!-- Testimonial --> <div class="flex flex-col items-center gap-4 rounded-xl bg-white p-6 text-center" > <img src="https://placehold.co/80x80" alt="Customer" class="h-16 w-16 rounded-full" /> <blockquote class="text-lg italic"> "Upgrading to Premium was a game-changer for our team. The advanced features and unlimited storage have significantly improved our workflow." </blockquote> <div> <p class="font-semibold">Sarah Johnson</p> <p class="text-sm text-neutral-600"> Product Manager at TechCorp </p> </div> </div> </div> </div> </section> COPY ```
UPGRADE NOW

Why Choose Premium?

Unlock advanced features and take your business to the next level.

Free Plan

Basic features for small teams

  • Up to 5 team members
  • Basic analytics
  • 5GB storage
  • Advanced security
  • Custom integrations
Current Plan

Premium Plan

Advanced features for growing businesses

  • Unlimited team members
  • Advanced analytics & reporting
  • Unlimited storage
  • Enterprise-grade security
  • Custom integrations & API access
Upgrade Now
Customer
"Upgrading to Premium was a game-changer for our team. The advanced features and unlimited storage have significantly improved our workflow."

Sarah Johnson

Product Manager at TechCorp

``` UPGRADE NOW Why Choose Premium? --------------------- Unlock advanced features and take your business to the next level. ### Free Plan Basic features for small teams - Up to 5 team members - Basic analytics - 5GB storage - Advanced security - Custom integrations [ Current Plan ](#signup) ### Premium Plan Advanced features for growing businesses - Unlimited team members - Advanced analytics & reporting - Unlimited storage - Enterprise-grade security - Custom integrations & API access [ Upgrade Now ](#upgrade) ![Customer](https://placehold.co/80x80)> "Upgrading to Premium was a game-changer for our team. The advanced features and unlimited storage have significantly improved our workflow." Sarah Johnson Product Manager at TechCorp <section 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 space="p:large tw-lg:p:big-3x" visual="rounded:big bg:neutral-100"> <div space="m-x:auto max-w:\[4xl\]"> <div space="m-b:large" visual="text:center"> <span layout="inline" space="m-b:medium p-x:medium p-y:small" visual="rounded:round bg:blue-100 text-size:small font:tw-semibold text:blue-600" >UPGRADE NOW</span > <h2 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mount"> Why Choose Premium? </h2> <p visual="text-size:large tw-lg:text-size:big"> Unlock advanced features and take your business to the next level. </p> </div> <!-- Feature Comparison --> <div layout="grid tw-lg:grid-cols:2" space="m-b:large g:medium"> <!-- Free Features --> <div space="p:medium-3x" visual="rounded:medium bg:white"> <div space="m-b:medium-3x"> <h3 visual="text-size:big font:tw-bold">Free Plan</h3> <p visual="text-size:small text:neutral-600"> Basic features for small teams </p> </div> <ul space="m-b:medium-3x" class="space-y-4"> <li layout="flex items:center" space="g:small-3x"> <i visual="text:green-500" class="fas fa-check"></i> <span>Up to 5 team members</span> </li> <li layout="flex items:center" space="g:small-3x"> <i visual="text:green-500" class="fas fa-check"></i> <span>Basic analytics</span> </li> <li layout="flex items:center" space="g:small-3x"> <i visual="text:green-500" class="fas fa-check"></i> <span>5GB storage</span> </li> <li layout="flex items:center" space="g:small-3x" visual="text:neutral-400"> <i class="fas fa-times"></i> <span>Advanced security</span> </li> <li layout="flex items:center" space="g:small-3x" visual="text:neutral-400"> <i class="fas fa-times"></i> <span>Custom integrations</span> </li> </ul> <a href="#signup" layout="flex items:center justify:center" space="h:big w:\[100%\]" visual="rounded:medium border-w:regular border:neutral-200 font:tw-semibold hover:border:blue-600 hover:text:blue-600" > Current Plan </a> </div> <!-- Premium Features --> <div space="p:medium-3x" visual="rounded:medium bg:blue-600 text:white"> <div space="m-b:medium-3x"> <h3 visual="text-size:big font:tw-bold">Premium Plan</h3> <p visual="text-size:small text:blue-200"> Advanced features for growing businesses </p> </div> <ul space="m-b:medium-3x" class="space-y-4"> <li layout="flex items:center" space="g:small-3x"> <i class="fas fa-check"></i> <span>Unlimited team members</span> </li> <li layout="flex items:center" space="g:small-3x"> <i class="fas fa-check"></i> <span>Advanced analytics & reporting</span> </li> <li layout="flex items:center" space="g:small-3x"> <i class="fas fa-check"></i> <span>Unlimited storage</span> </li> <li layout="flex items:center" space="g:small-3x"> <i class="fas fa-check"></i> <span>Enterprise-grade security</span> </li> <li layout="flex items:center" space="g:small-3x"> <i class="fas fa-check"></i> <span>Custom integrations & API access</span> </li> </ul> <a href="#upgrade" layout="flex items:center justify:center" space="h:big w:\[100%\]" visual="rounded:medium bg:white font:tw-semibold text:blue-600" class="hover:bg-opacity-90" > Upgrade Now </a> </div> </div> <!-- Testimonial --> <div layout="flex col items:center" space="g:medium p:medium-3x" visual="rounded:medium bg:white text:center" > <img src="https://placehold.co/80x80" alt="Customer" space="h:big-3x w:big-3x" visual="rounded:round" /> <blockquote visual="text-size:large italic"> "Upgrading to Premium was a game-changer for our team. The advanced features and unlimited storage have significantly improved our workflow." </blockquote> <div> <p visual="font:tw-semibold">Sarah Johnson</p> <p visual="text-size:small text:neutral-600"> Product Manager at TechCorp </p> </div> </div> </div> </div> </section> COPY ```
UPGRADE NOW

Why Choose Premium?

Unlock advanced features and take your business to the next level.

Free Plan

Basic features for small teams

  • Up to 5 team members
  • Basic analytics
  • 5GB storage
  • Advanced security
  • Custom integrations
Current Plan

Premium Plan

Advanced features for growing businesses

  • Unlimited team members
  • Advanced analytics & reporting
  • Unlimited storage
  • Enterprise-grade security
  • Custom integrations & API access
Upgrade Now
Customer
"Upgrading to Premium was a game-changer for our team. The advanced features and unlimited storage have significantly improved our workflow."

Sarah Johnson

Product Manager at TechCorp

``` #### [\#](https://senangstart.com/sections/cta-3/llms.txt)Product CTA Interactive cta Features an engaging call-to-action for a product, often with interactive hover effects on visuals. TailwindCSS SenangStart CSS ![](https://placehold.co/800x400) Start Building with SenangWebs ============================== Drag & drop website builder for effortless online presence. Came with SenangStart templates, sections & components library built-in. [ Start Now! ](https://use.senangwebs.com) ![](https://placehold.co/300x400) <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="group relative relative grid grid-cols-1 gap-4 overflow-hidden rounded-lg border bg-black text-white shadow-lg lg:grid-cols-3"> <div class="absolute left-0 top-0 h-full w-full overflow-hidden"> <img src="https://placehold.co/800x400" loading="lazy" class="h-full w-full object-cover opacity-70 blur-2xl" /> </div> <div class="z-10 col-span-1 flex flex-col justify-center p-8 lg:col-span-2 lg:px-16 lg:py-12"> <h1 class="mb-2 text-2xl font-semibold capitalize lg:text-6xl lg:font-bold">Start Building with <span class="text-blue-600">SenangWebs</span></h1> <p class="mb-4 w-full text-base lg:mb-8 lg:text-2xl">Drag &amp; drop website builder for effortless online presence. Came with SenangStart templates, sections &amp; components library built-in.</p> <div id="in87r6" class="flex flex-col gap-4 lg:flex-row"><a id="ibapy4" href="https://use.senangwebs.com" type="button" target="\_blank" class="flex h-12 w-full items-center justify-center rounded-lg bg-blue-600 px-6 text-lg font-semibold text-white hover:opacity-80 lg:max-w-max"> Start Now! </a></div> </div> <div class="z-10 flex items-end justify-center"> <img id="ivfr4c" src="https://placehold.co/300x400" class="scale-120 w-full duration-300 group-hover:-ml-16" /> </div> </div> </section> COPY ```

Start Building with SenangWebs

Drag & drop website builder for effortless online presence. Came with SenangStart templates, sections & components library built-in.

``` ![](https://placehold.co/800x400) Start Building with SenangWebs ============================== Drag & drop website builder for effortless online presence. Came with SenangStart templates, sections & components library built-in. [ Start Now! ](https://use.senangwebs.com) ![](https://placehold.co/300x400) <section 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 layout="relative relative grid grid-cols:1 overflow:hidden tw-lg:grid-cols:3" space="g:medium" visual="rounded:medium border-w:thin bg:black text:white shadow:big" class="group"> <div layout="absolute left:none top:none overflow:hidden" space="h:\[100%\] w:\[100%\]"> <img src="https://placehold.co/800x400" loading="lazy" layout="object:cover" space="h:\[100%\] w:\[100%\]" visual="opacity:70" class="blur-2xl" /> </div> <div layout="col-span:1 flex col justify:center tw-lg:col-span:2" space="p:large tw-lg:p-x:big-3x tw-lg:p-y:big" class="z-10"> <h1 space="m-b:small" visual="text-size:huge font:tw-semibold capitalize tw-lg:text-size:mega tw-lg:font:tw-bold">Start Building with <span visual="text:blue-600">SenangWebs</span></h1> <p space="m-b:medium w:\[100%\] tw-lg:m-b:large" visual="text-size:base tw-lg:text-size:huge">Drag &amp; drop website builder for effortless online presence. Came with SenangStart templates, sections &amp; components library built-in.</p> <div id="in87r6" layout="flex col tw-lg:row" space="g:medium"><a id="ibapy4" href="https://use.senangwebs.com" 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:blue-600 text-size:large font:tw-semibold text:white hover:opacity:80"> Start Now! </a></div> </div> <div layout="flex items:end justify:center" class="z-10"> <img id="ivfr4c" src="https://placehold.co/300x400" space="w:\[100%\]" visual="duration:slow" class="scale-120 group-hover:-ml-16" /> </div> </div> </section> COPY ```

Start Building with SenangWebs

Drag & drop website builder for effortless online presence. Came with SenangStart templates, sections & components library built-in.

``` #### [\#](https://senangstart.com/sections/cta-4/llms.txt)Profile CTA Background cta Prompts users to download a company profile via a CTA, set against a background image with contact details. TailwindCSS SenangStart CSS Download Our Profile ==================== Want to see if we are a good fit your next App or System project? Download our profile by clicking the button below. ![](https://placehold.co/48x48) Hamdan Engineering Consultant [Download Now](#) <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="relative grid grid-cols-1 gap-4 overflow-hidden rounded-lg bg-gray-200 p-4 lg:grid-cols-3 lg:px-16 lg:py-12" style=" background-image: url('https://placehold.co/1200x400/2563EB/FFFFFF'); background-size: cover; background-position: center; " > <div class="col-span-1 flex flex-col justify-center lg:col-span-2"> <h1 class="mb-2 text-2xl font-semibold capitalize lg:text-6xl lg:font-bold">Download Our Profile</h1> <p class="mb-4 w-full text-base font-semibold opacity-70 lg:mb-8 lg:text-2xl">Want to see if we are a good fit your next App or System project? Download our profile by clicking the button below.</p> <div class="mb-4 flex lg:mb-8"> <div class="relative mr-4 h-12 w-12 overflow-hidden rounded-full bg-gray-200"> <img src="https://placehold.co/48x48" class="absolute left-0 top-0 w-12" /> </div> <div class="flex flex-col justify-center font-semibold"> <p class="text-sm">Hamdan</p> <p class="text-xs">Engineering Consultant</p> </div> </div> <a href="#" class="flex items-center justify-center rounded-lg bg-white px-8 py-3 text-center font-semibold text-blue-600 lg:max-w-max lg:text-lg">Download Now</a> </div> <div class="justify-right hidden lg:flex"></div> </div> </section> COPY ```

Download Our Profile

Want to see if we are a good fit your next App or System project? Download our profile by clicking the button below.

Hamdan

Engineering Consultant

Download Now
``` Download Our Profile ==================== Want to see if we are a good fit your next App or System project? Download our profile by clicking the button below. ![](https://placehold.co/48x48) Hamdan Engineering Consultant [Download Now](#) <section 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 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:medium bg:gray-200" style=" background-image: url('https://placehold.co/1200x400/2563EB/FFFFFF'); background-size: cover; background-position: center; " > <div layout="col-span:1 flex col justify:center tw-lg:col-span:2"> <h1 space="m-b:small" visual="text-size:huge font:tw-semibold capitalize tw-lg:text-size:mega tw-lg:font:tw-bold">Download Our Profile</h1> <p space="m-b:medium w:\[100%\] tw-lg:m-b:large" visual="text-size:base font:tw-semibold opacity:70 tw-lg:text-size:huge">Want to see if we are a good fit your next App or System project? Download our profile by clicking the button below.</p> <div layout="flex" space="m-b:medium tw-lg:m-b:large"> <div layout="relative overflow:hidden" space="m-r:medium h:big w:big" visual="rounded:round bg:gray-200"> <img src="https://placehold.co/48x48" layout="absolute left:none top:none" space="w:big" /> </div> <div layout="flex col justify:center" visual="font:tw-semibold"> <p visual="text-size:small">Hamdan</p> <p visual="text-size:mini">Engineering Consultant</p> </div> </div> <a href="#" layout="flex items:center justify:center" space="p-x:large p-y:small-3x tw-lg:max-w:\[max-content\]" visual="rounded:medium bg:white text:center font:tw-semibold text:blue-600 tw-lg:text-size:large">Download Now</a> </div> <div layout="hidden tw-lg:flex" class="justify-right"></div> </div> </section> COPY ```

Download Our Profile

Want to see if we are a good fit your next App or System project? Download our profile by clicking the button below.

Hamdan

Engineering Consultant

Download Now
``` #### [\#](https://senangstart.com/sections/features-2/llms.txt)App Features Centered feature Showcases key app features with descriptive text and icons, elegantly arranged around a central mobile mockup. TailwindCSS SenangStart CSS World Class Practical Features =================== Just more reasons for you start use it... View Workflow ============= Learn to figuring it out by staring at the automatically generated workflow Modern Design ============== Simple and easy to use, even my younger sibling can nailed it ![](https://placehold.co/480x820) Preset Parameters ================== Make life easier, just pick from numbers of preset value of conductivity Shuffle Equation ================= Alter the equation to find the solution you need most <section id="ioqulp" class="bg-blue-500 text-white"> <div id="i3vb5c" class="container mx-auto px-6 py-24 lg:px-16"> <div id="igco75" class="mb-8 grid grid-cols-1 lg:mx-24 lg:mb-16 lg:grid-cols-2"> <div id="idha7q" class="lg:col-span-2"> <div id="inim5x-2" class="mb-2 max-w-max rounded-md bg-white px-2 font-bold text-blue-500 lg:mb-4">World Class</div> </div> <div id="ig0kv8"> <h1 id="i38ymj" class="mb-2 text-2xl font-bold capitalize lg:mb-0 lg:text-6xl">Practical Features<br /></h1> </div> <div id="ig68er" class="flex items-center"> <p id="ingt2r" class="w-full text-left text-base text-black lg:text-right lg:text-2xl">Just more reasons for you start use it...<br /></p> </div> </div> <div id="irsp1j" class="grid lg:grid-cols-3"> <div id="ifjw28" class="order-2 grid h-full gap-6 pb-6 lg:order-1 lg:grid-rows-2 lg:pb-0 lg:pt-32 lg:text-right"> <div id="iptdcu" class="flex"> <div id="in6p38" class="bg-prime flex aspect-square h-16 w-16 items-center justify-center rounded-full bg-white text-3xl text-blue-500 shadow lg:order-2"> <i id="i6gw6s" class="far fa-file-image"></i> </div> <div id="ityz4p" class="px-6 lg:order-1"> <h1 id="imlp9h" class="text-2xl font-bold"></h1> <h1 id="in84sc-2" draggable="false" class="gjs-selected text-2xl font-bold">View Workflow</h1> <p id="izinek" class="mt-2">Learn to figuring it out by staring at the automatically generated workflow<br /></p> </div> </div> <div id="ikr03e" class="flex"> <div id="i3576u" class="bg-prime flex aspect-square h-16 w-16 items-center justify-center rounded-full bg-white text-3xl text-blue-500 shadow lg:order-2"> <i class="fas fa-desktop"></i> </div> <div id="irqwpl" class="px-6 lg:order-1"> <h1 id="i3ig09" class="text-2xl font-bold">Modern Design<br /></h1> <p id="i1kgg3" class="mt-2">Simple and easy to use, even my younger sibling can nailed it<br /></p> </div> </div> </div> <div class="order-1 mb-12 px-12 lg:order-2 lg:mb-0"> <div class="relative w-full overflow-hidden"><img id="icjs4g" src="https://placehold.co/480x820" class="w-full" /></div> </div> <div id="ibhbu3" class="order-3 grid h-full gap-6 lg:order-3 lg:grid-rows-2 lg:pt-32"> <div class="flex"> <div id="idnyvy" class="bg-prime flex aspect-square h-16 w-16 items-center justify-center rounded-full bg-white text-3xl text-blue-500 shadow"> <i id="i95e3q" class="fas fa-cube"></i> </div> <div id="iohomb" class="px-6"> <h1 id="i1f4g8" class="text-2xl font-bold">Preset Parameters<br /></h1> <p id="iz2gzg" class="mt-2">Make life easier, just pick from numbers of preset value of conductivity<br /></p> </div> </div> <div id="iw51tu" class="flex"> <div id="ie8kce" class="bg-prime flex aspect-square h-16 w-16 items-center justify-center rounded-full bg-white text-3xl text-blue-500 shadow"> <i id="i7o55t" class="fas fa-random"></i> </div> <div id="i0mo7i" class="px-6"> <h1 id="i9slfb" class="text-2xl font-bold">Shuffle Equation<br /></h1> <p id="iesxqm" class="mt-2">Alter the equation to find the solution you need most<br /></p> </div> </div> </div> </div> </div> </section> COPY ```
World Class

Practical Features

Just more reasons for you start use it...

View Workflow

Learn to figuring it out by staring at the automatically generated workflow

Modern Design

Simple and easy to use, even my younger sibling can nailed it

Preset Parameters

Make life easier, just pick from numbers of preset value of conductivity

Shuffle Equation

Alter the equation to find the solution you need most

``` World Class Practical Features =================== Just more reasons for you start use it... View Workflow ============= Learn to figuring it out by staring at the automatically generated workflow Modern Design ============== Simple and easy to use, even my younger sibling can nailed it ![](https://placehold.co/480x820) Preset Parameters ================== Make life easier, just pick from numbers of preset value of conductivity Shuffle Equation ================= Alter the equation to find the solution you need most <section id="ioqulp" visual="bg:blue-500 text:white"> <div id="i3vb5c" layout="container" space="m-x:auto p-x:medium-3x p-y:giant tw-lg:p-x:big-3x"> <div id="igco75" layout="grid grid-cols:1 tw-lg:grid-cols:2" space="m-b:large tw-lg:m-x:giant tw-lg:m-b:big-3x"> <div id="idha7q" layout="tw-lg:col-span:2"> <div id="inim5x-2" space="m-b:small max-w:\[max-content\] p-x:small tw-lg:m-b:medium" visual="rounded:small bg:white font:tw-bold text:blue-500">World Class</div> </div> <div id="ig0kv8"> <h1 id="i38ymj" space="m-b:small tw-lg:m-b:none" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">Practical Features<br /></h1> </div> <div id="ig68er" layout="flex items:center"> <p id="ingt2r" space="w:\[100%\]" visual="text:left text-size:base text:black tw-lg:text:right tw-lg:text-size:huge">Just more reasons for you start use it...<br /></p> </div> </div> <div id="irsp1j" layout="grid tw-lg:grid-cols:3"> <div id="ifjw28" layout="order:2 grid tw-lg:order:1 tw-lg:grid-rows:2" space="h:\[100%\] g:medium-3x p-b:medium-3x tw-lg:p-b:none tw-lg:p-t:giant-3x" visual="tw-lg:text:right"> <div id="iptdcu" layout="flex"> <div id="in6p38" layout="flex items:center justify:center tw-lg:order:2" space="h:big-3x w:big-3x" visual="rounded:round bg:white text-size:grand text:blue-500 shadow:small" class="bg-prime aspect-square"> <i id="i6gw6s" class="far fa-file-image"></i> </div> <div id="ityz4p" layout="tw-lg:order:1" space="p-x:medium-3x"> <h1 id="imlp9h" visual="text-size:huge font:tw-bold"></h1> <h1 id="in84sc-2" draggable="false" visual="text-size:huge font:tw-bold" class="gjs-selected">View Workflow</h1> <p id="izinek" space="m-t:small">Learn to figuring it out by staring at the automatically generated workflow<br /></p> </div> </div> <div id="ikr03e" layout="flex"> <div id="i3576u" layout="flex items:center justify:center tw-lg:order:2" space="h:big-3x w:big-3x" visual="rounded:round bg:white text-size:grand text:blue-500 shadow:small" class="bg-prime aspect-square"> <i class="fas fa-desktop"></i> </div> <div id="irqwpl" layout="tw-lg:order:1" space="p-x:medium-3x"> <h1 id="i3ig09" visual="text-size:huge font:tw-bold">Modern Design<br /></h1> <p id="i1kgg3" space="m-t:small">Simple and easy to use, even my younger sibling can nailed it<br /></p> </div> </div> </div> <div layout="order:1 tw-lg:order:2" space="m-b:big p-x:big tw-lg:m-b:none"> <div layout="relative overflow:hidden" space="w:\[100%\]"><img id="icjs4g" src="https://placehold.co/480x820" space="w:\[100%\]" /></div> </div> <div id="ibhbu3" layout="order:3 grid tw-lg:order:3 tw-lg:grid-rows:2" space="h:\[100%\] g:medium-3x tw-lg:p-t:giant-3x"> <div layout="flex"> <div id="idnyvy" layout="flex items:center justify:center" space="h:big-3x w:big-3x" visual="rounded:round bg:white text-size:grand text:blue-500 shadow:small" class="bg-prime aspect-square"> <i id="i95e3q" class="fas fa-cube"></i> </div> <div id="iohomb" space="p-x:medium-3x"> <h1 id="i1f4g8" visual="text-size:huge font:tw-bold">Preset Parameters<br /></h1> <p id="iz2gzg" space="m-t:small">Make life easier, just pick from numbers of preset value of conductivity<br /></p> </div> </div> <div id="iw51tu" layout="flex"> <div id="ie8kce" layout="flex items:center justify:center" space="h:big-3x w:big-3x" visual="rounded:round bg:white text-size:grand text:blue-500 shadow:small" class="bg-prime aspect-square"> <i id="i7o55t" class="fas fa-random"></i> </div> <div id="i0mo7i" space="p-x:medium-3x"> <h1 id="i9slfb" visual="text-size:huge font:tw-bold">Shuffle Equation<br /></h1> <p id="iesxqm" space="m-t:small">Alter the equation to find the solution you need most<br /></p> </div> </div> </div> </div> </div> </section> COPY ```
World Class

Practical Features

Just more reasons for you start use it...

View Workflow

Learn to figuring it out by staring at the automatically generated workflow

Modern Design

Simple and easy to use, even my younger sibling can nailed it

Preset Parameters

Make life easier, just pick from numbers of preset value of conductivity

Shuffle Equation

Alter the equation to find the solution you need most

``` #### [\#](https://senangstart.com/sections/features-1/llms.txt)App Features Mobile feature Highlights app functionalities with a mobile device visual and descriptive cards, optimized for showcasing features. TailwindCSS SenangStart CSS Meet QHeat Your New Best Friend ===================== Want to be that cool kid, who can explain Heat Transfer to the whole class? And solving complex problem on the board confidently? Get this brand new app that was designed for Heat Transfer learning and understanding. ![](https://placehold.co/320x480) #### View Workflow. Learn to figuring it out by staring at the automatically generated workflow. #### Shuffle Equation. Alter the equation to find the solution you need most. #### Preset Parameters. Make life easier, just pick from numbers of preset value of conductivity. <section id="islbl" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div id="i1g8b4" class="mb-8 grid grid-cols-1 lg:mx-24 lg:mb-16"> <div id="ifhpfw" class="col-span-1"> <div id="io3zh" class="mb-2 max-w-max rounded-md bg-blue-600 px-2 font-bold text-white lg:mb-4">Meet QHeat</div> </div> <div id="ii2jm"> <h1 id="iyj0h" class="mb-2 text-2xl font-bold capitalize text-blue-600 lg:mb-4 lg:text-6xl">Your New Best Friend<br /></h1> </div> <div id="ia8bfp" class="flex items-center"> <p id="i7p89" class="w-full text-left text-base font-medium lg:text-2xl">Want to be that cool kid, who can explain Heat Transfer to the whole class? And solving complex problem on the board confidently? Get this brand new app that was designed for Heat Transfer learning and understanding.<br /></p> </div> </div> <div id="i4q09" class="grid gap-4 lg:grid-cols-2"> <div id="istii" class="flex items-center"><img id="i5f9sn" src="https://placehold.co/320x480" class="mx-auto w-full max-w-md" /></div> <div id="iowf7j" class="flex items-center"> <div id="ilv2h" class="grid gap-4"> <div id="izo6k" class="flex flex-col rounded-3xl border-2 border-blue-600 p-4 lg:mr-8"> <div id="i0lmy" class="mb-4 flex h-16 w-16 items-center justify-center rounded-full border-2 border-blue-600 text-2xl text-blue-600"> <i id="ikqdo5" class="far fa-file-image"></i> </div> <h4 id="iadh3" class="mb-2 text-lg font-semibold">View Workflow.<br /></h4> <p id="iuds9" class="text-lg">Learn to figuring it out by staring at the automatically generated workflow.<br /></p> </div> <div id="i2gaze" class="flex flex-col rounded-3xl border-2 border-blue-600 p-4 lg:ml-8"> <div id="i83zyh" class="mb-4 flex h-16 w-16 items-center justify-center rounded-full border-2 border-blue-600 text-2xl text-blue-600"> <i id="i04wah" class="fas fa-random"></i> </div> <h4 id="itajj" class="mb-2 text-lg font-semibold">Shuffle Equation.<br /></h4> <p id="ig8dk" class="text-lg">Alter the equation to find the solution you need most.<br /></p> </div> <div id="izcj4i" class="flex flex-col rounded-3xl border-2 border-blue-600 p-4 lg:mr-8"> <div id="ixb8lc" class="mb-4 flex h-16 w-16 items-center justify-center rounded-full border-2 border-blue-600 text-2xl text-blue-600"> <i id="i2sowp" class="fas fa-cube"></i> </div> <h4 id="i71hl" class="mb-2 text-lg font-semibold">Preset Parameters.<br /></h4> <p id="i2cwq" class="text-lg">Make life easier, just pick from numbers of preset value of conductivity.<br /></p> </div> </div> </div> </div> </section> COPY ```
Meet QHeat

Your New Best Friend

Want to be that cool kid, who can explain Heat Transfer to the whole class? And solving complex problem on the board confidently? Get this brand new app that was designed for Heat Transfer learning and understanding.

View Workflow.

Learn to figuring it out by staring at the automatically generated workflow.

Shuffle Equation.

Alter the equation to find the solution you need most.

Preset Parameters.

Make life easier, just pick from numbers of preset value of conductivity.

``` Meet QHeat Your New Best Friend ===================== Want to be that cool kid, who can explain Heat Transfer to the whole class? And solving complex problem on the board confidently? Get this brand new app that was designed for Heat Transfer learning and understanding. ![](https://placehold.co/320x480) #### View Workflow. Learn to figuring it out by staring at the automatically generated workflow. #### Shuffle Equation. Alter the equation to find the solution you need most. #### Preset Parameters. Make life easier, just pick from numbers of preset value of conductivity. <section id="islbl" 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="i1g8b4" layout="grid grid-cols:1" space="m-b:large tw-lg:m-x:giant tw-lg:m-b:big-3x"> <div id="ifhpfw" layout="col-span:1"> <div id="io3zh" space="m-b:small max-w:\[max-content\] p-x:small tw-lg:m-b:medium" visual="rounded:small bg:blue-600 font:tw-bold text:white">Meet QHeat</div> </div> <div id="ii2jm"> <h1 id="iyj0h" space="m-b:small tw-lg:m-b:medium" visual="text-size:huge font:tw-bold capitalize text:blue-600 tw-lg:text-size:mega">Your New Best Friend<br /></h1> </div> <div id="ia8bfp" layout="flex items:center"> <p id="i7p89" space="w:\[100%\]" visual="text:left text-size:base font:tw-medium tw-lg:text-size:huge">Want to be that cool kid, who can explain Heat Transfer to the whole class? And solving complex problem on the board confidently? Get this brand new app that was designed for Heat Transfer learning and understanding.<br /></p> </div> </div> <div id="i4q09" layout="grid tw-lg:grid-cols:2" space="g:medium"> <div id="istii" layout="flex items:center"><img id="i5f9sn" src="https://placehold.co/320x480" space="m-x:auto w:\[100%\] max-w:\[md\]" /></div> <div id="iowf7j" layout="flex items:center"> <div id="ilv2h" layout="grid" space="g:medium"> <div id="izo6k" layout="flex col" space="p:medium tw-lg:m-r:large" visual="rounded:big border-w:regular border:blue-600"> <div id="i0lmy" layout="flex items:center justify:center" space="m-b:medium h:big-3x w:big-3x" visual="rounded:round border-w:regular border:blue-600 text-size:huge text:blue-600"> <i id="ikqdo5" class="far fa-file-image"></i> </div> <h4 id="iadh3" space="m-b:small" visual="text-size:large font:tw-semibold">View Workflow.<br /></h4> <p id="iuds9" visual="text-size:large">Learn to figuring it out by staring at the automatically generated workflow.<br /></p> </div> <div id="i2gaze" layout="flex col" space="p:medium tw-lg:m-l:large" visual="rounded:big border-w:regular border:blue-600"> <div id="i83zyh" layout="flex items:center justify:center" space="m-b:medium h:big-3x w:big-3x" visual="rounded:round border-w:regular border:blue-600 text-size:huge text:blue-600"> <i id="i04wah" class="fas fa-random"></i> </div> <h4 id="itajj" space="m-b:small" visual="text-size:large font:tw-semibold">Shuffle Equation.<br /></h4> <p id="ig8dk" visual="text-size:large">Alter the equation to find the solution you need most.<br /></p> </div> <div id="izcj4i" layout="flex col" space="p:medium tw-lg:m-r:large" visual="rounded:big border-w:regular border:blue-600"> <div id="ixb8lc" layout="flex items:center justify:center" space="m-b:medium h:big-3x w:big-3x" visual="rounded:round border-w:regular border:blue-600 text-size:huge text:blue-600"> <i id="i2sowp" class="fas fa-cube"></i> </div> <h4 id="i71hl" space="m-b:small" visual="text-size:large font:tw-semibold">Preset Parameters.<br /></h4> <p id="i2cwq" visual="text-size:large">Make life easier, just pick from numbers of preset value of conductivity.<br /></p> </div> </div> </div> </div> </section> COPY ```
Meet QHeat

Your New Best Friend

Want to be that cool kid, who can explain Heat Transfer to the whole class? And solving complex problem on the board confidently? Get this brand new app that was designed for Heat Transfer learning and understanding.

View Workflow.

Learn to figuring it out by staring at the automatically generated workflow.

Shuffle Equation.

Alter the equation to find the solution you need most.

Preset Parameters.

Make life easier, just pick from numbers of preset value of conductivity.

``` #### [\#](https://senangstart.com/sections/features-4/llms.txt)Feature Image Toggle feature Interactively displays features where selecting a feature description updates a corresponding image showcase. TailwindCSS SenangStart CSS ![](https://placehold.co/600x600) ![](https://placehold.co/600x600) ![](https://placehold.co/600x600) FEATURES Discover Our Platform ======================= ### Intuitive Interface User-friendly design that makes navigation a breeze ### Real-time Collaboration Work together seamlessly with your team ### Advanced Analytics Get insights that drive better decisions <section class="container mx-auto mb-16 px-6 lg:px-16" x-data="{ activeFeature: 1 }" > <div class="grid gap-8 lg:grid-cols-2"> <div class="order-2 lg:order-1"> <div class="relative aspect-square overflow-hidden rounded-2xl bg-neutral-100 lg:aspect-auto" > <img x-show="activeFeature === 1" src="https://placehold.co/600x600" class="h-full w-full object-cover" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0" /> <img x-show="activeFeature === 2" src="https://placehold.co/600x600" class="h-full w-full object-cover" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0" /> <img x-show="activeFeature === 3" src="https://placehold.co/600x600" class="h-full w-full object-cover" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0" /> </div> </div> <div class="order-1 flex flex-col justify-center lg:order-2"> <div class="mb-2 max-w-max rounded-lg bg-blue-100 px-3 py-1 text-blue-600" > <p class="text-sm font-bold">FEATURES</p> </div> <h1 class="mb-8 text-4xl font-bold lg:text-6xl"> Discover Our Platform </h1> <div class="space-y-6"> <button @click="activeFeature = 1" class="w-full rounded-xl p-4 text-left transition-colors" :class="{ 'bg-blue-600 text-white': activeFeature === 1, 'bg-neutral-100': activeFeature !== 1 }" > <h3 class="text-xl font-bold">Intuitive Interface</h3> <p class="mt-2"> User-friendly design that makes navigation a breeze </p> </button> <button @click="activeFeature = 2" class="w-full rounded-xl p-4 text-left transition-colors" :class="{ 'bg-blue-600 text-white': activeFeature === 2, 'bg-neutral-100': activeFeature !== 2 }" > <h3 class="text-xl font-bold">Real-time Collaboration</h3> <p class="mt-2">Work together seamlessly with your team</p> </button> <button @click="activeFeature = 3" class="w-full rounded-xl p-4 text-left transition-colors" :class="{ 'bg-blue-600 text-white': activeFeature === 3, 'bg-neutral-100': activeFeature !== 3 }" > <h3 class="text-xl font-bold">Advanced Analytics</h3> <p class="mt-2">Get insights that drive better decisions</p> </button> </div> </div> </div> </section> COPY ```

FEATURES

Discover Our Platform

``` ![](https://placehold.co/600x600) ![](https://placehold.co/600x600) ![](https://placehold.co/600x600) FEATURES Discover Our Platform ======================= ### Intuitive Interface User-friendly design that makes navigation a breeze ### Real-time Collaboration Work together seamlessly with your team ### Advanced Analytics Get insights that drive better decisions <section layout="container" space="m-x:auto m-b:big-3x p-x:medium-3x tw-lg:p-x:big-3x" x-data="{ activeFeature: 1 }" > <div layout="grid tw-lg:grid-cols:2" space="g:large"> <div layout="order:2 tw-lg:order:1"> <div layout="relative overflow:hidden" visual="rounded:big bg:neutral-100" class="aspect-square lg:aspect-auto" > <img x-show="activeFeature === 1" src="https://placehold.co/600x600" layout="object:cover" space="h:\[100%\] w:\[100%\]" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0" /> <img x-show="activeFeature === 2" src="https://placehold.co/600x600" layout="object:cover" space="h:\[100%\] w:\[100%\]" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0" /> <img x-show="activeFeature === 3" src="https://placehold.co/600x600" layout="object:cover" space="h:\[100%\] w:\[100%\]" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0" /> </div> </div> <div layout="order:1 flex col justify:center tw-lg:order:2"> <div space="m-b:small max-w:\[max-content\] p-x:small-3x p-y:tiny" visual="rounded:medium bg:blue-100 text:blue-600" > <p visual="text-size:small font:tw-bold">FEATURES</p> </div> <h1 space="m-b:large" visual="text-size:giant font:tw-bold tw-lg:text-size:mega"> Discover Our Platform </h1> <div class="space-y-6"> <button @click="activeFeature = 1" space="w:\[100%\] p:medium" visual="rounded:medium text:left transition:colors" :class="{ 'bg-blue-600 text-white': activeFeature === 1, 'bg-neutral-100': activeFeature !== 1 }" > <h3 visual="text-size:big font:tw-bold">Intuitive Interface</h3> <p space="m-t:small"> User-friendly design that makes navigation a breeze </p> </button> <button @click="activeFeature = 2" space="w:\[100%\] p:medium" visual="rounded:medium text:left transition:colors" :class="{ 'bg-blue-600 text-white': activeFeature === 2, 'bg-neutral-100': activeFeature !== 2 }" > <h3 visual="text-size:big font:tw-bold">Real-time Collaboration</h3> <p space="m-t:small">Work together seamlessly with your team</p> </button> <button @click="activeFeature = 3" space="w:\[100%\] p:medium" visual="rounded:medium text:left transition:colors" :class="{ 'bg-blue-600 text-white': activeFeature === 3, 'bg-neutral-100': activeFeature !== 3 }" > <h3 visual="text-size:big font:tw-bold">Advanced Analytics</h3> <p space="m-t:small">Get insights that drive better decisions</p> </button> </div> </div> </div> </section> COPY ```

FEATURES

Discover Our Platform

``` #### [\#](https://senangstart.com/sections/features-3/llms.txt)Feature Large Image feature Highlights a key service or feature with a dominant image and concise descriptive text for strong visual impact. TailwindCSS SenangStart CSS Premium Service =============== ###### Thousands of specialities More and more physicians are becoming certified in multiple specialties. Some medical specialties, like dermatology, ophthalmology, and anesthesiology, are often ranked among the best medical specialties for lifestyle. ![](https://placehold.co/800x500) <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <h1 class="w-full text-center text-4xl font-bold lg:text-7xl">Premium Service</h1> <div class="h-4 w-full border-b-2 border-neutral-200"></div> <div class="h-4 w-full"></div> <div class="mb-4 grid gap-4 lg:grid-cols-3"> <div> <h6 class="text-2xl font-bold lg:text-4xl">Thousands of specialities</h6> </div> <div class="lg:col-span-2"> <p class="text-xl">More and more physicians are becoming certified in multiple specialties. Some medical specialties, like dermatology, ophthalmology, and anesthesiology, are often ranked among the best medical specialties for lifestyle.</p> </div> </div> <div class="relative overflow-hidden rounded-lg bg-gray-200"> <img src="https://placehold.co/800x500" class="w-full" /> </div> </section> COPY ```

Premium Service

Thousands of specialities

More and more physicians are becoming certified in multiple specialties. Some medical specialties, like dermatology, ophthalmology, and anesthesiology, are often ranked among the best medical specialties for lifestyle.

``` Premium Service =============== ###### Thousands of specialities More and more physicians are becoming certified in multiple specialties. Some medical specialties, like dermatology, ophthalmology, and anesthesiology, are often ranked among the best medical specialties for lifestyle. ![](https://placehold.co/800x500) <section 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"> <h1 space="w:\[100%\]" visual="text:center text-size:giant font:tw-bold tw-lg:text-size:giga">Premium Service</h1> <div space="h:medium w:\[100%\]" visual="border-b-w:regular border:neutral-200"></div> <div space="h:medium w:\[100%\]"></div> <div layout="grid tw-lg:grid-cols:3" space="m-b:medium g:medium"> <div> <h6 visual="text-size:huge font:tw-bold tw-lg:text-size:giant">Thousands of specialities</h6> </div> <div layout="tw-lg:col-span:2"> <p visual="text-size:big">More and more physicians are becoming certified in multiple specialties. Some medical specialties, like dermatology, ophthalmology, and anesthesiology, are often ranked among the best medical specialties for lifestyle.</p> </div> </div> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200"> <img src="https://placehold.co/800x500" space="w:\[100%\]" /> </div> </section> COPY ```

Premium Service

Thousands of specialities

More and more physicians are becoming certified in multiple specialties. Some medical specialties, like dermatology, ophthalmology, and anesthesiology, are often ranked among the best medical specialties for lifestyle.

``` #### [\#](https://senangstart.com/sections/steps-2/llms.txt)App Onboarding Steps general Presents a clear, step-by-step guide for app onboarding, often using visuals and concise instructions. TailwindCSS SenangStart CSS 📱 How To Get Started ===================== 3 simple steps to start playing STEM-AR now. ![](https://placehold.co/320x480) #### Print the Marker Get ready to embark on an immersive learning journey by printing our specially designed markers. These markers serve as gateways to unlock a world of knowledge and discovery. #### Start the App Launch the STEM-AR app on your device and point it towards the printed marker. Watch in awe as the marker transforms into a portal, transporting you to interactive, three-dimensional models and simulations. [▶️ Start Now!](https://stem-ar.bookklik.com/game/) #### Ready Whether you're delving into the mysteries of physics, unraveling the complexities of mathematics, or engineering innovative solutions, STEM-AR is your companion in learning. <section id="islbl" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div id="i1g8b4" class="mb-8 grid grid-cols-1 text-center lg:mx-24 lg:mb-16"> <div id="ifhpfw" class="col-span-1"></div> <div id="ii2jm"> <h1 id="iyj0h" class="mb-2 text-3xl font-bold capitalize lg:mb-4 lg:text-6xl">📱 How To Get Started<br /></h1> </div> <div id="ia8bfp" class="flex items-center"> <p id="i7p89" class="w-full text-base font-medium lg:text-2xl">3 simple steps to start playing STEM-AR now.<br /></p> </div> </div> <div id="i4q09" class="grid gap-4 lg:grid-cols-2 lg:gap-16"> <div id="istii" class="flex items-center"><img id="i5f9sn" src="https://placehold.co/320x480" class="mx-auto w-full" /></div> <div id="iowf7j"> <div id="ilv2h" class="grid gap-4"> <div id="izo6k" class="flex flex-col rounded-2xl border-2 border-blue-600 bg-blue-100 p-4"> <div id="i0lmy" class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-600 text-3xl text-white"><i id="ikqdo5" class="fas fa-print"></i></div> <h4 id="iadh3" class="mb-2 text-lg font-semibold">Print the Marker<br /></h4> <p id="iuds9" class="text-lg">Get ready to embark on an immersive learning journey by printing our specially designed markers. These markers serve as gateways to unlock a world of knowledge and discovery.<br /></p> </div> <div id="i2gaze" class="flex flex-col rounded-2xl border-2 border-blue-600 bg-blue-100 p-4"> <div id="i83zyh" class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-600 text-3xl text-white"><i id="i04wah" class="fas fa-gamepad"></i></div> <h4 id="itajj" class="mb-2 text-lg font-semibold">Start the App<br /></h4> <p id="ig8dk" class="text-lg">Launch the STEM-AR app on your device and point it towards the printed marker. Watch in awe as the marker transforms into a portal, transporting you to interactive, three-dimensional models and simulations.<br /></p> <a href="https://stem-ar.bookklik.com/game/" type="button" target="\_blank" id="i1y3rk" class="mt-4 flex h-12 w-full items-center justify-center rounded-lg border-2 border-blue-600 bg-white px-6 text-lg font-semibold text-blue-600 hover:opacity-80 lg:max-w-max">▶️ Start Now!</a> </div> <div id="izcj4i" class="flex flex-col rounded-2xl border-2 border-blue-600 bg-blue-100 p-4"> <div id="ixb8lc" class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-600 text-3xl text-white"><i id="i2sowp" class="fas fa-check-circle"></i></div> <h4 id="i71hl" class="mb-2 text-lg font-semibold">Ready<br /></h4> <p id="i2cwq" class="text-lg">Whether you're delving into the mysteries of physics, unraveling the complexities of mathematics, or engineering innovative solutions, STEM-AR is your companion in learning.<br /></p> </div> </div> </div> </div> </section> COPY ```

📱 How To Get Started

3 simple steps to start playing STEM-AR now.

Print the Marker

Get ready to embark on an immersive learning journey by printing our specially designed markers. These markers serve as gateways to unlock a world of knowledge and discovery.

Start the App

Launch the STEM-AR app on your device and point it towards the printed marker. Watch in awe as the marker transforms into a portal, transporting you to interactive, three-dimensional models and simulations.

▶️ Start Now!

Ready

Whether you're delving into the mysteries of physics, unraveling the complexities of mathematics, or engineering innovative solutions, STEM-AR is your companion in learning.

``` 📱 How To Get Started ===================== 3 simple steps to start playing STEM-AR now. ![](https://placehold.co/320x480) #### Print the Marker Get ready to embark on an immersive learning journey by printing our specially designed markers. These markers serve as gateways to unlock a world of knowledge and discovery. #### Start the App Launch the STEM-AR app on your device and point it towards the printed marker. Watch in awe as the marker transforms into a portal, transporting you to interactive, three-dimensional models and simulations. [▶️ Start Now!](https://stem-ar.bookklik.com/game/) #### Ready Whether you're delving into the mysteries of physics, unraveling the complexities of mathematics, or engineering innovative solutions, STEM-AR is your companion in learning. <section id="islbl" 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="i1g8b4" layout="grid grid-cols:1" space="m-b:large tw-lg:m-x:giant tw-lg:m-b:big-3x" visual="text:center"> <div id="ifhpfw" layout="col-span:1"></div> <div id="ii2jm"> <h1 id="iyj0h" space="m-b:small tw-lg:m-b:medium" visual="text-size:grand font:tw-bold capitalize tw-lg:text-size:mega">📱 How To Get Started<br /></h1> </div> <div id="ia8bfp" layout="flex items:center"> <p id="i7p89" space="w:\[100%\]" visual="text-size:base font:tw-medium tw-lg:text-size:huge">3 simple steps to start playing STEM-AR now.<br /></p> </div> </div> <div id="i4q09" layout="grid tw-lg:grid-cols:2" space="g:medium tw-lg:g:big-3x"> <div id="istii" layout="flex items:center"><img id="i5f9sn" src="https://placehold.co/320x480" space="m-x:auto w:\[100%\]" /></div> <div id="iowf7j"> <div id="ilv2h" layout="grid" space="g:medium"> <div id="izo6k" layout="flex col" space="p:medium" visual="rounded:big border-w:regular border:blue-600 bg:blue-100"> <div id="i0lmy" layout="flex items:center justify:center" space="m-b:medium h:big-3x w:big-3x" visual="rounded:round bg:blue-600 text-size:grand text:white"><i id="ikqdo5" class="fas fa-print"></i></div> <h4 id="iadh3" space="m-b:small" visual="text-size:large font:tw-semibold">Print the Marker<br /></h4> <p id="iuds9" visual="text-size:large">Get ready to embark on an immersive learning journey by printing our specially designed markers. These markers serve as gateways to unlock a world of knowledge and discovery.<br /></p> </div> <div id="i2gaze" layout="flex col" space="p:medium" visual="rounded:big border-w:regular border:blue-600 bg:blue-100"> <div id="i83zyh" layout="flex items:center justify:center" space="m-b:medium h:big-3x w:big-3x" visual="rounded:round bg:blue-600 text-size:grand text:white"><i id="i04wah" class="fas fa-gamepad"></i></div> <h4 id="itajj" space="m-b:small" visual="text-size:large font:tw-semibold">Start the App<br /></h4> <p id="ig8dk" visual="text-size:large">Launch the STEM-AR app on your device and point it towards the printed marker. Watch in awe as the marker transforms into a portal, transporting you to interactive, three-dimensional models and simulations.<br /></p> <a href="https://stem-ar.bookklik.com/game/" type="button" target="\_blank" id="i1y3rk" layout="flex items:center justify:center" space="m-t:medium h:big w:\[100%\] p-x:medium-3x tw-lg:max-w:\[max-content\]" visual="rounded:medium border-w:regular border:blue-600 bg:white text-size:large font:tw-semibold text:blue-600 hover:opacity:80">▶️ Start Now!</a> </div> <div id="izcj4i" layout="flex col" space="p:medium" visual="rounded:big border-w:regular border:blue-600 bg:blue-100"> <div id="ixb8lc" layout="flex items:center justify:center" space="m-b:medium h:big-3x w:big-3x" visual="rounded:round bg:blue-600 text-size:grand text:white"><i id="i2sowp" class="fas fa-check-circle"></i></div> <h4 id="i71hl" space="m-b:small" visual="text-size:large font:tw-semibold">Ready<br /></h4> <p id="i2cwq" visual="text-size:large">Whether you're delving into the mysteries of physics, unraveling the complexities of mathematics, or engineering innovative solutions, STEM-AR is your companion in learning.<br /></p> </div> </div> </div> </div> </section> COPY ```

📱 How To Get Started

3 simple steps to start playing STEM-AR now.

Print the Marker

Get ready to embark on an immersive learning journey by printing our specially designed markers. These markers serve as gateways to unlock a world of knowledge and discovery.

Start the App

Launch the STEM-AR app on your device and point it towards the printed marker. Watch in awe as the marker transforms into a portal, transporting you to interactive, three-dimensional models and simulations.

▶️ Start Now!

Ready

Whether you're delving into the mysteries of physics, unraveling the complexities of mathematics, or engineering innovative solutions, STEM-AR is your companion in learning.

``` #### [\#](https://senangstart.com/sections/timeline-1/llms.txt)Event Timeline general Chronicles key events or milestones in a vertical timeline format, showcasing progress or history effectively. TailwindCSS SenangStart CSS Our Experiences Timeline Of Our Growth ====================== Here’s what we stand for ### Package Booked 21 July 2021, 04:30 PM ### Out for Delivery 22 July 2021, 01:00 PM ### Cancelled Customer cancelled the order ### Delivered <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="mb-4 grid grid-cols-1 lg:mx-24 lg:mb-8"> <div class="col-span-1"> <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Our Experiences</div> </div> <div> <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Timeline Of Our Growth</h1> </div> <div class="flex items-center"> <p class="w-full text-left text-base font-semibold lg:text-2xl">Here’s what we stand for</p> </div> </div> <div class="flex grid-cols-12 flex-col text-gray-50 lg:grid"> <div class="flex lg:contents"> <div class="relative col-start-2 col-end-4 mr-10 flex items-center lg:mx-auto"> <div class="flex h-full w-6 items-center justify-center"> <div class="pointer-events-none h-full w-1 bg-blue-600"></div> </div> <div class="absolute flex h-6 w-6 items-center justify-center rounded-full bg-blue-600"> <i class="fas fa-check-circle text-white"></i> </div> </div> <div class="col-start-4 col-end-12 my-4 mr-auto w-full rounded-xl bg-blue-600 p-4"> <h3 class="mb-1 text-lg font-semibold">Package Booked</h3> <p class="w-full text-justify leading-tight">21 July 2021, 04:30 PM</p> </div> </div> <div class="flex lg:contents"> <div class="relative col-start-2 col-end-4 mr-10 flex items-center lg:mx-auto"> <div class="flex h-full w-6 items-center justify-center"> <div class="pointer-events-none h-full w-1 bg-blue-600"></div> </div> <div class="absolute flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 text-center"> <i class="fas fa-check-circle text-white"></i> </div> </div> <div class="col-start-4 col-end-12 my-4 mr-auto w-full rounded-xl bg-blue-600 p-4"> <h3 class="mb-1 text-lg font-semibold">Out for Delivery</h3> <p class="text-justify leading-tight">22 July 2021, 01:00 PM</p> </div> </div> <div class="flex lg:contents"> <div class="relative col-start-2 col-end-4 mr-10 flex items-center lg:mx-auto"> <div class="flex h-full w-6 items-center justify-center"> <div class="pointer-events-none h-full w-1 bg-red-500"></div> </div> <div class="absolute flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-center"> <i class="fas fa-times-circle text-white"></i> </div> </div> <div class="col-start-4 col-end-12 my-4 mr-auto w-full rounded-xl bg-red-500 p-4"> <h3 class="mb-1 text-lg font-semibold text-gray-50">Cancelled</h3> <p class="text-justify leading-tight">Customer cancelled the order</p> </div> </div> <div class="flex lg:contents"> <div class="relative col-start-2 col-end-4 mr-10 flex items-center lg:mx-auto"> <div class="flex h-full w-6 items-center justify-center"> <div class="pointer-events-none h-full w-1 bg-gray-300"></div> </div> <div class="absolute flex h-6 w-6 items-center justify-center rounded-full bg-gray-300 text-center"> <i class="fas fa-exclamation-circle text-gray-400"></i> </div> </div> <div class="col-start-4 col-end-12 my-4 mr-auto w-full rounded-xl bg-gray-300 p-4"> <h3 class="mb-1 text-lg font-semibold text-gray-400">Delivered</h3> <p class="text-justify leading-tight"></p> </div> </div> </div> </section> COPY ```
Our Experiences

Timeline Of Our Growth

Here’s what we stand for

Package Booked

21 July 2021, 04:30 PM

Out for Delivery

22 July 2021, 01:00 PM

Cancelled

Customer cancelled the order

Delivered

``` Our Experiences Timeline Of Our Growth ====================== Here’s what we stand for ### Package Booked 21 July 2021, 04:30 PM ### Out for Delivery 22 July 2021, 01:00 PM ### Cancelled Customer cancelled the order ### Delivered <section 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 layout="grid grid-cols:1" space="m-b:medium tw-lg:m-x:giant tw-lg:m-b:large"> <div layout="col-span:1"> <div space="m-b:small max-w:\[max-content\] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:blue-600 font:tw-bold text:blue-600">Our Experiences</div> </div> <div> <h1 space="m-b:small tw-lg:m-b:medium" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">Timeline Of Our Growth</h1> </div> <div layout="flex items:center"> <p space="w:\[100%\]" visual="text:left text-size:base font:tw-semibold tw-lg:text-size:huge">Here’s what we stand for</p> </div> </div> <div layout="flex grid-cols:12 col tw-lg:grid" visual="text:gray-50"> <div layout="flex" class="lg:contents"> <div layout="relative flex items:center" space="m-r:large-3x tw-lg:m-x:auto" class="col-start-2 col-end-4"> <div layout="flex items:center justify:center" space="h:\[100%\] w:medium-3x"> <div space="h:\[100%\] w:tiny" visual="bg:blue-600" class="pointer-events-none"></div> </div> <div layout="absolute flex items:center justify:center" space="h:medium-3x w:medium-3x" visual="rounded:round bg:blue-600"> <i visual="text:white" class="fas fa-check-circle"></i> </div> </div> <div space="m-y:medium m-r:auto w:\[100%\] p:medium" visual="rounded:medium bg:blue-600" class="col-start-4 col-end-12"> <h3 space="m-b:tiny" visual="text-size:large font:tw-semibold">Package Booked</h3> <p space="w:\[100%\]" visual="text:justify" class="leading-tight">21 July 2021, 04:30 PM</p> </div> </div> <div layout="flex" class="lg:contents"> <div layout="relative flex items:center" space="m-r:large-3x tw-lg:m-x:auto" class="col-start-2 col-end-4"> <div layout="flex items:center justify:center" space="h:\[100%\] w:medium-3x"> <div space="h:\[100%\] w:tiny" visual="bg:blue-600" class="pointer-events-none"></div> </div> <div layout="absolute flex items:center justify:center" space="h:medium-3x w:medium-3x" visual="rounded:round bg:blue-600 text:center"> <i visual="text:white" class="fas fa-check-circle"></i> </div> </div> <div space="m-y:medium m-r:auto w:\[100%\] p:medium" visual="rounded:medium bg:blue-600" class="col-start-4 col-end-12"> <h3 space="m-b:tiny" visual="text-size:large font:tw-semibold">Out for Delivery</h3> <p visual="text:justify" class="leading-tight">22 July 2021, 01:00 PM</p> </div> </div> <div layout="flex" class="lg:contents"> <div layout="relative flex items:center" space="m-r:large-3x tw-lg:m-x:auto" class="col-start-2 col-end-4"> <div layout="flex items:center justify:center" space="h:\[100%\] w:medium-3x"> <div space="h:\[100%\] w:tiny" visual="bg:red-500" class="pointer-events-none"></div> </div> <div layout="absolute flex items:center justify:center" space="h:medium-3x w:medium-3x" visual="rounded:round bg:red-500 text:center"> <i visual="text:white" class="fas fa-times-circle"></i> </div> </div> <div space="m-y:medium m-r:auto w:\[100%\] p:medium" visual="rounded:medium bg:red-500" class="col-start-4 col-end-12"> <h3 space="m-b:tiny" visual="text-size:large font:tw-semibold text:gray-50">Cancelled</h3> <p visual="text:justify" class="leading-tight">Customer cancelled the order</p> </div> </div> <div layout="flex" class="lg:contents"> <div layout="relative flex items:center" space="m-r:large-3x tw-lg:m-x:auto" class="col-start-2 col-end-4"> <div layout="flex items:center justify:center" space="h:\[100%\] w:medium-3x"> <div space="h:\[100%\] w:tiny" visual="bg:gray-300" class="pointer-events-none"></div> </div> <div layout="absolute flex items:center justify:center" space="h:medium-3x w:medium-3x" visual="rounded:round bg:gray-300 text:center"> <i visual="text:gray-400" class="fas fa-exclamation-circle"></i> </div> </div> <div space="m-y:medium m-r:auto w:\[100%\] p:medium" visual="rounded:medium bg:gray-300" class="col-start-4 col-end-12"> <h3 space="m-b:tiny" visual="text-size:large font:tw-semibold text:gray-400">Delivered</h3> <p visual="text:justify" class="leading-tight"></p> </div> </div> </div> </section> COPY ```
Our Experiences

Timeline Of Our Growth

Here’s what we stand for

Package Booked

21 July 2021, 04:30 PM

Out for Delivery

22 July 2021, 01:00 PM

Cancelled

Customer cancelled the order

Delivered

``` #### [\#](https://senangstart.com/sections/steps-1/llms.txt)Step Image Cards general Illustrates a multi-step process using sequential cards, each featuring an image and descriptive text for clarity. TailwindCSS SenangStart CSS Get Started How to use SenangWebs ===================== Create website easily without worry, in minutes ![](https://placehold.co/400x400)Step 1 Register & login to your account. ![](https://placehold.co/400x400)Step 2 Create a new wbsite, get free SenangWebs.com domain name. ![](https://placehold.co/400x400)Step 3 Customize your webpage & click live to publish your website. <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="mb-4 grid grid-cols-1 lg:mb-8 lg:grid-cols-2"> <div class="col-span-1 lg:col-span-2"> <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Get Started</div> </div> <div> <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-0 lg:text-6xl">How to use SenangWebs</h1> </div> <div class="flex items-center"> <p class="w-full text-left text-base font-semibold lg:text-right lg:text-2xl">Create website easily without worry, in minutes</p> </div> </div> <div class="grid grid-cols-1 gap-4 lg:grid-cols-3"> <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%"> <img src="https://placehold.co/400x400" class="absolute top-0 w-full" /> <div class="absolute left-0 top-0 w-full p-4"> <p class="mb-2 font-bold opacity-50">Step 1</p> <p class="text-base font-semibold lg:text-2xl">Register & login to your account.</p> </div> </div> <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%"> <img src="https://placehold.co/400x400" class="absolute top-0 w-full" /> <div class="absolute left-0 top-0 w-full p-4"> <p class="mb-2 font-bold opacity-50">Step 2</p> <p class="text-base font-semibold lg:text-2xl">Create a new wbsite, get free SenangWebs.com domain name.</p> </div> </div> <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%"> <img src="https://placehold.co/400x400" class="absolute top-0 w-full" /> <div class="absolute left-0 top-0 w-full p-4"> <p class="mb-2 font-bold opacity-50">Step 3</p> <p class="text-base font-semibold lg:text-2xl">Customize your webpage & click live to publish your website.</p> </div> </div> </div> </section> COPY ```
Get Started

How to use SenangWebs

Create website easily without worry, in minutes

Step 1

Register & login to your account.

Step 2

Create a new wbsite, get free SenangWebs.com domain name.

Step 3

Customize your webpage & click live to publish your website.

``` Get Started How to use SenangWebs ===================== Create website easily without worry, in minutes ![](https://placehold.co/400x400)Step 1 Register & login to your account. ![](https://placehold.co/400x400)Step 2 Create a new wbsite, get free SenangWebs.com domain name. ![](https://placehold.co/400x400)Step 3 Customize your webpage & click live to publish your website. <section 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 layout="grid grid-cols:1 tw-lg:grid-cols:2" space="m-b:medium tw-lg:m-b:large"> <div layout="col-span:1 tw-lg:col-span:2"> <div space="m-b:small max-w:\[max-content\] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:blue-600 font:tw-bold text:blue-600">Get Started</div> </div> <div> <h1 space="m-b:small tw-lg:m-b:none" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">How to use SenangWebs</h1> </div> <div layout="flex items:center"> <p space="w:\[100%\]" visual="text:left text-size:base font:tw-semibold tw-lg:text:right tw-lg:text-size:huge">Create website easily without worry, in minutes</p> </div> </div> <div layout="grid grid-cols:1 tw-lg:grid-cols:3" space="g:medium"> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 100%"> <img src="https://placehold.co/400x400" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute left:none top:none" space="w:\[100%\] p:medium"> <p space="m-b:small" visual="font:tw-bold opacity:50">Step 1</p> <p visual="text-size:base font:tw-semibold tw-lg:text-size:huge">Register & login to your account.</p> </div> </div> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 100%"> <img src="https://placehold.co/400x400" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute left:none top:none" space="w:\[100%\] p:medium"> <p space="m-b:small" visual="font:tw-bold opacity:50">Step 2</p> <p visual="text-size:base font:tw-semibold tw-lg:text-size:huge">Create a new wbsite, get free SenangWebs.com domain name.</p> </div> </div> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 100%"> <img src="https://placehold.co/400x400" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute left:none top:none" space="w:\[100%\] p:medium"> <p space="m-b:small" visual="font:tw-bold opacity:50">Step 3</p> <p visual="text-size:base font:tw-semibold tw-lg:text-size:huge">Customize your webpage & click live to publish your website.</p> </div> </div> </div> </section> COPY ```
Get Started

How to use SenangWebs

Create website easily without worry, in minutes

Step 1

Register & login to your account.

Step 2

Create a new wbsite, get free SenangWebs.com domain name.

Step 3

Customize your webpage & click live to publish your website.

``` #### [\#](https://senangstart.com/sections/story-1/llms.txt)Story Mission Banners general Relays a company's narrative or mission through impactful, full-width banners combining text and background imagery. TailwindCSS SenangStart CSS Our Story ========= Our process gathers existing programs and initiatives, stakeholder input, customer research, and industry trends into a highly engaging and interactive meeting. If agreed, we run collaborative work sessions with you to gain a deep understanding of your brand and the mission that it is currently on. This approach accelerates the strategic process in general, and builds consensus throughout the entire engagement. Together, using a fast paced, user centric, and facilitated framework, we define and prioritise user needs, create desired user journeys, define the brand, create wireframes, surface actionable insights, make strategic recommendations and produce tangible results that can be deployed within your organisation. We then would carry out a corporate photography session to really capture the essence of the people behind the company and put together a brand new website that impresses your visitors. Schedule a call today! Mission Changing paradigms isn't easy - we're building a complex product that's a huge design and engineering challenge. We need to balance power with ease of use, information density with simplicity, and form with function. We’re here to make it a reality. Philosophy We’re hyper focused on doing better, and being better, at every single thing we do. Heck, we want to be known for it. If we don’t know something, we learn it. If we need help, we ask for it. Our biggest competitor is ourselves. <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="mb-4 p-0 lg:mb-16 lg:px-24"> <h1 class="mb-2 hidden text-2xl font-bold capitalize lg:mb-6 lg:block lg:text-6xl">Our Story</h1> <div class="mb-2 lg:mb-4 lg:text-3xl"> <p> Our process gathers existing programs and initiatives, stakeholder input, customer research, and industry trends into a highly engaging and interactive meeting. If agreed, we run collaborative work sessions with you to gain a deep understanding of your brand and the mission that it is currently on. This approach accelerates the strategic process in general, and builds consensus throughout the entire engagement. <br /><br /> Together, using a fast paced, user centric, and facilitated framework, we define and prioritise user needs, create desired user journeys, define the brand, create wireframes, surface actionable insights, make strategic recommendations and produce tangible results that can be deployed within your organisation. <br /><br /> We then would carry out a corporate photography session to really capture the essence of the people behind the company and put together a brand new website that impresses your visitors. Schedule a call today! </p> </div> </div> <div class="grid grid-cols-1 gap-4"> <div class="grid grid-cols-1 rounded-lg bg-gray-200 p-4 lg:grid-cols-2 lg:px-16 lg:py-8" style=" background-image: url('https://placehold.co/1200x600'); background-size: cover; background-position: center; " > <div style="padding-top: 100%" class="relative lg:col-start-2"> <div class="absolute left-0 top-0 flex h-full w-full flex-col lg:justify-center"> <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Mission</div> <p class="text-xl font-semibold lg:text-2xl">Changing paradigms isn't easy - we're building a complex product that's a huge design and engineering challenge. We need to balance power with ease of use, information density with simplicity, and form with function. We’re here to make it a reality.</p> </div> </div> </div> <div class="grid grid-cols-1 rounded-lg bg-gray-200 p-4 lg:grid-cols-2 lg:px-16 lg:py-8" style=" background-image: url('https://placehold.co/1200x600'); background-size: cover; background-position: center; " > <div style="padding-top: 100%" class="relative lg:col-start-1"> <div class="absolute left-0 top-0 flex h-full w-full flex-col lg:justify-center"> <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Philosophy</div> <p class="text-xl font-semibold lg:text-2xl">We’re hyper focused on doing better, and being better, at every single thing we do. Heck, we want to be known for it. If we don’t know something, we learn it. If we need help, we ask for it. Our biggest competitor is ourselves.</p> </div> </div> </div> </div> </section> COPY ```

Our Story

Our process gathers existing programs and initiatives, stakeholder input, customer research, and industry trends into a highly engaging and interactive meeting. If agreed, we run collaborative work sessions with you to gain a deep understanding of your brand and the mission that it is currently on. This approach accelerates the strategic process in general, and builds consensus throughout the entire engagement.

Together, using a fast paced, user centric, and facilitated framework, we define and prioritise user needs, create desired user journeys, define the brand, create wireframes, surface actionable insights, make strategic recommendations and produce tangible results that can be deployed within your organisation.

We then would carry out a corporate photography session to really capture the essence of the people behind the company and put together a brand new website that impresses your visitors. Schedule a call today!

Mission

Changing paradigms isn't easy - we're building a complex product that's a huge design and engineering challenge. We need to balance power with ease of use, information density with simplicity, and form with function. We’re here to make it a reality.

Philosophy

We’re hyper focused on doing better, and being better, at every single thing we do. Heck, we want to be known for it. If we don’t know something, we learn it. If we need help, we ask for it. Our biggest competitor is ourselves.

``` Our Story ========= Our process gathers existing programs and initiatives, stakeholder input, customer research, and industry trends into a highly engaging and interactive meeting. If agreed, we run collaborative work sessions with you to gain a deep understanding of your brand and the mission that it is currently on. This approach accelerates the strategic process in general, and builds consensus throughout the entire engagement. Together, using a fast paced, user centric, and facilitated framework, we define and prioritise user needs, create desired user journeys, define the brand, create wireframes, surface actionable insights, make strategic recommendations and produce tangible results that can be deployed within your organisation. We then would carry out a corporate photography session to really capture the essence of the people behind the company and put together a brand new website that impresses your visitors. Schedule a call today! Mission Changing paradigms isn't easy - we're building a complex product that's a huge design and engineering challenge. We need to balance power with ease of use, information density with simplicity, and form with function. We’re here to make it a reality. Philosophy We’re hyper focused on doing better, and being better, at every single thing we do. Heck, we want to be known for it. If we don’t know something, we learn it. If we need help, we ask for it. Our biggest competitor is ourselves. <section 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 space="m-b:medium p:none tw-lg:m-b:big-3x tw-lg:p-x:giant"> <h1 layout="hidden tw-lg:block" space="m-b:small tw-lg:m-b:medium-3x" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">Our Story</h1> <div space="m-b:small tw-lg:m-b:medium" visual="tw-lg:text-size:grand"> <p> Our process gathers existing programs and initiatives, stakeholder input, customer research, and industry trends into a highly engaging and interactive meeting. If agreed, we run collaborative work sessions with you to gain a deep understanding of your brand and the mission that it is currently on. This approach accelerates the strategic process in general, and builds consensus throughout the entire engagement. <br /><br /> Together, using a fast paced, user centric, and facilitated framework, we define and prioritise user needs, create desired user journeys, define the brand, create wireframes, surface actionable insights, make strategic recommendations and produce tangible results that can be deployed within your organisation. <br /><br /> We then would carry out a corporate photography session to really capture the essence of the people behind the company and put together a brand new website that impresses your visitors. Schedule a call today! </p> </div> </div> <div layout="grid grid-cols:1" space="g:medium"> <div layout="grid grid-cols:1 tw-lg:grid-cols:2" space="p:medium tw-lg:p-x:big-3x tw-lg:p-y:large" visual="rounded:medium bg:gray-200" style=" background-image: url('https://placehold.co/1200x600'); background-size: cover; background-position: center; " > <div style="padding-top: 100%" layout="relative" class="lg:col-start-2"> <div layout="absolute left:none top:none flex col tw-lg:justify:center" space="h:\[100%\] w:\[100%\]"> <div space="m-b:small max-w:\[max-content\] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:blue-600 font:tw-bold text:blue-600">Mission</div> <p visual="text-size:big font:tw-semibold tw-lg:text-size:huge">Changing paradigms isn't easy - we're building a complex product that's a huge design and engineering challenge. We need to balance power with ease of use, information density with simplicity, and form with function. We’re here to make it a reality.</p> </div> </div> </div> <div layout="grid grid-cols:1 tw-lg:grid-cols:2" space="p:medium tw-lg:p-x:big-3x tw-lg:p-y:large" visual="rounded:medium bg:gray-200" style=" background-image: url('https://placehold.co/1200x600'); background-size: cover; background-position: center; " > <div style="padding-top: 100%" layout="relative" class="lg:col-start-1"> <div layout="absolute left:none top:none flex col tw-lg:justify:center" space="h:\[100%\] w:\[100%\]"> <div space="m-b:small max-w:\[max-content\] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:blue-600 font:tw-bold text:blue-600">Philosophy</div> <p visual="text-size:big font:tw-semibold tw-lg:text-size:huge">We’re hyper focused on doing better, and being better, at every single thing we do. Heck, we want to be known for it. If we don’t know something, we learn it. If we need help, we ask for it. Our biggest competitor is ourselves.</p> </div> </div> </div> </div> </section> COPY ```

Our Story

Our process gathers existing programs and initiatives, stakeholder input, customer research, and industry trends into a highly engaging and interactive meeting. If agreed, we run collaborative work sessions with you to gain a deep understanding of your brand and the mission that it is currently on. This approach accelerates the strategic process in general, and builds consensus throughout the entire engagement.

Together, using a fast paced, user centric, and facilitated framework, we define and prioritise user needs, create desired user journeys, define the brand, create wireframes, surface actionable insights, make strategic recommendations and produce tangible results that can be deployed within your organisation.

We then would carry out a corporate photography session to really capture the essence of the people behind the company and put together a brand new website that impresses your visitors. Schedule a call today!

Mission

Changing paradigms isn't easy - we're building a complex product that's a huge design and engineering challenge. We need to balance power with ease of use, information density with simplicity, and form with function. We’re here to make it a reality.

Philosophy

We’re hyper focused on doing better, and being better, at every single thing we do. Heck, we want to be known for it. If we don’t know something, we learn it. If we need help, we ask for it. Our biggest competitor is ourselves.

``` #### [\#](https://senangstart.com/sections/testimony-2/llms.txt)Basic Testimonial Grid testimonial Displays client testimonials in a clean grid format, highlighting positive feedback and building social proof. TailwindCSS SenangStart CSS ###### Our experienced doctors #### Name Position / Company Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among #### Name Position / Company Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among #### Name Position / Company Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among <section class="px-6 lg:px-16 container mx-auto my-8 lg:my-16"> <h6 class="text-2xl lg:text-4xl font-bold mb-4"> Our experienced doctors </h6> <div class="grid grid-cols-1 lg:grid-cols-3 gap-4"> <div class="border border-gray-200 rounded-lg p-4"> <h4 class="text-xl font-semibold">Name</h4> <p class="text-xs mb-2">Position / Company</p> <p class="text-xl"> Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among </p> </div> <div class="border border-gray-200 rounded-lg p-4"> <h4 class="text-xl font-semibold">Name</h4> <p class="text-xs mb-2">Position / Company</p> <p class="text-xl"> Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among </p> </div> <div class="border border-gray-200 rounded-lg p-4"> <h4 class="text-xl font-semibold">Name</h4> <p class="text-xs mb-2">Position / Company</p> <p class="text-xl"> Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among </p> </div> </div> </section> COPY ```
Our experienced doctors

Name

Position / Company

Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among

Name

Position / Company

Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among

Name

Position / Company

Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among

``` ###### Our experienced doctors #### Name Position / Company Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among #### Name Position / Company Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among #### Name Position / Company Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among <section layout="container" space="p-x:medium-3x tw-lg:p-x:big-3x m-x:auto m-y:large tw-lg:m-y:big-3x"> <h6 space="m-b:medium" visual="text-size:huge tw-lg:text-size:giant font:tw-bold"> Our experienced doctors </h6> <div layout="grid grid-cols:1 tw-lg:grid-cols:3" space="g:medium"> <div space="p:medium" visual="border-w:thin border:gray-200 rounded:medium"> <h4 visual="text-size:big font:tw-semibold">Name</h4> <p space="m-b:small" visual="text-size:mini">Position / Company</p> <p visual="text-size:big"> Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among </p> </div> <div space="p:medium" visual="border-w:thin border:gray-200 rounded:medium"> <h4 visual="text-size:big font:tw-semibold">Name</h4> <p space="m-b:small" visual="text-size:mini">Position / Company</p> <p visual="text-size:big"> Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among </p> </div> <div space="p:medium" visual="border-w:thin border:gray-200 rounded:medium"> <h4 visual="text-size:big font:tw-semibold">Name</h4> <p space="m-b:small" visual="text-size:mini">Position / Company</p> <p visual="text-size:big"> Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among </p> </div> </div> </section> COPY ```
Our experienced doctors

Name

Position / Company

Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among

Name

Position / Company

Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among

Name

Position / Company

Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among

``` #### [\#](https://senangstart.com/sections/testimony-1/llms.txt)Simple Testimonial testimonial Features client testimonials in a straightforward layout to build credibility and share positive experiences. TailwindCSS SenangStart CSS Testimonial Stories from our clients ========================== Stop repeating the same messages to your customers to introduce your business. #### Name Position / Company Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among #### Name Position / Company Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among #### Name Position / Company Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among <section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto"> <div class="grid grid-cols-1 mb-4 lg:mb-8 mx-0 lg:mx-24"> <div class="col-span-1"> <div class="border-2 rounded-md border-blue-600 text-blue-600 px-2 max-w-max font-bold mb-2 lg:mb-4"> Testimonial </div> </div> <div> <h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4"> Stories from our clients </h1> </div> <div class="flex items-center"> <p class="text-base lg:text-2xl font-semibold w-full opacity-70"> Stop repeating the same messages to your customers to introduce your business. </p> </div> </div> <div class="grid grid-cols-1 lg:grid-cols-3 gap-4"> <div class="border border-gray-200 rounded-lg p-4"> <h4 class="text-xl font-semibold">Name</h4> <p class="text-xs mb-2">Position / Company</p> <p class="text-xl"> Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among </p> </div> <div class="border border-gray-200 rounded-lg p-4"> <h4 class="text-xl font-semibold">Name</h4> <p class="text-xs mb-2">Position / Company</p> <p class="text-xl"> Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among </p> </div> <div class="border border-gray-200 rounded-lg p-4"> <h4 class="text-xl font-semibold">Name</h4> <p class="text-xs mb-2">Position / Company</p> <p class="text-xl"> Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among </p> </div> </div> </section> COPY ```
Testimonial

Stories from our clients

Stop repeating the same messages to your customers to introduce your business.

Name

Position / Company

Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among

Name

Position / Company

Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among

Name

Position / Company

Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among

``` Testimonial Stories from our clients ========================== Stop repeating the same messages to your customers to introduce your business. #### Name Position / Company Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among #### Name Position / Company Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among #### Name Position / Company Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among <section layout="container" space="p-x:medium-3x tw-lg:p-x:big-3x m-y:large tw-lg:m-y:big-3x m-x:auto"> <div layout="grid grid-cols:1" space="m-b:medium tw-lg:m-b:large m-x:none tw-lg:m-x:giant"> <div layout="col-span:1"> <div space="p-x:small max-w:\[max-content\] m-b:small tw-lg:m-b:medium" visual="border-w:regular rounded:small border:blue-600 text:blue-600 font:tw-bold"> Testimonial </div> </div> <div> <h1 space="m-b:small tw-lg:m-b:medium" visual="text-size:huge tw-lg:text-size:mega capitalize font:tw-bold"> Stories from our clients </h1> </div> <div layout="flex items:center"> <p space="w:\[100%\]" visual="text-size:base tw-lg:text-size:huge font:tw-semibold opacity:70"> Stop repeating the same messages to your customers to introduce your business. </p> </div> </div> <div layout="grid grid-cols:1 tw-lg:grid-cols:3" space="g:medium"> <div space="p:medium" visual="border-w:thin border:gray-200 rounded:medium"> <h4 visual="text-size:big font:tw-semibold">Name</h4> <p space="m-b:small" visual="text-size:mini">Position / Company</p> <p visual="text-size:big"> Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among </p> </div> <div space="p:medium" visual="border-w:thin border:gray-200 rounded:medium"> <h4 visual="text-size:big font:tw-semibold">Name</h4> <p space="m-b:small" visual="text-size:mini">Position / Company</p> <p visual="text-size:big"> Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among </p> </div> <div space="p:medium" visual="border-w:thin border:gray-200 rounded:medium"> <h4 visual="text-size:big font:tw-semibold">Name</h4> <p space="m-b:small" visual="text-size:mini">Position / Company</p> <p visual="text-size:big"> Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among </p> </div> </div> </section> COPY ```
Testimonial

Stories from our clients

Stop repeating the same messages to your customers to introduce your business.

Name

Position / Company

Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among

Name

Position / Company

Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among

Name

Position / Company

Whether it’s a life-changing app idea, business app, mobile game app, designing a mobile app is a real challenge especially when it has to survive among

``` #### [\#](https://senangstart.com/sections/testimony-4/llms.txt)Testimonial Cards Stats testimonial Features customer testimonials in cards alongside key performance metrics to build trust and show impact. TailwindCSS SenangStart CSS SUCCESS STORIES What Our Customers Are Saying ------------------------------- Discover how our solutions have helped businesses like yours achieve their goals and drive success. > "The implementation process was smooth and the results were beyond our expectations. Our team's productivity has increased by 50% since we started using the platform." ![Customer Photo](https://placehold.co/60x60)David Kim Product Manager > "The analytics capabilities have transformed how we make decisions. We're now able to spot trends and opportunities we would have missed before." ![Customer Photo](https://placehold.co/60x60)Lisa Chen Operations Director > "Customer support has been exceptional. Any questions we had were answered quickly, and the team went above and beyond to ensure our success." ![Customer Photo](https://placehold.co/60x60)Mark Thompson Technical Lead 98% Customer Satisfaction 500+ Active Users 50+ Countries Served <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="mb-8 grid grid-cols-1 lg:grid-cols-2"> <div> <div class="mb-2 max-w-max rounded-lg bg-blue-100 px-3 py-1 text-blue-600" > <p class="text-sm font-bold">SUCCESS STORIES</p> </div> <h2 class="mb-4 text-3xl font-bold lg:text-5xl"> What Our Customers Are Saying </h2> </div> <div class="flex items-center"> <p class="text-lg lg:text-xl"> Discover how our solutions have helped businesses like yours achieve their goals and drive success. </p> </div> </div> <div class="grid gap-6 lg:grid-cols-3"> <!-- Testimonial Card 1 --> <div class="group relative rounded-2xl bg-neutral-100 p-6 transition-all hover:-translate-y-2 hover:bg-blue-600 hover:text-white" > <div class="mb-6 text-3xl text-blue-600 group-hover:text-white"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <blockquote class="mb-6 text-lg"> "The implementation process was smooth and the results were beyond our expectations. Our team's productivity has increased by 50% since we started using the platform." </blockquote> <div class="flex items-center gap-4"> <img src="https://placehold.co/60x60" class="h-12 w-12 rounded-full" alt="Customer Photo" /> <div> <p class="font-bold">David Kim</p> <p class="text-sm">Product Manager</p> </div> </div> <div class="absolute bottom-6 right-6 text-4xl text-blue-200 opacity-30 group-hover:text-white/30" > <i class="fas fa-quote-right"></i> </div> </div> <!-- Testimonial Card 2 --> <div class="group relative rounded-2xl bg-neutral-100 p-6 transition-all hover:-translate-y-2 hover:bg-blue-600 hover:text-white" > <div class="mb-6 text-3xl text-blue-600 group-hover:text-white"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <blockquote class="mb-6 text-lg"> "The analytics capabilities have transformed how we make decisions. We're now able to spot trends and opportunities we would have missed before." </blockquote> <div class="flex items-center gap-4"> <img src="https://placehold.co/60x60" class="h-12 w-12 rounded-full" alt="Customer Photo" /> <div> <p class="font-bold">Lisa Chen</p> <p class="text-sm">Operations Director</p> </div> </div> <div class="absolute bottom-6 right-6 text-4xl text-blue-200 opacity-30 group-hover:text-white/30" > <i class="fas fa-quote-right"></i> </div> </div> <!-- Testimonial Card 3 --> <div class="group relative rounded-2xl bg-neutral-100 p-6 transition-all hover:-translate-y-2 hover:bg-blue-600 hover:text-white" > <div class="mb-6 text-3xl text-blue-600 group-hover:text-white"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <blockquote class="mb-6 text-lg"> "Customer support has been exceptional. Any questions we had were answered quickly, and the team went above and beyond to ensure our success." </blockquote> <div class="flex items-center gap-4"> <img src="https://placehold.co/60x60" class="h-12 w-12 rounded-full" alt="Customer Photo" /> <div> <p class="font-bold">Mark Thompson</p> <p class="text-sm">Technical Lead</p> </div> </div> <div class="absolute bottom-6 right-6 text-4xl text-blue-200 opacity-30 group-hover:text-white/30" > <i class="fas fa-quote-right"></i> </div> </div> </div> <!-- Metrics --> <div class="mt-12 grid gap-6 rounded-2xl bg-neutral-100 p-8 lg:grid-cols-3" > <div class="text-center"> <p class="text-4xl font-bold text-blue-600 lg:text-6xl">98%</p> <p class="mt-2 text-lg font-semibold">Customer Satisfaction</p> </div> <div class="text-center"> <p class="text-4xl font-bold text-blue-600 lg:text-6xl">500+</p> <p class="mt-2 text-lg font-semibold">Active Users</p> </div> <div class="text-center"> <p class="text-4xl font-bold text-blue-600 lg:text-6xl">50+</p> <p class="mt-2 text-lg font-semibold">Countries Served</p> </div> </div> </section> COPY ```

SUCCESS STORIES

What Our Customers Are Saying

Discover how our solutions have helped businesses like yours achieve their goals and drive success.

"The implementation process was smooth and the results were beyond our expectations. Our team's productivity has increased by 50% since we started using the platform."
Customer Photo

David Kim

Product Manager

"The analytics capabilities have transformed how we make decisions. We're now able to spot trends and opportunities we would have missed before."
Customer Photo

Lisa Chen

Operations Director

"Customer support has been exceptional. Any questions we had were answered quickly, and the team went above and beyond to ensure our success."
Customer Photo

Mark Thompson

Technical Lead

98%

Customer Satisfaction

500+

Active Users

50+

Countries Served

``` SUCCESS STORIES What Our Customers Are Saying ------------------------------- Discover how our solutions have helped businesses like yours achieve their goals and drive success. > "The implementation process was smooth and the results were beyond our expectations. Our team's productivity has increased by 50% since we started using the platform." ![Customer Photo](https://placehold.co/60x60)David Kim Product Manager > "The analytics capabilities have transformed how we make decisions. We're now able to spot trends and opportunities we would have missed before." ![Customer Photo](https://placehold.co/60x60)Lisa Chen Operations Director > "Customer support has been exceptional. Any questions we had were answered quickly, and the team went above and beyond to ensure our success." ![Customer Photo](https://placehold.co/60x60)Mark Thompson Technical Lead 98% Customer Satisfaction 500+ Active Users 50+ Countries Served <section 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 layout="grid grid-cols:1 tw-lg:grid-cols:2" space="m-b:large"> <div> <div space="m-b:small max-w:\[max-content\] p-x:small-3x p-y:tiny" visual="rounded:medium bg:blue-100 text:blue-600" > <p visual="text-size:small font:tw-bold">SUCCESS STORIES</p> </div> <h2 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mount"> What Our Customers Are Saying </h2> </div> <div layout="flex items:center"> <p visual="text-size:large tw-lg:text-size:big"> Discover how our solutions have helped businesses like yours achieve their goals and drive success. </p> </div> </div> <div layout="grid tw-lg:grid-cols:3" space="g:medium-3x"> <!-- Testimonial Card 1 --> <div layout="relative" space="p:medium-3x" visual="rounded:big bg:neutral-100 transition:all hover:bg:blue-600 hover:text:white" class="group hover:-translate-y-2" > <div space="m-b:medium-3x" visual="text-size:grand text:blue-600" class="group-hover:text-white"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <blockquote space="m-b:medium-3x" visual="text-size:large"> "The implementation process was smooth and the results were beyond our expectations. Our team's productivity has increased by 50% since we started using the platform." </blockquote> <div layout="flex items:center" space="g:medium"> <img src="https://placehold.co/60x60" space="h:big w:big" visual="rounded:round" alt="Customer Photo" /> <div> <p visual="font:tw-bold">David Kim</p> <p visual="text-size:small">Product Manager</p> </div> </div> <div layout="absolute bottom:medium-3x right:medium-3x" visual="text-size:giant text:blue-200 opacity:30" class="group-hover:text-white/30" > <i class="fas fa-quote-right"></i> </div> </div> <!-- Testimonial Card 2 --> <div layout="relative" space="p:medium-3x" visual="rounded:big bg:neutral-100 transition:all hover:bg:blue-600 hover:text:white" class="group hover:-translate-y-2" > <div space="m-b:medium-3x" visual="text-size:grand text:blue-600" class="group-hover:text-white"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <blockquote space="m-b:medium-3x" visual="text-size:large"> "The analytics capabilities have transformed how we make decisions. We're now able to spot trends and opportunities we would have missed before." </blockquote> <div layout="flex items:center" space="g:medium"> <img src="https://placehold.co/60x60" space="h:big w:big" visual="rounded:round" alt="Customer Photo" /> <div> <p visual="font:tw-bold">Lisa Chen</p> <p visual="text-size:small">Operations Director</p> </div> </div> <div layout="absolute bottom:medium-3x right:medium-3x" visual="text-size:giant text:blue-200 opacity:30" class="group-hover:text-white/30" > <i class="fas fa-quote-right"></i> </div> </div> <!-- Testimonial Card 3 --> <div layout="relative" space="p:medium-3x" visual="rounded:big bg:neutral-100 transition:all hover:bg:blue-600 hover:text:white" class="group hover:-translate-y-2" > <div space="m-b:medium-3x" visual="text-size:grand text:blue-600" class="group-hover:text-white"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <blockquote space="m-b:medium-3x" visual="text-size:large"> "Customer support has been exceptional. Any questions we had were answered quickly, and the team went above and beyond to ensure our success." </blockquote> <div layout="flex items:center" space="g:medium"> <img src="https://placehold.co/60x60" space="h:big w:big" visual="rounded:round" alt="Customer Photo" /> <div> <p visual="font:tw-bold">Mark Thompson</p> <p visual="text-size:small">Technical Lead</p> </div> </div> <div layout="absolute bottom:medium-3x right:medium-3x" visual="text-size:giant text:blue-200 opacity:30" class="group-hover:text-white/30" > <i class="fas fa-quote-right"></i> </div> </div> </div> <!-- Metrics --> <div layout="grid tw-lg:grid-cols:3" space="m-t:big g:medium-3x p:large" visual="rounded:big bg:neutral-100" > <div visual="text:center"> <p visual="text-size:giant font:tw-bold text:blue-600 tw-lg:text-size:mega">98%</p> <p space="m-t:small" visual="text-size:large font:tw-semibold">Customer Satisfaction</p> </div> <div visual="text:center"> <p visual="text-size:giant font:tw-bold text:blue-600 tw-lg:text-size:mega">500+</p> <p space="m-t:small" visual="text-size:large font:tw-semibold">Active Users</p> </div> <div visual="text:center"> <p visual="text-size:giant font:tw-bold text:blue-600 tw-lg:text-size:mega">50+</p> <p space="m-t:small" visual="text-size:large font:tw-semibold">Countries Served</p> </div> </div> </section> COPY ```

SUCCESS STORIES

What Our Customers Are Saying

Discover how our solutions have helped businesses like yours achieve their goals and drive success.

"The implementation process was smooth and the results were beyond our expectations. Our team's productivity has increased by 50% since we started using the platform."
Customer Photo

David Kim

Product Manager

"The analytics capabilities have transformed how we make decisions. We're now able to spot trends and opportunities we would have missed before."
Customer Photo

Lisa Chen

Operations Director

"Customer support has been exceptional. Any questions we had were answered quickly, and the team went above and beyond to ensure our success."
Customer Photo

Mark Thompson

Technical Lead

98%

Customer Satisfaction

500+

Active Users

50+

Countries Served

``` #### [\#](https://senangstart.com/sections/testimony-3/llms.txt)Testimonial Slider testimonial Presents customer testimonials in an interactive slider, allowing users to navigate through different quotes. TailwindCSS SenangStart CSS Testimonials What Our Clients Say ---------------------- Real feedback from real customers who have transformed their businesses with our solutions. > "The platform has completely transformed how we handle our business operations. The efficiency gains have been remarkable, and the support team has been exceptional throughout our journey." ![Customer Photo](https://placehold.co/80x80)Sarah Johnson CEO at TechStart Inc. > "Implementation was smooth and the results were immediate. Our team's productivity has increased significantly, and we've seen a notable improvement in customer satisfaction." ![Customer Photo](https://placehold.co/80x80)Michael Chen Operations Director at Global Solutions > "The analytics capabilities have given us insights we never had before. We're now making data-driven decisions that have significantly improved our bottom line." ![Customer Photo](https://placehold.co/80x80)Emily Rodriguez Data Analytics Lead at InnovateCorp <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16" x-data="{ activeSlide: 1 }" > <div class="mb-8 text-center"> <div class="mx-auto mb-2 w-min rounded-lg bg-blue-600 px-2 py-1"> <p class="text-sm font-bold uppercase text-white">Testimonials</p> </div> <h2 class="mb-4 text-3xl font-bold lg:text-6xl"> What Our Clients Say </h2> <p class="mx-auto max-w-2xl text-lg lg:text-xl"> Real feedback from real customers who have transformed their businesses with our solutions. </p> </div> <div class="relative"> <!-- Testimonial Slides --> <div class="relative min-h-24 overflow-hidden rounded-2xl bg-neutral-100" > <!-- Slide 1 --> <div x-show="activeSlide === 1" class="h-full w-full p-8 lg:p-16" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0" > <div class="mb-8 text-4xl text-blue-600"> <i class="fas fa-quote-left"></i> </div> <blockquote class="mb-8 text-xl lg:text-2xl"> "The platform has completely transformed how we handle our business operations. The efficiency gains have been remarkable, and the support team has been exceptional throughout our journey." </blockquote> <div class="flex items-center gap-4"> <img src="https://placehold.co/80x80" class="h-16 w-16 rounded-full" alt="Customer Photo" /> <div> <p class="font-bold">Sarah Johnson</p> <p class="text-sm">CEO at TechStart Inc.</p> </div> </div> </div> <!-- Slide 2 --> <div x-show="activeSlide === 2" class="h-full w-full p-8 lg:p-16" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0" > <div class="mb-8 text-4xl text-blue-600"> <i class="fas fa-quote-left"></i> </div> <blockquote class="mb-8 text-xl lg:text-2xl"> "Implementation was smooth and the results were immediate. Our team's productivity has increased significantly, and we've seen a notable improvement in customer satisfaction." </blockquote> <div class="flex items-center gap-4"> <img src="https://placehold.co/80x80" class="h-16 w-16 rounded-full" alt="Customer Photo" /> <div> <p class="font-bold">Michael Chen</p> <p class="text-sm">Operations Director at Global Solutions</p> </div> </div> </div> <!-- Slide 3 --> <div x-show="activeSlide === 3" class="h-full w-full p-8 lg:p-16" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0" > <div class="mb-8 text-4xl text-blue-600"> <i class="fas fa-quote-left"></i> </div> <blockquote class="mb-8 text-xl lg:text-2xl"> "The analytics capabilities have given us insights we never had before. We're now making data-driven decisions that have significantly improved our bottom line." </blockquote> <div class="flex items-center gap-4"> <img src="https://placehold.co/80x80" class="h-16 w-16 rounded-full" alt="Customer Photo" /> <div> <p class="font-bold">Emily Rodriguez</p> <p class="text-sm">Data Analytics Lead at InnovateCorp</p> </div> </div> </div> </div> <!-- Navigation Controls --> <div class="mt-8 flex justify-center gap-4"> <button @click="activeSlide = 1" class="h-3 w-3 rounded-full transition-colors" :class="{ 'bg-blue-600': activeSlide === 1, 'bg-neutral-300': activeSlide !== 1 }" ></button> <button @click="activeSlide = 2" class="h-3 w-3 rounded-full transition-colors" :class="{ 'bg-blue-600': activeSlide === 2, 'bg-neutral-300': activeSlide !== 2 }" ></button> <button @click="activeSlide = 3" class="h-3 w-3 rounded-full transition-colors" :class="{ 'bg-blue-600': activeSlide === 3, 'bg-neutral-300': activeSlide !== 3 }" ></button> </div> </div> </section> COPY ```

Testimonials

What Our Clients Say

Real feedback from real customers who have transformed their businesses with our solutions.

"The platform has completely transformed how we handle our business operations. The efficiency gains have been remarkable, and the support team has been exceptional throughout our journey."
Customer Photo

Sarah Johnson

CEO at TechStart Inc.

"Implementation was smooth and the results were immediate. Our team's productivity has increased significantly, and we've seen a notable improvement in customer satisfaction."
Customer Photo

Michael Chen

Operations Director at Global Solutions

"The analytics capabilities have given us insights we never had before. We're now making data-driven decisions that have significantly improved our bottom line."
Customer Photo

Emily Rodriguez

Data Analytics Lead at InnovateCorp

``` Testimonials What Our Clients Say ---------------------- Real feedback from real customers who have transformed their businesses with our solutions. > "The platform has completely transformed how we handle our business operations. The efficiency gains have been remarkable, and the support team has been exceptional throughout our journey." ![Customer Photo](https://placehold.co/80x80)Sarah Johnson CEO at TechStart Inc. > "Implementation was smooth and the results were immediate. Our team's productivity has increased significantly, and we've seen a notable improvement in customer satisfaction." ![Customer Photo](https://placehold.co/80x80)Michael Chen Operations Director at Global Solutions > "The analytics capabilities have given us insights we never had before. We're now making data-driven decisions that have significantly improved our bottom line." ![Customer Photo](https://placehold.co/80x80)Emily Rodriguez Data Analytics Lead at InnovateCorp <section 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" x-data="{ activeSlide: 1 }" > <div space="m-b:large" visual="text:center"> <div space="m-x:auto m-b:small w:\[min-content\] p-x:small p-y:tiny" visual="rounded:medium bg:blue-600"> <p visual="text-size:small font:tw-bold uppercase text:white">Testimonials</p> </div> <h2 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mega"> What Our Clients Say </h2> <p space="m-x:auto max-w:\[2xl\]" visual="text-size:large tw-lg:text-size:big"> Real feedback from real customers who have transformed their businesses with our solutions. </p> </div> <div layout="relative"> <!-- Testimonial Slides --> <div layout="relative overflow:hidden" space="min-h:giant" visual="rounded:big bg:neutral-100" > <!-- Slide 1 --> <div x-show="activeSlide === 1" space="h:\[100%\] w:\[100%\] p:large tw-lg:p:big-3x" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0" > <div space="m-b:large" visual="text-size:giant text:blue-600"> <i class="fas fa-quote-left"></i> </div> <blockquote space="m-b:large" visual="text-size:big tw-lg:text-size:huge"> "The platform has completely transformed how we handle our business operations. The efficiency gains have been remarkable, and the support team has been exceptional throughout our journey." </blockquote> <div layout="flex items:center" space="g:medium"> <img src="https://placehold.co/80x80" space="h:big-3x w:big-3x" visual="rounded:round" alt="Customer Photo" /> <div> <p visual="font:tw-bold">Sarah Johnson</p> <p visual="text-size:small">CEO at TechStart Inc.</p> </div> </div> </div> <!-- Slide 2 --> <div x-show="activeSlide === 2" space="h:\[100%\] w:\[100%\] p:large tw-lg:p:big-3x" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0" > <div space="m-b:large" visual="text-size:giant text:blue-600"> <i class="fas fa-quote-left"></i> </div> <blockquote space="m-b:large" visual="text-size:big tw-lg:text-size:huge"> "Implementation was smooth and the results were immediate. Our team's productivity has increased significantly, and we've seen a notable improvement in customer satisfaction." </blockquote> <div layout="flex items:center" space="g:medium"> <img src="https://placehold.co/80x80" space="h:big-3x w:big-3x" visual="rounded:round" alt="Customer Photo" /> <div> <p visual="font:tw-bold">Michael Chen</p> <p visual="text-size:small">Operations Director at Global Solutions</p> </div> </div> </div> <!-- Slide 3 --> <div x-show="activeSlide === 3" space="h:\[100%\] w:\[100%\] p:large tw-lg:p:big-3x" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0" > <div space="m-b:large" visual="text-size:giant text:blue-600"> <i class="fas fa-quote-left"></i> </div> <blockquote space="m-b:large" visual="text-size:big tw-lg:text-size:huge"> "The analytics capabilities have given us insights we never had before. We're now making data-driven decisions that have significantly improved our bottom line." </blockquote> <div layout="flex items:center" space="g:medium"> <img src="https://placehold.co/80x80" space="h:big-3x w:big-3x" visual="rounded:round" alt="Customer Photo" /> <div> <p visual="font:tw-bold">Emily Rodriguez</p> <p visual="text-size:small">Data Analytics Lead at InnovateCorp</p> </div> </div> </div> </div> <!-- Navigation Controls --> <div layout="flex justify:center" space="m-t:large g:medium"> <button @click="activeSlide = 1" space="h:small-3x w:small-3x" visual="rounded:round transition:colors" :class="{ 'bg-blue-600': activeSlide === 1, 'bg-neutral-300': activeSlide !== 1 }" ></button> <button @click="activeSlide = 2" space="h:small-3x w:small-3x" visual="rounded:round transition:colors" :class="{ 'bg-blue-600': activeSlide === 2, 'bg-neutral-300': activeSlide !== 2 }" ></button> <button @click="activeSlide = 3" space="h:small-3x w:small-3x" visual="rounded:round transition:colors" :class="{ 'bg-blue-600': activeSlide === 3, 'bg-neutral-300': activeSlide !== 3 }" ></button> </div> </div> </section> COPY ```

Testimonials

What Our Clients Say

Real feedback from real customers who have transformed their businesses with our solutions.

"The platform has completely transformed how we handle our business operations. The efficiency gains have been remarkable, and the support team has been exceptional throughout our journey."
Customer Photo

Sarah Johnson

CEO at TechStart Inc.

"Implementation was smooth and the results were immediate. Our team's productivity has increased significantly, and we've seen a notable improvement in customer satisfaction."
Customer Photo

Michael Chen

Operations Director at Global Solutions

"The analytics capabilities have given us insights we never had before. We're now making data-driven decisions that have significantly improved our bottom line."
Customer Photo

Emily Rodriguez

Data Analytics Lead at InnovateCorp

``` #### [\#](https://senangstart.com/sections/video-1/llms.txt)Centered Video Show video Features an embedded video player as the focal point, perfect for product demos or important announcements. TailwindCSS SenangStart CSS Solution Why Choose Us As Your Growth Partner ====================================== Stop repeating the same messages to your customers to introduce your business. <section class="px-6 lg:px-16 flex flex-col items-center my-8 lg:my-16 container mx-auto"> <div class="border-2 rounded-md border-blue-600 text-blue-600 px-2 max-w-max font-bold mb-2 lg:mb-4"> Solution </div> <h1 class="text-2xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4 text-left lg:text-center lg:max-w-screen-md w-full"> Why Choose Us As Your Growth Partner </h1> <p class="text-base lg:text-2xl font-semibold mb-4 lg:mb-8"> Stop repeating the same messages to your customers to introduce your business. </p> <div class="bg-gray-200 rounded-lg overflow-hidden relative w-full lg:max-w-screen-md"> <div class="w-full" style="padding-top: 60%"> <iframe src="https://www.youtube.com/embed/\_\_NeP0RqACU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="absolute top-0 left-0 w-full h-full"></iframe> </div> </div> </section> COPY ```
Solution

Why Choose Us As Your Growth Partner

Stop repeating the same messages to your customers to introduce your business.

``` Solution Why Choose Us As Your Growth Partner ====================================== Stop repeating the same messages to your customers to introduce your business. <section layout="flex col items:center container" space="p-x:medium-3x tw-lg:p-x:big-3x m-y:large tw-lg:m-y:big-3x m-x:auto"> <div space="p-x:small max-w:\[max-content\] m-b:small tw-lg:m-b:medium" visual="border-w:regular rounded:small border:blue-600 text:blue-600 font:tw-bold"> Solution </div> <h1 space="m-b:small tw-lg:m-b:medium tw-lg:max-w:\[screen-md\] w:\[100%\]" visual="text-size:huge tw-lg:text-size:mega capitalize font:tw-bold text:left tw-lg:text:center"> Why Choose Us As Your Growth Partner </h1> <p space="m-b:medium tw-lg:m-b:large" visual="text-size:base tw-lg:text-size:huge font:tw-semibold"> Stop repeating the same messages to your customers to introduce your business. </p> <div layout="overflow:hidden relative" space="w:\[100%\] tw-lg:max-w:\[screen-md\]" visual="bg:gray-200 rounded:medium"> <div space="w:\[100%\]" style="padding-top: 60%"> <iframe src="https://www.youtube.com/embed/\_\_NeP0RqACU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen layout="absolute top:none left:none" space="w:\[100%\] h:\[100%\]"></iframe> </div> </div> </section> COPY ```
Solution

Why Choose Us As Your Growth Partner

Stop repeating the same messages to your customers to introduce your business.

``` #### [\#](https://senangstart.com/sections/video-6/llms.txt)Video Feature Highlights video Presents a video demonstration alongside a bulleted list of key features showcased within the video. TailwindCSS SenangStart CSS PRODUCT DEMO See It In Action ------------------ Watch our comprehensive demo video and discover the powerful features that can elevate your projects and streamline your workflow. ### Key Features Highlighted: - #### Advanced Automation Streamline your most complex workflows with our powerful and intuitive automation engine. - #### Insightful Analytics Gain deep, actionable insights with our comprehensive and customizable analytics dashboard. - #### Seamless Collaboration Work together more effectively with integrated team collaboration tools and real-time updates. - #### Robust Security Protect your valuable data with enterprise-grade security features and protocols. [ Learn More About All Features ](#learn-more) <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="text-center mb-10 lg:mb-16"> <div class="mx-auto mb-3 w-min whitespace-nowrap rounded-lg bg-blue-100 px-3 py-1 text-blue-600"> <p class="text-sm font-bold uppercase tracking-wider">PRODUCT DEMO</p> </div> <h2 class="text-3xl lg:text-6xl font-bold capitalize mb-4"> See It In Action </h2> <p class="text-lg lg:text-xl max-w-2xl mx-auto text-neutral-700"> Watch our comprehensive demo video and discover the powerful features that can elevate your projects and streamline your workflow. </p> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-start"> <!-- Video Player --> <div class="sticky top-28"> <div class="bg-neutral-200 rounded-xl overflow-hidden aspect-video shadow-2xl"> <iframe src="https://www.youtube.com/embed/YgGzAKP\_HuM" title="Product demo video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full"></iframe> </div> </div> <!-- Feature Bullets --> <div class="p-2 lg:p-6 rounded-lg"> <h3 class="text-2xl lg:text-4xl font-semibold mb-8 text-neutral-800">Key Features Highlighted:</h3> <ul class="space-y-6"> <li class="flex items-start group"> <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center mr-5 text-2xl transition-all duration-300 group-hover:bg-blue-600 group-hover:text-white group-hover:scale-110"> <i class="fas fa-cogs"></i> </div> <div> <h4 class="text-xl font-semibold text-neutral-900">Advanced Automation</h4> <p class="text-lg text-neutral-600 mt-1">Streamline your most complex workflows with our powerful and intuitive automation engine.</p> </div> </li> <li class="flex items-start group"> <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center mr-5 text-2xl transition-all duration-300 group-hover:bg-blue-600 group-hover:text-white group-hover:scale-110"> <i class="fas fa-chart-pie"></i> </div> <div> <h4 class="text-xl font-semibold text-neutral-900">Insightful Analytics</h4> <p class="text-lg text-neutral-600 mt-1">Gain deep, actionable insights with our comprehensive and customizable analytics dashboard.</p> </div> </li> <li class="flex items-start group"> <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center mr-5 text-2xl transition-all duration-300 group-hover:bg-blue-600 group-hover:text-white group-hover:scale-110"> <i class="fas fa-users-cog"></i> </div> <div> <h4 class="text-xl font-semibold text-neutral-900">Seamless Collaboration</h4> <p class="text-lg text-neutral-600 mt-1">Work together more effectively with integrated team collaboration tools and real-time updates.</p> </div> </li> <li class="flex items-start group"> <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center mr-5 text-2xl transition-all duration-300 group-hover:bg-blue-600 group-hover:text-white group-hover:scale-110"> <i class="fas fa-shield-alt"></i> </div> <div> <h4 class="text-xl font-semibold text-neutral-900">Robust Security</h4> <p class="text-lg text-neutral-600 mt-1">Protect your valuable data with enterprise-grade security features and protocols.</p> </div> </li> </ul> <a href="#learn-more" class="mt-10 inline-flex items-center bg-blue-600 hover:bg-blue-700 text-white text-lg rounded-lg px-8 py-4 font-semibold transition-colors duration-300 shadow-md hover:shadow-lg group"> Learn More About All Features <i class="fas fa-arrow-right ml-2 transform transition-transform group-hover:translate-x-1"></i> </a> </div> </div> </section> COPY ```

PRODUCT DEMO

See It In Action

Watch our comprehensive demo video and discover the powerful features that can elevate your projects and streamline your workflow.

Key Features Highlighted:

  • Advanced Automation

    Streamline your most complex workflows with our powerful and intuitive automation engine.

  • Insightful Analytics

    Gain deep, actionable insights with our comprehensive and customizable analytics dashboard.

  • Seamless Collaboration

    Work together more effectively with integrated team collaboration tools and real-time updates.

  • Robust Security

    Protect your valuable data with enterprise-grade security features and protocols.

Learn More About All Features
``` PRODUCT DEMO See It In Action ------------------ Watch our comprehensive demo video and discover the powerful features that can elevate your projects and streamline your workflow. ### Key Features Highlighted: - #### Advanced Automation Streamline your most complex workflows with our powerful and intuitive automation engine. - #### Insightful Analytics Gain deep, actionable insights with our comprehensive and customizable analytics dashboard. - #### Seamless Collaboration Work together more effectively with integrated team collaboration tools and real-time updates. - #### Robust Security Protect your valuable data with enterprise-grade security features and protocols. [ Learn More About All Features ](#learn-more) <section 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 space="m-b:large-3x tw-lg:m-b:big-3x" visual="text:center"> <div space="m-x:auto m-b:small-3x w:\[min-content\] p-x:small-3x p-y:tiny" visual="rounded:medium bg:blue-100 text:blue-600" class="whitespace-nowrap"> <p visual="text-size:small font:tw-bold uppercase" class="tracking-wider">PRODUCT DEMO</p> </div> <h2 space="m-b:medium" visual="text-size:grand tw-lg:text-size:mega font:tw-bold capitalize"> See It In Action </h2> <p space="max-w:\[2xl\] m-x:auto" visual="text-size:large tw-lg:text-size:big text:neutral-700"> Watch our comprehensive demo video and discover the powerful features that can elevate your projects and streamline your workflow. </p> </div> <div layout="grid grid-cols:1 tw-lg:grid-cols:2 items:start" space="g:large tw-lg:g:big"> <!-- Video Player --> <div layout="sticky top:giant-2x"> <div layout="overflow:hidden" visual="bg:neutral-200 rounded:medium shadow:giant" class="aspect-video"> <iframe src="https://www.youtube.com/embed/YgGzAKP\_HuM" title="Product demo video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen space="w:\[100%\] h:\[100%\]"></iframe> </div> </div> <!-- Feature Bullets --> <div space="p:small tw-lg:p:medium-3x" visual="rounded:medium"> <h3 space="m-b:large" visual="text-size:huge tw-lg:text-size:giant font:tw-semibold text:neutral-800">Key Features Highlighted:</h3> <ul class="space-y-6"> <li layout="flex items:start" class="group"> <div layout="shrink-0 flex items:center justify:center" space="w:big h:big m-r:medium-2x" visual="rounded:medium bg:blue-100 text:blue-600 text-size:huge transition:all duration:slow" class="group-hover:bg-blue-600 group-hover:text-white group-hover:scale-110"> <i class="fas fa-cogs"></i> </div> <div> <h4 visual="text-size:big font:tw-semibold text:neutral-900">Advanced Automation</h4> <p space="m-t:tiny" visual="text-size:large text:neutral-600">Streamline your most complex workflows with our powerful and intuitive automation engine.</p> </div> </li> <li layout="flex items:start" class="group"> <div layout="shrink-0 flex items:center justify:center" space="w:big h:big m-r:medium-2x" visual="rounded:medium bg:blue-100 text:blue-600 text-size:huge transition:all duration:slow" class="group-hover:bg-blue-600 group-hover:text-white group-hover:scale-110"> <i class="fas fa-chart-pie"></i> </div> <div> <h4 visual="text-size:big font:tw-semibold text:neutral-900">Insightful Analytics</h4> <p space="m-t:tiny" visual="text-size:large text:neutral-600">Gain deep, actionable insights with our comprehensive and customizable analytics dashboard.</p> </div> </li> <li layout="flex items:start" class="group"> <div layout="shrink-0 flex items:center justify:center" space="w:big h:big m-r:medium-2x" visual="rounded:medium bg:blue-100 text:blue-600 text-size:huge transition:all duration:slow" class="group-hover:bg-blue-600 group-hover:text-white group-hover:scale-110"> <i class="fas fa-users-cog"></i> </div> <div> <h4 visual="text-size:big font:tw-semibold text:neutral-900">Seamless Collaboration</h4> <p space="m-t:tiny" visual="text-size:large text:neutral-600">Work together more effectively with integrated team collaboration tools and real-time updates.</p> </div> </li> <li layout="flex items:start" class="group"> <div layout="shrink-0 flex items:center justify:center" space="w:big h:big m-r:medium-2x" visual="rounded:medium bg:blue-100 text:blue-600 text-size:huge transition:all duration:slow" class="group-hover:bg-blue-600 group-hover:text-white group-hover:scale-110"> <i class="fas fa-shield-alt"></i> </div> <div> <h4 visual="text-size:big font:tw-semibold text:neutral-900">Robust Security</h4> <p space="m-t:tiny" visual="text-size:large text:neutral-600">Protect your valuable data with enterprise-grade security features and protocols.</p> </div> </li> </ul> <a href="#learn-more" layout="inline-flex items:center" space="m-t:large-3x p-x:large p-y:medium" visual="bg:blue-600 hover:bg:blue-700 text:white text-size:large rounded:medium font:tw-semibold transition:colors duration:slow shadow:medium hover:shadow:big" class="group"> Learn More About All Features <i space="m-l:small" visual="transition:transform" class="fas fa-arrow-right transform group-hover:translate-x-1"></i> </a> </div> </div> </section> COPY ```

PRODUCT DEMO

See It In Action

Watch our comprehensive demo video and discover the powerful features that can elevate your projects and streamline your workflow.

Key Features Highlighted:

  • Advanced Automation

    Streamline your most complex workflows with our powerful and intuitive automation engine.

  • Insightful Analytics

    Gain deep, actionable insights with our comprehensive and customizable analytics dashboard.

  • Seamless Collaboration

    Work together more effectively with integrated team collaboration tools and real-time updates.

  • Robust Security

    Protect your valuable data with enterprise-grade security features and protocols.

Learn More About All Features
``` #### [\#](https://senangstart.com/sections/video-2/llms.txt)Video Fullwidth Overlay video Features a full-width video or image background with an overlaid text message and a prominent call-to-action. TailwindCSS SenangStart CSS ![Background Video](https://placehold.co/1920x1080/2563EB/FFFFFF?text=Video+Background) EXCLUSIVE PREMIERE Discover Our Latest Innovation ================================ Watch our new video to see how we're changing the game and pioneering the future. [ Watch Now ](#) <section class="relative my-8 lg:my-16 overflow-hidden"> <!-- Background Video/Image --> <div class="absolute inset-0 w-full h-full"> <img src="https://placehold.co/1920x1080/2563EB/FFFFFF?text=Video+Background" alt="Background Video" class="w-full h-full object-cover"> <!-- Or for an actual video background --> <!-- <video autoplay muted loop class="w-full h-full object-cover"> <source src="your-video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> --> <div class="absolute inset-0 bg-black opacity-60"></div> <!-- Dark overlay --> </div> <!-- Content Overlay --> <div class="relative container mx-auto px-6 lg:px-16 py-24 lg:py-48 text-center text-white z-10 flex flex-col items-center"> <div class="mb-4 max-w-max rounded-lg bg-blue-600/90 px-4 py-2"> <p class="text-sm font-bold uppercase tracking-wider">EXCLUSIVE PREMIERE</p> </div> <h1 class="text-4xl lg:text-7xl font-bold mb-6"> Discover Our Latest Innovation </h1> <p class="text-xl lg:text-3xl mb-10 max-w-3xl mx-auto opacity-90"> Watch our new video to see how we're changing the game and pioneering the future. </p> <a href="#" class="group bg-white hover:bg-blue-50 text-blue-600 text-xl rounded-lg px-10 h-16 py-4 flex items-center justify-center w-full sm:w-auto max-w-xs mx-auto font-semibold transition-colors duration-300 shadow-lg hover:shadow-xl"> <i class="fas fa-play mr-3 transition-transform duration-300 group-hover:scale-110"></i> Watch Now </a> </div> </section> COPY ```
Background Video

EXCLUSIVE PREMIERE

Discover Our Latest Innovation

Watch our new video to see how we're changing the game and pioneering the future.

Watch Now
``` ![Background Video](https://placehold.co/1920x1080/2563EB/FFFFFF?text=Video+Background) EXCLUSIVE PREMIERE Discover Our Latest Innovation ================================ Watch our new video to see how we're changing the game and pioneering the future. [ Watch Now ](#) <section layout="relative overflow:hidden" space="m-y:large tw-lg:m-y:big-3x"> <!-- Background Video/Image --> <div layout="absolute inset:none" space="w:\[100%\] h:\[100%\]"> <img src="https://placehold.co/1920x1080/2563EB/FFFFFF?text=Video+Background" alt="Background Video" layout="object:cover" space="w:\[100%\] h:\[100%\]"> <!-- Or for an actual video background --> <!-- <video autoplay muted loop layout="object:cover" space="w:\[100%\] h:\[100%\]"> <source src="your-video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> --> <div layout="absolute inset:none" visual="bg:black opacity:60"></div> <!-- Dark overlay --> </div> <!-- Content Overlay --> <div layout="relative container flex col items:center" space="m-x:auto p-x:medium-3x tw-lg:p-x:big-3x p-y:giant tw-lg:p-y:vast-3x" visual="text:center text:white" class="z-10"> <div space="m-b:medium max-w:\[max-content\] p-x:medium p-y:small" visual="rounded:medium" class="bg-blue-600/90"> <p visual="text-size:small font:tw-bold uppercase" class="tracking-wider">EXCLUSIVE PREMIERE</p> </div> <h1 space="m-b:medium-3x" visual="text-size:giant tw-lg:text-size:giga font:tw-bold"> Discover Our Latest Innovation </h1> <p space="m-b:large-3x max-w:\[3xl\] m-x:auto" visual="text-size:big tw-lg:text-size:grand opacity:90"> Watch our new video to see how we're changing the game and pioneering the future. </p> <a href="#" layout="flex items:center justify:center" space="p-x:large-3x h:big-3x p-y:medium w:\[100%\] tw-sm:w:auto max-w:\[xs\] m-x:auto" visual="bg:white hover:bg:blue-50 text:blue-600 text-size:big rounded:medium font:tw-semibold transition:colors duration:slow shadow:big hover:shadow:giant" class="group"> <i space="m-r:small-3x" visual="transition:transform duration:slow" class="fas fa-play group-hover:scale-110"></i> Watch Now </a> </div> </section> COPY ```
Background Video

EXCLUSIVE PREMIERE

Discover Our Latest Innovation

Watch our new video to see how we're changing the game and pioneering the future.

Watch Now
``` #### [\#](https://senangstart.com/sections/video-4/llms.txt)Video Gallery video Displays a primary video player accompanied by a selectable gallery or playlist of other video content. TailwindCSS SenangStart CSS VIDEO SERIES Explore Our Video Library --------------------------- Dive into our collection of tutorials, webinars, and product showcases. Select a video from the list to start watching. ### Up Next ![]() <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16" x-data="{ currentVideoUrl: 'https://www.youtube.com/embed/\_\_NeP0RqACU?autoplay=0&rel=0', currentVideoTitle: 'Introduction to SenangStart', videos: \[ { id: 1, title: 'Introduction to SenangStart', duration: '5:30', url: 'https://www.youtube.com/embed/\_\_NeP0RqACU?autoplay=1&rel=0', thumb: 'https://placehold.co/120x70/3B82F6/FFFFFF?text=Vid1' }, { id: 2, title: 'Advanced Features Tutorial', duration: '12:15', url: 'https://www.youtube.com/embed/YgGzAKP\_HuM?autoplay=1&rel=0', thumb: 'https://placehold.co/120x70/6B7280/FFFFFF?text=Vid2' }, { id: 3, title: 'Client Success: Acme Corp', duration: '8:42', url: 'https://www.youtube.com/embed/L\_LUpnjgPso?autoplay=1&rel=0', thumb: 'https://placehold.co/120x70/6B7280/FFFFFF?text=Vid3' }, { id: 4, title: 'Webinar: Future of Web Design', duration: '45:10', url: 'https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&rel=0', thumb: 'https://placehold.co/120x70/6B7280/FFFFFF?text=Vid4' } \], playVideo(video) { this.currentVideoUrl = video.url; this.currentVideoTitle = video.title; } }"> <div class="text-left mb-10 lg:mb-16"> <div class="mb-3 max-w-max rounded-lg bg-blue-100 px-3 py-1 text-blue-600"> <p class="text-sm font-bold uppercase tracking-wider">VIDEO SERIES</p> </div> <h2 class="text-3xl lg:text-6xl font-bold capitalize mb-4"> Explore Our Video Library </h2> <p class="text-lg lg:text-xl max-w-3xl text-neutral-700"> Dive into our collection of tutorials, webinars, and product showcases. Select a video from the list to start watching. </p> </div> <div class="grid grid-cols-1 lg:grid-cols-12 gap-8"> <!-- Main Video Player --> <div class="lg:col-span-8"> <div class="bg-neutral-200 rounded-xl overflow-hidden aspect-video shadow-2xl mb-3"> <iframe :src="currentVideoUrl" title="Main YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen class="w-full h-full"></iframe> </div> <div class="p-4 bg-neutral-100 rounded-lg shadow"> <h3 x-text="currentVideoTitle" class="text-xl lg:text-2xl font-semibold text-neutral-800"></h3> </div> </div> <!-- Playlist --> <div class="lg:col-span-4"> <h3 class="text-2xl font-semibold mb-5 text-neutral-800">Up Next</h3> <div class="space-y-3 max-h-\[400px\] lg:max-h-\[calc(100vh-250px)\] overflow-y-auto pr-2 custom-scrollbar"> <template x-for="video in videos" :key="video.id"> <div @click="playVideo(video)" class="flex items-center gap-4 p-3 rounded-lg cursor-pointer transition-all duration-300 transform hover:scale-\[1.02\] hover:shadow-lg" :class="currentVideoTitle === video.title ? 'bg-blue-100 border-2 border-blue-500 shadow-md' : 'bg-white hover:bg-neutral-50 border'"> <img :src="video.thumb" :alt="video.title + ' Thumbnail'" class="w-28 h-\[70px\] object-cover rounded-md flex-shrink-0"> <div class="overflow-hidden"> <h4 class="font-semibold truncate" :class="currentVideoTitle === video.title ? 'text-blue-700' : 'text-neutral-800'" x-text="video.title"></h4> <p class="text-sm" :class="currentVideoTitle === video.title ? 'text-blue-600' : 'text-neutral-500'" x-text="video.duration"></p> </div> <i class="fas fa-play-circle text-2xl ml-auto" :class="currentVideoTitle === video.title ? 'text-blue-500' : 'text-neutral-400'"></i> </div> </template> </div> </div> </div> <style> .custom-scrollbar::-webkit-scrollbar { width: 8px; } .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; } </style> </section> COPY ```

VIDEO SERIES

Explore Our Video Library

Dive into our collection of tutorials, webinars, and product showcases. Select a video from the list to start watching.

Up Next

``` VIDEO SERIES Explore Our Video Library --------------------------- Dive into our collection of tutorials, webinars, and product showcases. Select a video from the list to start watching. ### Up Next ![]() <section 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" x-data="{ currentVideoUrl: 'https://www.youtube.com/embed/\_\_NeP0RqACU?autoplay=0&rel=0', currentVideoTitle: 'Introduction to SenangStart', videos: \[ { id: 1, title: 'Introduction to SenangStart', duration: '5:30', url: 'https://www.youtube.com/embed/\_\_NeP0RqACU?autoplay=1&rel=0', thumb: 'https://placehold.co/120x70/3B82F6/FFFFFF?text=Vid1' }, { id: 2, title: 'Advanced Features Tutorial', duration: '12:15', url: 'https://www.youtube.com/embed/YgGzAKP\_HuM?autoplay=1&rel=0', thumb: 'https://placehold.co/120x70/6B7280/FFFFFF?text=Vid2' }, { id: 3, title: 'Client Success: Acme Corp', duration: '8:42', url: 'https://www.youtube.com/embed/L\_LUpnjgPso?autoplay=1&rel=0', thumb: 'https://placehold.co/120x70/6B7280/FFFFFF?text=Vid3' }, { id: 4, title: 'Webinar: Future of Web Design', duration: '45:10', url: 'https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&rel=0', thumb: 'https://placehold.co/120x70/6B7280/FFFFFF?text=Vid4' } \], playVideo(video) { this.currentVideoUrl = video.url; this.currentVideoTitle = video.title; } }"> <div space="m-b:large-3x tw-lg:m-b:big-3x" visual="text:left"> <div space="m-b:small-3x max-w:\[max-content\] p-x:small-3x p-y:tiny" visual="rounded:medium bg:blue-100 text:blue-600"> <p visual="text-size:small font:tw-bold uppercase" class="tracking-wider">VIDEO SERIES</p> </div> <h2 space="m-b:medium" visual="text-size:grand tw-lg:text-size:mega font:tw-bold capitalize"> Explore Our Video Library </h2> <p space="max-w:\[3xl\]" visual="text-size:large tw-lg:text-size:big text:neutral-700"> Dive into our collection of tutorials, webinars, and product showcases. Select a video from the list to start watching. </p> </div> <div layout="grid grid-cols:1 tw-lg:grid-cols:12" space="g:large"> <!-- Main Video Player --> <div layout="tw-lg:col-span:8"> <div layout="overflow:hidden" space="m-b:small-3x" visual="bg:neutral-200 rounded:medium shadow:giant" class="aspect-video"> <iframe :src="currentVideoUrl" title="Main YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen space="w:\[100%\] h:\[100%\]"></iframe> </div> <div space="p:medium" visual="bg:neutral-100 rounded:medium shadow:small"> <h3 x-text="currentVideoTitle" visual="text-size:big tw-lg:text-size:huge font:tw-semibold text:neutral-800"></h3> </div> </div> <!-- Playlist --> <div layout="tw-lg:col-span:4"> <h3 space="m-b:medium-2x" visual="text-size:huge font:tw-semibold text:neutral-800">Up Next</h3> <div space="max-h:\[400px\] tw-lg:max-h:\[calc(100vh-250px)\] p-r:small" class="space-y-3 overflow-y-auto custom-scrollbar"> <template x-for="video in videos" :key="video.id"> <div @click="playVideo(video)" layout="flex items:center" space="g:medium p:small-3x" visual="rounded:medium cursor:pointer transition:all duration:slow hover:shadow:big" class="transform hover:scale-\[1.02\]" :class="currentVideoTitle === video.title ? 'bg-blue-100 border-2 border-blue-500 shadow-md' : 'bg-white hover:bg-neutral-50 border'"> <img :src="video.thumb" :alt="video.title + ' Thumbnail'" layout="object:cover shrink-0" space="w:giant-2x h:\[70px\]" visual="rounded:small"> <div layout="overflow:hidden"> <h4 visual="font:tw-semibold truncate" :class="currentVideoTitle === video.title ? 'text-blue-700' : 'text-neutral-800'" x-text="video.title"></h4> <p visual="text-size:small" :class="currentVideoTitle === video.title ? 'text-blue-600' : 'text-neutral-500'" x-text="video.duration"></p> </div> <i space="m-l:auto" visual="text-size:huge" class="fas fa-play-circle" :class="currentVideoTitle === video.title ? 'text-blue-500' : 'text-neutral-400'"></i> </div> </template> </div> </div> </div> <style> .custom-scrollbar::-webkit-scrollbar { width: 8px; } .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; } </style> </section> COPY ```

VIDEO SERIES

Explore Our Video Library

Dive into our collection of tutorials, webinars, and product showcases. Select a video from the list to start watching.

Up Next

``` #### [\#](https://senangstart.com/sections/video-5/llms.txt)Video Testimonial video Features a client's positive feedback through an embedded video testimonial, often with a key quote and details. TailwindCSS SenangStart CSS CLIENT VOICE > "SenangStart completely revolutionized our workflow. The tools are intuitive, and the support is top-notch. We saw a 40% increase in productivity!" ![Client Photo](https://placehold.co/80x80/3B82F6/FFFFFF?text=JD)Jane Doe CEO, Innovatech Solutions ![Client Company Logo](https://placehold.co/180x60/FFFFFF/6B7280?text=Innovatech+Logo&font=montserrat) <section class="bg-neutral-100 my-8 lg:my-16"> <div class="container mx-auto px-6 lg:px-16 py-12 lg:py-24"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-center"> <!-- Testimonial Content --> <div class="lg:order-1 order-2"> <div class="mb-3 max-w-max rounded-lg bg-blue-600 px-3 py-1 text-white"> <p class="text-sm font-bold uppercase tracking-wider">CLIENT VOICE</p> </div> <div class="text-5xl text-blue-500 mb-5"> <i class="fas fa-quote-left"></i> </div> <blockquote class="text-2xl lg:text-4xl font-semibold mb-8 italic text-neutral-800 leading-tight"> "SenangStart completely revolutionized our workflow. The tools are intuitive, and the support is top-notch. We saw a 40% increase in productivity!" </blockquote> <div class="flex items-center gap-5"> <img src="https://placehold.co/80x80/3B82F6/FFFFFF?text=JD" alt="Client Photo" class="w-20 h-20 rounded-full object-cover border-4 border-white shadow-lg"> <div> <p class="text-2xl font-bold text-neutral-900">Jane Doe</p> <p class="text-lg text-neutral-600">CEO, Innovatech Solutions</p> </div> </div> <img src="https://placehold.co/180x60/FFFFFF/6B7280?text=Innovatech+Logo&font=montserrat" alt="Client Company Logo" class="mt-8 h-10 opacity-75"> </div> <!-- Video Player --> <div class="lg:order-2 order-1 bg-neutral-300 rounded-xl overflow-hidden aspect-video shadow-2xl transform transition-transform duration-500 hover:scale-105"> <iframe src="https://www.youtube.com/embed/L\_LUpnjgPso" title="Testimonial video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full"></iframe> </div> </div> </div> </section> COPY ```

CLIENT VOICE

"SenangStart completely revolutionized our workflow. The tools are intuitive, and the support is top-notch. We saw a 40% increase in productivity!"
Client Photo

Jane Doe

CEO, Innovatech Solutions

Client Company Logo
``` CLIENT VOICE > "SenangStart completely revolutionized our workflow. The tools are intuitive, and the support is top-notch. We saw a 40% increase in productivity!" ![Client Photo](https://placehold.co/80x80/3B82F6/FFFFFF?text=JD)Jane Doe CEO, Innovatech Solutions ![Client Company Logo](https://placehold.co/180x60/FFFFFF/6B7280?text=Innovatech+Logo&font=montserrat) <section space="m-y:large tw-lg:m-y:big-3x" visual="bg:neutral-100"> <div layout="container" space="m-x:auto p-x:medium-3x tw-lg:p-x:big-3x p-y:big tw-lg:p-y:giant"> <div layout="grid grid-cols:1 tw-lg:grid-cols:2 items:center" space="g:large-3x tw-lg:g:big-3x"> <!-- Testimonial Content --> <div layout="tw-lg:order:1 order:2"> <div space="m-b:small-3x max-w:\[max-content\] p-x:small-3x p-y:tiny" visual="rounded:medium bg:blue-600 text:white"> <p visual="text-size:small font:tw-bold uppercase" class="tracking-wider">CLIENT VOICE</p> </div> <div space="m-b:medium-2x" visual="text-size:mount text:blue-500"> <i class="fas fa-quote-left"></i> </div> <blockquote space="m-b:large" visual="text-size:huge tw-lg:text-size:giant font:tw-semibold italic text:neutral-800" class="leading-tight"> "SenangStart completely revolutionized our workflow. The tools are intuitive, and the support is top-notch. We saw a 40% increase in productivity!" </blockquote> <div layout="flex items:center" space="g:medium-2x"> <img src="https://placehold.co/80x80/3B82F6/FFFFFF?text=JD" alt="Client Photo" layout="object:cover" space="w:big-4x h:big-4x" visual="rounded:round border-w:tiny border:white shadow:big"> <div> <p visual="text-size:huge font:tw-bold text:neutral-900">Jane Doe</p> <p visual="text-size:large text:neutral-600">CEO, Innovatech Solutions</p> </div> </div> <img src="https://placehold.co/180x60/FFFFFF/6B7280?text=Innovatech+Logo&font=montserrat" alt="Client Company Logo" space="m-t:large h:large-3x" visual="opacity:75"> </div> <!-- Video Player --> <div layout="tw-lg:order:2 order:1 overflow:hidden" visual="bg:neutral-300 rounded:medium shadow:giant transition:transform duration:slower" class="aspect-video transform hover:scale-105"> <iframe src="https://www.youtube.com/embed/L\_LUpnjgPso" title="Testimonial video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen space="w:\[100%\] h:\[100%\]"></iframe> </div> </div> </div> </section> COPY ```

CLIENT VOICE

"SenangStart completely revolutionized our workflow. The tools are intuitive, and the support is top-notch. We saw a 40% increase in productivity!"
Client Photo

Jane Doe

CEO, Innovatech Solutions

Client Company Logo
``` #### [\#](https://senangstart.com/sections/video-3/llms.txt)Video with Sidebar video Combines an embedded video player with a sidebar for key takeaways, transcripts, or related content. TailwindCSS SenangStart CSS DEEP DIVE Understand Every Detail ------------------------- Watch the presentation and follow along with key highlights or a full transcript for a comprehensive understanding. ### Key Takeaways - Introduction to the new framework and its core benefits. - Step-by-step guide on seamless implementation. - Real-world application examples and insightful case studies. - Q&A session highlights with answers from our experts. [ Download Full Transcript ](#) <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="text-center mb-10 lg:mb-16"> <div class="mx-auto mb-3 w-min whitespace-nowrap rounded-lg bg-blue-100 text-blue-600 px-3 py-1"> <p class="text-sm font-bold uppercase">DEEP DIVE</p> </div> <h2 class="text-3xl lg:text-6xl font-bold capitalize mb-4"> Understand Every Detail </h2> <p class="text-lg lg:text-xl max-w-2xl mx-auto text-neutral-700"> Watch the presentation and follow along with key highlights or a full transcript for a comprehensive understanding. </p> </div> <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12"> <!-- Video Player --> <div class="lg:col-span-8 bg-neutral-200 rounded-xl overflow-hidden aspect-video shadow-2xl"> <iframe src="https://www.youtube.com/embed/\_\_NeP0RqACU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full"></iframe> </div> <!-- Sidebar Content/Transcript --> <div class="lg:col-span-4 bg-neutral-100 p-6 lg:p-8 rounded-xl shadow-lg"> <h3 class="text-2xl font-semibold mb-5 text-neutral-800">Key Takeaways</h3> <ul class="space-y-4 text-neutral-700"> <li class="flex items-start"> <i class="fas fa-check-circle text-blue-600 mt-1 mr-3 flex-shrink-0"></i> <span>Introduction to the new framework and its core benefits.</span> </li> <li class="flex items-start"> <i class="fas fa-check-circle text-blue-600 mt-1 mr-3 flex-shrink-0"></i> <span>Step-by-step guide on seamless implementation.</span> </li> <li class="flex items-start"> <i class="fas fa-check-circle text-blue-600 mt-1 mr-3 flex-shrink-0"></i> <span>Real-world application examples and insightful case studies.</span> </li> <li class="flex items-start"> <i class="fas fa-check-circle text-blue-600 mt-1 mr-3 flex-shrink-0"></i> <span>Q&A session highlights with answers from our experts.</span> </li> </ul> <a href="#" class="mt-8 inline-flex items-center text-blue-600 font-semibold hover:text-blue-700 transition-colors duration-300 group"> Download Full Transcript <i class="fas fa-download ml-2 transform transition-transform group-hover:translate-x-1"></i> </a> </div> </div> </section> COPY ```

DEEP DIVE

Understand Every Detail

Watch the presentation and follow along with key highlights or a full transcript for a comprehensive understanding.

Key Takeaways

  • Introduction to the new framework and its core benefits.
  • Step-by-step guide on seamless implementation.
  • Real-world application examples and insightful case studies.
  • Q&A session highlights with answers from our experts.
Download Full Transcript
``` DEEP DIVE Understand Every Detail ------------------------- Watch the presentation and follow along with key highlights or a full transcript for a comprehensive understanding. ### Key Takeaways - Introduction to the new framework and its core benefits. - Step-by-step guide on seamless implementation. - Real-world application examples and insightful case studies. - Q&A session highlights with answers from our experts. [ Download Full Transcript ](#) <section 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 space="m-b:large-3x tw-lg:m-b:big-3x" visual="text:center"> <div space="m-x:auto m-b:small-3x w:\[min-content\] p-x:small-3x p-y:tiny" visual="rounded:medium bg:blue-100 text:blue-600" class="whitespace-nowrap"> <p visual="text-size:small font:tw-bold uppercase">DEEP DIVE</p> </div> <h2 space="m-b:medium" visual="text-size:grand tw-lg:text-size:mega font:tw-bold capitalize"> Understand Every Detail </h2> <p space="max-w:\[2xl\] m-x:auto" visual="text-size:large tw-lg:text-size:big text:neutral-700"> Watch the presentation and follow along with key highlights or a full transcript for a comprehensive understanding. </p> </div> <div layout="grid grid-cols:1 tw-lg:grid-cols:12" space="g:large tw-lg:g:big"> <!-- Video Player --> <div layout="tw-lg:col-span:8 overflow:hidden" visual="bg:neutral-200 rounded:medium shadow:giant" class="aspect-video"> <iframe src="https://www.youtube.com/embed/\_\_NeP0RqACU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen space="w:\[100%\] h:\[100%\]"></iframe> </div> <!-- Sidebar Content/Transcript --> <div layout="tw-lg:col-span:4" space="p:medium-3x tw-lg:p:large" visual="bg:neutral-100 rounded:medium shadow:big"> <h3 space="m-b:medium-2x" visual="text-size:huge font:tw-semibold text:neutral-800">Key Takeaways</h3> <ul visual="text:neutral-700" class="space-y-4"> <li layout="flex items:start"> <i layout="shrink-0" space="m-t:tiny m-r:small-3x" visual="text:blue-600" class="fas fa-check-circle"></i> <span>Introduction to the new framework and its core benefits.</span> </li> <li layout="flex items:start"> <i layout="shrink-0" space="m-t:tiny m-r:small-3x" visual="text:blue-600" class="fas fa-check-circle"></i> <span>Step-by-step guide on seamless implementation.</span> </li> <li layout="flex items:start"> <i layout="shrink-0" space="m-t:tiny m-r:small-3x" visual="text:blue-600" class="fas fa-check-circle"></i> <span>Real-world application examples and insightful case studies.</span> </li> <li layout="flex items:start"> <i layout="shrink-0" space="m-t:tiny m-r:small-3x" visual="text:blue-600" class="fas fa-check-circle"></i> <span>Q&A session highlights with answers from our experts.</span> </li> </ul> <a href="#" layout="inline-flex items:center" space="m-t:large" visual="text:blue-600 font:tw-semibold hover:text:blue-700 transition:colors duration:slow" class="group"> Download Full Transcript <i space="m-l:small" visual="transition:transform" class="fas fa-download transform group-hover:translate-x-1"></i> </a> </div> </div> </section> COPY ```

DEEP DIVE

Understand Every Detail

Watch the presentation and follow along with key highlights or a full transcript for a comprehensive understanding.

Key Takeaways

  • Introduction to the new framework and its core benefits.
  • Step-by-step guide on seamless implementation.
  • Real-world application examples and insightful case studies.
  • Q&A session highlights with answers from our experts.
Download Full Transcript
``` #### [\#](https://senangstart.com/sections/problems-3/llms.txt)Challenge Icon Cards problem Identifies common business pain points through descriptive cards, each featuring an icon and clear explanation. TailwindCSS SenangStart CSS Pain Points Common Challenges in Business Today ------------------------------------- Businesses face numerous obstacles in the digital age. Here are the key challenges we help solve. ### Time Management Struggling to balance multiple tasks and deadlines, leading to decreased productivity and missed opportunities. ### Resource Allocation Inefficient distribution of resources resulting in waste and increased operational costs. ### Team Coordination Lack of effective communication and collaboration tools leading to misaligned objectives and duplicated efforts. <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="mb-8 text-center"> <div class="mx-auto mb-2 max-w-max rounded-lg bg-blue-600 px-2 py-1"> <p class="text-sm font-bold uppercase text-white">Pain Points</p> </div> <h2 class="mb-4 text-3xl font-bold lg:text-6xl"> Common Challenges in Business Today </h2> <p class="text-lg lg:text-xl"> Businesses face numerous obstacles in the digital age. Here are the key challenges we help solve. </p> </div> <div class="grid gap-6 lg:grid-cols-3"> <div class="rounded-lg bg-neutral-100 p-6"> <div class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-600 text-2xl text-white" > <i class="fas fa-clock"></i> </div> <h3 class="mb-2 text-xl font-bold">Time Management</h3> <p class="text-lg"> Struggling to balance multiple tasks and deadlines, leading to decreased productivity and missed opportunities. </p> </div> <div class="rounded-lg bg-neutral-100 p-6"> <div class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-600 text-2xl text-white" > <i class="fas fa-chart-line"></i> </div> <h3 class="mb-2 text-xl font-bold">Resource Allocation</h3> <p class="text-lg"> Inefficient distribution of resources resulting in waste and increased operational costs. </p> </div> <div class="rounded-lg bg-neutral-100 p-6"> <div class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-600 text-2xl text-white" > <i class="fas fa-users"></i> </div> <h3 class="mb-2 text-xl font-bold">Team Coordination</h3> <p class="text-lg"> Lack of effective communication and collaboration tools leading to misaligned objectives and duplicated efforts. </p> </div> </div> </section> COPY ```

Pain Points

Common Challenges in Business Today

Businesses face numerous obstacles in the digital age. Here are the key challenges we help solve.

Time Management

Struggling to balance multiple tasks and deadlines, leading to decreased productivity and missed opportunities.

Resource Allocation

Inefficient distribution of resources resulting in waste and increased operational costs.

Team Coordination

Lack of effective communication and collaboration tools leading to misaligned objectives and duplicated efforts.

``` Pain Points Common Challenges in Business Today ------------------------------------- Businesses face numerous obstacles in the digital age. Here are the key challenges we help solve. ### Time Management Struggling to balance multiple tasks and deadlines, leading to decreased productivity and missed opportunities. ### Resource Allocation Inefficient distribution of resources resulting in waste and increased operational costs. ### Team Coordination Lack of effective communication and collaboration tools leading to misaligned objectives and duplicated efforts. <section 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 space="m-b:large" visual="text:center"> <div space="m-x:auto m-b:small max-w:\[max-content\] p-x:small p-y:tiny" visual="rounded:medium bg:blue-600"> <p visual="text-size:small font:tw-bold uppercase text:white">Pain Points</p> </div> <h2 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mega"> Common Challenges in Business Today </h2> <p visual="text-size:large tw-lg:text-size:big"> Businesses face numerous obstacles in the digital age. Here are the key challenges we help solve. </p> </div> <div layout="grid tw-lg:grid-cols:3" space="g:medium-3x"> <div space="p:medium-3x" visual="rounded:medium bg:neutral-100"> <div layout="flex items:center justify:center" space="m-b:medium h:big-3x w:big-3x" visual="rounded:round bg:blue-600 text-size:huge text:white" > <i class="fas fa-clock"></i> </div> <h3 space="m-b:small" visual="text-size:big font:tw-bold">Time Management</h3> <p visual="text-size:large"> Struggling to balance multiple tasks and deadlines, leading to decreased productivity and missed opportunities. </p> </div> <div space="p:medium-3x" visual="rounded:medium bg:neutral-100"> <div layout="flex items:center justify:center" space="m-b:medium h:big-3x w:big-3x" visual="rounded:round bg:blue-600 text-size:huge text:white" > <i class="fas fa-chart-line"></i> </div> <h3 space="m-b:small" visual="text-size:big font:tw-bold">Resource Allocation</h3> <p visual="text-size:large"> Inefficient distribution of resources resulting in waste and increased operational costs. </p> </div> <div space="p:medium-3x" visual="rounded:medium bg:neutral-100"> <div layout="flex items:center justify:center" space="m-b:medium h:big-3x w:big-3x" visual="rounded:round bg:blue-600 text-size:huge text:white" > <i class="fas fa-users"></i> </div> <h3 space="m-b:small" visual="text-size:big font:tw-bold">Team Coordination</h3> <p visual="text-size:large"> Lack of effective communication and collaboration tools leading to misaligned objectives and duplicated efforts. </p> </div> </div> </section> COPY ```

Pain Points

Common Challenges in Business Today

Businesses face numerous obstacles in the digital age. Here are the key challenges we help solve.

Time Management

Struggling to balance multiple tasks and deadlines, leading to decreased productivity and missed opportunities.

Resource Allocation

Inefficient distribution of resources resulting in waste and increased operational costs.

Team Coordination

Lack of effective communication and collaboration tools leading to misaligned objectives and duplicated efforts.

``` #### [\#](https://senangstart.com/sections/problems-1/llms.txt)Dual Problem Cards problem Presents a pair of related problems or challenges in visually distinct cards, often with imagery and descriptions. TailwindCSS SenangStart CSS Problem Internal Struggle ================= Our latest updates and what is happening in the organisation ![](https://placehold.co/600x600)Headline Description ==================== Content can be used to explain the glimpse idea or to catch in seconds viewer eye. ![](https://placehold.co/600x600)Headline Description ==================== Content can be used to explain the glimpse idea or to catch in seconds viewer eye. <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="mb-4 grid grid-cols-1 lg:mb-8 lg:grid-cols-2"> <div class="col-span-1 lg:col-span-2"> <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Problem</div> </div> <div> <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-0 lg:text-6xl">Internal Struggle</h1> </div> <div class="flex items-center"> <p class="w-full text-left text-base font-semibold lg:text-right lg:text-2xl">Our latest updates and what is happening in the organisation</p> </div> </div> <div class="grid grid-cols-1 gap-4 lg:grid-cols-2"> <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%"> <img src="https://placehold.co/600x600" class="absolute top-0 w-full" /> <div class="absolute left-0 top-0 w-full p-4 lg:p-8"> <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Headline Description</h1> <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div> </div> </div> <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%"> <img src="https://placehold.co/600x600" class="absolute top-0 w-full" /> <div class="absolute left-0 top-0 w-full p-4 lg:p-8"> <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Headline Description</h1> <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div> </div> </div> </div> </section> COPY ```
Problem

Internal Struggle

Our latest updates and what is happening in the organisation

Headline Description

Content can be used to explain the glimpse idea or to catch in seconds viewer eye.

Headline Description

Content can be used to explain the glimpse idea or to catch in seconds viewer eye.
``` Problem Internal Struggle ================= Our latest updates and what is happening in the organisation ![](https://placehold.co/600x600)Headline Description ==================== Content can be used to explain the glimpse idea or to catch in seconds viewer eye. ![](https://placehold.co/600x600)Headline Description ==================== Content can be used to explain the glimpse idea or to catch in seconds viewer eye. <section 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 layout="grid grid-cols:1 tw-lg:grid-cols:2" space="m-b:medium tw-lg:m-b:large"> <div layout="col-span:1 tw-lg:col-span:2"> <div space="m-b:small max-w:\[max-content\] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:blue-600 font:tw-bold text:blue-600">Problem</div> </div> <div> <h1 space="m-b:small tw-lg:m-b:none" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">Internal Struggle</h1> </div> <div layout="flex items:center"> <p space="w:\[100%\]" visual="text:left text-size:base font:tw-semibold tw-lg:text:right tw-lg:text-size:huge">Our latest updates and what is happening in the organisation</p> </div> </div> <div layout="grid grid-cols:1 tw-lg:grid-cols:2" space="g:medium"> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 100%"> <img src="https://placehold.co/600x600" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute left:none top:none" space="w:\[100%\] p:medium tw-lg:p:large"> <h1 space="m-b:small tw-lg:m-b:medium" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">Headline Description</h1> <div visual="text-size:base tw-lg:text-size:big">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div> </div> </div> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 100%"> <img src="https://placehold.co/600x600" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute left:none top:none" space="w:\[100%\] p:medium tw-lg:p:large"> <h1 space="m-b:small tw-lg:m-b:medium" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">Headline Description</h1> <div visual="text-size:base tw-lg:text-size:big">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div> </div> </div> </div> </section> COPY ```
Problem

Internal Struggle

Our latest updates and what is happening in the organisation

Headline Description

Content can be used to explain the glimpse idea or to catch in seconds viewer eye.

Headline Description

Content can be used to explain the glimpse idea or to catch in seconds viewer eye.
``` #### [\#](https://senangstart.com/sections/problems-2/llms.txt)Multi-Format Problems problem Highlights various challenges or problems using a mix of card sizes and formats for dynamic visual storytelling. TailwindCSS SenangStart CSS Problem External Struggle ================= Our latest updates and what is happening in the organisation ![](https://placehold.co/400x400)Tag Content can be used to explain the glimpse idea or to catch in seconds viewer eye. ![](https://placehold.co/400x400)Tag Content can be used to explain the glimpse idea or to catch in seconds viewer eye. ![](https://placehold.co/400x400)Tag Content can be used to explain the glimpse idea or to catch in seconds viewer eye. ![](https://placehold.co/800x500)Headline Description ==================== Content can be used to explain the glimpse idea or to catch in seconds viewer eye. <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="mb-4 grid grid-cols-1 lg:mb-8 lg:grid-cols-2"> <div class="col-span-1 lg:col-span-2"> <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Problem</div> </div> <div> <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-0 lg:text-6xl">External Struggle</h1> </div> <div class="flex items-center"> <p class="w-full text-left text-base font-semibold lg:text-right lg:text-2xl">Our latest updates and what is happening in the organisation</p> </div> </div> <div class="grid grid-cols-1 gap-4 lg:grid-cols-3"> <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%"> <img src="https://placehold.co/400x400" class="absolute top-0 w-full" /> <div class="absolute left-0 top-0 w-full p-4"> <div class="mb-2 max-w-max rounded-md border-2 border-black px-2 font-bold lg:mb-4">Tag</div> <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div> </div> </div> <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%"> <img src="https://placehold.co/400x400" class="absolute top-0 w-full" /> <div class="absolute left-0 top-0 w-full p-4"> <div class="mb-2 max-w-max rounded-md border-2 border-black px-2 font-bold lg:mb-4">Tag</div> <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div> </div> </div> <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%"> <img src="https://placehold.co/400x400" class="absolute top-0 w-full" /> <div class="absolute left-0 top-0 w-full p-4"> <div class="mb-2 max-w-max rounded-md border-2 border-black px-2 font-bold lg:mb-4">Tag</div> <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div> </div> </div> <div class="relative col-span-1 overflow-hidden rounded-lg bg-gray-200 lg:col-span-3" style="padding-top: 60%"> <img src="https://placehold.co/800x500" class="absolute top-0 w-full" /> <div class="absolute left-0 top-0 w-full p-4 lg:p-8"> <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Headline Description</h1> <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div> </div> </div> </div> </section> COPY ```
Problem

External Struggle

Our latest updates and what is happening in the organisation

Tag
Content can be used to explain the glimpse idea or to catch in seconds viewer eye.
Tag
Content can be used to explain the glimpse idea or to catch in seconds viewer eye.
Tag
Content can be used to explain the glimpse idea or to catch in seconds viewer eye.

Headline Description

Content can be used to explain the glimpse idea or to catch in seconds viewer eye.
``` Problem External Struggle ================= Our latest updates and what is happening in the organisation ![](https://placehold.co/400x400)Tag Content can be used to explain the glimpse idea or to catch in seconds viewer eye. ![](https://placehold.co/400x400)Tag Content can be used to explain the glimpse idea or to catch in seconds viewer eye. ![](https://placehold.co/400x400)Tag Content can be used to explain the glimpse idea or to catch in seconds viewer eye. ![](https://placehold.co/800x500)Headline Description ==================== Content can be used to explain the glimpse idea or to catch in seconds viewer eye. <section 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 layout="grid grid-cols:1 tw-lg:grid-cols:2" space="m-b:medium tw-lg:m-b:large"> <div layout="col-span:1 tw-lg:col-span:2"> <div space="m-b:small max-w:\[max-content\] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:blue-600 font:tw-bold text:blue-600">Problem</div> </div> <div> <h1 space="m-b:small tw-lg:m-b:none" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">External Struggle</h1> </div> <div layout="flex items:center"> <p space="w:\[100%\]" visual="text:left text-size:base font:tw-semibold tw-lg:text:right tw-lg:text-size:huge">Our latest updates and what is happening in the organisation</p> </div> </div> <div layout="grid grid-cols:1 tw-lg:grid-cols:3" space="g:medium"> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 100%"> <img src="https://placehold.co/400x400" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute left:none top:none" space="w:\[100%\] p:medium"> <div space="m-b:small max-w:\[max-content\] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:black font:tw-bold">Tag</div> <div visual="text-size:base tw-lg:text-size:big">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div> </div> </div> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 100%"> <img src="https://placehold.co/400x400" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute left:none top:none" space="w:\[100%\] p:medium"> <div space="m-b:small max-w:\[max-content\] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:black font:tw-bold">Tag</div> <div visual="text-size:base tw-lg:text-size:big">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div> </div> </div> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 100%"> <img src="https://placehold.co/400x400" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute left:none top:none" space="w:\[100%\] p:medium"> <div space="m-b:small max-w:\[max-content\] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:black font:tw-bold">Tag</div> <div visual="text-size:base tw-lg:text-size:big">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div> </div> </div> <div layout="relative col-span:1 overflow:hidden tw-lg:col-span:3" visual="rounded:medium bg:gray-200" style="padding-top: 60%"> <img src="https://placehold.co/800x500" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute left:none top:none" space="w:\[100%\] p:medium tw-lg:p:large"> <h1 space="m-b:small tw-lg:m-b:medium" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">Headline Description</h1> <div visual="text-size:base tw-lg:text-size:big">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div> </div> </div> </div> </section> COPY ```
Problem

External Struggle

Our latest updates and what is happening in the organisation

Tag
Content can be used to explain the glimpse idea or to catch in seconds viewer eye.
Tag
Content can be used to explain the glimpse idea or to catch in seconds viewer eye.
Tag
Content can be used to explain the glimpse idea or to catch in seconds viewer eye.

Headline Description

Content can be used to explain the glimpse idea or to catch in seconds viewer eye.
``` #### [\#](https://senangstart.com/sections/problems-4/llms.txt)Problem Before/After problem Contrasts 'before' and 'after' scenarios to effectively demonstrate a solution's impact on a problem. TailwindCSS SenangStart CSS Transform The Path to Improvement ------------------------- See how our solutions transform common business challenges ### Before - Manual data entry and paperwork - Scattered communication channels - Delayed decision making ### After - Automated workflows and processes - Centralized communication hub - Real-time data and insights <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="mb-8 text-center"> <div class="mx-auto mb-2 w-min rounded-lg bg-blue-600 px-2 py-1"> <p class="text-sm font-bold uppercase text-white">Transform</p> </div> <h2 class="mb-4 text-3xl font-bold lg:text-6xl"> The Path to Improvement </h2> <p class="text-lg lg:text-xl"> See how our solutions transform common business challenges </p> </div> <div class="grid gap-8 lg:grid-cols-2"> <div class="rounded-lg bg-neutral-100 p-8"> <h3 class="mb-4 text-2xl font-bold text-red-500">Before</h3> <ul class="space-y-4"> <li class="flex items-center"> <i class="fas fa-times-circle mr-3 text-red-500"></i> <span>Manual data entry and paperwork</span> </li> <li class="flex items-center"> <i class="fas fa-times-circle mr-3 text-red-500"></i> <span>Scattered communication channels</span> </li> <li class="flex items-center"> <i class="fas fa-times-circle mr-3 text-red-500"></i> <span>Delayed decision making</span> </li> </ul> </div> <div class="rounded-lg bg-neutral-100 p-8"> <h3 class="mb-4 text-2xl font-bold text-green-500">After</h3> <ul class="space-y-4"> <li class="flex items-center"> <i class="fas fa-check-circle mr-3 text-green-500"></i> <span>Automated workflows and processes</span> </li> <li class="flex items-center"> <i class="fas fa-check-circle mr-3 text-green-500"></i> <span>Centralized communication hub</span> </li> <li class="flex items-center"> <i class="fas fa-check-circle mr-3 text-green-500"></i> <span>Real-time data and insights</span> </li> </ul> </div> </div> </section> COPY ```

Transform

The Path to Improvement

See how our solutions transform common business challenges

Before

  • Manual data entry and paperwork
  • Scattered communication channels
  • Delayed decision making

After

  • Automated workflows and processes
  • Centralized communication hub
  • Real-time data and insights
``` Transform The Path to Improvement ------------------------- See how our solutions transform common business challenges ### Before - Manual data entry and paperwork - Scattered communication channels - Delayed decision making ### After - Automated workflows and processes - Centralized communication hub - Real-time data and insights <section 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 space="m-b:large" visual="text:center"> <div space="m-x:auto m-b:small w:\[min-content\] p-x:small p-y:tiny" visual="rounded:medium bg:blue-600"> <p visual="text-size:small font:tw-bold uppercase text:white">Transform</p> </div> <h2 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mega"> The Path to Improvement </h2> <p visual="text-size:large tw-lg:text-size:big"> See how our solutions transform common business challenges </p> </div> <div layout="grid tw-lg:grid-cols:2" space="g:large"> <div space="p:large" visual="rounded:medium bg:neutral-100"> <h3 space="m-b:medium" visual="text-size:huge font:tw-bold text:red-500">Before</h3> <ul class="space-y-4"> <li layout="flex items:center"> <i space="m-r:small-3x" visual="text:red-500" class="fas fa-times-circle"></i> <span>Manual data entry and paperwork</span> </li> <li layout="flex items:center"> <i space="m-r:small-3x" visual="text:red-500" class="fas fa-times-circle"></i> <span>Scattered communication channels</span> </li> <li layout="flex items:center"> <i space="m-r:small-3x" visual="text:red-500" class="fas fa-times-circle"></i> <span>Delayed decision making</span> </li> </ul> </div> <div space="p:large" visual="rounded:medium bg:neutral-100"> <h3 space="m-b:medium" visual="text-size:huge font:tw-bold text:green-500">After</h3> <ul class="space-y-4"> <li layout="flex items:center"> <i space="m-r:small-3x" visual="text:green-500" class="fas fa-check-circle"></i> <span>Automated workflows and processes</span> </li> <li layout="flex items:center"> <i space="m-r:small-3x" visual="text:green-500" class="fas fa-check-circle"></i> <span>Centralized communication hub</span> </li> <li layout="flex items:center"> <i space="m-r:small-3x" visual="text:green-500" class="fas fa-check-circle"></i> <span>Real-time data and insights</span> </li> </ul> </div> </div> </section> COPY ```

Transform

The Path to Improvement

See how our solutions transform common business challenges

Before

  • Manual data entry and paperwork
  • Scattered communication channels
  • Delayed decision making

After

  • Automated workflows and processes
  • Centralized communication hub
  • Real-time data and insights
``` #### [\#](https://senangstart.com/sections/problems-6/llms.txt)Problem Image Stack problem Presents multiple challenges or pain points using a visually engaging stack of image-based cards with descriptions. TailwindCSS SenangStart CSS Problems Real Challenges, Real Solutions --------------------------------- Every business faces unique challenges. We help identify and solve them. ![Challenge 1](https://placehold.co/600x200)### Market Competition Standing out in a crowded market requires innovative solutions and strategic thinking. ![Challenge 2](https://placehold.co/600x200)### Digital Transformation Adapting to rapid technological changes while maintaining operational efficiency. <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="grid gap-8 lg:grid-cols-2"> <div class="flex flex-col justify-center"> <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600" > Problems </div> <h2 class="mb-4 text-3xl font-bold lg:text-5xl"> Real Challenges, Real Solutions </h2> <p class="text-lg lg:text-xl"> Every business faces unique challenges. We help identify and solve them. </p> </div> <div class="grid gap-4"> <div class="group relative overflow-hidden rounded-lg"> <img src="https://placehold.co/600x200" alt="Challenge 1" class="w-full transition-transform duration-300 group-hover:scale-105" /> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent p-6 text-white" > <h3 class="mt-auto text-xl font-bold">Market Competition</h3> <p class="text-lg"> Standing out in a crowded market requires innovative solutions and strategic thinking. </p> </div> </div> <div class="group relative overflow-hidden rounded-lg"> <img src="https://placehold.co/600x200" alt="Challenge 2" class="w-full transition-transform duration-300 group-hover:scale-105" /> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent p-6 text-white" > <h3 class="mt-auto text-xl font-bold">Digital Transformation</h3> <p class="text-lg"> Adapting to rapid technological changes while maintaining operational efficiency. </p> </div> </div> </div> </div> </section> COPY ```
Problems

Real Challenges, Real Solutions

Every business faces unique challenges. We help identify and solve them.

Challenge 1

Market Competition

Standing out in a crowded market requires innovative solutions and strategic thinking.

Challenge 2

Digital Transformation

Adapting to rapid technological changes while maintaining operational efficiency.

``` Problems Real Challenges, Real Solutions --------------------------------- Every business faces unique challenges. We help identify and solve them. ![Challenge 1](https://placehold.co/600x200)### Market Competition Standing out in a crowded market requires innovative solutions and strategic thinking. ![Challenge 2](https://placehold.co/600x200)### Digital Transformation Adapting to rapid technological changes while maintaining operational efficiency. <section 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 layout="grid tw-lg:grid-cols:2" space="g:large"> <div layout="flex col justify:center"> <div space="m-b:small max-w:\[max-content\] p-x:small" visual="rounded:small border-w:regular border:blue-600 font:tw-bold text:blue-600" > Problems </div> <h2 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mount"> Real Challenges, Real Solutions </h2> <p visual="text-size:large tw-lg:text-size:big"> Every business faces unique challenges. We help identify and solve them. </p> </div> <div layout="grid" space="g:medium"> <div layout="relative overflow:hidden" visual="rounded:medium" class="group"> <img src="https://placehold.co/600x200" alt="Challenge 1" space="w:\[100%\]" visual="transition:transform duration:slow" class="group-hover:scale-105" /> <div layout="absolute inset:none" space="p:medium-3x" visual="bg-image:gradient-to-t from:black/80 to:transparent text:white" > <h3 space="m-t:auto" visual="text-size:big font:tw-bold">Market Competition</h3> <p visual="text-size:large"> Standing out in a crowded market requires innovative solutions and strategic thinking. </p> </div> </div> <div layout="relative overflow:hidden" visual="rounded:medium" class="group"> <img src="https://placehold.co/600x200" alt="Challenge 2" space="w:\[100%\]" visual="transition:transform duration:slow" class="group-hover:scale-105" /> <div layout="absolute inset:none" space="p:medium-3x" visual="bg-image:gradient-to-t from:black/80 to:transparent text:white" > <h3 space="m-t:auto" visual="text-size:big font:tw-bold">Digital Transformation</h3> <p visual="text-size:large"> Adapting to rapid technological changes while maintaining operational efficiency. </p> </div> </div> </div> </div> </section> COPY ```
Problems

Real Challenges, Real Solutions

Every business faces unique challenges. We help identify and solve them.

Challenge 1

Market Competition

Standing out in a crowded market requires innovative solutions and strategic thinking.

Challenge 2

Digital Transformation

Adapting to rapid technological changes while maintaining operational efficiency.

``` #### [\#](https://senangstart.com/sections/problems-5/llms.txt)Tabbed Problem Explore problem Allows users to explore different problem areas via a tabbed interface, revealing specific details for each selection. TailwindCSS SenangStart CSS Challenges Understanding Your Pain Points -------------------------------- Click on each challenge to learn more about how we address it ### Operational Inefficiency ### Data Management ### Customer Experience #### Manual Processes Slowing You Down? Many businesses waste valuable time on repetitive tasks that could be automated, leading to reduced productivity and increased costs. #### Struggling with Data Overload? Organizations often struggle to manage and analyze their data effectively, missing out on valuable insights and opportunities. #### Customer Satisfaction Issues? Poor customer experience management can lead to decreased satisfaction rates and lost business opportunities. <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="mb-8"> <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600" > Challenges </div> <h2 class="mb-4 text-3xl font-bold lg:text-5xl"> Understanding Your Pain Points </h2> <p class="text-lg lg:text-xl"> Click on each challenge to learn more about how we address it </p> </div> <div class="grid gap-4" x-data="{ activeTab: 'tab1' }"> <div class="grid gap-4 lg:grid-cols-3"> <button @click="activeTab = 'tab1'" :class="{ 'bg-blue-600 text-white': activeTab === 'tab1', 'bg-neutral-100': activeTab !== 'tab1' }" class="rounded-lg p-4 text-left transition-colors" > <h3 class="text-xl font-bold">Operational Inefficiency</h3> </button> <button @click="activeTab = 'tab2'" :class="{ 'bg-blue-600 text-white': activeTab === 'tab2', 'bg-neutral-100': activeTab !== 'tab2' }" class="rounded-lg p-4 text-left transition-colors" > <h3 class="text-xl font-bold">Data Management</h3> </button> <button @click="activeTab = 'tab3'" :class="{ 'bg-blue-600 text-white': activeTab === 'tab3', 'bg-neutral-100': activeTab !== 'tab3' }" class="rounded-lg p-4 text-left transition-colors" > <h3 class="text-xl font-bold">Customer Experience</h3> </button> </div> <div class="rounded-lg bg-neutral-100 p-6"> <div x-show="activeTab === 'tab1'" class="space-y-4"> <h4 class="text-xl font-bold"> Manual Processes Slowing You Down? </h4> <p class="text-lg"> Many businesses waste valuable time on repetitive tasks that could be automated, leading to reduced productivity and increased costs. </p> </div> <div x-show="activeTab === 'tab2'" class="space-y-4"> <h4 class="text-xl font-bold">Struggling with Data Overload?</h4> <p class="text-lg"> Organizations often struggle to manage and analyze their data effectively, missing out on valuable insights and opportunities. </p> </div> <div x-show="activeTab === 'tab3'" class="space-y-4"> <h4 class="text-xl font-bold">Customer Satisfaction Issues?</h4> <p class="text-lg"> Poor customer experience management can lead to decreased satisfaction rates and lost business opportunities. </p> </div> </div> </div> </section> COPY ```
Challenges

Understanding Your Pain Points

Click on each challenge to learn more about how we address it

Manual Processes Slowing You Down?

Many businesses waste valuable time on repetitive tasks that could be automated, leading to reduced productivity and increased costs.

Struggling with Data Overload?

Organizations often struggle to manage and analyze their data effectively, missing out on valuable insights and opportunities.

Customer Satisfaction Issues?

Poor customer experience management can lead to decreased satisfaction rates and lost business opportunities.

``` Challenges Understanding Your Pain Points -------------------------------- Click on each challenge to learn more about how we address it ### Operational Inefficiency ### Data Management ### Customer Experience #### Manual Processes Slowing You Down? Many businesses waste valuable time on repetitive tasks that could be automated, leading to reduced productivity and increased costs. #### Struggling with Data Overload? Organizations often struggle to manage and analyze their data effectively, missing out on valuable insights and opportunities. #### Customer Satisfaction Issues? Poor customer experience management can lead to decreased satisfaction rates and lost business opportunities. <section 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 space="m-b:large"> <div space="m-b:small max-w:\[max-content\] p-x:small" visual="rounded:small border-w:regular border:blue-600 font:tw-bold text:blue-600" > Challenges </div> <h2 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mount"> Understanding Your Pain Points </h2> <p visual="text-size:large tw-lg:text-size:big"> Click on each challenge to learn more about how we address it </p> </div> <div layout="grid" space="g:medium" x-data="{ activeTab: 'tab1' }"> <div layout="grid tw-lg:grid-cols:3" space="g:medium"> <button @click="activeTab = 'tab1'" :class="{ 'bg-blue-600 text-white': activeTab === 'tab1', 'bg-neutral-100': activeTab !== 'tab1' }" space="p:medium" visual="rounded:medium text:left transition:colors" > <h3 visual="text-size:big font:tw-bold">Operational Inefficiency</h3> </button> <button @click="activeTab = 'tab2'" :class="{ 'bg-blue-600 text-white': activeTab === 'tab2', 'bg-neutral-100': activeTab !== 'tab2' }" space="p:medium" visual="rounded:medium text:left transition:colors" > <h3 visual="text-size:big font:tw-bold">Data Management</h3> </button> <button @click="activeTab = 'tab3'" :class="{ 'bg-blue-600 text-white': activeTab === 'tab3', 'bg-neutral-100': activeTab !== 'tab3' }" space="p:medium" visual="rounded:medium text:left transition:colors" > <h3 visual="text-size:big font:tw-bold">Customer Experience</h3> </button> </div> <div space="p:medium-3x" visual="rounded:medium bg:neutral-100"> <div x-show="activeTab === 'tab1'" class="space-y-4"> <h4 visual="text-size:big font:tw-bold"> Manual Processes Slowing You Down? </h4> <p visual="text-size:large"> Many businesses waste valuable time on repetitive tasks that could be automated, leading to reduced productivity and increased costs. </p> </div> <div x-show="activeTab === 'tab2'" class="space-y-4"> <h4 visual="text-size:big font:tw-bold">Struggling with Data Overload?</h4> <p visual="text-size:large"> Organizations often struggle to manage and analyze their data effectively, missing out on valuable insights and opportunities. </p> </div> <div x-show="activeTab === 'tab3'" class="space-y-4"> <h4 visual="text-size:big font:tw-bold">Customer Satisfaction Issues?</h4> <p visual="text-size:large"> Poor customer experience management can lead to decreased satisfaction rates and lost business opportunities. </p> </div> </div> </div> </section> COPY ```
Challenges

Understanding Your Pain Points

Click on each challenge to learn more about how we address it

Manual Processes Slowing You Down?

Many businesses waste valuable time on repetitive tasks that could be automated, leading to reduced productivity and increased costs.

Struggling with Data Overload?

Organizations often struggle to manage and analyze their data effectively, missing out on valuable insights and opportunities.

Customer Satisfaction Issues?

Poor customer experience management can lead to decreased satisfaction rates and lost business opportunities.

``` #### [\#](https://senangstart.com/sections/faq-1/llms.txt)Classic Accordion faq Presents frequently asked questions and answers in a classic, collapsible accordion style for easy readability. TailwindCSS SenangStart CSS Frequently Asked Questions =========================== We're sure you have questions, that's exactly why we've laid out all the answers for you here. Who is SenangStart for? SenangStart is perfect for Non-technical aspiring startup founders who are looking for a rapid development service that can help them build their Minimum Viable Product without having to go through the hassle of assembling an internal team. It’s like having a development team in your backpocket. What is unique about SenangStart? Unlike most traditional software development agency, SenangStart deoesnt take charge a huge project fee and equity in exchange to build on your ideas. Our flexible monthly subscription package ensures that you keep your cost lean while having a product that you can go to market with or raise more funds for your startup. What sort of MVPs can be built by SenangStart? You name it, we can build it. Our solution ranges from Automation Tools, CRMs, Saas, Mobile Applications, Landing Pages, Special Calculator, Onboarding System, Learning Management System and to name a few. We will suggest what is the best solution during the consultation call with our expert. What are the packages available? We have two types of packages, namely Package A and Package B. Package A suits for founders who already have a clue of what they want to build together with the design direction. This is where we act as a appointed developer ONLY for the product. Package B, on the other hands, gives you a complete product support. We help you figure the roadmap, features , and craft out the best user experience for the product. <section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto" id="ioede6"> <div class="grid grid-cols-1 mb-4 lg:mb-8 mx-0 lg:mx-24"> <div> <h1 class="text-3xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">Frequently Asked Questions </h1> </div> <div class="flex items-center"> <p class="text-xl lg:text-2xl font-semibold w-full">We're sure you have questions, that's exactly why we've laid out all the answers for you here. </p> </div> </div> <div class="flex flex-col gap-4"> <div id="i0yeej" x-data="{ isOpen: true }" class="rounded-lg shadow-xl p-8 gap-8 flex flex-col"> <div class="flex gap-4 items-center justify-center"> <p class="text-lg font-semibold flex-grow">Who is SenangStart for? </p> <div id="ipc6tj" x-on:click="isOpen = !isOpen" class="min-w-8 min-h-8 rounded bg-gray-100 flex items-center justify-center cursor-pointer"> <i :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas"> </i> </div> </div> <div x-show="isOpen" class="text-lg" id="ixn91f">SenangStart is perfect for Non-technical aspiring startup founders who are looking for a rapid development service that can help them build their Minimum Viable Product without having to go through the hassle of assembling an internal team. It’s like having a development team in your backpocket. </div> </div> <div x-data="{ isOpen: false }" class="rounded-lg shadow-xl p-8 gap-8 flex flex-col"> <div class="flex gap-4 items-center justify-center"> <p class="text-lg font-semibold flex-grow">What is unique about SenangStart? </p> <div id="in8z11" x-on:click="isOpen = !isOpen" class="min-w-8 min-h-8 rounded bg-gray-100 flex items-center justify-center cursor-pointer"> <i :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas"> </i> </div> </div> <div x-show="isOpen" class="text-lg" id="ifl1xy">Unlike most traditional software development agency, SenangStart deoesnt take charge a huge project fee and equity in exchange to build on your ideas. Our flexible monthly subscription package ensures that you keep your cost lean while having a product that you can go to market with or raise more funds for your startup. </div> </div> <div x-data="{ isOpen: false }" class="rounded-lg shadow-xl p-8 gap-8 flex flex-col"> <div class="flex gap-4 items-center justify-center"> <p class="text-lg font-semibold flex-grow">What sort of MVPs can be built by SenangStart? </p> <div x-on:click="isOpen = !isOpen" class="min-w-8 min-h-8 rounded bg-gray-100 flex items-center justify-center cursor-pointer"> <i id="ieq38r" :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas"> </i> </div> </div> <div x-show="isOpen" class="text-lg">You name it, we can build it. Our solution ranges from Automation Tools, CRMs, Saas, Mobile Applications, Landing Pages, Special Calculator, Onboarding System, Learning Management System and to name a few. We will suggest what is the best solution during the consultation call with our expert. </div> </div> <div x-data="{ isOpen: false }" class="rounded-lg shadow-xl p-8 gap-8 flex flex-col"> <div class="flex gap-4 items-center justify-center"> <p class="text-lg font-semibold flex-grow">What are the packages available? </p> <div id="ipn6gd" x-on:click="isOpen = !isOpen" class="min-w-8 min-h-8 rounded bg-gray-100 flex items-center justify-center cursor-pointer"> <i :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas"> </i> </div> </div> <div x-show="isOpen" class="text-lg">We have two types of packages, namely Package A and Package B. Package A suits for founders who already have a clue of what they want to build together with the design direction. This is where we act as a appointed developer ONLY for the product. Package B, on the other hands, gives you a complete product support. We help you figure the roadmap, features , and craft out the best user experience for the product. </div> </div> </div> </section> COPY ```

Frequently Asked Questions

We're sure you have questions, that's exactly why we've laid out all the answers for you here.

Who is SenangStart for?

SenangStart is perfect for Non-technical aspiring startup founders who are looking for a rapid development service that can help them build their Minimum Viable Product without having to go through the hassle of assembling an internal team. It’s like having a development team in your backpocket.

What is unique about SenangStart?

Unlike most traditional software development agency, SenangStart deoesnt take charge a huge project fee and equity in exchange to build on your ideas. Our flexible monthly subscription package ensures that you keep your cost lean while having a product that you can go to market with or raise more funds for your startup.

What sort of MVPs can be built by SenangStart?

You name it, we can build it. Our solution ranges from Automation Tools, CRMs, Saas, Mobile Applications, Landing Pages, Special Calculator, Onboarding System, Learning Management System and to name a few. We will suggest what is the best solution during the consultation call with our expert.

What are the packages available?

We have two types of packages, namely Package A and Package B. Package A suits for founders who already have a clue of what they want to build together with the design direction. This is where we act as a appointed developer ONLY for the product. Package B, on the other hands, gives you a complete product support. We help you figure the roadmap, features , and craft out the best user experience for the product.
``` Frequently Asked Questions =========================== We're sure you have questions, that's exactly why we've laid out all the answers for you here. Who is SenangStart for? SenangStart is perfect for Non-technical aspiring startup founders who are looking for a rapid development service that can help them build their Minimum Viable Product without having to go through the hassle of assembling an internal team. It’s like having a development team in your backpocket. What is unique about SenangStart? Unlike most traditional software development agency, SenangStart deoesnt take charge a huge project fee and equity in exchange to build on your ideas. Our flexible monthly subscription package ensures that you keep your cost lean while having a product that you can go to market with or raise more funds for your startup. What sort of MVPs can be built by SenangStart? You name it, we can build it. Our solution ranges from Automation Tools, CRMs, Saas, Mobile Applications, Landing Pages, Special Calculator, Onboarding System, Learning Management System and to name a few. We will suggest what is the best solution during the consultation call with our expert. What are the packages available? We have two types of packages, namely Package A and Package B. Package A suits for founders who already have a clue of what they want to build together with the design direction. This is where we act as a appointed developer ONLY for the product. Package B, on the other hands, gives you a complete product support. We help you figure the roadmap, features , and craft out the best user experience for the product. <section layout="container" space="p-x:medium-3x tw-lg:p-x:big-3x m-y:large tw-lg:m-y:big-3x m-x:auto" id="ioede6"> <div layout="grid grid-cols:1" space="m-b:medium tw-lg:m-b:large m-x:none tw-lg:m-x:giant"> <div> <h1 space="m-b:small tw-lg:m-b:medium" visual="text-size:grand tw-lg:text-size:mega capitalize font:tw-bold">Frequently Asked Questions </h1> </div> <div layout="flex items:center"> <p space="w:\[100%\]" visual="text-size:big tw-lg:text-size:huge font:tw-semibold">We're sure you have questions, that's exactly why we've laid out all the answers for you here. </p> </div> </div> <div layout="flex col" space="g:medium"> <div id="i0yeej" x-data="{ isOpen: true }" layout="flex col" space="p:large g:large" visual="rounded:medium shadow:medium"> <div layout="flex items:center justify:center" space="g:medium"> <p layout="grow" visual="text-size:large font:tw-semibold">Who is SenangStart for? </p> <div id="ipc6tj" x-on:click="isOpen = !isOpen" layout="flex items:center justify:center" space="min-w:large min-h:large" visual="rounded:small bg:gray-100 cursor:pointer"> <i :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas"> </i> </div> </div> <div x-show="isOpen" visual="text-size:large" id="ixn91f">SenangStart is perfect for Non-technical aspiring startup founders who are looking for a rapid development service that can help them build their Minimum Viable Product without having to go through the hassle of assembling an internal team. It’s like having a development team in your backpocket. </div> </div> <div x-data="{ isOpen: false }" layout="flex col" space="p:large g:large" visual="rounded:medium shadow:medium"> <div layout="flex items:center justify:center" space="g:medium"> <p layout="grow" visual="text-size:large font:tw-semibold">What is unique about SenangStart? </p> <div id="in8z11" x-on:click="isOpen = !isOpen" layout="flex items:center justify:center" space="min-w:large min-h:large" visual="rounded:small bg:gray-100 cursor:pointer"> <i :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas"> </i> </div> </div> <div x-show="isOpen" visual="text-size:large" id="ifl1xy">Unlike most traditional software development agency, SenangStart deoesnt take charge a huge project fee and equity in exchange to build on your ideas. Our flexible monthly subscription package ensures that you keep your cost lean while having a product that you can go to market with or raise more funds for your startup. </div> </div> <div x-data="{ isOpen: false }" layout="flex col" space="p:large g:large" visual="rounded:medium shadow:medium"> <div layout="flex items:center justify:center" space="g:medium"> <p layout="grow" visual="text-size:large font:tw-semibold">What sort of MVPs can be built by SenangStart? </p> <div x-on:click="isOpen = !isOpen" layout="flex items:center justify:center" space="min-w:large min-h:large" visual="rounded:small bg:gray-100 cursor:pointer"> <i id="ieq38r" :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas"> </i> </div> </div> <div x-show="isOpen" visual="text-size:large">You name it, we can build it. Our solution ranges from Automation Tools, CRMs, Saas, Mobile Applications, Landing Pages, Special Calculator, Onboarding System, Learning Management System and to name a few. We will suggest what is the best solution during the consultation call with our expert. </div> </div> <div x-data="{ isOpen: false }" layout="flex col" space="p:large g:large" visual="rounded:medium shadow:medium"> <div layout="flex items:center justify:center" space="g:medium"> <p layout="grow" visual="text-size:large font:tw-semibold">What are the packages available? </p> <div id="ipn6gd" x-on:click="isOpen = !isOpen" layout="flex items:center justify:center" space="min-w:large min-h:large" visual="rounded:small bg:gray-100 cursor:pointer"> <i :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas"> </i> </div> </div> <div x-show="isOpen" visual="text-size:large">We have two types of packages, namely Package A and Package B. Package A suits for founders who already have a clue of what they want to build together with the design direction. This is where we act as a appointed developer ONLY for the product. Package B, on the other hands, gives you a complete product support. We help you figure the roadmap, features , and craft out the best user experience for the product. </div> </div> </div> </section> COPY ```

Frequently Asked Questions

We're sure you have questions, that's exactly why we've laid out all the answers for you here.

Who is SenangStart for?

SenangStart is perfect for Non-technical aspiring startup founders who are looking for a rapid development service that can help them build their Minimum Viable Product without having to go through the hassle of assembling an internal team. It’s like having a development team in your backpocket.

What is unique about SenangStart?

Unlike most traditional software development agency, SenangStart deoesnt take charge a huge project fee and equity in exchange to build on your ideas. Our flexible monthly subscription package ensures that you keep your cost lean while having a product that you can go to market with or raise more funds for your startup.

What sort of MVPs can be built by SenangStart?

You name it, we can build it. Our solution ranges from Automation Tools, CRMs, Saas, Mobile Applications, Landing Pages, Special Calculator, Onboarding System, Learning Management System and to name a few. We will suggest what is the best solution during the consultation call with our expert.

What are the packages available?

We have two types of packages, namely Package A and Package B. Package A suits for founders who already have a clue of what they want to build together with the design direction. This is where we act as a appointed developer ONLY for the product. Package B, on the other hands, gives you a complete product support. We help you figure the roadmap, features , and craft out the best user experience for the product.
``` #### [\#](https://senangstart.com/sections/faq-4/llms.txt)Colored Block FAQ faq Features a visually distinct FAQ section with questions presented in colored blocks for enhanced readability. TailwindCSS SenangStart CSS Got Questions? We've Got Answers! ================================= We've compiled a list of the most common questions. If you don't find what you're looking for, feel free to reach out. Is SenangStart free to use? -------------------------------- Yes, many of our core components and sections are free to use. We may offer premium templates or advanced kits in the future, but the foundational library aims to be accessible. What browsers are supported? --------------------------------- Our components are designed to work on all modern browsers, including Chrome, Firefox, Safari, and Edge. We strive for broad compatibility. Can I contribute to SenangStart? ------------------------------------- We welcome contributions! If you have ideas for new components or improvements, please check our GitHub repository for contribution guidelines or get in touch with our team. How often is the library updated? -------------------------------------- We aim to release updates regularly, including new components, bug fixes, and enhancements based on user feedback and evolving design trends. <section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto bg-blue-600 text-white rounded-xl py-12 lg:py-20"> <div class="text-center mb-8 lg:mb-12 max-w-3xl mx-auto"> <h1 class="text-3xl lg:text-5xl font-bold mb-4">Got Questions? We've Got Answers!</h1> <p class="text-lg lg:text-xl text-blue-100"> We've compiled a list of the most common questions. If you don't find what you're looking for, feel free to reach out. </p> </div> <div class="space-y-3 max-w-3xl mx-auto"> <div x-data="{ isOpen: false }" class="bg-blue-700 rounded-lg"> <h2 @click="isOpen = !isOpen" class="cursor-pointer"> <button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left"> <span>Is SenangStart free to use?</span> <i class="fas fa-chevron-right transition-transform duration-200" :class="{':'transform rotate-90': isOpen}"></i> </button> </h2> <div x-show="isOpen" x-collapse class="p-5 border-t border-blue-800"> <p class="text-blue-50"> Yes, many of our core components and sections are free to use. We may offer premium templates or advanced kits in the future, but the foundational library aims to be accessible. </p> </div> </div> <div x-data="{ isOpen: false }" class="bg-blue-700 rounded-lg"> <h2 @click="isOpen = !isOpen" class="cursor-pointer"> <button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left"> <span>What browsers are supported?</span> <i class="fas fa-chevron-right transition-transform duration-200" :class="{':'transform rotate-90': isOpen}"></i> </button> </h2> <div x-show="isOpen" x-collapse class="p-5 border-t border-blue-800"> <p class="text-blue-50"> Our components are designed to work on all modern browsers, including Chrome, Firefox, Safari, and Edge. We strive for broad compatibility. </p> </div> </div> <div x-data="{ isOpen: false }" class="bg-blue-700 rounded-lg"> <h2 @click="isOpen = !isOpen" class="cursor-pointer"> <button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left"> <span>Can I contribute to SenangStart?</span> <i class="fas fa-chevron-right transition-transform duration-200" :class="{':'transform rotate-90': isOpen}"></i> </button> </h2> <div x-show="isOpen" x-collapse class="p-5 border-t border-blue-800"> <p class="text-blue-50"> We welcome contributions! If you have ideas for new components or improvements, please check our GitHub repository for contribution guidelines or get in touch with our team. </p> </div> </div> <div x-data="{ isOpen: false }" class="bg-blue-700 rounded-lg"> <h2 @click="isOpen = !isOpen" class="cursor-pointer"> <button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left"> <span>How often is the library updated?</span> <i class="fas fa-chevron-right transition-transform duration-200" :class="{':'transform rotate-90': isOpen}"></i> </button> </h2> <div x-show="isOpen" x-collapse class="p-5 border-t border-blue-800"> <p class="text-blue-50"> We aim to release updates regularly, including new components, bug fixes, and enhancements based on user feedback and evolving design trends. </p> </div> </div> </div> </section> COPY ```

Got Questions? We've Got Answers!

We've compiled a list of the most common questions. If you don't find what you're looking for, feel free to reach out.

Yes, many of our core components and sections are free to use. We may offer premium templates or advanced kits in the future, but the foundational library aims to be accessible.

Our components are designed to work on all modern browsers, including Chrome, Firefox, Safari, and Edge. We strive for broad compatibility.

We welcome contributions! If you have ideas for new components or improvements, please check our GitHub repository for contribution guidelines or get in touch with our team.

We aim to release updates regularly, including new components, bug fixes, and enhancements based on user feedback and evolving design trends.

``` Got Questions? We've Got Answers! ================================= We've compiled a list of the most common questions. If you don't find what you're looking for, feel free to reach out. Is SenangStart free to use? -------------------------------- Yes, many of our core components and sections are free to use. We may offer premium templates or advanced kits in the future, but the foundational library aims to be accessible. What browsers are supported? --------------------------------- Our components are designed to work on all modern browsers, including Chrome, Firefox, Safari, and Edge. We strive for broad compatibility. Can I contribute to SenangStart? ------------------------------------- We welcome contributions! If you have ideas for new components or improvements, please check our GitHub repository for contribution guidelines or get in touch with our team. How often is the library updated? -------------------------------------- We aim to release updates regularly, including new components, bug fixes, and enhancements based on user feedback and evolving design trends. <section layout="container" space="p-x:medium-3x tw-lg:p-x:big-3x m-y:large tw-lg:m-y:big-3x m-x:auto p-y:big tw-lg:p-y:big-4x" visual="bg:blue-600 text:white rounded:medium"> <div space="m-b:large tw-lg:m-b:big max-w:\[3xl\] m-x:auto" visual="text:center"> <h1 space="m-b:medium" visual="text-size:grand tw-lg:text-size:mount font:tw-bold">Got Questions? We've Got Answers!</h1> <p visual="text-size:large tw-lg:text-size:big text:blue-100"> We've compiled a list of the most common questions. If you don't find what you're looking for, feel free to reach out. </p> </div> <div space="max-w:\[3xl\] m-x:auto" class="space-y-3"> <div x-data="{ isOpen: false }" visual="bg:blue-700 rounded:medium"> <h2 @click="isOpen = !isOpen" visual="cursor:pointer"> <button type="button" layout="flex items:center justify:between" space="w:\[100%\] p:medium-2x" visual="font:tw-medium text:left"> <span>Is SenangStart free to use?</span> <i visual="transition:transform duration:normal" class="fas fa-chevron-right" :class="{':'transform rotate-90': isOpen}"></i> </button> </h2> <div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:blue-800" class="border-t"> <p visual="text:blue-50"> Yes, many of our core components and sections are free to use. We may offer premium templates or advanced kits in the future, but the foundational library aims to be accessible. </p> </div> </div> <div x-data="{ isOpen: false }" visual="bg:blue-700 rounded:medium"> <h2 @click="isOpen = !isOpen" visual="cursor:pointer"> <button type="button" layout="flex items:center justify:between" space="w:\[100%\] p:medium-2x" visual="font:tw-medium text:left"> <span>What browsers are supported?</span> <i visual="transition:transform duration:normal" class="fas fa-chevron-right" :class="{':'transform rotate-90': isOpen}"></i> </button> </h2> <div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:blue-800" class="border-t"> <p visual="text:blue-50"> Our components are designed to work on all modern browsers, including Chrome, Firefox, Safari, and Edge. We strive for broad compatibility. </p> </div> </div> <div x-data="{ isOpen: false }" visual="bg:blue-700 rounded:medium"> <h2 @click="isOpen = !isOpen" visual="cursor:pointer"> <button type="button" layout="flex items:center justify:between" space="w:\[100%\] p:medium-2x" visual="font:tw-medium text:left"> <span>Can I contribute to SenangStart?</span> <i visual="transition:transform duration:normal" class="fas fa-chevron-right" :class="{':'transform rotate-90': isOpen}"></i> </button> </h2> <div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:blue-800" class="border-t"> <p visual="text:blue-50"> We welcome contributions! If you have ideas for new components or improvements, please check our GitHub repository for contribution guidelines or get in touch with our team. </p> </div> </div> <div x-data="{ isOpen: false }" visual="bg:blue-700 rounded:medium"> <h2 @click="isOpen = !isOpen" visual="cursor:pointer"> <button type="button" layout="flex items:center justify:between" space="w:\[100%\] p:medium-2x" visual="font:tw-medium text:left"> <span>How often is the library updated?</span> <i visual="transition:transform duration:normal" class="fas fa-chevron-right" :class="{':'transform rotate-90': isOpen}"></i> </button> </h2> <div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:blue-800" class="border-t"> <p visual="text:blue-50"> We aim to release updates regularly, including new components, bug fixes, and enhancements based on user feedback and evolving design trends. </p> </div> </div> </div> </section> COPY ```

Got Questions? We've Got Answers!

We've compiled a list of the most common questions. If you don't find what you're looking for, feel free to reach out.

Yes, many of our core components and sections are free to use. We may offer premium templates or advanced kits in the future, but the foundational library aims to be accessible.

Our components are designed to work on all modern browsers, including Chrome, Firefox, Safari, and Edge. We strive for broad compatibility.

We welcome contributions! If you have ideas for new components or improvements, please check our GitHub repository for contribution guidelines or get in touch with our team.

We aim to release updates regularly, including new components, bug fixes, and enhancements based on user feedback and evolving design trends.

``` #### [\#](https://senangstart.com/sections/faq-6/llms.txt)Formal List FAQ faq Displays FAQs in a clean, formal list format with clear typography and toggle-able answers for easy reading. TailwindCSS SenangStart CSS FAQs Common Questions ------------------ What version of Tailwind CSS is required? We build and test our components with the latest stable version of Tailwind CSS (v3.x). While some components might work with older versions, we recommend using Tailwind CSS v3.0 or newer for full compatibility and access to the latest features. How do I handle responsiveness? All SenangStart components are designed to be responsive out-of-the-box using Tailwind's responsive prefixes (sm:, md:, lg:, xl:). You can further customize the responsive behavior by adjusting these utility classes as needed for your specific design requirements. Can I request new components or features? Yes, absolutely! We value community feedback. You can submit feature requests or ideas through our GitHub issues page or by contacting us directly. We prioritize requests based on demand and alignment with the library's goals. Are the icons included? We use Font Awesome for icons in our examples for broad recognition. You'll need to include Font Awesome (or your preferred icon library like Heroicons, Lucide, etc.) in your project separately. The HTML structure makes it easy to swap icon sets. [ Still have questions? Contact us ](#) <section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto"> <div class="text-center mb-12"> <span class="text-blue-600 font-semibold tracking-wide uppercase">FAQs</span> <h2 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-neutral-900 sm:text-4xl"> Common Questions </h2> </div> <div class="max-w-3xl mx-auto"> <dl class="space-y-8"> <div x-data="{ open: false }" class="pt-6"> <dt class="text-lg"> <button @click="open = !open" class="text-left w-full flex justify-between items-start text-neutral-400 focus:outline-none focus:text-neutral-900"> <span class="font-medium text-neutral-900"> What version of Tailwind CSS is required? </span> <span class="ml-6 h-7 flex items-center"> <i class="fas" :class="{ 'fa-chevron-up': open, 'fa-chevron-down': !open }"></i> </span> </button> </dt> <dd x-show="open" x-collapse class="mt-2 pr-12"> <p class="text-base text-neutral-500"> We build and test our components with the latest stable version of Tailwind CSS (v3.x). While some components might work with older versions, we recommend using Tailwind CSS v3.0 or newer for full compatibility and access to the latest features. </p> </dd> </div> <div x-data="{ open: true }" class="pt-6 border-t border-neutral-200"> <dt class="text-lg"> <button @click="open = !open" class="text-left w-full flex justify-between items-start text-neutral-400 focus:outline-none focus:text-neutral-900"> <span class="font-medium text-neutral-900"> How do I handle responsiveness? </span> <span class="ml-6 h-7 flex items-center"> <i class="fas" :class="{ 'fa-chevron-up': open, 'fa-chevron-down': !open }"></i> </span> </button> </dt> <dd x-show="open" x-collapse class="mt-2 pr-12"> <p class="text-base text-neutral-500"> All SenangStart components are designed to be responsive out-of-the-box using Tailwind's responsive prefixes (sm:, md:, lg:, xl:). You can further customize the responsive behavior by adjusting these utility classes as needed for your specific design requirements. </p> </dd> </div> <div x-data="{ open: false }" class="pt-6 border-t border-neutral-200"> <dt class="text-lg"> <button @click="open = !open" class="text-left w-full flex justify-between items-start text-neutral-400 focus:outline-none focus:text-neutral-900"> <span class="font-medium text-neutral-900"> Can I request new components or features? </span> <span class="ml-6 h-7 flex items-center"> <i class="fas" :class="{ 'fa-chevron-up': open, 'fa-chevron-down': !open }"></i> </span> </button> </dt> <dd x-show="open" x-collapse class="mt-2 pr-12"> <p class="text-base text-neutral-500"> Yes, absolutely! We value community feedback. You can submit feature requests or ideas through our GitHub issues page or by contacting us directly. We prioritize requests based on demand and alignment with the library's goals. </p> </dd> </div> <div x-data="{ open: false }" class="pt-6 border-t border-neutral-200"> <dt class="text-lg"> <button @click="open = !open" class="text-left w-full flex justify-between items-start text-neutral-400 focus:outline-none focus:text-neutral-900"> <span class="font-medium text-neutral-900"> Are the icons included? </span> <span class="ml-6 h-7 flex items-center"> <i class="fas" :class="{ 'fa-chevron-up': open, 'fa-chevron-down': !open }"></i> </span> </button> </dt> <dd x-show="open" x-collapse class="mt-2 pr-12"> <p class="text-base text-neutral-500"> We use Font Awesome for icons in our examples for broad recognition. You'll need to include Font Awesome (or your preferred icon library like Heroicons, Lucide, etc.) in your project separately. The HTML structure makes it easy to swap icon sets. </p> </dd> </div> </dl> </div> <div class="mt-10 text-center"> <a href="#" class="text-base font-medium text-blue-600 hover:text-blue-500"> Still have questions? Contact us </a> </div> </section> COPY ```
FAQs

Common Questions

We build and test our components with the latest stable version of Tailwind CSS (v3.x). While some components might work with older versions, we recommend using Tailwind CSS v3.0 or newer for full compatibility and access to the latest features.

All SenangStart components are designed to be responsive out-of-the-box using Tailwind's responsive prefixes (sm:, md:, lg:, xl:). You can further customize the responsive behavior by adjusting these utility classes as needed for your specific design requirements.

Yes, absolutely! We value community feedback. You can submit feature requests or ideas through our GitHub issues page or by contacting us directly. We prioritize requests based on demand and alignment with the library's goals.

We use Font Awesome for icons in our examples for broad recognition. You'll need to include Font Awesome (or your preferred icon library like Heroicons, Lucide, etc.) in your project separately. The HTML structure makes it easy to swap icon sets.

Still have questions? Contact us
``` FAQs Common Questions ------------------ What version of Tailwind CSS is required? We build and test our components with the latest stable version of Tailwind CSS (v3.x). While some components might work with older versions, we recommend using Tailwind CSS v3.0 or newer for full compatibility and access to the latest features. How do I handle responsiveness? All SenangStart components are designed to be responsive out-of-the-box using Tailwind's responsive prefixes (sm:, md:, lg:, xl:). You can further customize the responsive behavior by adjusting these utility classes as needed for your specific design requirements. Can I request new components or features? Yes, absolutely! We value community feedback. You can submit feature requests or ideas through our GitHub issues page or by contacting us directly. We prioritize requests based on demand and alignment with the library's goals. Are the icons included? We use Font Awesome for icons in our examples for broad recognition. You'll need to include Font Awesome (or your preferred icon library like Heroicons, Lucide, etc.) in your project separately. The HTML structure makes it easy to swap icon sets. [ Still have questions? Contact us ](#) <section layout="container" space="p-x:medium-3x tw-lg:p-x:big-3x m-y:large tw-lg:m-y:big-3x m-x:auto"> <div space="m-b:big" visual="text:center"> <span visual="text:blue-600 font:tw-semibold uppercase" class="tracking-wide">FAQs</span> <h2 space="m-t:small" visual="text-size:grand font:tw-extrabold text:neutral-900 tw-sm:text-size:giant" class="leading-8 tracking-tight"> Common Questions </h2> </div> <div space="max-w:\[3xl\] m-x:auto"> <dl class="space-y-8"> <div x-data="{ open: false }" space="p-t:medium-3x"> <dt visual="text-size:large"> <button @click="open = !open" layout="flex justify:between items:start" space="w:\[100%\]" visual="text:left text:neutral-400 focus:outline:none focus:text:neutral-900"> <span visual="font:tw-medium text:neutral-900"> What version of Tailwind CSS is required? </span> <span layout="flex items:center" space="m-l:medium-3x h:medium-4x"> <i class="fas" :class="{ 'fa-chevron-up': open, 'fa-chevron-down': !open }"></i> </span> </button> </dt> <dd x-show="open" x-collapse space="m-t:small p-r:big"> <p visual="text-size:base text:neutral-500"> We build and test our components with the latest stable version of Tailwind CSS (v3.x). While some components might work with older versions, we recommend using Tailwind CSS v3.0 or newer for full compatibility and access to the latest features. </p> </dd> </div> <div x-data="{ open: true }" space="p-t:medium-3x" visual="border:neutral-200" class="border-t"> <dt visual="text-size:large"> <button @click="open = !open" layout="flex justify:between items:start" space="w:\[100%\]" visual="text:left text:neutral-400 focus:outline:none focus:text:neutral-900"> <span visual="font:tw-medium text:neutral-900"> How do I handle responsiveness? </span> <span layout="flex items:center" space="m-l:medium-3x h:medium-4x"> <i class="fas" :class="{ 'fa-chevron-up': open, 'fa-chevron-down': !open }"></i> </span> </button> </dt> <dd x-show="open" x-collapse space="m-t:small p-r:big"> <p visual="text-size:base text:neutral-500"> All SenangStart components are designed to be responsive out-of-the-box using Tailwind's responsive prefixes (sm:, md:, lg:, xl:). You can further customize the responsive behavior by adjusting these utility classes as needed for your specific design requirements. </p> </dd> </div> <div x-data="{ open: false }" space="p-t:medium-3x" visual="border:neutral-200" class="border-t"> <dt visual="text-size:large"> <button @click="open = !open" layout="flex justify:between items:start" space="w:\[100%\]" visual="text:left text:neutral-400 focus:outline:none focus:text:neutral-900"> <span visual="font:tw-medium text:neutral-900"> Can I request new components or features? </span> <span layout="flex items:center" space="m-l:medium-3x h:medium-4x"> <i class="fas" :class="{ 'fa-chevron-up': open, 'fa-chevron-down': !open }"></i> </span> </button> </dt> <dd x-show="open" x-collapse space="m-t:small p-r:big"> <p visual="text-size:base text:neutral-500"> Yes, absolutely! We value community feedback. You can submit feature requests or ideas through our GitHub issues page or by contacting us directly. We prioritize requests based on demand and alignment with the library's goals. </p> </dd> </div> <div x-data="{ open: false }" space="p-t:medium-3x" visual="border:neutral-200" class="border-t"> <dt visual="text-size:large"> <button @click="open = !open" layout="flex justify:between items:start" space="w:\[100%\]" visual="text:left text:neutral-400 focus:outline:none focus:text:neutral-900"> <span visual="font:tw-medium text:neutral-900"> Are the icons included? </span> <span layout="flex items:center" space="m-l:medium-3x h:medium-4x"> <i class="fas" :class="{ 'fa-chevron-up': open, 'fa-chevron-down': !open }"></i> </span> </button> </dt> <dd x-show="open" x-collapse space="m-t:small p-r:big"> <p visual="text-size:base text:neutral-500"> We use Font Awesome for icons in our examples for broad recognition. You'll need to include Font Awesome (or your preferred icon library like Heroicons, Lucide, etc.) in your project separately. The HTML structure makes it easy to swap icon sets. </p> </dd> </div> </dl> </div> <div space="m-t:large-3x" visual="text:center"> <a href="#" visual="text-size:base font:tw-medium text:blue-600 hover:text:blue-500"> Still have questions? Contact us </a> </div> </section> COPY ```
FAQs

Common Questions

We build and test our components with the latest stable version of Tailwind CSS (v3.x). While some components might work with older versions, we recommend using Tailwind CSS v3.0 or newer for full compatibility and access to the latest features.

All SenangStart components are designed to be responsive out-of-the-box using Tailwind's responsive prefixes (sm:, md:, lg:, xl:). You can further customize the responsive behavior by adjusting these utility classes as needed for your specific design requirements.

Yes, absolutely! We value community feedback. You can submit feature requests or ideas through our GitHub issues page or by contacting us directly. We prioritize requests based on demand and alignment with the library's goals.

We use Font Awesome for icons in our examples for broad recognition. You'll need to include Font Awesome (or your preferred icon library like Heroicons, Lucide, etc.) in your project separately. The HTML structure makes it easy to swap icon sets.

Still have questions? Contact us
``` #### [\#](https://senangstart.com/sections/faq-2/llms.txt)Grid Toggle FAQ faq Organizes FAQs in a responsive grid, with each question toggling to display its answer for a compact layout. TailwindCSS SenangStart CSS SUPPORT Frequently Asked Questions ========================== Have questions? We've got answers. Explore our FAQ to find solutions to common queries. What is SenangStart? SenangStart is a UI library built with Tailwind CSS, designed to help developers and designers create beautiful, responsive websites quickly and easily. It includes a variety of pre-built components and sections. Who can use these components? Our components are for anyone building websites with Tailwind CSS. This includes freelance developers, agencies, and product teams looking to accelerate their workflow. Is there a Figma file available? Yes, we plan to release a comprehensive Figma design kit that complements our Tailwind CSS components. Stay tuned for updates on its availability! What about updates and support? We regularly update SenangStart with new components and features. Support is available through our community channels and dedicated support for premium users. Can't find your answer? [Contact our support team](#contact). <section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto"> <div class="text-center mb-8 lg:mb-12"> <div class="inline-block bg-blue-100 text-blue-600 text-sm font-semibold px-3 py-1 rounded-full mb-4"> SUPPORT </div> <h1 class="text-3xl lg:text-5xl font-bold mb-4">Frequently Asked Questions</h1> <p class="text-lg lg:text-xl text-neutral-600 max-w-2xl mx-auto"> Have questions? We've got answers. Explore our FAQ to find solutions to common queries. </p> </div> <div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto"> <div x-data="{ isOpen: false }" class="bg-neutral-50 rounded-lg border border-neutral-200"> <button @click="isOpen = !isOpen" class="w-full flex justify-between items-center p-5 text-left font-semibold"> What is SenangStart? <i :class="isOpen ? 'fa-minus' : 'fa-plus'" class="fas text-blue-600"></i> </button> <div x-show="isOpen" x-collapse class="p-5 border-t border-neutral-200 text-neutral-700"> SenangStart is a UI library built with Tailwind CSS, designed to help developers and designers create beautiful, responsive websites quickly and easily. It includes a variety of pre-built components and sections. </div> </div> <div x-data="{ isOpen: false }" class="bg-neutral-50 rounded-lg border border-neutral-200"> <button @click="isOpen = !isOpen" class="w-full flex justify-between items-center p-5 text-left font-semibold"> Who can use these components? <i :class="isOpen ? 'fa-minus' : 'fa-plus'" class="fas text-blue-600"></i> </button> <div x-show="isOpen" x-collapse class="p-5 border-t border-neutral-200 text-neutral-700"> Our components are for anyone building websites with Tailwind CSS. This includes freelance developers, agencies, and product teams looking to accelerate their workflow. </div> </div> <div x-data="{ isOpen: true }" class="bg-neutral-50 rounded-lg border border-neutral-200"> <button @click="isOpen = !isOpen" class="w-full flex justify-between items-center p-5 text-left font-semibold"> Is there a Figma file available? <i :class="isOpen ? 'fa-minus' : 'fa-plus'" class="fas text-blue-600"></i> </button> <div x-show="isOpen" x-collapse class="p-5 border-t border-neutral-200 text-neutral-700"> Yes, we plan to release a comprehensive Figma design kit that complements our Tailwind CSS components. Stay tuned for updates on its availability! </div> </div> <div x-data="{ isOpen: false }" class="bg-neutral-50 rounded-lg border border-neutral-200"> <button @click="isOpen = !isOpen" class="w-full flex justify-between items-center p-5 text-left font-semibold"> What about updates and support? <i :class="isOpen ? 'fa-minus' : 'fa-plus'" class="fas text-blue-600"></i> </button> <div x-show="isOpen" x-collapse class="p-5 border-t border-neutral-200 text-neutral-700"> We regularly update SenangStart with new components and features. Support is available through our community channels and dedicated support for premium users. </div> </div> </div> <div class="text-center mt-12"> <p class="text-lg text-neutral-600">Can't find your answer? <a href="#contact" class="text-blue-600 font-semibold hover:underline">Contact our support team</a>.</p> </div> </section> COPY ```
SUPPORT

Frequently Asked Questions

Have questions? We've got answers. Explore our FAQ to find solutions to common queries.

SenangStart is a UI library built with Tailwind CSS, designed to help developers and designers create beautiful, responsive websites quickly and easily. It includes a variety of pre-built components and sections.
Our components are for anyone building websites with Tailwind CSS. This includes freelance developers, agencies, and product teams looking to accelerate their workflow.
Yes, we plan to release a comprehensive Figma design kit that complements our Tailwind CSS components. Stay tuned for updates on its availability!
We regularly update SenangStart with new components and features. Support is available through our community channels and dedicated support for premium users.

Can't find your answer? Contact our support team.

``` SUPPORT Frequently Asked Questions ========================== Have questions? We've got answers. Explore our FAQ to find solutions to common queries. What is SenangStart? SenangStart is a UI library built with Tailwind CSS, designed to help developers and designers create beautiful, responsive websites quickly and easily. It includes a variety of pre-built components and sections. Who can use these components? Our components are for anyone building websites with Tailwind CSS. This includes freelance developers, agencies, and product teams looking to accelerate their workflow. Is there a Figma file available? Yes, we plan to release a comprehensive Figma design kit that complements our Tailwind CSS components. Stay tuned for updates on its availability! What about updates and support? We regularly update SenangStart with new components and features. Support is available through our community channels and dedicated support for premium users. Can't find your answer? [Contact our support team](#contact). <section layout="container" space="p-x:medium-3x tw-lg:p-x:big-3x m-y:large tw-lg:m-y:big-3x m-x:auto"> <div space="m-b:large tw-lg:m-b:big" visual="text:center"> <div layout="inline" space="p-x:small-3x p-y:tiny m-b:medium" visual="bg:blue-100 text:blue-600 text-size:small font:tw-semibold rounded:round"> SUPPORT </div> <h1 space="m-b:medium" visual="text-size:grand tw-lg:text-size:mount font:tw-bold">Frequently Asked Questions</h1> <p space="max-w:\[2xl\] m-x:auto" visual="text-size:large tw-lg:text-size:big text:neutral-600"> Have questions? We've got answers. Explore our FAQ to find solutions to common queries. </p> </div> <div layout="grid tw-md:grid-cols:2" space="g:medium-3x max-w:\[4xl\] m-x:auto"> <div x-data="{ isOpen: false }" visual="bg:neutral-50 rounded:medium border-w:thin border:neutral-200"> <button @click="isOpen = !isOpen" layout="flex justify:between items:center" space="w:\[100%\] p:medium-2x" visual="text:left font:tw-semibold"> What is SenangStart? <i :class="isOpen ? 'fa-minus' : 'fa-plus'" visual="text:blue-600" class="fas"></i> </button> <div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:neutral-200 text:neutral-700" class="border-t"> SenangStart is a UI library built with Tailwind CSS, designed to help developers and designers create beautiful, responsive websites quickly and easily. It includes a variety of pre-built components and sections. </div> </div> <div x-data="{ isOpen: false }" visual="bg:neutral-50 rounded:medium border-w:thin border:neutral-200"> <button @click="isOpen = !isOpen" layout="flex justify:between items:center" space="w:\[100%\] p:medium-2x" visual="text:left font:tw-semibold"> Who can use these components? <i :class="isOpen ? 'fa-minus' : 'fa-plus'" visual="text:blue-600" class="fas"></i> </button> <div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:neutral-200 text:neutral-700" class="border-t"> Our components are for anyone building websites with Tailwind CSS. This includes freelance developers, agencies, and product teams looking to accelerate their workflow. </div> </div> <div x-data="{ isOpen: true }" visual="bg:neutral-50 rounded:medium border-w:thin border:neutral-200"> <button @click="isOpen = !isOpen" layout="flex justify:between items:center" space="w:\[100%\] p:medium-2x" visual="text:left font:tw-semibold"> Is there a Figma file available? <i :class="isOpen ? 'fa-minus' : 'fa-plus'" visual="text:blue-600" class="fas"></i> </button> <div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:neutral-200 text:neutral-700" class="border-t"> Yes, we plan to release a comprehensive Figma design kit that complements our Tailwind CSS components. Stay tuned for updates on its availability! </div> </div> <div x-data="{ isOpen: false }" visual="bg:neutral-50 rounded:medium border-w:thin border:neutral-200"> <button @click="isOpen = !isOpen" layout="flex justify:between items:center" space="w:\[100%\] p:medium-2x" visual="text:left font:tw-semibold"> What about updates and support? <i :class="isOpen ? 'fa-minus' : 'fa-plus'" visual="text:blue-600" class="fas"></i> </button> <div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:neutral-200 text:neutral-700" class="border-t"> We regularly update SenangStart with new components and features. Support is available through our community channels and dedicated support for premium users. </div> </div> </div> <div space="m-t:big" visual="text:center"> <p visual="text-size:large text:neutral-600">Can't find your answer? <a href="#contact" visual="text:blue-600 font:tw-semibold hover:underline">Contact our support team</a>.</p> </div> </section> COPY ```
SUPPORT

Frequently Asked Questions

Have questions? We've got answers. Explore our FAQ to find solutions to common queries.

SenangStart is a UI library built with Tailwind CSS, designed to help developers and designers create beautiful, responsive websites quickly and easily. It includes a variety of pre-built components and sections.
Our components are for anyone building websites with Tailwind CSS. This includes freelance developers, agencies, and product teams looking to accelerate their workflow.
Yes, we plan to release a comprehensive Figma design kit that complements our Tailwind CSS components. Stay tuned for updates on its availability!
We regularly update SenangStart with new components and features. Support is available through our community channels and dedicated support for premium users.

Can't find your answer? Contact our support team.

``` #### [\#](https://senangstart.com/sections/faq-5/llms.txt)Interactive List FAQ faq Presents FAQs in an interactive list where answers expand on click, often including a user feedback option. TailwindCSS SenangStart CSS Help Center ----------- Everything you need to know about our products and services. Can't find an answer? We're here to help. What makes SenangStart different from other UI kits? SenangStart focuses on providing ready-to-use, production-quality HTML sections built with Tailwind CSS. We prioritize ease of integration, clean code, and designs that are practical for real-world projects, often with Alpine.js for simple interactions. Was this helpful? Yes No Thanks for your feedback! Can I use these components in a non-Tailwind project? The components are heavily reliant on Tailwind CSS utility classes. While you could extract the styles, it's designed primarily for projects already using or planning to use Tailwind CSS for the best experience and easiest integration. Was this helpful? Yes No Thanks for your feedback! Are there any dependencies other than Tailwind CSS? Most components are pure HTML and Tailwind CSS. For interactive elements like dropdowns, modals, or accordions (like this one), we use Alpine.js due to its simplicity and direct integration with HTML. You'll need to include Alpine.js in your project for these to function. Was this helpful? Yes No Thanks for your feedback! <section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto"> <div class="mb-10 lg:mb-16 text-center"> <h2 class="text-3xl lg:text-5xl font-bold mb-3 text-neutral-800">Help Center</h2> <p class="text-lg lg:text-xl text-neutral-600 max-w-xl mx-auto"> Everything you need to know about our products and services. Can't find an answer? We're here to help. </p> </div> <div class="divide-y divide-neutral-200 max-w-3xl mx-auto"> <div x-data="{ isOpen: false, feedback: null }" class="py-6"> <dt class="text-lg"> <button @click="isOpen = !isOpen" class="text-left w-full flex justify-between items-start text-neutral-500"> <span class="font-medium text-neutral-900">What makes SenangStart different from other UI kits?</span> <span class="ml-6 h-7 flex items-center"> <i :class="{ '-rotate-180': isOpen, 'rotate-0': !isOpen }" class="fas fa-chevron-down transform transition-transform duration-200 ease-in-out"></i> </span> </button> </dt> <dd x-show="isOpen" x-collapse class="mt-2 pr-12"> <p class="text-base text-neutral-600"> SenangStart focuses on providing ready-to-use, production-quality HTML sections built with Tailwind CSS. We prioritize ease of integration, clean code, and designs that are practical for real-world projects, often with Alpine.js for simple interactions. </p> <div class="mt-4 text-sm" x-show="isOpen"> <span class="text-neutral-600 mr-2">Was this helpful?</span> <button @click="feedback = 'yes'" :class="{':'bg-blue-600 text-white': feedback === 'yes', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'yes'}" class="px-2 py-1 rounded-md text-xs">Yes</button> <button @click="feedback = 'no'" :class="{':'bg-blue-600 text-white': feedback === 'no', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'no'}" class="ml-1 px-2 py-1 rounded-md text-xs">No</button> <span x-show="feedback" class="ml-2 text-blue-600 italic">Thanks for your feedback!</span> </div> </dd> </div> <div x-data="{ isOpen: true, feedback: null }" class="py-6"> <dt class="text-lg"> <button @click="isOpen = !isOpen" class="text-left w-full flex justify-between items-start text-neutral-500"> <span class="font-medium text-neutral-900">Can I use these components in a non-Tailwind project?</span> <span class="ml-6 h-7 flex items-center"> <i :class="{ '-rotate-180': isOpen, 'rotate-0': !isOpen }" class="fas fa-chevron-down transform transition-transform duration-200 ease-in-out"></i> </span> </button> </dt> <dd x-show="isOpen" x-collapse class="mt-2 pr-12"> <p class="text-base text-neutral-600"> The components are heavily reliant on Tailwind CSS utility classes. While you could extract the styles, it's designed primarily for projects already using or planning to use Tailwind CSS for the best experience and easiest integration. </p> <div class="mt-4 text-sm" x-show="isOpen"> <span class="text-neutral-600 mr-2">Was this helpful?</span> <button @click="feedback = 'yes'" :class="{':'bg-blue-600 text-white': feedback === 'yes', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'yes'}" class="px-2 py-1 rounded-md text-xs">Yes</button> <button @click="feedback = 'no'" :class="{':'bg-blue-600 text-white': feedback === 'no', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'no'}" class="ml-1 px-2 py-1 rounded-md text-xs">No</button> <span x-show="feedback" class="ml-2 text-blue-600 italic">Thanks for your feedback!</span> </div> </dd> </div> <div x-data="{ isOpen: false, feedback: null }" class="py-6"> <dt class="text-lg"> <button @click="isOpen = !isOpen" class="text-left w-full flex justify-between items-start text-neutral-500"> <span class="font-medium text-neutral-900">Are there any dependencies other than Tailwind CSS?</span> <span class="ml-6 h-7 flex items-center"> <i :class="{ '-rotate-180': isOpen, 'rotate-0': !isOpen }" class="fas fa-chevron-down transform transition-transform duration-200 ease-in-out"></i> </span> </button> </dt> <dd x-show="isOpen" x-collapse class="mt-2 pr-12"> <p class="text-base text-neutral-600"> Most components are pure HTML and Tailwind CSS. For interactive elements like dropdowns, modals, or accordions (like this one), we use Alpine.js due to its simplicity and direct integration with HTML. You'll need to include Alpine.js in your project for these to function. </p> <div class="mt-4 text-sm" x-show="isOpen"> <span class="text-neutral-600 mr-2">Was this helpful?</span> <button @click="feedback = 'yes'" :class="{':'bg-blue-600 text-white': feedback === 'yes', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'yes'}" class="px-2 py-1 rounded-md text-xs">Yes</button> <button @click="feedback = 'no'" :class="{':'bg-blue-600 text-white': feedback === 'no', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'no'}" class="ml-1 px-2 py-1 rounded-md text-xs">No</button> <span x-show="feedback" class="ml-2 text-blue-600 italic">Thanks for your feedback!</span> </div> </dd> </div> </div> </section> COPY ```

Help Center

Everything you need to know about our products and services. Can't find an answer? We're here to help.

SenangStart focuses on providing ready-to-use, production-quality HTML sections built with Tailwind CSS. We prioritize ease of integration, clean code, and designs that are practical for real-world projects, often with Alpine.js for simple interactions.

Was this helpful? Thanks for your feedback!

The components are heavily reliant on Tailwind CSS utility classes. While you could extract the styles, it's designed primarily for projects already using or planning to use Tailwind CSS for the best experience and easiest integration.

Was this helpful? Thanks for your feedback!

Most components are pure HTML and Tailwind CSS. For interactive elements like dropdowns, modals, or accordions (like this one), we use Alpine.js due to its simplicity and direct integration with HTML. You'll need to include Alpine.js in your project for these to function.

Was this helpful? Thanks for your feedback!
``` Help Center ----------- Everything you need to know about our products and services. Can't find an answer? We're here to help. What makes SenangStart different from other UI kits? SenangStart focuses on providing ready-to-use, production-quality HTML sections built with Tailwind CSS. We prioritize ease of integration, clean code, and designs that are practical for real-world projects, often with Alpine.js for simple interactions. Was this helpful? Yes No Thanks for your feedback! Can I use these components in a non-Tailwind project? The components are heavily reliant on Tailwind CSS utility classes. While you could extract the styles, it's designed primarily for projects already using or planning to use Tailwind CSS for the best experience and easiest integration. Was this helpful? Yes No Thanks for your feedback! Are there any dependencies other than Tailwind CSS? Most components are pure HTML and Tailwind CSS. For interactive elements like dropdowns, modals, or accordions (like this one), we use Alpine.js due to its simplicity and direct integration with HTML. You'll need to include Alpine.js in your project for these to function. Was this helpful? Yes No Thanks for your feedback! <section layout="container" space="p-x:medium-3x tw-lg:p-x:big-3x m-y:large tw-lg:m-y:big-3x m-x:auto"> <div space="m-b:large-3x tw-lg:m-b:big-3x" visual="text:center"> <h2 space="m-b:small-3x" visual="text-size:grand tw-lg:text-size:mount font:tw-bold text:neutral-800">Help Center</h2> <p space="max-w:\[xl\] m-x:auto" visual="text-size:large tw-lg:text-size:big text:neutral-600"> Everything you need to know about our products and services. Can't find an answer? We're here to help. </p> </div> <div space="max-w:\[3xl\] m-x:auto" class="divide-y divide-neutral-200"> <div x-data="{ isOpen: false, feedback: null }" space="p-y:medium-3x"> <dt visual="text-size:large"> <button @click="isOpen = !isOpen" layout="flex justify:between items:start" space="w:\[100%\]" visual="text:left text:neutral-500"> <span visual="font:tw-medium text:neutral-900">What makes SenangStart different from other UI kits?</span> <span layout="flex items:center" space="m-l:medium-3x h:medium-4x"> <i :class="{ '-rotate-180': isOpen, 'rotate-0': !isOpen }" visual="transition:transform duration:normal ease:in-out" class="fas fa-chevron-down transform"></i> </span> </button> </dt> <dd x-show="isOpen" x-collapse space="m-t:small p-r:big"> <p visual="text-size:base text:neutral-600"> SenangStart focuses on providing ready-to-use, production-quality HTML sections built with Tailwind CSS. We prioritize ease of integration, clean code, and designs that are practical for real-world projects, often with Alpine.js for simple interactions. </p> <div space="m-t:medium" visual="text-size:small" x-show="isOpen"> <span space="m-r:small" visual="text:neutral-600">Was this helpful?</span> <button @click="feedback = 'yes'" :class="{':'bg-blue-600 text-white': feedback === 'yes', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'yes'}" space="p-x:small p-y:tiny" visual="rounded:small text-size:mini">Yes</button> <button @click="feedback = 'no'" :class="{':'bg-blue-600 text-white': feedback === 'no', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'no'}" space="m-l:tiny p-x:small p-y:tiny" visual="rounded:small text-size:mini">No</button> <span x-show="feedback" space="m-l:small" visual="text:blue-600 italic">Thanks for your feedback!</span> </div> </dd> </div> <div x-data="{ isOpen: true, feedback: null }" space="p-y:medium-3x"> <dt visual="text-size:large"> <button @click="isOpen = !isOpen" layout="flex justify:between items:start" space="w:\[100%\]" visual="text:left text:neutral-500"> <span visual="font:tw-medium text:neutral-900">Can I use these components in a non-Tailwind project?</span> <span layout="flex items:center" space="m-l:medium-3x h:medium-4x"> <i :class="{ '-rotate-180': isOpen, 'rotate-0': !isOpen }" visual="transition:transform duration:normal ease:in-out" class="fas fa-chevron-down transform"></i> </span> </button> </dt> <dd x-show="isOpen" x-collapse space="m-t:small p-r:big"> <p visual="text-size:base text:neutral-600"> The components are heavily reliant on Tailwind CSS utility classes. While you could extract the styles, it's designed primarily for projects already using or planning to use Tailwind CSS for the best experience and easiest integration. </p> <div space="m-t:medium" visual="text-size:small" x-show="isOpen"> <span space="m-r:small" visual="text:neutral-600">Was this helpful?</span> <button @click="feedback = 'yes'" :class="{':'bg-blue-600 text-white': feedback === 'yes', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'yes'}" space="p-x:small p-y:tiny" visual="rounded:small text-size:mini">Yes</button> <button @click="feedback = 'no'" :class="{':'bg-blue-600 text-white': feedback === 'no', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'no'}" space="m-l:tiny p-x:small p-y:tiny" visual="rounded:small text-size:mini">No</button> <span x-show="feedback" space="m-l:small" visual="text:blue-600 italic">Thanks for your feedback!</span> </div> </dd> </div> <div x-data="{ isOpen: false, feedback: null }" space="p-y:medium-3x"> <dt visual="text-size:large"> <button @click="isOpen = !isOpen" layout="flex justify:between items:start" space="w:\[100%\]" visual="text:left text:neutral-500"> <span visual="font:tw-medium text:neutral-900">Are there any dependencies other than Tailwind CSS?</span> <span layout="flex items:center" space="m-l:medium-3x h:medium-4x"> <i :class="{ '-rotate-180': isOpen, 'rotate-0': !isOpen }" visual="transition:transform duration:normal ease:in-out" class="fas fa-chevron-down transform"></i> </span> </button> </dt> <dd x-show="isOpen" x-collapse space="m-t:small p-r:big"> <p visual="text-size:base text:neutral-600"> Most components are pure HTML and Tailwind CSS. For interactive elements like dropdowns, modals, or accordions (like this one), we use Alpine.js due to its simplicity and direct integration with HTML. You'll need to include Alpine.js in your project for these to function. </p> <div space="m-t:medium" visual="text-size:small" x-show="isOpen"> <span space="m-r:small" visual="text:neutral-600">Was this helpful?</span> <button @click="feedback = 'yes'" :class="{':'bg-blue-600 text-white': feedback === 'yes', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'yes'}" space="p-x:small p-y:tiny" visual="rounded:small text-size:mini">Yes</button> <button @click="feedback = 'no'" :class="{':'bg-blue-600 text-white': feedback === 'no', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'no'}" space="m-l:tiny p-x:small p-y:tiny" visual="rounded:small text-size:mini">No</button> <span x-show="feedback" space="m-l:small" visual="text:blue-600 italic">Thanks for your feedback!</span> </div> </dd> </div> </div> </section> COPY ```

Help Center

Everything you need to know about our products and services. Can't find an answer? We're here to help.

SenangStart focuses on providing ready-to-use, production-quality HTML sections built with Tailwind CSS. We prioritize ease of integration, clean code, and designs that are practical for real-world projects, often with Alpine.js for simple interactions.

Was this helpful? Thanks for your feedback!

The components are heavily reliant on Tailwind CSS utility classes. While you could extract the styles, it's designed primarily for projects already using or planning to use Tailwind CSS for the best experience and easiest integration.

Was this helpful? Thanks for your feedback!

Most components are pure HTML and Tailwind CSS. For interactive elements like dropdowns, modals, or accordions (like this one), we use Alpine.js due to its simplicity and direct integration with HTML. You'll need to include Alpine.js in your project for these to function.

Was this helpful? Thanks for your feedback!
``` #### [\#](https://senangstart.com/sections/faq-3/llms.txt)Sidebar Intro FAQ faq Combines an introductory sidebar with a list of expandable FAQs for a well-organized help section. TailwindCSS SenangStart CSS Your Questions, Answered ------------------------ Find quick answers to common questions about our services, products, and policies. We're here to help you get the information you need. [ Contact Support ](#contact) How do I get started with SenangStart? Getting started is easy! Simply browse our component library, copy the HTML code for the desired section, and paste it into your Tailwind CSS project. Ensure you have Tailwind CSS set up correctly in your environment. Are the components customizable? Absolutely! Since our components are built with Tailwind CSS utility classes, you can easily customize colors, spacing, typography, and more by modifying the classes directly in the HTML. What is the licensing for SenangStart components? Our components are typically offered under a permissive license like MIT, allowing you to use them in personal and commercial projects freely. Always check the specific license details provided with the library. Do I need to know JavaScript to use these? Many components are pure HTML/CSS. Some interactive components, like this FAQ, use Alpine.js for simplicity. Basic familiarity with Alpine.js or JavaScript can be helpful for advanced customization but isn't strictly required for basic usage. <section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto"> <div class="grid lg:grid-cols-3 gap-8 lg:gap-12 items-start"> <div class="lg:col-span-1 lg:sticky lg:top-24"> <h2 class="text-3xl lg:text-4xl font-bold mb-3">Your Questions, Answered</h2> <p class="text-neutral-600 mb-6 text-lg"> Find quick answers to common questions about our services, products, and policies. We're here to help you get the information you need. </p> <a href="#contact" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"> Contact Support </a> </div> <div class="lg:col-span-2 space-y-4"> <div x-data="{ isOpen: false }" class="rounded-lg overflow-hidden"> <button @click="isOpen = !isOpen" class="w-full flex justify-between items-center p-5 bg-neutral-100 hover:bg-neutral-200 transition-colors"> <span class="font-semibold text-lg">How do I get started with SenangStart?</span> <i :class="{ 'transform rotate-180': isOpen }" class="fas fa-chevron-down transition-transform"></i> </button> <div x-show="isOpen" x-collapse class="p-5 bg-white border border-t-0 border-neutral-200 rounded-b-lg"> <p class="text-neutral-700"> Getting started is easy! Simply browse our component library, copy the HTML code for the desired section, and paste it into your Tailwind CSS project. Ensure you have Tailwind CSS set up correctly in your environment. </p> </div> </div> <div x-data="{ isOpen: true }" class="rounded-lg overflow-hidden"> <button @click="isOpen = !isOpen" class="w-full flex justify-between items-center p-5 bg-neutral-100 hover:bg-neutral-200 transition-colors"> <span class="font-semibold text-lg">Are the components customizable?</span> <i :class="{ 'transform rotate-180': isOpen }" class="fas fa-chevron-down transition-transform"></i> </button> <div x-show="isOpen" x-collapse class="p-5 bg-white border border-t-0 border-neutral-200 rounded-b-lg"> <p class="text-neutral-700"> Absolutely! Since our components are built with Tailwind CSS utility classes, you can easily customize colors, spacing, typography, and more by modifying the classes directly in the HTML. </p> </div> </div> <div x-data="{ isOpen: false }" class="rounded-lg overflow-hidden"> <button @click="isOpen = !isOpen" class="w-full flex justify-between items-center p-5 bg-neutral-100 hover:bg-neutral-200 transition-colors"> <span class="font-semibold text-lg">What is the licensing for SenangStart components?</span> <i :class="{ 'transform rotate-180': isOpen }" class="fas fa-chevron-down transition-transform"></i> </button> <div x-show="isOpen" x-collapse class="p-5 bg-white border border-t-0 border-neutral-200 rounded-b-lg"> <p class="text-neutral-700"> Our components are typically offered under a permissive license like MIT, allowing you to use them in personal and commercial projects freely. Always check the specific license details provided with the library. </p> </div> </div> <div x-data="{ isOpen: false }" class="rounded-lg overflow-hidden"> <button @click="isOpen = !isOpen" class="w-full flex justify-between items-center p-5 bg-neutral-100 hover:bg-neutral-200 transition-colors"> <span class="font-semibold text-lg">Do I need to know JavaScript to use these?</span> <i :class="{ 'transform rotate-180': isOpen }" class="fas fa-chevron-down transition-transform"></i> </button> <div x-show="isOpen" x-collapse class="p-5 bg-white border border-t-0 border-neutral-200 rounded-b-lg"> <p class="text-neutral-700"> Many components are pure HTML/CSS. Some interactive components, like this FAQ, use Alpine.js for simplicity. Basic familiarity with Alpine.js or JavaScript can be helpful for advanced customization but isn't strictly required for basic usage. </p> </div> </div> </div> </div> </section> COPY ```

Your Questions, Answered

Find quick answers to common questions about our services, products, and policies. We're here to help you get the information you need.

Contact Support

Getting started is easy! Simply browse our component library, copy the HTML code for the desired section, and paste it into your Tailwind CSS project. Ensure you have Tailwind CSS set up correctly in your environment.

Absolutely! Since our components are built with Tailwind CSS utility classes, you can easily customize colors, spacing, typography, and more by modifying the classes directly in the HTML.

Our components are typically offered under a permissive license like MIT, allowing you to use them in personal and commercial projects freely. Always check the specific license details provided with the library.

Many components are pure HTML/CSS. Some interactive components, like this FAQ, use Alpine.js for simplicity. Basic familiarity with Alpine.js or JavaScript can be helpful for advanced customization but isn't strictly required for basic usage.

``` Your Questions, Answered ------------------------ Find quick answers to common questions about our services, products, and policies. We're here to help you get the information you need. [ Contact Support ](#contact) How do I get started with SenangStart? Getting started is easy! Simply browse our component library, copy the HTML code for the desired section, and paste it into your Tailwind CSS project. Ensure you have Tailwind CSS set up correctly in your environment. Are the components customizable? Absolutely! Since our components are built with Tailwind CSS utility classes, you can easily customize colors, spacing, typography, and more by modifying the classes directly in the HTML. What is the licensing for SenangStart components? Our components are typically offered under a permissive license like MIT, allowing you to use them in personal and commercial projects freely. Always check the specific license details provided with the library. Do I need to know JavaScript to use these? Many components are pure HTML/CSS. Some interactive components, like this FAQ, use Alpine.js for simplicity. Basic familiarity with Alpine.js or JavaScript can be helpful for advanced customization but isn't strictly required for basic usage. <section layout="container" space="p-x:medium-3x tw-lg:p-x:big-3x m-y:large tw-lg:m-y:big-3x m-x:auto"> <div layout="grid tw-lg:grid-cols:3 items:start" space="g:large tw-lg:g:big"> <div layout="tw-lg:col-span:1 tw-lg:sticky tw-lg:top:giant"> <h2 space="m-b:small-3x" visual="text-size:grand tw-lg:text-size:giant font:tw-bold">Your Questions, Answered</h2> <p space="m-b:medium-3x" visual="text:neutral-600 text-size:large"> Find quick answers to common questions about our services, products, and policies. We're here to help you get the information you need. </p> <a href="#contact" layout="inline-flex items:center justify:center" space="p-x:medium-2x p-y:small-3x" visual="border-w:thin text-size:base font:tw-medium rounded:small text:white bg:blue-600 hover:bg:blue-700" class="border-transparent"> Contact Support </a> </div> <div layout="tw-lg:col-span:2" class="space-y-4"> <div x-data="{ isOpen: false }" layout="overflow:hidden" visual="rounded:medium"> <button @click="isOpen = !isOpen" layout="flex justify:between items:center" space="w:\[100%\] p:medium-2x" visual="bg:neutral-100 hover:bg:neutral-200 transition:colors"> <span visual="font:tw-semibold text-size:large">How do I get started with SenangStart?</span> <i :class="{ 'transform rotate-180': isOpen }" visual="transition:transform" class="fas fa-chevron-down"></i> </button> <div x-show="isOpen" x-collapse space="p:medium-2x" visual="bg:white border-w:thin border-t-w:none border:neutral-200 rounded:medium"> <p visual="text:neutral-700"> Getting started is easy! Simply browse our component library, copy the HTML code for the desired section, and paste it into your Tailwind CSS project. Ensure you have Tailwind CSS set up correctly in your environment. </p> </div> </div> <div x-data="{ isOpen: true }" layout="overflow:hidden" visual="rounded:medium"> <button @click="isOpen = !isOpen" layout="flex justify:between items:center" space="w:\[100%\] p:medium-2x" visual="bg:neutral-100 hover:bg:neutral-200 transition:colors"> <span visual="font:tw-semibold text-size:large">Are the components customizable?</span> <i :class="{ 'transform rotate-180': isOpen }" visual="transition:transform" class="fas fa-chevron-down"></i> </button> <div x-show="isOpen" x-collapse space="p:medium-2x" visual="bg:white border-w:thin border-t-w:none border:neutral-200 rounded:medium"> <p visual="text:neutral-700"> Absolutely! Since our components are built with Tailwind CSS utility classes, you can easily customize colors, spacing, typography, and more by modifying the classes directly in the HTML. </p> </div> </div> <div x-data="{ isOpen: false }" layout="overflow:hidden" visual="rounded:medium"> <button @click="isOpen = !isOpen" layout="flex justify:between items:center" space="w:\[100%\] p:medium-2x" visual="bg:neutral-100 hover:bg:neutral-200 transition:colors"> <span visual="font:tw-semibold text-size:large">What is the licensing for SenangStart components?</span> <i :class="{ 'transform rotate-180': isOpen }" visual="transition:transform" class="fas fa-chevron-down"></i> </button> <div x-show="isOpen" x-collapse space="p:medium-2x" visual="bg:white border-w:thin border-t-w:none border:neutral-200 rounded:medium"> <p visual="text:neutral-700"> Our components are typically offered under a permissive license like MIT, allowing you to use them in personal and commercial projects freely. Always check the specific license details provided with the library. </p> </div> </div> <div x-data="{ isOpen: false }" layout="overflow:hidden" visual="rounded:medium"> <button @click="isOpen = !isOpen" layout="flex justify:between items:center" space="w:\[100%\] p:medium-2x" visual="bg:neutral-100 hover:bg:neutral-200 transition:colors"> <span visual="font:tw-semibold text-size:large">Do I need to know JavaScript to use these?</span> <i :class="{ 'transform rotate-180': isOpen }" visual="transition:transform" class="fas fa-chevron-down"></i> </button> <div x-show="isOpen" x-collapse space="p:medium-2x" visual="bg:white border-w:thin border-t-w:none border:neutral-200 rounded:medium"> <p visual="text:neutral-700"> Many components are pure HTML/CSS. Some interactive components, like this FAQ, use Alpine.js for simplicity. Basic familiarity with Alpine.js or JavaScript can be helpful for advanced customization but isn't strictly required for basic usage. </p> </div> </div> </div> </div> </section> COPY ```

Your Questions, Answered

Find quick answers to common questions about our services, products, and policies. We're here to help you get the information you need.

Contact Support

Getting started is easy! Simply browse our component library, copy the HTML code for the desired section, and paste it into your Tailwind CSS project. Ensure you have Tailwind CSS set up correctly in your environment.

Absolutely! Since our components are built with Tailwind CSS utility classes, you can easily customize colors, spacing, typography, and more by modifying the classes directly in the HTML.

Our components are typically offered under a permissive license like MIT, allowing you to use them in personal and commercial projects freely. Always check the specific license details provided with the library.

Many components are pure HTML/CSS. Some interactive components, like this FAQ, use Alpine.js for simplicity. Basic familiarity with Alpine.js or JavaScript can be helpful for advanced customization but isn't strictly required for basic usage.

``` #### [\#](https://senangstart.com/sections/product-1/llms.txt)Course Product Page product Offers a complete landing page for a course, featuring video, curriculum, instructor bios, and enrollment options. TailwindCSS SenangStart CSS Enrollment Now Open Master the Art of High-Performing Ads ===================================== 3 Days (Wednesday & Thursday)10:00 AM - 5:00 PM Flexible Pricing Plans Choose the plan that works for you What’s Included: - 32 mins of on-demand video content - Lifetime access to course materials - Practical assignments to reinforce learning - Certificate of completion - Access on mobile, tablet, and TV Total Investment RM 1,000 Get a Custom Quote About the Course ================ In today’s competitive digital landscape, creating ads that truly resonate with your audience is more important than ever. This course is designed to equip you with the skills and strategies needed to craft compelling, high-converting ads. From understanding your target audience to optimizing ad performance, you’ll gain actionable insights that drive real results. What You’ll Learn ================= Day 1 - Foundations of Effective Ads Half Day Discover the core principles of creating ads that capture attention and drive action. - Master the art of ad targeting - Learn how to craft compelling ad copy - Understand the psychology behind ad performance Day 2 - Advanced Ad Strategies Half Day Take your skills to the next level with advanced techniques for ad optimization. - Explore retargeting and remarketing tactics - Learn how to analyze and optimize ad performance - Discover the secrets of A/B testing Day 3 - Real-World Applications Half Day Apply what you’ve learned to real-world scenarios and case studies. - Create a full ad campaign from scratch - Get feedback and refine your approach - Walk away with a portfolio-ready project What’s Included =============== 1. 32 mins of on-demand video content 2. Lifetime access to all course materials 3. Hands-on assignments to practice your skills 4. Certificate of completion to showcase your expertise 5. Access on any device—mobile, tablet, or TV Exclusive Bonuses ================= Bonus: Ad Templates Bonus: Case Studies Bonus: Checklist Bonus: Resource Guide Meet Your Instructors ===================== Xien Puo Co-Founder of DriveFunnels With years of experience in digital marketing, Xien has helped countless businesses scale their ad campaigns and achieve measurable success. His practical, results-driven approach makes him a sought-after expert in the field. Flexible Pricing Plans Choose the plan that works for you What’s Included: - 32 mins of on-demand video content - Lifetime access to all course materials - Hands-on assignments to practice your skills - Certificate of completion to showcase your expertise - Access on any device—mobile, tablet, or TV Total Investment RM 1,000 Get a Custom Quote <section class="container relative mx-auto mb-16"> <div class="absolute left-0 top-0 -z-10 h-full w-full"> <div class="h-96 w-full bg-neutral-200 lg:rounded-lg" style=" background-image: url('https://placehold.co/1000x200'); background-size: cover; background-position: center; " ></div> </div> <div class="px-6 pt-32 lg:px-16 lg:pt-16"> <div class="mx-auto grid w-full gap-4 lg:grid-cols-3"> <div class="lg:col-span-2"> <section> <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 bg-blue-600 px-2 font-bold text-white lg:mb-4">Enrollment Now Open</div> <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Master the Art of High-Performing Ads</h1> <p class="mb-8 text-lg"><i class="fas fa-calendar mr-2"></i>3 Days (Wednesday & Thursday)<i class="fas fa-clock mx-2"></i>10:00 AM - 5:00 PM</p> <div class="relative aspect-video overflow-hidden rounded-lg bg-neutral-100"> <iframe src="https://www.youtube.com/embed/\_\_NeP0RqACU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="absolute left-0 top-0 h-full w-full"></iframe> </div> </section> <div class="block lg:hidden"> <div class="h-8 w-full"></div> <div class="sticky top-28 rounded-lg bg-neutral-100 p-4"> <p class="mb-1 font-semibold lg:text-xl">Flexible Pricing Plans</p> <p class="mb-1 text-sm font-semibold">Choose the plan that works for you</p> <p class="mb-1 font-semibold lg:text-lg">What’s Included:</p> <ul> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>32 mins of on-demand video content</li> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Lifetime access to course materials</li> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Practical assignments to reinforce learning</li> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Certificate of completion</li> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Access on mobile, tablet, and TV</li> </ul> <div class="flex border-t border-neutral-200 py-4"> <span class="flex-grow">Total Investment</span> <span class="font-bold">RM 1,000</span> </div> <a href="" class="flex h-14 w-full items-center justify-center rounded-lg bg-blue-600 px-6 text-base text-white"> Get a Custom Quote </a> </div> </div> <div class="h-8 w-full"></div> <!--Start Description Section--> <section> <h1 class="mb-4 text-2xl font-bold">About the Course</h1> <p class="text-lg">In today’s competitive digital landscape, creating ads that truly resonate with your audience is more important than ever. This course is designed to equip you with the skills and strategies needed to craft compelling, high-converting ads. From understanding your target audience to optimizing ad performance, you’ll gain actionable insights that drive real results.</p> </section> <!--End Description Section--> <div class="h-8 w-full border-b border-neutral-200"></div> <div class="h-8 w-full"></div> <!--Start Learn Section--> <section> <h1 class="text-2xl font-bold">What You’ll Learn</h1> <div class="mt-4 rounded-lg bg-neutral-100 p-4" id="accordion1"> <div class="accordion-title flex"> <div class="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-blue-600 text-white" onclick="open\_accordion('accordion1')"> <div class="accordion-open hidden"><i class="fas fa-chevron-down"></i></div> <div class="accordion-close"><i class="fas fa-chevron-right"></i></div> </div> <div class="flex flex-grow items-center px-4 font-semibold"> <p>Day 1 - Foundations of Effective Ads</p> </div> <div class="flex items-center"> <p>Half Day</p> </div> </div> <div class="accordion-body hidden pt-4"> <p class="text-lg">Discover the core principles of creating ads that capture attention and drive action.</p> <ul> <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Master the art of ad targeting</li> <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Learn how to craft compelling ad copy</li> <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Understand the psychology behind ad performance</li> </ul> </div> </div> <div class="mt-4 rounded-lg bg-neutral-100 p-4" id="accordion2"> <div class="accordion-title flex"> <div class="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-blue-600 text-white" onclick="open\_accordion('accordion2')"> <div class="accordion-open hidden"><i class="fas fa-chevron-down"></i></div> <div class="accordion-close"><i class="fas fa-chevron-right"></i></div> </div> <div class="flex flex-grow items-center px-4 font-semibold"> <p>Day 2 - Advanced Ad Strategies</p> </div> <div class="flex items-center"> <p>Half Day</p> </div> </div> <div class="accordion-body hidden pt-4"> <p class="text-lg">Take your skills to the next level with advanced techniques for ad optimization.</p> <ul> <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Explore retargeting and remarketing tactics</li> <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Learn how to analyze and optimize ad performance</li> <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Discover the secrets of A/B testing</li> </ul> </div> </div> <div class="mt-4 rounded-lg bg-neutral-100 p-4" id="accordion3"> <div class="accordion-title flex"> <div class="flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-blue-600 text-white" onclick="open\_accordion('accordion3')"> <div class="accordion-open hidden"><i class="fas fa-chevron-down"></i></div> <div class="accordion-close"><i class="fas fa-chevron-right"></i></div> </div> <div class="flex flex-grow items-center px-4 font-semibold"> <p>Day 3 - Real-World Applications</p> </div> <div class="flex items-center"> <p>Half Day</p> </div> </div> <div class="accordion-body hidden pt-4"> <p class="text-lg">Apply what you’ve learned to real-world scenarios and case studies.</p> <ul> <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Create a full ad campaign from scratch</li> <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Get feedback and refine your approach</li> <li class="mt-4"><i class="fas fa-check-circle mr-2"></i>Walk away with a portfolio-ready project</li> </ul> </div> </div> </section> <script> function open\_accordion(id) { $("#" + id + " .accordion-body").slideToggle("hidden"); $("#" + id + " .accordion-open").toggleClass("hidden"); $("#" + id + " .accordion-close").toggleClass("hidden"); } </script> <!--End Learn Section--> <div class="h-8 w-full border-b border-neutral-200"></div> <div class="h-8 w-full"></div> <!--Start Included Section--> <section> <h1 class="text-2xl font-bold">What’s Included</h1> <ol class="mt-4 grid gap-4 text-lg lg:grid-cols-2"> <li><i class="fas fa-check-circle mr-2"></i>32 mins of on-demand video content</li> <li><i class="fas fa-check-circle mr-2"></i>Lifetime access to all course materials</li> <li><i class="fas fa-check-circle mr-2"></i>Hands-on assignments to practice your skills</li> <li><i class="fas fa-check-circle mr-2"></i>Certificate of completion to showcase your expertise</li> <li><i class="fas fa-check-circle mr-2"></i>Access on any device—mobile, tablet, or TV</li> </ol> </section> <!--End Included Section--> <div class="h-8 w-full border-b border-neutral-200"></div> <div class="h-8 w-full"></div> <!--Start Bonus Section--> <section> <h1 class="text-2xl font-bold">Exclusive Bonuses</h1> <div class="mt-8 grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4"> <div class="relative rounded-lg bg-neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"> <div class="absolute top-0 w-full px-3 py-2"> <p>Bonus: Ad Templates</p> </div> </div> <div class="relative rounded-lg bg-neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"> <div class="absolute top-0 w-full px-3 py-2"> <p>Bonus: Case Studies</p> </div> </div> <div class="relative rounded-lg bg-neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"> <div class="absolute top-0 w-full px-3 py-2"> <p>Bonus: Checklist</p> </div> </div> <div class="relative rounded-lg bg-neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"> <div class="absolute top-0 w-full px-3 py-2"> <p>Bonus: Resource Guide</p> </div> </div> </div> </section> <!--End Bonus Section--> <div class="h-8 w-full border-b border-neutral-200"></div> <div class="h-8 w-full"></div> <!--Start Trainer Section--> <section> <h1 class="text-2xl font-bold">Meet Your Instructors</h1> <div class="mt-4 grid grid-cols-1 gap-4"> <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4"> <div class="rounded-lg bg-neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"></div> <div class="md:hidden"></div> <div class="col-span-2 lg:col-span-3"> <p class="text-lg font-semibold">Xien Puo</p> <p class="my-1 text-xs">Co-Founder of DriveFunnels</p> <p>With years of experience in digital marketing, Xien has helped countless businesses scale their ad campaigns and achieve measurable success. His practical, results-driven approach makes him a sought-after expert in the field.</p> </div> </div> </div> </section> <!--End Trainer Section--> </div> <div class="hidden lg:block"> <div class="sticky top-28 rounded-lg bg-neutral-100 p-4"> <p class="mb-1 font-semibold lg:text-xl">Flexible Pricing Plans</p> <p class="mb-1 text-sm font-semibold">Choose the plan that works for you</p> <p class="mb-1 font-semibold lg:text-lg">What’s Included:</p> <ul> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>32 mins of on-demand video content</li> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Lifetime access to all course materials</li> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Hands-on assignments to practice your skills</li> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Certificate of completion to showcase your expertise</li> <li class="mb-4"><i class="fas fa-check-circle mr-2"></i>Access on any device—mobile, tablet, or TV</li> </ul> <div class="flex border-t border-neutral-200 py-4"> <span class="flex-grow">Total Investment</span> <span class="font-bold">RM 1,000</span> </div> <a href="" class="flex h-14 w-full items-center justify-center rounded-lg bg-blue-600 px-6 text-base text-white"> Get a Custom Quote </a> </div> </div> </div> </div> </section> COPY ```
Enrollment Now Open

Master the Art of High-Performing Ads

3 Days (Wednesday & Thursday)10:00 AM - 5:00 PM

Flexible Pricing Plans

Choose the plan that works for you

What’s Included:

  • 32 mins of on-demand video content
  • Lifetime access to course materials
  • Practical assignments to reinforce learning
  • Certificate of completion
  • Access on mobile, tablet, and TV
Total Investment RM 1,000
Get a Custom Quote

About the Course

In today’s competitive digital landscape, creating ads that truly resonate with your audience is more important than ever. This course is designed to equip you with the skills and strategies needed to craft compelling, high-converting ads. From understanding your target audience to optimizing ad performance, you’ll gain actionable insights that drive real results.

What You’ll Learn

Day 1 - Foundations of Effective Ads

Half Day

Day 2 - Advanced Ad Strategies

Half Day

Day 3 - Real-World Applications

Half Day

What’s Included

  1. 32 mins of on-demand video content
  2. Lifetime access to all course materials
  3. Hands-on assignments to practice your skills
  4. Certificate of completion to showcase your expertise
  5. Access on any device—mobile, tablet, or TV

Exclusive Bonuses

Bonus: Ad Templates

Bonus: Case Studies

Bonus: Checklist

Bonus: Resource Guide

Meet Your Instructors

Xien Puo

Co-Founder of DriveFunnels

With years of experience in digital marketing, Xien has helped countless businesses scale their ad campaigns and achieve measurable success. His practical, results-driven approach makes him a sought-after expert in the field.

``` Enrollment Now Open Master the Art of High-Performing Ads ===================================== 3 Days (Wednesday & Thursday)10:00 AM - 5:00 PM Flexible Pricing Plans Choose the plan that works for you What’s Included: - 32 mins of on-demand video content - Lifetime access to course materials - Practical assignments to reinforce learning - Certificate of completion - Access on mobile, tablet, and TV Total Investment RM 1,000 Get a Custom Quote About the Course ================ In today’s competitive digital landscape, creating ads that truly resonate with your audience is more important than ever. This course is designed to equip you with the skills and strategies needed to craft compelling, high-converting ads. From understanding your target audience to optimizing ad performance, you’ll gain actionable insights that drive real results. What You’ll Learn ================= Day 1 - Foundations of Effective Ads Half Day Discover the core principles of creating ads that capture attention and drive action. - Master the art of ad targeting - Learn how to craft compelling ad copy - Understand the psychology behind ad performance Day 2 - Advanced Ad Strategies Half Day Take your skills to the next level with advanced techniques for ad optimization. - Explore retargeting and remarketing tactics - Learn how to analyze and optimize ad performance - Discover the secrets of A/B testing Day 3 - Real-World Applications Half Day Apply what you’ve learned to real-world scenarios and case studies. - Create a full ad campaign from scratch - Get feedback and refine your approach - Walk away with a portfolio-ready project What’s Included =============== 1. 32 mins of on-demand video content 2. Lifetime access to all course materials 3. Hands-on assignments to practice your skills 4. Certificate of completion to showcase your expertise 5. Access on any device—mobile, tablet, or TV Exclusive Bonuses ================= Bonus: Ad Templates Bonus: Case Studies Bonus: Checklist Bonus: Resource Guide Meet Your Instructors ===================== Xien Puo Co-Founder of DriveFunnels With years of experience in digital marketing, Xien has helped countless businesses scale their ad campaigns and achieve measurable success. His practical, results-driven approach makes him a sought-after expert in the field. Flexible Pricing Plans Choose the plan that works for you What’s Included: - 32 mins of on-demand video content - Lifetime access to all course materials - Hands-on assignments to practice your skills - Certificate of completion to showcase your expertise - Access on any device—mobile, tablet, or TV Total Investment RM 1,000 Get a Custom Quote <section layout="container relative" space="m-x:auto m-b:big-3x"> <div layout="absolute left:none top:none" space="h:\[100%\] w:\[100%\]" class="-z-10"> <div space="h:vast-10x w:\[100%\]" visual="bg:neutral-200 tw-lg:rounded:medium" style=" background-image: url('https://placehold.co/1000x200'); background-size: cover; background-position: center; " ></div> </div> <div space="p-x:medium-3x p-t:giant-3x tw-lg:p-x:big-3x tw-lg:p-t:big-3x"> <div layout="grid tw-lg:grid-cols:3" space="m-x:auto w:\[100%\] g:medium"> <div layout="tw-lg:col-span:2"> <section> <div space="m-b:small max-w:\[max-content\] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:blue-600 bg:blue-600 font:tw-bold text:white">Enrollment Now Open</div> <h1 space="m-b:small tw-lg:m-b:medium" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">Master the Art of High-Performing Ads</h1> <p space="m-b:large" visual="text-size:large"><i space="m-r:small" class="fas fa-calendar"></i>3 Days (Wednesday & Thursday)<i space="m-x:small" class="fas fa-clock"></i>10:00 AM - 5:00 PM</p> <div layout="relative overflow:hidden" visual="rounded:medium bg:neutral-100" class="aspect-video"> <iframe src="https://www.youtube.com/embed/\_\_NeP0RqACU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen layout="absolute left:none top:none" space="h:\[100%\] w:\[100%\]"></iframe> </div> </section> <div layout="block tw-lg:hidden"> <div space="h:large w:\[100%\]"></div> <div layout="sticky top:giant-2x" space="p:medium" visual="rounded:medium bg:neutral-100"> <p space="m-b:tiny" visual="font:tw-semibold tw-lg:text-size:big">Flexible Pricing Plans</p> <p space="m-b:tiny" visual="text-size:small font:tw-semibold">Choose the plan that works for you</p> <p space="m-b:tiny" visual="font:tw-semibold tw-lg:text-size:large">What’s Included:</p> <ul> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>32 mins of on-demand video content</li> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Lifetime access to course materials</li> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Practical assignments to reinforce learning</li> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Certificate of completion</li> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Access on mobile, tablet, and TV</li> </ul> <div layout="flex" space="p-y:medium" visual="border:neutral-200" class="border-t"> <span layout="grow">Total Investment</span> <span visual="font:tw-bold">RM 1,000</span> </div> <a href="" layout="flex items:center justify:center" space="h:big-2x w:\[100%\] p-x:medium-3x" visual="rounded:medium bg:blue-600 text-size:base text:white"> Get a Custom Quote </a> </div> </div> <div space="h:large w:\[100%\]"></div> <!--Start Description Section--> <section> <h1 space="m-b:medium" visual="text-size:huge font:tw-bold">About the Course</h1> <p visual="text-size:large">In today’s competitive digital landscape, creating ads that truly resonate with your audience is more important than ever. This course is designed to equip you with the skills and strategies needed to craft compelling, high-converting ads. From understanding your target audience to optimizing ad performance, you’ll gain actionable insights that drive real results.</p> </section> <!--End Description Section--> <div space="h:large w:\[100%\]" visual="border:neutral-200" class="border-b"></div> <div space="h:large w:\[100%\]"></div> <!--Start Learn Section--> <section> <h1 visual="text-size:huge font:tw-bold">What You’ll Learn</h1> <div space="m-t:medium p:medium" visual="rounded:medium bg:neutral-100" id="accordion1"> <div layout="flex" class="accordion-title"> <div layout="flex items:center justify:center" space="h:large w:large" visual="cursor:pointer rounded:small bg:blue-600 text:white" onclick="open\_accordion('accordion1')"> <div layout="hidden" class="accordion-open"><i class="fas fa-chevron-down"></i></div> <div class="accordion-close"><i class="fas fa-chevron-right"></i></div> </div> <div layout="flex grow items:center" space="p-x:medium" visual="font:tw-semibold"> <p>Day 1 - Foundations of Effective Ads</p> </div> <div layout="flex items:center"> <p>Half Day</p> </div> </div> <div layout="hidden" space="p-t:medium" class="accordion-body"> <p visual="text-size:large">Discover the core principles of creating ads that capture attention and drive action.</p> <ul> <li space="m-t:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Master the art of ad targeting</li> <li space="m-t:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Learn how to craft compelling ad copy</li> <li space="m-t:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Understand the psychology behind ad performance</li> </ul> </div> </div> <div space="m-t:medium p:medium" visual="rounded:medium bg:neutral-100" id="accordion2"> <div layout="flex" class="accordion-title"> <div layout="flex items:center justify:center" space="h:large w:large" visual="cursor:pointer rounded:small bg:blue-600 text:white" onclick="open\_accordion('accordion2')"> <div layout="hidden" class="accordion-open"><i class="fas fa-chevron-down"></i></div> <div class="accordion-close"><i class="fas fa-chevron-right"></i></div> </div> <div layout="flex grow items:center" space="p-x:medium" visual="font:tw-semibold"> <p>Day 2 - Advanced Ad Strategies</p> </div> <div layout="flex items:center"> <p>Half Day</p> </div> </div> <div layout="hidden" space="p-t:medium" class="accordion-body"> <p visual="text-size:large">Take your skills to the next level with advanced techniques for ad optimization.</p> <ul> <li space="m-t:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Explore retargeting and remarketing tactics</li> <li space="m-t:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Learn how to analyze and optimize ad performance</li> <li space="m-t:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Discover the secrets of A/B testing</li> </ul> </div> </div> <div space="m-t:medium p:medium" visual="rounded:medium bg:neutral-100" id="accordion3"> <div layout="flex" class="accordion-title"> <div layout="flex items:center justify:center" space="h:large w:large" visual="cursor:pointer rounded:small bg:blue-600 text:white" onclick="open\_accordion('accordion3')"> <div layout="hidden" class="accordion-open"><i class="fas fa-chevron-down"></i></div> <div class="accordion-close"><i class="fas fa-chevron-right"></i></div> </div> <div layout="flex grow items:center" space="p-x:medium" visual="font:tw-semibold"> <p>Day 3 - Real-World Applications</p> </div> <div layout="flex items:center"> <p>Half Day</p> </div> </div> <div layout="hidden" space="p-t:medium" class="accordion-body"> <p visual="text-size:large">Apply what you’ve learned to real-world scenarios and case studies.</p> <ul> <li space="m-t:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Create a full ad campaign from scratch</li> <li space="m-t:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Get feedback and refine your approach</li> <li space="m-t:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Walk away with a portfolio-ready project</li> </ul> </div> </div> </section> <script> function open\_accordion(id) { $("#" + id + " .accordion-body").slideToggle("hidden"); $("#" + id + " .accordion-open").toggleClass("hidden"); $("#" + id + " .accordion-close").toggleClass("hidden"); } </script> <!--End Learn Section--> <div space="h:large w:\[100%\]" visual="border:neutral-200" class="border-b"></div> <div space="h:large w:\[100%\]"></div> <!--Start Included Section--> <section> <h1 visual="text-size:huge font:tw-bold">What’s Included</h1> <ol layout="grid tw-lg:grid-cols:2" space="m-t:medium g:medium" visual="text-size:large"> <li><i space="m-r:small" class="fas fa-check-circle"></i>32 mins of on-demand video content</li> <li><i space="m-r:small" class="fas fa-check-circle"></i>Lifetime access to all course materials</li> <li><i space="m-r:small" class="fas fa-check-circle"></i>Hands-on assignments to practice your skills</li> <li><i space="m-r:small" class="fas fa-check-circle"></i>Certificate of completion to showcase your expertise</li> <li><i space="m-r:small" class="fas fa-check-circle"></i>Access on any device—mobile, tablet, or TV</li> </ol> </section> <!--End Included Section--> <div space="h:large w:\[100%\]" visual="border:neutral-200" class="border-b"></div> <div space="h:large w:\[100%\]"></div> <!--Start Bonus Section--> <section> <h1 visual="text-size:huge font:tw-bold">Exclusive Bonuses</h1> <div layout="grid grid-cols:2 tw-md:grid-cols:3 tw-lg:grid-cols:4" space="m-t:large g:medium"> <div layout="relative" visual="rounded:medium bg:neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"> <div layout="absolute top:none" space="w:\[100%\] p-x:small-3x p-y:small"> <p>Bonus: Ad Templates</p> </div> </div> <div layout="relative" visual="rounded:medium bg:neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"> <div layout="absolute top:none" space="w:\[100%\] p-x:small-3x p-y:small"> <p>Bonus: Case Studies</p> </div> </div> <div layout="relative" visual="rounded:medium bg:neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"> <div layout="absolute top:none" space="w:\[100%\] p-x:small-3x p-y:small"> <p>Bonus: Checklist</p> </div> </div> <div layout="relative" visual="rounded:medium bg:neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"> <div layout="absolute top:none" space="w:\[100%\] p-x:small-3x p-y:small"> <p>Bonus: Resource Guide</p> </div> </div> </div> </section> <!--End Bonus Section--> <div space="h:large w:\[100%\]" visual="border:neutral-200" class="border-b"></div> <div space="h:large w:\[100%\]"></div> <!--Start Trainer Section--> <section> <h1 visual="text-size:huge font:tw-bold">Meet Your Instructors</h1> <div layout="grid grid-cols:1" space="m-t:medium g:medium"> <div layout="grid grid-cols:2 tw-md:grid-cols:3 tw-lg:grid-cols:4" space="g:medium"> <div visual="rounded:medium bg:neutral-100" style="padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover;"></div> <div layout="tw-md:hidden"></div> <div layout="col-span:2 tw-lg:col-span:3"> <p visual="text-size:large font:tw-semibold">Xien Puo</p> <p space="m-y:tiny" visual="text-size:mini">Co-Founder of DriveFunnels</p> <p>With years of experience in digital marketing, Xien has helped countless businesses scale their ad campaigns and achieve measurable success. His practical, results-driven approach makes him a sought-after expert in the field.</p> </div> </div> </div> </section> <!--End Trainer Section--> </div> <div layout="hidden tw-lg:block"> <div layout="sticky top:giant-2x" space="p:medium" visual="rounded:medium bg:neutral-100"> <p space="m-b:tiny" visual="font:tw-semibold tw-lg:text-size:big">Flexible Pricing Plans</p> <p space="m-b:tiny" visual="text-size:small font:tw-semibold">Choose the plan that works for you</p> <p space="m-b:tiny" visual="font:tw-semibold tw-lg:text-size:large">What’s Included:</p> <ul> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>32 mins of on-demand video content</li> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Lifetime access to all course materials</li> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Hands-on assignments to practice your skills</li> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Certificate of completion to showcase your expertise</li> <li space="m-b:medium"><i space="m-r:small" class="fas fa-check-circle"></i>Access on any device—mobile, tablet, or TV</li> </ul> <div layout="flex" space="p-y:medium" visual="border:neutral-200" class="border-t"> <span layout="grow">Total Investment</span> <span visual="font:tw-bold">RM 1,000</span> </div> <a href="" layout="flex items:center justify:center" space="h:big-2x w:\[100%\] p-x:medium-3x" visual="rounded:medium bg:blue-600 text-size:base text:white"> Get a Custom Quote </a> </div> </div> </div> </div> </section> COPY ```
Enrollment Now Open

Master the Art of High-Performing Ads

3 Days (Wednesday & Thursday)10:00 AM - 5:00 PM

Flexible Pricing Plans

Choose the plan that works for you

What’s Included:

  • 32 mins of on-demand video content
  • Lifetime access to course materials
  • Practical assignments to reinforce learning
  • Certificate of completion
  • Access on mobile, tablet, and TV
Total Investment RM 1,000
Get a Custom Quote

About the Course

In today’s competitive digital landscape, creating ads that truly resonate with your audience is more important than ever. This course is designed to equip you with the skills and strategies needed to craft compelling, high-converting ads. From understanding your target audience to optimizing ad performance, you’ll gain actionable insights that drive real results.

What You’ll Learn

Day 1 - Foundations of Effective Ads

Half Day

Discover the core principles of creating ads that capture attention and drive action.

  • Master the art of ad targeting
  • Learn how to craft compelling ad copy
  • Understand the psychology behind ad performance

Day 2 - Advanced Ad Strategies

Half Day

Take your skills to the next level with advanced techniques for ad optimization.

  • Explore retargeting and remarketing tactics
  • Learn how to analyze and optimize ad performance
  • Discover the secrets of A/B testing

Day 3 - Real-World Applications

Half Day

Apply what you’ve learned to real-world scenarios and case studies.

  • Create a full ad campaign from scratch
  • Get feedback and refine your approach
  • Walk away with a portfolio-ready project

What’s Included

  1. 32 mins of on-demand video content
  2. Lifetime access to all course materials
  3. Hands-on assignments to practice your skills
  4. Certificate of completion to showcase your expertise
  5. Access on any device—mobile, tablet, or TV

Exclusive Bonuses

Bonus: Ad Templates

Bonus: Case Studies

Bonus: Checklist

Bonus: Resource Guide

Meet Your Instructors

Xien Puo

Co-Founder of DriveFunnels

With years of experience in digital marketing, Xien has helped countless businesses scale their ad campaigns and achieve measurable success. His practical, results-driven approach makes him a sought-after expert in the field.

Flexible Pricing Plans

Choose the plan that works for you

What’s Included:

  • 32 mins of on-demand video content
  • Lifetime access to all course materials
  • Hands-on assignments to practice your skills
  • Certificate of completion to showcase your expertise
  • Access on any device—mobile, tablet, or TV
Total Investment RM 1,000
Get a Custom Quote
``` #### [\#](https://senangstart.com/sections/product-2/llms.txt)Webinar Product Booking product A dedicated landing page for webinar registration, including event details, speaker bios, and a booking/ticketing module. TailwindCSS SenangStart CSS Webinar Master the Pillars of Product Design ==================================== 3 Days (Wednesday & Thursday)10:00 AM - 5:00 PM Starting at RM 437 ================== 394/400 spots filled Join via video call A link will be emailed to you upon registration. Guest ===== Adult 1 RM 874.00 x 1 adult RM 874 20% early bird discount \- RM 200 Total RM 674 Reserve Your Spot Need Assistance? About the Course ================ Discover the essential skills every digital product designer needs to succeed. Guided by Kyle Turman, Sr. Director of Product Design at Slack, this webinar dives deep into the core pillars of digital product design. Learn how to design and deliver impactful digital products at scale, drawing from real-world insights and best practices. **In Partnership with Slack Design** Slack Design is a team of passionate, innovative designers dedicated to making work simpler, more enjoyable, and productive. Through collaboration and knowledge-sharing, they aim to empower the broader design community. Meet Your Instructor ==================== Kyle Turman Sr. Director of Product Design at Slack With years of experience in designing scalable digital products, Kyle Turman brings a wealth of knowledge to this webinar. Learn how to navigate the challenges of app design, create user-centric solutions, and stand out in a competitive market. Organized By ============ FixColab Group Sdn Bhd Innovators in Design Education FixColab is committed to empowering designers with the skills and knowledge needed to thrive in the digital age. Through workshops, webinars, and collaborative projects, they aim to foster creativity and innovation in the design community. ![](https://placehold.co/32x32) Hosted by FixColab Group Sdn Bhd ================================ Published December 2, 2021 Share Starting at RM 437 ================== 394/400 spots filled Join via video call A link will be emailed to you upon registration. Guest ===== Adult 1 RM 874.00 x 1 adult RM 874 20% early bird discount \- RM 200 Total RM 674 Reserve Your Spot Need Assistance? <section class="container relative mx-auto mb-16"> <div class="px-6 pt-36 lg:px-16 lg:pt-16"> <div class="mx-auto grid w-full gap-4 lg:grid-cols-3"> <div class="lg:col-span-3"> <div class="mb-2 text-sm">Webinar</div> <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Master the Pillars of Product Design</h1> <p class="text lg:mb-4"><i class="fas fa-calendar mr-2"></i>3 Days (Wednesday & Thursday)<i class="fas fa-clock mx-2"></i>10:00 AM - 5:00 PM</p> </div> <div class="lg:col-span-2"> <!--Start Hero Section--> <section> <iframe src="https://www.youtube.com/embed/\_\_NeP0RqACU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="aspect-video w-full rounded-lg"></iframe> </section> <!--End Hero Section--> <div class="h-4 w-full"></div> <div class="mb-4 rounded-lg border border-neutral-200 p-4 lg:hidden"> <div class="flex"> <div class="h-12 w-12 rounded-md bg-neutral-200"></div> <div class="h-full w-3"></div> <div> <h1 class="text-2xl font-bold leading-7">Starting at RM 437</h1> <p class="text-sm leading-5"><i class="fas fa-users mr-2 text-neutral-400"></i>394/400 spots filled</p> </div> </div> <div class="h-4 w-full"></div> <div class="h-4 w-full border-t border-neutral-200"></div> <div class="flex"> <div> <i class="fas fa-laptop"></i> </div> <div class="w-3"></div> <div class="flex flex-grow flex-col"> <p class="font-semibold">Join via video call</p> <p class="text-sm">A link will be emailed to you upon registration.</p> </div> </div> <div class="h-4 w-full"></div> <div class="h-4 w-full border-t border-neutral-200"></div> <div> <h1 class="mb-2 text-xl font-semibold">Guest</h1> <div class="flex h-12 items-center rounded-lg border border-neutral-200 p-2"> <p class="flex-grow">Adult</p> <div class="flex"> <div class="flex h-8 w-8 items-center justify-center rounded-md bg-neutral-100"> <i class="fas fa-minus"></i> </div> <div class="flex h-8 w-12 items-center justify-center"> <p>1</p> </div> <div class="flex h-8 w-8 items-center justify-center rounded-md bg-neutral-100"> <i class="fas fa-plus"></i> </div> </div> </div> </div> <div class="h-4 w-full"></div> <div class="h-4 w-full border-t border-neutral-200"></div> <div> <div class="flex w-full"> <p class="flex-grow">RM 874.00 x 1 adult</p> <p>RM 874</p> </div> <div class="h-2 w-full"></div> <div class="flex w-full"> <p class="flex-grow">20% early bird discount</p> <p class="text-green-400">- RM 200</p> </div> </div> <div class="h-4 w-full"></div> <div class="h-4 w-full border-t border-neutral-200"></div> <div class="flex w-full text-xl"> <p class="flex-grow">Total</p> <p class="font-semibold">RM 674</p> </div> <div class="h-4 w-full"></div> <a href="" class="flex h-14 w-full items-center justify-center rounded-lg bg-neutral-800 px-6 text-lg font-semibold text-white hover:opacity-80"> Reserve Your Spot </a> <div class="h-2 w-full"></div> <a href="" class="flex h-14 w-full items-center justify-center rounded-lg px-6 text-lg font-semibold hover:bg-neutral-100"> Need Assistance? <i class="fas fa-headset ml-4"></i> </a> </div> <!--Start Description Section--> <section> <h1 class="mb-4 text-2xl font-bold">About the Course</h1> <p class="text-lg"> Discover the essential skills every digital product designer needs to succeed. Guided by Kyle Turman, Sr. Director of Product Design at Slack, this webinar dives deep into the core pillars of digital product design. Learn how to design and deliver impactful digital products at scale, drawing from real-world insights and best practices. <br /><br /> <strong>In Partnership with Slack Design</strong> <br /><br /> Slack Design is a team of passionate, innovative designers dedicated to making work simpler, more enjoyable, and productive. Through collaboration and knowledge-sharing, they aim to empower the broader design community. </p> </section> <!--End Description Section--> <div class="h-8 w-full border-b border-neutral-200"></div> <div class="h-8 w-full"></div> <!--Start Speaker Section--> <section> <h1 class="text-2xl font-bold leading-7">Meet Your Instructor</h1> <div class="mt-4 grid grid-cols-1 gap-4"> <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4"> <div class="rounded-lg bg-neutral-100" style=" padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover; " ></div> <div class="md:hidden"></div> <div class="col-span-2 lg:col-span-3"> <p class="text-lg font-semibold">Kyle Turman</p> <p class="my-1 text-xs">Sr. Director of Product Design at Slack</p> <p>With years of experience in designing scalable digital products, Kyle Turman brings a wealth of knowledge to this webinar. Learn how to navigate the challenges of app design, create user-centric solutions, and stand out in a competitive market.</p> </div> </div> </div> </section> <!--End Speaker Section--> <div class="h-8 w-full border-b border-neutral-200"></div> <div class="h-8 w-full"></div> <!--Start Organizer Section--> <section> <h1 class="text-2xl font-bold leading-7">Organized By</h1> <div class="mt-4 grid grid-cols-1 gap-4"> <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4"> <div class="rounded-lg bg-neutral-100" style=" padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover; " ></div> <div class="md:hidden"></div> <div class="col-span-2 lg:col-span-3"> <p class="text-lg font-semibold">FixColab Group Sdn Bhd</p> <p class="my-1 text-xs">Innovators in Design Education</p> <p>FixColab is committed to empowering designers with the skills and knowledge needed to thrive in the digital age. Through workshops, webinars, and collaborative projects, they aim to foster creativity and innovation in the design community.</p> </div> </div> </div> </section> <!--End Organizer Section--> <section class="hidden lg:block"> <div class="h-8 w-full"></div> <div class="flex h-14 items-center border-b border-t border-neutral-100"> <div class="h-8 w-8 overflow-hidden rounded-full bg-neutral-100"> <img src="https://placehold.co/32x32" /> </div> <div class="flex flex-grow flex-col px-2"> <h1 class="text-sm font-bold">Hosted by FixColab Group Sdn Bhd</h1> <p class="text-xs">Published December 2, 2021</p> </div> <div> <a href="" class="flex h-8 items-center rounded-lg bg-neutral-100 px-3 text-sm" ><i class="fas fa-share-alt mr-2"></i> <p>Share</p> </a> </div> </div> </section> </div> <div class="hidden lg:block"> <div class="sticky top-36 rounded-lg border border-neutral-200 p-4"> <div class="flex"> <div class="flex h-12 w-12 items-center justify-center rounded-md bg-neutral-200 text-xl text-blue-600"> <i class="fas fa-graduation-cap"></i> </div> <div class="h-full w-3"></div> <div> <h1 class="text-2xl font-bold leading-7">Starting at RM 437</h1> <p class="text-sm leading-5"><i class="fas fa-users mr-2 text-neutral-400"></i>394/400 spots filled</p> </div> </div> <div class="h-4 w-full"></div> <div class="h-4 w-full border-t border-neutral-200"></div> <div class="flex"> <div> <i class="fas fa-laptop"></i> </div> <div class="w-3"></div> <div class="flex flex-grow flex-col"> <p class="font-semibold">Join via video call</p> <p class="text-sm">A link will be emailed to you upon registration.</p> </div> </div> <div class="h-4 w-full"></div> <div class="h-4 w-full border-t border-neutral-200"></div> <div> <h1 class="mb-2 text-xl font-semibold">Guest</h1> <div class="flex h-12 items-center rounded-lg border border-neutral-200 p-2"> <p class="flex-grow">Adult</p> <div class="flex"> <div class="flex h-8 w-8 items-center justify-center rounded-md bg-neutral-100"> <i class="fas fa-minus"></i> </div> <div class="flex h-8 w-12 items-center justify-center"> <p>1</p> </div> <div class="flex h-8 w-8 items-center justify-center rounded-md bg-neutral-100"> <i class="fas fa-plus"></i> </div> </div> </div> </div> <div class="h-4 w-full"></div> <div class="h-4 w-full border-t border-neutral-200"></div> <div> <div class="flex w-full"> <p class="flex-grow">RM 874.00 x 1 adult</p> <p>RM 874</p> </div> <div class="h-2 w-full"></div> <div class="flex w-full"> <p class="flex-grow">20% early bird discount</p> <p class="text-red-500">- RM 200</p> </div> </div> <div class="h-4 w-full"></div> <div class="h-4 w-full border-t border-neutral-200"></div> <div class="flex w-full text-xl"> <p class="flex-grow">Total</p> <p class="font-semibold">RM 674</p> </div> <div class="h-4 w-full"></div> <a href="" class="flex h-14 w-full items-center justify-center rounded-lg bg-blue-600 px-6 text-lg font-semibold text-white hover:opacity-80"> Reserve Your Spot </a> <div class="h-2 w-full"></div> <a href="" class="flex h-14 w-full items-center justify-center rounded-lg px-6 text-lg font-semibold hover:bg-neutral-100"> Need Assistance? <i class="fas fa-headset ml-4"></i> </a> </div> </div> </div> </div> </section> COPY ```
Webinar

Master the Pillars of Product Design

3 Days (Wednesday & Thursday)10:00 AM - 5:00 PM

Starting at RM 437

394/400 spots filled

Join via video call

A link will be emailed to you upon registration.

Guest

Adult

1

RM 874.00 x 1 adult

RM 874

20% early bird discount

- RM 200

Total

RM 674

Reserve Your Spot
Need Assistance?

About the Course

Discover the essential skills every digital product designer needs to succeed. Guided by Kyle Turman, Sr. Director of Product Design at Slack, this webinar dives deep into the core pillars of digital product design. Learn how to design and deliver impactful digital products at scale, drawing from real-world insights and best practices.

In Partnership with Slack Design

Slack Design is a team of passionate, innovative designers dedicated to making work simpler, more enjoyable, and productive. Through collaboration and knowledge-sharing, they aim to empower the broader design community.

Meet Your Instructor

Kyle Turman

Sr. Director of Product Design at Slack

With years of experience in designing scalable digital products, Kyle Turman brings a wealth of knowledge to this webinar. Learn how to navigate the challenges of app design, create user-centric solutions, and stand out in a competitive market.

Organized By

FixColab Group Sdn Bhd

Innovators in Design Education

FixColab is committed to empowering designers with the skills and knowledge needed to thrive in the digital age. Through workshops, webinars, and collaborative projects, they aim to foster creativity and innovation in the design community.

``` Webinar Master the Pillars of Product Design ==================================== 3 Days (Wednesday & Thursday)10:00 AM - 5:00 PM Starting at RM 437 ================== 394/400 spots filled Join via video call A link will be emailed to you upon registration. Guest ===== Adult 1 RM 874.00 x 1 adult RM 874 20% early bird discount \- RM 200 Total RM 674 Reserve Your Spot Need Assistance? About the Course ================ Discover the essential skills every digital product designer needs to succeed. Guided by Kyle Turman, Sr. Director of Product Design at Slack, this webinar dives deep into the core pillars of digital product design. Learn how to design and deliver impactful digital products at scale, drawing from real-world insights and best practices. **In Partnership with Slack Design** Slack Design is a team of passionate, innovative designers dedicated to making work simpler, more enjoyable, and productive. Through collaboration and knowledge-sharing, they aim to empower the broader design community. Meet Your Instructor ==================== Kyle Turman Sr. Director of Product Design at Slack With years of experience in designing scalable digital products, Kyle Turman brings a wealth of knowledge to this webinar. Learn how to navigate the challenges of app design, create user-centric solutions, and stand out in a competitive market. Organized By ============ FixColab Group Sdn Bhd Innovators in Design Education FixColab is committed to empowering designers with the skills and knowledge needed to thrive in the digital age. Through workshops, webinars, and collaborative projects, they aim to foster creativity and innovation in the design community. ![](https://placehold.co/32x32) Hosted by FixColab Group Sdn Bhd ================================ Published December 2, 2021 Share Starting at RM 437 ================== 394/400 spots filled Join via video call A link will be emailed to you upon registration. Guest ===== Adult 1 RM 874.00 x 1 adult RM 874 20% early bird discount \- RM 200 Total RM 674 Reserve Your Spot Need Assistance? <section layout="container relative" space="m-x:auto m-b:big-3x"> <div space="p-x:medium-3x p-t:giant-4x tw-lg:p-x:big-3x tw-lg:p-t:big-3x"> <div layout="grid tw-lg:grid-cols:3" space="m-x:auto w:\[100%\] g:medium"> <div layout="tw-lg:col-span:3"> <div space="m-b:small" visual="text-size:small">Webinar</div> <h1 space="m-b:small tw-lg:m-b:medium" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">Master the Pillars of Product Design</h1> <p space="tw-lg:m-b:medium" class="text"><i space="m-r:small" class="fas fa-calendar"></i>3 Days (Wednesday & Thursday)<i space="m-x:small" class="fas fa-clock"></i>10:00 AM - 5:00 PM</p> </div> <div layout="tw-lg:col-span:2"> <!--Start Hero Section--> <section> <iframe src="https://www.youtube.com/embed/\_\_NeP0RqACU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen space="w:\[100%\]" visual="rounded:medium" class="aspect-video"></iframe> </section> <!--End Hero Section--> <div space="h:medium w:\[100%\]"></div> <div layout="tw-lg:hidden" space="m-b:medium p:medium" visual="rounded:medium border-w:thin border:neutral-200"> <div layout="flex"> <div space="h:big w:big" visual="rounded:small bg:neutral-200"></div> <div space="h:\[100%\] w:small-3x"></div> <div> <h1 visual="text-size:huge font:tw-bold" class="leading-7">Starting at RM 437</h1> <p visual="text-size:small" class="leading-5"><i space="m-r:small" visual="text:neutral-400" class="fas fa-users"></i>394/400 spots filled</p> </div> </div> <div space="h:medium w:\[100%\]"></div> <div space="h:medium w:\[100%\]" visual="border:neutral-200" class="border-t"></div> <div layout="flex"> <div> <i class="fas fa-laptop"></i> </div> <div space="w:small-3x"></div> <div layout="flex grow col"> <p visual="font:tw-semibold">Join via video call</p> <p visual="text-size:small">A link will be emailed to you upon registration.</p> </div> </div> <div space="h:medium w:\[100%\]"></div> <div space="h:medium w:\[100%\]" visual="border:neutral-200" class="border-t"></div> <div> <h1 space="m-b:small" visual="text-size:big font:tw-semibold">Guest</h1> <div layout="flex items:center" space="h:big p:small" visual="rounded:medium border-w:thin border:neutral-200"> <p layout="grow">Adult</p> <div layout="flex"> <div layout="flex items:center justify:center" space="h:large w:large" visual="rounded:small bg:neutral-100"> <i class="fas fa-minus"></i> </div> <div layout="flex items:center justify:center" space="h:large w:big"> <p>1</p> </div> <div layout="flex items:center justify:center" space="h:large w:large" visual="rounded:small bg:neutral-100"> <i class="fas fa-plus"></i> </div> </div> </div> </div> <div space="h:medium w:\[100%\]"></div> <div space="h:medium w:\[100%\]" visual="border:neutral-200" class="border-t"></div> <div> <div layout="flex" space="w:\[100%\]"> <p layout="grow">RM 874.00 x 1 adult</p> <p>RM 874</p> </div> <div space="h:small w:\[100%\]"></div> <div layout="flex" space="w:\[100%\]"> <p layout="grow">20% early bird discount</p> <p visual="text:green-400">- RM 200</p> </div> </div> <div space="h:medium w:\[100%\]"></div> <div space="h:medium w:\[100%\]" visual="border:neutral-200" class="border-t"></div> <div layout="flex" space="w:\[100%\]" visual="text-size:big"> <p layout="grow">Total</p> <p visual="font:tw-semibold">RM 674</p> </div> <div space="h:medium w:\[100%\]"></div> <a href="" layout="flex items:center justify:center" space="h:big-2x w:\[100%\] p-x:medium-3x" visual="rounded:medium bg:neutral-800 text-size:large font:tw-semibold text:white hover:opacity:80"> Reserve Your Spot </a> <div space="h:small w:\[100%\]"></div> <a href="" layout="flex items:center justify:center" space="h:big-2x w:\[100%\] p-x:medium-3x" visual="rounded:medium text-size:large font:tw-semibold hover:bg:neutral-100"> Need Assistance? <i space="m-l:medium" class="fas fa-headset"></i> </a> </div> <!--Start Description Section--> <section> <h1 space="m-b:medium" visual="text-size:huge font:tw-bold">About the Course</h1> <p visual="text-size:large"> Discover the essential skills every digital product designer needs to succeed. Guided by Kyle Turman, Sr. Director of Product Design at Slack, this webinar dives deep into the core pillars of digital product design. Learn how to design and deliver impactful digital products at scale, drawing from real-world insights and best practices. <br /><br /> <strong>In Partnership with Slack Design</strong> <br /><br /> Slack Design is a team of passionate, innovative designers dedicated to making work simpler, more enjoyable, and productive. Through collaboration and knowledge-sharing, they aim to empower the broader design community. </p> </section> <!--End Description Section--> <div space="h:large w:\[100%\]" visual="border:neutral-200" class="border-b"></div> <div space="h:large w:\[100%\]"></div> <!--Start Speaker Section--> <section> <h1 visual="text-size:huge font:tw-bold" class="leading-7">Meet Your Instructor</h1> <div layout="grid grid-cols:1" space="m-t:medium g:medium"> <div layout="grid grid-cols:2 tw-md:grid-cols:3 tw-lg:grid-cols:4" space="g:medium"> <div visual="rounded:medium bg:neutral-100" style=" padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover; " ></div> <div layout="tw-md:hidden"></div> <div layout="col-span:2 tw-lg:col-span:3"> <p visual="text-size:large font:tw-semibold">Kyle Turman</p> <p space="m-y:tiny" visual="text-size:mini">Sr. Director of Product Design at Slack</p> <p>With years of experience in designing scalable digital products, Kyle Turman brings a wealth of knowledge to this webinar. Learn how to navigate the challenges of app design, create user-centric solutions, and stand out in a competitive market.</p> </div> </div> </div> </section> <!--End Speaker Section--> <div space="h:large w:\[100%\]" visual="border:neutral-200" class="border-b"></div> <div space="h:large w:\[100%\]"></div> <!--Start Organizer Section--> <section> <h1 visual="text-size:huge font:tw-bold" class="leading-7">Organized By</h1> <div layout="grid grid-cols:1" space="m-t:medium g:medium"> <div layout="grid grid-cols:2 tw-md:grid-cols:3 tw-lg:grid-cols:4" space="g:medium"> <div visual="rounded:medium bg:neutral-100" style=" padding-top: 120%; background: url('https://placehold.co/200x260'); background-size: cover; " ></div> <div layout="tw-md:hidden"></div> <div layout="col-span:2 tw-lg:col-span:3"> <p visual="text-size:large font:tw-semibold">FixColab Group Sdn Bhd</p> <p space="m-y:tiny" visual="text-size:mini">Innovators in Design Education</p> <p>FixColab is committed to empowering designers with the skills and knowledge needed to thrive in the digital age. Through workshops, webinars, and collaborative projects, they aim to foster creativity and innovation in the design community.</p> </div> </div> </div> </section> <!--End Organizer Section--> <section layout="hidden tw-lg:block"> <div space="h:large w:\[100%\]"></div> <div layout="flex items:center" space="h:big-2x" visual="border:neutral-100" class="border-b border-t"> <div layout="overflow:hidden" space="h:large w:large" visual="rounded:round bg:neutral-100"> <img src="https://placehold.co/32x32" /> </div> <div layout="flex grow col" space="p-x:small"> <h1 visual="text-size:small font:tw-bold">Hosted by FixColab Group Sdn Bhd</h1> <p visual="text-size:mini">Published December 2, 2021</p> </div> <div> <a href="" layout="flex items:center" space="h:large p-x:small-3x" visual="rounded:medium bg:neutral-100 text-size:small" ><i space="m-r:small" class="fas fa-share-alt"></i> <p>Share</p> </a> </div> </div> </section> </div> <div layout="hidden tw-lg:block"> <div layout="sticky top:giant-4x" space="p:medium" visual="rounded:medium border-w:thin border:neutral-200"> <div layout="flex"> <div layout="flex items:center justify:center" space="h:big w:big" visual="rounded:small bg:neutral-200 text-size:big text:blue-600"> <i class="fas fa-graduation-cap"></i> </div> <div space="h:\[100%\] w:small-3x"></div> <div> <h1 visual="text-size:huge font:tw-bold" class="leading-7">Starting at RM 437</h1> <p visual="text-size:small" class="leading-5"><i space="m-r:small" visual="text:neutral-400" class="fas fa-users"></i>394/400 spots filled</p> </div> </div> <div space="h:medium w:\[100%\]"></div> <div space="h:medium w:\[100%\]" visual="border:neutral-200" class="border-t"></div> <div layout="flex"> <div> <i class="fas fa-laptop"></i> </div> <div space="w:small-3x"></div> <div layout="flex grow col"> <p visual="font:tw-semibold">Join via video call</p> <p visual="text-size:small">A link will be emailed to you upon registration.</p> </div> </div> <div space="h:medium w:\[100%\]"></div> <div space="h:medium w:\[100%\]" visual="border:neutral-200" class="border-t"></div> <div> <h1 space="m-b:small" visual="text-size:big font:tw-semibold">Guest</h1> <div layout="flex items:center" space="h:big p:small" visual="rounded:medium border-w:thin border:neutral-200"> <p layout="grow">Adult</p> <div layout="flex"> <div layout="flex items:center justify:center" space="h:large w:large" visual="rounded:small bg:neutral-100"> <i class="fas fa-minus"></i> </div> <div layout="flex items:center justify:center" space="h:large w:big"> <p>1</p> </div> <div layout="flex items:center justify:center" space="h:large w:large" visual="rounded:small bg:neutral-100"> <i class="fas fa-plus"></i> </div> </div> </div> </div> <div space="h:medium w:\[100%\]"></div> <div space="h:medium w:\[100%\]" visual="border:neutral-200" class="border-t"></div> <div> <div layout="flex" space="w:\[100%\]"> <p layout="grow">RM 874.00 x 1 adult</p> <p>RM 874</p> </div> <div space="h:small w:\[100%\]"></div> <div layout="flex" space="w:\[100%\]"> <p layout="grow">20% early bird discount</p> <p visual="text:red-500">- RM 200</p> </div> </div> <div space="h:medium w:\[100%\]"></div> <div space="h:medium w:\[100%\]" visual="border:neutral-200" class="border-t"></div> <div layout="flex" space="w:\[100%\]" visual="text-size:big"> <p layout="grow">Total</p> <p visual="font:tw-semibold">RM 674</p> </div> <div space="h:medium w:\[100%\]"></div> <a href="" layout="flex items:center justify:center" space="h:big-2x w:\[100%\] p-x:medium-3x" visual="rounded:medium bg:blue-600 text-size:large font:tw-semibold text:white hover:opacity:80"> Reserve Your Spot </a> <div space="h:small w:\[100%\]"></div> <a href="" layout="flex items:center justify:center" space="h:big-2x w:\[100%\] p-x:medium-3x" visual="rounded:medium text-size:large font:tw-semibold hover:bg:neutral-100"> Need Assistance? <i space="m-l:medium" class="fas fa-headset"></i> </a> </div> </div> </div> </div> </section> COPY ```
Webinar

Master the Pillars of Product Design

3 Days (Wednesday & Thursday)10:00 AM - 5:00 PM

Starting at RM 437

394/400 spots filled

Join via video call

A link will be emailed to you upon registration.

Guest

Adult

1

RM 874.00 x 1 adult

RM 874

20% early bird discount

- RM 200

Total

RM 674

Reserve Your Spot
Need Assistance?

About the Course

Discover the essential skills every digital product designer needs to succeed. Guided by Kyle Turman, Sr. Director of Product Design at Slack, this webinar dives deep into the core pillars of digital product design. Learn how to design and deliver impactful digital products at scale, drawing from real-world insights and best practices.

In Partnership with Slack Design

Slack Design is a team of passionate, innovative designers dedicated to making work simpler, more enjoyable, and productive. Through collaboration and knowledge-sharing, they aim to empower the broader design community.

Meet Your Instructor

Kyle Turman

Sr. Director of Product Design at Slack

With years of experience in designing scalable digital products, Kyle Turman brings a wealth of knowledge to this webinar. Learn how to navigate the challenges of app design, create user-centric solutions, and stand out in a competitive market.

Organized By

FixColab Group Sdn Bhd

Innovators in Design Education

FixColab is committed to empowering designers with the skills and knowledge needed to thrive in the digital age. Through workshops, webinars, and collaborative projects, they aim to foster creativity and innovation in the design community.

Hosted by FixColab Group Sdn Bhd

Published December 2, 2021

Starting at RM 437

394/400 spots filled

Join via video call

A link will be emailed to you upon registration.

Guest

Adult

1

RM 874.00 x 1 adult

RM 874

20% early bird discount

- RM 200

Total

RM 674

Reserve Your Spot
Need Assistance?
``` #### [\#](https://senangstart.com/sections/footer-2/llms.txt)Footer Sitemap footer Offers a comprehensive footer with sitemap links, contact information, branding, and social media connections. TailwindCSS SenangStart CSS Elevate Your Web Development Experience With SenangStart #### Site Map [Templates](#templates) [Sections](#sections) [Components](#components) [Designs](#designs) #### Contact Us SenangStart By Bookklik Technologies hello@senangstart.com Selangor, Malaysia #### Links [GitHub](#) [Terms & Conditions](https://senangstart.com/terms_conditions) [Privacy Policy](https://senangstart.com/privacy_policy) [ ](#) [ ](#) [ ](#) [ ](#) 2024 © SenangStart [ ](#) <footer class="container mx-auto grid gap-8 px-6 lg:grid-cols-4 lg:gap-16 lg:px-16"> <div class="flex flex-col gap-2"> <div class="h-12 max-w-max"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1362 222" overflow="hidden" width="100%" height="100%"> <defs> <clipPath id="clip0"> <rect x="1089" y="1870" width="1103" height="184"></rect> </clipPath> <clipPath id="clip1"> <rect x="1089" y="1870" width="1103" height="184"></rect> </clipPath> <clipPath id="clip2"> <rect x="1089" y="1870" width="1103" height="184"></rect> </clipPath> </defs> <g transform="translate(-831 -1851)"> <g> <g> <g> <path d="M197.224 319.004 195.434 321.663C186.923 335.104 183.178 350.775 184.162 366.336L184.211 366.912 184.787 366.963C200.349 367.945 216.021 364.199 229.46 355.689L232.121 353.901 230.803 355.762C228.703 358.584 226.374 361.285 223.817 363.842 208.229 379.43 187.284 386.526 166.535 385.215L165.959 385.164 165.909 384.588C164.598 363.84 171.694 342.896 187.283 327.308 189.84 324.751 192.541 322.421 195.363 320.321ZM336.452 214.672C326.364 204.584 310.007 204.584 299.918 214.672 289.829 224.761 289.829 241.118 299.918 251.206 310.007 261.295 326.364 261.295 336.452 251.206 346.541 241.118 346.541 224.761 336.452 214.672ZM385.164 165.959 385.262 167.426C387.406 216.985 370.69 267.361 335.171 306.886L332.519 309.682 336.452 360.809 232.939 379.076 260.788 351.225 255.258 347.735C245.237 340.962 235.717 333.141 226.85 324.275 217.982 315.407 210.163 305.887 203.388 295.866L199.899 290.334 172.049 318.185 190.316 214.672 241.442 218.604 244.238 215.954C283.762 180.434 334.139 163.719 383.699 165.861Z" fill-rule="evenodd" transform="matrix(1 0 0 1.00455 666.316 1685.75)"></path> </g> </g> </g> <g clip-path="url(#clip0)"> <g clip-path="url(#clip1)"> <g clip-path="url(#clip2)"> <path d="M731.381 261.175C730.977 261.077 728.991 260.735 726.969 260.408 722.257 259.645 715.741 257.522 711.396 255.334 706.537 252.887 700.346 248.062 697.25 244.309L694.594 241.089 702.686 232.996 710.778 224.904 713.359 227.386C720.447 234.201 726.3 236.994 735.216 237.817 749.098 239.098 758.913 234.704 763.42 225.191 764.885 222.1 764.967 221.607 765.128 214.901 765.315 207.153 765.492 207.453 762.235 209.983 759.86 211.828 754.261 214.581 750.988 215.513 746.864 216.688 739.393 217.432 735.302 217.075 715.463 215.347 700.707 202.67 695.323 182.73 694.23 178.678 693.814 166.43 694.604 161.526 696.315 150.905 700.771 142.424 708.497 135.086 717.554 126.482 730.399 122.228 743.138 123.614 750.927 124.461 756.571 126.557 762.63 130.853L765.693 133.025 765.693 129.079 765.693 125.133 778.458 125.133 791.223 125.133 791.045 173.784C790.849 227.402 791.001 224.69 787.718 232.89 784.699 240.43 778.367 248.145 771.419 252.749 767.071 255.631 761.086 258.228 755.399 259.702 750.875 260.875 749.155 261.055 741.184 261.192 736.196 261.28 731.784 261.269 731.38 261.171ZM754.059 191.686C763.33 187.283 768.136 177.649 766.653 166.442 764.998 153.931 755.299 146.164 742.165 146.832 729.618 147.469 721.249 155.667 720.279 168.269 719.57 177.469 723.915 186.367 731.202 190.637 735.426 193.112 738.433 193.779 744.644 193.615 749.994 193.475 750.518 193.368 754.059 191.686ZM182.616 221.392C167.103 219.703 154.681 213.71 144.175 202.844L140.538 199.083 149.296 190.315 158.054 181.546 162.002 185.636C170.519 194.461 179.471 198.184 192.116 198.162 202.785 198.14 210.082 194.896 213.373 188.706 214.903 185.829 214.933 179.327 213.428 176.067 210.79 170.338 203.524 165.96 187.023 160.16 181.901 158.36 175.706 155.949 173.256 154.804 158.044 147.69 150.951 138.032 149.8 122.866 148.443 104.993 157.731 90.4932 174.769 83.8882 181.406 81.3149 186.964 80.3787 195.847 80.3376 200.428 80.3168 205.219 80.5751 207.366 80.9596 218.6 82.971 230.26 88.8665 237.502 96.1963L240.433 99.1627 231.629 107.977 222.825 116.791 219.875 113.944C212.448 106.777 205.829 104.011 195.847 103.903 185.629 103.793 178.57 107.322 176.749 113.453 175.797 116.661 175.798 118.413 176.757 121.641 178.59 127.816 184.09 131.337 201.729 137.632 219.81 144.085 227.011 148.117 232.649 154.947 237.276 160.55 239.63 166.136 240.716 174.086 241.89 182.672 240.662 191.312 237.255 198.415 231.818 209.757 221.255 217.09 205.798 220.252 200.843 221.266 187.487 221.922 182.611 221.392ZM295.849 221.146C274.12 218.432 256.819 202.41 253.199 181.648 251.708 173.099 252.514 163.052 255.327 155.101 260.287 141.085 273.881 128.714 288.512 124.903 299.123 122.14 311.368 122.843 321.104 126.775 334.794 132.305 345.114 145.29 347.846 160.426 348.656 164.911 348.737 174.187 348.004 178.4L347.463 181.504 312.902 181.504 278.341 181.504 278.675 182.836C279.499 186.122 281.732 189.764 284.782 192.802 290.256 198.253 296.48 200.42 305.407 199.982 313.551 199.582 319.664 197.251 324.893 192.549L327.295 190.39 334.786 197.893 342.277 205.395 339.552 208.121C329.282 218.391 312.893 223.275 295.848 221.146ZM323.752 161.038C323.071 157.991 320.088 152.532 317.918 150.361 309.717 142.16 293.236 142.632 284.552 151.316 282.083 153.785 278.447 160.005 278.447 161.76 278.447 162.259 283.066 162.386 301.25 162.386L324.053 162.386ZM508.836 221.406C499.776 219.732 495.476 218.109 489.42 214.08 479.803 207.681 472.66 196.663 470.05 184.2 469.093 179.63 468.743 169.154 469.392 164.483 472.161 144.537 485.49 129.05 503.749 124.564 509.694 123.104 519.109 123.116 524.767 124.597 529.702 125.885 534.855 128.458 538.698 131.555L541.679 133.956 541.679 129.547 541.679 125.137 554.423 125.137 567.168 125.137 567.168 172.44 567.168 219.743 554.423 219.743 541.679 219.743 541.679 215.309 541.679 210.875 538.615 213.356C534.89 216.373 528.822 219.441 524.522 220.481 521.367 221.244 511.199 221.847 508.836 221.411ZM523.541 197.654C530.456 196.552 536.707 192.097 539.825 186.05 542.327 181.197 542.904 178.593 542.897 172.19 542.888 165.548 541.824 161.733 538.653 156.985 536.236 153.365 533.575 151.142 529.15 149.047 525.826 147.473 525.594 147.436 519.129 147.436L512.512 147.436 508.715 149.249C502.665 152.138 498.297 157.252 496.24 163.857 495.171 167.286 495.056 176.752 496.038 180.278 499.528 192.799 510.504 199.733 523.541 197.654ZM849.026 221.148C836.423 219.694 825.064 213.961 815.381 204.166 812.856 201.613 810.791 199.381 810.791 199.205 810.791 199.03 812.996 196.69 815.691 194.005L820.591 189.123 821.424 190.338C823.075 192.746 828.744 198.323 831.624 200.372 835.637 203.227 838.872 204.785 843.973 206.319 849.635 208.021 861.811 208.519 867.636 207.287 875.84 205.55 882.887 200.573 885.553 194.633 888.046 189.079 887.697 180.588 884.742 174.897 881.195 168.068 874.37 163.782 856.624 157.241 840.141 151.165 833.697 147.654 828.188 141.743 822.277 135.401 819.916 128.767 819.923 118.515 819.928 109.26 821.914 103.054 826.758 97.1484 831.284 91.6314 838.932 86.9522 846.821 84.8748 851.806 83.562 863.335 83.0804 869.211 83.9396 880.006 85.518 889.417 90.2921 897.422 98.2505L901.01 101.818 896.101 106.728 891.192 111.637 887.633 108.146C881.325 101.957 874.898 98.4598 867.449 97.1627 862.519 96.3041 852.5 96.8103 848.883 98.1007 842.183 100.491 838.286 103.717 835.87 108.87 834.685 111.399 834.566 112.188 834.566 117.545 834.566 123.218 834.632 123.561 836.178 126.712 839.395 133.245 846.047 137.61 861.281 143.184 877.244 149.024 880.47 150.46 886.036 154.204 889.867 156.781 894.927 161.976 896.977 165.437 901.907 173.76 903.077 187.089 899.792 197.488 894.354 214.702 874.274 224.06 849.026 221.148ZM1025.27 221.191C1008.71 218.591 994.87 206.769 989.287 190.45 986.484 182.258 986.033 169.75 988.223 160.942 989.457 155.975 992.805 148.718 995.775 144.572 998.27 141.088 1003.6 135.845 1007.03 133.513 1010.29 131.288 1016.73 128.385 1020.84 127.282 1025.6 126.006 1038.97 125.967 1043.63 127.217 1049.44 128.774 1055.53 132.225 1059.77 136.363 1061.87 138.412 1064.05 140.749 1064.62 141.558L1065.66 143.029 1065.67 135.308 1065.68 127.588 1072.54 127.588 1079.41 127.588 1079.41 173.666 1079.41 219.743 1072.54 219.743 1065.68 219.743 1065.68 212.101 1065.68 204.459 1063.8 206.835C1058.66 213.343 1050.56 218.69 1043.13 220.487 1039.25 221.425 1029.25 221.819 1025.26 221.192ZM1043.34 207.5C1048.57 206.162 1052.61 203.885 1056.41 200.135 1063.41 193.239 1066.27 185.474 1066.26 173.42 1066.26 166.235 1065.32 161.654 1062.76 156.284 1059.88 150.254 1054.57 144.711 1049.13 142.045 1039.43 137.296 1025.67 137.946 1016.75 143.576 1010.41 147.577 1005.13 154.301 1002.71 161.459 1000.87 166.884 1000.41 176.377 1001.7 182.336 1004.34 194.549 1013.66 204.351 1025.6 207.479 1030.55 208.776 1038.31 208.785 1043.34 207.501ZM364.23 172.44 364.23 125.137 377.22 125.137 390.21 125.137 390.21 129.546 390.21 133.956 393.274 131.479C399.893 126.128 407.465 123.585 416.925 123.535 425.537 123.49 430.723 124.988 437.429 129.459 443.368 133.419 448.558 139.879 451.347 146.784 453.731 152.687 453.899 155.163 453.917 184.743 453.927 199.867 453.792 213.93 453.617 215.992L453.3 219.743 440.627 219.743 427.954 219.743 427.954 190.666C427.954 158.729 427.965 158.921 424.97 154.392 423.042 151.48 418.769 148.387 415.23 147.339 411.305 146.177 405.378 146.321 401.853 147.662 397.944 149.15 394.084 152.792 392.06 156.903L390.455 160.162 390.315 189.952 390.175 219.742 377.203 219.742 364.231 219.742ZM589.716 172.44 589.716 125.137 602.706 125.137 615.696 125.137 615.696 129.59 615.696 134.043 617.838 132.163C628.702 122.626 646.599 120.621 659.66 127.478 668.368 132.05 675.885 141.636 678.196 151.116 679.368 155.922 679.587 165.442 679.183 193.885L678.815 219.743 666.143 219.743 653.471 219.743 653.334 189.719 653.197 159.695 651.845 156.944C650.259 153.715 646.013 149.501 643.008 148.171 640.32 146.982 635.745 146.26 632.609 146.529 625.597 147.131 620.316 150.85 617.283 157.324L615.943 160.185 615.806 189.964 615.669 219.743 602.694 219.743 589.718 219.743ZM940.201 180.038 940.201 140.332 928.421 140.332 916.642 140.332 916.779 134.083 916.916 127.833 928.558 127.701 940.2 127.57 940.2 108.216 940.2 88.8628 947.062 88.8628 953.925 88.8628 953.925 108.225 953.925 127.588 965.444 127.588 976.964 127.588 976.964 133.96 976.964 140.332 965.444 140.332 953.925 140.332 953.925 180.038 953.925 219.743 947.062 219.743 940.2 219.743ZM1107.35 173.665 1107.35 127.588 1114.22 127.588 1121.08 127.588 1121.09 133.592 1121.1 139.597 1122.15 138.127C1124.34 135.057 1128.8 131.183 1132.15 129.43 1136.75 127.027 1140.78 126.133 1147.07 126.124 1152.9 126.117 1156.62 126.896 1161.02 129.049 1164.11 130.563 1170.09 135.125 1170.09 135.969 1170.09 136.24 1168.14 138.477 1165.75 140.939L1161.41 145.415 1159.22 143.622C1155.34 140.447 1151.92 139.21 1146.33 138.969 1134.5 138.459 1126.29 143.823 1122.47 154.548 1121.34 157.731 1121.33 157.762 1121.18 188.738L1121.03 219.743 1114.19 219.743 1107.34 219.743ZM1198.53 180.038 1198.53 140.332 1186.76 140.332 1175 140.332 1175 133.96 1175 127.588 1186.76 127.588 1198.53 127.588 1198.53 108.225 1198.53 88.8627 1205.39 88.8627 1212.25 88.8627 1212.25 108.225 1212.25 127.588 1223.77 127.588 1235.29 127.588 1235.29 133.96 1235.29 140.332 1223.77 140.332 1212.25 140.332 1212.25 180.038 1212.25 219.743 1205.39 219.743 1198.53 219.743Z" transform="matrix(1 0 0 1.01705 952.584 1788.29)"></path> </g> </g> </g> </g> </svg> </div> <p class="max-w-sm text-sm">Elevate Your Web Development Experience With SenangStart</p> </div> <div class="flex flex-col gap-2"> <h4 class="text-lg font-semibold">Site Map</h4> <a href="#templates" class="text-sm">Templates</a> <a href="#sections" class="text-sm">Sections</a> <a href="#components" class="text-sm">Components</a> <a href="#designs" class="text-sm">Designs</a> </div> <div class="flex flex-col gap-2"> <h4 class="text-lg font-semibold">Contact Us</h4> <div> <p class="font-semibold text-blue-600">SenangStart</p> <p class="text-xs">By Bookklik Technologies</p> </div> <p class="text-sm">hello@senangstart.com</p> <p class="text-sm">Selangor, Malaysia</p> </div> <div class="flex flex-col gap-2"> <h4 class="text-lg font-semibold">Links</h4> <a href="#" class="text-sm">GitHub</a> <a href="https://senangstart.com/terms\_conditions" class="text-sm">Terms &amp; Conditions</a> <a href="https://senangstart.com/privacy\_policy" class="text-sm">Privacy Policy</a> </div> </footer> <footer class="container mx-auto mb-16 flex flex-col px-6 pt-4 lg:flex-row lg:px-16"> <div class="flex justify-center"> <a href="#" class="mr-2 flex h-8 w-8 items-center justify-center rounded-md bg-slate-200 text-sm text-slate-600"> <i class="fab fa-google"></i> </a> <a href="#" class="mr-2 flex h-8 w-8 items-center justify-center rounded-md bg-slate-200 text-sm text-slate-600"> <i class="fab fa-linkedin"></i> </a> <a href="#" class="mr-2 flex h-8 w-8 items-center justify-center rounded-md bg-slate-200 text-sm text-slate-600"> <i class="fab fa-twitter"></i> </a> <a href="#" class="mr-2 flex h-8 w-8 items-center justify-center rounded-md bg-slate-200 text-sm text-slate-600"> <i class="fab fa-facebook"></i> </a> </div> <div class="flex h-8 flex-grow items-center justify-center font-semibold lg:justify-end">2024 © SenangStart</div> <div class="flex justify-center"> <a href="#" class="flex h-8 w-8 items-center justify-center rounded-md bg-blue-600 text-sm text-white lg:ml-4"> <i class="fas fa-arrow-up"></i> </a> </div> </footer> COPY ``` ``` Elevate Your Web Development Experience With SenangStart #### Site Map [Templates](#templates) [Sections](#sections) [Components](#components) [Designs](#designs) #### Contact Us SenangStart By Bookklik Technologies hello@senangstart.com Selangor, Malaysia #### Links [GitHub](#) [Terms & Conditions](https://senangstart.com/terms_conditions) [Privacy Policy](https://senangstart.com/privacy_policy) [ ](#) [ ](#) [ ](#) [ ](#) 2024 © SenangStart [ ](#) <footer layout="container grid tw-lg:grid-cols:4" space="m-x:auto g:large p-x:medium-3x tw-lg:g:big-3x tw-lg:p-x:big-3x"> <div layout="flex col" space="g:small"> <div space="h:big max-w:\[max-content\]"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1362 222" overflow="hidden" width="100%" height="100%"> <defs> <clipPath id="clip0"> <rect x="1089" y="1870" width="1103" height="184"></rect> </clipPath> <clipPath id="clip1"> <rect x="1089" y="1870" width="1103" height="184"></rect> </clipPath> <clipPath id="clip2"> <rect x="1089" y="1870" width="1103" height="184"></rect> </clipPath> </defs> <g transform="translate(-831 -1851)"> <g> <g> <g> <path d="M197.224 319.004 195.434 321.663C186.923 335.104 183.178 350.775 184.162 366.336L184.211 366.912 184.787 366.963C200.349 367.945 216.021 364.199 229.46 355.689L232.121 353.901 230.803 355.762C228.703 358.584 226.374 361.285 223.817 363.842 208.229 379.43 187.284 386.526 166.535 385.215L165.959 385.164 165.909 384.588C164.598 363.84 171.694 342.896 187.283 327.308 189.84 324.751 192.541 322.421 195.363 320.321ZM336.452 214.672C326.364 204.584 310.007 204.584 299.918 214.672 289.829 224.761 289.829 241.118 299.918 251.206 310.007 261.295 326.364 261.295 336.452 251.206 346.541 241.118 346.541 224.761 336.452 214.672ZM385.164 165.959 385.262 167.426C387.406 216.985 370.69 267.361 335.171 306.886L332.519 309.682 336.452 360.809 232.939 379.076 260.788 351.225 255.258 347.735C245.237 340.962 235.717 333.141 226.85 324.275 217.982 315.407 210.163 305.887 203.388 295.866L199.899 290.334 172.049 318.185 190.316 214.672 241.442 218.604 244.238 215.954C283.762 180.434 334.139 163.719 383.699 165.861Z" fill-rule="evenodd" transform="matrix(1 0 0 1.00455 666.316 1685.75)"></path> </g> </g> </g> <g clip-path="url(#clip0)"> <g clip-path="url(#clip1)"> <g clip-path="url(#clip2)"> <path d="M731.381 261.175C730.977 261.077 728.991 260.735 726.969 260.408 722.257 259.645 715.741 257.522 711.396 255.334 706.537 252.887 700.346 248.062 697.25 244.309L694.594 241.089 702.686 232.996 710.778 224.904 713.359 227.386C720.447 234.201 726.3 236.994 735.216 237.817 749.098 239.098 758.913 234.704 763.42 225.191 764.885 222.1 764.967 221.607 765.128 214.901 765.315 207.153 765.492 207.453 762.235 209.983 759.86 211.828 754.261 214.581 750.988 215.513 746.864 216.688 739.393 217.432 735.302 217.075 715.463 215.347 700.707 202.67 695.323 182.73 694.23 178.678 693.814 166.43 694.604 161.526 696.315 150.905 700.771 142.424 708.497 135.086 717.554 126.482 730.399 122.228 743.138 123.614 750.927 124.461 756.571 126.557 762.63 130.853L765.693 133.025 765.693 129.079 765.693 125.133 778.458 125.133 791.223 125.133 791.045 173.784C790.849 227.402 791.001 224.69 787.718 232.89 784.699 240.43 778.367 248.145 771.419 252.749 767.071 255.631 761.086 258.228 755.399 259.702 750.875 260.875 749.155 261.055 741.184 261.192 736.196 261.28 731.784 261.269 731.38 261.171ZM754.059 191.686C763.33 187.283 768.136 177.649 766.653 166.442 764.998 153.931 755.299 146.164 742.165 146.832 729.618 147.469 721.249 155.667 720.279 168.269 719.57 177.469 723.915 186.367 731.202 190.637 735.426 193.112 738.433 193.779 744.644 193.615 749.994 193.475 750.518 193.368 754.059 191.686ZM182.616 221.392C167.103 219.703 154.681 213.71 144.175 202.844L140.538 199.083 149.296 190.315 158.054 181.546 162.002 185.636C170.519 194.461 179.471 198.184 192.116 198.162 202.785 198.14 210.082 194.896 213.373 188.706 214.903 185.829 214.933 179.327 213.428 176.067 210.79 170.338 203.524 165.96 187.023 160.16 181.901 158.36 175.706 155.949 173.256 154.804 158.044 147.69 150.951 138.032 149.8 122.866 148.443 104.993 157.731 90.4932 174.769 83.8882 181.406 81.3149 186.964 80.3787 195.847 80.3376 200.428 80.3168 205.219 80.5751 207.366 80.9596 218.6 82.971 230.26 88.8665 237.502 96.1963L240.433 99.1627 231.629 107.977 222.825 116.791 219.875 113.944C212.448 106.777 205.829 104.011 195.847 103.903 185.629 103.793 178.57 107.322 176.749 113.453 175.797 116.661 175.798 118.413 176.757 121.641 178.59 127.816 184.09 131.337 201.729 137.632 219.81 144.085 227.011 148.117 232.649 154.947 237.276 160.55 239.63 166.136 240.716 174.086 241.89 182.672 240.662 191.312 237.255 198.415 231.818 209.757 221.255 217.09 205.798 220.252 200.843 221.266 187.487 221.922 182.611 221.392ZM295.849 221.146C274.12 218.432 256.819 202.41 253.199 181.648 251.708 173.099 252.514 163.052 255.327 155.101 260.287 141.085 273.881 128.714 288.512 124.903 299.123 122.14 311.368 122.843 321.104 126.775 334.794 132.305 345.114 145.29 347.846 160.426 348.656 164.911 348.737 174.187 348.004 178.4L347.463 181.504 312.902 181.504 278.341 181.504 278.675 182.836C279.499 186.122 281.732 189.764 284.782 192.802 290.256 198.253 296.48 200.42 305.407 199.982 313.551 199.582 319.664 197.251 324.893 192.549L327.295 190.39 334.786 197.893 342.277 205.395 339.552 208.121C329.282 218.391 312.893 223.275 295.848 221.146ZM323.752 161.038C323.071 157.991 320.088 152.532 317.918 150.361 309.717 142.16 293.236 142.632 284.552 151.316 282.083 153.785 278.447 160.005 278.447 161.76 278.447 162.259 283.066 162.386 301.25 162.386L324.053 162.386ZM508.836 221.406C499.776 219.732 495.476 218.109 489.42 214.08 479.803 207.681 472.66 196.663 470.05 184.2 469.093 179.63 468.743 169.154 469.392 164.483 472.161 144.537 485.49 129.05 503.749 124.564 509.694 123.104 519.109 123.116 524.767 124.597 529.702 125.885 534.855 128.458 538.698 131.555L541.679 133.956 541.679 129.547 541.679 125.137 554.423 125.137 567.168 125.137 567.168 172.44 567.168 219.743 554.423 219.743 541.679 219.743 541.679 215.309 541.679 210.875 538.615 213.356C534.89 216.373 528.822 219.441 524.522 220.481 521.367 221.244 511.199 221.847 508.836 221.411ZM523.541 197.654C530.456 196.552 536.707 192.097 539.825 186.05 542.327 181.197 542.904 178.593 542.897 172.19 542.888 165.548 541.824 161.733 538.653 156.985 536.236 153.365 533.575 151.142 529.15 149.047 525.826 147.473 525.594 147.436 519.129 147.436L512.512 147.436 508.715 149.249C502.665 152.138 498.297 157.252 496.24 163.857 495.171 167.286 495.056 176.752 496.038 180.278 499.528 192.799 510.504 199.733 523.541 197.654ZM849.026 221.148C836.423 219.694 825.064 213.961 815.381 204.166 812.856 201.613 810.791 199.381 810.791 199.205 810.791 199.03 812.996 196.69 815.691 194.005L820.591 189.123 821.424 190.338C823.075 192.746 828.744 198.323 831.624 200.372 835.637 203.227 838.872 204.785 843.973 206.319 849.635 208.021 861.811 208.519 867.636 207.287 875.84 205.55 882.887 200.573 885.553 194.633 888.046 189.079 887.697 180.588 884.742 174.897 881.195 168.068 874.37 163.782 856.624 157.241 840.141 151.165 833.697 147.654 828.188 141.743 822.277 135.401 819.916 128.767 819.923 118.515 819.928 109.26 821.914 103.054 826.758 97.1484 831.284 91.6314 838.932 86.9522 846.821 84.8748 851.806 83.562 863.335 83.0804 869.211 83.9396 880.006 85.518 889.417 90.2921 897.422 98.2505L901.01 101.818 896.101 106.728 891.192 111.637 887.633 108.146C881.325 101.957 874.898 98.4598 867.449 97.1627 862.519 96.3041 852.5 96.8103 848.883 98.1007 842.183 100.491 838.286 103.717 835.87 108.87 834.685 111.399 834.566 112.188 834.566 117.545 834.566 123.218 834.632 123.561 836.178 126.712 839.395 133.245 846.047 137.61 861.281 143.184 877.244 149.024 880.47 150.46 886.036 154.204 889.867 156.781 894.927 161.976 896.977 165.437 901.907 173.76 903.077 187.089 899.792 197.488 894.354 214.702 874.274 224.06 849.026 221.148ZM1025.27 221.191C1008.71 218.591 994.87 206.769 989.287 190.45 986.484 182.258 986.033 169.75 988.223 160.942 989.457 155.975 992.805 148.718 995.775 144.572 998.27 141.088 1003.6 135.845 1007.03 133.513 1010.29 131.288 1016.73 128.385 1020.84 127.282 1025.6 126.006 1038.97 125.967 1043.63 127.217 1049.44 128.774 1055.53 132.225 1059.77 136.363 1061.87 138.412 1064.05 140.749 1064.62 141.558L1065.66 143.029 1065.67 135.308 1065.68 127.588 1072.54 127.588 1079.41 127.588 1079.41 173.666 1079.41 219.743 1072.54 219.743 1065.68 219.743 1065.68 212.101 1065.68 204.459 1063.8 206.835C1058.66 213.343 1050.56 218.69 1043.13 220.487 1039.25 221.425 1029.25 221.819 1025.26 221.192ZM1043.34 207.5C1048.57 206.162 1052.61 203.885 1056.41 200.135 1063.41 193.239 1066.27 185.474 1066.26 173.42 1066.26 166.235 1065.32 161.654 1062.76 156.284 1059.88 150.254 1054.57 144.711 1049.13 142.045 1039.43 137.296 1025.67 137.946 1016.75 143.576 1010.41 147.577 1005.13 154.301 1002.71 161.459 1000.87 166.884 1000.41 176.377 1001.7 182.336 1004.34 194.549 1013.66 204.351 1025.6 207.479 1030.55 208.776 1038.31 208.785 1043.34 207.501ZM364.23 172.44 364.23 125.137 377.22 125.137 390.21 125.137 390.21 129.546 390.21 133.956 393.274 131.479C399.893 126.128 407.465 123.585 416.925 123.535 425.537 123.49 430.723 124.988 437.429 129.459 443.368 133.419 448.558 139.879 451.347 146.784 453.731 152.687 453.899 155.163 453.917 184.743 453.927 199.867 453.792 213.93 453.617 215.992L453.3 219.743 440.627 219.743 427.954 219.743 427.954 190.666C427.954 158.729 427.965 158.921 424.97 154.392 423.042 151.48 418.769 148.387 415.23 147.339 411.305 146.177 405.378 146.321 401.853 147.662 397.944 149.15 394.084 152.792 392.06 156.903L390.455 160.162 390.315 189.952 390.175 219.742 377.203 219.742 364.231 219.742ZM589.716 172.44 589.716 125.137 602.706 125.137 615.696 125.137 615.696 129.59 615.696 134.043 617.838 132.163C628.702 122.626 646.599 120.621 659.66 127.478 668.368 132.05 675.885 141.636 678.196 151.116 679.368 155.922 679.587 165.442 679.183 193.885L678.815 219.743 666.143 219.743 653.471 219.743 653.334 189.719 653.197 159.695 651.845 156.944C650.259 153.715 646.013 149.501 643.008 148.171 640.32 146.982 635.745 146.26 632.609 146.529 625.597 147.131 620.316 150.85 617.283 157.324L615.943 160.185 615.806 189.964 615.669 219.743 602.694 219.743 589.718 219.743ZM940.201 180.038 940.201 140.332 928.421 140.332 916.642 140.332 916.779 134.083 916.916 127.833 928.558 127.701 940.2 127.57 940.2 108.216 940.2 88.8628 947.062 88.8628 953.925 88.8628 953.925 108.225 953.925 127.588 965.444 127.588 976.964 127.588 976.964 133.96 976.964 140.332 965.444 140.332 953.925 140.332 953.925 180.038 953.925 219.743 947.062 219.743 940.2 219.743ZM1107.35 173.665 1107.35 127.588 1114.22 127.588 1121.08 127.588 1121.09 133.592 1121.1 139.597 1122.15 138.127C1124.34 135.057 1128.8 131.183 1132.15 129.43 1136.75 127.027 1140.78 126.133 1147.07 126.124 1152.9 126.117 1156.62 126.896 1161.02 129.049 1164.11 130.563 1170.09 135.125 1170.09 135.969 1170.09 136.24 1168.14 138.477 1165.75 140.939L1161.41 145.415 1159.22 143.622C1155.34 140.447 1151.92 139.21 1146.33 138.969 1134.5 138.459 1126.29 143.823 1122.47 154.548 1121.34 157.731 1121.33 157.762 1121.18 188.738L1121.03 219.743 1114.19 219.743 1107.34 219.743ZM1198.53 180.038 1198.53 140.332 1186.76 140.332 1175 140.332 1175 133.96 1175 127.588 1186.76 127.588 1198.53 127.588 1198.53 108.225 1198.53 88.8627 1205.39 88.8627 1212.25 88.8627 1212.25 108.225 1212.25 127.588 1223.77 127.588 1235.29 127.588 1235.29 133.96 1235.29 140.332 1223.77 140.332 1212.25 140.332 1212.25 180.038 1212.25 219.743 1205.39 219.743 1198.53 219.743Z" transform="matrix(1 0 0 1.01705 952.584 1788.29)"></path> </g> </g> </g> </g> </svg> </div> <p space="max-w:\[sm\]" visual="text-size:small">Elevate Your Web Development Experience With SenangStart</p> </div> <div layout="flex col" space="g:small"> <h4 visual="text-size:large font:tw-semibold">Site Map</h4> <a href="#templates" visual="text-size:small">Templates</a> <a href="#sections" visual="text-size:small">Sections</a> <a href="#components" visual="text-size:small">Components</a> <a href="#designs" visual="text-size:small">Designs</a> </div> <div layout="flex col" space="g:small"> <h4 visual="text-size:large font:tw-semibold">Contact Us</h4> <div> <p visual="font:tw-semibold text:blue-600">SenangStart</p> <p visual="text-size:mini">By Bookklik Technologies</p> </div> <p visual="text-size:small">hello@senangstart.com</p> <p visual="text-size:small">Selangor, Malaysia</p> </div> <div layout="flex col" space="g:small"> <h4 visual="text-size:large font:tw-semibold">Links</h4> <a href="#" visual="text-size:small">GitHub</a> <a href="https://senangstart.com/terms\_conditions" visual="text-size:small">Terms &amp; Conditions</a> <a href="https://senangstart.com/privacy\_policy" visual="text-size:small">Privacy Policy</a> </div> </footer> <footer layout="container flex col tw-lg:row" space="m-x:auto m-b:big-3x p-x:medium-3x p-t:medium tw-lg:p-x:big-3x"> <div layout="flex justify:center"> <a href="#" layout="flex items:center justify:center" space="m-r:small h:large w:large" visual="rounded:small bg:slate-200 text-size:small text:slate-600"> <i class="fab fa-google"></i> </a> <a href="#" layout="flex items:center justify:center" space="m-r:small h:large w:large" visual="rounded:small bg:slate-200 text-size:small text:slate-600"> <i class="fab fa-linkedin"></i> </a> <a href="#" layout="flex items:center justify:center" space="m-r:small h:large w:large" visual="rounded:small bg:slate-200 text-size:small text:slate-600"> <i class="fab fa-twitter"></i> </a> <a href="#" layout="flex items:center justify:center" space="m-r:small h:large w:large" visual="rounded:small bg:slate-200 text-size:small text:slate-600"> <i class="fab fa-facebook"></i> </a> </div> <div layout="flex grow items:center justify:center tw-lg:justify:end" space="h:large" visual="font:tw-semibold">2024 © SenangStart</div> <div layout="flex justify:center"> <a href="#" layout="flex items:center justify:center" space="h:large w:large tw-lg:m-l:medium" visual="rounded:small bg:blue-600 text-size:small text:white"> <i class="fas fa-arrow-up"></i> </a> </div> </footer> COPY ``` ``` #### [\#](https://senangstart.com/sections/footer-1/llms.txt)Simple Footer Social footer Offers a concise footer with social media icons, copyright information, and an optional scroll-to-top link. TailwindCSS SenangStart CSS [ ](#) [ ](#) [ ](#) [ ](#) 2024 © SenangStart [ ](#) <footer class="flex flex-col lg:flex-row container mx-auto pt-4 px-6 lg:px-16 mb-16"> <div class="flex justify-center"> <a href="#" class="bg-slate-200 rounded-md flex items-center justify-center w-8 h-8 text-slate-600 text-sm mr-2"> <i class="fab fa-google"></i> </a> <a href="#" class="bg-slate-200 rounded-md flex items-center justify-center w-8 h-8 text-slate-600 text-sm mr-2"> <i class="fab fa-linkedin"></i> </a> <a href="#" class="bg-slate-200 rounded-md flex items-center justify-center w-8 h-8 text-slate-600 text-sm mr-2"> <i class="fab fa-twitter"></i> </a> <a href="#" class="bg-slate-200 rounded-md flex items-center justify-center w-8 h-8 text-slate-600 text-sm mr-2"> <i class="fab fa-facebook"></i> </a> </div> <div class="flex-grow h-8 flex items-center justify-center lg:justify-end font-semibold"> 2024 © SenangStart </div> <div class="flex justify-center"> <a href="#" class="flex items-center justify-center w-8 h-8 text-sm lg:ml-4 bg-blue-600 text-white rounded-md"> <i class="fas fa-arrow-up"></i> </a> </div> </footer> COPY ``` ``` [ ](#) [ ](#) [ ](#) [ ](#) 2024 © SenangStart [ ](#) <footer layout="flex col tw-lg:row container" space="m-x:auto p-t:medium p-x:medium-3x tw-lg:p-x:big-3x m-b:big-3x"> <div layout="flex justify:center"> <a href="#" layout="flex items:center justify:center" space="w:large h:large m-r:small" visual="bg:slate-200 rounded:small text:slate-600 text-size:small"> <i class="fab fa-google"></i> </a> <a href="#" layout="flex items:center justify:center" space="w:large h:large m-r:small" visual="bg:slate-200 rounded:small text:slate-600 text-size:small"> <i class="fab fa-linkedin"></i> </a> <a href="#" layout="flex items:center justify:center" space="w:large h:large m-r:small" visual="bg:slate-200 rounded:small text:slate-600 text-size:small"> <i class="fab fa-twitter"></i> </a> <a href="#" layout="flex items:center justify:center" space="w:large h:large m-r:small" visual="bg:slate-200 rounded:small text:slate-600 text-size:small"> <i class="fab fa-facebook"></i> </a> </div> <div layout="grow flex items:center justify:center tw-lg:justify:end" space="h:large" visual="font:tw-semibold"> 2024 © SenangStart </div> <div layout="flex justify:center"> <a href="#" layout="flex items:center justify:center" space="w:large h:large tw-lg:m-l:medium" visual="text-size:small bg:blue-600 text:white rounded:small"> <i class="fas fa-arrow-up"></i> </a> </div> </footer> COPY ``` ``` #### [\#](https://senangstart.com/sections/story-4/llms.txt)Founder's Perspective story Shares a personal message or story from the company's founder, often with an image and an inspiring quote. TailwindCSS SenangStart CSS ![Our Founder](https://placehold.co/600x800/3b82f6/ffffff?text=Founder) From the FounderCrafting a Future, Together --------------------------- > "Our journey began with a vision to make a tangible difference. Every day, we strive to innovate, inspire, and build solutions that not only meet the needs of today but also anticipate the challenges of tomorrow. It's a privilege to lead such a dedicated team, and I'm incredibly proud of what we've achieved and excited for what's next." Jane M. Doe Founder & CEO [ Connect with Jane ](#contact-founder) <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="bg-neutral-100 rounded-xl shadow-xl overflow-hidden"> <div class="grid grid-cols-1 lg:grid-cols-5"> <div class="lg:col-span-2"> <img src="https://placehold.co/600x800/3b82f6/ffffff?text=Founder" alt="Our Founder" class="w-full h-64 lg:h-full object-cover object-top"> </div> <div class="lg:col-span-3 p-8 lg:p-12 flex flex-col justify-center"> <span class="inline-block py-1 px-3 rounded-full text-sm font-semibold text-blue-600 bg-blue-100 uppercase mb-4 max-w-max">From the Founder</span> <h2 class="text-3xl lg:text-4xl font-bold mb-6">Crafting a Future, Together</h2> <blockquote class="text-lg lg:text-xl text-neutral-700 italic border-l-4 border-blue-500 pl-6 mb-6"> "Our journey began with a vision to make a tangible difference. Every day, we strive to innovate, inspire, and build solutions that not only meet the needs of today but also anticipate the challenges of tomorrow. It's a privilege to lead such a dedicated team, and I'm incredibly proud of what we've achieved and excited for what's next." </blockquote> <div> <p class="text-xl font-semibold text-neutral-800">Jane M. Doe</p> <p class="text-neutral-600">Founder & CEO</p> </div> <a href="#contact-founder" class="mt-8 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-lg shadow-sm text-white bg-blue-600 hover:bg-blue-700 max-w-max"> Connect with Jane <i class="fas fa-arrow-right ml-2"></i> </a> </div> </div> </div> </section> COPY ```
Our Founder
From the Founder

Crafting a Future, Together

"Our journey began with a vision to make a tangible difference. Every day, we strive to innovate, inspire, and build solutions that not only meet the needs of today but also anticipate the challenges of tomorrow. It's a privilege to lead such a dedicated team, and I'm incredibly proud of what we've achieved and excited for what's next."

Jane M. Doe

Founder & CEO

Connect with Jane
``` ![Our Founder](https://placehold.co/600x800/3b82f6/ffffff?text=Founder) From the FounderCrafting a Future, Together --------------------------- > "Our journey began with a vision to make a tangible difference. Every day, we strive to innovate, inspire, and build solutions that not only meet the needs of today but also anticipate the challenges of tomorrow. It's a privilege to lead such a dedicated team, and I'm incredibly proud of what we've achieved and excited for what's next." Jane M. Doe Founder & CEO [ Connect with Jane ](#contact-founder) <section 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 layout="overflow:hidden" visual="bg:neutral-100 rounded:medium shadow:giant"> <div layout="grid grid-cols:1 tw-lg:grid-cols:5"> <div layout="tw-lg:col-span:2"> <img src="https://placehold.co/600x800/3b82f6/ffffff?text=Founder" alt="Our Founder" layout="object:cover" space="w:\[100%\] h:vast-7x tw-lg:h:\[100%\]" class="object-top"> </div> <div layout="tw-lg:col-span:3 flex col justify:center" space="p:large tw-lg:p:big"> <span layout="inline" space="p-y:tiny p-x:small-3x m-b:medium max-w:\[max-content\]" visual="rounded:round text-size:small font:tw-semibold text:blue-600 bg:blue-100 uppercase">From the Founder</span> <h2 space="m-b:medium-3x" visual="text-size:grand tw-lg:text-size:giant font:tw-bold">Crafting a Future, Together</h2> <blockquote space="p-l:medium-3x m-b:medium-3x" visual="text-size:large tw-lg:text-size:big text:neutral-700 italic border-l-w:tiny border:blue-500"> "Our journey began with a vision to make a tangible difference. Every day, we strive to innovate, inspire, and build solutions that not only meet the needs of today but also anticipate the challenges of tomorrow. It's a privilege to lead such a dedicated team, and I'm incredibly proud of what we've achieved and excited for what's next." </blockquote> <div> <p visual="text-size:big font:tw-semibold text:neutral-800">Jane M. Doe</p> <p visual="text:neutral-600">Founder & CEO</p> </div> <a href="#contact-founder" layout="inline-flex items:center" space="m-t:large p-x:medium-3x p-y:small-3x max-w:\[max-content\]" visual="border-w:thin text-size:base font:tw-medium rounded:medium shadow:small text:white bg:blue-600 hover:bg:blue-700" class="border-transparent"> Connect with Jane <i space="m-l:small" class="fas fa-arrow-right"></i> </a> </div> </div> </div> </section> COPY ```
Our Founder
From the Founder

Crafting a Future, Together

"Our journey began with a vision to make a tangible difference. Every day, we strive to innovate, inspire, and build solutions that not only meet the needs of today but also anticipate the challenges of tomorrow. It's a privilege to lead such a dedicated team, and I'm incredibly proud of what we've achieved and excited for what's next."

Jane M. Doe

Founder & CEO

Connect with Jane
``` #### [\#](https://senangstart.com/sections/story-3/llms.txt)Guiding Core Values story Showcases a company's core values using descriptive cards, each typically featuring an icon and explanation. TailwindCSS SenangStart CSS Our EthosThe Values That Drive Us ------------------------ These core principles are the bedrock of our culture, guiding our decisions, actions, and the way we serve our community. ### Innovation We constantly seek new ways to solve problems and improve our offerings. Embracing creativity and forward-thinking is at the heart of what we do. ### Customer-Centricity Our customers are our top priority. We listen, understand, and strive to exceed their expectations with every interaction and solution we provide. ### Integrity We operate with honesty, transparency, and accountability. Trust is the foundation of our relationships with clients, partners, and our team. <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="text-center mb-12 lg:mb-16"> <span class="inline-block py-1 px-3 rounded-full text-sm font-semibold text-blue-600 bg-blue-100 uppercase mb-4">Our Ethos</span> <h2 class="text-3xl lg:text-5xl font-bold mb-4">The Values That Drive Us</h2> <p class="text-lg lg:text-xl text-neutral-700 max-w-3xl mx-auto">These core principles are the bedrock of our culture, guiding our decisions, actions, and the way we serve our community.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Value 1: Innovation --> <div class="bg-neutral-50 p-8 rounded-xl shadow-md hover:shadow-xl hover:border-blue-500 border-2 border-transparent transition-all duration-300"> <div class="flex items-center justify-center w-16 h-16 mb-6 rounded-full bg-blue-600 text-white text-2xl mx-auto"> <i class="fas fa-lightbulb"></i> </div> <h3 class="text-2xl font-bold mb-3 text-center">Innovation</h3> <p class="text-neutral-600 text-center">We constantly seek new ways to solve problems and improve our offerings. Embracing creativity and forward-thinking is at the heart of what we do.</p> </div> <!-- Value 2: Customer-Centricity --> <div class="bg-neutral-50 p-8 rounded-xl shadow-md hover:shadow-xl hover:border-blue-500 border-2 border-transparent transition-all duration-300"> <div class="flex items-center justify-center w-16 h-16 mb-6 rounded-full bg-blue-600 text-white text-2xl mx-auto"> <i class="fas fa-users"></i> </div> <h3 class="text-2xl font-bold mb-3 text-center">Customer-Centricity</h3> <p class="text-neutral-600 text-center">Our customers are our top priority. We listen, understand, and strive to exceed their expectations with every interaction and solution we provide.</p> </div> <!-- Value 3: Integrity --> <div class="bg-neutral-50 p-8 rounded-xl shadow-md hover:shadow-xl hover:border-blue-500 border-2 border-transparent transition-all duration-300"> <div class="flex items-center justify-center w-16 h-16 mb-6 rounded-full bg-blue-600 text-white text-2xl mx-auto"> <i class="fas fa-shield-alt"></i> </div> <h3 class="text-2xl font-bold mb-3 text-center">Integrity</h3> <p class="text-neutral-600 text-center">We operate with honesty, transparency, and accountability. Trust is the foundation of our relationships with clients, partners, and our team.</p> </div> </div> </section> COPY ```
Our Ethos

The Values That Drive Us

These core principles are the bedrock of our culture, guiding our decisions, actions, and the way we serve our community.

Innovation

We constantly seek new ways to solve problems and improve our offerings. Embracing creativity and forward-thinking is at the heart of what we do.

Customer-Centricity

Our customers are our top priority. We listen, understand, and strive to exceed their expectations with every interaction and solution we provide.

Integrity

We operate with honesty, transparency, and accountability. Trust is the foundation of our relationships with clients, partners, and our team.

``` Our EthosThe Values That Drive Us ------------------------ These core principles are the bedrock of our culture, guiding our decisions, actions, and the way we serve our community. ### Innovation We constantly seek new ways to solve problems and improve our offerings. Embracing creativity and forward-thinking is at the heart of what we do. ### Customer-Centricity Our customers are our top priority. We listen, understand, and strive to exceed their expectations with every interaction and solution we provide. ### Integrity We operate with honesty, transparency, and accountability. Trust is the foundation of our relationships with clients, partners, and our team. <section 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 space="m-b:big tw-lg:m-b:big-3x" visual="text:center"> <span layout="inline" space="p-y:tiny p-x:small-3x m-b:medium" visual="rounded:round text-size:small font:tw-semibold text:blue-600 bg:blue-100 uppercase">Our Ethos</span> <h2 space="m-b:medium" visual="text-size:grand tw-lg:text-size:mount font:tw-bold">The Values That Drive Us</h2> <p space="max-w:\[3xl\] m-x:auto" visual="text-size:large tw-lg:text-size:big text:neutral-700">These core principles are the bedrock of our culture, guiding our decisions, actions, and the way we serve our community.</p> </div> <div layout="grid grid-cols:1 tw-md:grid-cols:2 tw-lg:grid-cols:3" space="g:large"> <!-- Value 1: Innovation --> <div space="p:large" visual="bg:neutral-50 rounded:medium shadow:medium hover:shadow:giant hover:border:blue-500 border-w:regular transition:all duration:slow" class="border-transparent"> <div layout="flex items:center justify:center" space="w:big-3x h:big-3x m-b:medium-3x m-x:auto" visual="rounded:round bg:blue-600 text:white text-size:huge"> <i class="fas fa-lightbulb"></i> </div> <h3 space="m-b:small-3x" visual="text-size:huge font:tw-bold text:center">Innovation</h3> <p visual="text:neutral-600 text:center">We constantly seek new ways to solve problems and improve our offerings. Embracing creativity and forward-thinking is at the heart of what we do.</p> </div> <!-- Value 2: Customer-Centricity --> <div space="p:large" visual="bg:neutral-50 rounded:medium shadow:medium hover:shadow:giant hover:border:blue-500 border-w:regular transition:all duration:slow" class="border-transparent"> <div layout="flex items:center justify:center" space="w:big-3x h:big-3x m-b:medium-3x m-x:auto" visual="rounded:round bg:blue-600 text:white text-size:huge"> <i class="fas fa-users"></i> </div> <h3 space="m-b:small-3x" visual="text-size:huge font:tw-bold text:center">Customer-Centricity</h3> <p visual="text:neutral-600 text:center">Our customers are our top priority. We listen, understand, and strive to exceed their expectations with every interaction and solution we provide.</p> </div> <!-- Value 3: Integrity --> <div space="p:large" visual="bg:neutral-50 rounded:medium shadow:medium hover:shadow:giant hover:border:blue-500 border-w:regular transition:all duration:slow" class="border-transparent"> <div layout="flex items:center justify:center" space="w:big-3x h:big-3x m-b:medium-3x m-x:auto" visual="rounded:round bg:blue-600 text:white text-size:huge"> <i class="fas fa-shield-alt"></i> </div> <h3 space="m-b:small-3x" visual="text-size:huge font:tw-bold text:center">Integrity</h3> <p visual="text:neutral-600 text:center">We operate with honesty, transparency, and accountability. Trust is the foundation of our relationships with clients, partners, and our team.</p> </div> </div> </section> COPY ```
Our Ethos

The Values That Drive Us

These core principles are the bedrock of our culture, guiding our decisions, actions, and the way we serve our community.

Innovation

We constantly seek new ways to solve problems and improve our offerings. Embracing creativity and forward-thinking is at the heart of what we do.

Customer-Centricity

Our customers are our top priority. We listen, understand, and strive to exceed their expectations with every interaction and solution we provide.

Integrity

We operate with honesty, transparency, and accountability. Trust is the foundation of our relationships with clients, partners, and our team.

``` #### [\#](https://senangstart.com/sections/story-2/llms.txt)Our Journey Timeline story Chronicles a company's history or significant milestones using an engaging visual timeline with text and images. TailwindCSS SenangStart CSS Our HistoryTracing Our Path: A Journey of Growth ------------------------------------- From a humble beginning to where we stand today, every step has been a testament to our dedication and vision. 2018 - The Spark### Our Humble Beginnings It all started with a simple idea and a passionate team. We laid the foundation for what would become a leading innovator in the industry, focusing on solving key customer pain points. ![Our Beginnings](https://placehold.co/600x400/e2e8f0/334155?text=Early+Days) 2020 - First Milestone### Launching Our Flagship Product After months of hard work and dedication, we successfully launched our first major product, receiving accolades for its innovation and user-centric design. This marked a new chapter in our growth. ![Product Launch](https://placehold.co/600x400/dbeafe/1e40af?text=Product+Launch) 2022 - Expanding Horizons### Global Reach & Team Growth Our commitment to excellence fueled our expansion into new markets. Our team grew, bringing diverse talents and perspectives that enriched our culture and capabilities. ![Global Expansion](https://placehold.co/600x400/ccfbf1/115e59?text=Expansion) Today & Beyond - The Vision### Innovating for Tomorrow We continue to push boundaries, driven by our mission to create impactful solutions. Our journey is ongoing, and we're excited for what the future holds as we innovate for a better tomorrow. ![Future Vision](https://placehold.co/600x400/e0f2fe/075985?text=Future+Vision) <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="text-center mb-12 lg:mb-16"> <span class="inline-block py-1 px-3 rounded-full text-sm font-semibold text-blue-600 bg-blue-100 uppercase mb-4">Our History</span> <h2 class="text-3xl lg:text-5xl font-bold mb-4">Tracing Our Path: A Journey of Growth</h2> <p class="text-lg lg:text-xl text-neutral-700 max-w-3xl mx-auto">From a humble beginning to where we stand today, every step has been a testament to our dedication and vision.</p> </div> <div class="relative"> <!-- Timeline Line for larger screens --> <div class="hidden lg:block absolute top-0 bottom-0 left-1/2 w-0.5 bg-neutral-200 transform -translate-x-1/2"></div> <!-- Timeline Item 1 --> <div class="mb-12 lg:mb-16 flex flex-col lg:flex-row items-center"> <div class="lg:w-1/2 lg:pr-8 order-2 lg:order-1"> <div class="bg-white p-6 rounded-xl shadow-lg lg:ml-auto lg:max-w-md relative z-10 mt-6 lg:mt-0"> <span class="block text-sm font-semibold text-blue-600 mb-1">2018 - The Spark</span> <h3 class="text-2xl font-bold mb-3">Our Humble Beginnings</h3> <p class="text-neutral-600">It all started with a simple idea and a passionate team. We laid the foundation for what would become a leading innovator in the industry, focusing on solving key customer pain points.</p> </div> </div> <div class="lg:w-1/2 lg:pl-8 order-1 lg:order-2"> <img src="https://placehold.co/600x400/e2e8f0/334155?text=Early+Days" alt="Our Beginnings" class="rounded-xl shadow-lg w-full lg:max-w-md mx-auto"> </div> </div> <!-- Timeline Item 2 --> <div class="mb-12 lg:mb-16 flex flex-col lg:flex-row-reverse items-center"> <div class="lg:w-1/2 lg:pl-8 order-2 lg:order-1"> <div class="bg-white p-6 rounded-xl shadow-lg lg:mr-auto lg:max-w-md relative z-10 mt-6 lg:mt-0"> <span class="block text-sm font-semibold text-blue-600 mb-1">2020 - First Milestone</span> <h3 class="text-2xl font-bold mb-3">Launching Our Flagship Product</h3> <p class="text-neutral-600">After months of hard work and dedication, we successfully launched our first major product, receiving accolades for its innovation and user-centric design. This marked a new chapter in our growth.</p> </div> </div> <div class="lg:w-1/2 lg:pr-8 order-1 lg:order-2"> <img src="https://placehold.co/600x400/dbeafe/1e40af?text=Product+Launch" alt="Product Launch" class="rounded-xl shadow-lg w-full lg:max-w-md mx-auto"> </div> </div> <!-- Timeline Item 3 --> <div class="mb-12 lg:mb-16 flex flex-col lg:flex-row items-center"> <div class="lg:w-1/2 lg:pr-8 order-2 lg:order-1"> <div class="bg-white p-6 rounded-xl shadow-lg lg:ml-auto lg:max-w-md relative z-10 mt-6 lg:mt-0"> <span class="block text-sm font-semibold text-blue-600 mb-1">2022 - Expanding Horizons</span> <h3 class="text-2xl font-bold mb-3">Global Reach & Team Growth</h3> <p class="text-neutral-600">Our commitment to excellence fueled our expansion into new markets. Our team grew, bringing diverse talents and perspectives that enriched our culture and capabilities.</p> </div> </div> <div class="lg:w-1/2 lg:pl-8 order-1 lg:order-2"> <img src="https://placehold.co/600x400/ccfbf1/115e59?text=Expansion" alt="Global Expansion" class="rounded-xl shadow-lg w-full lg:max-w-md mx-auto"> </div> </div> <!-- Timeline Item 4 (Future) --> <div class="flex flex-col lg:flex-row-reverse items-center"> <div class="lg:w-1/2 lg:pl-8 order-2 lg:order-1"> <div class="bg-blue-600 text-white p-6 rounded-xl shadow-lg lg:mr-auto lg:max-w-md relative z-10 mt-6 lg:mt-0"> <span class="block text-sm font-semibold text-blue-200 mb-1">Today & Beyond - The Vision</span> <h3 class="text-2xl font-bold mb-3">Innovating for Tomorrow</h3> <p class="text-blue-100">We continue to push boundaries, driven by our mission to create impactful solutions. Our journey is ongoing, and we're excited for what the future holds as we innovate for a better tomorrow.</p> </div> </div> <div class="lg:w-1/2 lg:pr-8 order-1 lg:order-2"> <img src="https://placehold.co/600x400/e0f2fe/075985?text=Future+Vision" alt="Future Vision" class="rounded-xl shadow-lg w-full lg:max-w-md mx-auto"> </div> </div> </div> </section> COPY ```
Our History

Tracing Our Path: A Journey of Growth

From a humble beginning to where we stand today, every step has been a testament to our dedication and vision.

2018 - The Spark

Our Humble Beginnings

It all started with a simple idea and a passionate team. We laid the foundation for what would become a leading innovator in the industry, focusing on solving key customer pain points.

Our Beginnings
2020 - First Milestone

Launching Our Flagship Product

After months of hard work and dedication, we successfully launched our first major product, receiving accolades for its innovation and user-centric design. This marked a new chapter in our growth.

Product Launch
2022 - Expanding Horizons

Global Reach & Team Growth

Our commitment to excellence fueled our expansion into new markets. Our team grew, bringing diverse talents and perspectives that enriched our culture and capabilities.

Global Expansion
Today & Beyond - The Vision

Innovating for Tomorrow

We continue to push boundaries, driven by our mission to create impactful solutions. Our journey is ongoing, and we're excited for what the future holds as we innovate for a better tomorrow.

Future Vision
``` Our HistoryTracing Our Path: A Journey of Growth ------------------------------------- From a humble beginning to where we stand today, every step has been a testament to our dedication and vision. 2018 - The Spark### Our Humble Beginnings It all started with a simple idea and a passionate team. We laid the foundation for what would become a leading innovator in the industry, focusing on solving key customer pain points. ![Our Beginnings](https://placehold.co/600x400/e2e8f0/334155?text=Early+Days) 2020 - First Milestone### Launching Our Flagship Product After months of hard work and dedication, we successfully launched our first major product, receiving accolades for its innovation and user-centric design. This marked a new chapter in our growth. ![Product Launch](https://placehold.co/600x400/dbeafe/1e40af?text=Product+Launch) 2022 - Expanding Horizons### Global Reach & Team Growth Our commitment to excellence fueled our expansion into new markets. Our team grew, bringing diverse talents and perspectives that enriched our culture and capabilities. ![Global Expansion](https://placehold.co/600x400/ccfbf1/115e59?text=Expansion) Today & Beyond - The Vision### Innovating for Tomorrow We continue to push boundaries, driven by our mission to create impactful solutions. Our journey is ongoing, and we're excited for what the future holds as we innovate for a better tomorrow. ![Future Vision](https://placehold.co/600x400/e0f2fe/075985?text=Future+Vision) <section 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 space="m-b:big tw-lg:m-b:big-3x" visual="text:center"> <span layout="inline" space="p-y:tiny p-x:small-3x m-b:medium" visual="rounded:round text-size:small font:tw-semibold text:blue-600 bg:blue-100 uppercase">Our History</span> <h2 space="m-b:medium" visual="text-size:grand tw-lg:text-size:mount font:tw-bold">Tracing Our Path: A Journey of Growth</h2> <p space="max-w:\[3xl\] m-x:auto" visual="text-size:large tw-lg:text-size:big text:neutral-700">From a humble beginning to where we stand today, every step has been a testament to our dedication and vision.</p> </div> <div layout="relative"> <!-- Timeline Line for larger screens --> <div layout="hidden tw-lg:block absolute top:none bottom:none" space="w:regular" visual="bg:neutral-200" class="left-1/2 transform -translate-x-1/2"></div> <!-- Timeline Item 1 --> <div layout="flex col tw-lg:row items:center" space="m-b:big tw-lg:m-b:big-3x"> <div layout="order:2 tw-lg:order:1" space="tw-lg:w:\[1/2\] tw-lg:p-r:large"> <div layout="relative" space="p:medium-3x tw-lg:m-l:auto tw-lg:max-w:\[md\] m-t:medium-3x tw-lg:m-t:none" visual="bg:white rounded:medium shadow:big" class="z-10"> <span layout="block" space="m-b:tiny" visual="text-size:small font:tw-semibold text:blue-600">2018 - The Spark</span> <h3 space="m-b:small-3x" visual="text-size:huge font:tw-bold">Our Humble Beginnings</h3> <p visual="text:neutral-600">It all started with a simple idea and a passionate team. We laid the foundation for what would become a leading innovator in the industry, focusing on solving key customer pain points.</p> </div> </div> <div layout="order:1 tw-lg:order:2" space="tw-lg:w:\[1/2\] tw-lg:p-l:large"> <img src="https://placehold.co/600x400/e2e8f0/334155?text=Early+Days" alt="Our Beginnings" space="w:\[100%\] tw-lg:max-w:\[md\] m-x:auto" visual="rounded:medium shadow:big"> </div> </div> <!-- Timeline Item 2 --> <div layout="flex col tw-lg:row-reverse items:center" space="m-b:big tw-lg:m-b:big-3x"> <div layout="order:2 tw-lg:order:1" space="tw-lg:w:\[1/2\] tw-lg:p-l:large"> <div layout="relative" space="p:medium-3x tw-lg:m-r:auto tw-lg:max-w:\[md\] m-t:medium-3x tw-lg:m-t:none" visual="bg:white rounded:medium shadow:big" class="z-10"> <span layout="block" space="m-b:tiny" visual="text-size:small font:tw-semibold text:blue-600">2020 - First Milestone</span> <h3 space="m-b:small-3x" visual="text-size:huge font:tw-bold">Launching Our Flagship Product</h3> <p visual="text:neutral-600">After months of hard work and dedication, we successfully launched our first major product, receiving accolades for its innovation and user-centric design. This marked a new chapter in our growth.</p> </div> </div> <div layout="order:1 tw-lg:order:2" space="tw-lg:w:\[1/2\] tw-lg:p-r:large"> <img src="https://placehold.co/600x400/dbeafe/1e40af?text=Product+Launch" alt="Product Launch" space="w:\[100%\] tw-lg:max-w:\[md\] m-x:auto" visual="rounded:medium shadow:big"> </div> </div> <!-- Timeline Item 3 --> <div layout="flex col tw-lg:row items:center" space="m-b:big tw-lg:m-b:big-3x"> <div layout="order:2 tw-lg:order:1" space="tw-lg:w:\[1/2\] tw-lg:p-r:large"> <div layout="relative" space="p:medium-3x tw-lg:m-l:auto tw-lg:max-w:\[md\] m-t:medium-3x tw-lg:m-t:none" visual="bg:white rounded:medium shadow:big" class="z-10"> <span layout="block" space="m-b:tiny" visual="text-size:small font:tw-semibold text:blue-600">2022 - Expanding Horizons</span> <h3 space="m-b:small-3x" visual="text-size:huge font:tw-bold">Global Reach & Team Growth</h3> <p visual="text:neutral-600">Our commitment to excellence fueled our expansion into new markets. Our team grew, bringing diverse talents and perspectives that enriched our culture and capabilities.</p> </div> </div> <div layout="order:1 tw-lg:order:2" space="tw-lg:w:\[1/2\] tw-lg:p-l:large"> <img src="https://placehold.co/600x400/ccfbf1/115e59?text=Expansion" alt="Global Expansion" space="w:\[100%\] tw-lg:max-w:\[md\] m-x:auto" visual="rounded:medium shadow:big"> </div> </div> <!-- Timeline Item 4 (Future) --> <div layout="flex col tw-lg:row-reverse items:center"> <div layout="order:2 tw-lg:order:1" space="tw-lg:w:\[1/2\] tw-lg:p-l:large"> <div layout="relative" space="p:medium-3x tw-lg:m-r:auto tw-lg:max-w:\[md\] m-t:medium-3x tw-lg:m-t:none" visual="bg:blue-600 text:white rounded:medium shadow:big" class="z-10"> <span layout="block" space="m-b:tiny" visual="text-size:small font:tw-semibold text:blue-200">Today & Beyond - The Vision</span> <h3 space="m-b:small-3x" visual="text-size:huge font:tw-bold">Innovating for Tomorrow</h3> <p visual="text:blue-100">We continue to push boundaries, driven by our mission to create impactful solutions. Our journey is ongoing, and we're excited for what the future holds as we innovate for a better tomorrow.</p> </div> </div> <div layout="order:1 tw-lg:order:2" space="tw-lg:w:\[1/2\] tw-lg:p-r:large"> <img src="https://placehold.co/600x400/e0f2fe/075985?text=Future+Vision" alt="Future Vision" space="w:\[100%\] tw-lg:max-w:\[md\] m-x:auto" visual="rounded:medium shadow:big"> </div> </div> </div> </section> COPY ```
Our History

Tracing Our Path: A Journey of Growth

From a humble beginning to where we stand today, every step has been a testament to our dedication and vision.

2018 - The Spark

Our Humble Beginnings

It all started with a simple idea and a passionate team. We laid the foundation for what would become a leading innovator in the industry, focusing on solving key customer pain points.

Our Beginnings
2020 - First Milestone

Launching Our Flagship Product

After months of hard work and dedication, we successfully launched our first major product, receiving accolades for its innovation and user-centric design. This marked a new chapter in our growth.

Product Launch
2022 - Expanding Horizons

Global Reach & Team Growth

Our commitment to excellence fueled our expansion into new markets. Our team grew, bringing diverse talents and perspectives that enriched our culture and capabilities.

Global Expansion
Today & Beyond - The Vision

Innovating for Tomorrow

We continue to push boundaries, driven by our mission to create impactful solutions. Our journey is ongoing, and we're excited for what the future holds as we innovate for a better tomorrow.

Future Vision
``` #### [\#](https://senangstart.com/sections/story-5/llms.txt)Our Working Philosophy story Outlines a company's core working principles or philosophy through descriptive pillars, often with icons. TailwindCSS SenangStart CSS Our WayOur Philosophy: The Art of Excellence ------------------------------------- We believe that true success is built on a foundation of clear principles and a relentless pursuit of quality. Here’s how we approach our work. ### Purpose-Driven Design Every solution we craft begins with a deep understanding of 'why'. We focus on creating meaningful impact and intuitive experiences that resonate with users and achieve clear objectives. ### Iterative Excellence We embrace an agile and iterative process. Continuous feedback, learning, and refinement are integral to our approach, ensuring we deliver robust and adaptable solutions. ### Empathetic Partnership We see ourselves as an extension of your team. Building strong, transparent relationships based on mutual respect and shared goals is paramount to our collective success. <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="text-center mb-12 lg:mb-16"> <span class="inline-block py-1 px-3 rounded-full text-sm font-semibold text-blue-600 bg-blue-100 uppercase mb-4">Our Way</span> <h2 class="text-3xl lg:text-5xl font-bold mb-4">Our Philosophy: The Art of Excellence</h2> <p class="text-lg lg:text-xl text-neutral-700 max-w-3xl mx-auto">We believe that true success is built on a foundation of clear principles and a relentless pursuit of quality. Here’s how we approach our work.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Pillar 1 --> <div class="flex flex-col items-center text-center p-6 bg-white rounded-xl shadow-lg border-t-4 border-blue-500 hover:shadow-2xl transition-shadow duration-300"> <div class="w-20 h-20 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 text-3xl mb-6"> <i class="fas fa-bullseye"></i> </div> <h3 class="text-2xl font-semibold mb-3">Purpose-Driven Design</h3> <p class="text-neutral-600 leading-relaxed">Every solution we craft begins with a deep understanding of 'why'. We focus on creating meaningful impact and intuitive experiences that resonate with users and achieve clear objectives.</p> </div> <!-- Pillar 2 --> <div class="flex flex-col items-center text-center p-6 bg-white rounded-xl shadow-lg border-t-4 border-blue-500 hover:shadow-2xl transition-shadow duration-300"> <div class="w-20 h-20 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 text-3xl mb-6"> <i class="fas fa-cogs"></i> </div> <h3 class="text-2xl font-semibold mb-3">Iterative Excellence</h3> <p class="text-neutral-600 leading-relaxed">We embrace an agile and iterative process. Continuous feedback, learning, and refinement are integral to our approach, ensuring we deliver robust and adaptable solutions.</p> </div> <!-- Pillar 3 --> <div class="flex flex-col items-center text-center p-6 bg-white rounded-xl shadow-lg border-t-4 border-blue-500 hover:shadow-2xl transition-shadow duration-300 md:col-span-2 lg:col-span-1"> <div class="w-20 h-20 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 text-3xl mb-6"> <i class="fas fa-heart"></i> </div> <h3 class="text-2xl font-semibold mb-3">Empathetic Partnership</h3> <p class="text-neutral-600 leading-relaxed">We see ourselves as an extension of your team. Building strong, transparent relationships based on mutual respect and shared goals is paramount to our collective success.</p> </div> </div> </section> COPY ```
Our Way

Our Philosophy: The Art of Excellence

We believe that true success is built on a foundation of clear principles and a relentless pursuit of quality. Here’s how we approach our work.

Purpose-Driven Design

Every solution we craft begins with a deep understanding of 'why'. We focus on creating meaningful impact and intuitive experiences that resonate with users and achieve clear objectives.

Iterative Excellence

We embrace an agile and iterative process. Continuous feedback, learning, and refinement are integral to our approach, ensuring we deliver robust and adaptable solutions.

Empathetic Partnership

We see ourselves as an extension of your team. Building strong, transparent relationships based on mutual respect and shared goals is paramount to our collective success.

``` Our WayOur Philosophy: The Art of Excellence ------------------------------------- We believe that true success is built on a foundation of clear principles and a relentless pursuit of quality. Here’s how we approach our work. ### Purpose-Driven Design Every solution we craft begins with a deep understanding of 'why'. We focus on creating meaningful impact and intuitive experiences that resonate with users and achieve clear objectives. ### Iterative Excellence We embrace an agile and iterative process. Continuous feedback, learning, and refinement are integral to our approach, ensuring we deliver robust and adaptable solutions. ### Empathetic Partnership We see ourselves as an extension of your team. Building strong, transparent relationships based on mutual respect and shared goals is paramount to our collective success. <section 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 space="m-b:big tw-lg:m-b:big-3x" visual="text:center"> <span layout="inline" space="p-y:tiny p-x:small-3x m-b:medium" visual="rounded:round text-size:small font:tw-semibold text:blue-600 bg:blue-100 uppercase">Our Way</span> <h2 space="m-b:medium" visual="text-size:grand tw-lg:text-size:mount font:tw-bold">Our Philosophy: The Art of Excellence</h2> <p space="max-w:\[3xl\] m-x:auto" visual="text-size:large tw-lg:text-size:big text:neutral-700">We believe that true success is built on a foundation of clear principles and a relentless pursuit of quality. Here’s how we approach our work.</p> </div> <div layout="grid grid-cols:1 tw-md:grid-cols:2 tw-lg:grid-cols:3" space="g:large"> <!-- Pillar 1 --> <div layout="flex col items:center" space="p:medium-3x" visual="text:center bg:white rounded:medium shadow:big border-t-w:tiny border:blue-500 hover:shadow:giant transition:shadow duration:slow"> <div layout="flex items:center justify:center" space="w:big-4x h:big-4x m-b:medium-3x" visual="rounded:round bg:blue-100 text:blue-600 text-size:grand"> <i class="fas fa-bullseye"></i> </div> <h3 space="m-b:small-3x" visual="text-size:huge font:tw-semibold">Purpose-Driven Design</h3> <p visual="text:neutral-600" class="leading-relaxed">Every solution we craft begins with a deep understanding of 'why'. We focus on creating meaningful impact and intuitive experiences that resonate with users and achieve clear objectives.</p> </div> <!-- Pillar 2 --> <div layout="flex col items:center" space="p:medium-3x" visual="text:center bg:white rounded:medium shadow:big border-t-w:tiny border:blue-500 hover:shadow:giant transition:shadow duration:slow"> <div layout="flex items:center justify:center" space="w:big-4x h:big-4x m-b:medium-3x" visual="rounded:round bg:blue-100 text:blue-600 text-size:grand"> <i class="fas fa-cogs"></i> </div> <h3 space="m-b:small-3x" visual="text-size:huge font:tw-semibold">Iterative Excellence</h3> <p visual="text:neutral-600" class="leading-relaxed">We embrace an agile and iterative process. Continuous feedback, learning, and refinement are integral to our approach, ensuring we deliver robust and adaptable solutions.</p> </div> <!-- Pillar 3 --> <div layout="flex col items:center tw-md:col-span:2 tw-lg:col-span:1" space="p:medium-3x" visual="text:center bg:white rounded:medium shadow:big border-t-w:tiny border:blue-500 hover:shadow:giant transition:shadow duration:slow"> <div layout="flex items:center justify:center" space="w:big-4x h:big-4x m-b:medium-3x" visual="rounded:round bg:blue-100 text:blue-600 text-size:grand"> <i class="fas fa-heart"></i> </div> <h3 space="m-b:small-3x" visual="text-size:huge font:tw-semibold">Empathetic Partnership</h3> <p visual="text:neutral-600" class="leading-relaxed">We see ourselves as an extension of your team. Building strong, transparent relationships based on mutual respect and shared goals is paramount to our collective success.</p> </div> </div> </section> COPY ```
Our Way

Our Philosophy: The Art of Excellence

We believe that true success is built on a foundation of clear principles and a relentless pursuit of quality. Here’s how we approach our work.

Purpose-Driven Design

Every solution we craft begins with a deep understanding of 'why'. We focus on creating meaningful impact and intuitive experiences that resonate with users and achieve clear objectives.

Iterative Excellence

We embrace an agile and iterative process. Continuous feedback, learning, and refinement are integral to our approach, ensuring we deliver robust and adaptable solutions.

Empathetic Partnership

We see ourselves as an extension of your team. Building strong, transparent relationships based on mutual respect and shared goals is paramount to our collective success.

``` #### [\#](https://senangstart.com/sections/story-6/llms.txt)The Evolution Story story Narrates a company's growth and adaptation journey, highlighting its origins and forward-looking vision. TailwindCSS SenangStart CSS Our EvolutionAdapting and Thriving: Our Story of Change ------------------------------------------ In a dynamic world, growth means more than just expansion; it means evolving with purpose and embracing change to better serve our community. ![Our Roots](https://placehold.co/500x300/a5b4fc/1e3a8a?text=Our+Founding+Principles) ### Our Roots: The Foundation Established in \[Year\], our company was born from a desire to \[Original Mission/Problem Solved\]. Our founding principles of \[Value 1\], \[Value 2\], and \[Value 3\] have guided us through every stage of our development, creating a strong base for future growth. [ Learn more about our history ](#history) ![Growth and Adaptation](https://placehold.co/500x300/60a5fa/ffffff?text=Future+Forward) ### Our Growth: Embracing the Future As markets shifted and new technologies emerged, we embraced change as an opportunity. We've expanded our services to include \[New Service 1\] and \[New Service 2\], adopted cutting-edge \[Technology/Methodology\], and consistently listened to our clients to refine our offerings. This adaptability ensures we remain at the forefront of innovation. [ Explore our innovations ](#innovations) Our story is one of continuous improvement and unwavering commitment. We are proud of our past and excited about building an even brighter future alongside our partners and clients. <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="text-center mb-12 lg:mb-16"> <span class="inline-block py-1 px-3 rounded-full text-sm font-semibold text-blue-600 bg-blue-100 uppercase mb-4">Our Evolution</span> <h2 class="text-3xl lg:text-5xl font-bold mb-4">Adapting and Thriving: Our Story of Change</h2> <p class="text-lg lg:text-xl text-neutral-700 max-w-3xl mx-auto">In a dynamic world, growth means more than just expansion; it means evolving with purpose and embracing change to better serve our community.</p> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-stretch"> <!-- Section 1: Our Roots --> <div class="bg-neutral-50 p-8 rounded-xl shadow-lg flex flex-col hover:shadow-xl transition-shadow duration-300"> <div class="mb-6 overflow-hidden rounded-lg"> <img src="https://placehold.co/500x300/a5b4fc/1e3a8a?text=Our+Founding+Principles" alt="Our Roots" class="rounded-lg w-full object-cover h-48 transform hover:scale-105 transition-transform duration-300"> </div> <h3 class="text-2xl lg:text-3xl font-bold mb-4 text-blue-700">Our Roots: The Foundation</h3> <p class="text-neutral-600 mb-4 flex-grow">Established in \[Year\], our company was born from a desire to \[Original Mission/Problem Solved\]. Our founding principles of \[Value 1\], \[Value 2\], and \[Value 3\] have guided us through every stage of our development, creating a strong base for future growth.</p> <a href="#history" class="inline-block mt-auto text-blue-600 font-semibold hover:text-blue-800 group"> Learn more about our history <i class="fas fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform duration-200"></i> </a> </div> <!-- Section 2: Growth and Adaptation --> <div class="bg-blue-600 text-white p-8 rounded-xl shadow-lg flex flex-col hover:shadow-xl transition-shadow duration-300"> <div class="mb-6 overflow-hidden rounded-lg"> <img src="https://placehold.co/500x300/60a5fa/ffffff?text=Future+Forward" alt="Growth and Adaptation" class="rounded-lg w-full object-cover h-48 transform hover:scale-105 transition-transform duration-300"> </div> <h3 class="text-2xl lg:text-3xl font-bold mb-4">Our Growth: Embracing the Future</h3> <p class="text-blue-100 mb-4 flex-grow">As markets shifted and new technologies emerged, we embraced change as an opportunity. We've expanded our services to include \[New Service 1\] and \[New Service 2\], adopted cutting-edge \[Technology/Methodology\], and consistently listened to our clients to refine our offerings. This adaptability ensures we remain at the forefront of innovation.</p> <a href="#innovations" class="inline-block mt-auto text-blue-200 font-semibold hover:text-white group"> Explore our innovations <i class="fas fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform duration-200"></i> </a> </div> </div> <div class="mt-12 lg:mt-16 text-center bg-neutral-100 p-8 rounded-xl"> <p class="text-xl lg:text-2xl text-neutral-800 font-semibold">Our story is one of continuous improvement and unwavering commitment.</p> <p class="text-neutral-600 mt-2">We are proud of our past and excited about building an even brighter future alongside our partners and clients.</p> </div> </section> COPY ```
Our Evolution

Adapting and Thriving: Our Story of Change

In a dynamic world, growth means more than just expansion; it means evolving with purpose and embracing change to better serve our community.

Our Roots

Our Roots: The Foundation

Established in [Year], our company was born from a desire to [Original Mission/Problem Solved]. Our founding principles of [Value 1], [Value 2], and [Value 3] have guided us through every stage of our development, creating a strong base for future growth.

Learn more about our history
Growth and Adaptation

Our Growth: Embracing the Future

As markets shifted and new technologies emerged, we embraced change as an opportunity. We've expanded our services to include [New Service 1] and [New Service 2], adopted cutting-edge [Technology/Methodology], and consistently listened to our clients to refine our offerings. This adaptability ensures we remain at the forefront of innovation.

Explore our innovations

Our story is one of continuous improvement and unwavering commitment.

We are proud of our past and excited about building an even brighter future alongside our partners and clients.

``` Our EvolutionAdapting and Thriving: Our Story of Change ------------------------------------------ In a dynamic world, growth means more than just expansion; it means evolving with purpose and embracing change to better serve our community. ![Our Roots](https://placehold.co/500x300/a5b4fc/1e3a8a?text=Our+Founding+Principles) ### Our Roots: The Foundation Established in \[Year\], our company was born from a desire to \[Original Mission/Problem Solved\]. Our founding principles of \[Value 1\], \[Value 2\], and \[Value 3\] have guided us through every stage of our development, creating a strong base for future growth. [ Learn more about our history ](#history) ![Growth and Adaptation](https://placehold.co/500x300/60a5fa/ffffff?text=Future+Forward) ### Our Growth: Embracing the Future As markets shifted and new technologies emerged, we embraced change as an opportunity. We've expanded our services to include \[New Service 1\] and \[New Service 2\], adopted cutting-edge \[Technology/Methodology\], and consistently listened to our clients to refine our offerings. This adaptability ensures we remain at the forefront of innovation. [ Explore our innovations ](#innovations) Our story is one of continuous improvement and unwavering commitment. We are proud of our past and excited about building an even brighter future alongside our partners and clients. <section 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 space="m-b:big tw-lg:m-b:big-3x" visual="text:center"> <span layout="inline" space="p-y:tiny p-x:small-3x m-b:medium" visual="rounded:round text-size:small font:tw-semibold text:blue-600 bg:blue-100 uppercase">Our Evolution</span> <h2 space="m-b:medium" visual="text-size:grand tw-lg:text-size:mount font:tw-bold">Adapting and Thriving: Our Story of Change</h2> <p space="max-w:\[3xl\] m-x:auto" visual="text-size:large tw-lg:text-size:big text:neutral-700">In a dynamic world, growth means more than just expansion; it means evolving with purpose and embracing change to better serve our community.</p> </div> <div layout="grid grid-cols:1 tw-lg:grid-cols:2 items:stretch" space="g:large tw-lg:g:big"> <!-- Section 1: Our Roots --> <div layout="flex col" space="p:large" visual="bg:neutral-50 rounded:medium shadow:big hover:shadow:giant transition:shadow duration:slow"> <div layout="overflow:hidden" space="m-b:medium-3x" visual="rounded:medium"> <img src="https://placehold.co/500x300/a5b4fc/1e3a8a?text=Our+Founding+Principles" alt="Our Roots" layout="object:cover" space="w:\[100%\] h:vast-3x" visual="rounded:medium transition:transform duration:slow" class="transform hover:scale-105"> </div> <h3 space="m-b:medium" visual="text-size:huge tw-lg:text-size:grand font:tw-bold text:blue-700">Our Roots: The Foundation</h3> <p layout="grow" space="m-b:medium" visual="text:neutral-600">Established in \[Year\], our company was born from a desire to \[Original Mission/Problem Solved\]. Our founding principles of \[Value 1\], \[Value 2\], and \[Value 3\] have guided us through every stage of our development, creating a strong base for future growth.</p> <a href="#history" layout="inline" space="m-t:auto" visual="text:blue-600 font:tw-semibold hover:text:blue-800" class="group"> Learn more about our history <i space="m-l:tiny" visual="transition:transform duration:normal" class="fas fa-arrow-right transform group-hover:translate-x-1"></i> </a> </div> <!-- Section 2: Growth and Adaptation --> <div layout="flex col" space="p:large" visual="bg:blue-600 text:white rounded:medium shadow:big hover:shadow:giant transition:shadow duration:slow"> <div layout="overflow:hidden" space="m-b:medium-3x" visual="rounded:medium"> <img src="https://placehold.co/500x300/60a5fa/ffffff?text=Future+Forward" alt="Growth and Adaptation" layout="object:cover" space="w:\[100%\] h:vast-3x" visual="rounded:medium transition:transform duration:slow" class="transform hover:scale-105"> </div> <h3 space="m-b:medium" visual="text-size:huge tw-lg:text-size:grand font:tw-bold">Our Growth: Embracing the Future</h3> <p layout="grow" space="m-b:medium" visual="text:blue-100">As markets shifted and new technologies emerged, we embraced change as an opportunity. We've expanded our services to include \[New Service 1\] and \[New Service 2\], adopted cutting-edge \[Technology/Methodology\], and consistently listened to our clients to refine our offerings. This adaptability ensures we remain at the forefront of innovation.</p> <a href="#innovations" layout="inline" space="m-t:auto" visual="text:blue-200 font:tw-semibold hover:text:white" class="group"> Explore our innovations <i space="m-l:tiny" visual="transition:transform duration:normal" class="fas fa-arrow-right transform group-hover:translate-x-1"></i> </a> </div> </div> <div space="m-t:big tw-lg:m-t:big-3x p:large" visual="text:center bg:neutral-100 rounded:medium"> <p visual="text-size:big tw-lg:text-size:huge text:neutral-800 font:tw-semibold">Our story is one of continuous improvement and unwavering commitment.</p> <p space="m-t:small" visual="text:neutral-600">We are proud of our past and excited about building an even brighter future alongside our partners and clients.</p> </div> </section> COPY ```
Our Evolution

Adapting and Thriving: Our Story of Change

In a dynamic world, growth means more than just expansion; it means evolving with purpose and embracing change to better serve our community.

Our Roots

Our Roots: The Foundation

Established in [Year], our company was born from a desire to [Original Mission/Problem Solved]. Our founding principles of [Value 1], [Value 2], and [Value 3] have guided us through every stage of our development, creating a strong base for future growth.

Learn more about our history
Growth and Adaptation

Our Growth: Embracing the Future

As markets shifted and new technologies emerged, we embraced change as an opportunity. We've expanded our services to include [New Service 1] and [New Service 2], adopted cutting-edge [Technology/Methodology], and consistently listened to our clients to refine our offerings. This adaptability ensures we remain at the forefront of innovation.

Explore our innovations

Our story is one of continuous improvement and unwavering commitment.

We are proud of our past and excited about building an even brighter future alongside our partners and clients.

``` #### [\#](https://senangstart.com/sections/statistics-6/llms.txt)Global Scale Stats statistic Visually represents a company's global reach and operational capacity through key statistics and impactful icons. TailwindCSS SenangStart CSS Our Global Scale By The Numbers: A Global Snapshot ----------------------------------- Discover the scope of our operations and the significant impact we're making across the world. 1000s Servers Deployed 99.99% Uptime Guarantee 24/7 Expert Support 70+ Data Centers Globally <section class="bg-blue-600 text-white my-8 lg:my-16"> <div class="container mx-auto px-6 py-12 lg:px-16 lg:py-20"> <div class="text-center mb-8 lg:mb-12"> <div class="inline-block mx-auto mb-2 lg:mb-4 rounded-md bg-blue-500 px-3 py-1 text-sm font-bold uppercase"> Our Global Scale </div> <h2 class="text-3xl lg:text-5xl font-bold mb-3 lg:mb-4"> By The Numbers: A Global Snapshot </h2> <p class="text-lg lg:text-xl text-blue-100 max-w-2xl mx-auto"> Discover the scope of our operations and the significant impact we're making across the world. </p> </div> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8"> <!-- Stat Item 1 --> <div class="bg-blue-700 hover:bg-blue-500 p-6 rounded-lg text-center transition-all duration-300 transform hover:scale-105"> <div class="text-4xl mb-4 text-blue-300"> <i class="fas fa-server"></i> </div> <p class="text-4xl font-bold mb-1">1000s</p> <p class="text-blue-200">Servers Deployed</p> </div> <!-- Stat Item 2 --> <div class="bg-blue-700 hover:bg-blue-500 p-6 rounded-lg text-center transition-all duration-300 transform hover:scale-105"> <div class="text-4xl mb-4 text-blue-300"> <i class="fas fa-shield-alt"></i> </div> <p class="text-4xl font-bold mb-1">99.99%</p> <p class="text-blue-200">Uptime Guarantee</p> </div> <!-- Stat Item 3 --> <div class="bg-blue-700 hover:bg-blue-500 p-6 rounded-lg text-center transition-all duration-300 transform hover:scale-105"> <div class="text-4xl mb-4 text-blue-300"> <i class="fas fa-headset"></i> </div> <p class="text-4xl font-bold mb-1">24/7</p> <p class="text-blue-200">Expert Support</p> </div> <!-- Stat Item 4 --> <div class="bg-blue-700 hover:bg-blue-500 p-6 rounded-lg text-center transition-all duration-300 transform hover:scale-105"> <div class="text-4xl mb-4 text-blue-300"> <i class="fas fa-globe-americas"></i> </div> <p class="text-4xl font-bold mb-1">70+</p> <p class="text-blue-200">Data Centers Globally</p> </div> </div> </div> </section> COPY ```
Our Global Scale

By The Numbers: A Global Snapshot

Discover the scope of our operations and the significant impact we're making across the world.

1000s

Servers Deployed

99.99%

Uptime Guarantee

24/7

Expert Support

70+

Data Centers Globally

``` Our Global Scale By The Numbers: A Global Snapshot ----------------------------------- Discover the scope of our operations and the significant impact we're making across the world. 1000s Servers Deployed 99.99% Uptime Guarantee 24/7 Expert Support 70+ Data Centers Globally <section space="m-y:large tw-lg:m-y:big-3x" visual="bg:blue-600 text:white"> <div layout="container" space="m-x:auto p-x:medium-3x p-y:big tw-lg:p-x:big-3x tw-lg:p-y:big-4x"> <div space="m-b:large tw-lg:m-b:big" visual="text:center"> <div layout="inline" space="m-x:auto m-b:small tw-lg:m-b:medium p-x:small-3x p-y:tiny" visual="rounded:small bg:blue-500 text-size:small font:tw-bold uppercase"> Our Global Scale </div> <h2 space="m-b:small-3x tw-lg:m-b:medium" visual="text-size:grand tw-lg:text-size:mount font:tw-bold"> By The Numbers: A Global Snapshot </h2> <p space="max-w:\[2xl\] m-x:auto" visual="text-size:large tw-lg:text-size:big text:blue-100"> Discover the scope of our operations and the significant impact we're making across the world. </p> </div> <div layout="grid grid-cols:1 tw-sm:grid-cols:2 tw-lg:grid-cols:4" space="g:medium-3x tw-lg:g:large"> <!-- Stat Item 1 --> <div space="p:medium-3x" visual="bg:blue-700 hover:bg:blue-500 rounded:medium text:center transition:all duration:slow" class="transform hover:scale-105"> <div space="m-b:medium" visual="text-size:giant text:blue-300"> <i class="fas fa-server"></i> </div> <p space="m-b:tiny" visual="text-size:giant font:tw-bold">1000s</p> <p visual="text:blue-200">Servers Deployed</p> </div> <!-- Stat Item 2 --> <div space="p:medium-3x" visual="bg:blue-700 hover:bg:blue-500 rounded:medium text:center transition:all duration:slow" class="transform hover:scale-105"> <div space="m-b:medium" visual="text-size:giant text:blue-300"> <i class="fas fa-shield-alt"></i> </div> <p space="m-b:tiny" visual="text-size:giant font:tw-bold">99.99%</p> <p visual="text:blue-200">Uptime Guarantee</p> </div> <!-- Stat Item 3 --> <div space="p:medium-3x" visual="bg:blue-700 hover:bg:blue-500 rounded:medium text:center transition:all duration:slow" class="transform hover:scale-105"> <div space="m-b:medium" visual="text-size:giant text:blue-300"> <i class="fas fa-headset"></i> </div> <p space="m-b:tiny" visual="text-size:giant font:tw-bold">24/7</p> <p visual="text:blue-200">Expert Support</p> </div> <!-- Stat Item 4 --> <div space="p:medium-3x" visual="bg:blue-700 hover:bg:blue-500 rounded:medium text:center transition:all duration:slow" class="transform hover:scale-105"> <div space="m-b:medium" visual="text-size:giant text:blue-300"> <i class="fas fa-globe-americas"></i> </div> <p space="m-b:tiny" visual="text-size:giant font:tw-bold">70+</p> <p visual="text:blue-200">Data Centers Globally</p> </div> </div> </div> </section> COPY ```
Our Global Scale

By The Numbers: A Global Snapshot

Discover the scope of our operations and the significant impact we're making across the world.

1000s

Servers Deployed

99.99%

Uptime Guarantee

24/7

Expert Support

70+

Data Centers Globally

``` #### [\#](https://senangstart.com/sections/statistics-4/llms.txt)Impact Highlights statistic Highlights key achievements or impact metrics with descriptive statistics, icons, and an accompanying visual. TailwindCSS SenangStart CSS Our Impact Fueling Growth, Delivering Value ---------------------------------- 3x Faster Project Delivery 40% Reduction in Operational Costs 1000+ Teams Empowered Worldwide ![Growth Statistics](https://placehold.co/600x500/EBF4FF/2563EB?text=Visual+Data) <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="grid lg:grid-cols-2 gap-8 lg:gap-12 items-center"> <div class="order-2 lg:order-1"> <div class="mb-2 max-w-max rounded-md bg-blue-100 px-3 py-1 text-sm font-bold uppercase text-blue-600"> Our Impact </div> <h2 class="text-3xl lg:text-5xl font-bold mb-6 lg:mb-8"> Fueling Growth, Delivering Value </h2> <div class="space-y-6"> <!-- Stat Item 1 --> <div class="flex items-start p-4 rounded-lg hover:bg-neutral-50 transition-colors"> <div class="flex-shrink-0 w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl mr-4"> <i class="fas fa-rocket"></i> </div> <div> <p class="text-3xl font-bold text-blue-600">3x</p> <p class="text-neutral-700 text-lg font-medium">Faster Project Delivery</p> </div> </div> <!-- Stat Item 2 --> <div class="flex items-start p-4 rounded-lg hover:bg-neutral-50 transition-colors"> <div class="flex-shrink-0 w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl mr-4"> <i class="fas fa-dollar-sign"></i> </div> <div> <p class="text-3xl font-bold text-blue-600">40%</p> <p class="text-neutral-700 text-lg font-medium">Reduction in Operational Costs</p> </div> </div> <!-- Stat Item 3 --> <div class="flex items-start p-4 rounded-lg hover:bg-neutral-50 transition-colors"> <div class="flex-shrink-0 w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl mr-4"> <i class="fas fa-users-cog"></i> </div> <div> <p class="text-3xl font-bold text-blue-600">1000+</p> <p class="text-neutral-700 text-lg font-medium">Teams Empowered Worldwide</p> </div> </div> </div> </div> <div class="order-1 lg:order-2"> <img src="https://placehold.co/600x500/EBF4FF/2563EB?text=Visual+Data" alt="Growth Statistics" class="w-full h-auto rounded-xl shadow-xl object-cover"> </div> </div> </section> COPY ```
Our Impact

Fueling Growth, Delivering Value

3x

Faster Project Delivery

40%

Reduction in Operational Costs

1000+

Teams Empowered Worldwide

Growth Statistics
``` Our Impact Fueling Growth, Delivering Value ---------------------------------- 3x Faster Project Delivery 40% Reduction in Operational Costs 1000+ Teams Empowered Worldwide ![Growth Statistics](https://placehold.co/600x500/EBF4FF/2563EB?text=Visual+Data) <section 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 layout="grid tw-lg:grid-cols:2 items:center" space="g:large tw-lg:g:big"> <div layout="order:2 tw-lg:order:1"> <div space="m-b:small max-w:\[max-content\] p-x:small-3x p-y:tiny" visual="rounded:small bg:blue-100 text-size:small font:tw-bold uppercase text:blue-600"> Our Impact </div> <h2 space="m-b:medium-3x tw-lg:m-b:large" visual="text-size:grand tw-lg:text-size:mount font:tw-bold"> Fueling Growth, Delivering Value </h2> <div class="space-y-6"> <!-- Stat Item 1 --> <div layout="flex items:start" space="p:medium" visual="rounded:medium hover:bg:neutral-50 transition:colors"> <div layout="shrink-0 flex items:center justify:center" space="w:big h:big m-r:medium" visual="rounded:round bg:blue-600 text:white text-size:big"> <i class="fas fa-rocket"></i> </div> <div> <p visual="text-size:grand font:tw-bold text:blue-600">3x</p> <p visual="text:neutral-700 text-size:large font:tw-medium">Faster Project Delivery</p> </div> </div> <!-- Stat Item 2 --> <div layout="flex items:start" space="p:medium" visual="rounded:medium hover:bg:neutral-50 transition:colors"> <div layout="shrink-0 flex items:center justify:center" space="w:big h:big m-r:medium" visual="rounded:round bg:blue-600 text:white text-size:big"> <i class="fas fa-dollar-sign"></i> </div> <div> <p visual="text-size:grand font:tw-bold text:blue-600">40%</p> <p visual="text:neutral-700 text-size:large font:tw-medium">Reduction in Operational Costs</p> </div> </div> <!-- Stat Item 3 --> <div layout="flex items:start" space="p:medium" visual="rounded:medium hover:bg:neutral-50 transition:colors"> <div layout="shrink-0 flex items:center justify:center" space="w:big h:big m-r:medium" visual="rounded:round bg:blue-600 text:white text-size:big"> <i class="fas fa-users-cog"></i> </div> <div> <p visual="text-size:grand font:tw-bold text:blue-600">1000+</p> <p visual="text:neutral-700 text-size:large font:tw-medium">Teams Empowered Worldwide</p> </div> </div> </div> </div> <div layout="order:1 tw-lg:order:2"> <img src="https://placehold.co/600x500/EBF4FF/2563EB?text=Visual+Data" alt="Growth Statistics" layout="object:cover" space="w:\[100%\] h:auto" visual="rounded:medium shadow:giant"> </div> </div> </section> COPY ```
Our Impact

Fueling Growth, Delivering Value

3x

Faster Project Delivery

40%

Reduction in Operational Costs

1000+

Teams Empowered Worldwide

Growth Statistics
``` #### [\#](https://senangstart.com/sections/statistics-2/llms.txt)Key Metrics Showcase statistic Displays crucial business metrics in visually distinct cards, each highlighting a key statistic with an icon. TailwindCSS SenangStart CSS Key Metrics Our Achievements in Numbers ----------------------------- We pride ourselves on delivering measurable results. Here's a snapshot of our impact. 10k+ Happy Clients 500+ Projects Completed 98% Satisfaction Rate 15+ Years of Experience <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="text-center mb-8 lg:mb-12"> <div class="inline-block mx-auto mb-2 lg:mb-4 rounded-md bg-blue-100 px-3 py-1 text-sm font-bold uppercase text-blue-600"> Key Metrics </div> <h2 class="text-3xl lg:text-5xl font-bold mb-3 lg:mb-4"> Our Achievements in Numbers </h2> <p class="text-lg lg:text-xl text-neutral-700 max-w-2xl mx-auto"> We pride ourselves on delivering measurable results. Here's a snapshot of our impact. </p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8"> <!-- Stat Item 1 --> <div class="bg-neutral-100 p-6 rounded-lg text-center shadow-md hover:shadow-xl transition-shadow duration-300"> <div class="flex items-center justify-center mx-auto mb-4 w-16 h-16 rounded-full bg-blue-600 text-white text-2xl"> <i class="fas fa-users"></i> </div> <p class="text-4xl lg:text-5xl font-bold text-blue-600 mb-2">10k+</p> <p class="text-neutral-700 text-lg">Happy Clients</p> </div> <!-- Stat Item 2 --> <div class="bg-neutral-100 p-6 rounded-lg text-center shadow-md hover:shadow-xl transition-shadow duration-300"> <div class="flex items-center justify-center mx-auto mb-4 w-16 h-16 rounded-full bg-blue-600 text-white text-2xl"> <i class="fas fa-project-diagram"></i> </div> <p class="text-4xl lg:text-5xl font-bold text-blue-600 mb-2">500+</p> <p class="text-neutral-700 text-lg">Projects Completed</p> </div> <!-- Stat Item 3 --> <div class="bg-neutral-100 p-6 rounded-lg text-center shadow-md hover:shadow-xl transition-shadow duration-300"> <div class="flex items-center justify-center mx-auto mb-4 w-16 h-16 rounded-full bg-blue-600 text-white text-2xl"> <i class="fas fa-thumbs-up"></i> </div> <p class="text-4xl lg:text-5xl font-bold text-blue-600 mb-2">98%</p> <p class="text-neutral-700 text-lg">Satisfaction Rate</p> </div> <!-- Stat Item 4 --> <div class="bg-neutral-100 p-6 rounded-lg text-center shadow-md hover:shadow-xl transition-shadow duration-300"> <div class="flex items-center justify-center mx-auto mb-4 w-16 h-16 rounded-full bg-blue-600 text-white text-2xl"> <i class="fas fa-award"></i> </div> <p class="text-4xl lg:text-5xl font-bold text-blue-600 mb-2">15+</p> <p class="text-neutral-700 text-lg">Years of Experience</p> </div> </div> </section> COPY ```
Key Metrics

Our Achievements in Numbers

We pride ourselves on delivering measurable results. Here's a snapshot of our impact.

10k+

Happy Clients

500+

Projects Completed

98%

Satisfaction Rate

15+

Years of Experience

``` Key Metrics Our Achievements in Numbers ----------------------------- We pride ourselves on delivering measurable results. Here's a snapshot of our impact. 10k+ Happy Clients 500+ Projects Completed 98% Satisfaction Rate 15+ Years of Experience <section 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 space="m-b:large tw-lg:m-b:big" visual="text:center"> <div layout="inline" space="m-x:auto m-b:small tw-lg:m-b:medium p-x:small-3x p-y:tiny" visual="rounded:small bg:blue-100 text-size:small font:tw-bold uppercase text:blue-600"> Key Metrics </div> <h2 space="m-b:small-3x tw-lg:m-b:medium" visual="text-size:grand tw-lg:text-size:mount font:tw-bold"> Our Achievements in Numbers </h2> <p space="max-w:\[2xl\] m-x:auto" visual="text-size:large tw-lg:text-size:big text:neutral-700"> We pride ourselves on delivering measurable results. Here's a snapshot of our impact. </p> </div> <div layout="grid grid-cols:1 tw-md:grid-cols:2 tw-lg:grid-cols:4" space="g:medium-3x tw-lg:g:large"> <!-- Stat Item 1 --> <div space="p:medium-3x" visual="bg:neutral-100 rounded:medium text:center shadow:medium hover:shadow:giant transition:shadow duration:slow"> <div layout="flex items:center justify:center" space="m-x:auto m-b:medium w:big-3x h:big-3x" visual="rounded:round bg:blue-600 text:white text-size:huge"> <i class="fas fa-users"></i> </div> <p space="m-b:small" visual="text-size:giant tw-lg:text-size:mount font:tw-bold text:blue-600">10k+</p> <p visual="text:neutral-700 text-size:large">Happy Clients</p> </div> <!-- Stat Item 2 --> <div space="p:medium-3x" visual="bg:neutral-100 rounded:medium text:center shadow:medium hover:shadow:giant transition:shadow duration:slow"> <div layout="flex items:center justify:center" space="m-x:auto m-b:medium w:big-3x h:big-3x" visual="rounded:round bg:blue-600 text:white text-size:huge"> <i class="fas fa-project-diagram"></i> </div> <p space="m-b:small" visual="text-size:giant tw-lg:text-size:mount font:tw-bold text:blue-600">500+</p> <p visual="text:neutral-700 text-size:large">Projects Completed</p> </div> <!-- Stat Item 3 --> <div space="p:medium-3x" visual="bg:neutral-100 rounded:medium text:center shadow:medium hover:shadow:giant transition:shadow duration:slow"> <div layout="flex items:center justify:center" space="m-x:auto m-b:medium w:big-3x h:big-3x" visual="rounded:round bg:blue-600 text:white text-size:huge"> <i class="fas fa-thumbs-up"></i> </div> <p space="m-b:small" visual="text-size:giant tw-lg:text-size:mount font:tw-bold text:blue-600">98%</p> <p visual="text:neutral-700 text-size:large">Satisfaction Rate</p> </div> <!-- Stat Item 4 --> <div space="p:medium-3x" visual="bg:neutral-100 rounded:medium text:center shadow:medium hover:shadow:giant transition:shadow duration:slow"> <div layout="flex items:center justify:center" space="m-x:auto m-b:medium w:big-3x h:big-3x" visual="rounded:round bg:blue-600 text:white text-size:huge"> <i class="fas fa-award"></i> </div> <p space="m-b:small" visual="text-size:giant tw-lg:text-size:mount font:tw-bold text:blue-600">15+</p> <p visual="text:neutral-700 text-size:large">Years of Experience</p> </div> </div> </section> COPY ```
Key Metrics

Our Achievements in Numbers

We pride ourselves on delivering measurable results. Here's a snapshot of our impact.

10k+

Happy Clients

500+

Projects Completed

98%

Satisfaction Rate

15+

Years of Experience

``` #### [\#](https://senangstart.com/sections/statistics-5/llms.txt)Milestone Cards statistic Presents significant company achievements or milestones in visually impactful cards with large stats and descriptions. TailwindCSS SenangStart CSS Milestones Key Milestones We've Reached ------------------------------ Celebrating our key achievements and the significant progress we've made on our journey. 1M+ ### Active Users Served Across all our platforms globally, fostering a vibrant community. 20+ ### Countries Reached Expanding our global footprint and connecting with diverse markets. 50M ### Interactions Processed Securely and efficiently handling millions of user interactions every year. <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16 text-center"> <div class="mb-10 lg:mb-16"> <div class="inline-block mx-auto mb-2 lg:mb-4 rounded-full bg-blue-600 px-4 py-2 text-sm font-bold uppercase text-white"> Milestones </div> <h2 class="text-3xl lg:text-5xl font-bold mb-3 lg:mb-4"> Key Milestones We've Reached </h2> <p class="text-lg lg:text-xl text-neutral-700 max-w-xl mx-auto"> Celebrating our key achievements and the significant progress we've made on our journey. </p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-12"> <!-- Stat 1 --> <div class="bg-white p-8 rounded-xl shadow-lg hover:scale-105 transition-transform duration-300"> <p class="text-6xl lg:text-7xl font-extrabold text-blue-600 mb-3">1M+</p> <h3 class="text-xl lg:text-2xl font-semibold text-neutral-800 mb-1">Active Users Served</h3> <p class="text-neutral-600">Across all our platforms globally, fostering a vibrant community.</p> </div> <!-- Stat 2 --> <div class="bg-white p-8 rounded-xl shadow-lg hover:scale-105 transition-transform duration-300"> <p class="text-6xl lg:text-7xl font-extrabold text-blue-600 mb-3">20+</p> <h3 class="text-xl lg:text-2xl font-semibold text-neutral-800 mb-1">Countries Reached</h3> <p class="text-neutral-600">Expanding our global footprint and connecting with diverse markets.</p> </div> <!-- Stat 3 --> <div class="bg-white p-8 rounded-xl shadow-lg hover:scale-105 transition-transform duration-300"> <p class="text-6xl lg:text-7xl font-extrabold text-blue-600 mb-3">50M</p> <h3 class="text-xl lg:text-2xl font-semibold text-neutral-800 mb-1">Interactions Processed</h3> <p class="text-neutral-600">Securely and efficiently handling millions of user interactions every year.</p> </div> </div> </section> COPY ```
Milestones

Key Milestones We've Reached

Celebrating our key achievements and the significant progress we've made on our journey.

1M+

Active Users Served

Across all our platforms globally, fostering a vibrant community.

20+

Countries Reached

Expanding our global footprint and connecting with diverse markets.

50M

Interactions Processed

Securely and efficiently handling millions of user interactions every year.

``` Milestones Key Milestones We've Reached ------------------------------ Celebrating our key achievements and the significant progress we've made on our journey. 1M+ ### Active Users Served Across all our platforms globally, fostering a vibrant community. 20+ ### Countries Reached Expanding our global footprint and connecting with diverse markets. 50M ### Interactions Processed Securely and efficiently handling millions of user interactions every year. <section 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" visual="text:center"> <div space="m-b:large-3x tw-lg:m-b:big-3x"> <div layout="inline" space="m-x:auto m-b:small tw-lg:m-b:medium p-x:medium p-y:small" visual="rounded:round bg:blue-600 text-size:small font:tw-bold uppercase text:white"> Milestones </div> <h2 space="m-b:small-3x tw-lg:m-b:medium" visual="text-size:grand tw-lg:text-size:mount font:tw-bold"> Key Milestones We've Reached </h2> <p space="max-w:\[xl\] m-x:auto" visual="text-size:large tw-lg:text-size:big text:neutral-700"> Celebrating our key achievements and the significant progress we've made on our journey. </p> </div> <div layout="grid grid-cols:1 tw-md:grid-cols:3" space="g:large tw-lg:g:big"> <!-- Stat 1 --> <div space="p:large" visual="bg:white rounded:medium shadow:big transition:transform duration:slow" class="hover:scale-105"> <p space="m-b:small-3x" visual="text-size:mega tw-lg:text-size:giga font:tw-extrabold text:blue-600">1M+</p> <h3 space="m-b:tiny" visual="text-size:big tw-lg:text-size:huge font:tw-semibold text:neutral-800">Active Users Served</h3> <p visual="text:neutral-600">Across all our platforms globally, fostering a vibrant community.</p> </div> <!-- Stat 2 --> <div space="p:large" visual="bg:white rounded:medium shadow:big transition:transform duration:slow" class="hover:scale-105"> <p space="m-b:small-3x" visual="text-size:mega tw-lg:text-size:giga font:tw-extrabold text:blue-600">20+</p> <h3 space="m-b:tiny" visual="text-size:big tw-lg:text-size:huge font:tw-semibold text:neutral-800">Countries Reached</h3> <p visual="text:neutral-600">Expanding our global footprint and connecting with diverse markets.</p> </div> <!-- Stat 3 --> <div space="p:large" visual="bg:white rounded:medium shadow:big transition:transform duration:slow" class="hover:scale-105"> <p space="m-b:small-3x" visual="text-size:mega tw-lg:text-size:giga font:tw-extrabold text:blue-600">50M</p> <h3 space="m-b:tiny" visual="text-size:big tw-lg:text-size:huge font:tw-semibold text:neutral-800">Interactions Processed</h3> <p visual="text:neutral-600">Securely and efficiently handling millions of user interactions every year.</p> </div> </div> </section> COPY ```
Milestones

Key Milestones We've Reached

Celebrating our key achievements and the significant progress we've made on our journey.

1M+

Active Users Served

Across all our platforms globally, fostering a vibrant community.

20+

Countries Reached

Expanding our global footprint and connecting with diverse markets.

50M

Interactions Processed

Securely and efficiently handling millions of user interactions every year.

``` #### [\#](https://senangstart.com/sections/statistics-3/llms.txt)Progress Report List statistic Reports key performance indicators or progress in a clean list format, detailing each metric and its value. TailwindCSS SenangStart CSS Performance Overview Tracking Our Progress Annually -------------------------------- Detailed insights into our key performance indicators and growth over the past year. ### User Growth Rate Percentage increase in active users compared to the previous quarter. +25% ### Customer Retention Successfully retained a high percentage of our existing customer base this year. 92% ### Support Ticket Resolution Time Average time taken to resolve customer support tickets and inquiries. ### New Features Deployed Number of significant features and updates released in the last 6 months. 18 <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="text-left mb-8 lg:mb-12 max-w-3xl"> <div class="inline-block mb-2 lg:mb-4 rounded-md border-2 border-blue-600 px-2 py-0.5 text-sm font-bold text-blue-600"> Performance Overview </div> <h2 class="text-3xl lg:text-5xl font-bold mb-3 lg:mb-4"> Tracking Our Progress Annually </h2> <p class="text-lg lg:text-xl text-neutral-700"> Detailed insights into our key performance indicators and growth over the past year. </p> </div> <div class="space-y-4 lg:space-y-6"> <!-- Stat Row 1 --> <div class="grid lg:grid-cols-3 gap-4 items-center bg-white p-4 lg:p-6 rounded-lg border border-neutral-200 hover:shadow-lg transition-shadow duration-300"> <div class="lg:col-span-2"> <h3 class="text-xl lg:text-2xl font-semibold text-neutral-800">User Growth Rate</h3> <p class="text-neutral-600 mt-1">Percentage increase in active users compared to the previous quarter.</p> </div> <div class="text-left lg:text-right"> <p class="text-3xl lg:text-4xl font-bold text-blue-600">+25%</p> </div> </div> <!-- Stat Row 2 --> <div class="grid lg:grid-cols-3 gap-4 items-center bg-neutral-50 p-4 lg:p-6 rounded-lg border border-neutral-200 hover:shadow-lg transition-shadow duration-300"> <div class="lg:col-span-2"> <h3 class="text-xl lg:text-2xl font-semibold text-neutral-800">Customer Retention</h3> <p class="text-neutral-600 mt-1">Successfully retained a high percentage of our existing customer base this year.</p> </div> <div class="text-left lg:text-right"> <p class="text-3xl lg:text-4xl font-bold text-blue-600">92%</p> </div> </div> <!-- Stat Row 3 --> <div class="grid lg:grid-cols-3 gap-4 items-center bg-white p-4 lg:p-6 rounded-lg border border-neutral-200 hover:shadow-lg transition-shadow duration-300"> <div class="lg:col-span-2"> <h3 class="text-xl lg:text-2xl font-semibold text-neutral-800">Support Ticket Resolution Time</h3> <p class="text-neutral-600 mt-1">Average time taken to resolve customer support tickets and inquiries.</p> </div> <div class="text-left lg:text-right"> <p class="text-3xl lg:text-4xl font-bold text-blue-600"><4 Hours</p> </div> </div> <!-- Stat Row 4 --> <div class="grid lg:grid-cols-3 gap-4 items-center bg-neutral-50 p-4 lg:p-6 rounded-lg border border-neutral-200 hover:shadow-lg transition-shadow duration-300"> <div class="lg:col-span-2"> <h3 class="text-xl lg:text-2xl font-semibold text-neutral-800">New Features Deployed</h3> <p class="text-neutral-600 mt-1">Number of significant features and updates released in the last 6 months.</p> </div> <div class="text-left lg:text-right"> <p class="text-3xl lg:text-4xl font-bold text-blue-600">18</p> </div> </div> </div> </section> COPY ```
Performance Overview

Tracking Our Progress Annually

Detailed insights into our key performance indicators and growth over the past year.

User Growth Rate

Percentage increase in active users compared to the previous quarter.

+25%

Customer Retention

Successfully retained a high percentage of our existing customer base this year.

92%

Support Ticket Resolution Time

Average time taken to resolve customer support tickets and inquiries.

<4 Hours

New Features Deployed

Number of significant features and updates released in the last 6 months.

18

``` Performance Overview Tracking Our Progress Annually -------------------------------- Detailed insights into our key performance indicators and growth over the past year. ### User Growth Rate Percentage increase in active users compared to the previous quarter. +25% ### Customer Retention Successfully retained a high percentage of our existing customer base this year. 92% ### Support Ticket Resolution Time Average time taken to resolve customer support tickets and inquiries. ### New Features Deployed Number of significant features and updates released in the last 6 months. 18 <section 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 space="m-b:large tw-lg:m-b:big max-w:\[3xl\]" visual="text:left"> <div layout="inline" space="m-b:small tw-lg:m-b:medium p-x:small p-y:regular" visual="rounded:small border-w:regular border:blue-600 text-size:small font:tw-bold text:blue-600"> Performance Overview </div> <h2 space="m-b:small-3x tw-lg:m-b:medium" visual="text-size:grand tw-lg:text-size:mount font:tw-bold"> Tracking Our Progress Annually </h2> <p visual="text-size:large tw-lg:text-size:big text:neutral-700"> Detailed insights into our key performance indicators and growth over the past year. </p> </div> <div class="space-y-4 lg:space-y-6"> <!-- Stat Row 1 --> <div layout="grid tw-lg:grid-cols:3 items:center" space="g:medium p:medium tw-lg:p:medium-3x" visual="bg:white rounded:medium border-w:thin border:neutral-200 hover:shadow:big transition:shadow duration:slow"> <div layout="tw-lg:col-span:2"> <h3 visual="text-size:big tw-lg:text-size:huge font:tw-semibold text:neutral-800">User Growth Rate</h3> <p space="m-t:tiny" visual="text:neutral-600">Percentage increase in active users compared to the previous quarter.</p> </div> <div visual="text:left tw-lg:text:right"> <p visual="text-size:grand tw-lg:text-size:giant font:tw-bold text:blue-600">+25%</p> </div> </div> <!-- Stat Row 2 --> <div layout="grid tw-lg:grid-cols:3 items:center" space="g:medium p:medium tw-lg:p:medium-3x" visual="bg:neutral-50 rounded:medium border-w:thin border:neutral-200 hover:shadow:big transition:shadow duration:slow"> <div layout="tw-lg:col-span:2"> <h3 visual="text-size:big tw-lg:text-size:huge font:tw-semibold text:neutral-800">Customer Retention</h3> <p space="m-t:tiny" visual="text:neutral-600">Successfully retained a high percentage of our existing customer base this year.</p> </div> <div visual="text:left tw-lg:text:right"> <p visual="text-size:grand tw-lg:text-size:giant font:tw-bold text:blue-600">92%</p> </div> </div> <!-- Stat Row 3 --> <div layout="grid tw-lg:grid-cols:3 items:center" space="g:medium p:medium tw-lg:p:medium-3x" visual="bg:white rounded:medium border-w:thin border:neutral-200 hover:shadow:big transition:shadow duration:slow"> <div layout="tw-lg:col-span:2"> <h3 visual="text-size:big tw-lg:text-size:huge font:tw-semibold text:neutral-800">Support Ticket Resolution Time</h3> <p space="m-t:tiny" visual="text:neutral-600">Average time taken to resolve customer support tickets and inquiries.</p> </div> <div visual="text:left tw-lg:text:right"> <p visual="text-size:grand tw-lg:text-size:giant font:tw-bold text:blue-600"><4 Hours</p> </div> </div> <!-- Stat Row 4 --> <div layout="grid tw-lg:grid-cols:3 items:center" space="g:medium p:medium tw-lg:p:medium-3x" visual="bg:neutral-50 rounded:medium border-w:thin border:neutral-200 hover:shadow:big transition:shadow duration:slow"> <div layout="tw-lg:col-span:2"> <h3 visual="text-size:big tw-lg:text-size:huge font:tw-semibold text:neutral-800">New Features Deployed</h3> <p space="m-t:tiny" visual="text:neutral-600">Number of significant features and updates released in the last 6 months.</p> </div> <div visual="text:left tw-lg:text:right"> <p visual="text-size:grand tw-lg:text-size:giant font:tw-bold text:blue-600">18</p> </div> </div> </div> </section> COPY ```
Performance Overview

Tracking Our Progress Annually

Detailed insights into our key performance indicators and growth over the past year.

User Growth Rate

Percentage increase in active users compared to the previous quarter.

+25%

Customer Retention

Successfully retained a high percentage of our existing customer base this year.

92%

Support Ticket Resolution Time

Average time taken to resolve customer support tickets and inquiries.

<4 Hours

New Features Deployed

Number of significant features and updates released in the last 6 months.

18

``` #### [\#](https://senangstart.com/sections/statistics-1/llms.txt)Statistic Box Grid statistic Showcases key data points within distinct colored boxes, accompanied by an introductory section header. TailwindCSS SenangStart CSS Statistics The Impact of Inefficiency ---------------------------- Our research shows that businesses face significant challenges in their daily operations. Here's what the numbers tell us. 40% Time spent on administrative tasks 62% Teams struggle with remote collaboration 25% Revenue lost due to inefficient processes 83% Want better digital tools <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="grid gap-8 lg:grid-cols-2"> <div> <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600" > Statistics </div> <h2 class="mb-4 text-3xl font-bold lg:text-5xl"> The Impact of Inefficiency </h2> <p class="text-lg lg:text-xl"> Our research shows that businesses face significant challenges in their daily operations. Here's what the numbers tell us. </p> </div> <div class="grid grid-cols-2 gap-4"> <div class="rounded-lg bg-blue-600 p-6 text-white"> <p class="text-4xl font-bold lg:text-6xl">40%</p> <p class="text-lg">Time spent on administrative tasks</p> </div> <div class="rounded-lg bg-blue-600 p-6 text-white"> <p class="text-4xl font-bold lg:text-6xl">62%</p> <p class="text-lg">Teams struggle with remote collaboration</p> </div> <div class="rounded-lg bg-blue-600 p-6 text-white"> <p class="text-4xl font-bold lg:text-6xl">25%</p> <p class="text-lg">Revenue lost due to inefficient processes</p> </div> <div class="rounded-lg bg-blue-600 p-6 text-white"> <p class="text-4xl font-bold lg:text-6xl">83%</p> <p class="text-lg">Want better digital tools</p> </div> </div> </div> </section> COPY ```
Statistics

The Impact of Inefficiency

Our research shows that businesses face significant challenges in their daily operations. Here's what the numbers tell us.

40%

Time spent on administrative tasks

62%

Teams struggle with remote collaboration

25%

Revenue lost due to inefficient processes

83%

Want better digital tools

``` Statistics The Impact of Inefficiency ---------------------------- Our research shows that businesses face significant challenges in their daily operations. Here's what the numbers tell us. 40% Time spent on administrative tasks 62% Teams struggle with remote collaboration 25% Revenue lost due to inefficient processes 83% Want better digital tools <section 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 layout="grid tw-lg:grid-cols:2" space="g:large"> <div> <div space="m-b:small max-w:\[max-content\] p-x:small" visual="rounded:small border-w:regular border:blue-600 font:tw-bold text:blue-600" > Statistics </div> <h2 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mount"> The Impact of Inefficiency </h2> <p visual="text-size:large tw-lg:text-size:big"> Our research shows that businesses face significant challenges in their daily operations. Here's what the numbers tell us. </p> </div> <div layout="grid grid-cols:2" space="g:medium"> <div space="p:medium-3x" visual="rounded:medium bg:blue-600 text:white"> <p visual="text-size:giant font:tw-bold tw-lg:text-size:mega">40%</p> <p visual="text-size:large">Time spent on administrative tasks</p> </div> <div space="p:medium-3x" visual="rounded:medium bg:blue-600 text:white"> <p visual="text-size:giant font:tw-bold tw-lg:text-size:mega">62%</p> <p visual="text-size:large">Teams struggle with remote collaboration</p> </div> <div space="p:medium-3x" visual="rounded:medium bg:blue-600 text:white"> <p visual="text-size:giant font:tw-bold tw-lg:text-size:mega">25%</p> <p visual="text-size:large">Revenue lost due to inefficient processes</p> </div> <div space="p:medium-3x" visual="rounded:medium bg:blue-600 text:white"> <p visual="text-size:giant font:tw-bold tw-lg:text-size:mega">83%</p> <p visual="text-size:large">Want better digital tools</p> </div> </div> </div> </section> COPY ```
Statistics

The Impact of Inefficiency

Our research shows that businesses face significant challenges in their daily operations. Here's what the numbers tell us.

40%

Time spent on administrative tasks

62%

Teams struggle with remote collaboration

25%

Revenue lost due to inefficient processes

83%

Want better digital tools

``` #### [\#](https://senangstart.com/sections/hero-6/llms.txt)Hero BG Pattern Card hero Features a dynamic hero section with a patterned background, overlaying key information in a prominent card. TailwindCSS SenangStart CSS ![Background Pattern](https://placehold.co/1920x1080) NEW RELEASE Next Generation Development Platform ====================================== Build scalable applications with modern tools and frameworks [Get Started Free](#start) [Schedule Demo](#demo) ![](https://placehold.co/40x40) ![](https://placehold.co/40x40) ![](https://placehold.co/40x40) Join over 10,000+ developers worldwide ![](https://placehold.co/600x600)Featured Project ### AI-Powered Analytics Dashboard <section class="relative mb-16 overflow-hidden bg-blue-600"> <div class="absolute inset-0 overflow-hidden"> <div class="absolute inset-0 bg-blue-600 opacity-90"></div> <img src="https://placehold.co/1920x1080" class="h-full w-full object-cover" alt="Background Pattern" /> </div> <div class="container relative mx-auto grid gap-8 px-6 py-20 lg:grid-cols-2 lg:px-16" > <div class="flex flex-col justify-center text-white"> <div class="mb-4 max-w-max rounded-lg bg-white/10 px-4 py-2 backdrop-blur-sm" > <p class="text-sm font-bold">NEW RELEASE</p> </div> <h1 class="mb-6 text-4xl font-bold lg:text-7xl"> Next Generation Development Platform </h1> <p class="mb-8 text-xl lg:text-2xl"> Build scalable applications with modern tools and frameworks </p> <div class="flex flex-col gap-4 lg:flex-row"> <a href="#start" class="flex h-14 items-center justify-center rounded-lg bg-white px-8 text-lg font-semibold text-blue-600 hover:bg-opacity-90" >Get Started Free</a > <a href="#demo" class="flex h-14 items-center justify-center rounded-lg border-2 border-white px-8 text-lg font-semibold text-white hover:bg-white hover:text-blue-600" >Schedule Demo</a > </div> <div class="mt-8 flex items-center gap-8"> <div class="flex -space-x-4"> <img src="https://placehold.co/40x40" class="h-10 w-10 rounded-full border-2 border-white" /> <img src="https://placehold.co/40x40" class="h-10 w-10 rounded-full border-2 border-white" /> <img src="https://placehold.co/40x40" class="h-10 w-10 rounded-full border-2 border-white" /> </div> <p class="text-sm">Join over 10,000+ developers worldwide</p> </div> </div> <div class="relative"> <div class="relative aspect-square overflow-hidden rounded-2xl bg-white/10 backdrop-blur-sm lg:aspect-auto" > <img src="https://placehold.co/600x600" class="h-full w-full object-cover" /> <div class="absolute bottom-0 left-0 right-0 p-6 text-white backdrop-blur-sm" > <div class="rounded-lg bg-white/10 p-4"> <div class="mb-2 text-sm font-semibold">Featured Project</div> <h3 class="text-lg font-bold"> AI-Powered Analytics Dashboard </h3> </div> </div> </div> </div> </div> </section> COPY ```
Background Pattern

NEW RELEASE

Next Generation Development Platform

Build scalable applications with modern tools and frameworks

Get Started Free Schedule Demo

Join over 10,000+ developers worldwide

Featured Project

AI-Powered Analytics Dashboard

``` ![Background Pattern](https://placehold.co/1920x1080) NEW RELEASE Next Generation Development Platform ====================================== Build scalable applications with modern tools and frameworks [Get Started Free](#start) [Schedule Demo](#demo) ![](https://placehold.co/40x40) ![](https://placehold.co/40x40) ![](https://placehold.co/40x40) Join over 10,000+ developers worldwide ![](https://placehold.co/600x600)Featured Project ### AI-Powered Analytics Dashboard <section layout="relative overflow:hidden" space="m-b:big-3x" visual="bg:blue-600"> <div layout="absolute inset:none overflow:hidden"> <div layout="absolute inset:none" visual="bg:blue-600 opacity:90"></div> <img src="https://placehold.co/1920x1080" layout="object:cover" space="h:\[100%\] w:\[100%\]" alt="Background Pattern" /> </div> <div layout="container relative grid tw-lg:grid-cols:2" space="m-x:auto g:large p-x:medium-3x p-y:big-4x tw-lg:p-x:big-3x" > <div layout="flex col justify:center" visual="text:white"> <div space="m-b:medium max-w:\[max-content\] p-x:medium p-y:small" visual="rounded:medium" class="bg-white/10 backdrop-blur-sm" > <p visual="text-size:small font:tw-bold">NEW RELEASE</p> </div> <h1 space="m-b:medium-3x" visual="text-size:giant font:tw-bold tw-lg:text-size:giga"> Next Generation Development Platform </h1> <p space="m-b:large" visual="text-size:big tw-lg:text-size:huge"> Build scalable applications with modern tools and frameworks </p> <div layout="flex col tw-lg:row" space="g:medium"> <a href="#start" layout="flex items:center justify:center" space="h:big-2x p-x:large" visual="rounded:medium bg:white text-size:large font:tw-semibold text:blue-600" class="hover:bg-opacity-90" >Get Started Free</a > <a href="#demo" layout="flex items:center justify:center" space="h:big-2x p-x:large" visual="rounded:medium border-w:regular border:white text-size:large font:tw-semibold text:white hover:bg:white hover:text:blue-600" >Schedule Demo</a > </div> <div layout="flex items:center" space="m-t:large g:large"> <div layout="flex" class="-space-x-4"> <img src="https://placehold.co/40x40" space="h:large-3x w:large-3x" visual="rounded:round border-w:regular border:white" /> <img src="https://placehold.co/40x40" space="h:large-3x w:large-3x" visual="rounded:round border-w:regular border:white" /> <img src="https://placehold.co/40x40" space="h:large-3x w:large-3x" visual="rounded:round border-w:regular border:white" /> </div> <p visual="text-size:small">Join over 10,000+ developers worldwide</p> </div> </div> <div layout="relative"> <div layout="relative overflow:hidden" visual="rounded:big" class="aspect-square bg-white/10 backdrop-blur-sm lg:aspect-auto" > <img src="https://placehold.co/600x600" layout="object:cover" space="h:\[100%\] w:\[100%\]" /> <div layout="absolute bottom:none left:none right:none" space="p:medium-3x" visual="text:white" class="backdrop-blur-sm" > <div space="p:medium" visual="rounded:medium" class="bg-white/10"> <div space="m-b:small" visual="text-size:small font:tw-semibold">Featured Project</div> <h3 visual="text-size:large font:tw-bold"> AI-Powered Analytics Dashboard </h3> </div> </div> </div> </div> </div> </section> COPY ```
Background Pattern

NEW RELEASE

Next Generation Development Platform

Build scalable applications with modern tools and frameworks

Get Started Free Schedule Demo

Join over 10,000+ developers worldwide

Featured Project

AI-Powered Analytics Dashboard

``` #### [\#](https://senangstart.com/sections/hero-1/llms.txt)Hero Centered Media hero Captures attention with a hero section featuring centered text, a prominent media display, and clear CTAs. TailwindCSS SenangStart CSS Transform Your Idea Into Great Product ====================================== Empowering Business to Build, Innovate, and Succeed ![](https://placehold.co/600x400) [Services](#services)[Products](#products) <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> COPY ```

Transform Your Idea
Into Great Product

Empowering Business to Build, Innovate, and Succeed

``` Transform Your Idea Into Great Product ====================================== Empowering Business to Build, Innovate, and Succeed ![](https://placehold.co/600x400) [Services](#services)[Products](#products) <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> COPY ```

Transform Your Idea
Into Great Product

Empowering Business to Build, Innovate, and Succeed

``` #### [\#](https://senangstart.com/sections/hero-5/llms.txt)Hero Feature Cards hero Introduces a product or service with a primary message alongside compact feature cards for quick highlights. TailwindCSS SenangStart CSS INNOVATION Build Better Together ======================= Empower your team with cutting-edge collaboration tools and innovative solutions. [Start Project](#contact) [ Learn More ](#learn) ### Fast Development Launch your projects quickly with our streamlined process ### Secure Platform Enterprise-grade security for your peace of mind ### Team Collaboration Work seamlessly with your team members ### Analytics Data-driven insights for better decisions <section class="container mx-auto mb-16 px-6 lg:px-16"> <div class="grid gap-8 lg:grid-cols-12"> <div class="flex flex-col justify-center lg:col-span-5"> <div class="mb-2 max-w-max rounded-lg bg-blue-100 px-3 py-1 text-blue-600" > <p class="text-sm font-bold">INNOVATION</p> </div> <h1 class="mb-4 text-4xl font-bold lg:text-7xl"> Build Better <span class="text-blue-600">Together</span> </h1> <p class="mb-8 text-xl opacity-80"> Empower your team with cutting-edge collaboration tools and innovative solutions. </p> <div class="flex flex-col gap-4 xl:flex-row"> <a href="#contact" class="flex h-14 items-center justify-center rounded-lg bg-blue-600 px-8 text-lg font-semibold text-white hover:bg-blue-700" >Start Project</a > <a href="#learn" class="group flex h-14 items-center justify-center px-8 text-lg font-semibold" > Learn More <i class="fas fa-arrow-right ml-2 transform transition-transform group-hover:translate-x-2" ></i> </a> </div> </div> <div class="lg:col-span-7"> <div class="grid gap-4 md:grid-cols-2"> <div class="group rounded-2xl bg-neutral-100 p-6 transition-transform hover:-translate-y-2 aspect-square" > <div class="mb-4 text-3xl text-blue-600"> <i class="fas fa-rocket"></i> </div> <h3 class="mb-2 text-xl font-bold">Fast Development</h3> <p>Launch your projects quickly with our streamlined process</p> </div> <div class="group rounded-2xl bg-neutral-100 p-6 transition-transform hover:-translate-y-2 lg:mt-8 aspect-square" > <div class="mb-4 text-3xl text-blue-600"> <i class="fas fa-shield-alt"></i> </div> <h3 class="mb-2 text-xl font-bold">Secure Platform</h3> <p>Enterprise-grade security for your peace of mind</p> </div> <div class="group rounded-2xl bg-neutral-100 p-6 transition-transform hover:-translate-y-2 lg:-mt-8 aspect-square" > <div class="mb-4 text-3xl text-blue-600"> <i class="fas fa-users"></i> </div> <h3 class="mb-2 text-xl font-bold">Team Collaboration</h3> <p>Work seamlessly with your team members</p> </div> <div class="group rounded-2xl bg-neutral-100 p-6 transition-transform hover:-translate-y-2 aspect-square" > <div class="mb-4 text-3xl text-blue-600"> <i class="fas fa-chart-line"></i> </div> <h3 class="mb-2 text-xl font-bold">Analytics</h3> <p>Data-driven insights for better decisions</p> </div> </div> </div> </div> </section> COPY ```

INNOVATION

Build Better Together

Empower your team with cutting-edge collaboration tools and innovative solutions.

Start Project Learn More

Fast Development

Launch your projects quickly with our streamlined process

Secure Platform

Enterprise-grade security for your peace of mind

Team Collaboration

Work seamlessly with your team members

Analytics

Data-driven insights for better decisions

``` INNOVATION Build Better Together ======================= Empower your team with cutting-edge collaboration tools and innovative solutions. [Start Project](#contact) [ Learn More ](#learn) ### Fast Development Launch your projects quickly with our streamlined process ### Secure Platform Enterprise-grade security for your peace of mind ### Team Collaboration Work seamlessly with your team members ### Analytics Data-driven insights for better decisions <section layout="container" space="m-x:auto m-b:big-3x p-x:medium-3x tw-lg:p-x:big-3x"> <div layout="grid tw-lg:grid-cols:12" space="g:large"> <div layout="flex col justify:center tw-lg:col-span:5"> <div space="m-b:small max-w:\[max-content\] p-x:small-3x p-y:tiny" visual="rounded:medium bg:blue-100 text:blue-600" > <p visual="text-size:small font:tw-bold">INNOVATION</p> </div> <h1 space="m-b:medium" visual="text-size:giant font:tw-bold tw-lg:text-size:giga"> Build Better <span visual="text:blue-600">Together</span> </h1> <p space="m-b:large" visual="text-size:big opacity:80"> Empower your team with cutting-edge collaboration tools and innovative solutions. </p> <div layout="flex col tw-xl:row" space="g:medium"> <a href="#contact" layout="flex items:center justify:center" space="h:big-2x p-x:large" visual="rounded:medium bg:blue-600 text-size:large font:tw-semibold text:white hover:bg:blue-700" >Start Project</a > <a href="#learn" layout="flex items:center justify:center" space="h:big-2x p-x:large" visual="text-size:large font:tw-semibold" class="group" > Learn More <i space="m-l:small" visual="transition:transform" class="fas fa-arrow-right transform group-hover:translate-x-2" ></i> </a> </div> </div> <div layout="tw-lg:col-span:7"> <div layout="grid tw-md:grid-cols:2" space="g:medium"> <div space="p:medium-3x" visual="rounded:big bg:neutral-100 transition:transform" class="group hover:-translate-y-2 aspect-square" > <div space="m-b:medium" visual="text-size:grand text:blue-600"> <i class="fas fa-rocket"></i> </div> <h3 space="m-b:small" visual="text-size:big font:tw-bold">Fast Development</h3> <p>Launch your projects quickly with our streamlined process</p> </div> <div space="p:medium-3x tw-lg:m-t:large" visual="rounded:big bg:neutral-100 transition:transform" class="group hover:-translate-y-2 aspect-square" > <div space="m-b:medium" visual="text-size:grand text:blue-600"> <i class="fas fa-shield-alt"></i> </div> <h3 space="m-b:small" visual="text-size:big font:tw-bold">Secure Platform</h3> <p>Enterprise-grade security for your peace of mind</p> </div> <div space="p:medium-3x tw-lg:m-t:\[-large\]" visual="rounded:big bg:neutral-100 transition:transform" class="group hover:-translate-y-2 aspect-square" > <div space="m-b:medium" visual="text-size:grand text:blue-600"> <i class="fas fa-users"></i> </div> <h3 space="m-b:small" visual="text-size:big font:tw-bold">Team Collaboration</h3> <p>Work seamlessly with your team members</p> </div> <div space="p:medium-3x" visual="rounded:big bg:neutral-100 transition:transform" class="group hover:-translate-y-2 aspect-square" > <div space="m-b:medium" visual="text-size:grand text:blue-600"> <i class="fas fa-chart-line"></i> </div> <h3 space="m-b:small" visual="text-size:big font:tw-bold">Analytics</h3> <p>Data-driven insights for better decisions</p> </div> </div> </div> </div> </section> COPY ```

INNOVATION

Build Better Together

Empower your team with cutting-edge collaboration tools and innovative solutions.

Start Project Learn More

Fast Development

Launch your projects quickly with our streamlined process

Secure Platform

Enterprise-grade security for your peace of mind

Team Collaboration

Work seamlessly with your team members

Analytics

Data-driven insights for better decisions

``` #### [\#](https://senangstart.com/sections/hero-3/llms.txt)Hero Full BG Image hero Employs a full-width background image with overlaid text and a call-to-action for a bold introduction. TailwindCSS SenangStart CSS Announcement Build Your Project, Effortlessly. ================================= ### We provide end to end solution for business owner to start their business or creating and revamp your digital product. [Learn More](#) <section class="container mx-auto mb-16 overflow-hidden lg:rounded-lg"> <div class="relative flex h-screen items-center justify-center px-6 py-60 lg:h-96 lg:px-16" style=" background-image: url('https://placehold.co/1200x400'); background-size: cover;" > <div class="absolute mx-auto flex max-w-screen-lg flex-col items-center px-6"> <p class="mb-2 text-center text-sm font-semibold lg:text-lg">Announcement</p> <h1 class="mb-4 text-center text-4xl font-bold lg:text-7xl">Build Your Project, Effortlessly.</h1> <h3 class="mb-6 text-center text-2xl font-semibold lg:mb-8 lg:text-4xl">We provide end to end solution for business owner to start their business or creating and revamp your digital product.</h3> <div class="flex w-full justify-center"> <a href="#" class="flex h-14 w-full items-center justify-center rounded-lg bg-blue-600 px-8 text-xl font-semibold text-white hover:opacity-80 lg:max-w-max">Learn More</a> </div> </div> </div> </section> COPY ```

Announcement

Build Your Project, Effortlessly.

We provide end to end solution for business owner to start their business or creating and revamp your digital product.

Learn More
``` Announcement Build Your Project, Effortlessly. ================================= ### We provide end to end solution for business owner to start their business or creating and revamp your digital product. [Learn More](#) <section layout="container overflow:hidden" space="m-x:auto m-b:big-3x" visual="tw-lg:rounded:medium"> <div layout="relative flex items:center justify:center" space="h:\[100vh\] p-x:medium-3x p-y:vast-6x tw-lg:h:vast-10x tw-lg:p-x:big-3x" style=" background-image: url('https://placehold.co/1200x400'); background-size: cover;" > <div layout="absolute flex col items:center" space="m-x:auto max-w:\[screen-lg\] p-x:medium-3x"> <p space="m-b:small" visual="text:center text-size:small font:tw-semibold tw-lg:text-size:large">Announcement</p> <h1 space="m-b:medium" visual="text:center text-size:giant font:tw-bold tw-lg:text-size:giga">Build Your Project, Effortlessly.</h1> <h3 space="m-b:medium-3x tw-lg:m-b:large" visual="text:center text-size:huge font:tw-semibold tw-lg:text-size:giant">We provide end to end solution for business owner to start their business or creating and revamp your digital product.</h3> <div layout="flex justify:center" space="w:\[100%\]"> <a href="#" layout="flex items:center justify:center" space="h:big-2x w:\[100%\] p-x:large tw-lg:max-w:\[max-content\]" visual="rounded:medium bg:blue-600 text-size:big font:tw-semibold text:white hover:opacity:80">Learn More</a> </div> </div> </div> </section> COPY ```

Announcement

Build Your Project, Effortlessly.

We provide end to end solution for business owner to start their business or creating and revamp your digital product.

Learn More
``` #### [\#](https://senangstart.com/sections/hero-2/llms.txt)Hero Split BG Image hero Features a visually striking split background, often combining a color block with an image, for a modern hero. TailwindCSS SenangStart CSS Heat Transfer New Cool Friend =============================== Trust Me, I am Mechanical Engineer Student Too. To Save Time, Let's Assume I'm Right. ![](https://placehold.co/1000x700) <section id="ivz29x" class="relative container mx-auto mb-16"> <div id="i4vabr" class="w-full h-full grid grid-rows-5 absolute top-0 left-0"> <div id="i94quk" class="row-span-4 bg-blue-600 sm:rounded-xl"></div> </div> <div id="iqzvzf" class="pt-32 lg:pt-16 px-6 lg:px-16"> <div id="i50kvv" class="max-w-screen-lg mx-auto flex flex-col items-center text-white sticky"> <h1 id="ikqu22" class="text-4xl lg:text-7xl font-bold text-center mb-4 lg:mb-8"> Heat Transfer<br>New Cool Friend </h1> <p id="iqco7v" class="lg:text-4xl mb-8 lg:mb-16 text-center font-semibold text-black max-w-3xl text-2xl"> Trust Me, I am Mechanical Engineer Student Too. To Save Time, Let's Assume I'm Right.<br> </p> <img id="ib5vuf" src="https://placehold.co/1000x700" class="w-full rounded-lg"> </div> </div> </section> COPY ```

Heat Transfer
New Cool Friend

Trust Me, I am Mechanical Engineer Student Too. To Save Time, Let's Assume I'm Right.

``` Heat Transfer New Cool Friend =============================== Trust Me, I am Mechanical Engineer Student Too. To Save Time, Let's Assume I'm Right. ![](https://placehold.co/1000x700) <section id="ivz29x" layout="relative container" space="m-x:auto m-b:big-3x"> <div id="i4vabr" layout="grid grid-rows:5 absolute top:none left:none" space="w:\[100%\] h:\[100%\]"> <div id="i94quk" layout="row-span:4" visual="bg:blue-600 tw-sm:rounded:medium"></div> </div> <div id="iqzvzf" space="p-t:giant-3x tw-lg:p-t:big-3x p-x:medium-3x tw-lg:p-x:big-3x"> <div id="i50kvv" layout="flex col items:center sticky" space="max-w:\[screen-lg\] m-x:auto" visual="text:white"> <h1 id="ikqu22" space="m-b:medium tw-lg:m-b:large" visual="text-size:giant tw-lg:text-size:giga font:tw-bold text:center"> Heat Transfer<br>New Cool Friend </h1> <p id="iqco7v" space="m-b:large tw-lg:m-b:big-3x max-w:\[3xl\]" visual="tw-lg:text-size:giant text:center font:tw-semibold text:black text-size:huge"> Trust Me, I am Mechanical Engineer Student Too. To Save Time, Let's Assume I'm Right.<br> </p> <img id="ib5vuf" src="https://placehold.co/1000x700" space="w:\[100%\]" visual="rounded:medium"> </div> </div> </section> COPY ```

Heat Transfer
New Cool Friend

Trust Me, I am Mechanical Engineer Student Too. To Save Time, Let's Assume I'm Right.

``` #### [\#](https://senangstart.com/sections/hero-4/llms.txt)Hero Split Overlay hero Creates a dynamic hero with a split layout, featuring an image on one side and an overlapping content panel. TailwindCSS SenangStart CSS ![](https://placehold.co/600x500/2563EB/FFFFFF) ![](https://placehold.co/192x192)Hello & Welcome! A.Hakim Noor ============ A mechanical engineer by training, software engineer by trade. [My Works](#works) [Experiences](#experiences) ![](https://placehold.co/600x500) <section class="relative mx-auto mb-16 lg:container"> <div class="shadow-neumorphic grid w-full overflow-hidden rounded lg:grid-cols-2 lg:rounded-lg"> <div class="relative flex min-h-screen items-center bg-gray-100 lg:min-h-min"> <img src="https://placehold.co/600x500/2563EB/FFFFFF" class="absolute left-0 top-0 h-full w-full object-cover" /> <div class="z-10 w-full px-6 pb-16 pt-40 lg:px-16 lg:py-40"> <div class="flex flex-col items-center rounded-xl bg-white bg-opacity-50 p-6 backdrop-blur-md lg:-mr-80 lg:items-start"> <img src="https://placehold.co/192x192" class="mb-4 w-48 rounded-full shadow-lg lg:hidden" /> <p class="mb-2 text-left font-semibold text-gray-800 lg:text-lg">Hello &amp; Welcome!</p> <h1 class="mb-4 text-left text-4xl font-bold lg:text-7xl">A.Hakim Noor</h1> <p class="mb-6 text-left text-2xl font-semibold lg:mb-8 lg:text-4xl">A mechanical engineer by training, software engineer by trade.</p> <div class="flex w-full flex-col lg:flex-row"> <a href="#works" class="flex h-14 w-full items-center justify-center rounded-lg bg-blue-600 px-8 text-lg font-semibold text-white hover:opacity-80 lg:max-w-max">My Works</a> <div class="h-4 w-full lg:w-4"></div> <a href="#experiences" class="flex h-14 w-full items-center justify-center rounded-lg border-2 border-neutral-800 px-8 text-lg font-semibold text-neutral-800 hover:opacity-80 lg:max-w-max">Experiences</a> </div> </div> </div> </div> <div class="relative hidden bg-gray-200 pt-80 lg:block lg:p-0"><img src="https://placehold.co/600x500" class="absolute left-0 top-0 h-full w-full object-cover" /></div> </div> </section> COPY ```

Hello & Welcome!

A.Hakim Noor

A mechanical engineer by training, software engineer by trade.

My Works
Experiences
``` ![](https://placehold.co/600x500/2563EB/FFFFFF) ![](https://placehold.co/192x192)Hello & Welcome! A.Hakim Noor ============ A mechanical engineer by training, software engineer by trade. [My Works](#works) [Experiences](#experiences) ![](https://placehold.co/600x500) <section layout="relative tw-lg:container" space="m-x:auto m-b:big-3x"> <div layout="grid overflow:hidden tw-lg:grid-cols:2" space="w:\[100%\]" visual="shadow:medium rounded:small tw-lg:rounded:medium"> <div layout="relative flex items:center" space="min-h:\[100vh\] tw-lg:min-h:\[min-content\]" visual="bg:gray-100"> <img src="https://placehold.co/600x500/2563EB/FFFFFF" layout="absolute left:none top:none object:cover" space="h:\[100%\] w:\[100%\]" /> <div space="w:\[100%\] p-x:medium-3x p-b:big-3x p-t:vast tw-lg:p-x:big-3x tw-lg:p-y:vast" class="z-10"> <div layout="flex col items:center tw-lg:items:start" space="p:medium-3x tw-lg:m-r:\[-vast-9x\]" visual="rounded:medium bg:white" class="bg-opacity-50 backdrop-blur-md"> <img src="https://placehold.co/192x192" layout="tw-lg:hidden" space="m-b:medium w:vast-3x" visual="rounded:round shadow:big" /> <p space="m-b:small" visual="text:left font:tw-semibold text:gray-800 tw-lg:text-size:large">Hello &amp; Welcome!</p> <h1 space="m-b:medium" visual="text:left text-size:giant font:tw-bold tw-lg:text-size:giga">A.Hakim Noor</h1> <p space="m-b:medium-3x tw-lg:m-b:large" visual="text:left text-size:huge font:tw-semibold tw-lg:text-size:giant">A mechanical engineer by training, software engineer by trade.</p> <div layout="flex col tw-lg:row" space="w:\[100%\]"> <a href="#works" layout="flex items:center justify:center" space="h:big-2x w:\[100%\] p-x:large tw-lg:max-w:\[max-content\]" visual="rounded:medium bg:blue-600 text-size:large font:tw-semibold text:white hover:opacity:80">My Works</a> <div space="h:medium w:\[100%\] tw-lg:w:medium"></div> <a href="#experiences" layout="flex items:center justify:center" space="h:big-2x w:\[100%\] p-x:large tw-lg:max-w:\[max-content\]" visual="rounded:medium border-w:regular border:neutral-800 text-size:large font:tw-semibold text:neutral-800 hover:opacity:80">Experiences</a> </div> </div> </div> </div> <div layout="relative hidden tw-lg:block" space="p-t:vast-9x tw-lg:p:none" visual="bg:gray-200"><img src="https://placehold.co/600x500" layout="absolute left:none top:none object:cover" space="h:\[100%\] w:\[100%\]" /></div> </div> </section> COPY ```

Hello & Welcome!

A.Hakim Noor

A mechanical engineer by training, software engineer by trade.

``` #### [\#](https://senangstart.com/sections/team-2/llms.txt)Medical Team Grid team Showcases medical professionals with profile images, names, specializations, and social links in a grid layout. TailwindCSS SenangStart CSS ###### Our experienced doctors ![](https://placehold.co/400x600/2563EB/FFFFFF)Ah Chong CEO & Founder ![](https://placehold.co/400x600/2563EB/FFFFFF)Abu Zamir Chief Technology Officer ![](https://placehold.co/400x600/2563EB/FFFFFF)Arjun Chief Operations Officer <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <h6 class="mb-4 text-2xl font-bold lg:text-4xl">Our experienced doctors</h6> <div class="mb-4 grid grid-cols-1 gap-4 lg:mb-8 lg:grid-cols-3"> <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 140%"> <img src="https://placehold.co/400x600/2563EB/FFFFFF" class="absolute top-0 w-full" /> <div class="absolute bottom-0 left-0 flex w-full p-4 text-white" style="background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);"> <div class="flex-grow"> <p class="text-xl">Ah Chong</p> <p class="text-base">CEO & Founder</p> </div> <div class="flex items-center text-4xl"> <a href=""><i class="fab fa-linkedin ml-4"></i></a> <a href=""><i class="fab fa-facebook ml-4"></i></a> </div> </div> </div> <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 140%"> <img src="https://placehold.co/400x600/2563EB/FFFFFF" class="absolute top-0 w-full" /> <div class="absolute bottom-0 left-0 flex w-full p-4 text-white" style="background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);"> <div class="flex-grow"> <p class="text-xl">Abu Zamir</p> <p class="text-base">Chief Technology Officer</p> </div> <div class="flex items-center text-4xl"> <a href=""><i class="fab fa-linkedin ml-4"></i></a> <a href=""><i class="fab fa-facebook ml-4"></i></a> </div> </div> </div> <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 140%"> <img src="https://placehold.co/400x600/2563EB/FFFFFF" class="absolute top-0 w-full" /> <div class="absolute bottom-0 left-0 flex w-full p-4 text-white" style="background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);"> <div class="flex-grow"> <p class="text-xl">Arjun</p> <p class="text-base">Chief Operations Officer</p> </div> <div class="flex items-center text-4xl"> <a href=""><i class="fab fa-linkedin ml-4"></i></a> <a href=""><i class="fab fa-facebook ml-4"></i></a> </div> </div> </div> </div> </section> COPY ```
Our experienced doctors

Ah Chong

CEO & Founder

Abu Zamir

Chief Technology Officer

Arjun

Chief Operations Officer

``` ###### Our experienced doctors ![](https://placehold.co/400x600/2563EB/FFFFFF)Ah Chong CEO & Founder ![](https://placehold.co/400x600/2563EB/FFFFFF)Abu Zamir Chief Technology Officer ![](https://placehold.co/400x600/2563EB/FFFFFF)Arjun Chief Operations Officer <section 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"> <h6 space="m-b:medium" visual="text-size:huge font:tw-bold tw-lg:text-size:giant">Our experienced doctors</h6> <div layout="grid grid-cols:1 tw-lg:grid-cols:3" space="m-b:medium g:medium tw-lg:m-b:large"> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 140%"> <img src="https://placehold.co/400x600/2563EB/FFFFFF" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute bottom:none left:none flex" space="w:\[100%\] p:medium" visual="text:white" style="background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);"> <div layout="grow"> <p visual="text-size:big">Ah Chong</p> <p visual="text-size:base">CEO & Founder</p> </div> <div layout="flex items:center" visual="text-size:giant"> <a href=""><i space="m-l:medium" class="fab fa-linkedin"></i></a> <a href=""><i space="m-l:medium" class="fab fa-facebook"></i></a> </div> </div> </div> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 140%"> <img src="https://placehold.co/400x600/2563EB/FFFFFF" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute bottom:none left:none flex" space="w:\[100%\] p:medium" visual="text:white" style="background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);"> <div layout="grow"> <p visual="text-size:big">Abu Zamir</p> <p visual="text-size:base">Chief Technology Officer</p> </div> <div layout="flex items:center" visual="text-size:giant"> <a href=""><i space="m-l:medium" class="fab fa-linkedin"></i></a> <a href=""><i space="m-l:medium" class="fab fa-facebook"></i></a> </div> </div> </div> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 140%"> <img src="https://placehold.co/400x600/2563EB/FFFFFF" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute bottom:none left:none flex" space="w:\[100%\] p:medium" visual="text:white" style="background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);"> <div layout="grow"> <p visual="text-size:big">Arjun</p> <p visual="text-size:base">Chief Operations Officer</p> </div> <div layout="flex items:center" visual="text-size:giant"> <a href=""><i space="m-l:medium" class="fab fa-linkedin"></i></a> <a href=""><i space="m-l:medium" class="fab fa-facebook"></i></a> </div> </div> </div> </div> </section> COPY ```
Our experienced doctors

Ah Chong

CEO & Founder

Abu Zamir

Chief Technology Officer

Arjun

Chief Operations Officer

``` #### [\#](https://senangstart.com/sections/team-1/llms.txt)Team Leadership Grid team Introduces the leadership team with individual profiles featuring images, roles, and social links in a grid. TailwindCSS SenangStart CSS Our Leadership Driven by Vision, United by Purpose =================================== Meet the passionate leaders guiding our mission to make a difference. ![](https://placehold.co/400x600/2563EB/FFFFFF)Ah Chong CEO & Founder ![](https://placehold.co/400x600/2563EB/FFFFFF)Abu Zamir Chief Technology Officer ![](https://placehold.co/400x600/2563EB/FFFFFF)Arjun Chief Operations Officer <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="mb-4 grid grid-cols-1 lg:mx-24 lg:mb-8"> <div class="col-span-1"> <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Our Leadership</div> </div> <div> <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Driven by Vision, United by Purpose</h1> </div> <div class="flex items-center"> <p class="w-full text-left text-base font-semibold lg:text-2xl">Meet the passionate leaders guiding our mission to make a difference.</p> </div> </div> <div class="mb-4 grid grid-cols-1 gap-4 lg:mb-8 lg:grid-cols-3"> <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 140%"> <img src="https://placehold.co/400x600/2563EB/FFFFFF" class="absolute top-0 w-full" /> <div class="absolute bottom-0 left-0 flex w-full p-4 text-white" style="background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);"> <div class="flex-grow"> <p class="text-xl">Ah Chong</p> <p class="text-base">CEO & Founder</p> </div> <div class="flex items-center text-4xl"> <a href=""><i class="fab fa-linkedin ml-4"></i></a> <a href=""><i class="fab fa-facebook ml-4"></i></a> </div> </div> </div> <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 140%"> <img src="https://placehold.co/400x600/2563EB/FFFFFF" class="absolute top-0 w-full" /> <div class="absolute bottom-0 left-0 flex w-full p-4 text-white" style="background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);"> <div class="flex-grow"> <p class="text-xl">Abu Zamir</p> <p class="text-base">Chief Technology Officer</p> </div> <div class="flex items-center text-4xl"> <a href=""><i class="fab fa-linkedin ml-4"></i></a> <a href=""><i class="fab fa-facebook ml-4"></i></a> </div> </div> </div> <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 140%"> <img src="https://placehold.co/400x600/2563EB/FFFFFF" class="absolute top-0 w-full" /> <div class="absolute bottom-0 left-0 flex w-full p-4 text-white" style="background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);"> <div class="flex-grow"> <p class="text-xl">Arjun</p> <p class="text-base">Chief Operations Officer</p> </div> <div class="flex items-center text-4xl"> <a href=""><i class="fab fa-linkedin ml-4"></i></a> <a href=""><i class="fab fa-facebook ml-4"></i></a> </div> </div> </div> </div> </section> COPY ```
Our Leadership

Driven by Vision, United by Purpose

Meet the passionate leaders guiding our mission to make a difference.

Ah Chong

CEO & Founder

Abu Zamir

Chief Technology Officer

Arjun

Chief Operations Officer

``` Our Leadership Driven by Vision, United by Purpose =================================== Meet the passionate leaders guiding our mission to make a difference. ![](https://placehold.co/400x600/2563EB/FFFFFF)Ah Chong CEO & Founder ![](https://placehold.co/400x600/2563EB/FFFFFF)Abu Zamir Chief Technology Officer ![](https://placehold.co/400x600/2563EB/FFFFFF)Arjun Chief Operations Officer <section 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 layout="grid grid-cols:1" space="m-b:medium tw-lg:m-x:giant tw-lg:m-b:large"> <div layout="col-span:1"> <div space="m-b:small max-w:\[max-content\] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:blue-600 font:tw-bold text:blue-600">Our Leadership</div> </div> <div> <h1 space="m-b:small tw-lg:m-b:medium" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">Driven by Vision, United by Purpose</h1> </div> <div layout="flex items:center"> <p space="w:\[100%\]" visual="text:left text-size:base font:tw-semibold tw-lg:text-size:huge">Meet the passionate leaders guiding our mission to make a difference.</p> </div> </div> <div layout="grid grid-cols:1 tw-lg:grid-cols:3" space="m-b:medium g:medium tw-lg:m-b:large"> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 140%"> <img src="https://placehold.co/400x600/2563EB/FFFFFF" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute bottom:none left:none flex" space="w:\[100%\] p:medium" visual="text:white" style="background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);"> <div layout="grow"> <p visual="text-size:big">Ah Chong</p> <p visual="text-size:base">CEO & Founder</p> </div> <div layout="flex items:center" visual="text-size:giant"> <a href=""><i space="m-l:medium" class="fab fa-linkedin"></i></a> <a href=""><i space="m-l:medium" class="fab fa-facebook"></i></a> </div> </div> </div> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 140%"> <img src="https://placehold.co/400x600/2563EB/FFFFFF" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute bottom:none left:none flex" space="w:\[100%\] p:medium" visual="text:white" style="background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);"> <div layout="grow"> <p visual="text-size:big">Abu Zamir</p> <p visual="text-size:base">Chief Technology Officer</p> </div> <div layout="flex items:center" visual="text-size:giant"> <a href=""><i space="m-l:medium" class="fab fa-linkedin"></i></a> <a href=""><i space="m-l:medium" class="fab fa-facebook"></i></a> </div> </div> </div> <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 140%"> <img src="https://placehold.co/400x600/2563EB/FFFFFF" layout="absolute top:none" space="w:\[100%\]" /> <div layout="absolute bottom:none left:none flex" space="w:\[100%\] p:medium" visual="text:white" style="background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);"> <div layout="grow"> <p visual="text-size:big">Arjun</p> <p visual="text-size:base">Chief Operations Officer</p> </div> <div layout="flex items:center" visual="text-size:giant"> <a href=""><i space="m-l:medium" class="fab fa-linkedin"></i></a> <a href=""><i space="m-l:medium" class="fab fa-facebook"></i></a> </div> </div> </div> </div> </section> COPY ```
Our Leadership

Driven by Vision, United by Purpose

Meet the passionate leaders guiding our mission to make a difference.

Ah Chong

CEO & Founder

Abu Zamir

Chief Technology Officer

Arjun

Chief Operations Officer

``` #### [\#](https://senangstart.com/sections/navbar-6/llms.txt)Navbar Announce User navigation Provides a multi-level navigation with an announcement bar, main links, and user account/profile options. TailwindCSS SenangStart CSS 🎉 New Feature Alert: Try our AI-powered analytics - [Learn More](#) [ ](#) [ ](#) [ ](#) ![Logo](https://placehold.co/120x48) [Dashboard](#) [Analytics](#) [Reports](#) [Team](#) ![User](https://placehold.co/32x32) John Doe [ Project Dashboard ](#) Last updated: 2 minutes ago [ Help ](#) <div class="w-full lg:h-40"> <nav class="w-full p-6 z-50" x-data="{ isOpen: false }"> <!-- Announcement Bar --> <div class="container mx-auto mb-4"> <div class="flex items-center justify-between rounded-lg bg-blue-600 px-4 py-2 text-white" > <p class="text-sm"> 🎉 New Feature Alert: Try our AI-powered analytics - <a href="#" class="underline hover:text-blue-200">Learn More</a> </p> <div class="hidden lg:flex lg:items-center lg:gap-4"> <a href="#" class="text-sm hover:text-blue-200"> <i class="fab fa-twitter"></i> </a> <a href="#" class="text-sm hover:text-blue-200"> <i class="fab fa-linkedin"></i> </a> <a href="#" class="text-sm hover:text-blue-200"> <i class="fab fa-github"></i> </a> </div> </div> </div> <!-- Main Navigation --> <div class="container mx-auto rounded-lg bg-white bg-opacity-80 p-2 backdrop-blur backdrop-filter" > <div class="flex flex-col lg:flex-row"> <!-- Logo & Mobile Menu --> <div class="flex h-12 items-center"> <img src="https://placehold.co/120x48" class="h-full" alt="Logo" /> <div class="flex-grow lg:hidden"></div> <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" class="flex w-12 cursor-pointer items-center justify-center lg:hidden" > <span :class="!isOpen ? '' : 'hidden'"> <i class="fas fa-bars"></i> </span> <span :class="isOpen ? '' : 'hidden'"> <i class="fas fa-times"></i> </span> </div> </div> <!-- Navigation Links --> <div :class="isOpen ? '' : 'hidden'" class="flex-grow flex-col justify-end pt-4 lg:flex lg:flex-row lg:items-center lg:pt-0" > <a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0" >Dashboard</a > <a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0" >Analytics</a > <a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0" >Reports</a > <a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0" >Team</a > <!-- User Menu --> <div class="relative ml-4"> <button class="flex items-center gap-2 rounded-lg px-4 py-2 hover:bg-neutral-100" > <img src="https://placehold.co/32x32" class="h-8 w-8 rounded-full" alt="User" /> <span class="font-semibold">John Doe</span> <i class="fas fa-chevron-down text-sm"></i> </button> </div> </div> </div> <!-- Secondary Navigation --> <div class="mt-2 flex h-8 w-full items-center border-t border-neutral-200 px-2 pt-2 text-sm" > <div class="flex-grow"> <a href="#" class="flex items-center gap-1 font-semibold text-blue-600 hover:underline" > <i class="fas fa-home"></i> Project Dashboard </a> </div> <div class="flex items-center gap-4"> <span class="text-neutral-500">Last updated: 2 minutes ago</span> <div class="h-4 w-px bg-neutral-200"></div> <a href="#" class="flex items-center gap-1 hover:text-blue-600"> <i class="fas fa-question-circle"></i> Help </a> </div> </div> </div> </nav> </div> COPY ```
``` 🎉 New Feature Alert: Try our AI-powered analytics - [Learn More](#) [ ](#) [ ](#) [ ](#) ![Logo](https://placehold.co/120x48) [Dashboard](#) [Analytics](#) [Reports](#) [Team](#) ![User](https://placehold.co/32x32) John Doe [ Project Dashboard ](#) Last updated: 2 minutes ago [ Help ](#) <div space="w:\[100%\] tw-lg:h:vast"> <nav space="w:\[100%\] p:medium-3x" class="z-50" x-data="{ isOpen: false }"> <!-- Announcement Bar --> <div layout="container" space="m-x:auto m-b:medium"> <div layout="flex items:center justify:between" space="p-x:medium p-y:small" visual="rounded:medium bg:blue-600 text:white" > <p visual="text-size:small"> 🎉 New Feature Alert: Try our AI-powered analytics - <a href="#" visual="underline hover:text:blue-200">Learn More</a> </p> <div layout="hidden tw-lg:flex tw-lg:items:center" space="tw-lg:g:medium"> <a href="#" visual="text-size:small hover:text:blue-200"> <i class="fab fa-twitter"></i> </a> <a href="#" visual="text-size:small hover:text:blue-200"> <i class="fab fa-linkedin"></i> </a> <a href="#" visual="text-size:small hover:text:blue-200"> <i class="fab fa-github"></i> </a> </div> </div> </div> <!-- Main Navigation --> <div layout="container" space="m-x:auto p:small" visual="rounded:medium bg:white" class="bg-opacity-80 backdrop-blur backdrop-filter" > <div layout="flex col tw-lg:row"> <!-- Logo & Mobile Menu --> <div layout="flex items:center" space="h:big"> <img src="https://placehold.co/120x48" space="h:\[100%\]" alt="Logo" /> <div layout="grow tw-lg:hidden"></div> <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" layout="flex items:center justify:center tw-lg:hidden" space="w:big" visual="cursor:pointer" > <span :class="!isOpen ? '' : 'hidden'"> <i class="fas fa-bars"></i> </span> <span :class="isOpen ? '' : 'hidden'"> <i class="fas fa-times"></i> </span> </div> </div> <!-- Navigation Links --> <div :class="isOpen ? '' : 'hidden'" layout="grow col justify:end tw-lg:flex tw-lg:row tw-lg:items:center" space="p-t:medium tw-lg:p-t:none" > <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none" visual="hover:text:blue-600" >Dashboard</a > <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none" visual="hover:text:blue-600" >Analytics</a > <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none" visual="hover:text:blue-600" >Reports</a > <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none" visual="hover:text:blue-600" >Team</a > <!-- User Menu --> <div layout="relative" space="m-l:medium"> <button layout="flex items:center" space="g:small p-x:medium p-y:small" visual="rounded:medium hover:bg:neutral-100" > <img src="https://placehold.co/32x32" space="h:large w:large" visual="rounded:round" alt="User" /> <span visual="font:tw-semibold">John Doe</span> <i visual="text-size:small" class="fas fa-chevron-down"></i> </button> </div> </div> </div> <!-- Secondary Navigation --> <div layout="flex items:center" space="m-t:small h:large w:\[100%\] p-x:small p-t:small" visual="border:neutral-200 text-size:small" class="border-t" > <div layout="grow"> <a href="#" layout="flex items:center" space="g:tiny" visual="font:tw-semibold text:blue-600 hover:underline" > <i class="fas fa-home"></i> Project Dashboard </a> </div> <div layout="flex items:center" space="g:medium"> <span visual="text:neutral-500">Last updated: 2 minutes ago</span> <div space="h:medium w:thin" visual="bg:neutral-200"></div> <a href="#" layout="flex items:center" space="g:tiny" visual="hover:text:blue-600"> <i class="fas fa-question-circle"></i> Help </a> </div> </div> </div> </nav> </div> COPY ```
``` #### [\#](https://senangstart.com/sections/navbar-5/llms.txt)Navbar Mega Menu navigation Implements a sophisticated navigation bar with a mega menu for displaying extensive links and rich content. TailwindCSS SenangStart CSS ![Logo](https://placehold.co/120x48) Products ### Software Solutions [ Enterprise Suite Complete business management ](#) [ Mobile Solutions Apps for iOS and Android ](#) ### Services [ Custom Development Tailored to your needs ](#) [ Cloud Services Scalable infrastructure ](#) [Solutions](#) [Resources](#) [Pricing](#) [ Sign In ](#) [ Start Free Trial ](#) <div class="w-full lg:h-28"> <nav class="z-50 w-full p-6" x-data="{ isOpen: false, activeMega: null }"> <div class="container mx-auto rounded-lg bg-white bg-opacity-80 p-2 backdrop-blur backdrop-filter"> <div class="flex flex-col lg:flex-row"> <!-- Logo & Mobile Menu --> <div class="flex h-12 items-center"> <img src="https://placehold.co/120x48" class="h-full" alt="Logo" /> <div class="flex-grow lg:hidden"></div> <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" class="flex w-12 cursor-pointer items-center justify-center lg:hidden"> <span :class="!isOpen ? '' : 'hidden'"> <i class="fas fa-bars"></i> </span> <span :class="isOpen ? '' : 'hidden'"> <i class="fas fa-times"></i> </span> </div> </div> <!-- Navigation Links --> <div :class="isOpen ? '' : 'hidden'" class="flex-grow flex-col justify-end pt-4 lg:flex lg:flex-row lg:items-center lg:pt-0"> <div class="relative"> <button @click="activeMega = activeMega === 'products' ? null : 'products'" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0"> Products <i class="fas fa-chevron-down ml-2 text-sm"></i> </button> <!-- Mega Menu - Products --> <div x-show="activeMega === 'products'" @click.outside="activeMega = null" class="absolute left-0 mt-2 w-full max-w-2xl rounded-lg bg-white p-6 shadow-xl md:w-screen"> <div class="grid gap-6 lg:grid-cols-2"> <div> <h3 class="mb-4 text-lg font-bold">Software Solutions</h3> <div class="grid gap-4"> <a href="#" class="flex items-center gap-3 rounded-lg p-3 hover:bg-neutral-100"> <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600"> <i class="fas fa-desktop"></i> </div> <div> <p class="font-semibold">Enterprise Suite</p> <p class="text-sm text-neutral-600">Complete business management</p> </div> </a> <a href="#" class="flex items-center gap-3 rounded-lg p-3 hover:bg-neutral-100"> <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600"> <i class="fas fa-mobile-alt"></i> </div> <div> <p class="font-semibold">Mobile Solutions</p> <p class="text-sm text-neutral-600">Apps for iOS and Android</p> </div> </a> </div> </div> <div> <h3 class="mb-4 text-lg font-bold">Services</h3> <div class="grid gap-4"> <a href="#" class="flex items-center gap-3 rounded-lg p-3 hover:bg-neutral-100"> <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600"> <i class="fas fa-code"></i> </div> <div> <p class="font-semibold">Custom Development</p> <p class="text-sm text-neutral-600">Tailored to your needs</p> </div> </a> <a href="#" class="flex items-center gap-3 rounded-lg p-3 hover:bg-neutral-100"> <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600"> <i class="fas fa-cloud"></i> </div> <div> <p class="font-semibold">Cloud Services</p> <p class="text-sm text-neutral-600">Scalable infrastructure</p> </div> </a> </div> </div> </div> </div> </div> <a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0">Solutions</a> <a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0">Resources</a> <a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0">Pricing</a> <div class="flex flex-col gap-2 lg:ml-4 lg:flex-row lg:items-center"> <a href="#" class="flex h-12 items-center justify-center rounded-lg px-6 font-semibold hover:bg-neutral-100"> Sign In </a> <a href="#" class="flex h-12 items-center justify-center rounded-lg bg-blue-600 px-6 font-semibold text-white hover:bg-blue-700"> Start Free Trial </a> </div> </div> </div> </div> </nav> </div> COPY ```
``` ![Logo](https://placehold.co/120x48) Products ### Software Solutions [ Enterprise Suite Complete business management ](#) [ Mobile Solutions Apps for iOS and Android ](#) ### Services [ Custom Development Tailored to your needs ](#) [ Cloud Services Scalable infrastructure ](#) [Solutions](#) [Resources](#) [Pricing](#) [ Sign In ](#) [ Start Free Trial ](#) <div space="w:\[100%\] tw-lg:h:giant-2x"> <nav space="w:\[100%\] p:medium-3x" class="z-50" x-data="{ isOpen: false, activeMega: null }"> <div layout="container" space="m-x:auto p:small" visual="rounded:medium bg:white" class="bg-opacity-80 backdrop-blur backdrop-filter"> <div layout="flex col tw-lg:row"> <!-- Logo & Mobile Menu --> <div layout="flex items:center" space="h:big"> <img src="https://placehold.co/120x48" space="h:\[100%\]" alt="Logo" /> <div layout="grow tw-lg:hidden"></div> <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" layout="flex items:center justify:center tw-lg:hidden" space="w:big" visual="cursor:pointer"> <span :class="!isOpen ? '' : 'hidden'"> <i class="fas fa-bars"></i> </span> <span :class="isOpen ? '' : 'hidden'"> <i class="fas fa-times"></i> </span> </div> </div> <!-- Navigation Links --> <div :class="isOpen ? '' : 'hidden'" layout="grow col justify:end tw-lg:flex tw-lg:row tw-lg:items:center" space="p-t:medium tw-lg:p-t:none"> <div layout="relative"> <button @click="activeMega = activeMega === 'products' ? null : 'products'" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none" visual="hover:text:blue-600"> Products <i space="m-l:small" visual="text-size:small" class="fas fa-chevron-down"></i> </button> <!-- Mega Menu - Products --> <div x-show="activeMega === 'products'" @click.outside="activeMega = null" layout="absolute left:none" space="m-t:small w:\[100%\] max-w:\[tw-2xl\] p:medium-3x tw-md:w:\[100vw\]" visual="rounded:medium bg:white shadow:giant"> <div layout="grid tw-lg:grid-cols:2" space="g:medium-3x"> <div> <h3 space="m-b:medium" visual="text-size:large font:tw-bold">Software Solutions</h3> <div layout="grid" space="g:medium"> <a href="#" layout="flex items:center" space="g:small-3x p:small-3x" visual="rounded:medium hover:bg:neutral-100"> <div layout="flex items:center justify:center" space="h:large-3x w:large-3x" visual="rounded:medium bg:blue-100 text:blue-600"> <i class="fas fa-desktop"></i> </div> <div> <p visual="font:tw-semibold">Enterprise Suite</p> <p visual="text-size:small text:neutral-600">Complete business management</p> </div> </a> <a href="#" layout="flex items:center" space="g:small-3x p:small-3x" visual="rounded:medium hover:bg:neutral-100"> <div layout="flex items:center justify:center" space="h:large-3x w:large-3x" visual="rounded:medium bg:blue-100 text:blue-600"> <i class="fas fa-mobile-alt"></i> </div> <div> <p visual="font:tw-semibold">Mobile Solutions</p> <p visual="text-size:small text:neutral-600">Apps for iOS and Android</p> </div> </a> </div> </div> <div> <h3 space="m-b:medium" visual="text-size:large font:tw-bold">Services</h3> <div layout="grid" space="g:medium"> <a href="#" layout="flex items:center" space="g:small-3x p:small-3x" visual="rounded:medium hover:bg:neutral-100"> <div layout="flex items:center justify:center" space="h:large-3x w:large-3x" visual="rounded:medium bg:blue-100 text:blue-600"> <i class="fas fa-code"></i> </div> <div> <p visual="font:tw-semibold">Custom Development</p> <p visual="text-size:small text:neutral-600">Tailored to your needs</p> </div> </a> <a href="#" layout="flex items:center" space="g:small-3x p:small-3x" visual="rounded:medium hover:bg:neutral-100"> <div layout="flex items:center justify:center" space="h:large-3x w:large-3x" visual="rounded:medium bg:blue-100 text:blue-600"> <i class="fas fa-cloud"></i> </div> <div> <p visual="font:tw-semibold">Cloud Services</p> <p visual="text-size:small text:neutral-600">Scalable infrastructure</p> </div> </a> </div> </div> </div> </div> </div> <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none" visual="hover:text:blue-600">Solutions</a> <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none" visual="hover:text:blue-600">Resources</a> <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none" visual="hover:text:blue-600">Pricing</a> <div layout="flex col tw-lg:row tw-lg:items:center" space="g:small tw-lg:m-l:medium"> <a href="#" layout="flex items:center justify:center" space="h:big p-x:medium-3x" visual="rounded:medium font:tw-semibold hover:bg:neutral-100"> Sign In </a> <a href="#" layout="flex items:center justify:center" space="h:big p-x:medium-3x" visual="rounded:medium bg:blue-600 font:tw-semibold text:white hover:bg:blue-700"> Start Free Trial </a> </div> </div> </div> </div> </nav> </div> COPY ```
``` #### [\#](https://senangstart.com/sections/navbar-2/llms.txt)Navbar Prev/Next Nav navigation A navigation bar incorporating 'Previous' and 'Next' links, suitable for navigating sequential content or articles. TailwindCSS SenangStart CSS ![Logo](https://placehold.co/120x48) [Service](#) [Works](#) [Insight](#) [Support](#) [Contact Us](#) Prev Back to main Next <div class="w-full lg:h-40"> <nav class="z-50 w-full p-6" x-data="{ isOpen: false }"> <div class="container mx-auto w-full rounded-lg bg-white bg-opacity-80 p-2 backdrop-blur backdrop-filter"> <div class="flex flex-col lg:flex-row"> <div class="flex h-12 items-center"> <img src="https://placehold.co/120x48" class="h-full" alt="Logo" /> <div class="flex-grow lg:hidden"></div> <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" class="flex w-12 cursor-pointer items-center justify-center lg:hidden"> <span :class="!isOpen ? '' : 'hidden'"> <i class="fas fa-bars"></i> </span> <span :class="isOpen ? '' : 'hidden'"> <i class="fas fa-times"></i> </span> </div> </div> <div :class="isOpen ? '' : 'hidden'" class="flex-grow flex-col justify-end pt-4 lg:flex lg:flex-row lg:pt-0"> <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Service</a> <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Works</a> <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Insight</a> <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Support</a> <a href="#" class="mx-4 mb-4 mt-4 flex h-12 items-center justify-center rounded-lg bg-blue-600 px-6 text-white lg:mb-0 lg:ml-4 lg:mr-0 lg:mt-0">Contact Us</a> </div> </div> <div class="mt-2 flex h-8 w-full items-center border-t border-gray-100 px-2 pt-2 text-sm font-semibold"> <div> <a href=""> <i class="fas fa-chevron-left mr-2"></i> Prev </a> </div> <div class="flex-grow text-center"> <a href="" class="underline">Back to main</a> </div> <div> <a href=""> Next<i class="fas fa-chevron-right ml-2"></i> </a> </div> </div> </div> </nav> </div> COPY ```
``` ![Logo](https://placehold.co/120x48) [Service](#) [Works](#) [Insight](#) [Support](#) [Contact Us](#) Prev Back to main Next <div space="w:\[100%\] tw-lg:h:vast"> <nav space="w:\[100%\] p:medium-3x" class="z-50" x-data="{ isOpen: false }"> <div layout="container" space="m-x:auto w:\[100%\] p:small" visual="rounded:medium bg:white" class="bg-opacity-80 backdrop-blur backdrop-filter"> <div layout="flex col tw-lg:row"> <div layout="flex items:center" space="h:big"> <img src="https://placehold.co/120x48" class="h-full" alt="Logo" /> <div layout="grow tw-lg:hidden"></div> <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" layout="flex items:center justify:center tw-lg:hidden" space="w:big" visual="cursor:pointer"> <span :class="!isOpen ? '' : 'hidden'"> <i class="fas fa-bars"></i> </span> <span :class="isOpen ? '' : 'hidden'"> <i class="fas fa-times"></i> </span> </div> </div> <div :class="isOpen ? '' : 'hidden'" layout="grow col justify:end tw-lg:flex tw-lg:row" space="p-t:medium tw-lg:p-t:none"> <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Service</a> <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Works</a> <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Insight</a> <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Support</a> <a href="#" layout="flex items:center justify:center" space="m-x:medium m-b:medium m-t:medium h:big p-x:medium-3x tw-lg:m-b:none tw-lg:m-l:medium tw-lg:m-r:none tw-lg:m-t:none" visual="rounded:medium bg:blue-600 text:white">Contact Us</a> </div> </div> <div layout="flex items:center" space="m-t:small h:large w:\[100%\] p-x:small p-t:small" visual="border:gray-100 text-size:small font:tw-semibold" class="border-t"> <div> <a href=""> <i space="m-r:small" class="fas fa-chevron-left"></i> Prev </a> </div> <div layout="grow" visual="text:center"> <a href="" visual="underline">Back to main</a> </div> <div> <a href=""> Next<i space="m-l:small" class="fas fa-chevron-right"></i> </a> </div> </div> </div> </nav> </div> COPY ```
``` #### [\#](https://senangstart.com/sections/navbar-3/llms.txt)Navbar Top Bar Links navigation A navigation bar with a top utility strip for contact info and social links, above the main site navigation. TailwindCSS SenangStart CSS +60123456789 Location, Country ![Logo](https://placehold.co/120x48) [About](#) [Service](#) [Operating Hour](#) [Booking an Appoinment](#) <div class="w-full lg:h-40"> <nav class="z-50 w-full p-6" x-data="{ isOpen: false }"> <div class="container mx-auto w-full rounded-lg bg-white bg-opacity-80 p-2 backdrop-blur backdrop-filter"> <div class="mb-2 flex h-8 w-full items-center text-sm font-semibold"> <div class="flex flex-grow"> <a href="" class="flex h-8 items-center px-3"> <i class="fas fa-phone p-0 lg:pr-2"></i> <p class="hidden lg:block">+60123456789</p> </a> <a href="" class="flex h-8 items-center px-3"> <i class="fas fa-map-marker-alt p-0 lg:pr-2"></i> <p class="hidden lg:block">Location, Country</p> </a> </div> <div class="flex"> <a href="" class="flex h-8 w-8 items-center justify-center"> <i class="fab fa-facebook"></i> </a> <a href="" class="flex h-8 w-8 items-center justify-center"> <i class="fab fa-twitter"></i> </a> <a href="" class="flex h-8 w-8 items-center justify-center"> <i class="fab fa-linkedin"></i> </a> </div> </div> <div class="w-full border-t pb-2"></div> <div class="flex flex-col lg:flex-row"> <div class="flex h-12 items-center"> <img src="https://placehold.co/120x48" class="h-full" alt="Logo" /> <div class="flex-grow lg:hidden"></div> <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" class="flex w-12 items-center justify-center lg:hidden"> <span :class="!isOpen ? '' : 'hidden'"> <i class="fas fa-bars"></i> </span> <span :class="isOpen ? '' : 'hidden'"> <i class="fas fa-times"></i> </span> </div> </div> <div :class="isOpen ? '' : 'hidden'" class="flex-grow flex-col justify-end pt-4 lg:flex lg:flex-row lg:pt-0"> <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">About</a> <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Service</a> <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Operating Hour</a> <a href="#" class="mx-4 mb-4 mt-4 flex h-12 items-center justify-center rounded-lg bg-blue-600 px-6 text-white lg:mb-0 lg:ml-4 lg:mr-0 lg:mt-0">Booking an Appoinment</a> </div> </div> </div> </nav> </div> COPY ```
``` +60123456789 Location, Country ![Logo](https://placehold.co/120x48) [About](#) [Service](#) [Operating Hour](#) [Booking an Appoinment](#) <div space="w:\[100%\] tw-lg:h:vast"> <nav space="w:\[100%\] p:medium-3x" class="z-50" x-data="{ isOpen: false }"> <div layout="container" space="m-x:auto w:\[100%\] p:small" visual="rounded:medium bg:white" class="bg-opacity-80 backdrop-blur backdrop-filter"> <div layout="flex items:center" space="m-b:small h:large w:\[100%\]" visual="text-size:small font:tw-semibold"> <div layout="flex grow"> <a href="" layout="flex items:center" space="h:large p-x:small-3x"> <i space="p:none tw-lg:p-r:small" class="fas fa-phone"></i> <p layout="hidden tw-lg:block">+60123456789</p> </a> <a href="" layout="flex items:center" space="h:large p-x:small-3x"> <i space="p:none tw-lg:p-r:small" class="fas fa-map-marker-alt"></i> <p layout="hidden tw-lg:block">Location, Country</p> </a> </div> <div layout="flex"> <a href="" layout="flex items:center justify:center" space="h:large w:large"> <i class="fab fa-facebook"></i> </a> <a href="" layout="flex items:center justify:center" space="h:large w:large"> <i class="fab fa-twitter"></i> </a> <a href="" layout="flex items:center justify:center" space="h:large w:large"> <i class="fab fa-linkedin"></i> </a> </div> </div> <div space="w:\[100%\] p-b:small" class="border-t"></div> <div layout="flex col tw-lg:row"> <div layout="flex items:center" space="h:big"> <img src="https://placehold.co/120x48" class="h-full" alt="Logo" /> <div layout="grow tw-lg:hidden"></div> <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" layout="flex items:center justify:center tw-lg:hidden" space="w:big"> <span :class="!isOpen ? '' : 'hidden'"> <i class="fas fa-bars"></i> </span> <span :class="isOpen ? '' : 'hidden'"> <i class="fas fa-times"></i> </span> </div> </div> <div :class="isOpen ? '' : 'hidden'" layout="grow col justify:end tw-lg:flex tw-lg:row" space="p-t:medium tw-lg:p-t:none"> <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">About</a> <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Service</a> <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Operating Hour</a> <a href="#" layout="flex items:center justify:center" space="m-x:medium m-b:medium m-t:medium h:big p-x:medium-3x tw-lg:m-b:none tw-lg:m-l:medium tw-lg:m-r:none tw-lg:m-t:none" visual="rounded:medium bg:blue-600 text:white">Booking an Appoinment</a> </div> </div> </div> </nav> </div> COPY ```
``` #### [\#](https://senangstart.com/sections/navbar-4/llms.txt)Navbar with Search navigation A clean navigation bar that includes primary links and an integrated search field for user convenience. TailwindCSS SenangStart CSS ![Logo](https://placehold.co/120x48) [Home](#) [Products](#) [Solutions](#) [About](#) [ Get Started ](#) <div class="w-full lg:h-28"> <nav class="w-full p-6 z-50" x-data="{ isOpen: false, isSearchOpen: false }" > <div class="container mx-auto flex flex-col rounded-lg bg-white bg-opacity-80 p-2 backdrop-blur backdrop-filter lg:flex-row" > <!-- Logo & Mobile Menu --> <div class="flex h-12 items-center"> <img src="https://placehold.co/120x48" class="h-full" alt="Logo" /> <div class="flex-grow lg:hidden"></div> <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" class="flex w-12 cursor-pointer items-center justify-center lg:hidden" > <span :class="!isOpen ? '' : 'hidden'"> <i class="fas fa-bars"></i> </span> <span :class="isOpen ? '' : 'hidden'"> <i class="fas fa-times"></i> </span> </div> </div> <!-- Navigation Links --> <div :class="isOpen ? '' : 'hidden'" class="flex-grow flex-col justify-end pt-4 lg:flex lg:flex-row lg:items-center lg:pt-0" > <a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0" >Home</a > <a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0" >Products</a > <a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0" >Solutions</a > <a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0" >About</a > <!-- Search Bar --> <div class="relative mx-4 hidden lg:block"> <input type="text" placeholder="Search..." class="w-48 rounded-lg border border-neutral-200 px-4 py-2 pl-10 focus:border-blue-600 focus:outline-none" /> <i class="fas fa-search absolute left-3 top-3 text-neutral-400" ></i> </div> <a href="#" class="mx-4 mb-4 mt-4 flex h-12 items-center justify-center rounded-lg bg-blue-600 px-6 text-white hover:bg-blue-700 lg:mb-0 lg:ml-4 lg:mr-0 lg:mt-0" > Get Started </a> </div> </div> </nav> </div> COPY ```
``` ![Logo](https://placehold.co/120x48) [Home](#) [Products](#) [Solutions](#) [About](#) [ Get Started ](#) <div space="w:\[100%\] tw-lg:h:giant-2x"> <nav space="w:\[100%\] p:medium-3x" class="z-50" x-data="{ isOpen: false, isSearchOpen: false }" > <div layout="container flex col tw-lg:row" space="m-x:auto p:small" visual="rounded:medium bg:white" class="bg-opacity-80 backdrop-blur backdrop-filter" > <!-- Logo & Mobile Menu --> <div layout="flex items:center" space="h:big"> <img src="https://placehold.co/120x48" space="h:\[100%\]" alt="Logo" /> <div layout="grow tw-lg:hidden"></div> <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" layout="flex items:center justify:center tw-lg:hidden" space="w:big" visual="cursor:pointer" > <span :class="!isOpen ? '' : 'hidden'"> <i class="fas fa-bars"></i> </span> <span :class="isOpen ? '' : 'hidden'"> <i class="fas fa-times"></i> </span> </div> </div> <!-- Navigation Links --> <div :class="isOpen ? '' : 'hidden'" layout="grow col justify:end tw-lg:flex tw-lg:row tw-lg:items:center" space="p-t:medium tw-lg:p-t:none" > <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none" visual="hover:text:blue-600" >Home</a > <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none" visual="hover:text:blue-600" >Products</a > <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none" visual="hover:text:blue-600" >Solutions</a > <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none" visual="hover:text:blue-600" >About</a > <!-- Search Bar --> <div layout="relative hidden tw-lg:block" space="m-x:medium"> <input type="text" placeholder="Search..." space="w:vast-3x p-x:medium p-y:small p-l:large-3x" visual="rounded:medium border-w:thin border:neutral-200 focus:border:blue-600 focus:outline:none" /> <i layout="absolute left:small-3x top:small-3x" visual="text:neutral-400" class="fas fa-search" ></i> </div> <a href="#" layout="flex items:center justify:center" space="m-x:medium m-b:medium m-t:medium h:big p-x:medium-3x tw-lg:m-b:none tw-lg:m-l:medium tw-lg:m-r:none tw-lg:m-t:none" visual="rounded:medium bg:blue-600 text:white hover:bg:blue-700" > Get Started </a> </div> </div> </nav> </div> COPY ```
``` #### [\#](https://senangstart.com/sections/navbar-1/llms.txt)Standard Navbar navigation A fundamental navigation bar featuring a logo, essential page links, and a primary call-to-action button. TailwindCSS SenangStart CSS ![Logo](https://placehold.co/120x48) [Service](#) [Works](#) [Insight](#) [Support](#) [Contact Us](#) <div class="w-full lg:h-28"> <nav class="z-50 w-full p-6" x-data="{ isOpen: false }"> <div class="container mx-auto flex w-full flex-col rounded-lg bg-white bg-opacity-80 p-2 backdrop-blur backdrop-filter lg:flex-row"> <div class="flex h-12 items-center"> <img src="https://placehold.co/120x48" class="h-full" alt="Logo" /> <div class="flex-grow lg:hidden"></div> <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" class="flex w-12 cursor-pointer items-center justify-center lg:hidden"> <span :class="!isOpen ? '' : 'hidden'"> <i class="fas fa-bars"></i> </span> <span :class="isOpen ? '' : 'hidden'"> <i class="fas fa-times"></i> </span> </div> </div> <div :class="isOpen ? '' : 'hidden'" class="flex-grow flex-col justify-end pt-4 lg:flex lg:flex-row lg:pt-0"> <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Service</a> <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Works</a> <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Insight</a> <a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Support</a> <a href="#" class="mx-4 mb-4 mt-4 flex h-12 items-center justify-center rounded-lg bg-blue-600 px-6 text-white lg:mb-0 lg:ml-4 lg:mr-0 lg:mt-0">Contact Us</a> </div> </div> </nav> </div> COPY ```
``` ![Logo](https://placehold.co/120x48) [Service](#) [Works](#) [Insight](#) [Support](#) [Contact Us](#) <div space="w:\[100%\] tw-lg:h:giant-2x"> <nav space="w:\[100%\] p:medium-3x" class="z-50" x-data="{ isOpen: false }"> <div layout="container flex col tw-lg:row" space="m-x:auto w:\[100%\] p:small" visual="rounded:medium bg:white" class="bg-opacity-80 backdrop-blur backdrop-filter"> <div layout="flex items:center" space="h:big"> <img src="https://placehold.co/120x48" class="h-full" alt="Logo" /> <div layout="grow tw-lg:hidden"></div> <div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" layout="flex items:center justify:center tw-lg:hidden" space="w:big" visual="cursor:pointer"> <span :class="!isOpen ? '' : 'hidden'"> <i class="fas fa-bars"></i> </span> <span :class="isOpen ? '' : 'hidden'"> <i class="fas fa-times"></i> </span> </div> </div> <div :class="isOpen ? '' : 'hidden'" layout="grow col justify:end tw-lg:flex tw-lg:row" space="p-t:medium tw-lg:p-t:none"> <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Service</a> <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Works</a> <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Insight</a> <a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Support</a> <a href="#" layout="flex items:center justify:center" space="m-x:medium m-b:medium m-t:medium h:big p-x:medium-3x tw-lg:m-b:none tw-lg:m-l:medium tw-lg:m-r:none tw-lg:m-t:none" visual="rounded:medium bg:blue-600 text:white">Contact Us</a> </div> </div> </nav> </div> COPY ```
``` #### [\#](https://senangstart.com/sections/pricing-2/llms.txt)Pricing Compare Table pricing Presents a clear comparison of different pricing plans and their respective features in a tabular layout. TailwindCSS SenangStart CSS Compare Plans ------------- Find the perfect plan for your team. All plans include unlimited projects and secure cloud storage. Features Free Pro Enterprise Price $0 $49/month Custom Team members Up to 3 Up to 20 Unlimited Storage 10 GB 100 GB Unlimited API Access Custom Domain Analytics Basic Advanced Custom Support Community Priority Dedicated [Start Free](#) [Upgrade](#) [Contact Us](#) <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="mb-12 text-center"> <h2 class="mb-4 text-3xl font-bold lg:text-6xl">Compare Plans</h2> <p class="mx-auto max-w-2xl text-lg"> Find the perfect plan for your team. All plans include unlimited projects and secure cloud storage. </p> </div> <div class="overflow-x-auto rounded-lg border"> <table class="w-full min-w-max"> <thead> <tr class="bg-neutral-100"> <th class="p-4 text-left">Features</th> <th class="p-4 text-center">Free</th> <th class="p-4 text-center">Pro</th> <th class="p-4 text-center">Enterprise</th> </tr> </thead> <tbody> <tr class="border-t"> <td class="p-4 font-semibold">Price</td> <td class="p-4 text-center">$0</td> <td class="p-4 text-center">$49/month</td> <td class="p-4 text-center">Custom</td> </tr> <tr class="border-t bg-neutral-50"> <td class="p-4">Team members</td> <td class="p-4 text-center">Up to 3</td> <td class="p-4 text-center">Up to 20</td> <td class="p-4 text-center">Unlimited</td> </tr> <tr class="border-t"> <td class="p-4">Storage</td> <td class="p-4 text-center">10 GB</td> <td class="p-4 text-center">100 GB</td> <td class="p-4 text-center">Unlimited</td> </tr> <tr class="border-t bg-neutral-50"> <td class="p-4">API Access</td> <td class="p-4 text-center"> <i class="fas fa-times text-red-500"></i> </td> <td class="p-4 text-center"> <i class="fas fa-check text-green-500"></i> </td> <td class="p-4 text-center"> <i class="fas fa-check text-green-500"></i> </td> </tr> <tr class="border-t"> <td class="p-4">Custom Domain</td> <td class="p-4 text-center"> <i class="fas fa-times text-red-500"></i> </td> <td class="p-4 text-center"> <i class="fas fa-check text-green-500"></i> </td> <td class="p-4 text-center"> <i class="fas fa-check text-green-500"></i> </td> </tr> <tr class="border-t bg-neutral-50"> <td class="p-4">Analytics</td> <td class="p-4 text-center">Basic</td> <td class="p-4 text-center">Advanced</td> <td class="p-4 text-center">Custom</td> </tr> <tr class="border-t"> <td class="p-4">Support</td> <td class="p-4 text-center">Community</td> <td class="p-4 text-center">Priority</td> <td class="p-4 text-center">Dedicated</td> </tr> <tr class="border-t bg-neutral-50"> <td class="p-4"></td> <td class="p-4 text-center"> <a href="#" class="inline-block rounded-lg border-2 border-blue-600 px-6 py-2 font-semibold text-blue-600 hover:bg-blue-600 hover:text-white" >Start Free</a > </td> <td class="p-4 text-center"> <a href="#" class="inline-block rounded-lg bg-blue-600 px-6 py-2 font-semibold text-white hover:bg-blue-700" >Upgrade</a > </td> <td class="p-4 text-center"> <a href="#" class="inline-block rounded-lg border-2 border-blue-600 px-6 py-2 font-semibold text-blue-600 hover:bg-blue-600 hover:text-white" >Contact Us</a > </td> </tr> </tbody> </table> </div> </section> COPY ```

Compare Plans

Find the perfect plan for your team. All plans include unlimited projects and secure cloud storage.

Features Free Pro Enterprise
Price $0 $49/month Custom
Team members Up to 3 Up to 20 Unlimited
Storage 10 GB 100 GB Unlimited
API Access
Custom Domain
Analytics Basic Advanced Custom
Support Community Priority Dedicated
Start Free Upgrade Contact Us
``` Compare Plans ------------- Find the perfect plan for your team. All plans include unlimited projects and secure cloud storage. Features Free Pro Enterprise Price $0 $49/month Custom Team members Up to 3 Up to 20 Unlimited Storage 10 GB 100 GB Unlimited API Access Custom Domain Analytics Basic Advanced Custom Support Community Priority Dedicated [Start Free](#) [Upgrade](#) [Contact Us](#) <section 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 space="m-b:big" visual="text:center"> <h2 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mega">Compare Plans</h2> <p space="m-x:auto max-w:\[2xl\]" visual="text-size:large"> Find the perfect plan for your team. All plans include unlimited projects and secure cloud storage. </p> </div> <div visual="rounded:medium border-w:thin" class="overflow-x-auto"> <table space="w:\[100%\] min-w:\[max-content\]"> <thead> <tr visual="bg:neutral-100"> <th space="p:medium" visual="text:left">Features</th> <th space="p:medium" visual="text:center">Free</th> <th space="p:medium" visual="text:center">Pro</th> <th space="p:medium" visual="text:center">Enterprise</th> </tr> </thead> <tbody> <tr class="border-t"> <td space="p:medium" visual="font:tw-semibold">Price</td> <td space="p:medium" visual="text:center">$0</td> <td space="p:medium" visual="text:center">$49/month</td> <td space="p:medium" visual="text:center">Custom</td> </tr> <tr visual="bg:neutral-50" class="border-t"> <td space="p:medium">Team members</td> <td space="p:medium" visual="text:center">Up to 3</td> <td space="p:medium" visual="text:center">Up to 20</td> <td space="p:medium" visual="text:center">Unlimited</td> </tr> <tr class="border-t"> <td space="p:medium">Storage</td> <td space="p:medium" visual="text:center">10 GB</td> <td space="p:medium" visual="text:center">100 GB</td> <td space="p:medium" visual="text:center">Unlimited</td> </tr> <tr visual="bg:neutral-50" class="border-t"> <td space="p:medium">API Access</td> <td space="p:medium" visual="text:center"> <i visual="text:red-500" class="fas fa-times"></i> </td> <td space="p:medium" visual="text:center"> <i visual="text:green-500" class="fas fa-check"></i> </td> <td space="p:medium" visual="text:center"> <i visual="text:green-500" class="fas fa-check"></i> </td> </tr> <tr class="border-t"> <td space="p:medium">Custom Domain</td> <td space="p:medium" visual="text:center"> <i visual="text:red-500" class="fas fa-times"></i> </td> <td space="p:medium" visual="text:center"> <i visual="text:green-500" class="fas fa-check"></i> </td> <td space="p:medium" visual="text:center"> <i visual="text:green-500" class="fas fa-check"></i> </td> </tr> <tr visual="bg:neutral-50" class="border-t"> <td space="p:medium">Analytics</td> <td space="p:medium" visual="text:center">Basic</td> <td space="p:medium" visual="text:center">Advanced</td> <td space="p:medium" visual="text:center">Custom</td> </tr> <tr class="border-t"> <td space="p:medium">Support</td> <td space="p:medium" visual="text:center">Community</td> <td space="p:medium" visual="text:center">Priority</td> <td space="p:medium" visual="text:center">Dedicated</td> </tr> <tr visual="bg:neutral-50" class="border-t"> <td space="p:medium"></td> <td space="p:medium" visual="text:center"> <a href="#" layout="inline" space="p-x:medium-3x p-y:small" visual="rounded:medium border-w:regular border:blue-600 font:tw-semibold text:blue-600 hover:bg:blue-600 hover:text:white" >Start Free</a > </td> <td space="p:medium" visual="text:center"> <a href="#" layout="inline" space="p-x:medium-3x p-y:small" visual="rounded:medium bg:blue-600 font:tw-semibold text:white hover:bg:blue-700" >Upgrade</a > </td> <td space="p:medium" visual="text:center"> <a href="#" layout="inline" space="p-x:medium-3x p-y:small" visual="rounded:medium border-w:regular border:blue-600 font:tw-semibold text:blue-600 hover:bg:blue-600 hover:text:white" >Contact Us</a > </td> </tr> </tbody> </table> </div> </section> COPY ```

Compare Plans

Find the perfect plan for your team. All plans include unlimited projects and secure cloud storage.

Features Free Pro Enterprise
Price $0 $49/month Custom
Team members Up to 3 Up to 20 Unlimited
Storage 10 GB 100 GB Unlimited
API Access
Custom Domain
Analytics Basic Advanced Custom
Support Community Priority Dedicated
Start Free Upgrade Contact Us
``` #### [\#](https://senangstart.com/sections/pricing-1/llms.txt)Pricing Toggle Cards pricing Offers pricing plans in card format with an interactive toggle for monthly/annual views and savings display. TailwindCSS SenangStart CSS Pricing Choose Your Perfect Plan -------------------------- Select the plan that best suits your needs. All plans include our core features with different usage limits. Monthly Annual Save 20% ### Starter Perfect for small businesses /month - Up to 5 users - Basic analytics - 24/7 support [Get Started](#) MOST POPULAR ### Pro Best for growing teams /month - Up to 20 users - Advanced analytics - Priority support - Custom integrations [Get Started](#) ### Enterprise For large organizations /month - Unlimited users - Custom analytics - Dedicated support - Advanced security [Contact Sales](#) <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16" x-data="{ annual: false }" > <div class="text-center"> <div class="mx-auto mb-2 w-min rounded-lg bg-blue-600 px-2 py-1"> <p class="text-sm font-bold uppercase text-white">Pricing</p> </div> <h2 class="mb-4 text-3xl font-bold capitalize lg:text-6xl"> Choose Your Perfect Plan </h2> <p class="mx-auto mb-8 max-w-2xl text-lg lg:text-xl"> Select the plan that best suits your needs. All plans include our core features with different usage limits. </p> <div class="mb-8 flex items-center justify-center gap-4"> <span :class="{ 'text-blue-600 font-bold': !annual }">Monthly</span> <button @click="annual = !annual" class="relative h-8 w-16 rounded-full bg-blue-600 transition-colors" :class="{ 'bg-blue-400': !annual }" > <span class="absolute left-1 top-1 h-6 w-6 rounded-full bg-white transition-transform" :class="{ 'translate-x-8': annual }" > </span> </button> <span :class="{ 'text-blue-600 font-bold': annual }">Annual</span> <span class="rounded-full bg-green-100 px-3 py-1 text-sm text-green-600" >Save 20%</span > </div> <div class="grid gap-8 lg:grid-cols-3"> <!-- Starter Plan --> <div class="flex flex-col rounded-lg border-2 border-neutral-200 p-8"> <h3 class="mb-2 text-2xl font-bold">Starter</h3> <p class="mb-6">Perfect for small businesses</p> <div class="mb-6"> <span class="text-4xl font-bold" x-text="annual ? '$190' : '$19'" ></span> <span class="text-neutral-500">/month</span> </div> <ul class="mb-8 space-y-4"> <li class="flex items-center"> <i class="fas fa-check-circle mr-2 text-green-500"></i> <span>Up to 5 users</span> </li> <li class="flex items-center"> <i class="fas fa-check-circle mr-2 text-green-500"></i> <span>Basic analytics</span> </li> <li class="flex items-center"> <i class="fas fa-check-circle mr-2 text-green-500"></i> <span>24/7 support</span> </li> </ul> <a href="#" class="mt-auto flex h-12 items-center justify-center rounded-lg border-2 border-blue-600 font-semibold text-blue-600 hover:bg-blue-600 hover:text-white" >Get Started</a > </div> <!-- Pro Plan --> <div class="flex flex-col rounded-lg border-2 border-blue-600 bg-blue-50 p-8" > <div class="mb-4 -mt-12 rounded-full bg-blue-600 px-4 py-1 text-center text-sm font-bold text-white" > MOST POPULAR </div> <h3 class="mb-2 text-2xl font-bold">Pro</h3> <p class="mb-6">Best for growing teams</p> <div class="mb-6"> <span class="text-4xl font-bold" x-text="annual ? '$490' : '$49'" ></span> <span class="text-neutral-500">/month</span> </div> <ul class="mb-8 space-y-4"> <li class="flex items-center"> <i class="fas fa-check-circle mr-2 text-green-500"></i> <span>Up to 20 users</span> </li> <li class="flex items-center"> <i class="fas fa-check-circle mr-2 text-green-500"></i> <span>Advanced analytics</span> </li> <li class="flex items-center"> <i class="fas fa-check-circle mr-2 text-green-500"></i> <span>Priority support</span> </li> <li class="flex items-center"> <i class="fas fa-check-circle mr-2 text-green-500"></i> <span>Custom integrations</span> </li> </ul> <a href="#" class="mt-auto flex h-12 items-center justify-center rounded-lg bg-blue-600 font-semibold text-white hover:bg-blue-700" >Get Started</a > </div> <!-- Enterprise Plan --> <div class="flex flex-col rounded-lg border-2 border-neutral-200 p-8"> <h3 class="mb-2 text-2xl font-bold">Enterprise</h3> <p class="mb-6">For large organizations</p> <div class="mb-6"> <span class="text-4xl font-bold" x-text="annual ? '$990' : '$99'" ></span> <span class="text-neutral-500">/month</span> </div> <ul class="mb-8 space-y-4"> <li class="flex items-center"> <i class="fas fa-check-circle mr-2 text-green-500"></i> <span>Unlimited users</span> </li> <li class="flex items-center"> <i class="fas fa-check-circle mr-2 text-green-500"></i> <span>Custom analytics</span> </li> <li class="flex items-center"> <i class="fas fa-check-circle mr-2 text-green-500"></i> <span>Dedicated support</span> </li> <li class="flex items-center"> <i class="fas fa-check-circle mr-2 text-green-500"></i> <span>Advanced security</span> </li> </ul> <a href="#" class="mt-auto flex h-12 items-center justify-center rounded-lg border-2 border-blue-600 font-semibold text-blue-600 hover:bg-blue-600 hover:text-white" >Contact Sales</a > </div> </div> </div> </section> COPY ```

Pricing

Choose Your Perfect Plan

Select the plan that best suits your needs. All plans include our core features with different usage limits.

Monthly Annual Save 20%

Starter

Perfect for small businesses

/month
  • Up to 5 users
  • Basic analytics
  • 24/7 support
Get Started
MOST POPULAR

Pro

Best for growing teams

/month
  • Up to 20 users
  • Advanced analytics
  • Priority support
  • Custom integrations
Get Started

Enterprise

For large organizations

/month
  • Unlimited users
  • Custom analytics
  • Dedicated support
  • Advanced security
Contact Sales
``` Pricing Choose Your Perfect Plan -------------------------- Select the plan that best suits your needs. All plans include our core features with different usage limits. Monthly Annual Save 20% ### Starter Perfect for small businesses /month - Up to 5 users - Basic analytics - 24/7 support [Get Started](#) MOST POPULAR ### Pro Best for growing teams /month - Up to 20 users - Advanced analytics - Priority support - Custom integrations [Get Started](#) ### Enterprise For large organizations /month - Unlimited users - Custom analytics - Dedicated support - Advanced security [Contact Sales](#) <section 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" x-data="{ annual: false }" > <div visual="text:center"> <div space="m-x:auto m-b:small w:\[min-content\] p-x:small p-y:tiny" visual="rounded:medium bg:blue-600"> <p visual="text-size:small font:tw-bold uppercase text:white">Pricing</p> </div> <h2 space="m-b:medium" visual="text-size:grand font:tw-bold capitalize tw-lg:text-size:mega"> Choose Your Perfect Plan </h2> <p space="m-x:auto m-b:large max-w:\[2xl\]" visual="text-size:large tw-lg:text-size:big"> Select the plan that best suits your needs. All plans include our core features with different usage limits. </p> <div layout="flex items:center justify:center" space="m-b:large g:medium"> <span :class="{ 'text-blue-600 font-bold': !annual }">Monthly</span> <button @click="annual = !annual" layout="relative" space="h:large w:big-3x" visual="rounded:round bg:blue-600 transition:colors" :class="{ 'bg-blue-400': !annual }" > <span layout="absolute left:tiny top:tiny" space="h:medium-3x w:medium-3x" visual="rounded:round bg:white transition:transform" :class="{ 'translate-x-8': annual }" > </span> </button> <span :class="{ 'text-blue-600 font-bold': annual }">Annual</span> <span space="p-x:small-3x p-y:tiny" visual="rounded:round bg:green-100 text-size:small text:green-600" >Save 20%</span > </div> <div layout="grid tw-lg:grid-cols:3" space="g:large"> <!-- Starter Plan --> <div layout="flex col" space="p:large" visual="rounded:medium border-w:regular border:neutral-200"> <h3 space="m-b:small" visual="text-size:huge font:tw-bold">Starter</h3> <p space="m-b:medium-3x">Perfect for small businesses</p> <div space="m-b:medium-3x"> <span visual="text-size:giant font:tw-bold" x-text="annual ? '$190' : '$19'" ></span> <span visual="text:neutral-500">/month</span> </div> <ul space="m-b:large" class="space-y-4"> <li layout="flex items:center"> <i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i> <span>Up to 5 users</span> </li> <li layout="flex items:center"> <i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i> <span>Basic analytics</span> </li> <li layout="flex items:center"> <i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i> <span>24/7 support</span> </li> </ul> <a href="#" layout="flex items:center justify:center" space="m-t:auto h:big" visual="rounded:medium border-w:regular border:blue-600 font:tw-semibold text:blue-600 hover:bg:blue-600 hover:text:white" >Get Started</a > </div> <!-- Pro Plan --> <div layout="flex col" space="p:large" visual="rounded:medium border-w:regular border:blue-600 bg:blue-50" > <div space="m-b:medium m-t:\[-big\] p-x:medium p-y:tiny" visual="rounded:round bg:blue-600 text:center text-size:small font:tw-bold text:white" > MOST POPULAR </div> <h3 space="m-b:small" visual="text-size:huge font:tw-bold">Pro</h3> <p space="m-b:medium-3x">Best for growing teams</p> <div space="m-b:medium-3x"> <span visual="text-size:giant font:tw-bold" x-text="annual ? '$490' : '$49'" ></span> <span visual="text:neutral-500">/month</span> </div> <ul space="m-b:large" class="space-y-4"> <li layout="flex items:center"> <i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i> <span>Up to 20 users</span> </li> <li layout="flex items:center"> <i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i> <span>Advanced analytics</span> </li> <li layout="flex items:center"> <i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i> <span>Priority support</span> </li> <li layout="flex items:center"> <i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i> <span>Custom integrations</span> </li> </ul> <a href="#" layout="flex items:center justify:center" space="m-t:auto h:big" visual="rounded:medium bg:blue-600 font:tw-semibold text:white hover:bg:blue-700" >Get Started</a > </div> <!-- Enterprise Plan --> <div layout="flex col" space="p:large" visual="rounded:medium border-w:regular border:neutral-200"> <h3 space="m-b:small" visual="text-size:huge font:tw-bold">Enterprise</h3> <p space="m-b:medium-3x">For large organizations</p> <div space="m-b:medium-3x"> <span visual="text-size:giant font:tw-bold" x-text="annual ? '$990' : '$99'" ></span> <span visual="text:neutral-500">/month</span> </div> <ul space="m-b:large" class="space-y-4"> <li layout="flex items:center"> <i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i> <span>Unlimited users</span> </li> <li layout="flex items:center"> <i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i> <span>Custom analytics</span> </li> <li layout="flex items:center"> <i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i> <span>Dedicated support</span> </li> <li layout="flex items:center"> <i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i> <span>Advanced security</span> </li> </ul> <a href="#" layout="flex items:center justify:center" space="m-t:auto h:big" visual="rounded:medium border-w:regular border:blue-600 font:tw-semibold text:blue-600 hover:bg:blue-600 hover:text:white" >Contact Sales</a > </div> </div> </div> </section> COPY ```

Pricing

Choose Your Perfect Plan

Select the plan that best suits your needs. All plans include our core features with different usage limits.

Monthly Annual Save 20%

Starter

Perfect for small businesses

/month
  • Up to 5 users
  • Basic analytics
  • 24/7 support
Get Started
MOST POPULAR

Pro

Best for growing teams

/month
  • Up to 20 users
  • Advanced analytics
  • Priority support
  • Custom integrations
Get Started

Enterprise

For large organizations

/month
  • Unlimited users
  • Custom analytics
  • Dedicated support
  • Advanced security
Contact Sales
```