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
164
src/app/platform/page.tsx
Normal file
164
src/app/platform/page.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
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";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Micromelon Robotics Platform",
|
||||
description:
|
||||
"The Micromelon Platform provides an easy way to get started with programming in blocks, a high ceiling for advanced students, and a simulator for learning anywhere.",
|
||||
};
|
||||
|
||||
export default function PlatformPage() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero / Intro */}
|
||||
<section className="bg-white py-16 sm:py-24">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Micromelon Rover */}
|
||||
<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/products/rover-candid.png"
|
||||
alt="Micromelon Rover"
|
||||
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">
|
||||
Micromelon Rover
|
||||
</h2>
|
||||
<p className="mt-6 text-foreground-light">
|
||||
The Micromelon Rover is much more than a robot, it is an
|
||||
expansive STEM resource that empowers students to explore
|
||||
what'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
|
||||
box, Micromelon Rovers are full of sensors and tools, and are
|
||||
designed to grow with your students at all stages of the learning
|
||||
process.
|
||||
</p>
|
||||
<div className="mt-8">
|
||||
<Button href="/rover">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' 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>
|
||||
|
||||
{/* Code Editor */}
|
||||
<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/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>
|
||||
<h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
|
||||
Code Editor
|
||||
</h2>
|
||||
<p className="mt-6 text-foreground-light">
|
||||
The Micromelon Code Editor makes it really easy for students to
|
||||
start coding. Students can simply drag-and-drop code blocks to
|
||||
start programming their robots. And, with the side-by-side
|
||||
editor, students can see the associated Python code. When your
|
||||
students are ready to advance, they can unlock the full potential
|
||||
of Python.
|
||||
</p>
|
||||
<div className="mt-8">
|
||||
<h3 className="text-lg font-semibold text-foreground">
|
||||
Classroom Management
|
||||
</h3>
|
||||
<ul className="mt-3 space-y-2 text-foreground-light">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand" />
|
||||
Mute & Disable Student Robots
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand" />
|
||||
Hide Screens
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand" />
|
||||
Send and Recall student work at any time
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand" />
|
||||
Lock students to Block or Python programming
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="mt-8">
|
||||
<Button href="/code-editor">Learn more</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user