From 87731a63793d8414bf799e8ea33e3a4f4e58054e Mon Sep 17 00:00:00 2001
From: xiaomai <xiaomai@ramatex.com.my>
Date: Wed, 5 Nov 2025 14:27:00 +0800
Subject: [PATCH] feat(content): add initial homepage content and navigation

This commit introduces the foundational content and navigation for the website's homepage.

- Adds a new navigation menu to the default layout, linking to Services, Projects, and Insights.
- Creates YAML content files for the homepage in both English (en) and Chinese (zh-CN).
- Populates the content with key sections including capabilities, featured projects, and tech stack.
---
 app/layouts/default.vue |  6 +++
 app/utils/navLinks.ts   | 12 ++++++
 content/en-US/index.yml | 81 +++++++++++++++++++++++++++++++++++++++++
 content/zh-CN/index.yml | 81 +++++++++++++++++++++++++++++++++++++++++
 4 files changed, 180 insertions(+)
 create mode 100644 app/utils/navLinks.ts
 create mode 100644 content/en-US/index.yml
 create mode 100644 content/zh-CN/index.yml

diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 1a5f284..859188d 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -2,6 +2,12 @@
   <UPage>
     <UHeader>
       <template #title> Tootaio Studio </template>
+      <template #default>
+        <UNavigationMenu :items="navLinks" variant="link" />
+      </template>
+      <template #body>
+        <UNavigationMenu :items="navLinks" orientation="vertical" />
+      </template>
       <template #right>
         <UColorModeButton />
         <UButton
diff --git a/app/utils/navLinks.ts b/app/utils/navLinks.ts
new file mode 100644
index 0000000..ebc41e1
--- /dev/null
+++ b/app/utils/navLinks.ts
@@ -0,0 +1,12 @@
+import type {NavigationMenuItem} from "@nuxt/ui";
+
+export const navLinks: NavigationMenuItem[] = [{
+  label: "Services",
+  icon: "mdi:briefcase-outline"
+}, {
+  label: "Projects",
+  icon: "mdi:lightbulb-group-outline"
+}, {
+  label: "Insights",
+  icon: "mdi:brain"
+}]
\ No newline at end of file
diff --git a/content/en-US/index.yml b/content/en-US/index.yml
new file mode 100644
index 0000000..b3f925e
--- /dev/null
+++ b/content/en-US/index.yml
@@ -0,0 +1,81 @@
+seo:
+  title: "Homepage"
+title: "Tootaio Studio"
+description: "Technology Meets Imagination."
+capabilities:
+  title: "Our Capabilities"
+  features:
+    - title: "Custom Website Development"
+      description: "Tailored websites and backend systems built with modern frameworks like Nuxt and Next, delivering performance, scalability, and visual impact."
+    - title: "Software & Tool Engineering"
+      description: "Custom-built applications, internal dashboards, and automation tools that streamline workflows and enhance productivity."
+    - title: "Game Design & Development"
+      description: "From Game Jam prototypes to commercial releases — we design and develop immersive, creative, and technically robust gaming experiences."
+    - title: "Interactive Media & Event Systems"
+      description: "Creating dynamic, large-screen visuals and real-time interactive systems for events, exhibitions, and banquets."
+    - title: "Tech Exploration & Evaluation"
+      description: "Experimenting with emerging technologies and evaluating software and hardware to stay ahead of the innovation curve."
+    - title: "Creative Consulting & Digital Strategy"
+      description: "Providing expert guidance on product architecture, digital transformation, and long-term technology strategy for brands and startups."
+featuredProjects:
+  title: "Featured Projects"
+  projects:
+    - title: "YPHS Alumni Official Website"
+      description: "Website Design and Development worth RM28,000. Donate to YPHS Alumni by founder of Tootaio."
+      image: "http://img.tootaio.com/i/2025/11/05/d9kurl.png"
+      demoLink: "https://yphsalumni.org"
+    - title: "Malaysia students return to China guide"
+      description: "An interactive guide which help more than 5000 students back to China Mainland to continue their study during pandemic COVID-19 in year 2022. This project is supported by The Ministry of Foreign Affairs (MFA) in Malaysia"
+      image: "http://img.tootaio.com/i/2025/11/05/d9kcma.png"
+      demoLink: "https://tootaio.github.io"
+    - title: "Light Chasing"
+      description: "This is an entry from the 2023 G-bits University GameJam Challenge, based on the Godot engine."
+      image: "https://img.tootaio.com/i/2025/09/26/j2swgq.png"
+techStack:
+  title: "Tech Stacks"
+  languageIcons:
+    - light: "skill-icons:html"
+    - light: "skill-icons:css"
+    - light: "skill-icons:javascript"
+    - light: "skill-icons:typescript"
+    - light: "skill-icons:docker"
+    - light: "skill-icons:vuejs-light"
+    - light: "skill-icons:nuxtjs-light"
+    - light: "skill-icons:tailwindcss-light"
+    - light: "skill-icons:nodejs-light"
+    - light: "skill-icons:cs"
+    - light: "skill-icons:python-light"
+  toolsIcons:
+    - light: "skill-icons:photoshop"
+    - light: "skill-icons:illustrator"
+    - light: "skill-icons:git"
+    - light: "skill-icons:vscode-light"
+    - light: "skill-icons:visualstudio-light"
+    - light: "skill-icons:github-light"
+    - light: "skill-icons:godot-light"
+    - light: "skill-icons:unity-light"
+    - light: "skill-icons:blender-light"
+    - light: "skill-icons:androidstudio-light"
+    - light: "skill-icons:windows-light"
+    - light: "skill-icons:linux-light"
+    - light: "skill-icons:ubuntu-light"
+    - light: "skill-icons:apple-light"
+    - light: "skill-icons:idea-light"
+    - light: "skill-icons:pycharm-light"
+    - light: "skill-icons:rider-light"
+capabilities:
+  title: "Why Choose Us"
+  description: "We don’t just build code — we craft digital experiences."
+  features:
+    - title: "Fully Custom-Built"
+      description: "Every website, system, and game is built from scratch to match your unique brand identity and performance needs."
+    - title: "Tech-Driven, Not Just Design"
+      description: "Our engineers lead every project, optimizing architecture, performance, and security at every level."
+    - title: "Cross-Domain Expertise"
+      description: "From web systems to games and interactive tools — we merge creativity and engineering to deliver seamless experiences."
+    - title: "End-to-End Service"
+      description: "From concept, prototyping, and frontend to deployment and long-term support — we handle everything in-house."
+    - title: "Proven Project Value"
+      description: "We’ve delivered projects for educational institutions, brands, and game developers — with real impact and measurable value."
+    - title: "Future-Oriented"
+      description: "Beyond client work, we’re building our own products and experiments, pushing the boundaries of what’s possible."
diff --git a/content/zh-CN/index.yml b/content/zh-CN/index.yml
new file mode 100644
index 0000000..e964623
--- /dev/null
+++ b/content/zh-CN/index.yml
@@ -0,0 +1,81 @@
+seo:
+  title: "首页"
+title: "Tootaio Studio"
+description: "专为想要独特体验的品牌打造量身定制的数字产品。"
+capabilities:
+  title: "我们的核心能力"
+  features:
+    - title: "网站定制开发"
+      description: "基于 Nuxt / Next 等现代框架，为企业打造高性能、可扩展且视觉出众的专属网站与后台系统。"
+    - title: "软件与工具工程"
+      description: "为企业定制自动化工具、数据面板与业务流程系统，提高工作效率与可靠性。"
+    - title: "游戏设计与开发"
+      description: "从 Game Jam 原型到商业发行，打造富有创意与技术深度的互动体验。"
+    - title: "互动媒体与宴会系统"
+      description: "为展会、活动与宴会定制实时交互内容与大型屏幕视觉展示。"
+    - title: "技术探索与评测"
+      description: "研究与评估前沿软硬件技术，保持创新优势与研发热情。"
+    - title: "创意咨询与数字策略"
+      description: "为品牌与团队提供产品架构、数字化转型与长期技术规划咨询。"
+featuredProjects:
+  title: "特色项目"
+  projects:
+    - title: "永中校友会官方网站"
+      description: "永平中学校友会官方网站的设计与开发项目，整体价值 RM28,000，由本工作室创办人无偿捐赠予校友会永久使用。"
+      image: "http://img.tootaio.com/i/2025/11/05/d9kurl.png"
+      demoLink: "https://yphsalumni.org"
+    - title: "留华生来华资料汇总"
+      description: "2022 年疫情期间，为马来西亚留学生开发的返校攻略网站。帮助 5000+ 名留学生顺利返校。并获得马来西亚外交部推荐。"
+      image: "http://img.tootaio.com/i/2025/11/05/d9kcma.png"
+      demoLink: "https://tootaio.github.io"
+    - title: "光追"
+      description: "基于 Godot 引擎的 2023 年吉比特高校挑战赛参赛作品。"
+      image: "https://img.tootaio.com/i/2025/09/26/j2swgq.png"
+techStack:
+  title: "Tech Stacks"
+  languageIcons:
+    - light: "skill-icons:html"
+    - light: "skill-icons:css"
+    - light: "skill-icons:javascript"
+    - light: "skill-icons:typescript"
+    - light: "skill-icons:docker"
+    - light: "skill-icons:vuejs-light"
+    - light: "skill-icons:nuxtjs-light"
+    - light: "skill-icons:tailwindcss-light"
+    - light: "skill-icons:nodejs-light"
+    - light: "skill-icons:cs"
+    - light: "skill-icons:python-light"
+  toolsIcons:
+    - light: "skill-icons:photoshop"
+    - light: "skill-icons:illustrator"
+    - light: "skill-icons:git"
+    - light: "skill-icons:vscode-light"
+    - light: "skill-icons:visualstudio-light"
+    - light: "skill-icons:github-light"
+    - light: "skill-icons:godot-light"
+    - light: "skill-icons:unity-light"
+    - light: "skill-icons:blender-light"
+    - light: "skill-icons:androidstudio-light"
+    - light: "skill-icons:windows-light"
+    - light: "skill-icons:linux-light"
+    - light: "skill-icons:ubuntu-light"
+    - light: "skill-icons:apple-light"
+    - light: "skill-icons:idea-light"
+    - light: "skill-icons:pycharm-light"
+    - light: "skill-icons:rider-light"
+capabilities:
+  title: "为什么选择我们"
+  description: "我们不仅编写代码——我们打造数字体验。"
+  features:
+    - title: "完全定制开发"
+      description: "我们从不使用模板。每一个网站、系统、游戏都从零设计与开发，确保风格、性能与体验完全符合品牌个性。"
+    - title: "技术驱动，而非仅仅是设计"
+      description: "作为开发导向的团队，我们理解底层逻辑。从架构、性能、安全到交互动画，所有细节都由工程师主导优化。"
+    - title: "跨领域专长"
+      description: "我们横跨网站、游戏、工具与交互内容开发，让每个项目都能获得更广阔的技术整合思路。"
+    - title: "端到端一站式服务"
+      description: "从概念、原型、前端到部署与长期维护，我们全程负责，让客户专注业务，而非技术问题。"
+    - title: "经验证的项目价值"
+      description: "我们曾为教育机构、品牌活动、独立游戏等开发高价值系统，实力可见。"
+    - title: "面向未来"
+      description: "我们在研发自己的产品与工具，不止接案，也在打造未来生态。这代表我们具备持续创新与自我进化的能力。"