From 69f212c595410e2142089bf5bb49c4e103409767 Mon Sep 17 00:00:00 2001 From: LUCA-PYTHON <87448287+LUCA-PYTHON@users.noreply.github.com> Date: Fri, 12 Jun 2026 12:32:19 +0200 Subject: [PATCH] Refine home page copy and visual effects --- frontend/src/i18n/de.json | 32 ++++++------ frontend/src/i18n/en.json | 26 +++++----- frontend/src/styles/Home.css | 99 ++++++++++++++++-------------------- 3 files changed, 72 insertions(+), 85 deletions(-) diff --git a/frontend/src/i18n/de.json b/frontend/src/i18n/de.json index 14dd6d4..b662298 100644 --- a/frontend/src/i18n/de.json +++ b/frontend/src/i18n/de.json @@ -12,25 +12,25 @@ "footer.nav_heading": "Navigation", "footer.links_heading": "Links", - "home.hero.kicker": "EINZIGARTIGE LÖSUNGEN", - "home.hero.title_1": "Einzigartige Lösungen,", - "home.hero.title_2": "die begeistern.", - "home.hero.description": "Wir entwickeln Discord Bots, Webanwendungen und Mobile Apps – modern, sicher und maßgeschneidert.", + "home.hero.kicker": "SOFTWAREENTWICKLUNG", + "home.hero.title_1": "Software, die zu", + "home.hero.title_2": "deinem Projekt passt.", + "home.hero.description": "Wir entwickeln Discord Bots, Webanwendungen und Mobile Apps passend zu deinem Projekt.", "home.hero.cta.primary": "Services entdecken", "home.hero.cta.secondary": "Kontakt aufnehmen", - "home.hero.scroll_hint": "Scrollen um zu entdecken", - "home.about.title": "Technologie. Kreativität. Leidenschaft.", - "home.about.desc": "Wir kombinieren modernes Design mit sauberem Code, um digitale Produkte zu schaffen, die wirklich einen Unterschied machen.", - "home.section.discord.title": "Discord Bots", - "home.section.discord.desc": "Individuelle Bots für Communitys. Moderation, Tickets, Economy, KI und vieles mehr.", - "home.section.web.title": "Web Entwicklung", - "home.section.web.desc": "Moderne Webanwendungen mit neuester Technologie. Schnell, sicher, skalierbar.", - "home.section.app.title": "App Entwicklung", - "home.section.app.desc": "Cross-Platform Apps für iOS & Android. Benutzerfreundlich. Schnell. Stabil.", - "home.section.individual.title": "Individuelle Lösungen", - "home.section.individual.desc": "Deine Idee. Unsere Umsetzung. Wir bauen, was du brauchst. Maßgeschneidert für dich.", + "home.hero.scroll_hint": "Weiter nach unten", + "home.about.title": "WORAUF WIR ACHTEN", + "home.about.desc": "Wir verbinden klares Design mit sauberem Code und entwickeln digitale Produkte, die im Alltag zuverlässig funktionieren.", + "home.section.discord.title": "Discord-Bots", + "home.section.discord.desc": "Bots für Moderation, Tickets, Economy, KI und weitere Aufgaben in deiner Community.", + "home.section.web.title": "Webentwicklung", + "home.section.web.desc": "Webanwendungen, die schnell laden, sicher betrieben werden können und mit deinem Projekt wachsen.", + "home.section.app.title": "App-Entwicklung", + "home.section.app.desc": "Cross-Platform-Apps für iOS und Android mit klarer Bedienung und einer stabilen technischen Grundlage.", + "home.section.individual.title": "Lösungen nach Bedarf", + "home.section.individual.desc": "Wenn Standardsoftware nicht passt, entwickeln wir die Funktionen und Integrationen, die dein Projekt tatsächlich braucht.", "home.section.learn_more": "Mehr erfahren", - "home.cta.title": "Deine Idee. Auf deine Anforderungen angepasst.", + "home.cta.title": "Du hast ein Projekt im Kopf?", "home.cta.button": "Projekt besprechen", "contact.label": "Information", diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json index b04f1be..f6816e4 100644 --- a/frontend/src/i18n/en.json +++ b/frontend/src/i18n/en.json @@ -12,25 +12,25 @@ "footer.nav_heading": "Navigation", "footer.links_heading": "Links", - "home.hero.kicker": "DIGITAL SOLUTIONS", - "home.hero.title_1": "Digital solutions,", - "home.hero.title_2": "that inspire.", - "home.hero.description": "We develop Discord Bots, web applications and mobile apps – modern, high-performance and custom-tailored.", + "home.hero.kicker": "SOFTWARE DEVELOPMENT", + "home.hero.title_1": "Software built around", + "home.hero.title_2": "your project.", + "home.hero.description": "We develop Discord bots, web applications, and mobile apps around the needs of your project.", "home.hero.cta.primary": "Start project", "home.hero.cta.secondary": "Contact us", - "home.hero.scroll_hint": "Scroll to discover", - "home.about.title": "Technology. Creativity. Passion.", - "home.about.desc": "We combine modern design with clean code to build digital products that truly make a difference.", + "home.hero.scroll_hint": "Scroll down", + "home.about.title": "WHAT MATTERS TO US", + "home.about.desc": "We combine clear design with clean code to build digital products that work reliably in everyday use.", "home.section.discord.title": "Discord Bots", - "home.section.discord.desc": "Custom bots for communities. Moderation, tickets, economy, AI and much more.", + "home.section.discord.desc": "Bots for moderation, tickets, economy, AI, and other tasks in your community.", "home.section.web.title": "Web Development", - "home.section.web.desc": "Modern web applications with the latest technology. Fast, secure, scalable.", + "home.section.web.desc": "Web applications that load quickly, can be operated securely, and grow with your project.", "home.section.app.title": "App Development", - "home.section.app.desc": "Cross-Platform Apps for iOS & Android. User-friendly. Fast. Stable.", - "home.section.individual.title": "Individual Solutions", - "home.section.individual.desc": "Your idea. Our implementation. We build what you need. Tailored for you.", + "home.section.app.desc": "Cross-platform apps for iOS and Android with clear navigation and a stable technical foundation.", + "home.section.individual.title": "Solutions for specific needs", + "home.section.individual.desc": "When standard software does not fit, we build the features and integrations your project actually needs.", "home.section.learn_more": "Learn more", - "home.cta.title": "Your Idea. Engineered.", + "home.cta.title": "Have a project in mind?", "home.cta.button": "Start project", "contact.label": "Information", diff --git a/frontend/src/styles/Home.css b/frontend/src/styles/Home.css index 2579daf..154ec4b 100644 --- a/frontend/src/styles/Home.css +++ b/frontend/src/styles/Home.css @@ -30,12 +30,14 @@ radial-gradient(circle at 70% 45%, rgba(112, 80, 232, 0.12) 0%, transparent 55%), #030b18; } + .home-static-cube { font-size: 120px; font-weight: 900; letter-spacing: -0.04em; background: linear-gradient(135deg, #60c0ff 0%, #8060ff 100%); -webkit-background-clip: text; + background-clip: text; -webkit-text-fill-color: transparent; user-select: none; } @@ -85,10 +87,10 @@ text-transform: uppercase; color: #8878ff; margin-bottom: 28px; - border: 1px solid rgba(136, 120, 255, 0.22); - padding: 5px 14px 5px 10px; - border-radius: 100px; - background: rgba(136, 120, 255, 0.07); + border: 0; + padding: 0; + border-radius: 0; + background: transparent; } .journey-kicker::before { content: "+"; @@ -108,10 +110,11 @@ max-width: 560px; } .hero-accent { - background: linear-gradient(130deg, #60aaff 0%, #9060ff 48%, #60e0ff 100%); + background: linear-gradient(130deg, #74a8ee 0%, #8878df 100%); -webkit-background-clip: text; + background-clip: text; -webkit-text-fill-color: transparent; - filter: drop-shadow(0 0 28px rgba(100, 130, 255, 0.28)); + filter: drop-shadow(0 0 14px rgba(100, 130, 255, 0.14)); } .hero-desc { font-size: clamp(14px, 1.45vw, 16.5px); @@ -148,13 +151,13 @@ max-width: 520px; padding: 48px; border-radius: 24px; - background: rgba(4, 13, 30, 0.42); - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.03); + background: rgba(4, 13, 30, 0.64); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: - 0 24px 60px rgba(0, 0, 0, 0.35), - inset 0 1px 0 rgba(255, 255, 255, 0.05); + 0 16px 40px rgba(0, 0, 0, 0.24), + inset 0 1px 0 rgba(255, 255, 255, 0.03); transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), @@ -162,7 +165,7 @@ } .service-text:hover { - transform: translateY(-4px); + transform: translateY(-2px); } .service--left .service-grid { @@ -191,63 +194,51 @@ #discord { background: - radial-gradient(circle at 15% 30%, rgba(88, 101, 242, 0.12) 0%, transparent 50%), - radial-gradient(circle at 85% 70%, rgba(88, 101, 242, 0.04) 0%, transparent 60%); + radial-gradient(circle at 15% 30%, rgba(88, 101, 242, 0.07) 0%, transparent 50%), + radial-gradient(circle at 85% 70%, rgba(88, 101, 242, 0.02) 0%, transparent 60%); border-top: 1px solid rgba(88, 101, 242, 0.06); border-bottom: 1px solid rgba(88, 101, 242, 0.06); } #discord .service-text:hover { - border-color: rgba(88, 101, 242, 0.3); - box-shadow: - 0 24px 60px rgba(0, 0, 0, 0.45), - 0 0 32px rgba(88, 101, 242, 0.14), - inset 0 1px 0 rgba(255, 255, 255, 0.08); + border-color: rgba(88, 101, 242, 0.2); + box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3); } #web { background: - radial-gradient(circle at 15% 30%, rgba(14, 165, 233, 0.12) 0%, transparent 55%), - radial-gradient(circle at 85% 70%, rgba(14, 165, 233, 0.03) 0%, transparent 50%); + radial-gradient(circle at 15% 30%, rgba(14, 165, 233, 0.07) 0%, transparent 55%), + radial-gradient(circle at 85% 70%, rgba(14, 165, 233, 0.02) 0%, transparent 50%); border-bottom: 1px solid rgba(14, 165, 233, 0.06); } #web .service-text:hover { - border-color: rgba(14, 165, 233, 0.3); - box-shadow: - 0 24px 60px rgba(0, 0, 0, 0.45), - 0 0 32px rgba(14, 165, 233, 0.14), - inset 0 1px 0 rgba(255, 255, 255, 0.08); + border-color: rgba(14, 165, 233, 0.2); + box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3); } #mobile { background: - radial-gradient(circle at 15% 30%, rgba(236, 72, 153, 0.09) 0%, transparent 50%), - radial-gradient(circle at 85% 70%, rgba(236, 72, 153, 0.03) 0%, transparent 60%); + radial-gradient(circle at 15% 30%, rgba(236, 72, 153, 0.055) 0%, transparent 50%), + radial-gradient(circle at 85% 70%, rgba(236, 72, 153, 0.018) 0%, transparent 60%); border-bottom: 1px solid rgba(236, 72, 153, 0.06); } #mobile .service-text:hover { - border-color: rgba(236, 72, 153, 0.3); - box-shadow: - 0 24px 60px rgba(0, 0, 0, 0.45), - 0 0 32px rgba(236, 72, 153, 0.14), - inset 0 1px 0 rgba(255, 255, 255, 0.08); + border-color: rgba(236, 72, 153, 0.18); + box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3); } #individual { background: - radial-gradient(circle at 15% 30%, rgba(168, 85, 247, 0.12) 0%, transparent 55%), - radial-gradient(circle at 85% 70%, rgba(168, 85, 247, 0.03) 0%, transparent 50%); + radial-gradient(circle at 15% 30%, rgba(168, 85, 247, 0.07) 0%, transparent 55%), + radial-gradient(circle at 85% 70%, rgba(168, 85, 247, 0.02) 0%, transparent 50%); border-bottom: 1px solid rgba(168, 85, 247, 0.06); } #individual .service-text:hover { - border-color: rgba(168, 85, 247, 0.3); - box-shadow: - 0 24px 60px rgba(0, 0, 0, 0.45), - 0 0 32px rgba(168, 85, 247, 0.14), - inset 0 1px 0 rgba(255, 255, 255, 0.08); + border-color: rgba(168, 85, 247, 0.2); + box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3); } #cta { @@ -270,9 +261,8 @@ transition: background 0.24s, border-color 0.24s, box-shadow 0.24s; } .svc-icon:hover { - background: rgba(112, 80, 232, 0.16); - border-color: rgba(136, 120, 255, 0.36); - box-shadow: 0 0 18px rgba(112, 80, 232, 0.18); + background: rgba(112, 80, 232, 0.13); + border-color: rgba(136, 120, 255, 0.28); } #discord .svc-icon { background: rgba(88,101,242,0.10); border-color: rgba(88,101,242,0.22); color: #7888f8; } #web .svc-icon { background: rgba(14,165,233,0.08); border-color: rgba(14,165,233,0.20); color: #38b8f8; } @@ -330,20 +320,20 @@ gap: 9px; padding: 13px 28px; border-radius: 100px; - background: linear-gradient(135deg, #4858e8 0%, #6838d8 100%); + background: linear-gradient(135deg, #5060d4 0%, #6250bc 100%); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; border: none; - box-shadow: 0 4px 22px rgba(72, 88, 232, 0.32); + box-shadow: 0 4px 16px rgba(40, 50, 130, 0.24); transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.22s ease; white-space: nowrap; } .home-primary-button:hover { - transform: translateY(-2px); - box-shadow: 0 8px 36px rgba(72, 88, 232, 0.52); - filter: brightness(1.1); + transform: translateY(-1px); + box-shadow: 0 7px 22px rgba(40, 50, 130, 0.3); + filter: brightness(1.05); } .home-secondary-button { @@ -391,10 +381,9 @@ letter-spacing: 0.01em; } .journey-tags span:hover { - background: rgba(120, 100, 255, 0.12); - border-color: rgba(136, 120, 255, 0.28); - color: #b0b8f8; - box-shadow: 0 0 12px rgba(120, 100, 255, 0.12); + background: rgba(120, 100, 255, 0.09); + border-color: rgba(136, 120, 255, 0.22); + color: #9ca8dc; } .journey-link { @@ -467,9 +456,7 @@ line-height: 1.08; letter-spacing: -0.034em; margin: 0 0 20px; - background: linear-gradient(135deg, #e8ecff 28%, #b0a8ff 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; + color: #e8ecff; } .final-journey-content > p { font-size: 16.5px;