feat: various fixes

4 files changed, 17 insertions, 17 deletions

diff --git a/src/components/ui/HeroButton.astro b/src/components/ui/HeroButton.astro
index f7a07c6..0d85f87 100644
--- a/src/components/ui/HeroButton.astro
+++ b/src/components/ui/HeroButton.astro
@@ -23,7 +23,7 @@ const variants = {
 
 {
   type === 'button' || type === 'submit' || type === 'reset' ? (
-    <button type={type} class={twMerge(variants[variant] || '', className, 'group relative overflow-hidden')} {...rest}>
+    <button type={type} class={twMerge(variants[variant] || '', className, 'group relative overflow-hidden rounded-md')} {...rest}>
       <span class="flex items-center justify-center">
         <Fragment set:html={text} />
         {icon && <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5 inline-block" />}
@@ -35,7 +35,7 @@ const variants = {
     </button>
   ) : (
     <a
-      class={twMerge(variants[variant] || '', className, 'group relative overflow-hidden')}
+      class={twMerge(variants[variant] || '', className, 'group relative overflow-hidden rounded-md')}
       {...(target ? { target: target, rel: 'noopener noreferrer' } : {})}
       {...rest}
     >
diff --git a/src/components/widgets/Features2Custom.astro b/src/components/widgets/Features2Custom.astro
index 605fd08..a52b8d0 100644
--- a/src/components/widgets/Features2Custom.astro
+++ b/src/components/widgets/Features2Custom.astro
@@ -53,13 +53,13 @@ const {
         {items.map(({ title, description, icon, iconSvg, 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 rounded-lg shadow-[0_4px_30px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur border border-[#ffffff29] bg-white dark:bg-slate-900 p-6',
+              'relative flex flex-col items-center sm:items-start intersect-once intersect-quarter intercept-no-queue motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade rounded-lg shadow-[0_4px_30px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur border border-[#ffffff29] bg-white dark:bg-slate-900 p-6',
               panelClass,
               itemClasses?.panel
             )}
           >
             {(icon || iconSvg || defaultIcon) && (
-              <div class={twMerge('mb-6 w-12 h-12', defaultIconClass, itemClasses?.icon)}>
+              <div class={twMerge('mb-6 w-16 h-16', defaultIconClass, itemClasses?.icon)}>
                 {iconSvg ? (
                   <div set:html={readFileSync(join(process.cwd(), iconSvg.replace('/src/', 'src/')), 'utf-8')} />
                 ) : (
@@ -70,7 +70,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)}
+                class={twMerge('text-muted mt-2 text-center sm:text-left', descriptionClass, itemClasses?.description)}
                 set:html={description}
               />
             )}
diff --git a/src/components/widgets/HeroBackground.astro b/src/components/widgets/HeroBackground.astro
index 904bc23..a88174b 100644
--- a/src/components/widgets/HeroBackground.astro
+++ b/src/components/widgets/HeroBackground.astro
@@ -61,7 +61,7 @@ const {
               <Image
                 src={logoPath}
                 alt="CustomWorks Logo"
-                class="mx-auto max-h-20 md:max-h-24 lg:max-h-28 w-auto object-contain"
+                class="mx-auto max-h-16 md:max-h-24 lg:max-h-28 w-auto object-contain"
                 widths={[200, 300, 400]}
                 sizes="(max-width: 767px) 200px, (max-width: 1023px) 300px, 400px"
                 loading="eager"
@@ -101,10 +101,10 @@ const {
 
         {
           actions && (
-            <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 lg:justify-center lg:m-0 lg:max-w-7xl intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter">
+            <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col items-center sm:flex-row sm:justify-center gap-4 lg:justify-center lg:m-0 lg:max-w-7xl intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter">
               {Array.isArray(actions) ? (
                 actions.map((action) => (
-                  <div class="flex w-full sm:w-auto">
+                  <div class="flex w-3/5 sm:w-auto">
                     <HeroButton {...(action || {})} class="w-full sm:mb-0" />
                   </div>
                 ))
diff --git a/src/components/widgets/Pricing.astro b/src/components/widgets/Pricing.astro
index b0c2fa1..8333fde 100644
--- a/src/components/widgets/Pricing.astro
+++ b/src/components/widgets/Pricing.astro
@@ -26,7 +26,7 @@ const {
     classes={{
       container: 'max-w-xl sm:mx-auto lg:max-w-2xl',
       title: 'text-4xl md:text-5xl font-bold tracking-tighter mb-4 font-heading',
-      subtitle: 'max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400',
+      subtitle: 'max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-800',
     }}
   />
   <div class="mt-12">
@@ -39,15 +39,15 @@ const {
               .filter((_, index) => index % 2 === 0)
               .map((item) => (
                 <div class="mb-8">
-                  {item.title && <h3 class="text-lg font-bold leading-6 dark:text-white mb-4">{item.title}</h3>}
-                  <hr class="mb-8 border-2" />
+                  {item.title && <h3 class="text-lg font-bold leading-6 mb-4">{item.title}</h3>}
+                  <hr class="mb-8 border-1 shadow-sm border-black" />
                   {item.entries && item.entries.length > 0 && (
                     <table class="w-full border-collapse">
                       <tbody>
                         {item.entries.map((entry) => (
                           <tr class="h-12">
-                            <td class="w-1/2 h-12 px-4 text-muted dark:text-slate-400" set:html={entry.description} />
-                            <td class="w-1/2 text-right h-12 px-4 text-muted dark:text-slate-400">{entry.price}</td>
+                            <td class="w-1/2 h-12 px-4 text-muted dark:text-slate-800" set:html={entry.description} />
+                            <td class="w-1/2 text-right h-12 px-4 text-muted dark:text-slate-800">{entry.price}</td>
                           </tr>
                         ))}
                       </tbody>
@@ -66,14 +66,14 @@ const {
               .map((item) => (
                 <div class="mb-8">
                   {item.title && <h3 class="text-lg font-bold leading-6 dark:text-white mb-4">{item.title}</h3>}
-                  <hr class="mb-8 border-2" />
+                  <hr class="mb-8 border-1 shadow-sm border-black" />
                   {item.entries && item.entries.length > 0 && (
                     <table class="w-full border-collapse">
                       <tbody>
                         {item.entries.map((entry) => (
                           <tr class="h-12">
-                            <td class="w-1/2 h-12 px-4 text-muted dark:text-slate-400" set:html={entry.description} />
-                            <td class="w-1/2 text-right h-12 px-4 text-muted dark:text-slate-400">{entry.price}</td>
+                            <td class="w-1/2 h-12 px-4 text-muted dark:text-slate-800" set:html={entry.description} />
+                            <td class="w-1/2 text-right h-12 px-4 text-muted dark:text-slate-800">{entry.price}</td>
                           </tr>
                         ))}
                       </tbody>
@@ -89,7 +89,7 @@ const {
   <div class="mt-12 text-center">
     {
       (await Astro.slots.render('disclaimer')) && (
-        <div class="text-xs text-muted dark:text-slate-400 mb-8" set:html={await Astro.slots.render('disclaimer')} />
+        <div class="text-xs text-muted dark:text-slate-800 mb-8" set:html={await Astro.slots.render('disclaimer')} />
       )
     }