style: enhance home page header with new user promotion and improve history navigation logic

src/pages/history/index.tsx

@@ -62,8 +62,9 @@ export default function History() {
       console.error('Refresh failed:', record.errorMessage);
       // Show error message
     } else {
+      console.log('record.taskId', record);
       // Navigate to generation page to view progress
-      navigate(`/result?taskId=${record.id}`);
+      navigate(`/result?taskId=${record.taskId}`);
     }
   };
 

src/pages/home/index.css

@@ -28,9 +28,91 @@
 }
 
 .home-header {
+  position: fixed;
+  top: 16px;
+  left: calc(50% - 40%);
+  z-index: 1000;
+  padding: 4px 16px;
   text-align: center;
-  margin-bottom: 48px;
+  width: 80%;
-  padding: 32px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 50%, #ff6b35 100%);
+  border-radius: 20px;
+  box-shadow: 0 4px 12px rgb(255 107 107 / 30%);
+  overflow: hidden;
+  animation: pulse-glow 2s ease-in-out infinite alternate;
+}
+
+.home-header::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(45deg, rgb(255 255 255 / 10%) 0%, transparent 100%);
+  pointer-events: none;
+}
+
+.home-header::after {
+  content: '🎁';
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 16px;
+  animation: bounce 1.5s ease-in-out infinite;
+}
+
+.coupon-text {
+  display: inline-block;
+  font-weight: 800;
+  font-size: 14px;
+  color: #fff;
+  background: rgb(255 255 255 / 20%);
+  padding: 2px 8px;
+  border-radius: 6px;
+  margin-left: 6px;
+  border: 1px dashed rgb(255 255 255 / 60%);
+  letter-spacing: 0.5px;
+  animation: shine 2s linear infinite;
+}
+
+@keyframes pulse-glow {
+  0% {
+    box-shadow: 0 4px 12px rgb(255 107 107 / 30%);
+  }
+
+  100% {
+    box-shadow: 0 6px 16px rgb(255 107 107 / 40%);
+  }
+}
+
+@keyframes bounce {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(-50%);
+  }
+
+  40% {
+    transform: translateY(-60%);
+  }
+
+  60% {
+    transform: translateY(-55%);
+  }
+}
+
+@keyframes shine {
+  0% {
+    background-position: -200% 0;
+  }
+
+  100% {
+    background-position: 200% 0;
+  }
 }
 
 .home-title {
@@ -58,6 +140,6 @@
   gap: 14px;
   max-width: 100%;
   margin: 0 auto;
-  padding: 14px 16px 80px 16px;
+  padding: 14px 16px 80px;
   min-height: 100%;
 }

src/pages/home/index.tsx

@@ -58,10 +58,10 @@ export default function Home() {
 
   return (
     <div className="home">
-      <div className="home-scroll">
+      <div className="home-header">
-        <div className="refresh-area" onClick={handleRefresh}>
+        New User 50% Off : <span className="coupon-text">BOWONG1ST</span>
-          {refreshing && <div className="refresh-indicator">Loading...</div>}
       </div>
+      <div className="home-scroll">
         <div className="template-grid">
           {templates.map(template => (
             <TemplateCard key={template.code} template={template} onClick={handleTemplateClick} />