Spaces:

Joey889
/

CubicWeb

Running

File size: 11,913 Bytes

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酷比克機器人 | 蘋果樹發想科技有限公司</title>
    <meta name="description" content="酷比克機器人 (Cubik Robot) - 專為 STEAM 教育設計，結合 Scratch Pi 與電子積木，啟發孩子的無限創造力。">
    <style>
        :root {
            --primary-color: #4CAF50; /* Apple Green */
            --secondary-color: #2196F3; /* Tech Blue */
            --dark-bg: #333;
            --light-bg: #f9f9f9;
            --text-color: #333;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft JhengHei", "Heiti TC", sans-serif;
        }

        body {
            line-height: 1.6;
            color: var(--text-color);
            background-color: #fff;
        }

        /* Navigation */
        nav {
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            padding: 1rem 0;
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary-color);
            text-decoration: none;
        }

        .nav-links a {
            text-decoration: none;
            color: var(--text-color);
            margin-left: 20px;
            font-weight: 500;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: var(--secondary-color);
        }

        /* Hero Section (修改重點區域) */
        #home {
            min-height: 100vh; /* 改為 min-height 以適應內容 */
            background: linear-gradient(135deg, #e0f7fa 0%, #e8f5e9 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 80px; /* 增加一點頂部空間 */
            padding-bottom: 40px;
        }

        /* 新增：Hero 區域改為左右排版 */
        .hero-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 40px; /* 文字與圖片的間距 */
            text-align: left; /* 文字靠左對齊 */
        }

        /* 新增：左側文字區塊 */
        .hero-text {
            flex: 1; /* 佔據一半空間 */
        }

        .hero-text h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            color: var(--dark-bg);
            line-height: 1.2;
        }

        .hero-text p {
            font-size: 1.5rem;
            color: #666;
            margin-bottom: 2rem;
        }

        /* 新增：右側圖片區塊 */
        .hero-image {
            flex: 1; /* 佔據另一半空間 */
            display: flex;
            justify-content: center;
            position: relative;
        }

        /* 新增：右側圖片樣式 */
        .hero-image img {
            max-width: 100%;
            height: auto;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer; /* 讓滑鼠游標變成手指形狀 */
        }

        /* 新增：圖片互動效果 */
        .hero-image img:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        }

        .btn {
            display: inline-block;
            background-color: var(--primary-color);
            color: white;
            padding: 12px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-size: 1.1rem;
            transition: transform 0.3s, background-color 0.3s;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .btn:hover {
            transform: translateY(-2px);
            background-color: #43a047;
        }

        /* Features Section */
        section {
            padding: 80px 0;
        }

        #features {
            background-color: var(--light-bg);
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 3rem;
            color: var(--dark-bg);
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .feature-card {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            text-align: center;
            transition: transform 0.3s;
        }

        .feature-card:hover {
            transform: translateY(-10px);
        }

        .feature-icon {
            font-size: 3rem;
            color: var(--secondary-color);
            margin-bottom: 20px;
        }

        /* About Section */
        #about {
            background-color: white;
        }

        .about-content {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 40px;
        }

        .about-text {
            flex: 1;
            min-width: 300px;
        }

        .about-text h3 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            color: var(--primary-color);
        }

        .about-image {
            flex: 1;
            min-width: 300px;
            background-color: #eee;
            height: 300px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #aaa;
            font-size: 1.2rem;
        }

        /* Contact Section */
        #contact {
            background-color: var(--dark-bg);
            color: white;
            text-align: center;
        }

        #contact .section-title {
            color: white;
        }

        .contact-info {
            max-width: 600px;
            margin: 0 auto;
            font-size: 1.1rem;
        }

        .contact-item {
            margin-bottom: 20px;
        }

        footer {
            background-color: #222;
            color: #888;
            text-align: center;
            padding: 20px 0;
            font-size: 0.9rem;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero-text h1 {
                font-size: 2.5rem;
            }
            .nav-links {
                display: none; 
            }
            
            /* 新增：手機版讓 Hero 區塊變成上下排列 */
            .hero-content {
                flex-direction: column;
                text-align: center;
            }
            
            .hero-image {
                margin-top: 30px;
                width: 80%; /* 手機上圖片寬度稍微縮小 */
            }
        }
    </style>
</head>
<body>

    <nav>
        <div class="container nav-container">
        <a href="#" class="logo" style="display: flex; align-items: center; gap: 10px;">
            <img src="robot1.jpg" 
                 alt="Logo" 
                 style="height: 50px; width: auto; border-radius: 8px;">
            <span>酷比克機器人</span>
        </a>

        <div class="nav-links">
            <a href="#home">首頁</a>
            <a href="#features">產品特色</a>
            <a href="#about">關於我們</a>
            <a href="#contact">聯絡資訊</a>
        </div>
        
        </div>
    </nav>

    <section id="home">
        <div class="container hero-content">
            
            <div class="hero-text">
                <h1>啟動未來的鑰匙<br>酷比克機器人</h1>
                <p>結合 ScratchPi 與 電子積木，讓孩子在玩樂中學習 AI 與 IoT</p>
                <a href="#contact" class="btn">立即洽詢</a>
            </div>

            <div class="hero-image">
                <a href="https://bettertree-scratch-pi-appletree.webnode.tw/" target="_blank">
                    <img src="robot2.jpg" alt="酷比克機器人展示">
                </a>
            </div>

        </div>
    </section>

    <section id="features">
        <div class="container">
            <h2 class="section-title">為什麼選擇酷比克？</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">🧩</div>
                    <h3>積木式組裝</h3>
                    <p>相容於 Lego 積木結構，讓機器人的外型千變萬化，激發無限創意。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🖥️</div>
                    <h3>圖形化編程</h3>
                    <p>基於 Scratch 開發，用拖拉積木的方式寫程式，直觀易學，無縫接軌 Python。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🤖</div>
                    <h3>AI & IoT 核心</h3>
                    <p>搭載 Raspberry Pi (樹莓派) 運算核心，支援語音識別、影像辨識與物聯網應用。</p>
                </div>
            </div>
        </div>
    </section>

    <section id="about">
        <div class="container">
            <h2 class="section-title">關於蘋果樹發想科技</h2>
            <div class="about-content">
                <div class="about-text">
                    <h3>玩中學，學中玩 (Play to Learn)</h3>
                    <p>蘋果樹發想科技有限公司致力於推廣 STEAM 教育。我們相信知識不應該只是死記硬背，而是在潛移默化的環境中「玩」出來的。</p>
                    <br>
                    <p>酷比克機器人 (Cubic) 是我們引進並在地化研發的核心產品，它不只是一個玩具，更是一套完整的程式教育解決方案，幫助台灣的孩子接軌國際 AI 趨勢。</p>
                </div>
                <div class="about-image">
                    <img src="robot.jpg" alt="   " style="max-width:100%; border-radius:10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
                    
                </div>
            </div>
        </div>
    </section>

    <section id="contact">
        <div class="container">
            <h2 class="section-title">聯絡我們</h2>
            <div class="contact-info">
                <div class="contact-item">
                    <strong>公司名稱：</strong>蘋果樹發想科技有限公司<br>
                    (Apple Tree Idea Technology Co., Ltd.)
                </div>
                <div class="contact-item">
                    <strong>電子郵件：</strong>cubicintw@gmail.com<br>
                    (Phone: 0935-204332)
                </div>
                <div class="contact-item">
                    <strong>地址：</strong>33060 桃園市桃園區國聖一街149號7樓
                </div>
                <div class="contact-item">
                    <p>我們歡迎學校、教育機構合作洽談，共同推動程式教育。</p>
                </div>
                <br>
                <a href="mailto:cubicintw@gmail.com" class="btn" style="background-color:white; color:var(--dark-bg);">發送郵件</a>
            </div>
        </div>
    </section>

    <footer>
        <p>&copy; 2024 蘋果樹發想科技有限公司 All Rights Reserved.</p>
    </footer>

</body>
</html>