max.olchov/HifiPlanet-Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Swap hero photo so the header needs no background trick at all

Browse source 
New hero (dual subwoofers + purple-lit amp panels) is dark enough
top-to-bottom that the transparent header's white text/icons read
cleanly without any pill or backing behind the logo - removed that
workaround entirely. The old hero photo moves into the "Einblicke"
gallery grid instead of being dropped.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Maaxxs 2026-07-06 19:07:42 +02:00
parent 3b32d851a1
commit ca4d3a2079
2 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
hifi-src/src/components/Navbar.jsx
View file

@ -107,7 +107,7 @@ export default function Navbar() {
</button> </button>
</div> </div>
<Link to="/" className={`flex items-center justify-self-center rounded-lg px-2 py-1 dark:bg-white ${transparent ? 'bg-white/50 backdrop-blur-sm' : ''}`}> <Link to="/" className="flex items-center justify-self-center rounded-lg px-2 py-1 dark:bg-white">
<img src={logo} alt="HifiPlanet" className="h-14 w-auto sm:h-16" /> <img src={logo} alt="HifiPlanet" className="h-14 w-auto sm:h-16" />
</Link> </Link>

8
hifi-src/src/pages/public/Home.jsx
View file

@ -8,12 +8,12 @@ import StarRating from '../../components/StarRating.jsx';
import TestimonialSlider from '../../components/TestimonialSlider.jsx'; import TestimonialSlider from '../../components/TestimonialSlider.jsx';
import ExternalEmbed from '../../components/ExternalEmbed.jsx'; import ExternalEmbed from '../../components/ExternalEmbed.jsx';
import { useSiteSettings } from '../../context/SiteSettingsContext.jsx'; import { useSiteSettings } from '../../context/SiteSettingsContext.jsx';
import defaultHeroImage from '../../assets/photos/hero-trunk.jpg'; import defaultHeroImage from '../../assets/photos/gallery-dash2.jpg';
import galleryAmp from '../../assets/photos/gallery-amp-purple.jpg'; import galleryAmp from '../../assets/photos/gallery-amp-purple.jpg';
import gallerySpeaker from '../../assets/photos/gallery-speaker.jpg'; import gallerySpeaker from '../../assets/photos/gallery-speaker.jpg';
import gallerySubs from '../../assets/photos/gallery-subs.jpg'; import gallerySubs from '../../assets/photos/gallery-subs.jpg';
import galleryDash from '../../assets/photos/gallery-dash.jpg'; import galleryDash from '../../assets/photos/gallery-dash.jpg';
import galleryDash2 from '../../assets/photos/gallery-dash2.jpg'; import galleryTrunk from '../../assets/photos/hero-trunk.jpg';
import galleryRear from '../../assets/photos/gallery-rear.jpg'; import galleryRear from '../../assets/photos/gallery-rear.jpg';
import heroHighlight from '../../assets/leistungen/hero-highlight.jpg'; import heroHighlight from '../../assets/leistungen/hero-highlight.jpg';
@ -41,7 +41,7 @@ const gallery = [
{ src: gallerySpeaker, alt: 'Hochtöner- und Mitteltöner-Einbau von Focal Utopia' }, { src: gallerySpeaker, alt: 'Hochtöner- und Mitteltöner-Einbau von Focal Utopia' },
{ src: galleryDash, alt: 'Sony Navigationssystem mit Apple CarPlay im Cockpit' }, { src: galleryDash, alt: 'Sony Navigationssystem mit Apple CarPlay im Cockpit' },
{ src: galleryRear, alt: 'Verbauter Hochtöner im Kofferraum' }, { src: galleryRear, alt: 'Verbauter Hochtöner im Kofferraum' },
{ src: galleryDash2, alt: 'Individuell beleuchtetes Cockpit mit Soundsystem' }, { src: galleryTrunk, alt: 'Individueller Subwoofer-Einbau mit LED-Beleuchtung im Kofferraum' },
]; ];
const testimonials = [ const testimonials = [
@ -133,7 +133,7 @@ export default function Home() {
<motion.img <motion.img
style={{ y: heroImageY }} style={{ y: heroImageY }}
src={heroImage} src={heroImage}
alt="Individueller Subwoofer-Einbau mit LED-Beleuchtung im Kofferraum" alt="Ground Zero Subwoofer und Endstufen mit violetter Ambiente-Beleuchtung"
className="absolute inset-0 h-full w-full scale-110 object-cover" className="absolute inset-0 h-full w-full scale-110 object-cover"
/> />
<div className="absolute inset-0 bg-gradient-to-t from-neutral-950 via-neutral-950/80 to-neutral-950/40" /> <div className="absolute inset-0 bg-gradient-to-t from-neutral-950 via-neutral-950/80 to-neutral-950/40" />