/**
* Home Page – e速貸 Loan Service Website
*
* Design Philosophy: Modern Trust Aesthetic
* – Clear visual hierarchy with warm, approachable colors
* – Hand-drawn illustrations for human warmth
* – Green dashed borders for emphasis and friendliness
* – Smooth transitions and interactive feedback
* – Responsive design for all devices
*/

import { Button } from “@/components/ui/button”;
import { Card } from “@/components/ui/card”;
import { ChevronRight, Phone, MessageCircle, Menu, X } from “lucide-react”;
import { useState } from “react”;

export default function Home() {
const [formData, setFormData] = useState({
name: “”,
phone: “”,
time: “”,
notes: “”,
});

const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [submitted, setSubmitted] = useState(false);

const handleInputChange = (e: React.ChangeEvent) => {
const { name, value } = e.target;
setFormData((prev) => ({ …prev, [name]: value }));
};

return (

{/* Navigation */}

e速貸

{/* Desktop Menu */}

關於我們
貸款服務
申貸流程
聯絡我們

{/* Mobile Menu Button */}

{/* Mobile Menu */}
{mobileMenuOpen && (

關於我們
貸款服務
申貸流程
聯絡我們

)}

{/* Hero Section */}

給您最安心的
貸款服務

線上免費諮詢，專業顧問為您量身打造最適合的貸款方案。全台服務，快速核貸。

{/* Free Consultation Section */}

免費諮詢，專人服務

我們提供完全免費的貸款諮詢服務。經驗豐富的專業顧問將根據您的具體情況，為您分析最適合的貸款方案，幫助您快速解決資金需求。

<br />
                <Button 
                  type="submit" 
                  className="btn-primary w-full text-base md:text-lg"
                  disabled={submitted}
                ><br />
                  {submitted ? “✓ 已送出” : “送出表單”}<br />
                </Button><br />
              </form>
</p></div>
<div className="hidden md:block animate-in fade-in slide-in-from-right-4 duration-700">
<div className="bg-gradient-to-br from-primary/20 to-accent/20 rounded-2xl p-12 text-center hover:shadow-2xl transition-shadow duration-300">
<div className="text-6xl mb-4">📞</div>
<p className="text-xl font-semibold mb-4">免費專線</p>
<p className="text-3xl font-bold text-primary">0800-123-456</p>
<p className="text-gray-300 mt-4 text-sm">週一至週五 09:00-18:00</p>
</p></div>
</p></div>
</p></div>
</p></div>
</section>
<p>      {/* Services Section */}</p>
<section id="services" className="py-12 md:py-24 bg-gray-50">
<div className="container">
<div className="text-center mb-12 md:mb-16 animate-in fade-in duration-700">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">服務項目</h2>
<p className="text-gray-600 text-base md:text-lg">我們提供多種貸款方案，滿足您不同的資金需求</p>
</p></div>
<div className="grid md:grid-cols-3 gap-6 md:gap-8 mb-8">
            {[<br />
              {<br />
                title: “商品貸款”,<br />
                desc: “有收入證明可貸，快速、便捷、最高可貸5倍”,<br />
                image: “https://d2xsxph8kpxj0f.cloudfront.net/310519663502015292/nBtNYS2cUermwGAdCmBgaU/service-card-1-2wbzMhMuKedwCny5MBMhx4.webp”,<br />
              },<br />
              {<br />
                title: “債務協商”,<br />
                desc: “協商債務整合，前置協商免費諮詢，尋求最佳解決方案”,<br />
                image: “https://d2xsxph8kpxj0f.cloudfront.net/310519663502015292/nBtNYS2cUermwGAdCmBgaU/service-card-2-fnscLjo4RhzsiwaUEVkXZx.webp”,<br />
              },<br />
              {<br />
                title: “機車貸款”,<br />
                desc: “機車貸款快速審核，不限品牌、車齡，最快30分鐘撥款”,<br />
                image: “https://d2xsxph8kpxj0f.cloudfront.net/310519663502015292/nBtNYS2cUermwGAdCmBgaU/service-card-3-L98RZkP93Yma4WBkWyufsU.webp”,<br />
              },<br />
            ].map((service, idx) => (<br />
              <Card 
                key={idx} 
                className="card-elevated overflow-hidden group hover:shadow-xl transition-all duration-300 animate-in fade-in slide-in-from-bottom-4"
                style={{ animationDelay: `${idx * 100}ms` }}
              ></p>
<div className="h-48 overflow-hidden bg-gray-200">
                  <img
                    src={service.image}
                    alt={service.title}
                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                  />
                </div>
<div className="p-6">
<h3 className="text-lg md:text-xl font-bold text-gray-900 mb-3">{service.title}</h3>
<p className="text-gray-600 mb-6 leading-relaxed text-sm md:text-base">{service.desc}</p>
<p>                  <Button className="w-full flex items-center justify-center gap-2 btn-primary text-sm md:text-base"><br />
                    瞭解詳情 <ChevronRight size={18} /><br />
                  </Button>
                </div>
<p>              </Card><br />
            ))}
          </div>
<p>          {/* Additional Services */}</p>
<div className="grid md:grid-cols-3 gap-6 md:gap-8">
            {[<br />
              { title: “瑕疵貸款”, desc: “信用瑕疵、聯徵多查、近期增貸都可以” },<br />
              { title: “勞保貸款”, desc: “使用勞保資格即可申貸，快速核貸” },<br />
              { title: “債務整合”, desc: “整合多筆債務，降低月付金，輕鬆還款” },<br />
            ].map((service, idx) => (<br />
              <Card 
                key={idx} 
                className="card-elevated p-6 md:p-8 text-center hover:shadow-lg transition-shadow duration-300 animate-in fade-in slide-in-from-bottom-4"
                style={{ animationDelay: `${(idx + 3) * 100}ms` }}
              ></p>
<h3 className="text-lg md:text-xl font-bold text-gray-900 mb-3">{service.title}</h3>
<p className="text-gray-600 leading-relaxed text-sm md:text-base">{service.desc}</p>
<p>              </Card><br />
            ))}
          </div>
</p></div>
</section>
<p>      {/* Process Section */}</p>
<section id="process" className="py-12 md:py-24 bg-white">
<div className="container">
<div className="text-center mb-12 md:mb-16 animate-in fade-in duration-700">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">e速貸 申貸流程 – 5步驟超Easy</h2>
<p className="text-gray-600 text-base md:text-lg">簡單快速的申貸流程，讓您輕鬆獲得資金</p>
</p></div>
<div className="bg-gradient-to-r from-gray-50 to-white rounded-2xl p-6 md:p-12 animate-in fade-in duration-700">
            <img decoding="async"
              src="https://d2xsxph8kpxj0f.cloudfront.net/310519663502015292/nBtNYS2cUermwGAdCmBgaU/process-illustration-L98RZkP93Yma4WBkWyufsU.webp"
              alt="Loan Application Process"
              className="w-full h-auto"
            />
          </div>
<div className="mt-8 md:mt-12 grid grid-cols-2 md:grid-cols-5 gap-4 md:gap-6">
            {[<br />
              { step: “1”, title: “免費諮詢”, desc: “與專業顧問溝通” },<br />
              { step: “2”, title: “備齊資料”, desc: “準備必要文件” },<br />
              { step: “3”, title: “送件審核”, desc: “提交申請資料” },<br />
              { step: “4”, title: “對保簽約”, desc: “確認貸款條件” },<br />
              { step: “5”, title: “撥款入帳”, desc: “資金快速到帳” },<br />
            ].map((item, idx) => (</p>
<div 
                key={idx} 
                className="p-4 text-center hover:bg-gray-50 rounded-lg transition-colors duration-200 animate-in fade-in"
                style={{ animationDelay: `${idx * 50}ms` }}
              ></p>
<div className="text-2xl md:text-3xl font-bold text-primary mb-2">{item.step}</div>
<h4 className="font-semibold text-gray-900 mb-1 text-sm md:text-base">{item.title}</h4>
<p className="text-xs md:text-sm text-gray-600">{item.desc}</p>
</p></div>
<p>            ))}
          </p></div>
</p></div>
</section>
<p>      {/* Testimonials Section */}</p>
<section className="py-12 md:py-24 bg-gray-50">
<div className="container">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-12 text-center animate-in fade-in duration-700">真實見證</h2>
<div className="grid md:grid-cols-3 gap-6 md:gap-8">
            {[<br />
              {<br />
                name: “王先生”,<br />
                amount: “商品借款40萬”,<br />
                status: “核貸成功”,<br />
                feedback: “顧問很專業，解說清楚，很快就核貸了，真的幫助很大！”,<br />
              },<br />
              {<br />
                name: “李女士”,<br />
                amount: “勞保貸款30萬”,<br />
                status: “核貸成功”,<br />
                feedback: “流程簡單快速，資金馬上到帳，解決了我的急需。”,<br />
              },<br />
              {<br />
                name: “陳先生”,<br />
                amount: “機車貸款15萬”,<br />
                status: “核貸成功”,<br />
                feedback: “專業服務，態度親切，推薦給朋友都很滿意。”,<br />
              },<br />
            ].map((testimonial, idx) => (<br />
              <Card 
                key={idx} 
                className="card-elevated p-6 md:p-8 dashed-border hover:shadow-lg transition-shadow duration-300 animate-in fade-in slide-in-from-bottom-4"
                style={{ animationDelay: `${idx * 100}ms` }}
              ></p>
<div className="flex items-center gap-4 mb-4">
<div className="w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white font-bold text-lg">
                    {testimonial.name[0]}
                  </div>
<div>
<p className="font-semibold text-gray-900 text-sm md:text-base">{testimonial.name}</p>
<p className="text-xs md:text-sm text-gray-600">{testimonial.amount}</p>
</p></div>
</p></div>
<p className="text-accent font-semibold mb-3 text-sm md:text-base">✓ {testimonial.status}</p>
<p className="text-gray-600 italic text-sm md:text-base">“{testimonial.feedback}”</p>
<p>              </Card><br />
            ))}
          </div>
</p></div>
</section>
<p>      {/* CTA Section */}</p>
<section className="py-12 md:py-24 bg-gradient-to-r from-primary to-red-600 text-white">
<div className="container text-center animate-in fade-in duration-700">
<h2 className="text-3xl md:text-4xl font-bold mb-6">準備好改善您的財務狀況了嗎？</h2>
<p className="text-base md:text-lg lg:text-xl mb-8 text-gray-100">
            立即聯繫我們的專業顧問，獲得免費貸款諮詢
          </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button className="bg-white text-primary hover:bg-gray-100 px-6 md:px-8 py-3 font-semibold text-base md:text-lg transition-all duration-200 hover:scale-105"><br />
              立即諮詢<br />
            </Button><br />
            <Button variant="outline" className="text-white border-white hover:bg-white/10 px-6 md:px-8 py-3 font-semibold text-base md:text-lg transition-all duration-200"><br />
              瞭解更多<br />
            </Button>
          </div>
</p></div>
</section>
<p>      {/* Contact Section */}</p>
<section id="contact" className="py-12 md:py-24 bg-white">
<div c
(Content truncated due to size limit. Use line ranges to read remaining content)

</p>
</div>
	</div>
	
</main>

<p class="wp-block-site-tagline">另一個WordPress網站</p>
				</div>

<div class="wp-block-group is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-570722b2 wp-block-group-is-layout-flex">
				<nav class="is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-fe9cc265 wp-block-navigation-is-layout-flex"><ul class="wp-block-navigation__container  is-vertical wp-block-navigation"><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content"  href="#"><span class="wp-block-navigation-item__label">部落格</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content"  href="#"><span class="wp-block-navigation-item__label">關於</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content"  href="#"><span class="wp-block-navigation-item__label">常見問題集</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content"  href="#"><span class="wp-block-navigation-item__label">作者</span></a></li></ul></nav>

<nav class="is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-fe9cc265 wp-block-navigation-is-layout-flex"><ul class="wp-block-navigation__container  is-vertical wp-block-navigation"><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content"  href="#"><span class="wp-block-navigation-item__label">活動</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content"  href="#"><span class="wp-block-navigation-item__label">商店</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content"  href="#"><span class="wp-block-navigation-item__label">區塊版面配置</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content"  href="#"><span class="wp-block-navigation-item__label">佈景主題</span></a></li></ul></nav>
			</div>
				
		</div>

<div class="wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-91e87306 wp-block-group-is-layout-flex">
			
			<p class="has-small-font-size">Twenty Twenty-Five</p>
			
			
			<p class="has-small-font-size">
				使用 <a href="https://tw.wordpress.org" rel="nofollow">WordPress</a> 設計			</p>
			
		</div>
		
	</div>
	
</div>

</footer>
</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/twentytwentyfive/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script type="module" src="https://jm88.site/wp-includes/js/dist/script-modules/block-library/navigation/view.min.js?ver=b0f909c3ec791c383210" id="@wordpress/block-library/navigation/view-js-module" fetchpriority="low" data-wp-router-options="{"loadOnClientNavigation":true}"></script>
<script id="wp-block-template-skip-link-js-after">
	( function() {
		var skipLinkTarget = document.querySelector( 'main' ),
			sibling,
			skipLinkTargetID,
			skipLink;

// Early exit if a skip-link target can't be located.
		if ( ! skipLinkTarget ) {
			return;
		}

/*
		 * Get the site wrapper.
		 * The skip-link will be injected in the beginning of it.
		 */
		sibling = document.querySelector( '.wp-site-blocks' );

// Early exit if the root element was not found.
		if ( ! sibling ) {
			return;
		}

// Get the skip-link target's ID, and generate one if it doesn't exist.
		skipLinkTargetID = skipLinkTarget.id;
		if ( ! skipLinkTargetID ) {
			skipLinkTargetID = 'wp--skip-link--target';
			skipLinkTarget.id = skipLinkTargetID;
		}

// Create the skip link.
		skipLink = document.createElement( 'a' );
		skipLink.classList.add( 'skip-link', 'screen-reader-text' );
		skipLink.id = 'wp-skip-link';
		skipLink.href = '#' + skipLinkTargetID;
		skipLink.innerText = '跳至主要內容';

// Inject the skip link.
		sibling.parentElement.insertBefore( skipLink, sibling );
	}() );
	
//# sourceURL=wp-block-template-skip-link-js-after
</script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://jm88.site/wp-includes/js/wp-emoji-release.min.js?ver=6.9.4"}}
</script>
<script type="module">
/*! This file is auto-generated */
const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))});
//# sourceURL=https://jm88.site/wp-includes/js/wp-emoji-loader.min.js
</script>
</body>
</html>

鈔級貸

給您最安心的貸款服務

免費諮詢，專人服務

給您最安心的
貸款服務