Add core UI components and layout for media platform

Initializes the client-side application with fundamental UI components, including navigation, cards for articles and auctions, and various elements for user interaction and display.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/bVdKIaU

client/src/pages/Landing.tsx

@@ -0,0 +1,227 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest } from "@/lib/queryClient";
+import { useMutation } from "@tanstack/react-query";
+
+export default function Landing() {
+  const [showLoginModal, setShowLoginModal] = useState(false);
+  const [showRequestModal, setShowRequestModal] = useState(false);
+  const [requestForm, setRequestForm] = useState({
+    name: "",
+    category: "people",
+    description: ""
+  });
+  const { toast } = useToast();
+
+  const requestMutation = useMutation({
+    mutationFn: async (data: typeof requestForm) => {
+      await apiRequest("POST", "/api/media-outlet-requests", data);
+    },
+    onSuccess: () => {
+      toast({
+        title: "Success",
+        description: "Your media outlet request has been submitted for review.",
+      });
+      setShowRequestModal(false);
+      setRequestForm({ name: "", category: "people", description: "" });
+    },
+    onError: () => {
+      toast({
+        title: "Error",
+        description: "Failed to submit request. Please try again.",
+        variant: "destructive"
+      });
+    }
+  });
+
+  const handleLogin = () => {
+    window.location.href = "/api/login";
+  };
+
+  const handleRequestSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    requestMutation.mutate(requestForm);
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="bg-card border-b border-border sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-3">
+              <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-primary-foreground font-bold text-lg">
+                S
+              </div>
+              <span className="text-2xl font-bold tracking-tight">SAPIENS</span>
+            </div>
+            
+            <div className="flex items-center space-x-4">
+              <div className="relative">
+                <Input 
+                  type="text" 
+                  placeholder="Search media outlets, topics..." 
+                  className="w-64"
+                  data-testid="input-search"
+                />
+                <i className="fas fa-search absolute right-3 top-2.5 text-muted-foreground"></i>
+              </div>
+              
+              <Button 
+                variant="outline" 
+                onClick={handleLogin}
+                data-testid="button-login"
+              >
+                Login
+              </Button>
+              
+              <Button 
+                onClick={() => setShowRequestModal(true)}
+                data-testid="button-request-outlet"
+              >
+                Request Media Outlet
+              </Button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Hero Section */}
+      <div className="gradient-bg rounded-2xl p-8 mb-8 text-white mx-6 mt-8">
+        <div className="max-w-3xl">
+          <h1 className="text-4xl font-bold mb-4">Media Intelligence & Prediction Markets</h1>
+          <p className="text-xl opacity-90 mb-6">Access premium media outlets across People, Topics, and Companies. Participate in prediction markets and bid for exclusive editorial rights.</p>
+          <div className="flex space-x-4">
+            <Button 
+              className="bg-white text-primary hover:bg-opacity-90"
+              onClick={handleLogin}
+              data-testid="button-explore"
+            >
+              Explore Media Outlets
+            </Button>
+            <Button 
+              variant="outline" 
+              className="border-white text-white hover:bg-white hover:text-primary"
+              onClick={handleLogin}
+              data-testid="button-auctions"
+            >
+              View Active Auctions
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Features Section */}
+      <div className="max-w-7xl mx-auto px-6 py-12">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold mb-4">Comprehensive Media Platform</h2>
+          <p className="text-xl text-muted-foreground">Discover insights across three key categories</p>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <Card className="card-hover">
+            <CardContent className="p-6">
+              <div className="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mb-4">
+                <i className="fas fa-users text-primary text-xl"></i>
+              </div>
+              <h3 className="text-xl font-semibold mb-3">People</h3>
+              <p className="text-muted-foreground mb-4">Follow insights from influential leaders across technology, finance, and politics.</p>
+              <p className="text-sm text-primary font-semibold">24 Influential Figures</p>
+            </CardContent>
+          </Card>
+
+          <Card className="card-hover">
+            <CardContent className="p-6">
+              <div className="w-12 h-12 bg-chart-2/20 rounded-lg flex items-center justify-center mb-4">
+                <i className="fas fa-hashtag text-chart-2 text-xl"></i>
+              </div>
+              <h3 className="text-xl font-semibold mb-3">Topics</h3>
+              <p className="text-muted-foreground mb-4">Stay updated on trending subjects from crypto to AI, regulation to innovation.</p>
+              <p className="text-sm text-chart-2 font-semibold">20 Key Topics</p>
+            </CardContent>
+          </Card>
+
+          <Card className="card-hover">
+            <CardContent className="p-6">
+              <div className="w-12 h-12 bg-chart-1/20 rounded-lg flex items-center justify-center mb-4">
+                <i className="fas fa-building text-chart-1 text-xl"></i>
+              </div>
+              <h3 className="text-xl font-semibold mb-3">Companies</h3>
+              <p className="text-muted-foreground mb-4">Track major corporations shaping the future of technology and finance.</p>
+              <p className="text-sm text-chart-1 font-semibold">27 Leading Companies</p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      {/* Request Modal */}
+      <Dialog open={showRequestModal} onOpenChange={setShowRequestModal}>
+        <DialogContent data-testid="modal-request">
+          <DialogHeader>
+            <DialogTitle>Request New Media Outlet</DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleRequestSubmit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium mb-2">Name</label>
+              <Input
+                value={requestForm.name}
+                onChange={(e) => setRequestForm(prev => ({ ...prev, name: e.target.value }))}
+                placeholder="Enter outlet name"
+                required
+                data-testid="input-outlet-name"
+              />
+            </div>
+            
+            <div>
+              <label className="block text-sm font-medium mb-2">Category</label>
+              <select
+                value={requestForm.category}
+                onChange={(e) => setRequestForm(prev => ({ ...prev, category: e.target.value }))}
+                className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
+                data-testid="select-category"
+              >
+                <option value="people">People</option>
+                <option value="topics">Topics</option>
+                <option value="companies">Companies</option>
+              </select>
+            </div>
+            
+            <div>
+              <label className="block text-sm font-medium mb-2">Description</label>
+              <textarea
+                value={requestForm.description}
+                onChange={(e) => setRequestForm(prev => ({ ...prev, description: e.target.value }))}
+                placeholder="Describe why this outlet should be added"
+                className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
+                rows={3}
+                data-testid="textarea-description"
+              />
+            </div>
+            
+            <div className="flex space-x-2">
+              <Button 
+                type="submit" 
+                disabled={requestMutation.isPending}
+                data-testid="button-submit-request"
+              >
+                {requestMutation.isPending ? "Submitting..." : "Submit Request"}
+              </Button>
+              <Button 
+                type="button" 
+                variant="outline" 
+                onClick={() => setShowRequestModal(false)}
+                data-testid="button-cancel-request"
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}