<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NasifyTech 納啟科技</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-p6H9eH3j3z2mXbxqGIdl0u4i3s3G4B6cXX8tK6Xj6xJ8bF4lK2o5j4Q5m9B6j6h6d5k5j6j7k7l8m9n0p1q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&family=Exo+2:wght@500;700&display=swap" rel="stylesheet">
    <link href="source/css/indcss.css" rel="stylesheet">
    <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-database-compat.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-286HZQTWFH"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'G-286HZQTWFH');
    </script>
</head>
<body>

    <header>
        <div class="container">
            <h1>NasifyTech</h1>
            <nav>
                <ul id="nav-links">
                    <li><a href="#home"><i class="fas fa-home"></i> 首頁</a></li>
                    <li><a href="#about"><i class="fas fa-info-circle"></i> 關於我們</a></li>
                    <li><a href="#services"><i class="fas fa-cogs"></i> 服務項目</a></li>
                    <li><a href="#testimonials"><i class="fas fa-comments"></i> 客戶見證</a></li>
                    <li><a href="#contact"><i class="fas fa-envelope"></i> 聯絡我們</a></li>
                    <li><a href="member/index.html"><i class="fas fa-envelope"></i> 線上服務</a></li>
                    <li><a href="./about.html" target="_blank" rel="noopener noreferrer"><i class="fas fa-user"></i> 關於創辦人</a></li>
                </ul>
            </nav>
            <div class="menu-toggle" id="mobile-menu" aria-label="導航選單切換" aria-expanded="false" role="button" tabindex="0">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </header>

    <section id="home" aria-labelledby="home-title">
        <div class="content animate__animated animate__fadeInUp" data-aos="fade-up">
            <h1 id="home-title" class="animate__animated animate__bounceIn" data-aos="bounce-in">納啟科技創新世紀</h1>
            <p class="animate__animated animate__fadeInUp" data-aos="fade-up" data-aos-delay="500">納啟科技致力於提供最專業的諮詢結果</p>
        </div>
    </section>

    <section id="about">
        <div class="container">
            <div class="section-title animate__animated animate__fadeInUp" data-aos="fade-up">
                <h2>關於我們</h2>
                <p>納啟科技的願景及發展</p>
            </div>
            <div class="timeline">
                <div class="timeline-item" data-aos="fade-right">
                    <h3>2024年</h3>
                    <p>納啟創辦人Nasir早已開始接取部分開發案和諮詢服務，奠定基礎。</p>
                </div>
                <div class="timeline-item" data-aos="fade-right" data-aos-delay="200">
                    <h3>2025年</h3>
                    <p>納啟科技正式成立，致力於協助資訊較為弱勢之族群。</p>
                </div>
                <div class="timeline-item" data-aos="fade-right" data-aos-delay="400">
                    <h3>2026年</h3>
                    <p>持續提供資訊諮詢服務及額外接下小專案</p>
                </div>
                <div class="timeline-item" data-aos="fade-right" data-aos-delay="600">
                    <h3>2027年</h3>
                    <p>與各學校及小企業進行合作，開發內部小系統。</p>
                </div>
            </div>
        </div>
    </section>

    <section id="services">
        <div class="container">
            <div class="section-title animate__animated animate__fadeInUp" data-aos="fade-up">
                <h2>服務項目</h2>
                <p>我們提供多樣化諮詢服務，滿足各式各樣之需求。</p>
            </div>
            <div class="services-container">
                <div class="services-description animate__animated animate__fadeInLeft" data-aos="fade-left">
                    <h2>We Can Do It!</h2>
                    <p>我們致力於協助較弱勢或經費有限的客戶，根據您的需求提供專業且可負擔之成本建製的系統建立與開發服務。如需更高階或專業的設計，建議您尋求專業設計師，以獲得最佳的設計效果。</p>
                </div>
                <div class="services-list">
                    <div class="service-category" data-aos="fade-up">
                        <h3><i class="fas fa-user-headset"></i> 💁 專人服務</h3>
                        <ul>
                            <li>個人電腦維護與重灌</li>
                            <li>辦公軟體安裝與設定</li>
                            <li>客製化軟體安裝及設定</li>
                            <li>電腦疑難排解與優化</li>
                            <li>技術諮詢及學習</li>
                        </ul>
                    </div>
                    <div class="service-category" data-aos="fade-up" data-aos-delay="200">
                        <h3><i class="fas fa-building"></i> 💼 企業服務</h3>
                        <ul>
                            <li>網站設計與開發</li>
                            <li>網頁代管與維護</li>
                            <li>形象網頁設計建構</li>
                            <li>電子商務平台設置</li>
                            <li>客製化解決方案</li>
                            <li>IT顧問服務</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="mission-statement animate__animated animate__fadeInUp" data-aos="fade-up">
            </div>
        </div>
    </section>

    <section id="news">
        <div class="container">
            <div class="section-title animate__animated animate__fadeInUp" data-aos="fade-up">
                <h2>最新消息</h2>
                <p>納啟科技的最新動態</p>
            </div>
            <div class="news-list">
                <div class="news-item" data-aos="fade-up">
                    <h3><a href="source/cleanmacnasir.html">納啟科技開發小工具-CleanmacNasir</a></h3>
                    <p>這是一個簡易型，同時也可將 MAC 空間清出超過 1GB 以上的免費最佳化工具，幫助您清除已經刪除陳年已久的 APP DATA。</p>
                </div>
                <div class="news-list">
                    <div class="news-item" data-aos="fade-up">
                        <h3><a href="#contact">納啟科技開發專利系統 - 班群班費管理系統</a></h3>
                        <p>這是一個班群班費推播系統，只要一張試算表，有班費流通紀錄，班群就會自通通知！（獨家專利），需要者請填寫表單聯繫！
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="testimonials" class="section-testimonials">
        <div class="container">
            <div class="section-title animate__animated animate__fadeInUp" data-aos="fade-up">
                <h2>客戶見證</h2>
                <p>各式各樣的疑難雜症及反饋，我們聽見了，我們經評估後，將會給予正確方向！</p>
            </div>
            <div class="testimonial-images">
                <img src="https://i.imgur.com/jTA6Nu3.jpeg" alt="客戶截圖一" data-aos="zoom-in">
                <img src="https://i.imgur.com/sS0lHcv.jpeg" alt="客戶截圖二" data-aos="zoom-in" data-aos-delay="100">
                <img src="https://i.imgur.com/rG9dd5d.jpeg" alt="客戶截圖三" data-aos="zoom-in" data-aos-delay="200">
                <img src="https://i.imgur.com/4n97pWq.jpeg" alt="客戶截圖四" data-aos="zoom-in" data-aos-delay="300">
                <img src="https://i.imgur.com/Nqv2vSt.jpeg" alt="客戶截圖五" data-aos="zoom-in" data-aos-delay="400">
                <img src="https://i.imgur.com/3HRqnsK.jpeg" alt="客戶截圖六" data-aos="zoom-in" data-aos-delay="500">
                <img src="https://i.imgur.com/OvFUoVM.jpeg" alt="客戶截圖七" data-aos="zoom-in" data-aos-delay="600">
                <img src="https://i.imgur.com/0pMKN1X.jpeg" alt="客戶截圖八" data-aos="zoom-in" data-aos-delay="700">
                <img src="https://i.imgur.com/0Uf0FQH.jpeg" alt="客戶截圖九" data-aos="zoom-in" data-aos-delay="800">
                <img src="https://i.imgur.com/vdiqMCA.jpeg" alt="客戶截圖十" data-aos="zoom-in" data-aos-delay="900">                
            </div>
        </div>
    </section>

    <section id="projects" class="section-projects">
        <div class="container">
            <div class="section-title animate__animated animate__fadeInUp" data-aos="fade-up">
                <h2>歷年專案</h2>
                <p>我們的專案與成果</p>
            </div>
            <div class="project-list">
                <div class="project-item" data-aos="fade-up">
                    <img src="https://i.imgur.com/ZIwciIT.jpeg" alt="草商測驗系統專案">
                    <div class="project-content">
                        <h3>TTVS國立草屯商工測驗系統</h3>
                        <p>這是一個供國立學校作為學生測驗之系統，供教師作為平時測驗，和學生平時練習之用途。</p>
                        <a href="#">已下線</a>
                    </div>
                </div>
                <div class="project-item" data-aos="fade-up" data-aos-delay="200">
                    <img src="source/image/ntub1.jpg" alt="北商大體育器材借還系統">
                    <div class="project-content">
                        <h3>NTUB國立台北商業大學 體育器材借閱系統</h3>
                        <p>這是一個供國立台北商業大學體育器材方便借閱及後台管理之客製系統。</p>
                        <a href="#">尚未上線啟用</a>
                    </div>
                    
                </div>
            </div>
        </div>
    </section>
    
    <section id="contact">
        <div class="container">
            <div class="section-title animate__animated animate__fadeInUp" data-aos="fade-up">
                <h2>聯絡我們</h2>
                <p>有任何問題或是需要協助，請填寫表單讓我們知道。</p>
            </div>
            <div class="contact-container">
                <div class="contact-form-container">
                    <div class="contact-form" data-aos="fade-up">
                        <form action="#" method="post">
                            <input type="text" name="name" placeholder="您的姓名" required>
                            <input type="email" name="email" placeholder="您的電子郵件" required>
                            <input type="text" name="subject" placeholder="主題" required>
                            <textarea name="message" rows="5" placeholder="您的訊息" required></textarea>
                            <button type="submit">提交</button>
                        </form>
                    </div>
                </div>
                <div class="contact-description" data-aos="fade-up" data-aos-delay="200">
                    <h2>聯絡資訊</h2>
                    <p>Email：<a href="mailto:it@nasify.org">it@nasify.org</a></p>
                    <p>Instagram：<a href="https://www.instagram.com/hayashiiii__">hayashiiii__</a></p>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>&copy; Copyright 2025 NasifyTech 納啟科技</p>
            <p>
                <a href="https://www.instagram.com/hayashiiii__" target="_blank" aria-label="Instagram">
                    <i class="fab fa-instagram"></i> Instagram
                </a> |
                <a href="#" target="_blank" aria-label="LINE">
                    <i class="fab fa-line"></i> LINE
                </a>
            </p>
        </div>
    </footer>

    <script>
        AOS.init({
            duration: 800,
            easing: 'ease-in-out',
            once: true,
            mirror: false
        });
    </script>
    <script src="source/java/indja.js"></script>

</body>
</html>
