relevo de glm

This commit is contained in:
2026-06-17 20:35:57 +02:00
parent 6620b493f5
commit cdf2893b94
20 changed files with 251 additions and 316 deletions
+8 -4
View File
@@ -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
View File
@@ -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>
+1 -1
View File
@@ -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
View File
@@ -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&apos;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&apos;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>