Added guide to install suger on raspberry using different os

src/components/TryNow/LogoCard.tsx

@@ -0,0 +1,38 @@
+import { motion } from 'framer-motion';
+import { logoCardAnimations } from '@/styles/Animations';
+import type { LogoCard } from './LogoCards';
+
+const LogoCard = ({ logo, title, onClick, selected }: LogoCard) => {
+  return (
+    <motion.div
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      onClick={() => onClick && onClick()}
+      onKeyDown={(e) => {
+        if (onClick && (e.key === 'Enter' || e.key === ' ')) onClick();
+      }}
+      aria-pressed={selected}
+      className={`bg-white dark:bg-gray-800 shadow-lg rounded-xl p-6 flex flex-col items-center text-center border ${selected ? 'border-blue-600 dark:border-blue-300' : 'border-blue-500 dark:border-blue-400'} cursor-pointer`}
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, amount: 0.2 }}
+      variants={logoCardAnimations.card}
+      whileHover="hover"
+      animate={selected ? 'hover' : 'visible'}
+    >
+      <motion.div
+        className="w-24 h-24 bg-yellow-300 flex items-center justify-center rounded-full"
+        whileHover="hover"
+        variants={logoCardAnimations.logoContainer}
+      >
+        <img src={logo} alt={title} className="w-12 h-12" />
+      </motion.div>
+
+      <h3 className="text-xl font-bold text-blue-600 dark:text-blue-400 mt-4">
+        {title}
+      </h3>
+    </motion.div>
+  );
+};
+
+export default LogoCard;

src/components/TryNow/LogoCards.tsx

@@ -1,11 +1,13 @@
 import { motion } from 'framer-motion';
 import { logoCardAnimations } from '@/styles/Animations';
 
-interface LogoCard {
+export interface LogoCard {
   logo: string;
   title: string;
-  description: string[];
+  description?: string[];
   buttons?: { text: string; link: string }[];
+  onClick?: () => void;
+  selected?: boolean;
 }
 
 const LogoCards = ({ data }: { data: LogoCard[] }) => {
@@ -41,7 +43,7 @@ const LogoCards = ({ data }: { data: LogoCard[] }) => {
 
           {/* Description */}
           <ul className="text-gray-600 dark:text-gray-300 text-sm text-left list-disc list-inside">
-            {card.description.map((point, i) => (
+            {card.description?.map((point, i) => (
               <li key={i}>{point}</li>
             ))}
           </ul>

src/components/TryNow/StepsToUse.tsx

@@ -1,17 +1,26 @@
 import 'react-responsive-carousel';
 import { Carousel } from 'react-responsive-carousel';
-import { steps } from '@/constants/TryNowData/bootableSoasData';
 import { useState } from 'react';
 import DOMPurify from 'dompurify';
 import { renderContentWithLinks } from '@/utils/renderlinks-utils';
+import { steps } from '@/constants/TryNowData/bootableSoasData';
 
-const StepsToUse = () => {
+const StepsToUse = ({ heading, StepData }: steps) => {
   const [currentStep, setCurrentStep] = useState(0);
+  const [copied, setCopied] = useState(false);
+
+  function clicktocopy(command: string) {
+    navigator.clipboard.writeText(command).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  }
 
   return (
     <section className="w-[90%] mx-auto py-8">
+      {/* Heading */}
       <h2 className="text-3xl font-bold text-center text-black dark:text-white mb-6">
-        Steps to Boot Sugar on a Stick
+        {heading}
       </h2>
 
       <div className="relative w-full sm:w-[80%] md:w-[70%] lg:w-[60%] mx-auto">
@@ -25,7 +34,7 @@ const StepsToUse = () => {
           useKeyboardArrows
           infiniteLoop
         >
-          {steps.map((step, index) => (
+          {StepData.map((step, index) => (
             <div key={index} className="relative text-center">
               {/* TEXT CONTENT */}
               <div className="text-lg font-semibold text-gray-600 dark:text-gray-400">
@@ -42,7 +51,57 @@ const StepsToUse = () => {
                   ),
                 }}
               />
-
+              {/* Command */}
+              {step.commands && (
+                <div className="overflow-x-auto overflow-y-hidden commands-scroll w-full mt-4">
+                  <div className="relative group inline-flex min-w-max items-center gap-3 px-4 py-2 rounded-lg border border-gray-200/5 bg-slate-800 text-white dark:bg-slate-800 dark:text-white">
+                    <button
+                      onClick={() => {
+                        clicktocopy(step.commands || '');
+                      }}
+                      className="absolute top-1 right-1 text-gray-400 hover:text-white transition"
+                    >
+                      {copied ? (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="h-4 w-4 text-green-400"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                        >
+                          <path d="M5 13l4 4L19 7" />
+                        </svg>
+                      ) : (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="h-4 w-4"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                        >
+                          <rect
+                            x="9"
+                            y="9"
+                            width="13"
+                            height="13"
+                            rx="2"
+                            ry="2"
+                          />
+                          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                        </svg>
+                      )}
+                    </button>
+                    <button
+                      onClick={() => clicktocopy(step.commands || '')}
+                      className="p-2 text-white rounded cursor-pointer whitespace-nowrap font-mono text-sm text-gray-200 truncate"
+                    >
+                      {`$ ${step.commands}`}
+                    </button>
+                  </div>
+                </div>
+              )}
               {/* IMAGE + HOVER ARROWS */}
               <div className="relative group mx-auto mt-4 rounded-lg shadow-lg overflow-hidden">
                 <img
@@ -62,7 +121,7 @@ const StepsToUse = () => {
                 )}
 
                 {/* RIGHT HOVER AREA */}
-                {index < steps.length - 1 && (
+                {index < StepData.length - 1 && (
                   <div
                     className="absolute right-0 top-0 h-full w-1/4 bg-gradient-to-l from-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 cursor-pointer z-10"
                     onClick={() => setCurrentStep(currentStep + 1)}

src/constants/TryNowData/bootableSoasData.ts

@@ -8,73 +8,88 @@ export const bootableSoasData = {
   images: [{ src: 'assets/TryNowImages/step7.webp', alt: 'Boot SOAS step 7' }],
 };
 
-interface StepData {
+export interface StepData {
   step: number;
   title: string;
   description: string;
   image: string;
   links?: { text: string; url: string }[];
+  // Optional shell commands or CLI steps related to this step
+  commands?: string;
 }
 
-export const steps: StepData[] = [
+// Group of steps with an optional identifier and heading
+export interface steps {
+  heading: string;
+  StepData: StepData[];
+  // Optional identifier used by some pages to match logo cards
+  is?: string;
+}
+
+export const SugarSteps: steps[] = [
   {
-    step: 1,
-    title: 'Sugar On a Stick',
-    description:
-      'To boot Sugar Labs OS on your computer, you will need a bootable Sugar on Stick setup already. To see how to set it up, visit the wiki.',
-    links: [
+    heading: 'Steps to boot Sugar on a Stick',
+    StepData: [
       {
-        text: 'wiki',
-        url: 'https://wiki.sugarlabs.org/go/Sugar_on_a_Stick/Installation',
+        step: 1,
+        title: 'Sugar On a Stick',
+        description:
+          'To boot Sugar Labs OS on your computer, you will need a bootable Sugar on Stick setup already. To see how to set it up, visit the wiki.',
+        links: [
+          {
+            text: 'wiki',
+            url: 'https://wiki.sugarlabs.org/go/Sugar_on_a_Stick/Installation',
+          },
+        ],
+        image: 'assets/TryNowImages/step1.webp',
+      },
+      {
+        step: 2,
+        title: 'Insert the USB Drive',
+        description:
+          'Plug the prepared Sugar on a Stick USB drive into an available USB port on your computer.',
+        image: 'assets/TryNowImages/step2.webp',
+      },
+      {
+        step: 3,
+        title: 'Access Advanced Boot Options (Windows)',
+        description:
+          "On Windows systems, access the advanced boot options by holding the 'Shift' key while clicking 'Restart.' This will bring you to the advanced boot menu.",
+        image: 'assets/TryNowImages/step3.webp',
+      },
+      {
+        step: 4,
+        title: 'Choose to Boot from USB (Windows)',
+        description:
+          "In the advanced boot menu, select 'Use a Device' to proceed with booting from the USB drive.",
+        image: 'assets/TryNowImages/step4.webp',
+      },
+      {
+        step: 5,
+        title: ' Select the USB Drive (Windows)',
+        description:
+          'Choose your USB drive from the list of devices to boot into the Sugar OS.',
+        image: 'assets/TryNowImages/step5.webp',
+      },
+      {
+        step: 6,
+        title: 'Traditional Boot Method (Non-Windows Systems)',
+        description:
+          "For non-Windows computers:Power on your computer and immediately press the appropriate key (commonly F9, F12, or Esc) repeatedly to access the boot menu or BIOS settings. In the boot menu, select your USB drive, often identified by its brand or model name, and press 'Enter' to boot into Sugar.",
+        image: 'assets/TryNowImages/step6.webp',
       },
-    ],
-    image: 'assets/TryNowImages/step1.webp',
-  },
-  {
-    step: 2,
-    title: 'Insert the USB Drive',
-    description:
-      'Plug the prepared Sugar on a Stick USB drive into an available USB port on your computer.',
-    image: 'assets/TryNowImages/step2.webp',
-  },
-  {
-    step: 3,
-    title: 'Access Advanced Boot Options (Windows)',
-    description:
-      "On Windows systems, access the advanced boot options by holding the 'Shift' key while clicking 'Restart.' This will bring you to the advanced boot menu.",
-    image: 'assets/TryNowImages/step3.webp',
-  },
-  {
-    step: 4,
-    title: 'Choose to Boot from USB (Windows)',
-    description:
-      "In the advanced boot menu, select 'Use a Device' to proceed with booting from the USB drive.",
-    image: 'assets/TryNowImages/step4.webp',
-  },
-  {
-    step: 5,
-    title: ' Select the USB Drive (Windows)',
-    description:
-      'Choose your USB drive from the list of devices to boot into the Sugar OS.',
-    image: 'assets/TryNowImages/step5.webp',
-  },
-  {
-    step: 6,
-    title: 'Traditional Boot Method (Non-Windows Systems)',
-    description:
-      "For non-Windows computers:Power on your computer and immediately press the appropriate key (commonly F9, F12, or Esc) repeatedly to access the boot menu or BIOS settings. In the boot menu, select your USB drive, often identified by its brand or model name, and press 'Enter' to boot into Sugar.",
-    image: 'assets/TryNowImages/step6.webp',
-  },
-  {
-    step: 7,
-    title: 'Enjoy Sugar on a Stick',
-    description:
-      'After selecting the USB drive, your computer should boot into the Sugar OS interface. If you encounter any issues during the boot process, seek assistance in the Sugar Labs Matrix room. For detailed instructions and additional resources, visit the Sugar Labs Booting SoaS page.',
-    image: 'assets/TryNowImages/step7.webp',
-    links: [
       {
-        text: 'Matrix room',
-        url: 'https://matrix.to/#/#sugar:matrix.org',
+        step: 7,
+        title: 'Enjoy Sugar on a Stick',
+        description:
+          'After selecting the USB drive, your computer should boot into the Sugar OS interface. If you encounter any issues during the boot process, seek assistance in the Sugar Labs Matrix room. For detailed instructions and additional resources, visit the Sugar Labs Booting SoaS page.',
+        image: 'assets/TryNowImages/step7.webp',
+        links: [
+          {
+            text: 'Matrix room',
+            url: 'https://matrix.to/#/#sugar:matrix.org',
+          },
+        ],
       },
     ],
   },