From 6b1225d69771bcb851c256a107120f4927a1cfb4 Mon Sep 17 00:00:00 2001
From: Mike McGhen <mcghenmike@gmail.com>
Date: Mon, 25 Aug 2025 14:17:56 -0400
Subject: [PATCH] Redesign Home page with animated landing UI

Replaces the default Home page with a visually engaging landing page featuring animated floating icons, a hero section, and styled call-to-action buttons for searching movies and TV shows. Adds custom CSS for gradients, animations, and responsive design to enhance user experience.
---
 MovieActorLookup/Components/Pages/Home.razor | 376 ++++++++++++++++++-
 1 file changed, 373 insertions(+), 3 deletions(-)

diff --git a/MovieActorLookup/Components/Pages/Home.razor b/MovieActorLookup/Components/Pages/Home.razor
index 9001e0b..8c912fb 100644
--- a/MovieActorLookup/Components/Pages/Home.razor
+++ b/MovieActorLookup/Components/Pages/Home.razor
@@ -1,7 +1,377 @@
 @page "/"
+<PageTitle>I Know Them!</PageTitle>
 
-<PageTitle>Home</PageTitle>
+<div class="landing-page">
+    <div class="floating-elements">
+        <div class="floating-icon">🎬</div>
+        <div class="floating-icon">📺</div>
+        <div class="floating-icon">🎭</div>
+        <div class="floating-icon">🌟</div>
+        <div class="floating-icon">🎪</div>
+        <div class="floating-icon">🎯</div>
+        <div class="floating-icon">🎨</div>
+        <div class="floating-icon">🎵</div>
+        <div class="floating-icon">🎮</div>
+    </div>
 
-<h1>Hello, world!</h1>
+    <div class="hero">
+        <div class="pulse-dot"></div>
+        <h1>Welcome to <span class="highlight">I Know Them!</span></h1>
+        <p class="subtitle">Ever watched a movie or show and thought, "I know that actor from somewhere..."?</p>
+        <p class="description">This app helps you quickly identify actors, find out what else they've been in, and explore cast details for your favorite <strong>movies</strong> and <strong>TV shows</strong>.</p>
+        <div class="cta-buttons">
+            <NavLink class="cta-button primary" href="/searchmovies">🎬 Search Movies</NavLink>
+            <NavLink class="cta-button secondary" href="/searchshows">📺 Search TV Shows</NavLink>
+        </div>
+    </div>
+</div>
 
-Welcome to your new app.
+<style>
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    .landing-page {
+        position: relative;
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
+        background-size: 400% 400%;
+        animation: gradientFlow 15s ease infinite;
+        overflow: hidden;
+    }
+
+    @@keyframes gradientFlow {
+        0% {
+            background-position: 0% 50%;
+        }
+
+        50% {
+            background-position: 100% 50%;
+        }
+
+        100% {
+            background-position: 0% 50%;
+        }
+    }
+
+    .floating-elements {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        overflow: hidden;
+    }
+
+    .floating-icon {
+        position: absolute;
+        opacity: 0.1;
+        animation: float 20s infinite linear;
+        font-size: 2rem;
+        color: white;
+    }
+
+        .floating-icon:nth-child(1) {
+            left: 10%;
+            animation-delay: 0s;
+        }
+
+        .floating-icon:nth-child(2) {
+            left: 20%;
+            animation-delay: 4s;
+        }
+
+        .floating-icon:nth-child(3) {
+            left: 30%;
+            animation-delay: 8s;
+        }
+
+        .floating-icon:nth-child(4) {
+            left: 40%;
+            animation-delay: 12s;
+        }
+
+        .floating-icon:nth-child(5) {
+            left: 50%;
+            animation-delay: 16s;
+        }
+
+        .floating-icon:nth-child(6) {
+            left: 60%;
+            animation-delay: 3s;
+        }
+
+        .floating-icon:nth-child(7) {
+            left: 70%;
+            animation-delay: 7s;
+        }
+
+        .floating-icon:nth-child(8) {
+            left: 80%;
+            animation-delay: 11s;
+        }
+
+        .floating-icon:nth-child(9) {
+            left: 90%;
+            animation-delay: 15s;
+        }
+
+    @@keyframes float {
+        0% {
+            transform: translateY(100vh) rotate(0deg);
+        }
+
+        100% {
+            transform: translateY(-100px) rotate(360deg);
+        }
+    }
+
+    .hero {
+        max-width: 800px;
+        text-align: center;
+        padding: 2rem;
+        position: relative;
+        z-index: 10;
+        backdrop-filter: blur(10px);
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 30px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
+        animation: heroEntrance 1.2s ease-out;
+    }
+
+    @@keyframes heroEntrance {
+        0% {
+            opacity: 0;
+            transform: translateY(50px) scale(0.9);
+        }
+
+        100% {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+        }
+    }
+
+    h1 {
+        font-size: clamp(2.5rem, 6vw, 4rem);
+        font-weight: 800;
+        margin-bottom: 1rem;
+        color: white;
+        text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+        animation: titleGlow 2s ease-in-out infinite alternate;
+    }
+
+    @@keyframes titleGlow {
+        0% {
+            text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+        }
+
+        100% {
+            text-shadow: 0 5px 25px rgba(255, 255, 255, 0.3);
+        }
+    }
+
+    .highlight {
+        background: linear-gradient(45deg, #ffeaa7, #fdcb6e);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        display: inline-block;
+        animation: shimmer 3s ease-in-out infinite;
+    }
+
+    @@keyframes shimmer {
+        0%, 100% {
+            filter: brightness(1);
+        }
+
+        50% {
+            filter: brightness(1.3);
+        }
+    }
+
+    .subtitle {
+        font-size: clamp(1.1rem, 3vw, 1.4rem);
+        color: rgba(255, 255, 255, 0.9);
+        margin-bottom: 1.5rem;
+        font-weight: 400;
+        animation: slideInLeft 1s ease-out 0.3s both;
+    }
+
+    .description {
+        color: rgba(255, 255, 255, 0.8);
+        font-size: clamp(1rem, 2.5vw, 1.1rem);
+        line-height: 1.7;
+        margin-bottom: 2.5rem;
+        animation: slideInRight 1s ease-out 0.6s both;
+    }
+
+    @@keyframes slideInLeft {
+        0% {
+            opacity: 0;
+            transform: translateX(-50px);
+        }
+
+        100% {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    @@keyframes slideInRight {
+        0% {
+            opacity: 0;
+            transform: translateX(50px);
+        }
+
+        100% {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    .cta-buttons {
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+        flex-wrap: wrap;
+        animation: buttonsEntrance 1s ease-out 0.9s both;
+    }
+
+    @@keyframes buttonsEntrance {
+        0% {
+            opacity: 0;
+            transform: translateY(30px);
+        }
+
+        100% {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    .cta-button {
+        position: relative;
+        padding: 1rem 2rem;
+        font-size: 1.1rem;
+        font-weight: 600;
+        border-radius: 50px;
+        text-decoration: none;
+        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        overflow: hidden;
+        min-width: 200px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        border: 2px solid transparent;
+    }
+
+        .cta-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: left 0.5s;
+        }
+
+        .cta-button:hover::before {
+            left: 100%;
+        }
+
+        .cta-button.primary {
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            color: white;
+            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
+        }
+
+            .cta-button.primary:hover {
+                transform: translateY(-3px) scale(1.05);
+                box-shadow: 0 20px 40px rgba(102, 126, 234, 0.6);
+            }
+
+        .cta-button.secondary {
+            background: rgba(255, 255, 255, 0.15);
+            color: white;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(10px);
+        }
+
+            .cta-button.secondary:hover {
+                transform: translateY(-3px) scale(1.05);
+                background: rgba(255, 255, 255, 0.25);
+                border-color: rgba(255, 255, 255, 0.5);
+                box-shadow: 0 20px 40px rgba(255, 255, 255, 0.2);
+            }
+
+    .pulse-dot {
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        background: #ffeaa7;
+        border-radius: 50%;
+        top: 1rem;
+        right: 1rem;
+        animation: pulse 2s infinite;
+    }
+
+    @@keyframes pulse {
+        0% {
+            transform: scale(0.8);
+            opacity: 1;
+        }
+
+        50% {
+            transform: scale(1.2);
+            opacity: 0.7;
+        }
+
+        100% {
+            transform: scale(0.8);
+            opacity: 1;
+        }
+    }
+
+    @@media (max-width: 768px) {
+        .hero {
+            margin: 1rem;
+            padding: 1.5rem;
+            border-radius: 20px;
+        }
+
+        .cta-buttons {
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .cta-button {
+            width: 100%;
+            max-width: 300px;
+        }
+
+        .floating-icon {
+            font-size: 1.5rem;
+        }
+    }
+
+    @@media (max-width: 480px) {
+        h1 {
+            font-size: 2rem;
+        }
+
+        .subtitle {
+            font-size: 1rem;
+        }
+
+        .description {
+            font-size: 0.9rem;
+        }
+    }
+</style>
\ No newline at end of file