Update site appearance and user authentication functionality
Implement a new login system, update UI elements, and enable static asset serving for images. 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:
kimjaehyeon0101
@ -56,7 +56,11 @@ export default function Home() {
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<div className="font-bold text-lg">SAPIENS</div>
|
||||
<img
|
||||
src="/attached_assets/logo_black_1759162717640.png"
|
||||
alt="SAPIENS"
|
||||
className="h-6 w-auto"
|
||||
/>
|
||||
<div className="text-xs text-gray-500">{user?.firstName || 'User'}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -74,90 +78,55 @@ export default function Home() {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-6 py-8">
|
||||
{/* Hero Section */}
|
||||
<div className="gradient-bg rounded-2xl p-8 mb-8 text-white">
|
||||
<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" data-testid="button-explore">
|
||||
Explore Media Outlets
|
||||
</Button>
|
||||
<Link href="/auctions">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-white text-white hover:bg-white hover:text-primary"
|
||||
data-testid="button-auctions"
|
||||
>
|
||||
View Active Auctions
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<main className="max-w-4xl mx-auto px-4">
|
||||
{/* View Mode Toggle */}
|
||||
<div className="flex items-center justify-between py-4">
|
||||
<h1 className="text-xl font-semibold text-gray-900 dark:text-white">Latest Articles</h1>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant={viewMode === "grid" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("grid")}
|
||||
>
|
||||
<Grid className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === "list" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("list")}
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category Tabs */}
|
||||
<CategoryTabs
|
||||
selectedCategory={selectedCategory}
|
||||
onCategoryChange={setSelectedCategory}
|
||||
/>
|
||||
|
||||
{/* Media Outlets Grid */}
|
||||
<div className="mb-12">
|
||||
{/* Media Outlets List */}
|
||||
<div className="space-y-3 pb-20">
|
||||
{outletsLoading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<div key={i} className="bg-card border border-border rounded-xl p-6 animate-pulse">
|
||||
<div className="h-12 bg-muted rounded mb-4"></div>
|
||||
<div className="h-4 bg-muted rounded mb-2"></div>
|
||||
<div className="h-4 bg-muted rounded w-2/3"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
{mediaOutlets.map((outlet) => (
|
||||
<MediaOutletCard key={outlet.id} outlet={outlet} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Current Auctions Section */}
|
||||
<div className="mt-12">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-2xl font-bold">Active Media Outlet Auctions</h2>
|
||||
<Link href="/auctions">
|
||||
<Button variant="ghost" className="text-primary hover:text-primary/80 font-semibold">
|
||||
View All Auctions
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{auctionsLoading ? (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{Array.from({ length: 2 }).map((_, i) => (
|
||||
<div key={i} className="bg-card border border-border rounded-xl p-6 animate-pulse">
|
||||
<div className="h-6 bg-muted rounded mb-4"></div>
|
||||
<div className="space-y-3">
|
||||
<div className="h-4 bg-muted rounded"></div>
|
||||
<div className="h-4 bg-muted rounded"></div>
|
||||
<div className="h-4 bg-muted rounded"></div>
|
||||
Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="bg-white dark:bg-gray-800 rounded-lg p-4 animate-pulse">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-12 h-12 bg-gray-200 dark:bg-gray-700 rounded-full"></div>
|
||||
<div className="flex-1">
|
||||
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded mb-2"></div>
|
||||
<div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-2/3"></div>
|
||||
</div>
|
||||
<div className="h-10 bg-muted rounded mt-4"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{auctions.slice(0, 2).map((auction) => (
|
||||
<AuctionCard key={auction.id} auction={auction} />
|
||||
))}
|
||||
</div>
|
||||
mediaOutlets.map((outlet) => (
|
||||
<MediaOutletCard key={outlet.id} outlet={outlet} viewMode={viewMode} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Bottom Navigation */}
|
||||
<CategoryTabs
|
||||
selectedCategory={selectedCategory}
|
||||
onCategoryChange={setSelectedCategory}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user