updated our commitment image and text
This commit is contained in:
@@ -28,26 +28,26 @@ const {
|
||||
: columns === 2
|
||||
? 'sm:grid-cols-2 '
|
||||
: ''
|
||||
} grid-flow-row auto-rows-fr`,
|
||||
} grid-flow-row auto-rows-fr text-center sm:text-left`,
|
||||
containerClass
|
||||
)}
|
||||
>
|
||||
{items.map(({ title, description, icon, callToAction, classes: itemClasses = {} }) => (
|
||||
<div class="intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade h-full">
|
||||
<div class={twMerge('flex flex-row max-w-md h-full min-h-[220px] backdrop-blur-sm bg-white/15 dark:bg-transparent p-3 rounded-md border border-gray-200 dark:border-gray-700 hover:bg-white/30 hover:backdrop-blur-md dark:hover:backdrop-blur-md transition-all duration-300 ease-in-out', panelClass, itemClasses?.panel)}>
|
||||
<div class="flex justify-center flex-shrink-0">
|
||||
<div class={twMerge('flex flex-col sm:flex-row max-w-md mx-auto sm:mx-0 h-full min-h-[220px] backdrop-blur-sm bg-white/15 dark:bg-transparent p-3 rounded-md border border-gray-200 dark:border-gray-700 hover:bg-white/30 hover:backdrop-blur-md dark:hover:backdrop-blur-md transition-all duration-300 ease-in-out', panelClass, itemClasses?.panel)}>
|
||||
<div class="flex justify-center sm:justify-start flex-shrink-0 mb-2 sm:mb-0">
|
||||
{(icon || defaultIcon) && (
|
||||
<Icon
|
||||
name={icon || defaultIcon}
|
||||
class={twMerge('w-7 h-7 mr-2 rtl:mr-0 rtl:ml-2', defaultIconClass, itemClasses?.icon)}
|
||||
class={twMerge('w-7 h-7 sm:mr-2 rtl:sm:mr-0 rtl:sm:ml-2', defaultIconClass, itemClasses?.icon)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div class="mt-0.5 flex flex-col overflow-hidden flex-grow">
|
||||
<div class="mt-0.5 flex flex-col overflow-hidden flex-grow items-center sm:items-start">
|
||||
{title && <h3 class={twMerge('text-xl font-bold', titleClass, itemClasses?.title)}>{title}</h3>}
|
||||
{description && (
|
||||
<p
|
||||
class={twMerge(`${title ? 'mt-3' : ''} text-muted overflow-y-auto`, descriptionClass, itemClasses?.description)}
|
||||
class={twMerge(`${title ? 'mt-3' : ''} text-muted text-base overflow-y-auto`, descriptionClass, itemClasses?.description)}
|
||||
set:html={description}
|
||||
/>
|
||||
)}
|
||||
|
@@ -28,14 +28,14 @@ const {
|
||||
: columns === 2
|
||||
? 'sm:grid-cols-2 '
|
||||
: ''
|
||||
}`,
|
||||
} mx-auto text-center sm:text-left`,
|
||||
containerClass
|
||||
)}
|
||||
>
|
||||
{items.map(({ title, description, icon, callToAction, classes: itemClasses = {} }) => (
|
||||
<div
|
||||
class={twMerge(
|
||||
'relative flex flex-col intersect-once intersect-quarter intercept-no-queue motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade',
|
||||
'relative flex flex-col items-center sm:items-start mx-auto sm:mx-0 intersect-once intersect-quarter intercept-no-queue motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade',
|
||||
panelClass,
|
||||
itemClasses?.panel
|
||||
)}
|
||||
@@ -45,7 +45,7 @@ const {
|
||||
)}
|
||||
<div class={twMerge('text-xl font-bold', titleClass, itemClasses?.title)}>{title}</div>
|
||||
{description && (
|
||||
<p class={twMerge('text-muted mt-2', descriptionClass, itemClasses?.description)} set:html={description} />
|
||||
<p class={twMerge('text-muted text-base mt-2', descriptionClass, itemClasses?.description)} set:html={description} />
|
||||
)}
|
||||
{callToAction && (
|
||||
<div class="mt-2">
|
||||
|
@@ -37,7 +37,7 @@ const {
|
||||
<h3 class="text-base font-semibold">{title}</h3>
|
||||
</div>
|
||||
<div class="text-muted overflow-hidden">
|
||||
<p class="text-sm max-h-[12rem] hover:max-h-[300px] transition-all duration-500 ease-skills">{description}</p>
|
||||
<p class="text-base max-h-[12rem] hover:max-h-[300px] transition-all duration-500 ease-skills">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
@@ -68,20 +68,20 @@ const {
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div aria-hidden="true" class="mt-10 md:mt-0 md:basis-1/2">
|
||||
<div aria-hidden="true" class="hidden sm:flex mt-10 md:mt-0 md:basis-1/2 self-center items-center">
|
||||
{
|
||||
image && (
|
||||
<div class="relative m-auto max-w-4xl">
|
||||
<div class="relative m-auto w-full max-w-4xl py-4 md:py-8 lg:py-10 xl:py-12 lg:max-w-5xl xl:max-w-6xl">
|
||||
{typeof image === 'string' ? (
|
||||
<Fragment set:html={image} />
|
||||
) : (
|
||||
<Image
|
||||
class="mx-auto w-full rounded-lg bg-gray-500 shadow-lg"
|
||||
width={500}
|
||||
height={500}
|
||||
widths={[400, 768]}
|
||||
sizes="(max-width: 768px) 100vw, 432px"
|
||||
layout="responsive"
|
||||
class="mx-auto h-full rounded-lg bg-gray-500 shadow-lg object-contain md:max-h-[650px] lg:max-h-[750px] xl:max-h-[850px]"
|
||||
width={480}
|
||||
height={750}
|
||||
widths={[400, 768, 1024, 1280, 1536]}
|
||||
sizes="(max-width: 640px) 0px, (max-width: 768px) 100vw, (max-width: 1024px) 50vw, (max-width: 1280px) 600px, 800px"
|
||||
layout="constrained"
|
||||
{...image}
|
||||
/>
|
||||
)}
|
||||
|
@@ -126,7 +126,7 @@ const {
|
||||
aria-label="Main navigation"
|
||||
>
|
||||
<ul
|
||||
class="flex flex-col md:flex-row md:self-center w-full md:w-auto text-xl md:text-[0.9375rem] tracking-[0.01rem] font-medium md:justify-center"
|
||||
class="flex flex-col md:flex-row md:self-center w-full md:w-auto text-base md:text-lg tracking-[0.01rem] font-medium md:justify-center"
|
||||
>
|
||||
{
|
||||
links.map(({ text, href, links }) => (
|
||||
|
Reference in New Issue
Block a user