style(hero): reduce gradient overlay intensity to make background image more visible

scripts/assign_heroes.ts

@@ -0,0 +1,100 @@
+import { getPayload } from 'payload'
+import configPromise from '../src/payload.config'
+import fs from 'fs'
+import path from 'path'
+
+async function run() {
+  const payload = await getPayload({ config: configPromise })
+  
+  // 1. Create media records
+  const mediaDir = path.join(process.cwd(), 'media')
+  const files = fs.readdirSync(mediaDir).filter(f => f !== '.DS_Store' && f !== 'placeholder-desk.jpg' && f.endsWith('.png'))
+  
+  const mediaIds = []
+  
+  for (const file of files) {
+    const filePath = path.join(mediaDir, file)
+    const existing = await payload.find({
+      collection: 'media',
+      where: { filename: { equals: file } }
+    })
+    
+    if (existing.docs.length > 0) {
+      mediaIds.push(existing.docs[0].id)
+    } else {
+      console.log(`Creating media record for ${file}`)
+      try {
+        const created = await payload.create({
+          collection: 'media',
+          data: { alt: 'Hero background' },
+          file: {
+            data: fs.readFileSync(filePath),
+            mimetype: 'image/png',
+            name: file,
+            size: fs.statSync(filePath).size
+          }
+        })
+        mediaIds.push(created.id)
+      } catch (e) {
+        console.error("Error creating", file, e.message)
+      }
+    }
+  }
+  
+  console.log(`Available hero media IDs: ${mediaIds.join(', ')}`)
+  
+  if (mediaIds.length === 0) {
+    console.error("No media ids found! Exiting.")
+    process.exit(1)
+  }
+
+  // 2. Update all pages
+  const locales = ['pl', 'de']
+  let mediaIndex = 0
+
+  for (const locale of locales) {
+    const pages = await payload.find({ collection: 'pages', locale: locale as any, limit: 100 })
+    
+    for (const page of pages.docs) {
+      const imgId = mediaIds[mediaIndex % mediaIds.length]
+      mediaIndex++
+      
+      let changed = false
+      const layout = page.layout || []
+      
+      if (page.slug === 'home') {
+        // Find hero block
+        const heroBlock = layout.find((b: any) => b.blockType === 'hero')
+        if (heroBlock && !heroBlock.backgroundImage) {
+          heroBlock.backgroundImage = imgId
+          changed = true
+          console.log(`Updated home page (${locale}) hero image.`)
+        }
+      } else {
+        // Find pageHeader block
+        const headerBlock = layout.find((b: any) => b.blockType === 'pageHeader')
+        if (headerBlock && !headerBlock.image) {
+          headerBlock.image = imgId
+          changed = true
+          console.log(`Updated ${page.slug} (${locale}) pageHeader image.`)
+        } else if (!headerBlock) {
+          // If no pageHeader, should we add it?
+          // Usually every page has it, except some legal pages. Let's just update existing ones first.
+        }
+      }
+      
+      if (changed) {
+        await payload.update({
+          collection: 'pages',
+          id: page.id,
+          locale: locale as any,
+          data: { layout }
+        })
+      }
+    }
+  }
+
+  console.log("Done updating pages.")
+  process.exit(0)
+}
+run().catch(console.error)

scripts/assign_heroes_fixed.ts

@@ -0,0 +1,62 @@
+import { getPayload } from 'payload'
+import configPromise from '../src/payload.config'
+
+async function run() {
+  const payload = await getPayload({ config: configPromise })
+  
+  // Get media ids
+  const media = await payload.find({ collection: 'media', limit: 100 })
+  const mediaIds = media.docs.map(m => m.id)
+  
+  if (mediaIds.length === 0) {
+    console.error("No media ids found! Exiting.")
+    process.exit(1)
+  }
+
+  // Update all pages
+  const locales = ['pl', 'de']
+  let mediaIndex = 0
+
+  for (const locale of locales) {
+    const pages = await payload.find({ collection: 'pages', locale: locale as any, limit: 100 })
+    
+    for (const page of pages.docs) {
+      const imgId = mediaIds[mediaIndex % mediaIds.length]
+      mediaIndex++
+      
+      let changed = false
+      const layout = page.layout || []
+      
+      if (page.slug === 'home') {
+        // Find hero block
+        const heroBlock = layout.find((b: any) => b.blockType === 'hero')
+        if (heroBlock && !heroBlock.image) {
+          heroBlock.image = imgId
+          changed = true
+          console.log(`Updated home page (${locale}) hero image.`)
+        }
+      } else {
+        // Find pageHeader block
+        const headerBlock = layout.find((b: any) => b.blockType === 'pageHeader')
+        if (headerBlock && !headerBlock.image) {
+          headerBlock.image = imgId
+          changed = true
+          console.log(`Updated ${page.slug} (${locale}) pageHeader image.`)
+        }
+      }
+      
+      if (changed) {
+        await payload.update({
+          collection: 'pages',
+          id: page.id,
+          locale: locale as any,
+          data: { layout }
+        })
+      }
+    }
+  }
+
+  console.log("Done updating pages with FIXED fields.")
+  process.exit(0)
+}
+run().catch(console.error)

scripts/check_all_media.ts

@@ -0,0 +1,14 @@
+import { getPayload } from 'payload'
+import configPromise from '../src/payload.config'
+
+async function run() {
+  const payload = await getPayload({ config: configPromise })
+  
+  const media = await payload.find({ collection: 'media', limit: 100 })
+  console.log("=== ALL MEDIA ===")
+  media.docs.forEach(m => {
+    console.log(`- ID: ${m.id} | Filename: ${m.filename} | Alt: ${m.alt}`)
+  })
+  process.exit(0)
+}
+run().catch(console.error)

scripts/check_hero_media.ts

@@ -0,0 +1,33 @@
+import { getPayload } from 'payload'
+import configPromise from '../src/payload.config'
+
+async function run() {
+  const payload = await getPayload({ config: configPromise })
+  
+  const media = await payload.find({ collection: 'media', limit: 100 })
+  console.log("=== MEDIA ===")
+  media.docs.forEach(m => {
+    if (m.filename?.includes('hero') || m.alt?.toLowerCase().includes('hero') || m.url?.includes('hero')) {
+      console.log(`- ID: ${m.id} | Filename: ${m.filename} | Alt: ${m.alt}`)
+    }
+  })
+  // Fallback: list all media if no hero found
+  if (media.docs.length > 0 && !media.docs.some(m => m.filename?.includes('hero'))) {
+     console.log("No explicit 'hero' in filename. Listing all media:")
+     media.docs.forEach(m => console.log(`- ID: ${m.id} | Filename: ${m.filename} | Alt: ${m.alt}`))
+  }
+
+  const pages = await payload.find({ collection: 'pages', locale: 'pl', limit: 100 })
+  console.log("\n=== PAGES ===")
+  pages.docs.forEach(p => {
+    const heroBlock = p.layout?.find(b => b.blockType === 'pageHeader')
+    console.log(`Page: ${p.slug} | Has pageHeader: ${!!heroBlock}`)
+    if (heroBlock) {
+      console.log(`  Title: ${heroBlock.title}`)
+      console.log(`  Background: ${heroBlock.backgroundImage}`)
+    }
+  })
+  
+  process.exit(0)
+}
+run().catch(console.error)

scripts/inspect_home_and_media.ts

@@ -0,0 +1,58 @@
+import { getPayload } from 'payload'
+import configPromise from '../src/payload.config'
+import fs from 'fs'
+import path from 'path'
+
+async function run() {
+  const payload = await getPayload({ config: configPromise })
+  
+  // Create media records if they don't exist
+  const mediaDir = path.join(__dirname, '../media')
+  const files = fs.readdirSync(mediaDir).filter(f => f !== '.DS_Store' && f !== 'placeholder-desk.jpg')
+  
+  const mediaRecords = []
+  
+  for (const file of files) {
+    const filePath = path.join(mediaDir, file)
+    // Check if exists in db
+    const existing = await payload.find({
+      collection: 'media',
+      where: { filename: { equals: file } }
+    })
+    
+    if (existing.docs.length > 0) {
+      mediaRecords.push(existing.docs[0])
+    } else {
+      console.log(`Creating media record for ${file}`)
+      // Have to read file and pass to payload.create
+      // It's tricky to upload local file via local API without express req
+      // Let's just create the db record manually? 
+      // No, payload.create({ collection: 'media', data: { alt: 'Hero image' }, file: { data: fs.readFileSync(filePath), mimetype: 'image/png', name: file, size: fs.statSync(filePath).size } })
+      try {
+        const created = await payload.create({
+          collection: 'media',
+          data: { alt: 'Hero background' },
+          file: {
+            data: fs.readFileSync(filePath),
+            mimetype: 'image/png',
+            name: file,
+            size: fs.statSync(filePath).size
+          }
+        })
+        mediaRecords.push(created)
+      } catch (e) {
+        console.error("Error creating", file, e.message)
+      }
+    }
+  }
+  
+  console.log(`Found/Created ${mediaRecords.length} media records.`)
+  
+  // Dump home page
+  const home = await payload.find({ collection: 'pages', where: { slug: { equals: 'home' } } })
+  console.log("Home Layout:")
+  home.docs[0]?.layout?.forEach(b => console.log(b.blockType))
+
+  process.exit(0)
+}
+run().catch(console.error)

src/blocks/Hero/Component.tsx

@@ -74,14 +74,9 @@ export const HeroBlock: React.FC<Props> = ({
                 imageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-105'
               }`}
             />
-            {/* Gradient Overlay for Text Readability - Mocniejszy na dole/lewo */}
+            {/* Zmniejszony gradient dla lepszej widoczności zdjęcia */}
-            {/* Z uwagi na "od ciemnego do przezroczystego" stosujemy from-background (zależne od motywu), 
+            <div className="absolute inset-0 bg-gradient-to-t from-background/90 via-background/40 to-transparent lg:bg-gradient-to-r lg:from-background/90 lg:via-background/20 lg:to-transparent" />
-                ale upewniamy się, że w jasnym motywie ciemny tekst nadal ma sens - gradient na jasnym tle to od białego, 
+            <div className="absolute inset-0 bg-background/10" />
-                a na ciemnym od czarnego. Jeśli chcesz wymusić zawsze ciemny overlay to musielibyśmy 
-                nadpisać text-foreground na stałe na biało. Zakładamy, że bg-background daje optymalny kontrast 
-                (jasny gradient z ciemnym tekstem / ciemny gradient z jasnym tekstem). */}
-            <div className="absolute inset-0 bg-gradient-to-t from-background via-background/70 to-transparent lg:bg-gradient-to-r lg:from-background/90 lg:via-background/50 lg:to-transparent" />
-            <div className="absolute inset-0 bg-background/20" /> {/* bazowe lekkie przyciemnienie reszty zdjęcia */}
           </>
         ) : (
           <div className="absolute inset-0 bg-card bg-paper-noise border-b border-border/50" />

src/blocks/PageHeader/Component.tsx

@@ -32,9 +32,9 @@ export const PageHeaderBlock: React.FC<PageHeaderProps> = ({ title, subtitle, im
                 imageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-105'
               }`}
             />
-            {/* Gradient Overlay for Text Readability - Mocniejszy na dole/lewo */}
+            {/* Zmniejszony gradient dla lepszej widoczności zdjęcia */}
-            <div className="absolute inset-0 bg-gradient-to-t from-background via-background/70 to-transparent lg:bg-gradient-to-r lg:from-background/90 lg:via-background/50 lg:to-transparent" />
+            <div className="absolute inset-0 bg-gradient-to-t from-background/90 via-background/40 to-transparent lg:bg-gradient-to-r lg:from-background/90 lg:via-background/20 lg:to-transparent" />
-            <div className="absolute inset-0 bg-background/20" /> {/* bazowe lekkie przyciemnienie reszty zdjęcia */}
+            <div className="absolute inset-0 bg-background/10" />
           </>
         ) : (
           <div className="absolute inset-0 bg-card bg-paper-noise border-b border-border/50" />