dark background

6 files changed, 61 insertions, 30 deletions

diff --git a/src/components/widgets/Content.astro b/src/components/widgets/Content.astro
index 694a198..fd99458 100644
--- a/src/components/widgets/Content.astro
+++ b/src/components/widgets/Content.astro
@@ -37,14 +37,14 @@ const {
     tagline={tagline}
     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',
+      title: `text-4xl md:text-5xl font-bold tracking-tighter mb-4 font-heading ${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-white' : ''}`,
+      subtitle: `max-w-3xl mx-auto sm:text-center text-xl ${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-gray-300' : 'text-muted dark:text-slate-400'}`,
     }}
   />
   <div class="mx-auto max-w-7xl p-4 md:px-8">
     <div class={`md:flex ${isReversed ? 'md:flex-row-reverse' : ''} md:gap-16`}>
       <div class="md:basis-1/2 self-center">
-        {content && <div class="mb-12 text-lg dark:text-slate-400" set:html={content} />}
+        {content && <div class={`mb-12 text-lg ${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-gray-300' : 'dark:text-slate-400'}`} set:html={content} />}
 
         {
           callToAction && (
@@ -61,10 +61,10 @@ const {
           classes={{
             container: `gap-y-4 md:gap-y-8`,
             panel: 'max-w-none',
-            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',
+            title: `text-lg font-medium leading-6 ${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-white' : 'dark:text-white'} ml-2 rtl:ml-0 rtl:mr-2`,
+            description: `${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-gray-300' : 'text-muted dark:text-slate-400'} 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',
+            action: `text-lg font-medium leading-6 ${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-white' : 'dark:text-white'} ml-2 rtl:ml-0 rtl:mr-2`,
           }}
         />
       </div>
diff --git a/src/components/widgets/Footer.astro b/src/components/widgets/Footer.astro
index 55501ff..3008984 100644
--- a/src/components/widgets/Footer.astro
+++ b/src/components/widgets/Footer.astro
@@ -24,10 +24,10 @@ export interface 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']}>
-  <div class="dark:bg-dark absolute inset-0 pointer-events-none" aria-hidden="true"></div>
+<footer class:list={[{ dark: theme === 'dark' }, 'relative border-t border-gray-200 dark:border-slate-800 not-prose bg-black text-white']}>
+  <div class="absolute inset-0 pointer-events-none" aria-hidden="true"></div>
   <div
-    class="relative max-w-7xl mx-auto px-4 sm:px-6 dark:text-slate-300 intersect-once intersect-quarter intercept-no-queue motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"
+    class="relative max-w-7xl mx-auto px-4 sm:px-6 text-white intersect-once intersect-quarter intercept-no-queue motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"
   >
     <div class="md:flex md:items-center md:justify-between py-6 md:py-8">
       {
@@ -36,7 +36,7 @@ const { socialLinks = [], footNote = '', theme = 'light' } = Astro.props;
             {socialLinks.map(({ ariaLabel, href, text, icon }) => (
               <li>
                 <a
-                  class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
+                  class="text-gray-300 hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
                   aria-label={ariaLabel}
                   href={href}
                 >
@@ -51,7 +51,7 @@ const { socialLinks = [], footNote = '', theme = 'light' } = Astro.props;
         )
       }
 
-      <div class="text-sm mr-4 dark:text-muted">
+      <div class="text-sm mr-4 text-gray-300">
         <Fragment set:html={footNote} />
       </div>
     </div>
diff --git a/src/components/widgets/Portfolio.astro b/src/components/widgets/Portfolio.astro
index d4016a7..9aaeee0 100644
--- a/src/components/widgets/Portfolio.astro
+++ b/src/components/widgets/Portfolio.astro
@@ -21,7 +21,15 @@ const {
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
-  <Headline title={title} subtitle={subtitle} tagline={tagline} />
+  <Headline 
+    title={title} 
+    subtitle={subtitle} 
+    tagline={tagline}
+    classes={{
+      title: typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-white' : '',
+      subtitle: typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-gray-300' : 'text-muted dark:text-slate-400',
+    }}
+  />
 
   <div class="mx-auto max-w-7xl p-4 md:px-8">
     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
diff --git a/src/components/widgets/Steps2.astro b/src/components/widgets/Steps2.astro
index 7a84282..23cd72a 100644
--- a/src/components/widgets/Steps2.astro
+++ b/src/components/widgets/Steps2.astro
@@ -39,8 +39,8 @@ function makeEmailsClickable(text: string | undefined): string {
         tagline={tagline}
         classes={{
           container: 'text-center md:text-left rtl:md:text-right mb-4 md:mb-8',
-          title: 'mb-4 text-3xl lg:text-4xl font-bold font-heading',
-          subtitle: 'mb-8 text-xl text-muted dark:text-slate-400',
+          title: `mb-4 text-3xl lg:text-4xl font-bold font-heading ${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-white' : ''}`,
+          subtitle: `mb-8 text-xl ${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-gray-300' : 'text-muted dark:text-slate-400'}`,
           // ...((classes?.headline as {}) ?? {}),
         }}
       />
@@ -69,9 +69,9 @@ function makeEmailsClickable(text: string | undefined): string {
                     </span>
                   </div>
                   <div class="pl-4 rtl:pl-0 rtl:pr-4">
-                    <h3 class="mb-4 text-xl font-semibold font-heading" set:html={title2} />
+                    <h3 class={`mb-4 text-xl font-semibold font-heading ${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-white' : ''}`} set:html={title2} />
                     <p
-                      class="text-muted dark:text-gray-400"
+                      class={`${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-gray-300' : 'text-muted dark:text-gray-400'}`}
                       set:html={description ? makeEmailsClickable(description) : ''}
                     />
                   </div>
diff --git a/src/navigation.ts b/src/navigation.ts
index baa9bb4..4c992c4 100644
--- a/src/navigation.ts
+++ b/src/navigation.ts
@@ -144,6 +144,6 @@ export const footerData = {
       : []),
   ],
   footNote: `
-    <span class="text-xs text-muted dark:text-slate-400">Strona obsługiwana przez <a class="text-primary underline dark:text-muted" href="https://www.rycerz.xyz/">Craftknight</a> Copyright 2025 © Wszystkie prawa zastrzeżone</span>
+    <span class="text-xs text-gray-300">Strona obsługiwana przez <a class="text-blue-400 hover:text-blue-300 underline" href="https://www.rycerz.xyz/">Craftknight</a> Copyright 2025 © Wszystkie prawa zastrzeżone</span>
   `,
 };
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 71567a1..0086de5 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -41,7 +41,6 @@ const metadata = {
   >
     <Fragment slot="title">
       <span class="text-white">
-        <span class="block md:hidden">CustomWorks</span>
         <span class="hidden md:block">Detailing, wrapping, tuning</span>
       </span>
     </Fragment>
@@ -132,18 +131,23 @@ const metadata = {
       src: '~/assets/images/content-image.webp',
       alt: 'CustomWorks - Profesjonalne usługi detailingu samochodowego',
     }}
+    classes={{
+      container: 'text-white',
+    }}
   >
     <Fragment slot="content">
-      <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">
+      <h3 class="text-2xl font-bold tracking-tight text-white sm:text-3xl mb-2">
         Profesjonalna opieka nad Twoim samochodem
       </h3>
-      W Custom Works zawsze dokładam wszelkich starań, aby spełnić oczekiwania moich klientów, a nawet je przekroczyć. Działam
-      z myślą o Twoim zadowoleniu, gwarantując solidność i niezawodność usług. Zapraszam do kontaktu ze mną, by dowiedzieć
-      się więcej o tym, jak mogę nadać Twojemu samochodowi wyjątkowy charakter!
+      <span class="text-gray-300">
+        W Custom Works zawsze dokładam wszelkich starań, aby spełnić oczekiwania moich klientów, a nawet je przekroczyć. Działam
+        z myślą o Twoim zadowoleniu, gwarantując solidność i niezawodność usług. Zapraszam do kontaktu ze mną, by dowiedzieć
+        się więcej o tym, jak mogę nadać Twojemu samochodowi wyjątkowy charakter!
+      </span>
     </Fragment>
 
     <Fragment slot="bg">
-      <div class="absolute inset-0 bg-section dark:bg-transparent"></div>
+      <div class="absolute inset-0" style="background-color: #222222;"></div>
     </Fragment>
   </Content>
 
@@ -174,18 +178,23 @@ const metadata = {
       src: '~/assets/images/content-image2.webp',
       alt: 'CustomWorks - Profesjonalne usługi detailingu samochodowego',
     }}
+    classes={{
+      container: 'text-white',
+    }}
   >
     <Fragment slot="content">
-      <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">
+      <h3 class="text-2xl font-bold tracking-tight text-white sm:text-3xl mb-2">
         Kompleksowe rozwiązania dla Twojego samochodu
       </h3>
-      Oferuję pełen zakres usług detailingowych, od podstawowego mycia po zaawansowane powłoki ochronne. Każdy samochód traktuję
-      indywidualnie, dostosowując metody pracy do jego specyfiki. Używam tylko sprawdzonych i certyfikowanych produktów,
-      gwarantując trwałe i satysfakcjonujące rezultaty.
+      <span class="text-gray-300">
+        Oferuję pełen zakres usług detailingowych, od podstawowego mycia po zaawansowane powłoki ochronne. Każdy samochód traktuję
+        indywidualnie, dostosowując metody pracy do jego specyfiki. Używam tylko sprawdzonych i certyfikowanych produktów,
+        gwarantując trwałe i satysfakcjonujące rezultaty.
+      </span>
     </Fragment>
 
     <Fragment slot="bg">
-      <div class="absolute inset-0 bg-section dark:bg-transparent"></div>
+      <div class="absolute inset-0" style="background-color: #222222;"></div>
     </Fragment>
   </Content>
 
@@ -294,7 +303,14 @@ const metadata = {
         alt: 'CustomWorks - Przykład pracy detailingowej',
       },
     ]}
-  />
+    classes={{
+      container: 'text-white',
+    }}
+  >
+    <Fragment slot="bg">
+      <div class="absolute inset-0" style="background-color: #222222;"></div>
+    </Fragment>
+  </Portfolio>
 
   <!-- Mapa **************** -->
 
@@ -318,5 +334,12 @@ const metadata = {
         icon: 'tabler:map-pin',
       },
     ]}
-  />
+    classes={{
+      container: 'text-white',
+    }}
+  >
+    <Fragment slot="bg">
+      <div class="absolute inset-0" style="background-color: #222222;"></div>
+    </Fragment>
+  </Steps2>
 </Layout>