Refactor widget components for improved styling and layout consistency

- Updated styles in CompactCertifications, CompactSkills, CompactSteps, Content, Features, Features2, and WorkExperience components for a more cohesive design.
- Enhanced grid layouts and adjusted padding, borders, and background colors for better visual appeal and responsiveness.
- Standardized component classes to use rounded-2xl and shadow-lg for a unified look across widgets.

src/components/widgets/CompactCertifications.astro

@@ -44,11 +44,11 @@ const {
     title: 'text-3xl lg:text-4xl',
   }} />
 
-  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-6">
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
     {
       testimonials &&
         testimonials.map(({ linkUrl, name, issueDate, description, image }) => (
-          <div class="flex flex-col p-3 rounded-md shadow-md dark:shadow-none border border-gray-200 dark:border-slate-600 backdrop-blur-sm bg-white/15 dark:bg-transparent hover:shadow-lg transition-all duration-300 ease-in-out hover:bg-white/30 hover:backdrop-blur-md dark:hover:backdrop-blur-md hover:translate-y-[-2px]">
+          <div class="bg-white/90 dark:bg-slate-900/90 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-200 border border-gray-100 dark:border-slate-800 flex flex-col gap-2">
             <div class="flex items-center mb-3">
               <div
                 class="h-12 w-12 mr-3 flex-shrink-0 bg-gray-100 dark:bg-gray-800 rounded-md flex items-center justify-center overflow-hidden cursor-pointer"

src/components/widgets/CompactSkills.astro

@@ -32,7 +32,7 @@ const {
   <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
     {
       items.map(({ title, description, icon }) => (
-        <div class="group backdrop-blur-sm bg-white/15 dark:bg-transparent p-3 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 ease-in-out hover:bg-white/30 hover:backdrop-blur-md dark:hover:backdrop-blur-md border border-gray-200 dark:border-gray-700 hover:translate-y-[-2px]">
+        <div class="group bg-white/90 dark:bg-slate-900/90 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-200 border border-gray-100 dark:border-slate-800 flex flex-col gap-2">
           <div class="flex items-center mb-2">
             <Icon
               name={icon || defaultIcon}

src/components/widgets/CompactSteps.astro

@@ -29,6 +29,17 @@ const {
         ...((classes?.headline as object) ?? {}),
       }}
     />
-    <CompactTimeline items={items} classes={classes?.items as Record<string, never>} />
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-6">
+      {items.map((item) => (
+        <div class="bg-white/90 dark:bg-slate-900/90 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-200 border border-gray-100 dark:border-slate-800 flex flex-col gap-2">
+          <div class="flex items-center mb-2">
+            <span class="w-7 h-7 flex items-center justify-center rounded-full bg-green-600 dark:bg-green-700 text-white mr-2">
+              <i class={item.icon}></i>
+            </span>
+            <h3 class="text-base font-semibold">{item.title}</h3>
+          </div>
+        </div>
+      ))}
+    </div>
   </div>
 </WidgetWrapper>

src/components/widgets/Content.astro

@@ -63,10 +63,10 @@ const {
           columns={columns}
           defaultIcon="tabler:check"
           classes={{
-            container: `gap-y-4 md:gap-y-8`,
-            panel: 'max-w-none content-backdrop p-3 rounded-md',
-            title: 'text-lg font-medium leading-6 dark:text-white ml-2 rtl:ml-0 rtl:mr-2',
-            description: 'text-muted dark:text-slate-400 ml-2 rtl:ml-0 rtl:mr-2',
+            container: 'gap-6',
+            panel: 'bg-white/90 dark:bg-slate-900/90 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-200 border border-gray-100 dark:border-slate-800 p-6 flex flex-col gap-2',
+            title: 'text-lg font-semibold text-gray-900 dark:text-white ml-2 rtl:ml-0 rtl:mr-2',
+            description: 'text-gray-600 dark:text-gray-300 ml-2 rtl:ml-0 rtl:mr-2',
             icon: 'flex h-7 w-7 items-center justify-center rounded-full bg-green-600 dark:bg-green-700 text-gray-50 p-1',
             action: 'text-lg font-medium leading-6 dark:text-white ml-2 rtl:ml-0 rtl:mr-2',
           }}

src/components/widgets/Features.astro

@@ -27,8 +27,10 @@ const {
     columns={columns}
     defaultIcon={defaultIcon}
     classes={{
-      container: '',
-      title: 'md:text-[1.3rem]',
+      container: 'gap-6',
+      panel: 'bg-white/90 dark:bg-slate-900/90 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-200 border border-gray-100 dark:border-slate-800 p-6 flex flex-col gap-2',
+      title: 'md:text-[1.3rem] font-semibold text-gray-900 dark:text-white',
+      description: 'text-gray-600 dark:text-gray-300',
       icon: 'text-white bg-primary rounded-full w-10 h-10 p-2 md:w-12 md:h-12 md:p-3 mr-4 rtl:ml-4 rtl:mr-0',
       ...((classes?.items as Record<string, never>) ?? {}),
     }}

src/components/widgets/Features2.astro

@@ -26,11 +26,8 @@ const {
     columns={columns}
     defaultIcon={defaultIcon}
     classes={{
-      container: 'gap-4 md:gap-6',
-      panel:
-        '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',
-      // panel:
-      //   "text-center bg-page items-center md:text-left rtl:md:text-right md:items-start p-6 p-6 rounded-md shadow-xl dark:shadow-none dark:border dark:border-slate-800",
+      container: 'gap-6',
+      panel: 'bg-white/90 dark:bg-slate-900/90 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-200 border border-gray-100 dark:border-slate-800 p-6 flex flex-col gap-2',
       icon: 'w-12 h-12 mb-6 text-primary',
       ...((classes?.items as Record<string, never>) ?? {}),
     }}

src/components/widgets/WorkExperience.astro

@@ -71,6 +71,21 @@ const timelineItems = items.map((item) => {
         </div>
       )
     }
+    <div class="grid grid-cols-1 gap-6 mt-6">
+      {items.map((item) => (
+        <div class="bg-white/90 dark:bg-slate-900/90 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-200 border border-gray-100 dark:border-slate-800 flex flex-col gap-2">
+          <div class="flex flex-col gap-2">
+            <h3 class="text-xl font-semibold">{item.title}</h3>
+            {item.company && <p class="text-sm font-normal text-gray-600 dark:text-gray-400">{item.company}</p>}
+          </div>
+          <div class="flex flex-col gap-2">
+            {item.description && <p class="text-sm text-gray-500 dark:text-gray-400">{item.description}</p>}
+            {item.date && <p class="text-sm font-semibold text-gray-500 dark:text-gray-400">{item.date}</p>}
+            {item.location && <p class="text-sm text-gray-500 dark:text-gray-400">{item.location}</p>}
+          </div>
+        </div>
+      ))}
+    </div>
     <ModernTimeline
       items={timelineItems}
       compact={compact}