Merge pull request #40 from SteveLin100132/feat/official-website

feat(website): refine gradient overlay and adjust layout for responsiveness

Author: SteveLin100132

README.md

@@ -1,16 +1,20 @@
+![Notion Chart Generator Banner](assets/images/github-repo-banner3.png)
+
 <div align="center">
-  <!-- <img src="assets/images/notion-chart-generator-logo.png" width="100" /> -->
-  <img src="assets/images/notion-chart-generator-title.png" />
-  <br />
-  <br />
-  <i>
-    一個採用現代前後端分離架構的 Web 應用程式，使用 NestJS + Next.js 技術棧，能夠連接 Notion 資料庫並將資料轉換為互動式圖表。支援多種圖表類型、資料聚合計算、即時分享和跨平台嵌入功能。
-  </i>
+  <img src="assets/images/notion-chart-generator-simple-logo.png" />
+  <h1>Notion Chart Generator</h1>
   <br />
+  <p>
+    <b>
+      一個採用現代前後端分離架構的 Web 應用程式，使用 NestJS + Next.js 技術棧，能夠連接 Notion 資料庫並將資料轉換為互動式圖表。支援多種圖表類型、資料聚合計算、即時分享和跨平台嵌入功能。
+    </b>
+    <br />
+    <a href="https://stevelin100132.github.io/notion-chart-generator/">Website</a> | 
+    <a href="https://stevelin100132.github.io/notion-chart-generator/">Documentation(TODO)</a> |
+    <a href="https://stevelin100132.github.io/">About Author</a>
+  </p>
   <br />
 
-![Notion Chart Generator Usage Demo](assets/images/notion-chart-generator-usage-demo.gif)
-
   <br />
   <div>
     <img src="https://img.shields.io/github/package-json/v/stevelin100132/notion-chart-generator">
@@ -27,6 +31,8 @@
 
 Notion Chart Generator 是一款專為 Notion 使用者打造的圖表生成工具。它能夠連接您的 Notion 資料庫，將原始資料自動轉換為多種互動式圖表，協助您更直觀地分析和展示資訊。無需撰寫程式碼，只需簡單設定，即可快速產生長條圖、線圖、圓餅圖等多種視覺化報表，並支援即時分享與跨平台嵌入，讓資料應用更靈活便利。
 
+![Notion Chart Generator Usage Demo](assets/images/notion-chart-generator-basic-feature-demo.gif)
+
 ## 主要功能
 
 ### 核心功能

assets/images/github-repo-banner3.png

@@ -180,9 +180,9 @@ const Footer: React.FC = () => {
           className="border-t border-gray-600 mt-8 pt-8"
         >
           <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
-            <div className="flex items-center space-x-2 text-gray-300">
+            <div className="space-x-2 text-gray-300">
               <span>© {currentYear} Notion Chart Generator. Made with</span>
-              <Heart className="w-4 h-4 text-red-400" />
+              <Heart className="w-4 h-4 text-red-400 inline-block" />
               <span>
                 by &nbsp;
                 <a

assets/images/notion-chart-generator-basic-feature-demo.gif

@@ -17,10 +17,10 @@ const HeroSection: React.FC = () => {
       <div className="absolute inset-0 bg-gradient-to-br from-background via-transparent to-gray-50/80"></div>
 
       {/* White Gradient Overlay for Fade Out Effect at bottom - more gentle */}
-      <div className="absolute bottom-0 left-0 w-full h-48 bg-gradient-to-t from-white via-white/60 to-transparent z-30 pointer-events-none"></div>
+      <div className="hidden md:block absolute bottom-0 left-0 w-full h-80 bg-gradient-to-t from-white via-white/70 to-transparent z-30 pointer-events-none"></div>
 
       <div className="relative container mx-auto px-4 py-12 lg:py-16">
-        <div className="flex flex-col h-[calc(75vh-8rem)]">
+        <div className="flex flex-col h-fit">
           {/* Top Content - Text Introduction */}
           <motion.div
             initial={{ opacity: 0, y: -30 }}
@@ -120,7 +120,7 @@ const HeroSection: React.FC = () => {
             initial={{ opacity: 0, y: 50 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8, delay: 0.4 }}
-            className="relative z-10 w-full max-w-6xl mx-auto mt-4 flex-1 flex items-end"
+            className="relative z-10 w-full max-w-6xl mx-auto mt-4 flex-1 flex items-end hidden md:block"
           >
             {/* App preview image that extends to bottom */}
             <div className="w-full">

website/public/images/advanced-filter-demo.gif

@@ -364,7 +364,7 @@ const HowToUseSection: React.FC = () => {
             立即體驗 Notion Chart Generator，將你的 Notion
             資料轉換成精美的圖表。 開源免費，支援多種部署方式。
           </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <div className="flex flex-col sm:flex-row gap-4 justify-center relative z-10">
             <Button
               className="rounded-full"
               size="lg"