Build Your Kit page and full Micromelon website
Complete website build including: - Build Your Kit store page with cart system, sectioned layout (Hardware, Software, Attachments, Spare Parts), inline quote request form, and sticky sidebar summary - 16+ pages: Education, Platform, Resources, News, About Us, Download, Contact, Rover, Code Editor, Robot Simulator, etc. - 89+ MDX resource articles and 18 news posts - Store product images scraped from micromelon.com.au - Quote request API route with Airtable integration - Dynamic back links and cover photos on resource pages - Redesigned downloads page - Fixed corrupted MDX code blocks
This commit is contained in:
Tim Hadwen
293
src/app/rover/page.tsx
Normal file
293
src/app/rover/page.tsx
Normal file
@@ -0,0 +1,293 @@
|
||||
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";
|
||||
|
||||
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() {
|
||||
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>
|
||||
<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">
|
||||
Visit Store
|
||||
</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>
|
||||
|
||||
{/* 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user