Alternating Experiences
App Screenshot Previews
Award Showcase Grid
Bonus Content Grid
Course Card Grid
Course Offer Cards
Custom Section Benefits
Dual Product Cards
Filterable Portfolio
Offer Image Grid
Partners & Clients
Portfolio Reveal Grid
Quality Asym Images
Service Icon Grid
Specialty Icon Grid
STEM Learning Previews
Template Showcase Grid
Webinar Grid
#Custom Section Benefits
showcaseIllustrates the benefits of versatile, customizable website sections, often with visual examples and a call-to-action.
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
<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>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
<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>