From c8aa4fffc878ef0a79e2db3cd2187adcd3ec21c9 Mon Sep 17 00:00:00 2001
From: norman-andrians <norman25.na@gmail.com>
Date: Sat, 9 Mar 2024 16:56:32 +0700
Subject: [PATCH] add description

---
 src/components/ControlSection.tsx        | 4 ++--
 src/components/landing/ControlLED.tsx    | 3 +++
 src/components/landing/ControlPiezo.tsx  | 5 ++++-
 src/components/landing/ControlRgbLed.tsx | 3 +++
 src/components/landing/Hero.tsx          | 4 ++--
 src/css/index.css                        | 7 ++++---
 tailwind.config.js                       | 2 +-
 7 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/ControlSection.tsx b/src/components/ControlSection.tsx
index d2fde3b..a89a400 100644
--- a/src/components/ControlSection.tsx
+++ b/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>
diff --git a/src/components/landing/ControlLED.tsx b/src/components/landing/ControlLED.tsx
index 85a2882..2d1f87c 100644
--- a/src/components/landing/ControlLED.tsx
+++ b/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) => (
diff --git a/src/components/landing/ControlPiezo.tsx b/src/components/landing/ControlPiezo.tsx
index e8c5360..a75554f 100644
--- a/src/components/landing/ControlPiezo.tsx
+++ b/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) => (
diff --git a/src/components/landing/ControlRgbLed.tsx b/src/components/landing/ControlRgbLed.tsx
index b4e107b..dd6a02d 100644
--- a/src/components/landing/ControlRgbLed.tsx
+++ b/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
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
index d95588d..2a8aff6 100644
--- a/src/components/landing/Hero.tsx
+++ b/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>
diff --git a/src/css/index.css b/src/css/index.css
index 27a2753..0570bc1 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -32,9 +32,10 @@
 
 @keyframes wewew {
     0% { transform: scale(1, 1); }
-    25% { transform: scale(1.1, .9); }
-    50% { transform: scale(.9, 1.1); }
-    75% { transform: scale(1.1, .9); }
+    12% { transform: scale(1.1, .9); }
+    25% { transform: scale(.9, 1.1); }
+    37% { transform: scale(1.1, .9); }
+    50% { transform: scale(1, 1); }
     100% { transform: scale(1, 1); }
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 920f2b2..2601ced 100644
--- a/tailwind.config.js
+++ b/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',
       }
     },
   },