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

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>