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
#Filterable Portfolio
showcasePresents a dynamic portfolio where users can filter projects by category, with details for each item.
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
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
<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>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
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
<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>