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
#Hero BG Pattern Card
heroFeatures a dynamic hero section with a patterned background, overlaying key information in a prominent card.
NEW RELEASE
Next Generation Development Platform
Build scalable applications with modern tools and frameworks
Join over 10,000+ developers worldwide
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>NEW RELEASE
Next Generation Development Platform
Build scalable applications with modern tools and frameworks
Join over 10,000+ developers worldwide
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>