Prompt:
I want you to completely redesign the front-page.php for NoScriptNeeded. Keep all the PHP logic, category exclusions, and WP_Query structure exactly the same — only change the design and layout. The current design looks too much like a sports news site. I need it to feel cinematic and like an entertainment platform.
Design inspiration: Think Netflix meets Letterboxd. Dark, immersive, poster-forward.
Here’s exactly what I want:
Hero Section — Full width cinematic spotlight
- One big featured post taking the full width of the screen, not just the container
- The featured image should be a tall cinematic banner (like a movie backdrop), with a dark gradient overlay from bottom
- Post title in large bold cinematic font, bottom-left aligned over the image
- A category badge (like “ANIME” or “REVIEW”) in the accent color top-left
- Subtle “Now Featuring” or “Editor’s Pick” label
- Two smaller posts below the hero or stacked on the right side as portrait-style poster cards — not landscape thumbnails, but taller cards like movie posters
Latest Section — Horizontal scroll row
- Instead of a grid, show latest posts as a horizontal scrollable row of cards
- Each card looks like a streaming platform tile — poster ratio (2:3), title at bottom, category badge on top
- Smooth scroll, no scrollbar visible, with a faded edge on the right to hint there’s more
Category Sections (Movies, Anime, Web Series)
- Each section has a bold section title with a colored left border accent
- Posts displayed as poster cards in a row — portrait orientation not landscape
- “View All” link on the right of each section header
Sidebar / Right Column
- “Trending This Week” — numbered list 1 through 5, each with a small thumbnail and title
- “Top 10” widget — clean numbered list with accent colored numbers
Overall feel:
- Heavy use of the dark background, let the poster images do the talking
- Minimal text outside of titles — let visuals lead
- Accent color pops on badges, borders, and hover states
- Smooth hover effects — slight scale up on cards, color shift on titles
- Fully mobile responsive — horizontal scroll rows stack into a grid on mobile
Do not change any PHP logic, queries, or category exclusion. Only redesign the HTML structure and all CSS inside the style block. Give me the complete front-page.php file.
That should get you a completely different cinematic layout while keeping all the backend logic intact.
Sonnet 4.6
