Update home and landing pages to show consistent UI regardless of login status
Refactor routing and page components to ensure the main content is displayed identically for both logged-in and logged-out users, removing conditional rendering based on authentication status in the main router and consolidating content display logic into a new `MainContent` component. 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/InMLMqG
This commit is contained in:
@ -1,11 +1,12 @@
|
||||
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, queryClient } from "@/lib/queryClient";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { Search, Settings } from "lucide-react";
|
||||
import MainContent from "@/components/MainContent";
|
||||
|
||||
export default function Landing() {
|
||||
const [showLoginModal, setShowLoginModal] = useState(false);
|
||||
@ -79,116 +80,55 @@ export default function Landing() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<header className="bg-card border-b border-border sticky top-0 z-50">
|
||||
<header className="bg-white border-b border-gray-200 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="flex items-center space-x-6">
|
||||
<img
|
||||
src="/attached_assets/logo_black_1759162717640.png"
|
||||
alt="SAPIENS"
|
||||
className="h-8 w-auto"
|
||||
className="h-6 w-auto"
|
||||
data-testid="logo-sapiens"
|
||||
/>
|
||||
<span className="text-sm text-gray-600 font-medium">Nostra</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search media outlets, topics..."
|
||||
className="w-64"
|
||||
placeholder="Search the website"
|
||||
className="w-80 pl-10 bg-gray-50 border-gray-200"
|
||||
data-testid="input-search"
|
||||
/>
|
||||
<i className="fas fa-search absolute right-3 top-2.5 text-muted-foreground"></i>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleLogin}
|
||||
data-testid="button-login"
|
||||
>
|
||||
Login
|
||||
관리자 페이지
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={() => setShowRequestModal(true)}
|
||||
data-testid="button-request-outlet"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
data-testid="button-settings"
|
||||
>
|
||||
Request Media Outlet
|
||||
<Settings className="h-4 w-4" />
|
||||
</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>
|
||||
{/* Main Content */}
|
||||
<MainContent />
|
||||
|
||||
{/* Login Modal */}
|
||||
<Dialog open={showLoginModal} onOpenChange={setShowLoginModal}>
|
||||
|
||||
Reference in New Issue
Block a user