Consistent hero layouts, activity page redesign, new content, and YouTube embeds

- 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>

content/resources/colourful-sounds.mdx

@@ -3,6 +3,8 @@ title: "Activity: Colourful Sounds"
 date: "2021-06-03"
 categories: ["Activities", "All"]
 tags: ["Colour Sensors", "Iteration", "Buzzer", "LEDs", "Maths", "Intermediate"]
+codingSkills: ["Iteration", "Maths"]
+roverConcepts: ["Colour", "Buzzer", "LEDs"]
 excerpt: "Learn iteration and how to use the colour sensor, LEDs, and buzzer."
 featuredImage: "/images/resources/colourful-sounds.png"
 ---
@@ -10,50 +12,6 @@ featuredImage: "/images/resources/colourful-sounds.png"
 
 Create a program that allows our robot to translate data from the colour sensors to display on the LEDs and play sounds. When you move your rover over new colours the LEDs will match that surface colour and create sound unique to that colour.
 
-####
-  Relevant Coding Skills
-
-    Branching
-
-	-->
-
-    Iteration
-
-    Functions
-
-    Variables
-
-	-->
-
-    Algorithm Design
-
-  -->
-
-    Maths
-
-####
-   Relevant Rover Concepts
-
-    Ultrasonic
-
- -->
-
-    IR
-
-	 -->
-
-    Colour
-
-    Gyroscope
-
-    Accelerometer
-
-    Motors
-
-    LEDs
-
-    Buzzer
-
 ![](/images/content/49a8ec-colourfulsounds.png)
 
             Activity Demonstration