fix: Standardize import statements and improve code formatting in installation guides

Author: rahul-vyas-dev

src/components/Installation-guid/Fedora.tsx

@@ -1,11 +1,12 @@
-import {motion} from 'framer-motion'
+import { motion } from 'framer-motion';
 import img1 from '../../../public/assets/Images/fedora-step1.webp';
+
 function Fedora() {
   return (
     <>
       <main>
         <motion.article className="mx-auto p-6 flex items-center flex-col max-w-10/12">
-          <h1 className=" text-4xl font-sans font-bold text-center">
+          <h1 className="text-4xl font-sans font-bold text-center">
             Steps to install Sugar using Fedora
           </h1>
 

src/components/Installation-guid/Raspbian.tsx

@@ -1,5 +1,6 @@
 import { motion } from 'framer-motion';
 import img1 from '../../../public/assets/Images/fedora-step1.webp';
+
 function Raspbian() {
   return (
     <div className="w-full max-w-3xl mx-auto p-6 space-y-6">
@@ -9,7 +10,7 @@ function Raspbian() {
         Raspberry Pi devices are small, low-cost computers that work well with
         Sugar. To use Sugar, you'll need a display, keyboard, and mouse.
       </p>
-          <img src={ `${img1}`} alt="" />
+      <img src={`${img1}`} alt="" />
       <motion.section
         className="space-y-3"
         initial={{ opacity: 0, x: 0 }}

src/components/Installation-guid/Ubuntu.tsx

@@ -1,5 +1,6 @@
 import { motion } from 'framer-motion';
-import img1 from '../../../public/assets/Images/guid-image-1.webp'
+import img1 from '../../../public/assets/Images/guid-image-1.webp';
+
 function Ubuntu() {
   return (
     <>

src/components/TryNow/LogoCards.tsx

@@ -10,7 +10,12 @@ interface LogoCard {
   logo: string;
   title: string;
   description: string[];
-  buttons?: { text: string; value?: string; target?: string; link?:string}[];
+  buttons?: {
+    text: string;
+    value?: string;
+    target?: string;
+    link?: string;
+  }[];
 }
 
 const LogoCards = ({ data }: { data: LogoCard[] }) => {
@@ -80,17 +85,17 @@ const LogoCards = ({ data }: { data: LogoCard[] }) => {
         <b className="text-center">
           <a
             href="https://wiki.sugarlabs.org/go/Installation#Raspberry_Pi"
-            className=" hover:text-blue-800 underline"
+            className="hover:text-blue-800 underline"
           >
             visit here for more info
           </a>
         </b>
       </section>
       <section>
-        {selectedOS == 'Fedora' && <Fedora />}
-        {selectedOS == 'Ubuntu' && <Ubuntu />}
-        {selectedOS == 'Debian' && <Debian />}
-        {selectedOS == 'Raspbian' && <Raspbian />}
+        {selectedOS === 'Fedora' && <Fedora />}
+        {selectedOS === 'Ubuntu' && <Ubuntu />}
+        {selectedOS === 'Debian' && <Debian />}
+        {selectedOS === 'Raspbian' && <Raspbian />}
       </section>
     </>
   );