|
|
<!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; |
|
|
--secondary-color: #2196F3; |
|
|
--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; |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
#home { |
|
|
min-height: 100vh; |
|
|
background: linear-gradient(135deg, #e0f7fa 0%, #e8f5e9 100%); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
padding-top: 80px; |
|
|
padding-bottom: 40px; |
|
|
} |
|
|
|
|
|
|
|
|
.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; |
|
|
} |
|
|
|
|
|
|
|
|
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 { |
|
|
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 { |
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.hero-text h1 { |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
.nav-links { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
|
|
|
.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>© 2024 蘋果樹發想科技有限公司 All Rights Reserved.</p> |
|
|
</footer> |
|
|
|
|
|
</body> |
|
|
</html> |
