Update widget

9 files changed, 108 insertions, 82 deletions

diff --git a/src/components/widgets/Announcement.astro b/src/components/widgets/Announcement.astro
index 8e4bf78..e3098d5 100644
--- a/src/components/widgets/Announcement.astro
+++ b/src/components/widgets/Announcement.astro
@@ -12,5 +12,4 @@
   <a href="#contact" class="text-muted hover:underline dark:text-slate-400 font-medium"
     >Skontaktuj się z nami - Darmowa wycena! »</a
   >
-
 </div>
diff --git a/src/components/widgets/CallToActionImage.astro b/src/components/widgets/CallToActionImage.astro
index df13145..80e181e 100644
--- a/src/components/widgets/CallToActionImage.astro
+++ b/src/components/widgets/CallToActionImage.astro
@@ -47,27 +47,19 @@ const {
       image && (
         <div class="flex justify-center mt-6 px-4">
           {image.href ? (
-            <a 
-              href={image.href} 
+            <a
+              href={image.href}
               target={image.target || '_self'}
               rel={image.target === '_blank' ? 'noopener noreferrer' : ''}
               class="inline-block hover:opacity-80 transition-opacity duration-200"
             >
-              <Image 
-                src={image.src} 
-                alt={image.alt} 
-                class="max-h-20 h-auto w-auto max-w-full object-contain"
-              />
+              <Image src={image.src} alt={image.alt} class="max-h-20 h-auto w-auto max-w-full object-contain" />
             </a>
           ) : (
-            <Image 
-              src={image.src} 
-              alt={image.alt} 
-              class="max-h-20 h-auto w-auto max-w-full object-contain"
-            />
+            <Image src={image.src} alt={image.alt} class="max-h-20 h-auto w-auto max-w-full object-contain" />
           )}
         </div>
       )
     }
   </div>
-</WidgetWrapper> 
\ No newline at end of file
+</WidgetWrapper>
diff --git a/src/components/widgets/Features2Custom.astro b/src/components/widgets/Features2Custom.astro
index 18c1546..605fd08 100644
--- a/src/components/widgets/Features2Custom.astro
+++ b/src/components/widgets/Features2Custom.astro
@@ -33,7 +33,7 @@ const {
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
   <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline as Record<string, string>} />
-  
+
   {
     items && items.length > 0 && (
       <div
@@ -69,7 +69,10 @@ 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 mt-2', descriptionClass, itemClasses?.description)}
+                set:html={description}
+              />
             )}
             {callToAction && (
               <div class="mt-2">
@@ -81,4 +84,4 @@ const {
       </div>
     )
   }
-</WidgetWrapper> 
\ No newline at end of file
+</WidgetWrapper>
diff --git a/src/components/widgets/Footer.astro b/src/components/widgets/Footer.astro
index 70cac54..55501ff 100644
--- a/src/components/widgets/Footer.astro
+++ b/src/components/widgets/Footer.astro
@@ -1,7 +1,5 @@
 ---
 import { Icon } from 'astro-icon/components';
-import { SITE } from 'astrowind:config';
-import { getHomePermalink } from '~/utils/permalinks';
 
 interface Link {
   text?: string;
@@ -23,7 +21,7 @@ export interface Props {
   theme?: string;
 }
 
-const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme = 'light' } = Astro.props;
+const { socialLinks = [], footNote = '', theme = 'light' } = Astro.props;
 ---
 
 <footer class:list={[{ dark: theme === 'dark' }, 'relative border-t border-gray-200 dark:border-slate-800 not-prose']}>
diff --git a/src/components/widgets/Header.astro b/src/components/widgets/Header.astro
index 0064a30..f5d5236 100644
--- a/src/components/widgets/Header.astro
+++ b/src/components/widgets/Header.astro
@@ -1,14 +1,41 @@
 ---
 import { Icon } from 'astro-icon/components';
+import { SITE } from 'astrowind:config';
 ---
 
 <header class="bg-black text-white py-2 px-4">
-  <div class="max-w-7xl mx-auto flex items-center justify-center">
+  <div class="max-w-7xl mx-auto flex items-center justify-between">
     <div class="flex items-center space-x-2">
       <Icon name="tabler:phone" class="w-4 h-4" />
-      <a href="tel:+48790209770" class="text-sm font-medium hover:text-gray-300 transition-colors">
-        +48 790-209-770
-      </a>
+      <a href="tel:+48790209770" class="text-sm font-medium hover:text-gray-300 transition-colors"> +48 790-209-770 </a>
     </div>
+    {
+      SITE.social && (SITE.social.facebook || SITE.social.instagram) && (
+        <div class="flex items-center space-x-3">
+          {SITE.social.facebook && (
+            <a
+              href={SITE.social.facebook}
+              aria-label="Facebook"
+              class="text-white hover:text-gray-300 transition-colors"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Icon name="tabler:brand-facebook" class="w-4 h-4" />
+            </a>
+          )}
+          {SITE.social.instagram && (
+            <a
+              href={SITE.social.instagram}
+              aria-label="Instagram"
+              class="text-white hover:text-gray-300 transition-colors"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Icon name="tabler:brand-instagram" class="w-4 h-4" />
+            </a>
+          )}
+        </div>
+      )
+    }
   </div>
 </header>
diff --git a/src/components/widgets/Map.astro b/src/components/widgets/Map.astro
index dae8253..76d81a4 100644
--- a/src/components/widgets/Map.astro
+++ b/src/components/widgets/Map.astro
@@ -21,11 +21,11 @@ const {
 // Use provided coordinates or default to Bydgoszcz, Miedzyń
 const coordinates = {
   lat: lat,
-  lon: lon
+  lon: lon,
 };
 
 // Create map URL with proper coordinates
-const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${coordinates.lon-0.01},${coordinates.lat-0.01},${coordinates.lon+0.01},${coordinates.lat+0.01}&layer=mapnik&marker=${coordinates.lat},${coordinates.lon}`;
+const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${coordinates.lon - 0.01},${coordinates.lat - 0.01},${coordinates.lon + 0.01},${coordinates.lat + 0.01}&layer=mapnik&marker=${coordinates.lat},${coordinates.lon}`;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
@@ -57,4 +57,4 @@ const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${coordinat
       </div>
     </div>
   </div>
-</WidgetWrapper> 
\ No newline at end of file
+</WidgetWrapper>
diff --git a/src/components/widgets/Portfolio.astro b/src/components/widgets/Portfolio.astro
index 8cd230c..d4016a7 100644
--- a/src/components/widgets/Portfolio.astro
+++ b/src/components/widgets/Portfolio.astro
@@ -10,7 +10,7 @@ const {
   subtitle = '',
   tagline = '',
   items = [],
-  columns = 3,
+
   callToAction,
 
   id,
@@ -38,7 +38,7 @@ const {
                   layout="responsive"
                   {...image}
                 />
-                <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-300"></div>
+                <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-300" />
               </div>
             </div>
           ))
@@ -53,4 +53,4 @@ const {
       </div>
     )
   }
-</WidgetWrapper> 
\ No newline at end of file
+</WidgetWrapper>
diff --git a/src/components/widgets/Pricing.astro b/src/components/widgets/Pricing.astro
index d8cd2a6..b0c2fa1 100644
--- a/src/components/widgets/Pricing.astro
+++ b/src/components/widgets/Pricing.astro
@@ -18,12 +18,7 @@ const {
 } = Astro.props;
 ---
 
-<WidgetWrapper
-  id={id}
-  isDark={isDark}
-  containerClass={`mx-auto ${classes?.container ?? ''}`}
-  bg={bg}
->
+<WidgetWrapper id={id} isDark={isDark} containerClass={`mx-auto ${classes?.container ?? ''}`} bg={bg}>
   <Headline
     title={title}
     subtitle={subtitle}
@@ -38,60 +33,66 @@ const {
     <div class="md:flex md:gap-8">
       <div class="md:w-1/2">
         {
-          items && items.length > 0 && items.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.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>
-                        <td class="w-1/2 text-right h-12 px-4 text-muted dark:text-slate-400">{entry.price}</td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              )}
-            </div>
-          ))
+          items &&
+            items.length > 0 &&
+            items
+              .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.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>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  )}
+                </div>
+              ))
         }
       </div>
       <div class="md:w-1/2">
         {
-          items && items.length > 0 && items.filter((_, index) => index % 2 === 1).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.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>
-                        <td class="w-1/2 text-right h-12 px-4 text-muted dark:text-slate-400">{entry.price}</td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              )}
-            </div>
-          ))
+          items &&
+            items.length > 0 &&
+            items
+              .filter((_, index) => index % 2 === 1)
+              .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.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>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  )}
+                </div>
+              ))
         }
       </div>
     </div>
   </div>
 
   <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')} />
-    )}
-    
+    {
+      (await Astro.slots.render('disclaimer')) && (
+        <div class="text-xs text-muted dark:text-slate-400 mb-8" set:html={await Astro.slots.render('disclaimer')} />
+      )
+    }
+
     {
       actions && actions.length > 0 && (
         <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 mt-6">
diff --git a/src/components/widgets/Steps2.astro b/src/components/widgets/Steps2.astro
index 0891663..7a84282 100644
--- a/src/components/widgets/Steps2.astro
+++ b/src/components/widgets/Steps2.astro
@@ -23,7 +23,10 @@ const {
 function makeEmailsClickable(text: string | undefined): string {
   if (!text) return '';
   const emailRegex = /([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/g;
-  return text.replace(emailRegex, '<a href="mailto:$1" class="text-primary hover:text-secondary transition-colors">$1</a>');
+  return text.replace(
+    emailRegex,
+    '<a href="mailto:$1" class="text-primary hover:text-secondary transition-colors">$1</a>'
+  );
 }
 ---
 
@@ -67,7 +70,10 @@ function makeEmailsClickable(text: string | undefined): string {
                   </div>
                   <div class="pl-4 rtl:pl-0 rtl:pr-4">
                     <h3 class="mb-4 text-xl font-semibold font-heading" set:html={title2} />
-                    <p class="text-muted dark:text-gray-400" set:html={description ? makeEmailsClickable(description) : ''} />
+                    <p
+                      class="text-muted dark:text-gray-400"
+                      set:html={description ? makeEmailsClickable(description) : ''}
+                    />
                   </div>
                 </li>
               ))