diff --git a/public/assets/TryNowImages/debian-step1.webp b/public/assets/TryNowImages/debian-step1.webp new file mode 100644 index 00000000..6c9bec8b Binary files /dev/null and b/public/assets/TryNowImages/debian-step1.webp differ diff --git a/public/assets/TryNowImages/debian-step4.webp b/public/assets/TryNowImages/debian-step4.webp new file mode 100644 index 00000000..588f757e Binary files /dev/null and b/public/assets/TryNowImages/debian-step4.webp differ diff --git a/public/assets/TryNowImages/fedora-step1.webp b/public/assets/TryNowImages/fedora-step1.webp new file mode 100644 index 00000000..c7407b7a Binary files /dev/null and b/public/assets/TryNowImages/fedora-step1.webp differ diff --git a/public/assets/TryNowImages/fedora-step2.webp b/public/assets/TryNowImages/fedora-step2.webp new file mode 100644 index 00000000..4744f7fb Binary files /dev/null and b/public/assets/TryNowImages/fedora-step2.webp differ diff --git a/public/assets/TryNowImages/fedora-step3.webp b/public/assets/TryNowImages/fedora-step3.webp new file mode 100644 index 00000000..f88f8598 Binary files /dev/null and b/public/assets/TryNowImages/fedora-step3.webp differ diff --git a/public/assets/TryNowImages/raspberry-install.webp b/public/assets/TryNowImages/raspberry-install.webp new file mode 100644 index 00000000..a9376946 Binary files /dev/null and b/public/assets/TryNowImages/raspberry-install.webp differ diff --git a/public/assets/TryNowImages/raspberry-reboot.webp b/public/assets/TryNowImages/raspberry-reboot.webp new file mode 100644 index 00000000..2ee8f105 Binary files /dev/null and b/public/assets/TryNowImages/raspberry-reboot.webp differ diff --git a/public/assets/TryNowImages/raspbian-step1.webp b/public/assets/TryNowImages/raspbian-step1.webp new file mode 100644 index 00000000..29c24b87 Binary files /dev/null and b/public/assets/TryNowImages/raspbian-step1.webp differ diff --git a/public/assets/TryNowImages/raspbian-step2.webp b/public/assets/TryNowImages/raspbian-step2.webp new file mode 100644 index 00000000..e05e543e Binary files /dev/null and b/public/assets/TryNowImages/raspbian-step2.webp differ diff --git a/public/assets/TryNowImages/raspbian-step3.webp b/public/assets/TryNowImages/raspbian-step3.webp new file mode 100644 index 00000000..d47d4496 Binary files /dev/null and b/public/assets/TryNowImages/raspbian-step3.webp differ diff --git a/public/assets/TryNowImages/raspbian-step4.webp b/public/assets/TryNowImages/raspbian-step4.webp new file mode 100644 index 00000000..64182f17 Binary files /dev/null and b/public/assets/TryNowImages/raspbian-step4.webp differ diff --git a/public/assets/TryNowImages/raspbian-step6.webp b/public/assets/TryNowImages/raspbian-step6.webp new file mode 100644 index 00000000..2a5036b0 Binary files /dev/null and b/public/assets/TryNowImages/raspbian-step6.webp differ diff --git a/public/assets/TryNowImages/raspbian-step7.webp b/public/assets/TryNowImages/raspbian-step7.webp new file mode 100644 index 00000000..87dbbe39 Binary files /dev/null and b/public/assets/TryNowImages/raspbian-step7.webp differ diff --git a/public/assets/TryNowImages/ubuntu-step1.webp b/public/assets/TryNowImages/ubuntu-step1.webp new file mode 100644 index 00000000..2be3bf12 Binary files /dev/null and b/public/assets/TryNowImages/ubuntu-step1.webp differ diff --git a/public/assets/TryNowImages/ubuntu-step4.webp b/public/assets/TryNowImages/ubuntu-step4.webp new file mode 100644 index 00000000..5f8b1960 Binary files /dev/null and b/public/assets/TryNowImages/ubuntu-step4.webp differ diff --git a/src/components/TryNow/LogoCard.tsx b/src/components/TryNow/LogoCard.tsx new file mode 100644 index 00000000..9cd7af27 --- /dev/null +++ b/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 ( + 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'} + > + + {title} + + +

+ {title} +

+ + ); +}; + +export default LogoCard; diff --git a/src/components/TryNow/LogoCards.tsx b/src/components/TryNow/LogoCards.tsx index 107be98d..16430454 100644 --- a/src/components/TryNow/LogoCards.tsx +++ b/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 */} diff --git a/src/components/TryNow/StepsToUse.tsx b/src/components/TryNow/StepsToUse.tsx index 7557da5e..30119ca4 100644 --- a/src/components/TryNow/StepsToUse.tsx +++ b/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 (
+ {/* Heading */}

- Steps to Boot Sugar on a Stick + {heading}

@@ -25,7 +34,7 @@ const StepsToUse = () => { useKeyboardArrows infiniteLoop > - {steps.map((step, index) => ( + {StepData.map((step, index) => (
{/* TEXT CONTENT */}
@@ -42,7 +51,57 @@ const StepsToUse = () => { ), }} /> - + {/* Command */} + {step.commands && ( +
+
+ + +
+
+ )} {/* IMAGE + HOVER ARROWS */}
{ )} {/* RIGHT HOVER AREA */} - {index < steps.length - 1 && ( + {index < StepData.length - 1 && (
setCurrentStep(currentStep + 1)} diff --git a/src/constants/TryNowData/bootableSoasData.ts b/src/constants/TryNowData/bootableSoasData.ts index e1792608..1cd271fb 100644 --- a/src/constants/TryNowData/bootableSoasData.ts +++ b/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', + }, + ], }, ], }, diff --git a/src/constants/TryNowData/raspberryPiData.ts b/src/constants/TryNowData/raspberryPiData.ts index fef3fa7b..a67a1fa8 100644 --- a/src/constants/TryNowData/raspberryPiData.ts +++ b/src/constants/TryNowData/raspberryPiData.ts @@ -1,3 +1,5 @@ +import { steps } from './bootableSoasData'; + export const raspberrydata = { title: 'Raspberry-Pi', subtitle: 'Sugar on RaspberryPi', @@ -105,3 +107,216 @@ export const raspberryLogoCards = [ ], }, ]; + +export const raspberrySteps: steps[] = [ + { + heading: 'Steps to install Sugar using Raspbian', + StepData: [ + { + step: 1, + title: 'Download Raspberry Pi OS', + description: + 'Download the latest Raspberry Pi OS image formerly known as Raspbian from the official Raspberry Pi website', + links: [ + { + text: 'website', + url: 'https://www.raspberrypi.com/software/', + }, + ], + image: 'assets/TryNowImages/raspbian-step1.webp', + }, + { + step: 2, + title: 'Flash the OS to an SD Card', + description: + 'You can use Raspberry app interface and select desired models to be flashed.', + image: 'assets/TryNowImages/raspbian-step2.webp', + }, + { + step: 3, + title: 'Boot Raspberry Pi', + description: + 'Insert the microSD card into your Raspberry Pi and power it on. Follow the on-screen prompts to set up the Raspberry Pi OS.', + image: 'assets/TryNowImages/raspbian-step3.webp', + }, + { + step: 4, + title: 'Update System Packages', + description: 'Once Raspberry Pi OS is up, update the system packages:', + commands: 'sudo apt update; sudo apt upgrade', + image: 'assets/TryNowImages/raspbian-step4.webp', + }, + { + step: 5, + title: 'Install Sugar Desktop Environment', + description: + 'Run the following commands to install the Sugar desktop environment:', + commands: 'sudo apt install sucrose', + image: 'assets/TryNowImages/raspberry-install.webp', + }, + { + step: 6, + title: 'Configure Sugar', + description: 'Configure Sugar as the default desktop environment:', + commands: 'sudo update-alternatives --config x-session-manager', + image: 'assets/TryNowImages/raspbian-step6.webp', + }, + { + step: 7, + title: 'Reboot Raspberry Pi', + description: + 'Reboot your Raspberry Pi to apply the changes and start using Sugar:', + commands: 'sudo reboot', + image: 'assets/TryNowImages/raspberry-reboot.webp', + }, + { + step: 8, + title: 'Enjoy Sugar', + description: + 'After rebooting, your Raspberry Pi should boot into the Sugar desktop environment. You can now explore and use Sugar activities!', + image: 'assets/TryNowImages/step7.webp', + }, + ], + }, + { + heading: 'Steps to install Sugar using Fedora', + StepData: [ + { + step: 1, + title: 'Download Fedora for Raspberry Pi', + description: + 'Download and install the Fedora for Raspberry Pi from the official Fedora website.', + links: [ + { + text: 'website', + url: 'https://getfedora.org/en/workstation/download/', + }, + ], + image: 'assets/TryNowImages/fedora-step1.webp', + }, + { + step: 2, + title: 'Install Sugar on Fedora using Sugar desktop environment', + description: + 'Open a terminal and run the following command to install Sugar:', + commands: 'sudo dnf install sugar', + image: 'assets/TryNowImages/fedora-step2.webp', + }, + { + step: 3, + title: 'Install Sugar using with another desktop environment', + description: + 'If you are using another desktop environment, you can install Sugar with the following command:', + commands: + 'sudo dnf group install sugar-desktop; sudo dnf install sugar-runner; sugar-runner --set-default', + image: 'assets/TryNowImages/fedora-step3.webp', + }, + { + step: 4, + title: 'Reboot Fedora', + description: 'Reboot your Fedora system to apply the changes', + commands: 'sudo reboot', + image: 'assets/TryNowImages/raspberry-reboot.webp', + }, + { + step: 5, + title: 'Enjoy Sugar', + description: + 'After rebooting, your Fedora system should boot into the Sugar desktop environment. You can now explore and use Sugar activities!', + image: 'assets/TryNowImages/step7.webp', + }, + ], + }, + { + heading: 'Steps to install Sugar using Debian', + StepData: [ + { + step: 1, + title: 'Download Debian for Raspberry Pi', + description: + 'Download and install the Debian for Raspberry Pi from the official Debian website.', + links: [ + { + text: 'website', + url: 'https://www.debian.org/', + }, + ], + image: 'assets/TryNowImages/debian-step1.webp', + }, + { + step: 2, + title: 'Install Sugar on Debian ', + description: + 'Open a terminal and run the following command to install Sugar:', + commands: 'sudo apt install sucrose', + image: 'assets/TryNowImages/raspberry-install.webp', + }, + { + step: 3, + title: 'Reboot Debian', + description: 'Reboot your Debian system to apply the changes.', + image: 'assets/TryNowImages/raspberry-reboot.webp', + }, + { + step: 4, + title: 'Login with Sugar', + description: + 'At the login screen, select Sugar from the session options before logging in.', + image: 'assets/TryNowImages/debian-step4.webp', + }, + { + step: 5, + title: 'Enjoy Sugar', + description: + 'After rebooting, your Debian system should boot into the Sugar desktop environment. You can now explore and use Sugar activities!', + image: 'assets/TryNowImages/step7.webp', + }, + ], + }, + { + heading: 'Steps to install Sugar using Ubuntu', + StepData: [ + { + step: 1, + title: 'Download Ubuntu for Raspberry Pi', + description: + 'Download and Install the Ubuntu for Raspberry Pi from the official Ubuntu website.', + links: [ + { + text: 'website', + url: 'https://ubuntu.com/download/raspberry-pi', + }, + ], + image: 'assets/TryNowImages/ubuntu-step1.webp', + }, + { + step: 2, + title: 'Install Sugar on Ubuntu', + description: + 'Open a terminal and run the following command to install Sugar:', + commands: 'sudo apt update; sudo apt install sucrose', + image: 'assets/TryNowImages/raspberry-install.webp', + }, + { + step: 3, + title: 'Reboot Ubuntu', + description: 'Reboot your Ubuntu system to apply the changes', + image: 'assets/TryNowImages/raspberry-reboot.webp', + }, + { + step: 4, + title: 'Login with Sugar', + description: + 'At the login screen, select Sugar from the session options before logging in.', + image: 'assets/TryNowImages/ubuntu-step4.webp', + }, + { + step: 5, + title: 'Enjoy Sugar', + description: + 'After rebooting, your Ubuntu system should boot into the Sugar desktop environment. You can now explore and use Sugar activities!', + image: 'assets/TryNowImages/step7.webp', + }, + ], + }, +]; diff --git a/src/pages/TryNow/BootableSoas.tsx b/src/pages/TryNow/BootableSoas.tsx index e3453d61..b3eb5412 100644 --- a/src/pages/TryNow/BootableSoas.tsx +++ b/src/pages/TryNow/BootableSoas.tsx @@ -6,6 +6,7 @@ import { zoomFadeInAnimation } from '@/styles/Animations'; import { bootableSoasData, mockupImage, + SugarSteps, } from '@/constants/TryNowData/bootableSoasData'; import StepsToUse from '@/components/TryNow/StepsToUse'; @@ -25,7 +26,8 @@ const BootableSoasPage = () => { className="w-[80%] mx-auto" /> - + {/* SugarSteps is an array; pass the first group object to StepsToUse */} +

Cut to the chase and get your pre-installed Sugar on a Stick{' '} diff --git a/src/pages/TryNow/Raspberry.tsx b/src/pages/TryNow/Raspberry.tsx index 8ceb748c..54df9273 100644 --- a/src/pages/TryNow/Raspberry.tsx +++ b/src/pages/TryNow/Raspberry.tsx @@ -2,14 +2,26 @@ import Header from '@/sections/Header'; import Footer from '@/sections/Footer'; import FeatureSection from '@/components/TryNow/FeatureSection'; import Paragraph from '@/components/TryNow/Paragraph'; -import LogoCards from '@/components/TryNow/LogoCards'; +import LogoCard from '@/components/TryNow/LogoCard'; +import { useState, useRef } from 'react'; import { raspberrydata, raspberrySections, raspberryLogoCards, + raspberrySteps, } from '@/constants/TryNowData/raspberryPiData'; +import StepsToUse from '@/components/TryNow/StepsToUse'; const RaspberryPiPage = () => { + const [selectedSteps, setSelectedSteps] = useState(raspberrySteps[0]); + const stepsRef = useRef(null); + + // scroll to steps only when user clicks a card (not on mount or refresh) + const scrollToSteps = () => { + if (stepsRef.current) { + stepsRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + }; return (

@@ -26,7 +38,38 @@ const RaspberryPiPage = () => { links={section.links} /> ))} - +
+ {raspberryLogoCards.map((card, idx) => { + const key = card.title.replace(/^using\s+/i, '').toLowerCase(); + const isSelected = + selectedSteps?.heading.toLowerCase().includes(key) || false; + return ( + { + const found = raspberrySteps.find( + (g) => + g.heading.toLowerCase().includes(key) || g.is === key, + ); + if (found) { + setSelectedSteps(found); + // scroll only when user clicks + // use rAF to ensure layout updated + requestAnimationFrame(() => scrollToSteps()); + } + }} + /> + ); + })} +
+ + {/* Render the currently selected steps group */} +
+ +
diff --git a/src/styles/globals.css b/src/styles/globals.css index e7151732..939e4d25 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -179,6 +179,7 @@ .custom-scrollbar::-webkit-scrollbar { width: 6px; + height: 6px; } .custom-scrollbar::-webkit-scrollbar-track { @@ -208,3 +209,27 @@ scrollbar-width: thin; scrollbar-color: #555 #2d2d2d; } + +/* Horizontal-only scrollbar for command rows. + Keep identical appearance in light and dark modes. +*/ +.commands-scroll::-webkit-scrollbar { + height: 10px; /* horizontal scrollbar height only */ +} +.commands-scroll::-webkit-scrollbar-track { + background: transparent; +} +.commands-scroll::-webkit-scrollbar-thumb { + background-color: rgba(148, 163, 184, 0.4); + border-radius: 6px; +} +.commands-scroll::-webkit-scrollbar-button { + display: none; /* remove arrow buttons on WebKit browsers */ +} +.commands-scroll::-webkit-scrollbar-corner { + background: transparent; /* remove corner square */ +} +.commands-scroll { + scrollbar-width: thin; + scrollbar-color: rgba(148, 163, 184, 0.4) transparent; +}