Add multi-pointed star feature to home page layout: Implemented a hoverable star graphic in the seeds box, enhancing visual engagement. Updated localization files to include new text for user prompts in multiple languages.

2025-07-18 14:55:50 +02:00
parent 33fadc0279
commit 93887ce397
22 changed files with 186 additions and 30 deletions
--- a/src/components/MainPageLayout.js
+++ b/src/components/MainPageLayout.js
@@ -16,6 +16,7 @@ const MainPageLayout = () => {
  const location = useLocation();
  const currentPath = location.pathname;
  const { t } = useTranslation();
+  const [starHovered, setStarHovered] = React.useState(false);

  // Determine which page we're on
  const isHome = currentPath === "/";
@@ -336,7 +337,120 @@ const MainPageLayout = () => {
            }}
          >
            {contentBoxes.map((box, index) => (
-              <Grid key={`${pageType}-${index}`} item xs={12} sm={6} sx={{ p: 2, width: "50%" }}>
+              <Grid key={`${pageType}-${index}`} item xs={12} sm={6} sx={{ p: 2, width: "50%", position: 'relative' }}>
+                {/* Multi-pointed star for seeds box - moved to Grid level */}
+                {index === 0 && pageType === "home" && (
+                  <div
+                    style={{
+                      position: 'absolute',
+                      top: '-45px',
+                      left: '-45px',
+                      width: '180px',
+                      height: '180px',
+                      zIndex: 999,
+                      pointerEvents: 'auto',
+                      cursor: 'pointer'
+                    }}
+                    onMouseEnter={() => setStarHovered(true)}
+                    onMouseLeave={() => setStarHovered(false)}
+                  >
+                    {/* Background star - slightly larger and rotated */}
+                    <svg 
+                      viewBox="0 0 60 60" 
+                      width="168" 
+                      height="168"
+                      style={{
+                        position: 'absolute',
+                        top: '-9px',
+                        left: '-9px',
+                        transform: 'rotate(20deg)'
+                      }}
+                    >
+                      <polygon 
+                        points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
+                        fill="#B8860B" 
+                        stroke="none"
+                      />
+                    </svg>
+                    
+                    {/* Middle star - medium size with different rotation */}
+                    <svg 
+                      viewBox="0 0 60 60" 
+                      width="159" 
+                      height="159"
+                      style={{
+                        position: 'absolute',
+                        top: '-4.5px',
+                        left: '-4.5px',
+                        transform: 'rotate(-25deg)'
+                      }}
+                    >
+                      <polygon 
+                        points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
+                        fill="#DAA520" 
+                        stroke="none"
+                      />
+                    </svg>
+                    
+                    {/* Foreground star - main star with text */}
+                    <svg 
+                      viewBox="0 0 60 60" 
+                      width="150" 
+                      height="150"
+                    >
+                      <polygon 
+                        points="30,0 38,20 60,22 43,37 48,60 30,48 12,60 17,37 0,22 22,20"
+                        fill="#FFD700" 
+                        stroke="none"
+                      />
+                    </svg>
+                    
+                    {/* Text positioned in the center of the star */}
+                    <div
+                      style={{
+                        position: 'absolute',
+                        top: '45%',
+                        left: '43%',
+                        transform: 'translate(-50%, -50%) rotate(-10deg)',
+                        color: 'white',
+                        fontWeight: '900',
+                        fontSize: '20px',
+                        textShadow: '0px 3px 6px rgba(0,0,0,0.5)',
+                        zIndex: 1000,
+                        textAlign: 'center',
+                        lineHeight: '1.1',
+                        width: '135px',
+                        transition: 'opacity 0.3s ease',
+                        opacity: starHovered ? 0 : 1
+                      }}
+                    >
+                      {t('sections.showUsPhoto')}
+                    </div>
+                    
+                    {/* Hover text */}
+                    <div
+                      style={{
+                        position: 'absolute',
+                        top: '45%',
+                        left: '43%',
+                        transform: 'translate(-50%, -50%) rotate(-10deg)',
+                        color: 'white',
+                        fontWeight: '900',
+                        fontSize: '20px',
+                        textShadow: '0px 3px 6px rgba(0,0,0,0.5)',
+                        zIndex: 1000,
+                        textAlign: 'center',
+                        lineHeight: '1.1',
+                        width: '135px',
+                        opacity: starHovered ? 1 : 0,
+                        transition: 'opacity 0.3s ease'
+                      }}
+                    >
+                      {t('sections.selectSeedRate')}
+                    </div>
+                  </div>
+                )}
+                
                <div className={`animated-border-card ${index === 0 ? 'seeds-card' : 'cutlings-card'}`}>
                  <Paper
                    component={Link}
--- a/src/i18n/locales/ar/sections.js
+++ b/src/i18n/locales/ar/sections.js
@@ -4,5 +4,7 @@ export default {
  "oilPress": "استعارة معصرة زيت",
  "thcTest": "اختبار THC",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "ورينا أجمل صورة عندك",
+  "selectSeedRate": "اختار البذرة واضغط للتقييم"
 };
--- a/src/i18n/locales/bg/sections.js
+++ b/src/i18n/locales/bg/sections.js
@@ -1,8 +1,10 @@
 export default {
  "seeds": "Семена",
  "stecklinge": "Резници",
-  "oilPress": "Наемане на преса за масло",
+  "oilPress": "Наеми преса за масло",
  "thcTest": "THC тест",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "Покажи ни най-красивата си снимка",
+  "selectSeedRate": "Избери семе, кликни за оценка"
 };
--- a/src/i18n/locales/cs/sections.js
+++ b/src/i18n/locales/cs/sections.js
@@ -4,5 +4,7 @@ export default {
  "oilPress": "Půjčit lis na olej",
  "thcTest": "THC test",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "Ukaž nám svou nejkrásnější fotku",
+  "selectSeedRate": "Vyber semeno, klikni pro hodnocení"
 };
--- a/src/i18n/locales/de/sections.js
+++ b/src/i18n/locales/de/sections.js
@@ -4,5 +4,7 @@ export default {
  "oilPress": "Ölpresse ausleihen",
  "thcTest": "THC Test",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "Zeig uns dein schönstes Foto",
+  "selectSeedRate": "Wähle Seed aus, klicke Bewerten"
 }; 
--- a/src/i18n/locales/el/sections.js
+++ b/src/i18n/locales/el/sections.js
@@ -1,8 +1,10 @@
 export default {
  "seeds": "Σπόροι",
  "stecklinge": "Μοσχεύματα",
-  "oilPress": "Δανεισμός πρέσας λαδιού",
-  "thcTest": "Έλεγχος THC",
+  "oilPress": "Δανείσου πρέσα λαδιού",
+  "thcTest": "Τεστ THC",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "Δείξε μας τη πιο όμορφη φωτογραφία σου",
+  "selectSeedRate": "Επίλεξε σπόρο, κάνε κλικ για αξιολόγηση"
 };
--- a/src/i18n/locales/en/sections.js
+++ b/src/i18n/locales/en/sections.js
@@ -4,5 +4,7 @@ export default {
  "oilPress": "Borrow oil press", // Ölpresse ausleihen
  "thcTest": "THC test", // THC Test
  "address1": "Trachenberger Straße 14", // Trachenberger Straße 14
-  "address2": "01129 Dresden" // 01129 Dresden
+  "address2": "01129 Dresden", // 01129 Dresden
+  "showUsPhoto": "Show us your most beautiful photo", // Zeig uns dein schönstes Foto
+  "selectSeedRate": "Select seed, click to rate" // Wähle Seed aus, klicke Bewerten
 };
--- a/src/i18n/locales/es/sections.js
+++ b/src/i18n/locales/es/sections.js
@@ -4,5 +4,7 @@ export default {
  "oilPress": "Pedir prestada prensa de aceite",
  "thcTest": "Prueba de THC",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "Muéstranos tu foto más hermosa",
+  "selectSeedRate": "Selecciona semilla, haz clic para calificar"
 };
--- a/src/i18n/locales/fr/sections.js
+++ b/src/i18n/locales/fr/sections.js
@@ -1,8 +1,10 @@
 export default {
  "seeds": "Graines",
  "stecklinge": "Boutures",
-  "oilPress": "Emprunter une presse à huile",
-  "thcTest": "Test de THC",
+  "oilPress": "Emprunter la presse à huile",
+  "thcTest": "Test THC",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "Montre-nous ta plus belle photo",
+  "selectSeedRate": "Sélectionne une graine, clique pour évaluer"
 };
--- a/src/i18n/locales/hr/sections.js
+++ b/src/i18n/locales/hr/sections.js
@@ -4,5 +4,7 @@ export default {
  "oilPress": "Posudi prešu za ulje",
  "thcTest": "THC test",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "Pokaži nam svoju najljepšu fotografiju",
+  "selectSeedRate": "Odaberi sjeme, klikni za ocjenu"
 };
--- a/src/i18n/locales/hu/sections.js
+++ b/src/i18n/locales/hu/sections.js
@@ -4,5 +4,7 @@ export default {
  "oilPress": "Olajprés kölcsönzése",
  "thcTest": "THC teszt",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "Mutasd meg nekünk a legszebb fotódat",
+  "selectSeedRate": "Válassz magot, kattints az értékeléshez"
 };
--- a/src/i18n/locales/it/sections.js
+++ b/src/i18n/locales/it/sections.js
@@ -4,5 +4,7 @@ export default {
  "oilPress": "Prendere in prestito la pressa per olio",
  "thcTest": "Test THC",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "Mostraci la tua foto più bella",
+  "selectSeedRate": "Seleziona il seme, clicca per valutare"
 };
--- a/src/i18n/locales/pl/sections.js
+++ b/src/i18n/locales/pl/sections.js
@@ -1,8 +1,10 @@
 export default {
  "seeds": "Nasiona",
  "stecklinge": "Sadzonki",
-  "oilPress": "Wypożycz praskę do oleju",
+  "oilPress": "Wypożycz prasę do oleju",
  "thcTest": "Test THC",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "Pokaż nam swoje najpiękniejsze zdjęcie",
+  "selectSeedRate": "Wybierz nasiono, kliknij, aby ocenić"
 };
--- a/src/i18n/locales/ro/sections.js
+++ b/src/i18n/locales/ro/sections.js
@@ -4,5 +4,7 @@ export default {
  "oilPress": "Împrumută presa de ulei",
  "thcTest": "Test THC",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "Arată-ne cea mai frumoasă fotografie a ta",
+  "selectSeedRate": "Selectează sămânța, fă clic pentru a evalua"
 };
--- a/src/i18n/locales/ru/sections.js
+++ b/src/i18n/locales/ru/sections.js
@@ -4,5 +4,7 @@ export default {
  "oilPress": "Взять напрокат маслопресс",
  "thcTest": "Тест на THC",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "Покажи нам свою самую красивую фотографию",
+  "selectSeedRate": "Выберите семя, нажмите для оценки"
 };
--- a/src/i18n/locales/sk/sections.js
+++ b/src/i18n/locales/sk/sections.js
@@ -1,8 +1,10 @@
 export default {
  "seeds": "Semienka",
  "stecklinge": "Rezky",
-  "oilPress": "Požičať lis na olej",
+  "oilPress": "Požičajte si lis na olej",
  "thcTest": "THC test",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "Ukážte nám svoju najkrajšiu fotku",
+  "selectSeedRate": "Vyberte semienko, kliknite na hodnotenie"
 };
--- a/src/i18n/locales/sl/sections.js
+++ b/src/i18n/locales/sl/sections.js
@@ -1,8 +1,10 @@
 export default {
  "seeds": "Semena",
  "stecklinge": "Rezalci",
-  "oilPress": "Izposodi si stiskalnico za olje",
+  "oilPress": "Izposodi si stiskalnico olja",
  "thcTest": "THC test",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "Pokaži nam svojo najlepšo fotografijo",
+  "selectSeedRate": "Izberi seme, klikni za oceno"
 };
--- a/src/i18n/locales/sr/sections.js
+++ b/src/i18n/locales/sr/sections.js
@@ -4,5 +4,7 @@ export default {
  "oilPress": "Pozajmi prešu za ulje",
  "thcTest": "THC test",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "Pokaži nam svoju najlepšu fotografiju",
+  "selectSeedRate": "Izaberi seme, klikni da oceniš"
 };
--- a/src/i18n/locales/sv/sections.js
+++ b/src/i18n/locales/sv/sections.js
@@ -4,5 +4,7 @@ export default {
  "oilPress": "Låna oljepress",
  "thcTest": "THC-test",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "Visa oss ditt vackraste foto",
+  "selectSeedRate": "Välj frö, klicka för att betygsätta"
 };
--- a/src/i18n/locales/tr/sections.js
+++ b/src/i18n/locales/tr/sections.js
@@ -4,5 +4,7 @@ export default {
  "oilPress": "Yağ presi ödünç al",
  "thcTest": "THC testi",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "Bize en güzel fotoğrafını göster",
+  "selectSeedRate": "Tohumu seç, değerlendirmek için tıkla"
 };
--- a/src/i18n/locales/uk/sections.js
+++ b/src/i18n/locales/uk/sections.js
@@ -4,5 +4,7 @@ export default {
  "oilPress": "Позичити олійний прес",
  "thcTest": "Тест на THC",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "Покажи нам своє найкрасивіше фото",
+  "selectSeedRate": "Виберіть насіння, натисніть, щоб оцінити"
 };
--- a/src/i18n/locales/zh/sections.js
+++ b/src/i18n/locales/zh/sections.js
@@ -4,5 +4,7 @@ export default {
  "oilPress": "借用榨油机",
  "thcTest": "THC 测试",
  "address1": "Trachenberger Straße 14",
-  "address2": "01129 Dresden"
+  "address2": "01129 Dresden",
+  "showUsPhoto": "展示你最美的照片",
+  "selectSeedRate": "选择种子，点击评分"
 };