wip

apps/website/app/social/page.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import Card from '@/components/ui/Card';
+
+// Mock data for highlights
+const MOCK_HIGHLIGHTS = [
+  {
+    id: '1',
+    type: 'race',
+    title: 'Epic finish in GT3 Championship',
+    description: 'Max Verstappen wins by 0.003 seconds',
+    time: '2 hours ago',
+  },
+  {
+    id: '2',
+    type: 'league',
+    title: 'New league created: Endurance Masters',
+    description: '12 teams already registered',
+    time: '5 hours ago',
+  },
+  {
+    id: '3',
+    type: 'achievement',
+    title: 'Sarah Chen unlocked "Century Club"',
+    description: '100 races completed',
+    time: '1 day ago',
+  },
+];
+
+const TRENDING_DRIVERS = [
+  { id: '1', name: 'Max Verstappen', metric: '+156 rating this week' },
+  { id: '2', name: 'Emma Thompson', metric: '5 wins in a row' },
+  { id: '3', name: 'Lewis Hamilton', metric: 'Most laps led' },
+];
+
+const TRENDING_TEAMS = [
+  { id: '1', name: 'Apex Racing', metric: '12 new members' },
+  { id: '2', name: 'Speed Demons', metric: '3 championship wins' },
+  { id: '3', name: 'Endurance Elite', metric: '24h race victory' },
+];
+
+export default function SocialPage() {
+  return (
+    <div className="max-w-6xl mx-auto">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-white mb-2">Social Hub</h1>
+        <p className="text-gray-400">
+          Stay updated with the racing community
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Activity Feed */}
+        <div className="lg:col-span-2">
+          <Card>
+            <div className="space-y-6">
+              <h2 className="text-xl font-semibold text-white">
+                Activity Feed
+              </h2>
+              <div className="bg-primary-blue/10 border border-primary-blue/20 rounded-lg p-8 text-center">
+                <div className="text-4xl mb-4">🚧</div>
+                <h3 className="text-lg font-semibold text-white mb-2">
+                  Coming Soon
+                </h3>
+                <p className="text-gray-400">
+                  The activity feed will show real-time updates from your
+                  friends, leagues, and teams. This feature is currently in
+                  development for the alpha release.
+                </p>
+              </div>
+
+              <div>
+                <h3 className="text-sm font-semibold text-gray-400 mb-4">
+                  Recent Highlights
+                </h3>
+                <div className="space-y-4">
+                  {MOCK_HIGHLIGHTS.map((highlight) => (
+                    <div
+                      key={highlight.id}
+                      className="border-l-4 border-primary-blue pl-4 py-2"
+                    >
+                      <h4 className="font-semibold text-white">
+                        {highlight.title}
+                      </h4>
+                      <p className="text-sm text-gray-400">
+                        {highlight.description}
+                      </p>
+                      <p className="text-xs text-gray-500 mt-1">
+                        {highlight.time}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </Card>
+        </div>
+
+        {/* Sidebar */}
+        <div className="space-y-6">
+          {/* Trending Drivers */}
+          <Card>
+            <div className="space-y-4">
+              <h2 className="text-lg font-semibold text-white">
+                🔥 Trending Drivers
+              </h2>
+              <div className="space-y-3">
+                {TRENDING_DRIVERS.map((driver, index) => (
+                  <div key={driver.id} className="flex items-center gap-3">
+                    <div className="w-8 h-8 bg-charcoal-outline rounded-full flex items-center justify-center text-sm font-bold text-gray-400">
+                      {index + 1}
+                    </div>
+                    <div className="flex-1">
+                      <div className="font-medium text-white">
+                        {driver.name}
+                      </div>
+                      <div className="text-xs text-gray-400">
+                        {driver.metric}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Card>
+
+          {/* Trending Teams */}
+          <Card>
+            <div className="space-y-4">
+              <h2 className="text-lg font-semibold text-white">
+                ⭐ Trending Teams
+              </h2>
+              <div className="space-y-3">
+                {TRENDING_TEAMS.map((team, index) => (
+                  <div key={team.id} className="flex items-center gap-3">
+                    <div className="w-8 h-8 bg-charcoal-outline rounded-lg flex items-center justify-center text-sm font-bold text-gray-400">
+                      {index + 1}
+                    </div>
+                    <div className="flex-1">
+                      <div className="font-medium text-white">
+                        {team.name}
+                      </div>
+                      <div className="text-xs text-gray-400">
+                        {team.metric}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Card>
+
+          {/* Friend Activity Placeholder */}
+          <Card>
+            <div className="space-y-4">
+              <h2 className="text-lg font-semibold text-white">
+                Friends
+              </h2>
+              <div className="bg-charcoal-outline rounded-lg p-4 text-center">
+                <p className="text-sm text-gray-400">
+                  Friend features coming soon in alpha
+                </p>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}