add description

src/components/ControlSection.tsx

@@ -2,7 +2,7 @@ import { ReactNode, Ref } from "react";
 
 interface ControlSectionProps {
     title: string;
-    description?: string;
+    description?: string | ReactNode;
     id?: string;
     refto?: Ref<HTMLDivElement>
     stack: ReactNode;
@@ -24,7 +24,7 @@ export default function ControlSection ({
                     <h2 className="text-4xl font-poppins font-bold leading-normal mb-4">
                         {title}
                     </h2>
-                    <p>{description}</p>
+                    {description && <p className="mb-8">{description}</p>}
                     <div className={`flex flex-wrap gap-6`}>
                         {stack}
                     </div>

src/components/landing/ControlLED.tsx

@@ -22,6 +22,9 @@ function ControlLED ({ refto }: { refto?: Ref<HTMLDivElement> }) {
         <ControlSection
             title="LED"
             id="led"
+            description={<>
+            Light Emitting Diode {"("}LED{")"} is one of the simplest Arduino electronics components, it is a type of semiconductor diode that produces light when an electric current flows through it.
+            </>}
             refto={refto}
             stack={(<>
                 {leds.map((led, i) => (

src/components/landing/ControlPiezo.tsx

@@ -33,7 +33,7 @@ function PiezoItem ({ piezo, index }: { piezo: DynamicPinState, index: number })
                     if (!Number.isNaN(freq)) setFrequency(piezo.pin, freq);
                 }}
             />
-            <Button.Primary className="text-sm py-0 h-11">Play</Button.Primary>
+            <Button.Primary className="text-sm !py-0 h-11">Play</Button.Primary>
         </div>
     )
 }
@@ -56,6 +56,9 @@ function ControlPiezo ({ refto }: { refto?: Ref<HTMLDivElement> }) {
         <ControlSection
             title="Piezo Buzzer"
             id="piezo"
+            description={<>
+            Piezo buzzer is a type of transducer that converts electrical signals into sound. It uses piezoelectric elements to generate mechanical vibrations that then produce sound. Piezo buzzer can produce sound with a given frequency depending on its characteristics
+            </>}
             refto={refto}
             stack={(<>
                 {piezos.map((piezo, i) => (

src/components/landing/ControlRgbLed.tsx

@@ -148,6 +148,9 @@ function ControlRgbLed ({ refto }: { refto?: Ref<HTMLDivElement> }) {
                     <h2 className="text-4xl font-poppins font-bold leading-normal mb-4">
                         RGB LED
                     </h2>
+                    <div className="grid grid-cols-8 mb-8">
+                        <p className="col-span-6">RGB LED is a type of Light Emitting Diode that has the ability to produce light in three basic colors, red {"("}R{")"}, green {"("}G{")"}, and blue {"("}B{")"}. By controlling the intensity of these three colors separately, RGB LEDs allow the creation of a variety of different colors</p>
+                    </div>
                     <div className={`grid grid-cols-9 gap-6`}>
                         {rgbLed.map((led, i) => (
                         <HorizontalBar

src/components/landing/Hero.tsx

@@ -36,10 +36,10 @@ function Hero ({ img, shortNav, refs }: InHero) {
                             >{name}</Button>
                         ))}
                     </div>
-                    <div className="absolute left-0 -bottom-24">
+                    <div className="absolute left-0 -bottom-24 group">
                         Made By
                         <a href="https://github.com/norman-andrians" target="_blank">
-                            <img className="inline hover:animate-wewew" src={NolaImg} />
+                            <img className="inline group-hover:animate-wewew" src={NolaImg} />
                         </a>
                         Norman Andrians
                     </div>

src/css/index.css

@@ -32,9 +32,10 @@
 
 @keyframes wewew {
     0% { transform: scale(1, 1); }
-    25% { transform: scale(1.1, .9); }
+    12% { transform: scale(1.1, .9); }
-    50% { transform: scale(.9, 1.1); }
+    25% { transform: scale(.9, 1.1); }
-    75% { transform: scale(1.1, .9); }
+    37% { transform: scale(1.1, .9); }
+    50% { transform: scale(1, 1); }
     100% { transform: scale(1, 1); }
 }
 

tailwind.config.js

@@ -24,7 +24,7 @@ export default {
       animation: {
         'size-in': 'size-in .3s ease-in-out',
         'fade-in': 'fade-in .3s ease-in-out',
-        'wewew': 'wewew .45s ease-in-out',
+        'wewew': 'wewew .9s ease-in-out infinite',
       }
     },
   },