relevo de glm
This commit is contained in:
+8
-4
@@ -1,8 +1,12 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #020617;
|
||||
--foreground: #f8fafc;
|
||||
--background: #f9f6f0;
|
||||
--foreground: #1c1917;
|
||||
--card: #ffffff;
|
||||
--card-border: #e7e5e4;
|
||||
--muted: #57534e;
|
||||
--accent: #b45309;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
@@ -13,8 +17,8 @@
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
background: #f9f6f0;
|
||||
color: #1c1917;
|
||||
font-family: var(--font-geist-sans), system-ui, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
+1
-1
@@ -27,7 +27,7 @@ export default function RootLayout({
|
||||
lang="en"
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
||||
>
|
||||
<body className="min-h-full flex flex-col bg-slate-950 text-slate-100">
|
||||
<body className="min-h-full flex flex-col bg-[#f9f6f0] text-[#1c1917]">
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -32,7 +32,7 @@ export default async function MoviePage({
|
||||
/>
|
||||
</div>
|
||||
|
||||
<footer className="mt-16 border-t border-white/10 pt-6 text-center text-xs text-slate-500">
|
||||
<footer className="mt-16 border-t border-stone-200 pt-6 text-center text-xs text-stone-500">
|
||||
AI-generated content for informational purposes. Verify timestamps on
|
||||
your copy.
|
||||
</footer>
|
||||
|
||||
+40
-20
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { SearchBar } from "@/components/SearchBar";
|
||||
import { MovieHeader } from "@/components/MovieHeader";
|
||||
import { MovieInsightPanel } from "@/components/MovieInsightPanel";
|
||||
@@ -16,6 +16,33 @@ export default function HomePage() {
|
||||
const [isLoadingMovie, setIsLoadingMovie] = useState(false);
|
||||
const [movieError, setMovieError] = useState<string | null>(null);
|
||||
|
||||
// Preload a random interesting movie on initial page load to demonstrate the app
|
||||
useEffect(() => {
|
||||
const DEMO_IDS = [27205, 157336, 155, 550, 496243, 424]; // Inception, Interstellar, Dark Knight, Fight Club, Parasite, Schindler's List
|
||||
const loadDemo = async () => {
|
||||
const id = DEMO_IDS[Math.floor(Math.random() * DEMO_IDS.length)];
|
||||
try {
|
||||
const res = await fetch(`/api/movie/${id}`);
|
||||
if (!res.ok) return;
|
||||
const details: TmdbMovieDetails = await res.json();
|
||||
const minimalSearch: TmdbSearchResult = {
|
||||
id: details.id,
|
||||
title: details.title,
|
||||
release_date: details.release_date || "",
|
||||
poster_path: details.poster_path,
|
||||
overview: details.overview || "",
|
||||
};
|
||||
setSelectedMovie(minimalSearch);
|
||||
setMovieDetails(details);
|
||||
} catch {
|
||||
// silently fall back to empty state if demo preload fails
|
||||
}
|
||||
};
|
||||
if (!selectedMovie) {
|
||||
void loadDemo();
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleSelect = async (movie: TmdbSearchResult) => {
|
||||
setSelectedMovie(movie);
|
||||
setMovieDetails(null);
|
||||
@@ -38,25 +65,18 @@ export default function HomePage() {
|
||||
}
|
||||
};
|
||||
|
||||
const clearSelection = () => {
|
||||
setSelectedMovie(null);
|
||||
setMovieDetails(null);
|
||||
setIsLoadingMovie(false);
|
||||
setMovieError(null);
|
||||
};
|
||||
|
||||
const hasFullMovie = movieDetails != null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Compact navbar: title + slogan on left, search on right */}
|
||||
<nav className="sticky top-0 z-50 border-b border-white/10 bg-slate-950/95 backdrop-blur supports-[backdrop-filter]:bg-slate-950/80">
|
||||
<nav className="sticky top-0 z-50 border-b border-stone-200 bg-white">
|
||||
<div className="mx-auto flex h-14 max-w-6xl items-center justify-between gap-4 px-6">
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<span className="font-semibold tracking-tight text-white">
|
||||
<span className="font-semibold tracking-tight text-stone-950">
|
||||
Film Intel
|
||||
</span>
|
||||
<span className="hidden truncate text-xs text-slate-400 sm:inline">
|
||||
<span className="hidden truncate text-xs text-stone-500 sm:inline">
|
||||
Movie insight you won't find in one click
|
||||
</span>
|
||||
</div>
|
||||
@@ -74,7 +94,7 @@ export default function HomePage() {
|
||||
<main className="mx-auto min-h-[calc(100vh-3.5rem)] w-full max-w-6xl px-6">
|
||||
{!selectedMovie && (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center">
|
||||
<p className="max-w-md text-sm text-slate-400">
|
||||
<p className="max-w-md text-sm text-stone-600">
|
||||
Search for any film using the bar above. We'll generate
|
||||
ratings explained, skip guides, sensitivity warnings, production
|
||||
facts, and more.
|
||||
@@ -85,30 +105,30 @@ export default function HomePage() {
|
||||
{selectedMovie && (
|
||||
<div className="space-y-8 py-8">
|
||||
{hasFullMovie ? (
|
||||
<MovieHeader movie={movieDetails} onClear={clearSelection} />
|
||||
<MovieHeader movie={movieDetails} showBack={false} />
|
||||
) : (
|
||||
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-6">
|
||||
<div className="rounded-2xl border border-stone-200 bg-white p-6 shadow-sm">
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-2xl font-semibold text-white">
|
||||
<h2 className="text-2xl font-semibold text-stone-950">
|
||||
{selectedMovie.title}
|
||||
{selectedMovie.release_date ? (
|
||||
<span className="ml-2 font-normal text-slate-400">
|
||||
<span className="ml-2 font-normal text-stone-500">
|
||||
({selectedMovie.release_date.slice(0, 4)})
|
||||
</span>
|
||||
) : null}
|
||||
</h2>
|
||||
{selectedMovie.overview && (
|
||||
<p className="text-sm leading-relaxed text-slate-400">
|
||||
<p className="text-sm leading-relaxed text-stone-600">
|
||||
{selectedMovie.overview}
|
||||
</p>
|
||||
)}
|
||||
{isLoadingMovie && (
|
||||
<p className="text-sm text-amber-300/80">
|
||||
<p className="text-sm text-amber-600">
|
||||
Loading extended details...
|
||||
</p>
|
||||
)}
|
||||
{movieError && (
|
||||
<p className="text-sm text-red-400">
|
||||
<p className="text-sm text-red-600">
|
||||
{movieError}. Card content will still load.
|
||||
</p>
|
||||
)}
|
||||
@@ -124,7 +144,7 @@ export default function HomePage() {
|
||||
)}
|
||||
</main>
|
||||
|
||||
<footer className="border-t border-white/10 py-6 text-center text-xs text-slate-500">
|
||||
<footer className="border-t border-stone-200 py-6 text-center text-xs text-stone-500">
|
||||
AI-generated content for informational purposes. Verify timestamps on
|
||||
your copy.
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user