Update app.py

app.py

@@ -137,99 +137,9 @@ def generate_pdf(itinerary_text):
     doc.build(story)
 
     return temp_path, gr.update(visible=True)
-
 # ---------------------- UI ----------------------
 with gr.Blocks(theme=gr.themes.Default(primary_hue="teal", secondary_hue="teal")) as demo:
-    # Hero section
-    hero_html = """
-    <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-    .hero {
-        display: flex;
-        height:100vh;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        background: white;
-        text-align: center;
-    }
-    .hero h1 {
-        font-size: 48px;
-        color: #008080;
-        margin-bottom: 10px;
-    }
-    .hero .typing {
-        font-size: 20px;
-        color: #007777;
-        height: 30px;
-        overflow: hidden;
-        white-space: nowrap;
-        border-right: 3px solid #007777;
-        animation: blink 0.7s infinite;
-    }
-    @keyframes blink {
-        0% { border-color: transparent; }
-        50% { border-color: #007777; }
-        100% { border-color: transparent; }
-    }
-    .hero button {
-        margin-top: 20px;
-        padding: 10px 20px;
-        background-color: #008080;
-        color: white;
-        font-size: 16px;
-        border: none;
-        border-radius: 6px;
-        cursor: pointer;
-    }
-    .hero button:hover {
-        background-color: #006666;
-    }
-    </style>
-
-    <div class="hero">
-        <h1 style="font-size: 38px; margin-bottom: 0;">FEEL AWAY APP</h1>
-        <div class="typing" id="typing-text"></div>
-        <button onclick="document.getElementById('main-content').scrollIntoView({behavior: 'smooth'});">
-            Get Started
-        </button>
-    </div>
-
-    <script>
-    const tagline = `"Your Mood, Your Journey – Personalized Itineraries, Instantly"`;
-    let i = 0;
-    let forward = true;
-    function typeWriter() {
-        const el = document.getElementById("typing-text");
-        if (forward) {
-            if (i < tagline.length) {
-                el.innerHTML += tagline.charAt(i);
-                i++;
-            } else {
-                forward = false;
-                setTimeout(typeWriter, 2000);
-                return;
-            }
-        } else {
-            if (i > 0) {
-                el.innerHTML = tagline.substring(0, i-1);
-                i--;
-            } else {
-                forward = true;
-            }
-        }
-        setTimeout(typeWriter, 60);
-    }
-    window.onload = typeWriter;
-    </script>
-    """
-    gr.HTML(hero_html)
-
-    # Main content
+    
     header_html = """
     <style>
     @keyframes colorCycle {
@@ -241,12 +151,22 @@ with gr.Blocks(theme=gr.themes.Default(primary_hue="teal", secondary_hue="teal")
     }
     .color-cycle {
         animation: colorCycle 3s infinite;
+        font-weight: 800;
+        letter-spacing: 1.5px;
+        text-transform: uppercase;
+        text-shadow: 1px 1px 3px #a0d1d1;
     }
     .tagline {
         font-style: italic;
         color: #007777;
         font-size: 18px;
         margin-top: 4px;
+        height: 24px;
+        white-space: nowrap;
+        overflow: hidden;
+        border-right: 3px solid #007777;
+        font-weight: 600;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }
     .equal-row {
         display: flex;
@@ -264,12 +184,44 @@ with gr.Blocks(theme=gr.themes.Default(primary_hue="teal", secondary_hue="teal")
         display: block;
     }
     </style>
-    <div style='text-align: center;'>
+    <div style='text-align: center; margin-top: 30px; margin-bottom: 30px;'>
         <h1 class="color-cycle" style="font-size: 38px; margin-bottom: 0;">FEEL AWAY APP</h1>
-        <p class="tagline">"Your Mood, Your Journey – Personalized Itineraries, Instantly"</p>
+        <p class="tagline" id="typing-text-main"></p>
     </div>
+    <script>
+    const tagline = "Your Mood, Your Journey – Personalized Itineraries, Instantly";
+    function typeWriter(elId) {
+        let i = 0;
+        let forward = true;
+        const el = document.getElementById(elId);
+        function typing() {
+            if (forward) {
+                if (i < tagline.length) {
+                    el.innerHTML += tagline.charAt(i);
+                    i++;
+                } else {
+                    forward = false;
+                    setTimeout(typing, 2000);
+                    return;
+                }
+            } else {
+                if (i > 0) {
+                    el.innerHTML = tagline.substring(0, i-1);
+                    i--;
+                } else {
+                    forward = true;
+                }
+            }
+            setTimeout(typing, 60);
+        }
+        typing();
+    }
+    window.onload = () => {
+        typeWriter("typing-text-main");
+    }
+    </script>
     """
-    
+
     with gr.Column(elem_id="main-content"):
         gr.HTML(header_html)