sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Translate UI elements and search placeholders to German

Browse Source 
Update navigation links from "Home" to "Startseite" and search input placeholders from "Search..." to "Suchen..." across multiple pages for German language support. Also, modifies a loading message in `GeschichteLiedPage.tsx` from "Loading GESCHICHTE VUM LIED..." to "Loading GESCHICHTE DES LIEDES...". The footer structure in `home.tsx` is also refactored.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/4DOsXkx
This commit is contained in:
sebastjanartic 2025-09-02 17:13:59 +00:00
parent 97600c6037
commit d7a7eddf6d
5 changed files with 63 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
client/src/pages/FolxStadlPage.tsx
View File

@ -111,7 +111,7 @@ export default function FolxStadlPage() {
<div className="hidden md:flex items-center space-x-6"> <div className="hidden md:flex items-center space-x-6">
<nav className="flex space-x-6"> <nav className="flex space-x-6">
<Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group"> <Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
Home Startseite
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span> <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span>
</Link> </Link>
<Link href="/folx-stadl" className="relative text-bunny-light hover:text-bunny-blue transition-colors group"> <Link href="/folx-stadl" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
@ -131,7 +131,7 @@ export default function FolxStadlPage() {
<div className="relative"> <div className="relative">
<Input <Input
type="search" type="search"
placeholder="Search..." placeholder="Suchen..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-56" className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-56"
@ -169,7 +169,7 @@ export default function FolxStadlPage() {
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3" className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
> >
Home Startseite
</Link> </Link>
<Link <Link
href="/folx-stadl" href="/folx-stadl"
@ -204,7 +204,7 @@ export default function FolxStadlPage() {
<div className="relative"> <div className="relative">
<Input <Input
type="search" type="search"
placeholder="Search..." placeholder="Suchen..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full" className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full"
@ -300,60 +300,18 @@ export default function FolxStadlPage() {
{/* Footer */} {/* Footer */}
<footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12"> <footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12">
<div className="container"> <div className="container">
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 text-sm"> <div className="flex flex-col items-center justify-center space-y-4">
{/* Company Info */} {/* Logo */}
<div className="col-span-1"> <div className="flex items-center space-x-2">
<div className="flex items-center space-x-2 mb-4"> <div className="w-8 h-8 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg flex items-center justify-center shadow-lg">
<div className="w-8 h-8 gradient-primary rounded-lg flex items-center justify-center"> <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-1 drop-shadow-sm"></div>
<div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-1"></div>
</div>
<h3 className="text-xl font-bold text-white">go4.video</h3>
</div>
<div>
<h4 className="text-white font-semibold mb-3">Kategorien</h4>
<ul className="space-y-2">
<li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Volksmusik</a></li>
<li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Dokumentationen</a></li>
<li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Interviews</a></li>
<li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Shows</a></li>
</ul>
</div> </div>
<h3 className="text-xl font-bold text-white">go4.video</h3>
</div> </div>
{/* Navigation */} {/* Copyright */}
<div className="col-span-1"> <p className="text-bunny-muted text-sm text-center">
<div className="pt-2"></div> © 2025 go4.video. Alle Rechte vorbehalten.
<h4 className="text-white font-semibold mb-4">Navigation</h4>
<ul className="space-y-2">
<li><Link href="/" className="text-bunny-muted hover:text-white transition-colors">Home</Link></li>
<li><Link href="/folx-stadl" className="text-bunny-muted hover:text-white transition-colors">FOLX STADL</Link></li>
<li><Link href="/geschichte-lied" className="text-bunny-muted hover:text-white transition-colors">DIE GESCHICHTE DES LIEDES</Link></li>
<li><Link href="/gipfelstammtisch" className="text-bunny-muted hover:text-white transition-colors">GIPFELSTAMMTISCH</Link></li>
</ul>
</div>
{/* Support Links */}
<div className="col-span-1">
<div className="pt-2 space-y-1">
<div className="flex gap-4">
<a href="#" className="text-bunny-muted hover:text-white transition-colors text-sm">Hilfe & FAQ</a>
<span className="text-bunny-muted">|</span>
<a href="#" className="text-bunny-muted hover:text-white transition-colors text-sm">Kontakt</a>
</div>
<div className="flex gap-4">
<a href="#" className="text-bunny-muted hover:text-white transition-colors text-sm">Datenschutz</a>
<span className="text-bunny-muted">|</span>
<a href="#" className="text-bunny-muted hover:text-white transition-colors text-sm">Impressum</a>
</div>
</div>
</div>
</div>
{/* Copyright */}
<div className="border-t border-white/10 mt-8 pt-6 text-center">
<p className="text-bunny-muted text-sm">
© 2025 go4.video. Alle Rechte vorbehalten. | Powered by Bunny.net CDN
</p> </p>
</div> </div>
</div> </div>

72
client/src/pages/GeschichteLiedPage.tsx
View File

@ -85,7 +85,7 @@ export default function GeschichteLiedPage() {
<div className="w-0 h-0 border-l-[12px] border-l-white border-y-[9px] border-y-transparent ml-1"></div> <div className="w-0 h-0 border-l-[12px] border-l-white border-y-[9px] border-y-transparent ml-1"></div>
</div> </div>
<h3 className="text-white text-xl font-bold mb-2">go4.video</h3> <h3 className="text-white text-xl font-bold mb-2">go4.video</h3>
<p className="text-bunny-light">Loading GESCHICHTE VUM LIED...</p> <p className="text-bunny-light">Loading GESCHICHTE DES LIEDES...</p>
</div> </div>
</div> </div>
); );
@ -113,7 +113,7 @@ export default function GeschichteLiedPage() {
<div className="hidden md:flex items-center space-x-6"> <div className="hidden md:flex items-center space-x-6">
<nav className="flex space-x-6"> <nav className="flex space-x-6">
<Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group"> <Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
Home Startseite
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span> <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span>
</Link> </Link>
<Link href="/folx-stadl" className="relative text-bunny-light hover:text-bunny-blue transition-colors group"> <Link href="/folx-stadl" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
@ -133,7 +133,7 @@ export default function GeschichteLiedPage() {
<div className="relative"> <div className="relative">
<Input <Input
type="search" type="search"
placeholder="Search..." placeholder="Suchen..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-56" className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-56"
@ -171,7 +171,7 @@ export default function GeschichteLiedPage() {
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3" className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
> >
Home Startseite
</Link> </Link>
<Link <Link
href="/folx-stadl" href="/folx-stadl"
@ -206,7 +206,7 @@ export default function GeschichteLiedPage() {
<div className="relative"> <div className="relative">
<Input <Input
type="search" type="search"
placeholder="Search..." placeholder="Suchen..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full" className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full"
@ -301,60 +301,18 @@ export default function GeschichteLiedPage() {
{/* Footer */} {/* Footer */}
<footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12"> <footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12">
<div className="container"> <div className="container">
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 text-sm"> <div className="flex flex-col items-center justify-center space-y-4">
{/* Company Info */} {/* Logo */}
<div className="col-span-1"> <div className="flex items-center space-x-2">
<div className="flex items-center space-x-2 mb-4"> <div className="w-8 h-8 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg flex items-center justify-center shadow-lg">
<div className="w-8 h-8 gradient-primary rounded-lg flex items-center justify-center"> <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-1 drop-shadow-sm"></div>
<div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-1"></div>
</div>
<h3 className="text-xl font-bold text-white">go4.video</h3>
</div>
<div>
<h4 className="text-white font-semibold mb-3">Kategorien</h4>
<ul className="space-y-2">
<li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Volksmusik</a></li>
<li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Dokumentationen</a></li>
<li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Interviews</a></li>
<li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Shows</a></li>
</ul>
</div> </div>
<h3 className="text-xl font-bold text-white">go4.video</h3>
</div> </div>
{/* Navigation */} {/* Copyright */}
<div className="col-span-1"> <p className="text-bunny-muted text-sm text-center">
<div className="pt-2"></div> © 2025 go4.video. Alle Rechte vorbehalten.
<h4 className="text-white font-semibold mb-4">Navigation</h4>
<ul className="space-y-2">
<li><Link href="/" className="text-bunny-muted hover:text-white transition-colors">Home</Link></li>
<li><Link href="/folx-stadl" className="text-bunny-muted hover:text-white transition-colors">FOLX STADL</Link></li>
<li><Link href="/geschichte-lied" className="text-bunny-muted hover:text-white transition-colors">DIE GESCHICHTE DES LIEDES</Link></li>
<li><Link href="/gipfelstammtisch" className="text-bunny-muted hover:text-white transition-colors">GIPFELSTAMMTISCH</Link></li>
</ul>
</div>
{/* Support Links */}
<div className="col-span-1">
<div className="pt-2 space-y-1">
<div className="flex gap-4">
<a href="#" className="text-bunny-muted hover:text-white transition-colors text-sm">Hilfe & FAQ</a>
<span className="text-bunny-muted">|</span>
<a href="#" className="text-bunny-muted hover:text-white transition-colors text-sm">Kontakt</a>
</div>
<div className="flex gap-4">
<a href="#" className="text-bunny-muted hover:text-white transition-colors text-sm">Datenschutz</a>
<span className="text-bunny-muted">|</span>
<a href="#" className="text-bunny-muted hover:text-white transition-colors text-sm">Impressum</a>
</div>
</div>
</div>
</div>
{/* Copyright */}
<div className="border-t border-white/10 mt-8 pt-6 text-center">
<p className="text-bunny-muted text-sm">
© 2025 go4.video. Alle Rechte vorbehalten. | Powered by Bunny.net CDN
</p> </p>
</div> </div>
</div> </div>

70
client/src/pages/GipfelstammtischPage.tsx
View File

@ -113,7 +113,7 @@ export default function GipfelstammtischPage() {
<div className="hidden md:flex items-center space-x-6"> <div className="hidden md:flex items-center space-x-6">
<nav className="flex space-x-6"> <nav className="flex space-x-6">
<Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group"> <Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
Home Startseite
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span> <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span>
</Link> </Link>
<Link href="/folx-stadl" className="relative text-bunny-light hover:text-bunny-blue transition-colors group"> <Link href="/folx-stadl" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
@ -133,7 +133,7 @@ export default function GipfelstammtischPage() {
<div className="relative"> <div className="relative">
<Input <Input
type="search" type="search"
placeholder="Search..." placeholder="Suchen..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-56" className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-56"
@ -171,7 +171,7 @@ export default function GipfelstammtischPage() {
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3" className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
> >
Home Startseite
</Link> </Link>
<Link <Link
href="/folx-stadl" href="/folx-stadl"
@ -206,7 +206,7 @@ export default function GipfelstammtischPage() {
<div className="relative"> <div className="relative">
<Input <Input
type="search" type="search"
placeholder="Search..." placeholder="Suchen..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full" className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full"
@ -301,60 +301,18 @@ export default function GipfelstammtischPage() {
{/* Footer */} {/* Footer */}
<footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12"> <footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12">
<div className="container"> <div className="container">
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 text-sm"> <div className="flex flex-col items-center justify-center space-y-4">
{/* Company Info */} {/* Logo */}
<div className="col-span-1"> <div className="flex items-center space-x-2">
<div className="flex items-center space-x-2 mb-4"> <div className="w-8 h-8 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg flex items-center justify-center shadow-lg">
<div className="w-8 h-8 gradient-primary rounded-lg flex items-center justify-center"> <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-1 drop-shadow-sm"></div>
<div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-1"></div>
</div>
<h3 className="text-xl font-bold text-white">go4.video</h3>
</div>
<div>
<h4 className="text-white font-semibold mb-3">Kategorien</h4>
<ul className="space-y-2">
<li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Volksmusik</a></li>
<li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Dokumentationen</a></li>
<li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Interviews</a></li>
<li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Shows</a></li>
</ul>
</div> </div>
<h3 className="text-xl font-bold text-white">go4.video</h3>
</div> </div>
{/* Navigation */} {/* Copyright */}
<div className="col-span-1"> <p className="text-bunny-muted text-sm text-center">
<div className="pt-2"></div> © 2025 go4.video. Alle Rechte vorbehalten.
<h4 className="text-white font-semibold mb-4">Navigation</h4>
<ul className="space-y-2">
<li><Link href="/" className="text-bunny-muted hover:text-white transition-colors">Home</Link></li>
<li><Link href="/folx-stadl" className="text-bunny-muted hover:text-white transition-colors">FOLX STADL</Link></li>
<li><Link href="/geschichte-lied" className="text-bunny-muted hover:text-white transition-colors">DIE GESCHICHTE DES LIEDES</Link></li>
<li><Link href="/gipfelstammtisch" className="text-bunny-muted hover:text-white transition-colors">GIPFELSTAMMTISCH</Link></li>
</ul>
</div>
{/* Support Links */}
<div className="col-span-1">
<div className="pt-2 space-y-1">
<div className="flex gap-4">
<a href="#" className="text-bunny-muted hover:text-white transition-colors text-sm">Hilfe & FAQ</a>
<span className="text-bunny-muted">|</span>
<a href="#" className="text-bunny-muted hover:text-white transition-colors text-sm">Kontakt</a>
</div>
<div className="flex gap-4">
<a href="#" className="text-bunny-muted hover:text-white transition-colors text-sm">Datenschutz</a>
<span className="text-bunny-muted">|</span>
<a href="#" className="text-bunny-muted hover:text-white transition-colors text-sm">Impressum</a>
</div>
</div>
</div>
</div>
{/* Copyright */}
<div className="border-t border-white/10 mt-8 pt-6 text-center">
<p className="text-bunny-muted text-sm">
© 2025 go4.video. Alle Rechte vorbehalten. | Powered by Bunny.net CDN
</p> </p>
</div> </div>
</div> </div>

8
client/src/pages/VideoPage.tsx
View File

@ -303,7 +303,7 @@ export default function VideoPage() {
<div className="hidden md:flex items-center space-x-6"> <div className="hidden md:flex items-center space-x-6">
<nav className="flex space-x-6"> <nav className="flex space-x-6">
<Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group"> <Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
Home Startseite
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span> <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span>
</Link> </Link>
<Link href="/folx-stadl" className="relative text-bunny-light hover:text-bunny-blue transition-colors group"> <Link href="/folx-stadl" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
@ -323,7 +323,7 @@ export default function VideoPage() {
<div className="relative"> <div className="relative">
<Input <Input
type="search" type="search"
placeholder="Search..." placeholder="Suchen..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-56" className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-56"
@ -361,7 +361,7 @@ export default function VideoPage() {
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3" className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
> >
Home Startseite
</Link> </Link>
<Link <Link
href="/folx-stadl" href="/folx-stadl"
@ -396,7 +396,7 @@ export default function VideoPage() {
<div className="relative"> <div className="relative">
<Input <Input
type="search" type="search"
placeholder="Search..." placeholder="Suchen..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full" className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full"

81
client/src/pages/home.tsx
View File

@ -86,7 +86,7 @@ export default function Home() {
<div className="hidden md:flex items-center space-x-6"> <div className="hidden md:flex items-center space-x-6">
<nav className="flex space-x-6"> <nav className="flex space-x-6">
<Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group"> <Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
Home Startseite
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span> <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span>
</Link> </Link>
<Link href="/folx-stadl" className="relative text-bunny-light hover:text-bunny-blue transition-colors group"> <Link href="/folx-stadl" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
@ -106,7 +106,7 @@ export default function Home() {
<div className="relative"> <div className="relative">
<Input <Input
type="search" type="search"
placeholder="Search..." placeholder="Suchen..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-56" className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-56"
@ -144,7 +144,7 @@ export default function Home() {
className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3" className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
> >
Home Startseite
</Link> </Link>
<Link <Link
href="/folx-stadl" href="/folx-stadl"
@ -179,7 +179,7 @@ export default function Home() {
<div className="relative"> <div className="relative">
<Input <Input
type="search" type="search"
placeholder="Search..." placeholder="Suchen..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full" className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full"
@ -202,69 +202,20 @@ export default function Home() {
</main> </main>
{/* Footer */} {/* Footer */}
<footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12 relative overflow-hidden"> <footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12">
{/* Background go4.video logos */} <div className="container">
<div className="bg-logo-large" style={{ top: '20%', left: '5%', transform: 'rotate(-15deg)' }}></div> <div className="flex flex-col items-center justify-center space-y-4">
<div className="bg-logo-medium" style={{ top: '60%', right: '10%', transform: 'rotate(25deg)' }}></div> {/* Logo */}
<div className="bg-logo-small" style={{ bottom: '20%', left: '15%', transform: 'rotate(-45deg)' }}></div> <div className="flex items-center space-x-2">
<div className="bg-logo-medium" style={{ top: '10%', right: '25%', transform: 'rotate(60deg)' }}></div> <div className="w-8 h-8 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg flex items-center justify-center shadow-lg">
<div className="bg-logo-small" style={{ bottom: '40%', right: '30%', transform: 'rotate(-20deg)' }}></div> <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-1 drop-shadow-sm"></div>
<div className="container relative z-10">
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 text-sm">
{/* Company Info */}
<div className="col-span-1">
<div className="flex items-center space-x-2 mb-4">
<div className="w-8 h-8 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg flex items-center justify-center shadow-lg">
<div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-1 drop-shadow-sm"></div>
</div>
<h3 className="text-xl font-bold text-white">go4.video</h3>
</div>
<div>
<h4 className="text-white font-semibold mb-3">Kategorien</h4>
<ul className="space-y-2">
<li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Volksmusik</a></li>
<li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Dokumentationen</a></li>
<li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Interviews</a></li>
<li><a href="#" className="text-bunny-muted hover:text-white transition-colors">Shows</a></li>
</ul>
</div> </div>
<h3 className="text-xl font-bold text-white">go4.video</h3>
</div> </div>
{/* Navigation */} {/* Copyright */}
<div className="col-span-1"> <p className="text-bunny-muted text-sm text-center">
<div className="pt-2"></div> © 2025 go4.video. Alle Rechte vorbehalten.
<h4 className="text-white font-semibold mb-4">Navigation</h4>
<ul className="space-y-2">
<li><Link href="/" className="text-bunny-muted hover:text-white transition-colors">Home</Link></li>
<li><Link href="/folx-stadl" className="text-bunny-muted hover:text-white transition-colors">FOLX STADL</Link></li>
<li><Link href="/geschichte-lied" className="text-bunny-muted hover:text-white transition-colors">DIE GESCHICHTE DES LIEDES</Link></li>
<li><Link href="/gipfelstammtisch" className="text-bunny-muted hover:text-white transition-colors">GIPFELSTAMMTISCH</Link></li>
</ul>
</div>
{/* Support Links */}
<div className="col-span-1">
<div className="pt-2 space-y-1">
<div className="flex gap-4">
<a href="#" className="text-bunny-muted hover:text-white transition-colors text-sm">Hilfe & FAQ</a>
<span className="text-bunny-muted">|</span>
<a href="#" className="text-bunny-muted hover:text-white transition-colors text-sm">Kontakt</a>
</div>
<div className="flex gap-4">
<a href="#" className="text-bunny-muted hover:text-white transition-colors text-sm">Datenschutz</a>
<span className="text-bunny-muted">|</span>
<a href="#" className="text-bunny-muted hover:text-white transition-colors text-sm">Impressum</a>
</div>
</div>
</div>
</div>
{/* Copyright */}
<div className="border-t border-white/10 mt-8 pt-6 text-center">
<p className="text-bunny-muted text-sm">
© 2025 go4.video. Alle Rechte vorbehalten. | Powered by Bunny.net CDN
</p> </p>
</div> </div>
</div> </div>