timmyhadwen/micromelon-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Site audit fixes: metadata, download URLs, nav dropdown, CTAs, related resources

Browse Source 
- Add metadata and h1 to homepage
- Replace all placeholder download URLs with real links
- Convert Platform nav item to dropdown with product sub-links
- Add hero CTA buttons to rover page
- Add bottom CTA section to platform page
- Add RelatedResources to junior and python pages
- Add metadata description to contact and download pages
- Update "Visit Store" to "Build Your Kit" for consistency
- Add Airtable TODO comment in contact form handler
- Update Micromelon-Py card image to VS Code screenshot
This commit is contained in:
Tim Hadwen
2026-03-01 23:13:30 +10:00
parent ae3ae18585
commit 1dd622cbf5
9 changed files with 563 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/contact/ContactForm.tsx
View File

@@ -28,7 +28,7 @@ export default function ContactForm() {
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
// POST to /api/contact will be built later
// TODO: Replace with Airtable form embed once URL is available
setSubmitted(true);
};

2
src/app/contact/page.tsx
View File

@@ -3,6 +3,8 @@ import ContactForm from "./ContactForm";
export const metadata: Metadata = {
title: "Contact",
description:
"Get in touch with the Micromelon team for quotes, support, or general enquiries.",
};
export default function ContactPage() {

26
src/app/download/page.tsx
View File

@@ -5,6 +5,8 @@ import { Button } from "@/components/ui/Button";
export const metadata: Metadata = {
title: "Download",
description:
"Download the Micromelon Code Editor, Robot Simulator, Junior, and Python library.",
};
interface PlatformLink {
@@ -109,11 +111,11 @@ const downloadProducts: ProductCardProps[] = [
imageAlt: "Micromelon Code Editor showing blocks and Python side by side",
accent: "border-brand",
platforms: [
{ label: "Windows", href: "#", icon: "\u{1F5A5}" },
{ label: "macOS", href: "#", icon: "\u{1F4BB}" },
{ label: "iPad", href: "#", icon: "\u{1F4F1}" },
{ label: "Android", href: "#", icon: "\u{1F4F1}" },
{ label: "Chromebook", href: "#", icon: "\u{1F4BB}" },
{ label: "Windows", href: "https://micromelon-s3.s3.ap-southeast-2.amazonaws.com/Micromelon+Code+Setup.exe", icon: "\u{1F5A5}" },
{ label: "macOS", href: "https://micromelon-s3.s3.ap-southeast-2.amazonaws.com/Micromelon+Code.dmg", icon: "\u{1F4BB}" },
{ label: "iPad", href: "https://apps.apple.com/au/app/micromelon-code/id1542702054", icon: "\u{1F4F1}" },
{ label: "Android", href: "https://play.google.com/store/apps/details?id=com.nicerapps.micromeloncode", icon: "\u{1F4F1}" },
{ label: "Chromebook", href: "https://play.google.com/store/apps/details?id=com.nicerapps.micromeloncode", icon: "\u{1F4BB}" },
],
},
{
@@ -124,16 +126,16 @@ const downloadProducts: ProductCardProps[] = [
imageAlt: "Micromelon Robot Simulator 3D environment",
accent: "border-teal-400",
platforms: [
{ label: "Windows", href: "#", icon: "\u{1F5A5}" },
{ label: "macOS", href: "#", icon: "\u{1F4BB}" },
{ label: "Windows", href: "https://micromelon-s3.s3.ap-southeast-2.amazonaws.com/Micromelon+Simulator+Setup.exe", icon: "\u{1F5A5}" },
{ label: "macOS", href: "https://apps.apple.com/au/app/micromelon-simulator/id1544591007", icon: "\u{1F4BB}" },
],
},
{
name: "Micromelon-Py",
description:
"A dedicated Python module providing an API for connecting and controlling Micromelon Rovers and simulated rovers. Perfect for senior students and advanced projects.",
image: "/images/products/rover-render.jpg",
imageAlt: "Micromelon Rover for Python programming",
image: "/images/content/6d295c-vscode-cover-photo.png",
imageAlt: "Micromelon Python library in VS Code",
installCommand: "pip install micromelon",
extraLink: {
label: "View on PyPI",
@@ -144,11 +146,11 @@ const downloadProducts: ProductCardProps[] = [
name: "Junior",
description:
"Ideal for students not yet confident to navigate the Code Editor, or for lesson plans which aim to teach the basics of computational thinking with a simplified interface.",
image: "/images/products/rover-big.png",
image: "/images/products/rover-render.jpg",
imageAlt: "Micromelon Junior app for young learners",
platforms: [
{ label: "iPad", href: "#", icon: "\u{1F4F1}" },
{ label: "Android", href: "#", icon: "\u{1F4F1}" },
{ label: "iPad", href: "https://apps.apple.com/au/app/micromelon-junior/id1522717379", icon: "\u{1F4F1}" },
{ label: "Android", href: "https://play.google.com/store/apps/details?id=com.nicerapps.micromelonjunior", icon: "\u{1F4F1}" },
],
},
];

176
src/app/junior/page.tsx Normal file
View File

@@ -0,0 +1,176 @@
import type { Metadata } from "next";
import Image from "next/image";
import { Container } from "@/components/layout/Container";
import { Button } from "@/components/ui/Button";
import { LearningPathway } from "@/components/ui/LearningPathway";
import { RelatedResources } from "@/components/ui/RelatedResources";
import { getAllResources } from "@/lib/resources";
export const metadata: Metadata = {
title: "Micromelon Junior",
description:
"A simplified coding app for young learners. Teach the basics of computational thinking with an easy-to-use interface on iPad and Android.",
};
export default function JuniorPage() {
const resources = getAllResources();
const relatedResources = resources
.filter((r) => r.categories.includes("Getting Started"))
.slice(0, 4);
return (
<>
{/* Hero */}
<section className="bg-white py-16 sm:py-24">
<Container>
<div className="grid items-center gap-12 md:grid-cols-2">
<div>
<h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
Micromelon Junior
</h1>
<p className="mt-6 text-lg text-foreground-light">
A simplified coding app for students who aren&apos;t yet ready
for the full Code Editor. Junior teaches the basics of
computational thinking with a friendly, easy-to-navigate
interface.
</p>
<div className="mt-8 flex flex-col gap-3 sm:flex-row">
<Button href="/download" variant="primary">
Download
</Button>
<Button href="/code-editor" variant="outline">
See the Code Editor
</Button>
</div>
</div>
<div className="flex justify-center">
<Image
src="/images/products/rover-render.jpg"
alt="Micromelon Rover used with Junior app"
width={600}
height={400}
className="w-full rounded-2xl shadow-lg"
priority
/>
</div>
</div>
</Container>
</section>
{/* What is Junior */}
<section className="border-t border-border bg-muted py-20">
<Container>
<div className="mx-auto max-w-3xl">
<h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
Built for Younger Learners
</h2>
<p className="mt-6 text-lg text-foreground-light">
Junior is designed for lesson plans that focus on computational
thinking fundamentals like sequencing, loops, and simple
decision-making, without the complexity of a full coding
environment.
</p>
<div className="mt-10 grid gap-6 sm:grid-cols-2">
<div className="rounded-xl border border-border bg-white p-6">
<h3 className="text-lg font-semibold text-foreground">
Simplified Interface
</h3>
<p className="mt-2 text-sm text-foreground-light">
A pared-back design so students can focus on learning concepts
rather than navigating menus.
</p>
</div>
<div className="rounded-xl border border-border bg-white p-6">
<h3 className="text-lg font-semibold text-foreground">
Tablet-First
</h3>
<p className="mt-2 text-sm text-foreground-light">
Available on iPad and Android. Perfect for schools using
tablets in the classroom.
</p>
</div>
<div className="rounded-xl border border-border bg-white p-6">
<h3 className="text-lg font-semibold text-foreground">
Block-Based Coding
</h3>
<p className="mt-2 text-sm text-foreground-light">
Drag-and-drop blocks to build programs. No typing required,
making it accessible for early primary students.
</p>
</div>
<div className="rounded-xl border border-border bg-white p-6">
<h3 className="text-lg font-semibold text-foreground">
Works with the Rover
</h3>
<p className="mt-2 text-sm text-foreground-light">
Connect to a real Micromelon Rover and see programs come to
life, the same rover students will use as they progress.
</p>
</div>
</div>
</div>
</Container>
</section>
{/* Pathway */}
<LearningPathway
title="From Blocks to Python"
subtitle="Junior is the starting point. When students are ready, they move to the full Code Editor with blocks, mixed mode, and Python, all using the same Micromelon Rover."
activeStep={1}
/>
{/* Available On */}
<section className="border-t border-border bg-muted py-20">
<Container>
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-2xl font-bold tracking-tight text-foreground">
Available On
</h2>
<p className="mt-4 text-foreground-light">
iPad and Android tablets. Download from the App Store or Google
Play.
</p>
<div className="mt-8">
<Button href="/download" variant="primary">
Go to Downloads
</Button>
</div>
</div>
</Container>
</section>
{/* Related Resources */}
<RelatedResources
resources={relatedResources}
seeAllHref="/resources"
seeAllLabel="See all resources"
/>
{/* CTA */}
<section className="bg-brand py-16">
<Container>
<div className="text-center">
<h2 className="text-3xl font-bold text-foreground sm:text-4xl">
Ready to Start?
</h2>
<p className="mt-4 text-lg text-foreground-light">
Try Micromelon Junior on your classroom tablets, or explore the
full platform.
</p>
<div className="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
<Button
href="/download"
className="bg-foreground text-white hover:bg-foreground-light"
>
Download Junior
</Button>
<Button href="/platform" variant="outline">
See the Platform
</Button>
</div>
</div>
</Container>
</section>
</>
);
}

99
src/app/page.tsx
View File

@@ -1,8 +1,17 @@
import type { Metadata } from "next";
import Image from "next/image";
import { Container } from "@/components/layout/Container";
import { Button } from "@/components/ui/Button";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { LearningPathway } from "@/components/ui/LearningPathway";
import { partners } from "@/data/partners";
import { KNOWN_SCHOOLS } from "@/data/schools";
export const metadata: Metadata = {
title: "Micromelon Robotics",
description:
"Hands-on robotics for the classroom. Micromelon brings coding, sensors, and STEM to students from Prep to grade 12 and beyond.",
};
export default function HomePage() {
return (
@@ -20,14 +29,16 @@ export default function HomePage() {
className="mb-6"
priority
/>
<p className="text-lg text-foreground-light">
<h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
Hands-On Robotics for the Classroom
</h1>
<p className="mt-4 text-lg text-foreground-light">
Micromelon aims to bring like minded individuals, companies and organisations
together to further the impact that STEM education can have on students, teachers
and adults alike.
</p>
<div className="mt-8 flex flex-col gap-3 sm:flex-row">
<div className="mt-8">
<Button href="/platform">Learn more</Button>
<Button href="/store" variant="outline">Visit Store</Button>
</div>
</div>
<div>
@@ -44,42 +55,13 @@ export default function HomePage() {
</Container>
</section>
{/* Micromelon Robotics Platform */}
<section className="border-t border-border bg-muted py-20">
<Container>
<div className="grid items-center gap-12 md:grid-cols-2">
<div className="flex justify-center">
<Image
src="/images/hero/platform.png"
alt="Micromelon Platform - Rover, Code Editor, Simulator"
width={400}
height={400}
className="w-full max-w-sm"
/>
</div>
<div>
<h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
Micromelon Robotics Platform
</h2>
<p className="mt-6 text-foreground-light">
Whether we are running student workshops, delivering professional development
for teachers or consulting to systems of schools on how to best implement STEM,
build real-world assessments or design project based learning, we integrate the
hard skills of robotics and engineering whilst infusing dispositions to help
students succeed in whatever career they choose.
</p>
<div className="mt-8">
<Button href="/platform">Learn more</Button>
</div>
</div>
</div>
</Container>
</section>
{/* Learning Pathway */}
<LearningPathway className="border-t border-border bg-muted" />
{/* Product Cards */}
<section className="py-20">
<Container>
<div className="grid gap-8 md:grid-cols-3">
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
{/* Rover */}
<div className="group overflow-hidden rounded-2xl border border-border bg-white shadow-sm transition-shadow hover:shadow-lg">
<div className="relative aspect-[4/3] overflow-hidden">
@@ -93,7 +75,7 @@ export default function HomePage() {
<div className="p-6">
<h3 className="text-xl font-semibold text-foreground">Micromelon Rover</h3>
<p className="mt-2 text-sm text-foreground-light">
A purpose-built educational robot packed with sensors and tools, designed to grow with students from grade 3 to 12 and beyond.
A purpose-built educational robot packed with sensors and tools, designed to grow with students from Prep to grade 12 and beyond.
</p>
<Button href="/rover" variant="outline" size="sm" className="mt-4">
Learn more
@@ -101,6 +83,27 @@ export default function HomePage() {
</div>
</div>
{/* Junior */}
<div className="group overflow-hidden rounded-2xl border border-border bg-white shadow-sm transition-shadow hover:shadow-lg">
<div className="relative aspect-[4/3] overflow-hidden">
<Image
src="/images/products/rover-render.jpg"
alt="Micromelon Junior"
fill
className="object-cover transition-transform group-hover:scale-105"
/>
</div>
<div className="p-6">
<h3 className="text-xl font-semibold text-foreground">Junior</h3>
<p className="mt-2 text-sm text-foreground-light">
A simplified coding app for younger learners. Teach computational thinking basics with a friendly block-based interface on iPad and Android.
</p>
<Button href="/junior" variant="outline" size="sm" className="mt-4">
Learn more
</Button>
</div>
</div>
{/* Code Editor */}
<div className="group overflow-hidden rounded-2xl border border-border bg-white shadow-sm transition-shadow hover:shadow-lg">
<div className="relative aspect-[4/3] overflow-hidden bg-foreground/5">
@@ -148,12 +151,30 @@ export default function HomePage() {
</Container>
</section>
{/* Partner Logos */}
{/* Schools */}
<section className="border-t border-border bg-muted py-16">
<Container>
<SectionHeading
title="Just a few of the Australian educators already using Micromelon in their classrooms"
title="Over 120 Schools Using Micromelon"
subtitle="From primary schools to universities across Australia."
/>
<div className="mx-auto max-w-4xl columns-2 gap-x-8 sm:columns-3 md:columns-4">
{KNOWN_SCHOOLS.slice(0, 50).map((school) => (
<p
key={school}
className="mb-1.5 break-inside-avoid text-sm text-foreground-light"
>
{school}
</p>
))}
</div>
</Container>
</section>
{/* Partners */}
<section className="bg-white py-16">
<Container>
<SectionHeading title="Partnering to Bring Robotics to More Classrooms" />
<div className="grid grid-cols-3 items-center gap-8 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6">
{partners.map((partner) => (
<div
@@ -184,7 +205,7 @@ export default function HomePage() {
</p>
<div className="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
<Button href="/store" className="bg-foreground text-white hover:bg-foreground-light">
Visit Store
Build Your Kit
</Button>
<Button href="/contact" variant="outline">
Contact Us

171
src/app/platform/page.tsx
View File

@@ -3,6 +3,7 @@ import Image from "next/image";
import { Container } from "@/components/layout/Container";
import { Button } from "@/components/ui/Button";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { LearningPathway } from "@/components/ui/LearningPathway";
export const metadata: Metadata = {
title: "Micromelon Robotics Platform",
@@ -21,14 +22,9 @@ export default function PlatformPage() {
Micromelon Robotics Platform
</h1>
<p className="mt-6 text-lg text-foreground-light">
The Micromelon Platform provides both an easy way to get started
with programming in blocks, but also a high ceiling of
possibilities for advanced students. The Micromelon Rover provides
all the sensors required to take part in a range of challenges
including robotics competitions. The Code Editor provides an easy
way to program in both Blocks and Python code and with the
Micromelon Simulator students can program from home, in their own
time as well as complete advanced challenges with no setup time.
An easy way to get started with programming in blocks, a high
ceiling for advanced students, and a simulator for learning
anywhere. All built around the Micromelon Rover.
</p>
</div>
</Container>
@@ -56,8 +52,8 @@ export default function PlatformPage() {
expansive STEM resource that empowers students to explore
what&apos;s possible with programming and engineering. Built by a
team of Australian engineers and educators, the Micromelon Rover
has been specifically designed to cater to students from grade
three all the way through to grade 12 and beyond. Out of the
has been specifically designed to cater to students from Prep
all the way through to grade 12 and beyond. Out of the
box, Micromelon Rovers are full of sensors and tools, and are
designed to grow with your students at all stages of the learning
process.
@@ -70,54 +66,46 @@ export default function PlatformPage() {
</Container>
</section>
{/* Robot Simulator */}
<section className="bg-white py-20">
{/* Learning Pathway */}
<LearningPathway className="bg-white" />
{/* Junior */}
<section className="border-t border-border bg-muted py-20">
<Container>
<div className="grid items-center gap-12 md:grid-cols-2">
<div className="order-2 md:order-1">
<h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
Robot Simulator
</h2>
<p className="mt-6 text-foreground-light">
We developed the simulator so that learning can continue outside
the classroom and without the need for a physical robot. The
Simulator is ideal for homework and running complex challenges.
Filled with virtual exercises and challenges allowing students to
build confidence with programming and to explore all of the
Rovers&apos; capabilities.
</p>
<div className="mt-8">
<Button href="/robot-simulator">Learn more</Button>
</div>
</div>
<div className="order-1 flex justify-center md:order-2">
<div className="flex justify-center">
<Image
src="/images/products/simulator-screenshot.png"
alt="Micromelon Robot Simulator"
src="/images/products/rover-render.jpg"
alt="Micromelon Junior app"
width={560}
height={400}
className="w-full max-w-lg rounded-2xl shadow-lg"
className="w-full max-w-lg rounded-2xl"
/>
</div>
<div>
<h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
Micromelon Junior
</h2>
<p className="mt-6 text-foreground-light">
A simplified coding app for younger or beginner students.
Junior focuses on the basics of computational thinking with a
friendly block-based interface, ideal for students not yet
confident to navigate the full Code Editor. Available on iPad
and Android.
</p>
<div className="mt-8">
<Button href="/junior">Learn more</Button>
</div>
</div>
</div>
</Container>
</section>
{/* Code Editor */}
<section className="border-t border-border bg-muted py-20">
<section className="bg-white py-20">
<Container>
<div className="grid items-center gap-12 md:grid-cols-2">
<div className="flex justify-center">
<Image
src="/images/hero/code-editor-demo.gif"
alt="Micromelon Code Editor"
width={560}
height={400}
className="w-full max-w-lg rounded-2xl shadow-lg"
unoptimized
/>
</div>
<div>
<div className="order-2 md:order-1">
<h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
Code Editor
</h2>
@@ -156,6 +144,101 @@ export default function PlatformPage() {
<Button href="/code-editor">Learn more</Button>
</div>
</div>
<div className="order-1 flex justify-center md:order-2">
<Image
src="/images/hero/code-editor-demo.gif"
alt="Micromelon Code Editor"
width={560}
height={400}
className="w-full max-w-lg rounded-2xl shadow-lg"
unoptimized
/>
</div>
</div>
</Container>
</section>
{/* Python Library */}
<section className="border-t border-border bg-muted py-20">
<Container>
<div className="grid items-center gap-12 md:grid-cols-2">
<div className="flex justify-center">
<Image
src="/images/content/6d295c-vscode-cover-photo.png"
alt="Micromelon Python library used in VS Code"
width={560}
height={400}
className="w-full max-w-lg rounded-2xl shadow-lg"
/>
</div>
<div>
<h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
Python Library
</h2>
<p className="mt-6 text-foreground-light">
Advanced students can move beyond the Code Editor and control
their rover from any Python environment, including VS Code,
PyCharm, and Jupyter Notebooks. Combine the rover with other
Python libraries for computer vision, data analysis, and more.
</p>
<div className="mt-8">
<Button href="/python">Learn more</Button>
</div>
</div>
</div>
</Container>
</section>
{/* Robot Simulator */}
<section className="bg-white py-20">
<Container>
<div className="grid items-center gap-12 md:grid-cols-2">
<div className="order-2 md:order-1">
<h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
Robot Simulator
</h2>
<p className="mt-6 text-foreground-light">
We developed the simulator so that learning can continue outside
the classroom and without the need for a physical robot. The
Simulator is ideal for homework and running complex challenges.
Filled with virtual exercises and challenges allowing students to
build confidence with programming and to explore all of the
Rovers&apos; capabilities.
</p>
<div className="mt-8">
<Button href="/robot-simulator">Learn more</Button>
</div>
</div>
<div className="order-1 flex justify-center md:order-2">
<Image
src="/images/products/simulator-screenshot.png"
alt="Micromelon Robot Simulator"
width={560}
height={400}
className="w-full max-w-lg rounded-2xl shadow-lg"
/>
</div>
</div>
</Container>
</section>
{/* CTA */}
<section className="bg-brand py-16">
<Container>
<div className="text-center">
<h2 className="text-3xl font-bold text-foreground sm:text-4xl">
Ready to bring robotics to your classroom?
</h2>
<p className="mt-4 text-lg text-foreground-light">
Get in touch for a quote tailored to your school&apos;s needs.
</p>
<div className="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
<Button href="/store" className="bg-foreground text-white hover:bg-foreground-light">
Build Your Kit
</Button>
<Button href="/contact" variant="outline">
Contact Us
</Button>
</div>
</div>
</Container>
</section>

161
src/app/python/page.tsx Normal file
View File

@@ -0,0 +1,161 @@
import type { Metadata } from "next";
import Image from "next/image";
import { Container } from "@/components/layout/Container";
import { Button } from "@/components/ui/Button";
import { LearningPathway } from "@/components/ui/LearningPathway";
import { RelatedResources } from "@/components/ui/RelatedResources";
import { getAllResources } from "@/lib/resources";
export const metadata: Metadata = {
title: "Micromelon Python Library",
description:
"A dedicated Python module for connecting and controlling Micromelon Rovers and simulated rovers. Perfect for senior students and advanced projects.",
};
export default function PythonPage() {
const resources = getAllResources();
const relatedResources = resources
.filter((r) => r.categories.includes("Advanced Guides"))
.slice(0, 4);
return (
<>
{/* Hero */}
<section className="bg-white py-16 sm:py-24">
<Container>
<div className="grid items-center gap-12 md:grid-cols-2">
<div>
<h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
Micromelon Python Library
</h1>
<p className="mt-6 text-lg text-foreground-light">
A dedicated Python module for controlling Micromelon Rovers and
simulated rovers from any Python environment. Perfect for senior
students ready to move beyond the Code Editor.
</p>
<div className="mt-8">
<code className="block rounded-lg bg-foreground px-4 py-3 text-sm font-mono text-white">
$ pip install micromelon
</code>
</div>
<div className="mt-6 flex flex-col gap-3 sm:flex-row">
<Button
href="https://pypi.org/project/micromelon/"
variant="primary"
>
View on PyPI
</Button>
<Button href="/download" variant="outline">
All Downloads
</Button>
</div>
</div>
<div className="flex justify-center">
<Image
src="/images/content/6d295c-vscode-cover-photo.png"
alt="Micromelon Python library used in VS Code"
width={2500}
height={1355}
className="w-full rounded-2xl shadow-lg"
priority
/>
</div>
</div>
</Container>
</section>
{/* Features */}
<section className="border-t border-border bg-muted py-20">
<Container>
<div className="mx-auto max-w-3xl">
<h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
Code in Any Python Environment
</h2>
<p className="mt-6 text-lg text-foreground-light">
The Micromelon Python library gives students full control of their
rover using standard Python. Use it in VS Code, PyCharm, Jupyter
Notebooks, or any environment that runs Python.
</p>
<div className="mt-10 grid gap-6 sm:grid-cols-2">
<div className="rounded-xl border border-border bg-white p-6">
<h3 className="text-lg font-semibold text-foreground">
Full Rover API
</h3>
<p className="mt-2 text-sm text-foreground-light">
Control motors, read sensors, play sounds, and set LEDs with a
clean, well-documented Python API.
</p>
</div>
<div className="rounded-xl border border-border bg-white p-6">
<h3 className="text-lg font-semibold text-foreground">
Works with the Simulator
</h3>
<p className="mt-2 text-sm text-foreground-light">
Connect to a simulated rover just as easily as a physical one.
Test and iterate without hardware.
</p>
</div>
<div className="rounded-xl border border-border bg-white p-6">
<h3 className="text-lg font-semibold text-foreground">
Use Your Own Editor
</h3>
<p className="mt-2 text-sm text-foreground-light">
VS Code, PyCharm, Jupyter Notebooks, or a plain terminal.
Students work in the tools real developers use.
</p>
</div>
<div className="rounded-xl border border-border bg-white p-6">
<h3 className="text-lg font-semibold text-foreground">
Advanced Projects
</h3>
<p className="mt-2 text-sm text-foreground-light">
Combine the rover with other Python libraries for computer
vision, data analysis, machine learning, and more.
</p>
</div>
</div>
</div>
</Container>
</section>
{/* Pathway */}
<LearningPathway
title="From Blocks to Python"
subtitle="The Python library is the final step. Students who started with blocks in Junior and progressed through the Code Editor can now write professional Python."
activeStep={3}
/>
{/* Related Resources */}
<RelatedResources
resources={relatedResources}
seeAllHref="/resources"
seeAllLabel="See all resources"
/>
{/* CTA */}
<section className="bg-brand py-16">
<Container>
<div className="text-center">
<h2 className="text-3xl font-bold text-foreground sm:text-4xl">
Ready to Get Started?
</h2>
<p className="mt-4 text-lg text-foreground-light">
Install the library and start controlling your rover in minutes.
</p>
<div className="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
<Button
href="https://pypi.org/project/micromelon/"
className="bg-foreground text-white hover:bg-foreground-light"
>
View on PyPI
</Button>
<Button href="/resources/advanced-guides" variant="outline">
Advanced Guides
</Button>
</div>
</div>
</Container>
</section>
</>
);
}

10
src/app/rover/page.tsx
View File

@@ -117,6 +117,14 @@ export default function RoverPage() {
Long battery life, tough, and packed with sensors to make a
great classroom tool. Connect and run code in seconds.
</p>
<div className="mt-8 flex flex-col gap-3 sm:flex-row">
<Button href="/store" variant="primary">
Build Your Kit
</Button>
<Button href="/download" variant="outline">
Download Code Editor
</Button>
</div>
</div>
<div>
<Image
@@ -193,7 +201,7 @@ export default function RoverPage() {
Expansion &amp; 3D Printing
</Button>
<Button href="/store" variant="outline">
Visit Store
Build Your Kit
</Button>
</div>
</div>

14
src/data/navigation.ts
View File

@@ -5,7 +5,17 @@ export interface NavItem {
}
export const navigation: NavItem[] = [
{ label: "Platform", href: "/platform" },
{
label: "Platform",
href: "/platform",
children: [
{ label: "Micromelon Rover", href: "/rover" },
{ label: "Junior", href: "/junior" },
{ label: "Code Editor", href: "/code-editor" },
{ label: "Python Library", href: "/python" },
{ label: "Robot Simulator", href: "/robot-simulator" },
],
},
{ label: "Resources", href: "/resources" },
{ label: "News", href: "/news" },
{ label: "About Us", href: "/about-us" },
@@ -30,6 +40,8 @@ export const footerNavigation = {
{ label: "Micromelon Rover", href: "/rover" },
{ label: "Code Editor", href: "/code-editor" },
{ label: "Robot Simulator", href: "/robot-simulator" },
{ label: "Junior", href: "/junior" },
{ label: "Python Library", href: "/python" },
],
support: [
{ label: "Resources", href: "/resources" },