Add a new page for TV reception information and link it in the footer

Adds a new route for the EmpfangPage and includes a link to it in the footer component. Also updates gallery-data.json with new image URLs.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: df84a781-61cd-4047-83b2-9ae7605ed597
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/EtK2Sno
Replit-Helium-Checkpoint-Created: true

client/src/App.tsx

@@ -12,6 +12,7 @@ import GalleryPageWrapper from "@/pages/gallery";
 import HoroscopePage from "@/pages/horoscope";
 import RecipesPage from "@/pages/recipes";
 import SearchPage from "@/pages/search";
+import EmpfangPage from "@/pages/empfang";
 import CookieConsent from "@/components/cookie-consent";
 
 function Router() {
@@ -26,6 +27,7 @@ function Router() {
       <Route path="/horoskop" component={HoroscopePage} />
       <Route path="/horoskop/:sign" component={HoroscopePage} />
       <Route path="/rezepte" component={RecipesPage} />
+      <Route path="/empfang-folx-tv" component={EmpfangPage} />
       <Route component={NotFound} />
     </Switch>
   );

client/src/components/footer.tsx

@@ -63,6 +63,11 @@ export default function Footer() {
                   <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-rezepte">Rezepte</span>
                 </Link>
               </li>
+              <li>
+                <Link href="/empfang-folx-tv">
+                  <span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-empfang">Empfang</span>
+                </Link>
+              </li>
             </ul>
           </div>
           <div>

client/src/pages/empfang.tsx

@@ -0,0 +1,131 @@
+import { Satellite, Tv, Radio } from "lucide-react";
+import Header from "@/components/header";
+import Footer from "@/components/footer";
+
+const PROVIDERS = [
+  {
+    name: "O2",
+    url: "https://www.o2online.de/tv/",
+    color: "#0019A5",
+  },
+  {
+    name: "Magenta",
+    url: "https://www.telekom.de/magenta-tv",
+    color: "#E20074",
+  },
+  {
+    name: "Zattoo",
+    url: "https://zattoo.com/",
+    color: "#00BFA5",
+  },
+  {
+    name: "Swisscom",
+    url: "https://www.swisscom.ch/tv",
+    color: "#001155",
+  },
+];
+
+export default function EmpfangPage() {
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <h1 className="text-3xl font-bold text-foreground mb-2" data-testid="text-empfang-title">
+          Empfang Folx TV
+        </h1>
+        <p className="text-muted-foreground mb-8" data-testid="text-empfang-subtitle">
+          So empfangen Sie Folx Music Television
+        </p>
+
+        <section className="mb-10" data-testid="section-satellite">
+          <div className="bg-card rounded-lg border border-card-border p-6">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
+                <Satellite className="w-5 h-5 text-primary" />
+              </div>
+              <h2 className="text-xl font-bold text-card-foreground">Satellit</h2>
+            </div>
+            <div className="bg-muted/30 rounded-md p-4">
+              <p className="text-card-foreground font-semibold text-lg" data-testid="text-satellite-info">
+                ASTRA 19,2° OST, 12.148
+              </p>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-3 text-sm">
+                <div>
+                  <span className="text-muted-foreground">Frequenz</span>
+                  <p className="text-card-foreground font-medium">12.148 MHz</p>
+                </div>
+                <div>
+                  <span className="text-muted-foreground">Polarisation</span>
+                  <p className="text-card-foreground font-medium">Horizontal</p>
+                </div>
+                <div>
+                  <span className="text-muted-foreground">Symbolrate</span>
+                  <p className="text-card-foreground font-medium">27.500</p>
+                </div>
+                <div>
+                  <span className="text-muted-foreground">FEC</span>
+                  <p className="text-card-foreground font-medium">3/4</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="mb-10" data-testid="section-iptv">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
+              <Tv className="w-5 h-5 text-primary" />
+            </div>
+            <h2 className="text-xl font-bold text-foreground">IPTV & Streaming</h2>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            {PROVIDERS.map((provider) => (
+              <a
+                key={provider.name}
+                href={provider.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="bg-card rounded-lg border border-card-border p-5 hover:border-primary/50 transition-colors group"
+                data-testid={`link-provider-${provider.name.toLowerCase()}`}
+              >
+                <div className="flex items-center gap-3">
+                  <div
+                    className="w-10 h-10 rounded-lg flex items-center justify-center text-white font-bold text-sm"
+                    style={{ backgroundColor: provider.color }}
+                  >
+                    {provider.name.slice(0, 2).toUpperCase()}
+                  </div>
+                  <div>
+                    <h3 className="font-semibold text-card-foreground group-hover:text-primary transition-colors">
+                      {provider.name}
+                    </h3>
+                    <p className="text-xs text-muted-foreground">IPTV / Streaming</p>
+                  </div>
+                </div>
+              </a>
+            ))}
+          </div>
+        </section>
+
+        <section data-testid="section-info">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
+              <Radio className="w-5 h-5 text-primary" />
+            </div>
+            <h2 className="text-xl font-bold text-foreground">Weitere Informationen</h2>
+          </div>
+          <div className="bg-card rounded-lg border border-card-border p-6">
+            <p className="text-muted-foreground text-sm leading-relaxed">
+              Folx Music Television ist ein Free-to-Air Sender und kann kostenlos
+              und unverschlüsselt über Satellit ASTRA 19,2° Ost empfangen werden.
+              Zusätzlich ist Folx TV über verschiedene IPTV- und Streaming-Anbieter
+              verfügbar. Bei Fragen zum Empfang wenden Sie sich bitte an Ihren
+              jeweiligen TV-Anbieter.
+            </p>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </div>
+  );
+}