updated our commitment image and text

This commit is contained in:
becarta
2025-03-12 04:41:49 +01:00
parent c7331e5d47
commit a2ecf840a8
11 changed files with 54 additions and 56 deletions

View File

@@ -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}
/>
)}

View File

@@ -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">

View File

@@ -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>
))}

View File

@@ -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}
/>
)}

View File

@@ -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 }) => (