99534e779a
- Product pages (Code Editor, Robot Simulator): text-left/image-right hero layout - Related resources capped at 3 items on all product pages - Making Music activities renamed to I, II, III - New Maze I/II/III and Sumo I/II/III difficulty-graded activities - YouTube demo videos restored on 12 activity pages from old site - Activity pages: two-column hero with coding skills & rover concepts tags - Blog/news pages: same two-column hero layout with date - Resource type extended with codingSkills, roverConcepts, tags fields - Removed raw "Relevant Coding Skills/Rover Concepts" text from activity MDX Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
319 lines
12 KiB
TypeScript
319 lines
12 KiB
TypeScript
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 { Card } from "@/components/ui/Card";
|
|
import { RelatedResources } from "@/components/ui/RelatedResources";
|
|
import { getAllResources } from "@/lib/resources";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "The Micromelon Rover",
|
|
description:
|
|
"Long battery life, tough, and packed with sensors to make a great classroom tool. Connect and run code in seconds.",
|
|
};
|
|
|
|
const activities = [
|
|
{
|
|
title: "Maze Solving",
|
|
description:
|
|
"Program the rover to solve the maze. Use your ultrasonic and IR sensors to detect the walls and find the path to success.",
|
|
icon: (
|
|
<svg className="h-8 w-8 text-brand" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: "Balance Challenges",
|
|
description:
|
|
"The accelerometer and gyroscope are how the rover senses movement. Use these sensors with maths and physics concepts to teach the rover to balance.",
|
|
icon: (
|
|
<svg className="h-8 w-8 text-brand" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0012 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 01-2.031.352 5.988 5.988 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 01-2.031.352 5.989 5.989 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: "Driving Practice",
|
|
description:
|
|
"Design and code an algorithm that uses all of the sensors to drive a course while watching for road markings, turning signs, and other robot drivers.",
|
|
icon: (
|
|
<svg className="h-8 w-8 text-brand" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: "Sumo",
|
|
description:
|
|
"Use a combination of sensors to create a program to push opponents out of the arena. Raise the stakes with 3D printed attachments.",
|
|
icon: (
|
|
<svg className="h-8 w-8 text-brand" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: "Line Following",
|
|
description:
|
|
"Learn the basics of branching and loops by coding the rover to use its colour sensors to detect and follow the line.",
|
|
icon: (
|
|
<svg className="h-8 w-8 text-brand" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
const teachableConcepts = [
|
|
"Accelerometer",
|
|
"Algorithm Design",
|
|
"Branching",
|
|
"Colour Sensors",
|
|
"Functions",
|
|
"Gyroscope",
|
|
"IR Distance Sensor",
|
|
"Loops",
|
|
"Maths",
|
|
"Ultrasonic",
|
|
"Variables",
|
|
];
|
|
|
|
const techSpecs = [
|
|
"Ultrasonic Distance Sensor",
|
|
"3x Colour Sensors",
|
|
"3 Axis Accelerometer",
|
|
"2x IR Distance Sensors",
|
|
"3 Axis Gyroscope",
|
|
"2x Motorised Tracks",
|
|
"2x Servo Motor Connectors",
|
|
"Universal Expansion Header",
|
|
"Battery voltage & current sensor",
|
|
"Rechargeable Battery",
|
|
];
|
|
|
|
export default function RoverPage() {
|
|
const resources = getAllResources();
|
|
const relatedResources = resources
|
|
.filter((r) =>
|
|
r.categories.includes("Getting Started") ||
|
|
r.categories.includes("Activities")
|
|
)
|
|
.slice(0, 3);
|
|
|
|
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">
|
|
The Micromelon Rover
|
|
</h1>
|
|
<p className="mt-6 text-lg text-foreground-light">
|
|
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
|
|
src="/images/hero/rover-hero.jpg"
|
|
alt="Micromelon Rover"
|
|
width={700}
|
|
height={467}
|
|
className="w-full rounded-2xl shadow-lg"
|
|
priority
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
{/* Activities */}
|
|
<section className="border-t border-border bg-muted py-20">
|
|
<Container>
|
|
<SectionHeading
|
|
title="Activities"
|
|
subtitle="Explore the wide range of activities students can complete with the Micromelon Rover."
|
|
/>
|
|
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{activities.map((activity) => (
|
|
<Card key={activity.title}>
|
|
<div className="mb-4">{activity.icon}</div>
|
|
<h3 className="text-lg font-semibold text-foreground">
|
|
{activity.title}
|
|
</h3>
|
|
<p className="mt-2 text-sm text-foreground-light">
|
|
{activity.description}
|
|
</p>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
{/* Teachable Concepts */}
|
|
<section className="bg-white py-20">
|
|
<Container>
|
|
<SectionHeading
|
|
title="Teachable Concepts"
|
|
subtitle="The Micromelon Rover covers a wide range of digital technologies and STEM concepts."
|
|
/>
|
|
<div className="flex flex-wrap justify-center gap-3">
|
|
{teachableConcepts.map((concept) => (
|
|
<span
|
|
key={concept}
|
|
className="rounded-full border border-border bg-muted px-4 py-2 text-sm font-medium text-foreground"
|
|
>
|
|
{concept}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
{/* 3D Printing */}
|
|
<section className="border-t border-border bg-muted py-20">
|
|
<Container>
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
|
|
Use 3D Printing to go further!
|
|
</h2>
|
|
<p className="mt-6 text-foreground-light">
|
|
Out of the box Micromelon Rovers are full of sensors and tools
|
|
catering for all skill levels. For more advanced exercises,
|
|
students can design and 3D print their own clip on extensions for
|
|
the rover.
|
|
</p>
|
|
<div className="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
|
|
<Button href="/rover-expansion-3d-printing">
|
|
Expansion & 3D Printing
|
|
</Button>
|
|
<Button href="/store" variant="outline">
|
|
Build Your Kit
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
{/* Easy to Manage */}
|
|
<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/products/case.png"
|
|
alt="Rover class set carry case with charging dock"
|
|
width={560}
|
|
height={400}
|
|
className="w-full max-w-lg rounded-2xl"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
|
|
Easy to Manage
|
|
</h2>
|
|
<p className="mt-6 text-foreground-light">
|
|
Rover class sets come in a hard carry case with included
|
|
charging dock. All ten robots can be charged at once from a
|
|
single outlet.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
{/* Add Your Own Electronics */}
|
|
<section className="border-t border-border bg-muted py-20">
|
|
<Container>
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
|
|
Add Your Own Electronics
|
|
</h2>
|
|
<p className="mt-6 text-foreground-light">
|
|
Rovers have built-in expansion headers compatible with a range of
|
|
3rd party electronics including Raspberry Pi, Arduino and other
|
|
sensors.
|
|
</p>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
{/* Tech Specs */}
|
|
<section className="bg-white py-20">
|
|
<Container>
|
|
<div className="grid items-center gap-12 md:grid-cols-2">
|
|
<div>
|
|
<h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
|
|
Tech Specs
|
|
</h2>
|
|
<ul className="mt-8 grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
{techSpecs.map((spec) => (
|
|
<li
|
|
key={spec}
|
|
className="flex items-start gap-2 text-foreground-light"
|
|
>
|
|
<span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand" />
|
|
{spec}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="flex justify-center">
|
|
<Image
|
|
src="/images/products/rover-specs.png"
|
|
alt="Micromelon Rover technical specifications"
|
|
width={560}
|
|
height={400}
|
|
className="w-full max-w-lg rounded-2xl"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
{/* Related Resources */}
|
|
<RelatedResources
|
|
resources={relatedResources}
|
|
seeAllHref="/resources"
|
|
seeAllLabel="See all resources"
|
|
/>
|
|
|
|
{/* Code Editor CTA */}
|
|
<section className="bg-brand py-16">
|
|
<Container>
|
|
<div className="text-center">
|
|
<h2 className="text-3xl font-bold text-foreground sm:text-4xl">
|
|
Curious How To Program The Rover?
|
|
</h2>
|
|
<p className="mt-4 text-lg text-foreground-light">
|
|
The best thing about the Rover is how easy it is to program. Use
|
|
blocks and text at the same time with our Code Editor.
|
|
</p>
|
|
<div className="mt-8">
|
|
<Button
|
|
href="/code-editor"
|
|
className="bg-foreground text-white hover:bg-foreground-light"
|
|
>
|
|
EXPLORE THE CODE EDITOR
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|