fixed like action, better dark mode, bottom navigation working, added taskcollection

resources/js/guest/pages/HomePage.tsx

@@ -2,33 +2,36 @@ import React from 'react';
 import { Page } from './_util';
 import { useParams, Link } from 'react-router-dom';
 import { usePollStats } from '../polling/usePollStats';
-import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
+import Header from '../components/Header';
+import EmotionPicker from '../components/EmotionPicker';
 import GalleryPreview from '../components/GalleryPreview';
+import BottomNav from '../components/BottomNav';
 
 export default function HomePage() {
   const { slug } = useParams();
   const stats = usePollStats(slug!);
   return (
     <Page title={`Event: ${slug}`}>
-      <Card>
-        <CardContent className="p-3 text-sm">
-          {stats.loading ? 'Lade…' : (
-            <span>
-              <span className="font-medium">{stats.onlineGuests}</span> Gäste online · ✅{' '}
-              <span className="font-medium">{stats.tasksSolved}</span> Aufgaben gelöst
+      <Header slug={slug!} title={`Event: ${slug}`} />
+      <div className="px-4 py-6 pb-20 space-y-6"> {/* Consistent spacing */}
+        {/* Prominent Draw Task Button */}
+        <Link to="tasks">
+          <Button className="w-full bg-gradient-to-r from-pink-500 to-pink-600 hover:from-pink-600 hover:to-pink-700 text-white py-4 rounded-xl text-base font-semibold mb-6 shadow-lg hover:shadow-xl transition-all duration-200">
+            <span className="flex items-center gap-2">
+              🎲 Aufgabe ziehen
             </span>
-          )}
-        </CardContent>
-      </Card>
-      <div className="h-3" />
-      <div className="flex flex-wrap gap-2">
-        <Link to="tasks"><Button variant="secondary">Aufgabe ziehen</Button></Link>
-        <Link to="tasks"><Button variant="secondary">Wie fühlst du dich?</Button></Link>
-        <Link to="upload"><Button>Einfach ein Foto machen</Button></Link>
+          </Button>
+        </Link>
+
+        {/* How do you feel? Section */}
+        <EmotionPicker />
+
+        <GalleryPreview slug={slug!} />
       </div>
-      <div className="h-4" />
-      <GalleryPreview slug={slug!} />
+      
+      {/* Bottom Navigation */}
+      <BottomNav />
     </Page>
   );
 }